/* =================================================================
   VECTOR ZERO ENTERTAINMENT
   Un solo fichero CSS. Sin preprocesador, sin framework, sin build.

    1 · Tokens
    2 · Fuentes
    3 · Reset
    4 · Base
    5 · Utilidades
    6 · Chevron
    7 · Botones
    8 · Cabecera
    9 · Hero
   10 · Cifras
   11 · Servicios (bento)
   12 · Obras
   13 · Franja del sello
   14 · Contacto
   15 · Pie
   16 · Páginas sueltas
   17 · Movimiento
   ================================================================= */


/* =================================================================
   1 · TOKENS — nada de valores sueltos fuera de aquí
   ================================================================= */
:root {

    /* --- Color ---------------------------------------------------- */
    --vz-bg:       #FFFFFF;   /* fondo continuo de toda la web */
    --vz-soft:     #F4F4F1;   /* tarjetas, pastillas y huecos de imagen */
    --vz-soft-2:   #EAEAE6;   /* hover de tarjeta */
    --vz-border:   #E4E3E0;
    --vz-ink:      #1D1D1B;   /* negro de marca, muestreado del logotipo */
    --vz-ink-2:    #44443F;   /* texto de apoyo */
    --vz-muted:    #78766F;   /* metadatos, etiquetas */
    --vz-dark:     #161614;   /* franja del sello */
    --vz-red:      #D80F16;   /* rojo de marca, muestreado del logotipo */
    --vz-red-hi:   #B60C12;
    --vz-red-soft: #FCEBEC;   /* fondo suave de acento */
    --vz-focus:    #1D1D1B;

    /* --- Degradados de marca --------------------------------------- */
    /* El rojo entra siempre así: nunca como fondo plano de un bloque
       grande, siempre con recorrido de naranja a granate. */
    --grad-red:    linear-gradient(135deg, #FF5233 0%, #D80F16 52%, #94070D 100%);
    --grad-red-hi: linear-gradient(135deg, #FF6A4C 0%, #E51820 52%, #A80A10 100%);
    --grad-dark:   linear-gradient(140deg, #2B1614 0%, #161614 58%);
    /* Velo cálido del hero: da color sin pintar nada de rojo */
    --grad-velo:   radial-gradient(900px 520px at 86% -8%, #FFE0D8 0%, rgba(255,224,216,0) 66%),
                   radial-gradient(600px 400px at 8% 4%, #FFEFEA 0%, rgba(255,239,234,0) 60%);

    /* --- Tipografía ----------------------------------------------- */
    --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ff-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
    --ff-mark: "Orbitron", "Arial Narrow", sans-serif;   /* solo el logotipo */

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

    /* --- Escala tipográfica (fluida, base 16px) -------------------- */
    --fs-2xs:  0.6875rem;
    --fs-xs:   0.8125rem;
    --fs-sm:   0.9375rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --fs-xl:   clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
    --fs-2xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
    --fs-hero: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);

    --lh-hero: 1.06;
    --lh-snug: 1.2;
    --lh-body: 1.6;
    --lh-mono: 1.4;

    --tr-hero: -0.035em;   /* el titular va muy justo */
    --tr-tit:  -0.02em;
    --tr-mono:  0.08em;

    /* --- Espaciado ------------------------------------------------- */
    --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:     1280px;
    --w-text:    62ch;
    --gutter:    clamp(16px, 3.5vw, 32px);
    --panel-pad: clamp(24px, 4vw, 64px);

    /* --- Formas — aquí está casi todo el carácter ------------------- */
    --r-panel: clamp(24px, 3vw, 40px);
    --r-card:  clamp(18px, 2vw, 26px);
    --r-sm:    14px;
    --r-pill:  999px;
    --bw:      1px;

    /* --- Movimiento ------------------------------------------------- */
    --t:    200ms;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* =================================================================
   2 · FUENTES — autoalojadas en /assets/fonts, subconjunto latin
   ================================================================= */
@font-face { font-family:"Inter"; src:url("../fonts/inter-300.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-700.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/ibmplexmono-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
/* Orbitron: la tipografía del logotipo. No se usa en ningún otro sitio. */
@font-face { font-family:"Orbitron"; src:url("../fonts/orbitron-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Orbitron"; src:url("../fonts/orbitron-900.woff2") format("woff2");
             font-weight:900; font-style:normal; font-display:swap; }


/* =================================================================
   3 · RESET
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    position: relative;
    min-height: 100vh;
    background: var(--vz-bg);
    color: var(--vz-ink);
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Velo cálido detrás de la parte alta de la página. Va en un
   pseudoelemento para que no lo corte el ancho del contenedor. */
body::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 860px;
    background: var(--grad-velo);
    pointer-events: none;
    z-index: -1;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }


/* =================================================================
   4 · BASE
   ================================================================= */
h1, h2, h3, h4 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tit);
    text-wrap: balance;
}

/* Titulares a dos pesos: el fino abre y la negrita remata.
   Es el gesto tipográfico de toda la web. */
h1 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-hero);
    letter-spacing: var(--tr-hero);
}
h1 strong, h2 strong { font-weight: var(--fw-bold); }

h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-light);
    letter-spacing: var(--tr-hero);
}
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { text-wrap: pretty; }
/* Separación entre párrafos solo dentro de texto corrido: si se deja
   global, empuja hacia abajo los <p> que son celdas de una rejilla. */
.vz-texto p + p, .vz-hero__aside p + p { margin-top: var(--sp-4); }
strong { font-weight: var(--fw-medium); }

.vz-a {
    color: var(--vz-ink);
    box-shadow: inset 0 -1px 0 var(--vz-border);
    transition: color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.vz-a:hover { color: var(--vz-red); box-shadow: inset 0 -1px 0 var(--vz-red); }

:focus-visible { outline: 2px solid var(--vz-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.vz-skip {
    position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-pill);
    background: var(--vz-dark); color: #FFF;
    font-size: var(--fs-sm);
    transition: top var(--t) var(--ease);
}
.vz-skip:focus { top: var(--sp-4); }

.vz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* =================================================================
   5 · UTILIDADES
   ================================================================= */
.vz-wrap {
    width: 100%;
    max-width: var(--w-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Nada de tarjetas de fondo: el contenido va directo sobre el fondo y
   el ritmo lo marcan el espaciado y una línea de pelo entre secciones. */
.vz-seccion { padding-block: clamp(48px, 6.5vw, 96px); }
.vz-seccion + .vz-seccion { border-top: var(--bw) solid var(--vz-border); }

/* En la home, el hero no lleva raya ni hueco grande debajo: la
   ilustración muere justo ahí y una línea gris cruzándola la corta en
   seco. El resto de secciones conservan su separador. */
.p-home .vz-hero { padding-bottom: clamp(16px, 2vw, 28px); }
.p-home .vz-hero + .vz-seccion {
    border-top: 0;
    padding-top: clamp(16px, 2.4vw, 36px);
}
/* La primera sección va pegada a la cabecera: con el padding completo
   se abría un hueco enorme entre el menú y el titular. */
main > .vz-wrap > .vz-seccion:first-child { padding-top: clamp(20px, 2.2vw, 34px); }
.vz-seccion--sm { padding-block: clamp(32px, 4vw, 56px); }

/* Bloque con forma: solo para lo que ES contenido, no para enmarcar */
.vz-bloque { border-radius: var(--r-panel); padding: var(--panel-pad); }
/* Oscuro con brasa roja en la esquina: el bloque más denso de la web */
.vz-bloque--oscuro {
    position: relative;
    overflow: hidden;
    background: var(--grad-dark);
    color: #FFF;
}
.vz-bloque--oscuro::after {
    content: "";
    position: absolute;
    right: -12%;
    top: -55%;
    width: 62%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(218,31,31,.55) 0%, rgba(218,31,31,0) 68%);
    pointer-events: none;
}
.vz-bloque--oscuro > * { position: relative; z-index: 1; }
/* Un bloque con fondo propio ya se separa solo: sobra la línea */
.vz-sello, .vz-sello + .vz-seccion { border-top: 0; }

/* Eyebrow: pastilla mono que abre cada sección */
.vz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-4) 6px var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--vz-soft);
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    line-height: var(--lh-mono);
    text-transform: uppercase;
    letter-spacing: var(--tr-mono);
    color: var(--vz-muted);
}
.vz-eyebrow .vz-ico { width: 11px; height: 11px; color: var(--vz-red); }
.vz-bloque--oscuro .vz-eyebrow { background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); }

