/* ==========================================================================
   Amnistía Internacional Venezuela — sitio público de activismo
   CSS propio, sin frameworks. Solo se animan transform y opacity.
   ========================================================================== */

/* Tipografía de marca: Amnesty Trade Gothic.
   Su licencia (Linotype, de escritorio) no permite servirla como fuente web, así que solo se usa
   local(): quien la tenga instalada la ve; el resto ve Barlow (OFL), el sustituto más cercano.
   Si Amnistía confirma licencia web: scripts/fuentes_web.sh y añadir su url() al inicio de cada src. */
@font-face { font-family: "Amnistia Titular"; font-weight: 800; font-style: normal; font-display: swap;
  src: local("Amnesty Trade Gothic Bold Condensed No. 20"), local("AmnestyTradeGothic-BdCn20"), url("../fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Amnistia Titular"; font-weight: 600; font-style: normal; font-display: swap;
  src: local("Amnesty Trade Gothic Condensed No. 18"), local("AmnestyTradeGothic-Cn18"), url("../fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Amnistia Texto"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Amnesty Trade Gothic"), local("AmnestyTradeGothic"), url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Amnistia Texto"; font-weight: 600; font-style: normal; font-display: swap;
  src: local("Amnesty Trade Gothic Bold No. 2"), local("AmnestyTradeGothic-Bd2"), url("../fonts/barlow-600.woff2") format("woff2"); }

:root {
  /* Paleta de marca. Amarillo y negro: los de los archivos RGB oficiales del logotipo.
     Grises: los de las publicaciones oficiales de Amnistía Internacional. */
  --amarillo: #ffff00;
  --amarillo-2: #e6e600;
  --amarillo-3: #b8b800;
  --negro: #000000;
  --carbon: #16181a;
  --humo: #33373a;
  --gris-oscuro: #5a6065;
  --gris: #a8adb1;
  --papel: #f1e9de;          /* «Warm Beige» del manual de Escribe por los Derechos 2026 */
  --blanco: #ffffff;
  /* Sin rojo en el sitio: el manual de la campaña lo prohíbe para varios casos (riesgo político) */
  --f-titulo: "Amnistia Titular", "Arial Narrow", Impact, sans-serif;
  --f-texto: "Amnistia Texto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --margen: clamp(1.25rem, 4.5vw, 4.5rem);
  --ancho: 86rem;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--negro); color: var(--blanco);
  font: 400 clamp(1rem, .95rem + .25vw, 1.2rem)/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--amarillo); color: var(--negro); }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.sobre-amarillo :focus-visible, .firma :focus-visible { outline-color: var(--negro); }

.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--amarillo); color: var(--negro); padding: .6rem 1rem; font-weight: 600; transition: top .2s; }
.saltar:focus { top: 1rem; }
.contenedor { width: min(100% - var(--margen) * 2, var(--ancho)); margin-inline: auto; }

/* Grano sutil sobre toda la página: textura de papel impreso */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía ---------- */
.titular, .titulo, .cifra, .marquesina, .btn, .sobretitulo, .etiqueta, .paso__num {
  font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .005em;
}
.titular { font-weight: 800; font-size: clamp(3.4rem, 7.4vw, 7.8rem); line-height: .86; color: var(--amarillo); max-width: 11ch; text-wrap: balance; }
.titulo { font-weight: 800; font-size: clamp(2.6rem, 6.5vw, 6rem); line-height: .9; text-wrap: balance; }
.titulo--contorno { color: transparent; -webkit-text-stroke: 2px currentColor; }
.sobretitulo { font-weight: 600; font-size: clamp(.95rem, .85rem + .4vw, 1.25rem); letter-spacing: .14em; display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.bajada { font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem); line-height: 1.45; max-width: 38ch; }

/* ---------- Botones ---------- */
.btn {
  --fondo: var(--amarillo); --tinta: var(--negro);
  position: relative; display: inline-flex; align-items: center; gap: .6em; isolation: isolate; overflow: hidden;
  padding: .85em 1.5em; border: 2px solid var(--fondo); background: var(--fondo); color: var(--tinta);
  font-weight: 800; font-size: clamp(1.05rem, 1rem + .4vw, 1.4rem); line-height: 1; text-decoration: none; cursor: pointer;
  transition: color .35s var(--curva), transform .35s var(--rebote);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinta); transform: translateY(101%); transition: transform .45s var(--curva); }
