/* LS | Argoma. Hoja de estilo
   Concepto: el trazo de lacre del logotipo parte la página como parte el nombre.
   Escenas en tinta (cabecera, portada, cifras, pie) alternan con pliegos de papel. */

:root {
  --papel: #f6f5f2;
  --papel-2: #ebe9e3;
  --tinta: #141414;
  --grafito: #5b5a57;
  --lacre: #b03018;
  --lacre-suave: #f3e3de;
  --filete: #d6d3cb;
  --sobre-tinta: #f6f5f2;

  /* Escena: siempre oscura, en ambos temas */
  --noche: #0e0e0f;
  --noche-2: #19191b;
  --marfil: #f1ede5;
  --ceniza: #9d988f;
  --lacre-vivo: #d9573c;
  --hilo: #2c2c2f;

  --f-titulo: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;
  --f-texto: "Jost", "Futura", "Century Gothic", "Segoe UI", sans-serif;

  --t-xs: 0.78rem;
  --t-s: 0.92rem;
  --t-m: 1.06rem;
  --t-l: 1.32rem;
  --t-xl: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --t-xxl: clamp(3rem, 0.8rem + 6.2vw, 7.4rem);

  --ancho: 80rem;
  --lado: clamp(1rem, 4vw, 2.75rem);
  --eje: 14rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #131315;
    --papel-2: #1b1b1e;
    --tinta: #efebe4;
    --grafito: #a7a39b;
    --lacre: #d9573c;
    --lacre-suave: #2b1915;
    --filete: #2f2f33;
    --sobre-tinta: #131315;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #131315;
  --papel-2: #1b1b1e;
  --tinta: #efebe4;
  --grafito: #a7a39b;
  --lacre: #d9573c;
  --lacre-suave: #2b1915;
  --filete: #2f2f33;
  --sobre-tinta: #131315;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  font-weight: 380;
  line-height: 1.68;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--lacre); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--lacre); }
:focus-visible { outline: 2px solid var(--lacre); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; font-optical-sizing: auto; }
p { margin: 0; }
em { font-style: italic; }
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--lado); }
.saltar { position: absolute; left: -999px; top: 0; background: var(--lacre); color: #fff; padding: 0.6rem 1rem; z-index: 50; }
.saltar:focus { left: 1rem; }

.rotulo {
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafito);
}

/* El trazo: huso vertical de lacre, como en el logotipo */
.trazo {
  width: 3px;
  background: linear-gradient(to bottom, transparent, var(--lacre) 16%, var(--lacre) 84%, transparent);
  border-radius: 50%;
  flex: none;
}

/* Hilo de progreso de lectura */
.progreso {
  position: fixed; left: 0; top: 0; bottom: 0; width: 3px; z-index: 30;
  background: linear-gradient(to bottom, var(--lacre-vivo), var(--lacre));
  transform-origin: top; transform: scaleY(0);
  pointer-events: none;
}

/* ===== Cabecera (siempre en tinta) ===== */
.cabecera {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--noche) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--marfil);
  border-bottom: 1px solid var(--hilo);
}
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; }
.marca { display: block; width: 11.5rem; flex: none; }
.marca img { width: 100%; }
.menu { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2.1rem); }
.menu a {
  color: var(--marfil);
  text-decoration: none;
  font-size: var(--t-s);
  font-weight: 420;
  letter-spacing: 0.06em;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.menu a:hover { color: var(--lacre-vivo); }
.menu a[aria-current="page"] { border-bottom-color: var(--lacre-vivo); }
.menu .boton { padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--marfil); }
.abrir-menu {
  display: none;
  background: none;
  border: 1px solid var(--hilo);
  color: var(--marfil);
  font: inherit;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
@media (max-width: 980px) {
  .abrir-menu { display: block; }
  .menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--noche);
    border-bottom: 1px solid var(--hilo);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--lado) 1.4rem;
  }
  .menu.abierto { display: flex; }
  .menu a { padding-block: 0.9rem; border-bottom: 1px solid var(--hilo); font-family: var(--f-titulo); font-size: 1.4rem; letter-spacing: 0; }
  .menu a[aria-current="page"] { color: var(--lacre-vivo); border-bottom-color: var(--hilo); }
  .menu .boton { margin-top: 1.2rem; text-align: center; font-family: var(--f-texto); font-size: var(--t-s); letter-spacing: 0.12em; }
}

