/*
Theme Name: Ventana MX
Theme URI: https://ventanamx.com
Description: Tema de Ventana MX. Hijo de Twenty Twenty-Five. Identidad del brief del 17-sep-2026: premium, arquitectonico, sobrio, con la fotografia por encima del grafico.
Author: Mantenimiento ventanamx.com
Template: twentytwentyfive
Version: 1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: ventanamx
*/

/* --------------------------------------------------------------------------
   Casi todo el aspecto vive en theme.json, que es donde WordPress espera
   encontrarlo. Aqui solo va lo que theme.json no sabe expresar.
   -------------------------------------------------------------------------- */

/* Titulares: en arquitectura el texto va apretado, no aireado. */
h1, h2, h3,
.wp-block-post-title {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Etiqueta pequena en versalitas, para antetitulos y pies. */
.vmx-etiqueta {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
}

/* El amarillo de la marca se usa con cuentagotas: subraya, no grita. */
h2::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: .6rem;
	background: var(--wp--preset--color--amarillo);
}
.wp-block-cover h2::after,
.vmx-sin-linea h2::after { display: none; }

/* Enlaces del cuerpo: subrayado fino que se engrosa al pasar. */
.wp-block-post-content a:not(.wp-block-button__link),
.wp-block-page-content a:not(.wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: text-decoration-thickness .15s ease;
}
.wp-block-post-content a:not(.wp-block-button__link):hover {
	text-decoration-thickness: 2px;
}

/* Listas del contenido: mas aire entre puntos, se leen como especificacion. */
.wp-block-post-content ul li { margin-bottom: .5rem; }

/* Preguntas frecuentes de Yoast, con la piel del sitio. */
.schema-faq-section {
	border-top: 1px solid var(--wp--preset--color--borde);
	padding: 1.25rem 0;
}
.schema-faq-question {
	display: block;
	font-size: 1.05rem;
	margin-bottom: .4rem;
	color: var(--wp--preset--color--negro);
}
.schema-faq-answer { margin: 0; color: var(--wp--preset--color--gris); }

/* Imagenes: sin esquinas redondeadas. Esto es aluminio, no una app. */
.wp-block-image img { border-radius: 0; }

/* Cabecera fija y discreta. */
.vmx-cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--blanco);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/* El menu desplegable del tema padre, alineado a la izquierda y sin ruido. */
.wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--borde);
	box-shadow: 0 10px 30px rgba(17,17,17,.08);
}

@media (max-width: 781px) {
	.vmx-cabecera { position: static; }
}

/* --------------------------------------------------------------------------
   CORRECCIONES DE MOVIL — 17-sep-2026
   En pantalla de telefono la cabecera se partia en dos renglones: el logotipo
   arriba y, debajo, el menu hamburguesa junto a un boton enorme. Y el titular
   ocupaba seis lineas, media pantalla.
   -------------------------------------------------------------------------- */

/* La fila de la cabecera no se parte: logotipo a la izquierda, menu a la derecha. */
.vmx-cabecera > .wp-block-group {
	flex-wrap: nowrap;
	gap: 1rem;
}

@media (max-width: 781px) {
	/* El boton de la cabecera sobra en movil: ya esta el de WhatsApp flotando
	   y el de la portada a un dedo de distancia. Quitarlo devuelve la fila. */
	.vmx-cabecera .wp-block-buttons { display: none; }

	/* Logotipo mas contenido. */
	.vmx-cabecera .wp-block-site-logo img { width: 130px; height: auto; }

	/* El titular del hero: de seis lineas a tres. */
	.wp-block-cover h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }

	/* Menos aire vertical dentro del hero, que en movil se vuelve un tunel. */
	.wp-block-cover { min-height: 88vh; }
	.wp-block-cover .wp-block-cover__inner-container { padding-block: 2rem; }

	/* Los dos botones del hero, uno debajo del otro y a todo lo ancho:
	   en el pulgar se aciertan, en fila no. */
	.wp-block-cover .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.wp-block-cover .wp-block-button__link { display: block; text-align: center; }
}

