/* Dr. ChrisFit v4: la v3 tal cual (formas, letras, orden y animaciones) con los colores del sitio oficial:
   blanco y negro, y el azul verdoso del logo (#aabfb9) como acento. Sin el kraft ni el café.
   Orden de fondos: portada, cintas y Entrenamiento en negro; Nutrición en blanco; Get Fit Eating en gris claro;
   cinta blanca; Dr. Chris en negro; preguntas en blanco; banda azul; pie en negro. */
:root {
  --azul: #aabfb9;
  --azul-m: #6d8c83;
  --azul-o: #3e564f;
  --gris: #f4f6f5;
  --hueso: #fff;
  --hueso-2: #a3a3a3;
  --clinico: #fff;
  --tinta-n: #000;
  --tinta-n2: #555;
  --hilo: #e2e2e2;
  --kraft: var(--azul-m);
  --kraft-c: var(--azul);
  --kraft-f: var(--gris);
  --cafe: #000;
  --oro: var(--azul);
}
.proto { background: var(--azul); }

/* ---------- banda del sistema: solo el pulso, sin la firma ni el texto */
.sistema { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.sistema .cont { display: block; }

/* ---------- Get Fit Eating: el mismo diseño de la v3 en gris claro, sin papel kraft */
.mundo-gfe { background-color: var(--gris); color: #000; }
.mundo-gfe::before { display: none; }
.intro-gfe .bajada, .armar .txt, .datos-g div, .det-p dd { color: #555; }
.grupo-g p small, .escala-cab, .fila-p .nom small, .fila-p .pre small, .banda em { color: #6b6b6b; }
.chip-g { background: #fff; color: #000; }
.chip-g .pr { color: var(--azul-o); }
.riel { background: rgba(0, 0, 0, 0.06); }
.tira-g { border-color: rgba(0, 0, 0, 0.1); }
.tira-g-in img { box-shadow: 0 0 0 3px var(--gris), 0 6px 14px rgba(0, 0, 0, 0.18); }
.fila-p, .datos-g div { background: #fff; }
.det-p img { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.18)); }
.datos-g b { color: #000; }
.wa { background: var(--azul); }
.wa svg { fill: #000; }

/* ---------- barra de avance y cursor propio */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--azul); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 70; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1.5px solid #fff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none; display: grid; place-items: center; opacity: 0; transition: width 0.4s cubic-bezier(0.7, 0, 0.2, 1), height 0.4s cubic-bezier(0.7, 0, 0.2, 1), margin 0.4s cubic-bezier(0.7, 0, 0.2, 1), background-color 0.3s, opacity 0.3s; }
.cursor span { font: 600 0.75rem var(--f-texto); color: #000; opacity: 0; transition: opacity 0.2s; }
.cursor.grande { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: #fff; }
.cursor.grande span { opacity: 1; }
.cursor.enlace { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- cintas gigantes en carrusel: cada palabra con la letra de su mundo */
.mega { overflow: hidden; padding-block: clamp(1.6rem, 3.4vw, 2.8rem); display: grid; gap: 0.2rem; }
.mega-negra { background: #000; color: #fff; border-top: 1px solid #1d1d1d; }
.mega-blanca { background: #fff; color: #000; }
.mega-fila { display: block; overflow: hidden; transform: skewX(var(--sesgo, 0deg)); font-size: clamp(3.4rem, 9vw, 9rem); line-height: 1.1; }
.mega-fila.hueca { font-size: clamp(2.2rem, 5.4vw, 5.4rem); }
.mega-in { display: flex; align-items: baseline; width: max-content; white-space: nowrap; will-change: transform; }
.mega-in > span { padding-right: 0.55em; }
.mega .f-t { font: italic 900 1em / 1.1 var(--f-train); text-transform: uppercase; letter-spacing: -0.01em; }
.mega .f-n { font: 400 1.04em / 1.1 var(--f-nutri); letter-spacing: -0.04em; }
.mega .f-g { font: 700 0.9em / 1.1 var(--f-gfe); letter-spacing: -0.05em; }
.mega-fila.hueca .mega-in { color: transparent; -webkit-text-stroke: 1.2px #777; }
.mega-negra .llena .f-g { color: var(--azul); }
.mega-blanca .mega-fila { font-size: clamp(2.6rem, 6.4vw, 6.4rem); }
.mega-blanca .mega-in > span { font: 700 1em / 1.15 var(--f-texto); letter-spacing: -0.045em; }
.mega-blanca .mega-in > span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px #000; }
.cierre-azul { display: block; background: var(--azul); color: #000; text-decoration: none; padding-block: clamp(2.6rem, 6vw, 5rem); overflow: hidden; }
.cierre-azul .mega-fila { font-size: clamp(4rem, 12vw, 12rem); }
.cierre-azul .mega-in > span { font: 700 1em / 1.05 var(--f-gfe); letter-spacing: -0.055em; }
.cierre-azul .mega-in > span:nth-child(even) { color: transparent; -webkit-text-stroke: 2px #000; }
.cierre-txt { display: block; max-width: 1400px; margin: 1.2rem auto 0; padding-inline: clamp(16px, 4.5vw, 64px); font: 500 1.0625rem var(--f-texto); }
.mega-negra .llena .mega-in { animation: correr-izq 46s linear infinite; }
.mega-negra .hueca .mega-in { animation: correr-der 40s linear infinite; }
.mega-blanca .mega-in { animation: correr-izq 52s linear infinite; }
.cierre-azul .mega-in { animation: correr-izq 26s linear infinite; }

/* ---------- filas del marcador: el blanco entra de izquierda a derecha */
.fila-m { background: linear-gradient(#fff, #fff) no-repeat left / 0% 100%; transition: background-size 0.6s cubic-bezier(0.7, 0, 0.2, 1), color 0.35s; }
.fila-m:hover { background: linear-gradient(#fff, #fff) no-repeat left / 100% 100%; color: #000; }

/* ---------- firma gigante en el pie */
.pie .pie-firma { grid-column: 1 / -1; width: 100%; margin: 2.4rem 0 0.6rem; opacity: 0.92; }

/* ---------- v5: una cuenta, tres espacios */
.boton-t.sec { background: transparent; color: var(--hueso); box-shadow: inset 0 0 0 1.5px var(--hueso); margin-left: 0.6rem; }
.boton-t.sec:hover { background: var(--hueso); color: #000; }
.boton-n.sec { margin-left: 0.6rem; background: var(--tinta-n); color: var(--clinico); }
.eco { background: #000; color: #fff; padding-block: var(--aire); }
.eco .cont { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.4rem 4rem; align-items: end; }
.eco-cab h2 { font: 600 clamp(2.6rem, 5vw, 4.6rem) / 1 var(--f-texto); letter-spacing: -0.045em; }
.eco-cab p { color: #c9c9c9; margin: 1.2rem 0 2rem; font-size: 1.125rem; max-width: 30rem; }
.eco-cab .boton-g { background: var(--azul); color: #000; }
.eco-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.eco-c { display: flex; flex-direction: column; min-height: 20rem; padding: 1.5rem 1.4rem; border-radius: 26px; text-decoration: none; transition: translate 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.eco-c:hover { translate: 0 -6px; }
.eco-n { margin-bottom: auto; }
.eco-l { padding: 0.65rem 0; border-top: 1px solid currentColor; font-size: 0.9375rem; }
.eco-train { background: #111; color: #fff; box-shadow: inset 0 0 0 1px #2a2a2a; }
.eco-train .eco-n { font: italic 900 2.4rem / 0.9 var(--f-train); text-transform: uppercase; }
.eco-train .eco-l { border-color: #2a2a2a; }
.eco-nutri { background: #fff; color: #000; }
.eco-nutri .eco-n { font: 400 2.5rem / 0.95 var(--f-nutri); letter-spacing: -0.03em; }
.eco-nutri .eco-l { border-color: var(--hilo); }
.eco-gfe { background: var(--azul); color: #000; }
.eco-gfe .eco-n { font: 700 2rem / 1 var(--f-gfe); letter-spacing: -0.045em; }
.eco-gfe .eco-l { border-color: rgba(0, 0, 0, 0.18); }
@media (max-width: 960px) {
  .eco .cont, .eco-tres { grid-template-columns: 1fr; }
  .eco-c { min-height: 0; }
  .boton-t.sec, .boton-n.sec { margin-left: 0; }
}