.btn:hover, .btn:focus-visible { color: var(--fondo); transform: translateY(-3px); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform .35s var(--curva); }
.btn:hover svg { transform: translateX(.3em); }
.btn--grande { font-size: clamp(1.3rem, 1.1rem + .9vw, 2rem); padding: .8em 1.6em; }
.btn--linea { --fondo: var(--blanco); background: transparent; color: var(--blanco); }
.btn--linea::before { background: var(--blanco); }
.btn--linea:hover, .btn--linea:focus-visible { color: var(--negro); }
.btn--negro { --fondo: var(--negro); --tinta: var(--amarillo); }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 2rem;
  padding: .9rem var(--margen); transition: background .4s, padding .4s, transform .5s var(--curva);
}
/* Páginas de fondo claro (casos): el menú en negro hasta que la barra se vuelve sólida */
.pagina-clara .nav:not(.is-solida) .nav__enlaces a { color: var(--negro); }
.pagina-clara .nav:not(.is-solida) .nav__enlaces a::after { background: var(--negro); }
.pagina-amarilla .nav:not(.is-solida) > .btn { background: var(--negro); color: var(--amarillo); }
.nav.is-solida { background: rgba(11, 11, 11, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-block: .55rem; }
.nav.is-escondida { transform: translateY(-110%); }
/* Logotipo oficial: nunca se recrea con texto, se deforma ni se recolorea */
.marca { display: block; margin-right: auto; line-height: 0; }
.marca img { height: clamp(2.7rem, 3.6vw, 3.4rem); width: auto; }
.nav.is-solida .marca img { height: 2.6rem; }
.nav__enlaces { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav__enlaces a { position: relative; text-decoration: none; font-weight: 600; font-size: .98rem; padding: .3em 0; }
.nav__enlaces a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amarillo); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--curva); }
.nav__enlaces a:hover::after, .nav__enlaces a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { font-size: 1.05rem; padding: .7em 1.1em; }
.nav__hamb { display: none; width: 2.9rem; height: 2.9rem; border: 0; background: var(--amarillo); cursor: pointer; position: relative; }
.nav__hamb span { position: absolute; left: 24%; right: 24%; height: 3px; background: var(--negro); transition: transform .4s var(--curva), top .4s var(--curva); }
.nav__hamb span:nth-child(1) { top: 38%; } .nav__hamb span:nth-child(2) { top: 58%; }
.nav__hamb[aria-expanded="true"] span:nth-child(1) { top: 48%; transform: rotate(45deg); }
.nav__hamb[aria-expanded="true"] span:nth-child(2) { top: 48%; transform: rotate(-45deg); }
.menu-movil { position: fixed; inset: 0; z-index: 55; background: var(--amarillo); color: var(--negro); display: grid; align-content: center; gap: .3rem; padding: 5rem var(--margen) 2rem; clip-path: circle(0 at calc(100% - 3rem) 2.4rem); visibility: hidden; transition: clip-path .7s var(--curva), visibility 0s .7s; }
.menu-movil.is-abierto { clip-path: circle(150% at calc(100% - 3rem) 2.4rem); visibility: visible; transition: clip-path .7s var(--curva); }
.menu-movil a { font: 800 clamp(2.6rem, 12vw, 5rem)/1 var(--f-titulo); text-transform: uppercase; text-decoration: none; }
@media (max-width: 60rem) { .nav__enlaces, .nav > .btn { display: none; } .nav__hamb { display: block; } }

/* ==========================================================================
   HÉROE: escena 3D con un sobre que se abre y cartas que vuelan
   ========================================================================== */
.heroe { --p: 0; position: relative; min-height: min(100svh, 64rem); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding: 6.5rem var(--margen) 6rem; overflow: hidden; isolation: isolate; }
.heroe__texto { position: relative; z-index: 3; display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); justify-items: start; transform: translateY(calc(var(--p) * -12vh)); opacity: calc(1 - var(--p) * 1.4); }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.heroe__acciones .btn--grande { font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem); padding: .8em 1.3em; }
.heroe__vivo { display: flex; align-items: baseline; gap: .6em; font-size: 1.05rem; color: var(--gris); }
.heroe__vivo strong { font: 800 clamp(2rem, 4vw, 3.2rem)/1 var(--f-titulo); color: var(--blanco); font-variant-numeric: tabular-nums; }
.pulso { width: .7em; height: .7em; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 0 rgba(255, 255, 0, .7); animation: pulso 1.8s infinite; }
@keyframes pulso { to { box-shadow: 0 0 0 .9em rgba(255, 255, 0, 0); } }

/* Piso en perspectiva: una retícula que avanza hacia quien mira */
.heroe__piso { position: absolute; z-index: -2; left: -50%; right: -50%; bottom: -12%; height: 70%; transform: perspective(60rem) rotateX(74deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(255, 255, 0, .22) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 255, 0, .22) 1.5px, transparent 1.5px);
  background-size: 5rem 5rem; animation: piso 5s linear infinite;
  -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); }
@keyframes piso { to { background-position: 0 5rem, 0 0; } }
.heroe__brillo { position: absolute; z-index: -1; right: -10%; top: 8%; width: min(70rem, 90vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 0, .2), transparent 70%); animation: respirar 7s ease-in-out infinite alternate; }
@keyframes respirar { to { transform: scale(1.18) translate(-3%, 4%); opacity: .75; } }

.escena { position: relative; z-index: 2; height: min(78vh, 46rem); perspective: 90rem; perspective-origin: 50% 40%; transform: translateY(calc(var(--p) * -22vh)) scale(calc(1 - var(--p) * .3)); }
.escena__mundo { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -22deg)); will-change: transform; }

/* Cartas que vuelan a distintas profundidades */
.vuela { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--s) * 1rem); color: var(--amarillo); transform-style: preserve-3d;
  transform: translate3d(0, 0, calc(var(--z) * 1px)); animation: vuelo calc(var(--t) * 1s) ease-in-out calc(var(--t) * -.37s) infinite alternate; opacity: var(--o, 1); }
.vuela svg { width: 100%; height: auto; animation: giro calc(var(--t) * 1.7s) linear infinite; filter: drop-shadow(0 .6rem .8rem rgba(0, 0, 0, .55)); }
.vuela--papel { color: var(--papel); }
@keyframes vuelo {
  from { transform: translate3d(-1.5rem, 1.2rem, calc(var(--z) * 1px)) rotateZ(-10deg); }
  to   { transform: translate3d(2rem, -2.4rem, calc(var(--z) * 1px + 60px)) rotateZ(12deg); }
}
@keyframes giro { from { transform: rotate3d(.3, 1, .1, 0deg); } to { transform: rotate3d(.3, 1, .1, 360deg); } }