/* El boton flotante de WhatsApp tapaba el ultimo boton de cada seccion. */
@media (max-width: 781px) {
	.wp-block-post-content > .wp-block-buttons:last-child { margin-bottom: 4.5rem; }
}

/* --------------------------------------------------------------------------
   VIDEO DE FONDO DEL ENCABEZADO
   Va detras de la capa oscura del bloque de portada y encima de la imagen,
   que se queda como respaldo: si el video no carga, no se nota.
   -------------------------------------------------------------------------- */
.vmx-hero,
[data-vmx-hero] { position: relative; overflow: hidden; }

.vmx-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;              /* la capa oscura va en 1: el texto nunca pierde contraste */
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}
.vmx-hero-video.vmx-listo { opacity: 1; }

/* --------------------------------------------------------------------------
   El logotipo iba pegado al borde izquierdo de una barra muy ancha, y el
   contenido de la pagina empieza mucho mas adentro. Se acerca al centro para
   que la cabecera no se lea desconectada del resto.
   -------------------------------------------------------------------------- */
@media (min-width: 782px) {
	/* Un respiro extra, para que el logotipo no arranque exactamente donde
	   arranca el texto y la cabecera respire. */
	.vmx-cabecera .wp-block-site-logo { padding-left: 1rem; }
	.vmx-cabecera .wp-block-buttons   { padding-right: 1rem; }
}

/* ==========================================================================
   FRANJA DE PRUEBAS  —  "por que nos llaman"
   Cuatro datos separados por lineas verticales: la misma idea que el monton
   de una ventana, que es de donde sale la marca.
   ========================================================================== */
.vmx-pruebas-cols { gap: 0 !important; }

.vmx-pruebas-cols > .wp-block-column {
	padding: .25rem 2rem;
	border-left: 1px solid var(--wp--preset--color--borde);
}
.vmx-pruebas-cols > .wp-block-column:first-child { border-left: 0; padding-left: 0; }

.vmx-cifra {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--negro);
	margin: 0 0 .1rem;
}
/* La unidad no compite con la cifra: mas pequena y en gris. */
.vmx-cifra-unidad {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
	margin-top: .35rem;
}
/* Filo amarillo arriba de cada dato: el acento de marca, en dosis pequena. */
.vmx-pruebas-cols > .wp-block-column .vmx-cifra::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	background: var(--wp--preset--color--amarillo);
	margin-bottom: 1rem;
}
.vmx-pie {
	font-size: .95rem;
	color: var(--wp--preset--color--gris);
	margin: .9rem 0 0;
	max-width: 22ch;
}
.vmx-pie a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.vmx-garantia {
	font-size: 1rem;
	color: var(--wp--preset--color--gris);
	max-width: 60ch;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.vmx-pruebas-cols { flex-wrap: wrap !important; }
	.vmx-pruebas-cols > .wp-block-column {
		flex-basis: 50% !important;
		padding: 1.25rem 1.25rem;
	}
	.vmx-pruebas-cols > .wp-block-column:nth-child(odd) { border-left: 0; padding-left: 0; }
	.vmx-pruebas-cols > .wp-block-column:nth-child(n+3) {
		border-top: 1px solid var(--wp--preset--color--borde);
		margin-top: .5rem;
	}
}
@media (max-width: 540px) {
	.vmx-pruebas-cols > .wp-block-column {
		flex-basis: 100% !important;
		border-left: 0; padding-left: 0;
	}
	.vmx-pruebas-cols > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--borde);
		padding-top: 1.25rem;
	}
}

/* ==========================================================================
   TARJETAS DE SECTOR  —  el bloque que mas pesa en la decision
   ========================================================================== */
.vmx-sectores .wp-block-column { position: relative; }

.vmx-sectores figure.wp-block-image {
	margin: 0 0 1.1rem;
	overflow: hidden;
	background: var(--wp--preset--color--papel);
}
.vmx-sectores figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.2,.6,.2,1);
}
.vmx-sectores .wp-block-column:hover figure.wp-block-image img { transform: scale(1.04); }

