/* ══════════════════════════════════════════════════════════════════════════
   LA TEXTURA · web madre de VAO · 4-sep-2026
   Encargo de Héctor: «algo mucho más grotesco, industrial, raspado, duro,
   fuerte. Texturas en el fondo y distintos degradados.»

   Se carga DESPUÉS de vao.css y sólo endurece lo que ya existe: no inventa
   bloques, no toca la retícula, no define ni un color propio. Todo sale de
   color-mix() sobre las fichas de la paleta, así que las seis paletas nuevas
   heredan la misma suciedad sin escribir una línea de más.

   Cero llamadas externas: las tramas son SVG en data-URI, generadas aquí.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* — Grano de película. Una sola capa fija sobre toda la página. — */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* — Raspado: turbulencia estirada en vertical = acero cepillado. — */
  --rayado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23r)'/%3E%3C/svg%3E");

  /* — Rozadura: turbulencia estirada en horizontal, para franjas claras. — */
  --rozado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='300'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .008' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='520' height='300' filter='url(%23h)'/%3E%3C/svg%3E");

  /* — El diente: el borde desgarrado que muerde la franja de arriba. — */
  --diente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V7l6-3 5 5 7-6 6 5 7-6 7 5 6-4 7 6 7-4 6 5 7-6 7 4 6-6 7 5 6-4 7 6 6-4 6 5 4-4v16z' fill='%23000'/%3E%3C/svg%3E");

  /* — Tramas geométricas: puntos de fotograbado y rayado técnico. — */
  --puntos: radial-gradient(circle at 50% 50%, currentColor .9px, transparent 1.1px);
  --plumin: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 7px);

  /* — Cuánto se ve cada cosa. Aquí se sube o se baja toda la suciedad. — */
  --n-grano: .072;
  --n-rayado: .105;
  --n-rozado: .065;
}

/* ── 1 · El grano, encima de todo, una sola vez ─────────────────────────── */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  background-image:var(--grano);background-size:180px 180px;
  opacity:var(--n-grano);mix-blend-mode:overlay;
}

/* ── 2 · Tipografía más dura ────────────────────────────────────────────
   Héctor: «un pelín más fuerte y un pelín más anchita» → y ahora, grotesca.
   Sube el peso y la anchura de la variable, y cierra el tracking. */
h1,h2,h3,h4{font-weight:830;font-stretch:104%;font-variation-settings:'wdth' 104}
h1{letter-spacing:-.042em;line-height:.88}
h2{letter-spacing:-.032em;line-height:.94}
.rotulo{font-weight:600;letter-spacing:.18em}

/* ── 3 · Las franjas dejan de ser planas ────────────────────────────────
   Cada una lleva un degradado propio + su suciedad. Ninguna repite lavado
   con la de al lado: eso es lo que quita el aire de plantilla. */
.franja,.panel,.marcas{position:relative;isolation:isolate}

