/* =========================================================
   FILIPE PRATES · Hoja de estilos
   ---------------------------------------------------------
   Las secciones van en el mismo orden que en index.html:
     1. Fuentes y variables (paleta: neutros + violeta, tipos, espacios)
     2. Base y utilidades
     3. Componentes comunes (botones, revelado, subrayado a mano)
     4. Cabecera, menú móvil y barra de contacto móvil
     5. Hero (solo variables: el hero es definitivo)
     6. Credenciales
     7. ¿Es para ti?
     8. Método
     9. Entrenamiento
    10. Sobre mí
    10 b. Marcas (logos y código de descuento)
    11. Cómo empezamos
    12. Preguntas frecuentes
    13. Contacto y formulario
    14. Pie
    15. Páginas interiores (legales y 404)
    16. Movimiento reducido
   Para cambiar un color o un tamaño en toda la web, edita las
   variables del apartado 1.
   ========================================================= */


/* =========================================================
   1. FUENTES Y VARIABLES
   ========================================================= */
/* Fuentes alojadas en el propio servidor (sin Google Fonts: privacidad).
   Recortadas a los caracteres del español. Licencia SIL Open Font License.
   Mr Dafoe es PROVISIONAL: se sustituirá por la letra a mano de Filipe en SVG. */
@font-face{font-family:"Archivo";src:url(../fuentes/archivo.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Outfit";src:url(../fuentes/outfit.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Mr Dafoe";src:url(../fuentes/mr-dafoe.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* Paleta (v3, 26/10: acento violeta) */
  --fondo:#0F0D0C;        /* carbón */
  --superficie:#1A1715;   /* tizón */
  --humo:#2B2522;         /* tipografía fantasma */
  --texto:#EFE8DF;        /* hueso */
  --texto2:#A0968E;       /* ceniza */
  --acento:#C084FF;       /* violeta (26/10; antes brasa #FF5A36): acción. Encima, texto carbón */
  --acento-fg:#0F0D0C;
  --profundo:#33104F;     /* morado noche (26/10; antes burdeos #4A140E): solo para luces de fondo */
  --error:#FF8F7A;
  --claro:#EFE8DF; --claro-texto:#0F0D0C; --claro-texto2:#5A514B;   /* secciones claras */
  --linea:rgb(239 232 223 / .12); --linea-clara:rgb(15 13 12 / .16);

  /* Tipografía */
  --font:"Archivo","Arial Narrow",system-ui,sans-serif;
  --menu-font:"Outfit",var(--font);
  --mano:"Mr Dafoe","Brush Script MT",cursive;
  --cond:62%; --semi:82%;   /* anchuras de Archivo: condensada y semicondensada */
  --t-crono:clamp(5.4rem,29.7vw,23.4rem); --t-h2:clamp(2.5rem,9.5vw,5rem); --t-h3:clamp(1.375rem,4vw,1.75rem);
  --t-lead:clamp(1.125rem,2.4vw,1.3125rem); --t-body:clamp(1.0625rem,1.2vw,1.125rem); --t-small:.875rem;

  /* Espacios y medidas */
  --s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --gutter:clamp(16px,5vw,64px); --section:clamp(88px,13vw,180px); --max:76rem; --radio:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --cruz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23C084FF' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}


/* =========================================================
   2. BASE Y UTILIDADES
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--font);font-size:var(--t-body);line-height:1.55;overflow-x:clip;position:relative}
img{max-width:100%;display:block}
p{max-width:65ch}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.section{padding-block:var(--section);position:relative;overflow:clip}
.muted{color:var(--texto2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nw{white-space:nowrap}   /* palabras que no deben partirse (p. ej. T-Center) */
.pend{font-style:italic;color:var(--texto2)}   /* textos [PENDIENTE] hasta tener el dato de Filipe */

/* Enlace «Saltar al contenido»: solo se ve al recibir el foco con el teclado */
.saltar{position:fixed;top:8px;left:8px;z-index:60;padding:12px 16px;background:var(--acento);color:var(--acento-fg);font-weight:700;text-decoration:none;transform:translateY(-200%)}
.saltar:focus{transform:none}

/* Grano de película: textura estática sobre toda la página */
body::after{content:"";position:absolute;inset:0;z-index:100;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Titulares */
h2,.h2{font-size:var(--t-h2);font-weight:850;font-stretch:var(--cond);line-height:.96;text-transform:uppercase;letter-spacing:-.005em;margin:0;max-width:16ch;text-wrap:balance}
h3{font-size:var(--t-h3);font-weight:750;font-stretch:var(--semi);line-height:1.1;text-transform:uppercase;margin:0}
.lead{font-size:var(--t-lead);line-height:1.45;max-width:38rem;margin:var(--s-5) 0 0}
.crono{font-size:var(--t-crono);font-weight:850;font-stretch:var(--cond);line-height:.82;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;margin:0}
.fantasma{position:absolute;pointer-events:none;user-select:none;color:var(--humo);font-weight:850;font-stretch:var(--cond);text-transform:uppercase;line-height:.8;white-space:nowrap;margin:0}
.mano{font-family:var(--mano);color:var(--acento);font-weight:400;text-transform:none;letter-spacing:0;line-height:1;position:absolute;transform:rotate(-7deg);white-space:nowrap;pointer-events:none}
.etiqueta{font-family:var(--menu-font);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin:0}


/* =========================================================
   3. COMPONENTES COMUNES
   ========================================================= */
/* Botones: barrido de color al pasar el ratón */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.5rem;border-radius:var(--radio);
  font:inherit;font-weight:750;font-stretch:var(--semi);font-size:1rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--texto);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn-primario{background:var(--acento);color:var(--acento-fg)}
.btn-secundario{color:var(--texto);border-color:currentColor;background:transparent}
.btn-secundario:hover{color:var(--fondo)}
.btn svg{width:20px;height:20px;flex:none}
.btn[disabled]{opacity:.7;cursor:progress}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--acento);outline-offset:3px}

/* Viñeta de estrella */
.estrella{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;transform:translateY(.12em)}

/* Revelado de titulares: de desenfocado a nítido, una vez (solo con JS) */
.js [data-reveal]{opacity:0;filter:blur(14px);transform:translateY(12px);transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;filter:none;transform:none}

/* Subrayado a mano (menú, pie y enlaces de texto). El trazo lo dibuja js/main.js */
.menu-txt{position:relative;display:inline-block}
.trazo{position:absolute;left:0;right:0;top:calc(100% - .06em);height:.625em;pointer-events:none;color:var(--acento)}
.trazo svg{display:block;width:100%;height:100%;overflow:visible;transform:translateY(var(--dy,0px)) rotate(var(--giro,0deg))}
.trazo path{fill:none;stroke:currentColor;stroke-width:var(--grosor,10);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1)}
.trazo.is-on path{stroke-dashoffset:0}
.trazo.is-off path{stroke-dashoffset:-1;transition-duration:.4s}

