/* =================================================================
   VECTOR ZERO ENTERTAINMENT
   Hoja de estilo publica. Una sola, sin capas apiladas: cada cosa se
   declara UNA vez y en la capa a la que pertenece.

   INDICE
     1 . BASE .............. fuentes, tokens, contrato, reset, tipografia,
                             utilidades de texto y las tres piezas
                             invisibles que sostienen el marcado
     2 . CONTROLES ......... botones, flecha cuadrada, chips, campos,
                             casillas y avisos de formulario
     3 . SUPERFICIES ....... suelo organico, cristal, bloque oscuro,
                             esquinas, caja de sello y recto rojo
     4 . CABECERA Y PIE .... logotipo, barra pegajosa, menu movil y pie
     5 . TARJETAS .......... bento de servicios, fichas de obra y piezas
     6 . PAGINAS ........... ritmo vertical, banda de capitulo, hero de
                             la home y las dos columnas de contacto
     7 . ESTADOS DEL JS .... reveal, navegacion parcial e indicador

   REGLAS DE LA CASA, para que no se deshagan por descuido
     . Cero !important, cero @import, cero :has(), cero url() a un
       dominio ajeno. Las dos unicas url() que salen del fichero
       apuntan a assets/fonts, que viaja con el sitio.
     . Ninguna duracion por encima de 400 ms, y todo el movimiento
       apagado bajo prefers-reduced-motion.
     . Tres radios y ni uno entre medias: 0 en bloques, 6px en media,
       4px en controles. Ninguna pildora.
     . La inversion sobre suelo oscuro NO se escribe a mano en cada
       capa: cada suelo redeclara el contrato de la seccion 1.3 y las
       reglas de la base ya sirven.
   ================================================================= */


/* =================================================================
   1 . BASE
   Fuentes, tokens, reset, tipografia y las utilidades de texto.
   No viste ningun componente ni ninguna pagina: todo lo que hay aqui
   es o un elemento HTML o una de las utilidades de la casa.
   ================================================================= */


/* -----------------------------------------------------------------
   1.1 . FUENTES
   Dos familias autoalojadas y ninguna mas. Cero peticiones fuera.
   Los dos ficheros son VARIABLES, por eso font-weight declara un
   rango y no un numero: si se declarase un solo peso, el navegador
   sintetizaria una falsa negrita en vez de interpolar el eje, que se
   nota sobre todo en la mono a tamano diminuto.
   font-display:swap porque el texto es lo que se viene a leer: antes
   se lee en la sustituta que se espera en blanco a que llegue la cara.
   ----------------------------------------------------------------- */
@font-face {
    font-family: "Host Grotesk";
    src: url("../fonts/hostgrotesk.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geistmono.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Bree Serif, la voz de las paginas de coleccion: titulares, titulo de
   tomo y precio. Cuatro reglas la pedian por font-family y esta cara no
   estaba declarada en ningun sitio, asi que el navegador se saltaba el
   fichero -que si viaja en assets/fonts- y caia a Georgia sin decir
   nada. Un fallo mudo: la unica pista era que las colecciones se veian
   con otra serif distinta a la del diseno. */
@font-face {
    font-family: "Bree Serif";
    src: url("../fonts/breeserif-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Y una tercera cara que NO cuenta como familia del sistema porque no
   compone texto: Orbitron vive solo dentro del SVG del logotipo. La
   geometria de ese SVG (los dos font-size de mas abajo, 57,87 y 40,87)
   esta medida contra ESTA cara. Con cualquier otra, el texto cambia de
   ancho, se sale de su caja y pisa el corchete. */
@font-face {
    font-family: "Orbitron";
    src: url("../fonts/orbitron-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Orbitron";
    src: url("../fonts/orbitron-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* -----------------------------------------------------------------
   1.2 . TOKENS
   Van tal cual: estan medidos y no se tocan.
   ----------------------------------------------------------------- */
:root {
    /* PALETA "CLASSIC RED". Diez colores dados, y de los diez solo
       cuatro pueden llevar texto encima. Lo demas esta medido abajo,
       color por color, porque la paleta no trae ni un gris medio que
       aguante como texto sobre fondo claro. */

    /* PAPEL. Ya no hay crema en ningun sitio: la base es humo blanco,
       neutro y frio. */
    --papel-0:  #FFFFFF;   /* lamina y tarjeta, el blanco absoluto */
    --papel-1:  #F5F3F4;   /* HUMO BLANCO. Base de toda la web */
    --papel-2:  #D3D3D3;   /* GRIS POLVO. Superficie hundida y hover */
    --papel-3:  #B1A7A6;   /* PLATA. Filete. 1,36:1 sobre humo, o sea
                              que es linea y NUNCA texto */

    /* TINTA. Los dos negros de la paleta, mas dos grises DERIVADOS del
       carbon: la paleta salta de #161A1D a #B1A7A6 y ahi no hay nada
       que sirva de cuerpo ni de metadato. Plata sobre humo da 2,12:1
       y gris polvo 1,36:1: ninguno es texto. */
    --tinta-0:  #0B090A;   /* NEGRO. Suelo oscuro y titulares. 17,97:1 */
    --tinta-1:  #161A1D;   /* NEGRO CARBON. 15,85:1 */
    --tinta-2:  #333A3F;   /* CUERPO, derivado. 10,46 sobre humo,
                              7,72 sobre gris polvo */
    --tinta-3:  #565C62;   /* METADATOS, derivado. 6,13 sobre humo y
                              4,52 sobre gris polvo, el minimo AA */

    /* ROJO, tres pasos y cada uno con su trabajo. El reparto NO es
       estetico: blanco sobre fresa da 4,23 y se queda corto para texto
       pequeno, asi que la fresa es superficie grande y grafico, y el
       texto pequeno lo aguanta la caoba. */
    --rojo:      #E5383B;  /* FRESA. Superficies grandes, display,
                              foco, graficos. 4,69 sobre negro */
    --rojo-aa:   #BA181B;  /* CAOBA. Superficie CON TEXTO PEQUENO
                              encima: 6,49 con blanco */
    --rojo-tex:  #A4161A;  /* CAOBA OSCURO. Rojo COMO TEXTO sobre
                              papel: 7,02 sobre humo */
    --rojo-velo: #FBEAEA;  /* Velo. Caoba oscuro encima: 6,67 */

    /* GRANATE. El suelo oscuro cromatico, en el sitio que ocupaba el
       petroleo. Blanco encima 13,13 y plata 5,60. Los nombres viejos
       se conservan para no reescribir cien reglas de golpe. */
    --petroleo:   #660708;  /* GRANATE OSCURO */
    --petroleo-2: #A4161A;  /* CAOBA OSCURO, el escalon de arriba */

    /* PLATA como color de datos sobre suelo oscuro, donde el oro
       estaba antes: 8,46 sobre negro, 7,46 sobre carbon, 5,60 sobre
       granate. Sobre papel claro NO se puede usar. */
    --oro: #B1A7A6;

    /* BLANCO PURO, declarado una sola vez. Es el par medido sobre
       caoba (6,49:1); sobre fresa se queda en 4,23 y por eso el boton
       primario con texto pequeno va en caoba, no en fresa. */
    --sobre-rojo: #FFF;

    /* PAPEL-1 CON ALFA: la rampa unica de tintes claros.
       Antes convivian tres formas de escribir el mismo tinte (rgba a
       mano, color-mix y tokens) y una veintena de valores sueltos.
       Aqui estan todos los escalones que usa la hoja, con su
       contraste medido sobre tinta-0 donde importa. Los valores
       huerfanos de las capas viejas se han redondeado al escalon mas
       cercano: ninguno se mueve mas de dos puntos de alfa, que a
       estos tamanos no se ve.
       REGLA: para tintar papel o tinta se usa esta rampa; color-mix()
       se reserva a las mezclas cromaticas de los degradados, que no
       se repiten en ningun otro sitio. */
    /* VELOS DE COLOR FLOTANTE. Son para las manchas del hero sobre
       papel BLANCO, no sobre suelo oscuro: ahi la misma tecnica daba
       barro, y aqui da color flotando. Alfas bajas a proposito, que el
       rojo tiene que sugerirse, no pintar. */
    --velo-rojo:    rgb(229 56 59 / 0.42);
    /* Dos escalones intermedios. Un radial que salta de alfa alta a
       transparente en un solo tramo produce anillos visibles: es
       cuantizacion de 8 bits, no un fallo del navegador. Con paradas
       intermedias la rampa se reparte y los anillos desaparecen sin
       tener que volver a desenfocar de mas. */
    --velo-rojo-medio: rgb(229 56 59 / 0.24);
    --velo-rojo-tenue: rgb(229 56 59 / 0.09);

    /* DEGRADADO DEL HERO. Los cinco pasos del encargo, de izquierda a
       derecha. Muy lavados a proposito: son el suelo de las laminas,
       no un fondo protagonista. */
    --hg1: #FDF4E7;
    /* El extremo frio baja un peldano y medio: el degradado estaba tan
       lavado que a partir del centro no se distinguia del papel de la
       pagina, y lo que se pide es color mas fuerte. El calido de hg1 se
       queda donde estaba a proposito: subirlo devolveria el papel crema
       que ya esta descartado. */
    --hg2: #F2ECF4;
    --hg3: #DFDDF6;
    --hg4: #C9DAF8;
    --hg5: #B6D0F7;

    /* La inclinacion de las laminas vive aqui porque la consumen dos
       sitios -la proporcion del viewBox y la direccion del parallax- y
       tenerla duplicada se desincroniza al primer retoque. */
    --incl: 32deg;

    /* AMBIENTE. Cuatro tonos que NO estan en la Classic Red y que
       existen solo para los fondos difuminados: la interfaz -texto,
       botones, filetes, iconos- sigue entera en negros, carmesies y
       grises. Se abren porque un ambiente de un solo matiz sale plano,
       y lo que da profundidad es el barrido de frio a calido.
       Ninguno lleva texto encima nunca. */
    --amb-azul:      rgb(126 154 184 / 0.66);   /* azul acero, el frio */
    --amb-lavanda:   rgb(158 143 192 / 0.58);   /* lavanda, la bisagra */
    --amb-melocoton: rgb(232 156 120 / 0.62);   /* melocoton, el calido */
    --amb-ambar:     rgb(233 190 138 / 0.58);   /* ambar, la luz */
    /* DITHER. Ruido de amplitud minima que rompe los contornos del
       banding. No es textura y no se ve: es el remedio estandar de la
       cuantizacion de 8 bits, que es lo que produce los anillos en un
       degradado suave. Al ir DEBAJO de las manchas, que van en
       multiply, perturba la base y con ella la rampa entera. */
    --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23d)' opacity='0.055'/%3E%3C/svg%3E");
    --velo-granate: rgb(102 7 8 / 0.26);
    --velo-plata:   rgb(177 167 166 / 0.52);
    --velo-polvo:   rgb(211 211 211 / 0.72);

    --papel-0-88: rgb(255 255 255 / 0.88);   /* cabecera translucida */
    --papel-1-06: rgb(245 243 244 / 0.06);   /* fondo de campo sobre oscuro */
    --papel-1-10: rgb(245 243 244 / 0.10);   /* filo de luz del pie */
    --papel-1-14: rgb(245 243 244 / 0.14);   /* filete del cristal */
    --papel-1-16: rgb(245 243 244 / 0.16);   /* filete por defecto sobre oscuro */
    --papel-1-24: rgb(245 243 244 / 0.24);   /* filete de mobiliario y filo interior */
    --papel-1-28: rgb(245 243 244 / 0.28);   /* borde de campo sobre oscuro */
    --papel-1-46: rgb(245 243 244 / 0.46);   /* subrayado de enlace sobre oscuro */
    --papel-1-48: rgb(245 243 244 / 0.48);   /* borde de campo al pasar el raton */
    --papel-1-55: rgb(245 243 244 / 0.55);   /* filete de mobiliario al pasar */
    --papel-1-62: rgb(245 243 244 / 0.62);   /* mono de esquina. 5,80:1 */
    --papel-1-68: rgb(245 243 244 / 0.68);   /* titular apagado. 8,11:1 */
    --papel-1-70: rgb(245 243 244 / 0.70);   /* marca de agua de campo. 6,36:1 */
    --papel-1-78: rgb(245 243 244 / 0.78);   /* mono de esquina sobre cristal */
    --papel-1-82: rgb(245 243 244 / 0.82);   /* CUERPO sobre oscuro. 11,51:1 */

    /* TINTA-0 CON ALFA: velos y tintes oscuros, misma logica. */
    --tinta-0-42: rgb(11 9 10 / 0.42);
    --tinta-0-50: rgb(11 9 10 / 0.50);
    --tinta-0-55: rgb(11 9 10 / 0.55);
    --tinta-0-58: rgb(11 9 10 / 0.58);
    --tinta-0-68: rgb(11 9 10 / 0.68);
    --tinta-0-75: rgb(11 9 10 / 0.75);
    --tinta-0-78: rgb(11 9 10 / 0.78);   /* titular apagado sobre rojo-aa. 3,52:1 a cuerpo display */

    /* GRANO. Un solo motivo para todo el sitio. Antes habia cuatro
       data URI distintos, tres tamanos de mosaico (120, 160 y 180) y
       cuatro opacidades para el mismo efecto: unos 900 bytes
       repetidos cuatro veces y cuatro texturas que no casaban entre
       si. Se declara en :root y no en un selector para que cualquier
       capa pueda leerlo.
       fractalNoise con stitchTiles para que el mosaico de 180 px case
       sin costura, y saturate 0 porque el grano tinta, no colorea. */
    --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
    --grano-op: 0.12;

    /* TIPOGRAFIA. Dos familias, autoalojadas, ninguna mas. */
    --sans: "Host Grotesk", "Segoe UI", system-ui, sans-serif;   /* display Y cuerpo */
    --mono: "Geist Mono", ui-monospace, Consolas, monospace;     /* micro-etiquetas y datos */
    --marca: "Orbitron", "Arial Narrow", sans-serif;            /* SOLO el SVG del logotipo */

    --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

    /* ESCALA FLUIDA */
    /* ESCALA. Se rehizo (sep 2026) porque la anterior no era una escala:
       era una lista de tamanos. Medida a 1440 daba cuerpo 18, titulo de
       tarjeta 40 y h2 48, o sea un salto de x2,2 del cuerpo a la tarjeta
       y de x1,2 de la tarjeta al h2. Con eso la tarjeta competia con el
       titular de seccion y todo se veia enorme y sin jerarquia.

       Ahora la razon es constante, ~1,3 entre escalones consecutivos,
       que es lo que hace que una jerarquia se lea sola:
         17 -> 22 -> 32 -> 42 -> 56 -> 72
       Los tres primeros son fijos a proposito: un metadato o un boton
       no deben crecer con la ventana, solo los titulares. */
    --fs-2xs:  0.6875rem;                                    /* 11 · mono, micro-etiqueta */
    --fs-xs:   0.8125rem;                                    /* 13 · metadatos */
    --fs-sm:   0.9375rem;                                    /* 15 · botones y apoyo */
    --fs-base: 1rem;                                         /* 16 · interfaz */
    --fs-md:   1.0625rem;                                    /* 17 · cuerpo de lectura */
    --fs-lg:   clamp(1.1875rem, 1.09rem + 0.38vw, 1.375rem); /* 19-22 · titulo de tarjeta, entradilla */
    --fs-xl:   clamp(1.5rem, 1.29rem + 0.9vw, 2rem);         /* 24-32 · subtitulo, tarjeta destacada */
    --fs-2xl:  clamp(1.875rem, 1.55rem + 1.45vw, 2.625rem);  /* 30-42 · titular de seccion */
    --fs-hero: clamp(2.25rem, 1.72rem + 2.5vw, 3.5rem);      /* 36-56 · titular de pagina interior */
    --fs-display: clamp(2.5rem, 1.83rem + 3.5vw, 4.5rem);    /* 40-72 · titular de portada */

    --lh-hero: 1.02; --lh-snug: 1.16; --lh-body: 1.6; --lh-mono: 1.4;
    --tr-hero: -0.035em; --tr-tit: -0.02em; --tr-mono: 0.08em;

    /* ESPACIADO, multiplos de 4 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
    --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

    /* LAYOUT */
    --w-max: 1440px;  --w-text: 62ch;
    --gutter: clamp(16px, 3.5vw, 40px);

    /* FORMAS. Tres valores y nada entre medias. */
    --r-0: 0;        /* bloques editoriales, tarjetas, filetes */
    --r-media: 6px;  /* contenedores de imagen y media a sangre */
    --r-btn: 4px;    /* botones y controles */
    --bw: 1px;

    /* MOVIMIENTO. Escala semantica, techo en 400 ms. */
    --dur-micro: 80ms; --dur-quick: 150ms; --dur-fast: 250ms;
    --dur-medium: 350ms; --dur-slow: 400ms;
    /* Deriva del suelo del hero. Se sale del techo de 400 ms del resto
       de la escala a proposito: aquello mide respuesta a un gesto, y
       esto es ambiente, que solo funciona si es lento. No entra en el
       colapso de abajo porque es infinita: a 1 ms daria un estrobo.
       Se apaga con animation: none donde se declara. */
    --dur-deriva: 34s;
    /* La segunda deriva. No es multiplo de la primera a proposito: si
       lo fuera, las dos manchas volverian a cruzarse siempre en el
       mismo sitio y el movimiento se leeria como un bucle. */
    --dur-deriva-2: 47s;
    /* Las dos del hero, aparte: --dur-deriva la comparten la banda
       oscura y el recto rojo, y ahi el movimiento tiene que seguir
       siendo lento. Estas dos van cuatro veces mas rapidas y siguen
       sin ser multiplo una de otra. */
    --dur-mancha-a: 4.7s;
    --dur-mancha-b: 6.1s;
    --dur-mancha-c: 7.9s;
    --dur-mancha-d: 9.3s;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* -----------------------------------------------------------------
   1.3 . CONTRATO DE LA BASE
   Variables derivadas de los tokens de arriba. No anaden color
   nuevo: solo dan nombre a las decisiones que las demas capas
   necesitan poder cambiar sin volver a escribir la regla.

   Cualquier suelo oscuro (tinta-0, petroleo, cristal, banda, pie)
   redeclara estas cuatro en si mismo y hereda titular a dos tonos,
   corchetes y filete correctos:

       --tit-fuerte: var(--papel-1);
       --tit-suave:  var(--papel-1-68);   8,11:1 sobre tinta-0
       --corchete:   var(--rojo);         5,04:1
       --linea:      var(--papel-1-16);

   Esto no es cosmetica. Cuando el contrato no se consumia y cada
   capa reescribia el titular a mano, el <h2> de la franja del sello
   se quedaba en tinta-3 sobre tinta-0 (3,00:1) y su <strong> en
   tinta-0 sobre tinta-0 (1,00:1, invisible): justo la mitad de la
   frase que informa. Si una capa vuelve a escribir color en h1, h2 o
   strong, el problema vuelve entero.
   ----------------------------------------------------------------- */
:root {
    /* Titular a dos tonos: la mitad que informa y el resto. */
    --tit-fuerte: var(--tinta-0);
    --tit-suave:  var(--tinta-3);

    /* Corchetes de la micro-etiqueta. Sobre papel va el rojo medido
       como texto (4,89); sobre suelo oscuro las capas lo suben a
       --rojo, que ahi si respira (5,04). */
    --corchete: var(--rojo-tex);

    /* Filete por defecto. */
    --linea: var(--papel-3);

    /* Altura de la cabecera fija. La declara la capa de cabecera
       cuando la sabe; aqui solo sirve para que el salto a un ancla no
       deje el destino debajo de la barra. */
    --h-header: 64px;
}


/* -----------------------------------------------------------------
   1.4 . RESET
   Lo minimo para que el navegador deje de opinar. No se estira a
   nada que sea decision de diseno de otra capa.
   ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Sin margenes heredados: el ritmo vertical se declara donde se
   quiere, no donde lo dejo el user agent. */
* { margin: 0; }

html {
    /* El usuario manda en el tamano base: no se toca el font-size de
       html para no romper su zoom ni sus preferencias. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* AUTO Y NO SMOOTH, a proposito. La navegacion parcial llama a
       window.scrollTo(0, 0) en cada cambio de pagina: con smooth eso
       es un desplazamiento animado de varios segundos, muy por encima
       del techo de 400 ms de la casa, y en cada clic del menu. El
       desplazamiento suave se pide desde el JS en el salto de ancla,
       con scrollIntoView({ behavior: "smooth" }), que es donde se
       queria. Se declara explicito para que nadie lo devuelva. */
    scroll-behavior: auto;

    /* Que el ancla no aterrice debajo de la cabecera fija. */
    scroll-padding-block-start: calc(var(--h-header) + var(--sp-4));

    /* Hueco de barra reservado: sin esto, pasar de una pagina corta a
       una larga desplaza el layout unos pixeles. */
    scrollbar-gutter: stable;
}

body {
    background: var(--papel-1);
    color: var(--tinta-2);          /* 10,12:1 sobre papel-1, AAA en cuerpo */
    font-family: var(--sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    font-kerning: normal;
    font-synthesis-weight: none;    /* fichero variable: nunca falsa negrita */
    -webkit-font-smoothing: antialiased;
    min-height: 100svh;

    /* Los bloques a sangre (banda de capitulo, hero y recto rojo)
       salen de la columna con calc(50% - 50vw). 100vw INCLUYE la
       barra de desplazamiento, asi que sin este recorte aparece una
       barra horizontal en la home y en todas las paginas interiores.
       scrollbar-gutter: stable no lo sustituye: reserva hueco, no
       recorta.
       clip y no hidden: overflow: hidden en el body crea un
       contenedor de desplazamiento y mata el position: sticky de la
       cabecera. */
    overflow-x: clip;
}

/* La media se comporta como bloque; los iconos NO, porque el chevron
   va dentro de la linea de texto en botones, listas y etiquetas. */
img, picture, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { max-width: 100%; }

/* Los controles heredan la tipografia en lugar de la del sistema. */
input, button, textarea, select { font: inherit; color: inherit; }

/* Reset seco del boton. Su aspecto lo pone la capa de controles. */
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Palabras largas en espanol dentro de columnas estrechas. */
p, li, dd, figcaption { overflow-wrap: break-word; }

::selection { background: var(--rojo-velo); color: var(--tinta-0); }


/* -----------------------------------------------------------------
   1.5 . LAS TRES PIEZAS INVISIBLES
   Tres reglas cortas de las que depende que el sitio se pueda mirar.
   No son componentes: son el contrato con el marcado que ya existe.
   ----------------------------------------------------------------- */

/* ICONO. chevron() imprime <svg class="vz-ico"> SIN width ni height,
   y un <svg> sin medidas ocupa 300x150 px por especificacion. Hay uno
   en cada micro-etiqueta (104 en el sitio), en cada item de .vz-lista
   y en cada boton: sin esta regla la web no se puede ni leer.
   Se dimensiona en em para que siga al texto que lo acompana en vez
   de repetir tamanos variante por variante. */
.vz-ico {
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
    /* Media caja de x por debajo de la linea base: asi el chevron
       queda centrado con la minuscula y no colgando de ella. */
    vertical-align: -0.125em;
}

/* Los logos de marca del sprite estan dibujados en un lienzo mas
   holgado y a 1em se leen pequenos al lado del texto. */
.vz-ico--marca { width: 1.15em; height: 1.15em; }

/* SPRITE. El <svg> de definiciones se imprime al principio del <body>
   para que <use> lo alcance. Sin width 0 reserva sus 300x150 px de
   hueco vacio en TODAS las paginas y empuja el contenido hacia abajo.
   No vale display: none: en varios motores eso invalida las
   referencias de <use> y el sitio se queda sin iconos. */
.vz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* HONEYPOT. inc/csrf.php dice literalmente que lo oculta el CSS: sin
   esta regla sale un campo "No rellenar" a la vista en el formulario
   de contacto, en el del pie y en /novedades.
   Fuera de pantalla y NO display: none, porque los bots que rellenan
   formularios saltan lo que esta oculto por display, que es justo lo
   que aqui hay que cazar. */
.vz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* -----------------------------------------------------------------
   1.6 . TIPOGRAFIA BASE
   ----------------------------------------------------------------- */

/* Los titulares van en la MISMA familia que el cuerpo: la casa tiene
   dos tipografias y la segunda es la mono, que aqui no titula.
   El peso se queda en medium a proposito: el enfasis del titular lo
   da el corte de color, no el trazo, y una grotesca a 500 en cuerpo
   grande pesa lo justo sin gritar.
   El color sale del contrato (1.3) y no se reescribe en ninguna otra
   capa: por eso la inversion sobre oscuro no necesita ni un selector. */
h1, h2, h3, h4 {
    font-family: var(--sans);
    font-weight: var(--fw-medium);
    color: var(--tit-suave);
    text-wrap: balance;
    font-synthesis-weight: none;
}

h1 { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-hero); }
h2 { font-size: var(--fs-2xl);  line-height: var(--lh-snug); letter-spacing: var(--tr-tit); }
h3 { font-size: var(--fs-xl);   line-height: var(--lh-snug); letter-spacing: var(--tr-tit); }
h4 { font-size: var(--fs-lg);   line-height: var(--lh-snug); letter-spacing: var(--tr-tit); }

p { text-wrap: pretty; }

/* En prosa el strong si engorda; en titular no (seccion 1.7). */
strong, b { font-weight: var(--fw-bold); }

small { font-size: var(--fs-xs); }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.9em; }


/* -----------------------------------------------------------------
   1.7 . TITULAR A DOS TONOS
   La frase entera va al mismo peso y al mismo tamano y se parte en
   dos colores: el <strong> lleva la mitad que informa y el resto se
   apaga. Por eso strong recupera el peso heredado: si engordase, el
   corte seria doble (color y trazo) y dejaria de leerse como una
   sola frase.
   Sobre suelo oscuro no hay que reescribir nada: el bloque cambia
   --tit-fuerte y --tit-suave y esta misma regla ya sirve.
   ----------------------------------------------------------------- */
h1 strong, h2 strong, h3 strong, h4 strong {
    color: var(--tit-fuerte);
    font-weight: inherit;
}


/* -----------------------------------------------------------------
   1.8 . ENLACES Y FOCO
   ----------------------------------------------------------------- */

/* El enlace hereda el color del texto y marca con el subrayado, no
   con relleno. Es lo unico que funciona igual sobre papel y sobre
   los bloques oscuros sin declarar dos veces cada enlace. */
a { color: inherit; text-decoration: none; }

/* Foco visible en todo lo enfocable, con el rojo de marca y separado
   del elemento para que se vea tambien sobre superficie roja: 3,4:1
   sobre papel-1 y 5,04:1 sobre tinta-0.
   SIN border-radius: inherit. El contorno ya sigue el radio propio
   del elemento por especificacion; lo que hacia esa linea era colar
   radios ajenos (los 6 px del cristal, por ejemplo) en controles que
   el sistema define a 0. */
:focus-visible {
    outline: 3px solid var(--rojo);
    outline-offset: 2px;
}


/* -----------------------------------------------------------------
   1.9 . SALTO AL CONTENIDO
   Fuera de pantalla hasta que lo enfoca el teclado. Sin display:none
   ni visibility:hidden, que lo sacarian del orden de tabulacion.
   Va sobre tinta-0 y no sobre rojo porque a este tamano de mono el
   par tinta-0 / papel-1 pasa AAA sin discusion.
   ----------------------------------------------------------------- */
.vz-skip {
    position: fixed;
    inset-block-start: var(--sp-2);
    inset-inline-start: var(--sp-2);
    z-index: 1000;
    padding: var(--sp-3) var(--sp-5);
    background: var(--tinta-0);
    color: var(--papel-1);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    border-radius: var(--r-btn);
    transform: translateY(calc(-100% - var(--sp-4)));
    transition: transform var(--dur-quick) var(--ease);
}

/* :focus y no :focus-visible: si alguien llega aqui de cualquier
   manera, el enlace tiene que verse igual. */
.vz-skip:focus { transform: translateY(0); }


/* -----------------------------------------------------------------
   1.10 . CONTENEDORES
   ----------------------------------------------------------------- */
.vz-wrap {
    width: 100%;
    max-width: var(--w-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* EL AIRE VERTICAL VA EN UNA SOLA DIRECCION: cada seccion empuja
   hacia abajo desde arriba y ninguna lleva relleno inferior. Cuando
   lo llevaba, dos secciones seguidas sumaban los dos rellenos y el
   hueco entre bloques pasaba de 64-128 px a 112-224 px, que es
   exactamente lo que rompia el ritmo del sitio.
   El unico relleno inferior de la web es el de la ultima seccion de
   la pagina, y lo pone la capa 6, que es la que sabe cual es. */
.vz-seccion {
    padding-block: clamp(var(--sp-8), 7vw, var(--sp-10)) 0;
}


/* -----------------------------------------------------------------
   1.11 . UTILIDADES DE TEXTO
   ----------------------------------------------------------------- */

/* ENTRADILLA. Medida mas corta que la prosa: a este cuerpo, 62ch se
   lee como un parrafo de periodico y la entradilla tiene que caer en
   dos o tres lineas. */
.vz-lead {
    max-width: 52ch;
    font-size: var(--fs-lg);
    line-height: 1.4;
    letter-spacing: var(--tr-tit);
    color: var(--tinta-2);
    text-wrap: pretty;
}

/* PROSA. Es el unico sitio de la web con ritmo vertical automatico,
   porque este contenido lo escribe el panel y no se sabe cuantos
   parrafos vienen ni en que orden. */
.vz-texto {
    max-width: var(--w-text);
    line-height: var(--lh-body);
    color: var(--tinta-2);
    /* Columna estrecha y palabras largas: en espanol hace falta.
       Se apoya en el lang del documento, que ya viene en el html. */
    hyphens: auto;
}

.vz-texto > * + * { margin-block-start: var(--sp-4); }

/* Un titulo dentro de la prosa abre bloque: pide mas aire arriba que
   un parrafo detras de otro. */
.vz-texto h2,
.vz-texto h3,
.vz-texto h4 { margin-block-start: var(--sp-7); }

.vz-texto ul,
.vz-texto ol {
    padding-inline-start: var(--sp-5);
    /* Marcador cuadrado: en esta casa no hay nada redondo. */
    list-style: square;
}

/* El marcador y el chevron de lista tiran de --corchete y no de un
   rojo escrito a mano: dentro de un bloque oscuro el contrato ya lo
   ha subido a --rojo y no hace falta ni un selector mas. */
.vz-texto li::marker { color: var(--corchete); }
.vz-texto li + li { margin-block-start: var(--sp-2); }

/* Variante ancha: la misma prosa cuando manda la caja, por ejemplo a
   dos columnas, donde la medida ya la impone la columna. */
.vz-texto--ancho { max-width: none; }

/* DATO. Mono pequena para metadatos y cifras. No va en versales
   porque aqui caben frases enteras ("Libro . En preparacion"), y una
   frase en mayusculas se lee peor y ocupa mas. */
.vz-mono {
    font-family: var(--mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    color: var(--tinta-3);
    /* Cifras alineadas en columna: precios, fechas, numeros de tomo. */
    font-variant-numeric: tabular-nums;
}

/* MICRO-ETIQUETA. El motivo grafico de la casa: mono diminuta, en
   versales, muy abierta y entre corchetes rojos.
   El motivo se declara UNA sola vez y aqui, aunque uno de los dos
   ganchos sea del pie: los titulos de columna del pie son exactamente
   esta micro-etiqueta y hasta ahora se reimplementaban aparte, con
   var(--rojo) escrito a mano y margenes propios. En cuanto el marcado
   del pie anada .vz-eyebrow a esos <h2>, el segundo selector se borra
   de aqui y no queda rastro.
   inline-flex para que el chevron que el marcado mete dentro se
   alinee con la linea y para que los corchetes abracen al conjunto;
   ademas asi la clase gana al font-size del <h2> del pie, que si no
   saldria a cuerpo de titular. */
.vz-eyebrow,
.vz-footer__tit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-end: var(--sp-3);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

/* Los corchetes son decoracion, por eso van en pseudoelemento y no en
   el marcado: un lector de pantalla no tiene que leer "corchete".
   El color sale de --corchete: asi cada suelo lo sube o lo baja sin
   tocar esta regla. */
.vz-eyebrow::before,
.vz-eyebrow::after,
.vz-footer__tit::before,
.vz-footer__tit::after {
    color: var(--corchete);
    font-weight: var(--fw-bold);
}

.vz-eyebrow::before,
.vz-footer__tit::before { content: "["; }

.vz-eyebrow::after,
.vz-footer__tit::after  { content: "]"; }

/* GRUPO DE ACCIONES. Fila de botones que envuelve en movil. El gap
   vale en las dos direcciones, asi que al envolver no se pegan. */
.vz-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

/* En movil los botones ya no caben en fila, asi que envuelven y cada
   uno se queda del ancho de su texto: "Como funciona" mide 179 px y
   "Plantilla de manuscrito gratis" 253, y la columna queda dentada.
   Apilados ocupan el ancho util, que ademas es la diana grande que se
   espera con el pulgar. El texto sigue centrado por la regla base. */
@media (max-width: 640px) {
    .vz-acciones > .vz-btn { flex: 1 1 100%; }
}

/* LISTA CON ICONO. El chevron va en su propia columna para que la
   segunda linea de un item no se meta debajo del icono. */
.vz-lista {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.vz-lista li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    align-items: start;
    line-height: var(--lh-body);
}

/* El icono se alinea con la primera linea, no con el borde de la
   caja: cae media linea por debajo del alto de mayuscula. */
.vz-lista li > svg {
    margin-block-start: 0.35em;
    color: var(--corchete);
}

/* ENLACE EN TEXTO. Color heredado y rojo solo en el subrayado: asi
   el mismo enlace funciona sobre papel y sobre bloque oscuro sin
   perder contraste en ninguno de los dos. */
.vz-a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--rojo);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-thickness var(--dur-micro) var(--ease);
}

.vz-a:hover,
.vz-a:focus-visible { text-decoration-thickness: 3px; }

/* SEPARACION. Unica utilidad de espaciado que existe: un escalon y
   nada mas, para no acabar con una escala de margenes paralela. */
.vz-mt { margin-block-start: var(--sp-6); }


/* -----------------------------------------------------------------
   1.12 . MOVIMIENTO REDUCIDO
   La escala de duracion se colapsa en la propia variable, asi que
   toda capa que anime con var(--dur-*) queda desactivada sin que
   haga falta un !important ni repetir la media query en cada capa.
   OJO, y esto es una regla de la casa, no un detalle: aqui NO hay red
   universal. Un `*, *::before, *::after` pesa (0,0,0) y toda
   transicion de la hoja se declara con selector de clase (0,1,0) y con
   el atajo `transition`, que reescribe la duracion entera. La
   especificidad manda sobre el orden, asi que esa regla no ganaria a
   ni una sola del fichero: estaba ahi dando una falsa sensacion de
   seguridad. Con !important prohibido no hay red posible.

   POR LO TANTO: ninguna duracion literal en `transition` ni en
   `animation`. Todo por var(--dur-*), o el movimiento no se apaga.

   scroll-behavior ya es auto para todo el mundo en 1.4, asi que aqui
   no queda nada que apagar.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-micro: 1ms; --dur-quick: 1ms; --dur-fast: 1ms;
        --dur-medium: 1ms; --dur-slow: 1ms;
    }
}


/* =================================================================
   2 . CONTROLES
   Botones, flecha cuadrada, filtros, campos, casillas y avisos.
   Todo cuadrado (--r-btn), sin pildoras, sin sombras difusas y sin
   una sola peticion externa: los unicos graficos son dos SVG en data
   URI, el chevron del <select> y el tique de la casilla.

   Lo que esta capa NO viste, aunque antes lo hiciera: el selector de
   idioma y el boton de menu. Los declaraba tambien la cabecera, y de
   la pelea salian un selector de idioma 4 px mas alto que su fila y
   un hover de tinta sobre tinta (1,00:1) que lo hacia desaparecer al
   pasar el raton. Ahora tienen un solo dueno, la capa 4, que es la
   que conoce la altura de la barra.
   ================================================================= */


/* -----------------------------------------------------------------
   2.1 . BOTON BASE
   El borde transparente va en el base, no en las variantes: asi el
   boton relleno y el de linea miden exactamente lo mismo y no hay
   salto de 1 px al cambiar de variante ni al pasar el raton.
   min-height 48px es el objetivo tactil minimo; sirve igual para <a>
   y para <button>, que aqui se maquetan como el mismo objeto.
   ----------------------------------------------------------------- */
.vz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: var(--sp-3) var(--sp-5);
    border: var(--bw) solid transparent;
    border-radius: var(--r-btn);
    background: none;
    font-family: var(--sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    /* Sin appearance nativa: en iOS el <button> se redondea solo. */
    appearance: none;
    transition:
        background-color var(--dur-quick) var(--ease),
        border-color var(--dur-quick) var(--ease),
        color var(--dur-quick) var(--ease),
        transform var(--dur-micro) var(--ease);
}

/* El icono ya viene medido en em desde la base (1.5) y hereda
   currentColor; aqui solo se le anade el empuje. */
.vz-btn .vz-ico {
    transition: transform var(--dur-quick) var(--ease);
}

/* Empuje del chevron: 2px, el minimo que se lee como intencion. */
@media (hover: hover) {
    .vz-btn:hover .vz-ico {
        transform: translateX(2px);
    }
}

/* Pulsacion: 1px de hundimiento, sin sombra. */
.vz-btn:active {
    transform: translateY(1px);
}


/* -----------------------------------------------------------------
   2.2 . VARIANTES DE SUPERFICIE
   Las dos variantes que pueden caer sobre suelo oscuro (linea y
   oscuro) se escriben con propiedades reasignables. Antes no, y en
   /nosotros y /sello el boton de la banda quedaba en tinta-0 sobre
   tinta-0 (1,00:1) con el filete en tinta-2 sobre tinta-0 (1,68:1):
   el control desaparecia entero. Con estas variables cada anfitrion
   oscuro lo reasigna en su propio bloque y ninguna capa necesita
   escribir un :not(.vz-btn) para esquivarlo.
   ----------------------------------------------------------------- */

/* PRIMARIO. Superficie roja CON texto pequeno encima, luego --rojo-aa
   y nunca --rojo. El texto va en el blanco puro de :root porque es el
   par medido (4,55:1); con --papel-0 se quedaria en 4,37:1 y no
   llegaria a AA. El hover baja a --rojo-tex, que sigue en 5,57:1. */
.vz-btn--rojo {
    background-color: var(--rojo-aa);
    color: var(--sobre-rojo);
}

/* SECUNDARIO. Tinta llena. Al pasar el raton vira al petroleo, que es
   el otro suelo oscuro de la casa: cambia sin encender otro rojo.
   El papel sobre petroleo da 11,7:1. */
.vz-btn--oscuro {
    background-color: var(--btn-oscuro-fondo, var(--tinta-0));
    color: var(--btn-oscuro-txt, var(--papel-1));
}

/* TERCIARIO. Solo filete. Al hover se invierte a bloque de tinta. */
.vz-btn--linea {
    border-color: var(--btn-linea-filete, var(--tinta-2));
    color: var(--btn-linea-txt, var(--tinta-0));
}

/* SOBRE FONDO OSCURO. Papel lleno y papel de filete. */
.vz-btn--claro {
    background-color: var(--papel-1);
    color: var(--tinta-0);
}

.vz-btn--claro-linea {
    /* --papel-3 y no un papel al 40 %: filete solido, sin opacidad,
       para que se lea igual encima de tinta-0 que de petroleo. */
    border-color: var(--papel-3);
    color: var(--papel-1);
}

@media (hover: hover) {
    .vz-btn--rojo:hover        { background-color: var(--rojo-tex); }
    .vz-btn--oscuro:hover      { background-color: var(--btn-oscuro-hover, var(--petroleo)); }
    .vz-btn--claro:hover       { background-color: var(--papel-0); }
    .vz-btn--claro-linea:hover { background-color: var(--papel-1); border-color: var(--papel-1); color: var(--tinta-0); }

    /* La inversion del boton de linea: el filete se llena del color
       del texto y el texto pasa al del fondo del anfitrion. */
    .vz-btn--linea:hover {
        background-color: var(--btn-linea-txt, var(--tinta-0));
        border-color: var(--btn-linea-txt, var(--tinta-0));
        color: var(--btn-linea-fondo, var(--papel-1));
    }
}


/* -----------------------------------------------------------------
   2.3 . TAMANO PEQUENO
   El de la barra de navegacion y el de las tiras de acciones.
   ----------------------------------------------------------------- */
.vz-btn--sm {
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
}


/* -----------------------------------------------------------------
   2.4 . AMAZON
   Boton de compra en una tienda que no es nuestra. Se marca como
   dato, no como accion de marca: suelo de tinta con filete de oro,
   que es el unico sitio donde el oro es legal (9,08:1 sobre tinta-0).
   Al hover se llena de oro con el texto en tinta, la misma pareja
   medida pero al reves.
   ----------------------------------------------------------------- */
.vz-btn--amazon {
    background-color: var(--tinta-0);
    border-color: var(--oro);
    color: var(--papel-1);
}

/* El icono de marca va siempre en oro, tambien al invertirse. */
.vz-btn--amazon .vz-ico--marca {
    color: var(--oro);
}

@media (hover: hover) {
    .vz-btn--amazon:hover {
        background-color: var(--oro);
        color: var(--tinta-0);
    }

    .vz-btn--amazon:hover .vz-ico--marca {
        color: var(--tinta-0);
    }
}


/* -----------------------------------------------------------------
   2.5 . DESHABILITADO
   Superficie hundida y metadato: --tinta-3 sobre --papel-2 es 5,04:1,
   o sea que el boton apagado se sigue leyendo. Nada de opacidad
   global, que arruinaria el contraste sin avisar.
   ----------------------------------------------------------------- */
.vz-btn:disabled,
.vz-btn[aria-disabled="true"] {
    background-color: var(--papel-2);
    border-color: var(--papel-3);
    color: var(--tinta-3);
    cursor: not-allowed;
    transform: none;
}

.vz-btn:disabled .vz-ico,
.vz-btn[aria-disabled="true"] .vz-ico {
    transform: none;
}


/* -----------------------------------------------------------------
   2.6 . FLECHA CUADRADA
   Mobiliario: el cuadrado con chevron que remata titulares de tarjeta
   y de servicio. Casi siempre es un <span> dentro de un enlace, asi
   que reacciona al hover y al foco DEL PADRE, no al suyo.

   El color va por variable por lo mismo que los botones: dentro de
   una tarjeta de petroleo el filete y el chevron en tinta-0 daban
   1,46:1, y el unico dibujo de un control de 44 px es justo ese
   filete. Cada anfitrion oscuro reasigna --arrow-tinte y --arrow-fondo.
   ----------------------------------------------------------------- */
.vz-arrow-btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: var(--bw) solid var(--arrow-tinte, var(--tinta-0));
    border-radius: var(--r-btn);
    color: var(--arrow-tinte, var(--tinta-0));
    transition:
        background-color var(--dur-quick) var(--ease),
        color var(--dur-quick) var(--ease);
}

/* Los 14 px si son de aqui: la flecha es mobiliario de tamano fijo y
   no sigue al cuerpo del texto que tenga al lado. */
.vz-arrow-btn .vz-ico {
    width: 14px;
    height: 14px;
    transition: transform var(--dur-quick) var(--ease);
}

/* Inversion cuando se activa el enlace o el boton que la contiene.
   El foco entra aqui ademas del outline porque, navegando con
   teclado, la flecha tiene que decir lo mismo que dice el raton. */
.vz-arrow-btn:hover,
a:hover .vz-arrow-btn,
button:hover .vz-arrow-btn,
a:focus-visible .vz-arrow-btn,
button:focus-visible .vz-arrow-btn {
    background-color: var(--arrow-tinte, var(--tinta-0));
    color: var(--arrow-fondo, var(--papel-1));
}

.vz-arrow-btn:hover .vz-ico,
a:hover .vz-arrow-btn .vz-ico,
button:hover .vz-arrow-btn .vz-ico {
    transform: translateX(2px);
}


/* -----------------------------------------------------------------
   2.7 . FILTROS Y CHIPS
   Segmentos cuadrados con filete, en mono diminuta: son metadato de
   navegacion, no botones de accion. Con gap y wrap en vez de una
   barra unida, porque al envolver en movil una barra unida deja
   filetes huerfanos a mitad de fila.
   ----------------------------------------------------------------- */
.vz-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.vz-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-btn);
    background-color: var(--papel-0);
    color: var(--tinta-2);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transition:
        background-color var(--dur-quick) var(--ease),
        border-color var(--dur-quick) var(--ease),
        color var(--dur-quick) var(--ease);
}

/* El recuento es dato secundario dentro del propio segmento. */
.vz-chip__n {
    color: var(--tinta-3);
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .vz-chip:hover {
        background-color: var(--papel-2);
        border-color: var(--tinta-3);
        color: var(--tinta-0);
    }
}

/* Activo: bloque de tinta lleno. El recuento pasa a oro, que sobre
   tinta-0 da 9,08:1 y es de los pocos sitios donde el oro es legal. */
.vz-chip.is-activo {
    background-color: var(--tinta-0);
    border-color: var(--tinta-0);
    color: var(--papel-1);
}

.vz-chip.is-activo .vz-chip__n {
    color: var(--oro);
}


/* -----------------------------------------------------------------
   2.8 . CAMPOS DE FORMULARIO
   ----------------------------------------------------------------- */
.vz-campo {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

/* La etiqueta es micro-tipografia mono, como el resto del mobiliario,
   pero sin corchetes rojos: los corchetes son de .vz-eyebrow y, si se
   repiten en cada label, dejan de significar nada. --tinta-2 da
   10,12:1 sobre papel, o sea AAA tambien a este tamano. */
.vz-campo > label {
    color: var(--tinta-2);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
}

.vz-campo__opt {
    color: var(--tinta-3);
}

/* Controles. El borde es --tinta-3 (6,2:1 sobre papel-0), muy por
   encima del 3:1 que exige el limite de un control. 16px de base
   porque por debajo Safari en iOS hace zoom al enfocar. */
.vz-campo > input,
.vz-campo > textarea,
.vz-campo > select {
    width: 100%;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    border: var(--bw) solid var(--tinta-3);
    border-radius: var(--r-btn);
    background-color: var(--papel-0);
    color: var(--tinta-1);
    font-family: var(--sans);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    appearance: none;
    transition:
        background-color var(--dur-quick) var(--ease),
        border-color var(--dur-quick) var(--ease);
}

.vz-campo > input::placeholder,
.vz-campo > textarea::placeholder {
    color: var(--tinta-3);
    /* Firefox baja la opacidad del placeholder por su cuenta y se
       carga el contraste medido. */
    opacity: 1;
}

.vz-campo > textarea {
    min-height: 160px;
    /* Solo vertical: en horizontal el usuario puede sacar el textarea
       de la columna de texto y romper la reticula. */
    resize: vertical;
}

/* SELECT. Chevron propio en data URI (cero peticiones). El color va
   escrito a mano porque un data URI no hereda currentColor: es
   --tinta-2 (#3B3933), y hay que tocarlo aqui si cambia el token. */
.vz-campo > select {
    padding-right: calc(var(--sp-4) * 2 + 12px);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%233B3933' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    background-size: 12px 8px;
}

@media (hover: hover) {
    .vz-campo > input:hover,
    .vz-campo > textarea:hover,
    .vz-campo > select:hover {
        border-color: var(--tinta-2);
    }
}

/* Enfocado: ademas del anillo general, el borde se cierra en tinta
   para que el campo activo se distinga tambien de reojo. */
.vz-campo > input:focus-visible,
.vz-campo > textarea:focus-visible,
.vz-campo > select:focus-visible {
    border-color: var(--tinta-0);
}

/* ERROR. El estado lo marca el servidor con aria-invalid, no una
   clase: asi el estilo y lo que anuncia el lector de pantalla no
   pueden separarse nunca. Se usa background-color y no background
   para no borrar el chevron del select. */
.vz-campo > [aria-invalid="true"] {
    border-color: var(--rojo-tex);
    background-color: var(--rojo-velo);
}

/* El mensaje aparece dentro del campo y tambien suelto (avisos
   generales del formulario, casillas de aceptacion), por eso no se
   anida. --rojo-tex es el rojo legal como texto sobre papel: 4,89:1,
   y sobre el velo rojo sube. */
.vz-campo__error {
    display: block;
    color: var(--rojo-tex);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-mono);
}

/* Pareja de campos cortos. Solo a partir de 640px: apilados en movil
   caben enteros y no hay que partir la etiqueta en dos lineas. */
@media (min-width: 640px) {
    .vz-campo--par {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5);
    }
}


/* -----------------------------------------------------------------
   2.9 . CASILLAS, AVISOS Y CAJA DE FORMULARIO
   Piezas que el marcado ya usaba y que no vestia nadie: las casillas
   de aceptacion de /guia, de /coleccion y del aviso de tomo salian
   con el dibujo del sistema, y el acuse "Mensaje enviado" de
   contacto se leia como un parrafo suelto.
   ----------------------------------------------------------------- */

/* CASILLA. Rejilla de dos columnas para que la segunda linea de la
   frase legal no se meta debajo del cuadrado. */
.vz-check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--sp-3);
    align-items: start;
    margin-block-end: var(--sp-4);
}

.vz-check > input {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: var(--bw) solid var(--tinta-3);
    border-radius: var(--r-btn);
    background-color: var(--papel-0);
}

.vz-check > input:checked {
    background-color: var(--rojo-aa);
    border-color: var(--rojo-aa);
}

/* El tique va en blanco puro por la misma razon que el texto del
   boton primario: sobre rojo-aa es el unico par medido (4,55:1). No
   puede leer --sobre-rojo porque un data URI no hereda variables:
   si cambia el token, cambia tambien este %23FFFFFF. */
.vz-check > input:checked::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.vz-check > label {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--tinta-2);
}

