/* Visual VM — estilos complementarios a theme.json */

:root {
	--vvm-pad: var(--wp--preset--spacing--50);
	--vvm-section: var(--wp--preset--spacing--70);
}

/* Plantilla: secciones a ancho completo sin huecos entre sí */
.wp-site-blocks > * + * { margin-block-start: 0; }
.vvm-main > .wp-block-post-content > * { margin-block: 0; }
.vvm-main .wp-block-post-content.is-layout-constrained > .alignfull { margin-block: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

.vvm-section {
	padding-inline: var(--vvm-pad);
	padding-block: clamp(3rem, 7vw, 6.5rem);
}

/* Cabecera */
.vvm-header {
	padding: 26px var(--vvm-pad);
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid #eee;
}
.home .vvm-header {
	position: absolute; inset: 0 0 auto 0; z-index: 5;
	background: transparent; border-bottom: 0;
}
.vvm-header .wp-block-navigation { gap: clamp(16px, 2.2vw, 32px); }
.vvm-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Botones */
.wp-block-button__link { transition: background .2s, color .2s, border-color .2s; border: 2px solid transparent; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: inherit; border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--black); text-decoration: none;
}
.vvm-metodo .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--pink); color: var(--wp--preset--color--black); border-color: var(--wp--preset--color--pink);
}

/* Hero */
.vvm-hero {
	background: var(--wp--preset--color--pink);
	padding: 7rem var(--vvm-pad) 4rem;
	min-height: clamp(560px, 58vw, 840px) !important;
}