/* El titulo deja de parecer un enlace suelto y pasa a ser titulo de tarjeta. */
.vmx-sectores h3 { margin: 0 0 .5rem; font-size: 1.08rem; line-height: 1.3; }
.vmx-sectores h3::after { display: none; }
.vmx-sectores h3 a {
	color: var(--wp--preset--color--negro);
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
}
.vmx-sectores h3 a::after {
	content: "→";
	color: var(--wp--preset--color--azul);
	transition: transform .25s ease;
}
.vmx-sectores .wp-block-column:hover h3 a::after { transform: translateX(.3rem); }

/* Filo amarillo que crece al pasar: une la tarjeta con el resto del sistema. */
.vmx-sectores h3::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 3px;
	background: var(--wp--preset--color--amarillo);
	margin-bottom: .85rem;
	transition: width .35s ease;
}
.vmx-sectores .wp-block-column:hover h3::before { width: 3rem; }

.vmx-sectores p { font-size: .95rem; color: var(--wp--preset--color--gris); margin: 0; }

/* Toda la tarjeta es zona de clic, no solo el titulo. */
.vmx-sectores .wp-block-column > figure.wp-block-image a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ==========================================================================
   TIRA DE SOLUCIONES  —  avanza sola, se detiene al pasar el raton
   Es un carrusel sin libreria: la pista lleva las tarjetas dos veces y se
   desplaza media pista, asi el bucle cierra sin salto ni salto de vuelta.
   ========================================================================== */
.vmx-tira { overflow: hidden; margin-inline: calc(-1 * var(--wp--style--root--padding-left)); }
.vmx-tira-pista {
	display: flex;
	gap: 1.75rem;
	width: max-content;
	padding-inline: var(--wp--style--root--padding-left);
	animation: vmx-desliza 60s linear infinite;
}
.vmx-tira:hover .vmx-tira-pista,
.vmx-tira:focus-within .vmx-tira-pista { animation-play-state: paused; }

@keyframes vmx-desliza {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.vmx-tira-item {
	flex: 0 0 auto;
	width: clamp(260px, 32vw, 460px);
	text-decoration: none;
	color: inherit;
	display: block;
}
.vmx-tira-foto {
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--borde);
}
.vmx-tira-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.vmx-tira-item:hover .vmx-tira-foto img { transform: scale(1.05); }
.vmx-tira-nombre {
	display: block;
	margin-top: .85rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--wp--preset--color--negro);
	border-top: 3px solid var(--wp--preset--color--amarillo);
	padding-top: .65rem;
	width: 1.5rem;
	white-space: nowrap;
	transition: width .35s ease;
}
.vmx-tira-item:hover .vmx-tira-nombre { width: 3rem; }

@media (prefers-reduced-motion: reduce) {
	.vmx-tira { overflow-x: auto; }
	.vmx-tira-pista { animation: none; }
}
@media (max-width: 600px) { .vmx-tira-item { width: 78vw; max-width: 340px; } }

/* ==========================================================================
   BOTONES  —  centrados, con un destello que cruza como la luz en el cristal
   ========================================================================== */
.wp-block-post-content .wp-block-buttons,
.vmx-sin-linea > .wp-block-buttons { justify-content: center; }

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0; left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-18deg);
	animation: vmx-destello 4.5s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
}
.wp-block-button.is-style-outline .wp-block-button__link::after {
	background: linear-gradient(100deg, transparent, rgba(0,120,215,.16), transparent);
}
@keyframes vmx-destello {
	0%, 62%  { left: -60%; }
	88%,100% { left: 120%; }
}
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link { transition: transform .2s ease, background-color .2s ease, color .2s ease; }

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link::after { animation: none; display: none; }
}

/* ==========================================================================
   PIE  —  los enlaces eran azul sobre negro: ilegibles. Y faltaban las redes.
   ========================================================================== */
footer .wp-block-group a { color: #C7CED6; text-decoration: none; }
footer .wp-block-group a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .2em; }