/* Pastilla de acento dentro de un titular (ejemplo 3) */
.vz-pill-tit {
    display: inline-block;
    padding: 0 var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--vz-red-soft);
    color: var(--vz-red);
    font-weight: var(--fw-bold);
}

.vz-mono {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--vz-muted);
}

.vz-lead { font-size: var(--fs-md); color: var(--vz-ink-2); max-width: 46ch; }
.vz-texto { max-width: var(--w-text); color: var(--vz-ink-2); }

.vz-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
}
/* align-items evita que la pastilla del eyebrow se estire a lo ancho */
.vz-cab__tit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

.vz-lista > li {
    position: relative;
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-3);
}
.vz-lista > li > .vz-ico {
    position: absolute; left: 0; top: 0.4em;
    width: 13px; height: 13px;
    color: var(--vz-red);
}

/* Hueco de imagen: nunca una foto de stock */
.vz-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-card);
    background: var(--vz-soft);
}
.vz-placeholder__mark { width: 19%; height: auto; aspect-ratio: 1; color: #CFCFC6; }


/* =================================================================
   6 · CHEVRON — el elemento firma
   ================================================================= */
/* Los iconos llevan el glifo centrado en un viewBox cuadrado, así
   que caen en el medio de cualquier caja sin retoques por icono. */
.vz-ico { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: middle; }

/* Tile del logotipo y de los iconos de servicio */
.vz-tile {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--vz-dark);
    color: #FFF;
}
.vz-tile .vz-ico { width: 25px; height: 25px; }
.vz-tile--soft { background: var(--vz-red-soft); color: var(--vz-red); }