/* Parallax suave de fotos (solo navegadores compatibles y sin movimiento reducido) */
.recorte{overflow:hidden}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .parallax{animation:plx linear both;animation-timeline:view();animation-range:cover}
    @keyframes plx{from{transform:translateY(-6%) scale(1.12)}to{transform:translateY(6%) scale(1.12)}}
  }
}


/* =========================================================
   4. CABECERA, MENÚ MÓVIL Y BARRA DE CONTACTO MÓVIL
   ========================================================= */
.cab{position:fixed;top:0;left:0;right:0;z-index:40;background:linear-gradient(rgb(0 0 0 / .5),transparent);transition:background-color .3s var(--ease)}
.cab.is-solida{background:rgb(15 13 12 / .86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linea)}
body:has(.mm.is-open) .cab{background:transparent;backdrop-filter:none;box-shadow:none}
.cab-in{display:flex;align-items:center;justify-content:space-between;height:64px;padding-inline:var(--gutter)}
.cab-izq{display:flex;align-items:center;gap:clamp(48px,5.5vw,88px)}
.cab-logo{display:block;padding-block:6px}   /* zona táctil de 44 px */
.cab-logo img{height:32px;width:auto}
.cab-der{display:flex;align-items:center;gap:12px}
.cab-cta{min-height:44px;font-size:.875rem;padding:0 1rem;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.js .cab-cta.is-oculto{opacity:0;transform:translateY(-8px);visibility:hidden}
@media (max-width:759px){.cab-cta{display:none}}
.menu{display:none;align-items:center;gap:.625em;font-family:var(--menu-font);font-size:clamp(1rem,1.111vw,1.25rem);line-height:1.1}
.menu a{display:block;padding-block:12px;color:var(--texto);text-decoration:none}
.cab-volver{display:inline-flex;align-items:center;gap:.5em;font-family:var(--menu-font);color:var(--texto);text-decoration:none;padding-block:12px}
.cab-volver svg{width:18px;height:18px;transform:rotate(180deg)}
@media (min-width:1000px){.cab-in{height:88px}.cab-logo img{height:40px}.menu{display:flex}.burger{display:none}}

/* Botón de menú (dos rayas que se cruzan en una ✕) */
.burger{position:relative;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:var(--texto);cursor:pointer}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:currentColor;border-radius:1px;transition:transform .35s var(--ease)}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Menú móvil a pantalla completa */
.mm{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:64px 1fr auto;padding:0 var(--gutter) max(24px,env(safe-area-inset-bottom));
  background:rgb(15 13 12 / .94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.mm.is-open{opacity:1;visibility:visible}
.mm::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 45% at 50% 100%,color-mix(in srgb,var(--profundo) 80%,transparent),transparent)}
.mm > nav{align-self:center}
.mm:focus{outline:none}
.mm-lista{list-style:none;margin:0;padding:0;display:grid;justify-items:center;gap:6px;text-align:center}
.mm-lista a{display:inline-block;padding:4px 8px;color:var(--texto);text-decoration:none;font-family:var(--menu-font);font-size:clamp(2.5rem,12vw,3.25rem);line-height:1.08;letter-spacing:-.01em}
.mm-txt{position:relative;display:inline-block}
.mm-txt .trazo{--grosor:6;top:calc(100% - .27em);height:.45em}
.chars{display:inline-block}
.char{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.char > span{display:inline-block;transform:translateY(110%);transition:transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 18ms + var(--fila) * 70ms + 120ms)}
.mm.is-open .char > span{transform:none}
.mm-pie{display:grid;gap:14px;justify-items:center;text-align:center;padding-top:18px;border-top:1px solid var(--linea);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .45s,transform .5s var(--ease) .45s}
.mm.is-open .mm-pie{opacity:1;transform:none}
.mm-pie p{margin:0;color:var(--texto2);font-size:.9375rem}
.mm-pie .btn{width:100%;max-width:340px;min-height:52px}
.redes{display:flex;flex-wrap:wrap;gap:.5em;font-family:var(--menu-font);font-size:1rem}
.redes a{position:relative;display:inline-block;padding-block:8px;color:var(--texto);text-decoration:none}
@media (min-width:1000px){.mm{display:none}}

