/* ============================================================
   Módiga — modiga.com.py
   KV 2026 (manual de normalización, agosto 2026)
   azul #2329A9 · navy #151F42 · naranja #FC7235 · ámbar #FAA74A · celeste #99CCFF
   Tipografías: Baloo 2 (display) · Lato (texto)
   ============================================================ */

/* ---------- Fuentes ---------- */
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/Baloo2-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/Baloo2-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --azul: #2329a9;
  --azul-hover: #1b208a;
  --navy: #151f42;
  --naranja: #fc7235;
  --naranja-hover: #e8611f;
  --ambar: #faa74a;
  --celeste: #99ccff;
  --celeste-suave: #e6f2ff;
  --crema: #f7f6f2;
  --blanco: #ffffff;
  /* Derivados del navy, no grises neutros: el negro no esta en la paleta. */
  --texto: #151f42;              /* = navy */
  --texto-suave: #5b627b;        /* navy al 70% sobre blanco */
  --borde: #e8e9ec;              /* navy al 10% sobre blanco */
  --borde-navy: rgba(255, 255, 255, 0.14);

  --display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --sans: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  --ancho: 1140px;
  --radio: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --alto-header: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--celeste); color: var(--navy); }

img { max-width: 100%; display: block; }

a { color: var(--azul); text-decoration: none; }

ul { list-style: none; }

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Transiciones de página ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: pagina-sale 180ms ease both;
}
::view-transition-new(root) {
  animation: pagina-entra 280ms var(--ease) both;
}
@keyframes pagina-sale { to { opacity: 0; } }
@keyframes pagina-entra {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- Tipografía ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--navy);
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.3rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.15rem; }

/* Acentos en Medium: la palabra destacada, las cifras y las etiquetas.
   El resto de Baloo sigue en Regular. */
.acento { color: var(--ambar); font-weight: 500; }

.seccion-intro {
  max-width: 640px;
  margin-bottom: 48px;
}
.seccion-intro p {
  margin-top: 12px;
  color: var(--texto-suave);
  font-size: 1.05rem;
}

/* ---------- Titulares que suben por línea ---------- */
.revelar .linea {
  display: block;
  overflow: hidden;
  /* deja pasar tildes y colas de la g sin recortarlas */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.revelar .linea > span {
  display: block;
  transform: translateY(110%);
  transition: transform 850ms var(--ease);
}
.revelar.visible .linea > span { transform: none; }
/* el h1 del hero ya no necesita su animación de bloque */
.hero-inner > h1.revelar { animation: none; }

/* ---------- Pill de sección (como en el manual) ---------- */
.pill {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1;
  color: var(--azul);
  border: 1.5px solid var(--azul);
  border-radius: 999px;
  padding: 7px 16px 9px;
  margin-bottom: 18px;
}
.pill-blanca { color: var(--blanco); border-color: rgba(255, 255, 255, 0.6); }
.pill-naranja { color: var(--naranja); border-color: var(--naranja); }

/* ---------- Botones ---------- */
/* El tiron hacia el cursor entra por variable y no escribiendo transform desde
   el JS: asi el hover puede seguir usando transform sin pelearse con el. */
.boton { --tiron-x: 0px; --tiron-y: 0px; }

.boton {
  position: relative;
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: 14px 30px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transform: translate(var(--tiron-x), var(--tiron-y));
  transition: background-color 150ms ease, color 150ms ease,
              padding 300ms var(--ease), transform 260ms var(--ease);
}
.boton::after {
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity 200ms ease, transform 300ms var(--ease);
}
.boton:hover {
  padding-right: 50px;
  transform: translateY(-1px);
}
.boton:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}
/* Sin botones amarillos. El naranja no puede virar a azul (vive sobre azul),
   asi que oscurece dentro del propio naranja. */
.boton-azul { background: var(--azul); color: var(--blanco); }
.boton-azul:hover { background: var(--naranja); color: var(--blanco); }
.boton-naranja { background: var(--naranja); color: var(--blanco); }
.boton-naranja:hover { background: var(--naranja-hover); color: var(--blanco); }
.boton-blanco { background: var(--blanco); color: var(--navy); }
.boton-blanco:hover { background: var(--naranja); color: var(--blanco); }
/* Sobre naranja ese hover borraria el boton: vira a navy. Vale para la seccion
   entera y para las tarjetas naranja. */
.seccion-naranja .boton-blanco:hover,
.tarjeta-naranja .boton-blanco:hover { background: var(--navy); color: var(--blanco); }
.boton-borde {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease,
              padding 300ms var(--ease), transform 300ms var(--ease);
}
.boton-borde:hover {
  background: var(--azul);
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px var(--azul);
}

/* ---------- Header: nav flotante en pastilla ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: 18px;
  background: transparent;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 20px;
}
/* Vectorial y de un solo color: el fill lo decide el CSS, asi no hacen falta
   dos PNG ni filtros para recolorearlo. */
.marca-svg { height: 32px; width: auto; display: block; }
.header-logo .marca-svg { fill: var(--blanco); transition: fill 240ms var(--ease); }
.header-logo:hover .marca-svg { fill: var(--naranja); }

/* El logo se adapta al fondo que tenga detras, no al scroll:
   .header-claro lo pone azul cuando la seccion de atras es clara. */
.header-claro .header-logo .marca-svg { fill: var(--azul); }
.header-claro .header-logo:hover .marca-svg { fill: var(--naranja); }
.header-claro .nav-toggle span { background: var(--navy); }
.header-solido .nav-pill { box-shadow: 0 4px 20px rgba(21, 31, 66, 0.14); }

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--blanco);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 2px 14px rgba(21, 31, 66, 0.10);
  transition: box-shadow 250ms ease;
}
.nav-pill a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1;
  color: var(--navy);
  padding: 11px 18px 13px;
  border-radius: 999px;
  transition: background-color 200ms ease, color 200ms ease;
}
.nav-pill a:hover { background: var(--crema); }
.nav-pill a.activo { background: var(--azul); color: var(--blanco); }

.nav .boton { padding: 12px 26px 14px; font-size: 0.94rem; }
.nav .boton:hover { padding-right: 44px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blanco);
  margin: 5px 0;
  transition: transform 150ms ease, opacity 150ms ease, background-color 250ms ease;
}

/* ---------- Gráficos de entorno ---------- */
/* Mas alto que la seccion a proposito. El parallax lo corre en vertical (hasta
   unos 34px medidos), y midiendo justo el alto de la seccion al moverse dejaba
   ver el fondo arriba o abajo. El 14% de holgura por lado cubre ese recorrido. */
.entorno {
  position: absolute;
  top: -14%;
  right: 0;
  height: 128%;
  width: auto;
  pointer-events: none;
  will-change: transform;
}

/* La cinta del KV cierra el header de cada pagina, a la derecha y centrada.
   Sangra contra el borde del viewport, no contra un contenedor, asi que sus
   tres bandas terminan a la vez y no se ve el final de ninguna. */
.hero-cinta {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 42%;
  max-width: 620px;
  height: auto;
  pointer-events: none;
}
.hero-cinta path {
  transform-box: view-box;
  animation: cta-cinta-entra 900ms var(--ease) both;
}
.hero-cinta path:nth-child(1) { --amp: 7px; animation: cta-cinta-entra 900ms var(--ease) 120ms both, cinta-onda 6.6s ease-in-out 1500ms infinite; }
.hero-cinta path:nth-child(2) { --amp: 11px; animation: cta-cinta-entra 900ms var(--ease) 280ms both, cinta-onda 5.8s ease-in-out 2500ms infinite; }
.hero-cinta path:nth-child(3) { --amp: 8px; animation: cta-cinta-entra 900ms var(--ease) 440ms both, cinta-onda 7.2s ease-in-out 1900ms infinite; }

