/*
Theme Name: Viralizate
Theme URI: https://viralizate.com.ar
Author: Viralizate
Description: Theme propio de Viralizate. Hibrido: plantillas PHP para la estructura y theme.json como unica fuente de verdad del diseno. Sin page builders ni frameworks CSS.
Version: 0.2.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viralizate
Tags: custom-theme, block-styles, wide-blocks, accessibility-ready
*/

/*
 * REGLA DEL PROYECTO
 * ------------------
 * Ningun color, tamano de fuente o espaciado se escribe a mano aca.
 * Todo sale de theme.json a traves de sus variables CSS:
 *
 *   var(--wp--preset--color--accent)
 *   var(--wp--preset--font-size--lg)
 *   var(--wp--preset--spacing--40)
 *   var(--wp--custom--radius--pill)
 *
 * Si un valor hace falta y no existe, se agrega a theme.json, no aqui.
 *
 * NOTA SOBRE !important
 * ---------------------
 * El header y el footer de produccion usaban 495 declaraciones !important para
 * ganarle al CSS de Elementor y del tema anterior. Aca no hay ni una: el theme
 * es propio y no hay CSS ajeno compitiendo. Si alguna vez hace falta un
 * !important, es senal de que algo se instalo mal, no de que falte peso.
 */

/* ================================================================== RESET */

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

body {
	margin: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
}

/* =========================================================== ACCESIBILIDAD */

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.skip-link:focus {
	left: var(--wp--preset--spacing--30);
	top: var(--wp--preset--spacing--30);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Quien pide menos movimiento en su sistema no recibe ninguna animacion.
   En este theme importa: el logotipo y la portada tienen varias en bucle. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ================================================================= ICONOS */

.vrlz-icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}

.vrlz-chevron {
	font-size: 0.7em;
	transition: transform 0.2s ease;
}

/* ============================================================== ESTRUCTURA */

.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.site-main {
	flex: 1 0 auto;
	padding-block: var(--wp--preset--spacing--50);
}

/*
 * ANCHO DEL SITIO
 *
 * Manda un solo valor: --wp--custom--ancho--general, definido en theme.json
 * (1420px). Lo usan el encabezado, el pie, las cinco secciones de la portada,
 * la tienda, las calculadoras y el bloque de preguntas frecuentes.
 *
 * Antes cada seccion traia su propio numero y el resultado era un embudo:
 * 1400 el hero, 1300 la grilla de redes, 1200 los testimonios, 1020 los
 * servicios y 820 el bloque SEO. La pagina se iba cerrando hacia abajo.
 *
 * El TEXTO no sigue ese ancho: para prosa esta --wp--custom--ancho--texto
 * (820px). A 1420 una linea pasa de 200 caracteres y se lee mal.
 */
.container {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

/* ================================================================= HEADER */

.vrlz-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vrlz-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	position: relative;
	max-width: var(--wp--style--global--wide-size);
	height: var(--wp--custom--header--height);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.vrlz-left,
.vrlz-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* El mega-menu se alinea contra el borde de este bloque, no del header. */
.vrlz-left {
	position: relative;
}

/* ------------------------------------------------------------------ Logo */

/* El logotipo es solo texto. El brillo recorre el gradiente de la marca. */
@keyframes vrlz-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}

.vrlz-logo-wrap {
	margin: 0;
	font-size: inherit;
	line-height: 1;
}

.vrlz-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.vrlz-logo-text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: -1px;
	text-transform: uppercase;
	line-height: 1;
	background-image: var(--wp--preset--gradient--brand-shimmer);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: vrlz-shimmer 3s linear infinite;
	filter: drop-shadow(0 0 10px rgba(112, 0, 255, 0.45)) drop-shadow(0 0 4px rgba(0, 242, 255, 0.3));
	transition: filter 0.3s ease;
}

/*
 * El simbolo de marca registrada, en volado y mas chico.
 * No define color propio: hereda el -webkit-text-fill-color transparente del
 * padre, asi que el gradiente lo recorta junto con el resto del nombre.
 */
.vrlz-logo-reg {
	font-size: 0.42em;
	font-style: normal;
	font-weight: 700;
	vertical-align: super;
	/* El logotipo tiene letter-spacing negativo; aca se anula para que el
	   espacio antes del simbolo no quede comido. */
	letter-spacing: normal;
}

