/* ==========================================================================
   OLZA · DEMO v2 (/v2)
   La web de producción con cinco cambios: cabecera en píldora, lienzo gris con
   las tarjetas en blanco, la pantalla nueva en lugar de la demo por hover, el
   motor en lugar de Sentra y Recon, y el vídeo de fondo en el hero. Además,
   tipografía menos gruesa y algo más pequeña en toda la página.
   Se carga DESPUÉS de styles.css y solo pisa lo necesario.
   ========================================================================== */

:root {
  --fondo: #FFFFFF;          /* el lienzo, en blanco (antes #F4F3F1, gris) */
  --v2-linea: #E6E3DE;
  --fs-display: clamp(2.3rem, 1.4rem + 3.4vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-h4: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  --fs-body: 0.95rem;
  --fs-small: 0.85rem;
  --fs-micro: 0.72rem;
}

/* 1. TIPOGRAFÍA: menos peso y menos tamaño --------------------------------- */
body { background: var(--fondo); font-weight: 400; line-height: 1.6; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.038em; }
h1, h2 { font-weight: 400; line-height: 1.06; }
h3, h4 { font-weight: 500; letter-spacing: -0.025em; }
strong, b { font-weight: 600; }
.kicker { font-weight: 500; letter-spacing: 0.14em; }
.boton { font-weight: 500; }
.entradilla { font-size: var(--fs-lead); line-height: 1.6; }
.dolor__cita { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); }
.credibilidad__dato, .precio, .pack__nombre { font-weight: 500; }

/* 2. LIENZO GRIS: las secciones dejan ver el fondo y las tarjetas destacan --- */
.seccion--blanco, .seccion--arena { background: transparent; }
.seccion + .seccion:not(.seccion--continua) { border-top: 0; }
.credibilidad { background: var(--blanco); border-block-color: var(--v2-linea); }
.dolor, .capacidad, .pack, .ventana, .tarjeta-clara { background: var(--blanco); border-color: var(--v2-linea); }
.faq { border-top: 0; padding: 0.25rem clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--v2-linea); border-radius: 24px; background: var(--blanco); }
.faq__item { border-bottom: 0; }
.faq__item + .faq__item { border-top: 1px solid var(--v2-linea); }

/* 3. CABECERA EN PÍLDORA ---------------------------------------------------- */
.cabecera {
  position: fixed; inset: 0.9rem 0 auto; z-index: 100;
  padding-inline: var(--gutter); background: none; border: 0; backdrop-filter: none;
  display: flex; justify-content: center; pointer-events: none;
}
.cabecera__inner {
  pointer-events: auto; width: 100%; max-width: 1180px; min-height: 0;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); border: 1px solid var(--v2-linea);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: box-shadow 300ms var(--ease), background 300ms var(--ease);
}
.cabecera.esta-fija .cabecera__inner { background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 30px -18px rgba(28, 27, 25, 0.45); }
.cabecera__acciones .boton { padding: 0.65rem 1.15rem; }
.logo img { height: 22px; }
.nav__enlace { font-size: var(--fs-small); }