/* ===== Botones ===== */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-texto);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--sobre-tinta);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.boton:hover { background: var(--lacre); border-color: var(--lacre); color: #fff; }
.boton.hueco { background: transparent; color: var(--tinta); }
.boton.hueco:hover { color: var(--lacre); border-color: var(--lacre); }
.en-noche .boton, .cabecera .boton { background: var(--marfil); color: var(--noche); border-color: var(--marfil); }
.en-noche .boton:hover, .cabecera .boton:hover { background: var(--lacre-vivo); border-color: var(--lacre-vivo); color: #fff; }
.en-noche .boton.hueco { background: transparent; color: var(--marfil); border-color: color-mix(in srgb, var(--marfil) 45%, transparent); }
.en-noche .boton.hueco:hover { color: var(--lacre-vivo); border-color: var(--lacre-vivo); }
.flecha { display: inline-block; transition: transform 0.25s; }
.boton:hover .flecha { transform: translateX(4px); }

/* ===== Escena de portada ===== */
.en-noche { background: var(--noche); color: var(--marfil); }
.en-noche .rotulo { color: var(--ceniza); }
.escena { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 7.5rem) 0; isolation: isolate; }
.escena .marca-agua {
  position: absolute; z-index: -1; right: -4vw; bottom: -8vw;
  font-family: var(--f-titulo); font-size: clamp(16rem, 42vw, 44rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--marfil) 9%, transparent);
  letter-spacing: 0.06em; user-select: none; pointer-events: none;
}
.escena .halo {
  position: absolute; z-index: -1; left: 50%; top: 38%; width: 60vw; height: 60vw; max-width: 56rem; max-height: 56rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lacre-vivo) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.escena .cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: clamp(2rem, 5vw, 4rem); }