.vrlz-logo:hover .vrlz-logo-text {
	filter: drop-shadow(0 0 16px rgba(0, 242, 255, 0.9)) drop-shadow(0 0 30px rgba(112, 0, 255, 0.6));
	animation-duration: 1s;
}

/* ------------------------------------------------------------ Nav y mega */

.vrlz-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vrlz-nav > li {
	position: static;
}

.vrlz-nav a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	white-space: nowrap;
	padding: 8px 2px;
	transition: color 0.2s ease;
}

.vrlz-nav a:hover {
	color: var(--wp--preset--color--accent);
}

.vrlz-nav li.is-open > a .vrlz-chevron {
	transform: rotate(180deg);
}

.vrlz-mega {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	overflow: hidden;
	background-color: var(--wp--preset--color--light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 16px 36px rgba(10, 10, 15, 0.35);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.vrlz-nav li.is-open .vrlz-mega {
	opacity: 1;
	transform: translateY(4px);
	pointer-events: auto;
}

.vrlz-mega-nets {
	width: 210px;
	padding: 10px;
	border-right: 1px solid var(--wp--preset--color--border);
	flex-shrink: 0;
}

.vrlz-mega-net-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	border-radius: 9px;
	background: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-align: left;
}

.vrlz-mega-net-btn:hover,
.vrlz-mega-net-btn.is-active {
	background-color: var(--wp--preset--color--contrast);
}

.vrlz-net-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--wp--preset--color--light);
	font-size: 12px;
	flex-shrink: 0;
}

.vrlz-mega-panels {
	width: 300px;
	padding: 18px;
}

.vrlz-mega-panel {
	display: none;
}

.vrlz-mega-panel.is-active {
	display: block;
}

.vrlz-mega-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vrlz-mega-panel-head .vrlz-net-ico {
	width: 34px;
	height: 34px;
	font-size: 15px;
}

.vrlz-mega-panel-head strong {
	display: block;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--navy);
}

.vrlz-mega-panel-head span {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.vrlz-mega-services a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.vrlz-mega-services a::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.5;
	flex-shrink: 0;
}

.vrlz-mega-services a:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------- Moneda, pais, carrito */

.vrlz-currency {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
}

.vrlz-currency button {
	padding: 6px 12px;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.vrlz-currency button.is-active {
	background-image: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--light);
}

.vrlz-currency button:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.vrlz-country,
.vrlz-foot-country {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	padding: 6px 4px;
}

/* Bandera dibujada en el sprite, no traida de flagcdn.com: una peticion
   externa menos. Los emoji de bandera no sirven porque Windows no los pinta. */
.vrlz-flag {
	width: 1.5em;
	height: 1em;
	border-radius: 2px;
}

/* ---- Desplegable del selector de pais (2026-08-30)

   Lleva de viralizate.com.ar a viralizate.uy y al reves. Hasta esta fecha el
   boton de pais no hacia nada; el chevron prometia una lista que no existia.

   Toma los mismos tokens que .vrlz-mega para que sea el mismo panel visual del
   mega-menu, y no una caja con estilo propio. */

/* inline-block para que la caja mida lo que el boton y no todo el ancho
   disponible: en el pie vive dentro de una columna de 420px, y si se estirara,
   el panel anclado a su borde quedaria lejos del boton que lo abre. */
.vrlz-country-wrap {
	position: relative;
	display: inline-block;
}

.vrlz-country-menu {
	position: absolute;
	top: calc(100% + 6px);
	/* Anclado a la derecha: es el penultimo elemento de la barra y abriendo
	   hacia la izquierda no se sale de la pantalla en un telefono. */
	right: 0;
	z-index: 60;
	min-width: 172px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--wp--preset--color--light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 16px 36px rgba(10, 10, 15, 0.35);
}

.vrlz-country-op {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	/* navy, NO contrast: el panel es blanco (--light) y --contrast es #F4F1EE,
	   casi blanco tambien. Con contrast el enlace quedaba ilegible sobre su
	   propio fondo. Es el mismo par que usa el mega-menu, que es este mismo
	   panel blanco. */
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	white-space: nowrap;
}

/* El resaltado tambien sale del mega-menu (.vrlz-mega-net-btn:hover): sobre
   blanco, --contrast es el gris calido, no el texto. */
