/* Dr. ChrisFit v3. Tres mundos con identidad propia bajo una misma firma:
   Entrenamiento: negro y hueso, Barlow Condensed en cursiva, movimiento rápido.
   Nutrición: blanco clínico, Newsreader con serifa, líneas finas de medición, el escaneo.
   Get Fit Eating: kraft de sus cajas, Poppins redondeada como su logo, verde salvia, todo con esquinas suaves.
   Lo común: la firma Dr. ChrisFit, Hanken Grotesk para leer y el negro de la marca. */
:root {
  --aire: clamp(4.5rem, 9vw, 8rem);
  --negro: #000;
  --hueso: #efece6;
  --hueso-2: #b9b5ad;
  --clinico: #fbfcfb;
  --tinta-n: #10201c;
  --tinta-n2: #51605c;
  --hilo: #d5ddda;
  --salvia-o: #3e564f;
  --salvia: #6d8c83;
  --salvia-c: #aabfb9;
  --kraft: #c99d68;
  --kraft-c: #e8d0a6;
  --kraft-f: #f3e6cf;
  --cafe: #3b2a17;
  --oro: #eaba4e;
  --f-train: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --f-nutri: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-gfe: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--negro); color: var(--hueso); font: 400 1.0625rem/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.cont { width: 100%; max-width: 1400px; margin: 0 auto; padding-inline: clamp(16px, 4.5vw, 64px); }
.m { display: block; overflow: hidden; padding: 0.14em 0.03em 0.06em; margin: -0.14em -0.03em -0.06em; }
.m > span { display: block; }