@media (max-width: 900px) {
  .hero-cinta { width: 62%; max-width: none; top: auto; bottom: 0; transform: none; }
}

/* Franja diagonal chica (esquina de tarjetas, como la tarjeta azul del manual) */
.franja-esquina {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150px;
  height: 46px;
  overflow: hidden;
  pointer-events: none;
  transition: transform 400ms var(--ease);
}
.franja-esquina span {
  position: absolute;
  bottom: -8px;
  height: 62px;
  transform: skewX(-14deg);
}
.franja-esquina span:nth-child(1) { left: -18px; width: 34px; background: var(--celeste); }
.franja-esquina span:nth-child(2) { left: 22px; width: 34px; background: var(--ambar); }
.franja-esquina span:nth-child(3) { left: 62px; width: 72px; background: var(--naranja); border-radius: 0 16px 0 0; }

/* ---------- Hero (inicio) ---------- */
/* El hero arranca ocupando el 80% de la pantalla: se ve que abajo sigue habiendo
   sitio, no es una portada que tapa todo. El achique lo maneja el JS atado a la
   posicion de scroll (ver main.js), asi acompaña el gesto en vez de dispararse
   solo. Esto es el estado inicial, antes de que el JS tome el control. */
:root { --hero-porcion: 0.8; }
.intro .hero { min-height: calc(100vh * var(--hero-porcion)); }

.hero {
  min-height: 0;              /* explicito: de 100vh a auto no se puede transicionar */
  background: var(--azul);
  color: var(--blanco);
  position: relative;
  overflow: hidden;
}
.hero-pagina .entorno {
  top: var(--alto-header);
  height: calc(100% - var(--alto-header));
}
/* Cinta del KV: entra en abanico, cada banda por su diagonal */
.cinta {
  position: absolute;
  left: 47%;
  bottom: -2px;
  width: 82%;
  height: auto;
  pointer-events: none;
  will-change: transform;
  /* Se estira desde el borde derecho: ese lado ya sangra fuera de pantalla y tiene
     que quedarse ahi, el que viaja es el izquierdo. */
  transform-origin: 100% 100%;
}
.cinta path {
  transform-box: view-box;
  animation: cinta-entra 1100ms var(--ease) both;
}

/* Despues de entrar, las bandas respiran como un ecualizador lento.
   Solo bajan (nunca suben): si subieran, su base se despegaria del borde
   inferior y asomaria la banda de atras. */
.cinta path:nth-child(1) {
  --amp: 9px;
  animation: cinta-entra 1100ms var(--ease) 120ms both,
             cinta-onda 6.5s ease-in-out 1500ms infinite;
}
.cinta path:nth-child(2) {
  --amp: 13px;
  animation: cinta-entra 1100ms var(--ease) 260ms both,
             cinta-onda 5.4s ease-in-out 2600ms infinite;
}
.cinta path:nth-child(3) {
  --amp: 8px;
  animation: cinta-entra 1100ms var(--ease) 400ms both,
             cinta-onda 7.3s ease-in-out 1900ms infinite;
}
@keyframes cinta-entra {
  from { transform: translate(-210px, 474px); opacity: 0; }
}

@keyframes cinta-onda {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--amp)); }
}