/* Barra de contacto móvil: aparece cuando no se ve el botón del hero ni Contacto */
.barra-movil{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:1fr;gap:8px;padding:10px var(--gutter) max(10px,env(safe-area-inset-bottom));
  background:rgb(15 13 12 / .9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linea);transition:transform .35s var(--ease)}
.barra-movil .btn{min-height:46px;font-size:.875rem;padding:0 .75rem}
.js .barra-movil.is-oculto{transform:translateY(110%)}
@media (min-width:760px){.barra-movil{display:none}}


/* =========================================================
   5. HERO (definitivo): solo variables, tipografía y velo en carbón
   La lógica y el resto de estilos están en /hero/ y no se tocan.
   ========================================================= */
.hero-scroll{--hero-bg:var(--fondo);--hero-fg:var(--texto);--hero-muted:#d9d2c9;--hero-accent:var(--acento);--hero-accent-fg:var(--acento-fg);--hero-font:var(--font);--hero-length:200vh}
.hero-copy h1,.hero-copy .h1{font-weight:850;font-stretch:var(--cond)}
.hero-copy .eyebrow{color:var(--texto)}   /* antetítulo en blanco (hueso): en brasa no se leía sobre el cielo */
.hero-copy h1 .eyebrow{display:block;font-weight:400;font-stretch:100%;line-height:1.55}   /* el antetítulo va dentro del H1: no hereda su letra gruesa y condensada */
@media (max-width:759px){.solo-escritorio{display:none}}   /* en móvil, antetítulo corto */
.hero-copy .btn{font-stretch:var(--semi);font-weight:750;font-size:.9rem;min-height:48px}
.hero-sticky::after{background:linear-gradient(to top,rgb(15 13 12 / .8),transparent 55%),linear-gradient(to right,rgb(15 13 12 / .35),transparent 60%)}


/* =========================================================
   6. CREDENCIALES
   ========================================================= */
.cred{background:radial-gradient(50% 38% at 82% 62%,color-mix(in srgb,var(--profundo) 95%,transparent),transparent 100%),radial-gradient(40% 40% at 10% 0%,color-mix(in srgb,var(--acento) 10%,transparent),transparent 70%),var(--fondo)}
.cred .wrap{display:grid;gap:var(--s-7)}
.cred-intro p{margin:var(--s-5) 0 0;font-size:var(--t-lead);line-height:1.45;max-width:34rem;color:var(--texto2)}
.capas{position:relative;padding-top:clamp(70px,18vw,250px)}
.capas .fantasma{left:-.04em;font-size:clamp(3.4rem,15vw,12.5rem)}
.capas .f1{top:0}
.capas .f2{top:.8em}
.capas .crono{position:relative;color:var(--texto);margin-left:-.04em}
.capas .mano{font-size:clamp(2.2rem,6vw,4.5rem);right:4%;bottom:-.35em}
.cred-a .pie{margin:0;font-size:var(--t-h3);font-weight:750;font-stretch:var(--semi);line-height:1.15;max-width:22ch}
.parciales{margin-top:var(--s-6)}
.barra{display:flex;height:10px;gap:3px}
.barra span{display:block;border-radius:1px}
/* El ancho de cada tramo es proporcional a su tiempo en minutos */
.b-carrera{background:var(--texto);flex:30.47}.b-estaciones{background:var(--texto2);flex:26.73}.b-rox{background:var(--acento);flex:3.62}
.parciales dl{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:var(--s-6);margin:var(--s-4) 0 0}
.parciales dt{font-size:var(--t-small);color:var(--texto2);display:flex;align-items:center;gap:var(--s-2)}
.parciales dt i{width:10px;height:10px;display:inline-block}
.parciales .c-carrera{background:var(--texto)}.parciales .c-estaciones{background:var(--texto2)}.parciales .c-rox{background:var(--acento)}
.parciales dd{margin:0;font-size:1.6rem;font-weight:800;font-stretch:var(--cond);font-variant-numeric:tabular-nums}
.parciales dd small{display:block;font-size:var(--t-small);font-weight:500;font-stretch:100%;color:var(--texto2)}
.otras{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-5);border-top:1px solid var(--linea)}
.otras div{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:baseline;padding:var(--s-4) 0;border-bottom:1px solid var(--linea)}
.otras b{font-size:2.25rem;font-weight:850;font-stretch:var(--cond);line-height:1;font-variant-numeric:tabular-nums}
.otras b.ac{color:var(--acento)}
.otras span{color:var(--texto2)}
.nota{font-size:var(--t-small);color:var(--texto2);margin-top:var(--s-4)}
@media (min-width:900px){
  .cred .wrap{grid-template-columns:1fr 1fr;column-gap:var(--s-9)}
  .cred-intro{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-9);align-items:end}
  .cred-intro h2{max-width:none}
  .capas{grid-column:1 / -1}
}