/* AVISO. Filete grueso al principio de la linea y velo de fondo: es
   un bloque de estado, no una tarjeta, asi que no lleva caja entera.
   El aspecto de salida ES el de error, que es el mas frecuente y el
   que no puede pasar desapercibido; por eso .vz-aviso--error no
   necesita una regla propia y no la tiene. */
.vz-aviso {
    padding: var(--sp-5);
    border-inline-start: 4px solid var(--rojo-aa);
    background-color: var(--rojo-velo);
    font-size: var(--fs-sm);
    color: var(--tinta-2);
}

.vz-aviso--ok {
    border-inline-start-color: var(--tinta-0);
    background-color: var(--papel-2);
}

.vz-aviso__t {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: var(--fw-bold);
    color: var(--tinta-0);
}

/* CAJA DEL FORMULARIO. Superficie elevada con filete: separa el
   formulario de la columna de texto que tiene al lado sin necesidad
   de una sombra. */
.vz-form__caja {
    padding: clamp(var(--sp-5), 3vw, var(--sp-6));
    border: var(--bw) solid var(--papel-3);
    background-color: var(--papel-0);
}

/* La linea legal de debajo del boton: metadato, no cuerpo. */
.vz-form__legal {
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
    color: var(--tinta-3);
}


/* -----------------------------------------------------------------
   2.10 . FOCO
   Un solo anillo para todos los controles de la capa: 3px en --rojo,
   separado 2px para que no se coma el filete del control. El rojo da
   3,4:1 sobre papel-1 y 5,04:1 sobre tinta-0, o sea que se ve en los
   dos suelos. Solo :focus-visible: el raton no debe dejar anillo.
   El idioma y el burger no estan en la lista porque ya no son de
   esta capa: los cubre el foco de la cabecera.
   ----------------------------------------------------------------- */
/* El anillo NO se repite aqui: el :focus-visible de la base (1.6) ya
   cubre todo lo enfocable del documento, controles incluidos. Repetirlo
   por capa era el vicio de la hoja anterior: cinco copias del mismo
   anillo que se desincronizan en cuanto alguien lo cambia en un sitio.
   Lo unico propio de esta capa es el filete de debajo. */

/* Sobre el boton rojo el anillo rojo se fundiria con la superficie:
   se mete un filete claro por dentro que los separa. Es filete, no
   sombra difusa. */
.vz-btn--rojo:focus-visible {
    box-shadow: inset 0 0 0 2px var(--papel-0);
}


/* -----------------------------------------------------------------
   2.11 . MOVIMIENTO REDUCIDO
   Se apagan transiciones y desplazamientos.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .vz-btn,
    .vz-btn .vz-ico,
    .vz-arrow-btn,
    .vz-arrow-btn .vz-ico,
    .vz-chip,
    .vz-campo > input,
    .vz-campo > textarea,
    .vz-campo > select {
        transition: none;
    }

    .vz-btn:active,
    .vz-btn:hover .vz-ico,
    .vz-arrow-btn:hover .vz-ico,
    a:hover .vz-arrow-btn .vz-ico,
    button:hover .vz-arrow-btn .vz-ico {
        transform: none;
    }
}


/* -----------------------------------------------------------------
   2.12 . ALTO CONTRASTE DEL SISTEMA
   En forced-colors Windows tira los fondos, y los estados llenos de
   chip y de flecha dejarian de distinguirse. Se reatan a los colores
   del sistema, que es lo unico que se pinta ahi.
   ----------------------------------------------------------------- */
@media (forced-colors: active) {
    .vz-chip.is-activo,
    .vz-arrow-btn:hover,
    a:hover .vz-arrow-btn {
        forced-color-adjust: none;
        background-color: CanvasText;
        color: Canvas;
    }
}


/* =================================================================
   3 . SUPERFICIES
   Suelo organico, cristal, esquinas, bloque oscuro, caja de sello y
   recto rojo. Esta capa pinta fondo, profundidad y mobiliario. No
   toca tipografia: los titulares de dentro se invierten solos porque
   cada superficie redeclara el contrato de 1.3.
   ================================================================= */


/* -----------------------------------------------------------------
   3.1 . EL CONTRATO DE LOS SUELOS OSCUROS
   Las tres superficies oscuras de esta capa cambian aqui, y solo
   aqui, lo que la base necesita saber para invertirse: titular a dos
   tonos, corchetes, filete y las dos variantes de boton que pueden
   caer encima.

   Antes esto no existia y cada capa reescribia el color del titular
   a mano, con el resultado de que el <h2> de la franja del sello
   quedaba en 3,00:1 y su <strong> en 1,00:1. Ahora no hay ni un
   selector de h1, h2 o strong fuera de la base.
   ----------------------------------------------------------------- */
.vz-bloque--oscuro,
.vz-cristal,
.vz-fluido:not(.vz-fluido--claro) {
    --tit-fuerte: var(--papel-1);
    --tit-suave:  var(--papel-1-68);   /* 8,11:1 sobre tinta-0 */
    --corchete:   var(--rojo);         /* 5,04:1 */
    --linea:      var(--papel-1-16);

    /* Botones: el filete sube a papel-3 (12,85:1 sobre tinta-0) y el
       boton lleno se invierte a papel con texto de tinta. */
    --btn-linea-filete: var(--papel-3);
    --btn-linea-txt:    var(--papel-1);
    --btn-linea-fondo:  var(--tinta-0);
    --btn-oscuro-fondo: var(--papel-1);
    --btn-oscuro-txt:   var(--tinta-0);
    --btn-oscuro-hover: var(--papel-0);

    /* Flecha cuadrada: filete y chevron en papel. */
    --arrow-tinte: var(--papel-1);
    --arrow-fondo: var(--tinta-0);
}

