/**
 * styles.css — Vicente Larenas
 * Dirección visual (29-09, Camilo): punk zine / DIY. Fotocopia, recorte,
 * alto contraste, un solo color saturado.
 *
 * Teoría que ordena todo:
 * - 60-30-10: negro 60 (fondo, texto), papel fotocopia 30, amarillo 10.
 *   El amarillo es el acento: botón, un resaltado, la cinta. Si aparece en
 *   todas partes deja de indicar qué hacer.
 * - Contraste: amarillo sobre negro 16:1 y negro sobre amarillo 16:1.
 *   Nunca amarillo como texto sobre papel (1,1:1, ilegible).
 * - Tipografía por rol, no por gusto: Anton = grito (titulares), Courier
 *   Prime = lectura (máquina de escribir de fanzine, legible), letras de
 *   recorte (Anton + Bodoni + Special Elite) = UNA palabra por página.
 * - Una acción por página (Hick): reservar por WhatsApp. Se repite al
 *   comienzo y al cierre, igual.
 */

:root {
    --negro:    #0D0D0D;
    --papel:    #F2EFE6;   /* fotocopia hueso */
    --gris:     #4A4A46;   /* texto secundario sobre papel, 8,6:1 */
    --gris-claro: #B9B7AF; /* texto secundario sobre negro, 9,4:1 */
    --amarillo: #FFE500;
    /* Rosa del punto recortado: acento del acento, bajo el 3 %. Nunca
       texto ni fondo; solo puntos y una luz. Uno por pantalla. */
    --rosa:     #EC4E8F;

    /* Alias que usa el esqueleto del kit (foco, skip-link, 404). */
    --color-paper:  var(--papel);
    --color-ink:    var(--negro);
    --color-muted:  var(--gris);
    --color-accent: var(--negro);

    --font-grito:   "Anton", "Impact", sans-serif;
    --font-texto:   "Courier Prime", "Courier New", monospace;
    --font-recorte-a: "Bodoni Moda", Georgia, serif;
    --font-recorte-b: "Special Elite", "Courier New", monospace;
    --font-sans:    var(--font-texto);

    --margen: 20px;
    --ancho-max: 1200px;
    /* Desgaste de fotocopia: ruido umbralizado usado como máscara. Agujerea
       el titular sin tocar su forma, así se lee igual. */
    --desgaste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 5.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) { :root { --margen: 56px; } }

html { -webkit-text-size-adjust: 100%; }
/* Negro de fotocopia con polvo y rayas de tóner: el negro plano se veía
   de pantalla, no de papel. Va en body para que encabezado, hero y pie
   sean la misma hoja. */