.titulo-partido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(1rem, 3.5vw, 3.2rem);
  align-items: center;
  font-size: var(--t-xxl);
  letter-spacing: -0.015em;
  font-weight: 400;
}
.titulo-partido .izq { text-align: right; }
.titulo-partido .der { text-align: left; }
.titulo-partido > span { display: block; min-width: 0; }
.titulo-partido .linea { display: block; }
.titulo-partido em { color: var(--lacre-vivo); font-weight: 400; }
.titulo-partido .trazo { width: 4px; height: 100%; min-height: clamp(10rem, 26vw, 24rem); align-self: stretch; background: linear-gradient(to bottom, transparent, var(--lacre-vivo) 14%, var(--lacre-vivo) 86%, transparent); transform-origin: center; }
.escena .subtitulo {
  margin: clamp(2rem, 4vw, 3.2rem) auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: var(--t-l);
  font-weight: 330;
  line-height: 1.6;
  color: color-mix(in srgb, var(--marfil) 78%, transparent);
}
.escena .acciones { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.escena .zocalo {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--hilo);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.zocalo > div { padding: 1.4rem 1.2rem 1.6rem 0; display: grid; gap: 0.25rem; min-width: 0; }
.zocalo > div + div { padding-left: 1.4rem; border-left: 1px solid var(--hilo); }
.zocalo b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.zocalo span { font-size: var(--t-s); color: var(--ceniza); }
@media (max-width: 760px) {
  .titulo-partido { grid-template-columns: 1fr; row-gap: 0.4rem; text-align: left; }
  .titulo-partido .izq, .titulo-partido .der { text-align: left; }
  .titulo-partido .trazo { width: 42%; min-height: 0; height: 3px; background: linear-gradient(to right, var(--lacre-vivo) 60%, transparent); }
  .escena .subtitulo { text-align: left; margin-inline: 0; }
  .escena .acciones { justify-content: flex-start; }
  .escena .zocalo { grid-template-columns: 1fr; }
  .zocalo > div, .zocalo > div + div { padding: 1.1rem 0; border-left: 0; border-bottom: 1px solid var(--hilo); }
}

/* Coreografía de entrada: parte de un estado visible */
@keyframes asoma { from { transform: translateY(14px); opacity: 0.25; } to { transform: none; opacity: 1; } }
@keyframes traza { from { transform: scaleY(0.05); } to { transform: none; } }
@keyframes traza-h { from { transform: scaleX(0.05); } to { transform: none; } }
.escena .izq { animation: asoma 1s 0.35s cubic-bezier(.2,.7,.2,1) both; }
.escena .der { animation: asoma 1s 0.55s cubic-bezier(.2,.7,.2,1) both; }
.escena .titulo-partido .trazo { animation: traza 1.2s cubic-bezier(.2,.7,.2,1) both; }
.escena .subtitulo { animation: asoma 1s 0.8s ease-out both; }
.escena .acciones { animation: asoma 1s 0.95s ease-out both; }
@media (max-width: 760px) { .escena .titulo-partido .trazo { transform-origin: left; animation-name: traza-h; } }

/* ===== Cinta de materias ===== */
.cinta { background: var(--noche); color: var(--marfil); border-top: 1px solid var(--hilo); border-bottom: 1px solid var(--hilo); overflow: hidden; padding-block: 1.3rem; }
.cinta .pista { display: flex; width: max-content; animation: corre 60s linear infinite; }
.cinta:hover .pista { animation-play-state: paused; }
.cinta ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.cinta li { font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); white-space: nowrap; padding-inline: 1.6rem; display: flex; align-items: center; gap: 3.2rem; }
.cinta li::after { content: ""; width: 2px; height: 1.6em; background: linear-gradient(to bottom, transparent, var(--lacre-vivo), transparent); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ===== Secciones de papel ===== */
.seccion { padding-block: clamp(4rem, 9vw, 7.5rem); }
.seccion + .seccion { border-top: 1px solid var(--filete); }
.seccion.tono { background: var(--papel-2); }
.con-eje { display: grid; grid-template-columns: var(--eje) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3.5rem); }
.con-eje > .rotulo { padding-top: 0.6rem; border-top: 2px solid var(--lacre); align-self: start; }
.cuerpo { min-width: 0; }
.cuerpo h2 { font-size: var(--t-xl); max-width: 26ch; }
.cuerpo > p, .prosa p { max-width: 64ch; }
.cuerpo > h2 + p, .cuerpo > h2 + .prosa { margin-top: 1.5rem; }
.prosa { display: grid; gap: 1.1rem; }
.prosa .apagado { color: var(--grafito); }
@media (max-width: 860px) { .con-eje { grid-template-columns: 1fr; } .con-eje > .rotulo { justify-self: start; } }

/* Manifiesto que se enciende con la lectura */
.manifiesto { padding-block: clamp(5rem, 12vw, 10rem); }
.manifiesto .texto {
  font-family: var(--f-titulo);
  font-size: clamp(1.75rem, 1rem + 3.1vw, 3.7rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin-top: 2rem;
}
.manifiesto .texto .p { color: color-mix(in srgb, var(--tinta) 36%, var(--papel)); transition: color 0.5s; }
.manifiesto .texto .p.lit { color: var(--tinta); }
.manifiesto .texto em.p.lit { color: var(--lacre); }
.manifiesto .firma { margin-top: 3rem; }

/* Índice monumental de áreas */
.indice { margin-top: 3rem; border-top: 1px solid var(--tinta); }
.indice a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--filete);
  text-decoration: none;
  color: var(--tinta);
}
.indice a::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  background: linear-gradient(to bottom, transparent, var(--lacre) 20%, var(--lacre) 80%, transparent);
  border-radius: 50%;
  transform: scaleY(0); transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.indice .nombre { font-family: var(--f-titulo); font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -0.015em; transition: transform 0.45s cubic-bezier(.2,.7,.2,1), color 0.3s; }
