/* ═══════════════════════════════════════════════════════════════════
   VELARTE ESTUDIO · Sistema de diseño
   Tokens tomados del artboard "Sistema de diseño" aprobado.
   Cada color de texto trae su razón de contraste medida sobre su fondo.
   ═══════════════════════════════════════════════════════════════════ */

:root {
	/* Marca */
	--v-marino-900: #16233F;
	--v-marino-700: #273657;   /* Primario · 11.99:1 sobre blanco · AAA */
	--v-marino-500: #3C4761;
	--v-oro-700:    #7A5C2B;   /* Enlaces y texto pequeño · 6.19:1 · AA */
	--v-oro-500:    #B18A49;   /* Fondo de botón. Nunca texto pequeño */
	--v-oro-300:    #D9B778;   /* Texto dorado sobre marino · 6.28:1 · AA */

	/* Neutros */
	--v-arena:  #F7F1E4;
	--v-crema:  #FAF8F4;
	--v-borde:  #E5E0D6;
	--v-borde-suave: #EFEBE2;
	--v-gris-suave: #8A93A8;   /* solo para bordes y separadores, nunca texto */
	--v-blanco: #FFFFFF;

	/* Texto */
	--v-texto:   #1A2136;   /* 15.4:1 sobre blanco */
	--v-texto-2: #56617A;   /* 6.6:1  sobre blanco */
	--v-texto-3: #646D80;   /* 5.2:1 sobre blanco · 4.62:1 sobre arena · AA */
	--v-texto-inv:   #FFFFFF;
	--v-texto-inv-2: #C9D2E4;
	--v-texto-inv-3: #98A6C2;

	/* Temporadas */
	--v-verde:       #15693F;
	--v-verde-osc:   #0F5C36;
	--v-verde-suave: #E8F3EC;
	--v-rosa:        #A82F65;
	--v-rosa-osc:    #8E2455;
	--v-rosa-suave:  #FBEAF1;

	/* Señales */
	--v-aviso-bg:    #FFF3D4;
	--v-aviso-texto: #6B4E1B;
	--v-error:       #B3261E;
	--v-error-bg:    #FDECEA;
	--v-exito:       #0F5C36;
	--v-exito-bg:    #E8F3EC;

	/* Tipografía */
	--v-fuente-titulo: 'Sora', 'Helvetica Neue', Arial, sans-serif;
	--v-fuente-texto:  'Public Sans', 'Helvetica Neue', Arial, sans-serif;

	/* Espaciado · escala del sistema */
	--v-e1: 6px;
	--v-e2: 14px;
	--v-e3: 22px;
	--v-e4: 40px;
	--v-e5: 72px;
	--v-e6: 82px;

	/* Radios */
	--v-r1: 3px;
	--v-r2: 4px;
	--v-r3: 6px;
	--v-rp: 100px;

	/* Estructura */
	--v-ancho: 1296px;
	--v-margen: 72px;
	--v-alto-encabezado: 110px;

	--v-sombra: 0 1px 2px rgba(22,35,63,.05), 0 8px 24px rgba(22,35,63,.06);
	--v-sombra-alta: 0 2px 4px rgba(22,35,63,.06), 0 16px 40px rgba(22,35,63,.10);
}

/* ── Reinicio acotado ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden lo pone el navegador con display:none, pero cualquier
   clase que declare display lo gana por especificidad. Sin esta regla, un
   .v-btn oculto se seguía viendo. */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--v-alto-encabezado) + 16px);
	overflow-x: clip;   /* corta el desborde sin crear un contenedor de scroll */
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--v-fuente-texto);
	font-size: 16px;
	line-height: 1.65;
	color: var(--v-texto);
	background: var(--v-blanco);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--v-fuente-titulo); margin: 0; color: var(--v-marino-900); text-wrap: balance; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; }
h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; }
h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 17px; font-weight: 600; letter-spacing: 0; }
p  { margin: 0; text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--v-oro-700); text-decoration: none; }
a:hover { color: var(--v-marino-900); text-decoration: underline; text-underline-offset: 3px; }
ul, ol { margin: 0; padding-left: 1.25em; }
button { font: inherit; }
table { border-collapse: collapse; }

/* Anillo de foco a dos tonos: el interior oscuro se ve sobre los fondos
   claros y el exterior dorado sobre el marino de la portada, el cierre y el
   pie. Con un solo color el foco desaparecía justo en los botones que llevan
   a cotizar. */
:focus-visible {
	outline: 2px solid var(--v-marino-900);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--v-oro-300);
	border-radius: var(--v-r1);
}

.v-salta {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--v-marino-900); color: #fff; padding: 12px 20px;
	font-weight: 700; border-radius: 0 0 var(--v-r2) 0;
}
.v-salta:focus { left: 0; }

.v-oculto {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Estructura ───────────────────────────────────────────────────── */

.v-ancho { width: 100%; max-width: var(--v-ancho); margin-inline: auto; padding-inline: var(--v-margen); }
.v-seccion { padding-block: var(--v-e6); }
.v-seccion--compacta { padding-block: var(--v-e4) var(--v-e5); }
.v-seccion--crema { background: var(--v-crema); border-block: 1px solid var(--v-borde); }
.v-seccion--arena { background: var(--v-arena); }
.v-seccion--marino { background: var(--v-marino-700); color: var(--v-texto-inv-2); }
.v-seccion--marino h1, .v-seccion--marino h2, .v-seccion--marino h3 { color: var(--v-texto-inv); }

.v-cabecera-seccion { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: var(--v-e4); }
.v-cabecera-seccion > div { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.v-cabecera-seccion p { font-size: 16px; color: var(--v-texto-2); }
.v-seccion--marino .v-cabecera-seccion p { color: var(--v-texto-inv-2); }

.v-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v-texto-3); }
.v-enlace-mas { font-size: 15px; font-weight: 600; color: var(--v-oro-700); white-space: nowrap; }

/* ── Botones ──────────────────────────────────────────────────────── */

.v-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px;
	font-family: var(--v-fuente-texto); font-size: 16px; font-weight: 700; line-height: 1;
	border: 1.5px solid transparent; border-radius: var(--v-r2);
	cursor: pointer; text-align: center; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.v-btn:hover { text-decoration: none; transform: translateY(-1px); }
