/* ═══════════════════════════════════════════════════════════════════
   HERO v2 · loop «Diseña · Convence · Vende»
   Adaptado de deco-loop-habitat_1.html (pantalla completa de feria)
   para funcionar como hero de la home, debajo del header sticky.

   - Todo va prefijado dh- / --dh- para no chocar con styles.css,
     que ya usa --ink, .on, .dots, .cta, etc.
   - Las medidas van en cqh / cqw (unidades de contenedor): escalan con
     la caja del hero, igual que el original escalaba con la pantalla.
   - Se carga después de styles.css y solo desde index-v2.html.
   ═══════════════════════════════════════════════════════════════════ */

.dh{
  --dh-bg:#191a1c;
  --dh-ink:#F6F3EC;
  --dh-ink-soft:#C7C3BA;
  --dh-amber:#F2A900;
  --dh-amber-ink:#5c4405;
  --dh-disp:"Poppins",system-ui,sans-serif;
  --dh-sans:"IBM Plex Sans",system-ui,sans-serif;
  --dh-hdr:calc(clamp(68px,5vw,88px) + 1px);   /* alto del header (.hdr .wrap + borde) */
  --dh-pre:44px;                                /* alto del preheader (.pre .wrap) */

  position:relative;
  overflow:hidden;
  height:calc(100vh - var(--dh-pre) - var(--dh-hdr));
  height:calc(100svh - var(--dh-pre) - var(--dh-hdr));
  min-height:520px;
  container:dh / size;
  background:var(--navy);
  color:var(--dh-ink);
  font-family:var(--dh-sans);
}
.dh :is(h1,p){margin:0}
.dh__deck{position:absolute;inset:0}

/* ── diapositivas ── */
.dh__s{position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity .6s ease}
.dh__s.is-on{opacity:1;visibility:visible}

@media (prefers-reduced-motion:no-preference){
  .dh__s.is-on .dh-a{animation:dh-rise .75s cubic-bezier(.2,.7,.2,1) both}
  .dh__s.is-on .dh-d2{animation-delay:.13s}
  .dh__s.is-on .dh-d3{animation-delay:.26s}
  .dh__s.is-on .dh-d4{animation-delay:.39s}
  .dh__s.is-on .dh__photo{animation:dh-kb 6s ease-out both}
}
@keyframes dh-rise{from{opacity:0;transform:translateY(2.6cqh)}to{opacity:1;transform:none}}
@keyframes dh-kb{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ── portada y cierre ── */
.dh__s--center{
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:2.2cqh;padding:0 8cqw;
}
.dh__s--center,.dh__s--bf{
  background:radial-gradient(70cqw 70cqw at 78% 16%,rgba(0,159,227,.25),transparent 60%),var(--dh-bg);
}
.dh__verbs{display:flex;flex-direction:column;gap:.4cqh}
.dh__v{
  font-family:var(--dh-disp);font-weight:800;letter-spacing:-.01em;line-height:.98;
  font-size:min(11cqh,13cqw);text-transform:uppercase;color:var(--dh-ink);
}
.dh__v--hl{color:var(--dh-amber)}
.dh__kicker{font-weight:600;letter-spacing:.34em;text-transform:uppercase;font-size:max(12px,2cqh);color:var(--dh-ink-soft)}
.dh__cta{font-family:var(--dh-disp);font-weight:600;font-size:max(16px,2.6cqh);color:var(--dh-ink);margin-top:1cqh}
.dh__cta b{color:var(--dh-amber);white-space:nowrap}
.dh__cta a{color:inherit;text-decoration:underline;text-decoration-color:var(--dh-amber);text-decoration-thickness:2px;text-underline-offset:.22em}
.dh__cta a:hover{color:var(--dh-amber)}
.dh__cta a:focus-visible{outline:2px solid var(--dh-amber);outline-offset:4px;border-radius:2px}
.dh__cond{font-weight:500;font-size:max(12px,1.7cqh);letter-spacing:.06em;color:var(--dh-ink-soft);opacity:.8}

/* ── separadores (fondo ámbar) ── */
.dh__s--div{background:var(--dh-amber);align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:1.4cqh}
.dh__bigverb{
  font-family:var(--dh-disp);font-weight:800;color:var(--navy-d);
  font-size:min(17cqh,14cqw);letter-spacing:-.02em;line-height:.9;text-transform:uppercase;
}
.dh__subv{font-weight:600;color:var(--navy-d);font-size:max(16px,3cqh)}
.dh__dots{display:flex;gap:max(8px,1.4cqh);margin-top:1cqh}
.dh__dots span{width:max(8px,1.3cqh);height:max(8px,1.3cqh);border-radius:50%;background:var(--navy-d);opacity:.28}
.dh__dots span.is-act{opacity:1}

/* ── mensajes sobre foto ── */
.dh__s--msg{align-items:center}
.dh__photo{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;transform-origin:60% 50%;
}
.dh__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(16,16,18,.9) 0%,rgba(16,16,18,.62) 32%,rgba(16,16,18,.12) 60%,rgba(16,16,18,0) 100%),
  linear-gradient(180deg,rgba(16,16,18,.5) 0%,rgba(16,16,18,0) 24%)}