/* Contenido alineado al contenedor (1280 px) en pantallas anchas */
.vvm-hero, .vvm-header, .vvm-footer, .vvm-cta, .vvm-strip {
	padding-inline: max(var(--vvm-pad), calc((100% - var(--wp--style--global--content-size)) / 2));
}
/* El fondo rosa va a todo el ancho; el arte se limita al contenedor y se difumina en los lados. */
.vvm-hero { background: #fbbddb; position: relative; display: flex; align-items: center; overflow: hidden; }
.vvm-hero__content { position: relative; z-index: 2; width: 100%; max-width: 760px; }

/* Escena del hero: marco y maniquí por separado, con sombras dinámicas (hero.js) */
.vvm-hero__art {
	position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1;
	width: min(100%, var(--wp--style--global--wide-size)); translate: -50% 0;
	overflow: hidden; pointer-events: none;
	--ground: 10.3%;   /* distancia del suelo al borde inferior */
	--k0: .55;         /* largo de la sombra: desplazamiento lateral por unidad de altura */
	--s0: .16;         /* cuánto sube la sombra hacia el fondo (luz baja = sombra tendida en el suelo) */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.vvm-hero__art .wp-block-image { position: absolute; margin: 0; bottom: var(--ground); translate: -50% 0; will-change: transform; }
.vvm-hero__art .wp-block-image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.vvm-frame     { height: 70%; aspect-ratio: 861 / 1356; left: 68%;   transform: translate3d(var(--bx, 0px), var(--by, 0px), 0); }
.vvm-mannequin { height: 59%; aspect-ratio: 779 / 1473; left: 69%; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }
/* Contacto del maniquí con el suelo */
.vvm-mannequin::after {
	content: ""; position: absolute; z-index: -1; left: -4%; right: -2%; bottom: -2%; height: 7%;
	background:
		radial-gradient(ellipse 15% 34% at 11% 70%, rgba(70, 20, 50, .62), transparent 72%),
		radial-gradient(ellipse 12% 28% at 90% 22%, rgba(70, 20, 50, .5), transparent 72%);
}

/* Columna derecha por encima del maniquí: copia del marco recortada a la losa de la columna derecha.
   El valor es el de este marco; hero.js lo recalcula si se cambia la imagen. */
.vvm-frame--post { pointer-events: none; clip-path: inset(0 0 0 76.8%); }

/* Sombras proyectadas (las crea hero.js a partir de la silueta de cada imagen) */
.vvm-shadow {
	position: absolute; bottom: var(--ground); translate: -50% 0; transform-origin: 50% 100%;
	-webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
	opacity: 0; transition: opacity 1s ease .7s;
}
.is-lit .vvm-shadow { opacity: var(--o, .8); }
.vvm-shadow--frame {
	height: 70%; aspect-ratio: 861 / 1356; left: 68%; --o: .85;
	background: #b5698d; filter: blur(1.4px);
	transform: translate3d(var(--bx, 0px), var(--by, 0px), 0)
		matrix(1, 0, calc((var(--k0) + var(--dk, 0)) * -1), calc(var(--s0) + var(--ds, 0)), 0, 0);
}
.vvm-shadow--mannequin {
	height: 59%; aspect-ratio: 779 / 1473; left: 69%; --o: .34;
	background: #9d5a80; filter: blur(7px);
	transform: translate3d(var(--mx, 0px), var(--my, 0px), 0)
		matrix(1, 0, calc((var(--k0) + var(--dk, 0)) * -.9), calc((var(--s0) + var(--ds, 0)) * .8), 0, 0);
}

/* ---- Realismo del hero ---- */
/* Iluminación de la pared y el suelo: foco suave sobre la escena, juntura pared/suelo, viñeta y grano. */
.vvm-hero {
	--lx: 70%; --ly: 44%; --seam: 70%;
	background:
		radial-gradient(ellipse 52% 72% at var(--lx) var(--ly), rgba(255, 232, 244, .62), rgba(255, 232, 244, 0) 72%),
		linear-gradient(to bottom, rgba(255, 255, 255, 0) var(--seam), rgba(255, 246, 251, .22) calc(var(--seam) + .25%),
			rgba(206, 104, 160, .10) calc(var(--seam) + 1.4%), rgba(190, 82, 142, .20) 100%),
		radial-gradient(ellipse 80% 90% at 58% 48%, rgba(0, 0, 0, 0) 55%, rgba(150, 40, 100, .20) 100%),
		#fbbddb;
}
.vvm-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	mix-blend-mode: soft-light; opacity: .55;
}

/* Reflejo: copias volteadas sobre la línea del suelo, visibles solo justo bajo los pies. */
.vvm-reflect {
	position: absolute; inset: 0; pointer-events: none;
	transform: scaleY(-1); transform-origin: 0 calc(100% - var(--ground));
	filter: blur(1.6px);
	opacity: 0; transition: opacity 1s ease .7s;
	-webkit-mask-image: linear-gradient(to top, transparent 0, transparent var(--ground), rgba(0, 0, 0, .34) calc(var(--ground) + .4%), transparent calc(var(--ground) + 9%));
	mask-image: linear-gradient(to top, transparent 0, transparent var(--ground), rgba(0, 0, 0, .34) calc(var(--ground) + .4%), transparent calc(var(--ground) + 9%));
}
.is-lit .vvm-reflect { opacity: 1; }
.vvm-reflect .vvm-frame::before, .vvm-reflect .vvm-mannequin::before, .vvm-reflect .vvm-mannequin::after { display: none; }

/* Luz de borde del maniquí: filo claro hacia la luz (arriba-izquierda) y rebote rosa del suelo. */
.vvm-mannequin::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: url("../img/hero-mannequin-rim.webp") center / 100% 100% no-repeat;
	opacity: .9;
}
.vvm-hero.is-ready .vvm-mannequin::before { animation: vvm-slide 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }

/* Penumbra: la sombra se afila cerca del contacto con el suelo y se desvanece lejos. */
.vvm-shadow--near {
	--o: .22; background: #7a3a5e; filter: blur(3.2px);
	-webkit-mask: var(--m) center / 100% 100% no-repeat, linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 16%) center / 100% 100% no-repeat;
	-webkit-mask-composite: source-in;
	mask: var(--m) center / 100% 100% no-repeat, linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 16%) center / 100% 100% no-repeat;
	mask-composite: intersect;
}

/* Entrada: la escena entera aparece como una sola pieza (un único fundido en el contenedor) y solo
   cuando todas las imágenes están cargadas (hero.js añade .is-ready). Así las capas nunca se ven
   semitransparentes unas sobre otras y el maniquí no "atraviesa" la columna. Dentro de la escena
   las animaciones son solo de movimiento (sin opacidad). */