.v-btn--oro     { background: var(--v-oro-500); color: var(--v-marino-900); }  /* 4.90:1 · AA */
.v-btn--oro:hover { background: var(--v-oro-300); color: var(--v-marino-900); }
.v-btn--marino  { background: var(--v-marino-700); color: #fff; }
.v-btn--marino:hover { background: var(--v-marino-900); color: #fff; }
.v-btn--linea   { border-color: var(--v-marino-700); color: var(--v-marino-700); background: transparent; }
.v-btn--linea:hover { background: var(--v-marino-700); color: #fff; }
.v-btn--linea-clara { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.v-btn--linea-clara:hover { background: rgba(255,255,255,.12); color: #fff; }
.v-btn--peque { min-height: 44px; padding: 0 18px; font-size: 14px; }
.v-btn--bloque { width: 100%; }
.v-btn[disabled], .v-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.v-btns { display: flex; flex-wrap: wrap; gap: var(--v-e2); }

/* ── Insignias y semáforos ────────────────────────────────────────── */

.v-chip {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 600; letter-spacing: .02em;
	color: var(--v-oro-700); background: var(--v-arena);
	padding: 4px 9px; border-radius: var(--v-r1);
}
.v-chip--verde { color: var(--v-verde-osc); background: var(--v-verde-suave); }
.v-chip--rosa  { color: var(--v-rosa-osc);  background: var(--v-rosa-suave); }
.v-chip--marino{ color: var(--v-marino-900); background: var(--v-oro-300); }

.v-chips { display: flex; flex-wrap: wrap; gap: var(--v-e1); }

.v-pend {
	background: var(--v-aviso-bg); border-bottom: 2px dotted var(--v-oro-500);
	color: var(--v-aviso-texto); padding: 0 4px; font-weight: 600;
	font-size: .92em; border-radius: 2px;
}

/* ── Encabezado ───────────────────────────────────────────────────── */

.v-encabezado { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--v-borde); }
.v-encabezado__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--v-alto-encabezado); padding-block: 12px; }
.v-logo { flex-shrink: 0; }
.v-logo img { height: 84px; width: auto; }
/* El pie se queda como estaba: el encargo era que el logo se viera mejor en el menú. */
.v-pie .v-logo img { height: 62px; }
.v-nav { display: flex; align-items: center; gap: 18px; min-width: 0; }
.v-nav a { font-size: 15px; font-weight: 500; color: var(--v-texto); position: relative; padding-block: 6px; white-space: nowrap; }
.v-nav a:hover { color: var(--v-marino-700); text-decoration: none; }
.v-nav .current-menu-item > a,
.v-nav .current-menu-parent > a,
.v-nav .current-menu-ancestor > a { color: var(--v-marino-700); font-weight: 600; }
.v-nav .current-menu-item > a::after,
.v-nav .current-menu-parent > a::after,
.v-nav .current-menu-ancestor > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--v-oro-500); }
.v-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 18px; }
.v-encabezado__acciones { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.v-tel { font-size: 15px; font-weight: 600; color: var(--v-marino-700); white-space: nowrap; }
/* Con el logo a 84 px el teléfono ya no cabe junto al menú: el contenedor
   mide 1152 px en cualquier pantalla y faltaban 62. Sigue en el pie, en el
   botón de WhatsApp y en Contacto. */
.v-encabezado .v-tel { display: none; }

.v-hamburguesa { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: 1px solid var(--v-borde); border-radius: var(--v-r2); cursor: pointer; color: var(--v-marino-900); }

/* Con el menú abierto el botón se vuelve una cruz. Sin esto no hay nada
   que indique cómo cerrarlo: el icono seguía siendo el de abrir. */
.v-hamburguesa__cerrar { display: none; }
.v-hamburguesa[aria-expanded="true"] { background: var(--v-crema); }
.v-hamburguesa[aria-expanded="true"] .v-hamburguesa__abrir { display: none; }
.v-hamburguesa[aria-expanded="true"] .v-hamburguesa__cerrar { display: block; }

/* Submenú de escritorio */
.v-nav li { position: relative; }
.v-nav .sub-menu {
	position: absolute; top: 100%; left: -14px; min-width: 240px;
	flex-direction: column; align-items: stretch; gap: 0;
	background: #fff; border: 1px solid var(--v-borde); border-radius: var(--v-r3);
	box-shadow: var(--v-sombra-alta); padding: 8px; margin-top: 10px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.v-nav li:hover > .sub-menu,
.v-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.v-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--v-r2); font-size: 15px; }
.v-nav .sub-menu a:hover { background: var(--v-crema); }
.v-nav .sub-menu .current-menu-item > a::after { display: none; }

/* ── Contador de cotización ───────────────────────────────────────── */

.v-contador {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 46px; padding: 0 16px;
	border: 1.5px solid var(--v-marino-700); border-radius: var(--v-r2);
	color: var(--v-marino-700); font-weight: 700; font-size: 15px;
}
.v-contador:hover { background: var(--v-marino-700); color: #fff; text-decoration: none; }
.v-contador__num {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 6px;
	background: var(--v-oro-500); color: var(--v-marino-900);
	border-radius: var(--v-rp); font-size: 12px; font-weight: 700;
}

/* ── Portada ──────────────────────────────────────────────────────── */

/* El carrusel cambia el fondo con --v-portada-fondo. Sin JavaScript, o en
   la diapositiva de todo el año, la variable no existe y queda el marino. */
.v-portada { background-color: var(--v-portada-fondo, var(--v-marino-700)); transition: background-color .7s ease; }
.v-portada__rejilla { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; padding-block: 80px 84px; }
.v-portada__texto { display: flex; flex-direction: column; gap: 26px; }
.v-portada h1 { color: #fff; }
.v-portada__sub { font-size: 19px; line-height: 1.6; color: var(--v-portada-sub, var(--v-texto-inv-2)); max-width: 580px; }
/* La pieza de producto que abre la columna izquierda, sobre un panel claro.
   El panel no es decorativo: el set va en azul marino y el fondo de la
   portada también, así que apoyado directamente sobre el azul el contraste
   es de 1.36:1 y las piezas se funden con el fondo. Sobre la crema se
   despegan y el dorado del logo es lo que más resalta. Es lo mismo que
   hace la referencia del cliente, que monta el set sobre un panel gris.

   La sombra va en el panel y no en la imagen: el set ya trae las suyas
   pintadas debajo de cada objeto, y una segunda capa las ensuciaba. */
.v-portada__pieza {
	margin: 0 0 4px;
	max-width: 560px;
	padding: 26px 30px;
	background: linear-gradient(158deg, #FFFDF9, var(--v-crema) 55%, #EFEAE0);
	border-radius: var(--v-r3);
	box-shadow: 0 20px 38px rgba(0,0,0,.30);
}
.v-portada__pieza img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Carrusel de la portada ──
   Todas las diapositivas comparten un escenario de 1.9:1, la proporción de
   los banners, para que el texto de abajo no brinque al cambiar. La
   primera es el panel crema de siempre; las demás, banners a sangre.

   Sin JavaScript solo existe la primera: las otras nacen con hidden. El
   guion las monta encima, transparentes, y cruza la opacidad. */
.v-carrusel { display: flex; flex-direction: column; gap: 14px; }
.v-carrusel__escenario { position: relative; aspect-ratio: 1400 / 736; }
.v-carrusel__slide { height: 100%; }
.v-carrusel .v-portada__pieza {
	display: flex; align-items: center; justify-content: center;
	height: 100%; max-width: none; margin: 0;
}
.v-carrusel .v-portada__pieza img { max-height: 100%; object-fit: contain; }
.v-carrusel__banner {
	display: block; height: 100%;
	border-radius: var(--v-r3); overflow: hidden;
	box-shadow: 0 20px 38px rgba(0,0,0,.30);
}
.v-carrusel__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-carrusel__banner:focus-visible { outline: 3px solid var(--v-oro-300); outline-offset: 3px; }

.v-carrusel[data-listo] .v-carrusel__slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.v-carrusel[data-listo] .v-carrusel__slide.is-activa {
	opacity: 1; visibility: visible;
	transition: opacity .6s ease, visibility 0s;
}

.v-carrusel__controles { display: flex; align-items: center; gap: 8px; }
.v-carrusel__controles[hidden] { display: none; }
.v-carrusel__puntos { display: flex; align-items: center; gap: 2px; }
/* El punto se ve de 10 px, pero el área que se pulsa es de 28. */
.v-carrusel__punto {
	width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
	display: grid; place-items: center;
}
.v-carrusel__punto::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%;
	background: rgba(255,255,255,.4); transition: background .2s ease, width .2s ease;
}
.v-carrusel__punto[aria-current="true"]::before { width: 24px; border-radius: 5px; background: var(--v-oro-300); }
.v-carrusel__flecha, .v-carrusel__pausa {
	width: 36px; height: 36px; padding: 0; display: grid; place-items: center; cursor: pointer;
	border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
	background: transparent; color: #fff; transition: background .15s ease;
}
.v-carrusel__flecha:hover, .v-carrusel__pausa:hover { background: rgba(255,255,255,.14); }
.v-carrusel__pausa { margin-left: auto; }
.v-carrusel__icono-play { display: none; }
.v-carrusel__pausa[data-pausado] .v-carrusel__icono-pausa { display: none; }
.v-carrusel__pausa[data-pausado] .v-carrusel__icono-play { display: block; }

.v-portada__subs { display: grid; }
.v-portada__subs > .v-portada__sub { grid-area: 1 / 1; margin: 0; }
.v-portada__subs[data-listo] > .v-portada__sub { visibility: hidden; }
.v-portada__subs[data-listo] > .v-portada__sub.is-activa { visibility: visible; }

/* Lo que cambia con la diapositiva se apaga un instante y vuelve. */
[data-velarte-cambia] { transition: opacity .2s ease; }
[data-velarte-cambia].is-cambiando { opacity: 0; }

/* La tarjeta de la derecha que corresponde a la diapositiva visible. */
.v-tarjeta-temp.is-activa { box-shadow: 0 0 0 3px var(--v-oro-300), var(--v-sombra-alta); }

@media (prefers-reduced-motion: reduce) {
	.v-portada,
	.v-carrusel[data-listo] .v-carrusel__slide,
	.v-carrusel[data-listo] .v-carrusel__slide.is-activa,
	[data-velarte-cambia] { transition: none; }
}

.v-portada__cinta {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 9px;
	padding: 7px 15px; border: 1px solid rgba(217,183,120,.45); border-radius: var(--v-rp);
	font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v-oro-300);
}
.v-portada__lateral { display: flex; flex-direction: column; gap: var(--v-e2); }
.v-portada__lateral-tit { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--v-fuente-texto); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-oro-300); }
.v-portada__lateral-tit::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v-oro-300); }

