/* tinta.css — el registro visual (dirección del operador 2026-09-08, revisada).
   Concepto: VIÑETAS COMO SUPERFICIES CON LUZ. Un cómic son planos separados
   por medianiles; aquí el plano no es papel con un borde de tinta grueso, es
   una pantalla: una superficie blanca que flota sobre el fondo blanco,
   sostenida por una línea de 1px y una sombra suave. Lo de cómic está en la
   geometría y el ritmo; lo futurista, en la luz.

   Sustituye a la dirección anterior («fanzine, trazo sucio, medianiles
   marcados»), descartada por el operador: audacia no es tosquedad.

   Reparto de la audacia: UN gesto por página. En la portada, la pila de
   viñetas del hero. En el manifiesto, el globo. Todo lo demás, callado. */

/* ---- Tipografía --------------------------------------------------------- */

/* Anton aparece UNA vez por página, en el h1, y grande. Antes gritaba en
   todos los niveles y por eso la página parecía un cartel de saldos. */
.cartel {
  font-family: var(--fuente-cartel);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* Los titulares de sección son de la MISMA familia que el h1 pero claramente
   más pequeños: hablan igual sin pelear por la atención. */
.titulo {
  font-family: var(--fuente-cartel);
  font-weight: 400;
  font-size: clamp(1.65rem, 2.9vw, 2.45rem);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.rotulo { font-size: var(--paso-1); font-weight: 600; line-height: 1.3; }
.entrada { font-size: clamp(1.02rem, 1.5vw, var(--paso-1)); color: var(--tinta-suave); line-height: 1.55; }

.bloque { display: grid; gap: 14px; }
.bloque--ancho { gap: 22px; }
/* Dos asuntos dentro de una MISMA sección. Antes iban en secciones separadas y
   se sumaban dos rellenos de 96px: un agujero muerto en medio de la página. */
.apartados { display: grid; gap: clamp(40px, 6vw, 72px); }

.regla { border: 0; height: 1px; background: var(--linea); margin: 0; }

/* ---- El gesto de la portada: la pila de viñetas -------------------------- */

/* Las tres ocupan la misma celda; las de detrás asoman rotadas. Es una página
   de cómic vista de canto, y es lo único de la portada que levanta la voz. */
.pila { display: grid; place-items: center; padding: clamp(14px, 3vw, 30px) 0; }
/* `:root` delante no es capricho: uno de los tres hijos es un <img> y Elementor trae
   `.elementor img { border: none; border-radius: 0; box-shadow: none }` (0,1,1), que gana a
   `.pila > *` (0,1,0). En el sitio publicado la viñeta de delante salía SIN borde, SIN radio y
   SIN sombra mientras las dos hojas de detrás sí los tenían: el gesto de la portada, roto, con
   todos los verificadores en verde. `:root` sube a (0,2,0) y casa igual en el boceto.
   Medido 2026-09-08. */
:root .pila > * {
  grid-area: 1 / 1;
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  background: var(--papel);
  box-shadow: var(--sombra-2);
}
/* Las hojas de detrás son papel en blanco, no copias del plano: al rotarlas,
   una esquina asomaba por debajo de la de delante y su pie («sustituible por
   arte real») se leía doble, como un error de imprenta. */
.hoja { aspect-ratio: 640 / 400; }
/* z-index explícito, y no basta el orden del DOM: `opacity < 1` crea contexto
   de apilamiento y esos elementos se pintan en una capa POSTERIOR a los que no
   lo tienen. Sin esto, las dos hojas translúcidas caían encima de la viñeta
   opaca y la dejaban lavada en gris. Medido 2026-09-08. */
.pila > * { position: relative; }
.pila > :nth-child(1) { transform: rotate(-2.6deg) translate(-3.5%, -6%) scale(0.955); opacity: 0.34; z-index: 1; }
.pila > :nth-child(2) { transform: rotate(1.4deg) translate(2%, -3%) scale(0.978); opacity: 0.62; z-index: 2; }
.pila > :nth-child(3) { transform: none; z-index: 3; }

/* ---- Sección oscura: el respiro visual entre bloques blancos ------------- */

/* Tinta a sangre con la escena de cómic detrás y tipografía en blanco. El
   cómic lo pone la IMAGEN, no la maquetación. El velo es un degradado, no un
   gris plano: oscurece donde va el texto y deja respirar el arte a la derecha,
   de modo que el contraste está garantizado sin apagar el dibujo. */
.seccion--oscura {
  position: relative;
  isolation: isolate;
  background-color: var(--tinta);
  background-image: url('../img/vinetas/escena-fondo.svg');
  background-size: cover;
  background-position: 62% center;
  background-repeat: no-repeat;
  color: var(--papel);
}
.seccion--oscura::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 0.34) 100%);
}
.seccion--oscura .entrada { color: rgba(255, 255, 255, 0.78); }
.seccion--oscura .nota { color: rgba(255, 255, 255, 0.62); }
/* Overrides del contrato de parejas (R19). */
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3 { color: var(--papel); }
.seccion--oscura .cartel { color: var(--papel); }
.seccion--oscura .titulo { color: var(--papel); }
.seccion--oscura .boton--fantasma { color: var(--papel); border-color: rgba(255, 255, 255, 0.42); }
.seccion--oscura .destacado { color: var(--papel); }