/* El sobre: capas HTML con SVG dentro, apiladas en Z real */
.sobre-flota { position: absolute; left: 50%; top: 52%; width: min(30rem, 74vw); aspect-ratio: 3 / 2; transform-style: preserve-3d; transform: translate(-50%, -50%); animation: flotar 6s ease-in-out infinite alternate; }
@keyframes flotar { from { transform: translate(-50%, -46%) rotateZ(-2deg); } to { transform: translate(-50%, -54%) rotateZ(2.5deg); } }
.sobre { position: absolute; inset: 0; transform-style: preserve-3d; cursor: pointer; transition: transform 1.2s var(--curva); }
.sobre > * { position: absolute; left: 0; width: 100%; }
.sobre svg { width: 100%; height: 100%; }
.sobre__grosor { inset: 0; background: var(--amarillo-3); border-radius: 2.5%; transform: translateZ(calc(var(--i) * -2px)); }
.sobre__fondo { inset: 0; transform: translateZ(0); }
.sobre__carta { left: 6%; width: 88%; top: 7%; height: 88%; transform: translateZ(3px); transition: transform 1.3s var(--curva) .1s; filter: drop-shadow(0 .3rem .5rem rgba(0, 0, 0, .25)); }
.sobre__frente { inset: 0; transform: translateZ(6px); }
.sobre__solapa { top: 0; height: 58.4%; transform-origin: 50% 0; transform: translateZ(8px) rotateX(0deg); transition: transform 1s var(--curva) .45s; }
.sobre.is-abierto .sobre__solapa { transform: translateZ(1px) rotateX(180deg); transition-delay: 0s; }
.sobre.is-abierto .sobre__carta { transform: translateZ(3px) translateY(-58%); transition-delay: .55s; }
.sobre__sombra { position: absolute; left: 50%; top: 96%; width: min(26rem, 64vw); height: 3rem; border-radius: 50%; background: rgba(0, 0, 0, .7); filter: blur(1.2rem); transform: translate(-50%, 0) rotateX(80deg) translateZ(-80px); animation: sombra 6s ease-in-out infinite alternate; }
@keyframes sombra { to { transform: translate(-50%, 0) rotateX(80deg) translateZ(-80px) scale(.8); opacity: .6; } }
/* La carta se «escribe»: cada renglón se dibuja al salir del sobre */
.renglon { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s ease-out; }
.sobre.is-abierto .renglon { stroke-dashoffset: 0; transition-delay: calc(1.2s + var(--i) * .22s); }
/* Al hacer scroll el sobre se cierra y «se envía» */
.heroe.is-enviado .sobre { transform: translate3d(14vw, -40vh, 200px) rotateZ(18deg) rotateY(40deg) scale(.5); }

/* Alambre de púas: se dibuja al cargar y se corta al avanzar */
.alambre { position: absolute; z-index: 4; left: 0; right: 0; bottom: 3.2rem; height: 2.4rem; display: flex; pointer-events: none; }
.alambre__mitad { flex: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='38' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M0 17c12-7 24 7 36 0s24 7 36 0M0 21c12 7 24-7 36 0s24-7 36 0'/%3E%3Cpath d='M30 8l12 22M42 8L30 30M33 5l6 28'/%3E%3C/svg%3E") repeat-x center / 72px 38px; opacity: .85; transition: transform 1.4s var(--curva), opacity 1.4s; }
.alambre__mitad--izq { transform-origin: 0 50%; } .alambre__mitad--der { transform-origin: 100% 50%; }
.heroe.is-cortado .alambre__mitad--izq { transform: rotate(14deg) translateY(1rem); opacity: .25; }
.heroe.is-cortado .alambre__mitad--der { transform: rotate(-14deg) translateY(1rem); opacity: .25; }
.heroe__bajar { position: absolute; z-index: 4; left: var(--margen); bottom: 1.1rem; display: flex; align-items: center; gap: .7rem; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--gris); }
.heroe__bajar::before { content: ""; width: 1px; height: 2.4rem; background: linear-gradient(var(--amarillo), transparent); animation: bajar 2s var(--curva) infinite; transform-origin: top; }
@keyframes bajar { from { transform: scaleY(0); } 60% { transform: scaleY(1); } to { transform: scaleY(1); opacity: 0; } }

@media (max-width: 60rem) {
  .heroe { grid-template-columns: 1fr; padding-top: 6rem; align-content: start; }
  .escena { order: -1; height: min(40vh, 21rem); margin-inline: calc(var(--margen) * -1); }
  .vuela { width: calc(var(--s) * .62rem); }
  .sobre-flota { width: min(19rem, 62vw); }
}

/* ---------- Letras que giran en 3D al entrar (solo con JS) ---------- */
.js [data-partir] { perspective: 40rem; }
.js [data-partir] .palabra { display: inline-block; white-space: nowrap; }
.js [data-partir] .letra { display: inline-block; transform-origin: 50% 100%; opacity: 0; transform: rotateX(-95deg) translateY(.35em); }
.js [data-partir].is-visible .letra { animation: letra .9s var(--curva) calc(var(--i) * 32ms + .15s) forwards; }
@keyframes letra { to { opacity: 1; transform: none; } }

/* ---------- Aparición al hacer scroll (solo con JS) ---------- */
.js [data-revelar] { opacity: 0; transform: translateY(2.8rem); transition: opacity .9s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--orden, 0) * 90ms); }
.js [data-revelar="izq"] { transform: translateX(-3rem); } .js [data-revelar="zoom"] { transform: scale(.88); }
.js [data-revelar].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Marquesinas inclinadas
   ========================================================================== */
.marquesina { --dur: 28s; position: relative; z-index: 5; overflow: hidden; background: var(--amarillo); color: var(--negro); font-weight: 800; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1; padding: .32em 0 .26em; transform: rotate(-2deg) scale(1.04) skewX(calc(var(--sesgo, 0) * 1deg)); margin-block: -1.2rem; }
.marquesina--negra { background: var(--negro); color: var(--amarillo); transform: rotate(1.6deg) scale(1.04) skewX(calc(var(--sesgo, 0) * -1deg)); border-block: 2px solid var(--amarillo); }
.marquesina__pista { display: flex; width: max-content; animation: marquesina var(--dur) linear infinite; }
.marquesina--negra .marquesina__pista { animation-direction: reverse; }
.marquesina__pista span { display: flex; align-items: center; gap: .55em; padding-right: .55em; white-space: nowrap; }
.marquesina__pista svg { width: .7em; height: .7em; flex: none; animation: girar 6s linear infinite; }
@keyframes marquesina { to { transform: translateX(-50%); } }
@keyframes girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   Qué es + sello postal 3D
   ========================================================================== */
