/* Hero centrado, sin imagen de fondo: el texto ocupa el centro y es el
   protagonista; Draco con el navegador acompaña desde la derecha, fuera
   del flujo, para no descentrar el texto. */
.dh-hero,.dh-hero-grid{min-height:0!important}
.dh-hero{background:var(--bg)}
.dh-hero-ambient{display:none}
.dh-hero-grid{position:relative;max-width:var(--page-max,1176px);margin:0 auto;padding:112px var(--page-gutter,32px) 88px;display:block}
.dh-hero-content{position:relative;z-index:2;margin:0 auto;width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;text-align:center}
.dh-hero-content .dh-hero-actions,.dh-hero-content .dh-pill-list{justify-content:center}

/* ── Escena: Draco con el navegador en el centro + carrusel de productos ──
   (referencia: Assets/Héroe de escritorio de Draco con carrusel.png)
   Las tarjetas se colocan por posición (data-slot) con transform; el
   cambio de posición se anima con una transición. El centro ("c") es la
   pantalla: la tarjeta se encoge y se funde dentro del navegador. */
.dh-hero-grid{padding-bottom:0}
.dh-hero-visual.hc{position:relative;z-index:1;width:100%;max-width:820px;height:clamp(330px,32vw,410px);margin:8px auto 0;pointer-events:none}
.hc .hd-stage-wrap{position:absolute;left:50%;top:30px;width:clamp(270px,28vw,350px);transform:translateX(-50%);z-index:3}
/* el navegador se funde con el fondo al llegar abajo */
.dh-hero-visual.hc::after{content:"";position:absolute;z-index:6;left:20%;right:20%;bottom:0;height:22%;
  background:linear-gradient(to bottom,transparent,var(--bg) 85%)}
.hc-arc{position:absolute;left:50%;top:18%;width:96%;aspect-ratio:2.6;transform:translateX(-50%);border-radius:50% 50% 0 0;
  border-top:1px solid rgba(63,178,255,.22);
  background:radial-gradient(60% 70% at 50% 100%,rgba(47,109,255,.28),transparent 70%);pointer-events:none}
[data-theme="light"] .hc-arc{border-top-color:rgba(31,86,224,.2);background:radial-gradient(60% 70% at 50% 100%,rgba(47,109,255,.14),transparent 70%)}

.hc-cards{position:absolute;inset:0;z-index:2}
.hc-card{--w:clamp(104px,11vw,150px);position:absolute;left:50%;top:0;width:var(--w);aspect-ratio:1;margin-left:calc(var(--w) / -2);
  transition:transform 1.15s cubic-bezier(.45,0,.15,1),opacity .7s ease,filter 1.15s ease;will-change:transform}
/* la tarjeta en sí: fondo, sombra y un flotar suave propio (--fd desfasa cada una) */
.hc-card-in{width:100%;height:100%;border-radius:22px;background:linear-gradient(150deg,var(--t1),var(--t2));
  box-shadow:0 26px 50px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5);
  display:grid;place-items:center;overflow:hidden;animation:hc-float 5.5s ease-in-out var(--fd,0s) infinite}
.hc-card-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;
  animation:hc-shine 5.5s ease-in-out var(--fd,0s) infinite}
.hc-card-in img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.25));
  animation:hc-prod 5.5s ease-in-out var(--fd,0s) infinite}
