/* Mitic · hero editorial (2026-10-20).
   v3 (imagen de referencia del dueño): en escritorio, franja editorial a la izquierda (foto + título grande), un PANEL
   WEB NAVEGABLE al centro (.hero-dash: las capturas REALES del panel con zonas táctiles, como el teléfono demo; la
   referencia inventaba Clases, reservas, calorías y QR en el carnet) y el teléfono del socio a la derecha.
   La v2 (panel + "Rutina de hoy" + anotaciones) está respaldada en el scratchpad de la sesión.
   En móvil se mantiene: mensaje → panel web simple (+ nota) → Rutina de hoy → teléfono; en tablet, el hero de dos columnas.
   Quitar este archivo devuelve el hero original. */

.hero-rutina,.hero-dash{display:none}

@media(min-width:1101px){
  .hero{padding:calc(64px + 20px) 0 64px}
  .hero .wrap.hero-grid{max-width:min(1440px,calc(100vw - 40px));display:grid;grid-template-columns:330px minmax(0,1fr);align-items:stretch;gap:0}
  .hero .isla [data-prof]{translate:none}

  /* franja editorial */
  .hero-in{position:relative;z-index:6;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 28px 30px;border-radius:28px 0 0 28px;overflow:hidden;isolation:isolate;color:#F2EFE9;
    background:linear-gradient(to top,rgba(26,24,22,.97) 0%,rgba(26,24,22,.9) 30%,rgba(26,24,22,.55) 52%,rgba(26,24,22,.05) 78%,rgba(26,24,22,0) 100%),
      image-set(url("hero-espalda-480.webp") 1x,url("hero-espalda-720.webp") 2x) 50% 6%/cover no-repeat #1A1816}
  /* foto: socia entrenando espalda en polea (imagen aportada por el dueño 2026-10-20, recortada sin las franjas de las esquinas) */
  .hero-in::before{display:none}                          /* la foto ya trae su energía: sin la línea naranja */
  .hero-in .brand-lockup{display:none}
  .hero-in .eyebrow{color:#FB923C;margin-bottom:8px;font-size:11.5px}
  .hero h1{color:#F2EFE9;font-size:34px;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:-.02em;margin:0 0 14px}
  .hero h1 .marca{color:#FB923C}
  .hero h1 .h1-l{white-space:normal}                       /* en la franja angosta el título se parte */
  .hero h1 .h1-l:last-child .marca{background:none;padding:0}
  .hero-in .lead{color:rgba(242,239,233,.9);font-size:13.5px;line-height:1.5;margin:0 0 16px}
  .hero-in .ctas{flex-direction:column;gap:8px;margin:0}
  .hero-in .ctas .btn{width:100%;justify-content:center}
  .hero-in .btn-secundario{background:rgba(242,239,233,.1);color:#F2EFE9;border-color:rgba(242,239,233,.35)}
  .hero-in .ctas-nota{color:rgba(242,239,233,.78);margin:10px 0 0;font-size:12.5px}

  /* escenario crema con cuñas naranjas (la foto vive ahora en la franja) */
  .hero-vis{position:relative}
  .isla{min-height:680px;height:100%;border-radius:0 28px 28px 0;background:linear-gradient(135deg,#F7F3EE,#F1E8DC);overflow:hidden}
  .isla::before,.isla::after{content:'';position:absolute;z-index:0;background:#EA580C;transform:skewX(-24deg)}
  .isla::before{right:-6%;top:-10%;width:22%;height:46%;opacity:.95}
  .isla::after{right:4%;bottom:-12%;width:10%;height:40%;opacity:.55}
  .isla-fondo,.hero-win,.hero-rutina,.fcard{display:none}
  .hero-vis-nota{left:3%;right:auto;bottom:2.2%;top:auto;z-index:7}

  /* panel web navegable: capturas reales en una ventana de navegador + barra de capítulos */
  .hero-dash{display:flex;flex-direction:column;position:absolute;z-index:2;left:3%;right:21%;top:5%;border-radius:16px;overflow:hidden;
    background:#ECE7DE;box-shadow:0 40px 80px -36px rgba(26,24,22,.55),0 0 0 1px rgba(26,24,22,.1)}
  .pd-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:#ECE7DE}
  .pd-bar .dot{width:9px;height:9px;border-radius:50%;background:rgba(26,24,22,.18)}
  .pd-url{margin-left:12px;font-family:var(--f-mono);font-size:11.5px;color:#57534E;background:#fff;border-radius:999px;padding:3px 14px}
  .pd-url b{font-weight:600;color:#C2410C}
  .pd-pantallas{position:relative;aspect-ratio:1440/900;background:#fff}
  .pd-pantalla{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s var(--ease-out)}
  .pd-pantalla.is-on{opacity:1}
  .pd-hot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
    padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;transition:box-shadow .2s,background .2s}
  .pd-hot:hover,.pd-hot:focus-visible{background:rgba(234,88,12,.08);box-shadow:0 0 0 2px #EA580C;outline:none}
  .pd-hot[hidden]{display:none}
  /* invitación: los botones del menú laten suave hasta el primer uso */
  html.fx-on .hero-dash:not(.pd-usado) .pd-hot:not([data-de]){animation:pd-late 2.4s ease-in-out 2.5s 2}
  @keyframes pd-late{0%,100%{box-shadow:0 0 0 0 rgba(234,88,12,0)}50%{box-shadow:0 0 0 2px rgba(234,88,12,.55)}}
  .pd-dock{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;background:#1A1816}
  .pd-cap{border:0;border-radius:999px;padding:6px 11px;background:transparent;color:rgba(242,239,233,.82);font:600 11.5px/1 var(--f-sans);cursor:pointer}
  .pd-cap:hover{background:rgba(255,255,255,.1)}
  .pd-cap[aria-pressed="true"]{background:#EA580C;color:#1A1816}
  .pd-cap:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .pd-pista{margin:0;padding:0 12px 9px;background:#1A1816;color:rgba(242,239,233,.6);font-size:11px}

  /* teléfono del socio a la derecha, montado sobre el borde del panel */
  .hero-tel{--t-tel:perspective(1400px) rotateY(-8deg);top:7%;bottom:auto;right:1.5%;width:19%;z-index:5;padding:9px;border-radius:30px}
  .hero-tel .telefono-pantalla{border-radius:22px}
  .hero-tel .ad-hint{right:auto;left:50%;top:calc(100% + 8px);transform:translateX(-50%)}
}
}
@media(min-width:1101px){
  html.js .hero-dash{opacity:0;transform:translateY(18px)}
  html.js.hero-ready .hero-dash{opacity:1;transform:none;transition:opacity 600ms var(--ease-out) 250ms,transform 800ms var(--ease-out) 250ms}
}
@media(min-width:1101px) and (prefers-reduced-motion:reduce){html.js .hero-dash{opacity:1;transform:none;transition:none}}

/* móvil: mensaje → panel (+ nota) → Rutina de hoy → foto con el teléfono */
@media(max-width:620px){
  .hero-rutina{display:grid;order:0;grid-template-columns:46% 1fr;gap:4px 12px;align-items:center;margin:0 0 16px;padding:12px;border-radius:16px;
    background:var(--superficie);border:1.5px solid #EA580C}
  .hero-rutina figcaption{grid-column:2;display:flex;flex-direction:column;gap:2px}
  .hero-rutina figcaption span{font-family:var(--f-mono);font-size:11px;color:var(--marca-txt);text-transform:uppercase;letter-spacing:.06em}
  .hero-rutina figcaption b{font-size:16px}
  .hr-cuerpo{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:480/560;object-fit:cover;object-position:50% 0}
  .hr-ej{grid-column:1 / -1;margin-top:8px;display:flex;gap:8px;align-items:center;padding:6px;border-radius:12px;background:var(--fondo);border:1px solid var(--borde)}
  .hr-ej img{width:96px;height:72px;object-fit:cover;border-radius:8px;flex:0 0 auto}
  .hr-ej span{font-size:12.5px;line-height:1.3;color:var(--tinta-2)}
  .hr-ej b{display:block;font-size:13px;color:var(--tinta)}
  .isla-escena{order:1;aspect-ratio:100/120}
  .isla-fondo{height:calc((100vw - 2 * var(--gutter)) * 1.2)}
  .hero-tel{width:60%;right:20%;top:4%}            /* pantalla de membresía más legible */
  .fcard.f1{display:none}
}
@media(min-width:1101px) and (max-width:1320px){
  .hero-tel .ad-hint{left:auto;right:0;transform:none}      /* que la pista no se corte en el borde del escenario */
  .pd-cap{padding:6px 8px;font-size:10.5px}
  .pd-dock{gap:2px}
}

/* ═════ Fondo continuo (2026-10-20, pedido del dueño): la foto completa de la socia en la polea, con sus franjas
   naranjas, es el fondo de TODO el escenario (antes crema); la franja naranja de la derecha llega completa arriba. ═════ */
@media(min-width:1101px){
  .hero .wrap.hero-grid{border-radius:28px;overflow:hidden;isolation:isolate;
    background:image-set(url("hero-espalda-full-1024.webp") 1x,url("hero-espalda-full-1536.webp") 2x) 62% 30%/cover no-repeat #1A1816}
  .hero-in{border-radius:0;background:linear-gradient(90deg,rgba(26,24,22,.92) 0%,rgba(26,24,22,.8) 70%,rgba(26,24,22,.35) 100%)}
  .isla{background:linear-gradient(90deg,rgba(26,24,22,.35),rgba(26,24,22,.1) 60%,rgba(26,24,22,.25));border-radius:0}
  .isla::before{right:-2%;top:-20%;width:9%;height:140%;opacity:.95}
  .isla::after{right:10%;top:-20%;bottom:auto;width:3%;height:140%;opacity:.7}
  .hero-vis-nota{background:rgba(26,24,22,.75)}
}

/* ═════ v4 (2026-10-20, referencia del dueño): escena a SANGRE de lado a lado, empezando detrás del menú. La socia
   queda visible a la izquierda (la foto se corre para que ella no quede detrás del panel) y se funde a crema hacia la
   derecha; el título va sobre ella; líneas naranjas diagonales que atraviesan hasta arriba, menú incluido; panel y
   teléfono al frente. Anula la "tarjeta" de v3. ═════ */
@media(min-width:1101px){
  .hero{padding:calc(64px + 18px) 0 56px;margin-top:0;
    background:
      linear-gradient(90deg,rgba(243,240,234,0) 0%,rgba(243,240,234,0) 22%,rgba(243,240,234,.85) 38%,#F3F0EA 48%),
      linear-gradient(to top,rgba(26,24,22,.6),rgba(26,24,22,0) 45%),
      image-set(url("hero-espalda-full-1024.webp") 1x,url("hero-espalda-full-1536.webp") 2x) left -30vw top 0/auto 118% no-repeat,
      #F3F0EA}
  .hero-brasa{display:none}
  /* líneas naranjas diagonales a sangre, hasta arriba del todo (pasan detrás del menú translúcido) */
  .hero::before,.hero::after{content:'';position:absolute;z-index:0;pointer-events:none;top:-40px;bottom:-40px;background:#EA580C;transform:skewX(-28deg)}
  .hero::before{right:6%;width:7vw;opacity:.92}
  .hero::after{right:16%;width:1.4vw;opacity:.6}
  .nav{background:color-mix(in srgb,var(--fondo) 55%,transparent)}
  .nav:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav:not(.scrolled) .nav-links>li>a{color:#1A1816}

  .hero .wrap.hero-grid{position:relative;z-index:1;background:none;border-radius:0;overflow:visible;max-width:min(1480px,calc(100vw - 32px));grid-template-columns:300px minmax(0,1fr)}
  .hero-in{background:none;border-radius:0;padding:0 8px 40px 0;justify-content:flex-end}
  .hero h1{font-size:46px;line-height:.95;font-style:italic;text-shadow:0 3px 24px rgba(0,0,0,.6)}
  .hero h1 .marca{color:#F2EFE9;font-style:normal;font-size:.62em;letter-spacing:.04em;display:block;margin-top:10px}
  .hero h1 .h1-l:last-child .marca::before{content:'';display:block;width:56px;height:5px;background:#EA580C;margin-bottom:12px}
  .hero-in .eyebrow{color:#FDBA74}
  .hero-in .lead{text-shadow:0 1px 12px rgba(0,0,0,.6)}
  .isla{background:none;border-radius:0;overflow:visible;min-height:700px}
  .isla::before,.isla::after{display:none}
  .hero-dash{left:2%;right:19%;top:3%;border-radius:22px;background:#1A1816;box-shadow:0 50px 100px -40px rgba(26,24,22,.75),0 0 0 1px rgba(26,24,22,.15)}
  .pd-bar{background:#1A1816}
  .pd-bar .dot{background:rgba(255,255,255,.25)}
  .hero-tel{right:0;top:9%;width:21%;z-index:5}
  .hero-vis-nota{left:2%;bottom:3%}
}
@media(min-width:1101px){
  .nav:not(.scrolled) .logo{color:#F2EFE9;filter:drop-shadow(0 1px 8px rgba(0,0,0,.5))}
  .hero::before{right:-3%;width:9vw;opacity:.95}
  .hero::after{right:9.5%;width:1.2vw;opacity:.75}
}
@media(min-width:1101px){
  .hero::before{inset:auto;left:auto;top:-40px;bottom:-40px;right:-3%;width:9vw;background:#EA580C;background-image:none;mask:none;-webkit-mask:none;z-index:0}
}
/* v4 · cabe en la primera pantalla (2026-10-20, revisión externa): en laptops (768-864 px de alto) el título, los dos
   botones y la condición del plan quedan visibles sin scroll; el escenario se ajusta al alto disponible. */
@media(min-width:1101px){
  .isla{min-height:clamp(520px,calc(100vh - 150px),700px)}
  .hero-in{justify-content:center;padding-bottom:0}
}
@media(min-width:1101px) and (max-height:900px){
  .hero{padding-bottom:28px}
  .hero h1{font-size:clamp(34px,5.2vh,46px)}
  .hero-in .eyebrow{margin-bottom:4px}
  .hero-in .lead{font-size:13px;margin-bottom:12px}
  .hero-in .ctas .btn{--btn-h:44px}
  .hero-dash{top:2%}
}
/* v4 · acabado (2026-10-20, revisión externa 9/10) */
@media(min-width:1101px){
  /* 1 · velo oscuro suave detrás del texto de la izquierda */
  .hero-in{position:relative}
  .hero-in::after{content:'';position:absolute;z-index:-1;inset:-12% -18% -8% -40vw;pointer-events:none;
    background:radial-gradient(ellipse 70% 60% at 30% 60%,rgba(20,18,16,.72) 0%,rgba(20,18,16,.45) 55%,transparent 100%)}
  /* 2 · los enlaces del menú en una cápsula crema translúcida: se leen sobre cualquier zona de la foto y la línea naranja
     sigue pasando por detrás */
  .nav:not(.scrolled) .nav-links{background:rgba(243,240,234,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-radius:999px;padding:4px 8px;box-shadow:0 4px 18px -8px rgba(26,24,22,.35)}
  /* 3 · panel ~6 % más chico, con aire abajo */
  .hero-dash{left:4%;right:21%;top:3%}
}
/* 4 · cinta de funciones más discreta (no compite con el héroe) */
.ticker{padding:10px 0;background:#26221F}
.ticker span{font-size:12.5px;letter-spacing:.08em;color:rgba(242,239,233,.72)}
.ticker i{width:7px;height:7px;opacity:.8}
/* cinta de funciones como ambientación (2026-10-20): más lenta, más baja y con los extremos desvanecidos (no se "corta") */
.ticker{padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker span{font-size:11.5px;color:rgba(242,239,233,.6)}
.ticker-track{animation-duration:80s}
@media(max-width:720px){.ticker-track{animation-duration:55s}}
/* cinta aún más sutil: textura de apoyo (2026-10-20, 2.ª observación) */
.ticker{padding:6px 0;background:#2E2925;border-top:0}
.ticker span{font-size:11px;font-weight:500;color:rgba(242,239,233,.5)}
.ticker i{width:5px;height:5px;opacity:.6}
.ticker-track{gap:22px}

/* ═════ Modo oscuro del héroe v4 (2026-10-20): el fondo se funde a NEGRO (no a crema) para que el texto claro del menú
   —"Iniciar sesión", tema— se lea, y se anula el marcador amarillo del título que traía una regla vieja de tema oscuro. ═════ */
@media(min-width:1101px){
  html[data-theme="dark"] .hero{background:
      linear-gradient(90deg,rgba(15,14,13,0) 0%,rgba(15,14,13,0) 22%,rgba(15,14,13,.85) 38%,#0F0E0D 48%),
      linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 45%),
      image-set(url("hero-espalda-full-1024.webp") 1x,url("hero-espalda-full-1536.webp") 2x) left -30vw top 0/auto 118% no-repeat,#0F0E0D}
  html[data-theme="dark"] .nav:not(.scrolled) .nav-links{background:rgba(26,24,22,.72)}
  html[data-theme="dark"] .nav:not(.scrolled) .nav-links>li>a{color:#F2EFE9}
}
@media(min-width:1101px) and (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .hero{background:
      linear-gradient(90deg,rgba(15,14,13,0) 0%,rgba(15,14,13,0) 22%,rgba(15,14,13,.85) 38%,#0F0E0D 48%),
      linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 45%),
      image-set(url("hero-espalda-full-1024.webp") 1x,url("hero-espalda-full-1536.webp") 2x) left -30vw top 0/auto 118% no-repeat,#0F0E0D}
  html:not([data-theme="light"]) .nav:not(.scrolled) .nav-links{background:rgba(26,24,22,.72)}
  html:not([data-theme="light"]) .nav:not(.scrolled) .nav-links>li>a{color:#F2EFE9}
}
@media(min-width:1101px){
  html .hero h1 .h1-l:last-child .marca,html[data-theme="dark"] .hero h1 .h1-l:last-child .marca{background:none!important;padding:0}
}

/* El héroe recorta (overflow:hidden) pero seguía siendo desplazable por código: al enfocar un botón de la demo (Productos/Reportes) el navegador lo corría ~200 px a la izquierda y cortaba "TU GIMNASIO". overflow:clip recorta igual y NO permite desplazamiento (2026-10-22). */
section.hero{overflow:hidden;overflow:clip}