.que-es { background: var(--amarillo); color: var(--negro); padding: clamp(6rem, 12vw, 11rem) 0 clamp(5rem, 10vw, 9rem); position: relative; overflow: hidden; }
.que-es__rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.que-es__texto { display: grid; gap: 1.6rem; }
.manifiesto { font: 600 clamp(1.5rem, 1.1rem + 2vw, 2.9rem)/1.12 var(--f-titulo); text-transform: uppercase; }
.js .manifiesto .palabra { opacity: .16; transition: opacity .5s; }
.js .manifiesto .palabra.is-leida { opacity: 1; }
.que-es .bajada { max-width: 46ch; }
.sello-zona { perspective: 70rem; display: grid; place-items: center; }
.sello { --tx: 0deg; --ty: 0deg; position: relative; width: min(24rem, 78vw); aspect-ratio: 4 / 5; background: var(--negro); color: var(--amarillo); padding: 1.6rem; display: grid; align-content: space-between; transform-style: preserve-3d; transform: rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(-5deg); transition: transform .5s var(--curva); box-shadow: 1.4rem 1.8rem 0 rgba(0, 0, 0, .18);
  /* Borde dentado de sello postal: un rectángulo interior macizo + una rejilla de agujeros que solo asoma en los bordes */
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 1.2rem) calc(100% - 1.2rem) no-repeat, radial-gradient(circle, transparent .36rem, #000 .39rem) -.6rem -.6rem / 1.2rem 1.2rem round;
  mask: linear-gradient(#000 0 0) center / calc(100% - 1.2rem) calc(100% - 1.2rem) no-repeat, radial-gradient(circle, transparent .36rem, #000 .39rem) -.6rem -.6rem / 1.2rem 1.2rem round; }
/* La frase se mide contra el ancho de la propia estampilla (unidades de contenedor): «PODEROSAS» cabe siempre */
.sello { container-type: inline-size; }
.sello__frase { font: 800 3.2rem/.88 var(--f-titulo); font-size: clamp(2rem, 20cqi, 5.2rem); text-transform: uppercase; color: var(--amarillo); max-width: 9.5ch; transform: translateZ(50px); }
.sello__matasello { position: absolute; right: -22%; top: -12%; width: 78%; color: var(--blanco); opacity: .9; transform: translateZ(70px); animation: girar 40s linear infinite; mix-blend-mode: difference; }
.sello__vela { width: 3rem; height: auto; color: var(--amarillo); transform: translateZ(40px); }
@media (max-width: 60rem) { .que-es__rejilla { grid-template-columns: 1fr; } }

/* ==========================================================================
   Progreso total: cifra gigante y trazo de pluma
   ========================================================================== */
.progreso { background: var(--negro); padding: clamp(6rem, 11vw, 10rem) 0; position: relative; overflow: hidden; }
.progreso__rejilla { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); justify-items: start; }
.cifra { font-weight: 800; font-size: clamp(6rem, 24vw, 22rem); line-height: .78; color: var(--amarillo); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cifra-fantasma { position: absolute; right: -2vw; top: 50%; transform: translateY(-50%) translateX(calc(var(--p, 0) * -8vw)); font: 800 clamp(10rem, 38vw, 34rem)/.8 var(--f-titulo); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 0, .13); pointer-events: none; white-space: nowrap; }
.trazo { width: 100%; height: clamp(3rem, 7vw, 5.5rem); overflow: visible; }
.trazo path { fill: none; stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trazo__guia { stroke: var(--humo); }
.trazo__tinta { stroke: var(--amarillo); stroke-dasharray: 0 100; transition: stroke-dasharray 2.4s var(--curva) .2s; }
.progreso__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; width: 100%; }
.progreso__meta { color: var(--gris); font-size: 1.05rem; }
.progreso__meta strong { color: var(--blanco); font-weight: 600; }

/* ==========================================================================
   Cómo funciona: cuatro pasos con iconos SVG animados
   ========================================================================== */
.como { background: var(--papel); color: var(--negro); padding: clamp(6rem, 11vw, 10rem) 0; }
.como__cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.6rem); perspective: 90rem; }
.paso { --tx: 0deg; --ty: 0deg; position: relative; background: var(--negro); color: var(--blanco); padding: clamp(1.3rem, 2vw, 2rem); display: grid; gap: 1.2rem; align-content: start; min-height: 27rem; transform-style: preserve-3d; transform: rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .45s var(--curva); overflow: hidden; }
.paso::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 0, .2), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.paso:hover::after { opacity: 1; }
.paso__num { font-weight: 800; font-size: clamp(3.4rem, 5vw, 5rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--amarillo); transform: translateZ(30px); }
.paso__icono { width: 100%; max-width: 13rem; margin-inline: auto; color: var(--amarillo); transform: translateZ(55px); }
.paso__icono * { transform-box: fill-box; transform-origin: center; }
.paso p { font: 600 clamp(1.25rem, 1rem + .7vw, 1.65rem)/1.12 var(--f-titulo); text-transform: uppercase; transform: translateZ(25px); }
.paso:nth-child(even) { margin-top: 3rem; }
@media (max-width: 70rem) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paso:nth-child(even) { margin-top: 0; } }
@media (max-width: 38rem) { .pasos { grid-template-columns: 1fr; } .paso { min-height: 0; } }
/* Animaciones de los iconos (corren solo cuando el paso está a la vista) */
.paso .a-meridiano, .paso .a-orbita, .paso .a-barrote-i, .paso .a-barrote-d, .paso .a-carta, .paso .a-eslabon-i, .paso .a-eslabon-d, .paso .a-chispa { animation-play-state: paused; }
.paso.is-visible [class^="a-"], .paso.is-visible [class*=" a-"] { animation-play-state: running; }
.a-meridiano { animation: meridiano 4s linear infinite; } .a-meridiano--2 { animation-delay: -2s; }
@keyframes meridiano { 0% { transform: scaleX(1); } 50% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
.a-orbita { animation: girar 7s linear infinite; transform-origin: 100px 100px !important; transform-box: view-box !important; }
.a-barrote-i { animation: barrote-i 4.5s var(--curva) infinite alternate; } .a-barrote-d { animation: barrote-d 4.5s var(--curva) infinite alternate; }
@keyframes barrote-i { 0%, 35% { transform: none; } 100% { transform: translateX(-34px) rotate(-7deg); opacity: .35; } }
@keyframes barrote-d { 0%, 35% { transform: none; } 100% { transform: translateX(34px) rotate(7deg); opacity: .35; } }
.a-carta { animation: carta 3.6s var(--curva) infinite; } .a-carta--2 { animation-delay: -1.2s; } .a-carta--3 { animation-delay: -2.4s; }
@keyframes carta { 0% { transform: translate(-70px, 40px) rotate(-25deg) scale(.6); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(42px, -18px) rotate(8deg) scale(.35); opacity: 0; } }
.a-eslabon-i { animation: eslabon-i 3.4s var(--rebote) infinite alternate; } .a-eslabon-d { animation: eslabon-d 3.4s var(--rebote) infinite alternate; }
@keyframes eslabon-i { 0%, 40% { transform: none; } 100% { transform: translate(-20px, 6px) rotate(-16deg); } }
@keyframes eslabon-d { 0%, 40% { transform: none; } 100% { transform: translate(20px, -6px) rotate(16deg); } }
.a-chispa { animation: chispa 3.4s ease-out infinite alternate; }
@keyframes chispa { 0%, 45% { transform: scale(0); opacity: 0; } 70% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

/* ==========================================================================
   Actúa: tarjetas de casos como afiches de la campaña
   (manual Escribe por los Derechos 2026: retrato que sale del marco, nombre en bloque negro,
   país con pin en el color del caso, titular en mayúsculas, fondo beige)
   ========================================================================== */
.actua { background: var(--negro); padding: clamp(6rem, 11vw, 10rem) 0; }
.actua__cabecera { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.actua__cabecera .titulo em { font-style: normal; color: var(--amarillo); }
.casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.4rem, 2.2vw, 2.2rem); perspective: 100rem; }
.caso { --tx: 0deg; --ty: 0deg; --caso: var(--amarillo); position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--papel); color: var(--negro); text-decoration: none;
  transform-style: preserve-3d; transform: rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .45s var(--curva), box-shadow .45s; box-shadow: 0 0 0 0 transparent; }