.v-tarjeta-temp {
	display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center;
	padding: 16px; background: #fff; border-radius: var(--v-r3);
	border-left: 4px solid var(--v-oro-500); color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.v-tarjeta-temp:hover { text-decoration: none; transform: translateX(3px); box-shadow: var(--v-sombra-alta); }
/* La portada del catálogo es lo que se reconoce de lejos: va a 160 px de
   alto, sin marco, con su sombra. */
.v-tarjeta-temp__img { height: 160px; display: flex; align-items: center; justify-content: center; }
.v-tarjeta-temp__img img { height: 100%; width: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 16px rgba(16,24,40,.18); }
.v-tarjeta-temp__cuerpo { display: flex; flex-direction: column; gap: 5px; }
.v-tarjeta-temp__mes { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.v-tarjeta-temp h3 { font-size: 18px; }
.v-tarjeta-temp p { font-size: 14px; line-height: 1.45; color: var(--v-texto-2); }
.v-tarjeta-temp--oscura { background: rgba(255,255,255,.07); border: 1px solid rgba(217,183,120,.35); border-left: 4px solid var(--v-oro-500); }
.v-tarjeta-temp--oscura h3 { color: #fff; }
.v-tarjeta-temp--oscura p { color: var(--v-texto-inv-3); }
.v-tarjeta-temp--oscura .v-tarjeta-temp__img { height: 64px; }

/* ── Asesor de la portada ─────────────────────────────────────────── */

.v-asesor { background: var(--v-crema); padding-block: var(--v-e5); }
.v-asesor__cabecera { max-width: 660px; margin-bottom: var(--v-e4); }
.v-asesor__cabecera p { margin-top: 10px; color: var(--v-texto-2); line-height: 1.6; }

.v-asesor__pregunta { font-family: var(--v-fuente-titulo); font-size: 20px; font-weight: 600; color: var(--v-marino-900); margin-bottom: var(--v-e3); }
.v-asesor__pregunta:focus { outline: none; }

.v-asesor__opciones { list-style: none; padding: 0; display: grid; gap: var(--v-e2); grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.v-asesor__op {
	display: flex; flex-direction: column; gap: 6px; height: 100%;
	padding: 18px 20px; background: #fff; border: 1px solid var(--v-borde);
	border-radius: var(--v-r3); text-decoration: none; color: inherit;
	transition: border-color .15s, transform .15s;
}
.v-asesor__op:hover { border-color: var(--v-oro-500); text-decoration: none; transform: translateY(-2px); }
.v-asesor__nombre { font-family: var(--v-fuente-titulo); font-weight: 600; color: var(--v-marino-900); }
.v-asesor__resumen { font-size: 14px; line-height: 1.5; color: var(--v-texto-2); }

/* El primer paso son las cinco soluciones con su foto; los siguientes
   son listas de texto, que no la tienen y no la necesitan. */
.v-asesor__op--tarjeta { padding: 0; overflow: hidden; }
.v-asesor__img { display: block; aspect-ratio: 4 / 3; background: var(--v-crema); }
.v-asesor__img img { width: 100%; height: 100%; object-fit: cover; }
.v-asesor__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }

/* Las cinco soluciones van en dos renglones, tres y dos, con el segundo
   centrado: con auto-fit salían cuatro y una huérfana. La rejilla es de
   seis columnas y cada tarjeta ocupa dos, así todas miden lo mismo. */
.v-asesor__opciones--tarjetas { grid-template-columns: repeat(6, 1fr); }
.v-asesor__opciones--tarjetas > li { grid-column: span 2; }
.v-asesor__opciones--tarjetas > li:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.v-asesor__opciones--tarjetas .v-asesor__img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
	.v-asesor__opciones--tarjetas { grid-template-columns: repeat(4, 1fr); }
	.v-asesor__opciones--tarjetas > li:nth-child(4):nth-last-child(2) { grid-column: span 2; }
	.v-asesor__opciones--tarjetas > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (max-width: 620px) {
	.v-asesor__opciones--tarjetas { grid-template-columns: 1fr; }
	.v-asesor__opciones--tarjetas > li,
	.v-asesor__opciones--tarjetas > li:nth-child(4):nth-last-child(2),
	.v-asesor__opciones--tarjetas > li:last-child:nth-child(odd) { grid-column: auto; }
}

/* ── Catálogo General, debajo de la portada ───────────────────────── */

.v-catalogo-general { background: #fff; padding-block: var(--v-e5); border-bottom: 1px solid var(--v-borde); }
.v-catalogo-general__rejilla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.v-catalogo-general__img { display: block; border-radius: var(--v-r3); overflow: hidden; box-shadow: 0 14px 30px rgba(16,24,40,.14); }
.v-catalogo-general__img img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.v-catalogo-general__img:hover img { transform: scale(1.02); }
.v-catalogo-general__texto { display: flex; flex-direction: column; gap: 16px; }
.v-catalogo-general__meta { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--v-oro-700); }
.v-catalogo-general__texto p { font-size: 18px; line-height: 1.6; color: var(--v-texto-2); max-width: 480px; }
.v-catalogo-general .v-btn svg { flex-shrink: 0; }
@media (max-width: 980px) {
	.v-catalogo-general__rejilla { grid-template-columns: 1fr; gap: var(--v-e4); }
}
@media (prefers-reduced-motion: reduce) {
	.v-catalogo-general__img img { transition: none; }
	.v-catalogo-general__img:hover img { transform: none; }
}

.v-asesor__pie { margin-top: var(--v-e3); }
.v-asesor__atras {
	background: none; border: none; padding: 0; cursor: pointer;
	font: inherit; font-size: 15px; color: var(--v-marino-700);
	text-decoration: underline; text-underline-offset: 3px;
}
.v-asesor__atras:hover { color: var(--v-marino-900); }

/* ── Caso elegido en el asesor ────────────────────────────────────── */

.v-elegido { border: 1px solid var(--v-oro-300); border-radius: var(--v-r3); background: var(--v-crema); padding: var(--v-e3); }
.v-elegido__meta { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v-oro-500); margin-bottom: 6px; }
.v-elegido__texto { color: var(--v-texto-2); line-height: 1.6; margin-top: 8px; max-width: 62ch; }
.v-elegido__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-e2); margin-top: var(--v-e3); }
.v-elegido__otro { font-size: 15px; color: var(--v-marino-700); }

