/* =========================================================================
   VIRALREAX — Hoja de estilos del tema
   =========================================================================
   Índice
   01. Variables de diseño
   02. Base y accesibilidad
   03. Tipografía
   04. Secciones y contenedores
   05. Botones
   06. Cabecera
   07. Hero
   08. Franja de acento
   09. Problema
   10. Qué hacemos
   11. Servicios (tarjetas)
   12. Método (pasos)
   13. Resultados (métricas y casos)
   14. Anuncios (marquesina)
   15. Garantía
   16. Preguntas frecuentes (acordeón)
   17. Llamado a la acción final
   18. Pie de página
   19. Ventana emergente del formulario
   20. Páginas interiores, 404 y gracias
   21. Responsive
   22. Preferencias de movimiento e impresión
   ========================================================================= */


/* =========================================================================
   01. VARIABLES DE DISEÑO
   ========================================================================= */

:root {
	/* Paleta — tomada del logotipo de ViralReax (negro cálido + naranja ámbar). */
	--vr-cream: #fffaf2;
	--vr-stone: #f3ede3;
	--vr-white: #ffffff;
	--vr-line: #e6ded1;
	--vr-ink: #16130f;
	--vr-ink-soft: #221d16;
	--vr-bone: #f7f3ec;
	--vr-muted: #6e6559;
	--vr-accent: #f5a623;
	/* Naranja oscuro para titulares grandes y detalles decorativos (3.2:1,
	   suficiente para texto grande y elementos no textuales). */
	--vr-accent-deep: #c97f0a;
	/* Naranja para texto pequeno: cumple AA (>=4.5:1) sobre crema y blanco. */
	--vr-accent-text: #9a6000;
	/* Rojo del botón de cerrar (4.6:1 sobre blanco). */
	--vr-danger: #e02b20;

	/* Superficies sobre fondo oscuro. */
	--vr-dark-surface: rgba(247, 243, 236, 0.045);
	--vr-dark-border: rgba(247, 243, 236, 0.13);
	--vr-dark-muted: rgba(247, 243, 236, 0.62);

	/* Radios. */
	--vr-radius-sm: 0.875rem;
	--vr-radius: 1.25rem;
	--vr-radius-lg: 1.625rem;

	/* Ritmo vertical y horizontal. */
	--vr-section-space: clamp(4.5rem, 9vw, 8.5rem);
	--vr-gutter: clamp(1.125rem, 4vw, 2.5rem);

	/* Sombras. */
	--vr-shadow-card: 0 18px 40px -28px rgba(22, 19, 15, 0.45);
	--vr-shadow-media: 0 40px 90px -45px rgba(22, 19, 15, 0.65);
	--vr-shadow-accent: 0 14px 32px -14px rgba(245, 166, 35, 0.7);
	/* Sombra suave bajo la cabecera fija. */
	--vr-shadow-header: 0 1px 2px rgba(22, 19, 15, 0.05),
		0 6px 18px -8px rgba(22, 19, 15, 0.14);

	/* Altura de la cabecera fija, usada para el desplazamiento con anclas. */
	--vr-header-height: 4.75rem;
}


/* =========================================================================
   02. BASE Y ACCESIBILIDAD
   ========================================================================= */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--vr-header-height) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

/* Foco visible y coherente en todos los elementos interactivos. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--vr-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.vr-section--dark a:focus-visible,
.vr-footer a:focus-visible {
	outline-color: var(--vr-accent);
}

/* Texto solo para lectores de pantalla. */
.vr-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* =========================================================================
   03. TIPOGRAFÍA
   ========================================================================= */

/* Antetítulo: etiqueta corta en mayúsculas que abre cada sección. */
.vr-eyebrow {
	margin-bottom: 1.25rem;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vr-muted);
}

.vr-section--dark .vr-eyebrow {
	color: var(--vr-accent);
}

/* --- Tamaño de los titulares ---------------------------------------------
   Estos tamaños los ponía «theme.json» a través de variables de preajuste
   («var(--wp--preset--font-size--h2)»). Se traen aquí porque en la instalación
   real esas variables no estaban resolviendo: la declaración se volvía inválida
   y el titular heredaba el tamaño del párrafo, con lo que un H2 de 32 px se veía
   a 14. Los valores son los mismos que declaraba theme.json, así que donde ya se
   veía bien no cambia nada.

   El «:root» de delante no es decorativo: sin él el selector pesa menos que el
   «:root :where(h2)» que genera WordPress y no llegaría a aplicarse. Aun así,
   un tamaño elegido a mano desde el editor sigue mandando sobre estas reglas,
   porque WordPress lo escribe como clase con «!important» o como estilo en
   línea.

   Los titulares que tienen su propio tamaño en esta hoja llevan «:root» por
   la misma razón: sin él, estas cuatro reglas les ganarían y el titular de
   gran formato se quedaría en el tamaño de un H2 corriente. */
:root h1 {
	font-size: clamp(2.75rem, 5vw, 5rem);
}

:root h2 {
	font-size: clamp(2rem, 4vw, 2.75rem);
}

:root h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

:root h4 {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
}

/* Titular de gran formato. */
:root .vr-display {
	font-size: clamp(2.5rem, 7vw, 5.25rem);
	line-height: 0.95;
	letter-spacing: -0.045em;
}

/* Párrafo de entrada. */
.vr-lead {
	max-width: 46ch;
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	line-height: 1.55;
	color: var(--vr-muted);
}

.vr-lead--narrow {
	max-width: 52ch;
}

.vr-section--dark .vr-lead {
	color: var(--vr-dark-muted);
}

/* Texto auxiliar pequeño bajo los botones. */
.vr-microcopy {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--vr-muted);
}

/* Enlaces dentro de las secciones oscuras. */
.vr-section--dark a,
.vr-footer a {
	color: var(--vr-bone);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.vr-section--dark a:hover,
.vr-footer a:hover {
	color: var(--vr-accent);
}


/* =========================================================================
   04. SECCIONES Y CONTENEDORES
   ========================================================================= */

.vr-section {
	padding-block: var(--vr-section-space);
	padding-inline: var(--vr-gutter);
}

/* Neutraliza el blockGap de WordPress dentro de los componentes propios
   para controlar el ritmo vertical desde esta hoja. Los selectores llevan
   la clase del bloque para ganar en especificidad a las reglas de layout
   que genera el núcleo. */
.vr-section.wp-block-group > *,
.vr-card.wp-block-group > *,
.vr-step.wp-block-group > *,
.vr-question.wp-block-group > *,
.vr-modal__dialog.wp-block-group > *,
.vr-hero__text.wp-block-column > *,
.vr-split__body.wp-block-column > *,
.vr-problema__list.wp-block-column > * {
	margin-block: 0;
}

.vr-section.wp-block-group > * + * {
	margin-block-start: 1.5rem;
}

/* El antetítulo va más pegado al titular que introduce. */
.vr-section.wp-block-group > .vr-eyebrow + * {
	margin-block-start: 0.875rem;
}

/* El ancho del contenido se mide en rem para que acompañe a la escala de la
   página en lugar de quedarse fijo. 70rem equivale a los 1120 px definidos
   en theme.json cuando la escala está al 100%. */
.vr-section.wp-block-group > :not(.alignfull),
.vr-header.wp-block-group > :not(.alignfull),
.vr-footer.wp-block-group > :not(.alignfull) {
	max-width: 70rem;
}

/* WordPress separa con su «blockGap» las tres piezas de nivel superior
   —cabecera, contenido y pie—, y esa franja deja ver el fondo crema de la
   página. Se nota sobre todo entre el último llamado a la acción y el pie,
   que son los dos oscuros. Su regla usa «:where()», de especificidad cero,
   así que basta con una clase para ganarle. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* Las secciones a sangre completa van pegadas unas a otras, por el mismo
   motivo pero un nivel más abajo. */
.vr-section.alignfull,
.vr-strip.alignfull,
.vr-modal.alignfull {
	margin-block: 0;
}

.vr-section h2 {
	max-width: 20ch;
}

.vr-section--dark {
	color: var(--vr-bone);
}

/* Columnas partidas: título a la izquierda, cuerpo a la derecha. */
.vr-split {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: flex-start;
}

.vr-split__title {
	flex-grow: 0.85;
}

.vr-split__title.wp-block-column > * {
	margin-block: 0;
}

.vr-split__title.wp-block-column > .vr-eyebrow + * {
	margin-block-start: 0.875rem;
}

.vr-split__body {
	flex-grow: 1.15;
}

.vr-split__body.wp-block-column > * + * {
	margin-block-start: 1.5rem;
}


/* --- Flotación de las ilustraciones --------------------------------------
   La usan la ilustración del hero y la de la sección Problema. Va en
   «translate» y el aumento del cursor en «scale»: son propiedades
   independientes y el navegador las compone, así que el hover no interrumpe
   la flotación. Con las dos dentro de «transform» se cancelarían. */
.vr-flota img {
	animation: vr-flotar-imagen 6s ease-in-out infinite;
	transition: scale 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vr-flota:hover img,
.vr-flota:focus-within img {
	scale: 1.045;
}

@keyframes vr-flotar-imagen {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -10px;
	}
}


/* =========================================================================
   05. BOTONES
   ========================================================================= */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	transition: transform 0.18s ease, background-color 0.18s ease,
		box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vr-actions {
	gap: 0.875rem 1rem;
	align-items: center;
}

.vr-actions--center {
	justify-content: center;
}

/* --- Barrido de color en hover -------------------------------------------
   El botón cambia por completo de color al pasar el cursor. El relleno lo
   pinta un pseudoelemento que crece desde la izquierda; al salir el cursor
   se retira hacia la derecha. El color del texto cambia con un pequeño
   retardo para que el barrido ya haya cubierto el centro del botón. */
.vr-btn--primary .wp-block-button__link,
.vr-btn--dark .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.vr-btn--primary .wp-block-button__link::before,
.vr-btn--dark .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.34s cubic-bezier(0.65, 0, 0.35, 1);
}