.caso::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: 38%; height: .6rem; background: var(--caso); }
.caso:hover, .caso:focus-visible { box-shadow: 1rem 1rem 0 var(--amarillo); }
.caso__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.caso__foto .retrato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: translateZ(30px); transition: transform .8s var(--curva); }
.caso:hover .caso__foto .retrato { transform: translateZ(30px) translateY(-3%) scale(1.05); }
.caso__foto .foto { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .6s, transform 1.2s var(--curva); }
.caso:hover .caso__foto .foto { filter: none; transform: scale(1.06); }
/* Espacio «Próximamente»: marco amarillo vacío, semitono y la estampilla de la campaña */
.caso--proximo { cursor: default; }
.caso--proximo:hover { box-shadow: none; }
.caso--proximo .caso__foto { background: radial-gradient(circle, rgba(0, 0, 0, .16) 24%, transparent 26%) 0 0 / .9rem .9rem; }
.caso__marco { position: absolute; inset: 14% 14% 18%; border: .55rem solid var(--amarillo); border-radius: 3px 9px 4px 11px / 10px 3px 12px 4px; transform: rotate(-1.2deg); animation: latir 2.6s ease-in-out infinite alternate; }
.caso__estampilla { position: absolute; left: 50%; top: 47%; width: 34%; height: auto; transform: translate(-50%, -50%) rotate(6deg); filter: drop-shadow(.3rem .4rem 0 rgba(0, 0, 0, .35)); }
@keyframes latir { to { transform: rotate(1deg) scale(1.03); } }
.caso--proximo .caso__nombre { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }

/* Sin foto: trama de semitono e iniciales (casos de demostración) */
.caso__trama { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, var(--negro) 22%, transparent 24%) 0 0 / 1rem 1rem, var(--amarillo); -webkit-mask-image: linear-gradient(160deg, #000 20%, rgba(0, 0, 0, .25)); mask-image: linear-gradient(160deg, #000 20%, rgba(0, 0, 0, .25)); transition: transform 1.2s var(--curva); }
.caso__iniciales { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(7rem, 14vw, 11rem)/1 var(--f-titulo); color: var(--negro); transition: transform .8s var(--curva); }
.caso:hover .caso__trama { transform: scale(1.15) rotate(3deg); } .caso:hover .caso__iniciales { transform: scale(1.1); }
.etiqueta { position: absolute; z-index: 3; right: 0; top: 1.2rem; background: var(--negro); color: var(--amarillo); font-weight: 800; font-size: .95rem; letter-spacing: .1em; padding: .35em .8em .3em; transform: translateZ(40px); }
.etiqueta--riesgo { background: var(--negro); color: var(--blanco); }
.etiqueta--resuelto { background: var(--amarillo); color: var(--negro); }
.caso__cuerpo { display: grid; gap: .7rem; align-content: start; padding: 0 1.3rem 1.4rem; margin-top: -1.6rem; position: relative; z-index: 2; transform: translateZ(40px); }
.caso__nombre { justify-self: start; background: var(--negro); color: var(--amarillo); font: 800 clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem)/1 var(--f-titulo); text-transform: uppercase; padding: .2em .35em .12em; }
.caso__pais, .caso-pais { display: inline-flex; align-items: center; gap: .35em; font: 800 .95rem/1 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; }
.caso__pais svg, .caso-pais svg { width: .95em; height: 1.2em; color: var(--caso); flex: none; }
.caso__gancho { font: 800 1.15rem/1.05 var(--f-titulo); text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.caso__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .7rem; border-top: 1.5px solid var(--negro); }
.caso__firmas { display: flex; align-items: center; gap: .7rem; font-size: .95rem; color: var(--gris-oscuro); }
.caso__firmas strong { font: 800 1.6rem/1 var(--f-titulo); color: var(--negro); font-variant-numeric: tabular-nums; }
.anillo { width: 2.6rem; height: 2.6rem; transform: rotate(-90deg); flex: none; }
.anillo circle { fill: none; stroke-width: 4; }
.anillo__guia { stroke: rgba(0, 0, 0, .12); } .anillo__tinta { stroke: var(--negro); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.8s var(--curva) .3s; }
.caso__ir { font: 800 1.1rem/1 var(--f-titulo); text-transform: uppercase; display: inline-flex; align-items: center; gap: .4em; background: var(--amarillo); padding: .45em .6em .4em; }
.caso__ir svg { width: 1.1em; height: 1.1em; transition: transform .4s var(--curva); } .caso:hover .caso__ir svg { transform: translateX(.35em); }