/* La micro-etiqueta declara su propio color en la base (tinta-3), y
   un color declarado en el hijo no lo tumba un color heredado del
   padre: dentro del bloque oscuro se quedaba en 3,1:1 a 11 px. Va al
   82 %, igual que en la banda de capitulo y en el hero. Los corchetes
   no entran aqui: ya los ha subido --corchete. */
.vz-bloque--oscuro .vz-eyebrow,
.vz-cristal .vz-eyebrow,
.vz-fluido:not(.vz-fluido--claro) .vz-eyebrow {
    color: var(--papel-1-82);
}


/* -----------------------------------------------------------------
   3.2 . SUELO ORGANICO .vz-fluido
   Sustituye a la foto de stock. Cinco radiales superpuestos,
   desenfocados en bloque sobre un pseudoelemento con inset negativo,
   mas grano encima.

   Por que un pseudoelemento y no el fondo del propio elemento: el
   blur fuerte come los bordes del degradado y deja halos claros en el
   perimetro. Con inset negativo del 14 % la zona degradada nace fuera
   del recorte, y overflow hidden devuelve el rectangulo limpio.

   Por que isolation: isolate: el grano usa mix-blend-mode y sin grupo
   aislado se mezclaria con lo que haya debajo en la pagina, no solo
   con el suelo. El aislamiento tambien encierra los z-index negativos
   de los pseudos, que pintan por encima del color de fondo y por
   debajo del contenido real.

   El color base va como background-color en el elemento, no en el
   pseudo, para que el contraste del texto siga garantizado aunque el
   motor descarte la lista de degradados por cualquier motivo.
   ----------------------------------------------------------------- */
.vz-fluido {
    /* Manchas del suelo. Se declaran como variables para que la
       geometria de los radiales se escriba una sola vez y la variante
       clara solo cambie color. */
    /* El rojo manda la mancha, y no es capricho: es EL color de la casa
       y el brief pide que se vea mucho. Sin el, el suelo organico se
       quedaba en verde y oro y la marca desaparecia de su propia
       portada. El texto no depende de esto: el panel de cristal lleva
       su propio suelo oscuro. */
    --f1: var(--rojo);
    --f2: var(--rojo-tex);
    --f3: var(--petroleo-2);
    --f4: color-mix(in srgb, var(--oro) 30%, transparent);
    --f5: var(--tinta-0);

    /* Mobiliario de esquina sobre suelo oscuro: papel al 62 %, 5,80:1
       sobre tinta-0, de sobra para la mono de 11 px. */
    --esquina-tinte: var(--papel-1-62);

    position: relative;   /* ancla de los pseudos y de las esquinas */
    isolation: isolate;
    overflow: hidden;
    background-color: var(--tinta-0);
    color: var(--papel-1);
}

.vz-fluido::before {
    content: "";
    position: absolute;
    inset: -14%;
    z-index: -2;
    background-image:
        radial-gradient(46% 58% at 12% 18%, var(--f1), transparent 52%),
        radial-gradient(38% 52% at 84% 6%,  var(--f2), transparent 66%),
        radial-gradient(56% 64% at 70% 76%, var(--f3), transparent 68%),
        radial-gradient(34% 46% at 28% 94%, var(--f4), transparent 64%),
        radial-gradient(30% 38% at 52% 44%, var(--f5), transparent 70%);
    filter: blur(72px);
    pointer-events: none;

    /* El suelo deriva muy despacio. Con inset -14 % hay holgura de
       sobra para moverse un 3 % y crecer un 8 % sin que asome el
       borde de la caja. Va por transform, que compone en GPU: animar
       las posiciones de los radiales repintaria 72 px de desenfoque
       en cada fotograma. */
    animation: vz-deriva var(--dur-deriva) var(--ease) infinite;
    will-change: transform;
}

@keyframes vz-deriva {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, -2.5%, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* La unica animacion infinita de la hoja, y por eso la unica que no
   puede apagarse colapsando su duracion: a 1 ms seria un estrobo. */
@media (prefers-reduced-motion: reduce) {
    .vz-fluido::before {
        animation: none;
        will-change: auto;
    }
}

/* En pantallas pequenas la superficie es diminuta y un blur de 72px
   es gasto puro de GPU sin diferencia visible. Se baja el radio, no
   el efecto. */
@media (max-width: 639px) {
    .vz-fluido::before { filter: blur(48px); }
}

/* Variante clara: mismo suelo, base papel. Las manchas se apagan
   porque sobre papel-1 cualquier mancha saturada se come la
   legibilidad del cuerpo. */
.vz-fluido--claro {
    --f1: var(--papel-2);
    --f2: var(--rojo-velo);
    --f3: color-mix(in srgb, var(--oro) 16%, transparent);
    --f4: var(--papel-3);
    --f5: var(--papel-0);
    --esquina-tinte: var(--tinta-3);

    /* Sobre base clara el overlay casi no se ve: el grano pasa a
       multiply (abajo) y baja de opacidad para que texture sin
       ensuciar. Es la unica excepcion al grano unico, y es de blend,
       no de motivo: el dibujo sigue siendo el mismo de :root. */
    --grano-op: 0.09;

    background-color: var(--papel-1);
    color: var(--tinta-2);
}

.vz-fluido--claro::after {
    mix-blend-mode: multiply;
}


/* -----------------------------------------------------------------
   3.3 . CRISTAL .vz-cristal
   Tinte OSCURO siempre. Es la unica forma de que el texto claro de
   dentro no dependa de lo que pase por detras: con brightness 0.72 en
   el backdrop mas el velo de tinta al 58 %, el peor caso (backdrop
   blanco puro) sigue dando 6,6:1 con papel-1, y sobre el suelo oscuro
   se va por encima de 12:1.

   Profundidad sin blur gris: filo de luz de 1px arriba, corte de
   tinta de 1px abajo y una sombra interior inferior hecha con tinta,
   no con negro difuso.

   Radio --r-media porque el cristal siempre flota sobre media o sobre
   el suelo organico, nunca es un bloque editorial.
   ----------------------------------------------------------------- */
.vz-cristal {
    --esquina-tinte: var(--papel-1-78);

    position: relative;
    isolation: isolate;
    border: var(--bw) solid var(--papel-1-14);
    border-radius: var(--r-media);
    background-color: var(--tinta-0-58);
    -webkit-backdrop-filter: blur(18px) saturate(1.2) brightness(0.72);
    backdrop-filter: blur(18px) saturate(1.2) brightness(0.72);
    box-shadow:
        inset 0 1px 0 var(--papel-1-24),
        inset 0 -1px 0 var(--tinta-0-55),
        inset 0 -40px 44px -40px var(--tinta-0-75);
    color: var(--papel-1);
}

/* Sin backdrop-filter el velo al 58 % dejaria leer el fondo a traves
   y el contraste seria indeterminado. Se cierra en solido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vz-cristal { background-color: var(--tinta-1); }
}

/* Quien pide menos transparencia recibe superficie plena, no un blur
   suavizado. */
@media (prefers-reduced-transparency: reduce) {
    .vz-cristal {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: var(--tinta-1);
    }
}


/* -----------------------------------------------------------------
   3.4 . BLOQUE OSCURO .vz-bloque--oscuro
   Bloque a sangre. Se espera a nivel de documento, con un .vz-wrap
   dentro que ya aporta el gutter: por eso aqui solo hay ritmo
   vertical y ningun padding lateral, para no duplicar margenes.
   El fondo sale de una variable propia para que una pagina pueda
   cambiarlo a petroleo sin que esta capa conozca las clases de pagina.
   ----------------------------------------------------------------- */
.vz-bloque--oscuro {
    --bloque-fondo: var(--tinta-0);
    --esquina-tinte: var(--papel-1-62);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(var(--sp-8), 8vw, var(--sp-10));
    background-color: var(--bloque-fondo);
    color: var(--papel-1);
}


/* -----------------------------------------------------------------
   3.5 . EL GRANO DE LAS TRES SUPERFICIES
   Un solo bloque para los tres pseudos: mismo motivo, mismo mosaico y
   misma opacidad, todo leido de :root. Antes cada superficie llevaba
   su propio data URI de feTurbulence, con tres tamanos de mosaico
   distintos, y las texturas no casaban entre si donde se tocaban.
   ----------------------------------------------------------------- */
.vz-fluido::after,
.vz-bloque--oscuro::after,
.vz-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;   /* sobre las manchas, bajo el contenido */
    background-image: var(--grano);
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: var(--grano-op);
    pointer-events: none;
}


/* -----------------------------------------------------------------
   3.6 . ESQUINAS .vz-esquinas / .vz-esquina
   Mono diminuta clavada en las cuatro esquinas de los bloques
   grandes, con un filete en angulo que abraza el vertice. Es
   mobiliario, no contenido: no recibe puntero ni seleccion.

   .vz-esquinas SOLO ANCLA. En el marcado real va en el MISMO elemento
   que .vz-fluido (home y guia de estilo), no en un envoltorio: si se
   posiciona absoluto, gana a position: relative por orden, y con
   inset: 0 y pointer-events: none saca el hero entero del flujo y le
   quita el puntero a todo lo que hay dentro, botones incluidos. El
   pointer-events baja al hijo, que es quien de verdad es decoracion.

   El color sale de --esquina-tinte, que fija cada superficie
   anfitriona; el valor de reserva es tinta-3, que cumple AA sobre
   papel-1 y papel-2, asi que funciona tambien dentro de tarjetas
   claras de otras capas.
   ----------------------------------------------------------------- */
.vz-esquinas {
    position: relative;
}

.vz-esquina {
    position: absolute;
    pointer-events: none;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--esquina-tinte, var(--tinta-3));
    -webkit-user-select: none;
    user-select: none;
}

/* El angulo se dibuja con dos lados de un cuadrado de 12px. Nace sin
   bordes y cada modificador enciende los dos que le tocan. */
.vz-esquina::before {
    content: "";
    position: absolute;
    width: var(--sp-3);
    height: var(--sp-3);
    border: 0 solid currentColor;
    opacity: 0.55;
}

.vz-esquina--si {
    top: var(--sp-5);
    left: var(--sp-5);
    padding-left: calc(var(--sp-3) + var(--sp-2));
}
.vz-esquina--si::before {
    top: 0;
    left: 0;
    border-top-width: var(--bw);
    border-left-width: var(--bw);
}

.vz-esquina--sd {
    top: var(--sp-5);
    right: var(--sp-5);
    padding-right: calc(var(--sp-3) + var(--sp-2));
    text-align: right;
}
.vz-esquina--sd::before {
    top: 0;
    right: 0;
    border-top-width: var(--bw);
    border-right-width: var(--bw);
}

.vz-esquina--ii {
    bottom: var(--sp-5);
    left: var(--sp-5);
    padding-left: calc(var(--sp-3) + var(--sp-2));
}
.vz-esquina--ii::before {
    bottom: 0;
    left: 0;
    border-bottom-width: var(--bw);
    border-left-width: var(--bw);
}

.vz-esquina--id {
    bottom: var(--sp-5);
    right: var(--sp-5);
    padding-right: calc(var(--sp-3) + var(--sp-2));
    text-align: right;
}
.vz-esquina--id::before {
    bottom: 0;
    right: 0;
    border-bottom-width: var(--bw);
    border-right-width: var(--bw);
}

/* Por debajo de 720px el mobiliario choca con el contenido real y
   gana el contenido. Es decoracion, se retira entera. Se esconde el
   hijo y no el contenedor, que ahora es el bloque. */
@media (max-width: 719px) {
    .vz-esquina { display: none; }
}


/* -----------------------------------------------------------------
   3.7 . CAJA DE SELLO .vz-sello__caja
   Superficie elevada con doble filete: el borde exterior y una linea
   interior a 4px, dibujada con dos anillos inset solidos. Nada de
   blur, es filete puro.
   El anillo de relleno va primero porque las sombras se pintan en
   orden y la primera queda encima, dejando visible solo la banda de
   1px del segundo.
   ----------------------------------------------------------------- */
.vz-sello__caja {
    --sello-fondo: var(--papel-0);
    --sello-filete: var(--papel-3);

    position: relative;
    padding: var(--sp-6);
    border: var(--bw) solid var(--sello-filete);
    background-color: var(--sello-fondo);
    box-shadow:
        inset 0 0 0 var(--sp-1) var(--sello-fondo),
        inset 0 0 0 calc(var(--sp-1) + var(--bw)) var(--sello-filete);
}

/* Dentro de cualquier superficie oscura de esta misma capa la caja se
   invierte sola, sin clases de pagina y sin JS. La variante clara del
   fluido se excluye con :not porque ahi el anfitrion sigue siendo
   papel. El contrato del titular ya viene heredado de 3.1. */
.vz-fluido:not(.vz-fluido--claro) .vz-sello__caja,
.vz-bloque--oscuro .vz-sello__caja,
.vz-cristal .vz-sello__caja {
    --sello-fondo: var(--tinta-0-50);
    --sello-filete: var(--papel-1-24);
    color: var(--papel-1);
}


/* -----------------------------------------------------------------
   3.8 . RECTO ROJO .vz-cta
   El unico plano rojo del documento, y va A SANGRE. Vive dentro de
   main > .vz-wrap, asi que para salir de la columna tiene que hacer
   el mismo viaje de ida y vuelta que la banda de capitulo: salirse
   con margin negativo y devolver el contenido a la reticula con el
   relleno inverso. Sin esto el plano se quedaba dentro del gutter y
   .vz-cta__in sumaba un SEGUNDO gutter encima del de .vz-wrap.
   Depende del overflow-x: clip del body (1.4): sin el, esto anade una
   barra horizontal.

   Se usa --rojo-aa y no --rojo porque este plano lleva mobiliario
   mono encima: rojo-aa es el paso medido para texto pequeno.

   EL DATO DURO DE ESTE BLOQUE: sobre rojo-aa NINGUN paso de tinta
   llega a 4,5. Por eso todo lo que sea texto pequeno va en blanco
   (4,55, el par que certifica el token) y solo el titular, que es
   display de 32 a 48 px, puede ir en tinta: 4,28 el <strong> y 3,52
   el resto, los dos validos a ese cuerpo. El papel no entra: papel-1
   al 68 % sobre rojo-aa da 2,6 y no llega ni a texto grande.
   ----------------------------------------------------------------- */
.vz-cta {
    /* El titular a dos tonos se invierte al lado de la tinta, no al
       del papel, que es la misma jerarquia de la casa leida en
       negativo. */
    /* EN BLANCO, NO EN TINTA. El comentario de arriba describia un
       titular a dos tonos de tinta sobre el rojo, y los numeros que
       decia -4,28 y 3,52- no salen: medido sobre rojo-aa, la tinta
       OPACA da 2,97:1 y al 78 % baja a 2,7. Los dos por debajo del 3:1
       que exige un titular grande, o sea que la jerarquia en negativo
       no era legible en ninguno de sus dos pasos. En blanco da 6,5:1, y
       el paso suave al 80 % da 4,55: se conservan los dos tonos y los
       dos pasan. Ademas casa con el resto de la banda, donde la
       micro-etiqueta y los corchetes ya iban en blanco. */
    --tit-fuerte: var(--sobre-rojo);          /* 6,50:1 sobre rojo-aa */
    --tit-suave:  rgb(255 255 255 / 0.80);    /* 4,55:1 sobre rojo-aa */
    --corchete:   var(--sobre-rojo);
    --esquina-tinte: var(--sobre-rojo);

    /* El rojo es el otro suelo que cambia el terreno bajo un boton, y
       se habia quedado fuera del contrato. Con los valores de reserva,
       .vz-btn--linea daba 4,28:1 de texto, 2,54:1 de filete y 1,18:1 de
       anillo de foco: un boton sin dibujo y sin foco en /guia, /sello y
       las fichas de servicio. Sobre rojo-aa NINGUN paso de tinta llega
       a 4,5, asi que todo lo pequeno va en blanco. */
    --btn-linea-filete: var(--sobre-rojo);   /* 4,55:1 */
    --btn-linea-txt:    var(--sobre-rojo);   /* 4,55:1 */
    --btn-linea-fondo:  var(--rojo-aa);
    --btn-oscuro-fondo: var(--tinta-0);
    --btn-oscuro-txt:   var(--papel-1);
    --btn-oscuro-hover: var(--tinta-1);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--rojo-aa);

    /* A sangre. El 50 % de los dos calculos se resuelve contra el
       ancho de la seccion, asi que el interior cae exactamente sobre
       la columna de .vz-wrap. */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

/* El interior solo centra y da ritmo vertical: el lateral ya lo pone
   el sangrado de arriba, y ponerlo aqui otra vez era el segundo
   gutter. */
.vz-cta__in {
    max-width: var(--w-max);
    margin-inline: auto;
    padding-block: clamp(var(--sp-8), 7vw, var(--sp-10));
}

/* .vz-cta__tit ES UN ENVOLTORIO, no el titular: dentro van la
   micro-etiqueta, el <h2> y el correo. Cuando se vestia como titular,
   el <h2> de dentro conservaba su color de la base y quedaba en
   tinta-3 sobre rojo-aa (1,42:1), y el correo heredaba --fs-2xl y
   salia a 48 px. Se viste como pila y el color se pasa al contrato. */
.vz-cta__tit {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    /* NADA de max-width aqui: 'ch' se resuelve contra la fuente del
       PROPIO elemento, y esto es un div sin font-size, o sea 16 px. El
       h2 de dentro va a 32-48 px, asi que 24ch lo encajonaban en una
       columna de 210 px y el recto rojo reventaba en seis paginas. La
       medida va sobre el titular, donde el ch mide a cuerpo display. */
}

.vz-cta__tit > * { margin-block: 0; }
.vz-cta__tit > h2 { max-width: 18ch; }

/* La micro-etiqueta del plano rojo iba en tinta-3 sobre rojo-aa
   (1,42:1) con los corchetes en rojo-tex sobre rojo-aa (1,24:1): no
   existia. Blanco, que es el unico par medido. */
.vz-cta .vz-eyebrow { color: var(--sobre-rojo); }

/* El correo se escribe en tinta POR DEFECTO y se pone blanco solo
   dentro del plano rojo. Antes era al reves -blanco fijo, porque la
   clase nacio dentro de .vz-cta- y /contacto reutiliza la clase sobre
   papel: la direccion salia en blanco sobre papel-1, o sea 1,09:1. En
   la unica pagina cuyo trabajo es que te escriban, el correo era una
   raya roja de subrayado con un fantasma de letras encima. */
.vz-cta__mail {
    font-family: var(--mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--tr-mono);
    color: var(--tinta-1);
}

.vz-cta .vz-cta__mail { color: var(--sobre-rojo); }

/* El unico boton del cierre de la home y de /faq no puede ser rojo
   sobre rojo: asi era 1,00:1 de superficie y solo se veia la palabra
   flotando. Pasa a bloque de tinta, que sobre rojo-aa se lee como una
   pieza y no como un hueco. */
.vz-cta .vz-btn--rojo {
    background-color: var(--tinta-0);
    color: var(--papel-1);
}
/* Y su hover, que sin esto no existia: .vz-btn--rojo:hover pesa lo
   mismo que .vz-cta .vz-btn--rojo y va antes en el fichero, asi que
   perdia. El boton de conversion del sitio se quedaba mudo al raton. */
@media (hover: hover) {
    .vz-cta .vz-btn--rojo:hover { background-color: var(--tinta-1); }
}


/* -----------------------------------------------------------------
   3.9 . ALTO CONTRASTE FORZADO
   En forced-colors el sistema impone su paleta: el grano, las manchas
   y el cristal dejan de tener sentido y solo estorban a la
   legibilidad.
   ----------------------------------------------------------------- */
@media (forced-colors: active) {
    .vz-fluido::before,
    .vz-fluido::after,
    .vz-bloque--oscuro::after,
    .vz-cta::after {
        display: none;
    }

    .vz-cristal {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: Canvas;
        border-color: CanvasText;
        box-shadow: none;
        color: CanvasText;
    }
}


/* =================================================================
   4 . CABECERA Y PIE
   Tres piezas que enmarcan cada documento: el logotipo, la cabecera
   pegajosa con la navegacion segmentada y el pie sobre suelo organico.

   Esta capa es la UNICA duena del logotipo, del boton de menu y del
   selector de idioma. Antes el burger y el idioma los declaraban dos
   capas a la vez y de ahi salian dos fallos: un min-height de 40 px
   que dejaba el selector 4 px mas alto que su fila de 36, y un hover
   que pintaba fondo de tinta en una capa y color de tinta en la otra,
   o sea 1,00:1 al pasar el raton.
   ================================================================= */


/* -----------------------------------------------------------------
   4.1 . LOGOTIPO
   Faltaba entero: el <svg> salia a 300x150 px por no tener medidas y
   los dos <text> del wordmark, sin familia ni cuerpo, se pintaban con
   la fuente por defecto del navegador a 16 px sueltos dentro de un
   lienzo de 630x146.

   Las proporciones son las del fichero de marca y no se redondean:
     completo  630,64 / 146,09 = 4,3168
     isotipo   158,53 / 146,09 = 1,0852
   preserveAspectRatio="xMinYMid slice" en el marcado recorta por la
   derecha en vez de escalar, asi que al estrechar el SVG los
   corchetes no encogen: el logo se cierra sobre si mismo.

   --logo-h se queda por debajo de --vz-cab-h (64 px) o la fila de la
   cabecera crece.
   ----------------------------------------------------------------- */
.vz-logo {
    --logo-h: 32px;

    display: inline-flex;
    align-items: center;
    flex: none;
    /* La caja NO cambia de tamano aunque el dibujo de dentro si. Si
       encogiera, el cursor dejaria de estar encima a mitad del cierre,
       el logo volveria a abrirse, volveria a quedar bajo el cursor y
       entraria en bucle. Ademas asi no salta el layout de la barra. */
    width: calc(var(--logo-h) * 4.3168);
    overflow: hidden;
}

.vz-logo__svg {
    height: var(--logo-h);
    width: calc(var(--logo-h) * 4.3168);
    overflow: hidden;
    transition:
        width var(--dur-medium) var(--ease),
        transform var(--dur-fast) var(--ease);
}

/* Los corchetes en rojo de marca, con el filo del papel que separa
   las dos mitades cuando se cierran una contra otra. */
.vz-logo__b {
    fill: var(--rojo);
    stroke: var(--papel-1);
    stroke-miterlimit: 10;
}

.vz-logo__b--der { transition: transform var(--dur-medium) var(--ease); }

/* El wordmark. Los dos cuerpos de abajo NO son de la escala
   tipografica: son la geometria exacta del SVG de marca, medida del
   fichero original, y por eso van en px dentro del lienzo. */
.vz-logo__wm { fill: var(--tinta-0); transition: opacity var(--dur-quick) var(--ease); }
/* Cara y pesos del ORIGINAL, no de la escala del sitio: estos dos
   cuerpos son la geometria del SVG, no una decision tipografica. */
.vz-logo__wm1 { font-family: var(--marca); font-weight: 900; font-size: 57.87px; }
.vz-logo__wm2 { font-family: var(--marca); font-weight: 400; font-size: 40.87px; }

/* En el pie el suelo es tinta: el wordmark se invierte. */
.vz-footer .vz-logo__wm { fill: var(--papel-1); }
.vz-footer .vz-logo__b { stroke: var(--tinta-0); }

/* --- El cierre y el iman -----------------------------------------
   Solo con raton de verdad. En tactil no hay puntero al que seguir, y
   el JS ya se niega a escribir --logo-px si el sistema pide menos
   movimiento; el valor de reserva de 0px deja el isotipo donde estaba.
   La cuenta: 4,3168 - 1,0852 = 3,2316 anchos de --logo-h de hueco
   libre, y medio isotipo (0,5426) para centrarlo en el puntero. */
@media (hover: hover) and (pointer: fine) {
    .vz-logo--header:hover .vz-logo__svg,
    .vz-logo--header:focus-visible .vz-logo__svg {
        width: calc(var(--logo-h) * 1.0852);
        transform: translateX(clamp(
            0px,
            calc(var(--logo-px, 0px) - var(--logo-h) * 0.5426),
            calc(var(--logo-h) * 3.2316)
        ));
    }

    /* El corchete derecho recorre las 472,11 unidades que separan su
       posicion en el logo completo de la del isotipo. */
    .vz-logo--header:hover .vz-logo__b--der,
    .vz-logo--header:focus-visible .vz-logo__b--der { transform: translateX(-472.11px); }

    /* El texto se va antes de que el corchete llegue a taparlo. */
    .vz-logo--header:hover .vz-logo__wm,
    .vz-logo--header:focus-visible .vz-logo__wm { opacity: 0; }

    /* En el pie, al reves: arranca cerrado en isotipo y se despliega.
       Va despues y con la misma especificidad, asi que manda esto. */
    .vz-logo--footer .vz-logo__svg { width: calc(var(--logo-h) * 1.0852); }
    .vz-logo--footer .vz-logo__b--der { transform: translateX(-472.11px); }
    .vz-logo--footer .vz-logo__wm { opacity: 0; }

    .vz-logo--footer:hover .vz-logo__svg,
    .vz-logo--footer:focus-visible .vz-logo__svg { width: calc(var(--logo-h) * 4.3168); }
    .vz-logo--footer:hover .vz-logo__b--der,
    .vz-logo--footer:focus-visible .vz-logo__b--der { transform: none; }
    .vz-logo--footer:hover .vz-logo__wm,
    .vz-logo--footer:focus-visible .vz-logo__wm { opacity: 1; }
}


/* =================================================================
   4.2 . CABECERA
   ================================================================= */

/* La barra se pega arriba y se queda ahi. El fondo arranca
   transparente para no cortar el velo calido del hero y se vuelve
   solido en cuanto se hace scroll: eso se resuelve dos veces, con
   animation-timeline mas abajo (sin JavaScript) y con .is-fijo (con
   el). Las dos rutas pintan lo mismo, asi que da igual cual gane. Sin
   JavaScript y sin timelines de scroll queda la regla de
   @media (scripting: none), que la deja opaca desde el principio.

   --vz-cab-h la lee el panel movil para colgarse justo debajo.
   --vz-ctrl es el lado del cuadrado de los controles. */
.vz-header {
    --vz-cab-h: 64px;
    --vz-ctrl: 36px;

    position: sticky;
    top: 0;
    z-index: 100;
    /* Papel-0, un peldano mas claro que el cuerpo de la web
       (#FBFAF7 sobre #F2F0E9). Antes era transparente y la barra se
       comia el tono del cuerpo, asi que la cabecera no se distinguia
       de la pagina: quedaba beige sobre beige. */
    background-color: var(--papel-0);
    border-bottom: var(--bw) solid transparent;
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

/* Estado con scroll que marca el JavaScript. Al despegarse pasa a
   cristal: el mismo papel al 88 % con desenfoque detras, para que se
   intuya lo que pasa por debajo sin perder contraste con la marca. */
.vz-header.is-fijo {
    background-color: var(--papel-0-88);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom-color: var(--papel-3);
}

/* Sin desenfoque disponible no puede quedarse en translucido: el
   texto de la barra caeria sobre el hero oscuro. Vuelve a opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vz-header.is-fijo { background-color: var(--papel-0); }
}

/* Sin scripts la cabecera nunca recibiria .is-fijo: se deja opaca de
   salida, que es peor esteticamente y mejor legible. */
@media (scripting: none) {
    .vz-header {
        background-color: var(--papel-0);
        border-bottom-color: var(--papel-3);
    }
}

/* La fila: logotipo a la izquierda, navegacion empujada al fondo.
   En movil envuelve y la navegacion cae a una segunda linea. */
.vz-header__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    width: 100%;
    max-width: var(--w-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    min-height: var(--vz-cab-h);
}


/* --- Sin hilo de progreso y sin poso opaco ------------------------
   Aqui vivian dos cosas, y las dos sobran ahora:

   1. Un filete ROJO de 2 px que crecia con el scroll. Fuera: el rojo
      es acento y una barra roja cruzando la pantalla entera no lo es.

   2. Una animacion scroll-driven, vz-cab-posar, que a los 80 px de
      recorrido pintaba la cabecera de papel-0 OPACO con filete. Esa
      era la razon de que el cristal no se viera: las animaciones ganan
      a las declaraciones normales en la cascada, asi que pisaba la
      regla de .is-fijo por mucho que fuera despues en el fichero. Al
      quitarla, el estado is-fijo que marca el JavaScript vuelve a
      mandar y la barra se pone de cristal, que es lo que se pide.

   No se sustituye por otra animacion: is-fijo ya hace el trabajo y
   tener dos mecanismos para lo mismo es justo lo que produjo el
   conflicto. */


/* --- Boton de menu -----------------------------------------------
   Cuadrado de contorno con dos barras. Solo aparece cuando hay
   scripts que lo hagan funcionar: sin ellos el menu ya esta
   desplegado y un boton muerto solo estorbaria.
   El aspa la dispara aria-expanded, o sea el mismo atributo que ya
   tiene que cambiar por accesibilidad: no hay clase paralela que se
   pueda desincronizar. */
.vz-burger {
    position: relative;   /* ancla del area tactil de mas abajo */
    display: none;
    place-items: center;
    /* align-content ademas de place-items, y no es redundante:
       place-items coloca cada barra DENTRO de su fila, pero las filas
       las reparte align-content, que por defecto estira. Con dos filas
       automaticas en una caja de 36 px, cada una crecia a 15,5 px y las
       barras acababan a 19,5 px de distancia en vez de a 6,5: al abrir,
       el desplazamiento de 3,25 px se quedaba a un tercio de camino y el
       aspa salia como un galon. Centrando el contenido, las filas
       vuelven a medir lo que miden las barras. */
    align-content: center;
    width: var(--vz-ctrl);
    height: var(--vz-ctrl);
    padding: 0;
    gap: 5px;
    background-color: transparent;
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-btn);
    color: var(--tinta-0);
    cursor: pointer;
    transition: border-color var(--dur-quick) var(--ease);
}

