/* ══════════════════════════════════════════════════════════════════════════
   FLUIDEZ — 1-sep-2026
   el dueño: «se siente tosca, menos fluida… le faltan animaciones como cuando
   carga un cuadro más grande» y «siento la página más pegada que antes».
   Medido antes de tocar nada: PC 52,6 fps con un cuadro de 59 ms; teléfono
   con un cuadro de 125 ms y 533 ms de tareas largas.

   Las tres causas y su arreglo:
   1. El alto de las pistas se reescribía en CADA cuadro del deslizamiento
      (js/re-slider.js) → recálculo de layout continuo. Ya se escribe sólo
      al cambiar de tarjeta; aquí se le da la transición y el aislamiento.
   2. Nada acompañaba al cambio de tamaño: el salto era seco.
   3. El layout del carrusel se propagaba a toda la página. `contain` lo
      encierra: el navegador ya no recalcula fuera de la caja.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Curvas fuertes: las de fábrica no tienen carácter. Entrar/salir = ease-out. */
  --ease-out-fuerte:cubic-bezier(.23,1,.32,1);
  --ease-caja:cubic-bezier(.32,.72,0,1);
}

/* ── 1 · La caja del carrusel crece y encoge acompañada ──────────────────── */
.t05-grid.is-msl,
.t03b-grid.is-msl{
  transition:height .3s var(--ease-caja);
  /* El alto lo pone el JS; sin esto el cambio salta de golpe. */
  overflow-y:hidden;
  /* Encierra el trabajo de layout dentro del carrusel: lo de fuera no se
     vuelve a calcular cuando la caja cambia de alto. Es lo que quita el
     "pegado" al deslizar. */
  contain:layout paint;
}

/* ── 2 · La tarjeta que entra se asienta (no aparece de la nada) ─────────── */
.msl-entra{
  animation:msl-entrada .22s var(--ease-out-fuerte) both;
}
@keyframes msl-entrada{
  from{ opacity:.55; transform:translateY(6px) }
  to  { opacity:1;   transform:none }
}

/* ── 3 · El rotor de compromisos: una flecha a cada lado ───────────────────
   el dueño (1-sep, segunda pasada): «que las flechas estén una a la izquierda y
   otra a la derecha y centradas, no tan juntas porque se ve mal; el texto
   está corrido, no está centrado; que estén pero no de manera invasiva».

   Qué estaba mal, medido: las dos iban juntas abajo a la derecha, separadas
   7px, y para hacerles hueco el párrafo llevaba `padding-right:6.2rem` con
   `padding-left:0` — asimétrico, así que el texto quedaba **49,6px corrido a
   la izquierda** del centro de la tarjeta. Se veía torcido porque LO ESTABA.

   Ahora: cada flecha pegada a su borde y centrada en vertical (izquierda =
   atrás, derecha = adelante: el control refleja lo que hace), y el relleno
   del texto vuelve a ser simétrico, así que el texto está centrado de verdad.

   «No invasivas»: se les quita la sombra dura —que era lo que gritaba—, el
   borde baja a 1,5px con contraste reducido y el fondo queda casi
   transparente. Al pasar el mouse o al enfocarlas con el teclado suben al
   frente. Se ven, no compiten. */
.t02-rotor-nav{ display:contents }        /* la caja ya no coloca nada */

.t02-rotor-prev,
.t02-rotor-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0 0 1px;
  background:rgba(244,239,230,.55);
  /* .22 se veía discreto pero daba 1,65:1 contra la tarjeta blanca y WCAG
     1.4.11 exige 3:1 para el contorno de un control. .45 da 3,18:1 medido
     y sigue siendo un aro gris suave, nada que ver con el negro 2px de antes. */
  border:1.5px solid rgba(9,9,14,.45);
  box-shadow:none;                        /* la sombra dura era lo invasivo */
  color:rgba(9,9,14,.62); font-size:1rem; line-height:1;
  transition:background .18s var(--ease-out-fuerte),
             border-color .18s var(--ease-out-fuerte),
             color .18s var(--ease-out-fuerte),
             transform .14s var(--ease-out-fuerte);
}
.t02-rotor-prev{ left:.55rem }
.t02-rotor-next{ right:.55rem }

/* El dibujo mide 40px pero el área de toque mide 44 (WCAG 2.5.8 + el margen
   de holgura que pide Apple): se agranda con un pseudo, sin engordar el botón. */
.t02-rotor-prev::before,
.t02-rotor-next::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
}

@media (hover:hover) and (pointer:fine){
  .t02-rotor-prev:hover,
  .t02-rotor-next:hover{
    background:#f4efe6; border-color:#09090e; color:#09090e;
  }
}
.t02-rotor-prev:active,
.t02-rotor-next:active{
  transform:translateY(-50%) scale(.96);   /* respuesta al presionar, 140ms */
  background:#f4efe6; border-color:#09090e; color:#09090e;
}
.t02-rotor-prev:focus-visible,
.t02-rotor-next:focus-visible{
  outline:2px solid var(--azul); outline-offset:3px;
  background:#f4efe6; border-color:#09090e; color:#09090e;
}

/* El texto vuelve a su centro: relleno IGUAL a los dos lados, ancho suficiente
   para que ninguna línea se meta debajo de una flecha (40px + .55rem = 48,8px
   ocupados; 3.4rem = 54,4px deja 5,6px de aire). */
.t02-rotor-card{
  padding:1.1rem 3.4rem 1.2rem; min-height:190px;
  /* Con las flechas centradas en vertical, el texto pegado arriba dejaba un
     hueco muerto abajo y la tarjeta se leía desbalanceada. Centrado también
     en vertical: el aire queda repartido y todo cae sobre el mismo eje.
     Las flechas van absolutas, así que este flex no las mueve. */
  display:flex; flex-direction:column; justify-content:center;
}
.t02-rotor-card p{ padding-right:0 }

@media (max-width:399.9px){
  /* En pantallas angostas la flecha encoge para no comerse el renglón. */
  .t02-rotor-prev,.t02-rotor-next{ width:36px; height:36px; font-size:.94rem }
  .t02-rotor-prev{ left:.4rem } .t02-rotor-next{ right:.4rem }
  .t02-rotor-card{ padding-inline:2.9rem }
}

/* ── 4 · Movimiento reducido: se conserva el cambio, se quita el viaje ───── */
@media (prefers-reduced-motion:reduce){
  .t05-grid.is-msl,.t03b-grid.is-msl{ transition:none }
  .msl-entra{ animation:none }
  .t02-rotor-prev,.t02-rotor-next{ transition:none }
}

/* ── 5 · La barra de arriba deja de re-difuminar en cada cuadro ────────────
   `.nav` es fija, ocupa todo el ancho y llevaba `backdrop-filter:blur(16px)`.
   Un difuminado de fondo en una franja fija obliga al navegador a rehacer
   ese desenfoque en CADA cuadro del scroll, sobre todo el ancho de la
   pantalla. Medido en PC (1440, DPR2): quitarlo sube de 62 a 66,5 fps.
   El fondo ya iba al 86 % de opacidad, así que el desenfoque apenas se veía;
   subiéndolo al 97 % el aspecto es el mismo — de hecho `re-detalles.css`
   ya usaba .96 en su media query — y el coste por cuadro desaparece. */
.nav{
  background:rgba(244,239,230,.97);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
@media (max-width:767.9px){
  .nav{ background:rgba(244,239,230,.98) }
}