/* ============================================================================
   CAPAS — motor de profundidad y scroll. Casa (FitPilot · Café Raizal · H&H).
   Mobile-first 360px. Sin librerías. Sólo transform, opacity y filter.
   Cada marca sobreescribe únicamente los tokens de --cp-* en su propio CSS.
   ========================================================================== */

/* --- tokens neutros: la marca los pisa ----------------------------------- */
:root{
  --cp-ease: cubic-bezier(.16,1,.3,1);          /* easeOutExpo-ish */
  --cp-ease-soft: cubic-bezier(.22,.61,.36,1);
  --cp-dur: 900ms;          /* medido: headings 0.9 s */
  --cp-dur-fast: 520ms;
  --cp-shift: 28px;                              /* recorrido de las apariciones */
  --cp-stagger: 70ms;
  --cp-radius: 20px;
  --cp-rail: rgba(255,255,255,.14);
}

/* Nada de 100vw: con barra de scroll visible desborda en horizontal. */
.cp-bleed{ width:100%; margin-inline:0; }

/* ---------------------------------------------------------------------------
   1 · APARICIONES  data-cp="up | mask | blur | scale | left | right"
   El estado inicial SÓLO se aplica si JS ha marcado el documento. Sin JS
   (o si el observer falla) todo queda visible: nunca una página en blanco.
   ------------------------------------------------------------------------ */
html.cp-on [data-cp]{
  opacity:0;
  will-change: transform, opacity;
  transition:
    opacity var(--cp-dur) var(--cp-ease) var(--cp-delay,0ms),
    transform var(--cp-dur) var(--cp-ease) var(--cp-delay,0ms),
    filter var(--cp-dur) var(--cp-ease) var(--cp-delay,0ms);
}
html.cp-on [data-cp="up"]    { transform: translate3d(0,var(--cp-shift),0); }
html.cp-on [data-cp="left"]  { transform: translate3d(calc(var(--cp-shift) * -1),0,0); }
html.cp-on [data-cp="right"] { transform: translate3d(var(--cp-shift),0,0); }
html.cp-on [data-cp="scale"] { transform: scale(.94); }
html.cp-on [data-cp="blur"]  { filter: blur(14px); transform: translate3d(0,12px,0); }
/* ⚠️ "mask" NO usa clip-path sobre el propio elemento: un clip-path que lo
   colapsa hace que IntersectionObserver devuelva isIntersecting:false para
   siempre y el elemento no se revela NUNCA (probado en Chrome 08/09/2026).
   Se resuelve con una ventana interior de overflow:hidden que inyecta el JS. */
html.cp-on [data-cp="mask"]  { opacity:1; }
.cp-mask{
  display:block; overflow:hidden;
  padding-block: .18em .16em;
  margin-block:  -.18em -.16em;
}
.cp-mask__in{ display:block; }
html.cp-on [data-cp="mask"] .cp-mask__in{
  transform: translate3d(0,125%,0);
  transition: transform var(--cp-dur) var(--cp-ease) var(--cp-delay,0ms);
  will-change: transform;
}
html.cp-on [data-cp="mask"].cp-in .cp-mask__in{ transform:none; will-change:auto; }

/* El estado final NO fuerza opacity:1: respeta la que el diseño haya decidido.
   Un elemento que quiera quedarse translúcido declara `--cp-op:.6` y el motor lo
   respeta. Sin esto, el mismo elemento se veía al 60 % con prefers-reduced-motion
   (donde el motor no entra) y al 100 % sin él — dos aspectos para un solo diseño.
   Cazado el 08/09/2026 en las notas al pie de las láminas de H&H. */
html.cp-on [data-cp].cp-in{
  opacity: var(--cp-op, 1);
  transform:none;
  filter:none;
  will-change:auto;
}

/* ---------------------------------------------------------------------------
   2 · TEXTO POR LÍNEAS  data-cp-lines
   El JS envuelve cada línea real (tras el salto de línea del navegador) en
   .cp-l > span. Se anima el span dentro de una ventana con overflow oculto,
   así la línea "sube desde debajo del papel".
   ------------------------------------------------------------------------ */
/* ⚠️ El padding/margin compensados NO son decorativos, y hacen falta ARRIBA Y ABAJO:
   con overflow:hidden y line-height:1 el recuadro corta los rabos de p, g, j, q
   (abajo) y —esto es lo que casi nadie compensa— las TILDES DE LAS MAYÚSCULAS
   (arriba), que viven por encima de la altura de caja. Cazado el 08/09/2026 en el
   titular de H&H: el DOM decía «TU MEJOR VERSIÓN / EMPIEZA AQUÍ» y en pantalla se
   leía «VERSION» y «AQUI». En castellano eso se ve en casi todos los titulares. */
.cp-l{
  display:block; overflow:hidden;
  padding-block: .18em .16em;
  margin-block:  -.18em -.16em;
}
.cp-l > span{ display:block; }
html.cp-on [data-cp-lines] .cp-l > span{
  transform: translate3d(0,125%,0);
  transition: transform var(--cp-dur) var(--cp-ease) var(--cp-ldelay,0ms);
  will-change: transform;
}
html.cp-on [data-cp-lines].cp-in .cp-l > span{ transform:none; will-change:auto; }

/* Palabra a palabra (para destacados cortos, no para párrafos largos) */
.cp-w{ display:inline-block; }
html.cp-on [data-cp-words] .cp-w{
  opacity:0; transform: translate3d(0,.5em,0);
  transition: opacity 750ms var(--cp-ease-soft) var(--cp-wdelay,0ms),
              transform 750ms var(--cp-ease-soft) var(--cp-wdelay,0ms);
}
html.cp-on [data-cp-words].cp-in .cp-w{ opacity:1; transform:none; }