.vz-burger__bar {
    display: block;
    width: 16px;
    height: 1.5px;
    /* currentColor para que una cabecera oscura solo tenga que
       cambiar el color del boton. */
    background-color: currentColor;
    transition: transform var(--dur-fast) var(--ease);
}

/* Las dos barras se cruzan al abrir. Cada una se recoloca en el
   centro del boton antes de girar, para que el aspa quede clavada:
   1,5 px de filete mas 5 px de hueco dejan cada barra a 3,25 px del
   centro, que es justo el desplazamiento que las hace coincidir. */
.vz-burger[aria-expanded="true"] .vz-burger__bar:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.vz-burger[aria-expanded="true"] .vz-burger__bar:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}


/* --- Navegacion segmentada ---------------------------------------
   Una sola caja con filete alrededor y filetes entre elementos: la
   pastilla queda prohibida, asi que el grupo se lee por el contorno y
   por las divisiones, no por la forma.

   margin-left: auto empuja el bloque entero a la derecha en vez de
   estirar el logotipo, que tiene su propia caja de foco. */
.vz-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

.vz-nav__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--papel-0);
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-0);
}

.vz-nav__list > li + li {
    border-left: var(--bw) solid var(--papel-3);
}

/* La altura del enlace descuenta los dos filetes del contenedor, para
   que el bloque mida exactamente lo mismo que los cuadrados que van a
   su lado. */
.vz-nav__link {
    display: flex;
    align-items: center;
    height: calc(var(--vz-ctrl) - var(--bw) * 2);
    padding-inline: var(--sp-4);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tinta-2);
    white-space: nowrap;
    transition:
        background-color var(--dur-quick) var(--ease),
        color var(--dur-quick) var(--ease);
}

/* La pagina en la que estas va en tinta llena, no en rojo: el rojo
   esta reservado al plano unico del documento. */
.vz-nav__link.is-activo {
    background-color: var(--tinta-0);
    color: var(--papel-1);
}


/* --- Controles cuadrados de la derecha ----------------------------
   Tres piezas de mobiliario de la misma altura. Del CTA solo se fija
   la metrica: el color lo pone su modificador en la capa 2. */
.vz-nav__cta {
    min-height: var(--vz-ctrl);
}

.vz-nav__ig,
.vz-idioma {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--vz-ctrl);
    height: var(--vz-ctrl);
    background-color: transparent;
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-btn);
    color: var(--tinta-2);
    text-decoration: none;
    transition:
        border-color var(--dur-quick) var(--ease),
        color var(--dur-quick) var(--ease);
}

/* AREA TACTIL. El cuadrado de dibujo mide 36 px, por debajo de los
   44 px que la casa se fija como objetivo tactil. En vez de agrandar
   el dibujo, que descuadraria la fila, se agranda solo la zona
   sensible con un pseudo transparente. La cuenta se apaga sola donde
   --vz-ctrl ya vale 44 px (el panel movil): (44 - 44) / -2 = 0.
   Los tres controles ya son position: relative en sus bloques. */
.vz-burger::before,
.vz-nav__ig::before,
.vz-idioma::before {
    content: "";
    position: absolute;
    inset: calc((44px - var(--vz-ctrl)) / -2);
}

/* El <svg> que instancia el sprite no trae medidas propias. */
.vz-nav__ig svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

/* En escritorio el icono basta; la arroba se guarda para el lector de
   pantalla y reaparece dentro del menu movil. */
.vz-nav__ig-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.vz-idioma {
    padding-inline: var(--sp-2);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
}

/* --- Enlaces extra -----------------------------------------------
   Las dos lineas troncales, las colecciones y el correo. Solo tienen
   sitio cuando la navegacion se despliega a lo alto. */
.vz-nav__extra {
    display: none;
}


/* --- Al pasar el raton -------------------------------------------
   Todo el hover de la cabecera junto y dentro de (hover: hover): en
   tactil un :hover se queda pegado despues del toque y deja el
   control con el aspecto de activo hasta que se toca otra cosa. */
@media (hover: hover) {
    .vz-burger:hover { border-color: var(--tinta-2); }

    .vz-nav__ig:hover,
    .vz-idioma:hover { border-color: var(--tinta-0); color: var(--tinta-0); }

    .vz-nav__link:hover {
        background-color: var(--papel-2);
        color: var(--tinta-0);
    }
}


/* El foco de la cabecera lo pone la base. No se repite aqui: el rojo
   da 3,4:1 sobre papel-1, que es el suelo de la barra, asi que el
   anillo general ya sirve. */


/* --- Escritorio --------------------------------------------------- */
@media (min-width: 901px) {
    .vz-header {
        --vz-cab-h: 72px;
    }

    .vz-header__in {
        flex-wrap: nowrap;
        gap: var(--sp-5);
    }

    .vz-nav {
        gap: var(--sp-3);
    }
}


/* --- Menu movil ---------------------------------------------------
   Por debajo de 900 px hay dos escenarios y los dos tienen que
   funcionar:

   a) SIN scripts (o con un navegador que no resuelva la consulta
      scripting): la navegacion se queda en el flujo, envuelta bajo el
      logotipo y con su filete de separacion. Se ve y se usa entera.

   b) CON scripts: aparece el boton de menu y la navegacion pasa a ser
      un panel fijo bajo la barra, oculto hasta que el boton le pone
      .is-abierto.

   El orden importa: lo que esconde el panel vive DENTRO de
   (scripting: enabled), asi que un navegador que no entienda la
   consulta se queda en el escenario (a), que es el que nunca deja al
   usuario sin menu. Ocultar por [aria-expanded="false"] no valdria:
   ese atributo ya viene puesto en el HTML servido. */
@media (max-width: 900px) {
    .vz-nav {
        width: 100%;
        margin-left: 0;
        padding-block: var(--sp-3);
        border-top: var(--bw) solid var(--papel-3);
    }

    .vz-nav__list {
        width: 100%;
    }

    .vz-nav__list > li {
        flex: 1 1 auto;
    }

    .vz-nav__link {
        justify-content: center;
        width: 100%;
    }

    .vz-nav__extra {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-4);
        width: 100%;
    }

    .vz-nav__extra a {
        font-size: var(--fs-xs);
        color: var(--tinta-3);
        text-decoration: none;
        text-underline-offset: 0.22em;
    }
}

@media (max-width: 900px) and (hover: hover) {
    .vz-nav__extra a:hover {
        color: var(--tinta-0);
        text-decoration: underline;
    }
}

@media (max-width: 900px) and (scripting: enabled) {
    .vz-burger {
        display: inline-grid;
        margin-left: auto;
    }

    /* Panel a pantalla completa colgado del borde inferior de la
       barra. overscroll-behavior evita que el scroll se escape al
       documento al llegar al final de la lista. Dentro del panel los
       controles crecen a 44 px: es lo que pide un dedo, y aqui ya no
       compiten con la altura de la barra. */
    .vz-nav {
        --vz-ctrl: 44px;

        position: fixed;
        /* Lados y ALTO explicito, no un inset con bottom: 0. La barra
           se pone de cristal al bajar, y backdrop-filter convierte a
           quien lo lleva en BLOQUE CONTENEDOR de sus descendientes
           fixed: el panel, que cuelga de la cabecera, dejaba de medirse
           contra el visor y pasaba a medirse contra la barra. En cuanto
           el visitante movia la pagina nueve pixeles -que es lo que
           tarda is-fijo en aparecer- el menu se abria como una TIRA de
           89 px con un solo enlace dentro, los otros diez recortados sin
           ninguna senal de que hubiera mas, y el scroll del cuerpo
           bloqueado por detras. Un alto en dvh no depende del bloque
           contenedor y mide lo mismo en los dos casos.

           Y no basta con quitarle el desenfoque a la regla de la
           seccion 52: hay otra .vz-header.is-fijo en la 4 que tambien
           lo declara y volveria a ganar. Se arregla donde no depende de
           quien pinte la barra. */
        top: var(--vz-cab-h);
        right: 0;
        bottom: auto;
        left: 0;
        block-size: calc(100dvh - var(--vz-cab-h));
        z-index: 1;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--sp-5);
        padding: var(--sp-5) var(--gutter) var(--sp-8);
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--papel-0);
        border-top: var(--bw) solid var(--papel-3);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition:
            opacity var(--dur-fast) var(--ease),
            transform var(--dur-fast) var(--ease),
            visibility 0s linear var(--dur-fast);
    }

    .vz-nav.is-abierto {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    /* RED DE SEGURIDAD. El panel depende de que los scripts esten
       permitidos, no de que main.js llegue a cargar: si el fichero
       falla (despliegue a medias, bloqueador), el boton no abre nada y
       en movil no hay navegacion. Con esto, en cuanto el foco entra en
       la navegacion (tabulando desde el boton) el panel se muestra,
       sin JavaScript y sin :has(). */
    .vz-nav:focus-within {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    /* La lista se apila y los filetes pasan a ser horizontales. */
    .vz-nav__list {
        flex-direction: column;
    }

    .vz-nav__list > li + li {
        border-left: 0;
        border-top: var(--bw) solid var(--papel-3);
    }

    .vz-nav__link {
        justify-content: flex-start;
        padding-inline: var(--sp-4);
    }

    /* No se reordena nada con order: el orden visual tiene que seguir
       siendo el del DOM, que es por el que va el tabulador. */
    .vz-nav__cta,
    .vz-nav__ig,
    .vz-idioma {
        align-self: flex-start;
    }

    /* En el panel si hay sitio para la arroba: el icono deja de ir
       solo y el enlace se lee sin depender del title. */
    .vz-nav__ig {
        gap: var(--sp-3);
        justify-content: flex-start;
        padding-inline: var(--sp-3);
        font-family: var(--mono);
        font-size: var(--fs-2xs);
        letter-spacing: var(--tr-mono);
        text-transform: uppercase;
    }

    .vz-nav__ig-txt {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }

    .vz-nav__extra {
        flex-direction: column;
        gap: var(--sp-3);
        padding-top: var(--sp-5);
        border-top: var(--bw) solid var(--papel-3);
    }
}


/* =================================================================
   4.3 . PIE
   ================================================================= */

/* Bloque oscuro a sangre. El suelo organico son tres manchas
   radiales de petroleo y un rescoldo de oro sobre tinta-0: no hay
   filter: blur porque un gradiente radial ancho ya llega difuso y
   cuesta cero en pintado, y aqui cubriria toda la anchura.

   No entra rojo de fondo: el plano rojo del documento es unico y lo
   gasta el recto de cierre. El unico rojo de aqui son los corchetes.

   overflow: hidden es lo que recorta la firma gigante. */
.vz-footer {
    /* Contrato de suelo oscuro: mismo juego que las superficies de la
       capa 3, para que ni los titulos ni los botones del pie se
       reescriban a mano. */
    --tit-fuerte: var(--papel-1);
    --tit-suave:  var(--papel-1-68);
    --corchete:   var(--rojo);
    --linea:      var(--papel-1-16);
    --btn-linea-filete: var(--papel-3);
    --btn-linea-txt:    var(--papel-1);
    --btn-linea-fondo:  var(--tinta-0);
    --btn-oscuro-fondo: var(--papel-1);
    --btn-oscuro-txt:   var(--tinta-0);
    --btn-oscuro-hover: var(--papel-0);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--sp-9) var(--sp-5);
    background-color: var(--tinta-0);
    color: var(--papel-1);
    box-shadow: inset 0 1px 0 var(--papel-1-10);
}

/* LAS MANCHAS, BAJADAS DE OPACIDAD. Los contrastes del pie estaban
   medidos contra tinta-0 puro, pero la mancha de petroleo-2 llegaba a
   opacidad plena justo debajo de la lista de correo y se comia el
   suelo medido: los corchetes rojos caian a 2,61 y la marca de agua
   del campo a 3,85. Con las manchas al 70-80 % el texto de cuerpo se
   apoya en un suelo que sigue dando 8,12:1. */
.vz-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Los tres colores van en rgb() literal y no en color-mix(). Dentro
       de una lista de background-image, un color que el motor no sepa
       resolver no se salta esa parada: invalida la DECLARACION ENTERA,
       y el pie se quedaria sin sus tres manchas de golpe. Los valores
       son los mismos que salian del color-mix -caoba, granate y oro al
       70, 80 y 16 %-, escritos a mano. */
    background-image:
        radial-gradient(58% 70% at 12% 8%,  rgb(164 22 26 / .70) 0%, transparent 52%),
        radial-gradient(70% 90% at 88% 0%,  rgb(102 7 8 / .80) 0%, transparent 50%),
        radial-gradient(46% 62% at 68% 96%, rgb(177 167 166 / .16) 0%, transparent 64%);
}

/* El mismo grano que las superficies de la capa 3, leido de :root. */
.vz-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grano);
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: var(--grano-op);
    pointer-events: none;
}

/* El contenido, por delante de las dos capas de suelo. */
.vz-footer > .vz-wrap {
    position: relative;
    z-index: 0;
}


/* --- El texto del pie, a un solo tono -----------------------------
   Antes habia cinco alfas distintas (0,68, 0,72, 0,76...) repartidas
   por el bloque, todas medidas contra tinta-0 puro y ninguna contra
   la mancha. Todo el cuerpo del pie sube al 82 %: sobre la mancha al
   70 % da 8,12:1 (AAA de cuerpo) y sobre tinta-0 pleno, 11,51:1. */
.vz-news__sub,
.vz-footer__claim,
.vz-footer__hermana,
.vz-footer__col a,
.vz-footer__dir,
.vz-footer__aviso,
.vz-footer__legal,
.vz-footer__legales a,
.vz-footer .vz-red { color: var(--papel-1-82); }


/* --- Lista de correo ---------------------------------------------- */
.vz-news {
    display: grid;
    gap: var(--sp-5);
    padding-bottom: var(--sp-8);
    margin-bottom: var(--sp-8);
    border-bottom: var(--bw) solid var(--linea);
}

/* Sin color escrito a mano: el <h2> lo pinta --tit-suave, que este
   bloque ya ha puesto en papel al 68 % (8,11:1, AAA de cuerpo). Lo
   unico suyo es el cuerpo, que baja un escalon respecto al h2 general
   porque es un rotulo de columna, no el titular de una pagina. */
.vz-news__tit {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-lg);
}

.vz-news__sub {
    margin: 0;
    max-width: 46ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* El <div> del pie lleva .vz-campo y .vz-news__campo a la vez, y el
   margen inferior de 24 px que trae .vz-campo aqui no lo quiere
   nadie: el hueco lo pone ya el grid de .vz-news. */
.vz-news__campo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    max-width: 32rem;
    margin-bottom: 0;
}

/* El campo generico esta pensado para fondo papel; sobre el suelo
   oscuro necesita su propio tratamiento: contorno claro sobre una
   superficie apenas levantada, nunca cristal claro. */
.vz-news__campo input {
    flex: 1 1 14rem;
    min-height: 48px;
    padding: 0 var(--sp-4);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    color: var(--papel-1);
    background-color: var(--papel-1-06);
    border: var(--bw) solid var(--papel-1-28);
    border-radius: var(--r-btn);
    transition: border-color var(--dur-quick) var(--ease);
}

/* 6,36:1 sobre la mancha: una marca de agua tambien hay que leerla. */
.vz-news__campo input::placeholder {
    color: var(--papel-1-70);
    opacity: 1;
}

/* El contorno se apaga bajo el foco para que el filete rojo no
   compita con un segundo borde a 1 px de distancia. */
.vz-news__campo input:focus-visible {
    outline: 3px solid var(--rojo);
    outline-offset: 2px;
    border-color: transparent;
}

.vz-news__campo .vz-btn {
    min-height: 48px;
}

.vz-news__aviso {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-2xs);
    line-height: var(--lh-body);
    color: var(--papel-1-82);
}


/* --- Columnas ------------------------------------------------------ */
.vz-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-7) var(--sp-5);
}

.vz-footer__claim {
    margin: var(--sp-5) 0;
    max-width: 34ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.vz-footer__hermana {
    margin: var(--sp-5) 0 0;
    max-width: 34ch;
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
}

/* Los titulos de columna SON la micro-etiqueta de la casa y la
   heredan entera de la base (1.11): mono diminuta, versales, muy
   abierta y con los corchetes por --corchete, que este bloque ya ha
   puesto en --rojo. Aqui solo queda lo que es del pie: el hueco de
   debajo y el papel entero, porque son rotulos y no titulares. */
.vz-footer__tit {
    margin-block-end: var(--sp-4);
    color: var(--papel-1);
}

.vz-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vz-footer__col a {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: color var(--dur-quick) var(--ease);
}

.vz-footer__dir {
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
}


/* --- Redes --------------------------------------------------------
   Botones de contorno con icono y arroba. Cuadrados, como todo. Van
   acotados al pie porque es el unico sitio donde existen. */
.vz-footer .vz-redes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
}

.vz-footer .vz-red {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 36px;
    padding-inline: var(--sp-3);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-decoration: none;
    border: var(--bw) solid var(--papel-1-24);
    border-radius: var(--r-btn);
    transition:
        border-color var(--dur-quick) var(--ease),
        color var(--dur-quick) var(--ease);
}

.vz-footer .vz-red__i {
    flex: none;
    width: 16px;
    height: 16px;
}


/* --- Firma --------------------------------------------------------
   El wordmark gigante en contorno, cortado en seco por el filete que
   separa el pie de la barra legal. La caja mide menos que la altura
   de las mayusculas, asi que el recorte lo hace el propio bloque y no
   depende de que el documento acabe justo ahi.

   Es decorativa (aria-hidden en el marcado), asi que si el navegador
   no entiende text-stroke se queda en relleno tenue y no pasa nada. */
.vz-footer__firma {
    overflow: hidden;
    height: 0.64em;
    margin-top: var(--sp-9);
    font-family: var(--sans);
    /* Bajada de 144 a 96 de techo: a 132 px medidos el wordmark pesaba
       mas que el titular de la portada y el pie se comia la pagina. */
    font-size: clamp(2rem, 6.4vw, 6rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    color: var(--papel-1-14);
    user-select: none;
}

.vz-footer__firma span {
    color: var(--rojo);
}

@supports (-webkit-text-stroke: 1px #000) {
    .vz-footer__firma {
        color: transparent;
        -webkit-text-stroke: 1px var(--papel-1-28);
    }

    .vz-footer__firma span {
        color: transparent;
        -webkit-text-stroke-color: var(--rojo);
    }
}


/* --- Barra legal --------------------------------------------------- */
.vz-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    padding-top: var(--sp-5);
    border-top: var(--bw) solid var(--linea);
}

/* Mono, pero sin caja alta: es una linea de datos, y la razon social
   y el CIF se leen mucho peor en versales. */
.vz-footer__legal {
    margin: 0;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
}

.vz-footer__legales {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vz-footer__legales a {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    text-decoration: none;
    text-underline-offset: 0.22em;
    transition: color var(--dur-quick) var(--ease);
}


/* --- Al pasar el raton por el pie --------------------------------- */
@media (hover: hover) {
    .vz-footer__col a:hover,
    .vz-footer__legales a:hover {
        color: var(--papel-1);
        text-decoration: underline;
    }

    .vz-footer .vz-red:hover {
        color: var(--papel-1);
        border-color: var(--papel-1-55);
    }

    .vz-news__campo input:hover {
        border-color: var(--papel-1-48);
    }
}


/* El foco del pie tambien lo pone la base: el rojo da 5,04:1 sobre el
   suelo oscuro, de sobra. Repetir el anillo por capa era lo que hacia
   la hoja anterior, con cinco copias que se desincronizaban. */


/* --- Rejillas del pie ---------------------------------------------
   La columna de marca ocupa el ancho entero mientras solo caben dos
   columnas: el claim necesita su medida y no se parte en una tira. */
@media (min-width: 600px) {
    .vz-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vz-footer__marca {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) {
    .vz-news {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--sp-7);
    }

    .vz-footer__cols {
        grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
        gap: var(--sp-7);
    }

    .vz-footer__marca {
        grid-column: auto;
    }
}


/* -----------------------------------------------------------------
   4.4 . MOVIMIENTO REDUCIDO
   Se apaga todo lo que se mueve. El fondo de la cabecera pasa a estar
   puesto desde el principio, para que no dependa de una animacion que
   ya no corre; el hilo de progreso se retira tambien, aunque no sea
   movimiento autonomo, porque la barra ya se distingue por su filete
   inferior. El logotipo se queda abierto y quieto: el JS ya no
   escribe --logo-px cuando el sistema pide menos movimiento.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* La cabecera ya no lleva animacion ninguna, asi que aqui no hay
       nada que apagar. Lo que habia -fondo papel-0 opaco y filete- era
       para neutralizar la animacion scroll-driven que se ha quitado, y
       dejaba a quien pide menos movimiento con una barra blanca fija
       con borde: justo la barra que el diseno no quiere. */
    .vz-header { transition: none; }

    .vz-logo__svg,
    .vz-logo__b--der,
    .vz-logo__wm,
    .vz-burger,
    .vz-burger__bar,
    .vz-nav,
    .vz-nav__link,
    .vz-nav__ig,
    .vz-idioma,
    .vz-news__campo input,
    .vz-footer__col a,
    .vz-footer__legales a,
    .vz-footer .vz-red {
        transition: none;
    }
}


/* -----------------------------------------------------------------
   4.5 . ALTO CONTRASTE DEL SISTEMA
   En forced-colors Windows tira los fondos y las barras del burger,
   que son fondo, desaparecerian: el boton se quedaria vacio.
   ----------------------------------------------------------------- */
@media (forced-colors: active) {
    .vz-burger__bar {
        background-color: CanvasText;
    }
}


/* =================================================================
   5 . TARJETAS Y LISTAS
   Regla de la casa: tarjeta es lo que se puede pulsar. Un bloque que
   solo informa no lleva caja ni fondo, es una entrada editorial. Por
   eso .vz-serv se pinta como caja solo cuando el marcado lo saca como
   <a>, y .vz-pieza / .vz-modo no se pintan nunca.

   Ojo con la especificidad: a.vz-serv (0,1,1) pesa mas que
   .vz-serv--destacado (0,1,0), asi que toda variante que tenga que
   ganarle se declara dos veces, con y sin el elemento delante.
   ================================================================= */


/* -----------------------------------------------------------------
   5.1 . REJILLA BENTO
   Seis columnas para poder mezclar anchos sin recolocar nada por JS.
   Movil primero: una columna y ninguna media query que deshacer.
   ----------------------------------------------------------------- */
.vz-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
}

@media (min-width: 700px) {
    .vz-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    /* A media pantalla todo va de dos en dos y el destacado manda fila. */
    .vz-serv { grid-column: span 3; }
    .vz-serv--destacado { grid-column: span 6; }
}

@media (min-width: 1080px) {
    /* En escritorio la rejilla ya respira: tres normales por fila, dos
       anchas, y el destacado ocupa media fila con mas cuerpo. */
    .vz-serv { grid-column: span 2; }
    .vz-serv--ancho,
    .vz-serv--destacado { grid-column: span 3; }
}


/* -----------------------------------------------------------------
   5.2 . BLOQUE DE SERVICIO
   ----------------------------------------------------------------- */

/* Base: entrada editorial. Sin fondo y sin caja; solo el filete de
   arriba la separa de la de al lado. Es lo que ven los bloques que el
   marcado saca como <div>: equipo, principios, lo que no hacemos. */
.vz-serv {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    padding-block: var(--sp-4) var(--sp-5);
    border-block-start: var(--bw) solid var(--linea);
    color: var(--tinta-2);
}

/* Y aqui ya si, tarjeta: la variante que se puede pulsar. */
a.vz-serv {
    padding: var(--sp-6);
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-0);
    background-color: var(--papel-0);
    text-decoration: none;
}

/* Responde el filete y la superficie, nunca una sombra ni un vuelo. */
a.vz-serv:hover,
a.vz-serv:focus-visible {
    border-color: var(--tinta-0);
    background-color: var(--papel-2);
}

.vz-serv__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* El titulo tira de --tit-fuerte y no de un color propio: asi las dos
   variantes de suelo de abajo se resuelven cambiando una variable, sin
   una regla de color por variante. */
.vz-serv__tit {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tit);
    color: var(--tit-fuerte);
    /* Titulares de dos o tres palabras: sin equilibrar, el bento se
       llena de lineas viudas de una sola palabra. */
    text-wrap: balance;
}

.vz-serv__txt {
    max-width: 46ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--tinta-2);
}


/* --- Variante destacada: plano rojo ------------------------------
   Va en rojo-aa y no en rojo porque encima hay texto pequeno, y el
   texto es el blanco puro de :root: es el unico par medido (4,55:1);
   papel-0 se queda en 4,37 y no llega. */
.vz-serv--destacado,
a.vz-serv--destacado {
    --tit-fuerte: var(--sobre-rojo);
    --arrow-tinte: var(--sobre-rojo);
    --arrow-fondo: var(--rojo-aa);      /* 4,55:1 con el blanco */

    border-color: var(--rojo-aa);
    background-color: var(--rojo-aa);
    color: var(--sobre-rojo);
}

/* Al pasar se hunde al rojo de texto: es mas oscuro, asi que el
   contraste con el blanco sube en vez de bajar. */
a.vz-serv--destacado:hover,
a.vz-serv--destacado:focus-visible {
    border-color: var(--tinta-0);
    background-color: var(--rojo-tex);
}

/* Ocupa media fila: puede permitirse un escalon mas de tamano. El
   color ya lo lleva puesto --tit-fuerte. */
.vz-serv--destacado .vz-serv__tit { font-size: var(--fs-xl); }

.vz-serv--destacado .vz-serv__txt { color: var(--sobre-rojo); }


/* --- Variante tinta: suelo organico oscuro -----------------------
   El degradado hace el suelo y el grano lo ensucia. Nada de esto sale
   a la red: gradientes radiales y el data URI compartido de :root. */
