/* Concepto: cada punto es una persona. La escena fija abre con la tesis (medimos e impulsamos) y cuenta:
   miles de personas → todas «participaron», ¿cuántas cambiaron? → incertidumbre → medimos y ayudamos (mapa)
   → primero medimos (dos barras iguales) → mejoramos y volvimos a medir (la barra crece) → de la intención a la acción. */
:root {
  --fondo: #061A1A;
  --fondo-2: #0B2626;
  --papel: #F3F1EA;
  --tinta: #F3F1EA;
  --tinta-2: rgba(243, 241, 234, 0.64);
  --tinta-3: rgba(243, 241, 234, 0.38);
  --tinta-oscura: #061A1A;
  --tinta-oscura-2: rgba(6, 26, 26, 0.64);
  --coral: #F06A5E;
  --coral-claro: #FFB8AD;
  --coral-oscuro: #B64438;
  --agua: #9FDBD4;
  --linea: rgba(243, 241, 234, 0.14);
  --linea-oscura: rgba(6, 26, 26, 0.14);
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --texto: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --ancho: 1180px;
  --gutter-izq: max(16px, env(safe-area-inset-left, 0px));
  --gutter-der: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--fondo); }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; text-wrap: balance; letter-spacing: -0.015em; }
.inner { max-width: var(--ancho); margin: 0 auto; padding-left: var(--gutter-izq); padding-right: var(--gutter-der); }
.ojo { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--coral-claro); }
.num { font-family: var(--display); font-variation-settings: 'opsz' 144; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 0.9; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
[id] { scroll-margin-top: 84px; } /* los saltos a una sección no quedan bajo la barra fija */
.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--coral); color: var(--tinta-oscura); padding: 10px 16px; border-radius: 100px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.barra { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; padding-left: var(--gutter-izq); padding-right: var(--gutter-der); background: linear-gradient(rgba(6, 26, 26, 0.82), rgba(6, 26, 26, 0)); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: 0.04em; font-size: 14px; min-height: 44px; }
.logo-marca { width: 28px; height: 28px; border-radius: 50%; display: block; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 100px; border: 1px solid var(--linea); text-decoration: none; font-weight: 700; font-size: 15px; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; will-change: transform; }
.boton:hover { border-color: var(--tinta); }
.boton-coral { background: var(--coral); border-color: var(--coral); color: var(--tinta-oscura); }
.boton-coral:hover { background: var(--coral-claro); border-color: var(--coral-claro); }
.barra .boton { min-height: 42px; padding: 0 20px; font-size: 14px; }
.barra-der { display: flex; align-items: center; gap: 10px; }
/* Menú de secciones: un <details> (funciona sin JavaScript) con tres rayas que se vuelven una equis al abrir. */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: rgba(6, 26, 26, 0.55); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: border-color 0.25s ease; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { border-color: var(--tinta); }
.menu summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform 0.25s ease, opacity 0.25s ease; }
.menu[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[open] summary span:nth-child(2) { opacity: 0; }
.menu[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu ul { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; margin: 0; padding: 10px; list-style: none; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.menu li a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 10px; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: 15px; }
.menu li a:hover, .menu li a:focus-visible { background: rgba(243, 241, 234, 0.07); color: var(--coral-claro); }
.menu li a .n { font-family: var(--display); font-weight: 300; font-size: 18px; color: var(--coral-claro); width: 1.4ch; }

/* Escena fija */
.historia { position: relative; height: 580vh; }
.escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.capa { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; } /* cada capa es su propio contexto: su velo (::before) queda entre el lienzo y el texto */
.capa-arriba { display: flex; align-items: flex-start; padding-top: 13vh; }
.capa-arriba .bloque { position: relative; width: fit-content; max-width: 100%; }
.capa-arriba .bloque > * + * { margin-top: 14px; }
/* Velo: un degradado del color de fondo detrás de cada texto, para que se lea sobre los puntos (sigue la opacidad de su capa). */
.capa-arriba .bloque::before, .cuadro-texto::before, .capa-cierre .inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.capa-arriba .bloque::before { inset: -44px -18% -40px -12%; background: radial-gradient(ellipse 62% 78% at 42% 52%, rgba(6, 26, 26, 0.94) 0%, rgba(6, 26, 26, 0.62) 50%, rgba(6, 26, 26, 0) 100%); }
.cuadro-texto::before { inset: -40px -16% -32px -16%; background: radial-gradient(ellipse 58% 74% at 50% 54%, rgba(6, 26, 26, 0.94) 0%, rgba(6, 26, 26, 0.62) 50%, rgba(6, 26, 26, 0) 100%); }
.capa-cierre .inner { position: relative; }
.capa-cierre .inner::before { inset: -40px -10% -40px -10%; background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(6, 26, 26, 0.8) 0%, rgba(6, 26, 26, 0.4) 50%, rgba(6, 26, 26, 0) 100%); }
.capa-arriba h2 { font-size: clamp(30px, 4.6vw, 60px); max-width: 15ch; }
.capa-arriba p { color: var(--tinta-2); max-width: 44ch; font-size: clamp(15px, 1.3vw, 18px); }
.capa-titulo { display: flex; align-items: flex-end; padding-bottom: 12vh; opacity: 1; z-index: 1; }
.capa-titulo .inner { position: relative; }
.capa-titulo .inner::before { content: ""; position: absolute; inset: -48px -10% -40px -8%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 62% 95% at 26% 58%, rgba(6, 26, 26, 0.9) 0%, rgba(6, 26, 26, 0.5) 50%, rgba(6, 26, 26, 0) 100%); }
.capa-titulo .ojo { font-size: 13px; }
.capa-titulo h1 { font-size: clamp(40px, 7vw, 100px); max-width: 15ch; }
.capa-titulo h1 em { font-style: italic; color: var(--coral-claro); }
.capa-titulo .subt { margin-top: 14px; font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.4vw, 32px); color: var(--coral-claro); }
.capa-titulo p { margin-top: 20px; max-width: 44ch; color: rgba(243, 241, 234, 0.86); font-size: clamp(16px, 1.5vw, 20px); }
.capa-titulo p.subt { margin-top: 14px; max-width: none; }
.cambia { display: grid; }
.cambia > div { grid-area: 1 / 1; }
.flecha-baja { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); color: var(--tinta-3); animation: vaiven 2.4s ease-in-out infinite; z-index: 2; }
.flecha-baja svg { display: block; width: 22px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
@keyframes vaiven { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }
.capa-abajo { display: flex; align-items: flex-end; padding-bottom: 7vh; }
.cuadro-texto { position: relative; width: min(68vw, 560px); margin: 0 auto; text-align: center; }
.cuadro-texto .ojo { display: block; margin-bottom: 10px; }
.cuadro-texto h2 { font-size: clamp(22px, 2.6vw, 34px); }
.cuadro-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; align-items: end; }
.cuadro-cifras .num { font-size: clamp(38px, 6.4vw, 84px); }
.cuadro-cifras small { display: block; font-family: var(--texto); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-3); margin-top: 8px; }
.cuadro-cifras .coral .num { color: var(--coral-claro); }
.cuadro-cifras .duda .num { color: var(--tinta-3); }
.capa-cierre { display: flex; align-items: center; justify-content: center; text-align: center; }
.capa-cierre h2 { font-size: clamp(40px, 8vw, 112px); }
.capa-cierre h2 em { font-style: italic; color: var(--coral-claro); }
.capa-cierre p { margin-top: 18px; color: var(--tinta-2); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
.pct { display: inline; font-family: var(--texto); font-size: 0.4em; letter-spacing: 0; text-transform: none; color: inherit; }

/* Banda de cifras bajo la escena (salen de sitio.json y del número de países) */
.cifras-banda { padding-block: 32px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cifras { display: flex; flex-wrap: wrap; gap: 28px 72px; margin: 0; }
.cifras > div { max-width: 280px; }
.cifras dt { font-family: var(--display); font-variation-settings: 'opsz' 144; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 0.9; font-size: clamp(40px, 5vw, 56px); }
.cifras dd { margin: 10px 0 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-3); }

/* Secciones */
.seccion { position: relative; padding-block: clamp(96px, 14vw, 180px); overflow: hidden; }
.fantasma { position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); z-index: 0; pointer-events: none; font-family: var(--display); font-weight: 300; font-size: clamp(240px, 42vw, 640px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--linea); will-change: transform; }
.seccion .inner { position: relative; z-index: 1; }
.cabecera h2 { font-size: clamp(34px, 5vw, 72px); max-width: 15ch; }
.cabecera h2 em { font-style: italic; color: var(--coral-claro); }
.cabecera p { margin-top: 18px; max-width: 56ch; color: var(--tinta-2); font-size: clamp(16px, 1.4vw, 19px); }

