/* ═══════════════════════════════════════════════════════════════════════
   RTP ROYAL JOKER — Echo Zine
   Plantilla BYQ « Echo Studio » adoptada completa. Tomado tal cual: los
   siete colores del sistema y nada más (Paper White, Bone Gray, Sky Bubble,
   Cotton Pink, Ember Red, Burgundy Velvet, Midnight Charcoal); el display
   condensado de 40–110 px con tracking -0.06em contra el cuerpo en 18 px con
   -0.03em y interlínea 110 %; el radio de 10 px en tarjeta, 8 px en chip y
   32–50 px en panel grande; la marquesina de titulares seguida de la terna de
   tarjetas de color; los chips de navegación en pastilla hueso que viran a
   rojo ascua; el ritmo de 100 px de sección; el contenedor de 1450 px; la
   profundidad hecha sólo de bloques planos y bordes de 2 px, sin sombras; y
   el pie carbón con enlaces que viran a rojo ascua.
   Adaptado: Anton e Inter no están disponibles sin archivo tipográfico, así
   que se usan sus sustitutos declarados por el propio sistema —Impact /
   Arial Narrow para el display y la pila de sistema para el cuerpo—.
   Desviación declarada: la plantilla pide siluetas SVG recortadas a mano
   dentro de cada tarjeta; el proyecto prohíbe todo archivo gráfico, de modo
   que las siluetas se construyen con border-radius asimétricos, que conservan
   el papel de foco pegatina sin un solo archivo.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#FFFFFF; --hueso:#F2EFEC; --ascua:#DD2F1B; --cielo:#90DDFF;
  --algodon:#E6AED3; --borgona:#582431; --carbon:#262626;
  --carbon-64:rgba(38,38,38,.64); --carbon-16:rgba(38,38,38,.16);
  --claro-64:rgba(242,239,236,.64); --claro-24:rgba(242,239,236,.24);
  --display:Impact,"Arial Narrow Bold","Haettenschweiler","Arial Narrow",sans-serif;
  --cuerpo:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --t-caption:14px; --t-body-sm:16px; --t-body:18px; --t-body-lg:20px;
  --t-h-sm:24px; --t-h:40px; --t-h-lg:50px; --t-display-sm:90px; --t-display:110px;
  --s-4:4px;--s-8:8px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;
  --s-40:40px;--s-50:50px;--s-64:64px;--s-80:80px;--s-100:100px;
  --pagina:1450px;
  --r-chip:8px; --r-tarjeta:10px; --r-grande:32px; --r-panel:50px; --r-pastilla:279px;
  --d-tarjeta:250ms; --e:ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--papel);color:var(--carbon);font-family:var(--cuerpo);
  font-size:var(--t-body);line-height:1.1;letter-spacing:-.03em;overflow-x:clip}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:lowercase}
h1{font-size:var(--t-display-sm);line-height:1;letter-spacing:-.04em}
h2{font-size:var(--t-h-lg);line-height:1}
h3{font-size:var(--t-h-sm);line-height:1}
p{margin:0 0 var(--s-16);line-height:1.35}
p:last-child{margin-bottom:0}
@media(max-width:991px){h1{font-size:var(--t-h-lg)}h2{font-size:var(--t-h)}}
@media(max-width:479px){h1{font-size:var(--t-h)}}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:24px}
@media(max-width:479px){.marco{padding-inline:16px}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ Entradas ════════════════════════════════════════════════════════ */
.js-on .revelar{opacity:0;transform:translateY(16px);
  transition:opacity 600ms ease-out,transform 600ms ease-out}
.js-on .revelar.visto{opacity:1;transform:none}
.filete{height:2px;background:var(--hueso);margin-bottom:var(--s-32);transform-origin:left}
.js-on .filete{transform:scaleX(0);transition:transform 600ms ease-out}
.js-on .filete.visto{transform:scaleX(1)}

/* ═══ BLOQUE 1.0 — Chips de navegación ════════════════════════════════
   Pastilla hueso de 8 px que vira a ascua sobre algodón: el patrón que la
   plantilla aplica por igual a nav, enlaces de vuelta y etiquetas. */