.vz-serv--tinta,
a.vz-serv--tinta {
    /* Contrato de suelo oscuro. La flecha cuadrada es lo que mas se
       notaba: en tinta-0 sobre petroleo daba 1,46:1, y su unico dibujo
       es el filete de 44 px. En papel sobre petroleo da 11,65:1. */
    --tit-fuerte: var(--papel-1);
    --tit-suave:  var(--papel-1-68);
    --corchete:   var(--rojo);
    --arrow-tinte: var(--papel-1);
    --arrow-fondo: var(--petroleo);

    position: relative;
    /* Con isolation el grano puede ir en z-index -1: queda por encima
       del color de fondo y por debajo del texto, sin tocar el marcado
       y sin pintar sobre lo que hay que leer. */
    isolation: isolate;
    border-color: var(--tinta-0);
    background-color: var(--petroleo);
    background-image:
        radial-gradient(120% 100% at 8% -10%, var(--petroleo-2) 0%, transparent 52%),
        /* Oro al 22 % en rgb() literal: un color-mix aqui dentro se
           llevaria por delante las tres manchas de la lista, no solo
           esta. */
        radial-gradient(90% 80% at 100% 112%, rgb(177 167 166 / .22) 0%, transparent 50%),
        radial-gradient(140% 120% at 50% 140%, var(--tinta-0) 0%, transparent 70%);
    color: var(--papel-1-82);
}

.vz-serv--tinta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--grano);
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: var(--grano-op);
}

/* Sobre suelo oscuro el filete no puede oscurecerse mas: sube a oro,
   que es el color de dato de la casa y solo vive sobre oscuro. */
a.vz-serv--tinta:hover,
a.vz-serv--tinta:focus-visible {
    border-color: var(--oro);
    background-color: var(--petroleo-2);
}

.vz-serv--tinta .vz-serv__txt { color: var(--papel-1-82); }


@media (max-width: 699px) {
    /* 32px de marco en una pantalla de 390 es mas marco que cuadro. */
    a.vz-serv { padding: var(--sp-5); }
}


/* -----------------------------------------------------------------
   5.3 . REJILLA DE PROYECTOS
   auto-fill con min() para que en movil caiga a una sola columna sin
   media query, y tope de cuatro en pantalla grande para que la ficha
   no se estire hasta perder la forma de carta.
   ----------------------------------------------------------------- */
.vz-proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--sp-4);
}

@media (min-width: 1180px) {
    .vz-proyectos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* -----------------------------------------------------------------
   5.4 . CARTA DE PRODUCTO
   Lamina sobre superficie hundida, filete que la separa del cuerpo,
   cuerpo con relleno y pie anclado abajo.
   ----------------------------------------------------------------- */
.vz-proyecto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-0);
    background-color: var(--papel-0);
    color: var(--tinta-2);
    text-decoration: none;
}

a.vz-proyecto:hover,
a.vz-proyecto:focus-visible { border-color: var(--tinta-0); }

/* La lamina: superficie hundida bajo la imagen y filete que la corta
   del cuerpo. El filete acompana al borde de la tarjeta al pasar para
   que la ficha reaccione entera y no por partes. */
.vz-proyecto__img {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-block-end: var(--bw) solid var(--papel-3);
    /* MISMO papel que la tarjeta, no la superficie hundida. Con el gris
       habia tres tonos peleandose en 300 px: el crema de la pagina, el
       gris del hueco y el blanco que las portadas traen horneado en el
       JPG. El libro tiene que apoyarse en la tarjeta, no flotar sobre
       un recuadro gris con otro recuadro blanco dentro. */
    background-color: var(--papel-0);
}

a.vz-proyecto:hover .vz-proyecto__img,
a.vz-proyecto:focus-visible .vz-proyecto__img { border-block-end-color: var(--tinta-0); }

/* El <picture> se quita de en medio para que la <img> mida contra la
   lamina y no contra un inline sin altura. */
.vz-proyecto__img > picture { display: contents; }

.vz-proyecto__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Un libro es vertical: recortado en 4/3 se perdia medio titulo. Se
   mide por alto, entero, apoyado en el borde de abajo, y el relleno
   deja ver la superficie hundida alrededor de la lamina. */
/* Un libro es vertical, pero 5/6 con el libro a sangre lo convertia en
   el 60 % de la tarjeta. Con 1/1 y mas respiro alrededor, la lamina se
   lee como una ficha de catalogo y no como un cartel. */
.vz-proyecto--libro .vz-proyecto__img,
.vz-proyecto__img--tomo {
    aspect-ratio: 1 / 1;
    padding: var(--sp-6) var(--sp-7) var(--sp-5);
}

.vz-proyecto--libro .vz-proyecto__img img,
.vz-proyecto__img--tomo img {
    object-fit: contain;
    object-position: bottom center;
    /* LA CLAVE del asunto del fondo blanco: las portadas son JPG con el
       blanco horneado, y un JPG no tiene transparencia que valga. Con
       multiply, el blanco puro se vuelve neutro sobre el papel y el
       recuadro desaparece: el libro queda recortado sin tocar ni un
       fichero. Solo en libros: sobre una captura de web multiply
       ensuciaria la imagen entera. */
    mix-blend-mode: multiply;
}

/* En alto contraste forzado el multiply deja de tener sentido y puede
   hacer desaparecer la portada entera. */
@media (forced-colors: active) {
    .vz-proyecto--libro .vz-proyecto__img img,
    .vz-proyecto__img--tomo img { mix-blend-mode: normal; }
}

/* Una captura de web es apaisada y si se recorta: se lee como pantalla. */
.vz-proyecto--web .vz-proyecto__img { aspect-ratio: 16 / 10; }

.vz-proyecto__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    /* Crece para que el pie tenga contra que empujar hacia abajo. */
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-5);
}

/* La flecha se alinea con la PRIMERA linea del titulo: si el titulo
   ocupa dos lineas y la flecha va centrada, queda flotando. */
.vz-proyecto__tit {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    /* Mismo escalon que .vz-serv__tit: los dos son titulo de tarjeta y
       estaban a 17 y 22, asi que la ficha de obra pesaba menos que la
       de servicio sin motivo. */
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tit);
    color: var(--tit-fuerte);
}

.vz-proyecto__nom {
    display: block;
    min-width: 0;
    /* En columna de 260px un nombre largo sin partir se sale de la caja. */
    overflow-wrap: break-word;
}

/* El subtitulo baja a dato: mono diminuta, no una segunda linea de
   titular que compita con el nombre. */
.vz-proyecto__sub {
    display: block;
    margin-block-start: var(--sp-1);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.vz-proyecto__res {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--tinta-2);
}

/* Pie anclado abajo: en una fila de cuatro fichas con resumenes de
   distinto largo, los precios tienen que caer a la misma altura. */
.vz-proyecto__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-block-start: auto;
    padding-block-start: var(--sp-3);
    border-block-start: var(--bw) solid var(--papel-3);
}

.vz-proyecto__precio {
    font-family: var(--mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    /* Cifras de ancho fijo: los precios de una fila caen alineados. */
    font-variant-numeric: tabular-nums;
    color: var(--tinta-0);
}

.vz-proyecto__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

/* El punto es cuadrado, como todo lo demas. Es senal, no adorno:
   marca la obra que esta a la venta. */
.vz-proyecto__estado::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    background-color: var(--rojo);
}


/* -----------------------------------------------------------------
   5.5 . PIEZAS Y MODALIDADES
   Solo informan, asi que no son tarjetas: son entradas editoriales.
   Filete de tinta de 2px arriba y un tique rojo de 28px encima, que
   es toda la caja que necesitan.
   ----------------------------------------------------------------- */
.vz-piezas,
.vz-modos {
    display: grid;
    /* auto-fit y no auto-fill: con auto-fill la rejilla reserva una
       cuarta pista vacia en escritorio y las tres modalidades se
       apretaban a la izquierda dejando un hueco. auto-fit colapsa las
       pistas que sobran y las tres se reparten el ancho. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    /* Mas aire entre filas que entre columnas: al no haber fondo, la
       fila de abajo se pegaba al texto de la de arriba. */
    gap: var(--sp-7) var(--sp-5);
}

/* Cuando solo hay una, no se estira a todo el ancho: su lista se lee
   en medida de texto. */
.vz-piezas--una { grid-template-columns: minmax(0, var(--w-text)); }

.vz-pieza,
.vz-modo {
    position: relative;
    min-width: 0;
    padding-block-start: var(--sp-4);
    border-block-start: 2px solid var(--tinta-0);
}

.vz-pieza::before,
.vz-modo::before {
    content: "";
    position: absolute;
    inset-block-start: -2px;
    inset-inline-start: 0;
    width: 28px;
    height: 2px;
    background-color: var(--rojo);
}

.vz-pieza__t,
.vz-modo__t {
    margin-block: 0 var(--sp-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tit);
    color: var(--tit-fuerte);
}

/* La categoria de la modalidad, en mono diminuta. El marcado ya trae
   un chevron delante, asi que no se le anaden corchetes: serian dos
   senales para el mismo sitio. */
.vz-modo__c {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block: 0 var(--sp-2);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.vz-modo__d {
    margin-block: 0;
    max-width: var(--w-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--tinta-2);
}


/* -----------------------------------------------------------------
   5.6 . MOVIMIENTO
   Se declara solo si el sistema no ha pedido lo contrario, asi no hay
   nada que desactivar despues. Cambian color y filete: ni transform,
   ni sombra, ni opacidad de imagen.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    a.vz-serv,
    a.vz-proyecto,
    .vz-proyecto__img {
        transition:
            background-color var(--dur-quick) var(--ease),
            border-color var(--dur-quick) var(--ease),
            color var(--dur-quick) var(--ease);
    }
}


/* =================================================================
   6 . PAGINAS
   Lo que decide esta capa: el ritmo vertical de las secciones, la
   cabecera de seccion (.vz-cab), la banda de cabecera de capitulo de
   las paginas interiores, el hero de la home y las dos columnas de
   contacto. Nada de componentes: los botones, el cristal, el suelo
   organico, las esquinas y los campos vienen vestidos de otras capas
   y aqui solo se colocan.

   Va la ultima del fichero a proposito: las inversiones de tinta
   sobre banda oscura tienen que ganar a lo que fijan las capas de
   arriba, y eso se resuelve por orden en la cascada, no subiendo
   especificidad a mano ni con !important.
   ================================================================= */


/* -----------------------------------------------------------------
   6.1 . RITMO VERTICAL
   Una sola direccion de espacio, igual que en la base: cada seccion
   empuja hacia abajo desde arriba. Aqui solo se afina el escalon de
   las secciones de primer nivel y se ponen las dos excepciones.
   ----------------------------------------------------------------- */
main > .vz-wrap > .vz-seccion { padding-block-start: clamp(48px, 6vw, 96px); }

/* La primera abre mas corta: encima ya esta la cabecera global, y un
   hueco de 96 px deja la pagina empezando en el vacio. */
main > .vz-wrap > .vz-seccion:first-child { padding-block-start: clamp(24px, 3.4vw, 48px); }

/* Cierre de pagina: el unico relleno inferior del sitio, para que el
   pie no se pegue al ultimo bloque. */
main > .vz-wrap > .vz-seccion:last-child { padding-block-end: clamp(64px, 8vw, 128px); }

/* Excepcion de ritmo: si el cierre es el plano rojo a sangre tiene
   que morir contra el pie. Una franja de papel de 100 px entre el
   rojo y el pie deja el bloque flotando y se lee como un error de
   montaje. */
main > .vz-wrap > .vz-seccion.vz-cta:last-child { padding-block-end: 0; }

/* Y por arriba lo mismo: .vz-cta lleva tambien .vz-seccion en el
   marcado, asi que sumaba el relleno de seccion AL suyo propio, y ese
   relleno cae dentro de la caja roja porque el fondo lo pinta ella.
   A 1440 daba 186 px de rojo arriba contra 100 abajo: el unico plano
   rojo del documento salia descentrado en seis paginas. */
main > .vz-wrap > .vz-seccion.vz-cta { padding-block-start: 0; }

/* Secciones anidadas, las de /faq dentro de su seccion madre: mismo
   sistema, un escalon mas corto. */
.vz-seccion .vz-seccion { padding-block-start: clamp(32px, 4vw, 56px); }


/* -----------------------------------------------------------------
   6.2 . CABECERA DE SECCION
   .vz-cab es la fila titulo + enlace de la seccion; .vz-cab__tit es la
   pila eyebrow + titular + entradilla, y aparece tambien suelta, sin
   fila, en la mitad de las paginas. Por eso se visten por separado.
   ----------------------------------------------------------------- */
.vz-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    /* El hueco vertical solo cuenta cuando la fila se parte en movil. */
    gap: var(--sp-6) var(--sp-6);
    /* Un escalon mas de separacion con lo que viene debajo. Con 32 px,
       la cabecera de seccion, su boton y la primera tarjeta caian casi
       pegados -12, 24 y 32 px seguidos- y el bloque entero se leia como
       un amontonamiento, sobre todo justo despues del hero, que termina
       con mucho aire. La cabecera necesita separarse de su contenido
       mas de lo que se separan sus propias lineas entre si. */
    margin-block-end: var(--sp-7);
}

/* La seccion que sigue al hero de la portada arranca mas arriba. El
   hero ocupa la pantalla entera y su contenido va centrado, asi que
   termina con doscientos y pico pixeles de aire propio por debajo de
   los botones; sumarle ahi el relleno estandar de seccion hacia un
   claro de mas de trescientos, y lo que se leia no era aire sino un
   salto. Lo que faltaba de verdad era separacion DENTRO del bloque
   siguiente, y eso lo da el margen de .vz-cab de aqui arriba. */
.p-home .vz-hero + .vz-seccion { padding-block-start: var(--sp-6); }

.vz-cab__tit {
    display: flex;
    flex-direction: column;
    /* El hueco lo lleva el contenedor y no el margen de cada hijo: los
       titulares y los parrafos llegan con margenes distintos segun la
       capa de tipografia y hacian escalones sueltos de 8 px. */
    gap: var(--sp-3);
    max-width: var(--w-text);
}
.vz-cab__tit > * { margin-block: 0; }

/* La medida de lectura se aplica al TEXTO y no a la caja: cuando
   .vz-cab__tit hace de banda a sangre necesita el ancho entero, y el
   tope en el contenedor le impedia cruzar la pantalla. */
.vz-cab__tit > :is(h1, h2, p, .vz-lead, .vz-texto) { max-width: var(--w-text); }

/* La entradilla respira un escalon mas que la micro-etiqueta: 12 + 8. */
.vz-cab__tit > .vz-lead { margin-block-start: var(--sp-2); }

/* Suelta y sin fila hermana, la pila tiene que separar tambien del
   contenido que viene detras. Dentro de .vz-cab manda el margen de la
   fila, que ya vale por las dos. */
.vz-seccion > .vz-cab__tit { margin-block-end: var(--sp-6); }


/* -----------------------------------------------------------------
   6.3 . CABECERA DE CAPITULO: LA BANDA A SANGRE
   Las paginas interiores abren con una banda de suelo organico a
   sangre y la tinta invertida. La banda se aplica AL BLOQUE DE
   CABECERA, nunca a la seccion: en /servicios la primera seccion
   lleva ademas la rejilla de tarjetas, y una banda a nivel de seccion
   se la comeria entera.

   El ancla es el primer hijo de la primera seccion, con combinador de
   hijo directo. Eso hace tres cosas:
     . coge la .vz-cab de /servicios y /proyectos, el .vz-cab__tit
       suelto de /faq, /novedades y /legal, y el .vz-hero__top de
       /nosotros, /sello y /servicio;
     . deja fuera todas las .vz-cab de mitad de pagina, que cuelgan de
       otras secciones;
     . deja fuera /contacto, donde el .vz-cab__tit vive dentro de la
       columna de texto del formulario y no de la seccion. Ahi la
       banda partiria la rejilla de dos columnas por la mitad.

   La lista de paginas es explicita y no un :not(.p-home). Es la unica
   forma de que una plantilla nueva no herede una banda que nadie ha
   mirado, y de que /guia se quede fuera: su cabecera lleva dentro el
   formulario de descarga, y campos claros sobre banda oscura piden un
   tratamiento que no es cosa de esta capa.

   LA INVERSION VA POR CONTRATO. Antes esto eran siete listas gigantes
   que reescribian a mano el color de h1, del <strong> del titular, de
   los corchetes y de cada elemento de texto uno por uno. Ahora la
   banda redeclara las mismas variables que cualquier otro suelo
   oscuro y las reglas de la base ya sirven; solo quedan abajo los dos
   casos que no puede resolver la herencia.
   ----------------------------------------------------------------- */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) {
    --tit-fuerte: var(--papel-1);
    --tit-suave:  var(--papel-1-68);   /* 8,11:1 sobre tinta-0 */
    --corchete:   var(--rojo);         /* 5,04:1 */
    --linea:      var(--papel-1-16);
    --btn-linea-filete: var(--papel-3);   /* 12,85:1 sobre tinta-0 */
    --btn-linea-txt:    var(--papel-1);
    --btn-linea-fondo:  var(--tinta-0);
    --btn-oscuro-fondo: var(--papel-1);
    --btn-oscuro-txt:   var(--tinta-0);
    --btn-oscuro-hover: var(--papel-0);
    --arrow-tinte: var(--papel-1);
    --arrow-fondo: var(--tinta-0);

    position: relative;
    isolation: isolate;
    /* Las manchas se desbordan a proposito y se recortan aqui. */
    overflow: hidden;
    /* La banda es A SANGRE, asi que no puede heredar el tope de medida
       de texto de .vz-cab__tit. En /faq, /novedades y las legales la
       propia .vz-cab__tit ES la banda, y con max-width: var(--w-text)
       el plano se quedaba en 645 px pegado al borde izquierdo en vez de
       cruzar la pantalla; por encima de unos 1520 px el relleno de
       sangrado se comia esa caja y estrangulaba el titular hasta partir
       palabras. La medida de texto vuelve a los hijos, que es su sitio. */
    max-width: none;
    /* A sangre: se sale de la columna por los dos lados y devuelve el
       contenido a la reticula con el relleno inverso. El 50 % de los
       dos calculos se resuelve contra el ancho de la seccion, asi que
       el texto cae exactamente sobre la columna de .vz-wrap. */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    padding-block: clamp(48px, 7vw, 104px);
    margin-block-end: clamp(40px, 5vw, 72px);
    /* Radio solo abajo: arriba la banda muere contra la cabecera
       global y una esquina redonda ahi solo abre una cuna de papel. */
    border-radius: 0 0 var(--r-media) var(--r-media);
    background-color: var(--tinta-0);
    color: var(--papel-1);
    /* Filo de luz de 1 px arriba, en lugar de sombra: separa la banda
       de la cabecera global sin difuminar nada. Va en sombra interior
       y no en borde porque un borde real desplazaria el calculo del
       sangrado. */
    box-shadow: inset 0 1px 0 0 var(--papel-1-14);
}

/* La seccion que aloja la banda pierde su relleno superior: si no,
   queda un escalon de papel entre la cabecera global y la banda. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child { padding-block-start: 0; }

/* LAS MANCHAS DEL SUELO. Van en un pseudo con inset negativo para que
   el borde difuminado caiga FUERA de la caja y el recorte del padre
   corte por color plano: si el desenfoque se apaga dentro se ve el
   halo gris de la propia mancha contra el filo, que es justo la
   sombra difusa que esta casa no usa.

   EL ROJO NO PUEDE LLEGAR A OPACIDAD PLENA. Va el primero de la
   lista, o sea encima de todo, y a opacidad 1 se comia la banda: la
   micro-etiqueta caia a 3,53:1, la entradilla a 3,75, el titular a
   3,01 y los corchetes a 1,45. Al 45 % la micro-etiqueta sube a 7,24,
   el titular a 5,87 y los corchetes en --rojo a 3,25 (por encima del
   3:1 que exige un elemento grafico), y la banda se sigue leyendo
   como un plano rojo. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(42% 62% at 16% 26%, color-mix(in srgb, var(--rojo-tex) 45%, transparent) 0%, transparent 52%),
        radial-gradient(48% 58% at 84% 22%, color-mix(in srgb, var(--petroleo-2) 70%, transparent) 0%, transparent 52%),
        radial-gradient(54% 66% at 62% 92%, var(--petroleo) 0%, transparent 64%),
        radial-gradient(72% 78% at 50% 48%, var(--tinta-0) 0%, transparent 76%);
    filter: blur(72px) saturate(1.1);
}

/* El grano de la casa, el mismo de :root: ni una peticion, y en
   overlay para que sobre tinta se lea como textura de papel impreso y
   no como una niebla clara por encima. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--grano);
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: var(--grano-op);
}

/* LO QUE LA HERENCIA NO PUEDE RESOLVER. Todo lo de esta lista declara
   su propio color en otra capa, y un color declarado en el hijo no lo
   tumba un color heredado del padre. Papel-1 al 82 % sobre tinta-0 da
   11,51:1. La micro-etiqueta comparte el mismo escalon que la
   entradilla: cuatro puntos de alfa no se distinguen y ahorran
   repetir entera la lista de paginas. Sus corchetes ya los ha subido
   --corchete.
   La linea legal y las etiquetas de campo entran porque /novedades
   mete su formulario entero DENTRO del .vz-cab__tit de la banda: sin
   ellas, la nota de privacidad se quedaria en tinta-3 sobre tinta-0.
   .vz-campo__error se queda fuera a proposito: vive en esa misma
   banda y tiene que seguir siendo el rojo del error. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)
:is(.vz-lead, .vz-texto, .vz-texto p, .vz-mono, .vz-eyebrow, .vz-form__legal, label) {
    color: var(--papel-1-82);
}

/* Enlaces de prosa dentro de la banda, a papel-1 entero: el rojo de
   texto esta medido contra papel y sobre tinta se queda en 3,5:1, o
   sea suspende. Los botones no entran: traen su propia piel y ya
   saben invertirse por las variables --btn-* de arriba. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) a:not(.vz-btn) {
    color: var(--papel-1);
    text-decoration-color: var(--papel-1-46);
}

/* --- El .vz-hero__top de las paginas interiores -------------------
   Dos columnas: titular a la izquierda, entradilla y acciones a la
   derecha. Se define aqui y no en una capa de rejillas porque el
   bloque solo existe como cabecera de pagina. */
.vz-hero__top {
    display: grid;
    gap: var(--sp-6) clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) {
    .vz-hero__top {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        /* Cuadrados por abajo: los dos bloques tienen alturas
           distintas y alineados por arriba la entradilla se queda
           flotando. */
        align-items: end;
    }
}
.vz-hero__top > .vz-hero__tit {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.vz-hero__top > .vz-hero__tit > * { margin-block: 0; }

.vz-hero__top > .vz-hero__aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    max-width: 46ch;
}
.vz-hero__top > .vz-hero__aside > * { margin-block: 0; }


/* -----------------------------------------------------------------
   6.4 . HERO DE LA HOME
   Un plano a sangre sobre el suelo organico, el titular dentro del
   cristal descolgado a la izquierda y dos atajos cuadrados clavados
   en el borde derecho. El suelo y el cristal los pintan sus propias
   capas (.vz-fluido, .vz-cristal), que ya traen el contrato de suelo
   oscuro puesto: aqui solo se decide la geometria.
   ----------------------------------------------------------------- */

/* El hero de la home compite con main > .vz-wrap > .vz-seccion:first-child
   (0,3,1) de esta misma capa, asi que necesita al menos esa
   especificidad. Escrito como .p-home .vz-hero (0,2,0) esta linea no
   se aplicaba nunca. */
.p-home main > .vz-wrap > .vz-seccion.vz-hero:first-child {
    /* Cero, no --sp-5. El plano va a sangre por los lados y su radio
       ya redondea solo las esquinas de ABAJO, o sea que estaba pensado
       para arrancar a ras. Los 24 px de antes colaban una franja del
       color del cuerpo entre la barra y el plano; con la cabecera
       transparente no se notaba, pero al aclararla queda una banda
       beige suelta que no es de nadie. */
    padding-block-start: 0;
}

.vz-hero__fluido {
    /* Misma sangre que la banda de capitulo. */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    /* El relleno inferior es mayor que el superior a proposito: abajo
       viven la nota de tres lineas y el recuento de obras clavados en
       las esquinas, y con relleno simetrico el cristal se les echa
       encima. */
    padding-block: clamp(28px, 5vw, 72px) clamp(84px, 10vw, 132px);
    min-block-size: clamp(480px, 68vh, 760px);
    border-radius: 0 0 var(--r-media) var(--r-media);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.vz-hero__panel {
    /* Descolgado a la izquierda, nunca centrado: la simetria es lo que
       convierte una portada en una plantilla. */
    width: min(100%, 46rem);
    margin-inline: 0 auto;
    padding: clamp(24px, 3.4vw, 44px);
}
@media (min-width: 1100px) {
    .vz-hero__panel { margin-inline-start: clamp(0px, 5vw, 88px); }
}


/* -----------------------------------------------------------------
   6.4.1 . EL HERO: CARTEL TECNICO
   -----------------------------------------------------------------
   La referencia que manda ahora es un cartel de estudio: fondo hueso,
   tipografia NEGRA ENORME con sombra dura desplazada, una flecha roja
   grande como unica mancha de color, micro-tipografia de mono
   repartida por los bordes y filetes de encuadre con corchetes en las
   esquinas.

   Lo que se corrige del intento anterior: el 42 % derecho estaba
   vacio. Ahora lo ocupa la flecha, que ademas hace un trabajo real
   -apunta hacia el catalogo, que es lo que sigue al hacer scroll- y
   no es adorno.

   Y una regla que no se toca: todo lo que dice la micro-tipografia es
   verdad y sale de datos reales. Ni relojes falsos, ni codigos
   inventados, ni contadores de mentira. Esa es la diferencia entre un
   cartel y un decorado.
   ----------------------------------------------------------------- */
.vz-hero__fluido {
    /* Contrato de titular sobre papel. .vz-fluido--claro pone el resto
       (fondo, color de cuerpo y tinte de esquina) y desactiva las
       reglas de suelo oscuro de la seccion 1.3. */
    --tit-fuerte: var(--tinta-0);
    --tit-suave:  var(--tinta-0);
    --corchete:   var(--rojo-tex);
    --linea:      var(--papel-3);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 0;
    padding-block: clamp(56px, 9vh, 104px) clamp(72px, 11vh, 128px);

    /* --- EL ENCUADRE Y LA RETICULA DEL CARTEL, FUERA ---------------
       Aqui vivian dos capas de fondo de la epoca cartel: un filete de
       un pelo arriba y tres columnas tenues de retitula tecnica. Las
       dos las sustituye el degradado de la seccion 51, que se declara
       mucho mas abajo y gana.

       Se quitan enteras, y no solo la imagen, porque el
       background-position que las acompanaba SEGUIA vivo: la regla de
       abajo solo redeclara image y size, asi que el fondo heredaba
       "clamp(16px,3vw,48px) clamp(38px,6vh,68px)" y el degradado se
       pintaba desplazado 16 px a la derecha y ~51 px hacia abajo. Con
       no-repeat, esa franja destapada mostraba el background-color
       liso: exactamente la banda plana que se veia bajo el logotipo en
       movil, y una tira clara en el canto izquierdo. */
}

/* --- SIN FLECHA Y SIN PSEUDOS EN EL HERO ---------------------------
   Aqui vivia la flecha roja del cartel, dibujada en el ::before de
   .vz-hero__fluido. El fondo lo pintan ahora las laminas, que son un
   SVG propio en el marcado, asi que los dos pseudos se apagan.

   Y no basta con quitarles el background-image: este pseudo arrastra
   inset, inline-size y aspect-ratio de esa epoca, y al vaciarle solo
   la imagen volvia a ganar la regla de la flecha. Se apaga entero. */
.vz-hero__fluido.vz-fluido::before,
.vz-hero__fluido.vz-fluido::after { display: none; }

/* El grano fuera: sobre papel claro es suciedad, no textura. */
.vz-hero__fluido.vz-fluido::after { display: none; }

/* --- EL TEXTO, sin caja ------------------------------------------- */
.vz-hero__fluido > .vz-hero__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--sp-5);
    align-content: center;
    justify-items: start;
    width: min(100%, 48rem);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--tinta-2);
}