/* =========================================================
   7. ¿ES PARA TI? — foto fundida con el fondo (solo escritorio)
   ========================================================= */
.para{background:var(--superficie);isolation:isolate}
.para .wrap{display:grid;gap:var(--s-7)}
.para ul{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:var(--s-4)}
.para li{display:flex;gap:var(--s-3);align-items:baseline}
.para .si li svg{color:var(--acento)}
.para .no li{color:var(--texto2)}
.para .no li::before{content:"—";color:var(--texto2)}
.para h3{margin-top:var(--s-7);font-size:1.125rem;text-transform:none;letter-spacing:0}
.foto-fundida{position:relative;margin:0;display:none}   /* en móvil no se muestra ni se descarga */
.foto-fundida img{width:100%;height:auto}                 /* foto entera, sin recortes */
@media (min-width:900px){
  .para .wrap{grid-template-columns:1.1fr .9fr;align-items:center}
  /* La foto no tiene marco: sus bordes se desvanecen y el modo «aclarar» (lighten) convierte
     su fondo negro en el tizón de la sección. Así Filipe sale de la oscuridad.
     Tamaño: 88 % de su columna (más el margen hasta el borde). Cambia el «.88» para ajustarlo. */
  .foto-fundida{display:block;width:calc((100% + var(--gutter)) * .88);justify-self:end;margin-right:calc(var(--gutter) * -1);mix-blend-mode:lighten;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 78%,transparent 98%),linear-gradient(to bottom,transparent,#000 8%,#000 62%,transparent 94%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 12%,#000 78%,transparent 98%),linear-gradient(to bottom,transparent,#000 8%,#000 62%,transparent 94%);
    mask-composite:intersect}
}


/* =========================================================
   8. MÉTODO — sección clara. Cajas que entran desde la derecha
   ========================================================= */