.vvm-hero__art { opacity: 0; transition: opacity .9s ease; }
.vvm-hero.is-ready .vvm-hero__art { opacity: 1; }
@keyframes vvm-pop   { from { transform: scale(.95); } to { transform: none; } }
@keyframes vvm-slide { from { transform: translate3d(48px, 0, 0); } to { transform: none; } }
@keyframes vvm-rise  { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
.vvm-hero.is-ready .vvm-frame img     { animation: vvm-pop 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.vvm-hero.is-ready .vvm-mannequin img { animation: vvm-slide 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }
.vvm-hero__content > * { animation: vvm-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.vvm-hero__content > :nth-child(2) { animation-delay: .12s; }
.vvm-hero__content > :nth-child(3) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	.vvm-hero.is-ready .vvm-frame img, .vvm-hero.is-ready .vvm-mannequin img, .vvm-hero.is-ready .vvm-mannequin::before, .vvm-hero__content > * { animation: none; }
	.vvm-reflect { transition: none; }
	.vvm-hero__art { transition: none; }
	.vvm-hero__art .wp-block-image { transform: none !important; }
	.vvm-shadow { transition: none; }
}
.vvm-hero h1 { font-size: clamp(3.2rem, 8vw, 7.6rem); }
.vvm-lead { font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.3; max-width: 22em; }
.vvm-hero .vvm-lead { margin-block: 28px 32px; }

.vvm-strip {
	padding: 18px var(--vvm-pad); margin: 0;
	border-bottom: 1px solid #eee; font-weight: 500;
	font-size: clamp(.95rem, 1.4vw, 1.2rem);
}

/* Cabeceras de sección */
.vvm-head { gap: 32px; }
.vvm-head .wp-block-buttons { margin-bottom: 10px; }
.vvm-poder h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.vvm-metodo h2 { font-size: clamp(2.8rem, 6.4vw, 5.8rem); }
.vvm-head .vvm-lead { margin-top: 18px; font-size: clamp(1rem, 1.4vw, 1.25rem); }

/* Tarjetas */
.vvm-cards { gap: 3.5%; margin-top: clamp(40px, 6vw, 90px); }
.vvm-card-img img { width: 100%; aspect-ratio: 1.55 / 1; object-fit: cover; display: block; }
.vvm-cards h3, .wp-block-post-template.vvm-grid h3 { margin-top: 14px; font-size: clamp(1.05rem, 1.5vw, 1.4rem); }
.vvm-note, .vvm-note a {
	margin-top: 6px; font-size: .62rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .02em;
}
.vvm-eyebrow {
	font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .03em; margin: 0;
}

/* Método: acordeón */
.vvm-metodo { background: var(--wp--preset--color--black); }
.vvm-accordion { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid #fff; }
.vvm-accordion .wp-block-details { border-bottom: 1px solid #fff; margin: 0; }
.vvm-accordion summary {
	list-style: none; cursor: pointer; padding: 14px 8px;
	display: flex; justify-content: space-between; align-items: center;
	font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.4rem);
}
.vvm-accordion summary::-webkit-details-marker { display: none; }
.vvm-accordion summary::after {
	content: "+"; color: var(--wp--preset--color--pink);
	font-size: 1.8em; font-weight: 300; line-height: 1; transition: transform .2s;
}
.vvm-accordion details[open] summary::after { transform: rotate(45deg); }
.vvm-accordion details > :not(summary) { padding: 0 8px 22px; max-width: 46em; color: #d6d6d6; margin-block: 0; }

/* Intención + marcas */
.vvm-h2-md { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1; margin-top: 8px; }
.vvm-h2-sm { font-size: clamp(1.6rem, 3.2vw, 2.7rem); }
.vvm-cols { gap: 4%; margin-top: 36px; }
.vvm-cols p { max-width: 17em; margin-top: 8px; }
.vvm-intencion .wp-block-separator { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 44px 0 36px; max-width: none; }
.vvm-marcas { margin-top: 34px; gap: 20px 24px; align-items: center; }

/* CTA */
.vvm-cta { padding: clamp(40px, 5vw, 64px) var(--vvm-pad); gap: 28px; }
.vvm-cta .vvm-h2-md { margin-top: 0; }
.vvm-cta p { margin-top: 12px; }

/* Páginas interiores */
.vvm-page-hero { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.vvm-h1-md { font-size: clamp(2.8rem, 6.4vw, 5.8rem); margin-top: 14px; }
.vvm-page-hero .vvm-lead { margin-top: 24px; }
.vvm-services { gap: 4%; }
.vvm-services h3 { margin: 10px 0 12px; }
.vvm-about { gap: 6%; }
.vvm-contact { gap: 6%; }
.vvm-contact h3 { margin-top: 28px; }
.vvm-contact h3:first-child { margin-top: 0; }
.vvm-page-title { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 1.5rem; }
.vvm-404 { min-height: 55vh; padding-top: 10rem; }
.wp-block-post-template.vvm-grid { gap: 40px 3.5%; }

/* Formulario de contacto */
.vvm-form p { margin: 0 0 20px; }
.vvm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.vvm-form label { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.vvm-form input, .vvm-form textarea {
	width: 100%; padding: 14px 16px; font: inherit;
	border: 1.5px solid var(--wp--preset--color--black); border-radius: 0; background: #fff; color: inherit;
}
.vvm-form input:focus, .vvm-form textarea:focus { outline: 3px solid var(--wp--preset--color--pink); outline-offset: 0; }
.vvm-form__btn {
	cursor: pointer; font: inherit; font-weight: 600; padding: .75em 1.8em;
	border: 2px solid var(--wp--preset--color--black); background: var(--wp--preset--color--black);
	color: #fff; border-radius: 999px; transition: background .2s, color .2s;
}
.vvm-form__btn:hover { background: transparent; color: var(--wp--preset--color--black); }
.vvm-form__hp { position: absolute !important; left: -9999px; height: 0; overflow: hidden; }
.vvm-form__msg { padding: 14px 18px; font-weight: 600; }
.vvm-form__msg--ok { background: var(--wp--preset--color--pink); }
.vvm-form__msg--error { background: #ffe1e1; color: #8a1c1c; }

/* Pie */
.vvm-footer { padding: 24px var(--vvm-pad); gap: 20px; }
.vvm-footer__brand { gap: 18px; align-items: center; }
.vvm-footer__tag { margin: 0; font-size: .7rem; font-weight: 600; padding-left: 18px; border-left: 1px solid #777; }
.vvm-footer__nav { font-size: .7rem; font-weight: 600; gap: clamp(18px, 3vw, 42px); }
.vvm-footer a { color: inherit; }

/* Accesibilidad */
:where(a, button, summary):focus-visible { outline: 3px solid var(--wp--preset--color--pink-strong); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
html { scroll-behavior: smooth; }

/* Responsive */
@media (max-width: 781px) {
	.vvm-hero { padding-top: 6rem; padding-bottom: 0; align-items: flex-start !important; min-height: 840px !important; }
	.vvm-hero__art { top: auto; height: 52%; width: 100%; --ground: 4%; --k0: .45; }
	.vvm-frame, .vvm-shadow--frame { height: 90%; left: 50%; }
	.vvm-mannequin, .vvm-shadow--mannequin { height: 77%; left: 50.5%; }
	.vvm-head { flex-direction: column; align-items: flex-start !important; }
	.vvm-cards, .vvm-cols { gap: 32px; }
	.vvm-form__row { grid-template-columns: 1fr; }
	.vvm-marcas { justify-content: flex-start; gap: 18px 28px; }
	.vvm-cta { flex-direction: column; align-items: flex-start; }
}

/* Alineación al contenedor: al final para ganar a los paddings de cada bloque */
.vvm-hero, .vvm-header, .vvm-footer, .vvm-cta, .vvm-strip {
	padding-inline: max(var(--vvm-pad), calc((100% - var(--wp--style--global--content-size)) / 2));
}

/* ==========================================================================
   Ajuste de fidelidad al mockup (medidas calibradas a 1500 px de ancho).
   Valores en vw con mínimos y máximos para que escale sin romperse.
   ========================================================================== */

/* Cabecera */
.vvm-header { padding-top: clamp(18px, 2.2vw, 34px); padding-bottom: 0; }
body:not(.home) .vvm-header { padding-bottom: clamp(16px, 1.6vw, 24px); }
.wp-site-blocks .vvm-header .wp-block-site-title,
.wp-site-blocks .vvm-footer .wp-block-site-title { font-size: clamp(1.4rem, 2.5vw, 2.6rem) !important; line-height: 1; }
.vvm-header .wp-block-navigation { font-size: clamp(.95rem, 1.47vw, 1.5rem) !important; }
.vvm-header .wp-block-navigation__container { gap: clamp(18px, 2.5vw, 38px); }

/* Botones */
.wp-block-button__link { font-size: clamp(.95rem, 1.47vw, 1.5rem); padding: .55em 1.8em; line-height: 1.3; }
.vvm-hero .wp-block-button__link { font-size: clamp(1rem, 1.67vw, 1.7rem); padding: .62em 2.2em; }

/* Hero */
.vvm-hero { min-height: clamp(560px, 58.3vw, 920px) !important; }
.vvm-hero h1 { font-size: clamp(3.2rem, 8.2vw, 8.4rem); line-height: .86; }
.vvm-lead { font-size: clamp(1.05rem, 1.75vw, 1.8rem); max-width: 20em; }
.vvm-hero .vvm-lead { font-size: clamp(1.1rem, 1.93vw, 1.95rem); margin-block: clamp(20px, 2vw, 32px) clamp(24px, 2.4vw, 40px); }
.vvm-strip { font-size: clamp(.95rem, 1.47vw, 1.5rem); padding-block: clamp(16px, 2.1vw, 34px); }

/* El poder de mostrar */
.vvm-poder { padding-top: clamp(4rem, 8.4vw, 9rem); padding-bottom: clamp(4rem, 11.5vw, 12rem); }
.vvm-head .vvm-lead { margin-top: clamp(14px, 1.5vw, 24px); }
.vvm-cards { gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(40px, 9.3vw, 150px); }
.vvm-cards h3 { font-size: clamp(1.1rem, 1.75vw, 1.8rem); margin-top: clamp(14px, 1.4vw, 22px); }
.vvm-note, .vvm-note a { font-size: clamp(.7rem, .93vw, .95rem); margin-top: clamp(4px, .5vw, 8px); }

/* Método */
.vvm-metodo { padding-top: clamp(3.5rem, 5.6vw, 6rem); padding-bottom: clamp(3.5rem, 7.2vw, 8rem); }
.vvm-metodo .vvm-lead { font-size: clamp(1.05rem, 1.87vw, 1.9rem); }
.vvm-accordion { margin-top: clamp(40px, 7.4vw, 120px); }
.vvm-accordion summary { font-size: clamp(1.2rem, 2.3vw, 2.4rem); padding: clamp(12px, 1.3vw, 20px) 8px; }
.vvm-accordion summary::after { font-size: 1.5em; }

/* Menos ruido + marcas */
.vvm-intencion { padding-top: clamp(3.5rem, 7.5vw, 8rem); padding-bottom: clamp(3rem, 6.3vw, 7rem); }
.vvm-eyebrow { font-size: clamp(.75rem, 1.3vw, 1.3rem); }
.vvm-intencion .vvm-h2-md { font-size: clamp(2rem, 4.7vw, 4.9rem); }
.vvm-intencion .vvm-h2-sm { font-size: clamp(1.8rem, 3.1vw, 3.3rem); }
.vvm-cols { margin-top: clamp(28px, 4.4vw, 72px); }
.vvm-cols h3 { font-size: clamp(1.15rem, 2vw, 2.1rem); }
.vvm-cols p { font-size: clamp(.9rem, 1.33vw, 1.4rem); max-width: 17.5em; margin-top: clamp(6px, .7vw, 12px); }
.vvm-intencion .wp-block-separator { max-width: var(--wp--style--global--content-size); margin-block: clamp(36px, 7.4vw, 120px) clamp(24px, 3.3vw, 56px); }
.vvm-marcas { margin-top: clamp(24px, 4.6vw, 76px); }

/* Cierre y pie */
.vvm-cta { padding-block: clamp(36px, 3.5vw, 60px); }
.vvm-cta .vvm-h2-md { font-size: clamp(2rem, 4vw, 4.2rem); }
.vvm-cta p { font-size: clamp(.95rem, 1.47vw, 1.5rem); }
.vvm-footer { padding-block: clamp(16px, 1.4vw, 24px); }
.vvm-footer__tag { font-size: clamp(.75rem, 1.07vw, 1.1rem); }
.vvm-footer__nav { font-size: clamp(.8rem, 1.2vw, 1.25rem); }

/* Afinado de espacios (segunda pasada de calibración) */
.vvm-header .wp-block-navigation__container { gap: clamp(18px, 3.4vw, 52px); }
.vvm-hero h1 { font-size: clamp(3.2rem, 8.45vw, 8.7rem); }
.vvm-poder { padding-bottom: clamp(4rem, 13.8vw, 14rem); }
.vvm-cards { margin-top: clamp(40px, 11.4vw, 180px); }
.vvm-metodo { padding-bottom: clamp(3.5rem, 5.5vw, 6rem); }
.vvm-accordion { margin-top: clamp(40px, 6vw, 100px); }
.vvm-accordion summary { padding-block: clamp(10px, 1vw, 16px); }
.vvm-intencion { padding-bottom: clamp(3rem, 5.5vw, 6rem); }
.vvm-intencion .wp-block-separator { margin-block: clamp(32px, 5.5vw, 90px) clamp(20px, 2.4vw, 40px); }
.vvm-cta { padding-block: clamp(36px, 4.1vw, 68px); }
.vvm-footer { padding-block: clamp(16px, 1.75vw, 28px); }

@media (max-width: 781px) {
	.vvm-hero { min-height: 860px !important; align-items: flex-start !important; }
	.vvm-hero h1 { font-size: clamp(3rem, 14vw, 4.2rem); }
}

/* Logos de clientes: tamaños ópticos calibrados a 1500 px (ancho de cada logo en vw) */
.vvm-marcas .wp-block-image { margin: 0; flex: 0 0 auto; }
.vvm-marcas .vvm-logo img { display: block; width: 100%; height: auto; }
.vvm-logo--studiof   { width: clamp(100px, 11.5vw, 190px); }
.vvm-logo--ela       { width: clamp(52px, 5.8vw, 96px); }
.vvm-logo--falabella { width: clamp(100px, 11vw, 180px); }
.vvm-logo--mng       { width: clamp(76px, 8.5vw, 140px); }
.vvm-logo--velez     { width: clamp(100px, 10vw, 165px); }
.vvm-logo--noralozza { width: clamp(110px, 14.5vw, 235px); }
@media (max-width: 781px) {
	.vvm-marcas { gap: 28px 36px; }
	.vvm-logo--studiof   { width: 150px; }
	.vvm-logo--ela       { width: 66px; }
	.vvm-logo--falabella { width: 124px; }
	.vvm-logo--mng       { width: 96px; }
	.vvm-logo--velez     { width: 140px; }
	.vvm-logo--noralozza { width: 170px; }
}

/* Logo del sitio (cabecera y pie) */
.vvm-site-logo { margin: 0; line-height: 0; }
.vvm-site-logo img { display: block; height: auto; width: clamp(180px, 20vw, 320px) !important; }
.vvm-site-logo--light img { width: clamp(180px, 17vw, 280px) !important; filter: invert(1); }
.vvm-header, .vvm-footer__brand { align-items: center; }

/* Sombra del arco (SVG con geometría 3D, ver hero.js): sustituye al enmascarado por silueta */
.vvm-shadow.vvm-shadow--arch { background: none; -webkit-mask: none; mask: none; filter: none; overflow: visible; --o: 1; }

/* Sombra del maniquí: se aclara con la distancia al zapato (la cabeza es el punto más lejano) */
.vvm-shadow--mannequin {
	-webkit-mask: var(--m) center / 100% 100% no-repeat, linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 100%);
	-webkit-mask-composite: source-in;
	mask: var(--m) center / 100% 100% no-repeat, linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 100%);
	mask-composite: intersect;
}


/* ==========================================================================
   Correcciones móviles
   ========================================================================== */

/* Flecha de los botones dibujada con CSS (el carácter ↗ lo pintan como emoji en muchos móviles) */
:root { --vvm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.wp-block-button:not(.vvm-no-arrow) > .wp-block-button__link::after,
.vvm-form__btn::after {
	content: ""; display: inline-block; width: .72em; height: .72em; margin-left: .55em; vertical-align: -.03em;
	background: currentColor;
	-webkit-mask: var(--vvm-arrow) center / contain no-repeat; mask: var(--vvm-arrow) center / contain no-repeat;
}

/* Márgenes laterales: WordPress añade .has-global-padding (padding lateral 0) a los grupos y, según el
   orden en que cargue sus estilos cada página, anulaba el margen de las secciones. Especificidad extra. */
.wp-block-group.vvm-section { padding-inline: var(--vvm-pad); }
.wp-block-group.vvm-hero, .wp-block-group.vvm-header, .wp-block-group.vvm-footer, .wp-block-group.vvm-cta {
	padding-inline: max(var(--vvm-pad), calc((100% - var(--wp--style--global--content-size)) / 2));
}
/* Páginas con bloques sueltos (sin sección propia): margen lateral en el contenido */
.wp-block-post-content.is-layout-constrained > :where(:not(.alignfull)) { box-sizing: border-box; padding-inline: var(--vvm-pad); }

/* Formulario: los campos no deben desbordar su columna */
.vvm-form input, .vvm-form textarea { box-sizing: border-box; max-width: 100%; }

/* Menú móvil desplegable: pantalla completa con margen, enlaces grandes alineados a la izquierda */
.vvm-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--pink); color: var(--wp--preset--color--black);
	padding: 22px var(--vvm-pad) 40px;
}
.vvm-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; justify-content: flex-start; padding-top: 14vh; }
.vvm-header .is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.vvm-header .is-menu-open .wp-block-navigation-item { width: 100%; }
.vvm-header .is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2.2rem, 11vw, 3.4rem) !important; font-weight: 900; letter-spacing: -.045em; line-height: 1;
	padding-block: 4px;
}
.vvm-header .wp-block-navigation__responsive-container-close,
.vvm-header .wp-block-navigation__responsive-container-open { padding: 8px; }
.vvm-header .is-menu-open .wp-block-navigation__responsive-container-close { top: 18px; right: calc(var(--vvm-pad) - 8px); }

/* Menú móvil: las reglas de WordPress (fondo blanco, justificación a la derecha) tienen más especificidad */
.vvm-header .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--pink) !important; color: var(--wp--preset--color--black) !important; }
.vvm-header .is-menu-open .wp-block-navigation__responsive-container-content,
.vvm-header .is-menu-open .wp-block-navigation__container,
.vvm-header .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; }


