/*
 * Estilo Showroom: el mayorista de moda que vende por Instagram (Once, Flores, Avellaneda) y atiende a
 * revendedoras por WhatsApp.
 * Portada: la foto a sangre ocupa todo el hero (velo horizontal medido por velos.py del lado del texto) y a la
 * derecha se montan dos fotos en formato historia (9:16, --vt-foto-2 y --vt-foto-3; sin fotos secundarias, recortes
 * de la principal) con su barra de avance arriba. Interiores: foto a sangre con la barra de avance arriba.
 * Grotesca ancha de vidriera (Syne) con una sans neutra; rubros como historias destacadas (foto en círculo con aro
 * del color de marca), productos en tarjeta blanca con etiqueta-sticker y botón "Pedir" de ancho completo, banda
 * de números y temporadas en el color de marca, botones píldora.
 * Efecto: las tarjetas suben apenas al entrar en pantalla; el círculo de las historias suma un segundo aro al pasar.
 * Inspiración: distritomoda.com.ar + historias de Instagram (ver estilo.json).
 */
:root {
	--vt-radio: 18px;
	--vt-sombra: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 40px -12px rgba(0, 0, 0, .18);
	--s-tinte: color-mix(in srgb, var(--vt-primario) 9%, #fff);
	--s-tinte-2: color-mix(in srgb, var(--vt-primario) 16%, #fff);
	--s-aro: conic-gradient(from 210deg, var(--vt-primario), var(--vt-primario-oscuro), var(--vt-acento), color-mix(in srgb, var(--vt-primario) 55%, #fff), var(--vt-primario));
}
body { --s-margen: max(var(--wp--style--root--padding-left, 1.25rem), calc((100% - 1240px) / 2)); }
body.vt-estilo-showroom { background: #fff; }

/* ---------- Tipografía ---------- */
:where(h1, h2, h3) { text-wrap: balance; }
.vt-bajada, .vt-card p { text-wrap: pretty; }
.vt-cabeza { max-width: 820px; }
.vt-cabeza.vt-centrado .vt-bajada { margin-inline: auto; max-width: 62ch; }
.vt-overline {
	display: inline-block; font-family: var(--wp--preset--font-family--texto); font-weight: 600; font-size: .78rem !important;
	letter-spacing: .08em; color: var(--vt-primario-oscuro); background: var(--s-tinte-2); border-radius: 999px; padding: .42rem .95rem !important;
}
.vt-overline::before { width: 7px; height: 7px; border-radius: 50%; background: var(--vt-primario); margin-right: .55rem; vertical-align: .1em; }
.vt-oscuro .vt-overline { background: rgba(255, 255, 255, .12); color: #fff; opacity: 1; }
.vt-oscuro .vt-overline::before { background: #fff; }
.vt-cabeza.vt-centrado .vt-overline { margin-inline: auto; }
:where(h1, h2, h3) em { color: var(--vt-primario); }
:where(.vt-hero, .vt-oscuro, .vt-cta) :where(h1, h2, h3) em { color: inherit; text-decoration: underline; text-decoration-color: var(--vt-primario); text-decoration-thickness: .12em; text-underline-offset: .12em; }

/* ---------- Cabecera blanca con el menú en píldoras ---------- */
.vt-cabecera-wrap { background: #fff; border-bottom: 1px solid var(--vt-linea); }
.vt-cabecera .wp-block-navigation { font-weight: 600; font-size: .95rem; gap: .3rem; }
.vt-cabecera .wp-block-navigation-item__content { border: 0; border-radius: 999px; padding: .55rem 1rem !important; transition: background .15s; }
.vt-cabecera .wp-block-navigation-item__content:hover,
.vt-cabecera .current-menu-item > .wp-block-navigation-item__content { background: var(--s-tinte); color: var(--vt-primario-oscuro); }
.vt-cabecera .wp-block-navigation__submenu-container { border-radius: 16px; padding: .5rem !important; }
.vt-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: 10px; }
.vt-cabecera__cta .wp-block-button__link { padding: .8rem 1.35rem !important; }
.vt-cabecera .has-child:not(.open-on-click) > .wp-block-navigation-item__content { padding-right: .25rem !important; }
.vt-cabecera .wp-block-navigation__submenu-icon { margin-right: .7rem; }
.vt-cabecera .is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--titulos); font-size: 1.6rem !important; padding: .35rem 0 !important; }
.vt-cabecera .is-menu-open .wp-block-navigation-item__content:hover { background: transparent; color: #fff; }
/* Menú del celular: la página activa no lleva la píldora clara (con texto blanco no se leía), va subrayada */
.vt-cabecera .is-menu-open .current-menu-item > .wp-block-navigation-item__content { background: transparent; color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
/* El botón de WhatsApp del menú es del color principal, igual que el panel: en blanco para que se vea */
.vt-cabecera .is-menu-open .vt-solo-movil .wp-block-navigation-item__content { background: #fff !important; color: var(--vt-primario-oscuro) !important; }
.vt-cabecera .wp-block-navigation__responsive-container.is-menu-open { background: var(--vt-panel) !important; }

/* ---------- Botones: píldoras ---------- */
.wp-block-button__link { border-radius: 999px; font-family: var(--wp--preset--font-family--texto); font-weight: 600; letter-spacing: .01em; padding: 1rem 1.7rem !important; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button:not(.is-style-whatsapp):not(.is-style-contorno) .wp-block-button__link::after { content: "\2197"; display: inline-block; margin-left: .55em; font-weight: 400; transition: transform .2s; }
.wp-block-button__link:hover::after { transform: translate(2px, -2px); }
.vt-cabecera__cta .wp-block-button__link::after { content: none !important; }
.is-style-contorno .wp-block-button__link { box-shadow: inset 0 0 0 2px currentColor; }

/* ---------- Hero: foto a sangre + dos historias montadas a la derecha ---------- */
.vt-seccion.vt-hero { min-height: min(calc(100svh - 7rem), 820px); padding-block: clamp(4rem, 8vw, 6rem) !important; overflow: hidden; }
.vt-hero h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.03; max-width: 16ch; font-weight: 700; letter-spacing: -.025em; }
.vt-hero .vt-overline { background: var(--vt-panel); color: #fff; text-shadow: none; }
.vt-hero .vt-overline::before { background: #fff; }
.vt-hero .vt-bajada { max-width: 46ch; }
.vt-hero.vt-hero > .alignwide { position: static; }
.vt-hero:not(.vt-hero--chico) > .alignwide > * { max-width: min(610px, 46vw); position: relative; z-index: 1; }
.vt-seccion.vt-hero .vt-hero__datos { display: inline-flex; flex-wrap: wrap; gap: .3rem; font-weight: 600; font-size: .9rem !important; margin-top: 2rem !important; text-shadow: none; }
/* Las historias: dos marcos 9:16 con la barra de avance (tres tramos, el primero lleno) y esquinas redondeadas.
   El de atrás es la foto 3; el de adelante, la foto 2. Sin fotos secundarias, recortes de la principal. */
.vt-hero:not(.vt-hero--chico)::after,
.vt-hero:not(.vt-hero--chico) > .alignwide::after {
	content: ""; position: absolute; z-index: 0; aspect-ratio: 9 / 16; border-radius: 22px; box-sizing: border-box;
	border: 5px solid #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); pointer-events: none;
	background-repeat: no-repeat; background-color: var(--vt-oscuro);
	--s-barra: linear-gradient(#fff, #fff) 12px 12px / calc((100% - 32px) / 3) 3px,
		linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) calc(12px + (100% - 32px) / 3 + 4px) 12px / calc((100% - 32px) / 3) 3px,
		linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) calc(100% - 12px) 12px / calc((100% - 32px) / 3) 3px;
}
.vt-hero:not(.vt-hero--chico)::after {
	height: 66%; top: 9%; right: calc(var(--s-margen) - 1rem); rotate: 4deg;
	background: var(--s-barra), var(--vt-foto-3, var(--vt-foto)) 70% 60% / cover no-repeat; background-repeat: no-repeat;
}
.vt-hero:not(.vt-hero--chico) > .alignwide::after {
	height: 72%; bottom: 8%; right: calc(var(--s-margen) + clamp(150px, 15vw, 230px)); rotate: -3deg;
	background: var(--s-barra), var(--vt-foto-2, var(--vt-foto)) 30% 50% / cover no-repeat; background-repeat: no-repeat;
	border-color: var(--vt-primario); z-index: 1;
}
/* Botones del hero: el principal en el color de marca, el de contorno en blanco */
.vt-hero .is-style-contorno .wp-block-button__link:hover, .vt-cta .is-style-contorno .wp-block-button__link:hover { background: #fff; color: var(--vt-tinta); }
@media (max-width: 1100px) and (min-width: 782px) {
	.vt-hero:not(.vt-hero--chico) > .alignwide::after { right: calc(var(--s-margen) + 13vw); height: 60%; }
	.vt-hero:not(.vt-hero--chico)::after { height: 56%; }
	.vt-hero:not(.vt-hero--chico) > .alignwide > * { max-width: 52vw; }
}
@media (max-width: 781px) {
	/* Celular: arriba queda la foto libre con las dos historias chicas; el texto abajo */
	.vt-seccion.vt-hero:not(.vt-hero--chico) { min-height: calc(100svh - 110px); align-items: flex-end; padding-top: 15rem !important; padding-bottom: 2.5rem !important; }
	.vt-hero:not(.vt-hero--chico)::after { height: 190px; top: 1.6rem; right: 1.1rem; border-width: 4px; border-radius: 16px; }
	.vt-hero:not(.vt-hero--chico) > .alignwide::after { height: 170px; top: 2.6rem; bottom: auto; right: calc(1.1rem + 96px); border-width: 4px; border-radius: 16px; }
	.vt-hero:not(.vt-hero--chico) > .alignwide > * { max-width: 100%; }
	.vt-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
	.vt-seccion.vt-hero .vt-hero__datos { margin-top: 1.4rem !important; font-size: .85rem !important; }
}
/* Interiores: foto a sangre con la barra de avance de historia arriba */
.vt-seccion.vt-hero--chico { min-height: 440px; }
.vt-hero--chico h1 { font-size: clamp(2rem, 3.8vw, 3.2rem); max-width: 18ch; }
.vt-hero--chico::after {
	content: ""; position: absolute; z-index: 0; top: 1.1rem; left: var(--s-margen); right: var(--s-margen); height: 3px; pointer-events: none;
	background: linear-gradient(90deg, #fff 0 33%, transparent 33% calc(33% + 6px), rgba(255, 255, 255, .5) calc(33% + 6px) calc(66% + 3px), transparent calc(66% + 3px) calc(66% + 9px), rgba(255, 255, 255, .5) calc(66% + 9px));
	border-radius: 3px;
}
.vt-migas { font-weight: 600; }

/* ---------- Banda de números: el color de marca, cifras enormes ---------- */
.vt-seccion.vt-banda-datos { background: var(--vt-panel); padding-block: clamp(2.2rem, 4.5vw, 3.4rem) !important; }
.vt-banda-datos .vt-dato { border-left: 0; padding: 1.2rem 1.5rem; position: relative; }
.vt-banda-datos .vt-dato + .vt-dato::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.vt-dato__numero { font-weight: 700 !important; letter-spacing: -.03em; font-size: clamp(2.2rem, 3.6vw, 3.1rem) !important; white-space: nowrap; }
.vt-dato__numero::after { display: none; }
.vt-banda-datos .vt-dato p:last-child { color: #fff; font-weight: 600; }
.vt-oscuro:not(.vt-banda-datos) .vt-dato__numero { color: var(--vt-primario) !important; }
@media (max-width: 781px) {
	.vt-banda-datos .vt-dato:nth-child(3)::before { display: none; }
	.vt-banda-datos .vt-dato { padding: 1rem .9rem; }
	.vt-dato__numero { font-size: clamp(1.6rem, 7.4vw, 2rem) !important; }
}

/* ---------- Tarjetas con foto: historias destacadas (foto en círculo con aro de color) ---------- */
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image) {
	background: transparent; border: 0; overflow: visible; text-align: center; align-items: center;
}
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image):hover { box-shadow: none; transform: none; }
.vt-grilla:not(.vt-grilla--productos) > .vt-card > .wp-block-image {
	width: min(100%, 300px); aspect-ratio: 1; border-radius: 50%; padding: 6px; box-sizing: border-box; overflow: hidden;
	background: var(--s-aro); position: relative; isolation: isolate;
}
.vt-grilla:not(.vt-grilla--productos) > .vt-card > .wp-block-image img { border-radius: 50%; border: 5px solid #fff; box-sizing: border-box; }
.vt-claro .vt-grilla:not(.vt-grilla--productos) > .vt-card > .wp-block-image img { border-color: var(--vt-claro); }
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image) h3 { font-size: 1.45rem; padding: 1.3rem .5rem 0; }
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image) h3 + p { padding: .5rem .5rem 0; max-width: 34ch; }
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image) .vt-mas { padding: 1rem .5rem 0; }
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image) .vt-mas a {
	display: inline-block; border-radius: 999px; padding: .5rem 1.1rem; background: var(--s-tinte); color: var(--vt-primario-oscuro);
}
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image):hover .vt-mas a { background: var(--vt-primario); color: #fff; }
.vt-grilla--3:has(> .vt-card > .wp-block-image) { row-gap: 3rem; }
@media (max-width: 600px) {
	.vt-grilla--3:has(> .vt-card > .wp-block-image) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .9rem; }
	.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image) h3 { font-size: 1.1rem; padding-top: .9rem; }
	.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image) h3 + p { font-size: .92rem; }
	.vt-grilla:not(.vt-grilla--productos) > .vt-card > .wp-block-image { padding: 4px; }
	.vt-grilla:not(.vt-grilla--productos) > .vt-card > .wp-block-image img { border-width: 3px; }
}
.vt-mas a { color: var(--vt-primario-oscuro); font-weight: 600; text-decoration: none; }
.vt-mas a::after { content: " \2192"; }

/* ---------- Tarjetas de texto: bloques de color (temporadas, condiciones) ---------- */
.vt-card--texto:not(.vt-testimonio) { border: 0; border-radius: var(--vt-radio); background: var(--vt-panel); color: #fff; padding-bottom: .4rem; min-height: 230px; }
.vt-card--texto:not(.vt-testimonio) h3 { color: #fff; font-size: 1.5rem; padding-top: 1.8rem; }
.vt-card--texto:not(.vt-testimonio) h3 + p { color: rgba(255, 255, 255, .9); }
.vt-card--texto:not(.vt-testimonio) .vt-mas a { color: #fff; }
.vt-card--texto:not(.vt-testimonio):nth-child(4n+2) { background: var(--vt-oscuro); }
.vt-card--texto:not(.vt-testimonio):nth-child(4n+3) { background: var(--vt-primario-oscuro); }
.vt-card--texto:not(.vt-testimonio):nth-child(4n+4) { background: var(--vt-oscuro-2); }
.vt-card--texto:not(.vt-testimonio):hover { box-shadow: var(--vt-sombra); transform: translateY(-4px) rotate(-.6deg); }
.vt-card--texto .vt-ficha { color: #fff; opacity: .85; }

/* ---------- Productos: tarjeta blanca, etiqueta-sticker, precio grande y botón de pedido ---------- */
.vt-producto { border: 0; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); padding: 8px; }
.vt-producto .wp-block-image { aspect-ratio: 4 / 5; border-radius: 12px; }
.vt-producto h3 { font-family: var(--wp--preset--font-family--texto); font-weight: 600; font-size: 1.02rem; letter-spacing: 0; padding: 1rem .7rem 0; line-height: 1.3; }
.vt-producto > p:not(.vt-mas) { padding: .3rem .7rem 0; }
.vt-precio, .vt-card .vt-precio { font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; color: var(--vt-tinta); }
.vt-producto__detalle { font-size: .9rem; }
.vt-producto .vt-mas { padding: .9rem 0 0; }
.vt-producto .vt-mas a { display: block; text-align: center; border-radius: 999px; background: var(--vt-oscuro); color: #fff; padding: .75rem 1rem; transition: background .15s; }
.vt-producto .vt-mas a::after { content: " \2197"; }
.vt-producto:hover .vt-mas a { background: var(--vt-primario); }
.vt-etiqueta { top: 1.1rem; left: 1.1rem; border-radius: 999px; background: var(--vt-panel); padding: .4rem .8rem !important; rotate: -5deg; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); letter-spacing: .04em; }
.vt-producto:nth-child(even) .vt-etiqueta { background: var(--vt-oscuro); rotate: 4deg; }
.vt-claro { background: var(--s-tinte); }
.vt-claro .vt-card:not(.vt-card--texto) { background: #fff; }
@media (max-width: 600px) {
	.vt-producto { padding: 5px; }
	/* text-wrap (de .vt-card p) pisa white-space: la etiqueta necesita su propio nowrap con más especificidad */
	.vt-card p.vt-etiqueta { top: .7rem; left: .7rem; font-size: .68rem !important; text-wrap: nowrap; white-space: nowrap; letter-spacing: .02em; padding: .35rem .7rem !important; }
	.vt-precio, .vt-card .vt-precio { font-size: 1.2rem; }
	.vt-producto .vt-mas a { padding: .65rem .5rem; }
	:where(.vt-grilla--productos) .vt-card > p { padding-inline: .5rem; }
	:where(.vt-grilla--productos, .vt-grilla--categorias) .vt-card h3 { padding-inline: .5rem; }
}

/* ---------- Chips y muro: píldoras ---------- */
.vt-chip { border: 0; background: var(--s-tinte-2); color: var(--vt-primario-oscuro); }
.vt-oscuro .vt-chip { background: rgba(255, 255, 255, .1); }
.vt-muro { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; background: none; border: 0; overflow: visible; }
.vt-muro p { min-height: 0; background: #fff; border-radius: 999px; padding: .9rem 1.6rem !important; font-size: 1.15rem !important; font-weight: 700; box-shadow: inset 0 0 0 2px var(--vt-tinta); }
.vt-muro p:nth-child(3n+1) { background: var(--vt-panel); color: #fff; box-shadow: none; }
.vt-muro p:nth-child(3n+2) { background: var(--vt-oscuro); color: #fff; box-shadow: none; }

/* ---------- Pasos: números en el aro de historia ---------- */
.vt-paso { border-top: 0; padding-top: 0; }
.vt-paso::before {
	content: counter(paso); width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-family: var(--wp--preset--font-family--texto); font-weight: 600; font-size: 1.7rem; color: #fff;
	background: radial-gradient(circle, var(--vt-oscuro) 0 30px, transparent 31px), var(--s-aro); margin-bottom: 1.2rem;
}
.vt-seccion:not(.vt-oscuro) .vt-paso::before { background: radial-gradient(circle, var(--vt-panel) 0 29px, #fff 30px 32px, transparent 33px), var(--s-aro); }
.vt-paso h3 { font-size: 1.35rem; }
.vt-pasos { gap: 2rem; }

/* ---------- Texto + foto: la foto en formato historia, con la barra de avance, sobre un bloque de color ---------- */
.vt-split .wp-block-image { position: relative; isolation: isolate; padding: clamp(1rem, 2.4vw, 2rem); border-radius: 30px; background: var(--vt-panel); }
.vt-split .wp-block-image img { aspect-ratio: 4 / 5; border-radius: 20px; display: block; }
.vt-split .wp-block-image::after {
	content: ""; position: absolute; top: calc(clamp(1rem, 2.4vw, 2rem) + 14px); left: calc(clamp(1rem, 2.4vw, 2rem) + 14px); right: calc(clamp(1rem, 2.4vw, 2rem) + 14px); height: 3px;
	background: linear-gradient(90deg, #fff 0 50%, rgba(255, 255, 255, .55) 50%); border-radius: 3px;
}
.vt-split h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
@media (min-width: 782px) { .vt-split > .wp-block-column:has(.wp-block-image) { flex-basis: 42% !important; flex-grow: 0; } }

/* ---------- Destacado: panel oscuro con aro ---------- */
.vt-destacado { border: 0; border-radius: 26px; background: var(--vt-oscuro); color: #fff; padding: clamp(1.6rem, 3vw, 2.4rem) !important; position: relative; overflow: hidden; isolation: isolate; }
@media (max-width: 781px) { .vt-destacado::after { display: none; } }
.vt-destacado::after { content: ""; position: absolute; width: 220px; height: 220px; right: -60px; top: -60px; border-radius: 50%; background: var(--s-aro); -webkit-mask: radial-gradient(circle, transparent 96px, #000 97px); mask: radial-gradient(circle, transparent 96px, #000 97px); opacity: .9; z-index: -1; }
.vt-destacado h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 26ch; }
.vt-destacado p { color: rgba(255, 255, 255, .86); max-width: 62ch; }
.vt-destacado .wp-block-buttons { margin-top: 1.2rem !important; }

/* ---------- Testimonios: burbujas de mensaje ---------- */
.vt-testimonio { border: 0; border-radius: 22px 22px 22px 6px; background: var(--s-tinte); padding: 1.8rem 1.7rem 1.6rem; }
.vt-claro .vt-testimonio { background: #fff; }
.vt-testimonio__cita { font-size: 1.08rem; }
.vt-testimonio__cita::before { content: "\201C"; display: block; font-family: var(--wp--preset--font-family--titulos); font-weight: 700; font-size: 3.4rem; line-height: .8; color: var(--vt-primario); margin-bottom: .2rem; }
.vt-testimonio__cita::after { content: ""; }
.vt-testimonio { position: relative; }
.vt-testimonio__quien { padding-right: 2.6rem; }
.vt-testimonio::after { content: "\2713\2713"; position: absolute; right: 1.5rem; bottom: 1.6rem; color: var(--vt-primario); font-weight: 700; font-size: .9rem; letter-spacing: -.3em; }

/* ---------- Preguntas frecuentes: renglones redondeados ---------- */
.vt-faq details { border: 0; background: var(--s-tinte); border-radius: 16px; margin-bottom: .6rem !important; padding-inline: 1.4rem; }
.vt-claro .vt-faq details { background: #fff; }
.vt-faq summary { font-family: var(--wp--preset--font-family--texto); font-weight: 600; font-size: 1.08rem; padding-right: 3rem; }
.vt-faq summary::after { content: "+"; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--vt-panel); color: #fff; font-size: 1.3rem; right: 0; }
.vt-faq details[open] summary::after { content: "\2013"; background: var(--vt-oscuro); }

/* ---------- Cierre: foto a sangre alta ---------- */
.vt-seccion.vt-cta { min-height: 600px; display: flex; align-items: center; }
.vt-seccion.vt-cta > .alignwide { width: 100%; }
.vt-cta h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); max-width: 20ch; }

/* ---------- Galería: fotos en formato historia ---------- */
.vt-galeria { gap: 1rem; }
.vt-galeria img { aspect-ratio: 4 / 5; border-radius: 18px; }
.vt-galeria figcaption { font-weight: 600; color: var(--vt-tinta); }

/* ---------- Personas, contacto, mapa ---------- */
.vt-persona { border: 0; border-radius: var(--vt-radio); background: var(--s-tinte); padding-bottom: .4rem; }
.vt-claro .vt-persona { background: #fff; }
.vt-persona:not(:has(.wp-block-image)) h3 { padding-top: 1.7rem; }
.vt-persona:not(:has(.wp-block-image))::before { content: ""; display: block; margin: 1.6rem 1.5rem 0 !important; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, var(--vt-panel) 0 20px, #fff 21px 23px, transparent 24px), var(--s-aro); }
.vt-persona__cargo { color: var(--vt-primario-oscuro); }
.vt-contacto__item { border: 0; background: var(--s-tinte); border-radius: 20px; }
.vt-contacto__item h3 { color: var(--vt-primario-oscuro); }
.vt-mapa iframe { border-radius: 24px; }

/* ---------- Cinta: marquesina en el color de marca ---------- */
.vt-cinta.vt-cinta { display: flex; flex-wrap: nowrap; background: var(--vt-panel); padding: 1rem 0 !important; }
.vt-cinta .vt-cinta__lista { flex: none; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; max-width: none !important; margin: 0 !important; }
.vt-cinta__item { font-family: var(--wp--preset--font-family--titulos); font-weight: 700; text-transform: none; letter-spacing: -.01em; font-size: 1.3rem !important; white-space: nowrap; padding: 0 1.4rem !important; display: flex; align-items: center; }
.vt-cinta__item::after { content: "\2726"; margin-left: 2.8rem; font-size: .9em; }
@media (prefers-reduced-motion: no-preference) {
	.vt-cinta .vt-cinta__copia { display: flex !important; }
	.vt-cinta .vt-cinta__lista { animation: s-marquesina 40s linear infinite; }
	.vt-cinta:hover .vt-cinta__lista { animation-play-state: paused; }
}
@keyframes s-marquesina { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- Banda de foto: historia a lo ancho (barra de avance arriba, leyenda como mensaje) ---------- */
.vt-banda-foto .wp-block-image::before {
	content: ""; position: absolute; z-index: 1; top: 1.1rem; left: var(--s-margen); right: var(--s-margen); height: 3px; border-radius: 3px; pointer-events: none;
	background: linear-gradient(90deg, #fff 0 50%, transparent 50% calc(50% + 6px), rgba(255, 255, 255, .55) calc(50% + 6px));
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.vt-banda-foto figcaption {
	left: var(--s-margen); bottom: clamp(1.4rem, 3vw, 2.4rem); max-width: min(470px, calc(100% - 2.5rem));
	border-radius: 20px 20px 20px 6px; padding: 1rem 1.3rem !important; font-weight: 600; font-size: 1.02rem;
	box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .55); rotate: -1.5deg;
}
@media (max-width: 600px) {
	.vt-banda-foto img { height: 300px; }
	.vt-banda-foto figcaption { left: 1rem; right: auto; bottom: 1rem; max-width: calc(100% - 2rem); font-size: .95rem; rotate: -1deg; padding: .85rem 1.05rem !important; }
}

/* ---------- Testimonios en sección oscura: el chat en modo noche ---------- */
.vt-oscuro .vt-testimonio { background: #fff; color: var(--vt-tinta); }
.vt-oscuro .vt-testimonio p { color: var(--vt-tinta); }
.vt-oscuro .vt-testimonio .vt-testimonio__cargo { color: var(--vt-suave); }
/* El del medio es el mensaje "enviado": en el color de marca, con la punta del otro lado y un poco más abajo */
.vt-testimonios > .vt-testimonio:nth-child(3n+2) { background: var(--vt-panel); color: #fff; border-radius: 22px 22px 6px 22px; }
.vt-testimonios > .vt-testimonio:nth-child(3n+2) .vt-testimonio__cita::before,
.vt-testimonios > .vt-testimonio:nth-child(3n+2)::after { color: #fff; }
.vt-testimonios > .vt-testimonio:nth-child(3n+2) p { color: #fff; }
.vt-testimonios > .vt-testimonio:nth-child(3n+2) .vt-testimonio__cargo { color: rgba(255, 255, 255, .82); }
@media (min-width: 782px) { .vt-testimonios > .vt-testimonio:nth-child(3n+2) { margin-top: 2.4rem !important; } }

/* ---------- Muro con columnas: píldoras parejas en grilla ---------- */
.vt-muro[class*="vt-muro--"] { display: grid; grid-template-columns: repeat(4, minmax(0, 190px)); justify-content: center; }
.vt-muro[class*="vt-muro--"] p { justify-content: center; text-align: center; }
@media (max-width: 781px) {
	.vt-muro[class*="vt-muro--"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
	.vt-muro[class*="vt-muro--"] p { font-size: 1rem !important; padding: .8rem .7rem !important; }
}

/* ---------- Pie ---------- */
.vt-pie { border-top: 8px solid var(--vt-primario); }
.vt-pie__redes a { border-radius: 50%; }

/* ---------- Efectos: tarjetas que suben al entrar; segundo aro al pasar ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes s-sube { from { translate: 0 26px; } to { translate: none; } }
		.vt-grilla > .vt-card, .vt-paso, .vt-testimonio { animation: s-sube linear forwards; animation-timeline: view(); animation-range: entry 0% cover 22%; }
	}
}
.vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image):hover > .wp-block-image { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vt-primario); }
@media (prefers-reduced-motion: no-preference) { .vt-grilla:not(.vt-grilla--productos) > .vt-card > .wp-block-image { transition: box-shadow .25s; } }

/* ---------- Marca clara (color del cliente claro en el acento; base en assets/css/marca-clara.css) ---------- */
/* Píldoras y fondos en tintes de la marca (texto oscuro), aro de las historias, puntos y pie en el acento */
body.vt-marca-clara.vt-estilo-showroom {
	--s-tinte: color-mix(in srgb, var(--vt-marca) 14%, #fff);
	--s-tinte-2: color-mix(in srgb, var(--vt-marca) 32%, #fff);
	--s-aro: conic-gradient(from 210deg, var(--vt-marca), color-mix(in srgb, var(--vt-marca) 60%, #000), var(--vt-marca));
}
body.vt-marca-clara.vt-estilo-showroom .vt-overline::before { background: var(--vt-marca); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
body.vt-marca-clara.vt-estilo-showroom .vt-oscuro:not(.vt-banda-datos) .vt-dato__numero { color: var(--vt-marca) !important; }
body.vt-marca-clara.vt-estilo-showroom .vt-grilla:not(.vt-grilla--productos) > .vt-card:has(> .wp-block-image):hover .vt-mas a,
body.vt-marca-clara.vt-estilo-showroom .vt-producto:hover .vt-mas a { background: var(--vt-marca); color: var(--vt-marca-texto); }
body.vt-marca-clara.vt-estilo-showroom .vt-pie { border-top-color: var(--vt-marca); }
/* ---------- fin marca clara ---------- */