/* EL TITULAR. Es la imagen de la portada, no un rotulo: sube a cuerpo
   de cartel, se aprieta el interletraje y lleva la SOMBRA DURA
   desplazada de la referencia, que es lo que le da el aire de
   serigrafia mal registrada. La sombra va en gris medio y no en
   negro: en negro se comia la letra a este tamano. */
.vz-hero__fluido > .vz-hero__panel h1 {
    /* El titular nuevo es mas largo que el anterior y a 7rem salia en
       CINCO lineas, que se comian el hero entero. A 4,75 cae en tres,
       que es el ritmo del cartel de referencia. */
    font-size: clamp(2.25rem, 1rem + 4.4vw, 4.75rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: var(--fw-bold);
    color: var(--tinta-0);
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
    text-shadow: -0.035em 0.035em 0 var(--tinta-3);
}
.vz-hero__fluido > .vz-hero__panel h1 strong { font-weight: var(--fw-bold); }

/* El asterisco rojo de la referencia, colgado del final del titular.
   Es puntuacion grafica, no contenido: aria-hidden por el pseudo. */
.vz-hero__fluido > .vz-hero__panel h1::after {
    content: "*";
    color: var(--rojo);
    font-size: 0.5em;
    line-height: 1;
    vertical-align: super;
    text-shadow: none;
    margin-inline-start: 0.06em;
}

/* La antefirma va en la tinta MAS oscura, no en la de cuerpo. Son 11
   px sobre un fondo que se mueve, asi que necesita 4,5:1 en cualquier
   instante, y con --tinta-2 el peor momento del ciclo se quedaba en
   4,59: pasa, pero con un margen demasiado fino para algo animado del
   que solo se muestrean unos instantes. Con --tinta-0 el margen sube
   lo bastante como para poder cargar mas las nubes sin volver a
   quedarse al filo. */
.vz-hero__fluido > .vz-hero__panel .vz-eyebrow { color: var(--tinta-0); }

.vz-hero__fluido > .vz-hero__panel .vz-lead,
.vz-hero__fluido > .vz-hero__panel .vz-hero__entrada {
    max-width: 46ch;
    color: var(--tinta-2);
}

@media (min-width: 1100px) {
    .vz-hero__fluido > .vz-hero__panel {
        grid-area: 1 / 1;
        margin-inline-start: clamp(0px, 3vw, 56px);
    }
}

/* Por debajo de 900 la flecha se pone detras del texto y estorba. */
@media (max-width: 900px) {
    .vz-hero__fluido.vz-fluido::before {
        inline-size: clamp(110px, 34vw, 190px);
        opacity: 0.9;
    }
}

@media (forced-colors: active) {
    .vz-hero__fluido.vz-fluido { background-image: none; }
    .vz-hero__fluido.vz-fluido::before { display: none; }
    .vz-hero__fluido > .vz-hero__panel h1 { text-shadow: none; }
}


/* --- El bodegon de la coleccion, debajo del plano ----------------- */
.p-home .vz-hero__top {
    /* Un solo hijo: la rejilla de dos columnas de las paginas
       interiores dejaria media pagina en blanco. */
    grid-template-columns: minmax(0, 1fr);
    padding-block-start: var(--sp-8);
}
.p-home .vz-hero__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    text-align: center;
}

@media (max-width: 720px) {
    .vz-hero__fluido {
        /* En movil el plano se ajusta a su contenido: 480 px de alto
           minimo dejaban el cristal nadando en el centro. */
        min-block-size: 0;
        padding-block: clamp(32px, 9vw, 56px);
        border-radius: 0;
    }
}


/* -----------------------------------------------------------------
   6.5 . CONTACTO: TEXTO Y FORMULARIO
   Dos columnas de peso parecido: a la izquierda el argumento, a la
   derecha la caja del formulario. Se apilan por debajo de 900 px, y
   el orden del DOM ya es el orden de lectura, asi que no hay nada que
   reordenar.
   ----------------------------------------------------------------- */
.vz-form__cols {
    display: grid;
    gap: var(--sp-7) clamp(32px, 5vw, 80px);
    align-items: start;
}
@media (min-width: 900px) {
    .vz-form__cols {
        /* La caja pesa un poco mas que el texto: dentro hay campos con
           medida minima y estrecharla obliga a partir la pareja
           nombre + correo antes de tiempo. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    }
}
/* La columna de texto se queda en medida de lectura aunque su celda
   sea mas ancha. */
.vz-form__cols > .vz-form__aside { max-width: 52ch; }




/* =================================================================
   7 . ESTADOS DEL JS
   Los enganches que main.js marca en el DOM y que hasta ahora no
   recogia ninguna regla: .vz-reveal (80 usos en el marcado),
   .is-cargando de la navegacion parcial, .is-oculto del indicador y
   el propio [data-scroll-hint].

   Van al final del fichero porque son estado, no diseno: se montan
   encima de lo que ya han pintado las seis capas de arriba.
   ================================================================= */


/* -----------------------------------------------------------------
   7.1 . APARICION AL ENTRAR EN PANTALLA
   CUIDADO CON ESTE BLOQUE. El JS observa .vz-reveal y le anade
   .is-visible cuando el elemento entra en pantalla (y a todos de
   golpe si el sistema pide menos movimiento o si el navegador no
   tiene IntersectionObserver). Pero si el fichero no llega a cargar
   (despliegue a medias, bloqueador, error de red) nadie anade
   .is-visible NUNCA: un .vz-reveal { opacity: 0 } suelto dejaria la
   web entera en blanco.

   Por eso el escondite cuelga de una clase que solo puede poner el
   propio script en el <html>. Mientras esa marca no se ponga, esto no
   esconde nada y la pagina se ve entera: es el modo de fallo que
   queremos. El dia que main.js estampe la clase, la aparicion se
   enciende sola y sin tocar el CSS.
   ----------------------------------------------------------------- */
.js .vz-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--dur-medium) var(--ease),
        transform var(--dur-medium) var(--ease);
}

.js .vz-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Cinturon y tirantes: aunque el JS ya marca todo como visible bajo
   movimiento reducido, aqui no se depende de que llegue a hacerlo. */
@media (prefers-reduced-motion: reduce) {
    .js .vz-reveal {
        opacity: 1;
        transform: none;
    }
}


/* -----------------------------------------------------------------
   7.2 . NAVEGACION PARCIAL
   El servidor sabe devolver solo el <main>, asi que al cambiar de
   pagina no se repintan la cabecera ni el pie. Mientras llega el
   contenido nuevo, el viejo se atenua: es la unica senal de que algo
   esta pasando, porque no hay recarga que lo diga. Solo se nota con
   la red lenta; en local no se ve.
   La clase la pone y la quita el JS en el <html>.
   ----------------------------------------------------------------- */
main {
    transition: opacity var(--dur-quick) var(--ease);
}

.is-cargando main {
    opacity: 0.45;
}


/* -----------------------------------------------------------------
   7.3 . INDICADOR DE SCROLL
   Mobiliario del hero: mono diminuta que dice que abajo hay mas. El
   JS le pone .is-oculto en cuanto se han bajado 80 px, porque a
   partir de ahi ya no informa de nada.
   Se apaga con opacidad y visibilidad, no con display: asi se puede
   fundir y no da un salto de layout al irse.
   ----------------------------------------------------------------- */
[data-scroll-hint] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--esquina-tinte, var(--tinta-3));
    transition:
        opacity var(--dur-fast) var(--ease),
        visibility 0s linear var(--dur-fast);
}

/* El chevron del indicador apunta hacia donde hay que ir. */
[data-scroll-hint] .vz-ico {
    transform: rotate(90deg);
}

.is-oculto {
    opacity: 0;
    visibility: hidden;
}


/* =================================================================
   8 . COMPONENTES PORTADOS
   -----------------------------------------------------------------
   Aqui vive el marcado que las seis capas nuevas no vistieron, y no
   por culpa de ellas: la especificacion que recibieron listaba el
   marcado que yo recordaba, no el que existe. Se quedaron fuera 200
   clases enteras: la coleccion infantil al completo, la ficha de obra
   y su caja de compra, los componentes de las paginas de servicio
   (pasos, tipos, showcase, ficha tecnica), el formulario, la FAQ, el
   404 y el styleguide. Sin CSS, un bloque se pinta a ancho completo:
   por eso el banner de la coleccion salia a 1345 px.

   Estas 464 reglas vienen de la hoja anterior, que llevaba meses
   probada contra este mismo marcado. Lo unico que se ha cambiado es
   de que paleta beben: los tokens viejos estan reescritos uno a uno a
   los nuevos, y las sombras difusas se han retirado del todo porque el
   sistema nuevo no las usa.

   NO es volver atras. Es reconocer que reescribir de cero 200
   componentes en una pasada no se puede hacer bien, y que dejarlos sin
   vestir era peor que portarlos. La deuda queda anotada: esta capa se
   va reescribiendo por bloques, empezando por la coleccion.
   ================================================================= */

/* La coleccion tenia paleta propia -cremas, marron y ocre- y era el
   ultimo sitio del fichero con crema, que es justo lo que el encargo
   prohibe. Ya no declara color: se engancha a los tokens de la casa,
   asi que cambia sola el dia que cambie la paleta y no hay dos
   sistemas de color conviviendo.
   El radio tambien baja: 18px no era ninguno de los tres radios de la
   casa (0, 6, 4) y era el unico sitio del fichero que se lo saltaba. */
.co, .p-coleccion {
    --co-papel:  var(--papel-1);   /* humo blanco, la base de la web */
    --co-crema:  var(--papel-0);   /* la lamina, blanco absoluto */
    --co-tinta:  var(--tinta-2);   /* cuerpo. 10,46 sobre humo */
    --co-linea:  var(--tinta-3);   /* metadatos y filete. 6,13 sobre humo */
    --co-ocre:   var(--rojo);      /* el acento decorativo, ahora fresa */
    --co-acento: var(--rojo-tex);  /* lo sobrescribe cada tomo */
    --co-r:      var(--r-media);
}
.vz-seccion--sm { padding-block: clamp(32px, 4vw, 56px);
}

.vz-bloque { border-radius: var(--r-media); padding: clamp(24px, 4vw, 64px);
}

.vz-sello, .vz-sello + .vz-seccion { border-top: 0;
}

.vz-flecha {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--tinta-0);
}

.vz-flecha .vz-ico {
    width: 13px; height: 13px;
    transition: transform var(--dur-fast) var(--ease);
}

.vz-flecha:hover .vz-ico,
a:hover .vz-flecha .vz-ico,
a:focus-visible .vz-flecha .vz-ico { transform: translateX(6px);
}

.p-guia .vz-hero__top { align-items: start;
}

.vz-hero__aside .vz-ambito {
    margin-top: calc(var(--sp-3) - var(--sp-5));
    color: var(--tinta-3);
    font-size: var(--fs-xs);
}

.vz-ficha__top {
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    grid-template-areas:
        "obra cab"
        "obra compra"
        "obra cuerpo";
    gap: var(--sp-6) var(--sp-8);
    align-items: start;
}

@media (min-width: 1120px) {
    .vz-ficha__top {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(240px, 300px);
        grid-template-areas:
            "obra cab    compra"
            "obra cuerpo compra";
    }
}

.vz-ficha__compra { grid-area: compra;
}

.vz-ficha__compra .vz-compra {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "precio" "nota" "boton" "pie";
    row-gap: var(--sp-3);
    border: var(--bw) solid var(--papel-3);
}

.vz-ficha__compra .vz-compra .vz-btn { justify-self: stretch; justify-content: center;
}

.vz-ficha__compra .vz-aviso { max-width: none;
}

.vz-ficha__cab {
    grid-area: cab;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    align-items: flex-start;
}

.vz-ficha__obra {
    grid-area: obra;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    /* Acompaña al texto largo cuando se despliega el "leer más".
       El tope deja sitio a la cabecera, que también es sticky (~72px). */
    position: sticky;
    top: calc(72px + var(--sp-5));
}

.vz-ficha__portada { border-radius: var(--r-0); overflow: hidden; background: var(--papel-2);
}

.p-proyecto--libro .vz-ficha__portada { background: #FFF;
}

.vz-ficha__obra .vz-datos {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: var(--sp-2);
}

.vz-ficha__obra .vz-dato {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-2);
    border-bottom: var(--bw) solid var(--papel-3);
}

.vz-ficha__obra .vz-dato dd { margin: 0; text-align: right;
}

.vz-ficha__cuerpo { grid-area: cuerpo; display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start;
}

.vz-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-5);
    width: 100%;
    margin: 0;
    padding-top: var(--sp-5);
    border-top: var(--bw) solid var(--papel-3);
}

.vz-dato dt {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.vz-dato dd { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium);
}

.p-proyecto--libro .vz-galeria {
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
    justify-content: start;
}

.p-proyecto--libro .vz-galeria > * { background: #FFF;
}

.p-proyecto--libro .vz-galeria img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

@media (max-width: 860px) {
    .vz-ficha__top {
        grid-template-columns: 1fr;
        grid-template-areas: "cab" "obra" "compra" "cuerpo";
    }
    .vz-ficha__obra { position: static; max-width: 340px;
    }
}

.vz-sello__in {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--sp-7) var(--sp-8);
    align-items: center;
}

.vz-sello h2 { color: #FFF;
}

.vz-sello__txt { color: rgba(255,255,255,.72); font-size: var(--fs-md);
}

.vz-sello .vz-lista > li { color: rgba(255,255,255,.86); font-size: var(--fs-sm);
}

.vz-sello .vz-lista > li > .vz-ico { color: rgba(255,255,255,.86);
}

@media (max-width: 860px) {
    .vz-sello__in { grid-template-columns: 1fr;
    }
}

.vz-red--instagram {
    background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}

.vz-faq { display: flex; flex-direction: column;
}

.vz-faq__item { border-top: var(--bw) solid var(--papel-3);
}

.vz-faq__item:last-child { border-bottom: var(--bw) solid var(--papel-3);
}

.vz-faq__p {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-block: var(--sp-5);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    transition: color var(--dur-fast) var(--ease);
}

.vz-faq__p::-webkit-details-marker { display: none;
}

/* rojo-aa, 5,40:1: con el rojo de marca la pregunta CAIA de 10,5:1 a
   3,85:1 justo al pasar el raton por encima, o sea que el gesto de
   interesarse por una pregunta la hacia menos legible. */
.vz-faq__p:hover { color: var(--rojo-aa);
}

.vz-faq__ico {
    width: 14px; height: 14px;
    margin-top: .35em;
    transform: rotate(90deg);  /* hereda el color: rojo solo en el hover del summary */
    transition: transform var(--dur-fast) var(--ease);
}

.vz-faq__item[open] .vz-faq__ico { transform: rotate(-90deg);
}

.vz-faq__r {
    max-width: 72ch;
    padding-bottom: var(--sp-6);
    color: var(--tinta-2);
}

.vz-faq__r p + p { margin-top: var(--sp-4);
}

.vz-legal h2 {
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.vz-legal h2:first-child { margin-top: 0;
}

.vz-legal p { margin-bottom: var(--sp-4); color: var(--tinta-2);
}

.vz-legal code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--papel-2);
    font-family: var(--mono);
    font-size: .9em;   /* relativo a su párrafo a propósito: escala con él */
}

.vz-datos--legal { border-top: 0; padding-top: 0;
}

.vz-pasos { display: flex; flex-direction: column;
}

.vz-paso {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-5);
    padding-block: var(--sp-6);
    border-top: var(--bw) solid var(--papel-3);
}

.vz-paso:last-child { border-bottom: var(--bw) solid var(--papel-3);
}

.vz-paso__n {
    font-family: var(--mono);
    font-size: var(--fs-lg);
    line-height: 1.1;
    color: var(--tinta-3);
}

.vz-paso__t { font-size: var(--fs-lg); font-weight: var(--fw-bold);
}

.vz-paso__d { margin-top: var(--sp-2); max-width: 66ch; color: var(--tinta-2);
}

@media (max-width: 620px) {
    .vz-paso { grid-template-columns: 1fr; gap: var(--sp-2);
    }
}

.vz-lista--2col { columns: 2; column-gap: var(--sp-8);
}

.vz-lista--2col > li { break-inside: avoid; margin-bottom: var(--sp-5);
}

@media (max-width: 760px) {
    .vz-lista--2col { columns: 1;
    }
}

.vz-form { display: flex; flex-direction: column; gap: var(--sp-4);
}

.vz-aviso + .vz-form { margin-top: var(--sp-5);
}

.vz-404__in, .vz-stub { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5);
}

.vz-404__in { min-height: 40vh; justify-content: center;
}

.vz-descarga {
    padding: clamp(24px, 4vw, 64px);
    border-radius: var(--r-media);
    background: var(--papel-2);
}

.vz-descarga__tit {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.25;
}

.vz-descarga__sub {
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--tinta-3);
}

.vz-ficha__desc { font-size: var(--fs-sm);
}

.vz-ficha__desc p + p { margin-top: var(--sp-3);
}

.vz-mas { width: 100%;
}

.vz-mas > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    /* rojo-aa y no rojo: a 15 px esto es texto normal y exige 4,5:1. El
       rojo de marca daba 3,83:1 sobre papel. Es ademas el mismo tono
       que ya usaba su propio :hover, asi que el reposo y el hover ya no
       se contradicen. */
    color: var(--rojo-aa);
    transition: color var(--dur-fast) var(--ease);
}

.vz-mas > summary::-webkit-details-marker { display: none;
}

.vz-mas > summary::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate var(--dur-fast) var(--ease);
}

.vz-mas[open] > summary::after { rotate: -135deg; translate: 0 2px;
}

.vz-mas > summary:hover { color: var(--rojo-aa);
}

.vz-mas[open] > summary { margin-bottom: var(--sp-2);
}

body.p-coleccion { background: var(--co-papel);
}

body.p-coleccion::before { display: none;
}

body.p-coleccion::after { display: none;
}

.co h1, .co h2, .co h3,
.co .co-h1, .co .co-h2, .co .co-h3 {
    font-family: "Bree Serif", Georgia, serif;
    font-weight: 400;
    color: var(--co-tinta);
    letter-spacing: -.01em;
}

.co-h1 { font-size: var(--fs-2xl); line-height: 1.08; margin: 0;
}

.co-h2 { font-size: var(--fs-xl); line-height: 1.16; margin: 0;
}

.co-h3 { font-size: var(--fs-lg); line-height: 1.2; margin: 0 0 var(--sp-2);
}

.co-margarita {
    width: 1.15em; height: 1.15em;
    flex: none;
    vertical-align: -.22em;
}

.co-margarita--bala { width: 1em; height: 1em; margin-right: var(--sp-3);
}

.co-margarita--grande { width: 68px; height: 68px;
}

.co-eyebrow {
    display: flex; align-items: center; gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--co-linea);
}

.co-eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px;
}

.co-hero { max-width: 44rem;
}

.co-tagline {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-md);
    line-height: 1.42;
}

.co-subclaim {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--co-linea);
}

.co-acciones { margin-top: var(--sp-6);
}

.co-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border: 2px solid transparent;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    /* Sin nowrap por defecto: la cadena mas larga -Comprar el Tomo 1 en
       Amazon- no cabe en 320 px y el boton se salia de la pantalla. Que
       parta en dos lineas es feo; salirse del visor es peor. El nowrap
       vuelve en cuanto hay sitio. */
    white-space: normal;
    text-wrap: balance;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.co-btn .vz-ico { width: 13px; height: 13px;
}

.co a.co-btn--tinta,
.co button.co-btn--tinta { background: var(--co-acento); border-color: var(--co-acento); color: #FFF;
}

.co a.co-btn--tinta:hover,
.co button.co-btn--tinta:hover { background: var(--co-tinta); border-color: var(--co-tinta); color: #FFF;
}

.co a.co-btn--linea { border-color: var(--co-linea); color: var(--co-tinta);
}

.co a.co-btn--linea:hover { background: var(--co-crema);
}

.co a.co-btn--compra {
    background: linear-gradient(135deg, #FFB84D 0%, #FF9900 48%, #EE7A00 100%);
    color: #232F3E;
    font-weight: var(--fw-bold);
}

.co a.co-btn--compra:hover { box-shadow: 0 6px 18px rgba(238,122,0,.3);
}

.co a.co-btn--compra .vz-ico--marca { width: 18px; height: 18px;
}

.co-comoson {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

.co-comoson p { line-height: 1.7;
}

.co-lista { list-style: none; margin: var(--sp-5) 0 0; padding: 0;
}

.co-lista li {
    display: flex; align-items: center;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
}

.co-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-4) var(--sp-5);
    margin: 0;
    padding: var(--sp-6);
    background: var(--co-crema);
    border-radius: var(--co-r);
}

.co-ficha__it dt {
    font-family: var(--mono);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--co-linea);
}

.co-ficha__it dd { margin: var(--sp-1) 0 0; font-size: var(--fs-sm);
}

.co-cab { margin-bottom: var(--sp-6);
}

.co-cab__txt { margin: var(--sp-2) 0 0; color: var(--co-linea); font-size: var(--fs-sm);
}

.co-tomos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-6);
    list-style: none;
    margin: 0; padding: 0;
}

.co-tomo__in {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    height: 100%;
}

a.co-tomo__in { text-decoration: none;
}

.co-tomo__img {
    display: block;
    border-radius: var(--co-r);
    overflow: hidden;
    background: var(--co-crema);
    /* Las portadas son 3:4. Se reserva el hueco aunque el fichero
       todavía no esté subido, así el grid no da un salto el día que
       aparezcan. */
    aspect-ratio: 3 / 4;
}

.co-tomo__img img,
.co-tomo__img picture {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

a.co-tomo__in:hover .co-tomo__img { box-shadow: 0 10px 30px rgba(74,52,35,.14);
}

.co-proximo {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--sp-2);
    width: 100%; height: 100%;
    background: var(--co-crema);
    border: 1px dashed var(--co-linea);
    border-radius: var(--co-r);
    text-align: center;
}

.co-proximo__n {
    font-family: var(--mono);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--co-linea);
}

.co-proximo__t { font-size: var(--fs-sm); color: var(--co-tinta);
}

.co-tomo__cuerpo { display: flex; flex-direction: column; gap: var(--sp-1);
}

.co-tomo__n {
    font-family: var(--mono);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--co-linea);
}

.co-tomo__tit {
    font-family: "Bree Serif", Georgia, serif;
    font-size: var(--fs-md);
    line-height: 1.2;
    color: var(--co-tinta);
}

.co-tomo__sub { font-size: var(--fs-sm); color: var(--co-linea); line-height: 1.4;
}

.co-estado {
    align-self: start;
    margin-top: var(--sp-2);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--co-linea);
    color: var(--co-linea);
}

/* Los dos estados dejan de distinguirse por MATIZ (verde contra ocre,
   que ademas quedaban fuera de la paleta) y pasan a distinguirse por
   PESO, que es mas claro y aguanta cualquier cambio de color: lo que
   se puede comprar va relleno y grita, lo que todavia no llega se
   queda en filete y calla. Caoba y no fresa porque el texto es de 11
   px: blanco sobre fresa da 4,23 y no llega a AA; sobre caoba, 6,49. */
.co-estado--venta {
    background: var(--rojo-aa); border-color: var(--rojo-aa); color: var(--sobre-rojo);
}

.co-estado--pronto {
    background: transparent; border-color: var(--tinta-3); color: var(--tinta-3);
}

.co-ficha__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

.co-ficha__portada {
    border-radius: var(--co-r);
    overflow: hidden;
    background: var(--co-crema);
    aspect-ratio: 3 / 4;
    max-width: 340px;
}

.co-ficha__portada img,
.co-ficha__portada picture { display: block; width: 100%; height: 100%; object-fit: cover;
}

.co-compra {
    margin: var(--sp-6) 0;
    padding: var(--sp-5);
    background: var(--co-crema);
    border-radius: var(--co-r);
}

.co-precio {
    margin: 0 0 var(--sp-4);
    font-family: "Bree Serif", Georgia, serif;
    font-size: var(--fs-xl);
    line-height: 1;
}

.co button.co-btn--tinta { align-self: flex-start; cursor: pointer;
}

.co-compra__pie {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--co-linea);
}

.co-texto p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.75;
}

.co-lead { font-size: var(--fs-md); font-weight: var(--fw-medium);
}

.co-rigor__in {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--co-crema);
    border-radius: var(--co-r);
}

.co-rigor__in p { margin: 0; font-size: var(--fs-sm); line-height: 1.7;
}

.co-cierre__in {
    padding: var(--sp-7) var(--sp-6);
    background: var(--co-crema);
    border-radius: var(--co-r);
    text-align: center;
}

.co-cierre__in p { max-width: 34rem; margin: var(--sp-3) auto 0; font-size: var(--fs-sm);
}

.co-cierre .co-acciones { justify-content: center;
}

.co-volver {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--co-acento);
}

.co-volver .vz-ico { width: 12px; height: 12px;
}

@media (min-width: 720px) {
    .co-comoson { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start;
    }
    .co-ficha__top { grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-8); align-items: start;
    }
    .co-ficha--ancha { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    .co-rigor__in { flex-direction: row; gap: var(--sp-5);
    }
}

.vz-coleccion {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-6);
    /* Ni un hexadecimal suelto: la banda de coleccion se viste con los
       tokens de la casa, como todo lo demas. Antes traia crema, marron
       y ocre escritos a mano y era invisible a cualquier cambio de
       paleta. */
    background: var(--papel-0);
    border: 1px solid var(--papel-3);
    border-radius: var(--r-0);
    --co-crema: var(--papel-1);
    --co-linea: var(--tinta-3);
    --co-ocre:  var(--rojo);
}

.vz-coleccion:hover { border-color: var(--tinta-0);
}

.vz-coleccion__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
}

.vz-coleccion__tit {
    font-family: "Bree Serif", Georgia, serif;
    font-size: var(--fs-lg);
    line-height: 1.14;
    color: var(--tinta-2);
}

.vz-coleccion__txt { font-size: var(--fs-sm); color: var(--tinta-2);
}

.vz-coleccion__txt--sec { color: var(--tinta-3);
}

.vz-coleccion__cta {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--rojo-tex);
}

@media (min-width: 720px) {
    .vz-coleccion { flex-direction: row; align-items: center; gap: var(--sp-7); padding: var(--sp-7);
    }
}

.vz-proyecto__img,
.vz-ficha__portada { position: relative;
}

.vz-btn:active,
.co-btn:active,
.vz-arrow-btn:active { transform: translateY(1px);
}

.vz-a:active,
.vz-mas > summary:active,
.vz-faq__p:active { color: var(--rojo-aa);
}

.vz-flecha:focus-visible .vz-ico { transform: translateX(6px);
}

a.co-tomo__in:focus-visible .co-tomo__img { box-shadow: 0 10px 30px rgba(74,52,35,.14);
}

.vz-coleccion:focus-visible { border-color: var(--tinta-3);
}

.vz-btn, .co-btn {
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.co-tomo__img { transition: box-shadow var(--dur-fast) var(--ease);
}

.vz-coleccion { transition: border-color var(--dur-fast) var(--ease);
}

.co-ico--mini { width: .95em; height: .95em; vertical-align: -.14em;
}

.co-proximo--acento .co-proximo__n,
.co-proximo--acento .co-proximo__t { color: rgba(255, 255, 255, .92);
}

.co-proximo--acento .co-margarita { --co-crema: rgba(255,255,255,.16); --co-linea: rgba(255,255,255,.85);
}

.co-t1__portada .co-proximo { height: 100%;
}

.co-doble {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

@media (min-width: 860px) {
    .co-doble { grid-template-columns: 1fr 1fr;
    }
}

.co-comoson__nota {
    margin-top: var(--sp-5);
    padding-left: var(--sp-4);
    border-left: 3px solid var(--co-ocre);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.co-faq { max-width: 62ch;
}

.co-faq__item { border-bottom: var(--bw) solid var(--papel-3);
}

.co-faq__p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--sans);
    font-size: var(--fs-md);
    color: var(--co-tinta);
}

.co-faq__p::-webkit-details-marker { display: none;
}

.co-faq__p::after {
    content: "+";
    flex: none;
    font-family: var(--mono);
    color: var(--co-linea);
}

.co-faq__item[open] .co-faq__p::after { content: "–";
}

.co-faq__r { margin: 0; padding: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.7; color: var(--co-tinta);
}

.co-hero--familia { max-width: none;
}

.co-hero--familia .co-hero__txt { max-width: 44rem;
}

.co-hero__obra { margin-top: var(--sp-6);
}

.co-hero__obra img, .co-hero__obra picture { display: block; width: 100%; height: auto;
}

@media (min-width: 900px) {
    .co-hero--familia {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--sp-8);
        align-items: center;
    }
    .co-hero__obra { margin-top: 0;
    }
    .co-hero__obra img { transform: scale(1.06); transform-origin: left center;
    }
}