.indice .nombre i { font-style: italic; color: var(--lacre); }
.indice .desc { color: var(--grafito); font-size: var(--t-s); max-width: 40ch; }
.indice .ir { font-size: 1.6rem; color: var(--lacre); transition: transform 0.35s; }
.indice a:hover::before, .indice a:focus-visible::before { transform: scaleY(1); }
.indice a:hover .nombre, .indice a:focus-visible .nombre { transform: translateX(1.4rem); }
.indice a:hover .ir { transform: translateX(6px) rotate(-45deg); }
@media (max-width: 760px) {
  .indice a { grid-template-columns: minmax(0, 1fr) auto; }
  .indice .desc { grid-column: 1 / -1; grid-row: 2; }
}

/* Cifras en escena */
.cifras { padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; overflow: hidden; }
.cifras .rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: end; }
.cifras .numero { font-family: var(--f-titulo); font-size: clamp(7rem, 4rem + 14vw, 17rem); line-height: 0.8; letter-spacing: -0.04em; color: var(--marfil); font-variant-numeric: lining-nums tabular-nums; }
.cifras .numero small { font-size: 0.32em; color: var(--lacre-vivo); font-style: italic; letter-spacing: 0; margin-right: 0.15em; vertical-align: 0.9em; }
.cifras h2 { font-size: var(--t-xl); }
.cifras p { margin-top: 1.2rem; color: color-mix(in srgb, var(--marfil) 75%, transparent); max-width: 46ch; }
.cifras .acciones { margin-top: 2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
@media (max-width: 860px) { .cifras .rejilla { grid-template-columns: 1fr; } }

/* Método: secuencia real del encargo */
.metodo { margin: 3rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: paso; }
.metodo li { counter-increment: paso; padding: 0 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.metodo li + li { padding-left: 1.5rem; border-left: 1px solid var(--filete); }
.metodo li::before { content: counter(paso, upper-roman); font-family: var(--f-titulo); font-style: italic; font-size: 3rem; color: var(--lacre); line-height: 1; }
.metodo h3 { font-size: 1.3rem; }
.metodo p { font-size: var(--t-s); color: var(--grafito); }
@media (max-width: 900px) {
  .metodo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
  .metodo li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .metodo { grid-template-columns: 1fr; }
  .metodo li, .metodo li + li { padding: 0; border-left: 0; }
}

/* Firma */
.firma { display: flex; gap: 1.2rem; align-items: stretch; }
.firma .trazo { min-height: 4.6rem; }
.firma strong { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: 1.3rem; }
.firma span { display: block; font-size: var(--t-s); color: var(--grafito); }

/* Llamada final */
.llamada { padding-block: clamp(4.5rem, 10vw, 8rem); text-align: center; position: relative; overflow: hidden; }
.llamada .grande { font-family: var(--f-titulo); font-size: clamp(3.6rem, 1.5rem + 9vw, 9.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.llamada .grande em { color: var(--lacre-vivo); }
.llamada p { margin: 1.6rem auto 0; max-width: 46ch; color: color-mix(in srgb, var(--marfil) 75%, transparent); }
.llamada .acciones { margin-top: 2.4rem; display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.llamada .trazo-h { width: 3px; height: 4.5rem; margin: 0 auto 2rem; background: linear-gradient(to bottom, transparent, var(--lacre-vivo), transparent); border-radius: 50%; }

/* ===== Páginas interiores ===== */
.titular { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem); position: relative; overflow: hidden; isolation: isolate; }
.titular .envoltura { display: grid; grid-template-columns: var(--eje) auto minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.8rem); }
.titular h1 { font-size: clamp(2.6rem, 1.2rem + 5vw, 5.6rem); letter-spacing: -0.015em; }
.titular h1 em { color: var(--lacre-vivo); }
.titular .entrada { margin-top: 1.5rem; font-size: var(--t-l); color: color-mix(in srgb, var(--marfil) 75%, transparent); max-width: 46rem; font-weight: 330; line-height: 1.6; }
.titular .trazo { min-height: 9rem; background: linear-gradient(to bottom, transparent, var(--lacre-vivo) 16%, var(--lacre-vivo) 84%, transparent); animation: traza 1.1s cubic-bezier(.2,.7,.2,1) both; }
.titular h1, .titular .entrada { animation: asoma 0.9s 0.2s ease-out both; }
.titular .marca-agua { position: absolute; z-index: -1; right: -2vw; bottom: -6vw; font-family: var(--f-titulo); font-style: italic; font-size: clamp(10rem, 28vw, 30rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--marfil) 8%, transparent); pointer-events: none; user-select: none; }
@media (max-width: 860px) {
  .titular .envoltura { grid-template-columns: 1fr; }
  .titular .trazo { display: none; }
}

/* Áreas detalladas */
.area { display: grid; grid-template-columns: var(--eje) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3.5rem); padding-block: clamp(2.4rem, 5vw, 3.6rem); border-top: 1px solid var(--filete); }
.area:first-child { border-top: 0; padding-top: 0; }
.area .sig { font-family: var(--f-titulo); font-style: italic; color: var(--lacre); font-size: 2.6rem; line-height: 1; }
.area h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.area .prosa { margin-top: 1rem; }
.area .prosa p { color: var(--grafito); }
.area ul { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2.4rem; }
.area li { padding-left: 1.2rem; position: relative; font-size: var(--t-s); }
.area li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.55rem; height: 1px; background: var(--lacre); }
.area .norma { margin-top: 1.3rem; font-size: var(--t-xs); letter-spacing: 0.03em; color: var(--grafito); font-style: italic; }
@media (max-width: 860px) { .area { grid-template-columns: 1fr; gap: 0.7rem; } .area ul { grid-template-columns: 1fr; } }