.chip{display:inline-block;background:var(--hueso);color:var(--carbon);
  border-radius:var(--r-chip);padding:6px 12px;font-size:var(--t-body-sm);
  text-decoration:none;transition:background var(--d-tarjeta) var(--e),color var(--d-tarjeta) var(--e)}
a.chip:hover,.chip.activo{background:var(--algodon);color:var(--ascua)}
.barra{position:sticky;top:0;z-index:20;background:var(--papel);
  border-bottom:2px solid var(--hueso)}
.barra .marco{min-height:64px;display:flex;align-items:center;gap:var(--s-16);
  flex-wrap:wrap;padding-block:var(--s-8)}
.firma-marca{font-family:var(--display);font-size:var(--t-h-sm);text-transform:lowercase;
  text-decoration:none;margin-right:auto}
.barra nav{display:flex;flex-wrap:wrap;gap:var(--s-8)}

/* ═══ BLOQUE 2.0 — Marquesina « echo-hero-1 » ═════════════════════════
   Tres copias del juego de palabras desplazándose a -33,33 %; se detiene al
   pasar el puntero, como en la plantilla. */
.marquesina{overflow:hidden;padding-block:var(--s-40) 0}
.pista-mq{display:flex;width:max-content;gap:20px;animation:mq 44s linear infinite}
.marquesina:hover .pista-mq{animation-play-state:paused}
.grupo-mq{display:flex;gap:20px;flex:none}
.grupo-mq span{font-family:var(--display);font-size:var(--t-display);line-height:1;
  letter-spacing:-.06em;white-space:nowrap;text-transform:lowercase}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@media(max-width:767px){.grupo-mq span{font-size:var(--t-display-sm)}}
@media(max-width:479px){.grupo-mq span{font-size:64px}}

/* ═══ BLOQUE 3.0 — Terna de tarjetas de color ═════════════════════════ */
.terna{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding-block:var(--s-40) var(--s-100)}
@media(max-width:767px){.terna{grid-template-columns:repeat(2,1fr)}}
@media(max-width:479px){.terna{grid-template-columns:1fr;padding-bottom:var(--s-50)}}
.bloque{border-radius:var(--r-tarjeta);padding:25px 20px 40px;display:flex;
  flex-direction:column;align-items:center;text-align:center;gap:var(--s-32);
  text-decoration:none}
.bloque.cielo{background:var(--cielo);color:var(--carbon)}
.bloque.borgona{background:var(--borgona);color:var(--ascua)}
.bloque.algodon{background:var(--algodon);color:var(--borgona)}
.bloque p{font-size:var(--t-body-sm);line-height:1.3;margin:0}
.bloque .rotulo{font-family:var(--display);font-size:var(--t-h);line-height:1;
  text-transform:lowercase;margin-top:auto}
/* Silueta pegatina sin archivo: sólo radios asimétricos. */
.silueta{width:min(200px,60%);aspect-ratio:1;display:block;background:currentColor}
.silueta.uno{border-radius:44% 56% 61% 39% / 52% 43% 57% 48%}
.silueta.dos{border-radius:62% 38% 35% 65% / 41% 62% 38% 59%}
.silueta.tres{border-radius:30% 70% 46% 54% / 63% 33% 67% 37%}

.portada{padding-block:0}

/* ═══ BLOQUE 4.0 — Secciones ══════════════════════════════════════════ */
.seccion{padding-block:var(--s-100)}
.seccion.corta{padding-block:var(--s-64)}
.seccion.hueso{background:var(--hueso)}
.seccion h2{margin-top:var(--s-16)}
.seccion .intro{margin-top:var(--s-24);max-width:70ch}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-64)}
@media(max-width:991px){.dos{grid-template-columns:1fr;gap:var(--s-40)}}