@keyframes hc-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes hc-prod{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.04) rotate(-2deg)}}
@keyframes hc-shine{0%,60%{background-position:120% 0}85%,100%{background-position:-20% 0}}
.hc-card.is-wrap{transition:none}
.hc-card[data-slot="l2"]{transform:translate(-28vw,clamp(30px,4vw,40px)) rotate(-10deg) scale(.8);z-index:1}
.hc-card[data-slot="l1"]{transform:translate(-22vw,clamp(130px,14vw,175px)) rotate(-6deg) scale(1);z-index:4}
.hc-card[data-slot="c"]{transform:translate(0,clamp(170px,18vw,240px)) rotate(0) scale(.3);opacity:0;z-index:1}
.hc-card[data-slot="r1"]{transform:translate(22vw,clamp(130px,14vw,175px)) rotate(6deg) scale(1);z-index:4}
.hc-card[data-slot="r2"]{transform:translate(28vw,clamp(30px,4vw,40px)) rotate(10deg) scale(.8);z-index:1}
/* vuelta por detrás de la escena: se alejan, se encogen y se apagan */
.hc-card[data-slot="out-l"]{transform:translate(-10vw,-20px) rotate(-14deg) scale(.4);opacity:0;filter:blur(4px);z-index:0}
.hc-card[data-slot="out-r"]{transform:translate(10vw,-20px) rotate(14deg) scale(.4);opacity:0;filter:blur(4px);z-index:0}
@media(min-width:1180px){
  .hc-card[data-slot="l2"]{transform:translate(-335px,40px) rotate(-10deg) scale(.8)}
  .hc-card[data-slot="l1"]{transform:translate(-262px,175px) rotate(-6deg)}
  .hc-card[data-slot="r1"]{transform:translate(262px,175px) rotate(6deg)}
  .hc-card[data-slot="r2"]{transform:translate(335px,40px) rotate(10deg) scale(.8)}
  .hc-card[data-slot="c"]{transform:translate(0,240px) scale(.3)}
  .hc-card[data-slot="out-l"]{transform:translate(-120px,-20px) rotate(-14deg) scale(.4)}
  .hc-card[data-slot="out-r"]{transform:translate(120px,-20px) rotate(14deg) scale(.4)}
}

/* El botón secundario es transparente: sobre la escena necesita fondo */
.dh-hero .dh-btn--ghost{background:var(--bg)!important}

/* ── Titular: revelado línea a línea (una vez) + subrayado ──
   Sin JS se ve entero. js/landing-ui.js añade .is-armed (oculto) y luego
   .is-in: cada línea se destapa con clip-path de arriba abajo mientras
   sube, con 70 ms entre líneas; al terminar se dibuja el subrayado bajo
   la palabra destacada. */
.dh-hero-title .dh-hero-line{display:block}
.dh-hero-line-in{display:inline-block}
.dh-hero-accent{position:relative;display:inline-block}
.dh-hero-accent::after{content:"";position:absolute;left:.02em;right:.3em;bottom:-.17em;height:.07em;border-radius:1em;
  background:currentColor;transform-origin:0 50%}