/* Flecha "ver proyecto": la única microinteracción con personalidad */
.vz-flecha {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--vz-ink);
}
.vz-flecha .vz-ico {
    width: 13px; height: 13px;
    color: var(--vz-red);
    transition: transform var(--t) var(--ease);
}
.vz-flecha:hover .vz-ico,
a:hover .vz-flecha .vz-ico,
a:focus-visible .vz-flecha .vz-ico { transform: translateX(6px); }

/* Botón circular de flecha, esquina de tarjeta.
   El icono lleva viewBox cuadrado y el glifo centrado dentro (ver
   inc/chevron.php), así que basta con place-items:center para que
   caiga clavado en el medio. */
.vz-arrow-btn {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--vz-soft);
    color: var(--vz-ink);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.vz-arrow-btn .vz-ico {
    width: 14px; height: 14px;
    display: block;
    transition: transform var(--t) var(--ease);
}
a:hover .vz-arrow-btn { background: var(--grad-red); color: #FFF; }
a:hover .vz-arrow-btn .vz-ico { transform: translateX(3px); }


/* =================================================================
   7 · BOTONES — todos en pastilla
   ================================================================= */
.vz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border: var(--bw) solid transparent;
    border-radius: var(--r-pill);
    background: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: center;
    white-space: nowrap;
    transition: background-color var(--t) var(--ease),
                border-color var(--t) var(--ease),
                color var(--t) var(--ease);
}
.vz-btn .vz-ico { width: 13px; height: 13px; transition: transform var(--t) var(--ease); }
.vz-btn:hover .vz-ico { transform: translateX(4px); }