.problema-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 56px; background: var(--linea); border: 1px solid var(--linea); }
.problema-rejilla article { background: var(--fondo); padding: 32px 28px 36px; min-width: 0; }
.problema-rejilla .n { font-family: var(--display); font-size: 34px; font-weight: 300; color: var(--coral-claro); }
.problema-rejilla h3 { font-size: 24px; margin-top: 18px; }
.problema-rejilla p { color: var(--tinta-2); margin-top: 10px; font-size: 15px; }
.problema-rejilla h3 em { font-style: italic; color: var(--coral-claro); }
.problema-rejilla h3:first-child { margin-top: 0; }
.ganas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--linea); }
.ganas li { min-width: 0; }
.ganas b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.ganas span { display: block; color: var(--tinta-2); font-size: 14px; margin-top: 8px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 40px auto 0; text-align: left; }
.tres li { border-top: 1px solid var(--linea); padding-top: 14px; min-width: 0; }
.tres b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; }
.tres span { display: block; color: var(--tinta-2); font-size: 14px; margin-top: 4px; }

.quien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.quien article { border-top: 1px solid var(--linea); padding-top: 22px; min-width: 0; }
.quien h3 { font-size: 28px; }
.quien .et { margin-top: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--agua); }
.quien p { margin-top: 14px; color: var(--tinta-2); font-size: 15px; }