/* Valores */
.valores { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 3.5rem; }
.valores div { display: grid; gap: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--tinta); align-content: start; }
.valores h3 { font-size: 1.9rem; }
.valores h3 em { color: var(--lacre); }
.valores p { color: var(--grafito); }
@media (max-width: 700px) { .valores { grid-template-columns: 1fr; } }

blockquote.cita { margin: 0; font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.8rem); line-height: 1.3; max-width: 30ch; }
blockquote.cita + .firma { margin-top: 2.2rem; }

/* ===== Contacto ===== */
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2.5rem, 6vw, 5rem); }
@media (max-width: 860px) { .contacto-rejilla { grid-template-columns: 1fr; } }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.6rem; }
.formulario .ancho { grid-column: 1 / -1; }
@media (max-width: 600px) { .formulario { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--grafito); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1.1rem; color: var(--tinta); background: transparent;
  border: 0; border-bottom: 1px solid var(--grafito); padding: 0.6rem 0; border-radius: 0; width: 100%;
  transition: border-color 0.2s;
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grafito) 50%), linear-gradient(135deg, var(--grafito) 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo select option { background: var(--papel); color: var(--tinta); }
.campo textarea { min-height: 10rem; resize: vertical; border: 1px solid var(--grafito); padding: 0.8rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--lacre); }
.casilla { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-s); color: var(--grafito); }
.casilla input { margin-top: 0.35rem; accent-color: var(--lacre); width: 1rem; height: 1rem; flex: none; }
.capa-info { font-size: var(--t-xs); line-height: 1.65; color: var(--grafito); border-left: 2px solid var(--lacre); padding-left: 0.9rem; }
.trampa { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.aviso-envio { padding: 0.9rem 1rem; background: var(--lacre-suave); border-left: 2px solid var(--lacre); font-size: var(--t-s); }
.datos-contacto { display: grid; gap: 1.8rem; align-content: start; }
.datos-contacto dl { margin: 0; display: grid; gap: 1.6rem; }
.datos-contacto dd { margin: 0.25rem 0 0; font-family: var(--f-titulo); font-size: 1.35rem; line-height: 1.35; }
.copiar { margin-left: 0.5rem; font-family: var(--f-texto); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; background: none; border: 1px solid var(--filete); color: var(--grafito); padding: 0.1rem 0.5rem; cursor: pointer; vertical-align: middle; }
.copiar:hover { border-color: var(--lacre); color: var(--lacre); }

/* ===== Textos legales ===== */
.legal { max-width: 52rem; }
.legal h2 { font-size: 1.6rem; margin-top: 2.8rem; margin-bottom: 0.9rem; }
.legal h2:first-child { margin-top: 0; }
.legal p + p { margin-top: 0.9rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin: 0.8rem 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin-top: 0.8rem; }
.legal th, .legal td { text-align: left; padding: 0.65rem 0.8rem 0.65rem 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
.legal th { font-weight: 500; width: 34%; color: var(--grafito); }
.tabla-desliza { overflow-x: auto; }
.pendiente { background: var(--lacre-suave); color: var(--lacre); padding: 0 0.3rem; font-weight: 500; }

/* ===== Pie (en tinta) ===== */
.pie { padding-block: 4.5rem 2rem; font-size: var(--t-s); border-top: 1px solid var(--hilo); }
.pie .rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.pie .marca { width: 12rem; }
.pie ul { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.4rem; }
.pie a { text-decoration: none; color: var(--marfil); }
.pie a:hover { color: var(--lacre-vivo); }
.pie .lema { margin-top: 1.2rem; color: var(--ceniza); max-width: 30ch; font-family: var(--f-titulo); font-style: italic; font-size: 1.15rem; line-height: 1.4; }
.pie address { font-style: normal; margin-top: 0.9rem; color: var(--marfil); }
.pie .base { margin-top: 3.5rem; padding-top: 1.3rem; border-top: 1px solid var(--hilo); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--ceniza); font-size: var(--t-xs); letter-spacing: 0.05em; }
@media (max-width: 860px) { .pie .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie .rejilla > :first-child { grid-column: 1 / -1; } }
@media (max-width: 460px) { .pie .rejilla { grid-template-columns: 1fr; } }

/* Aparición al desplazarse: solo si el script la activa; el reposo es visible */
.js .revela { transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.js .revela.espera { opacity: 0.001; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela.espera { opacity: 1; transform: none; }
  .progreso { display: none; }
}

/* ===== Fotografía ===== */
.escena-foto, .titular-foto, .cifras-foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.escena-foto img, .titular-foto img, .cifras-foto img { width: 100%; height: 100%; object-fit: cover; }
.escena-foto img { object-position: center 30%; filter: grayscale(0.15); animation: respira 22s ease-in-out infinite alternate; }
.escena-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--noche) 58%, transparent), color-mix(in srgb, var(--noche) 30%, transparent) 80%),
    linear-gradient(to bottom, color-mix(in srgb, var(--noche) 55%, transparent) 0%, color-mix(in srgb, var(--noche) 20%, transparent) 40%, var(--noche) 97%);
}
@keyframes respira { from { transform: scale(1.02); } to { transform: scale(1.09); } }