a.vrlz-country-op:hover,
a.vrlz-country-op:focus-visible {
	background-color: var(--wp--preset--color--contrast);
}

/* El pais en el que ya estas no es un enlace: es un <span>. Se marca apagado
   para que se lea como "estas aca" y no como una opcion que no responde. */
.vrlz-country-op.is-actual {
	color: var(--wp--preset--color--muted);
	cursor: default;
}

/* En el pie el control esta contra el borde IZQUIERDO de su columna, asi que
   el panel se abre hacia la derecha. Al reves que en la barra superior, donde
   el boton esta pegado al borde derecho de la pantalla y abrir hacia la
   derecha lo sacaria de pantalla en un telefono. */
.vrlz-country-wrap--foot .vrlz-country-menu {
	right: auto;
	left: 0;
}

/* El nombre del pais SI se ve dentro del desplegable en movil, aunque en el
   boton este oculto (ver la regla de .vrlz-country > span a 1024px): sin el
   texto, la lista serian dos banderitas sueltas sin explicacion. */
@media (max-width: 1024px) {
	.vrlz-country-menu {
		min-width: 156px;
	}
}

.vrlz-cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 18px;
}

.vrlz-cart-badge {
	position: absolute;
	top: 2px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light);
	font-size: 10px;
	font-weight: 700;
}

/*
 * El color va con respaldo literal, y solo aca y en el cierre del panel.
 *
 * Estos dos botones son transparentes y sin borde: lo unico que los hace
 * visibles es el color del icono, que es `fill: currentColor`. Si la variable no
 * resuelve, `color` cae en el valor inicial -negro- sobre un encabezado negro y
 * el boton desaparece. En el resto del sitio ese mismo fallo se ve como un texto
 * de otro color; aca se ve como que el boton no esta.
 */
/*
 * ==========================================================================
 * REGLA: un <button> que solo muestra un icono va con `grid`, NUNCA con `flex`.
 * ==========================================================================
 *
 * Esto no es preferencia, es lo que midio el aparato. El 27/08/2026, en el mismo
 * iPhone 8 Plus, la misma pagina y el mismo momento:
 *
 *   .vrlz-mobile-close   display:grid + barras dibujadas con CSS  ->  SE VE
 *   .vrlz-burger         display:flex + barras dibujadas con CSS  ->  NO se ve
 *   .vrlz-cart-close     display:flex + un <svg> adentro          ->  NO se ve
 *   .vrlz-cart           display:flex ... pero es un <a>          ->  SE VE
 *
 * Las dos primeras dibujan lo mismo, de la misma forma, con una sola diferencia:
 * grid contra flex. Y la cuarta usa flex y anda, porque no es un <button>.
 *
 * O sea: ese WebKit no aplica `display:flex` a un <button>. El contenido -hijo o
 * pseudo-elemento- se queda en contexto inline, y a un inline no reemplazado no
 * se le aplican `width` ni `height`: colapsa a nada. El boton conserva su
 * tamano y sigue respondiendo al toque, pero no se ve. `display:grid` si se
 * aplica, y ahi el contenido queda blockificado y las medidas valen.
 *
 * Antes de culpar al SVG -se perdieron tres intentos ahi- mirar el `display`.
 */
.vrlz-burger {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--contrast, #f4f1ee);
	font-size: 20px;
	flex-shrink: 0;
}

/*
 * ==========================================================================
 * La hamburguesa y el cierre del panel NO llevan SVG: se dibujan con CSS.
 * ==========================================================================
 *
 * Reportado el 27/08/2026 en un iPhone 8 Plus (414x736): esos dos botones, y
 * solo esos dos, salen vacios. En el resto de los telefonos se ven. El dato que
 * cerro el diagnostico: **el boton funciona, abre el menu, pero no se ve**. O
 * sea que el boton esta, mide bien y responde al toque; lo unico que no ocurre
 * es que el dibujo se pinte.
 *
 * Se probaron tres correcciones sobre el SVG y ninguna alcanzo: `xlink:href`
 * ademas de `href`, tamano en px en vez de `em`, y copiar el <path> adentro en
 * vez de referenciarlo con <use>. Ninguna se pudo reproducir desde aca: en
 * Chrome a 414x736, el ancho exacto del aparato, las tres se ven bien.
 *
 * Asi que se deja de depender de que el SVG se pinte. Estas son las dos unicas
 * partes del sitio donde el icono no es un adorno al lado de un texto sino la
 * unica forma de saber que el boton existe -abrir el menu y cerrarlo-, y no
 * pueden quedar sujetas a que un motor dibuje un <svg> dentro de un <button>.
 *
 * Tres barras y una cruz son bordes y fondos: no hay motor que renderice esta
 * pagina y no los pinte. Es la parte mas vieja y mas soportada del CSS.
 *
 * Las medidas salen del propio dibujo que reemplazan, para que no se note el
 * cambio: el simbolo `menu` es un viewBox de 24 con barras de 18x2 separadas
 * cada 5, escalado a 20px -> 15 x 1,7 con 4,2 de paso. Se redondea a 16 x 2 con
 * paso 5, que a 2x y 3x cae en pixel entero y sale mas nitido.
 *
 * El nombre accesible se mudo al <button> (aria-label en header.php y en
 * mobile-menu.php): sin SVG adentro, no hay donde ponerlo si no.
 */
