/* ============================================================
   TARJETAS · 01-hero  (#inicio)  — prefijo th
   "La tarjeta sobre el estanque de oro": three.js (js/pages/tarjetas/hero.js)
   Respaldo: estanque fotográfico (tarjetas-oro) + tarjeta real en CSS 3D con canto de oro.
   Composición: texto a la izquierda (≤ 44 %), tarjeta a la derecha fuera de eje,
   estanque en el tercio inferior. Celular: tarjeta arriba, estanque en franja, texto abajo.
   ============================================================ */
#inicio{--th-cw:min(30vw,74svh,560px);--th-ch:calc(var(--th-cw)*.631);--th-cx:72.5%;--th-cb:56%;--th-fall:25svh;
  position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:clip;isolation:isolate;
  background:radial-gradient(70% 55% at 72% 62%,rgba(167,121,39,.16) 0%,rgba(5,9,15,0) 70%),var(--ink);color:var(--cream);touch-action:pan-y}

/* ---------- Escenario ---------- */
#inicio .th__stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Estanque fotográfico: bajado ~18 % para que el agua quede en el tercio inferior (lo de arriba de la foto es tinta pura) */
#inicio .th__bg{position:absolute;left:0;right:0;top:18%;height:100%;transition:opacity 1.6s ease;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
#inicio .th__bg picture,#inicio .th__bg-img,#inicio .th__video{position:absolute;inset:0;width:100%;height:100%;max-width:none}
#inicio .th__bg-img,#inicio .th__video{object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-drag:none;color:transparent;font-size:0}
#inicio .th__video{opacity:0;transition:opacity 1.4s ease}
#inicio.th--video .th__video{opacity:1}
#inicio.th--video .th__drop,#inicio.th--video .th__ring{display:none}

/* Lienzo WebGL */
#inicio .th__gl{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
#inicio .th__gl canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;pointer-events:none}
#inicio.th--gl .th__gl{opacity:1}
#inicio.th--gl .th__bg{opacity:0}
#inicio.th--gl .th__card{opacity:0}   /* sigue en el DOM (alt legible), solo se apaga a la vista */

/* ---------- Tarjeta real en CSS 3D (respaldo) ---------- */
#inicio .th__card{position:absolute;z-index:1;width:var(--th-cw);height:var(--th-ch);
  left:calc(var(--th-cx) - var(--th-cw)/2);top:calc(var(--th-cb) - var(--th-ch));transition:opacity 1s ease}
#inicio.th--wait .th__card{opacity:0;transition:none}
#inicio .th__card-tilt{position:absolute;inset:0;perspective:1400px;animation:th-float 6s ease-in-out infinite}
#inicio .th__card-face{position:absolute;inset:0;transform-style:preserve-3d;border-radius:calc(var(--th-cw)*.045);
  transform:rotateY(-17deg) rotateX(7deg) rotateZ(-2deg);animation:th-sway 9s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(244,213,138,.55),0 2px 0 1px #a77927,0 5px 0 1px #6f4e17,0 40px 70px -26px rgba(216,166,70,.42),0 24px 60px -18px rgba(0,0,0,.8)}
/* Sin -webkit-box-reflect: el estanque fotográfico ya trae su gota y sus ondas; un segundo reflejo competía con ellas */
#inicio .th__card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;user-select:none;-webkit-user-drag:none}
/* Brillo de laca que pasa por la cara */
#inicio .th__card-face:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,244,214,.22) 46%,rgba(255,255,255,0) 60%);background-size:260% 100%;
  animation:th-gloss 9s ease-in-out infinite;mix-blend-mode:screen}
@keyframes th-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes th-sway{0%,100%{transform:rotateY(-17deg) rotateX(7deg) rotateZ(-2deg)}50%{transform:rotateY(-4deg) rotateX(4deg) rotateZ(1deg)}}
@keyframes th-gloss{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* Gota que cae del canto inferior y anillo que abre en el estanque (solo respaldo) */
#inicio .th__drop{position:absolute;left:calc(50% - 5px);top:calc(100% - 6px);width:10px;height:13px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 38% 32%,#fff4d6 0,#f4d58a 22%,#c08a2f 60%,#6f4e17 100%);box-shadow:0 0 12px rgba(244,213,138,.6);
  opacity:0;animation:th-drop 1.8s cubic-bezier(.55,0,.9,.5) infinite}
#inicio .th__ring{position:absolute;left:calc(50% - 60px);top:calc(100% + var(--th-fall) - 10px);width:120px;height:20px;border-radius:50%;
  border:1.5px solid rgba(244,213,138,.7);opacity:0;transform:scale(.1);animation:th-ring 1.8s ease-out infinite;mix-blend-mode:screen}