.titular.con-foto { padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3.5rem, 7vw, 5.5rem); }
.titular-foto img { object-position: center 40%; }
.titular-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--noche) 18%, color-mix(in srgb, var(--noche) 82%, transparent) 48%, color-mix(in srgb, var(--noche) 35%, transparent) 100%);
}
.titular.con-foto .marca-agua { display: none; }
@media (max-width: 860px) {
  .titular-foto::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--noche) 55%, transparent), color-mix(in srgb, var(--noche) 92%, transparent) 70%); }
}

.cifras.con-foto { isolation: isolate; }
.cifras-foto img { filter: grayscale(0.35); }
.cifras-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--noche) 70%, transparent), color-mix(in srgb, var(--noche) 92%, transparent) 55%); }

/* Cercanía: foto y texto a sangre */
.cercania { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--papel); border-top: 1px solid var(--filete); }
.cercania-foto { margin: 0; position: relative; min-height: 32rem; overflow: hidden; }
.cercania-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.cercania-foto:hover img { transform: scale(1.03); }
.cercania-foto::after { content: ""; position: absolute; right: 0; top: 12%; bottom: 12%; width: 4px; background: linear-gradient(to bottom, transparent, var(--lacre) 18%, var(--lacre) 82%, transparent); border-radius: 50%; }
.cercania-texto { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); display: grid; gap: 1.2rem; align-content: center; max-width: 40rem; }
.cercania-texto h2 { font-size: var(--t-xl); }
.cercania-texto h2 em { color: var(--lacre); }
.cercania-texto p { color: var(--grafito); }
.cercania-texto .acciones { margin-top: 0.8rem; }
@media (max-width: 860px) {
  .cercania { grid-template-columns: 1fr; }
  .cercania-foto { min-height: 0; aspect-ratio: 4 / 3; max-width: 100%; }
  .cercania-foto::after { display: none; }
}