.claro{
  background-color:var(--papel);
  background-image:
    radial-gradient(120% 78% at 8% -12%, color-mix(in srgb, var(--tinta) 5.5%, transparent), transparent 62%),
    linear-gradient(178deg, color-mix(in srgb, var(--tinta) 3%, transparent), transparent 34%);
}
.claro-hondo{
  background-color:var(--papel-hondo);
  background-image:
    radial-gradient(96% 120% at 100% 0%, color-mix(in srgb, var(--rojo) 5%, transparent), transparent 55%),
    linear-gradient(2deg, color-mix(in srgb, var(--tinta) 6%, transparent), transparent 40%);
}
.oscuro{
  background-color:var(--azul);
  background-image:
    radial-gradient(110% 70% at 14% -10%, color-mix(in srgb, var(--tinta-clara) 9%, transparent), transparent 58%),
    radial-gradient(80% 90% at 96% 108%, color-mix(in srgb, var(--rojo) 16%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, #000 22%, transparent), transparent 30%);
}
.oscuro-hondo{
  background-color:var(--azul-hondo);
  background-image:
    radial-gradient(130% 90% at 88% -20%, color-mix(in srgb, var(--tinta-clara) 7%, transparent), transparent 62%),
    linear-gradient(184deg, transparent 40%, color-mix(in srgb, #000 34%, transparent));
}
.panel{
  background-color:var(--gris-marcas);
  background-image:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--tinta-clara) 6%, transparent), transparent 70%);
}

/* La suciedad va en una capa propia, por debajo del contenido. */
.claro::after,.claro-hondo::after,.oscuro::after,.oscuro-hondo::after,.panel::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.oscuro::after,.oscuro-hondo::after,.panel::after{
  background-image:var(--rayado);background-size:420px 420px;
  opacity:var(--n-rayado);mix-blend-mode:soft-light;
}
.claro::after,.claro-hondo::after{
  background-image:var(--rozado);background-size:520px 300px;
  opacity:var(--n-rozado);mix-blend-mode:multiply;
}

/* ── 4 · El corte desgarrado entre franjas ──────────────────────────────
   El borde de arriba de cada franja muerde 15 px la franja anterior. No es
   un adorno: es lo que hace que la página no parezca una pila de cajas. */
.franja::before,.panel::before{
  content:"";position:absolute;left:0;right:0;top:-15px;height:16px;z-index:1;
  background-color:inherit;
  -webkit-mask-image:var(--diente);mask-image:var(--diente);
  -webkit-mask-size:120px 16px;mask-size:120px 16px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
}
/* 01-oct: Héctor pidió quitar los efectos de papel. El corte desgarrado queda apagado en todas las franjas. */
.franja::before,.panel::before{display:none}
/* La primera franja de una página no muerde nada: no hay nada encima. */
.port + .franja::before,.port + .panel::before,main > .franja:first-child::before{display:none}

/* ── 5 · Un filete rojo que separa de verdad ────────────────────────────── */
.oscuro-hondo + .claro::after,.claro + .oscuro::after{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--rojo) 40%, transparent)}

/* ── 6 · Los bloques también se ensucian ────────────────────────────────── */
.prog__c,.mm__c,.met__p,.puerta{position:relative;overflow:hidden}
.prog__c::after,.puerta::after{
  content:"";position:absolute;inset:0;pointer-events:none;color:currentColor;
  background-image:var(--puntos);background-size:5px 5px;opacity:.055;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 58%);
  mask-image:linear-gradient(200deg,#000,transparent 58%);
}
/* Las tarjetas dejan de flotar: se apoyan con un filete grueso abajo. */
.prog__c{box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--tinta) 12%, transparent)}
.prog__c:hover{box-shadow:inset 0 -3px 0 var(--rojo-papel)}

/* La cuadrícula de marcas, más dura: la celda roja lleva trama. */
.marcas__c--rojo{position:relative;overflow:hidden}
.marcas__c--rojo::after{
  content:"";position:absolute;inset:0;color:#fff;pointer-events:none;
  background-image:var(--plumin);opacity:.16;
}

/* ── 6-bis · Los demás bloques, también ─────────────────────────────────
   Hasta aquí sólo se ensuciaban las tarjetas de programa y el menú. Estos
   cuatro se quedaban planos y se notaba: eran los únicos rectángulos
   limpios de la página. Misma receta, ni un color nuevo. */

/* La cuadrícula de marcas: fotograbado flojo y apoyo abajo. */
.marcas__c{position:relative;overflow:hidden;
  box-shadow:inset 0 -2px 0 color-mix(in srgb, #fff 8%, transparent)}
.marcas__c::before{
  content:"";position:absolute;inset:0;pointer-events:none;color:currentColor;
  background-image:var(--puntos);background-size:6px 6px;opacity:.05;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 64%);
  mask-image:linear-gradient(160deg,#000,transparent 64%);
}

/* Los pasos del método: rozadura y una esquina rayada. */
.met__p{position:relative;overflow:hidden}
.met__p::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--rozado);background-size:520px 300px;
  opacity:calc(var(--n-rozado) * 1.5);mix-blend-mode:multiply;
}
.met__p::after{
  content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  pointer-events:none;color:var(--tinta);
  background-image:var(--plumin);opacity:.09;transform:rotate(12deg);
}
.met__p > *{position:relative;z-index:1}

/* La FAQ: la pregunta abierta se marca con un filete rojo abajo. No lleva
   pseudo-elemento porque .faq__r es una rejilla que se cierra a 0fr y un
   ::after suyo sería una fila más. */
.faq__d{box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--tinta-clara) 8%, transparent)}
.faq__d[open]{box-shadow:inset 0 -2px 0 var(--rojo-azul)}

/* ── 7 · Ni un movimiento si el sistema pide quietud ────────────────────── */
@media (prefers-reduced-motion:reduce){
  body::after{opacity:calc(var(--n-grano) * .6)}
}