/* ==========================================================================
   Contenido del portafolio: problemas, beneficios, perfil
   ========================================================================== */
.vvm-problems { margin-top: clamp(32px, 4.5vw, 72px); gap: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 56px); }
.vvm-problem { border-top: 2px solid var(--wp--preset--color--black); padding-top: clamp(14px, 1.4vw, 22px); }
.vvm-problem h3 { margin: 6px 0 10px; font-size: clamp(1.15rem, 1.7vw, 1.7rem); line-height: 1.1; }
.vvm-problem p:not(.vvm-num) { margin: 0; font-size: clamp(.92rem, 1.2vw, 1.15rem); color: var(--wp--preset--color--grey); max-width: 26em; }
.vvm-num { margin: 0 !important; font-size: clamp(1.1rem, 1.5vw, 1.5rem); font-weight: 900; letter-spacing: -.02em; color: #c0558f; }
.vvm-beneficios .vvm-num { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1; }
.vvm-problems--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 781px) { .vvm-problems--three { grid-template-columns: 1fr; } }

.vvm-servicio .vvm-h2-md { margin-top: 10px; }
.vvm-servicio p { max-width: 38em; }
.vvm-servicio p + p { margin-top: 1rem; }

.vvm-card-dark { padding: clamp(28px, 3.4vw, 52px); }
.vvm-big-num { margin: 0 !important; font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 900; letter-spacing: -.06em; line-height: .85; color: var(--wp--preset--color--pink); }
.vvm-card-dark__label { margin-top: 10px !important; font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: 600; }
.vvm-card-dark .wp-block-separator { border-color: #444; margin-block: 24px; max-width: none; }
.vvm-card-dark__role { margin: 0 !important; font-size: clamp(.95rem, 1.3vw, 1.25rem); font-weight: 700; line-height: 1.25; }


.vvm-marcas-seccion { padding-block: clamp(2.5rem, 5vw, 5rem); }

/* Botón de contorno rosa sobre fondo negro (sección "La mirada. El método."): la clase de color de WordPress
   (.has-pink-color) lleva !important y dejaba el texto rosa sobre el fondo rosa del hover. */
.vvm-metodo .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--pink);
	border-color: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--black) !important;
}