/* Visor flotante del índice de áreas */
#areas .envoltura { position: relative; }
.indice a { z-index: 4; }
.indice .nombre { text-shadow: 0 0 1.2rem var(--papel-2); }
.indice-visor {
  position: absolute; left: 0; top: 0; width: 17rem; aspect-ratio: 4 / 3; pointer-events: none; z-index: 3;
  opacity: 0; transform: scale(0.92) rotate(-2deg); transition: opacity 0.3s, transform 0.35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 1.2rem 2.5rem rgba(0,0,0,0.25); overflow: hidden;
}
.indice-visor img { width: 100%; height: 100%; object-fit: cover; }
.indice-visor.ve { opacity: 1; transform: scale(1) rotate(-2deg); }
@media (hover: none), (max-width: 860px) { .indice-visor { display: none; } }

@media (prefers-reduced-motion: reduce) { .escena-foto img { animation: none; } }

.cifras .numero { font-size: clamp(5.5rem, 2.5rem + 9vw, 12.5rem); }
.cifras .numero small { vertical-align: 0.75em; }
.numero-pie { display: block; font-size: 0.17em; font-style: italic; letter-spacing: 0.02em; color: var(--lacre-vivo); margin-top: 0.5em; line-height: 1; }
.cifras .numero small { font-family: var(--f-texto); font-size: 0.42em; font-style: normal; font-weight: 300; vertical-align: 0.42em; margin-right: 0.05em; }