/* ── Rejillas ─────────────────────────────────────────────────────── */

.v-rejilla { display: grid; gap: var(--v-e3); }
.v-rejilla--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.v-rejilla--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.v-rejilla--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.v-rejilla--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.v-rejilla--auto { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

/* ── Tarjeta de producto ──────────────────────────────────────────────
   Las fotos vienen con fondo blanco recortado del catálogo del proveedor.
   Por eso el marco también va en blanco: cualquier otro tono deja ver el
   borde del JPG como un cuadro más claro dentro del contenedor.
   ─────────────────────────────────────────────────────────────────── */

.v-producto {
	display: flex; flex-direction: column;
	border: 1px solid var(--v-borde); border-radius: var(--v-r3);
	overflow: hidden; background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.v-producto:hover { border-color: var(--v-oro-500); box-shadow: var(--v-sombra); transform: translateY(-2px); }
.v-producto__enlace { display: block; color: inherit; }
.v-producto__enlace:hover { text-decoration: none; }
.v-producto__img { aspect-ratio: 1/1; background: var(--v-blanco); border-bottom: 1px solid var(--v-borde-suave); display: flex; align-items: center; justify-content: center; padding: 16px; }
.v-producto__img img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.v-producto__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.v-producto__sku { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--v-texto-3); }
.v-producto__nombre { font-size: 17px; font-weight: 600; color: var(--v-marino-900); }
.v-producto__desc { font-size: 14px; line-height: 1.5; color: var(--v-texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-producto__pie { margin-top: auto; padding: 0 18px 18px; }

/* ── Tarjeta de categoría / solución ──────────────────────────────── */

.v-tarjeta {
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--v-borde); border-radius: var(--v-r3); background: #fff;
	color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.v-tarjeta:hover { text-decoration: none; border-color: var(--v-oro-500); box-shadow: var(--v-sombra-alta); transform: translateY(-3px); }
.v-tarjeta__img { aspect-ratio: 4/3; background: var(--v-blanco); border-bottom: 1px solid var(--v-borde-suave); display: flex; align-items: center; justify-content: center; padding: var(--v-e3); overflow: hidden; }
.v-tarjeta__img img { max-height: 100%; object-fit: contain; }

/* Las soluciones llevan foto de ambiente, no producto recortado sobre
   blanco: van a sangre, sin el margen que enmarca una pieza suelta. */
.v-tarjeta__img--foto { padding: 0; background: var(--v-crema); }
.v-tarjeta__img--foto img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.v-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: var(--v-e3); flex: 1; }
.v-tarjeta__cuerpo h3 { font-size: 20px; }
.v-tarjeta__cuerpo p { font-size: 15px; line-height: 1.55; color: var(--v-texto-2); }
.v-tarjeta__meta { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--v-oro-700); }

.v-tarjeta--ancha { display: grid; grid-template-columns: 220px 1fr; }
.v-tarjeta--ancha .v-tarjeta__img { aspect-ratio: auto; height: 100%; }

/* ── Pasos ────────────────────────────────────────────────────────── */

.v-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--v-e3); }
.v-paso { display: flex; flex-direction: column; gap: 10px; padding: var(--v-e3); background: #fff; border: 1px solid var(--v-borde); border-top: 3px solid var(--v-oro-500); border-radius: var(--v-r3); }
.v-paso__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--v-rp); background: var(--v-marino-900); color: var(--v-oro-300); font-family: var(--v-fuente-titulo); font-weight: 700; font-size: 16px; }
.v-paso h3 { font-size: 18px; }
.v-paso p { font-size: 15px; line-height: 1.55; color: var(--v-texto-2); }
.v-paso__meta { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-oro-700); }

/* ── Datos duros ──────────────────────────────────────────────────── */

.v-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--v-e3); margin-block: var(--v-e4); }
.v-dato { display: flex; flex-direction: column; gap: 4px; padding: var(--v-e3); background: var(--v-crema); border-left: 3px solid var(--v-oro-500); border-radius: 0 var(--v-r2) var(--v-r2) 0; }
.v-dato__cifra { font-family: var(--v-fuente-titulo); font-size: 26px; font-weight: 700; color: var(--v-marino-900); letter-spacing: -0.02em; }
.v-dato__etiqueta { font-size: 14px; line-height: 1.45; color: var(--v-texto-2); }

/* ── Texto largo ──────────────────────────────────────────────────── */

.v-prose { max-width: 74ch; font-size: 17px; line-height: 1.7; color: var(--v-texto); }
.v-prose > * + * { margin-top: 1.1em; }
.v-prose h2 { margin-top: 1.9em; }
.v-prose h3 { margin-top: 1.6em; }
.v-prose h2 + p, .v-prose h3 + p { margin-top: .7em; }
.v-prose ul, .v-prose ol { padding-left: 1.35em; }
.v-prose li + li { margin-top: .5em; }
.v-prose strong { color: var(--v-marino-900); font-weight: 700; }
.v-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.v-prose--ancha { max-width: none; }

.v-bloque { padding-block: var(--v-e4); }
.v-bloque + .v-bloque { border-top: 1px solid var(--v-borde); }

.v-nota { padding: var(--v-e3); background: var(--v-arena); border-left: 3px solid var(--v-oro-500); border-radius: 0 var(--v-r2) var(--v-r2) 0; font-size: 15px; line-height: 1.6; color: var(--v-texto-2); }
.v-nota strong { color: var(--v-marino-900); }

.v-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--v-borde); border-radius: var(--v-r3); }
.v-tabla { width: 100%; min-width: 520px; font-size: 15px; }
.v-tabla th, .v-tabla td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--v-borde); vertical-align: top; }
.v-tabla thead th { background: var(--v-crema); font-family: var(--v-fuente-titulo); font-size: 13px; font-weight: 600; color: var(--v-marino-900); letter-spacing: 0; white-space: nowrap; }
.v-tabla tbody tr:last-child td { border-bottom: 0; }
.v-tabla td { color: var(--v-texto-2); }
.v-tabla td:first-child { color: var(--v-texto); font-weight: 600; }

/* ── Llamado a la acción ──────────────────────────────────────────── */