.pliegos { background: var(--papel); color: var(--tinta-oscura); }
.pliegos .ojo { color: var(--coral-oscuro); }
.pliegos .cabecera h2 em { color: var(--coral-oscuro); }
.pliegos .cabecera p { color: var(--tinta-oscura-2); }
.maneras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2px; margin-top: 56px; background: var(--linea-oscura); border: 1px solid var(--linea-oscura); border-bottom: 0; }
.manera { background: var(--papel); padding: 24px 30px 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.manera .n { font-family: var(--display); font-size: 30px; font-weight: 300; color: var(--coral-oscuro); }
.manera h3 { font-size: 24px; }
.manera p { flex-basis: 100%; color: var(--tinta-oscura-2); font-size: 14px; max-width: 60ch; }
.pliegos-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 56px; background: var(--linea-oscura); border: 1px solid var(--linea-oscura); }
.pliegos-rejilla.bajo-maneras { margin-top: 0; }
.pliego { background: var(--papel); padding: 36px 30px 34px; display: flex; flex-direction: column; min-width: 0; transition: background 0.35s ease, transform 0.35s ease; }
.pliego:hover { background: #FFFFFF; transform: translateY(-4px); }
.pliego .ojo { font-size: 11px; }
.pliego h3 { font-size: clamp(34px, 3.6vw, 48px); margin-top: 18px; }
.pliego .lema { color: var(--tinta-oscura-2); margin-top: 8px; font-size: 15px; }
.pliego .pregunta { margin-top: 18px; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.3; }
.pliego ul { margin-top: 20px; display: grid; gap: 10px; color: var(--tinta-oscura-2); font-size: 15px; }
.pliego li { padding-left: 18px; position: relative; }
.pliego li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.pliego .precio { margin-top: auto; padding-top: 28px; font-family: var(--display); font-size: 28px; font-weight: 300; }
.pliego .precio small { display: block; font-family: var(--texto); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-oscura-2); margin-top: 4px; }
body.sin-precios .pliego .precio { display: none; }
.pliego-destacado { background: var(--tinta-oscura); color: var(--tinta); }
.pliego-destacado:hover { background: var(--fondo-2); }
.pliego-destacado .ojo { color: var(--coral-claro); }
.pliego-destacado .lema, .pliego-destacado ul, .pliego-destacado .precio small { color: var(--tinta-2); }
.escalera { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 40px; color: var(--tinta-oscura-2); font-size: 14px; }
.escalera b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--tinta-oscura); }
.servicios { margin-top: 40px; }
.servicios .ojo { display: block; margin-bottom: 16px; color: var(--coral-oscuro); }
.servicios-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.servicios-lista li { background: #FFFFFF; border: 1px solid var(--linea-oscura); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.servicios-lista strong { display: block; font-size: 16px; }
.servicios-lista span { display: block; margin-top: 6px; font-size: 14px; color: var(--tinta-oscura-2); }

.verbos { border-top: 1px solid var(--linea); margin-top: 40px; }
.verbo { display: grid; grid-template-columns: 4ch 1fr auto; gap: 14px 24px; align-items: baseline; padding-block: 26px; border-bottom: 1px solid var(--linea); transition: padding-left 0.4s ease; }
.verbo .via { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 12px; border-radius: 100px; border: 1px solid; white-space: nowrap; align-self: center; }
.via-medir { color: var(--agua); border-color: rgba(159, 219, 212, 0.4); }
.via-mejorar { color: var(--coral-claro); border-color: rgba(240, 106, 94, 0.45); }
.nota b { color: var(--tinta); font-weight: 700; }
.verbo:hover { padding-left: 12px; }
.verbo .n { font-size: 13px; letter-spacing: 0.2em; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.verbo h3 { font-size: clamp(30px, 4.2vw, 56px); }
.verbo h3 em { font-style: italic; color: var(--coral-claro); }
.verbo p { grid-column: 2 / -1; max-width: 54ch; color: var(--tinta-2); margin-top: 6px; }
.nota { margin-top: 28px; color: var(--tinta-3); font-size: 14px; }

.casos { overflow: clip; } /* con hidden la sección sería un contenedor de desplazamiento y la cifra fija no acompañaría el scroll */
.casos-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; margin-top: 64px; align-items: start; }
.cifra-fija { position: sticky; top: 22vh; }
.cifra-fija .num { font-size: clamp(72px, 10vw, 168px); color: var(--coral-claro); transition: opacity 0.3s ease, transform 0.3s ease; }
.cifra-fija .que { margin-top: 18px; max-width: 24ch; font-size: 18px; color: var(--tinta-2); transition: opacity 0.3s ease; }
.cifra-fija.cambiando .num, .cifra-fija.cambiando .que { opacity: 0; transform: translateY(8px); }
.caso { padding: 36px 0; border-top: 1px solid var(--linea); display: grid; gap: 14px; }
.caso:last-child { border-bottom: 1px solid var(--linea); }
.caso .sector { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); }
.caso h3 { font-size: clamp(26px, 2.8vw, 36px); }
.caso p { color: var(--tinta-2); max-width: 56ch; }
.caso .num-movil { display: none; font-size: 56px; color: var(--coral-claro); }
.testimonio { max-width: 820px; margin: 72px auto 0; text-align: center; }
.testimonio p { font-family: var(--display); font-size: clamp(24px, 3vw, 36px); line-height: 1.25; }
.testimonio figcaption { margin-top: 16px; color: var(--tinta-3); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }

.donde { background: var(--fondo-2); }
.donde-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 48px; }
.donde canvas { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.contactos { display: grid; gap: 2px; }
.contacto { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 22px; background: rgba(243, 241, 234, 0.04); border: 1px solid var(--linea); transition: background 0.3s ease; }
.contacto:hover { background: rgba(243, 241, 234, 0.08); }
.contacto .ini { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 20px; background: var(--papel); color: var(--tinta-oscura); }
.contacto .ini.coral { background: var(--coral); }
.contacto .ini.vacio { background: transparent; border: 1px dashed var(--tinta-3); color: var(--tinta-3); font-family: var(--texto); font-size: 11px; font-weight: 700; }
.contacto strong { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.contacto span { display: block; color: var(--tinta-3); font-size: 13px; margin-top: 2px; }
.contacto .pais { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral-claro); }
.contacto .ini { overflow: hidden; }
.contacto .ini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contacto-der { display: grid; gap: 6px; justify-items: end; text-align: right; }
.contacto .enlace { font-size: 13px; font-weight: 700; color: var(--coral-claro); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.donde-nota { text-align: center; margin-top: 40px; color: var(--tinta-2); font-size: 14px; }
.donde-nota a { color: var(--coral-claro); }

.aliados { padding-block: 64px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); overflow: hidden; }
.cifras-banda + .aliados { border-top: 0; } /* va pegado a la banda de cifras: una sola línea entre los dos */
.aliados .ojo { text-align: center; display: block; margin-bottom: 28px; color: var(--tinta-3); }
/* Carrusel de logos: dos copias idénticas seguidas (la segunda es decorativa) para un desplazamiento continuo.
   Cada logo va en una ficha clara para que se vea sobre el fondo oscuro. */
.logos-cinta {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-pista { display: flex; width: max-content; animation: logos-desplazar 70s linear infinite; }
.logos-grupo { margin: 0; padding: 0 10px; display: flex; align-items: center; gap: 20px; }
.logos-grupo li { background: #FAFAF8; border-radius: 12px; padding: 10px 18px; display: flex; align-items: center; }
.logos-grupo img { height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block; filter: grayscale(1); opacity: .85; transition: filter 0.2s ease, opacity 0.2s ease; }
.logos-grupo li:hover img { filter: none; opacity: 1; }
@keyframes logos-desplazar { to { transform: translateX(-50%); } }
.logos-cinta:hover .logos-pista, .logos-cinta:focus-within .logos-pista { animation-play-state: paused; }

.cierre { text-align: center; }
.cierre h2 { font-size: clamp(38px, 6.4vw, 96px); max-width: 18ch; margin-inline: auto; }
.cierre h2 em { font-style: italic; color: var(--coral-claro); }
.cierre p { margin-top: 24px; color: var(--tinta-2); max-width: 48ch; margin-inline: auto; }
.cierre .boton { margin-top: 40px; min-height: 60px; padding: 0 40px; font-size: 17px; }
.cierre small { display: block; margin-top: 18px; color: var(--tinta-3); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.pie { padding-block: 32px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 13px; }
.pie .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }

html.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.js .revelar.visible { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .historia { height: 520vh; }
  .ganas { grid-template-columns: 1fr 1fr; gap: 20px; }
  .tres { grid-template-columns: 1fr; }
  .capa-titulo { padding-bottom: 16vh; }
  .capa-arriba { align-items: flex-end; padding-top: 0; padding-bottom: 7vh; }
  .capa-arriba h2 { font-size: clamp(26px, 7vw, 40px); }
  .cuadro-texto { width: min(88vw, 560px); }
  .cuadro-texto h2 { font-size: 18px; }
  .cuadro-cifras .num { font-size: 44px; }
  .problema-rejilla, .quien, .pliegos-rejilla, .maneras { grid-template-columns: 1fr; }
  .verbo { grid-template-columns: 4ch 1fr; }
  .verbo .via { grid-column: 2; justify-self: start; }
  .verbo p { grid-column: 2; }
  .casos-cuerpo { grid-template-columns: 1fr; gap: 0; }
  .cifra-fija { display: none; }
  .caso .num-movil { display: block; }
  .donde-cuerpo { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: auto 1fr; }
  .contacto-der { grid-column: 2; justify-items: start; text-align: left; }
  .logos-grupo img { height: 32px; }
  .fantasma { font-size: 52vw; right: -8vw; }
}
@media (max-width: 480px) {
  .marca-txt { display: none; } /* en pantallas angostas la marca es solo el símbolo: caben el botón y el menú */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .historia { height: auto; }
  .escena { position: relative; height: 100svh; }
  .logos-pista { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .logos-grupo { flex-wrap: wrap; justify-content: center; row-gap: 16px; }
  .logos-grupo[aria-hidden="true"] { display: none; }
  .logos-cinta { -webkit-mask-image: none; mask-image: none; }
  .logos-grupo img { transition: none; }
  .flecha-baja { animation: none; transform: translateX(-50%); }
  html.js .revelar { opacity: 1; transform: none; transition: none; }
  .fantasma { transform: translateY(-50%) !important; }
}

/* Sin JavaScript no hay escena animada: se ve la portada y sigue la página (igual que con movimiento reducido). */
@media (scripting: none) {
  .historia { height: auto; }
  .escena { position: relative; height: 100svh; }
}