/* ═══ BLOQUE 5.0 — Tarjetas de contenido ══════════════════════════════ */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;margin-top:var(--s-40)}
.tarjeta{border-radius:var(--r-tarjeta);padding:30px;background:var(--hueso)}
.tarjeta.cielo{background:var(--cielo)}
.tarjeta.algodon{background:var(--algodon);color:var(--borgona)}
.tarjeta.borgona{background:var(--borgona);color:var(--hueso)}
.tarjeta.papel{background:var(--papel);border:2px solid var(--hueso)}
.tarjeta p{margin-top:var(--s-16);font-size:var(--t-body-sm)}
.nota{border-radius:var(--r-tarjeta);background:var(--hueso);padding:20px;
  margin-top:var(--s-16)}
.nota b{font-family:var(--display);font-size:var(--t-h-sm);text-transform:lowercase;
  display:block}
.nota span{display:block;margin-top:var(--s-8);font-size:var(--t-body-sm);line-height:1.35}

/* ═══ BLOQUE 6.0 — Tablas dentro de panel hueso ═══════════════════════ */
.panel{background:var(--hueso);border-radius:var(--r-grande);padding:30px;
  margin-top:var(--s-32);overflow-x:auto}
@media(max-width:479px){.panel{padding:16px;border-radius:var(--r-tarjeta)}}
.tabla{width:100%;border-collapse:collapse;min-width:640px;font-size:var(--t-body-sm)}
.tabla caption{text-align:left;font-size:var(--t-caption);color:var(--carbon-64);
  padding-bottom:var(--s-16)}
.tabla th{text-align:left;font-family:var(--display);font-weight:400;font-size:var(--t-body);
  text-transform:lowercase;padding:12px;background:var(--papel);border-radius:var(--r-chip)}
.tabla td{padding:12px;border-top:2px solid var(--papel);line-height:1.35;vertical-align:top}
.tabla .num{white-space:nowrap}
.vacio{color:var(--carbon-64)}

/* ═══ BLOQUE 7.0 — Barras de datos ════════════════════════════════════ */
.grafico{margin-top:var(--s-24);display:flex;flex-direction:column;gap:var(--s-12,12px)}
.grafico .fila{display:grid;grid-template-columns:minmax(96px,1fr) 2fr auto;gap:var(--s-16);
  align-items:center;font-size:var(--t-body-sm)}
.grafico .pista{display:block;height:20px;background:var(--papel);
  border-radius:var(--r-pastilla);overflow:hidden}
.grafico .pista i{display:block;height:100%;width:var(--pct);background:var(--ascua);
  border-radius:var(--r-pastilla)}
.grafico .pista i.suave{background:var(--borgona)}
.grafico .val{white-space:nowrap}
@media(max-width:479px){.grafico .fila{grid-template-columns:1fr;gap:var(--s-4)}}

/* ═══ BLOQUE 8.0 — Cuadrículas de línea ═══════════════════════════════ */
.lineas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;
  margin-top:var(--s-32)}
.linea-fig{background:var(--papel);border:2px solid var(--hueso);
  border-radius:var(--r-tarjeta);padding:20px;text-align:center}
.linea-fig .cab{font-family:var(--display);font-size:var(--t-h-sm);text-transform:lowercase}
.cuadro{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:var(--s-16) auto;
  max-width:140px}
.cuadro i{aspect-ratio:1;background:var(--hueso);border-radius:6px;display:block}
.cuadro i.on{background:var(--ascua)}
.linea-fig .txt{font-size:var(--t-body-sm);color:var(--carbon-64)}

/* ═══ BLOQUE 9.0 — Biblioteca ═════════════════════════════════════════ */
.biblioteca{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
  margin-top:var(--s-40)}
.biblioteca a{display:flex;flex-direction:column;gap:var(--s-12,12px);padding:30px;
  border-radius:var(--r-tarjeta);background:var(--papel);border:2px solid var(--hueso);
  text-decoration:none;transition:background var(--d-tarjeta) var(--e)}
.biblioteca a:hover{background:var(--cielo)}
.biblioteca .n{font-family:var(--display);font-size:var(--t-h);line-height:1;color:var(--ascua)}
.biblioteca .t{font-family:var(--display);font-size:var(--t-h-sm);text-transform:lowercase}
.biblioteca .g{display:block;margin-top:var(--s-8);font-family:var(--cuerpo);
  font-size:var(--t-body-sm);line-height:1.35;text-transform:none;color:var(--carbon-64)}