@keyframes th-drop{0%{opacity:0;transform:translateY(0) scale(.2)}30%{opacity:1;transform:translateY(2px) scale(1,1.15)}
  38%{opacity:1;transform:translateY(4px) scale(.9,1.25)}62%{opacity:1;transform:translateY(var(--th-fall)) scale(.8,1.4)}64%,100%{opacity:0;transform:translateY(var(--th-fall)) scale(.6)}}
@keyframes th-ring{0%,62%{opacity:0;transform:scale(.1)}66%{opacity:.9}100%{opacity:0;transform:scale(2.6)}}

/* ---------- Velos de lectura ---------- */
#inicio .th__shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,9,15,.82) 0,rgba(5,9,15,.5) calc(var(--nav-h)*.8),rgba(5,9,15,0) calc(var(--nav-h) + 90px)),
    linear-gradient(0deg,var(--ink) 0%,rgba(5,9,15,.9) 7%,rgba(5,9,15,.5) 16%,rgba(5,9,15,0) 30%),
    linear-gradient(90deg,rgba(5,9,15,.92) 0%,rgba(5,9,15,.74) 30%,rgba(5,9,15,.28) 48%,rgba(5,9,15,0) 60%)}

/* ---------- Texto ---------- */
#inicio .th__body{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;pointer-events:none;
  padding:calc(var(--nav-h) + clamp(16px,4vh,52px)) 0 clamp(16px,3vh,36px)}
#inicio .th__copy{pointer-events:auto;max-width:44%}
#inicio .th__logo{width:72px;height:auto;opacity:.8;margin:0 0 clamp(16px,2.2vh,24px)}   /* marca discreta: la cabecera ya lleva el logo */
#inicio .th__kicker{margin:0;line-height:1.45;letter-spacing:.18em}
#inicio .th__title{margin:clamp(14px,2.2vh,24px) 0 0;font-size:clamp(2.6rem,min(5.6vw,10.4svh),6.2rem);line-height:.98;letter-spacing:-.034em}
#inicio .th__title em{display:block;font-style:italic;font-weight:500;letter-spacing:-.02em;padding:0 .1em .1em 0;margin:0 -.1em -.1em 0}
#inicio .th__title .tn-line-mask{padding:.06em .14em .16em 0;margin:-.06em -.14em -.16em 0}
#inicio .th__lead{margin-top:clamp(18px,3vh,30px);max-width:38ch;color:var(--cream-2);text-wrap:pretty}
#inicio .th__lead .tn-line-mask{padding-bottom:.12em;margin-bottom:-.12em}
#inicio .th__cta{margin:clamp(22px,3.6vh,40px) 0 0;display:flex}
#inicio .th__cta .btn{min-height:56px;padding-inline:2em;font-size:1rem}

/* ---------- Índice de la página: chips con hilo de oro ---------- */
#inicio .th__foot{position:relative;z-index:2;padding-bottom:clamp(18px,3.4vh,38px);pointer-events:none}
#inicio .th__foot-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px}
#inicio .th__chips{position:relative;pointer-events:auto;display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);min-width:0}
#inicio .th__thread{position:absolute;left:-12px;right:-40px;top:50%;height:1px;transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,213,138,0) 0,rgba(244,213,138,.7) 8%,rgba(216,166,70,.38) 60%,rgba(216,166,70,0) 100%)}
#inicio .th__chip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 18px 10px 12px;border-radius:999px;
  border:1px solid var(--hair);background:rgba(5,9,15,.82);color:var(--cream);font:600 .88rem/1.2 var(--sans);letter-spacing:.01em;white-space:nowrap;
  transition:border-color .4s,color .4s,background-color .4s,transform .6s var(--ease)}
#inicio .th__chip-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  font:700 .75rem/1 var(--sans);letter-spacing:.02em;color:#1a1204;background:var(--gold-grad);font-variant-numeric:tabular-nums lining-nums}
#inicio .th__chip:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(16,39,58,.9);transform:translateY(-2px)}
#inicio .th__chip:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:999px}

#inicio .th__hint{pointer-events:none;flex:none;display:inline-flex;align-items:center;gap:12px;margin:0;padding:8px 14px 8px 16px;border-radius:999px;
  background:rgba(5,9,15,.66);box-shadow:0 0 0 1px rgba(244,213,138,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:600 .75rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--cream-2);transition:opacity .8s ease,transform .8s var(--ease)}