.v-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: var(--v-e4); background: var(--v-marino-700); border-radius: var(--v-r3); margin-block: var(--v-e4); }
.v-cta h2 { color: #fff; font-size: 28px; }
.v-cta p { color: var(--v-texto-inv-2); font-size: 17px; max-width: 62ch; }

/* ── Acordeón de preguntas ────────────────────────────────────────── */

.v-faq { border-top: 1px solid var(--v-borde); max-width: 900px; }
.v-faq__item { border-bottom: 1px solid var(--v-borde); }
.v-faq__pregunta {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
	width: 100%; padding: 20px 0; background: transparent; border: 0; cursor: pointer;
	font-family: var(--v-fuente-titulo); font-size: 18px; font-weight: 600;
	color: var(--v-marino-900); text-align: left; line-height: 1.4;
}
.v-faq__pregunta:hover { color: var(--v-oro-700); }
.v-faq__icono { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; transition: transform .2s ease; color: var(--v-oro-500); }
.v-faq__pregunta[aria-expanded="true"] .v-faq__icono { transform: rotate(45deg); }
.v-faq__respuesta { padding: 0 0 22px; font-size: 16px; line-height: 1.7; color: var(--v-texto-2); max-width: 72ch; }
.v-faq__respuesta > * + * { margin-top: .9em; }
.v-faq__respuesta[hidden] { display: none; }

/* ── Formularios ──────────────────────────────────────────────────── */

.v-form { display: flex; flex-direction: column; gap: var(--v-e3); }
.v-campos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--v-e3); }
.v-campo { display: flex; flex-direction: column; gap: 7px; }
.v-campo--ancho { grid-column: 1 / -1; }
.v-campo > label { font-size: 14px; font-weight: 600; color: var(--v-marino-900); }
.v-campo__ayuda { font-size: 13px; color: var(--v-texto-2); }
.v-campo__req { color: var(--v-oro-700); }

.v-input, .v-select, .v-textarea {
	width: 100%; min-height: 52px; padding: 13px 15px;
	font-family: var(--v-fuente-texto); font-size: 16px; color: var(--v-texto);
	background: #fff; border: 1.5px solid var(--v-borde); border-radius: var(--v-r2);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.v-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.v-input:hover, .v-select:hover, .v-textarea:hover { border-color: var(--v-texto-3); }
.v-input:focus-visible, .v-select:focus-visible, .v-textarea:focus-visible { border-color: var(--v-marino-700); }
.v-input[aria-invalid="true"], .v-textarea[aria-invalid="true"], .v-select[aria-invalid="true"] { border-color: var(--v-error); }
.v-select { appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2356617A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

.v-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--v-texto-2); }
.v-consent input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--v-marino-700); }

.v-error { font-size: 13px; font-weight: 600; color: var(--v-error); }
.v-aviso { padding: 14px 18px; border-radius: var(--v-r2); font-size: 15px; line-height: 1.55; }
.v-aviso--error { background: var(--v-error-bg); color: var(--v-error); border-left: 3px solid var(--v-error); }
.v-aviso--exito { background: var(--v-exito-bg); color: var(--v-exito); border-left: 3px solid var(--v-exito); }
.v-trampa { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* ── Descarga de catálogo ─────────────────────────────────────────── */

.v-catalogo { display: grid; grid-template-columns: 340px 1fr; gap: var(--v-e4); align-items: start; padding: var(--v-e4); background: #fff; border: 1px solid var(--v-borde); border-radius: var(--v-r3); }
.v-catalogo__portada { border-radius: var(--v-r2); box-shadow: var(--v-sombra-alta); overflow: hidden; }
.v-catalogo__cuerpo { display: flex; flex-direction: column; gap: var(--v-e2); }

/* ── Pie ──────────────────────────────────────────────────────────── */

.v-pie { background: var(--v-marino-900); color: var(--v-texto-inv-3); padding-block: var(--v-e5) var(--v-e4); font-size: 15px; }
.v-pie__rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--v-e4); }
.v-pie h3 { color: var(--v-oro-300); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--v-e2); }
.v-pie ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.v-pie a { color: var(--v-texto-inv-2); }
.v-pie a:hover { color: var(--v-oro-300); }
.v-pie__marca { display: flex; flex-direction: column; gap: var(--v-e2); max-width: 340px; }
.v-pie__marca img { height: 60px; width: auto; }
.v-pie__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-e2); margin-top: var(--v-e5); padding-top: var(--v-e3); border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: var(--v-texto-inv-3); }
.v-pie__legal a { color: var(--v-texto-inv-3); }

/* ── Migas ────────────────────────────────────────────────────────── */

.v-migas { padding-block: 18px; font-size: 14px; color: var(--v-texto-2); border-bottom: 1px solid var(--v-borde); }
.v-migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-migas li::after { content: "›"; margin-left: 8px; color: var(--v-gris-suave); }
.v-migas li:last-child::after { content: none; }
.v-migas a { color: var(--v-texto-2); }
.v-migas [aria-current] { color: var(--v-marino-900); font-weight: 600; }

/* ── Encabezado de página interior ───────────────────────────────── */

.v-cabeza { padding-block: var(--v-e5) var(--v-e4); background: var(--v-crema); border-bottom: 1px solid var(--v-borde); }
.v-cabeza__interno { display: flex; flex-direction: column; gap: var(--v-e2); max-width: 860px; }
.v-cabeza__sub { font-size: 19px; line-height: 1.6; color: var(--v-texto-2); }

/* ── WhatsApp flotante ────────────────────────────────────────────── */

/* El verde oficial de WhatsApp, con blanco encima, como lo pinta la propia
   marca. Da 2:1 de contraste, por debajo de AA, y se acepta a sabiendas: el
   botón solo lleva el logo y la palabra «WhatsApp», y WCAG no le exige
   contraste a un logotipo ni a un nombre de marca. Antes era #128C7E, el
   verde azulado de la paleta vieja, y el cliente notó que no era el suyo. */
.v-wa {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	display: inline-flex; align-items: center; gap: 10px;
	height: 56px; padding: 0 20px 0 16px;
	background: #25D366; color: #fff; font-weight: 700; font-size: 15px;
	border-radius: var(--v-rp); box-shadow: var(--v-sombra-alta);
}
.v-wa:hover { background: #1DA851; color: #fff; text-decoration: none; }
.v-wa__texto { display: inline; }

/* Dos líneas de WhatsApp. El <details> hace de desplegable sin JavaScript;
   el contenedor toma el sitio fijo y el resumen se queda quieto dentro. */
.v-wa-grupo { position: fixed; right: 20px; bottom: 20px; z-index: 90; }
.v-wa-grupo .v-wa { position: static; cursor: pointer; list-style: none; }
.v-wa-grupo .v-wa::-webkit-details-marker { display: none; }
.v-wa-grupo .v-wa::marker { content: ""; }
.v-wa__lista {
	position: absolute; right: 0; bottom: calc(100% + 10px);
	min-width: 200px; margin: 0; padding: 6px; list-style: none;
	background: #fff; border: 1px solid var(--v-borde);
	border-radius: var(--v-r3); box-shadow: var(--v-sombra-alta);
}
.v-wa__lista a {
	display: flex; align-items: center; min-height: 46px; padding: 0 14px;
	color: var(--v-marino-700); font-weight: 600; font-size: 15px;
	border-radius: var(--v-r2);
}
.v-wa__lista a:hover { background: var(--v-crema); color: var(--v-marino-700); text-decoration: none; }
.v-wa__num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Figura a todo el ancho del bloque, para las fotos de marca. */
.v-figura-ancha { margin: var(--v-e4) 0 0; }
.v-figura-ancha img {
	display: block; width: 100%; height: auto;
	border-radius: var(--v-r3); border: 1px solid var(--v-borde);
}

/* ── La marca aplicada ────────────────────────────────────────────── */

.v-marcas {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v-e2);
}
.v-marcas__pieza {
	margin: 0; overflow: hidden;
	border: 1px solid var(--v-borde); border-radius: var(--v-r3);
	background: #fff;
}
.v-marcas__pieza img {
	display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 900px) {
	.v-marcas { grid-template-columns: repeat(2, 1fr); }
}

/* ── Barra fija móvil ─────────────────────────────────────────────── */

.v-barra-movil { display: none; }

/* ── Filtros de catálogo ──────────────────────────────────────────── */