/* ═══ BLOQUE 10.0 — Panel grande de cierre y advertencia ══════════════ */
.panel-grande{border-radius:var(--r-panel);padding:var(--s-64) var(--s-50)}
@media(max-width:479px){.panel-grande{padding:var(--s-32) var(--s-24);
  border-radius:var(--r-grande)}}
.panel-grande.cielo{background:var(--cielo)}
.panel-grande.borgona{background:var(--borgona);color:var(--hueso)}
.panel-grande.borgona .tarjeta{background:rgba(242,239,236,.10);color:var(--hueso)}
.panel-grande .intro{max-width:70ch}

/* ═══ BLOQUE 11.0 — Acción, aviso y divulgación ═══════════════════════ */
.cta{display:inline-flex;align-items:center;gap:var(--s-12,12px);
  background:var(--ascua);color:var(--papel);border-radius:var(--r-pastilla);
  padding:16px 32px;font-size:var(--t-body);text-decoration:none;
  transition:background var(--d-tarjeta) var(--e)}
.cta:hover{background:var(--borgona)}
.chevron{display:inline-block;width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-top:var(--s-32)}
.aviso{font-size:var(--t-caption);line-height:1.3;color:var(--carbon-64)}
.borgona .aviso,.panel-grande.borgona .aviso{color:var(--claro-64)}
.divulgacion{margin-top:var(--s-24);font-size:var(--t-caption);line-height:1.35;
  color:var(--carbon-64);max-width:80ch}
.borgona .divulgacion{color:var(--claro-64)}
.enlace{color:var(--ascua);text-decoration:underline;text-underline-offset:3px}
.borgona .enlace{color:var(--algodon)}
.sello{display:inline-block;background:var(--cielo);color:var(--carbon);
  border-radius:var(--r-chip);padding:4px 10px;font-size:var(--t-caption);white-space:nowrap}
.sello.pend{background:var(--algodon);color:var(--borgona)}

/* ═══ BLOQUE 12.0 — Lista de desacuerdos ══════════════════════════════ */
.desacuerdos{list-style:none;margin:var(--s-32) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.desacuerdos li{background:var(--papel);border-radius:var(--r-tarjeta);padding:24px;
  font-size:var(--t-body-sm);line-height:1.35}
.desacuerdos b{font-family:var(--display);font-size:var(--t-h-sm);text-transform:lowercase;
  display:block;margin-bottom:var(--s-8);color:var(--ascua)}

/* ═══ BLOQUE 13.0 — Fichas de firma ═══════════════════════════════════ */
.firma-lista{margin:var(--s-32) 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.firma-lista>div{background:var(--hueso);border-radius:var(--r-tarjeta);padding:24px}
.firma-lista dt{font-family:var(--display);font-size:var(--t-body-lg);text-transform:lowercase}
.firma-lista dd{margin:var(--s-8) 0 0;font-size:var(--t-body-sm);line-height:1.35}

/* ═══ BLOQUE 14.0 — Pie carbón a tres columnas ════════════════════════ */
.pie-sitio{background:var(--carbon);color:var(--hueso);padding-block:73px}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:104px}
@media(max-width:991px){.pie-cols{grid-template-columns:1fr;gap:var(--s-40)}}
.pie-marca{font-family:var(--display);font-size:var(--t-h);line-height:1;
  text-transform:lowercase}
.pie-nota{margin-top:var(--s-16);font-size:var(--t-body-sm);line-height:1.35;
  color:var(--claro-64);max-width:38ch}
.pie-sitio nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-12,12px) var(--s-32)}
.pie-sitio nav a{font-size:var(--t-body-sm);color:var(--claro-64);text-decoration:none;
  transition:color var(--d-tarjeta) var(--e)}
.pie-sitio nav a:hover{color:var(--ascua)}
.legal{margin-top:var(--s-24);font-size:var(--t-caption);line-height:1.4;
  color:var(--claro-24);max-width:94ch}