.metodo{background:var(--claro);color:var(--claro-texto);padding:clamp(72px,10vw,140px) var(--gutter);overflow-x:clip;position:relative}
.metodo .etiqueta{color:var(--claro-texto2)}
.metodo-in{max-width:84rem;margin-inline:auto;display:grid;gap:48px}
.metodo-intro,.metodo-intro .abajo{display:contents}
.metodo-cabeza{order:1;display:grid;gap:24px}
.metodo-cabeza h2{font-size:clamp(2.5rem,7.5vw,4.75rem);max-width:13ch}
.metodo-texto{order:2;display:grid;gap:16px;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.45;max-width:36rem}
.metodo-texto p{margin:0}
.pasos{order:3;list-style:none;margin:0;padding:0}
/* Botón del Método: el mismo de toda la web. Sobre fondo claro, el barrido es carbón */
.metodo-cta{order:4;justify-self:start}
.metodo .btn-primario::before{background:var(--claro-texto)}
.metodo .btn-primario:hover{color:var(--claro)}
.metodo a:focus-visible{outline-color:var(--claro-texto)}
.paso{position:relative;padding:22px 0 30px;border-top:1px solid var(--linea-clara)}
.paso:last-child{border-bottom:1px solid var(--linea-clara)}
.paso::before,.paso::after,.paso:last-child .esq-abajo::before,.paso:last-child .esq-abajo::after{content:"";position:absolute;width:15px;height:15px;background:var(--cruz) center/contain no-repeat}
.paso::before,.paso::after{top:-8px}
.paso:last-child .esq-abajo::before,.paso:last-child .esq-abajo::after{bottom:-8px}
.paso::before,.paso:last-child .esq-abajo::before{left:-7px}
.paso::after,.paso:last-child .esq-abajo::after{right:-7px}
.paso-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.paso-cab .etiqueta b{color:var(--claro-texto);font-weight:500;margin-left:1.6em}
.paso-num{font-family:var(--menu-font);font-size:.75rem;letter-spacing:.14em;color:var(--claro-texto2);font-variant-numeric:tabular-nums}
.paso h3{font-family:var(--menu-font);font-weight:400;font-size:clamp(1.5rem,5.5vw,1.75rem);line-height:1.15;letter-spacing:-.01em;text-transform:none;margin:44px 0 0}
.paso p{margin:14px 0 0;font-size:.9688rem;line-height:1.55;max-width:26rem}
.paso p small{color:var(--claro-texto2);font-size:inherit}
@media (min-width:1000px){
  .metodo-in{grid-template-columns:minmax(0,1fr) 38rem;column-gap:clamp(48px,6vw,120px);align-items:start}
  .metodo-intro{display:grid;position:sticky;top:110px;min-height:calc(100svh - 180px);grid-template-rows:auto 1fr auto;gap:28px}
  .metodo-intro .abajo{display:grid;gap:28px;align-content:end}
  .metodo-cabeza,.metodo-texto,.pasos,.metodo-cta{order:0}
  .paso{padding:36px 36px 30px;border:1px solid var(--linea-clara);margin-top:-1px;background:var(--claro);min-height:300px;will-change:transform,opacity}
  .paso::before,.paso:last-child .esq-abajo::before{left:-8px}
  .paso::after,.paso:last-child .esq-abajo::after{right:-8px}
  .paso h3{margin-top:84px}
}


/* =========================================================
   9. ENTRENAMIENTO — una tarjeta: online 1:1 (tarjeta clara). Presencial y precio retirados el 26/10
   ========================================================= */
.serv{background:radial-gradient(55% 40% at 12% 58%,color-mix(in srgb,var(--profundo) 85%,transparent),transparent 100%),var(--fondo)}
.serv .fantasma{right:-.05em;top:.1em;font-size:clamp(9rem,40vw,34rem)}
.modos{display:grid;gap:var(--s-5);margin-top:var(--s-8);position:relative}
.modo{padding:var(--s-6) var(--s-5);border-radius:var(--radio);position:relative}
.modo-online{background:var(--claro);color:var(--claro-texto)}
.modo .tipo{font-size:var(--t-small);font-weight:600;color:var(--texto2);margin:0}
.modo-online .tipo{color:var(--claro-texto2)}   /* en la tarjeta clara, texto oscuro (contraste AA) */
.modo-online .btn-primario{background:var(--claro-texto);color:var(--claro)}
.modo-online .btn::before{background:var(--acento)}
.modo-online .btn:hover{color:var(--claro-texto)}
.modo li svg{color:var(--acento)}
.modo h3{font-size:clamp(2rem,6vw,2.75rem);font-stretch:var(--cond);font-weight:850;margin-top:var(--s-2);line-height:.95}
.modo ul{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:var(--s-3)}
.modo li{display:flex;gap:var(--s-3);align-items:baseline;text-wrap:pretty}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
/* Escritorio: una sola tarjeta a todo el ancho; tipo, título y botón a la izquierda y la lista a la derecha */
@media (min-width:860px){.modo{padding:var(--s-7) var(--s-6)}.modo-online{display:grid;grid-template-columns:1fr 1.2fr;column-gap:var(--s-8)}.modo-online > *{grid-column:1}.modo-online ul{grid-column:2;grid-row:1 / span 3;margin:0;align-self:center}}