.vz-btn--oscuro { background: var(--vz-dark); border-color: var(--vz-dark); color: #FFF; }
.vz-btn--oscuro:hover { background: #2A261D; border-color: #2A261D; }

.vz-btn--rojo { background: var(--grad-red); border-color: transparent; color: #FFF; }
.vz-btn--rojo:hover { background: var(--grad-red-hi); }

.vz-btn--linea { border-color: var(--vz-border); color: var(--vz-ink); }
.vz-btn--linea:hover { border-color: var(--vz-ink); background: var(--vz-soft); }

.vz-btn--claro { background: #FFF; border-color: #FFF; color: var(--vz-ink); }
.vz-btn--claro:hover { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); }

/* El secundario sobre fondo oscuro: contorno claro, sin relleno, para
   que no compita con el botón principal que tiene al lado. */
.vz-btn--claro-linea {
    background: transparent;
    border-color: rgba(255,255,255,.42);
    color: #FFF;
}
.vz-btn--claro-linea:hover { border-color: #FFF; background: rgba(255,255,255,.10); }

.vz-btn--sm { padding: var(--sp-3) var(--sp-5); }

.vz-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/* =================================================================
   8 · CABECERA — logotipo, nav en pastilla y CTA
   ================================================================= */
/* Arriba del todo es transparente, para no cortar el velo cálido con
   una franja blanca. Al hacer scroll se vuelve opaca (clase del JS). */
.vz-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-block: var(--sp-4);
    background: transparent;
    border-bottom: var(--bw) solid transparent;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.vz-header.is-fijo {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: var(--vz-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.vz-header__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    width: 100%;
    max-width: var(--w-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --- Logotipo: se cierra sobre sí mismo al pasar por encima -------
   Proporciones tomadas del fichero de marca:
     completo  630,64 / 146,09 = 4,3168
     isotipo   158,53 / 146,09 = 1,0852
   Solo se anima el ancho: preserveAspectRatio="slice" recorta por la
   derecha en lugar de escalar, así que los corchetes no encogen. */
.vz-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    --logo-h: 34px;
    /* La caja NO cambia de tamaño aunque el dibujo de dentro sí.
       Si encoge, el cursor deja de estar encima a mitad de la
       animación, se vuelve a expandir, vuelve a quedar debajo del
       cursor… y entra en bucle. Además así no salta el layout. */
    width: calc(var(--logo-h) * 4.3168);
    overflow: hidden;
}
.vz-logo--footer { --logo-h: 30px; }

.vz-logo__svg {
    height: var(--logo-h);
    width: calc(var(--logo-h) * 4.3168);
    overflow: hidden;
    transition: width 320ms var(--ease);
}
.vz-logo:hover .vz-logo__svg,
.vz-logo:focus-visible .vz-logo__svg { width: calc(var(--logo-h) * 1.0852); }

/* Los corchetes, con el filo que separa las dos mitades al cerrarse */
.vz-logo__b { fill: var(--vz-red); stroke: var(--vz-bg); stroke-miterlimit: 10; }
.vz-logo__b--der { transition: transform 320ms var(--ease); }
.vz-logo:hover .vz-logo__b--der,
.vz-logo:focus-visible .vz-logo__b--der { transform: translateX(-472.11px); }

/* El texto se va antes de que el corchete llegue a taparlo */
.vz-logo__wm { fill: var(--vz-ink); transition: opacity 180ms var(--ease); }
.vz-logo:hover .vz-logo__wm,
.vz-logo:focus-visible .vz-logo__wm { opacity: 0; }
.vz-logo__wm1 { font-family: var(--ff-mark); font-weight: 900; font-size: 57.87px; }
.vz-logo__wm2 { font-family: var(--ff-mark); font-weight: 400; font-size: 40.87px; }

/* En el pie, al revés: arranca cerrado en isotipo y se despliega.
   Misma especificidad que las reglas de arriba, así que mandan estas
   por ir después. */
.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; }

/* El botón va FUERA de la pastilla: dentro dejaba un filo gris
   alrededor, porque es más alto que los enlaces. */
.vz-nav { display: flex; align-items: center; gap: var(--sp-3); }

.vz-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 6px 12px 6px 6px;  /* recortada por la izquierda */
    border-radius: var(--r-pill);
    background: var(--vz-soft);
}
.vz-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 11px var(--sp-5);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--vz-muted);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
/* Dentro de la pastilla gris, el activo se recorta en blanco */
.vz-nav__link:hover { color: var(--vz-ink); background: var(--vz-bg); }
.vz-nav__link.is-activo { color: var(--vz-ink); background: var(--vz-bg); }
.vz-nav__cta { flex: none; }

/* Instagram, a la derecha del botón de contacto.
   Redondo y con el degradado de la marca: es lo único de la barra que
   no es de la casa, así que se distingue solo. El alto se ata al del
   botón de al lado para que no baile la línea. */
.vz-nav__ig {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: #FFF;
    background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.vz-nav__ig svg { width: 20px; height: 20px; }
.vz-nav__ig:hover,
.vz-nav__ig:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(214, 41, 118, .34);
}

/* El texto solo se lee con lector de pantalla: en la barra manda el
   icono, pero un enlace sin texto no dice a dónde lleva. */
.vz-nav__ig-txt {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Selector de idioma: discreto, junto al botón de contacto */
.vz-idioma {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    padding: 9px 10px;
    border: var(--bw) solid var(--vz-border);
    border-radius: var(--r-pill);
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    color: var(--vz-muted);
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.vz-idioma:hover { color: var(--vz-ink); border-color: var(--vz-ink); }

.vz-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px; height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--vz-soft);
}
.vz-burger__bar {
    display: block; width: 18px; height: 2px;
    margin-inline: auto;
    border-radius: 2px;
    background: var(--vz-ink);
    transition: transform var(--t) var(--ease);
}
.vz-burger[aria-expanded="true"] .vz-burger__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.vz-burger[aria-expanded="true"] .vz-burger__bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 900px) {
    .vz-burger { display: flex; }

    .vz-nav {
        position: fixed;
        inset: 80px var(--gutter) auto var(--gutter);
        padding: var(--sp-4);
        border: var(--bw) solid var(--vz-border);
        border-radius: var(--r-panel);
        background: var(--vz-bg);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
    }
    .vz-nav.is-abierto { visibility: visible; opacity: 1; transform: none; }

    .vz-nav { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .vz-nav__list { flex-direction: column; align-items: stretch; gap: 2px; padding: 0; background: none; }
    .vz-nav__link { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); border-radius: var(--r-sm); }
    .vz-nav__link:hover, .vz-nav__link.is-activo { background: var(--vz-soft); }
    .vz-nav__cta { width: 100%; padding-block: var(--sp-4); }

    /* En el menú desplegado no hay barra donde poner un círculo: pasa
       a botón ancho como los demás, y ahí el nombre de la cuenta sí se
       lee, que es lo que hace que alguien pulse. */
    .vz-nav__ig {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-3);
        width: 100%;
        height: auto;
        padding: var(--sp-4);
        border-radius: var(--r-pill);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
    }
    .vz-nav__ig-txt {
        position: static;
        width: auto; height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}


/* =================================================================
   9 · HERO
   ================================================================= */
.vz-hero__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--sp-6) var(--sp-8);
}