.vr-btn--primary .wp-block-button__link:hover::before,
.vr-btn--primary .wp-block-button__link:focus-visible::before,
.vr-btn--dark .wp-block-button__link:hover::before,
.vr-btn--dark .wp-block-button__link:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Botón principal: naranja con texto negro → negro con texto naranja. */
.vr-btn--primary .wp-block-button__link {
	background-color: var(--vr-accent);
	color: var(--vr-ink);
	box-shadow: var(--vr-shadow-accent);
}

.vr-btn--primary .wp-block-button__link::before {
	background-color: var(--vr-ink);
}

.vr-btn--primary .wp-block-button__link:hover,
.vr-btn--primary .wp-block-button__link:focus-visible {
	color: var(--vr-accent);
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -18px rgba(22, 19, 15, 0.55);
	transition: color 0.14s ease 0.16s, transform 0.2s ease,
		box-shadow 0.25s ease;
}

.vr-btn--primary .wp-block-button__link:active {
	transform: translateY(-1px);
}

/* --- Destello del botón principal del hero -------------------------------
   Solo el de la portada, para que el llamado a la acción se distinga sin
   necesidad de pasar el cursor. Es una banda de luz que cruza el botón en
   segundo y medio y luego espera casi tres: lo justo para que el ojo lo
   capte de refilón sin que llegue a molestar.

   Va en «::after» porque «::before» ya lo ocupa el barrido del hover. Los dos
   llevan «z-index: -1», así que el destello pasa por detrás de la etiqueta y
   por delante del barrido, y el «overflow: hidden» del botón lo recorta a la
   forma de la píldora. */
.vr-hero .vr-btn--primary .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -55%;
	width: 42%;
	z-index: -1;
	background-image: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation: vr-destello 4.5s ease-in-out infinite;
}

/* --- Latido del botón de la cabecera --------------------------------------
   Un ensanchamiento breve cada cuatro segundos, con casi tres de reposo
   entre uno y otro. Va en «scale», que es propiedad independiente: el
   levantamiento del hover usa «transform» y los dos se componen sin pisarse.
   Al pasar el cursor el latido se detiene, para que el botón no se mueva
   justo cuando se va a pulsar. */
.vr-header__cta .vr-btn--primary .wp-block-button__link {
	animation: vr-latido 4s ease-in-out infinite;
}

.vr-header__cta .vr-btn--primary .wp-block-button__link:hover,
.vr-header__cta .vr-btn--primary .wp-block-button__link:focus-visible {
	animation-name: none;
}

/* El mismo latido en el último llamado a la acción, pero cada tres segundos
   en lugar de cada cuatro: es el cierre de la página, ahí abajo ya no hay
   nada más que mirar y conviene que insista un poco más. Al ser un botón el
   doble de ancho que el de la cabecera, el mismo 5.5 % se traduce en el doble
   de píxeles, así que el gesto se percibe además más rotundo. */
.vr-cta .vr-btn--primary .wp-block-button__link {
	animation: vr-latido 3s ease-in-out infinite;
}

.vr-cta .vr-btn--primary .wp-block-button__link:hover,
.vr-cta .vr-btn--primary .wp-block-button__link:focus-visible {
	animation-name: none;
}

@keyframes vr-latido {
	0%,
	67%,
	100% {
		scale: 1;
	}

	80% {
		scale: 1.055;
	}
}

@keyframes vr-destello {
	0%,
	62% {
		translate: 0 0;
	}

	100% {
		translate: 420% 0;
	}
}

/* Sobre fondo oscuro el barrido no puede ser negro: el botón se fundiría
   con la sección y solo quedaría el texto flotando. Ahí la inversión va al
   revés —claro con texto negro—, que es igual de contrastada y sí se ve. */
.vr-section--dark .vr-btn--primary .wp-block-button__link::before,
.vr-garantia__card .vr-btn--primary .wp-block-button__link::before,
.vr-card--oscuro .vr-btn--primary .wp-block-button__link::before {
	background-color: var(--vr-bone);
}

.vr-section--dark .vr-btn--primary .wp-block-button__link:hover,
.vr-section--dark .vr-btn--primary .wp-block-button__link:focus-visible,
.vr-garantia__card .vr-btn--primary .wp-block-button__link:hover,
.vr-garantia__card .vr-btn--primary .wp-block-button__link:focus-visible,
.vr-card--oscuro .vr-btn--primary .wp-block-button__link:hover,
.vr-card--oscuro .vr-btn--primary .wp-block-button__link:focus-visible {
	color: var(--vr-ink);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8);
}

/* Botón secundario: contorno. */
.vr-btn--ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--vr-ink);
	box-shadow: inset 0 0 0 1.5px rgba(22, 19, 15, 0.28);
}

.vr-btn--ghost .wp-block-button__link:hover {
	background-color: rgba(22, 19, 15, 0.05);
	box-shadow: inset 0 0 0 1.5px var(--vr-ink);
}

.vr-section--dark .vr-btn--ghost .wp-block-button__link {
	color: var(--vr-bone);
	box-shadow: inset 0 0 0 1.5px rgba(247, 243, 236, 0.35);
}

.vr-section--dark .vr-btn--ghost .wp-block-button__link:hover {
	background-color: rgba(247, 243, 236, 0.08);
	box-shadow: inset 0 0 0 1.5px var(--vr-bone);
}

/* Botón oscuro (sobre la franja naranja): negro con texto claro → claro
   con texto negro. */
.vr-btn--dark .wp-block-button__link {
	background-color: var(--vr-ink);
	color: var(--vr-bone);
	box-shadow: 0 14px 32px -16px rgba(22, 19, 15, 0.9);
}

.vr-btn--dark .wp-block-button__link::before {
	background-color: var(--vr-bone);
}

.vr-btn--dark .wp-block-button__link:hover,
.vr-btn--dark .wp-block-button__link:focus-visible {
	color: var(--vr-ink);
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -18px rgba(22, 19, 15, 0.6);
	transition: color 0.14s ease 0.16s, transform 0.2s ease,
		box-shadow 0.25s ease;
}

.vr-btn--dark .wp-block-button__link:active {
	transform: translateY(-1px);
}

/* Tamaños. La medida por defecto —la que define theme.json— es la grande, y
   la comparten todos los botones del sitio. La única excepción es el de la
   cabecera, que va con «--sm» para no romper la fila del logotipo. */
.vr-btn--sm .wp-block-button__link {
	padding: 0.875rem 1.5rem;
	font-size: 1rem;
}


/* =========================================================================
   06. CABECERA
   ========================================================================= */

/* La cabecera se fija desde el propio <header> que genera el bloque
   template-part: si se fijara el grupo interior, «sticky» quedaría
   atrapado dentro de la caja del padre y no tendría efecto. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.vr-header {
	padding-block: 0.875rem;
	padding-inline: var(--vr-gutter);
	background-color: var(--vr-white);
	box-shadow: var(--vr-shadow-header);
}

.vr-header__inner {
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.vr-header__logo {
	flex: 0 0 auto;
	line-height: 0;
}

/* Los archivos del logotipo vienen en un lienzo de 1000 x 800 con mucho
   margen vacío. En lugar de duplicar la imagen recortada, se encuadra por
   CSS: la caja toma la proporción de la banda con contenido y «object-fit»
   recorta el resto. Si algún día subes el logotipo ya recortado, basta con
   quitar «object-fit», «object-position» y el «width» calculado. */
.vr-header__logo {
	--vr-logo-alto: 2.875rem;
}

.vr-header__logo img {
	display: block;
	height: var(--vr-logo-alto);
	/* 1000 / 265: la banda visible lleva 10 px de aire por arriba y por abajo
	   respecto al contenido real, para no comerse el borde del logotipo. */
	width: calc(var(--vr-logo-alto) * 3.7736);
	max-width: none;
	object-fit: cover;
	object-position: center 50%;
}

.vr-header__cta {
	flex: 0 0 auto;
	margin: 0;
}

/* --- Menú de secciones (solo escritorio) ---------------------------------
   Se oculta por debajo de 1025 px para que la cabecera móvil siga siendo
   logotipo + botón. El contenido no se pierde: las secciones se alcanzan
   haciendo scroll. */
.vr-header .vr-nav {
	display: none;
}

.vr-header .vr-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(1rem, 1.9vw, 1.75rem);
}

.vr-header .vr-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.375rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--vr-muted);
	text-decoration: none;
	transition: color 0.18s ease;
}

/* Subrayado que crece desde la izquierda al pasar el cursor. */
.vr-header .vr-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background-color: var(--vr-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}

.vr-header .vr-nav .wp-block-navigation-item__content:hover,
.vr-header .vr-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--vr-ink);
}

.vr-header .vr-nav .wp-block-navigation-item__content:hover::after,
.vr-header .vr-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}


/* =========================================================================
   07. HERO
   ========================================================================= */

.vr-hero {
	/* El arranque es corto a propósito: la etiqueta tiene que verse pegada a
	   la cabecera. Son los mismos 32 px con los que empiezan las páginas de
	   gracias y requisitos, así que todo el sitio arranca igual. */
	padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 8vw, 7rem);
	background-color: var(--vr-cream);
}

@media (min-width: 1025px) {
	.vr-hero {
		padding-block-start: clamp(2rem, 3vw, 2.5rem);
	}
}

.vr-hero__grid {
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.vr-hero__text {
	flex-grow: 1.08;
}

.vr-hero__media {
	flex-grow: 0.92;
}

.vr-hero__text.wp-block-column > * + * {
	margin-block-start: 1.75rem;
}

/* --- Etiqueta sobre el titular -------------------------------------------
   Dice a qué se dedica la agencia antes de que se lea nada más. El punto de
   la izquierda es un pseudoelemento: así el bloque sigue siendo un párrafo
   corriente y se edita sin tocar marcado. */
.vr-hero__etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vr-accent-text);
	background-color: rgba(245, 166, 35, 0.12);
	border: 1px solid rgba(245, 166, 35, 0.34);
	border-radius: 999px;
}