.proto { background: var(--oro); color: #000; font-size: 0.8125rem; text-align: center; padding: 0.35rem 16px; position: relative; z-index: 41; }

/* ---------- navegación: siempre legible sobre los tres mundos */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; color: #fff; pointer-events: none; padding-top: 30px; transition: padding 0.45s cubic-bezier(0.7, 0, 0.2, 1), background-color 0.45s, transform 0.6s cubic-bezier(0.7, 0, 0.2, 1); }
.nav.solida { padding-top: 0; background: #000; pointer-events: auto; box-shadow: 0 1px 0 #1f1f1d; }
.nav.oculta { transform: translateY(-100%); }
.nav .cont { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; height: 72px; }
.nav a { pointer-events: auto; text-decoration: none; }
.nav-logo img { height: 30px; width: auto; }
.nav-mundos { display: flex; justify-content: center; gap: 2.4rem; font: 500 0.9375rem var(--f-texto); }
.nav-mundos a, .nav-der a { position: relative; padding-block: 0.25rem; }
.nav-mundos a::after, .nav-der a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); }
.nav-mundos a:hover::after, .nav-der a:hover::after, .nav-mundos a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav-mundos a { opacity: 0.72; transition: opacity 0.3s; }
.nav-mundos a:hover, .nav-mundos a[aria-current="true"] { opacity: 1; }
.nav-der a:last-child { background: #fff; color: #000; padding: 0.5rem 1.05rem; border-radius: 30px; transition: background 0.3s; }
.nav-der a:last-child::after { display: none; }
.nav-der a:last-child:hover { background: var(--kraft-c); }
.nav-der { display: flex; gap: 1.8rem; font: 600 0.9375rem var(--f-texto); }

/* ---------- portada: el tríptico de los tres mundos */
.triptico { display: flex; height: min(100svh, 1000px); min-height: 620px; background: var(--negro); }
.panel { position: relative; flex: 1 1 0; overflow: hidden; text-decoration: none; color: #fff; transition: flex-grow 0.9s cubic-bezier(0.7, 0, 0.2, 1); border-left: 1px solid rgba(255, 255, 255, 0.12); }
.panel:first-child { border-left: 0; }
.triptico:hover .panel { flex-grow: 0.75; }
.triptico .panel:hover { flex-grow: 1.7; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s; filter: brightness(0.62) saturate(0.9); }
.panel:hover img { scale: 1.04; filter: brightness(0.82) saturate(1); }
.panel-txt { position: absolute; left: clamp(16px, 2.6vw, 40px); right: clamp(16px, 2.6vw, 40px); bottom: clamp(1.6rem, 4vw, 3rem); display: grid; gap: 0.9rem; }
.panel h2 { line-height: 0.9; }
.panel-train h2 { font: italic 900 clamp(3rem, 6.4vw, 6.8rem) / 0.82 var(--f-train); text-transform: uppercase; letter-spacing: -0.01em; }
.panel-nutri h2 { font: 400 clamp(2.9rem, 5.6vw, 6rem) / 0.9 var(--f-nutri); letter-spacing: -0.035em; }
.panel-gfe h2 { font: 700 clamp(2.4rem, 4.6vw, 4.8rem) / 0.95 var(--f-gfe); letter-spacing: -0.04em; }
.panel p { font-size: 0.9375rem; color: #e8e8e4; max-width: 22rem; }
.panel .entrar { font: 600 0.875rem var(--f-texto); border-top: 1px solid rgba(255, 255, 255, 0.4); padding-top: 0.8rem; display: flex; justify-content: space-between; max-width: 22rem; }
.panel-gfe .entrar { border-top: 0; padding: 0.7rem 1.1rem; border-radius: 30px; background: var(--kraft-c); color: var(--cafe); justify-content: center; width: fit-content; }
.panel-nutri .entrar { font: italic 400 1.0625rem var(--f-nutri); }
.panel-train .entrar { font: italic 700 1.125rem var(--f-train); text-transform: uppercase; letter-spacing: 0.02em; }

/* banda que une los tres: la firma y el pulso */
.sistema { background: var(--negro); padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.sistema .cont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: center; }
.sistema-firma img { width: min(520px, 100%); }
.sistema p { font: 400 clamp(1.4rem, 2.4vw, 2.1rem) / 1.3 var(--f-texto); color: #d9d6cf; letter-spacing: -0.01em; }
.sistema p b { color: #fff; font-weight: 600; }
.pulso { grid-column: 1 / -1; width: 100%; height: 110px; overflow: visible; }
.pulso path { fill: none; stroke: var(--salvia-c); stroke-width: 1.6; stroke-linejoin: round; }
.pulso text { font: 500 13px var(--f-texto); fill: #8f9a96; }

/* ======================================================== ENTRENAMIENTO */
.mundo-train { background: var(--negro); color: var(--hueso); overflow: hidden; }
.intro-train { position: relative; height: min(100svh, 980px); min-height: 600px; display: grid; place-items: center; overflow: hidden; }
.intro-train .foto { position: absolute; inset: 0; clip-path: inset(3% 14% 3% 14%); }
.intro-train .foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(0.8); }
.intro-train .palabra { position: relative; z-index: 2; width: 100%; overflow: hidden; white-space: nowrap; font: italic 900 clamp(6rem, 19vw, 20rem) / 0.86 var(--f-train); text-transform: uppercase; letter-spacing: -0.02em; color: var(--hueso); padding-block: 0.06em; text-shadow: 0 0.04em 0.4em rgba(0, 0, 0, 0.35); }
.palabra-in, .cinta-in, .cinta-n-in, .tira-g-in { display: flex; width: max-content; will-change: transform; }
.palabra-in span { padding-right: 0.3em; }
.intro-train .lema { position: absolute; z-index: 2; left: clamp(16px, 4.5vw, 64px); bottom: clamp(1.6rem, 4vw, 3rem); font: italic 700 clamp(1.2rem, 2vw, 1.6rem) var(--f-train); text-transform: uppercase; color: var(--hueso); letter-spacing: 0.02em; }
.train-cuerpo { padding-block: var(--aire) 0; }
.train-cab { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.train-cab h2 { font: italic 800 clamp(3.4rem, 8vw, 8.4rem) / 0.84 var(--f-train); text-transform: uppercase; letter-spacing: -0.01em; }
.train-cab p { color: var(--hueso-2); font-size: 1.125rem; max-width: 30rem; }
.cinta { margin-block: clamp(3rem, 6vw, 5rem); border-block: 1px solid #262624; padding-block: 1.2rem; overflow: hidden; }
.cinta-in { font: italic 800 clamp(2.4rem, 5vw, 4.8rem) / 1 var(--f-train); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--hueso-2); will-change: transform; }
.cinta-in span { padding-right: 3.5rem; }
.cinta-in span:nth-child(odd) { color: var(--hueso); -webkit-text-stroke: 0; }
.marcador-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem 4rem; align-items: start; }
.marcador-cab .foto-t { aspect-ratio: 4 / 5; overflow: hidden; }
.marcador-cab .foto-t img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.08); }
.marcador h3 { font: italic 800 clamp(2rem, 3.4vw, 3rem) / 1 var(--f-train); text-transform: uppercase; margin-bottom: 1.4rem; }
.fila-m { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0.6rem; border-top: 1px solid #262624; transition: background 0.35s, color 0.35s; }
.fila-m:last-of-type { border-bottom: 1px solid #262624; }
.fila-m:hover { background: var(--hueso); color: #000; }
.fila-m .s { font: italic 800 clamp(2.6rem, 5vw, 4.6rem) / 0.9 var(--f-train); text-transform: uppercase; }
.fila-m .s small { font-size: 0.42em; margin-left: 0.3rem; letter-spacing: 0.02em; }
.fila-m .c { font-size: 0.875rem; color: var(--hueso-2); text-align: right; transition: color 0.35s; }
.fila-m:hover .c { color: #3a3936; }
.fila-m .p { font: 700 clamp(1.6rem, 2.6vw, 2.2rem) var(--f-train); font-variant-numeric: tabular-nums; min-width: 5.5ch; text-align: right; }
.incluye-t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid #262624; }
.incluye-t div { padding: 1rem 1rem 0 0; font-size: 0.9375rem; color: var(--hueso-2); }
.incluye-t b { display: block; color: var(--hueso); font: italic 700 1.25rem var(--f-train); text-transform: uppercase; }
.boton-t { display: inline-flex; align-items: center; justify-content: center; margin-top: 2.4rem; background: var(--hueso); color: #000; text-decoration: none; padding: 1.1rem 2rem; font: italic 800 1.25rem var(--f-train); text-transform: uppercase; letter-spacing: 0.02em; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.3s; }
.boton-t:hover { transform: skewX(-8deg); background: #fff; }

/* ======================================================== NUTRICIÓN */
.mundo-nutri { background: var(--clinico); color: var(--tinta-n); }
.intro-nutri { min-height: min(100svh, 980px); display: grid; align-items: center; padding-block: clamp(5rem, 9vw, 7rem); }
.intro-nutri .cont { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem 5rem; align-items: center; }
.intro-nutri h2 { font: 400 clamp(3.2rem, 7.2vw, 7.4rem) / 0.95 var(--f-nutri); letter-spacing: -0.04em; }
.intro-nutri h2 em { font-style: italic; color: var(--salvia-o); }
.intro-nutri .bajada { margin-top: 2rem; font-size: 1.125rem; color: var(--tinta-n2); max-width: 30rem; }
.escaner { position: relative; }
.escaner .marco { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e9eeec; }
.escaner .marco img { width: 100%; height: 100%; object-fit: cover; }
.escaner .barrido { position: absolute; left: -6%; right: -6%; top: 0; height: 2px; background: var(--salvia-o); box-shadow: 0 0 0 1px rgba(62, 86, 79, 0.15), 0 0 18px rgba(62, 86, 79, 0.45); opacity: 0; }
.regla { position: absolute; top: 0; bottom: 0; right: -38px; width: 30px; overflow: visible; }
.regla line { stroke: var(--tinta-n2); stroke-width: 1; }
.regla text { font: 400 10px var(--f-texto); fill: var(--tinta-n2); }
.escaner figcaption { margin-top: 0.9rem; font: italic 400 1rem var(--f-nutri); color: var(--tinta-n2); }
.cinta-n { overflow: hidden; border-block: 1px solid var(--hilo); padding-block: 1.1rem; }
.cinta-n-in { font: italic 400 clamp(1.8rem, 3.4vw, 3rem) / 1.1 var(--f-nutri); letter-spacing: -0.02em; color: var(--tinta-n2); }
.cinta-n-in span { padding-right: 3rem; }
.cinta-n-in span::after { content: ''; display: inline-block; width: 1px; height: 0.7em; background: var(--hilo); margin-left: 3rem; vertical-align: -0.05em; }
.reporte { padding-block: var(--aire); }
.reporte-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: end; margin-bottom: 2.6rem; }
.reporte-cab h3 { font: 400 clamp(2.4rem, 4.4vw, 4rem) / 1 var(--f-nutri); letter-spacing: -0.03em; }
.reporte-cab p { color: var(--tinta-n2); }
.tabla-n { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabla-n th, .tabla-n td { padding: 1.05rem 0.8rem; border-bottom: 1px solid var(--hilo); text-align: left; vertical-align: baseline; }
.tabla-n thead th { border-bottom: 1px solid var(--tinta-n); font-weight: 500; vertical-align: bottom; }
.tabla-n thead .plan-n { font: 400 1.6rem var(--f-nutri); letter-spacing: -0.02em; display: block; }
.tabla-n thead .precio-n { font: italic 400 1.0625rem var(--f-nutri); color: var(--salvia-o); }
.tabla-n tbody th { font-weight: 500; width: 46%; }
.tabla-n td { color: var(--tinta-n2); }
.tabla-n td.si { color: var(--tinta-n); font: italic 400 1.0625rem var(--f-nutri); }
.tabla-env { overflow-x: auto; }
.cita-n { padding-block: 0 var(--aire); }
.cita-n .cont { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem 5rem; align-items: center; }
.cita-n .foto-n { aspect-ratio: 4 / 5; overflow: hidden; }
.cita-n .foto-n img { width: 100%; height: 100%; object-fit: cover; }
.cita-n blockquote { margin: 0; font: italic 400 clamp(1.9rem, 3.4vw, 3.1rem) / 1.15 var(--f-nutri); letter-spacing: -0.02em; }
.objetivos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2.6rem; border-top: 1px solid var(--tinta-n); }
.objetivos span { padding: 0.9rem 1rem 0 0; font-size: 0.9375rem; color: var(--tinta-n2); }
.boton-n { display: inline-block; margin-top: 2.4rem; padding: 1rem 1.6rem; border: 1px solid var(--tinta-n); color: var(--tinta-n); text-decoration: none; font: italic 400 1.1875rem var(--f-nutri); transition: background 0.4s, color 0.4s; }
.boton-n:hover { background: var(--tinta-n); color: var(--clinico); }

/* ======================================================== GET FIT EATING */
.mundo-gfe { background-color: var(--kraft-f); color: var(--cafe); position: relative; }
.mundo-gfe::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .17 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E"); }
.mundo-gfe > * { position: relative; }
.intro-gfe { min-height: min(100svh, 980px); display: grid; align-items: center; padding-block: clamp(5rem, 9vw, 7rem); overflow: hidden; }
.intro-gfe .cont { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem 4rem; align-items: center; }
.logo-gfe { width: clamp(180px, 22vw, 280px); margin-bottom: 2rem; }
.intro-gfe h2 { font: 700 clamp(3rem, 6.4vw, 6.4rem) / 0.98 var(--f-gfe); letter-spacing: -0.045em; color: var(--salvia-o); }
.intro-gfe .bajada { margin-top: 1.6rem; font-size: 1.125rem; max-width: 30rem; color: #5b4a35; }
.caja-foto { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 36px; clip-path: inset(22% 22% 22% 22% round 36px); }
.caja-foto img { width: 100%; height: 100%; object-fit: cover; }
.boton-g { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 1.6rem; border-radius: 40px; background: var(--salvia-o); color: #fff; text-decoration: none; font: 600 1rem var(--f-gfe); letter-spacing: -0.01em; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.3s; }
.boton-g:hover { transform: translateY(-3px) scale(1.02); background: #2f433d; }
.boton-g.secundario { background: transparent; color: var(--salvia-o); box-shadow: inset 0 0 0 2px var(--salvia-o); }
.acciones-g { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

.tira-g { overflow: hidden; padding-block: 1.4rem; border-block: 1.5px solid rgba(59, 42, 23, 0.14); }
.tira-g-in { font: 600 clamp(1.6rem, 3vw, 2.6rem) / 1 var(--f-gfe); letter-spacing: -0.035em; color: var(--salvia-o); }
.tira-g-in span { display: inline-flex; align-items: center; gap: 0.45em; padding-right: 1.4em; white-space: nowrap; }
.tira-g-in img { width: 1.35em; height: 1.35em; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--kraft-f), 0 6px 14px rgba(59, 42, 23, 0.25); }
.armar { padding-block: var(--aire) 0; }
.armar .cont { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; align-items: center; }
.plato-g { background: var(--cafe); border-radius: 40px; padding: clamp(1.2rem, 3vw, 2.4rem); position: relative; }
.plato-g svg { width: 100%; height: auto; display: block; }
.plato-g .vapor path { opacity: 0.35; }
.cifras-g { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.cifras-g span { background: rgba(255, 255, 255, 0.1); color: var(--kraft-f); border-radius: 30px; padding: 0.4rem 0.9rem; font: 500 0.875rem var(--f-gfe); font-variant-numeric: tabular-nums; }
.envase-g { position: absolute; top: 1.2rem; right: 1.2rem; display: flex; background: rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 0.25rem; }
.envase-g button { border: 0; background: none; color: var(--kraft-c); font: 600 0.8125rem var(--f-gfe); padding: 0.4rem 0.9rem; border-radius: 30px; cursor: pointer; }
.envase-g button[aria-pressed="true"] { background: var(--kraft-c); color: var(--cafe); }
.armar h3 { font: 700 clamp(2.2rem, 3.6vw, 3.4rem) / 1 var(--f-gfe); letter-spacing: -0.04em; color: var(--salvia-o); }
.armar .txt { margin: 1rem 0 1.6rem; color: #5b4a35; }
.grupo-g { margin-bottom: 1.2rem; }
.grupo-g p { font: 600 0.9375rem var(--f-gfe); margin-bottom: 0.55rem; display: flex; justify-content: space-between; }
.grupo-g p small { font-weight: 500; color: #8a7458; }
.chips-g { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-g { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; background: rgba(255, 255, 255, 0.55); border-radius: 40px; padding: 0.3rem 0.85rem 0.3rem 0.3rem; font: 500 0.875rem var(--f-gfe); color: var(--cafe); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: background 0.2s, box-shadow 0.2s, translate 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.chip-g img { width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; }
.chip-g:hover { translate: 0 -2px; background: #fff; }
.chip-g[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--salvia-o); }
.chip-g .pr { font-size: 0.6875rem; font-weight: 700; color: #9a6f11; }

.planes-g { padding-block: var(--aire); }
.planes-g h3 { font: 700 clamp(2.2rem, 4vw, 3.8rem) / 1 var(--f-gfe); letter-spacing: -0.04em; color: var(--salvia-o); margin-bottom: 2rem; }
.escala-cab, .fila-p { display: grid; grid-template-columns: minmax(12rem, 0.95fr) minmax(0, 2.3fr) minmax(8rem, 0.5fr); gap: 1.5rem; align-items: center; }
.escala-cab { font: 500 0.8125rem var(--f-gfe); color: #8a7458; padding-bottom: 0.6rem; }
.marcas { position: relative; height: 1.2rem; }
.marcas span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.fila-p { width: 100%; border: 0; background: rgba(255, 255, 255, 0.45); border-radius: 26px; padding: 1.2rem 1.4rem; margin-bottom: 0.6rem; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background 0.3s, translate 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.fila-p:hover { background: #fff; translate: 6px 0; }
.fila-p .nom { font: 700 1.45rem / 1.05 var(--f-gfe); letter-spacing: -0.03em; color: var(--salvia-o); }
.fila-p .nom small { display: block; font: 400 0.8125rem var(--f-gfe); color: #7a6650; letter-spacing: 0; margin-top: 0.2rem; }
.riel { position: relative; height: 26px; border-radius: 20px; background: rgba(59, 42, 23, 0.07); }
.banda { position: absolute; top: 5px; height: 16px; border-radius: 20px; background: var(--salvia); transform-origin: left; }
.fila-p.premium .banda { background: var(--oro); }
.banda.libre { left: 0 !important; width: 100% !important; background: repeating-linear-gradient(90deg, var(--oro) 0 14px, transparent 14px 22px); top: 11px; height: 4px; }
.banda em { position: absolute; top: -1.35rem; left: 0.3rem; font: normal 500 0.75rem var(--f-gfe); color: #7a6650; white-space: nowrap; }
.fila-p .pre { text-align: right; font: 700 1.5rem var(--f-gfe); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fila-p .pre small { display: block; font: 400 0.75rem var(--f-gfe); color: #7a6650; letter-spacing: 0; }
.det-p { overflow: hidden; height: 0; }
.det-p.abierto { height: auto; }
.det-p .in { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 0.4rem 1.4rem 1.6rem; }
.det-p img { width: 100%; filter: drop-shadow(0 16px 20px rgba(59, 42, 23, 0.25)); }
.det-p dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 2rem; }
.det-p dt { font: 600 0.875rem var(--f-gfe); color: var(--salvia-o); }
.det-p dd { margin: 0; font-size: 0.9375rem; color: #5b4a35; }
.datos-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.6rem; }
.datos-g div { background: rgba(255, 255, 255, 0.45); border-radius: 26px; padding: 1.2rem 1.4rem; font-size: 0.9375rem; color: #5b4a35; }
.datos-g b { display: block; font: 700 1.15rem var(--f-gfe); letter-spacing: -0.02em; color: var(--cafe); margin-bottom: 0.25rem; }

/* ======================================================== DR. CHRIS, PREGUNTAS, PIE */
.doctor { background: var(--negro); padding-block: var(--aire); overflow: hidden; }
.doctor .cont { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3rem 5rem; align-items: end; }
.doctor-foto { aspect-ratio: 4 / 5; overflow: hidden; }
.doctor-foto img { width: 100%; height: 100%; object-fit: cover; }
.doctor-firma { width: min(480px, 92%); margin-bottom: 2.2rem; }
.doctor h2 { font: 600 clamp(2.4rem, 4.2vw, 3.8rem) / 1.02 var(--f-texto); letter-spacing: -0.035em; color: #fff; }
.doctor .texto { color: #c9c6bf; margin-top: 1.4rem; max-width: 34rem; font-size: 1.125rem; }
.pendiente { margin-top: 1.8rem; border-left: 2px solid var(--oro); padding-left: 1rem; color: #c9c6bf; font-size: 0.9375rem; max-width: 34rem; }
.pendiente b { color: var(--oro); display: block; }
.sellos { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem; }
.sellos img { width: 60px; height: 60px; object-fit: contain; filter: invert(1); opacity: 0.85; }
.sellos img.blanco { filter: none; }
.preguntas { background: var(--hueso); color: #000; padding-block: var(--aire); }
.preguntas .cont { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem 5rem; }
.preguntas h2 { font: 600 clamp(2.4rem, 4.2vw, 3.8rem) / 1.02 var(--f-texto); letter-spacing: -0.035em; }
.preguntas .lado p { color: #55524c; margin-top: 1.2rem; }
.faq details { border-bottom: 1px solid #cfcac0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; font: 600 1.125rem var(--f-texto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 16px; height: 16px; flex: none; align-self: center; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #000; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { padding-bottom: 1.3rem; color: #55524c; max-width: 42rem; }
.pie { background: var(--negro); color: #a6a29b; padding-block: 4rem 2rem; }
.pie .cont { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pie img { width: 200px; margin-bottom: 1rem; }
.pie h4 { margin: 0 0 0.8rem; color: #fff; font-size: 0.9375rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.9375rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; }
.pie .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; border-top: 1px solid #1f1f1d; padding-top: 1.3rem; font-size: 0.8125rem; color: #6b6862; }
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: grid; place-items: center; }
.wa svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- celular y tabletas */
@media (max-width: 960px) {
  .nav-mundos { display: none; }
  .nav .cont { grid-template-columns: auto 1fr; }
  .nav-der { justify-self: end; }
  .triptico { flex-direction: column; height: auto; min-height: 0; }
  .panel { flex: none; height: 62svh; min-height: 380px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .triptico:hover .panel, .triptico .panel:hover { flex-grow: 0; }
  .sistema .cont, .train-cab, .marcador-cab, .intro-nutri .cont, .reporte-cab, .cita-n .cont, .intro-gfe .cont, .armar .cont, .doctor .cont, .preguntas .cont { grid-template-columns: 1fr; }
  .intro-train .foto { clip-path: inset(6% 6% 6% 6%); }
  .intro-train { height: 78svh; min-height: 480px; }
  .incluye-t, .objetivos { grid-template-columns: 1fr 1fr; }
  .regla { display: none; }
  .escala-cab { display: none; }
  .fila-p { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-p .riel { grid-column: 1 / -1; order: 3; }
  .det-p .in { grid-template-columns: 1fr; }
  .det-p img { max-width: 180px; }
  .datos-g { grid-template-columns: 1fr; }
  .pie .cont { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .nav { padding-top: 46px; }
  .nav-der { gap: 1.1rem; font-size: 0.875rem; }
  .nav-logo img { height: 24px; }
  .fila-m { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-m .c { display: none; }
  .det-p dl { grid-template-columns: 1fr; }
  .pie .cont { grid-template-columns: 1fr; }
  .tabla-n th, .tabla-n td { padding-inline: 0.4rem; }
}

/* ---------- cintas de texto: corren solas con CSS; el JavaScript solo las acelera e inclina al bajar */
@keyframes correr-izq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes correr-der { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.palabra-in { animation: correr-izq 26s linear infinite; }
.cinta-in { animation: correr-izq 30s linear infinite; }
.cinta-n-in { animation: correr-der 70s linear infinite; }
.tira-g-in { animation: correr-izq 50s linear infinite; }
.cinta { transform: skewX(var(--sesgo, 0deg)); }