/* ---------------------------------------------------------------------------
   3 · CAPAS APILADAS  .cp-stack > .cp-plate
   Cada lámina se pega arriba y la siguiente la cubre. La saliente se encoge
   y se oscurece: profundidad real, no una sombra pintada. 100% CSS, barato
   en móvil (no hay listener de scroll).
   ------------------------------------------------------------------------ */
/* El padre NO puede llevar overflow:hidden o el sticky deja de pegarse. */
.cp-stack{ position:relative; }
/* z-index creciente: cada lámina pinta por encima de la anterior aunque el
   transform le cree su propio contexto de apilado. */
.cp-stack > .cp-plate:nth-child(1){ z-index:1 }
.cp-stack > .cp-plate:nth-child(2){ z-index:2 }
.cp-stack > .cp-plate:nth-child(3){ z-index:3 }
.cp-stack > .cp-plate:nth-child(4){ z-index:4 }
.cp-stack > .cp-plate:nth-child(5){ z-index:5 }
.cp-plate{
  position: sticky;
  top: var(--cp-plate-top, 0px);
  min-height: 100svh;                   /* svh: no salta con la barra del móvil */
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  border-top-left-radius: var(--cp-radius);
  border-top-right-radius: var(--cp-radius);
  transform-origin: 50% 0%;
}
/* Velo que aparece sobre la lámina cuando la siguiente la tapa. */
.cp-plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: var(--cp-veil, #000); opacity:0; transition: opacity 320ms linear;
  z-index: 40;
}
.cp-plate.cp-covered::after{ opacity: var(--cp-veil-max, .55); }
.cp-plate.cp-covered{ transform: scale(var(--cp-plate-scale, .965)); transition: transform 420ms var(--cp-ease-soft); }

/* ---------------------------------------------------------------------------
   4 · PARALLAX  data-cp-par="0.12"   (0 = fijo al scroll, 1 = se va con él)
   Un solo rAF para toda la página. Se apaga por debajo de 768px y con
   prefers-reduced-motion: en móvil el coste no compensa.
   ------------------------------------------------------------------------ */
[data-cp-par]{ will-change: transform; }

/* ---------------------------------------------------------------------------
   5 · MARQUESINA (premios / medios). Duplicada en JS para bucle sin costura.
   ------------------------------------------------------------------------ */
/* Los extremos se DISUELVEN en vez de chocar con el borde. Es acabado, cuesta
   una línea, y es de lo que más separa una web hecha a mano de una premiada.
   A 360 px el desvanecido baja a 24 px o el contenido útil se va en niebla. */
.cp-marquee{
  overflow:hidden; display:flex;
  --cp-fade: 24px;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 var(--cp-fade), #000 calc(100% - var(--cp-fade)), #0000);
          mask-image: linear-gradient(90deg, #0000, #000 var(--cp-fade), #000 calc(100% - var(--cp-fade)), #0000);
}
@media (min-width:768px){ .cp-marquee{ --cp-fade: 80px; } }
.cp-marquee__track{
  display:flex; flex:0 0 auto; gap:var(--cp-marquee-gap, 3rem);
  padding-right: var(--cp-marquee-gap, 3rem);
  animation: cp-marquee var(--cp-marquee-dur, 38s) linear infinite;
}
.cp-marquee:hover .cp-marquee__track{ animation-play-state: paused; }
@keyframes cp-marquee{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-100%,0,0);} }

/* ---------------------------------------------------------------------------
   6 · CIFRAS. tabular-nums para que no bailen mientras cuentan.
   ------------------------------------------------------------------------ */
[data-cp-count]{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------------------------------------------------------------------------
   7 · CARRIL DE PROGRESO
   ------------------------------------------------------------------------ */
.cp-progress{
  position:fixed; left:0; top:0; height:2px; width:100%;
  transform: scaleX(0); transform-origin:0 50%;
  background: var(--cp-progress, currentColor);
  z-index:9999; pointer-events:none;
}

/* ---------------------------------------------------------------------------
   8 · RESPETO AL USUARIO. Si pide menos movimiento, se apaga TODO el motor:
   nada de "animación un poco más corta" — nada.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html.cp-on [data-cp],
  html.cp-on [data-cp="mask"] .cp-mask__in,
  html.cp-on [data-cp-lines] .cp-l > span,
  html.cp-on [data-cp-words] .cp-w{
    opacity: var(--cp-op, 1) !important; transform:none !important; filter:none !important;
    transition:none !important;
  }
  .cp-marquee__track{ animation:none; }
  .cp-plate{ position:static; min-height:0; transform:none !important; }
  .cp-plate::after{ display:none; }
  .cp-progress{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------------------------------------------------------------------------
   9 · CTA PEGADO EN MÓVIL. Aparece al salir del hero y no vuelve a irse.
   Es el patrón que más dinero mueve de todo el repertorio. Solo <768px:
   en escritorio la nav ya lleva su CTA y taparía contenido.
   ------------------------------------------------------------------------ */
.cp-cta-fijo{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  padding:.75rem clamp(1rem,4vw,1.5rem) calc(.75rem + env(safe-area-inset-bottom));
  transform: translate3d(0,125%,0);
  transition: transform 420ms var(--cp-ease);
  display:none;
}
.cp-cta-fijo.cp-visible{ transform:none; }
@media (max-width:767px){ .cp-cta-fijo{ display:block; } }
@media (prefers-reduced-motion: reduce){ .cp-cta-fijo{ transition:none; } }