.co-mockup { max-width: 340px;
}

.co-mockup img, .co-mockup picture { display: block; width: 100%; height: auto;
}

.co-tomo__img {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

a.co-tomo__in:hover .co-tomo__img { box-shadow: none;
}

.co-tomo__mockup { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%;
}

.co-tomo__mockup picture { display: block; width: 82%;
}

.co-tomo__mockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(74, 52, 35, .18)); transition: transform var(--dur-fast) var(--ease);
}

a.co-tomo__in:hover .co-tomo__mockup img { transform: translateY(-4px);
}

.co-tomo__img > img,
.co-tomo__img > picture img {
    border-radius: 6px;
    box-shadow: 0 12px 24px rgba(74, 52, 35, .16);
}

.co-proximo {
    background: transparent;
    border: 0;
    justify-content: center;
}

.co-proximo .co-margarita--grande { width: 84px; height: 84px;
}

.co-proximo--acento .co-margarita { --co-crema: transparent; --co-linea: var(--co-acento);
}

.co-proximo--acento .co-proximo__n { color: var(--co-linea);
}

.co-proximo--acento .co-proximo__t { color: var(--co-tinta);
}

.co-ficha__portada:has(.co-mockup) { background: transparent; overflow: visible;
}

.co-mockup img { filter: drop-shadow(0 16px 26px rgba(74, 52, 35, .2));
}

.co-tomo__img .co-proximo__n,
.co-tomo__img .co-proximo__t { display: none;
}

.vz-coleccion__tit { font-family: var(--sans);
}

.vz-coleccion__img { min-width: 0;
}

.vz-coleccion__img img,
.vz-coleccion__img picture { display: block; width: 100%; height: auto;
}

.vz-coleccion--img { padding-block: var(--sp-5);
}

@media (min-width: 720px) {
    .vz-coleccion--img { gap: var(--sp-6); padding: var(--sp-5) var(--sp-6);
    }
    .vz-coleccion__img { flex: 0 1 400px;
    }
    .vz-coleccion__cuerpo { flex: 1; min-width: 0;
    }
}

@media (max-width: 719.98px) {
    .vz-coleccion__img { max-width: 320px; margin-inline: auto;
    }
}

.vz-hero__libros { display: block; min-width: 0;
}

.vz-hero__libros img,
.vz-hero__libros picture { display: block; width: 100%; height: auto;
}

.vz-hero__libros img {
    filter: drop-shadow(0 12px 22px rgba(29, 29, 27, .14));
    transition: transform var(--dur-fast) var(--ease);
}

.vz-hero__libros:hover img { transform: translateY(-4px);
}

@media (min-width: 901px) {
    .p-home .vz-hero__top:has(.vz-hero__libros) {
        grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
        align-items: center;
        gap: var(--sp-7);
    }
}

@media (max-width: 900px) {
    .vz-hero__libros { max-width: 460px;
    }
}

.p-coleccion .co-hero { padding-block: clamp(24px, 3.2vw, 44px);
}

.p-coleccion .co-hero + .vz-seccion { padding-top: clamp(24px, 3.2vw, 44px);
}

@media (min-width: 900px) {
    .co-hero--familia { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
    }
    .co-hero__obra img { transform: none;
    }
}

.vz-hero__coleccion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    min-width: 0;
}

.vz-hero__coleccion .vz-hero__libros { width: 100%;
}

.vz-aviso .vz-form { display: flex; flex-direction: column; gap: var(--sp-4);
}

.co-precio__nota {
    display: block;
    margin-top: var(--sp-2);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
    color: var(--co-linea);
}

.vz-compra {
    max-width: 46ch;
    padding: var(--sp-5);
    border-radius: var(--r-0);
    background: var(--papel-2);
}

.vz-compra__precio {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--fs-lg);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vz-compra__nota {
    margin: var(--sp-2) 0 var(--sp-4);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
    color: var(--tinta-3);
}

.vz-compra__pie {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-xs);
    color: var(--tinta-3);
}

.vz-tecnica { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: var(--bw) solid var(--papel-3);
}

.vz-tecnica__t { margin: 0 0 var(--sp-5); font-size: var(--fs-lg);
}

.vz-tecnica__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-5);
    margin: 0;
    padding: var(--sp-5);
    border-radius: var(--r-0);
    background: var(--papel-2);
}

.vz-tecnica__it dt {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.vz-tecnica__it dd { margin: var(--sp-2) 0 0; font-size: var(--fs-sm);
}

.vz-compra,
.co-compra {
    display: grid;
    /* La primera columna se ajusta al PRECIO, que es corto. La nota del
       IVA va en su propia fila cruzando las dos: si comparte columna con
       el precio la ensancha —mide media línea— y empuja el botón fuera
       del bloque. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "precio boton"
        "nota   nota"
        "pie    pie";
    align-items: center;
    column-gap: var(--sp-5);
    row-gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    max-width: 52ch;
}

.vz-compra__precio, .co-precio { grid-area: precio; align-self: end;
}

.vz-compra__nota,   .co-precio__nota { grid-area: nota; align-self: start; margin: 0;
}

.vz-compra .vz-btn, .co-compra .co-btn { grid-area: boton; justify-self: start;
}

.vz-compra__pie,    .co-compra__pie,
.co-compra__aviso,  .co-compra__ok { grid-area: pie;
}

.vz-compra__pie,    .co-compra__pie {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-2xs);
    line-height: 1.5;
}

.co-precio { align-self: center;
}

.co-precio__nota { display: block;
}

.co-compra:has(.co-form),
.co-compra:has(.co-btn--pronto) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "precio" "pie";
}

@media (max-width: 620px) {
    .vz-compra, .co-compra {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "precio" "nota" "boton" "pie";
        row-gap: var(--sp-3);
    }
}

.vz-visor { display: flex; flex-direction: column; gap: var(--sp-4);
}

.vz-visor__grande { margin: 0;
}

.vz-minis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vz-mini {
    display: block;
    width: 62px;
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-0);
    overflow: hidden;
    background: var(--papel-1);
    transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    opacity: .72;
}

.vz-mini img,
.vz-mini picture { display: block; width: 100%; height: auto;
}

.vz-mini:hover { opacity: 1; border-color: var(--tinta-3);
}

.vz-mini.is-activa { opacity: 1; border-color: var(--rojo);
}

.vz-autoria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--tinta-2);
}

.vz-autoria > span + span::before {
    content: "·";
    margin-right: var(--sp-4);
    color: var(--tinta-3);
}

.vz-autoria strong { font-weight: var(--fw-medium); color: var(--tinta-0);
}

.vz-tira {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--sp-5);
    margin: 0;
    padding: var(--sp-5);
    border-radius: var(--r-0);
    background: var(--papel-2);
}

.vz-tira__it { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
}

.vz-tira__i { width: 26px; height: 26px; color: var(--tinta-3); flex: none;
}

.vz-tira__it dt {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.vz-tira__it dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium);
}

.vz-tecnica__rejilla--sec {
    margin-top: var(--sp-5);
    padding: 0;
    background: none;
    gap: var(--sp-4) var(--sp-6);
}

.p-proyecto .vz-wrap { max-width: 1600px;
}

@media (min-width: 1120px) {
    .p-proyecto .vz-ficha__top {
        /* La portada de un libro no necesita 300 px para leerse: con 240
           se distingue igual y el texto gana casi un tercio de línea. */
        grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(230px, 280px);
        column-gap: var(--sp-7);
        /* Las imágenes ocupan las tres filas; la ficha técnica cruza el
           centro y la derecha, pero NO pasa por debajo de la portada. */
        grid-template-areas:
            "obra cab     compra"
            "obra cuerpo  compra"
            "obra tecnica tecnica";
    }
}

.p-proyecto .vz-ficha__cuerpo,
.p-proyecto .vz-texto { max-width: 78ch;
}

.p-proyecto .vz-visor__grande img { max-height: 380px; width: auto; margin-inline: auto;
}

.p-proyecto .vz-mini { width: 52px;
}

.vz-ficha__cuerpo > .vz-tecnica,
.vz-ficha__cuerpo > .vz-tecnica__rejilla--sec { align-self: stretch; width: 100%;
}

.vz-ficha__cuerpo > .vz-mas { align-self: stretch;
}

.p-proyecto .vz-ficha__desc { font-size: 0.845rem; line-height: 1.62;
}

.p-proyecto .vz-lead { font-size: var(--fs-base);
}

.p-proyecto .vz-autoria { font-size: 0.845rem;
}

.p-proyecto .vz-tira__it dd { font-size: 0.845rem;
}

.p-proyecto .vz-tecnica__it dd { font-size: 0.845rem;
}

.p-proyecto .vz-compra__precio { font-size: var(--fs-base);
}

.p-proyecto .vz-compra__pie { font-size: 0.72rem;
}

.p-proyecto .vz-tecnica__t { font-size: var(--fs-md);
}

.vz-tecnica { grid-area: tecnica;
}

@media (max-width: 1119.98px) {
    .vz-ficha__top { grid-template-areas: "obra cab" "obra compra" "obra cuerpo" "tecnica tecnica";
    }
}

@media (max-width: 860px) {
    .vz-ficha__top { grid-template-areas: "cab" "obra" "compra" "cuerpo" "tecnica";
    }

    /* La ficha de tomo lleva las DOS clases a la vez, y cada una traia
       su corte: .co-ficha__top abria la segunda columna a 720 px y estas
       areas seguian apilando en una sola hasta 860. Entre esos dos
       numeros la rejilla tenia dos pistas y los cinco hijos aterrizaban
       todos en la primera: la portada, el precio y el texto entero
       encajonados en 340 px pegados a la izquierda con hasta 445 px de
       papel vacio al lado, o sea la mitad de la fila. Justo el ancho de
       un iPad vertical.

       Se alinean los cortes aqui, donde manda el apilado, en vez de
       tocar el 720 de .co-ficha__top: ese corte es correcto para las
       demas fichas de coleccion, que no llevan estas areas. */
    .co-ficha__top.vz-ficha__top { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1120px) {
    .p-proyecto .vz-ficha__compra { align-self: stretch;
    }
    .p-proyecto .vz-ficha__compra .vz-compra { height: 100%;
    }
}

.vz-ficha__compra .vz-compra {
    grid-template-areas: "formato" "precio" "nota" "boton";
    align-items: start;
    row-gap: var(--sp-2);
}

.vz-compra__formato {
    grid-area: formato;
    margin: 0 0 var(--sp-2);
    padding-bottom: var(--sp-3);
    border-bottom: var(--bw) solid var(--papel-3);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.vz-ficha__compra .vz-compra {
    align-content: start;
    row-gap: 0;
}

.vz-compra__formato { margin: 0 0 var(--sp-4);
}

.vz-compra__precio { font-size: var(--fs-xl); line-height: 1;
}

.p-proyecto .vz-compra__precio { font-size: var(--fs-xl);
}

.vz-compra__nota { margin: var(--sp-2) 0 var(--sp-5);
}

.vz-ficha__compra .vz-compra .vz-btn { margin: 0;
}

.p-proyecto .vz-ficha__cuerpo,
.p-proyecto .vz-ficha__cuerpo .vz-texto { max-width: none;
}

.p-proyecto .vz-ficha__desc {
    font-size: 0.81rem;
    line-height: 1.7;
    text-align: justify;
    /* Justificar sin partir palabras abre ríos de espacio en blanco en
       castellano, que tiene palabras largas. El <html lang="es"> es lo
       que permite al navegador partir donde toca. */
    hyphens: auto;
    -webkit-hyphens: auto;
}

.p-proyecto .vz-ficha__obra { position: static; top: auto;
}

.p-proyecto .vz-tecnica {
    margin-top: 0;
    padding-top: var(--sp-4);
}

.p-proyecto .vz-tecnica__t { margin-bottom: var(--sp-4);
}

.p-tomo .vz-wrap { max-width: 1600px;
}

.co-ficha__portada.vz-ficha__obra { grid-area: obra;
}

.p-tomo .vz-ficha__compra { grid-area: compra;
}

.p-tomo .vz-tecnica { grid-area: tecnica; margin-top: 0; padding-top: var(--sp-4); border-top: var(--bw) solid var(--papel-3);
}

.p-tomo .vz-ficha__compra .co-compra {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "precio" "nota" "boton" "pie";
    align-content: start;
    height: 100%;
    padding: var(--sp-4) var(--sp-5);
    max-width: none;
    border: var(--bw) solid var(--co-linea);
}

.p-tomo .co-precio { grid-area: precio; font-size: var(--fs-xl); line-height: 1; margin: 0;
}

.p-tomo .co-precio__nota { grid-area: nota; margin: var(--sp-2) 0 var(--sp-5);
}

.p-tomo .co-compra .co-btn { grid-area: boton; justify-self: stretch; justify-content: center; margin: 0;
}

.p-tomo .co-compra__pie,
.p-tomo .co-compra__ok,
.p-tomo .co-compra__aviso { grid-area: pie;
}

.p-tomo .vz-ficha__compra .co-compra:has(.co-form) {
    grid-template-areas: "formato" "precio" "nota" "pie" "boton";
}

.p-tomo .vz-ficha__cuerpo .co-texto { max-width: none;
}

.p-tomo .co-texto p { text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}

@media (min-width: 1120px) {
    .p-tomo .vz-ficha__top {
        grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(230px, 280px);
        column-gap: var(--sp-7);
        grid-template-areas:
            "obra cab     compra"
            "obra cuerpo  compra"
            "obra tecnica tecnica";
    }
}

.p-tomo .vz-ficha__obra { position: static; top: auto;
}

@media (min-width: 1120px) {
    .p-tomo .vz-ficha__compra { align-self: stretch;
    }
}

.p-tomo .co-texto p { font-size: 0.81rem; line-height: 1.7;
}

.p-tomo .co-lead { font-size: var(--fs-sm);
}

.p-tomo .co {
    --co-papel:  var(--papel-1);
    --co-crema:  var(--papel-2);
    --co-tinta:  var(--tinta-0);
    --co-linea:  var(--tinta-3);
    --co-ocre:   var(--papel-3);
    --co-r:      var(--r-0);
}

.p-tomo .co-h1,
.p-tomo .co-h2,
.p-tomo .co-ficha__it dt { font-family: var(--sans);
}

.p-tomo .co-eyebrow a { color: var(--tinta-2);
}

.p-proyecto .vz-ficha__top,
.p-tomo .vz-ficha__top { row-gap: var(--sp-4);
}

.p-proyecto .vz-ficha__cab,
.p-tomo .vz-ficha__cab { gap: var(--sp-3);
}

.p-tomo .co-h1 { margin: 0;
}

.p-tomo .co-tagline { margin: 0;
}

.p-tomo .co-subclaim { margin: 0;
}

.p-tomo .co-eyebrow { margin: 0 0 var(--sp-2);
}

.p-proyecto .vz-autoria { margin: 0;
}

.p-proyecto .vz-ficha__cab .vz-lead,
.p-tomo .vz-ficha__cab .co-lead { margin: 0;
}

.p-tomo .vz-ficha__cuerpo,
.p-proyecto .vz-ficha__cuerpo { gap: var(--sp-3);
}

.p-tomo .co-texto p + p,
.p-proyecto .vz-ficha__desc p + p { margin-top: var(--sp-3);
}

.p-tomo .co-texto > p:first-child,
.p-proyecto .vz-ficha__desc > p:first-child { margin-top: 0;
}

.p-proyecto .vz-tecnica,
.p-tomo .vz-tecnica {
    margin-top: 0;
    padding-top: var(--sp-4);
}

.p-proyecto .vz-tecnica__t,
.p-tomo .vz-tecnica .co-cab,
.p-tomo .vz-tecnica .co-h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-md);
}

.p-tomo .vz-tecnica .co-cab { padding: 0;
}

.p-proyecto .vz-tira,
.p-tomo .co-ficha {
    padding: var(--sp-4) var(--sp-5);
    gap: var(--sp-4) var(--sp-5);
}

.p-proyecto .vz-tira__i { width: 19px; height: 19px;
}

.p-proyecto .vz-tira__it { gap: var(--sp-1);
}

.p-proyecto .vz-tira__it dt,
.p-tomo .co-ficha__it dt { font-size: 0.62rem; letter-spacing: .1em;
}

.p-proyecto .vz-tira__it dd,
.p-tomo .co-ficha__it dd { font-size: 0.78rem; margin-top: 2px;
}

.vz-ficha__compra .vz-compra,
.p-tomo .vz-ficha__compra .co-compra {
    grid-template-areas: "formato" "precio" "nota" "estado" "boton" "pie";
    grid-template-rows: auto auto auto auto auto 1fr;
    align-content: stretch;
    row-gap: 0;
}

.vz-compra__estado { grid-area: estado;
}

.p-tomo .co-compra__pie { grid-area: pie;
}

.vz-compra__formato {
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: var(--bw) solid var(--papel-3);
}

.vz-compra__precio, .p-tomo .co-precio { margin: 0;
}

.vz-compra__nota, .p-tomo .co-precio__nota { margin: var(--sp-1) 0 0;
}

.vz-compra__estado {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--tinta-2);
}

.vz-compra__estado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2E7D4F;
    flex: none;
}

.vz-ficha__compra .vz-compra .vz-btn,
.p-tomo .vz-ficha__compra .co-compra .co-btn {
    justify-self: stretch;
    justify-content: center;
    margin: 0;
}

.vz-compra__pie, .p-tomo .co-compra__pie {
    align-self: end;
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-3);
    border-top: var(--bw) solid var(--papel-3);
    font-size: var(--fs-2xs);
    line-height: 1.5;
    color: var(--tinta-3);
}

.vz-ficha__compra .vz-compra,
.p-tomo .vz-ficha__compra .co-compra { grid-template-rows: auto auto auto 1fr auto auto;
}

.vz-compra__estado { align-self: start;
}

.vz-compra__pie, .p-tomo .co-compra__pie { align-self: auto;
}

.co-tomo__img:has(.co-proximo) {
    aspect-ratio: auto;
    min-height: 128px;
    padding: var(--sp-5) 0;
}

.co-proximo .co-margarita--grande { width: 64px; height: 64px;
}

.co-tomo__cuerpo { height: 100%;
}

.co-estado { margin-top: auto; align-self: flex-start;
}

.co-hero__venta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-sm);
    color: var(--co-tinta);
}

.co-hero__venta .vz-ico { width: 13px; height: 13px; color: var(--co-acento); flex: none;
}

.p-tomo .co-ficha--ancha { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.vz-news__texto,
.vz-news__form { min-width: 0;
}

.p-proyecto .vz-tecnica,
.p-tomo .vz-tecnica {
    padding-top: 0;
    border-top: 0;
}

.vz-tira--hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--sp-4) var(--sp-5);
    margin: var(--sp-7) 0 0;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-0);
    background: var(--papel-2);
}

.vz-tira--hero .vz-tira__it { align-items: flex-start; text-align: left;
}

.vz-tipos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}

@media (max-width: 899.98px) {
    .vz-tipos { grid-template-columns: 1fr;
    }
}

.vz-tipo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    border-radius: var(--r-0);
    background: var(--papel-2);
}

.vz-tipo__c {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: 0;
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.vz-tipo__c .vz-ico { width: 11px; height: 11px; color: var(--rojo);
}

.vz-tipo__t { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tr-tit);
}

.vz-tipo__d { margin: 0; font-size: var(--fs-sm); color: var(--tinta-3);
}

.vz-tipo .vz-lista li { font-size: var(--fs-sm);
}

.vz-tipo__ej {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: var(--bw) solid var(--papel-3);
    text-decoration: none;
    color: var(--tinta-0);
}

.vz-tipo__ej .vz-mono { font-size: var(--fs-2xs);
}

.vz-tipo__ej .vz-ico { width: 13px; height: 13px; flex: none; transition: transform var(--dur-fast) var(--ease);
}

.vz-tipo__ej:hover .vz-ico { transform: translateX(5px);
}

.vz-tipos__cierre {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-4);
}

.vz-tipos__cierre .vz-lead { margin: 0; max-width: 62ch;
}

.vz-tipo__no {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-2xs);
    color: var(--rojo);
}

.vz-porque {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-8);
    align-items: start;
}

.vz-porque--inv { grid-template-columns: 1fr 1.05fr;
}

@media (max-width: 899.98px) {
    .vz-porque, .vz-porque--inv { grid-template-columns: 1fr; gap: var(--sp-6);
    }
    .vz-porque--inv .vz-porque__prueba { order: 2;
    }
}

.vz-porque__t { margin: var(--sp-5) 0 0; font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tr-tit);
}

.vz-porque__p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--tinta-2);
}

.vz-porque .vz-lista--fina { margin-top: var(--sp-4);
}

.vz-lista--fina li { font-size: var(--fs-sm);
}

.vz-navegador {
    display: block;
    border: var(--bw) solid var(--papel-3);
    border-radius: var(--r-0);
    overflow: hidden;
    background: var(--papel-1);
    box-shadow: 0 14px 34px rgba(29, 29, 27, .10);
    text-decoration: none;
}

.vz-navegador__barra {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px var(--sp-4);
    background: var(--papel-2);
    border-bottom: var(--bw) solid var(--papel-3);
}

.vz-navegador__puntos,
.vz-navegador__puntos::before,
.vz-navegador__puntos::after { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3);
}

.vz-navegador__puntos { position: relative; flex: none;
}

.vz-navegador__puntos::before,
.vz-navegador__puntos::after { content: ""; position: absolute; top: 0;
}

.vz-navegador__puntos::before { left: 14px;
}

.vz-navegador__puntos::after { left: 28px;
}

.vz-navegador__puntos { margin-right: 28px;
}

.vz-navegador__url {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .02em;
    color: var(--tinta-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* Sin esto el flex item no encoge y la elipsis no llega a actuar. */
    flex: 1;
    min-width: 0;
}

.vz-navegador img { display: block; width: 100%; height: auto;
}

a.vz-navegador { transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

a.vz-navegador:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(29, 29, 27, .14);
}

.vz-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--sp-6);
}

@media (max-width: 899.98px) {
    .vz-showcase { grid-template-columns: 1fr;
    }
}

.vz-caso { display: flex; flex-direction: column; gap: var(--sp-4);
}

.vz-caso__pie { display: flex; flex-direction: column; gap: var(--sp-2);
}

.vz-caso__pie .vz-mono { font-size: var(--fs-2xs); color: var(--tinta-3);
}

.vz-caso__tit { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tr-tit);
}

.vz-caso__txt { margin: 0; font-size: var(--fs-sm); color: var(--tinta-3);
}

.vz-caso__enlaces { display: flex; align-items: center; gap: var(--sp-5); margin: var(--sp-2) 0 0; flex-wrap: wrap;
}

.vz-nota {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--tinta-3);
}

.vz-cta__nota { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--tinta-3);
}

.vz-prueba-viva {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    flex-wrap: wrap;
    max-width: none;
    margin: 0;
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-0);
    background: var(--papel-2);
}

.vz-prueba-viva .vz-flecha { white-space: nowrap;
}

@media (min-width: 901px) {
    .p-home .vz-hero__top:has(.vz-hero__libros) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    }
}

.vz-coleccion {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    border: 0;
    border-radius: 0;
}

.vz-coleccion:hover { border-color: transparent;
}

@media (min-width: 720px) {
    .vz-coleccion--img { padding-block: var(--sp-7) var(--sp-7);
    }
    .vz-coleccion__img {
        transform: translateY(-14%);
        filter: drop-shadow(0 18px 28px rgba(74, 52, 35, .18));
    }
}

.vz-seccion:has(> .vz-coleccion) { padding-bottom: 0;
}

.vz-cta__nota { color: rgba(255, 255, 255, .85);
}

.vz-paso { grid-template-columns: clamp(88px, 10vw, 140px) minmax(0, 1fr); align-items: start;
}

.vz-paso__n {
    font-family: var(--sans);
    font-weight: var(--fw-bold);
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: .85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--tinta-3);
    transition: -webkit-text-stroke-color .7s var(--ease);
}

.vz-reveal.is-visible .vz-paso__n { -webkit-text-stroke-color: var(--rojo);
}

@supports not (-webkit-text-stroke: 1px #000) {
    .vz-paso__n { color: var(--tinta-3);
    }
}

@media (max-width: 620px) {
    .vz-paso { grid-template-columns: 1fr;
    }
    .vz-paso__n { font-size: 2.75rem;
    }
}

.vz-serv, .vz-modo, .vz-tipo, .vz-pieza, .vz-tira--hero {
    position: relative;
    border-radius: 2px var(--r-0) 2px var(--r-0);
}

.vz-red--instagram { background: none;
}

.vz-marginalia {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-2);
}

.vz-marginalia li { padding-left: var(--sp-4); border-left: 2px solid var(--rojo);
}

.vz-marginalia b { display: block; color: var(--tinta-0); font-weight: var(--fw-medium);
}

.vz-dos-col {
    display: grid;
    grid-template-columns: minmax(0, 62ch) minmax(200px, 1fr);
    gap: var(--sp-8);
    align-items: start;
}

@media (max-width: 899.98px) {
    .vz-dos-col { grid-template-columns: 1fr; gap: var(--sp-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vz-paso__n, .vz-a, .vz-btn .vz-ico, a.vz-serv::after { transition: none;
    }
}

.vz-ficha__portada--web { background: none; padding: 0;
}

.vz-ficha__portada--web .vz-navegador img { aspect-ratio: auto; object-fit: contain; padding: 0;
}

.vz-compra--obra {
    grid-template-rows: auto auto auto auto !important;
    align-content: start;
}

.vz-compra--obra .vz-compra__estado { margin-bottom: var(--sp-4);
}

/* Tres columnas SOLO donde caben. Esta regla iba suelta y con
   !important, o sea a cualquier ancho: entre 861 y 1119 px la columna
   central quedaba en 94 px y el texto caia en una tira de una palabra
   por linea con 344 px de pagina vacia al lado, y a 320 px la ficha se
   salia 16 px de la pantalla sin barra de scroll que la rescatara,
   porque el cuerpo lleva overflow-x: clip. 1120 px es la unica franja
   en la que grid-template-areas usa de verdad tres columnas.

   El minmax lleva ahora min(100%, 320px): asi el minimo de la portada
   nunca puede ser mayor que el hueco disponible. Y el !important sobra
   -dos clases ya ganan por especificidad-, que ademas es lo que manda
   la cabecera de este fichero. */
@media (min-width: 1120px) {
    .p-proyecto--web .vz-ficha__top {
        grid-template-columns:
            minmax(min(100%, 320px), 1.05fr) minmax(0, 1fr) minmax(230px, 280px);
    }
}

.vz-ficha__compra .vz-compra--obra {
    grid-template-areas: "formato" "estado" "boton" !important;
    grid-template-rows: auto auto auto !important;
    align-content: start;
}

.vz-compra--obra .vz-compra__estado { margin: var(--sp-2) 0 var(--sp-5);
}

.vz-serv__tit,
.vz-proyecto__nom,
.vz-pieza__t,
.vz-tipo__t,
.vz-caso__tit {
    font-family: var(--sans);
    letter-spacing: var(--tr-tit);
}

.vz-navegador { box-shadow: none;
}

a.vz-navegador:hover { box-shadow: none;
}

@media (min-width: 720px) {
    .vz-hero__libros img {
        rotate: -1.6deg;
        filter: drop-shadow(0 18px 30px rgba(66, 20, 16, .16));
    }
    .vz-hero__libros:hover img { rotate: -0.4deg; transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    a.vz-serv, .vz-btn, .vz-proyecto, .vz-proyecto__img, .vz-proyecto__img img,
    .vz-hero__libros img, .vz-navegador { transition: none;
    }
    .vz-hero__libros img { rotate: 0deg;
    }
}

.p-styleguide .sg-bloque { border-top: 2px solid var(--tinta-0);
}

.p-styleguide h2 { margin-bottom: var(--sp-5);
}

.sg-tit {
    margin: var(--sp-7) 0 var(--sp-4);
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--tinta-3);
}

.sg-token {
    font-family: var(--mono);
    font-size: var(--fs-2xs);
    letter-spacing: .02em;
    color: var(--rojo-tex);
}

.sg-colores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--sp-5);
}