/* ==========================================================================
   Voces: notas de papel
   ========================================================================== */
.voces-tira { background: var(--carbon); padding: clamp(5rem, 9vw, 8rem) 0; overflow: hidden; }
.voces-tira__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 3rem; }
.notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 2rem; }
.nota { background: var(--blanco); color: var(--negro); padding: 1.6rem 1.5rem 1.3rem; display: grid; gap: 1rem; transform: rotate(calc(var(--giro, -1) * 1.4deg)); transition: transform .5s var(--rebote), box-shadow .5s; box-shadow: .5rem .7rem 0 rgba(0, 0, 0, .5); position: relative; }
.nota::before { content: ""; position: absolute; left: 50%; top: -.7rem; width: 5rem; height: 1.5rem; background: rgba(255, 255, 0, .85); transform: translateX(-50%) rotate(-2deg); }
.nota:hover { transform: rotate(0) translateY(-.5rem) scale(1.02); box-shadow: 1rem 1.4rem 0 rgba(0, 0, 0, .5); }
.nota blockquote { font-size: 1.15rem; line-height: 1.4; }
.nota footer { font: 600 .95rem/1.2 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--gris-oscuro); }
.nota footer a { color: inherit; }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie { background: var(--negro); border-top: 2px solid var(--amarillo); padding: clamp(4rem, 8vw, 7rem) 0 2rem; overflow: hidden; }
.pie__marcas { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 2.5rem; }
.pie__logo { height: 4.2rem; width: auto; }
.pie__estampilla { height: 5.6rem; width: auto; transform: rotate(4deg); }
/* Estampilla oficial de la campaña: como en los afiches, arriba a la derecha y levemente girada */
.heroe__estampilla { position: absolute; z-index: 4; left: 50%; top: clamp(6.5rem, 12vh, 8.5rem); width: clamp(5.5rem, 9vw, 8.5rem); height: auto; transform: rotate(7deg); animation: estampar .9s var(--rebote) .6s both; filter: drop-shadow(.4rem .5rem 0 rgba(0, 0, 0, .55)); }
.caso-heroe__estampilla { position: absolute; z-index: 2; right: var(--margen); top: 5.6rem; width: clamp(4.5rem, 7vw, 7rem); height: auto; transform: rotate(-5deg); animation: estampar .9s var(--rebote) .5s both; }
@keyframes estampar { from { opacity: 0; transform: scale(1.6) rotate(-14deg); } }
@media (max-width: 60rem) { .heroe__estampilla { left: auto; right: 1rem; top: 5.5rem; width: 4.6rem; } .caso-heroe__estampilla { top: 5rem; width: 4.2rem; } }
.pie__lema { font: 800 clamp(2.8rem, 9.5vw, 9.5rem)/.86 var(--f-titulo); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--amarillo); margin-bottom: clamp(2.5rem, 5vw, 4rem); text-wrap: balance; }
.pie__lema em { font-style: normal; color: var(--amarillo); -webkit-text-stroke: 0; }
.pie__contacto { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 2fr); gap: 1.5rem 3rem; align-items: start; padding: 2.2rem 0; border-top: 1px solid var(--humo); }
.pie__titulo { font: 800 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/.95 var(--f-titulo); text-transform: uppercase; color: var(--blanco); }
.pie__oficinas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.6rem 2.4rem; }
.pie__oficinas address { font-style: normal; font-size: 1.02rem; line-height: 1.45; color: #d0d3d6; }
.pie__oficinas strong { display: block; margin-bottom: .3rem; font: 800 clamp(1.35rem, 1.1rem + .6vw, 1.7rem)/1 var(--f-titulo); color: var(--amarillo); }
@media (max-width: 48rem) { .pie__contacto { grid-template-columns: 1fr; } }
.pie__rejilla { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--humo); font-size: .98rem; color: var(--gris); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.pie__enlaces a { color: var(--blanco); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s; }
.pie__enlaces a:hover { border-color: var(--amarillo); }

/* ==========================================================================
   Página de caso (gramática del afiche de la campaña)
   ========================================================================== */
.caso-heroe { --caso: var(--amarillo); position: relative; background: var(--papel); color: var(--negro); padding: clamp(7rem, 11vw, 9rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; isolation: isolate; }
/* Semitono en el color del caso, en una esquina: contexto sin competir con el texto */
.caso-heroe::before { content: ""; position: absolute; z-index: -1; right: -6%; top: -10%; width: 62%; height: 75%;
  background: radial-gradient(circle, var(--caso) 30%, transparent 32%) 0 0 / .95rem .95rem; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 25%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 30%, #000 25%, transparent 70%);
  transform: translateY(calc(var(--p, 0) * 12vh)); }
.caso-heroe__rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.caso-heroe__texto { display: grid; gap: 1rem; justify-items: start; padding-bottom: clamp(1rem, 3vw, 3rem); }
.caso-heroe .etiqueta { position: static; transform: none; }
.miga { font: 600 1rem/1 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--gris-oscuro); display: inline-flex; gap: .5em; align-items: center; }
.miga:hover { color: var(--negro); }
.caso-nombre { background: var(--negro); color: var(--amarillo); font: 800 clamp(2.8rem, 6.5vw, 6rem)/.95 var(--f-titulo); text-transform: uppercase; padding: .12em .25em .05em; transform-origin: left; animation: barrer .8s var(--curva) .1s both; }
.caso-pais { font-size: 1.15rem; }
/* Titular en bloque amarillo: cada línea con su propio fondo, como en los afiches */
.caso-titular { font: 800 clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem)/1.18 var(--f-titulo); text-transform: uppercase; max-width: 22ch; }
.caso-titular span { background: var(--amarillo); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .02em .22em; }
.js .caso-titular { animation: subir .8s var(--curva) .35s both; }
.caso-heroe .bajada { max-width: 42ch; }
@keyframes barrer { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes subir { from { opacity: 0; transform: translateY(1.5rem); } }
.caso-heroe__retrato { position: relative; align-self: end; margin: 0 0 calc(clamp(2rem, 4vw, 3rem) * -1); transform: translateY(calc(var(--p, 0) * -6vh)); }
.caso-heroe__retrato img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; object-position: bottom; animation: salir-del-marco 1.1s var(--curva) .2s both; }
@keyframes salir-del-marco { from { opacity: 0; transform: translateY(8%) scale(.96); } }
.caso-heroe__trama { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(0, 0, 0, .25) 18%, transparent 20%) 0 0 / 1.1rem 1.1rem; -webkit-mask-image: radial-gradient(ellipse at 85% 20%, #000, transparent 60%); mask-image: radial-gradient(ellipse at 85% 20%, #000, transparent 60%); }
@media (max-width: 60rem) { .caso-heroe__rejilla { grid-template-columns: 1fr; } .caso-heroe__retrato { order: -1; max-width: 26rem; justify-self: center; margin-bottom: 0; } }

.caso-cuerpo { background: var(--papel); color: var(--negro); padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); border-top: 2px solid var(--negro); }
.caso-cuerpo__rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.relato { display: grid; gap: clamp(2rem, 4vw, 3rem); font-size: 1.12rem; }
.relato h2 { font: 800 clamp(1.9rem, 1.4rem + 1.8vw, 3rem)/.95 var(--f-titulo); text-transform: uppercase; margin-bottom: 1rem; }
.relato h2::after { content: ""; display: block; width: 3.4rem; height: .35rem; background: var(--caso, var(--amarillo)); margin-top: .5rem; }
.relato p + p { margin-top: 1em; }
.relato strong, .relato b { font-weight: 600; }
.peticion-destacada { font: 800 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--f-titulo); text-transform: uppercase; border-left: .45rem solid var(--negro); padding-left: 1rem; }
.cita { font: 600 clamp(1.8rem, 1.3rem + 2.4vw, 3.4rem)/1.05 var(--f-titulo); text-transform: uppercase; border-left: .5rem solid var(--negro); padding-left: 1.4rem; }
.caso-video { position: relative; background: var(--negro); box-shadow: .8rem .8rem 0 var(--caso, var(--amarillo)); }
.caso-video video { display: block; width: 100%; max-height: 80vh; background: var(--negro); }
.creditos { font-size: .85rem; line-height: 1.45; color: var(--gris-oscuro); border-top: 1px solid rgba(0, 0, 0, .2); padding-top: 1rem; white-space: pre-line; }
.linea-tiempo { display: grid; gap: 1.6rem; border-left: 2px solid var(--negro); padding-left: 1.6rem; }
.linea-tiempo li { position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: calc(-1.6rem - .45rem); top: .35rem; width: .8rem; height: .8rem; background: var(--amarillo); border: 2px solid var(--negro); border-radius: 50%; }
.linea-tiempo time { font: 600 .95rem/1 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-oscuro); }
.linea-tiempo h3 { font: 800 1.5rem/1.05 var(--f-titulo); text-transform: uppercase; margin: .25rem 0 .4rem; }