/* --- Ilustración de fondo (solo la home) --------------------------
   Cuelga del BODY y no del hero: tiene que arrancar en el pixel cero
   de la página para que la barra de navegación, que es transparente
   hasta que se hace scroll, quede pisándola por arriba. Colgada del
   hero empezaba por debajo de la cabecera y nunca llegaba a asomar.

   body::before ya lo ocupa el velo cálido, así que esto va en
   ::after, que además se pinta encima: la imagen queda sobre el velo
   y no debajo.

   La proporción de la caja es la del original (3/1), así que con
   `contain` no sobra ni falta nada y el dibujo empieza clavado en el
   borde superior. */
.p-home::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    /* La imagen va recortada: se quitó la mitad izquierda vacía del
       original, así que la caja adopta su nueva proporción (1.76:1) y
       la figura ocupa de verdad su lado en vez de quedarse pequeña
       dentro de un banner con medio lienzo en blanco. */
    width: min(1120px, 58vw);
    aspect-ratio: 1.76 / 1;
    background: image-set(
            url("../img/hero-back.webp") type("image/webp"),
            url("../img/hero-back.jpg")  type("image/jpeg")
        ) no-repeat right top / contain;
    /* Máscara radial única, anclada arriba a la derecha. Se apaga sola
       en todas las direcciones: con gradientes lineales quedaban cantos
       rectos, y el original trae además una línea de suelo abajo que
       hay que dejar en zona transparente. */
    /* Solo se difumina por la IZQUIERDA y por ABAJO. Arriba y a la
       derecha no hace falta: la caja arranca en el pixel cero y llega
       al borde de la ventana, asi que esos dos lados no se ven.

       Antes habia una mascara radial que apagaba tambien la parte
       baja para esconder la linea de suelo del original, y de paso se
       comia el libro, que es justo el motivo de la ilustracion: el
       personaje sale de un libro. Ahora el corte de abajo entra solo
       en el ultimo 12 %, que es donde esta el suelo y no el libro. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 22%, #000 42%),
        linear-gradient(to bottom, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 22%, #000 42%),
        linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-composite: intersect;
    opacity: 1;
    pointer-events: none;
}

/* El hero de la home va a UNA sola columna, pegado a la izquierda.
   -----------------------------------------------------------------
   Antes el titular iba a la izquierda y el texto de apoyo más los
   botones a la derecha, encima justo de la figura. Se intentó
   arreglar con un velo y luego con un cristal esmerilado, y las dos
   veces la solución consistía en tapar el dibujo para poder leer
   encima de él: se estaba resolviendo el síntoma.

   El problema real era la colocación. La ilustración viene compuesta
   con el lado izquierdo vacío precisamente para que ahí vaya el
   texto. Apilando todo en esa mitad no hay nada que tapar: el texto
   cae sobre fondo limpio y el mago se ve entero. Sin velo, sin
   desenfoque y sin capas de más. */
.p-home .vz-hero { position: relative; }

.p-home .vz-hero__top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    /* Ancho tope de la columna: por debajo del punto donde empieza la
       figura, para que no vuelvan a solaparse al crecer el texto. */
    max-width: min(660px, 54%);
    gap: var(--sp-5);
}

.p-home .vz-hero__aside { gap: var(--sp-5); }
.p-home .vz-hero__aside > p { font-size: var(--fs-md); color: var(--vz-ink-2); }

@media (max-width: 1100px) {
    .p-home .vz-hero__top { max-width: min(620px, 66%); }
}

@media (max-width: 900px) {
    /* En vertical no hay columna libre a la izquierda: la figura cae
       detrás del titular. Se hace más ancha y se apaga hasta quedar en
       atmósfera, que es lo único que aguanta ahí. */
    .p-home::after { width: 108vw; opacity: .22; }
    .p-home .vz-hero__top { max-width: 100%; }
}


}

.vz-hero__tit { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.vz-hero h1 { font-size: var(--fs-hero); }

.vz-hero__aside { display: flex; flex-direction: column; gap: var(--sp-5); }
.vz-hero__aside p { color: var(--vz-ink-2); font-size: var(--fs-sm); }

/* En las guías el aside no es un párrafo corto sino un formulario
   entero, mucho más alto que el titular. Con el `align-items: end`
   del hero, el H1 se descolgaba hasta el fondo y dejaba un hueco
   enorme arriba a la izquierda. Aquí las dos columnas empiezan
   arriba. */
.p-guia .vz-hero__top { align-items: start; }

/* Dónde estamos y para dónde trabajamos. Va pegada al lead, no como
   un párrafo más: el contenedor es flex con gap, así que hay que
   restarle ese hueco además del margen de p + p. */
.vz-hero__aside .vz-ambito {
    margin-top: calc(var(--sp-3) - var(--sp-5));
    color: var(--vz-muted);
    font-size: var(--fs-xs);
}

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


/* =================================================================
   11 · SERVICIOS — rejilla bento
   ================================================================= */
.vz-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-4);
}