/* ==========================================================================
   Logos de clientes: franja continua (marcas.js) con tamaños por marca
   ========================================================================== */
.vvm-logo--proditexco   { width: clamp(46px, 4.4vw, 72px); }
.vvm-logo--desigual     { width: clamp(100px, 10.5vw, 170px); }
.vvm-logo--callitspring { width: clamp(100px, 10.5vw, 170px); }
.vvm-logo--tannino      { width: clamp(76px, 8vw, 130px); }
.vvm-logo--nappa        { width: clamp(64px, 6.5vw, 106px); }
.vvm-logo--moma         { width: clamp(76px, 8vw, 130px); }
.vvm-logo--mantra       { width: clamp(96px, 10vw, 160px); }
.vvm-logo--spirito      { width: clamp(90px, 9.5vw, 152px); }
.vvm-logo--face2face    { width: clamp(58px, 6vw, 96px); }
@media (max-width: 781px) {
	.vvm-logo--proditexco { width: 56px; } .vvm-logo--desigual { width: 120px; } .vvm-logo--callitspring { width: 120px; }
	.vvm-logo--tannino { width: 92px; } .vvm-logo--nappa { width: 76px; } .vvm-logo--moma { width: 92px; }
	.vvm-logo--mantra { width: 116px; } .vvm-logo--spirito { width: 108px; } .vvm-logo--face2face { width: 68px; }
}