.v-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-e2); padding: var(--v-e3); background: var(--v-crema); border: 1px solid var(--v-borde); border-radius: var(--v-r3); margin-bottom: var(--v-e4); }
.v-filtros__grupo { display: flex; align-items: center; gap: 9px; }
.v-filtros__grupo > label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-texto-3); }
.v-filtros .v-select { min-height: 44px; width: auto; min-width: 190px; font-size: 15px; }
.v-filtros__conteo { margin-left: auto; font-size: 14px; color: var(--v-texto-2); }

/* ── Paginación ───────────────────────────────────────────────────── */

.v-paginacion { display: flex; justify-content: center; gap: 8px; margin-top: var(--v-e5); }
.v-paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; height: 46px; padding: 0 12px;
	border: 1px solid var(--v-borde); border-radius: var(--v-r2);
	color: var(--v-marino-700); font-weight: 600; background: #fff;
}
.v-paginacion .page-numbers:hover { border-color: var(--v-oro-500); text-decoration: none; }
.v-paginacion .page-numbers.current { background: var(--v-marino-700); border-color: var(--v-marino-700); color: #fff; }
.v-paginacion .dots { border: 0; background: transparent; }

/* ── Ficha de producto ────────────────────────────────────────────── */

.v-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-e5); align-items: start; padding-block: var(--v-e5); }
.v-ficha__galeria { position: sticky; top: calc(var(--v-alto-encabezado) + 24px); }
.v-ficha__img { aspect-ratio: 1/1; background: var(--v-blanco); border: 1px solid var(--v-borde); border-radius: var(--v-r3); display: flex; align-items: center; justify-content: center; padding: var(--v-e4); }
.v-ficha__info { display: flex; flex-direction: column; gap: var(--v-e3); }
.v-ficha__especificaciones { width: 100%; font-size: 15px; }
.v-ficha__especificaciones th { width: 40%; padding: 12px 0; text-align: left; font-family: var(--v-fuente-texto); font-weight: 600; color: var(--v-texto-2); border-bottom: 1px solid var(--v-borde); vertical-align: top; }
.v-ficha__especificaciones td { padding: 12px 0; color: var(--v-texto); border-bottom: 1px solid var(--v-borde); }
.v-ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--v-e2); padding: var(--v-e3); background: var(--v-crema); border: 1px solid var(--v-borde); border-radius: var(--v-r3); }

/* ── Galería de proyectos ─────────────────────────────────────────── */

/* La tarjeta del proyecto es la del catálogo con una diferencia: la foto
   se recorta a llenar en vez de encajar dentro. Son fotos de ambiente, no
   artículos sobre fondo blanco, así que dejarlas con aire alrededor las
   hacía ver flotando. */
.v-proyecto {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--v-borde); border-radius: var(--v-r3);
	overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.v-proyecto:hover { text-decoration: none; border-color: var(--v-oro-500); box-shadow: var(--v-sombra-alta); transform: translateY(-3px); }
.v-proyecto__img { position: relative; aspect-ratio: 4/3; background: var(--v-crema); overflow: hidden; }
.v-proyecto__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.v-proyecto:hover .v-proyecto__img img { transform: scale(1.03); }
.v-proyecto__cuenta {
	position: absolute; left: 12px; bottom: 12px;
	padding: 5px 11px; border-radius: var(--v-rp);
	background: rgba(22,35,63,.86); color: #fff;
	font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.v-proyecto__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: var(--v-e3); flex: 1; }
.v-proyecto__cuerpo h3 { font-size: 20px; }
.v-proyecto__cuerpo p { font-size: 15px; line-height: 1.55; color: var(--v-texto-2); }

/* ── Detalle del proyecto ─────────────────────────────────────────── */

.v-caso { display: grid; grid-template-columns: 1fr 360px; gap: var(--v-e5); align-items: start; }
.v-caso__ficha {
	position: sticky; top: calc(var(--v-alto-encabezado) + 24px);
	padding: var(--v-e3); background: var(--v-crema);
	border: 1px solid var(--v-borde); border-radius: var(--v-r3);
}
.v-caso__ficha-tit { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-texto-3); }
.v-caso__ficha-tit + * { margin-top: var(--v-e2); }
.v-caso__ficha h3.v-caso__ficha-tit { margin-top: var(--v-e3); padding-top: var(--v-e3); border-top: 1px solid var(--v-borde); }
.v-caso__datos { margin: 0; font-size: 15px; }
.v-caso__datos dt { font-weight: 600; color: var(--v-texto-2); font-size: 13px; }
.v-caso__datos dd { margin: 2px 0 14px; color: var(--v-texto); }
.v-caso__datos dd:last-child { margin-bottom: 0; }
.v-caso__piezas { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.55; color: var(--v-texto); }
.v-caso__piezas li + li { margin-top: 8px; }

/* ── Rejilla de fotos ─────────────────────────────────────────────── */

.v-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--v-e3); }
.v-galeria__pieza { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.v-galeria__enlace {
	display: block; aspect-ratio: 4/5; overflow: hidden;
	background: #fff; border: 1px solid var(--v-borde); border-radius: var(--v-r3);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.v-galeria__enlace:hover { border-color: var(--v-oro-500); box-shadow: var(--v-sombra-alta); }
.v-galeria__enlace img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.v-galeria__enlace:hover img { transform: scale(1.03); }
.v-galeria__pieza figcaption { font-size: 14px; line-height: 1.5; color: var(--v-texto-2); }

/* La primera foto ocupa dos columnas: es la del conjunto y es la que
   ordena la lectura de las demás. Solo desde dos columnas para arriba. */
@media (min-width: 800px) {
	.v-galeria__pieza:first-child { grid-column: span 2; }
	.v-galeria__pieza:first-child .v-galeria__enlace { aspect-ratio: 16/10; }
}

/* ── Visor de fotos ───────────────────────────────────────────────── */

.v-visor {
	width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
	margin: 0; padding: 0; border: 0; background: transparent; color: #fff;
	overflow: hidden;
}
.v-visor::backdrop { background: rgba(10,16,29,.93); }
.v-visor__marco {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--v-e2); width: 100%; height: 100%; padding: 64px 76px;
}
.v-visor__img {
	max-width: 100%; max-height: calc(100dvh - 148px);
	width: auto; height: auto; object-fit: contain;
	border-radius: var(--v-r3); background: rgba(255,255,255,.04);
}
.v-visor__pie { max-width: 62ch; text-align: center; font-size: 15px; line-height: 1.5; color: var(--v-texto-inv-2); }
.v-visor__cuenta {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--v-texto-inv-3);
}
.v-visor__mando, .v-visor__cerrar {
	position: absolute; display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; padding: 0; cursor: pointer;
	color: #fff; background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
	transition: background-color .15s ease;
}
.v-visor__mando:hover, .v-visor__cerrar:hover { background: rgba(255,255,255,.22); }
.v-visor__mando[disabled] { opacity: .3; cursor: default; }
.v-visor__mando--antes   { left: 16px;  top: 50%; transform: translateY(-50%); }
.v-visor__mando--despues { right: 16px; top: 50%; transform: translateY(-50%); }
.v-visor__cerrar { top: 16px; right: 16px; }

/* ── Movimiento ───────────────────────────────────────────────────── */

/* El estado visible es este; el oculto lo pone el guion al arrancar, y solo
   si el navegador sabe observar y el sistema no pide menos movimiento. Al
   revés —ocultar aquí y mostrar con JavaScript— cualquier falla del guion
   dejaría la página en blanco. */

.v-mov [data-velarte-entra] { opacity: 0; transform: translateY(14px); }
.v-mov [data-velarte-entra].v-visible {
	opacity: 1;
	transform: none;
	/* Solo opacidad y transform: corren en el compositor y no reflujan.
	   Animar alto o márgenes provocaría saltos de maquetación. */
	transition: opacity .45s ease-out, transform .45s ease-out;
}