.vrlz-burger::before {
	content: "";
	/* `display:block` explicito: no depende de que el grid del padre blockifique. */
	display: block;
	width: 16px;
	height: 2px;
	background: currentColor;
	/* Las otras dos barras. Una sola caja con dos sombras: no hacen falta mas. */
	box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
	/* Por si el fondo del boton se pintara encima del pseudo-elemento. */
	position: relative;
	z-index: 1;
}

/* ========================================================= PANEL LATERAL */

/* Un velo mas oscuro que esto no aporta nada: sobre una pagina ya oscura
   deja la pantalla en negro y el contexto de fondo se pierde del todo. */
.vrlz-mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background-color: rgba(20, 20, 30, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.vrlz-mobile-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.vrlz-mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 201;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 380px;
	height: 100%;
	background-color: var(--wp--preset--color--surface);
	border-left: 1px solid var(--wp--preset--color--border);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.34, 1, 0.64, 1);
}

.vrlz-mobile-menu.is-open {
	transform: translateX(0);
}

/* La barra de administracion ocupa el borde superior de la ventana. Sin este
   desplazamiento, la cabecera del panel queda tapada por ella. */
.admin-bar .vrlz-mobile-menu,
.admin-bar .vrlz-mobile-overlay {
	top: 32px;
}

.admin-bar .vrlz-mobile-menu {
	height: calc(100% - 32px);
}

@media (max-width: 782px) {
	.admin-bar .vrlz-mobile-menu,
	.admin-bar .vrlz-mobile-overlay {
		top: 46px;
	}

	.admin-bar .vrlz-mobile-menu {
		height: calc(100% - 46px);
	}
}

/* ---------------------------------------------------- Cabecera del panel */

.vrlz-mobile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: 16px 20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base);
	flex-shrink: 0;
}

.vrlz-mobile-head .vrlz-logo-text {
	font-size: 22px;
}

.vrlz-mobile-close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--border, #23232e);
	border-radius: 50%;
	background: transparent;
	/* Respaldo literal por el mismo motivo que en .vrlz-burger. */
	color: var(--wp--preset--color--muted, #8e8da0);
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.2s ease, border-color 0.2s ease;
}

/*
 * La cruz, dibujada con CSS por el mismo motivo que la hamburguesa. Ver la nota
 * larga en .vrlz-burger::before.
 *
 * El simbolo `close` es un aspa de 15,4 unidades de brazo en un viewBox de 24,
 * escalada a 16px -> unos 10,3 de brazo. Dos barras de 13 x 1,6 cruzadas dan lo
 * mismo a ojo y se pintan siempre.
 */
.vrlz-mobile-close::before,
.vrlz-mobile-close::after {
	content: "";
	display: block;
	grid-area: 1 / 1; /* Las dos en la misma celda: el place-items las centra. */
	width: 13px;
	height: 1.6px;
	background: currentColor;
	position: relative;
	z-index: 1;
}

.vrlz-mobile-close::before { transform: rotate(45deg); }
.vrlz-mobile-close::after  { transform: rotate(-45deg); }

.vrlz-mobile-close:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------ Cuerpo del panel */

/* El cuerpo es lo unico que scrollea: cabecera y pie quedan siempre a la
   vista, asi el carrito de servicios y el cierre no se pierden al bajar. */
.vrlz-mobile-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: var(--wp--preset--spacing--30);
}