.vr-hero__etiqueta::before {
	content: "";
	flex: 0 0 auto;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background-color: var(--vr-accent);
}

/* Entre el ritmo de la columna (1.75rem, demasiado suelto aquí)
   y el recorte que tenía antes (1.125rem, demasiado apretado). Va después de la
   regla del ritmo de la columna, así que le gana por orden. */
.vr-hero__etiqueta + .vr-hero__title {
	margin-block-start: 1.25rem;
}

/* Sin «margin-block» propio: de eso ya se encarga la regla que pone a cero los
   márgenes de la columna (§ 04). Declararlo aquí, con la especificidad que
   necesita el tamaño, le ganaba al ritmo vertical de la columna y dejaba el
   titular pegado a la etiqueta. */
:root .vr-hero__title {
	font-size: clamp(2.75rem, 6.4vw, 5rem);
	line-height: 0.96;
	letter-spacing: -0.042em;
	text-wrap: balance;
}

.vr-hero__title strong {
	color: var(--vr-accent-deep);
	font-weight: inherit;
}

/* Marco de las imágenes destacadas. */
.vr-figure {
	overflow: hidden;
	border-radius: var(--vr-radius-lg);
	box-shadow: var(--vr-shadow-media);
}

/* La ilustración del hero va sin marco: es un PNG con fondo transparente y
   sombra propia, así que la tarjeta con sombra de «.vr-figure» la encerraría
   en una caja que no le corresponde. Flota directamente sobre el crema. */
.vr-hero__figura {
	margin-inline: auto;
}

.vr-hero__figura img {
	display: block;
	width: 100%;
	height: auto;
}

/* En escritorio la ilustración gana peso: la columna de la imagen se lleva
   algo más del ancho disponible que la del texto. */
@media (min-width: 1025px) {
	.vr-hero__text {
		flex-grow: 1;
	}

	.vr-hero__media {
		flex-grow: 1.08;
	}
}

/* --- Marco del vídeo ------------------------------------------------------
   Mismas esquinas y sombra que las imágenes destacadas, pero el redondeo se le
   pasa a Presto Player por su propia variable en vez de recortarlo con
   «overflow: hidden». Un ancestro que recorta le estorbaría al modo de pantalla
   completa y al reproductor flotante, que Presto resuelve con sus propias
   reglas contando con que nadie más lo esté recortando. */
.vr-video {
	border-radius: var(--vr-radius-lg);
	box-shadow: var(--vr-shadow-media);
}

/* El «!important» no es pereza: Presto escribe su radio como estilo en línea
   sobre el propio elemento, desde el preajuste del reproductor, y un estilo en
   línea gana a cualquier selector. Sin esto el vídeo redondea a 12 px mientras
   el marco lo hace a 23.4 y la sombra asoma por las esquinas. La alternativa
   limpia es cambiarlo en Presto Player → Preajustes, y entonces esta línea
   sobra. */
.vr-video .presto-block-video {
	--presto-player-border-radius: var(--vr-radius-lg) !important;
	/* Presto monta el reproductor dentro de un «figure», que arrastra el margen
	   inferior por defecto de WordPress. Dentro del marco ese margen asomaba
	   como una franja de fondo de 20 px bajo el vídeo. */
	margin-block: 0;
}

/* «presto-player» es un elemento a medida que el navegador no conoce hasta que
   el guion de Presto lo define. Hasta ese momento vale «display: inline» y no
   ocupa altura: el vídeo aparece de golpe y empuja 503 px de página hacia
   abajo. Eso descuadra la métrica de desplazamiento del píxel —que mide la
   altura del documento una sola vez, al cargar— y además cuenta como salto de
   diseño para Google. Reservar aquí su proporción real (3:4) deja el hueco
   hecho desde el primer pintado. */
.vr-video presto-player {
	display: block;
	aspect-ratio: 3 / 4;
}

.vr-figure img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================================================
   08. FRANJA DE ACENTO
   ========================================================================= */

.vr-strip {
	padding-block: 1.125rem;
	padding-inline: var(--vr-gutter);
	border-block: 1px solid rgba(22, 19, 15, 0.14);
}

.vr-strip__text {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	text-align: center;
}


/* =========================================================================
   09. PROBLEMA
   ========================================================================= */

.vr-problema__grid.wp-block-columns {
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	align-items: center;
}

.vr-problema__media {
	flex-grow: 0.8;
}

/* Sin el marco de «.vr-figure»: la ilustración es un PNG con fondo
   transparente y su propio círculo ámbar, así que las esquinas redondeadas
   de la tarjeta lo recortarían y la sombra no se vería sobre el negro. */
.vr-problema__figura {
	/* Un 12 % menos que el ancho de su columna: con la ilustración a tamaño
	   completo, la lista de preguntas de al lado quedaba en desventaja. */
	width: 88%;
	margin-inline: auto;
}

.vr-problema__figura img {
	display: block;
	width: 100%;
	height: auto;
}

.vr-problema__list {
	flex-grow: 1.2;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.vr-question {
	padding: clamp(1.375rem, 2.6vw, 1.875rem);
	background-color: var(--vr-dark-surface);
	border: 1px solid var(--vr-dark-border);
	border-radius: var(--vr-radius);
}

.vr-question__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.125rem, 2.1vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--vr-bone);
}

/* Puente hacia la siguiente sección. */
.vr-bridge.wp-block-group {
	margin-block-start: clamp(3rem, 6vw, 5rem);
	text-align: center;
}

.vr-bridge__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.035em;
	color: var(--vr-accent);
}

/* Flecha decorativa dibujada con CSS: no la leen los lectores de pantalla. */
.vr-bridge::after {
	content: "";
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	margin: 1.75rem auto 0;
	border-right: 3px solid var(--vr-accent);
	border-bottom: 3px solid var(--vr-accent);
	transform: rotate(45deg);
	animation: vr-nudge 1.8s ease-in-out infinite;
}

@keyframes vr-nudge {
	0%,
	100% {
		transform: translateY(0) rotate(45deg);
	}
	50% {
		transform: translateY(7px) rotate(45deg);
	}
}


/* =========================================================================
   10. QUÉ HACEMOS
   ========================================================================= */

.vr-quehacemos {
	background-color: var(--vr-cream);
}

/* El orden del HTML es ya el del móvil: antetítulo, título, descripción,
   imagen y botón. En escritorio solo cambia la colocación en la rejilla,
   nunca el orden de lectura. */
.vr-quehacemos__grid.is-layout-grid {
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 1.75rem);
}

.vr-quehacemos__grid > * {
	margin-block: 0;
}

.vr-quehacemos__media {
	max-width: 26rem;
	margin-inline: auto;
}

.vr-quehacemos__media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 782px) {
	.vr-quehacemos__grid.is-layout-grid {
		grid-template-columns: 1.05fr 0.95fr;
		grid-template-rows: 1fr auto auto auto auto 1fr;
		/* Las filas 1fr de los extremos centran verticalmente el bloque de
		   texto respecto a la imagen, que ocupa la columna entera. */
		grid-template-areas:
			".         media"
			"antetitulo media"
			"titulo     media"
			"texto      media"
			"accion     media"
			".          media";
		column-gap: clamp(2rem, 5vw, 4.5rem);
		row-gap: 1.25rem;
	}

	.vr-quehacemos__grid > .vr-eyebrow {
		grid-area: antetitulo;
	}

	.vr-quehacemos__grid > h2 {
		grid-area: titulo;
		max-width: 14ch;
	}

	.vr-quehacemos__grid > .vr-lead {
		grid-area: texto;
	}

	.vr-quehacemos__grid > .vr-actions {
		grid-area: accion;
		justify-self: start;
	}

	.vr-quehacemos__media {
		grid-area: media;
		max-width: none;
	}
}

/* En escritorio la sección respira menos por arriba y por abajo, y la
   imagen ocupa una columna más estrecha. No se recorta ni se deforma:
   al estrechar la columna, la altura la calcula el propio navegador a
   partir del width/height del archivo (1080 × 1350). */
@media (min-width: 1025px) {
	.vr-section.vr-quehacemos {
		padding-block: clamp(3rem, 6vw, 5.5rem);
	}

	.vr-quehacemos__grid.is-layout-grid {
		grid-template-columns: 1.2fr 0.8fr;
	}

	/* El titular y la descripción de esta sección arrastran un tamaño propio
	   que el editor de bloques escribió como estilo en línea (55 px y 24,5 px),
	   fuera de la escala del tema. En escritorio desentonaban: los demás
	   titulares de su misma familia miden 39,6 px y las otras descripciones,
	   19,9 px. Aquí vuelven a la escala común. Hace falta «!important» porque
	   un estilo en línea gana a cualquier selector; en móvil y tableta no se
	   toca nada, así que allí conservan el tamaño que ya tenían. */
	.vr-quehacemos__grid > h2 {
		font-size: clamp(2rem, 4vw, 2.75rem) !important;
	}

	.vr-quehacemos__grid > .vr-lead {
		font-size: calc(clamp(1.0625rem, 1.6vw, 1.3125rem) + var(--vr-punto-mas)) !important;
	}
}


/* =========================================================================
   11. SERVICIOS (TARJETAS)
   ========================================================================= */