/* =========================================================
   10. SOBRE MÍ — foto a sangre
   ========================================================= */
.sobre{padding:0;min-height:min(100svh,900px);display:grid;align-items:end}
.sobre .bg{position:absolute;inset:0}
.sobre .bg img{width:100%;height:100%;object-fit:cover;object-position:65% 40%;filter:saturate(.85) contrast(1.05)}
.sobre::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--fondo) 5%,rgb(15 13 12 / .6) 45%,rgb(15 13 12 / .15)),linear-gradient(to right,rgb(15 13 12 / .85),transparent 70%)}
.sobre .wrap{width:100%;z-index:1;padding-block:var(--section) clamp(64px,9vw,120px)}
.sobre p{color:#d6cec5;max-width:34rem}
.sobre-lema{font-family:var(--menu-font);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;margin-top:var(--s-5)}
.sobre-ig{display:inline-block;margin-top:var(--s-3);color:var(--texto);text-decoration:none;font-family:var(--menu-font);padding-block:12px}
.firma{font-family:var(--mano);font-size:clamp(3rem,8vw,5.5rem);color:var(--texto);line-height:1;margin-top:var(--s-5);transform:rotate(-4deg);transform-origin:left}


/* =========================================================
   10 b. MARCAS — logos y código de descuento
   ========================================================= */
.marcas{background:var(--fondo);padding-block:clamp(64px,9vw,120px)}
.marcas-intro p{margin:var(--s-5) 0 0;font-size:var(--t-lead);line-height:1.45;max-width:34rem;color:var(--texto2)}
.marcas-intro h2{max-width:none}
/* Logos blancos con fondo transparente. El alto de cada uno está en su «--alto» (index.html).
   Hasta 999 px van en 2 columnas (en móvil, al 62 % de su alto); en escritorio, todos en una fila */
.marcas-logos{list-style:none;margin:var(--s-7) 0 0;padding:var(--s-5) 0;display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;gap:var(--s-5) var(--s-4);border-block:1px solid var(--linea)}
.marcas-logos a{display:flex;align-items:center;min-height:44px;padding:4px 0;opacity:.82;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.marcas-logos a:hover{opacity:1;transform:translateY(-3px)}
.marcas-logos img{height:calc(var(--alto) * .62);width:auto}
/* Cupón: el código con borde de ticket y el botón de copiar */
.cupon{margin-top:var(--s-7);display:grid;justify-items:center;gap:var(--s-4);text-align:center}
.cupon .etiqueta{color:var(--texto2)}
.cupon-fila{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)}
.cupon-codigo{display:inline-flex;align-items:center;min-height:52px;padding:0 1.25rem;border:2px dashed var(--acento);border-radius:var(--radio);
  font-family:var(--font);font-size:clamp(1.5rem,5vw,1.875rem);font-weight:850;font-stretch:var(--cond);letter-spacing:.08em;color:var(--texto);user-select:all}
.cupon-codigo::selection{background:var(--acento);color:var(--acento-fg)}
.cupon .btn{min-width:13.5rem}   /* ancho fijo: no salta al cambiar a «¡Copiado!» */
.cupon .btn[hidden]{display:none}
.cupon-ayuda{margin:0;font-size:.9375rem;color:var(--texto2)}
.marcas .nota{margin:var(--s-7) auto 0;text-align:center}
@media (min-width:760px){.marcas-logos{padding-block:var(--s-6)}.marcas-logos img{height:var(--alto)}}
@media (min-width:1000px){.marcas-logos{display:flex;flex-wrap:wrap;justify-content:space-around}}
@media (min-width:900px){.marcas-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-9);align-items:end}}


/* =========================================================
   11. CÓMO EMPEZAMOS — línea de tiempo que se llena de violeta
   ========================================================= */