body { margin: 0; background: var(--negro) url('/media/collage/textura-negra.webp') 0 0 / 560px; color: var(--papel); font-family: var(--font-texto); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
@media (min-width: 1024px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote, ol, dl, dd { margin: 0; }

.contenedor { max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen); }

/* ==========================================
   ESQUELETO DEL KIT
   ========================================== */
.tab-content        { display: none; }
.tab-content.active { display: block; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.img-cargando { opacity: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--amarillo); color: var(--negro); padding: .6rem 1rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.papel :focus-visible { outline-color: var(--negro); }

/* ==========================================
   SUPERFICIES
   ========================================== */
/* Grano de fotocopia sobre todo lo que se imprime. */
.fotocopia { position: relative; isolation: isolate; }
.fotocopia::after { content: ''; position: absolute; inset: 0; background: url('/media/kit/grano.svg'); background-size: 200px; opacity: .07; mix-blend-mode: overlay; pointer-events: none; z-index: 2; }
.papel { background: var(--papel) url('/media/collage/textura-papel.webp') center / 640px; color: var(--negro); }

.papel .secundario { color: var(--gris); }
.secundario { color: var(--gris-claro); }

/* Aviso de "en construcción": una tira de papel quieta, escrita a máquina.
   Antes era una marquesina amarilla en movimiento y se leía como alarma;
   el aviso tiene que informar, no gritar. */
.cinta { background: var(--papel) url('/media/collage/textura-papel.webp') center / 640px; color: var(--negro); border-bottom: 1px solid rgba(13,13,13,.25); }
.cinta__texto { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1.5rem; padding: 7px var(--margen); font-family: var(--font-texto); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; }

/* ==========================================
   TIPOGRAFÍA
   ========================================== */
/* line-height ≥ 1.1 y padding-top: los acentos de Anton suben sobre la línea; más apretado, la máscara y la línea anterior se los comen (VOLCÁN salía VOLCAN). */
.grito { font-family: var(--font-grito); font-weight: 400; text-transform: uppercase; line-height: 1.1; letter-spacing: .005em; padding-top: .08em;
         -webkit-mask-image: var(--desgaste); mask-image: var(--desgaste); -webkit-mask-size: 220px; mask-size: 220px; }
.grito-xl { font-size: clamp(3.6rem, 17vw, 9.5rem); }
.grito-l  { font-size: clamp(2.6rem, 10vw, 5rem); }
.grito-m  { font-size: clamp(2rem, 7vw, 3.25rem); }
.dato { font-family: var(--font-texto); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.lectura { max-width: 62ch; }
.lectura p + p { margin-top: 1em; }

/* Marcador amarillo: una frase por pantalla. */
.marcado { background: var(--amarillo); color: var(--negro); padding: 0 .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Letras de recorte (ransom): cada letra sale de un impreso distinto.
   Se usa en UNA palabra por página; más que eso deja de leerse. */
.recorte { display: flex; flex-wrap: wrap; gap: .06em .05em; line-height: 1; }
.recorte .palabra { display: inline-flex; gap: .05em; white-space: nowrap; }
.recorte .esp { width: .3em; }
.recorte .l { display: inline-block; padding: .08em .1em .02em; background: var(--papel); color: var(--negro); font-family: var(--font-grito); text-transform: uppercase; transform: rotate(-2deg); box-shadow: 2px 3px 0 rgba(0,0,0,.45); }
.recorte .l:nth-child(2n)   { background: var(--negro); color: var(--papel); font-family: var(--font-recorte-a); font-weight: 900; text-transform: none; transform: rotate(3deg) translateY(.05em); box-shadow: 0 0 0 2px var(--papel), 2px 3px 0 rgba(0,0,0,.45); }
.recorte .l:nth-child(3n)   { background: var(--amarillo); color: var(--negro); font-family: var(--font-recorte-b); transform: rotate(-4deg) translateY(-.04em); }
.recorte .l:nth-child(5n)   { font-size: .85em; align-self: center; transform: rotate(5deg); }
.papel .recorte .l:nth-child(2n) { box-shadow: 2px 3px 0 rgba(0,0,0,.35); }

/* ==========================================
   COMPONENTES
   ========================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 60px; padding: 0 1.6rem;
       background: var(--amarillo); color: var(--negro); border: 3px solid var(--negro); box-shadow: 5px 5px 0 var(--negro);
       font-family: var(--font-grito); font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
       transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--negro); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--negro); }
/* Sobre negro la sombra dura se dibuja con el amarillo para que se vea. */
.sobre-negro .btn { border-color: var(--amarillo); box-shadow: 5px 5px 0 var(--papel); }
.sobre-negro .btn:hover { box-shadow: 3px 3px 0 var(--papel); }
.btn i { font-size: 1.6rem; }
.btn-ancho { width: 100%; }
@media (min-width: 640px) { .btn-ancho { width: auto; } }

.link { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; text-decoration-color: var(--amarillo); }
.papel .link { text-decoration-color: var(--negro); }
.link:hover { background: var(--amarillo); color: var(--negro); }

/* Sticker de precio: fotocopia pegada con cinta. */
.sticker { display: inline-flex; gap: 1.25rem; align-items: stretch; background: var(--papel); color: var(--negro); padding: .7rem 1rem; transform: rotate(-1.5deg); box-shadow: 4px 5px 0 rgba(0,0,0,.5); }
.sticker__precio { font-family: var(--font-grito); font-size: 2.6rem; line-height: 1; }
.sticker__sep { width: 2px; background: var(--negro); }
.sticker .dato { line-height: 1.35; align-self: center; }

/* Foto fotocopiada y recortada con tijera: borde blanco de recorte y
   sombra dura. El alto contraste esconde la baja resolución. */
.foto-recorte { filter: grayscale(1) contrast(1.55) brightness(1.08)
    drop-shadow(2px 0 0 var(--papel)) drop-shadow(-2px 0 0 var(--papel)) drop-shadow(0 2px 0 var(--papel)) drop-shadow(0 -2px 0 var(--papel))
    drop-shadow(5px 6px 0 rgba(0,0,0,.55)); }
/* Foto que ya viene tratada (B/N y niveles hechos a mano): solo el borde
   de tijera, sin volver a subirle el contraste o se empasta. */
.foto-recorte.tratada { filter: drop-shadow(2px 0 0 var(--papel)) drop-shadow(-2px 0 0 var(--papel)) drop-shadow(0 2px 0 var(--papel)) drop-shadow(0 -2px 0 var(--papel))
    drop-shadow(5px 6px 0 rgba(0,0,0,.55)); }

/* Recorte de prensa pegado. */
.prensa { background: var(--papel); color: var(--negro); padding: 12px 12px 14px; transform: rotate(3deg); box-shadow: 4px 5px 0 rgba(0,0,0,.55);
    clip-path: polygon(0 2%,8% 0,19% 1.5%,31% 0,44% 2%,57% .5%,70% 2%,83% 0,100% 1.5%,99% 100%,86% 98.5%,72% 100%,58% 98%,44% 100%,30% 98.5%,15% 100%,0 98.5%); }
.prensa__seccion { display: flex; justify-content: space-between; font-family: var(--font-texto); font-weight: 700; font-size: .625rem; letter-spacing: .1em; border-bottom: 1px solid var(--negro); padding-bottom: 4px; }
.prensa__titulo { font-family: var(--font-recorte-a); font-weight: 900; font-size: 1.3rem; line-height: .95; letter-spacing: -.02em; margin-top: 6px; }
.prensa__cuerpo { font-size: .72rem; line-height: 1.35; margin-top: 6px; columns: 2; column-gap: 10px; }
@media (min-width: 1024px) { .prensa { padding: 20px 20px 22px; } .prensa__titulo { font-size: 2.2rem; } .prensa__cuerpo { font-size: .9rem; } }

.cinta-adhesiva { position: absolute; width: 90px; height: 26px; background: rgba(255,229,0,.82); transform: rotate(-6deg); box-shadow: 0 1px 0 rgba(0,0,0,.2); }

.paso { display: flex; gap: 1rem; align-items: baseline; }
.paso__num { flex: none; font-family: var(--font-grito); font-size: 1.6rem; line-height: 1; background: var(--negro); color: var(--amarillo); padding: .15em .35em; transform: rotate(-3deg); }

details.pregunta { border-top: 2px solid var(--negro); padding-block: 1rem; }
details.pregunta:last-of-type { border-bottom: 2px solid var(--negro); }
details.pregunta summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem; }
details.pregunta summary::-webkit-details-marker { display: none; }
details.pregunta summary::after { content: '+'; font-family: var(--font-grito); font-size: 1.4rem; line-height: 1; }
details.pregunta[open] summary::after { content: '—'; }
details.pregunta p { margin-top: .6rem; color: var(--gris); }

.pie { border-top: 2px solid var(--papel); padding-block: 28px 40px; }

/* ==========================================
   COLLAGE
   Piezas recortadas (ChatGPT, 29-09) en /media/collage/. Se pegan donde
   el texto las nombra: el volcán con el título, el semáforo con la
   primera línea, la ruta con el envío, la bencinera con la noche del
   cierre. Nunca en bloque aparte: eso era lo que se veía pegoteado.
   ========================================== */
/* Sombra blanda y corta: papel pegado sobre papel, no tarjeta flotando. */
.pieza { position: absolute; pointer-events: none; user-select: none; filter: drop-shadow(2px 4px 3px rgba(0,0,0,.55)); }
.papel .pieza { filter: drop-shadow(2px 3px 3px rgba(0,0,0,.28)); }
.sin-sombra { filter: none !important; }
/* Las marcas de plumón vienen en negro; sobre negro se pasan a blanco. */
.sobre-negro .plumon { filter: invert(1) brightness(.95); }

/* Letras recortadas: todas miden 160 px de ancho y alturas distintas, así
   que con un solo ancho la palabra ya sale dispareja. */
.letras { display: flex; align-items: center; flex-wrap: wrap; row-gap: .4rem; }
.letras img { width: var(--letra, 2.25rem); height: auto; margin-right: -.18rem; filter: drop-shadow(2px 3px 2px rgba(0,0,0,.5)); }
.letras img.angosta { width: calc(var(--letra, 2.25rem) * .75); }
.letras img:nth-child(3n)   { transform: rotate(-4deg) translateY(2px); }
.letras img:nth-child(3n+1) { transform: rotate(2deg); }
.letras img:nth-child(4n)   { transform: rotate(5deg) translateY(-3px); }
.letras .esp { width: .9rem; }

/* Papel rasgado entre el negro y el papel: la página se rompe en vez de
   cambiar de color con una línea recta. La forma sale del borde de la
   imagen (máscara) y el relleno es la misma textura de la sección, para
   que no se note dónde termina la tira; de la imagen solo queda la fibra
   blanca del rasgado, que se funde hacia el papel. */
.rasgado { position: absolute; left: 0; width: 100%; height: max(44px, 8vw); z-index: 4; pointer-events: none;
    background: var(--papel) url('/media/collage/textura-papel.webp') center / 640px;
    -webkit-mask: url('/media/collage/borde-rasgado.webp') 0 0 / 100% 100% no-repeat;
            mask: url('/media/collage/borde-rasgado.webp') 0 0 / 100% 100% no-repeat; }
.rasgado img { width: 100%; height: 100%; object-fit: fill;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 80%);
            mask-image: linear-gradient(to bottom, #000 40%, transparent 80%); }
.rasgado--abajo { bottom: -2px; }
.rasgado--arriba { top: -2px; transform: scaleY(-1); }

/* El punto final rosa: la misma firma del favicon ("V."). */
.con-punto::after { content: ''; display: inline-block; width: .24em; height: .24em; margin-left: .07em; border-radius: 50%; background: var(--rosa); }
/* Luz de arriba del semáforo encendida en rosa; multiply conserva el
   dibujo del foco fotocopiado. Coordenadas medidas sobre semaforo.webp. */
.luz-rosa { position: absolute; left: 55.6%; top: 53.7%; width: 10.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--rosa); mix-blend-mode: multiply; pointer-events: none; }

/* Subrayado a plumón rosa bajo la acción del paso 1. */
.subrayado-rosa { position: relative; white-space: nowrap; }
.subrayado-rosa img { position: absolute; left: -5%; bottom: -.7em; width: 110%; height: 1.15em; object-fit: fill; opacity: .9; pointer-events: none; z-index: -1; }
/* Chinche rosa: cabeza del alfiler con sombra corta, para que se lea
   clavada y no pegada. */
.pin-rosa { position: absolute; width: 11%; height: auto; pointer-events: none; filter: drop-shadow(3px 4px 2px rgba(0,0,0,.6)); }