.vr-cards.wp-block-group {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.vr-cards.is-layout-grid {
	gap: 1.25rem;
}

.vr-cards--3.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vr-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	height: 100%;
	padding: clamp(1.75rem, 3vw, 2.25rem);
	background-color: var(--vr-white);
	border: 1px solid var(--vr-line);
	border-radius: var(--vr-radius-lg);
	box-shadow: var(--vr-shadow-card);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vr-card:hover {
	transform: translateY(-4px);
	border-color: var(--vr-accent);
	box-shadow: 0 26px 50px -30px rgba(22, 19, 15, 0.55);
}

/* --- Variante oscura -----------------------------------------------------
   Se usa donde la tarjeta es la única salida de la página y tiene que pesar
   más que el texto que la precede. El borde claro de la tarjeta normal se
   sustituye por el de las secciones oscuras: sobre negro sería una línea
   brillante en lugar de un contorno discreto. */
.vr-card--oscuro {
	color: var(--vr-bone);
	background-color: var(--vr-ink);
	border-color: var(--vr-dark-border);
}

/* Variante ligera: mismo fondo blanco que la tarjeta normal, pero sin icono
   y con menos relleno, para el aviso que acompaña a la tarjeta principal sin
   competir con ella. */
.vr-card--aviso {
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
}

/* --- Flotación en bucle --------------------------------------------------
   Sube y baja seis píxeles. Va en «translate» y no en «transform» porque el
   levantamiento del hover usa «transform»: son propiedades independientes y
   el navegador las compone, así que ninguna pisa a la otra. Solo mueve la
   capa ya pintada, sin recalcular la maquetación. */
@keyframes vr-flotar {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -6px;
	}
}

.vr-card--flota {
	animation: vr-flotar 4s ease-in-out infinite;
}

.vr-card > * {
	margin-block: 0;
}

.vr-card p {
	color: var(--vr-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.vr-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.875rem;
	height: 3.875rem;
	margin-block-end: 0.5rem;
	background-color: rgba(245, 166, 35, 0.16);
	border-radius: 1.125rem;
}

.vr-card__icon img {
	width: 1.875rem;
	height: 1.875rem;
}


/* =========================================================================
   12. MÉTODO (PASOS)
   ========================================================================= */

/* --- Línea de tiempo -----------------------------------------------------
   Móvil y tableta: vertical, con la línea bajando por la columna de los
   iconos. Escritorio: horizontal, con una línea que cruza la sección por
   el centro de los iconos. La línea va detrás; los iconos son opacos y la
   interrumpen, que es lo que crea el efecto de etapas conectadas.
   ------------------------------------------------------------------------ */

/* Medidas del icono, compartidas por las dos orientaciones. */
.vr-metodo {
	--vr-paso-icono: 4.25rem;
	--vr-paso-linea: 1px;
}

.vr-steps.is-layout-grid {
	position: relative;
	grid-template-columns: 1fr;
	gap: 0;
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.vr-step {
	position: relative;
	display: grid;
	grid-template-columns: var(--vr-paso-icono) 1fr;
	column-gap: 1.25rem;
	row-gap: 0.375rem;
	padding-block-end: 2.25rem;
	background-color: transparent;
}

.vr-step:last-child {
	padding-block-end: 0;
}

.vr-step > * {
	margin-block: 0;
	grid-column: 2;
}

/* WordPress centra con márgenes automáticos los hijos de los grupos
   «constrained». En la línea de tiempo vertical queremos que el texto
   arranque siempre en el mismo eje, no que se centre según su longitud. */
.vr-step.wp-block-group > * {
	margin-inline: 0;
}

/* Tramo de línea que une cada etapa con la siguiente. */
.vr-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: var(--vr-paso-icono);
	bottom: 0;
	left: calc(var(--vr-paso-icono) / 2);
	width: var(--vr-paso-linea);
	transform: translateX(-50%);
	background-color: var(--vr-dark-border);
}

.vr-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	grid-row: 1 / span 3;
	align-self: start;
	width: var(--vr-paso-icono);
	height: var(--vr-paso-icono);
	background-color: var(--vr-bone);
	border-radius: 1.125rem;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}

.vr-step__icon img {
	width: 1.75rem;
	height: 1.75rem;
}

/* Lleva la clase del paso por delante para ganar a «.vr-step p», que de
   otro modo le impondría su color y su tamaño. */
.vr-step .vr-step__num {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.2em;
	color: var(--vr-accent);
}

.vr-step h3 {
	max-width: 18ch;
}

.vr-step p {
	color: var(--vr-dark-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* --- Escritorio: la línea de tiempo se pone horizontal --- */
@media (min-width: 1025px) {
	.vr-steps.is-layout-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1rem, 2.5vw, 2rem);
	}

	/* Una sola línea que cruza toda la sección por el centro de los iconos. */
	.vr-steps.is-layout-grid::before {
		content: "";
		position: absolute;
		top: calc(var(--vr-paso-icono) / 2);
		left: 0;
		right: 0;
		height: var(--vr-paso-linea);
		transform: translateY(-50%);
		background-color: var(--vr-dark-border);
	}

	.vr-step {
		grid-template-columns: 1fr;
		row-gap: 0.5rem;
		padding-block-end: 0;
		text-align: center;
	}

	/* Repite el «:not(:last-child)» para igualar la especificidad de la
	   regla que dibuja los tramos verticales; si no, seguirían pintándose. */
	.vr-step:not(:last-child)::before {
		content: none;
	}

	.vr-step > * {
		grid-column: 1;
	}

	.vr-step__icon {
		grid-row: auto;
		justify-self: center;
		margin-block-end: 1.25rem;
	}

	.vr-step__num {
		margin-block-end: 0.125rem;
	}

	.vr-step.wp-block-group > h3,
	.vr-step.wp-block-group > p {
		max-width: 22ch;
		margin-inline: auto;
	}
}

.vr-metodo .vr-actions {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}


/* =========================================================================
   13. RESULTADOS (MÉTRICAS Y CASOS)
   ========================================================================= */

/* --- Costura entre Resultados y Garantía ---------------------------------
   Las dos secciones comparten el fondo crema y las dos llevan dentro un panel
   oscuro, así que entre panel y panel se sumaban los dos espacios de sección
   completos: 245 px de crema vacío en escritorio. Entre secciones de distinto
   color ese aire se lee como respiro; entre estas dos se leía como un hueco.
   Se recorta a la mitad. Es la única costura de la página con este problema:
   en el resto siempre cambia el color de fondo. */
.vr-resultados {
	padding-block-end: clamp(2.5rem, 5vw, 4.25rem);
	background-color: var(--vr-cream);
}

/* --- Panel del caso de éxito -------------------------------------------- */
.vr-exito.wp-block-group {
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	padding: clamp(1.25rem, 2.4vw, 1.875rem);
	color: var(--vr-bone);
	background-color: var(--vr-ink);
	border-radius: var(--vr-radius-lg);
	box-shadow: var(--vr-shadow-card);
}

.vr-exito.wp-block-group > * {
	margin-block: 0;
	margin-inline: 0;
	max-width: none;
}

.vr-exito.wp-block-group > * + * {
	margin-block-start: 1.125rem;
}

/* Cabecera: etiqueta, cliente, sector y periodo. */
.vr-exito__head.wp-block-group {
	gap: 0.5rem 0.75rem;
	align-items: center;
}

.vr-exito__head.wp-block-group > * {
	margin: 0;
}

.vr-exito .vr-exito__label {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vr-dark-muted);
}

.vr-exito .vr-exito__cliente {
	padding: 0.3125rem 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--vr-ink);
	background-color: var(--vr-accent);
	border-radius: 0.5rem;
}

.vr-exito .vr-exito__sector {
	padding: 0.25rem 0.6875rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vr-ink);
	background-color: var(--vr-bone);
	border-radius: 0.5rem;
}

.vr-exito .vr-exito__periodo {
	margin-inline-start: auto;
	font-size: 0.8125rem;
	color: var(--vr-dark-muted);
}

/* --- Las dos fases: antes y después -------------------------------------
   La de «después» se destaca con borde naranja para que el contraste entre
   ambas se lea de un vistazo. */
.vr-fase.wp-block-group {
	padding: clamp(0.875rem, 1.8vw, 1.25rem);
	border: 1px solid var(--vr-dark-border);
	border-radius: var(--vr-radius);
}

.vr-fase.wp-block-group > * {
	margin-block: 0;
	margin-inline: 0;
	max-width: none;
}

.vr-fase.wp-block-group > * + * {
	margin-block-start: 0.875rem;
}

.vr-fase--despues {
	border-color: rgba(245, 166, 35, 0.55);
	background-color: rgba(245, 166, 35, 0.05);
}

.vr-fase__head.wp-block-group {
	gap: 0.375rem 0.75rem;
	align-items: baseline;
}

.vr-fase__head.wp-block-group > * {
	margin: 0;
}

.vr-exito .vr-fase__label {
	flex: 1 1 100%;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vr-dark-muted);
}

.vr-fase--despues .vr-fase__label {
	color: var(--vr-accent);
}

.vr-exito .vr-fase__cifra {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--vr-bone);
}

.vr-fase--despues .vr-fase__cifra {
	color: var(--vr-accent);
}

.vr-exito .vr-fase__pie {
	font-size: 0.875rem;
	color: var(--vr-dark-muted);
}

.vr-exito .vr-fase__delta {
	margin-inline-start: auto;
	padding: 0.3125rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--vr-ink);
	background-color: var(--vr-accent);
	border-radius: 0.5rem;
}

/* --- Capturas de prueba --- */
.vr-fase__pruebas.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	align-items: start;
}

.vr-fase__pruebas--una.is-layout-grid {
	grid-template-columns: 1fr;
}

.vr-prueba__img {
	min-width: 0;
	overflow: hidden;
	border-radius: 0.625rem;
}

.vr-prueba__img img {
	display: block;
	width: 100%;
	height: auto;
	background-color: var(--vr-white);
}

/* Las capturas del «antes» solo tienen que sustentar una cifra: se muestran
   pequeñas y alineadas a la izquierda para no comerse la sección. */
.vr-fase--antes .vr-fase__pruebas.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 17rem));
	justify-content: start;
}

/* La captura del «después» se limita a su tamaño real para que no se
   amplíe y pierda nitidez, y algo por debajo para condensar la sección. */
.vr-fase--despues .vr-prueba__img {
	max-width: 50rem;
}

/* --- Métricas de la campaña --- */
.vr-exito__metricas.is-layout-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	background-color: var(--vr-dark-border);
	border: 1px solid var(--vr-dark-border);
	border-radius: var(--vr-radius-sm);
}