#inicio .th__hint-a{flex:none;color:var(--gold-2);animation:th-hint-a 2.4s var(--ease-io) infinite}
@keyframes th-hint-a{0%,100%{transform:translateY(-2px)}55%{transform:translateY(3px)}}
#inicio .th__hint-l{position:relative;display:block;width:1px;height:26px;background:var(--line-2);overflow:hidden}
#inicio .th__hint-l b{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold-2);transform:translateY(-101%);animation:th-hint 2.4s var(--ease-io) infinite}
#inicio .th__hint.is-gone{opacity:0;transform:translateY(10px)}
@keyframes th-hint{0%{transform:translateY(-101%)}55%{transform:translateY(0)}100%{transform:translateY(101%)}}
html.no-js #inicio .th__hint{display:none}

/* ---------- Escritorio: H1 en dos líneas, columnas ---------- */
@media (min-width:900px){
  #inicio .th__title{width:max-content;max-width:100%}
  /* El chorro del video (≈76 % del cuadro) parecía un pedestal bajo la tarjeta: se corre a la derecha de ella */
  #inicio.th--video .th__video{transform:translateX(12%) scale(1.3);transform-origin:50% 50%}
}
/* Pantallas anchas pero bajas (1280×720) */
@media (min-width:900px) and (max-height:760px){
  #inicio .th__body{padding-top:calc(var(--nav-h) + 8px)}
  #inicio .th__logo{margin-bottom:12px;width:64px}
  #inicio .th__title{font-size:clamp(2.6rem,min(5.2vw,10svh),5rem)}
  #inicio .th__lead{margin-top:16px}
  #inicio .th__cta{margin-top:20px}
  #inicio .th__cta .btn{min-height:52px}
}
/* Escritorio estrecho (900–1180): tarjeta más chica para no rozar el titular */
@media (min-width:900px) and (max-width:1180px){
  #inicio{--th-cw:min(32vw,60svh,420px);--th-cx:72%}
  #inicio .th__copy{max-width:48%}
}