.empezar{background:var(--superficie)}
.tiempo{list-style:none;margin:var(--s-8) 0 0;padding:0 0 0 28px;display:grid;position:relative}
.tiempo::before,.tiempo::after{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--humo)}
.tiempo::after{background:var(--acento);transform-origin:top;transform:scaleY(0);transition:transform 1.4s var(--ease)}
.tiempo.is-in::after{transform:none}
.momento{position:relative;padding:0 0 var(--s-6)}
.momento::before{content:"";position:absolute;left:-28px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--superficie);border:2px solid var(--acento)}
.cuando{display:block;color:var(--acento);font-family:var(--menu-font);font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.momento h3{margin-top:var(--s-2)}
.momento p{margin:var(--s-2) 0 0;color:var(--texto2);max-width:30ch}
@media (min-width:900px){
  .tiempo{grid-template-columns:repeat(4,1fr);gap:var(--s-6);padding:28px 0 0}
  .tiempo::before,.tiempo::after{left:0;right:0;top:5px;bottom:auto;width:auto;height:2px}
  .tiempo::after{transform-origin:left;transform:scaleX(0)}
  .tiempo.is-in::after{transform:none}
  .momento::before{left:0;top:-28px}
}


/* =========================================================
   12. PREGUNTAS FRECUENTES
   ========================================================= */
.faq .wrap{display:grid;gap:var(--s-7)}
.faq-lista{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:22px 0;font-size:clamp(1.125rem,1.6vw,1.3125rem);font-weight:700;font-stretch:var(--semi)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:18px;height:18px;background:var(--cruz) center/contain no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--texto2);max-width:60ch}
.faq-ayuda{color:var(--texto2);margin-top:var(--s-5)}
.faq-ayuda a{color:var(--texto);position:relative;text-decoration:none;font-family:var(--menu-font);padding-block:12px}
@media (min-width:900px){.faq .wrap{grid-template-columns:1fr 2fr;column-gap:var(--s-9);align-items:start}.faq-intro{position:sticky;top:120px}}


/* =========================================================
   13. CONTACTO Y FORMULARIO
   ========================================================= */
.contacto{background:var(--fondo)}
/* Fondo: retrato final del vídeo. En móvil se carga la versión pequeña */
.contacto .bg{position:absolute;inset:0;background:url(../img/filipe-retrato-800.webp) 72% 25%/cover;opacity:.32;filter:saturate(.7)}
@media (min-width:760px){.contacto .bg{background-image:url(../img/filipe-retrato-1600.webp)}}
.contacto .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 80% 60%,transparent,var(--fondo) 75%),linear-gradient(90deg,var(--fondo) 30%,transparent)}
.contacto .fantasma{left:var(--gutter);top:clamp(40px,7vw,100px);font-size:clamp(4.5rem,17vw,15rem);color:color-mix(in srgb,var(--humo) 85%,transparent)}
.contacto .cols{position:relative;z-index:1;padding-top:clamp(40px,9vw,140px)}
.vias{display:grid;gap:var(--s-3);margin-top:var(--s-7);max-width:34rem}
.vias .btn{justify-content:flex-start;min-height:60px;font-size:1.0625rem}
.vias small{color:var(--texto2);font-size:var(--t-small)}

/* Panel de cristal del formulario (y del mensaje de «enviado») */
.form{margin-top:var(--s-7);max-width:36rem;display:grid;gap:var(--s-4);padding:var(--s-6) var(--s-5);background:color-mix(in srgb,var(--superficie) 82%,transparent);border:1px solid var(--linea);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radio)}
.form h3{font-size:1.375rem}
.form[hidden]{display:none}
.fila2{display:grid;gap:var(--s-4)}
@media (min-width:600px){.fila2{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:var(--s-2);align-content:start}
.campo label{font-size:.9375rem;font-weight:600}
.campo label small{font-weight:400;color:var(--texto2)}
.ayuda{font-size:.8125rem;color:var(--texto2)}
.campo input:not([type="checkbox"]),.campo select,.campo textarea{font:inherit;font-size:1rem;min-height:48px;padding:0 var(--s-3);background:var(--fondo);color:var(--texto);border:1px solid rgb(239 232 223 / .3);border-radius:var(--radio);width:100%}
.campo textarea{padding:var(--s-3);min-height:110px;resize:vertical}
.privacidad{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-small);color:var(--texto2)}
.privacidad input{width:24px;height:24px;margin-top:0;flex:none;accent-color:var(--acento)}
.privacidad a{color:var(--texto)}
.info-datos{font-size:.8125rem;color:var(--texto2);line-height:1.45;margin:0}
.info-datos a{color:var(--texto)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* campo antispam: invisible para personas */

/* Estados del formulario */
.campo.is-error input,.campo.is-error select,.campo.is-error textarea{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.error-msg{margin:0;font-size:var(--t-small);color:var(--error)}
.error-msg:empty{display:none}
.form-error{margin:0;padding:var(--s-3) var(--s-4);border:1px solid var(--error);border-radius:var(--radio);font-size:.9375rem}
.form-error a{color:var(--texto)}
.form-ok:focus{outline:none}
.form-ok p{margin:0;color:var(--texto2)}
.form-ok .btn{justify-self:start}
@media (min-width:1000px){.contacto .cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9);align-items:start}.form{margin-top:0}}