/* ===== Actualidad ===== */
.vacio { color: var(--grafito); font-style: italic; font-family: var(--f-titulo); font-size: 1.25rem; max-width: 48ch; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.8rem; }
.filtros a { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.4rem 0.75rem; border: 1px solid var(--filete); color: var(--grafito); }
.filtros a:hover { border-color: var(--lacre); color: var(--lacre); }
.filtros a[aria-current] { background: var(--tinta); color: var(--sobre-tinta); border-color: var(--tinta); }
.novedades { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--tinta); }
.novedades li { padding: 1.05rem 0; border-bottom: 1px solid var(--filete); display: grid; gap: 0.35rem; min-width: 0; }
.novedades a { text-decoration: none; font-family: var(--f-titulo); font-size: 1.15rem; line-height: 1.35; overflow-wrap: anywhere; }
.novedades a:hover { color: var(--lacre); text-decoration: underline; }
.nov-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--grafito); align-items: center; }
.nov-fuente { font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lacre); }
.nov-materia { border: 1px solid var(--filete); padding: 0 0.45rem; }
.notas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.6rem; }
.nota-ficha { display: grid; gap: 0.7rem; align-content: start; padding: 1.4rem 0 0; border-top: 2px solid var(--tinta); text-decoration: none; color: var(--tinta); }
.nota-ficha:hover .nota-ficha-titulo { color: var(--lacre); }
.nota-ficha-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-xs); color: var(--grafito); }
.nota-ficha-titulo { font-family: var(--f-titulo); font-size: 1.55rem; line-height: 1.2; transition: color 0.2s; }
.nota-ficha-entradilla { color: var(--grafito); font-size: var(--t-s); }
.nota-ficha-leer { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.nota-ficha-leer span { color: var(--lacre); }
.pa-rejilla { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; }
.pa-rejilla.solo-novedades { grid-template-columns: 1fr; }
.pa-rejilla .novedades { margin-top: 0.8rem; }
.pa-lista-notas { display: grid; gap: 1.4rem; margin-top: 0.8rem; }
@media (max-width: 860px) { .pa-rejilla { grid-template-columns: 1fr; } }

/* Nota completa */
.nota-pagina .envoltura { max-width: 52rem; }
.volver { margin-bottom: 2rem; font-size: var(--t-s); }
.volver a { text-decoration: none; }
.nota-meta { display: flex; gap: 1.2rem; align-items: baseline; font-size: var(--t-s); color: var(--grafito); }
.nota-meta .rotulo { color: var(--lacre); }
.nota-titulo { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); margin-top: 1rem; }
.nota-entradilla { margin-top: 1.3rem; font-size: var(--t-l); line-height: 1.55; color: var(--grafito); font-weight: 350; }
.nota-cuerpo { margin-top: 2rem; }
.nota-cuerpo p { font-size: 1.1rem; line-height: 1.78; }
.nota-fuente { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--filete); font-size: var(--t-s); overflow-wrap: anywhere; }
.nota-fuente .rotulo { margin-right: 0.5rem; }
.nota-aviso { margin-top: 1.2rem; font-size: var(--t-xs); color: var(--grafito); font-style: italic; }
.nota-cierre { margin-top: 3rem; padding: 1.6rem; background: var(--papel-2); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.nota-cierre p { font-family: var(--f-titulo); font-size: 1.4rem; }
.es-borrador { position: relative; }
.es-borrador::before { content: "BORRADOR"; display: inline-block; margin-bottom: 1rem; font-size: var(--t-xs); letter-spacing: 0.2em; color: var(--lacre); border: 1px solid var(--lacre); padding: 0.1rem 0.5rem; }

/* Panel */
.panel h1, .panel-acceso h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-top: 0.4rem; }
.panel-acceso { max-width: 36rem; display: grid; gap: 1.2rem; }
.panel-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.panel-acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1rem 0 1.5rem; }
.panel-botones { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.panel-botones .boton, .panel-acciones .boton { padding: 0.65rem 1.1rem; }
.panel-titulo { font-size: 1.5rem; margin-top: 2.4rem; display: flex; gap: 0.6rem; align-items: baseline; }
.panel-titulo span { font-family: var(--f-texto); font-size: var(--t-s); color: var(--lacre); }
.panel-lista { list-style: none; padding: 0; margin: 0.8rem 0 0; border-top: 1px solid var(--tinta); }
.panel-lista li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-bottom: 1px solid var(--filete); }
.panel-lista strong { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: 1.15rem; }
.panel-lista li > div:first-child { min-width: 0; flex: 1 1 20rem; }
.panel-lista span { font-size: var(--t-xs); color: var(--grafito); }
.panel-edicion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.panel-vista { border: 1px solid var(--filete); padding: 1.6rem; background: var(--papel); }
.panel-decision { display: grid; gap: 1rem; align-content: start; position: sticky; top: 6rem; }
@media (max-width: 960px) { .panel-edicion { grid-template-columns: 1fr; } .panel-decision { position: static; } }
.cercania-texto .lema-cercania { font-family: var(--f-titulo); font-style: italic; font-size: 1.35rem; color: var(--tinta); border-left: 3px solid var(--lacre); padding-left: 0.9rem; }

/* Textos legales */
.legal-intro { font-size: var(--t-l); line-height: 1.6; color: var(--grafito); font-weight: 350; }
.legal-indice { margin: 2rem 0 1rem; padding: 1.4rem 1.6rem; background: var(--papel-2); border-left: 3px solid var(--lacre); }
.legal-indice ol { list-style: none; margin: 0.8rem 0 0; padding: 0; columns: 2 16rem; column-gap: 2rem; }
.legal-indice li { break-inside: avoid; padding: 0.2rem 0; font-size: var(--t-s); }
.legal-indice a { text-decoration: none; }
.legal-indice a:hover { text-decoration: underline; }
.legal h2 { scroll-margin-top: 6rem; }
.legal h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; scroll-margin-top: 6rem; }
.legal .tabla-cookies th { width: auto; color: var(--tinta); border-bottom: 1px solid var(--tinta); }
.legal .tabla-cookies td { min-width: 8rem; }