@media (max-width: 1200px) {
  .cinta { left: 50%; width: 78%; }
}
/* Abajo de 1000px la pastilla no entra: pasa a menu desplegable */
@media (max-width: 1000px) {
  .nav {
    position: fixed;
    inset: var(--alto-header) 0 auto 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .nav.abierta { display: flex; }
  /* En mobile la pastilla se deshace: el desplegable ya es blanco */
  .nav-pill {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background: none;
    box-shadow: none;
    padding: 0;
    gap: 0;
  }
  .nav-pill a { padding: 13px 16px 15px; font-size: 1.02rem; }
  .nav .boton { margin-top: 10px; align-self: flex-start; padding: 12px 26px 14px; }
  .nav-toggle { display: block; }
  .nav-toggle.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.abierto span:nth-child(2) { opacity: 0; }
  .nav-toggle.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 900px) {
  /* Banda al pie; el alto sale del ancho (relacion 3.23) y el hero reserva ese espacio */
  .cinta { left: 0; width: 130%; height: auto; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  will-change: opacity, transform;
  /* El aire va en vh, no en px fijos: si el padding no cede, el contenido solo
     ya mide mas que el 70% y el min-height nunca llega a imponerse. */
  padding: calc(var(--alto-header) + clamp(24px, 7vh, 96px)) 0 clamp(40px, 9vh, 120px);
  max-width: 660px;
}
.hero h1 { color: var(--blanco); }
.hero p {
  margin-top: 18px;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
}
.hero-acciones {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Coreografía de entrada del hero */
.hero-inner > * {
  animation: sube-entra 800ms var(--ease) both;
}
.hero-inner > .pill { animation-delay: 100ms; }
.hero-inner > h1 { animation-delay: 200ms; }
.hero-inner > p { animation-delay: 340ms; }
.hero-inner > .hero-acciones { animation-delay: 460ms; }

@keyframes sube-entra {
  from { opacity: 0; transform: translateY(28px); }
}

/* Las bandas de la franja entran desde la derecha; el semicírculo, desde abajo */
.hero .entorno polygon,
.hero-pagina .entorno polygon {
  animation: banda-entra 900ms var(--ease) both;
}
.hero .entorno polygon:nth-of-type(1),
.hero-pagina .entorno polygon:nth-of-type(1) { animation-delay: 60ms; }
.hero .entorno polygon:nth-of-type(2),
.hero-pagina .entorno polygon:nth-of-type(2) { animation-delay: 160ms; }
.hero .entorno polygon:nth-of-type(3),
.hero-pagina .entorno polygon:nth-of-type(3) { animation-delay: 260ms; }
.hero .entorno path { animation: sube-forma 900ms var(--ease) 480ms both; }

@keyframes banda-entra {
  from { transform: translateX(220px); opacity: 0; }
}
@keyframes sube-forma {
  from { transform: translateY(180px); }
}

/* ---------- Hero interno (páginas) ---------- */
.hero-pagina {
  /* Azul, igual que el hero de la home: el navy queda para las secciones de
     adentro y asi el header de cada pagina se lee como la misma pieza. */
  background: var(--azul);
  color: var(--blanco);
  position: relative;
  overflow: hidden;
}
/* Mismo alto en las cuatro paginas: si cada header se adapta a lo que mide su
   titulo, el grafismo cambia de tamano al saltar de una a otra. */
.hero-pagina {
  min-height: clamp(380px, 31vw, 470px);
  display: flex;
  align-items: center;
}
.hero-pagina > .contenedor { width: 100%; }
.hero-pagina .hero-inner {
  padding: calc(var(--alto-header) + 40px) 0 56px;
  max-width: 640px;
}
.hero-pagina h1 { color: var(--blanco); font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.hero-pagina p {
  margin-top: 14px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Secciones ---------- */
.seccion { padding: 90px 0; }
.seccion-crema { background: var(--crema); }
.seccion-navy {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.seccion-navy .contenedor { position: relative; z-index: 1; }
.seccion-navy h2, .seccion-navy h3 { color: var(--blanco); }
.seccion-navy p { color: rgba(255, 255, 255, 0.8); }

/* Misma seccion, en celeste. Es fondo claro: aca el texto va en navy, que da
   9.52:1, y no en blanco, que daria 1.69:1. */
.seccion-celeste {
  background: var(--celeste);
  position: relative;
  overflow: hidden;
}
.seccion-celeste .contenedor { position: relative; z-index: 1; }
/* Por ancho y no por alto: midiendolo contra el alto de la seccion, en
   pantallas anchas quedaba igual de chico y se iba a la derecha. */
.seccion-celeste .entorno { top: -22%; height: 144%; width: 52%; }
/* El catalogo no recorta: el telefono tiene que poder asomar por arriba. El
   grafismo se recorta aparte, en su propia caja. */
/* Doble clase y no .seccion-catalogo sola: la regla vive antes que
   .seccion-naranja, que tambien declara overflow, y perderia por orden. */
.seccion-naranja.seccion-catalogo { overflow: visible; }
.seccion-catalogo .entorno-caja { position: absolute; inset: 0; overflow: hidden; }
.seccion-catalogo .entorno { top: -14%; height: 128%; width: 58%; }
/* La caja va de arriba de la seccion hasta su borde inferior y recorta: asi el
   telefono asoma por arriba y queda cortado abajo. Con overflow en la seccion
   no se puede, porque recortaria las dos puntas o ninguna. */
.catalogo-tel-caja {
  position: absolute;
  right: clamp(24px, 21vw, 360px);
  top: -20%;
  bottom: 0;
  width: clamp(150px, 17vw, 250px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.catalogo-tel {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 46px rgba(21, 31, 66, 0.34));
}
@media (max-width: 900px) {
  /* Sin ancho para convivir con el texto, el telefono estorba mas de lo que suma */
  .catalogo-tel-caja { display: none; }
}

/* Mas ancho que el de cultura: aca el circulo tiene que llegar detras de las
   tarjetas, no quedarse en el margen derecho. */
.seccion-operacion .entorno { top: -14%; height: 128%; width: 64%; }
.seccion-celeste h2, .seccion-celeste h3 { color: var(--navy); }
.seccion-celeste p { color: rgba(21, 31, 66, 0.78); }
.seccion-celeste .pill { color: var(--navy); border-color: rgba(21, 31, 66, 0.45); }

/* Misma seccion, en naranja. Hereda el comportamiento de la navy: el grafismo
   de entorno detras y el contenido por encima. */
.seccion-naranja {
  background: var(--naranja);
  position: relative;
  overflow: hidden;
}
.seccion-naranja .contenedor { position: relative; z-index: 1; }
.seccion-naranja h2 { color: var(--blanco); }
/* Los h3 de las tarjetas van sobre blanco, no sobre el naranja de la seccion */
.seccion-naranja h3 { color: var(--blanco); }
.seccion-naranja .oficina h3 { color: var(--navy); }
.seccion-naranja p { color: rgba(255, 255, 255, 0.9); }

/* ---------- Indicadores ---------- */
.indicadores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Cada indicador en un color de marca, con el texto en blanco, igual que las
   tarjetas del mecanismo en la home. El tono lo da el orden, no una clase por
   tarjeta: son siempre cuatro. */
.indicador {
  border-radius: var(--radio);
  padding: 30px 26px;
  color: var(--blanco);
}
.indicador:nth-child(4n + 1) { background: var(--azul); }
.indicador:nth-child(4n + 2) { background: var(--naranja); }
.indicador:nth-child(4n + 3) { background: var(--navy); }
.indicador:nth-child(4n + 4) { background: var(--ambar); }

.indicador .cifra {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--blanco);
}
.indicador .detalle {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}

/* Indicadores sobre navy */
.seccion-navy .indicador { background: rgba(255, 255, 255, 0.06); }
.seccion-navy .indicador .cifra { color: var(--celeste); }
.seccion-navy .indicador .detalle { color: rgba(255, 255, 255, 0.7); }

/* ---------- Tarjetas de color ---------- */
.tarjetas-color {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tarjeta-color {
  border-radius: var(--radio);
  padding: 32px 28px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.tarjeta-color > * { position: relative; z-index: 1; }
.tarjeta-color h3 {
  font-size: 1.35rem;
  line-height: 1.25;
}
.tarjeta-color p { font-size: 0.98rem; }
.tarjeta-color .boton { align-self: flex-start; }

.tarjeta-azul { background: var(--azul); }
.tarjeta-azul h3 { color: var(--blanco); }
.tarjeta-azul p { color: rgba(255, 255, 255, 0.85); }

.tarjeta-naranja { background: var(--naranja); }
.tarjeta-naranja h3 { color: var(--blanco); }
.tarjeta-naranja p { color: rgba(255, 255, 255, 0.92); }

.tarjeta-ambar { background: var(--ambar); }
.tarjeta-ambar h3 { color: var(--navy); }
.tarjeta-ambar p { color: rgba(21, 31, 66, 0.8); }

.tarjeta-celeste { background: var(--celeste); }
.tarjeta-celeste h3 { color: var(--navy); }
.tarjeta-celeste p { color: rgba(21, 31, 66, 0.78); }

/* ---------- Grid de logos ---------- */
.grid-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.logo-item {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  transition: border-color 200ms ease, transform 300ms var(--ease), box-shadow 300ms ease;
}
.logo-item:hover {
  border-color: var(--azul);
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(21, 31, 66, 0.08);
}
.logo-item img {
  max-height: 100%;
  width: auto;
  max-width: 82%;
  object-fit: contain;
}

.categoria-titulo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 56px 0 20px;
}
.categoria-titulo:first-of-type { margin-top: 0; }
.categoria-titulo .cantidad {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* ---------- Marquee de marcas (inicio) ---------- */
.marquee {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  /* Va fuera del .contenedor en el HTML: toma el ancho completo sin usar
     100vw, que incluiria la barra de scroll y generaria desborde. */
  margin: 0;
}
.marquee-fila {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee-fila:hover { animation-play-state: paused; }
.marquee-reversa { animation-direction: reverse; }
.marquee-grupo {
  display: flex;
  gap: 16px;
  /* Se sesgan con la velocidad del scroll: el sesgo va en los grupos y no en la
     fila, porque la fila ya usa transform para correr. */
  transform: skewX(calc(var(--sesgo, 0) * 1deg));
}
.marquee .logo-item {
  width: 200px;
  height: 132px;
  aspect-ratio: auto;
  flex-shrink: 0;
}
@keyframes marquee {
  to { transform: translateX(calc(-50% - 8px)); }
}

/* ---------- Novedades ---------- */
.novedades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.novedad {
  border-radius: var(--radio);
  padding: 28px 28px 60px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.novedad > * { position: relative; z-index: 1; }
.novedad > svg { transition: transform 400ms var(--ease); }
.novedad:hover > svg { transform: translateY(-8px); }
.novedad:hover .franja-esquina { transform: translateY(-5px); }
.novedad .etiqueta {
  font-size: 0.85rem;
  font-weight: 700;
}
.novedad h3 { font-size: 1.25rem; }

/* ---------- Línea de tiempo ---------- */
/* El riel y los puntos salen del mismo par de medidas: antes la linea estaba
   centrada en x=1 y los puntos en x=-1, y se notaba el corrimiento. */
.timeline {
  --riel: 6px;      /* centro del riel, desde el borde izquierdo */
  --sangria: 34px;  /* donde arranca el texto */
  --punto: 13px;
  position: relative;
  margin-top: 24px;
  padding-left: var(--sangria);
}
.timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--riel) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--borde);
}
.timeline-linea {
  position: absolute;
  left: calc(var(--riel) - 1px);
  top: 0;
  width: 2px;
  height: 0;
  background: var(--azul);
  z-index: 1;
}
.timeline-item {
  position: relative;
  padding-bottom: 36px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  /* el item arranca en --sangria, asi que restarla deja el punto sobre el riel */
  left: calc(var(--riel) - var(--sangria) - var(--punto) / 2);
  top: 8px;
  width: var(--punto);
  height: var(--punto);
  border-radius: 50%;
  background: var(--borde);
  /* por encima del riel: si no, la linea le pasa por encima */
  z-index: 2;
  transition: background-color 300ms ease, transform 300ms var(--ease);
}
.timeline-item.activo::before {
  background: var(--naranja);
  transform: scale(1.15);
}
.timeline-item.activo:nth-child(even)::before { background: var(--azul); }
.timeline-item .anio {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--azul);
}
.timeline-item p { color: var(--texto-suave); max-width: 560px; }

/* ---------- Décadas / marcas por época ---------- */
/* Cronologia de marcas: cada decada con los logos de las que se sumaron.
   Mostrar las marcas dice mas que enumerarlas. Las cuatro sin logo entregado
   van como chip de texto, del mismo tamano, para que la fila no se rompa. */
.decadas { display: grid; gap: 0; }
.decada {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--borde);
}
.decada:last-child { border-bottom: 1px solid var(--borde); }
.decada .etiqueta {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--naranja);
}
.decada-marcas { display: flex; flex-wrap: wrap; gap: 12px; }
.marca-chip {
  width: 124px;
  height: 58px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  transition: border-color 200ms ease, transform 260ms var(--ease);
}
.marca-chip:hover { border-color: var(--azul); transform: translateY(-3px); }
.marca-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marca-chip.sin-logo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--navy);
}
.seccion-crema .marca-chip { background: var(--blanco); }

@media (max-width: 700px) {
  .decada { grid-template-columns: 1fr; gap: 14px; }
  .marca-chip { width: 104px; height: 50px; }
}

/* ---------- Oficinas / contacto ---------- */
.oficinas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.oficina {
  background: var(--crema);
  border-radius: var(--radio);
  padding: 26px;
}
.seccion-crema .oficina, .seccion-naranja .oficina { background: var(--blanco); }
/* Un solo color en la tarjeta: navy, en dos intensidades. Antes convivian el
   navy del titulo, el gris del cuerpo y el azul del enlace. El enlace se
   distingue por peso, y descubre el azul al pasar el mouse. */
.oficina h3 { margin-bottom: 8px; }
.oficina p { color: rgba(21, 31, 66, 0.72); font-size: 0.97rem; }
.oficina a { color: var(--navy); font-weight: 700; }
.oficina a:hover { color: var(--azul); }

/* ---------- Mapa ---------- */
.mapa {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
}
.mapa iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
}

/* ---------- CTA final ---------- */
.cta-final {
  /* navy para empalmar con el pie; el panel azul queda flotando encima */
  background: var(--navy);
  padding: 80px 0 0;
}
/* El cierre pasa a ser un bloque contenido, no una franja a sangre */
.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--azul);
  color: var(--blanco);
}
.cta-final .contenido {
  position: relative;
  z-index: 1;
  padding: clamp(46px, 5vw, 72px) clamp(28px, 4vw, 56px);
  max-width: 34em;
}
.cta-final h2 { color: var(--blanco); }
.cta-final p { margin-top: 12px; color: rgba(255, 255, 255, 0.85); }
.cta-final .acciones { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Cinta del KV en los cierres: solo tres bandas, la naranja llena hasta el
   borde del viewBox. Va apoyada en la esquina inferior derecha -su base
   coincide con el borde de la seccion, no lo cruza- y el max-width evita que
   en pantallas anchas crezca mas alto que el bloque. */
.cta-cinta {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  max-width: 660px;
  height: auto;
  pointer-events: none;
}
/* La M del isotipo cierra el panel en las paginas internas, donde la home
   lleva la cinta. Sangra por la derecha y por abajo: se lee como grafismo de
   entorno y no como un logo suelto apoyado en la esquina. */
.cta-eme {
  position: absolute;
  right: -2%;
  /* El sobrante de abajo es igual a lo que crece de mas, asi el tope queda al
     ras arriba y el corte pasa solo abajo. */
  bottom: -28%;
  height: 128%;
  width: auto;
  max-width: 72%;
  pointer-events: none;
  overflow: visible;
}
.cta-eme path { fill: var(--celeste); }

@media (max-width: 1100px) {
  .cta-eme {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    height: auto;
    width: 62%;
    max-width: 300px;
    margin: 30px auto -14%;
    align-self: center;
  }
}

/* Respira como la del hero, pero entra distinto. La del hero entra en abanico,
   desplazandose a la izquierda, y puede hacerlo porque sangra fuera de
   pantalla. Aca el panel tiene un borde duro a la derecha: cualquier
   desplazamiento horizontal deja ver el azul del panel mientras viaja. Entra
   entonces solo desde abajo. */
@keyframes cta-cinta-entra {
  from { transform: translateY(120px); opacity: 0; }
}
.cta-cinta path {
  transform-box: view-box;
  animation: cta-cinta-entra 900ms var(--ease) both;
  animation-play-state: paused;
}
.cta-panel.visible .cta-cinta path { animation-play-state: running; }
.cta-panel.visible .cta-cinta path:nth-child(1) {
  --amp: 8px;
  animation: cta-cinta-entra 900ms var(--ease) 140ms both,
             cinta-onda 6.8s ease-in-out 1600ms infinite;
}
.cta-panel.visible .cta-cinta path:nth-child(2) {
  --amp: 12px;
  animation: cta-cinta-entra 900ms var(--ease) 300ms both,
             cinta-onda 5.6s ease-in-out 2700ms infinite;
}
.cta-panel.visible .cta-cinta path:nth-child(3) {
  --amp: 9px;
  animation: cta-cinta-entra 900ms var(--ease) 460ms both,
             cinta-onda 7.5s ease-in-out 2000ms infinite;
}
@media (max-width: 1100px) {
  /* debajo de 1100 no entra al lado del texto sin pisarlo: cierra el bloque.
     En el DOM va antes del texto, asi que se reordena con flex. */
  .cta-panel { display: flex; flex-direction: column; }
  .cta-cinta {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    width: 118%;
    max-width: none;
    margin: 0 0 -1px -18%;
  }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  padding: 96px 0 0;
  font-size: 0.95rem;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--borde-navy);
}
.footer-logo a { display: inline-block; margin-bottom: 16px; }
.footer-logo .marca-svg { fill: var(--blanco); transition: fill 240ms var(--ease); }
.footer-logo a:hover .marca-svg { fill: var(--celeste); }
.footer h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--blanco);
  margin-bottom: 18px;
}
.footer li { margin-bottom: 13px; }
.footer a { color: rgba(255, 255, 255, 0.75); transition: color 150ms ease; }
.footer a:hover { color: var(--blanco); }
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 34px;
  padding-bottom: 44px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-marca {
  margin-top: 0;
  pointer-events: none;   /* solo las letras reciben el mouse, ver .letra */
}
.footer-eme {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(30%);
}
.footer-eme .letra {
  fill: rgba(255, 255, 255, 0.06);
  pointer-events: auto;
  cursor: default;
  transition: fill 260ms var(--ease);
}
.footer-eme .letra:hover { fill: var(--celeste); }