.vz-serv {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    grid-column: span 2;
    padding: var(--sp-6);
    border-radius: var(--r-card);
    background: var(--vz-soft);
    transition: background-color var(--t) var(--ease);
}
.vz-serv:hover { background: var(--vz-soft-2); }

/* La primera manda: ocupa media rejilla y va en rojo de marca */
.vz-serv--destacado {
    grid-column: span 3;
    background: var(--grad-red);
    color: #FFF;
}
.vz-serv--destacado:hover { background: var(--grad-red-hi); }
.vz-serv--destacado .vz-serv__txt { color: rgba(255,255,255,.85); }
.vz-serv--destacado .vz-serv__txt { color: rgba(255,255,255,.72); }
.vz-serv--destacado .vz-arrow-btn { background: rgba(255,255,255,.12); color: #FFF; }
.vz-serv--ancho { grid-column: span 3; }

/* Fila entera. Con cinco tarjetas, 3+3 | 3+3 deja la quinta sola y
   media fila vacia: esta la cierra. */
.vz-serv--full { grid-column: span 6; }

.vz-serv__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.vz-serv__tit { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tr-tit); }
.vz-serv__txt { font-size: var(--fs-sm); color: var(--vz-muted); margin-top: auto; }

@media (max-width: 960px) { .vz-bento { grid-template-columns: repeat(2, 1fr); }
    .vz-serv, .vz-serv--destacado, .vz-serv--ancho, .vz-serv--full { grid-column: span 1; } }
@media (max-width: 620px) { .vz-bento { grid-template-columns: 1fr; } }


/* =================================================================
   12 · OBRAS
   ================================================================= */
.vz-proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--sp-5);
}
/* En escritorio, tres por fila: tarjetas grandes, como en las referencias */
@media (min-width: 1000px) { .vz-proyectos { grid-template-columns: repeat(3, 1fr); } }

/* Sin caja: solo la imagen lleva forma, el texto va sobre el fondo */
.vz-proyecto {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.vz-proyecto__img {
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--vz-soft);
    transition: opacity var(--t) var(--ease);
}
.vz-proyecto:hover .vz-proyecto__img { opacity: .88; }
.vz-proyecto__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vz-proyecto__cuerpo { display: flex; flex-direction: column; gap: var(--sp-2); }
/* La flecha se alinea con la PRIMERA línea del título: si el título
   ocupa dos líneas y va centrada, queda flotando en mitad de la nada. */
.vz-proyecto__tit {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
    font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tr-tit);
    line-height: 1.15;
}
.vz-proyecto__res { font-size: var(--fs-sm); color: var(--vz-muted); }


/* --- Filtros del catálogo, en pastilla ---------------------------- */
.vz-filtros { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.vz-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 9px var(--sp-5);
    border-radius: var(--r-pill);
    background: var(--vz-soft);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--vz-muted);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.vz-chip:hover { background: var(--vz-soft-2); color: var(--vz-ink); }
.vz-chip.is-activo { background: var(--grad-red); color: #FFF; }
.vz-chip__n { font-family: var(--ff-mono); font-size: var(--fs-2xs); opacity: .65; }

/* --- Ficha de obra ------------------------------------------------ */
.vz-ficha__top {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--sp-7) var(--sp-8);
    align-items: start;
}
.vz-ficha__portada { border-radius: var(--r-card); overflow: hidden; background: var(--vz-soft); }
.vz-ficha__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(--vz-border);
}
.vz-dato dt {
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--vz-muted);
}
.vz-dato dd { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); }

.vz-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
}
.vz-galeria > * { border-radius: var(--r-card); overflow: hidden; background: var(--vz-soft); }

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


/* =================================================================
   13 · FRANJA DEL SELLO — el único bloque oscuro de la home
   ================================================================= */
.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: var(--vz-red); }
.vz-sello__caja {
    padding: var(--sp-6);
    border-radius: var(--r-card);
    background: rgba(255,255,255,.06);
}
@media (max-width: 860px) { .vz-sello__in { grid-template-columns: 1fr; } }


/* =================================================================
   14 · CONTACTO
   ================================================================= */
.vz-cta__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
}
.vz-cta__tit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.vz-cta__mail { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--vz-muted); }


/* =================================================================
   15 · PIE
   ================================================================= */