/* 4. HERO CON VÍDEO DE FONDO ------------------------------------------------ */
.hero { position: relative; isolation: isolate; background: var(--negro, #0E0D0C); color: #F4F1EC; overflow: hidden; padding-top: clamp(7rem, 5rem + 6vw, 9.5rem); }
.hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero__fondo video { width: 100%; height: 100%; object-fit: cover; }
.hero__velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(12, 11, 10, 0.72), rgba(12, 11, 10, 0.4) 65%, rgba(12, 11, 10, 0.78)),
    linear-gradient(to bottom, rgba(12, 11, 10, 0.6), rgba(12, 11, 10, 0.25) 30%, rgba(12, 11, 10, 0.92));
}
.hero__cuerpo { position: relative; z-index: 1; }
.hero .kicker { color: var(--burdeos-claro); }
.hero h1 { color: #FFFFFF; }
.hero .destacado { color: var(--burdeos-claro); }
.hero__sub { color: rgba(244, 241, 236, 0.74); font-size: var(--fs-lead); }
.hero .boton--secundario { border-color: rgba(244, 241, 236, 0.35); color: #F4F1EC; }
.hero .boton--secundario:hover { background: rgba(244, 241, 236, 0.12); border-color: #F4F1EC; color: #FFFFFF; }
.hero .marcos { position: relative; z-index: 1; border-top: 1px solid rgba(244, 241, 236, 0.14); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.hero .marcos__etiqueta { color: rgba(244, 241, 236, 0.5); }
.hero .marcos__item { color: rgba(244, 241, 236, 0.82); font-weight: 400; }

/* 5. LA PANTALLA DE OLZA PLATFORM ------------------------------------------- */
.pantalla-marco {
  border-radius: 24px; overflow: hidden; background: var(--blanco);
  border: 1px solid var(--v2-linea); box-shadow: 0 40px 90px -55px rgba(28, 27, 25, 0.6);
}
.pantalla-escala { transform-origin: top left; }
.pantalla-escala .demoapp { width: max-content; }
.pantalla-pie { margin-top: 1rem; font-size: var(--fs-micro); color: var(--tinta-suave); text-align: center; }

/* 6. EL MOTOR ---------------------------------------------------------------
   Texto a la izquierda, la caja con las piezas en el centro y las claves a la
   derecha, como en la referencia que pasó Javi. */
.motor { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
.motor__texto h2 { max-width: 14ch; }
.motor__texto p { margin-top: 1.25rem; font-size: var(--fs-small); line-height: 1.7; color: var(--grafito); max-width: 42ch; }
.motor__centro { position: relative; display: grid; justify-items: center; }
.motor__chapa {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: -1px; position: relative; z-index: 2;
  padding: 0.45rem 1rem; border-radius: 12px 12px 0 0; background: var(--tinta); color: var(--blanco);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.02em;
}
.motor__chapa svg { width: 14px; height: 14px; color: var(--burdeos-claro); }
.motor__caja {
  width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 0.4rem + 0.5vw, 0.9rem);
  padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.5rem); border: 1.5px solid var(--tinta); border-radius: 22px; background: var(--blanco);
}
.motor__pieza {
  display: grid; place-items: center; gap: 0.5rem; aspect-ratio: 1; border-radius: 14px;
  border: 1px solid var(--v2-linea); background: var(--blanco); color: var(--arena-tenue);
  transition: color 300ms var(--ease), border-color 300ms var(--ease), background 300ms var(--ease);
}
.motor__pieza svg { width: 22px; height: 22px; }
.motor__pieza span { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.motor__pieza:hover, .motor__pieza--viva { color: var(--tinta); border-color: var(--tinta); }
.motor__nucleo {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px;
  background: linear-gradient(145deg, #7C3535, #3A1616);
  box-shadow: 0 16px 36px -20px rgba(107, 46, 46, 0.9);
}
.motor__nucleo img { width: 46%; height: auto; }
.motor__claves { display: grid; gap: 1.25rem; }
.motor__claves li { display: flex; gap: 0.75rem; }
.motor__claves svg { width: 19px; height: 19px; margin-top: 0.15rem; flex: 0 0 auto; color: var(--burdeos); }
.motor__claves span { display: grid; gap: 0.2rem; font-size: var(--fs-small); line-height: 1.55; color: var(--tinta-suave); }
.motor__claves b { font-weight: 500; color: var(--tinta); }

/* 7. RESPONSIVE -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .motor { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .motor__texto h2 { max-width: 20ch; }
  .motor__caja { max-width: 520px; margin-inline: auto; }
  .motor__claves { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .cabecera__inner { padding-left: 1rem; }
}
/* 14. TAREAS DE LA DEMO ---------------------------------------------------------
   Viven dentro de .demoapp (la interfaz real), así que se escriben después para
   ganar a sus reglas. Cada tarea se abre al pulsarla y se puede marcar hecha. */
.demoapp .tareas { display: grid; }
.demoapp .tarea { border-bottom: 1px solid var(--linea); }
.demoapp .tarea:last-child { border-bottom: 0; }
.demoapp .tarea__cab {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 2px;
  background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
  border-radius: 10px; transition: background 180ms ease;
}
.demoapp .tarea__cab:hover { background: var(--lienzo); }
.demoapp .tarea__txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.demoapp .tarea__txt b { font-size: 13.5px; font-weight: 600; color: var(--tinta); line-height: 1.3; }
.demoapp .tarea__txt small { font-size: 11.5px; color: var(--neutro-texto); }
.demoapp .tarea__cab .pastilla { flex: 0 0 auto; }
.demoapp .tarea__detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.demoapp .tarea__detalle.abierto { grid-template-rows: 1fr; }
.demoapp .tarea__detalle > div { overflow: hidden; }
.demoapp .tarea__detalle p { margin: 0 0 6px; padding-left: 36px; font-size: 12.5px; line-height: 1.55; color: var(--grafito); }
.demoapp .tarea__detalle p b { color: var(--tinta); font-weight: 600; }
.demoapp .tarea__detalle .boton { margin: 4px 0 12px 36px; }
.demoapp .tarea.hecha .tarea__txt b { color: var(--neutro-texto); text-decoration: line-through; }
.demoapp .tarea.hecha .cosa-icono { opacity: 0.45; }
.demoapp .boton[disabled] { opacity: 0.55; cursor: default; }
/* La pantalla no se recorta aunque la rejilla crezca al abrir una tarea */
.demoapp .pantalla { height: auto; min-height: var(--ph, 700px); }
/* La pantalla mide lo suyo; el envoltorio no debe estirarse o la escala sale mal */
.demo__escala .demoapp { width: max-content; }

/* ==========================================================================
   AJUSTES · peso intermedio, márgenes laterales y mucho más aire
   ========================================================================== */
:root {
  /* Márgenes laterales de verdad y una medida menos ancha */
  --contenedor: 1500px;
  --gutter: clamp(1.5rem, 0.25rem + 8vw, 7rem);
  /* Textos más pequeños y compactos */
  --fs-display: clamp(2.1rem, 1.3rem + 3vw, 3.1rem);
  --fs-h2: clamp(1.55rem, 1.15rem + 1.9vw, 2.35rem);
  --fs-h3: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-h4: 1rem;
  --fs-lead: clamp(0.95rem, 0.92rem + 0.22vw, 1.05rem);
  --fs-body: 0.92rem;
  --fs-small: 0.82rem;
  --fs-micro: 0.7rem;
  /* El aire entre secciones */
  --sp-section: clamp(4rem, 2.667rem + 4vw, 6.667rem);
}

/* 1. Peso intermedio: ni el 700 de antes ni el 400 de la primera prueba ------ */
body { line-height: 1.55; }
h1, h2 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; }
h3, h4 { font-weight: 600; letter-spacing: -0.02em; }
.kicker { font-weight: 600; }
.boton { font-weight: 600; }
.credibilidad__dato, .precio, .pack__nombre, .motor__claves b { font-weight: 600; }
.entradilla { line-height: 1.55; max-width: 52ch; }
.dolor__resp, .paso p, .capacidad p, .producto p, .pack__para { line-height: 1.55; }

/* 2. Más aire entre todo ------------------------------------------------------ */
.cabecera-seccion { margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.rejilla { gap: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); }
.pasos { gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.capacidades { gap: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.packs { gap: clamp(0.9rem, 0.8rem + 0.6vw, 1.25rem); }
.packs__extra { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.faq { margin-top: clamp(1rem, 0.5rem + 1vw, 2rem); }
.cierre-bloque { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.motor { gap: clamp(2rem, 1.5rem + 3vw, 5rem); }
.motor__claves { gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
.pantalla-pie { margin-top: 1.5rem; }
.hero { padding-top: clamp(8rem, 6rem + 6vw, 11rem); padding-bottom: 0; }
.hero .acciones { margin-bottom: clamp(3rem, 2.5rem + 3vw, 5rem); }
.hero__titulo { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.hero__sub { margin-bottom: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem); }
.marcos { padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.credibilidad { padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.contacto__rejilla { gap: clamp(2.5rem, 2rem + 4vw, 6rem); }
.pie__rejilla { gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* 3. Textos más compactos ------------------------------------------------------ */
.hero__sub { max-width: 58ch; margin-inline: auto; }
.dolor__cita { line-height: 1.35; }
.faq__panel p { line-height: 1.6; max-width: 72ch; }
.motor__texto p { max-width: 38ch; line-height: 1.6; }

/* ==========================================================================
   AJUSTES 2 · hero más corto y un punto más de peso en toda la letra
   ========================================================================== */
/* El hero ocupa menos: menos aire arriba y menos hueco entre sus piezas */
.hero { padding-top: clamp(6.5rem, 5rem + 4vw, 8.5rem); }
.hero .acciones { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.hero__titulo { margin-bottom: clamp(1rem, 0.85rem + 0.6vw, 1.5rem); }
.hero__sub { margin-bottom: clamp(1.25rem, 1.1rem + 1vw, 2rem); }
.marcos { padding-block: clamp(1.25rem, 1.1rem + 0.8vw, 1.9rem); }

/* Un punto más de peso en todo: el texto a 450 y los titulares a 600 */
body { font-weight: 450; }
h1, h2 { font-weight: 600; }
h3, h4 { font-weight: 650; }
.entradilla, .hero__sub, .faq__panel p, .motor__texto p, .capacidad p, .producto p, .paso p, .dolor__resp { font-weight: 450; }
.kicker, .boton, .nav__enlace, .marcos__item { font-weight: 600; }
.credibilidad__dato, .precio, .pack__nombre, .motor__claves b, .faq__boton { font-weight: 650; }
.motor__pieza span { font-weight: 600; }

/* ==========================================================================
   AJUSTE 3 · el vídeo del hero, menos apagado
   Se subía poco: el vídeo iba al 34 % de opacidad y encima llevaba dos velos
   (el de producción y el de aquí). Ahora el vídeo se ve casi entero y queda
   un solo velo, el justo para que el titular siga legible.
   ========================================================================== */
.hero__fondo video { opacity: 0.72; }
.hero__fondo::after { display: none; }   /* fuera el velo heredado de producción */
.hero__velo {
  background:
    radial-gradient(66% 58% at 50% 44%, rgba(12, 11, 10, 0.56), rgba(12, 11, 10, 0.24) 68%, rgba(12, 11, 10, 0.48)),
    linear-gradient(to bottom, rgba(12, 11, 10, 0.48), rgba(12, 11, 10, 0.12) 32%, rgba(12, 11, 10, 0.78));
}

/* ==========================================================================
   AJUSTE 4 · Normativas cubiertas: solo los logos, en blanco
   Los PNG vienen ya en blanco sobre transparente. Se agrupan en dos tamaños
   porque un sello cuadrado (ISO, DORA) parece más pequeño que un logotipo
   alargado puesto a la misma altura.
   ========================================================================== */
.marcos__lista { align-items: center; gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); }
.marcos__item { display: flex; align-items: center; }
.marcos__logo {
  display: block; width: auto; opacity: 0.82;
  transition: opacity 260ms var(--ease);
}
.marcos__item:hover .marcos__logo { opacity: 1; }
.marcos__logo--cuadro { height: 36px; }
.marcos__logo--ancho  { height: 28px; }

@media (max-width: 760px) {
  .marcos__lista { gap: 1.5rem 1.75rem; }
  .marcos__logo--cuadro { height: 28px; }
  .marcos__logo--ancho  { height: 22px; }
}

/* ==========================================================================
   AJUSTE 5 · La cabecera, de cristal mientras va por encima del hero
   Sobre el vídeo la píldora se vuelve transparente y desenfoca lo que pasa
   por debajo; al salir del hero vuelve a la píldora blanca de siempre.
   ========================================================================== */
.cabecera__inner { transition: box-shadow 320ms var(--ease), background 320ms var(--ease), border-color 320ms var(--ease); }
.cabecera.sobre-hero .cabecera__inner {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: saturate(135%) blur(22px); -webkit-backdrop-filter: saturate(135%) blur(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 48px -34px rgba(0, 0, 0, 0.9);
}
.cabecera.sobre-hero .logo img { filter: brightness(0) invert(1); }
.cabecera.sobre-hero .nav__enlace { color: rgba(255, 255, 255, 0.84); }
.cabecera.sobre-hero .nav__enlace::after { background: var(--blanco); }
.cabecera.sobre-hero .nav__enlace:hover,
.cabecera.sobre-hero .nav__enlace[aria-current="true"] { color: var(--blanco); }
.cabecera.sobre-hero .hamburguesa { border-color: rgba(255, 255, 255, 0.28); }
.cabecera.sobre-hero .hamburguesa span,
.cabecera.sobre-hero .hamburguesa span::before,
.cabecera.sobre-hero .hamburguesa span::after { background: var(--blanco); }

/* Sin desenfoque disponible, un velo oscuro para que el texto blanco se lea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera.sobre-hero .cabecera__inner { background: rgba(12, 11, 10, 0.45); }
}

/* La barra exterior no se pinta nunca: en producción se volvía arena al bajar
   (.cabecera.esta-fija) y tapaba el vídeo por detrás de la píldora. Aquí la
   píldora flota sola y el cristal deja ver el hero durante todo el hero. */
.cabecera,
.cabecera.esta-fija {
  background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ==========================================================================
   AJUSTE 6 · La píldora, de cristal también fuera del hero
   Sobre el lienzo gris no vale el truco del hero (blanco muy transparente se
   lee gris sucio): aquí el cristal es blanco al 58 % con el desenfoque y la
   saturación altos, para que por debajo se adivinen las tarjetas y el color.
   ========================================================================== */
.cabecera__inner,
.cabecera.esta-fija .cabecera__inner {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(28, 27, 25, 0.09);
  backdrop-filter: saturate(185%) blur(20px); -webkit-backdrop-filter: saturate(185%) blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 34px -24px rgba(28, 27, 25, 0.55);
}

/* El hero manda sobre lo anterior: ahí el cristal es oscuro */
.cabecera.sobre-hero .cabecera__inner {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: saturate(135%) blur(22px); -webkit-backdrop-filter: saturate(135%) blur(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 48px -34px rgba(0, 0, 0, 0.9);
}

/* Sin desenfoque no hay cristal que valga: se tapa para que se lea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera__inner,
  .cabecera.esta-fija .cabecera__inner { background: rgba(255, 255, 255, 0.95); }
  .cabecera.sobre-hero .cabecera__inner { background: rgba(12, 11, 10, 0.45); }
}

/* El botón y la hamburguesa, redondos como la píldora que los contiene:
   con las esquinas rectas chocaban contra la curva del borde. */
.cabecera__acciones .boton { border-radius: 999px; padding: 0.62rem 1.3rem; }
.cabecera .hamburguesa { border-radius: 999px; }
.cabecera__inner { padding-right: 0.42rem; }


/* ==========================================================================
   AJUSTE 7 · QUÉ HACEMOS: los cinco frentes en órbita
   Losa oscura partida en dos: el titular a la izquierda (1/3) y, a la derecha
   (2/3), una caja más oscura con la plataforma en el centro y cinco orbes
   girando despacio. Al pinchar en uno, el JS para el giro, lo lleva arriba y
   su ficha sale del propio orbe. El giro de reposo es de CSS: la pista rota y
   cada orbe gira al revés a la misma velocidad, así los textos no se vuelcan.
   ========================================================================== */
.seccion--orbita { background: none; }

.losa {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) clamp(1.25rem, 0.5rem + 2vw, 3rem);
  border-radius: 28px; color: var(--blanco);
  background:
    radial-gradient(70% 60% at 22% 28%, rgba(107, 46, 46, 0.34), rgba(20, 18, 17, 0) 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(107, 46, 46, 0.18), rgba(20, 18, 17, 0) 70%),
    #141211;
}
.losa__cab { max-width: 46ch; }
.losa__chapa {
  margin-bottom: 0.9rem; font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--burdeos-claro);
}
.losa__cab h2 { color: var(--blanco); margin: 0; }
.losa__cab h2 .destacado { color: var(--burdeos-claro); }
.losa__cab > p { margin: 1.1rem 0 0; font-size: var(--fs-small); line-height: 1.7; color: rgba(255, 255, 255, 0.62); }
.losa__pista {
  display: flex; gap: 0.6rem; align-items: baseline;
  margin-top: 1.6rem !important; font-size: 0.82rem !important; color: rgba(255, 255, 255, 0.42) !important;
}
.losa__pista::before { content: "→"; color: var(--burdeos-claro); font-size: 0.9rem; }

/* Dos columnas en cuanto hay sitio: 1/3 el texto, 2/3 el sistema */
@media (min-width: 1040px) {
  .losa {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
}

/* La caja oscura que guarda el sistema ------------------------------------- */
.orbita__caja {
  position: relative; overflow: hidden; border-radius: 22px; padding: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  border: 0;
  background: none;
}
@media (max-width: 1039px) { .orbita__caja { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); } }

/* El escenario ------------------------------------------------------------- */
.orbita {
  --r: clamp(208px, 13vw + 34px, 222px);
  position: relative; width: 100%;
  height: calc(var(--r) * 2 + 124px);
}
.orbita__anillo {
  position: absolute; left: 50%; top: 50%; border-radius: 999px; z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.075);
}
.orbita__anillo--via    { width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); }
.orbita__anillo--ancho  { width: calc(var(--r) * 2 + 76px); height: calc(var(--r) * 2 + 76px); transform: translate(-50%, -50%); border-color: rgba(255, 255, 255, 0.04); }
.orbita__anillo--tumbado{ width: calc(var(--r) * 2 + 34px); height: calc(var(--r) * 2 + 34px); transform: translate(-50%, -50%) rotate(-13deg) scaleY(0.5); border-color: rgba(255, 255, 255, 0.055); }

/* El planeta --------------------------------------------------------------- */
.orbita__nucleo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: grid; justify-items: center; gap: 0.7rem; text-align: center;
}
.orbita__planeta {
  display: grid; place-items: center; width: 90px; height: 90px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: radial-gradient(60% 60% at 50% 35%, rgba(107, 46, 46, 0.75), rgba(20, 18, 17, 0.9));
  box-shadow: 0 0 0 7px rgba(107, 46, 46, 0.12), 0 20px 44px -24px rgba(0, 0, 0, 0.95);
}
.orbita__planeta img { width: 46%; height: auto; }
.orbita__nombre {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Los orbes ---------------------------------------------------------------- */
.orbita__pista { position: absolute; inset: 0; z-index: 3; animation: orbitar 78s linear infinite; }
.orbe {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  padding: 0; cursor: pointer; transition: opacity 420ms var(--ease);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
}
/* el hilo que une el orbe con el planeta */
.orbe::before {
  content: ""; position: absolute; left: 50%; top: 50%; height: 1px; z-index: -1;
  width: calc(var(--r) - 68px); transform-origin: 0 0; pointer-events: none; transition: opacity 300ms var(--ease);
  transform: rotate(calc(var(--a) + 180deg)) translateX(22px);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.3));
}
.orbe__giro { position: absolute; inset: 0; animation: orbitar-inv 78s linear infinite; }
.orbe__disco {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 320ms var(--ease), border-color 320ms var(--ease), transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.orbe__disco svg { width: 18px; height: 18px; }
.orbe__texto { transition: opacity 260ms var(--ease);
  position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
  width: 104px; display: grid; gap: 0.1rem; text-align: center;
}
.orbe__texto b { font-size: 0.72rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--blanco); }
.orbe__texto em { display: none; }

.orbe:hover .orbe__disco { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); transform: scale(1.08); }
.orbe:focus-visible { outline: none; }
.orbe:focus-visible .orbe__disco { outline: 2px solid var(--blanco); outline-offset: 5px; }
.orbe[aria-expanded="true"] .orbe__disco {
  background: var(--burdeos); border-color: rgba(255, 255, 255, 0.55); color: var(--blanco); transform: scale(1.14);
  box-shadow: 0 0 0 7px rgba(107, 46, 46, 0.22), 0 16px 34px -20px rgba(0, 0, 0, 0.95);
}
.orbe[aria-expanded="true"]::before { background: linear-gradient(to right, rgba(176, 112, 112, 0.1), rgba(176, 112, 112, 0.65)); }

/* Con una ficha abierta se apagan los demás (el giro lo para el JS) */
.orbita.fijada .orbe:not([aria-expanded="true"]) { opacity: 0.38; }
.orbita.fijada .orbe[aria-expanded="true"] .orbe__texto { opacity: 0; }

@keyframes orbitar     { to { transform: rotate(360deg); } }
@keyframes orbitar-inv { to { transform: rotate(-360deg); } }

/* La ficha, colgando del orbe que está arriba ------------------------------ */
.ficha {
  position: absolute; z-index: 6; left: 50%; top: calc(50% - var(--r) + 34px);
  width: min(300px, calc(var(--r) * 1.9 - 56px), 100% - 2rem); transform: translateX(-50%);
  display: grid; gap: 0.55rem;
  padding: 1.15rem 1.2rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px;
  background: rgba(18, 16, 15, 0.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
  animation: ficha-entra 380ms var(--ease) both;
}
.ficha::before {
  content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 16px;
  background: linear-gradient(to bottom, rgba(176, 112, 112, 0.7), rgba(255, 255, 255, 0.12));
}
.ficha h3 { margin: 0; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--blanco); }
.ficha__lead { margin: 0; font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.58); }
.ficha__lista { display: grid; gap: 0.52rem; margin-top: 0.3rem; padding-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ficha__lista li {
  padding-left: 0.9rem; position: relative;
  font-size: 0.78rem; line-height: 1.45; color: rgba(255, 255, 255, 0.6);
}
.ficha__lista b { font-weight: 600; color: rgba(255, 255, 255, 0.94); }
.ficha__lista li::before {
  content: ""; position: absolute; left: 0; top: 0.46rem;
  width: 4px; height: 4px; border-radius: 999px; background: var(--burdeos-claro);
}

/* con la ficha abierta, los orbes quedan por encima para poder cambiar de uno
   a otro, y sus hilos hacia el planeta se apagan */
.orbita.fijada .orbita__pista { z-index: 7; }
.orbita.fijada .orbe::before { opacity: 0; }

@keyframes ficha-entra { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .orbita__pista, .orbe__giro { animation: none; }
  .ficha { animation: none; }
}

/* Estrecho: la órbita se convierte en una cuadrícula ----------------------- */
@media (max-width: 860px) {
  .orbita { height: auto; display: grid; justify-items: center; gap: 1.75rem; }
  .orbita__anillo { display: none; }
  .orbita__nucleo { position: static; transform: none; }
  .orbita__pista { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; animation: none; }
  .orbe {
    position: static; width: auto; height: auto; margin: 0; transform: none;
    display: block; padding: 1.1rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
  }
  .orbe:last-child { grid-column: 1 / -1; }
  .orbe::before { display: none; }
  .orbe__giro { position: static; animation: none; display: grid; justify-items: center; gap: 0.6rem; }
  .orbe__disco { position: static; width: 46px; height: 46px; }
  .orbe__disco svg { width: 21px; height: 21px; }
  .orbe__texto { position: static; transform: none; width: auto; gap: 0.15rem; }
  .orbe__texto b { font-size: 0.86rem; }
  .orbe__texto em { display: block; font-style: normal; font-size: 0.74rem; line-height: 1.4; color: rgba(255, 255, 255, 0.5); }
  .orbita.fijada .orbe:not([aria-expanded="true"]) { opacity: 1; }
  .orbita.fijada .orbe[aria-expanded="true"] .orbe__texto { opacity: 1; }
  .orbe[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); }
  .ficha { position: static; width: 100%; max-width: none; transform: none; animation: none; }
  .ficha::before { display: none; }
}

/* El atributo hidden gana a cualquier display de aquí abajo */
.ficha[hidden], [hidden] { display: none !important; }

/* ==========================================================================
   AJUSTE 8 · Nara (antes MasterAI)
   Arriba, la presentación centrada: chapa, nombre grande, entradilla y botón.
   Debajo, la ventana real hablando, a todo el ancho del contenedor útil.
   ========================================================================== */
.seccion--nara { position: relative; isolation: isolate; }
.seccion--nara::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px;
  z-index: -1; pointer-events: none;
  background: radial-gradient(56% 72% at 50% 0%, rgba(107, 46, 46, 0.09), rgba(107, 46, 46, 0) 72%);
}

.nara__cab { max-width: 62ch; margin-inline: auto; text-align: center; }
.chapa-nara {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.6rem;
  padding: 0.4rem 1rem 0.4rem 0.78rem; border-radius: 999px;
  border: 1px solid rgba(28, 27, 25, 0.1); background: var(--blanco);
  box-shadow: 0 1px 2px rgba(28, 27, 25, 0.05), 0 12px 26px -20px rgba(28, 27, 25, 0.8);
  font-size: var(--fs-small); font-weight: 500; color: var(--tinta-suave);
}
.chapa-nara svg { width: 17px; height: 17px; color: var(--burdeos); }
.nara__titulo { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem); }
.nara__nombre { color: var(--burdeos); }
.nara__lead { margin: 1.5rem auto 0; max-width: 58ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--grafito); }
.acciones--centro { justify-content: center; margin-top: 2.1rem; }
.nara__nota { margin: 0.9rem 0 0; font-size: var(--fs-micro); color: var(--tinta-suave); }

.nara__pantalla { margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0; max-width: 900px; }
.nara__pantalla .mai { height: 600px; }
/* la conversación se apoya abajo, como en un chat de verdad */
.nara__pantalla .mai__lista { align-content: safe end; }

.nara__abajo {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.nara__abajo h3 { margin-bottom: var(--sp-3); }
.nara__fuentes { display: grid; gap: 0; }
.nara__fuentes li {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-2); align-items: start;
  padding: var(--sp-2) 0; border-top: 1px solid var(--linea);
  font-size: var(--fs-small); color: var(--grafito);
}
.nara__fuentes li:last-child { border-bottom: 1px solid var(--linea); }
.nara__fuentes b { font-weight: 600; color: var(--tinta); }
.nara__pie { margin-top: var(--sp-3); font-size: var(--fs-micro); color: var(--tinta-suave); }

@media (max-width: 860px) {
  .nara__abajo { grid-template-columns: minmax(0, 1fr); }
  .nara__fuentes li, .nara__abajo .perfil { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .nara__pantalla .mai { height: 470px; }
}

/* ==========================================================================
   AJUSTE 9 · Niveles: cuatro, sin precio publicado
   ========================================================================== */
.packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pack__incluye { margin-top: 0.2rem; }
.pack--medida { border-color: rgba(107, 46, 46, 0.35); background: linear-gradient(180deg, rgba(107, 46, 46, 0.04), rgba(255, 255, 255, 0)) , var(--blanco); }
.pack__medida {
  margin-top: auto; padding-top: var(--sp-2);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--burdeos);
}
@media (max-width: 1040px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .packs { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   AJUSTE 11 · La pantalla de Olza Platform, navegable
   Las píldoras de arriba pasan a ser botones de verdad y cada bloque tiene su
   vista. Se escribe después de olza-demo.css para ganar a sus reglas.
   ========================================================================== */
.demoapp .vista { display: flex; flex-direction: column; gap: 18px; min-height: 0; }

.demoapp .pildoras > button {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 36px; padding: 6px 14px;
  border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--neutro-texto);
  flex: none; cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.demoapp .pildoras > button:hover { color: var(--tinta); background: rgba(255, 255, 255, 0.62); }
.demoapp .pildoras > button:focus-visible { outline: 2px solid var(--burdeos); outline-offset: 1px; }
.demoapp .pildoras > button.activa:hover { background: var(--blanco); }

/* El pie de la pantalla recuerda que se puede pulsar */
.pantalla-pista {
  margin: 0 0 1.1rem; text-align: center;
  font-size: var(--fs-small); color: var(--tinta-suave);
}
.pantalla-pista b { font-weight: 600; color: var(--tinta); }
.pista-movil { display: none; }

/* Las tareas del inicio se abren al pulsarlas */
.demoapp .tarea__cab[data-abrir] { cursor: pointer; }
.demoapp .tarea__cab[data-abrir]:focus-visible { outline: 2px solid var(--burdeos); outline-offset: -2px; }

/* ==========================================================================
   AJUSTE 12 · «Iniciar sesión» en la cabecera
   ========================================================================== */
.nav__sesion {
  font-size: var(--fs-small); font-weight: 600; color: var(--grafito);
  padding: 0.62rem 0.9rem; border-radius: 999px;
  transition: color 220ms var(--ease), background 220ms var(--ease);
}
.nav__sesion:hover { color: var(--burdeos); background: var(--burdeos-vel); }
.cabecera.sobre-hero .nav__sesion { color: rgba(255, 255, 255, 0.84); }
.cabecera.sobre-hero .nav__sesion:hover { color: var(--blanco); background: rgba(255, 255, 255, 0.14); }
@media (max-width: 900px) { .cabecera__acciones .nav__sesion { display: none; } }

/* ==========================================================================
   AJUSTE 13 · Contacto: escríbenos
   ========================================================================== */
.cta-final__correo {
  margin: var(--sp-3) 0 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--tinta);
}
.cta-final__correo a {
  color: var(--burdeos); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--burdeos-claro); text-underline-offset: 0.22em;
  transition: text-decoration-color 220ms var(--ease);
}
.cta-final__correo a:hover { text-decoration-color: var(--burdeos); }

/* En el teléfono la pantalla no se encoge hasta ser ilegible: se desliza */
@media (max-width: 900px) {
  .pantalla-marco { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .pantalla-pista { margin-bottom: 0.9rem; }
  .pista-movil { display: inline; }
}

/* ==========================================================================
   AJUSTE 14 · El mismo aire entre todos los bloques
   El hueco entre dos secciones es el doble de --sp-section (el de abajo más el
   de arriba). Los dos bordes que no lo cumplían —la franja de normativas, que
   cierra el hero, y el pie— se compensan aquí para que todos midan igual.
   ========================================================================== */
.hero + .seccion { padding-top: calc(var(--sp-section) * 2 - clamp(1.25rem, 1.1rem + 0.8vw, 1.9rem)); }
.pie { padding-top: var(--sp-section); }

/* ==========================================================================
   AJUSTE 15 · «¿Te suena?» en carrusel
   Las seis noticias dejan de ser una rejilla de tarjetas y pasan a ser
   láminas anchas que se recorren de una en una, cada una con su telón.

   SOBRE LAS FOTOS: cada noticia lleva la suya, en assets/img/casos/, puesta
   por Javi. Debajo sigue habiendo un telón dibujado con degradados, que es lo
   que se ve si una foto falta o tarda. Para cambiar la foto de una noticia se
   toca su lámina en el HTML y nada más:
       <i class="caso__foto" style="background-image: url('assets/img/casos/…')">

   El movimiento es lo que más importa aquí:
   · la vía entera se desliza con una curva larga, no con un salto;
   · el telón de cada lámina va más despacio que la lámina (paralaje), así que
     el fondo «flota» detrás del contenido;
   · las laterales se quedan atrás, más pequeñas, atenuadas y desaturadas;
   · el texto de la que entra aparece escalonado, no de golpe.
   Con «reducir movimiento» todo eso se apaga y el cambio es seco.
   ========================================================================== */

.casos {
  position: relative;
  margin-top: var(--sp-5);
  overflow: hidden;              /* recorta las láminas que asoman por los lados */
  padding-block: 0.6rem;         /* aire para que la sombra de la activa no se corte */
}

.casos__via {
  position: relative;              /* para que offsetLeft de cada lámina mida contra la vía */
  display: flex;
  gap: clamp(0.9rem, 0.4rem + 1.4vw, 1.6rem);
  align-items: stretch;
  will-change: transform;
  transition: transform 820ms var(--ease);
  touch-action: pan-y;           /* el gesto horizontal es nuestro, el vertical del navegador */
}
.casos__via.va-suelta { transition: none; cursor: grabbing; }

/* ---- la lámina ---------------------------------------------------------- */
.caso {
  position: relative;
  flex: 0 0 min(1080px, 86vw);
  min-height: clamp(430px, 44vw, 620px);
  display: flex;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: var(--negro, #0E0D0C);
  opacity: 0.34;
  transform: scale(0.93);
  filter: saturate(0.55);
  transition: opacity 620ms var(--ease), transform 820ms var(--ease), filter 620ms var(--ease);
}
.caso:not(.es-activa) { cursor: pointer; }
.caso.es-activa {
  opacity: 1;
  transform: none;
  filter: none;
  box-shadow: 0 50px 110px -60px rgba(28, 27, 25, 0.75);
}

/* ---- el telón: más ancho que la lámina para poder moverse sin dejar borde -- */
.caso__telon {
  position: absolute;
  inset: -6% -16%;
  z-index: 0;
  background-color: #241a17;
  background-repeat: no-repeat;
  background-size: cover;
  /* --lejos lo pone el JS: 0 en la activa, ±1 en las vecinas, ±2… */
  transform: translate3d(calc(var(--lejos, 0) * 7%), 0, 0);
  transition: transform 1100ms var(--ease);
}
/* La foto de la noticia, encima del telón dibujado. Va en un elemento y no
   en un pseudoelemento a propósito: la ruta se escribe en el HTML de cada
   lámina y así se resuelve contra la página. Metida en una variable CSS, el
   navegador la resolvería contra la hoja de estilos (/assets/css/) y daría
   404, que es justo lo que pasó la primera vez. */
.caso__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* al 70 %: la foto se ve, pero deja pasar el telón de debajo y se integra
     con el resto de la página en vez de ser un recorte pegado */
  opacity: 0.7;
}

/* ---- el velo: sin él el texto no se lee sobre según qué fondo ------------ */
.caso__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* La sombra nace en la esquina de abajo a la izquierda, que es donde está
     el texto, y se deshace hacia arriba y hacia la derecha para dejar la foto
     a la vista. Es una elipse, no una diagonal: así tapa justo la zona del
     titular sin oscurecer la lámina entera. */
  background:
    radial-gradient(128% 118% at 0% 100%,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.84) 26%,
      rgba(0, 0, 0, 0.48) 54%,
      rgba(0, 0, 0, 0.14) 80%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 52%);
}

.caso__num {
  position: absolute;
  z-index: 2;
  top: clamp(1.2rem, 0.6rem + 1.6vw, 2.1rem);
  right: clamp(1.4rem, 0.6rem + 2vw, 2.6rem);
  margin: 0;
  font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.24);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}

/* ---- el contenido -------------------------------------------------------- */
.caso__cuerpo {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: end;
  gap: var(--sp-3);
  width: min(100%, 680px);
  padding: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
}

.caso__tipo,
.caso__ficha,
.caso__olza {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.caso.es-activa .caso__tipo  { opacity: 1; transform: none; transition-delay: 140ms; }
.caso.es-activa .caso__ficha { opacity: 1; transform: none; transition-delay: 230ms; }
.caso.es-activa .caso__olza  { opacity: 1; transform: none; transition-delay: 320ms; }

.caso__tipo {
  justify-self: start;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.caso__ficha { display: grid; gap: 0.7rem; }

.caso__titular {
  margin: 0;
  font-size: clamp(1.3rem, 0.9rem + 1.5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.caso__escena {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.caso__fuente {
  margin: 0;
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.58);
  font-variant-numeric: tabular-nums;
}

/* el «con Olza» va en cristal, para que se despegue de la noticia */
.caso__olza {
  display: grid;
  gap: 0.35rem;
  padding: var(--sp-3);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
}
.caso__olza b {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burdeos-claro);
}
.caso__olza p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* ---- cabecera con los mandos -------------------------------------------- */
.casos__cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.casos__intro { max-width: 56ch; }
.casos__intro .entradilla { margin-top: var(--sp-3); margin-bottom: 0; }

.casos__mando { display: flex; align-items: center; gap: var(--sp-3); }
.casos__cuenta {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.casos__cuenta b { color: var(--tinta); font-weight: 600; }

.casos__flechas { display: flex; gap: 0.5rem; }
.casos__flecha {
  display: grid;
  place-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  transition: background 260ms var(--ease), border-color 260ms var(--ease), color 260ms var(--ease), transform 260ms var(--ease);
}
.casos__flecha svg { width: 20px; height: 20px; }
.casos__flecha:hover:not(:disabled) { background: var(--burdeos); border-color: var(--burdeos); color: var(--blanco); transform: translateY(-2px); }
.casos__flecha:disabled { opacity: 0.32; cursor: default; }

/* ---- pie: puntos y barra de avance --------------------------------------- */
.casos__pie {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.casos__puntos { display: flex; gap: 0.45rem; }
.casos__punto {
  padding: 0.45rem 0.2rem;      /* zona de clic cómoda sin engordar el punto */
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.casos__punto i {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--linea);
  transition: background 320ms var(--ease), width 320ms var(--ease);
}
.casos__punto.es-activo i { width: 44px; background: var(--burdeos); }
.casos__punto:hover i { background: var(--burdeos-claro); }

.casos__barra {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: var(--linea);
  overflow: hidden;
}
.casos__barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--burdeos);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 620ms var(--ease);
}

.casos__aviso {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- los telones, uno por noticia ---------------------------------------
   Degradados, no fotos. Cada uno evoca su historia sin dibujarla: la cadena
   de proveedores, los trámites en papel, los contenedores del puerto, el
   pulso del hospital, las luces que se apagan en el campus y el barrido de
   un agente automático. */

.caso[data-escena="cadena"] .caso__telon {
  background-image:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.075) 0 2px, transparent 2px 46px),
    radial-gradient(88% 120% at 78% 8%, rgba(107, 46, 46, 0.72), transparent 62%),
    linear-gradient(140deg, #3a2621 0%, #1a1412 58%, #2e1f1c 100%);
}
.caso[data-escena="papel"] .caso__telon {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 34px),
    radial-gradient(70% 100% at 18% 94%, rgba(142, 47, 60, 0.6), transparent 66%),
    linear-gradient(196deg, #352420 0%, #191311 62%, #33231f 100%);
}
.caso[data-escena="puerto"] .caso__telon {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 3px, transparent 3px 58px),
    linear-gradient(0deg, rgba(107, 46, 46, 0.55) 0 22%, transparent 22%),
    radial-gradient(90% 70% at 88% 70%, rgba(181, 23, 47, 0.42), transparent 64%),
    linear-gradient(168deg, #302019 0%, #17110f 60%, #39251f 100%);
}
.caso[data-escena="pulso"] .caso__telon {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 42px),
    radial-gradient(54% 82% at 70% 46%, rgba(200, 30, 60, 0.5), transparent 60%),
    linear-gradient(152deg, #372421 0%, #191312 64%, #2f201e 100%);
}
.caso[data-escena="apagon"] .caso__telon {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.11) 1.4px, transparent 1.6px),
    radial-gradient(76% 96% at 22% 20%, rgba(107, 46, 46, 0.62), transparent 64%),
    linear-gradient(126deg, #372723 0%, #181211 56%, #342320 100%);
  background-size: 30px 30px, auto, auto;
}
.caso[data-escena="radar"] .caso__telon {
  background-image:
    repeating-radial-gradient(circle at 76% 58%, rgba(255, 255, 255, 0.085) 0 1px, transparent 1px 64px),
    radial-gradient(60% 80% at 76% 58%, rgba(181, 23, 47, 0.55), transparent 62%),
    linear-gradient(142deg, #38251f 0%, #191312 60%, #3a2621 100%);
}

/* ---- sin JS: se puede desplazar a mano y se ven todas -------------------- */
html:not(.js) .casos__via { overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.js) .caso { opacity: 1; transform: none; filter: none; scroll-snap-align: center; }
html:not(.js) .caso__tipo,
html:not(.js) .caso__ficha,
html:not(.js) .caso__olza { opacity: 1; transform: none; }
html:not(.js) .casos__mando,
html:not(.js) .casos__pie { display: none; }

/* ---- pantallas pequeñas -------------------------------------------------- */
@media (max-width: 900px) {
  .caso { flex-basis: 88vw; min-height: 0; }
  .caso__cuerpo { width: 100%; gap: var(--sp-2); padding-block: clamp(1.4rem, 1rem + 2vw, 2rem); }
  .caso__velo { background: radial-gradient(155% 105% at 0% 100%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.88) 42%, rgba(0, 0, 0, 0.64) 74%, rgba(0, 0, 0, 0.34) 100%); }
  .caso__num { font-size: 2.2rem; }
  .casos__cab { align-items: flex-start; }
  .casos__mando { width: 100%; justify-content: space-between; }
  .casos__pie { gap: var(--sp-3); }
}

/* ---- si el sistema pide menos movimiento, se apaga todo ------------------ */
@media (prefers-reduced-motion: reduce) {
  .casos__via,
  .caso,
  .caso__telon,
  .caso__tipo,
  .caso__ficha,
  .caso__olza,
  .casos__barra i,
  .casos__punto i { transition: none; }
  .caso { transform: none; filter: none; opacity: 1; }
  .caso:not(.es-activa) { opacity: 0.5; }
  .caso__telon { transform: none; }
  .caso__tipo, .caso__ficha, .caso__olza { opacity: 1; transform: none; }
}

/* ==========================================================================
   AJUSTE 16 · Resplandor en el borde de las tarjetas
   El efecto del componente de Aceternity, rehecho en CSS y JS planos: aquí
   no hay React, ni Tailwind, ni la librería «motion», así que no se podía
   copiar. Lo que hace es lo mismo.

   El borde es un degradado cónico que solo se ve en el filete: se pinta en
   todo el rectángulo y una máscara descuenta el interior (la receta de
   siempre, dos capas y mask-composite). Girando el cónico —la variable
   --giro, en grados— el trozo encendido recorre el borde, y es el ratón el
   que manda el ángulo. --vivo enciende y apaga con un fundido.

   En burdeos claro, como pediste: el filete va del #C98A8A al #E7C2C2 para
   que tenga algo de brillo en el centro del arco y no sea una línea plana.
   ========================================================================== */

.caso,
.pack,
.faq,
.pantalla-marco,
.nara__pantalla { position: relative; }

.caso::after,
.pack::after,
.faq::after,
.pantalla-marco::after,
.nara__pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: inherit;
  padding: var(--filete, 1.6px);      /* el grosor del resplandor */
  pointer-events: none;
  opacity: var(--vivo, 0);
  transition: opacity 340ms var(--ease);
  background: conic-gradient(from calc(var(--giro, 0) * 1deg) at 50% 50%,
      rgba(176, 112, 112, 0)   0deg,
      rgba(201, 138, 138, 0.9) 16deg,
      #E7C2C2                  34deg,
      rgba(201, 138, 138, 0.9) 52deg,
      rgba(176, 112, 112, 0)   70deg,
      rgba(176, 112, 112, 0)   360deg);
  /* la máscara deja fuera el interior: solo queda el filete */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* las láminas del carrusel son grandes y oscuras: ahí el filete pide más cuerpo */
.caso::after { --filete: 2px; }
.caso:not(.es-activa)::after { opacity: 0; }

/* la pantalla de la demo y la de Nara llevan sombra propia, así que basta un hilo */
.pantalla-marco::after,
.nara__pantalla::after { --filete: 1.4px; }

/* Sin ratón no hay nada que seguir, así que no se enciende y no estorba.
   Lo mismo si el sistema pide menos movimiento. */
@media (hover: none) {
  .caso::after, .pack::after, .faq::after,
  .pantalla-marco::after, .nara__pantalla::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .caso::after, .pack::after, .faq::after,
  .pantalla-marco::after, .nara__pantalla::after { display: none; }
}

/* ==========================================================================
   AJUSTE 17 · La barra, más fina y más de cristal
   Tres cosas: adelgazarla, bajar el peso visual del texto y que el cristal
   se note de verdad.

   Lo del cristal tenía una causa concreta: el relleno estaba calibrado para
   el lienzo gris de antes (blanco al 58 %). Sobre el fondo blanco de ahora,
   blanco translúcido sobre blanco no se distingue de blanco a secas, así que
   la píldora parecía maciza. Se arregla con menos relleno, más desenfoque y
   —sobre todo— relieve: un filo claro arriba que hace de brillo especular,
   un asiento oscuro abajo y la sombra separada de la línea de contacto. Eso
   es lo que hace que se lea como una lámina de cristal y no como un óvalo
   pintado.

   De 60 px a 48 px de alto, el texto de 13,1 a 12,2 px y del peso 600 al 500,
   el logo de 22 a 18 px y el botón de 42 a 34 px. En el teléfono la píldora
   se queda algo más alta a propósito: la hamburguesa necesita 44 px para ser
   un objetivo táctil decente, y eso manda sobre la estética.
   ========================================================================== */

:root { --alto-cabecera: 64px; }   /* la usan el salto de ancla y el menú del móvil */

.cabecera { inset: 0.75rem 0 auto; }

.cabecera__inner {
  max-width: 1080px;
  padding: 5px 6px 5px 18px;
  gap: var(--sp-2);
}

/* ---- el cristal, sobre el blanco ---------------------------------------- */
.cabecera__inner,
.cabecera.esta-fija .cabecera__inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.38) 100%);
  border-color: rgba(28, 27, 25, 0.07);
  backdrop-filter: saturate(200%) blur(26px); -webkit-backdrop-filter: saturate(200%) blur(26px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),      /* el filo de arriba: el brillo */
    inset 0 -1px 0 rgba(28, 27, 25, 0.05),        /* el asiento de abajo */
    0 1px 1px rgba(28, 27, 25, 0.04),
    0 14px 34px -22px rgba(28, 27, 25, 0.34);     /* la sombra, despegada */
}

/* ---- y sobre el hero, que es negro -------------------------------------- */
.cabecera.sobre-hero .cabecera__inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: saturate(150%) blur(26px); -webkit-backdrop-filter: saturate(150%) blur(26px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 20px 44px -32px rgba(0, 0, 0, 0.85);
}

/* ---- el contenido, más pequeño y más ligero ------------------------------ */
.logo img { height: 18px; }

.nav__lista { gap: clamp(0.9rem, 0.5rem + 1.1vw, 1.5rem); }
.nav__enlace {
  font-size: 0.763rem;              /* 12,2 px */
  font-weight: 500;
  letter-spacing: 0.005em;
  padding-block: 0.3rem;
}
.cabecera.sobre-hero .nav__enlace { color: rgba(255, 255, 255, 0.78); }

.nav__sesion {
  font-size: 0.763rem;
  font-weight: 500;
  padding: 0.42rem 0.72rem;
}

.cabecera__acciones { gap: 0.3rem; }
.cabecera__acciones .boton {
  font-size: 0.763rem;
  font-weight: 500;
  padding: 0.52rem 0.95rem;
  letter-spacing: 0.002em;
}

/* la hamburguesa solo sale en el móvil, y allí manda el dedo, no el milímetro */
.hamburguesa { width: 40px; height: 40px; }

@media (max-width: 900px) {
  .cabecera__inner { padding: 6px 6px 6px 16px; }
  .hamburguesa { width: 44px; height: 44px; }   /* objetivo táctil */
}

/* Sin desenfoque no hay cristal: se rellena para que el texto se lea. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera__inner,
  .cabecera.esta-fija .cabecera__inner { background: rgba(255, 255, 255, 0.95); }
  .cabecera.sobre-hero .cabecera__inner { background: rgba(12, 11, 10, 0.5); }
}

/* ==========================================================================
   AJUSTE 18 · Una sola nube de burdeos, en «Da el primer paso»
   De las seis nubes que hubo se queda solo esta, en la última sección.

   Va en un pseudoelemento de la propia sección y no en una capa que cubra la
   página entera, que es como estaban montadas las seis. Así no hace falta
   volver a dejar transparentes todas las secciones blancas, y la nube no
   puede aparecer donde no toca.

   El tono es el vino vivo y no el burdeos de marca por lo de siempre: un
   color oscuro diluido sobre blanco pierde la saturación antes que la fuerza
   y se ve gris sucio. El burdeos de marca sigue siendo el de los textos y
   los botones; esto es solo para la mancha difuminada.
   ========================================================================== */
#contacto > .contenedor { position: relative; z-index: 1; }

/* Centrada en la esquina superior derecha del formulario, que a 1440 cae
   en x 92 % y 12 % de la sección y a 1920 en x 83 %: el 88 % queda entre las
   dos. Se sale por arriba a propósito, para que parezca que viene de fuera. */
#contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(860px 520px at 88% 14%, rgba(200, 30, 60, 0.22), transparent 70%);
}