.vr-metrica {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	padding: 0.75rem 0.75rem 0.8125rem;
	background-color: var(--vr-ink);
}

.vr-metrica.wp-block-group > * {
	margin: 0;
	max-width: none;
}

.vr-exito .vr-metrica__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--vr-accent);
}

.vr-exito .vr-metrica__label {
	font-size: 0.6875rem;
	line-height: 1.3;
	color: var(--vr-dark-muted);
}

/* --- Qué hicimos --- */
.vr-exito__acciones.wp-block-group > * {
	margin: 0;
	max-width: none;
}

.vr-exito .vr-exito__subtitulo {
	margin-block-end: 0.625rem;
	font-size: 1.0625rem;
	color: var(--vr-bone);
}

.vr-exito .vr-checklist li {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--vr-dark-muted);
}

.vr-exito .vr-checklist li + li {
	margin-top: 0.5rem;
}

.vr-exito .vr-checklist li::before {
	border-color: var(--vr-accent);
}

.vr-exito .vr-exito__fuente {
	font-size: 0.75rem;
	line-height: 1.45;
	color: rgba(247, 243, 236, 0.5);
}


/* =========================================================================
   14. ANUNCIOS (MARQUESINA)
   =========================================================================
   Prueba social en volumen: una cinta de creatividades que avanza sola.
   Es CSS puro, sin JavaScript ni librerías.

   Cómo funciona: cada carril lleva el juego de anuncios dos veces seguidas y
   se desplaza exactamente un 50 % de su propio ancho. Al terminar, la segunda
   copia ocupa la posición en la que empezó la primera, así que el salto al
   reiniciar el bucle es invisible. Por eso el marcado duplica las imágenes:
   son los mismos ocho archivos, de modo que el navegador solo los descarga
   una vez.
   ------------------------------------------------------------------------ */

.vr-anuncios {
	background-color: var(--vr-cream);
	/* Mismo recorte de aire que en la costura Resultados–Garantía (§ 13):
	   las tres secciones comparten fondo y se leen como un solo bloque de
	   credibilidad. */
	padding-block: clamp(2.5rem, 5vw, 4.25rem);
}

/* La cinta se sale del ancho de contenido y llega de borde a borde: cortada a
   1120 px parecería un carrusel con principio y fin, que es justo lo contrario
   de lo que cuenta. */
.vr-anuncios .vr-marquesina.wp-block-group {
	max-width: none;
	/* Los márgenes negativos anulan el relleno lateral de la sección y la
	   cinta llega al borde. Con «100vw» se contaría también la barra de
	   desplazamiento y la página desbordaría en horizontal. */
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	margin-inline: calc(var(--vr-gutter) * -1);
	overflow: hidden;
	/* Las tarjetas se desvanecen en los bordes en lugar de cortarse en seco.
	   Donde «mask-image» no esté disponible el corte es limpio igualmente. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.vr-marquesina__carril.wp-block-group {
	--vr-cinta-hueco: 1rem;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--vr-cinta-hueco);
	width: max-content;
	max-width: none;
	/* «translate» y no «transform»: deja libre esa propiedad y el navegador
	   compone la animación en su propia capa, sin recalcular la maquetación. */
	animation: vr-cinta-izq 46s linear infinite;
}

/* Al pasar el cursor o al llegar con el tabulador, la cinta se detiene: sin
   esto no habría forma de mirar un anuncio concreto. */
.vr-marquesina:hover .vr-marquesina__carril.wp-block-group,
.vr-marquesina:focus-within .vr-marquesina__carril.wp-block-group {
	animation-play-state: paused;
}

.vr-marquesina__carril--der.wp-block-group {
	animation-name: vr-cinta-der;
}

/* La distancia exacta de un juego completo es la mitad del carril MÁS medio
   hueco: entre las dieciséis tarjetas hay quince huecos, no dieciséis, así que
   un -50% pelado se queda ocho píxeles corto y el bucle da un tirón visible al
   reiniciarse. */
@keyframes vr-cinta-izq {
	from {
		translate: 0 0;
	}

	to {
		translate: calc(-50% - var(--vr-cinta-hueco) / 2) 0;
	}
}

@keyframes vr-cinta-der {
	from {
		translate: calc(-50% - var(--vr-cinta-hueco) / 2) 0;
	}

	to {
		translate: 0 0;
	}
}

/* Las capturas son 4:5. La proporción se declara aquí y no en el archivo para
   que una imagen de otro formato se recorte al centro en vez de descuadrar la
   fila entera. */
.vr-anuncio.wp-block-image {
	flex: 0 0 auto;
	width: clamp(9.5rem, 17vw, 15rem);
	margin: 0;
}

.vr-anuncio img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* El radio grande de la escala, el mismo de las tarjetas y los paneles. */
	border-radius: var(--vr-radius-lg);
	border: 1px solid var(--vr-line);
	background-color: var(--vr-stone);
}

/* En PC basta un carril: los ocho anuncios caben de sobra en la vuelta. */
@media (min-width: 782px) {
	.vr-marquesina .vr-marquesina__carril--der.wp-block-group {
		display: none;
	}
}

/* En móvil se parte en dos cintas que avanzan en sentidos opuestos. La de
   abajo arranca con otro anuncio para que no se lean como una copia. */
@media (max-width: 781.98px) {
	.vr-marquesina__carril.wp-block-group {
		animation-duration: 32s;
	}

	.vr-marquesina .vr-marquesina__carril--der.wp-block-group {
		margin-block-start: 1rem;
	}
}


/* =========================================================================
   15. GARANTÍA
   ========================================================================= */

.vr-garantia {
	padding-block-start: clamp(2.5rem, 5vw, 4.25rem);
	background-color: var(--vr-cream);
}

/* Panel oscuro sobre fondo claro: es el mismo recurso que usa la sección de
   Resultados, así que las dos secciones que sostienen la credibilidad hablan
   el mismo idioma. Además, el naranja del botón alcanza aquí su mayor
   contraste de toda la página. */
.vr-garantia__card.wp-block-group {
	padding: clamp(1.75rem, 4vw, 3rem);
	color: var(--vr-bone);
	background-color: var(--vr-ink);
	border-radius: var(--vr-radius-lg);
	box-shadow: var(--vr-shadow-card);
}

.vr-garantia__card.wp-block-group > * {
	margin-block: 0;
	max-width: none;
}

.vr-garantia__card p {
	color: var(--vr-dark-muted);
}

.vr-garantia .vr-lead {
	font-weight: 500;
}

.vr-garantia h2 {
	max-width: 16ch;
}

.vr-garantia h2 strong {
	font-weight: inherit;
	color: var(--vr-accent);
}

.vr-garantia .vr-checklist li {
	color: var(--vr-bone);
}

.vr-garantia .vr-checklist li::before {
	border-color: var(--vr-accent);
}

/* Lista con palomita dibujada en CSS. */
.vr-checklist {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.vr-checklist li {
	position: relative;
	padding-left: 2.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
}

.vr-checklist li + li {
	margin-top: 0.875rem;
}

.vr-checklist li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.35em;
	width: 1.0625rem;
	height: 0.5625rem;
	border-left: 3px solid var(--vr-ink);
	border-bottom: 3px solid var(--vr-ink);
	transform: rotate(-45deg);
}


/* =========================================================================
   16. PREGUNTAS FRECUENTES (ACORDEÓN)
   ========================================================================= */

.vr-faq h2 {
	max-width: 24ch;
}

.vr-faq__list.wp-block-group {
	margin-block-start: clamp(2.5rem, 5vw, 3.25rem);
}

.vr-faq__item {
	background-color: var(--vr-white);
	border: 1px solid var(--vr-line);
	border-radius: var(--vr-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vr-faq__item + .vr-faq__item {
	margin-block-start: 0.75rem;
}

.vr-faq__item[open],
.vr-faq__item:hover {
	border-color: rgba(245, 166, 35, 0.75);
}

.vr-faq__item[open] {
	box-shadow: var(--vr-shadow-card);
}

.vr-faq__item summary {
	display: block;
	position: relative;
	padding: 1.375rem 3.75rem 1.375rem 1.625rem;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--vr-ink);
}

.vr-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Chevron dibujado con CSS que gira al abrir. */
.vr-faq__item summary::after {
	content: "";
	position: absolute;
	right: 1.625rem;
	top: 50%;
	width: 0.6875rem;
	height: 0.6875rem;
	margin-top: -0.5rem;
	border-right: 2.5px solid var(--vr-accent-deep);
	border-bottom: 2.5px solid var(--vr-accent-deep);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.22s ease;
}

.vr-faq__item[open] summary::after {
	margin-top: -0.1875rem;
	transform: rotate(225deg);
}

.vr-faq__item > *:not(summary) {
	margin-block: 0;
	padding-inline: 1.625rem;
	color: var(--vr-muted);
	line-height: 1.65;
}

.vr-faq__item > *:last-child {
	padding-bottom: 1.5rem;
}


/* =========================================================================
   17. LLAMADO A LA ACCIÓN FINAL
   ========================================================================= */

.vr-cta {
	text-align: center;
}

.vr-cta .vr-eyebrow,
.vr-cta .vr-lead {
	margin-inline: auto;
}

.vr-cta__title {
	max-width: 18ch;
	margin-inline: auto;
	text-wrap: balance;
}


/* =========================================================================
   18. PIE DE PÁGINA
   ========================================================================= */

.vr-footer {
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	padding-inline: var(--vr-gutter);
	/* El pie monta un píxel sobre la sección anterior. Las dos son del mismo
	   negro, así que no se nota, y cierra la costura que se veía en móvil: el
	   borde entre ambas cae en una posición fraccionaria (9916.84 px), y al
	   redondearla el navegador dejaba asomar una línea del crema de fondo. */
	margin-block-start: -1px;
}

/* Las tres piezas —logotipo, enlace legal y copyright— son hermanas dentro
   de esta fila. Por debajo de 1025 px el copyright ocupa el ancho completo y
   cae a su propio renglón, separado por una línea; a partir de ahí los tres
   comparten renglón (§ 21). */
.vr-footer__top {
	gap: 1.5rem 2.5rem;
	align-items: center;
	justify-content: space-between;
}

.vr-footer__logo {
	line-height: 0;
}

.vr-footer__logo {
	--vr-logo-alto: 4.5rem;
}

.vr-footer__logo img {
	display: block;
	height: var(--vr-logo-alto);
	/* 1000 / 272 en la versión clara, cuyo contenido va algo más arriba. */
	width: calc(var(--vr-logo-alto) * 3.6765);
	max-width: none;
	object-fit: cover;
	object-position: center 42%;
}

.vr-footer__links {
	gap: 0.75rem 2rem;
	align-items: center;
}

.vr-footer__links p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--vr-dark-muted);
}