/* El encabezado gana sombra al bajar y suelta la transparencia. No cambia
   de alto a propósito: es sticky y ocupa su lugar en el flujo, así que
   encogerlo empujaría hacia arriba todo lo que tiene debajo. */
.v-encabezado { transition: box-shadow .2s ease, background-color .2s ease; }
.v-encabezado[data-bajado] { background: #fff; box-shadow: 0 6px 22px rgba(22,35,63,.13); }

/* Los pasos del asesor se cruzan en vez de cambiar de golpe. */
.v-asesor__pregunta,
.v-asesor__opciones { transition: opacity .18s ease, transform .18s ease; }
.v-asesor__caja[data-cambiando] .v-asesor__pregunta,
.v-asesor__caja[data-cambiando] .v-asesor__opciones { opacity: 0; transform: translateY(6px); }

/* Acercamiento de la foto al pasar el cursor. */
.v-producto__img, .v-asesor__img { overflow: hidden; }
.v-tarjeta__img img,
.v-producto__img img,
.v-asesor__img img { transition: transform .4s ease; }
.v-tarjeta:hover .v-tarjeta__img img,
.v-producto:hover .v-producto__img img,
.v-asesor__op:hover .v-asesor__img img { transform: scale(1.03); }

/* La global de arriba acorta las duraciones; aquí se anula el efecto
   entero, para que nada quede a medio camino. */
@media (prefers-reduced-motion: reduce) {
	.v-mov [data-velarte-entra] { opacity: 1; transform: none; }
	.v-tarjeta:hover .v-tarjeta__img img,
	.v-producto:hover .v-producto__img img,
	.v-asesor__op:hover .v-asesor__img img { transform: none; }
	.v-asesor__caja[data-cambiando] .v-asesor__pregunta,
	.v-asesor__caja[data-cambiando] .v-asesor__opciones { opacity: 1; transform: none; }
}

/* ── Utilidades ───────────────────────────────────────────────────── */

.v-centro { text-align: center; }
.v-max-60 { max-width: 60ch; }
.v-mt-4 { margin-top: var(--v-e4); }
.v-mt-5 { margin-top: var(--v-e5); }
.v-mb-4 { margin-bottom: var(--v-e4); }
.v-lista-limpia { list-style: none; padding: 0; }

/* ═══ Adaptable ══════════════════════════════════════════════════════ */

/* Con el logo a 84 px el menú se aprieta antes de que cambien los márgenes. */
@media (max-width: 1320px) {
	.v-nav, .v-nav ul { gap: 14px; }
	.v-nav a { font-size: 14px; }
}

@media (max-width: 1240px) {
	.v-nav, .v-nav ul { gap: 11px; }
}

@media (max-width: 1180px) {
	.v-nav, .v-nav ul { gap: 14px; }
	:root { --v-margen: 40px; --v-e6: 64px; }
	.v-rejilla--5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.v-pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Entre 981 y 1100 el menú completo y el logo grande no caben juntos. */
@media (max-width: 1100px) {
	.v-encabezado__fila { gap: 14px; }
	.v-nav, .v-nav ul { gap: 8px; }
	.v-nav a { font-size: 13px; }
	.v-logo img { height: 64px; }
}

@media (max-width: 1040px) {
	.v-nav, .v-nav ul { gap: 6px; }
}

@media (max-width: 980px) {
	:root { --v-alto-encabezado: 80px; }

	/* Sin backdrop-filter en el teléfono. Un ancestro con filtro se vuelve
	   el contenedor de referencia de sus descendientes position:fixed, así
	   que el panel del menú se medía contra la barra de 76 px en lugar de
	   contra la pantalla y se abría como una rendija. */
	.v-encabezado {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--v-blanco);
	}
	.v-logo img { height: 56px; }
	.v-pie .v-logo img { height: 48px; }
	.v-hamburguesa { display: inline-flex; }
	/* El panel se despliega hacia abajo, no desde la derecha: un elemento
	   fijo colocado fuera del borde derecho ensancha el documento y provoca
	   desplazamiento horizontal en el teléfono. */
	.v-nav {
		position: fixed; inset: var(--v-alto-encabezado) 0 0 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; padding: var(--v-e3) var(--v-margen) 120px;
		overflow-y: auto; border-top: 1px solid var(--v-borde);
		opacity: 0; visibility: hidden; transform: translateY(-10px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
		pointer-events: none;
	}
	.v-nav[data-abierto="true"] {
		opacity: 1; visibility: visible; transform: translateY(0);
		pointer-events: auto;
	}
	.v-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.v-nav li { border-bottom: 1px solid var(--v-borde); }
	.v-nav a { display: block; padding: 16px 0; font-size: 17px; font-weight: 600; }
	.v-nav .current-menu-item > a::after { display: none; }
	.v-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; padding: 0 0 10px 16px; margin: 0; min-width: 0;
	}
	.v-nav .sub-menu a { padding: 10px 0; font-size: 15px; font-weight: 500; }
	.v-encabezado__acciones .v-btn { display: none; }

	.v-portada__rejilla { grid-template-columns: 1fr; gap: var(--v-e4); padding-block: var(--v-e4) var(--v-e5); }
	.v-portada__pieza { max-width: 100%; padding: 20px 22px; }
	.v-confianza__rejilla { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.v-rejilla--4, .v-rejilla--5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.v-rejilla--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.v-ficha { grid-template-columns: 1fr; gap: var(--v-e4); }
	.v-ficha__galeria { position: static; }
	.v-caso { grid-template-columns: 1fr; gap: var(--v-e4); }
	.v-caso__ficha { position: static; }
	.v-catalogo { grid-template-columns: 1fr; }
	.v-catalogo__portada { max-width: 320px; }
	.v-tarjeta--ancha { grid-template-columns: 1fr; }
	.v-pie__rejilla { grid-template-columns: repeat(2, minmax(0,1fr)); }

	.v-wa { bottom: 84px; padding: 0; width: 56px; justify-content: center; }
	.v-wa-grupo { bottom: 84px; }
	.v-wa-grupo .v-wa { bottom: auto; }
	.v-wa__texto { display: none; }

	.v-barra-movil {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid var(--v-borde);
		box-shadow: 0 -4px 20px rgba(22,35,63,.10);
	}
	.v-barra-movil .v-btn { min-height: 48px; font-size: 15px; padding: 0 12px; }
	body { padding-bottom: 74px; }
}

@media (max-width: 620px) {
	:root { --v-margen: 20px; --v-e6: 52px; --v-e5: 40px; }

	.v-tarjeta-temp { grid-template-columns: 96px 1fr; gap: 14px; }
	.v-tarjeta-temp__img { height: 128px; }

	.v-galeria { grid-template-columns: 1fr; }

	/* Los mandos se quedan a los costados y el contador sube al
	   encabezado. Abajo vive la barra fija de cotizar: cualquier control
	   del visor que caiga ahí se toca por error al cerrar. */
	.v-visor__marco { padding: 72px 12px 100px; }
	.v-visor__img { max-height: calc(100dvh - 244px); }
	.v-visor__mando { width: 44px; height: 44px; }
	.v-visor__mando--antes { left: 8px; }
	.v-visor__mando--despues { right: 8px; }
	.v-visor__cuenta { top: 30px; left: 20px; bottom: auto; transform: none; }
	.v-visor__cerrar { width: 44px; height: 44px; }
	body { font-size: 16px; }
	.v-seccion { padding-block: var(--v-e6); }
	.v-rejilla--2, .v-rejilla--3, .v-rejilla--4, .v-rejilla--5 { grid-template-columns: 1fr; }
	.v-rejilla--auto { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--v-e2); }
	.v-confianza__rejilla { grid-template-columns: 1fr; }
	.v-campos { grid-template-columns: 1fr; }
	.v-pie__rejilla { grid-template-columns: 1fr; gap: var(--v-e3); }
	.v-portada__sub { font-size: 17px; }
	.v-portada__pieza { padding: 14px 16px; }
	.v-cta { padding: var(--v-e3); }
	.v-btn { width: 100%; }
	.v-btns .v-btn { width: 100%; }
	.v-producto__cuerpo { padding: 12px 14px 14px; gap: 6px; }
	.v-producto__nombre { font-size: 15px; }
	.v-producto__desc { font-size: 13px; }
	.v-producto__pie { padding: 0 14px 14px; }
	.v-prose { font-size: 16px; }
}

@media print {
	.v-encabezado, .v-pie, .v-wa, .v-barra-movil, .v-filtros, .v-cta { display: none !important; }
	body { padding: 0; font-size: 12pt; color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ═══════════════════════════════════════════════════════════════════
   Componentes añadidos durante la implementación
   ═══════════════════════════════════════════════════════════════════ */

/* El botón de "agregar a mi cotización" necesita JavaScript para hacer algo.
   Se muestra solo cuando el script confirma que está corriendo; el resto de
   la ficha y el formulario funcionan igual sin él. */
[data-velarte-agregar] { display: none; }
[data-velarte-carrito="listo"] [data-velarte-agregar] { display: inline-flex; }
.v-producto__pie:has([data-velarte-agregar]) { padding: 0; }
[data-velarte-carrito="listo"] .v-producto__pie:has([data-velarte-agregar]) { padding: 0 18px 18px; }

/* Dato del cliente todavía sin confirmar, visto por un visitante */
.v-pend-vacio { color: var(--v-texto-2); font-style: italic; }

/* Cierre de sección */
.v-cierre { display: flex; flex-direction: column; gap: var(--v-e3); max-width: 780px; }
.v-cierre h2 { font-size: clamp(26px, 3vw, 36px); }
.v-cierre p { font-size: 18px; line-height: 1.6; }

/* Formularios en dos columnas: formulario + apoyo */
.v-cotizar { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--v-e5); align-items: start; }
.v-cotizar__lado { position: sticky; top: calc(var(--v-alto-encabezado) + 24px); display: flex; flex-direction: column; gap: var(--v-e3); }
.v-form-envoltura { display: flex; flex-direction: column; gap: var(--v-e3); }

/* ── Selección de artículos para cotizar ──────────────────────────────
   La misma fila se usa en el panel flotante y dentro del formulario.
   No es un carrito: no hay precio ni total, solo cuántas piezas y qué
   marcado lleva cada artículo.
   ─────────────────────────────────────────────────────────────────── */

.v-seleccion > div { display: flex; flex-direction: column; gap: 10px; }

.v-seleccion__item {
	display: grid; gap: var(--v-e2); align-items: start;
	padding: 14px; background: var(--v-crema);
	border: 1px solid var(--v-borde); border-radius: var(--v-r3);
}
.v-seleccion__item--foto { grid-template-columns: 66px 1fr; }

.v-seleccion__img {
	width: 66px; height: 66px; background: #fff;
	border: 1px solid var(--v-borde-suave); border-radius: var(--v-r2);
	display: flex; align-items: center; justify-content: center; padding: 5px; overflow: hidden;
}
.v-seleccion__img img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

.v-seleccion__datos { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.v-seleccion__nombre { font-family: var(--v-fuente-titulo); font-size: 15px; font-weight: 600; color: var(--v-marino-900); line-height: 1.3; }
a.v-seleccion__nombre:hover { color: var(--v-oro-700); }

.v-seleccion__controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-seleccion__cantidad { width: 92px; min-height: 42px; padding: 8px 10px; font-size: 15px; }
.v-seleccion__unidad { font-size: 13px; color: var(--v-texto-2); }
.v-seleccion__nota { min-height: 42px; padding: 8px 10px; font-size: 14px; }

.v-seleccion__quitar {
	margin-left: auto; background: transparent; border: 0; padding: 8px 2px; cursor: pointer;
	font-size: 13px; font-weight: 600; color: var(--v-oro-700);
	text-decoration: underline; text-underline-offset: 3px;
}
.v-seleccion__quitar:hover { color: var(--v-error); }

.v-seleccion--formulario { display: flex; flex-direction: column; gap: var(--v-e2); }

/* ── Panel flotante ───────────────────────────────────────────────── */

.v-panel { position: fixed; inset: 0; z-index: 200; }
.v-panel[hidden] { display: none; }
.v-panel__fondo { position: absolute; inset: 0; background: rgba(22,35,63,.5); animation: v-aparece .18s ease; }

.v-panel__caja {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(440px, 100%);
	display: flex; flex-direction: column;
	background: #fff; box-shadow: -8px 0 40px rgba(22,35,63,.22);
	animation: v-entra .22s ease;
}

@keyframes v-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-entra { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.v-panel__fondo, .v-panel__caja { animation: none; }
}

.v-panel__cabeza {
	display: flex; align-items: center; justify-content: space-between; gap: var(--v-e2);
	padding: var(--v-e3) var(--v-e3) var(--v-e2);
	border-bottom: 1px solid var(--v-borde);
}
.v-panel__cabeza h2 { font-size: 20px; }

.v-panel__cerrar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; background: transparent;
	border: 1px solid var(--v-borde); border-radius: var(--v-r2);
	color: var(--v-marino-700); cursor: pointer;
}
.v-panel__cerrar:hover { background: var(--v-crema); }

.v-panel__cuerpo { flex: 1; overflow-y: auto; padding: var(--v-e3) var(--v-e3) var(--v-e4); }
.v-panel__vacio { font-size: 15px; line-height: 1.6; color: var(--v-texto-2); }
.v-panel__ayuda { margin-top: var(--v-e2); font-size: 13px; line-height: 1.55; color: var(--v-texto-2); }

.v-panel__pie {
	display: flex; flex-direction: column; gap: 10px;
	padding: var(--v-e3); border-top: 1px solid var(--v-borde); background: var(--v-crema);
}
.v-panel__vaciar {
	background: transparent; border: 0; padding: 6px; cursor: pointer;
	font-size: 13px; font-weight: 600; color: var(--v-texto-2);
	text-decoration: underline; text-underline-offset: 3px;
}
.v-panel__vaciar:hover { color: var(--v-error); }

body.v-panel-abierto { overflow: hidden; }

/* Catálogos descargables */
.v-catalogos { display: flex; flex-direction: column; gap: var(--v-e4); }
.v-catalogos .v-form { margin-top: var(--v-e2); padding-top: var(--v-e3); border-top: 1px solid var(--v-borde); }

/* Rejilla del logo textual cuando no hay imagen */
.v-logo__texto { font-family: var(--v-fuente-titulo); font-size: 24px; font-weight: 700; color: var(--v-marino-900); letter-spacing: -0.02em; }
.v-pie .v-logo__texto { color: #fff; }

@media (max-width: 980px) {
	.v-cotizar { grid-template-columns: 1fr; gap: var(--v-e4); }
	.v-cotizar__lado { position: static; }
}

@media (max-width: 620px) {
	.v-panel__caja { width: 100%; top: auto; height: 88vh; border-radius: var(--v-r3) var(--v-r3) 0 0; }
	.v-seleccion__item--foto { grid-template-columns: 54px 1fr; }
	.v-seleccion__img { width: 54px; height: 54px; }
}