/* Panel de acción: firma, carta y apoyo */
.firma { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow: auto; overscroll-behavior: contain; background: var(--amarillo); color: var(--negro); padding: clamp(1.3rem, 2.2vw, 2rem); display: grid; gap: 1.1rem; box-shadow: .9rem 1.1rem 0 var(--negro); }
.pestanas { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 2px solid var(--negro); padding-bottom: .8rem; }
.pestanas button { border: 2px solid var(--negro); background: transparent; padding: .5em .75em .42em; font: 800 1rem/1 var(--f-titulo); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.pestanas button[aria-selected="true"] { background: var(--negro); color: var(--amarillo); }
.no-js .pestanas, html:not(.js) .pestanas { display: none; }
.js .panel:not(.is-activo) { display: none; }
.panel { display: grid; gap: 1rem; }
html:not(.js) .panel + .panel { border-top: 2px solid var(--negro); padding-top: 1.2rem; }
.firma__titulo, .panel__titulo { font: 800 clamp(1.9rem, 1.5rem + 1.3vw, 2.8rem)/.92 var(--f-titulo); text-transform: uppercase; }
.panel__titulo { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.firma__conteo { display: flex; align-items: baseline; gap: .6rem; }
.firma__conteo strong { font: 800 3.2rem/.85 var(--f-titulo); font-variant-numeric: tabular-nums; }
.barra { height: .7rem; background: rgba(0, 0, 0, .15); overflow: hidden; }
.barra span { display: block; height: 100%; width: 100%; background: var(--negro); transform-origin: left; transform: scaleX(var(--pct, 0)); transition: transform 2s var(--curva) .3s; }
.campo { display: grid; gap: .35rem; }
.campo label { font: 600 1rem/1 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; }
.campo input { width: 100%; padding: .9rem 1rem; border: 2px solid var(--negro); background: var(--blanco); font-size: 1.1rem; border-radius: 0; transition: box-shadow .25s var(--curva), transform .25s var(--curva); }
.campo input:focus { outline: none; box-shadow: .35rem .35rem 0 var(--negro); transform: translate(-.15rem, -.15rem); }
.trampa { position: absolute !important; left: -9999px !important; }
.firma .btn { justify-content: center; width: 100%; }
.firma__legal { font-size: .88rem; line-height: 1.4; }
.firma__privado { display: flex; gap: .6rem; align-items: start; font-size: .92rem; line-height: 1.35; padding-top: .9rem; border-top: 2px solid var(--negro); }
.firma__privado svg { width: 1.3rem; height: 1.3rem; flex: none; margin-top: .1rem; }
.aviso { background: var(--negro); color: var(--amarillo); padding: .8rem 1rem; font-weight: 600; }
.cierre { display: grid; gap: .8rem; justify-items: start; background: var(--negro); color: var(--blanco); padding: 1.2rem 1.3rem; }
.cierre__titulo { font: 800 1.45rem/1.05 var(--f-titulo); text-transform: uppercase; color: var(--amarillo); }
.cierre .btn--negro { --fondo: var(--amarillo); --tinta: var(--negro); }
.datos { display: grid; gap: .9rem; margin: 0; }
.datos div { display: grid; gap: .25rem; }
.datos dt { font: 800 .9rem/1 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.datos dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.4; }
.datos a { text-decoration-thickness: 2px; }
.datos .btn { margin-top: .35rem; white-space: nowrap; }
.nota-panel { background: var(--negro); color: var(--blanco); padding: .8rem 1rem; font-size: .95rem; line-height: 1.4; white-space: pre-line; }
.copiar { border: 1.5px solid var(--negro); background: var(--blanco); padding: .3em .55em .25em; font: 800 .8rem/1 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.copiar:hover, .copiar:focus-visible { background: var(--negro); color: var(--amarillo); }
.copiar.is-copiado { background: var(--negro); color: var(--amarillo); }
.carta-modelo { background: var(--blanco); border: 2px solid var(--negro); }
.carta-modelo summary { cursor: pointer; padding: .8rem 1rem; font: 800 1.05rem/1 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.carta-modelo__texto { padding: 0 1rem 1rem; font-size: .98rem; line-height: 1.5; }
.carta-modelo__texto p + p { margin-top: .8em; }
@media (max-width: 60rem) { .caso-cuerpo__rejilla { grid-template-columns: 1fr; } .firma { position: static; max-height: none; order: -1; } }

/* ==========================================================================
   Gracias, voces, límite y 404
   ========================================================================== */
.pantalla { position: relative; min-height: min(100svh, 64rem); display: grid; place-items: center; padding: 8rem var(--margen) 5rem; overflow: hidden; text-align: center; isolation: isolate; }
.pantalla--amarilla { background: var(--amarillo); color: var(--negro); }
.pantalla__contenido { display: grid; gap: 1.6rem; justify-items: center; max-width: 60rem; }
.pantalla .titular { color: inherit; max-width: none; font-size: clamp(4rem, 17vw, 15rem); }
.pantalla .bajada { max-width: 44ch; }
.pantalla__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.mensaje-apoyo { display: grid; gap: .7rem; width: min(100%, 34rem); text-align: left; }
.mensaje-apoyo > label:first-of-type { font: 600 1rem/1.2 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; }
.mensaje-apoyo textarea { width: 100%; padding: .9rem 1rem; border: 2px solid var(--negro); background: var(--blanco); color: var(--negro); font: inherit; font-size: 1.05rem; border-radius: 0; resize: vertical; transition: box-shadow .25s var(--curva), transform .25s var(--curva); }
.mensaje-apoyo textarea:focus { outline: none; box-shadow: .35rem .35rem 0 var(--negro); transform: translate(-.15rem, -.15rem); }
.mensaje-apoyo__casilla { display: flex; gap: .55rem; align-items: center; font-size: 1rem; }
.mensaje-apoyo__casilla input { width: 1.2rem; height: 1.2rem; accent-color: var(--negro); }
.mensaje-apoyo__nota { margin: 0; font-size: .9rem; line-height: 1.4; }
.mensaje-apoyo .btn { justify-self: start; }
.mensaje-apoyo--hecho { margin: 0; text-align: center; font: 600 1.1rem/1.4 var(--f-titulo); }
.lluvia { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; perspective: 60rem; }
.lluvia span { position: absolute; left: calc(var(--x) * 1%); top: -12%; width: calc(var(--s) * 1rem); color: var(--negro); opacity: .9; animation: lluvia calc(var(--t) * 1s) linear calc(var(--t) * -.61s) infinite; }
@keyframes lluvia { to { transform: translate3d(calc(var(--d) * 1rem), 125vh, 0) rotate3d(1, .6, .2, calc(var(--g) * 1deg)); } }
.voces-pagina { background: var(--carbon); padding: clamp(8rem, 13vw, 11rem) 0 clamp(5rem, 9vw, 8rem); min-height: min(100svh, 64rem); }
.voces-pagina__cabecera { display: grid; gap: 1.2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Banda de entorno de demostración ---------- */
.aviso-demo { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; margin: 0; padding: .55rem var(--margen);
  background: repeating-linear-gradient(-45deg, var(--amarillo) 0 14px, var(--negro) 14px 28px); color: var(--negro);
  font-size: .92rem; line-height: 1.35; text-align: center; }
.aviso-demo::before { content: ""; position: absolute; inset: .3rem var(--margen); background: var(--blanco); z-index: -1; }
.aviso-demo { isolation: isolate; }
body:has(.aviso-demo) { padding-bottom: 3.4rem; }

/* ---------- Menos movimiento para quien lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-revelar], .js [data-partir] .letra, .js .manifiesto .palabra { opacity: 1 !important; transform: none !important; }
  .marquesina__pista { animation: none !important; }
}