.vr-footer__copy {
	/* El hueco de 1.5rem que reparte la fila más este medio suman los 2rem
	   que separan el logotipo de la línea. */
	flex-basis: 100%;
	margin-block-start: 0.5rem;
	padding-block-start: 1.75rem;
	border-top: 1px solid var(--vr-dark-border);
	font-size: 0.8125rem;
	color: rgba(247, 243, 236, 0.58);
	text-align: center;
}


/* =========================================================================
   19. VENTANA EMERGENTE DEL FORMULARIO
   =========================================================================
   Se abre y se cierra solo con CSS mediante la pseudoclase :target.
   Los botones apuntan a #formulario y el cierre apunta a #cerrar
   (un ancla inexistente), lo que desactiva :target sin saltos de página.

   Las reglas de posicionamiento van dentro de .wp-site-blocks para que
   en el editor de bloques el módulo se vea como una sección normal y
   se pueda editar con comodidad.
   ------------------------------------------------------------------------ */

.wp-site-blocks .vr-modal {
	display: none;
}

.wp-site-blocks .vr-modal:target {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 1000;
	/* Anula el blockGap y el ancho de contenido que hereda del layout
	   «constrained» del contenido de la página. */
	margin: 0;
	max-width: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem;
}

.wp-site-blocks .vr-modal__backdrop {
	position: fixed;
	inset: 0;
	margin: 0;
	max-width: none;
	background-color: rgba(12, 10, 7, 0.74);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.wp-site-blocks .vr-modal__backdrop a {
	position: absolute;
	inset: 0;
	display: block;
	font-size: 0;
	color: transparent;
	text-decoration: none;
}

.wp-site-blocks .vr-modal__dialog {
	animation: vr-modal-in 0.24s ease-out;
}

@keyframes vr-modal-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Tarjeta blanca centrada: solo contiene el formulario externo y, en una
   banda superior reservada, el botón de cerrar. La altura la marca el propio
   formulario (ver «Formulario externo», más abajo); aquí solo se pone el
   techo para que un paso largo no se salga de la pantalla. */
.vr-modal .vr-modal__dialog {
	position: relative;
	z-index: 1;
	/* En columna para que la banda del botón de cerrar quede fija arriba y
	   solo se desplace el formulario. */
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
	margin-block: min(4vh, 1.5rem);
	/* El alto lo marca el formulario; aquí solo está el techo. Con el margen
	   (3rem) y el relleno del propio modal (2rem) suma justo 100 dvh, así que
	   la ventana nunca se sale de la pantalla. «dvh» descuenta las barras del
	   navegador móvil; «vh» queda de respaldo. */
	box-sizing: border-box;
	height: auto;
	max-height: calc(100vh - 5rem);
	max-height: calc(100dvh - 5rem);
	padding: 3.25rem 0 0;
	overflow: hidden;
	background-color: var(--vr-white);
	border-radius: var(--vr-radius-lg);
	box-shadow: 0 50px 100px -35px rgba(0, 0, 0, 0.7);
}

.vr-modal__dialog > * {
	margin-block: 0;
}

.vr-modal__close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	/* Por encima del formulario incrustado: es la única forma de cerrar. */
	z-index: 3;
	margin: 0 !important;
}

/* Aspa roja. El texto «Cerrar» sigue en el HTML —solo se oculta a la
   vista con font-size: 0— para que los lectores de pantalla lo anuncien. */
.vr-modal__close a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 0;
	color: transparent;
	background-color: var(--vr-white);
	border: 1px solid var(--vr-line);
	border-radius: 50%;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.vr-modal__close a::before,
.vr-modal__close a::after {
	content: "";
	position: absolute;
	width: 1.0625rem;
	height: 2px;
	border-radius: 2px;
	background-color: var(--vr-danger);
}

.vr-modal__close a::before {
	transform: rotate(45deg);
}

.vr-modal__close a::after {
	transform: rotate(-45deg);
}

.vr-modal__close a:hover {
	background-color: var(--vr-danger);
	border-color: var(--vr-danger);
}

.vr-modal__close a:hover::before,
.vr-modal__close a:hover::after {
	background-color: var(--vr-white);
}

/* --- Formulario externo (Fillout) ----------------------------------------
   El script de Fillout inyecta un iframe dentro de .vr-fillout__frame.
   Las medidas viven aquí y no en atributos «style» del bloque HTML.
   Se usa «absolute» en lugar del «fixed» del fragmento original para que
   el formulario quede contenido dentro de la ventana emergente y no pueda
   taparle el botón de cerrar. */
/* El atributo «data-fillout-dynamic-resize» del bloque HTML hace que el
   formulario avise de su alto en cada paso y que el script escriba ese valor
   en el «style» de «.vr-fillout__frame». Por eso aquí ya no se impone ningún
   alto: solo un suelo, para que la ventana no aparezca diminuta antes de que
   llegue el primer aviso, y la transición que suaviza el cambio de paso.
   Fillout envuelve su iframe en dos <div> propios que sí necesitan el
   «height: 100%», o el iframe se quedaría en los 150 px que trae por defecto.

   Si algún día Fillout dejara de enviar ese aviso, la ventana se quedaría en
   el suelo de 20rem: para volver al alto fijo de antes basta con quitar el
   atributo del bloque HTML y cambiar aquí «min-height» por «height». */
.vr-fillout {
	width: 100%;
	/* Si el paso es más alto que la pantalla, este es el que se desplaza. El
	   botón de cerrar vive fuera de esta caja, en la banda superior, así que
	   se queda siempre a la vista. «min-height: 0» es imprescindible: sin él
	   un hijo de flex no encoge por debajo de su contenido y volvería a
	   recortarse. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vr-fillout__frame {
	width: 100%;
	min-height: 20rem;
	transition: height 0.2s ease;
}

.vr-fillout__frame > div,
.vr-fillout__frame > div > div {
	width: 100%;
	height: 100%;
}

.vr-fillout iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}


/* =========================================================================
   20. PÁGINAS INTERIORES Y 404
   ========================================================================= */

.vr-page {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	padding-inline: var(--vr-gutter);
}

:root .vr-page__title {
	max-width: 22ch;
	margin-block-end: 1.5rem;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	letter-spacing: -0.04em;
}

/* --- Texto legal ---------------------------------------------------------
   Los titulares de sección de theme.json son demasiado grandes para un
   documento de siete apartados, y las listas necesitan recuperar su sangría
   porque el tema se la quita a «core/list» para las listas con palomita. */
.vr-page .vr-page__meta {
	margin-block-end: 2rem;
	font-size: 0.875rem;
	color: var(--vr-muted);
}

.vr-page h2 {
	max-width: 30ch;
	margin-block-start: 2.75rem;
	margin-block-end: 0.875rem;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	letter-spacing: -0.025em;
}

.vr-page p,
.vr-page .wp-block-list {
	max-width: 68ch;
}

.vr-page .wp-block-list {
	padding-left: 1.25rem;
	list-style: disc;
	color: var(--vr-muted);
}

.vr-page .wp-block-list li + li {
	margin-top: 0.375rem;
}

.vr-page p {
	color: var(--vr-muted);
}

.vr-page a {
	color: var(--vr-accent-text);
	text-underline-offset: 3px;
}

/* El botón de vuelta al inicio, al final del texto legal y en el 404. */
.vr-page .vr-actions {
	margin-block-start: 3rem;
}

.vr-page .vr-actions a {
	color: var(--vr-ink);
	text-decoration: none;
}

.vr-404 {
	text-align: center;
}

/* --- Páginas finales: gracias y requisitos --------------------------------
   Las dos son destino del formulario —una para quien califica y otra para
   quien no— y comparten estructura: ilustración, titular, texto y tarjetas.
   Se diferencian en el ancho del titular y en el número de tarjetas. Al tener
   URL propia sirven además como evento de conversión para el píxel. */
.vr-final {
	display: grid;
	align-content: center;
	justify-items: center;
	min-height: min(58vh, 30rem);
	/* Menos relleno superior que el resto de secciones: aquí no hay nada
	   por encima que separar, y el mensaje debe verse sin hacer scroll. */
	padding-block: clamp(2rem, 3vw, 2.25rem) clamp(3.5rem, 7vw, 6rem);
	text-align: center;
	/* Tres capas sobre el crema, de arriba abajo en el orden en que se listan:
	   1. Halo naranja tras la ilustración, que da profundidad y centra la mirada.
	   2. Velo de crema que disuelve la rejilla antes de llegar al pie.
	   3. Rejilla de puntos, apenas por encima del umbral de lo perceptible. */
	background-color: var(--vr-cream);
	background-image:
		radial-gradient(ellipse 68% 44% at 50% 6%, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0) 62%),
		linear-gradient(to bottom, rgba(255, 250, 242, 0) 58%, var(--vr-cream) 100%),
		radial-gradient(circle, rgba(22, 19, 15, 0.05) 1px, transparent 1.5px);
	background-size: 100% 100%, 100% 100%, 26px 26px;
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center top;
}

.vr-final.wp-block-group > * {
	margin-inline: auto;
}

.vr-final__ilustracion {
	width: clamp(7.75rem, 15vw, 10.5rem);
	margin-block-end: 0.25rem;
}