.vrlz-mobile-home {
	display: block;
	padding: 16px 20px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vrlz-mobile-home:hover {
	color: var(--wp--preset--color--accent);
}

.vrlz-mobile-label {
	margin: var(--wp--preset--spacing--30) 20px var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vrlz-mobile-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vrlz-mobile-item + .vrlz-mobile-item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.vrlz-mobile-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	padding: 12px 20px;
	border: none;
	background: none;
	color: var(--wp--preset--color--contrast);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.vrlz-mobile-row:hover,
.vrlz-mobile-row[aria-expanded="true"] {
	background-color: rgba(255, 255, 255, 0.04);
}

.vrlz-net-label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Mismo circulo de color que el mega-menu de escritorio: antes aca habia un
   punto de 9 px y las dos navegaciones no se parecian en nada. */
.vrlz-mobile-row .vrlz-net-ico {
	width: 30px;
	height: 30px;
	font-size: 14px;
}

.vrlz-net-name {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
}

.vrlz-net-count {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: rgba(255, 255, 255, 0.07);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

.vrlz-mobile-row[aria-expanded="true"] .vrlz-net-count {
	background-color: var(--net);
	color: var(--wp--preset--color--base);
}

.vrlz-mobile-row .vrlz-chevron {
	color: var(--wp--preset--color--muted);
}

.vrlz-mobile-row[aria-expanded="true"] .vrlz-chevron {
	transform: rotate(180deg);
	color: var(--net);
}

/*
 * Colapso con grid-template-rows 0fr → 1fr: no hay que adivinar una altura
 * maxima y funciona igual con 1 servicio que con 4.
 *
 * OJO: exige UN SOLO hijo de grilla. Con los enlaces sueltos, cada uno genera
 * su propia fila y solo colapsa la primera, dejando el submenu abierto. De ahi
 * el .vrlz-submenu-inner.
 */
.vrlz-submenu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.vrlz-submenu.is-open {
	grid-template-rows: 1fr;
}

.vrlz-submenu-inner {
	overflow: hidden;
}

.vrlz-submenu a {
	display: block;
	margin-left: 34px;
	padding: 10px 20px 10px 18px;
	/* La linea vertical en el color de la red une los servicios con su
	   cabecera: sin ella, en una lista larga se pierde de quien cuelga cada uno. */
	border-left: 2px solid var(--net);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.vrlz-submenu a:first-child { padding-top: 4px; }
.vrlz-submenu a:last-child  { padding-bottom: 14px; }

.vrlz-submenu a:hover {
	color: var(--wp--preset--color--contrast);
	background-color: rgba(255, 255, 255, 0.03);
}

/* ----------------------------------------------------------- Pie del panel */

.vrlz-mobile-foot {
	flex-shrink: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base);
}

.vrlz-mobile-currency {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
}

.vrlz-mobile-currency > span {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.vrlz-mobile-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 20px 20px;
	padding: 13px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--network--whatsapp);
	color: #fff;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	transition: filter 0.2s ease;
}

.vrlz-mobile-wa:hover {
	filter: brightness(1.1);
	text-decoration: none;
}

.vrlz-mobile-wa .vrlz-icon {
	width: 18px;
	height: 18px;
}

/* ================================================================= FOOTER */

.vrlz-footer {
	background-color: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}

.vrlz-footer-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.vrlz-foot-top {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
}

.vrlz-foot-brand {
	max-width: 420px;
}

.vrlz-foot-brand .vrlz-logo-text {
	font-size: 24px;
}

.vrlz-foot-tagline {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

.vrlz-foot-country {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 7px 14px;
}

.vrlz-foot-social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--30);
}

.vrlz-foot-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	text-decoration: none;
	transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.vrlz-foot-soc:hover {
	transform: translateY(-3px);
}

.vrlz-foot-soc--facebook:hover {
	background-color: var(--wp--custom--network--facebook);
	box-shadow: 0 6px 16px rgba(24, 119, 242, 0.4);
}

.vrlz-foot-soc--instagram:hover {
	background-image: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
	box-shadow: 0 6px 16px rgba(221, 42, 123, 0.4);
}

.vrlz-foot-soc--whatsapp:hover {
	background-color: var(--wp--custom--network--whatsapp);
	box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.vrlz-foot-help {
	min-width: 160px;
}

.vrlz-foot-h {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.vrlz-foot-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.vrlz-foot-link {
	display: block;
	padding: 7px 0;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	transition: color 0.18s ease, padding-left 0.18s ease;
}

.vrlz-foot-link:hover {
	color: var(--wp--preset--color--accent);
	padding-left: 4px;
}

.vrlz-foot-sep {
	height: 1px;
	margin: var(--wp--preset--spacing--50) 0;
	border: none;
	background-color: var(--wp--preset--color--border);
}

.vrlz-foot-nets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.vrlz-foot-bottom {
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.vrlz-foot-brand-name {
	background-image: var(--wp--preset--gradient--brand);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-weight: 800;
}

/* ============================================================== ENTRADAS */

.entry + .entry {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.entry-title {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.2;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover {
	text-decoration: underline;
}

.entry-meta {
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.entry-thumbnail {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pagination {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.pagination .page-numbers {
	display: inline-block;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}

.pagination .current {
	font-weight: 700;
	text-decoration: underline;
}

/* ============================================================ RESPONSIVE */

@media (max-width: 1024px) {
	/* En pantallas chicas "Servicios" se oculta: el mismo contenido ya esta
	   dentro del panel de la hamburguesa. */
	.vrlz-nav {
		display: none;
	}

	.vrlz-logo-text {
		font-size: 20px;
	}

	/*
	 * Centrado real del logotipo.
	 *
	 * Con space-between y tres hijos el logo queda centrado SOLO si los dos
	 * costados pesan lo mismo: el espacio libre se parte en dos huecos iguales,
	 * pero el centro del logo cae en (ancho + izquierda - derecha) / 2. Aca no
	 * pesan lo mismo. A la izquierda queda la hamburguesa sola, 38px; a la
	 * derecha bandera y carrito, unos 84px. Son 23px de corrimiento hacia la
	 * izquierda, y se notan porque el nombre es lo unico centrado de la barra.
	 *
	 * Sacandolo del flujo y anclandolo al 50% del contenedor el centrado deja de
	 * depender de cuanto pese cada costado. El contenedor ya es position:relative.
	 *
	 * VA SCOPEADO AL HEADER, igual que la moneda de aca abajo. El mismo
	 * componente -template-parts/header/branding.php- se imprime tres veces: en
	 * la cabecera, en el pie y en el panel lateral. Sin el scope, los otros dos
	 * tambien salian del flujo y quedaba un VIRALIZATE flotando sobre la
	 * portada. Fue exactamente lo que paso al publicarlo.
	 */
	.vrlz-header .vrlz-logo-wrap {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/* La moneda pasa al panel lateral; arriba quedan bandera y carrito.
	   Va scopeado al header porque el panel tiene su propio selector. */
	.vrlz-header .vrlz-currency {
		display: none;
	}

	.vrlz-country > span {
		display: none;
	}

	.vrlz-mobile-menu {
		max-width: 100%;
	}

	.vrlz-foot-nets {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.vrlz-foot-top {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	.vrlz-foot-brand {
		max-width: none;
	}
}

@media (max-width: 560px) {
	.vrlz-foot-nets {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.vrlz-header-inner {
		height: var(--wp--custom--header--height-mobile);
		padding-inline: var(--wp--preset--spacing--20);
	}

	.vrlz-logo-text {
		font-size: 16px;
		letter-spacing: -0.5px;
	}
}

@media (max-width: 360px) {
	.vrlz-foot-nets {
		grid-template-columns: 1fr;
	}
}

/*
 * Pantallas muy angostas: el logotipo vuelve al flujo.
 *
 * Centrado al 50% el logotipo esta fuera del flujo, asi que nada lo empuja: en
 * cuanto la pantalla se achica lo suficiente se monta encima de la bandera.
 * Medido en el navegador con el logotipo a 16px: a 356px de viewport sobran
 * 14,9px hasta la bandera; a 316px faltan 5,1px. El cruce esta en 326px, y de
 * ahi este corte con margen.
 *
 * Abajo de ese ancho el nombre queda unos 23px corrido a la izquierda, que es
 * como estaba en todos los anchos hasta hoy. Descentrado se lee; pisado, no.
 */
@media (max-width: 340px) {
	.vrlz-header .vrlz-logo-wrap {
		position: static;
		transform: none;
	}
}