.dh-hero-title.is-armed .dh-hero-line-in{clip-path:inset(-.2em -.1em 100% -.1em);transform:translate3d(0,.45em,0)}
.dh-hero-title.is-armed .dh-hero-accent::after{transform:scaleX(0)}
.dh-hero-title.is-armed.is-in .dh-hero-line-in{clip-path:inset(-.2em -.1em -.3em -.1em);transform:none;
  transition:clip-path .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.dh-hero-title.is-armed.is-in .dh-hero-line:nth-child(2) .dh-hero-line-in{transition-delay:70ms}
.dh-hero-title.is-armed.is-in .dh-hero-accent::after{transform:scaleX(1);transition:transform .7s cubic-bezier(.16,1,.3,1) .62s}
@media(prefers-reduced-motion:reduce){
  .dh-hero-title.is-armed .dh-hero-line-in{clip-path:none;transform:none;transition:none}
  .dh-hero-title.is-armed .dh-hero-accent::after{transform:none;transition:none}
}

/* Tamaños compactos, medidos sobre el hero de dracothemepro.com. */
.dh-badge{margin-bottom:24px;padding:5px 14px;font-size:11.5px;font-weight:600;letter-spacing:.005em}
.dh-hero-title{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:900;letter-spacing:-.04em;line-height:1.08;margin-bottom:20px}
.dh-hero-sub{max-width:540px;font-size:15.6px;font-weight:500;line-height:1.65;margin-bottom:28px}
.dh-hero-actions{gap:14px;margin-bottom:22px}
.dh-hero-actions .dh-btn--lg{height:50px;padding:0 28px;font-size:14px;font-weight:700}
.dh-hero-actions .dh-btn-play{width:26px;height:26px;border:2px solid currentColor;background:transparent}
.dh-hero-actions .dh-btn-stack small{font-size:11px}
.dh-pill-list{gap:8px 24px}
.dh-pill{height:auto;padding:0;background:none;border:none;font-size:12px;font-weight:500}
.dh-pill-check{width:18px;height:18px;font-size:11px}
/* Letra pequeña honesta bajo las ventajas */
.dh-hero-note{margin-top:16px;font-size:12px;font-weight:500;line-height:1.5;color:var(--text-3)}
html:not([data-theme="light"]) .dh-hero{
  --hero-blue:#2f6dff;
}
html:not([data-theme="light"]) .dh-badge{background:#0a1226b3;border-color:#3d6fe080;color:#dfe6f5}
html:not([data-theme="light"]) .dh-badge-dot{display:none}
html:not([data-theme="light"]) .dh-hero-title{color:#fff}
html:not([data-theme="light"]) .dh-hero-title .dh-text-accent{background:none;-webkit-text-fill-color:#2f6dff;color:#2f6dff}
html:not([data-theme="light"]) .dh-hero-sub{color:#9ca3af}
html:not([data-theme="light"]) .dh-hero .dh-btn--primary{background:var(--hero-blue);box-shadow:0 12px 32px #2f6dff40}
html:not([data-theme="light"]) .dh-hero .dh-btn--primary:hover{background:#3b78ff}
html:not([data-theme="light"]) .dh-hero .dh-btn--ghost{background:transparent;border:1.5px solid #ffffffb3;color:#fff}
html:not([data-theme="light"]) .dh-hero .dh-btn--ghost:hover{background:#ffffff0f}
html:not([data-theme="light"]) .dh-hero .dh-btn-stack small{color:#aab2bf}
html:not([data-theme="light"]) .dh-pill{color:#fff}
html:not([data-theme="light"]) .dh-pill-check{background:var(--hero-blue);color:#fff}


@media(max-width:980px){
  .dh-hero-grid{padding:120px 24px 56px}
  .dh-hero-grid{padding-bottom:0}
  .dh-hero-visual.hc{height:clamp(300px,70vw,400px);margin-top:28px}
  .hc .hd-stage-wrap{width:min(62vw,300px)}
  .hc-card{--w:clamp(96px,24vw,150px)}
  .hc-card[data-slot="l2"],.hc-card[data-slot="r2"]{opacity:0}
  .hc-card[data-slot="l1"]{transform:translate(-34vw,clamp(90px,22vw,140px)) rotate(-10deg) scale(.9)}
  .hc-card[data-slot="r1"]{transform:translate(34vw,clamp(90px,22vw,140px)) rotate(10deg) scale(.9)}
  .hc-card[data-slot="c"]{transform:translate(0,clamp(180px,44vw,260px)) scale(.28)}
  .hc-card[data-slot="out-l"]{transform:translate(-26vw,0) rotate(-18deg) scale(.4)}
  .hc-card[data-slot="out-r"]{transform:translate(26vw,0) rotate(18deg) scale(.4)}
  .dh-hero-title{font-size:clamp(2.1rem,8vw,2.6rem)}
  .dh-hero-sub{font-size:15px}
  .dh-hero-actions{margin-bottom:24px}
}
@media(max-width:640px){
  .dh-hero-grid{padding:112px 16px 56px}
}

@media(prefers-reduced-motion:reduce){
  .hc-card{transition:none}
  .hc-card-in,.hc-card-in::after,.hc-card-in img{animation:none}
}

/* ── Navegador recto en el hero ──
   Sin la cizalla de la ilustración: recto, centrado bajo las manos de
   Draco (las manos, por delante, agarran su borde de arriba) y entero,
   sin fundido inferior. */
.hc .hd-browser{left:8%;top:41.5%;width:96%;transform:none;border-radius:14px;clip-path:inset(0 round 14px);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.dh-hero-visual.hc::after{display:none}

/* ── Hero optimizado ──
   Escena más alta para que el navegador quepa entero; las tarjetas
   cercanas a la altura de la pantalla y la central entra por el centro
   real del navegador. */
.hc{--sw:clamp(260px,min(28vw,calc((100vh - 500px) / 1.2)),360px)}
.hc-card.is-photo .hc-card-in img{width:100%;height:100%;object-fit:cover;filter:none}
.hc .hd-stage-wrap{width:var(--sw);top:24px}
.dh-hero-visual.hc{height:calc(var(--sw) * 1.2 + 40px);margin-top:20px}
.dh-hero-grid{padding-bottom:56px}
@media(min-width:1180px){
  .hc-card[data-slot="l1"]{transform:translate(-268px,215px) rotate(-6deg)}
  .hc-card[data-slot="r1"]{transform:translate(268px,215px) rotate(6deg)}
  .hc-card[data-slot="l2"]{transform:translate(-340px,70px) rotate(-10deg) scale(.8)}
  .hc-card[data-slot="r2"]{transform:translate(340px,70px) rotate(10deg) scale(.8)}
  .hc-card[data-slot="c"]{transform:translate(0,300px) scale(.3)}
}
/* el CTA principal destaca un poco más: sombra azul y flecha que se mueve */
.dh-hero .dh-btn--primary{box-shadow:0 14px 36px -10px rgba(47,109,255,.7)}
.dh-hero .dh-btn--primary:hover{transform:translateY(-2px)}
@media(max-width:980px){
  .hc{--sw:min(64vw,300px)}
  .dh-hero-visual.hc{height:calc(var(--sw) * 1.2 + 30px)}
  .hc-card[data-slot="c"]{transform:translate(0,calc(var(--sw) * .85)) scale(.3)}
  .hc-card[data-slot="l1"]{transform:translate(-36vw,calc(var(--sw) * .62)) rotate(-8deg) scale(.85)}
  .hc-card[data-slot="r1"]{transform:translate(36vw,calc(var(--sw) * .62)) rotate(8deg) scale(.85)}
}

/* ── Recorrido del carrusel (ajuste final) ──
   Tarjetas más pequeñas que la pantalla. La de la izquierda más cercana
   (l1) entra en la pantalla: viaja hasta su centro, se encoge y se funde
   (slot c); a la vez, la que estaba dentro sale desde el centro de la
   pantalla hacia la derecha (r1). */
.hc-card{--w:clamp(86px,8.4vw,118px)}
.hc-card[data-slot="c"]{transform:translate(0,calc(var(--sw) * .78)) scale(.35)!important;opacity:0;
  transition:transform 1.15s cubic-bezier(.45,0,.15,1),opacity .35s ease .75s}
.hc-card[data-slot="l1"]{transform:translate(calc(var(--sw) * -.78),calc(var(--sw) * .66)) rotate(-6deg)!important;z-index:4}
.hc-card[data-slot="r1"]{transform:translate(calc(var(--sw) * .78),calc(var(--sw) * .66)) rotate(6deg)!important;z-index:4}
.hc-card[data-slot="l2"]{transform:translate(calc(var(--sw) * -.98),calc(var(--sw) * .2)) rotate(-10deg) scale(.82)!important}
.hc-card[data-slot="r2"]{transform:translate(calc(var(--sw) * .98),calc(var(--sw) * .2)) rotate(10deg) scale(.82)!important}
.hc-card[data-slot="out-l"]{transform:translate(calc(var(--sw) * -.4),calc(var(--sw) * -.05)) rotate(-14deg) scale(.4)!important}
.hc-card[data-slot="out-r"]{transform:translate(calc(var(--sw) * .4),calc(var(--sw) * -.05)) rotate(14deg) scale(.4)!important}
@media(max-width:980px){
  .hc-card{--w:clamp(70px,18vw,96px)}
  .hc-card[data-slot="l1"]{transform:translate(calc(var(--sw) * -.62),calc(var(--sw) * .66)) rotate(-6deg)!important}
  .hc-card[data-slot="r1"]{transform:translate(calc(var(--sw) * .62),calc(var(--sw) * .66)) rotate(6deg)!important}
  .hc-card[data-slot="l2"],.hc-card[data-slot="r2"]{opacity:0}
}

/* ════════════════════════════════════════════════════════════
   HERO — ajuste de conjunto
   · pantalla más grande, productos más abiertos (cubren más ancho)
   · fondo con ambiente: halo azul bajo la escena, rejilla de puntos
     muy suave y un degradado inferior que funde con "Tiendas"
   ════════════════════════════════════════════════════════════ */
.dh-hero{position:relative;overflow:clip;isolation:isolate}
.dh-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 78%,rgba(47,109,255,.26),transparent 70%),
    radial-gradient(40% 30% at 50% 0%,rgba(63,178,255,.10),transparent 70%);}
.dh-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 55%,#000,transparent 85%);mask-image:radial-gradient(70% 60% at 50% 55%,#000,transparent 85%)}
/* el brillo termina antes del borde de abajo del hero: si no, se corta en recto */
[data-theme="light"] .dh-hero::before{background:radial-gradient(60% 30% at 50% 66%,rgba(47,109,255,.14),transparent 100%),radial-gradient(40% 30% at 50% 0%,rgba(63,178,255,.08),transparent 70%)}
[data-theme="light"] .dh-hero::after{background-image:radial-gradient(rgba(13,21,38,.08) 1px,transparent 1.2px)}

.dh-hero-grid{padding-top:104px;padding-bottom:0}
.dh-hero-title{margin-bottom:16px}
.dh-hero-sub{margin-bottom:26px}
.dh-hero-actions{margin-bottom:18px}

.hc{--sw:clamp(290px,min(34vw,calc((100vh - 490px) / 1.12)),440px)}
.dh-hero-visual.hc{max-width:1120px;height:calc(var(--sw) * 1.2 + 40px);margin-top:16px}
.hc .hd-stage-wrap{top:18px}
.hc-arc{top:22%;width:110%}
.hc-card{--w:clamp(92px,9vw,128px)}
.hc-card[data-slot="l1"]{transform:translate(calc(var(--sw) * -.98),calc(var(--sw) * .66)) rotate(-7deg)!important}
.hc-card[data-slot="r1"]{transform:translate(calc(var(--sw) * .98),calc(var(--sw) * .66)) rotate(7deg)!important}
.hc-card[data-slot="l2"]{transform:translate(calc(var(--sw) * -1.3),calc(var(--sw) * .18)) rotate(-11deg) scale(.82)!important}
.hc-card[data-slot="r2"]{transform:translate(calc(var(--sw) * 1.3),calc(var(--sw) * .18)) rotate(11deg) scale(.82)!important}
.hc-card[data-slot="out-l"]{transform:translate(calc(var(--sw) * -.5),calc(var(--sw) * -.05)) rotate(-14deg) scale(.4)!important}
.hc-card[data-slot="out-r"]{transform:translate(calc(var(--sw) * .5),calc(var(--sw) * -.05)) rotate(14deg) scale(.4)!important}
/* fundido inferior: el hero termina en el mismo color que empieza Tiendas */
.dh-hero-visual.hc::before{content:"";position:absolute;z-index:8;left:-50vw;right:-50vw;bottom:0;height:70px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg))}

@media(max-width:980px){
  .hc{--sw:min(70vw,320px)}
  .dh-hero-visual.hc{height:calc(var(--sw) * 1.14 + 20px)}
  .hc-card{--w:clamp(70px,18vw,96px)}
  .hc-card[data-slot="l1"]{transform:translate(calc(var(--sw) * -.66),calc(var(--sw) * .66)) rotate(-6deg)!important}
  .hc-card[data-slot="r1"]{transform:translate(calc(var(--sw) * .66),calc(var(--sw) * .66)) rotate(6deg)!important}
}
/* menos hueco entre el hero y "Tiendas": el fundido ya hace de transición */
#stores .dh-stores,.dh-stores{padding-top:72px}
/* el arco del fondo se desvanece abajo: sin borde recto al acabar el hero */
.hc-arc{-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 92%);mask-image:linear-gradient(to bottom,#000 40%,transparent 92%)}
.dh-hero-floor{display:none}
/* patas por delante del navegador: capa limpia, sin trozos del cuerpo */
.hc .hd-paws{position:absolute;left:22.2%;top:-6.5%;width:77.8%;height:auto;z-index:5;pointer-events:none}
/* el arco se apaga antes de llegar al final del hero (sin borde recto) */
.hc-arc{-webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 60%);mask-image:linear-gradient(to bottom,#000 20%,transparent 60%)}
/* el borde de arriba del navegador cae a media altura de los dedos: las
   puntas solo pisan la barra con los botones, como si la agarraran */
.hc .hd-browser{top:45.6%}