.vr-final__ilustracion img {
	display: block;
	width: 100%;
	height: auto;
}

/* El medidor es más apaisado que el avión de papel, así que con el mismo
   ancho quedaría más bajo y pesaría menos en la página. Se compensa con un
   6 % más de ancho —la razón exacta entre las dos proporciones— para que las
   dos páginas tengan la misma altura de ilustración. */
.vr-final--requisitos .vr-final__ilustracion {
	width: clamp(9.25rem, 18vw, 12.7rem);
}

.vr-final .vr-final__titulo {
	font-size: clamp(2rem, 4.6vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* Los anchos de lectura van con «.wp-block-group» y el combinador de hijo
   directo: así llegan a 0,3,0 y le ganan a la regla de ancho de contenido de
   la sección (§ 04), que impone 70rem a todo hijo directo y aparece antes en
   el archivo. Sin eso el texto se estira hasta los 1008 px y salen renglones
   de ochenta caracteres, muy por encima de lo cómodo de leer. */
.vr-final.wp-block-group > .vr-lead {
	max-width: 48ch;
}

/* El párrafo bajo el titular va en negro y no en el gris del resto del texto:
   en requisitos es el motivo del rechazo y en gracias el mensaje principal, y
   en los dos casos tiene que leerse antes que nada. Las negritas de dentro se
   quedan también en negro; en naranja no llegarían al 4.5:1 que pide la norma
   sobre el fondo con halo. */
.vr-final .vr-final__destacado {
	color: var(--vr-ink);
}

/* Requisitos reparte su texto en renglones más largos —69 caracteres frente a
   los 55 de gracias, dentro de lo cómodo de leer— porque así cada párrafo
   pierde una línea y la tarjeta entra sin scroll en pantallas de 800 px. */
.vr-final--requisitos.wp-block-group > .vr-lead {
	max-width: 60ch;
}

/* Y aprieta también el aire entre bloques: lleva un párrafo más que gracias y
   una tarjeta más alta, y es la única página del tema en la que algo —el botón
   de WhatsApp— tiene que verse sin hacer scroll. */
.vr-final--requisitos.wp-block-group > * + * {
	margin-block-start: 1.25rem;
}

.vr-final--requisitos .vr-card {
	padding: clamp(1.5rem, 2.6vw, 1.875rem);
}

/* El titular de gracias entra en una línea y no necesita tope. El de
   requisitos es nueve caracteres más largo: sin límite ocuparía todo el ancho
   de la sección de un solo renglón. */
.vr-final--requisitos.wp-block-group > .vr-final__titulo {
	max-width: 26ch;
}

/* Las tarjetas del cierre. Llevan «.vr-final» por delante para ganarle al
   ancho de contenido que la sección impone a sus hijos; sin eso se irían a
   495 px cada una y el texto quedaría en líneas demasiado largas para lo
   poco que dice. */
.vr-final .vr-final__tarjetas.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	max-width: 34rem;
}

/* La tarjeta de requisitos lleva un texto más largo y un botón, así que se
   ensancha: es la única acción de la página y tiene que caber sin scroll en
   pantallas de portátil de 800 px de alto. */
.vr-final--requisitos .vr-final__tarjetas.is-layout-grid {
	max-width: 38rem;
}

.vr-final--requisitos .vr-final__tarjetas.wp-block-group {
	margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

.vr-final .vr-card {
	align-items: center;
	text-align: center;
}

.vr-final .vr-card__icon {
	margin-inline: auto;
}

/* El botón de contacto respira algo más que el resto del contenido de la
   tarjeta, que va con el hueco de 0.875rem que reparte «.vr-card». */
.vr-final .vr-card .vr-actions {
	margin-block-start: 0.375rem;
}

.vr-final .vr-final__paso {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--vr-ink);
}

.vr-final .vr-card--oscuro .vr-final__paso {
	color: var(--vr-bone);
}


/* La línea de puntos y el gris de la nota están pensados para fondo claro;
   sobre negro se cambian por los del resto de superficies oscuras. */
.vr-final .vr-card--oscuro .vr-final__nota {
	border-top-color: var(--vr-dark-border);
	color: var(--vr-dark-muted);
}

/* La advertencia de Gmail queda anclada abajo, separada por una línea, para
   que las dos tarjetas de gracias terminen a la misma altura. */
.vr-final .vr-final__nota {
	margin-block-start: auto;
	padding-block-start: 0.875rem;
	border-top: 1px dashed var(--vr-line);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--vr-muted);
}


/* =========================================================================
   21. RESPONSIVE
   ========================================================================= */

/* --- Escritorio: escala global -------------------------------------------
   Todo el tema se mide en rem (tipografía, espaciados, radios, iconos,
   logotipos y los anchos en «ch»), así que este único valor controla la
   escala de la página en PC. 90% = 10% más pequeño. Para volver al tamaño
   original basta con poner 100%.
   Es un porcentaje y no un valor fijo en px para respetar el tamaño de
   letra que cada persona tenga configurado en su navegador. */
@media (min-width: 1025px) {
	html {
		font-size: 90%;
	}
}

/* --- Escritorio: costura entre el último llamado a la acción y el pie ---
   Las dos zonas comparten el mismo negro, así que el espacio acumulado de
   ambas se leía como un hueco vacío en lugar de como una separación. */
@media (min-width: 1025px) {
	.vr-section.vr-cta {
		padding-block-end: clamp(3rem, 6vw, 5.5rem);
	}

	.vr-footer {
		padding-block-start: 2.75rem;
	}
}

/* --- Escritorio: el pie en un solo renglón ------------------------------
   Logotipo, enlace legal y copyright repartidos de extremo a extremo. Sin
   línea divisoria: con una sola fila no separaría nada. Por debajo de este
   ancho el copyright vuelve a su renglón, que es como se ve en tableta y
   en móvil. */
@media (min-width: 1025px) {
	.vr-footer .vr-footer__top.wp-block-group {
		flex-wrap: nowrap;
	}

	.vr-footer .vr-footer__copy {
		flex: 0 1 auto;
		margin-block-start: 0;
		padding-block-start: 0;
		border-top: 0;
		text-align: end;
	}
}