.vz-footer {
    position: relative;
    margin-top: var(--sp-7);
    padding-block: var(--sp-8) var(--sp-6);
    background: var(--vz-soft);
}
/* Filo de marca cerrando la página */
.vz-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vz-red) 0%, #FF6A4C 26%, var(--vz-border) 70%);
}

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

.vz-footer__marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.vz-footer__claim { font-size: var(--fs-sm); color: var(--vz-muted); max-width: 38ch; }

.vz-footer__tit {
    margin-bottom: var(--sp-4);
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--vz-ink);
}

.vz-footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.vz-footer__col a {
    font-size: var(--fs-sm);
    color: var(--vz-muted);
    transition: color var(--t) var(--ease);
}
.vz-footer__col a:hover { color: var(--vz-red); }
.vz-footer__dir { font-size: var(--fs-sm); color: var(--vz-muted); }
/* --- Redes sociales ---------------------------------------------
   Cada red va con su icono y sus colores de marca, no como un enlace
   de texto más: es lo único del pie que se busca a propósito, y con
   los colores de la casa se perdía entre los demás enlaces. */
.vz-redes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.vz-red {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: #FFF;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}

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

/* El degradado oficial de Instagram: del amarillo cálido de abajo a
   la izquierda al azul de arriba a la derecha, pasando por el rosa. */
.vz-red--instagram {
    background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}

.vz-red:hover,
.vz-red:focus-visible {
    color: #FFF;
    transform: translateY(-1px);
    filter: saturate(1.12);
    box-shadow: 0 6px 18px rgba(214, 41, 118, .28);
}

/* En el pie, los enlaces heredan el color del texto y el subrayado de
   la columna: aquí no, que el botón trae el suyo. */
.vz-footer__col .vz-red { color: #FFF; }
.vz-footer__col .vz-red:hover { color: #FFF; }

/* Barra legal */
.vz-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: var(--bw) solid var(--vz-border);
}
.vz-footer__legal,
.vz-footer__legales a {
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--vz-muted);
}
.vz-footer__legales { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.vz-footer__legales a { transition: color var(--t) var(--ease); }
.vz-footer__legales a:hover { color: var(--vz-red); }

@media (max-width: 900px) {
    .vz-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vz-footer__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .vz-footer__cols { grid-template-columns: 1fr; }
    .vz-footer__base { flex-direction: column; align-items: flex-start; }
}


/* =================================================================
   15b · FAQ — acordeón nativo, sin una línea de JavaScript
   ================================================================= */
.vz-faq { display: flex; flex-direction: column; }

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

.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(--t) var(--ease);
}
.vz-faq__p::-webkit-details-marker { display: none; }
.vz-faq__p:hover { color: var(--vz-red); }

.vz-faq__ico {
    width: 14px; height: 14px;
    margin-top: .35em;
    color: var(--vz-red);
    transform: rotate(90deg);
    transition: transform var(--t) 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(--vz-ink-2);
}
.vz-faq__r p + p { margin-top: var(--sp-4); }


/* =================================================================
   15c · PÁGINAS LEGALES — texto largo, nada más
   ================================================================= */
.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(--vz-ink-2); }
.vz-legal code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--vz-soft);
    font-family: var(--ff-mono);
    font-size: .9em;
}
.vz-datos--legal { border-top: 0; padding-top: 0; }


/* =================================================================
   15d · PASOS NUMERADOS — el proceso del sello
   ================================================================= */
.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(--vz-border);
}
.vz-paso:last-child { border-bottom: var(--bw) solid var(--vz-border); }

.vz-paso__n {
    font-family: var(--ff-mono);
    font-size: var(--fs-lg);
    line-height: 1.1;
    background: var(--grad-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@supports not (background-clip: text) { .vz-paso__n { color: var(--vz-red); } }

.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(--vz-ink-2); }

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

/* Modalidades de colaboración (/sello) */
.vz-modos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--sp-4);
}
.vz-modo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    border-radius: var(--r-card);
    background: var(--vz-soft);
}
.vz-modo__c {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--vz-red);
}
.vz-modo__c .vz-ico { width: 11px; height: 11px; }
.vz-modo__t { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tr-tit); }
.vz-modo__d { font-size: var(--fs-sm); color: var(--vz-muted); }

/* Lista a dos columnas (disciplinas en /nosotros) */
.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-mt { margin-top: var(--sp-5); }


/* =================================================================
   15e · FORMULARIO
   ================================================================= */
.vz-form__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--sp-8);
    align-items: start;
}
.vz-form__aside { display: flex; flex-direction: column; align-items: flex-start; }

.vz-form__caja {
    padding: var(--panel-pad);
    border-radius: var(--r-panel);
    background: var(--vz-soft);
}

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