.vmx-redes { display: flex; gap: .75rem; margin-top: 1.4rem; }
.vmx-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid #2A3038;
	color: #C7CED6;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.vmx-redes a:hover {
	background: var(--wp--preset--color--azul);
	border-color: var(--wp--preset--color--azul);
	color: #FFFFFF;
	text-decoration: none;
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.wpcf7 label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .3rem; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel],
.wpcf7 select, .wpcf7 textarea {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 2px;
	font: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--wp--preset--color--negro);
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--azul);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--azul);
}
.wpcf7 .wpcf7-submit {
	background: var(--wp--preset--color--azul);
	color: #fff;
	border: 0;
	padding: 1rem 2rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .85rem;
	cursor: pointer;
	width: auto;
	border-radius: 2px;
}
.wpcf7 .wpcf7-submit:hover { background: var(--wp--preset--color--negro); }
.wpcf7 .wpcf7-acceptance { font-size: .88rem; font-weight: 400; }
.wpcf7 .wpcf7-list-item { margin: 0; }

/* El de la portada va sobre el azul: etiquetas en blanco y boton invertido. */
.vmx-form-cierre { text-align: left; }
.vmx-form-cierre label,
.vmx-form-cierre .wpcf7-acceptance,
.vmx-form-cierre .wpcf7-acceptance a { color: #fff; }
.vmx-form-cierre .wpcf7-submit { background: #fff; color: var(--wp--preset--color--azul); }
.vmx-form-cierre .wpcf7-submit:hover { background: var(--wp--preset--color--negro); color: #fff; }
.vmx-form-cierre .wpcf7-response-output { color: #fff; border-color: rgba(255,255,255,.5) !important; }
.vmx-form-cierre form > p:last-child { text-align: center; }

/* Imagen vertical en columna, sin que se estire. */
.vmx-foto-alta img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Resenas de Google: que no queden encajonadas en la columna de texto. */
.ti-widget { max-width: none !important; }

/* --------------------------------------------------------------------------
   Paginas interiores: el titulo centrado y la fotografia mas ancha que el
   texto. El texto se queda en su medida legible; la imagen respira.
   -------------------------------------------------------------------------- */
.wp-block-post-content > figure.wp-block-image {
	max-width: min(68rem, 100%);
	margin-inline: auto;
	width: 100%;
}
.wp-block-post-content > figure.wp-block-image img { width: 100%; }

/* El primer parrafo de cada pagina hace de entradilla. */
.wp-block-post-content > p:first-child {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--wp--preset--color--negro);
	max-width: 46rem;
}

/* ==========================================================================
   REJILLA DE SOLUCIONES POR SECTOR
   Misma tarjeta que la tira de la portada, pero quieta: aqui el visitante ya
   esta leyendo, no mirando.
   ========================================================================== */
.vmx-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem 1.25rem;
	margin: 2rem 0 0;
}
.vmx-rejilla-item { text-decoration: none; color: inherit; display: block; }
.vmx-rejilla-foto { display: block; overflow: hidden; background: var(--wp--preset--color--borde); }
.vmx-rejilla-foto img {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.vmx-rejilla-item:hover .vmx-rejilla-foto img { transform: scale(1.05); }
.vmx-rejilla-nombre {
	display: block;
	margin-top: .75rem;
	padding-top: .6rem;
	border-top: 3px solid var(--wp--preset--color--amarillo);
	width: 1.5rem;
	white-space: nowrap;
	font-weight: 600;
	font-size: .98rem;
	color: var(--wp--preset--color--negro);
	transition: width .35s ease;
}
.vmx-rejilla-item:hover .vmx-rejilla-nombre { width: 3rem; }

/* --------------------------------------------------------------------------
   Los titulos de tarjeta no deben leerse como enlaces de los noventa:
   sin subrayado, en negro, y el color solo aparece al pasar por encima.
   -------------------------------------------------------------------------- */
.vmx-sectores h3 a,
.vmx-rejilla-item,
.vmx-tira-item {
	text-decoration: none !important;
}
.vmx-sectores h3 a:hover { color: var(--wp--preset--color--azul); }

/* Iconos de la franja de pruebas. */
.vmx-ico {
	display: block;
	width: 28px; height: 28px;
	color: var(--wp--preset--color--azul);
	margin-bottom: 1rem;
}
.vmx-ico svg { width: 100%; height: 100%; display: block; }
/* Con icono, el filo amarillo va encima de el y no de la cifra. */
.vmx-pruebas-cols > .wp-block-column .vmx-cifra::before { display: block; }
.vmx-pruebas-cols > .wp-block-column .vmx-ico::before {
	content: "";
	display: block;
	width: 1.75rem; height: 3px;
	background: var(--wp--preset--color--amarillo);
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Cierre de pagina: titulo, filo y botones sobre el mismo eje.
   El filo amarillo de los H2 se genera con ::after, asi que al centrar el
   titulo hay que centrarlo tambien a el, o queda colgando a la izquierda.
   -------------------------------------------------------------------------- */
h2.has-text-align-center::after { margin-inline: auto; }

.vmx-cierre { margin-top: var(--wp--preset--spacing--60); }
.vmx-cierre-texto { max-width: 52ch; margin-inline: auto; color: var(--wp--preset--color--gris); }

/* --------------------------------------------------------------------------
   CABECERA DE PAGINA INTERIOR
   Antes era una banda gris con el titulo y, debajo, la foto suelta: se leia
   como una entrada de blog. Ahora la foto ES la cabecera y el titulo va
   encima, igual que en la portada. El sitio se lee como uno solo.
   -------------------------------------------------------------------------- */
.vmx-portada-pagina .wp-block-post-title { margin: 0; letter-spacing: -0.02em; }
.vmx-portada-pagina .wp-block-post-title::after { display: none; }
.vmx-portada-pagina .vmx-entradilla {
	max-width: 46ch;
	margin-inline: auto;
	opacity: .92;
}
.vmx-portada-pagina .vmx-entradilla a { display: none; }   /* sin "leer mas" */

/* Sin foto destacada, la banda queda como un plano de color y no vacia. */
.vmx-portada-pagina:not(:has(img)) { min-height: 30vh !important; }

/* La entradilla del cuerpo ya no hace falta: su sitio esta arriba. */
.vmx-portada-pagina + .wp-block-group .wp-block-post-content > p:first-child {
	font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   La cabecera respeta la proporcion de la foto
   Con altura fija en vh la banda quedaba mucho mas ancha que alta y recortaba
   mas de la mitad de la imagen. Ahora toma la proporcion 16:9 de las fotos,
   con un tope para que en pantallas grandes no ocupe todo el alto.
   -------------------------------------------------------------------------- */
.vmx-portada-pagina {
	aspect-ratio: 16 / 9;
	min-height: 340px !important;
	max-height: 82vh;
}
/* En escritorio la banda respira mas: el tope sube y se le pone un suelo,
   para que en ventanas bajitas no se quede en una franja. */
@media (min-width: 782px) {
	.vmx-portada-pagina {
		min-height: clamp(420px, 56vh, 680px) !important;
		max-height: 90vh;
	}
}
.vmx-portada-pagina .wp-block-cover__image-background { object-position: center; }

/* El velo plano al 58% mataba la foto. Se cambia por un degradado: oscuro
   donde va el texto y casi limpio en los bordes, asi se lee y se ve. */
.vmx-portada-pagina .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		rgba(17,20,24,.55) 0%,
		rgba(17,20,24,.28) 45%,
		rgba(17,20,24,.62) 100%
	) !important;
	opacity: 1 !important;
}
/* Sombra bajo el texto: permite bajar el velo sin perder legibilidad. */
.vmx-portada-pagina .wp-block-post-title,
.vmx-portada-pagina .vmx-entradilla {
	text-shadow: 0 2px 18px rgba(17,20,24,.55);
}

/* En telefono la foto es la que manda: proporcion mas alta y menos recorte. */
@media (max-width: 781px) {
	.vmx-portada-pagina { aspect-ratio: 4 / 3; max-height: none; }
}

/* Sin foto, no hay proporcion que respetar. */
.vmx-portada-pagina:not(:has(img)) {
	aspect-ratio: auto;
	min-height: 28vh !important;
}

/* ==========================================================================
   MENU EN TELEFONO
   Estaba alineado a la derecha, apretado y sin jerarquia: se leia como una
   lista de enlaces, no como un menu. Y no tenia por donde contactar, que es
   lo que un visitante busca en un telefono.
   ========================================================================== */

/* Los accesos de contacto solo existen en el desplegable. */
.vmx-movil { display: none !important; }

@media (max-width: 781px) {

	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.25rem 1.5rem 2.5rem;
		background: #fff;
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		padding-top: 1rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		gap: 0 !important;
	}

	/* Cada entrada, a la izquierda, con aire para el pulgar y su separador. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: flex-start !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: .95rem 0;
		font-size: 1.12rem;
		font-weight: 600;
		color: var(--wp--preset--color--negro);
		border-bottom: 1px solid var(--wp--preset--color--borde);
		text-align: left;
	}

	/* Los grupos (Soluciones, Sectores) se leen como encabezado de seccion. */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--azul);
		border-bottom: 0;
		padding-bottom: .35rem;
		pointer-events: none;            /* el titulo no navega: agrupa */
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon { display: none; }
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 0 .75rem !important;
		width: 100% !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-weight: 500;
		font-size: 1.05rem;
		padding: .8rem 0 .8rem 1rem;
		color: var(--wp--preset--color--negro);
	}

	/* Bloque de contacto al final: lo que se busca en un telefono. */
	.vmx-movil { display: flex !important; }
	.vmx-movil .wp-block-navigation-item__content {
		padding-left: 2.2rem !important;
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 20px 20px;
		font-weight: 500 !important;
		font-size: 1.02rem !important;
	}
	.vmx-movil-cta .wp-block-navigation-item__content {
		background: var(--wp--preset--color--azul) !important;
		color: #fff !important;
		text-align: center;
		padding: 1rem !important;
		margin: 1.5rem 0 .5rem;
		border-radius: 2px;
		border-bottom: 0 !important;
		letter-spacing: .06em;
		text-transform: uppercase;
		font-size: .88rem !important;
		font-weight: 600 !important;
	}
	.vmx-ico-wa .wp-block-navigation-item__content   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M12.05 21.8a9.8 9.8 0 0 1-4.99-1.37l-.36-.21-3.71.97.99-3.62-.23-.37a9.78 9.78 0 0 1-1.5-5.22c0-5.4 4.4-9.8 9.81-9.8 2.62 0 5.08 1.02 6.93 2.88a9.74 9.74 0 0 1 2.87 6.93c0 5.41-4.4 9.81-9.8 9.81m8.47-18.32A11.7 11.7 0 0 0 12.05 0C5.58 0 .32 5.26.32 11.73c0 2.07.54 4.09 1.57 5.87L.22 24l6.55-1.72a11.7 11.7 0 0 0 5.28 1.35c6.46 0 11.72-5.26 11.73-11.73a11.66 11.66 0 0 0-3.27-8.42'/%3E%3C/svg%3E"); }
	.vmx-ico-tel .wp-block-navigation-item__content  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078D7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
	.vmx-ico-mail .wp-block-navigation-item__content { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078D7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E"); }
	.vmx-ico-mapa .wp-block-navigation-item__content { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078D7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }

	/* El boton de cerrar, donde se espera. */
	.wp-block-navigation__responsive-container-close { top: 1.4rem; right: 1.4rem; }
}

/* --------------------------------------------------------------------------
   El final del menu iba apretado: los accesos de contacto y las dos ultimas
   entradas se pegaban entre si. Se les da el mismo aire que al resto y se
   separa el bloque de contacto del de navegacion.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-block: 1.15rem;
	}

	/* Contacto: bloque aparte, con su propia respiracion. */
	.vmx-movil-cta .wp-block-navigation-item__content {
		margin: 2.25rem 0 1.5rem !important;
		padding: 1.15rem !important;
	}
	.vmx-movil:not(.vmx-movil-cta) .wp-block-navigation-item__content {
		padding-block: 1.1rem !important;
		background-position: left 1.15rem;
	}
	.vmx-movil:not(.vmx-movil-cta):last-child .wp-block-navigation-item__content {
		border-bottom: 0 !important;
	}

	/* Un respiro al final, para que el ultimo renglon no quede contra el borde. */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content { padding-bottom: 2.5rem; }
}