/* --- Escritorio: aparece el menú de secciones --- */
@media (min-width: 1025px) {
	.vr-header .vr-nav {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* --- Escritorio: un punto más en todo lo que baja de 20 px ----------------
   Mismo criterio que en móvil. Aquí hace falta un rodeo: como el tema va al
   90 % en PC, un píxel no son 0.0625rem sino 0.0695. Se declara una vez como
   variable y cada regla se lee como «su valor de siempre, más un píxel»; así
   el ajuste sigue en rem y respeta el tamaño de letra que cada persona tenga
   configurado en su navegador.

   Los valores fluidos van dentro del «calc» con su «clamp» intacto, para que
   sigan creciendo con el ancho de pantalla en vez de quedarse clavados. */
@media (min-width: 1025px) {
	:root {
		--vr-punto-mas: 0.0695rem;
	}

	.vr-eyebrow {
		font-size: calc(0.75rem + var(--vr-punto-mas));
	}

	.vr-exito .vr-exito__fuente {
		font-size: calc(0.75rem + var(--vr-punto-mas));
	}

	.vr-exito .vr-exito__label,
	.vr-exito .vr-fase__label,
	.vr-exito .vr-metrica__label {
		font-size: calc(0.6875rem + var(--vr-punto-mas));
	}

	.vr-hero__etiqueta,
	.vr-strip__text,
	.vr-footer__copy,
	.vr-final .vr-final__nota,
	.vr-exito .vr-exito__sector,
	.vr-exito .vr-exito__periodo {
		font-size: calc(0.8125rem + var(--vr-punto-mas));
	}

	.vr-exito .vr-fase__pie,
	.vr-exito .vr-fase__delta,
	.vr-page .vr-page__meta {
		font-size: calc(0.875rem + var(--vr-punto-mas));
	}

	.vr-exito .vr-checklist li,
	.vr-footer__links p {
		font-size: calc(0.9375rem + var(--vr-punto-mas));
	}

	.vr-card p,
	.vr-step p,
	.vr-exito .vr-exito__cliente,
	.vr-btn--sm .wp-block-button__link {
		font-size: calc(1rem + var(--vr-punto-mas));
	}

	.vr-checklist li,
	.vr-exito .vr-exito__subtitulo,
	.vr-final .vr-final__paso,
	.vr-faq__item p,
	.vr-page p,
	.vr-page .wp-block-list,
	.vr-header .vr-nav .wp-block-navigation-item__content {
		font-size: calc(1.0625rem + var(--vr-punto-mas));
	}

	.vr-step .vr-step__num,
	.vr-exito .vr-metrica__num,
	.vr-btn:not(.vr-btn--sm) .wp-block-button__link {
		font-size: calc(1.125rem + var(--vr-punto-mas));
	}

	.vr-lead {
		font-size: calc(clamp(1.0625rem, 1.6vw, 1.3125rem) + var(--vr-punto-mas));
	}

	.vr-faq__item summary {
		font-size: calc(clamp(1.0625rem, 1.9vw, 1.25rem) + var(--vr-punto-mas));
	}
}

/* --- Tablet grande --- */
@media (max-width: 1024px) {
	.vr-cards--3.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Tablet y móvil ------------------------------------------------------
   El corte es 781.98 y no 781 a propósito. WordPress pasa sus columnas a una
   sola con «min-width: 782px», así que entre 781 y 782 —anchos que aparecen
   al hacer zoom o en pantallas con densidad fraccionaria— quedaba una franja
   en la que las columnas ya iban apiladas pero estas reglas todavía no se
   aplicaban, y la imagen del problema se iba a 704 px de ancho. */
@media (max-width: 781.98px) {
	:root {
		--vr-header-height: 5.5rem;
	}

	/* La cabecera móvil respira algo más: logotipo mayor y más relleno. */
	.vr-header {
		padding-block: 1.25rem;
	}

	.vr-header__logo {
		--vr-logo-alto: 3rem;
	}

	.vr-cards--3.is-layout-grid {
		grid-template-columns: 1fr;
	}

	.vr-final--requisitos .vr-final__tarjetas.is-layout-grid {
		max-width: 26rem;
	}

	.vr-section h2,
	.vr-step h3,
	.vr-quehacemos h2,
	.vr-garantia h2,
	.vr-faq h2 {
		max-width: none;
	}

	.vr-lead {
		max-width: none;
	}

	/* En una sola columna la sección se lee centrada. Con el titular pegado al
	   margen izquierdo y la ilustración y el puente centrados debajo, el bloque
	   quedaba descuadrado. «text-align» baja por herencia al antetítulo, al
	   titular y al texto de las preguntas; la ilustración se centra con el
	   margen automático de su columna. */
	.vr-problema {
		text-align: center;
	}

	.vr-problema__media {
		max-width: 28rem;
		margin-inline: auto;
	}

	/* En una sola columna la imagen queda centrada, así que el botón
	   también: alineado a la izquierda se veía descuadrado respecto a ella. */
	.vr-quehacemos__grid > .vr-actions {
		justify-content: center;
	}

	/* Misma costura que ya se corrigió en escritorio, ahora aquí: el último
	   llamado a la acción y el pie comparten el mismo negro, así que los
	   72 px de la sección más los 48 del pie no se leían como separación
	   sino como un hueco vacío de 120 px. */
	.vr-section.vr-cta {
		padding-block-end: 2.75rem;
	}

	.vr-footer {
		padding-block-start: 2.5rem;
	}

	/* La clase «is-content-justification-space-between» que genera WordPress
	   a partir del atributo del bloque pesa más que un selector de una sola
	   clase, así que aquí hace falta subir la especificidad. */
	.vr-footer .vr-footer__top.wp-block-group {
		justify-content: center;
		text-align: center;
	}

	.vr-footer .vr-footer__links.wp-block-group {
		justify-content: center;
	}
}

/* --- Móvil --- */
@media (max-width: 600px) {
	/* Red de seguridad de la cabecera: si alguna vez se alarga la etiqueta
	   del botón, este encoge y parte el texto en dos líneas centradas en
	   lugar de desbordar el margen de la pantalla. */
	.vr-header__cta {
		flex: 0 1 auto;
		min-width: 0;
	}

	.vr-header__cta .wp-block-button__link {
		padding: 0.8125rem 1.25rem;
		font-size: 1rem;
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}

	/* Un punto menos de cuerpo y algo menos de relleno: a ancho completo, los
	   54 px de escritorio se veían como una barra en una pantalla de teléfono.
	   El «:not» deja fuera al de la cabecera, que tiene su propia medida. */
	/* Las tres preguntas son el gancho de la sección y en el teléfono se
	   quedaban en el mínimo de su escala, 18 px. */
	.vr-question__text {
		font-size: 1.375rem;
	}

	.vr-btn:not(.vr-btn--sm) .wp-block-button__link {
		padding: 1rem 1.75rem;
		font-size: 1.0625rem;
	}

	/* No llegan al borde: se quedan a un 88 % del ancho disponible y centrados,
	   para que la pastilla respire por los lados en lugar de tocar el margen. */
	.vr-actions {
		justify-content: center;
	}

	.vr-actions .wp-block-button {
		width: 88%;
	}

	.vr-actions .wp-block-button__link {
		width: 100%;
	}

	.vr-strip__text {
		letter-spacing: 0.12em;
	}

	.vr-modal__close {
		top: 0.625rem;
		right: 0.625rem;
	}


	/* --- Un punto más en todo lo que baja de 20 px --------------------------
	   En el teléfono los textos pequeños se quedaban en el suelo de su escala.
	   Aquí sube un píxel todo lo que estaba por debajo de 20; lo que ya
	   llegaba —titulares, preguntas del Problema, cifras del caso— se queda
	   como está. Solo afecta a móvil: en tableta y escritorio no cambia nada. */
	.vr-eyebrow {
		font-size: 0.8125rem;
	}

	.vr-hero__etiqueta,
	.vr-strip__text,
	.vr-footer__copy,
	.vr-final .vr-final__nota {
		font-size: 0.875rem;
	}

	.vr-lead,
	.vr-checklist li,
	.vr-faq__item summary,
	.vr-faq__item p,
	.vr-exito .vr-exito__subtitulo,
	.vr-final .vr-final__paso {
		font-size: 1.125rem;
	}

	.vr-card p,
	.vr-step p,
	.vr-exito .vr-exito__cliente,
	.vr-page p,
	.vr-page .wp-block-list {
		font-size: 1.0625rem;
	}

	.vr-step .vr-step__num,
	.vr-exito .vr-metrica__num {
		font-size: 1.1875rem;
	}

	.vr-exito .vr-exito__label,
	.vr-exito .vr-fase__label,
	.vr-exito .vr-metrica__label {
		font-size: 0.75rem;
	}

	.vr-exito .vr-exito__sector,
	.vr-exito .vr-exito__periodo {
		font-size: 0.875rem;
	}

	.vr-exito .vr-exito__fuente {
		font-size: 0.8125rem;
	}

	.vr-exito .vr-fase__pie,
	.vr-exito .vr-fase__delta,
	.vr-page .vr-page__meta {
		font-size: 0.9375rem;
	}

	.vr-exito .vr-checklist li,
	.vr-footer__links p {
		font-size: 1rem;
	}

	/* La ventana se estira hacia abajo: en un teléfono alto el tope de 38rem
	   dejaba casi 200 px de pantalla sin usar y obligaba a hacer scroll dentro
	   del formulario. El segundo término del «min» sigue mandando en pantallas
	   bajas, así que nunca se sale. */
}

/* --- Panel del caso de éxito en pantallas estrechas --- */
@media (max-width: 781.98px) {
	.vr-exito__metricas.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vr-fase--antes .vr-fase__pruebas.is-layout-grid {
		grid-template-columns: minmax(0, 17rem);
	}

	.vr-exito .vr-exito__periodo,
	.vr-exito .vr-fase__delta {
		margin-inline-start: 0;
	}

	/* La captura del administrador de anuncios es muy ancha: reducida al
	   ancho del móvil sus cifras no se leerían, así que se muestra a tamaño
	   real dentro de un contenedor que se desplaza en horizontal. */
	.vr-fase--despues .vr-prueba__img {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.vr-fase--despues .vr-prueba__img img {
		width: auto;
		max-width: none;
	}
}

/* --- Móviles muy estrechos (320 px) ---
   El corte va en 360 y no en 400 para que los móviles habituales (375 y
   390 px) sí reciban la cabecera grande; por debajo de 360 el logotipo y
   el botón ya no caben con holgura. */
@media (max-width: 360px) {
	.vr-header__inner {
		gap: 0.75rem;
	}

	.vr-header__logo {
		--vr-logo-alto: 2.375rem;
	}

	.vr-footer__logo {
		--vr-logo-alto: 3.75rem;
	}
}


/* =========================================================================
   22. PREFERENCIAS DE MOVIMIENTO E IMPRESIÓN
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/* Movimiento decorativo que sí se anula: la flecha que rebota en bucle
	   —el tipo de animación que más molesta a quien pide menos movimiento—
	   y la entrada de la ventana emergente. */
	.vr-bridge::after,
	.wp-site-blocks .vr-modal__dialog {
		animation: none !important;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.001ms !important;
		/* Imprescindible: sin esto, los retardos siguen activos. El barrido
		   del botón se completaría al instante mientras el color del texto
		   espera 0,16 s, dejando texto negro sobre fondo negro. */
		transition-delay: 0s !important;
	}

	.vr-card:hover {
		transform: none;
	}

	/* La tarjeta que flota en la página de gracias es la otra excepción
	   pedida por el cliente. La regla no hace falta hoy —aquí no se anulan
	   las animaciones en general, solo las dos nombradas arriba— pero deja
	   la intención por escrito y la protege si algún día se añade un
	   «animation: none» global. */
	.vr-card--flota {
		animation-name: vr-flotar !important;
	}

	.vr-hero .vr-btn--primary .wp-block-button__link::after {
		animation-name: vr-destello !important;
	}

	.vr-header__cta .vr-btn--primary .wp-block-button__link,
	.vr-cta .vr-btn--primary .wp-block-button__link {
		animation-name: vr-latido !important;
	}

	.vr-flota img {
		animation-name: vr-flotar-imagen !important;
		transition-duration: 0.45s !important;
	}

	/* --- Excepción pedida expresamente: los botones de llamada a la acción --
	   Se les devuelven sus tiempos para que el barrido y el levantamiento se
	   vean también con «movimiento reducido» activo. Es una animación breve,
	   iniciada por el cursor y sin repetición, así que el riesgo es bajo.
	   Todo lo demás de la página sigue respetando la preferencia. */
	.vr-btn--primary .wp-block-button__link::before,
	.vr-btn--dark .wp-block-button__link::before {
		transition-duration: 0.34s !important;
	}

	.vr-btn--primary .wp-block-button__link,
	.vr-btn--dark .wp-block-button__link {
		transition-duration: 0.18s !important;
	}

	/* El orden de los tiempos sigue al de las propiedades declaradas en la
	   regla de hover: color, transform y box-shadow. */
	.vr-btn--primary .wp-block-button__link:hover,
	.vr-btn--primary .wp-block-button__link:focus-visible,
	.vr-btn--dark .wp-block-button__link:hover,
	.vr-btn--dark .wp-block-button__link:focus-visible {
		transition-duration: 0.14s, 0.2s, 0.25s !important;
		transition-delay: 0.16s, 0s, 0s !important;
	}
}


@media print {
	.vr-header,
	.vr-modal,
	.vr-actions,
	.vr-strip {
		display: none !important;
	}

	.vr-section {
		padding-block: 1.5rem;
	}

	.vr-section--dark,
	.vr-footer {
		color: #000000 !important;
		background-color: #ffffff !important;
	}
}