/* ---------- Celular y tableta vertical ---------- */
@media (max-width:899px){
  #inicio{--th-cw:min(72vw,26svh*1.585,440px);--th-cx:50%;--th-cb:41svh;--th-fall:7svh;
    background:radial-gradient(90% 40% at 50% 44%,rgba(167,121,39,.18) 0%,rgba(5,9,15,0) 70%),var(--ink)}
  #inicio .th__bg{top:-4svh;height:74svh;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 82%,transparent 100%)}
  #inicio .th__bg-img,#inicio .th__video{object-position:50% 100%}
  #inicio .th__card{top:calc(var(--th-cb) - var(--th-ch))}
  #inicio .th__card-face{transform:rotateY(-12deg) rotateX(6deg) rotateZ(-2deg);animation-name:th-sway-m}
  #inicio .th__ring{width:90px;left:calc(50% - 45px);height:14px}
  #inicio .th__shade{background:
    linear-gradient(180deg,rgba(5,9,15,.8) 0,rgba(5,9,15,.3) var(--nav-h),rgba(5,9,15,0) calc(var(--nav-h) + 60px)),
    linear-gradient(180deg,rgba(5,9,15,0) 45svh,rgba(5,9,15,.8) 51svh,rgba(5,9,15,.95) 57svh,var(--ink) 66svh)}
  #inicio .th__body{align-items:flex-end;padding:max(50svh,calc(var(--nav-h) + var(--th-ch) + 112px)) 0 18px}
  #inicio .th__copy{max-width:none}
  #inicio .th__logo{display:none}   /* el logo ya está en la cabecera: más aire para el H1 y el botón */
  #inicio .th__kicker{font-size:.76rem;letter-spacing:.14em;text-wrap:balance}
  #inicio .th__title{margin-top:12px;font-size:clamp(2.35rem,10.6vw,4.4rem);line-height:1}
  #inicio .th__lead{margin-top:16px;font-size:1rem;line-height:1.55;max-width:40ch}
  #inicio .th__cta{margin-top:20px}
  #inicio .th__cta .btn{width:100%;max-width:440px}
  #inicio .th__foot{padding-bottom:22px}
  #inicio .th__foot,#inicio .th__foot-in{position:static;display:block}
  #inicio .th__chips{z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #inicio .th__thread{left:-8px;right:-8px}
  #inicio .th__chip{justify-content:center;text-align:center;white-space:normal;min-height:52px;padding:8px 8px;gap:0;
    font-size:.8rem;line-height:1.2;border-radius:16px;text-wrap:balance}
  /* El número se queda como muesca sobre el borde: se lee como índice de la página, no como tres botones iguales */
  #inicio .th__chips{padding-top:10px}
  #inicio .th__chip{padding-top:12px}
  #inicio .th__chip-n{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:auto;min-width:30px;height:20px;padding:0 7px;border-radius:999px;
    font-size:.75rem;box-shadow:0 0 0 3px var(--ink)}
  /* Pista «desliza ↓» sobre la franja del estanque, entre la tarjeta y el texto */
  #inicio .th__hint{position:absolute;z-index:2;left:50%;top:calc(var(--th-cb) + 6svh);transform:translateX(-50%);
    gap:8px;padding:7px 12px 7px 14px;font-size:.75rem;letter-spacing:.22em;color:var(--cream)}
  #inicio .th__hint-l{display:none}
  #inicio .th__hint.is-gone{transform:translate(-50%,10px)}
}
/* Celular bajo (360×640): tarjeta algo menor para que el botón entre en el primer pliegue */
@media (max-width:899px) and (max-height:700px) and (orientation:portrait){
  #inicio{--th-cw:min(57vw,19svh*1.585,420px);--th-cb:36svh;--th-fall:5svh}
  #inicio .th__body{padding-top:max(40svh,calc(var(--nav-h) + var(--th-ch) + 88px))}
  #inicio .th__bg{top:-9svh}   /* el chorro del video queda tapado por la tarjeta (no asoma como pedestal) */
  #inicio .th__hint{display:none}   /* en 640 de alto los chips y el botón ya caben completos: la pista estorbaría al kicker */
  #inicio .th__title{margin-top:10px;font-size:clamp(2.2rem,10vw,3rem)}
  #inicio .th__lead{margin-top:12px;font-size:.95rem;line-height:1.5}
  #inicio .th__cta{margin-top:16px}
  #inicio .th__shade{background:
    linear-gradient(180deg,rgba(5,9,15,.8) 0,rgba(5,9,15,.3) var(--nav-h),rgba(5,9,15,0) calc(var(--nav-h) + 60px)),
    linear-gradient(180deg,rgba(5,9,15,0) 40svh,rgba(5,9,15,.8) 46svh,rgba(5,9,15,.95) 52svh,var(--ink) 60svh)}
}
@keyframes th-sway-m{0%,100%{transform:rotateY(-12deg) rotateX(6deg) rotateZ(-2deg)}50%{transform:rotateY(6deg) rotateX(4deg) rotateZ(1deg)}}
@media (min-width:600px) and (max-width:899px){
  #inicio .th__lead{font-size:1.12rem}
  #inicio .th__cta .btn{width:auto;min-width:300px}
  #inicio .th__chip{font-size:.9rem}
}
/* Celular en horizontal: la tarjeta a la derecha, el texto a la izquierda */
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  #inicio{--th-cw:min(36vw,52svh*1.585);--th-cx:74%;--th-cb:64svh;--th-fall:14svh}
  #inicio .th__bg{top:10svh;height:100%}
  #inicio .th__body{align-items:flex-start;padding:calc(var(--nav-h) + 8px) 0 12px}
  #inicio .th__copy{max-width:52%}
  #inicio .th__logo{display:none}
  #inicio .th__title{font-size:clamp(2rem,9vh,2.8rem)}
  #inicio .th__lead{font-size:.92rem}
  #inicio .th__cta .btn{width:auto}
  #inicio .th__shade{background:linear-gradient(90deg,rgba(5,9,15,.92) 0%,rgba(5,9,15,.7) 44%,rgba(5,9,15,0) 62%),linear-gradient(0deg,rgba(5,9,15,.9) 0,rgba(5,9,15,0) 22%)}
  #inicio .th__hint{display:none}
  #inicio .th__chips{max-width:60%}
}

/* ---------- Gama baja: sin reflejo, sin fusión ---------- */
#inicio.th--lite .th__card-face:after{display:none}

/* ---------- Movimiento reducido: tarjeta quieta, sin gotas ---------- */
html.reduce #inicio .th__card-tilt,html.reduce #inicio .th__card-face,html.reduce #inicio .th__card-face:after,
html.reduce #inicio .th__hint-l b,html.reduce #inicio .th__hint-a{animation:none}
html.reduce #inicio .th__drop,html.reduce #inicio .th__ring{display:none}
html.reduce #inicio .th__hint-l b{transform:none}
@media (prefers-reduced-motion:reduce){
  #inicio .th__card-tilt,#inicio .th__card-face,#inicio .th__card-face:after,#inicio .th__hint-a{animation:none}
  #inicio .th__drop,#inicio .th__ring{display:none}
}