.dh__txt{position:relative;z-index:2;padding:0 6cqw;max-width:60%;display:flex;flex-direction:column;gap:2.2cqh}
.dh__vtag{font-family:var(--dh-disp);font-weight:800;font-size:max(18px,3.3cqh);letter-spacing:.02em;color:var(--dh-amber);text-transform:uppercase}
.dh__big{
  font-family:var(--dh-disp);font-weight:700;font-size:6.4cqh;line-height:1.03;letter-spacing:-.01em;
  color:#fff;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.dh__small{font-weight:500;font-size:max(15px,2.7cqh);color:#EDE9E0;max-width:24ch;line-height:1.4}
.dh__kick{
  font-weight:600;font-size:max(11px,1.7cqh);letter-spacing:.1em;text-transform:uppercase;color:var(--dh-amber);
  padding-top:1.2cqh;/*border-top:2px solid rgba(242,169,0,.55);*/border-top:2px solid rgba(255,255,255,.25);margin-top:.6cqh;
}

/* ── Black Friday · +50 % de créditos IA (diapositivas 02, 07 y 12) ──
   Tamaños sacados de la muestra, que es el hero a 1920×800: allí 1cqh = 8 px.
   Todo va en --dh-u, que es 1cqh mientras quepa y pasa a depender del ancho
   cuando la caja se estrecha, para que la fila de paquetes no se salga.
   El bloque se centra en la caja (algo bajo, como en la muestra) y el texto
   va alineado a la izquierda.
   Amarillo de la campaña (#FFC629), no el ámbar del resto del hero. */
.dh__s--bf{
  --dh-u:min(1cqh,.88cqw);
  --dh-bf:#FFC629;
  align-items:center;justify-content:center;padding:calc(4.4*var(--dh-u)) 6cqw 0;
  font-family:var(--dh-disp);
}
.dh__bf{display:flex;flex-direction:column;align-items:flex-start}
.dh__bf-tag{
  background:var(--dh-bf);color:var(--dh-bg);border-radius:999px;
  font-weight:700;font-size:calc(2.75*var(--dh-u));line-height:1;letter-spacing:.16em;text-transform:uppercase;
  padding:calc(1.125*var(--dh-u)) calc(3.3*var(--dh-u)) calc(1.125*var(--dh-u)) calc(3.5*var(--dh-u));
}
.dh__bf-title{display:flex;flex-direction:column}
.dh__bf-pct{font-weight:700;font-size:calc(21*var(--dh-u));line-height:.8;letter-spacing:-.06em;margin-left:-.04em;color:var(--dh-bf)}
.dh__bf-head{font-weight:700;font-size:calc(5.43*var(--dh-u));line-height:1.1;letter-spacing:-.01em;color:#fff;margin-top:calc(-.25*var(--dh-u))}
.dh__bf-sub{font-weight:300;font-size:calc(2.5*var(--dh-u));line-height:1.3;color:#ccc}
/* con .dh__bf delante para ganar a .dh :is(h1,p){margin:0} */
.dh__bf .dh__bf-title{margin-top:calc(2.75*var(--dh-u))}
.dh__bf .dh__bf-sub{margin-top:calc(.5*var(--dh-u))}
.dh__bf-packs{display:flex;gap:calc(1.5*var(--dh-u));margin-top:calc(3.3*var(--dh-u))}
.dh__bf-packs li{
  display:flex;flex-direction:column;align-items:center;
  min-width:calc(18.25*var(--dh-u));padding:calc(2*var(--dh-u)) calc(1.3*var(--dh-u)) calc(1.5*var(--dh-u));
  background:#17171a;border:1px solid #2c2c31;
}
.dh__bf-from{display:flex;align-items:center;gap:.35em;font-size:calc(3*var(--dh-u));line-height:1.2;color:#999}
.dh__bf-from svg{width:1.05em;height:1.05em}
.dh__bf-packs b{font-weight:700;font-size:calc(7.35*var(--dh-u));line-height:1.1;letter-spacing:-.01em;color:var(--dh-bf)}
.dh__bf-eur{font-weight:600;font-size:calc(3.25*var(--dh-u));line-height:1.2;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.dh__bf-btn{
  margin-top:calc(2.5*var(--dh-u));
  font-weight:500;font-size:calc(2.5*var(--dh-u));line-height:1.5;color:var(--dh-bf);
  border:1px solid var(--dh-bf);padding:calc(1.8*var(--dh-u)) calc(5.125*var(--dh-u));
  transition:background .2s,color .2s;
}
.dh__bf-btn:hover{background:var(--dh-bf);color:var(--dh-bg)}
.dh__bf-btn:focus-visible{outline:2px solid var(--dh-bf);outline-offset:4px}
.dh__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── precio: cuelga justo debajo del header, visible en todo el scroll ──
   Va dentro del header (que es sticky) y se posiciona respecto a él: al
   cargar queda bajo el header aunque tenga el preheader encima, y al bajar
   lo acompaña pegado arriba. Por encima de las secciones gracias al z-index
   del header (50). Fuera de .dh: sin unidades de contenedor ni --dh-.
   Es un enlace a los planes: a la izquierda la cifra en dos líneas (como
   .pt-price de para-tiendas-v2: «desde» arriba y la cifra destacada) y a la
   derecha el botón «Ver planes». Texto --navy-d sobre ámbar: 7,9:1. */
.dh__price{
  position:absolute;
  top:calc(100% + clamp(16px,2vw,36px));   /* bajo el header + margen */
  right:clamp(16px,4.4vw,84px);
  display:flex;align-items:center;gap:clamp(5px,.5vw,12px);
  background:var(--dh-amber);color:var(--navy-d);text-decoration:none;
  font-weight:700;font-size:clamp(13px,1vw,18px);line-height:1;white-space:nowrap;
  border-radius:999px;padding:clamp(6px,.5vw,9px) clamp(6px,.5vw,9px) clamp(6px,.5vw,9px) clamp(12px,1vw,20px);
  box-shadow:0 5px 20px rgba(0,0,0,.28);
}
.dh__price-amt{display:inline-grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;column-gap:2px;text-align:center}
.dh__price small{grid-column:1 / -1;font-weight:600;font-size:clamp(10px,.7vw,12.5px);text-transform:uppercase;letter-spacing:.14em;opacity:.85}
.dh__price b{font-size:clamp(20px,1.6vw,30px);font-weight:800}
.dh__price-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--navy);color:#fff;font-size:clamp(12px,.85vw,15px);font-weight:700;
  border-radius:999px;padding:clamp(9px,.75vw,13px) clamp(13px,1.1vw,20px);
  transition:background .2s ease;
}
.dh__price-btn svg{transition:transform .2s ease}
.dh__price:hover .dh__price-btn{background:var(--navy-d)}
.dh__price:hover .dh__price-btn svg{transform:translateX(3px)}
/* foco: anillo blanco + azul, para que se vea sobre el hero oscuro y sobre blanco */
.dh__price:focus-visible{outline:3px solid var(--navy-d);outline-offset:3px;box-shadow:0 0 0 3px #fff,0 5px 20px rgba(0,0,0,.28)}
.dh__price.dark{background:#191a1c;color:#fff}
.dh__price.dark small{color:var(--dh-amber)}
.dh__price.dark .dh__price-btn{background:var(--dh-amber);color:var(--navy-d)}
@media (prefers-reduced-motion:reduce){
  .dh__price-btn,.dh__price-btn svg{transition:none}
  .dh__price:hover .dh__price-btn svg{transform:none}
}

/* ── controles (anterior · pausa · siguiente) ── */
.dh__ctrl{position:absolute;right:4.4cqw;bottom:4.4cqh;z-index:30;display:flex;gap:10px}
.dh__btn{
  width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(25,26,28,.45);border:1px solid rgba(246,243,236,.35);color:var(--dh-ink);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s,color .2s,border-color .2s;
}
.dh__btn:hover{background:rgba(25,26,28,.75)}
.dh__btn:focus-visible{outline:2px solid var(--dh-amber);outline-offset:3px}
.dh.is-div .dh__btn{background:rgba(25,26,28,.08);border-color:rgba(25,26,28,.4);color:var(--dh-bg)}
.dh.is-div .dh__btn:hover{background:rgba(25,26,28,.16)}
.dh.is-div .dh__btn:focus-visible{outline-color:var(--dh-bg)}
.dh__btn .dh-ico-play{display:none}
.dh.is-paused .dh__btn .dh-ico-play{display:block}
.dh.is-paused .dh__btn .dh-ico-pause{display:none}

/* ── barra de progreso ── */
.dh__bar{position:absolute;left:0;bottom:0;z-index:30;height:max(4px,.55cqh);width:0;background:var(--dh-amber)}
.dh.is-div .dh__bar{background:var(--navy-d)}

/* ── caja vertical (móvil, tablet en vertical) ── */
@container dh (orientation: portrait){
  .dh__s--center{padding:0 6cqw}
  .dh__s--msg{align-items:flex-end}
  .dh__scrim{background:
    linear-gradient(0deg,rgba(16,16,18,.94) 0%,rgba(16,16,18,.74) 40%,rgba(16,16,18,.1) 72%,rgba(16,16,18,0) 100%),
    linear-gradient(180deg,rgba(16,16,18,.45) 0%,rgba(16,16,18,0) 22%)}
  .dh__txt{max-width:none;width:100%;gap:1.8cqh;padding:0 6cqw calc(44px + 4.4cqh + 24px)}
  .dh__vtag{font-size:min(3.3cqh,5.6cqw)}
  .dh__big{font-size:min(6.4cqh,8.6cqw)}
  .dh__small{font-size:min(2.7cqh,4.4cqw);max-width:34ch}
  .dh__kick{font-size:max(11px,min(1.7cqh,2.9cqw))}
  .dh__ctrl{bottom:4cqh}
  /* Black Friday: paquetes en 3 + 2 y el bloque abajo, sobre los controles.
     --dh-u limita el alto (el bloque mide ~95u) para dejar arriba sitio a la
     pastilla de precio, que cuelga del header por encima del hero. */
  .dh__s--bf{--dh-u:min(1.5cqw,(100cqh - 170px) / 95);align-items:flex-end;padding:0 6cqw calc(44px + 4cqh + 24px)}
  .dh__bf{width:100%}
  .dh__bf-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .dh__bf-packs li{min-width:0;padding-inline:calc(.6*var(--dh-u))}
  .dh__bf-packs b{font-size:calc(6.4*var(--dh-u))}
  .dh__bf-sub,.dh__bf-btn{font-size:max(13px,calc(2.5*var(--dh-u)))}
  .dh__bf-from,.dh__bf-eur{font-size:max(13px,calc(3*var(--dh-u)))}
}

/* ── la caja de destacados ya no se monta sobre el hero ── */
.showcase.showcase--flat{margin-top:0;padding-top:clamp(56px,6vw,72px)}