/* Franja de corte: separa dos secciones claras sin meter una caja. */
.corte { border: 0; height: 3px; margin: 0; background: var(--tinta); opacity: 0.85; }

/* ---- Superficies -------------------------------------------------------- */

.vineta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-2);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--sombra-1);
}
/* La caja se reserva para lo que el lector ELIGE. El movimiento responde a su
   gesto, no se dispara solo al entrar la sección. */
.vineta--elegible { transition: transform var(--transicion), box-shadow var(--transicion); }
.vineta--elegible:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }

.plancha { display: grid; gap: var(--medianil); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Los rasgos NO son cajas: son columnas paralelas de un mismo conjunto, y eso
   lo dice una línea fina a la izquierda. Tres tarjetas idénticas serían el
   relleno de siempre. */
.rasgos { display: grid; gap: clamp(22px, 4vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.rasgo { border-left: 1px solid var(--linea); padding-left: 20px; display: grid; gap: 8px; align-content: start; }

/* La tira de muestra: medianiles de verdad entre planos. */
.tira { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tira img {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--r-2);
  background: var(--papel);
  box-shadow: var(--sombra-1);
}
@media (max-width: 700px) {
  .tira { grid-template-columns: minmax(0, 1fr); }
}

/* ---- El globo: el sitio hablando (sólo en el manifiesto) ----------------- */

.globo {
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--r-3);
  padding: clamp(30px, 4vw, 52px);
  box-shadow: var(--sombra-2);
  display: grid;
  gap: 16px;
  max-width: 820px;   /* un globo de 1180px de ancho no se lee como un globo */
}
.globo::after {
  content: '';
  position: absolute; left: 46px; bottom: -17px;
  border: 18px solid transparent;
  border-top-color: var(--tinta);
  border-bottom: 0; border-right-width: 6px;
}
.globo .entrada { color: rgba(255, 255, 255, 0.72); }
/* Overrides del contrato de parejas (R19): dentro del globo el texto se aclara. */
.globo h1, .globo h2, .globo h3 { color: var(--papel); }
.globo .cartel { color: var(--papel); }
.globo .boton--fantasma { color: var(--papel); border-color: rgba(255, 255, 255, 0.4); }
.globo .destacado { color: var(--papel); }

/* ---- Acentos ------------------------------------------------------------ */

/* Como texto de cuerpo el rojo va con --rojo-texto (#FF0800 da 3.97:1 sobre
   blanco y no alcanza AA a tamaño de párrafo). */
.destacado { color: var(--rojo-texto); font-weight: 600; }

/* Una por página como mucho, y sólo donde el tono lo pide. Decorativa. */
.onomatopeya {
  font-family: var(--fuente-rotulo);
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  color: var(--rojo);
  transform: rotate(-4deg);
  display: inline-block;
}