.vvm-marcas { --vvm-logo-gap: clamp(40px, 6vw, 96px); }
.vvm-marcas.is-marquee {
	display: block; overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.vvm-marcas__rail { display: flex; width: max-content; animation: vvm-marquee var(--vvm-marquee-time, 60s) linear infinite; will-change: transform; }
.vvm-marcas__track { display: flex; align-items: center; flex: none; gap: var(--vvm-logo-gap); padding-right: var(--vvm-logo-gap); }
@keyframes vvm-marquee { to { transform: translate3d(-50%, 0, 0); } }
.vvm-marcas.is-marquee:hover .vvm-marcas__rail,
.vvm-marcas.is-paused .vvm-marcas__rail,
.vvm-marcas.is-offscreen .vvm-marcas__rail { animation-play-state: paused; }

.vvm-marcas__pause {
	display: block; margin: 14px 0 0 auto; padding: 4px 2px; background: none; border: 0; cursor: pointer;
	font: 600 .7rem/1 var(--wp--preset--font-family--inter-tight); text-transform: uppercase; letter-spacing: .04em;
	color: var(--wp--preset--color--grey); text-decoration: underline; text-underline-offset: 3px;
}
.vvm-marcas__pause:hover { color: var(--wp--preset--color--black); }
@media (prefers-reduced-motion: reduce) { .vvm-marcas__rail { animation: none; } .vvm-marcas__pause { display: none; } }

/* ==========================================================================
   Hero en móvil: altura adaptable y botón principal lleno
   ========================================================================== */

/* El hero ocupa como máximo el alto visible de la pantalla (svh = sin contar la barra del navegador) y la
   escena se ajusta al espacio que deja el texto, para que el maniquí y el marco queden completos en cualquier
   teléfono. Antes la altura era fija (860 px) y en pantallas cortas los pies quedaban bajo el pliegue. */
@media (max-width: 781px) {
	.vvm-hero { --hero-h: clamp(640px, 100vh, 860px); --lx: 50%; --ly: 76%; --seam: 86%; }
	@supports (height: 100svh) { .vvm-hero { --hero-h: clamp(640px, 100svh, 860px); } }
	.vvm-hero { min-height: var(--hero-h) !important; display: flex; flex-direction: column; align-items: stretch !important; }
	.vvm-hero__content { order: 1; flex: none; }
	/* La escena pasa a ocupar, dentro del propio hero, todo el espacio que deja el texto (sea cual sea su altura). */
	.vvm-hero__art {
		order: 2; position: relative; inset: auto; left: auto; translate: none; width: auto; height: auto;
		flex: 1 1 260px; min-height: 260px; margin-top: 18px;
		margin-inline: calc(var(--vvm-pad) * -1);
	}
}

/* Botón principal del hero: lleno en negro (llamada a la acción clara); en hover se invierte */
.vvm-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: var(--wp--preset--color--black); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--black);
}
.vvm-hero .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: transparent; color: var(--wp--preset--color--black); border-color: var(--wp--preset--color--black);
}


/* ==========================================================================
   Formulario: consentimiento y errores
   ========================================================================== */
.vvm-form__consent label { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; line-height: 1.4; cursor: pointer; }
.vvm-form__consent input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--wp--preset--color--black); }
.vvm-form__consent a { text-decoration: underline; text-underline-offset: 3px; }
.vvm-form__err { display: block; margin-top: 6px; font-size: .85rem; font-weight: 600; color: #8a1c1c; }
.vvm-form [aria-invalid="true"] { border-color: #8a1c1c; box-shadow: 0 0 0 2px rgba(138, 28, 28, .18); }
.vvm-politica h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.03em; margin-top: 2.2rem; }
.vvm-politica p, .vvm-politica li { max-width: 46em; }
.vvm-politica ul { padding-left: 1.2em; }