.vz-campo { display: flex; flex-direction: column; gap: var(--sp-2); }
.vz-campo label {
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--vz-muted);
}

.vz-campo input,
.vz-campo select,
.vz-campo textarea {
    width: 100%;
    padding: var(--sp-4);
    border: var(--bw) solid var(--vz-border);
    border-radius: var(--r-sm);
    background: var(--vz-bg);
    font-size: var(--fs-base);
    transition: border-color var(--t) var(--ease);
}
.vz-campo textarea { resize: vertical; min-height: 140px; }

.vz-campo input:hover,
.vz-campo select:hover,
.vz-campo textarea:hover { border-color: var(--vz-border-hi, #CFCFC8); }

.vz-campo input:focus-visible,
.vz-campo select:focus-visible,
.vz-campo textarea:focus-visible { border-color: var(--vz-red); outline-offset: 1px; }

.vz-campo [aria-invalid="true"] { border-color: var(--vz-red); }
.vz-campo__error { font-size: var(--fs-sm); color: var(--vz-red); }

.vz-form__legal { font-size: var(--fs-xs); color: var(--vz-muted); }

/* Avisos */
.vz-aviso {
    padding: var(--sp-5);
    border-radius: var(--r-sm);
    border-left: var(--accent-w, 4px) solid var(--vz-red);
    background: var(--vz-red-soft);
    font-size: var(--fs-sm);
}
.vz-aviso--ok { border-left-color: var(--vz-ink); background: var(--vz-bg); }
.vz-aviso__t {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-md); font-weight: var(--fw-bold);
}
.vz-aviso__t .vz-ico { width: 14px; height: 14px; color: var(--vz-red); }
.vz-aviso + .vz-form { margin-top: var(--sp-5); }

@media (max-width: 860px) {
    .vz-form__cols { grid-template-columns: 1fr; gap: var(--sp-7); }
}


/* =================================================================
   16 · PÁGINAS SUELTAS
   ================================================================= */
.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-stub .vz-lista { margin-top: var(--sp-2); }
.vz-stub .vz-lista .vz-mono { display: block; margin-top: var(--sp-1); }


/* =================================================================
   17 · MOVIMIENTO — poco y corto
   ================================================================= */
.js .vz-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}
.js .vz-reveal.is-visible { opacity: 1; transform: none; }

/* Navegación parcial: el contenido se atenúa mientras llega el nuevo.
   Solo se nota si la red va lenta; en local no se ve. */
main { transition: opacity 140ms var(--ease); }
.is-cargando main { opacity: .45; }
/* =================================================================
   22 · GUÍAS DESCARGABLES — /sello/{slug}
   ============================================================== */

/* La caja del formulario en el hero. Mismo material que el panel de
   contacto, para que no parezca un injerto de otra web. */
.vz-descarga {
    padding: var(--panel-pad);
    border-radius: var(--r-panel);
    background: var(--vz-soft);
}

.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(--vz-muted);
}

.vz-descarga__btn { margin-top: var(--sp-5); }

.vz-descarga__pie {
    margin-top: var(--sp-3);
    font-family: var(--ff-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--vz-muted);
}

/* Casillas de consentimiento. El cuadrado no se encoge nunca: con
   flex y un texto de dos líneas se aplastaría a un rectángulo. */
.vz-check {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}

.vz-check input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--vz-red);
    cursor: pointer;
}

.vz-check label {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--vz-ink-2);
    cursor: pointer;
}

/* "(opcional)" dentro de una etiqueta que va en versales. */
.vz-campo__opt { text-transform: none; opacity: .7; }

/* Columna de lectura del cuerpo de la guía: una línea muy larga
   cansa, así que se corta antes que el ancho del contenedor. */
.vz-texto--ancho { max-width: 68ch; }

main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    :root { --t: 0ms; }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .js .vz-reveal { opacity: 1; transform: none; }
}

/* --- Piezas sueltas (/servicios) ---------------------------------
   Rejilla de listas: cada linea de negocio con lo que se puede pedir
   por separado. Auto-fit para que no haya que tocar nada al anadir
   una linea nueva. */
.vz-piezas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--sp-4);
    /* Cada tarjeta al alto de su contenido: las listas tienen distinto
       número de piezas y estirarlas todas dejaba huecos enormes. */
    align-items: start;
}

.vz-pieza {
    /* --panel-pad es para bloques grandes: aquí se comía la mitad del
       ancho de la tarjeta y el texto salía en columnas de tres
       palabras. */
    padding: var(--sp-6);
    border-radius: var(--r-card);
    background: var(--vz-soft);
}

.vz-pieza__t {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tit);
    margin-bottom: var(--sp-4);
}

.vz-pieza .vz-lista li { font-size: var(--fs-sm); }