/* Logos con hover: el del header vira a ambar, el del pie a celeste */

/* ---------- WhatsApp flotante ---------- */
.whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(21, 31, 66, 0.22);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 300ms ease, transform 400ms var(--ease);
}
.whatsapp.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.whatsapp svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- Animación de entrada ---------- */
.aparece {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 600ms var(--ease);
}
.aparece.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  .revelar .linea > span { transform: none; transition: none; }
  .intro .hero { min-height: 0; }
  .hero { transition: none; }
  .hero-inner > *,
  .cinta path,
  .hero-cinta path,
  .cta-cinta path,
  .cta-panel.visible .cta-cinta path,
  .hero .entorno polygon,
  .hero .entorno path,
  .hero-pagina .entorno polygon { animation: none; }
  .marquee-fila { animation: none; }
  .marquee { overflow-x: auto; }
  .entorno { will-change: auto; transform: none !important; }
  .whatsapp { opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .timeline-linea { display: none; }
  .timeline-item::before { background: var(--naranja); }
  .timeline-item:nth-child(even)::before { background: var(--azul); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .marquee-grupo, .vid-grupo { transform: none; }
  .boton { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* la cinta pasa a banda al pie: el hero le reserva el alto exacto */
  .hero-inner { padding-bottom: calc(40vw + 36px); }
  .indicadores { grid-template-columns: repeat(2, 1fr); }
  .tarjetas-color { grid-template-columns: 1fr; }
  .novedades { grid-template-columns: 1fr; }
  .grid-logos { grid-template-columns: repeat(3, 1fr); }
  .oficinas { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .entorno { display: none; }
}

@media (max-width: 640px) {
  .seccion { padding: 64px 0; }
  .hero-inner { padding: calc(var(--alto-header) + 56px) 0 calc(40vw + 36px); }
  .hero-pagina .hero-inner { padding: calc(var(--alto-header) + 44px) 0 72px; }
  .grid-logos { grid-template-columns: repeat(2, 1fr); }
  .indicadores { grid-template-columns: 1fr 1fr; gap: 12px; }
  .indicador { padding: 20px 18px; }
  .indicador .cifra { font-size: 2.2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .marquee .logo-item { width: 150px; height: 100px; }

}

/* ---------- Página 404 ---------- */
.error-404 { min-height: clamp(460px, 62vh, 620px); }
.error-404 .hero-inner { max-width: 620px; }
.error-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.error-lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.error-lista a { color: rgba(255, 255, 255, 0.86); font-size: 0.98rem; }
.error-lista a:hover { color: var(--blanco); }
    /* ---------- El mecanismo ---------- */
    .mecanismo { padding: 100px 0; }
    /* Cuatro tarjetas en fila. La que recibe el mouse se ensancha y abre su
       texto; las otras se corren. El alto es fijo, asi el parrafo se abre en el
       hueco que ya existe y la fila no da un salto en cada hover. */
    .pasos { display: flex; gap: 20px; align-items: stretch; }
    .paso {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      border-radius: var(--radio);
      padding: 30px 26px 26px;
      min-height: 420px;
      transition: flex-grow 520ms var(--ease);
    }
    .paso-num {
      font-family: var(--display);
      font-weight: 500;
      font-size: 2.4rem;
      line-height: 1;
      opacity: 0.42;
    }
    .paso h3 { font-size: 1.45rem; margin-top: 16px; line-height: 1.15; }

    /* El bloque de texto solo aparece: entra con fade y nada mas. Ocupa alto
       cero mientras esta oculto para no estirar la tarjeta, y ese cambio de
       alto no se anima: pasa mientras el texto todavia es transparente, asi
       que no se ve. */
    .paso-texto { height: 0; overflow: hidden; }
    .paso-texto > p {
      margin-top: 14px;
      font-size: 0.95rem;
      opacity: 0;
      transition: opacity 340ms var(--ease);
    }

    @media (hover: hover) {
      .pasos:hover .paso { flex-grow: 0.9; }
      .pasos .paso:hover { flex-grow: 1.8; }
      .paso:hover .paso-texto { height: auto; }
      .paso:hover .paso-texto > p { opacity: 1; transition-delay: 120ms; }
    }
    /* Sin mouse no hay hover: el texto no puede quedar inalcanzable. */
    @media (hover: none) {
      .paso-texto { height: auto; }
      .paso-texto > p { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .paso { transition: none; }
      .paso-texto { height: auto; }
      .paso-texto > p { opacity: 1; transition: none; }
    }
    /* La cifra queda al pie: alineadas entre tarjetas aunque el texto no mida igual. */
    .paso-cifra {
      margin-top: auto;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .paso-cifra .n { font-family: var(--display); font-weight: 500; font-size: 2.2rem; line-height: 1; }
    .paso-cifra .t { font-size: 0.88rem; }

    /* El global de encabezados pisa la herencia: el color del h3 va explicito
       o sale navy en las cuatro, y sobre navy no se ve. */
    .paso h3 { color: #fff; }

    .paso-azul  { background: var(--azul);  color: #fff; }
    .paso-navy  { background: var(--navy);  color: #fff; }
    .paso-ambar { background: var(--ambar); color: #fff; }
    .paso-naranja { background: var(--naranja); color: #fff; }

    .paso p { color: rgba(255,255,255,0.86); }
    .paso-azul .paso-cifra, .paso-navy .paso-cifra { border-top: 1px solid rgba(255,255,255,0.22); }
    .paso-cifra .n { color: #fff; }
    .paso-cifra .t { color: rgba(255,255,255,0.74); }

    .paso-ambar .paso-cifra, .paso-naranja .paso-cifra { border-top: 1px solid rgba(255,255,255,0.3); }

    .destacada { border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; }
    .destacada-logo { background: #fff; margin: 12px 12px 0; border-radius: 14px; height: 170px; display: flex; align-items: center; justify-content: center; padding: 22px; }
    .destacada-logo img { max-height: 100%; max-width: 78%; width: auto; object-fit: contain; }
    .destacada-pie { padding: 20px 22px 24px; }
    .destacada-pie p { margin-top: 6px; font-size: 0.95rem; }

    /* La banda navy cierra la seccion: sin esto queda una franja crema suelta
       entre ella y el bloque de cobertura, que tambien es navy. */

    /* La cinta de logos cierra la seccion sobre navy, empalmando con cobertura */
    /* Cinta de logos justo debajo del hero: sin tarjetas, los logos apoyados
       sobre la banda. Fondo blanco porque los archivos son JPG con fondo
       blanco y sobre crema se recortarian como rectangulos. */
    .marcas-banda {
      background: var(--blanco);
      border-bottom: 1px solid var(--borde);
      padding: 26px 0;
    }
    .marcas-banda .marquee { margin: 0; }
    .marcas-banda .logo-item {
      width: 190px;
      height: 74px;
      padding: 0 24px;
      background: none;
      border: none;
      border-radius: 0;
    }
    .marcas-banda .logo-item:hover { transform: none; box-shadow: none; }
    .marcas-banda .logo-item img { max-width: 100%; max-height: 100%; }

    @media (max-width: 640px) {
      .marcas-banda { padding: 18px 0; }
      .marcas-banda .logo-item { width: 140px; height: 56px; padding: 0 16px; }
    }

    /* ---------- Vidriera de productos ---------- */
    /* Fila de packshots que corre sola y sin fin, con la M del KV repetida de
       marca de agua. Solo van las marcas con packshot propio; el resto vive en
       la cinta de logos. */
    .vidriera {
      position: relative;
      overflow: hidden;
      padding: 26px 0 70px;
      --vid-aire: clamp(96px, 11vw, 210px);
    }
    /* La banda celeste termina donde termina la M: sin esto la seccion sumaba
       su propio padding abajo y la M quedaba flotando sobre un vacio. */
    .seccion-marcas { padding-bottom: 0; }

    /* Una sola M del isotipo, a sangre por abajo: el pie sale de la banda y se
       recorta contra su borde, como la usa el manual. El sobrante de abajo es
       igual a lo que crece de mas (135% - 100%), asi el tope queda al ras
       arriba y el corte pasa solo abajo. */
    .vidriera-eme {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      height: 135%;
      bottom: -35%;
      width: auto;
      max-width: 96%;
      fill: rgba(255, 255, 255, 0.42);
      pointer-events: none;
    }

    /* Scroll real y no animacion de CSS: una animacion no se puede arrastrar.
       El avance automatico y el bucle los maneja el JS moviendo scrollLeft.
       Tres grupos identicos: con dos, el bucle se rompe si el visor llega a ser
       mas ancho que un grupo (pantallas muy anchas). */
    .vid-visor {
      position: relative;
      z-index: 1;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      cursor: grab;
      user-select: none;
      overscroll-behavior-x: contain;
    }
    .vid-visor::-webkit-scrollbar { display: none; }
    .vid-visor.arrastrando { cursor: grabbing; }
    /* Aire al pie para la sombra de los productos: baja 26px y difumina 34, y
       el visor recorta en vertical (overflow-x auto obliga a ello). */
    .vid-pista { display: flex; width: max-content; padding-bottom: 26px; }
    .vid-item img { -webkit-user-drag: none; user-drag: none; }
    .vid-grupo {
      display: flex;
      transform: skewX(calc(var(--sesgo, 0) * 1deg));
      align-items: flex-end;
      gap: var(--vid-aire);
      padding-right: var(--vid-aire);
    }

    /* Controles al pie del carrusel: flechas a los costados del boton. */
    .vid-control {
      position: relative;
      z-index: 2;
      margin-top: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }
    .vid-flecha {
      width: 48px;
      height: 48px;
      flex: none;
      border: none;
      border-radius: 50%;
      background: var(--blanco);
      color: var(--navy);
      font-family: var(--display);
      font-size: 1.6rem;
      line-height: 1;
      padding: 0 0 4px;
      cursor: pointer;
      transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--ease);
    }
    .vid-flecha:hover { background: var(--azul); color: var(--blanco); }
    .vid-flecha:active { transform: scale(0.94); }

    .vid-item { flex: none; text-align: center; }
    /* --alto respeta el tamano real del producto: un pack de pilas no puede
       medir lo mismo que una botella de vino. */
    .vid-item img {
      height: calc(clamp(210px, 27.5vw, 400px) * var(--alto, 1));
      width: auto;
      filter: drop-shadow(0 26px 34px rgba(21,31,66,0.22));
      transition: transform 400ms var(--ease);
    }
    .vid-item:hover img { transform: translateY(-10px); }
    .vid-item figcaption {
      margin-top: 22px;
      font-family: var(--display);
      font-weight: 500;
      font-size: 1rem;
      color: var(--navy);
      opacity: 0;
      transition: opacity 260ms var(--ease);
    }
    .vid-item:hover figcaption { opacity: 1; }

    /* Sin mouse no hay hover: el nombre no puede quedar inalcanzable. */
    @media (hover: none) {
      .vid-item figcaption { opacity: 1; }
    }
    /* Sin animacion, lo que queda fuera del encuadre seria inalcanzable: se
       recorre a mano y sobra el grupo duplicado, que solo existe para el bucle. */
    /* Sin animacion queda el arrastre y el scroll a mano, que siguen andando;
       sobran los grupos repetidos. */
    @media (prefers-reduced-motion: reduce) {
      .vid-grupo[aria-hidden] { display: none; }
      .vid-item figcaption { opacity: 1; }
    }
    @media (max-width: 700px) {
      .vidriera-eme { height: 122%; bottom: -22%; }
    }

    /* ---------- Teaser de cobertura ---------- */
    /* El mapa manda: ocupa la seccion entera anclado a la derecha, y el texto
       va como capa arriba a la izquierda, sobre el navy libre. */
    .cobertura { background: var(--navy); position: relative; overflow: hidden; }
    .cobertura-texto {
      position: relative;
      z-index: 2;
      padding: clamp(76px, 8vw, 124px) 0;
      min-height: clamp(600px, 84vh, 900px);
      /* Ocupa toda la seccion aunque el texto mida 430px: si recibiera el mouse
         taparia el mapa entero y ningun departamento responderia. */
      pointer-events: none;
    }
    .cobertura-bloque { max-width: 430px; pointer-events: auto; }
    .cobertura h2 { color: #fff; max-width: 12em; }
    .cobertura p { color: rgba(255,255,255,0.8); margin-top: 12px; max-width: 30em; }
    .cobertura .pill { color: #fff; border-color: rgba(255,255,255,0.55); }

    .cobertura-datos {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
      margin-top: 38px; padding-top: 30px;
      border-top: 1px solid rgba(255,255,255,0.2);
    }
    .cobertura-datos .n {
      display: block; font-family: var(--display); font-weight: 500;
      font-size: clamp(1.7rem, 2.3vw, 2.3rem); line-height: 1; color: var(--celeste);
    }
    .cobertura-datos .t {
      display: block; margin-top: 7px; font-size: 0.9rem; line-height: 1.4;
      color: rgba(255,255,255,0.72);
    }
    .mini-mapa {
      position: absolute;
      inset: 0;
      display: grid;
      align-items: center;
      justify-items: end;
      /* La izquierda queda reservada para el texto: asi el mapa se corre a la
         izquierda todo lo que puede sin llegar a invadirlo en ningun ancho. */
      padding-left: clamp(0px, 45vw, 580px);
      padding-right: clamp(24px, 12vw, 215px);
      pointer-events: none;
    }
    /* El contenedor cubre la seccion entera y taparia el boton del texto: no
       recibe el mouse, solo las siluetas (ver .mini mas abajo). */
    /* Limitado por alto y no por ancho: el mapa es casi cuadrado y por ancho
       invadiria la columna del texto. */
    .mini-mapa svg { height: 92%; width: auto; max-width: 100%; }

    /* Departamentos al contorno, como la referencia: el relleno casi no pesa y
       lo que resalta es Asuncion. */
    .mini {
      fill: rgba(153,204,255,0.09);
      stroke: rgba(153,204,255,0.32);
      stroke-width: 3;
      opacity: 0;
      transform: scale(0.95);
      transform-origin: 50% 50%;
      transform-box: fill-box;
    }
    .mini.hub { fill: var(--naranja); stroke: none; }

    /* Se enciende al pasar el mouse: es lo que invita a recorrer el mapa. */
    .mini {
      pointer-events: auto;
      cursor: pointer;
      transition: fill 200ms ease, stroke 200ms ease;
    }
    .mini:hover {
      fill: rgba(153,204,255,0.55);
      stroke: var(--celeste);
    }
    .mini.hub:hover { fill: var(--ambar); }

    .mapa-tip {
      position: absolute;
      z-index: 3;
      pointer-events: none;
      transform: translate(-50%, -118%);
      background: var(--celeste);
      color: var(--navy);
      font-family: var(--display);
      font-weight: 500;
      font-size: 0.85rem;
      line-height: 1.25;
      padding: 9px 15px;
      border-radius: 14px;
      white-space: nowrap;
      text-align: left;
      opacity: 0;
      transition: opacity 170ms ease;
    }
    .mapa-tip.visible { opacity: 1; }
    .mapa-tip.local { background: var(--naranja); color: #fff; padding: 9px 9px 12px; }
    /* La foto del local encabeza la etiqueta. Si el archivo no existe, el JS
       quita la imagen y la etiqueta queda como si nunca la hubiera tenido. */
    .mapa-tip img {
      display: block;
      width: 232px;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      border-radius: 9px;
      margin-bottom: 9px;
    }
    .mapa-tip.local b, .mapa-tip.local .dir, .mapa-tip.local .abrir { padding: 0 6px; }
    .mapa-tip b { display: block; font-weight: 400; }
    .mapa-tip .dir, .mapa-tip .abrir { font-family: var(--sans); font-size: 0.72rem; }
    .mapa-tip .dir { opacity: 0.9; }
    .mapa-tip .abrir { display: block; margin-top: 4px; opacity: 0.85; }

    /* Highlight por turnos: recorre departamentos al azar para que se note que
       el mapa responde, sin esperar a que alguien pase el mouse. */
    .mini.turno { fill: rgba(153,204,255,0.42); stroke: var(--celeste); }
    .mini.hub.turno { fill: var(--ambar); }
    .mini[data-local] { cursor: pointer; }
    .encendido .mini { animation: brota-mini 560ms var(--ease) var(--r, 0ms) both; }
    @keyframes brota-mini { to { opacity: 1; transform: scale(1); } }

    .mini-pin { fill: var(--celeste); opacity: 0; }
    .mini-aro { fill: none; stroke: var(--celeste); stroke-width: 4; transform-origin: center; transform-box: fill-box; opacity: 0; }
    .encendido .mini-pin { animation: pin-mini 420ms ease 1050ms both; }
    .encendido .mini-aro { animation: latido-mini 2.8s ease-out 1.5s infinite; }
    @keyframes pin-mini { to { opacity: 1; } }
    @keyframes latido-mini {
      0%   { transform: scale(0.5); opacity: 0.85; }
      70%, 100% { transform: scale(2.6); opacity: 0; }
    }

    /* ---------- Novedades editoriales ---------- */
    /* Celeste es fondo claro: aca el texto va en navy (9.52:1). En blanco
       quedaria en 1.69:1. */
    .seccion-celeste { background: var(--celeste); }
    .seccion-celeste h2 { color: var(--navy); }
    .seccion-celeste .seccion-intro p { color: rgba(21,31,66,0.78); }
    .seccion-celeste .pill { color: var(--navy); border-color: rgba(21,31,66,0.45); }

    .novedades-editorial { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
    .novedades-editorial .col { display: grid; gap: 20px; }
    /* Sin velos ni degradados: la foto va limpia y el texto en un bloque de
       color plano al lado, como los mosaicos del manual. */
    .nov {
      border-radius: var(--radio);
      overflow: hidden;
      display: flex;
      min-height: 210px;
      text-decoration: none;
      /* Sin transition propia: pisaba la de .aparece y la tarjeta entraba con la
         opacidad de golpe, solo deslizandose. La entrada la maneja .aparece. */
    }
    .nov.grande { min-height: 480px; flex-direction: column; }
    a.nov:hover { transform: translateY(-4px); }

    /* La tarjeta entra completa con el fade de .aparece y nada mas: adentro no
       se mueve nada, ni la foto ni el texto. */
    .nov-foto { position: relative; flex: none; overflow: hidden; }
    .nov-foto img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    /* Las dos notas de reconocimientos son la misma ceremonia y la misma toma:
       se encuadran distinto para que no lean como una foto repetida. */
    .nov-foto .foco-pantalla { object-position: center 22%; }
    .nov-foto .foco-grupo { object-position: center 72%; transform: scale(1.16); }

    .nov.grande .nov-foto { height: 51%; }
    .nov:not(.grande) .nov-foto { width: 44%; }

    .nov-cuerpo {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 26px 28px;
    }
    .nov .etiqueta { font-size: 0.82rem; font-weight: 700; margin-bottom: auto; }
    .nov h3 { font-size: 1.28rem; margin-top: 16px; }
    .nov p { margin-top: 10px; font-size: 0.95rem; }

    .nov-leer {
      display: inline-flex; align-items: center; gap: 7px;
      align-self: flex-start;
      margin-top: 20px;
      font-family: var(--display); font-weight: 500; font-size: 0.93rem;
      color: #fff;
      border-bottom: 1px solid rgba(255,255,255,0.45);
      padding-bottom: 3px;
      transition: border-color 200ms ease, gap 250ms var(--ease);
    }
    a.nov:hover .nov-leer { border-bottom-color: #fff; gap: 12px; }
    .nov-leer i { font-style: normal; }

    .nov.tarjeta-azul .nov-cuerpo { background: var(--azul); }
    .nov.tarjeta-azul .etiqueta { color: var(--celeste); }
    .nov.tarjeta-azul h3 { color: #fff; }
    .nov.tarjeta-azul p { color: rgba(255,255,255,0.84); }

    .nov.tarjeta-navy .nov-cuerpo { background: var(--navy); }
    .nov.tarjeta-navy .etiqueta { color: var(--celeste); }
    .nov.tarjeta-navy h3 { color: #fff; }

    .nov.tarjeta-naranja .nov-cuerpo { background: var(--naranja); }
    .nov.tarjeta-naranja .etiqueta { color: #fff; }
    .nov.tarjeta-naranja h3 { color: #fff; }

    @media (max-width: 700px) {
      .nov:not(.grande) { flex-direction: column; min-height: 0; }
      .nov:not(.grande) .nov-foto { width: 100%; height: 180px; }
    }
    .nov.grande h3 { font-size: 2rem; max-width: 12em; }
    .nov p { margin-top: 10px; font-size: 0.95rem; }

    .nov-leer {
      display: inline-flex; align-items: center; gap: 7px;
      align-self: flex-start;
      margin-top: 20px;
      font-family: var(--display); font-weight: 500; font-size: 0.93rem;
      color: #fff;
      border-bottom: 1px solid rgba(255,255,255,0.45);
      padding-bottom: 3px;
      transition: border-color 200ms ease, gap 250ms var(--ease);
    }
    a.nov:hover .nov-leer { border-bottom-color: #fff; gap: 12px; }
    .nov-leer i { font-style: normal; }

    @media (prefers-reduced-motion: reduce) {
      .encendido .mini, .encendido .mini-pin, .encendido .mini-aro { animation: none; }
      .mini, .mini-pin { opacity: 1; transform: none; }
      .mini-aro { display: none; }
    }

    @media (max-width: 980px) {
      .novedades-editorial { grid-template-columns: 1fr; gap: 34px; }
      /* Cuatro no entran: pasan a dos por fila, ya abiertas. */
      .pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .paso { min-height: 0; }
      .paso-texto { grid-template-rows: 1fr; }
      .paso-texto > p { opacity: 1; }
      /* Sin ancho para dos columnas, el mapa baja y deja de ser capa. */
      .cobertura-texto { min-height: 0; padding: 64px 0 24px; }
      .cobertura-bloque { max-width: none; }
      .mini-mapa { position: static; padding: 0 0 64px; justify-items: center; }
      .mini-mapa svg { height: auto; width: 100%; max-width: 420px; }
      .cobertura-datos { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 620px) {
      .pasos { display: grid; grid-template-columns: 1fr; }
      .paso { padding: 26px 22px 22px; }
    }
  

/* ---------- Distribucion: mapa ---------- */

    /* --- Prototipo: Baloo siempre en Regular --- */


    /* Las tarjetas son blancas aunque la sección sea navy */
    .seccion-naranja .oficina h3 { color: var(--navy); }

    /* --- Bloque del mapa --- */
    .mapa-bloque { padding: calc(var(--alto-header) + 56px) 0 80px; }
    .mapa-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
      gap: 56px;
      align-items: center;
    }
    .mapa-texto h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
    .mapa-texto p { margin-top: 16px; color: var(--texto-suave); font-size: 1.06rem; max-width: 34em; }

    .cifras-linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
    .cifras-linea .n { font-family: var(--display); font-size: clamp(1.8rem, 2.3vw, 2.3rem); line-height: 1; color: var(--azul); white-space: nowrap; }
    .cifras-linea .t { font-size: 0.9rem; color: var(--texto-suave); margin-top: 6px; max-width: 12em; }

    .mapa-lienzo { position: relative; }
  .mapa-tip {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    transform: translate(-50%, -118%);
    background: var(--celeste);
    color: var(--navy);
    font-family: var(--display);
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.25;
    padding: 9px 15px;
    border-radius: 14px;
    white-space: nowrap;
    text-align: left;
    opacity: 0;
    transition: opacity 170ms ease;
  }
  .mapa-tip.visible { opacity: 1; }
  .mapa-tip.local { background: var(--naranja); color: #fff; padding: 9px 9px 12px; }
  /* La foto del local encabeza la etiqueta. Si el archivo no existe, el JS
     quita la imagen y la etiqueta queda como si nunca la hubiera tenido. */
  .mapa-tip img {
    display: block;
    width: 232px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 9px;
    margin-bottom: 9px;
  }
  .mapa-tip.local b, .mapa-tip.local .dir, .mapa-tip.local .abrir { padding: 0 6px; }
  .mapa-tip b { display: block; font-weight: 400; }
  .mapa-tip .dir, .mapa-tip .abrir { font-family: var(--sans); font-size: 0.72rem; }
  .mapa-tip .dir { opacity: 0.9; }
  .mapa-tip .abrir { display: block; margin-top: 4px; opacity: 0.85; }

    .mapa-lienzo svg { width: 100%; height: auto; overflow: visible; }

    .depto {
      fill: var(--celeste);
      stroke: #fff;
      stroke-width: 2.5;
      stroke-linejoin: round;
      opacity: 0;
      transform: scale(0.94);
      transform-origin: 50% 50%;
      transform-box: fill-box;
      transition: fill 200ms ease;
    }
    .encendido .depto { animation: brota 620ms var(--ease, cubic-bezier(0.22,1,0.36,1)) var(--r) both; }
    .depto.hub { fill: var(--naranja); }
    .depto:hover { fill: var(--azul); cursor: pointer; }
    .depto[data-local] { cursor: pointer; }
    @keyframes brota { to { opacity: 1; transform: scale(1); } }

    .pin circle.punto { fill: var(--navy); }
    .pin circle.aro { fill: none; stroke: var(--navy); stroke-width: 3; transform-origin: center; transform-box: fill-box; }
    .encendido .pin { animation: aparece-pin 500ms ease 1050ms both; }
    .encendido .pin circle.aro { animation: latido 2.6s ease-out 1.5s infinite; }
    @keyframes aparece-pin { from { opacity: 0; } to { opacity: 1; } }
    @keyframes latido { 0% { transform: scale(0.4); opacity: 0.9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }

    .etiqueta-pin {
      font-family: var(--sans); font-size: 30px; fill: var(--navy); font-weight: 700;
      paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round;
    }
    .etiqueta-pin tspan.rol { font-weight: 400; fill: var(--texto-suave); font-size: 24px; }
    @media (max-width: 900px) {
      .mapa-grid { grid-template-columns: 1fr; gap: 36px; }
      .mapa-lienzo { max-width: 460px; margin: 0 auto; }
      .cifras-linea { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .encendido .depto, .encendido .pin, .encendido .pin circle.aro { animation: none; }
      .depto { opacity: 1; transform: none; }
    }
  

/* ---------- Vacancias ---------- */
.vacancias-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vacancia { display: flex; flex-direction: column; background: var(--navy); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--blanco); transition: transform 300ms var(--ease); }
.vacancia:hover { transform: translateY(-4px); }
.vacancia-foto { aspect-ratio: 16 / 9; overflow: hidden; }
.vacancia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vacancia-cuerpo { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vacancia-titulo { font-family: var(--display); font-size: 1.15rem; line-height: 1.25; }
.vacancia-cta { font-size: 0.9rem; font-weight: 700; margin-top: auto; color: var(--celeste); }
.vacancia-vacia { background: var(--celeste); border-radius: var(--radio); padding: 28px; color: var(--navy); font-weight: 600; }
@media (max-width: 900px) {
  .vacancias-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vacancias-grid { grid-template-columns: 1fr; }
}
</style>

/* ---------- Vacancia detalle / postulacion ---------- */
    .vacancia-detalle { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
    .vacancia-detalle .vacancia-foto { border-radius: var(--radio); overflow: hidden; }
    .vacancia-detalle .vacancia-foto img { width: 100%; height: auto; display: block; }
    .vacancia-texto p { color: var(--texto); font-size: 1.05rem; line-height: 1.7; margin-top: 16px; }
    .vacancia-texto p:first-child { margin-top: 0; }
    .vacancia-texto .vacancia-zona { color: var(--texto-suave); }
    .vacancia-texto .vacancia-zona strong { color: var(--navy); }
    .vacancia-req { margin-top: 20px; }
    .vacancia-req h3 { font-family: var(--display); font-size: 1.1rem; color: var(--navy); }
    .vacancia-req ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
    .vacancia-req li { padding-left: 26px; position: relative; color: var(--texto); }
    .vacancia-req li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); }
    .vacancia-contacto { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
    .vacancia-contacto a { color: var(--azul); font-weight: 700; text-decoration: none; }
    .vacancia-contacto a:hover { text-decoration: underline; }
    .panel-postulacion { background: var(--navy); border-radius: var(--radio); padding: 40px; color: var(--blanco); }
    .panel-postulacion h2 { font-family: var(--display); font-size: 1.6rem; color: var(--blanco); }
    .panel-postulacion .postulacion-intro { color: rgba(255, 255, 255, 0.8); margin-top: 8px; }
    .panel-postulacion .campo { margin-top: 20px; }
    .panel-postulacion .campo label { display: inline-block; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
    .panel-postulacion .campo-texto { width: 100%; border: 1px solid var(--borde-navy); background: rgba(255, 255, 255, 0.08); color: var(--blanco); border-radius: 12px; padding: 12px 14px; font-size: 1rem; font-family: var(--sans); }
    .panel-postulacion .campo-texto::placeholder { color: rgba(255, 255, 255, 0.5); }
    .panel-postulacion .campo-opciones { display: flex; gap: 24px; align-items: center; }
    .panel-postulacion .campo-opciones label { margin: 0; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
    .panel-postulacion .campo-opciones input[type="radio"] { accent-color: var(--naranja); width: 16px; height: 16px; }
    .panel-postulacion .campo-archivo input[type="file"] { color: var(--blanco); font-family: var(--sans); }
    .panel-postulacion .acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .panel-postulacion .boton-blanco { text-align: center; }
    .volver { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; color: var(--azul); font-weight: 700; text-decoration: none; }
    .volver:hover { text-decoration: underline; }
    @media (max-width: 820px) {
        .vacancia-detalle { grid-template-columns: 1fr; gap: 28px; }
        .panel-postulacion { padding: 28px; }
    }
</style>