/* =========================================================
   14. PIE
   ========================================================= */
.pie-web{border-top:1px solid var(--linea);padding:var(--s-8) 0 calc(var(--s-6) + 70px);font-size:var(--t-small);color:var(--texto2)}
.pie-web .wrap{display:grid;gap:var(--s-7)}
.pie-web img{height:78px;width:auto}   /* logo del pie (logo-footer.png, con margen transparente). Para cambiar su tamaño, edita «height» */
.lema{margin:var(--s-3) 0 0;font-family:var(--menu-font);letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}
.pie-titulo{margin:0 0 var(--s-3);max-width:none;color:var(--texto);font-family:var(--menu-font);font-weight:500;font-stretch:100%;font-size:.75rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}
.pie-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.pie-lista a{display:inline-flex;gap:10px;align-items:center;color:var(--texto);text-decoration:none;font-family:var(--menu-font);font-size:1rem;min-height:44px}
.pie-lista svg{width:18px;height:18px;flex:none;color:var(--acento)}
.pie-legal{display:flex;flex-wrap:wrap;gap:.5em;font-family:var(--menu-font);font-size:.9375rem}
.pie-legal a{position:relative;display:inline-block;color:var(--texto);text-decoration:none;padding-block:12px}
.pie-abajo{grid-column:1 / -1;max-width:none;border-top:1px solid var(--linea);padding-top:var(--s-5);margin:0}
@media (min-width:760px){.pie-web{padding-bottom:var(--s-6)}.pie-web .wrap{grid-template-columns:1fr 1fr}}   /* tableta: 2 columnas */
@media (min-width:1000px){.pie-web .wrap{grid-template-columns:1.2fr 1fr 1fr}}                                  /* escritorio: 3 columnas */
.pagina-interior .pie-web{padding-bottom:var(--s-6)}   /* sin barra móvil en las páginas interiores */


/* =========================================================
   15. PÁGINAS INTERIORES (legales y 404)
   ========================================================= */
.pagina-interior .cab{background:rgb(15 13 12 / .86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linea)}
.legal{padding:calc(88px + var(--s-8)) 0 var(--section)}
.legal .wrap{max-width:calc(46rem + 2 * var(--gutter))}
.legal h1{font-size:clamp(2.5rem,8vw,4rem);font-weight:850;font-stretch:var(--cond);line-height:.96;text-transform:uppercase;margin:0}
.legal .actualizado{color:var(--texto2);font-size:var(--t-small);margin:var(--s-4) 0 0}
.legal h2{font-size:clamp(1.25rem,3vw,1.5rem);font-stretch:var(--semi);font-weight:750;line-height:1.2;max-width:none;margin:var(--s-7) 0 0}
.legal p,.legal li{color:#d6cec5}
.legal p{margin:var(--s-4) 0 0}
.legal ul{margin:var(--s-4) 0 0;padding-left:1.25em;display:grid;gap:var(--s-2)}
.legal a{color:var(--texto)}
.legal table{width:100%;border-collapse:collapse;margin-top:var(--s-4);font-size:.9375rem}
.legal th,.legal td{text-align:left;vertical-align:top;padding:var(--s-3) var(--s-3) var(--s-3) 0;border-bottom:1px solid var(--linea)}
.legal th{color:var(--texto);font-weight:600;width:34%}
.legal td{color:#d6cec5}
.error-404{position:relative;min-height:100svh;display:grid;align-items:center;padding:calc(88px + var(--s-7)) 0 var(--s-8);overflow:clip}
.error-404 .fantasma{right:-.05em;top:50%;transform:translateY(-50%);font-size:clamp(10rem,45vw,36rem)}
.error-404 h1{font-size:var(--t-h2);font-weight:850;font-stretch:var(--cond);line-height:.96;text-transform:uppercase;margin:0;max-width:14ch}
.error-404 .wrap p{color:var(--texto2);font-size:var(--t-lead);margin:var(--s-5) 0 var(--s-6)}


/* =========================================================
   16. MOVIMIENTO REDUCIDO: todo aparece sin animación
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .mm,.mm-pie,.char > span,.cab-cta,.barra-movil,.burger span,.trazo path,.tiempo::after,.btn::before,.marcas-logos a{transition:none !important}
  .marcas-logos a:hover{transform:none}
  .js [data-reveal]{opacity:1;filter:none;transform:none;transition:none}
  .paso{will-change:auto}
}