/* --------------------------------------------------------------------------
   FORMULARIOS: el campo se desbordaba en telefono
   Los campos llevaban ancho 100% mas relleno y borde. Sin box-sizing eso
   suma y se sale de la pantalla. Se corrige en todo el formulario.
   -------------------------------------------------------------------------- */
.wpcf7 input, .wpcf7 select, .wpcf7 textarea, .wpcf7 button {
	box-sizing: border-box;
	max-width: 100%;
}
.wpcf7 form { max-width: 100%; }
.wpcf7 p { margin-block: 0 1.1rem; }
.wpcf7 textarea { min-height: 7rem; resize: vertical; }

/* El select nativo en movil se ve distinto a los campos: se iguala. */
.wpcf7 select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6470' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: 18px;
	padding-right: 2.6rem;
}

/* --------------------------------------------------------------------------
   CIERRE DE LA PORTADA sobre fondo claro
   El azul a sangre competia con los botones y se comia media pantalla.
   -------------------------------------------------------------------------- */
.vmx-cierre-portada .wpcf7 input[type=text],
.vmx-cierre-portada .wpcf7 input[type=email],
.vmx-cierre-portada .wpcf7 input[type=tel],
.vmx-cierre-portada .wpcf7 select,
.vmx-cierre-portada .wpcf7 textarea {
	background: #fff;
	border-color: #D6DBE1;
}
.vmx-cierre-portada label,
.vmx-cierre-portada .wpcf7-acceptance { color: var(--wp--preset--color--negro); }
.vmx-cierre-portada .wpcf7-submit { background: var(--wp--preset--color--azul); color: #fff; }
.vmx-cierre-portada .wpcf7-submit:hover { background: var(--wp--preset--color--negro); }
.vmx-cierre-portada .wpcf7-response-output { color: var(--wp--preset--color--negro); }

/* El formulario, separado de los botones para que no se lean como lo mismo. */
.vmx-form-cierre {
	background: #fff;
	border: 1px solid var(--wp--preset--color--borde);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-top: 3rem !important;
}

/* Boton de catalogo completo, con su aire. */
.vmx-ver-todas { margin-top: 2.5rem; }


/* Boton de llamar, bajo la franja de pruebas: el telefono sigue siendo el
   canal mas directo para quien anda en obra. */
.vmx-llamanos { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   MIGAS DE PAN
   Van bajo la banda de la cabecera, discretas: son para orientarse, no para
   competir con el titulo.
   -------------------------------------------------------------------------- */
.vmx-migas-banda {
	border-bottom: 1px solid var(--wp--preset--color--borde);
	padding-block: .85rem;
}
.vmx-migas-banda p { margin: 0; }
.vmx-migas {
	font-size: .86rem;
	color: var(--wp--preset--color--gris);
	line-height: 1.5;
}
.vmx-migas a {
	color: var(--wp--preset--color--gris);
	text-decoration: none;
}
.vmx-migas a:hover { color: var(--wp--preset--color--azul); text-decoration: underline; text-underline-offset: .2em; }
.vmx-migas .breadcrumb_last { color: var(--wp--preset--color--negro); font-weight: 600; }

@media (max-width: 600px) {
	.vmx-migas { font-size: .8rem; }
	/* En telefono se recorta el principio y se conserva el final, que es
	   donde esta uno parado. */
	.vmx-migas-caja {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
	}
	.vmx-migas-caja::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   ESQUEMA DEL MECANISMO
   Una seccion lateral dice en un vistazo lo que una fotografia no logra:
   donde esta el pivote y hacia donde abre la hoja.
   -------------------------------------------------------------------------- */
.vmx-esquema {
	margin: 1.5rem 0 0;
	padding: 1.5rem;
	background: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--preset--color--borde);
	max-width: 22rem;
}
.vmx-esquema svg { display: block; width: 100%; height: auto; }
.vmx-esquema figcaption {
	margin-top: .75rem;
	font-size: .85rem;
	color: var(--wp--preset--color--gris);
	text-align: center;
}

/* El logotipo va en SVG: sin alto explicito, el navegador le da el del lienzo. */
.wp-block-site-logo img[src$=".svg"] { width: 190px; height: auto; }
@media (max-width: 781px) { .wp-block-site-logo img[src$=".svg"] { width: 145px; } }
footer img[src$=".svg"] { width: 200px; height: auto; }