.sg-color { margin: 0;
}

.sg-color__muestra {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    border: var(--bw) solid var(--papel-3);
    font-family: var(--sans);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

.sg-color figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sp-3);
}

.sg-hex {
    font-family: var(--mono);
    font-size: var(--fs-xs);
    color: var(--tinta-0);
    font-variant-numeric: tabular-nums;
}

.sg-uso { font-size: var(--fs-xs); color: var(--tinta-3);
}

.sg-ratio {
    margin-top: var(--sp-1);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-0);
}

.sg-ratio__et { color: var(--tinta-3); letter-spacing: .04em;
}

.sg-escala { display: flex; flex-direction: column; gap: var(--sp-5);
}

.sg-escala__fila {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: baseline;
    padding-bottom: var(--sp-4);
    border-bottom: var(--bw) solid var(--papel-3);
}

.sg-escala__muestra {
    margin: 0;
    font-family: var(--sans);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tit);
    text-wrap: balance;
    /* Sin esto, --fs-display parte la rejilla en pantallas estrechas. */
    min-width: 0;
    overflow-wrap: break-word;
}

@media (max-width: 620px) {
    .sg-escala__fila { grid-template-columns: 1fr; gap: var(--sp-2);
    }
}

.sg-motion { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none;
}

.sg-motion li {
    display: grid;
    grid-template-columns: 160px 80px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: baseline;
    padding-bottom: var(--sp-3);
    border-bottom: var(--bw) solid var(--papel-3);
    font-size: var(--fs-sm);
}

.sg-motion b { font-family: var(--mono); font-variant-numeric: tabular-nums;
}

.sg-motion span { color: var(--tinta-3);
}

@media (max-width: 720px) {
    .sg-motion li { grid-template-columns: 1fr auto;
    }
    .sg-motion span { grid-column: 1 / -1;
    }
}

.vz-lead--dos-tonos { color: var(--tinta-0);
}

.vz-lead--dos-tonos .apagado { color: var(--tinta-3);
}

.sg-demo-fluido {
    display: grid;
    place-items: center;
    min-height: clamp(320px, 42vw, 520px);
    padding: clamp(24px, 4vw, 56px);
}

.sg-demo-fluido--claro { min-height: clamp(180px, 20vw, 260px); margin-top: var(--sp-5);
}

.sg-demo-cristal { max-width: 46ch;
}

.sg-demo-cristal .vz-eyebrow { color: rgba(239, 237, 230, .82);
}

.sg-demo-cristal .vz-eyebrow::before,
.sg-demo-cristal .vz-eyebrow::after { color: var(--papel-1);
}

.sg-demo-cristal__t {
    margin: var(--sp-3) 0 var(--sp-4);
    font-family: var(--sans);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tit);
    color: rgba(239, 237, 230, .64);
    text-wrap: balance;
}

.sg-demo-cristal__t strong { color: var(--papel-1); font-weight: inherit;
}

.sg-demo-cristal__p { margin: 0; font-size: var(--fs-sm); color: rgba(239, 237, 230, .82);
}

.vz-hero__marca { letter-spacing: .16em;
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    padding-block: clamp(48px, 7vw, 104px);
    margin-bottom: clamp(40px, 5vw, 72px);
    border-radius: 0 0 var(--r-media) var(--r-media);
    background-color: var(--tinta-0);
    color: var(--papel-1);
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type,
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type,
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type,
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type,
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type,
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type,
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type,
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type { padding-top: 0;
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before,
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before,
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before,
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before,
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before,
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before,
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before,
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -2;
    background:
        radial-gradient(40% 60% at 14% 30%, var(--rojo) 0%, transparent 52%),
        radial-gradient(46% 56% at 86% 24%, var(--petroleo) 0%, transparent 50%),
        radial-gradient(52% 64% at 58% 88%, var(--rojo-tex) 0%, transparent 52%),
        radial-gradient(70% 76% at 50% 46%, var(--tinta-0) 0%, transparent 74%);
    filter: blur(72px) saturate(1.15);
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after,
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after,
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after,
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after,
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after,
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after,
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after,
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .14;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)),
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)),
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)),
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)),
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)),
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)),
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)),
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2, h3, p, li, dt, dd, span, b, strong, a:not(.vz-btn)) {
    /* Era rgba(239, 237, 230, .70), escrito a mano en el bloque
       portado y fuera de todo token. Al pasar la banda a papel dejaba
       el titular en 1,00:1, invisible. Ahora bebe del contrato, que es
       lo que existe justo para esto.
       Y los botones quedan FUERA con a:not(.vz-btn): esta regla pinta
       todos los descendientes, asi que al titular en negro le imponia
       tambien el negro a la etiqueta del boton oscuro, que ya tiene
       fondo negro. Salia un rectangulo negro macizo, sin texto. */
    color: var(--tit-suave);
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong,
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong,
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong,
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong,
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong,
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong,
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong,
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) :is(h1, h2) strong {
    color: var(--tit-fuerte);
    background: none;
    padding-bottom: 0;
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1,
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1,
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1,
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1,
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1,
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1,
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1,
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) h1 {
    font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
    line-height: var(--lh-hero);
}

.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after,
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after,
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after,
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after,
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after,
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after,
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after,
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::before,
.p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) .vz-eyebrow::after {
    /* Los corchetes de la antefirma: al contrato, como todo lo demas.
       En papel-1 sobre banda clara eran invisibles. */
    color: var(--corchete);
}

@media (max-width: 760px) {
    .p-servicios main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
    .p-servicio  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
    .p-sello     main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
    .p-proyectos main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
    .p-faq       main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
    .p-nosotros  main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
    .p-coleccion main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top),
    .p-novedades main > .vz-wrap > .vz-seccion:first-of-type > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) { border-radius: 0;
    }
}


/* =================================================================
   9 . LANDING LIMPIA
   La referencia es una portada de una sola pieza: logotipo suelto a la
   izquierda, navegacion sin barra ni recuadros, todo transparente, y
   por detras manchas de color flotando y muy desenfocadas.

   NOTA, porque es contraintuitivo: las manchas radiales desenfocadas
   son exactamente la tecnica que aqui se rechazo seis veces. Lo que
   fallaba no era la tecnica, era el SUELO. Sobre casi negro, desenfocar
   rojo y verde azulado da barro. Sobre blanco y al 13-20 % de alfa, da
   color flotando. Misma herramienta, resultado opuesto.
   ================================================================= */

/* --- La cabecera se disuelve y se sale del flujo ------------------
   fixed y no sticky: en sticky la cabecera OCUPA sitio, asi que el
   hero empezaba 64 px por debajo y quedaba una franja del color del
   cuerpo encima. Sacandola del flujo, el hero arranca en lo alto del
   visor y el logotipo flota sobre las manchas, que es lo pedido.
   La contrapartida es que las demas paginas tienen que recuperar ese
   alto, y lo hace la regla de abajo. */
.vz-header {
    position: fixed;
    inset: 0 0 auto 0;
    background-color: transparent;
    border-bottom-color: transparent;
}

/* Solo las paginas que NO son la portada recuperan el alto: en la home
   el hero tiene que subir hasta el borde. */
body:not(.p-home) main { padding-block-start: var(--vz-cab-h, 64px); }
/* Al hacer scroll TAMPOCO aparece nada. El estado is-fijo traia fondo
   al 88 % y desenfoque, y eso es exactamente lo que devolvia la barra
   en cuanto te movias: la cabecera solo parecia integrada mientras la
   pagina estaba arriba del todo. Ahora no hay barra en ningun momento.
   Lo que evita que el texto del menu se cruce con el contenido no es
   un fondo, es el velo de abajo. */
.vz-header {
    background-color: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Al bajar SI aparece algo, pero cristal, no barra: nada de fondo
   opaco ni filete. Blur y saturate juntos -sin saturate el desenfoque
   promedia el color de las manchas y sale gris muerto-, un filo de luz
   de 1 px por dentro que simula la refraccion del canto, y punto. El
   tinte se queda bajo a proposito: tiene que dejar ver las manchas
   pasando por debajo, que es de lo que va la portada. */
.vz-header.is-fijo {
    background-color: var(--papel-1-46);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
            backdrop-filter: blur(16px) saturate(1.6);
    border-bottom-color: transparent;
    box-shadow: inset 0 1px 0 var(--papel-1-55);
}

/* Sin backdrop-filter el tinte al 46 % no garantiza contraste para el
   menu: se cierra en solido, que es feo pero legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vz-header.is-fijo { background-color: var(--papel-1); }
}

/* --- SIN VELO ------------------------------------------------------
   Aqui vivia una franja fija en lo alto del visor que iba del color de
   la pagina a transparente, para que el contenido se desvaneciera al
   entrar bajo el logotipo. Se quita: cortaba el campo de manchas justo
   donde tiene que seguir, y dejaba una banda clara arriba que se leia
   como un borde.

   Lo que garantiza ahora la legibilidad del menu es el cristal del
   estado is-fijo. Arriba del todo el menu cae sobre las manchas, que
   son claras por construccion -alfas bajas sobre papel-, y la tinta de
   los enlaces se mide contra eso, no contra un velo. */
@media (forced-colors: active) {
    .vz-header, .vz-header.is-fijo { background-color: Canvas; }
}

/* El menu pierde la caja. Era un grupo con fondo, filete y separadores
   entre celdas: eso ES una barra de navegacion, y el encargo es que no
   la haya. Quedan los enlaces sueltos. */
.vz-nav__list {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    gap: var(--sp-2);
}
.vz-nav__list > li + li { border-left: 0; border-top: 0; }
.vz-nav__link { padding-inline: var(--sp-3); }

/* El icono de Instagram y el selector de idioma iban en cuadros con
   filete. Dos recuadros mas en una cabecera que se quiere sin barra
   son dos recuadros de mas: se quedan como simbolo y letra sueltos. */
.vz-nav__ig,
.vz-idioma {
    background-color: transparent;
    border-color: transparent;
}
.vz-nav__ig:hover,
.vz-idioma:hover { border-color: var(--papel-3); }

/* --- El hero: papel blanco y color flotando ----------------------- */
.vz-hero__fluido {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Degradado lineal horizontal de cinco pasos, el suelo de las
       laminas. Sustituye al humo blanco liso y al dither: el dither
       existia para romper el banding de las manchas del lienzo, y sin
       lienzo no hay banding que romper. */
    background-color: var(--hg1);
    background-image: linear-gradient(90deg,
        var(--hg1) 0%, var(--hg2) 26%, var(--hg3) 52%, var(--hg4) 78%, var(--hg5) 100%);
    background-size: 100% 100%;
    /* Explicitos a proposito: esta regla redeclara la lista de fondos
       entera, y una posicion o un repeat sobrantes de otra capa dejan
       franjas del background-color al descubierto. */
    background-position: 0 0;
    background-repeat: no-repeat;

    /* Pantalla completa al cargar. dvh y no vh: en movil el vh de las
       barras del navegador se mide con la barra RETRAIDA, asi que con
       100vh el hero se pasa de largo y empuja el contenido. dvh usa el
       alto que hay de verdad en cada momento.
       La cabecera va fixed y encima, o sea que no resta: el hero
       arranca en el pixel 0. */
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    align-content: center;
    padding-block: clamp(88px, 12vh, 148px) clamp(72px, 10vh, 132px);
}

/* --- EL FONDO DEL HERO: LAMINAS DE CRISTAL -------------------------
   Suelo: un degradado lineal horizontal de cinco pasos, muy lavado.
   Encima, laminas de cristal esmerilado apiladas en diagonal.

   Sustituye al lienzo WebGL de nubes que habia aqui: el encargo pide
   un degradado liso como capa base, y unas nubes turbulentas y unas
   laminas geometricas se estorban entre si. El shader sigue en
   assets/js/nubes.js por si hay que volver. */
.vz-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* --- LA MAREA: el color se mueve despacio -------------------------
   Tres manchas muy anchas de los MISMOS tres tonos del degradado base
   (hg1 crema, hg3 lila, hg5 azul), a alfa alta pero sin color nuevo:
   lo que se mueve es el reparto, no la paleta. Con el degradado quieto
   detras, la portada parecia una captura; con esto respira.

   inset negativo del 22 % para que el recorrido de la traslacion no
   destape nunca un canto, y transform en vez de background-position
   porque solo el primero se compone en la GPU: animar la posicion del
   fondo repinta el hero entero en cada fotograma.

   Los colores van en rgb() literal y no en color-mix(): dentro de una
   lista de background-image, un color que el motor no entienda tira la
   DECLARACION COMPLETA, no solo esa parada. */
.vz-fondo::before {
    content: "";
    position: absolute;
    inset: -22%;
    background-image:
        radial-gradient(42% 50% at 22% 26%, rgb(253 244 231 / .92), rgb(253 244 231 / 0) 68%),
        radial-gradient(46% 54% at 80% 20%, rgb(207 224 248 / .88), rgb(207 224 248 / 0) 70%),
        radial-gradient(40% 48% at 58% 88%, rgb(228 227 245 / .82), rgb(228 227 245 / 0) 68%);
    animation: vz-marea 40s var(--ease) infinite;
    will-change: transform;
}

/* Ciclo cerrado -0 % y 100 % identicos- y no 'alternate': al invertir
   el sentido se nota un frenazo, y aqui la gracia esta en que no se
   pille nunca el bucle. */
@keyframes vz-marea {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    34%      { transform: translate3d(4.6%, -3.4%, 0) scale(1.10); }
    67%      { transform: translate3d(-4.1%, 2.7%, 0) scale(1.04); }
}

/* --- EL PIE DEL HERO SE FUNDE CON LA PAGINA -----------------------
   El degradado moria de golpe contra el cuerpo (papel-1) y dejaba una
   linea horizontal a lo ancho justo donde acaba la portada. Este velo
   lleva el ultimo tercio del hero hasta ese mismo papel, asi que el
   corte deja de existir: no hay dos colores que se toquen, hay uno que
   se convierte en el otro.

   Va en el ::after de .vz-fondo y no en el fondo del hero porque tiene
   que pintar POR ENCIMA de las laminas: si no, los glifos seguirian
   recortandose contra el papel y el canto se leeria igual. */
.vz-fondo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    /* Un 15 % y no un 32 %. Con el velo a un tercio del hero, en movil
       empezaba a lavar el color 270 px antes del final, o sea POR ENCIMA
       de los botones: el degradado moria a media altura y lo que quedaba
       debajo era papel liso. Sumado a los 64 px del bloque muerto que
       habia detras, el pie del hero era un claro de mas de 300 px que se
       leia como un hueco, no como aire. Ahora el color llega vivo casi
       al borde y solo se funde el ultimo tramo, que es lo unico que hacia
       falta para que no hubiera corte. */
    block-size: 15%;
    background-image: linear-gradient(180deg,
        rgb(245 243 244 / 0) 0%,
        rgb(245 243 244 / .28) 55%,
        rgb(245 243 244 / .78) 85%,
        var(--papel-1) 100%);
}

/* El SVG lleva width y height en el marcado y aqui se estira: asi
   reserva su caja en el primer pintado y no hay salto de layout. */
.vz-laminas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Los modos de mezcla son lo que hace que el solape de dos laminas
   genere un tono intermedio en vez de un gris apilado. */
/* El relleno lo decide cada copia: unas aclaran y otras hunden. Sobre
   un fondo tan claro, seis glifos blancos no se distinguirian; con dos
   tintes el plano se lee tanto en las zonas claras como en las
   oscuras, que es lo mismo que hace la referencia sobre su fondo. */
.vz-lam__p       { fill: #fff; }
.vz-lam__p--tinta { fill: #8E96AE; }
/* Aqui vivia .vz-lam__p--sl, que ponia mix-blend-mode: soft-light en dos
   de los planos. Fuera, y la razon esta medida: una capa con modo de
   mezcla obliga a recomponer el lienzo entero en cada fotograma, y como
   debajo hay una malla de color que no para de moverse, ese "cada
   fotograma" es siempre. Con la onda corriendo, la portada iba a 39
   fotogramas por segundo con la mezcla y a 55 sin ella; con la onda
   ademas recortada a dos planos, a 91. Sin el modo de mezcla las marcas
   blancas quedan un punto mas planas y bastante mas nitidas, que sobre
   papel claro es mejor negocio que un degradado suave a 39 fps. */

/* El acento de la casa, y solo aqui: un plano del abanico va en rojo de
   texto a alfa baja. Es lo unico que impide que la portada se lea como
   una marca gris cualquiera, y sigue siendo acento -no hay ningun otro
   rojo grande en el hero-, que es la regla que se puso. */
.vz-lam__p--rojo { fill: #A4161A; }

/* El plano de linea: las mismas marcas, sin relleno y dibujadas a
   filete. Sobre las masas blandas de los otros planos devuelve el canto
   de cada vertebra, que era lo que se perdia al solaparse.

   fill, stroke y stroke-width se ponen en el <g> porque son propiedades
   HEREDADAS: el contenido de <use> vive en un arbol de sombra al que no
   llega ningun selector, solo la herencia. Por lo mismo no se puede usar
   vector-effect, que no hereda; el filete escala con la marca, y eso
   viene bien: las de delante salen mas gruesas. */
.vz-lam__p--linea {
    fill: none;
    stroke: #6E7896;
    stroke-width: 1.1;
    stroke-linejoin: round;
}

/* Entrada escalonada. El retardo lo pone --i, que escribe el marcado.
   Sin JS las laminas se quedan en su estado final, que es lo correcto:
   una decoracion no puede depender de que cargue un script. */
.vz-lam { opacity: 1; translate: none; }
.js .vz-lam {
    opacity: 0;
    /* translate y no transform: transform lo ocupa la deriva de aqui
       abajo, y dos animaciones peleando por la misma propiedad se
       anulan. Con las propiedades individuales cada cosa tiene su
       carril y el navegador las compone: translate, luego rotate,
       luego scale y por ultimo transform. */
    translate: 30px 0;
    transition:
        opacity 620ms var(--ease),
        translate 620ms var(--ease);
    transition-delay: calc(var(--i) * 60ms);
}
.js .vz-lam.is-dentro { opacity: 1; translate: none; }

/* --- LA DERIVA: cada lamina va a lo suyo --------------------------
   Un recorrido corto y un giro de menos de un grado, en bucle cerrado.
   La gracia esta en que ninguna lamina comparte periodo con otra: la
   duracion crece con --i y el retardo NEGATIVO las arranca ya metidas
   en distinto punto del ciclo, asi que el conjunto no vuelve a
   coincidir consigo mismo en varios minutos y nunca se lee como un
   latido.

   transform-box: view-box para que el giro sea alrededor del centro
   del lienzo y no del origen del SVG, que esta fuera de pantalla y
   convertiria 0,8 grados en un salto de cien pixeles. */
.vz-lam {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: vz-deriva calc(29s + var(--i, 0) * 5s) var(--ease)
               calc(var(--i, 0) * -5s) infinite;
}

@keyframes vz-deriva {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(-44px, 25px) rotate(1.1deg); }
    66%      { transform: translate(28px, -19px) rotate(-0.8deg); }
}

/* --- LA ONDA: la espina serpentea --------------------------------
   La deriva de arriba mueve el plano ENTERO, que es profundidad pero
   no es vida: la espina sigue siendo rigida. Esto mueve cada vertebra
   por separado.

   Va en la propiedad translate y no en transform porque cada <use>
   lleva su colocacion -sitio, giro y escala- en el atributo transform
   del marcado, y la propiedad CSS del mismo nombre lo sustituiria
   entero: el glifo se iria al origen del SVG a escala 1. Las
   propiedades individuales se COMPONEN con el atributo en vez de
   pisarlo, y ademas dejan transform libre para la deriva del plano de
   arriba. Cada cosa en su carril.

   El recorrido y el periodo los pone el marcado en --ondax, --onday y
   --per, porque dependen del eje de cada espina: la direccion es la
   perpendicular a su recorrido, y eso solo se sabe donde se genera la
   geometria. El desfase de cada pieza viaja en --r. */
@keyframes vz-onda {
    0%, 100% { translate: 0 0; }
    50%      { translate: var(--ondax, 0px) var(--onday, 0px); }
}

/* El nombre de la animacion viaja en --anim, y no es un capricho: la
   onda mueve CADA pieza, y en SVG eso no se compone en la GPU como en
   HTML -no hay una capa por elemento-, sino que obliga a rasterizar el
   lienzo entero en cada fotograma. Medido: con las cinco espinas
   ondeando, 42 fotogramas por segundo; con las tres que de verdad se
   ven, 65. El velo grande y el plano rojo son tan tenues que su onda no
   se apreciaba, asi que pagaban sin dar nada, y se quedan quietos con
   la deriva de su plano. */
.vz-laminas use {
    animation: var(--anim, none) var(--per, 6s) var(--ease) var(--r, 0s) infinite;
}

@media (prefers-reduced-motion: reduce) {
    /* Estado final directo y todo quieto. El parallax ni siquiera
       arranca su bucle: de eso se encarga laminas.js. */
    .js .vz-lam,
    .js .vz-lam.is-dentro { opacity: 1; translate: none; transition: none; }
    .vz-lam { animation: none; }
    .vz-laminas use { animation: none; translate: none; }
    .vz-fondo::before { animation: none; }
}

@media (forced-colors: active) {
    .vz-fondo { display: none; }
}


/* El ::after se queda apagado: el fondo lo pinta el lienzo. */
.vz-hero__fluido.vz-fluido::after { display: none; }

@media (forced-colors: active) {
    .vz-hero__fluido.vz-fluido::before { display: none; }
}

/* El titular vuelve de la caja alta del cartel a caja normal: con las
   manchas detras, las mayusculas a sombra dura eran dos ideas fuertes
   peleandose. Aqui manda el color flotando. */
.vz-hero__fluido > .vz-hero__panel h1 {
    text-transform: none;
    text-shadow: none;
    letter-spacing: -0.03em;
    font-size: clamp(2.25rem, 1rem + 4.2vw, 4.25rem);
    line-height: 1.03;
}
.vz-hero__fluido > .vz-hero__panel h1::after { content: none; }

@media (prefers-reduced-motion: reduce) {
    .vz-hero__fluido.vz-fluido::before { animation: none; }
}
@media (forced-colors: active) {
    .vz-hero__fluido.vz-fluido::before { display: none; }
    .vz-header, .vz-header.is-fijo { background-color: Canvas; }
}


/* =================================================================
   10 . LAS INTERIORES, AL MISMO AMBIENTE
   La portada paso a claro con manchas de color y las interiores se
   quedaron con su banda de capitulo en tinta-0: una franja casi negra
   arriba de cada pagina, que era exactamente el "parche pegado" que
   habia que quitar. Aqui la banda hereda el mismo ambiente que el
   hero, con el mismo frio a la izquierda y calido a la derecha.

   Va al final del fichero a proposito: tiene que ganar por orden a la
   banda oscura de la seccion 6, que declara el contrato de suelo
   oscuro y no se puede tocar ahi sin romper otras superficies que lo
   comparten.
   ================================================================= */

:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) {
    /* El contrato, dado la vuelta: titular, corchete y filete pasan a
       tinta sobre papel. Sin esto el titular se queda en humo blanco
       sobre humo blanco, o sea invisible. */
    --tit-fuerte: var(--tinta-0);
    --tit-suave:  var(--tinta-0);
    --corchete:   var(--rojo-tex);
    --linea:      var(--papel-3);
    --btn-linea-filete: var(--tinta-2);
    --btn-linea-txt:    var(--tinta-0);
    --btn-linea-fondo:  transparent;
    --btn-oscuro-fondo: var(--tinta-0);
    --btn-oscuro-txt:   var(--papel-0);
    --btn-oscuro-hover: var(--tinta-1);
    --arrow-tinte: var(--tinta-0);
    --arrow-fondo: transparent;
    --esquina-tinte: var(--tinta-3);

    background-color: var(--papel-1);
    background-image: var(--dither);
    background-size: 140px 140px;
    color: var(--tinta-2);
    /* El filo de luz de 1 px era para separar una banda oscura de la
       cabecera. Sobre papel no separa nada y solo ensucia. */
    box-shadow: none;
}

/* Las manchas de la banda, al ambiente. Antes eran rojo, petroleo y
   tinta a opacidad casi plena sobre casi negro; ahora son las mismas
   cuatro del hero, en multiply sobre papel. Sin animacion: aqui la
   banda es corta y un fondo moviendose bajo un titular de pagina
   distrae; el movimiento se queda en la portada, que es donde vale. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before {
    inset: -30%;
    mix-blend-mode: multiply;
    background:
        radial-gradient(30% 46% at 14% 30%, var(--amb-azul) 0, transparent 52%),
        radial-gradient(26% 40% at 40% 16%, var(--amb-lavanda) 0, transparent 52%),
        radial-gradient(32% 48% at 72% 62%, var(--amb-melocoton) 0, transparent 52%),
        radial-gradient(28% 42% at 92% 24%, var(--amb-ambar) 0, transparent 52%),
        radial-gradient(22% 34% at 58% 88%, var(--velo-rojo) 0, transparent 52%);
    filter: blur(38px);
}

/* El grano de la banda sobraba: era para dar textura sobre suelo
   oscuro y sobre papel solo ensucia. El dither del fondo ya hace el
   trabajo de romper el banding. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::after {
    display: none;
}

@media (forced-colors: active) {
    :is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
    main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)::before {
        display: none;
    }
}


/* Los dos ultimos restos del suelo oscuro en la banda interior. No
   pasaban por el contrato: escribian --papel-1 directamente, asi que
   al volver la banda a papel quedaban humo blanco sobre humo blanco,
   es decir 1,00:1, texto invisible. Es exactamente el fallo que la
   nota del contrato de la seccion 1.3 avisa que vuelve entero en
   cuanto una capa escribe color a mano. */
:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top)
:is(.vz-lead, .vz-texto, .vz-texto p, .vz-mono, .vz-eyebrow, .vz-form__legal, label) {
    color: var(--tinta-2);
}

:is(.p-servicios, .p-servicio, .p-sello, .p-proyectos, .p-nosotros, .p-faq, .p-novedades, .p-legal)
main > .vz-wrap > .vz-seccion:first-child > :is(.vz-cab, .vz-cab__tit, .vz-hero__top) a:not(.vz-btn) {
    color: var(--rojo-tex);
    text-decoration-color: var(--rojo-tex);
}


/* --- La barra, al reparto de la referencia ------------------------
   Logotipo a la izquierda, los enlaces repartidos ocupando el centro
   con aire entre ellos, y las acciones pegadas al extremo derecho.
   Antes iba todo apinado a la derecha y la barra se leia como un
   bloque; separandolo, la cabecera respira el ancho entero, que es lo
   que hace que no parezca una barra. */
@media (min-width: 62rem) {
    .vz-header__in > .vz-nav { margin-inline: auto; }
    .vz-nav__list { gap: var(--sp-4); }
    .vz-nav__link { padding-inline: var(--sp-2); }
}