/*
 * VR Group Ideas - componentes CSS (vrgi-child v0.3.0)
 *
 * Origen: maqueta de Inicio y de las páginas secundarias (aprobación
 * provisional, 9 de octubre de 2026). Depende de vrgi-design-tokens.css.
 *
 * Reglas de este archivo:
 *  - Todas las clases empiezan por "vrgi-" (convención BEM: bloque,
 *    bloque__elemento, bloque--modificador).
 *  - No se estiliza ningún elemento HTML suelto: solo clases propias.
 *  - Los colores, tamaños y radios salen de los tokens, no se repiten valores.
 *  - Los estados :hover y :focus están escritos de forma explícita para ganar
 *    a los estilos globales de enlaces y botones del tema padre.
 *  - Sin !important, sin JavaScript, sin fuentes ni recursos externos.
 *
 * Los estados :hover, :focus y el anillo de foco NO están en la maqueta
 * (era estática): son una propuesta y se pueden cambiar.
 *
 * Índice: 1 Contenedor y secciones - 2 Rejillas - 3 Etiqueta (eyebrow)
 *         4 Botones - 5 Enlace - 6 Tarjetas - 7 Chips - 8 Banda CTA
 *         9 Foco y movimiento reducido
 *         10 Tipografía de contenido - 11 Composición (v0.3.0)
 *         12 Marcadores y estado vacío (v0.3.0)
 */


/* 1. Contenedor y secciones ---------------------------------------------- */

.vrgi-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--vrgi-container-max);
	margin-inline: auto;
	padding-inline: var(--vrgi-gutter);
}

.vrgi-section {
	box-sizing: border-box;
	padding-block: var(--vrgi-section-space);
	/* Fondo y texto propios: no dependen del color de fondo del sitio en Kadence (v0.3.0). */
	background-color: var(--vrgi-bg);
	color: var(--vrgi-text);
}

/* Banda de fondo oscuro (p. ej. la sección de Impulsa IA). */
.vrgi-section--dark {
	background-color: var(--vrgi-surface-dark);
	color: var(--vrgi-text-on-dark);
}

.vrgi-section--dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--vrgi-text-on-dark);
}


/* 2. Rejillas ------------------------------------------------------------- */
/*
 * Sin puntos de ruptura fijos: las columnas se reparten solas según el ancho
 * disponible. min(100%, X) evita desbordamientos en pantallas muy estrechas.
 */

.vrgi-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vrgi-gap);
}

.vrgi-grid > * {
	min-width: 0;
}

/* 2 columnas (texto + imagen, formulario + datos). 1 columna en móvil. */
.vrgi-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vrgi-grid-min-2)), 1fr));
	gap: var(--vrgi-gap-lg);
}

/* Hasta 3 columnas (tarjetas de servicios). */
.vrgi-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vrgi-grid-min-3)), 1fr));
}

/*
 * Pensada para 4 elementos (pasos, categorías): 1 columna en móvil, 2x2 en
 * tablet y 4 en escritorio. Con puntos de ruptura fijos para no dejar una
 * tarjeta suelta en una segunda fila (3+1) en anchos intermedios.
 */
.vrgi-grid--4 {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 36rem) {
	.vrgi-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.vrgi-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Tarjetas pequeñas: 2 columnas en móvil y autoajuste desde 704 px. */
.vrgi-grid--compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vrgi-gap-sm);
}

@media (min-width: 44rem) {
	.vrgi-grid--compact {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--vrgi-grid-min-compact)), 1fr));
		gap: var(--vrgi-gap);
	}
}


/* 3. Etiqueta (eyebrow) --------------------------------------------------- */

.vrgi-eyebrow {
	display: inline-block;
	margin: 0;
	font-family: var(--vrgi-font-body);
	font-size: var(--vrgi-fs-eyebrow);
	font-weight: var(--vrgi-fw-bold);
	line-height: var(--vrgi-lh-body);
	letter-spacing: var(--vrgi-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--vrgi-accent);
}

/* Azul tecnológico: solo para Impulsa IA. */
.vrgi-eyebrow--tech {
	color: var(--vrgi-tech);
}

/*
 * Sobre fondo oscuro el rojo no alcanza el contraste mínimo para texto
 * pequeño, así que cualquier etiqueta pasa al azul claro.
 */
.vrgi-section--dark .vrgi-eyebrow,
.vrgi-card--dark .vrgi-eyebrow {
	color: var(--vrgi-tech-on-dark);
}


/* 4. Botones -------------------------------------------------------------- */
/*
 * Se pueden aplicar a <a> o <button>. Variantes de color: --primary (rojo),
 * --outline (contorno) y --light (blanco, para la banda CTA roja).
 */

.vrgi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	box-sizing: border-box;
	min-height: var(--vrgi-control-height);
	padding: 0 1.5rem;
	border: var(--vrgi-border-width) solid transparent;
	border-radius: var(--vrgi-radius-pill);
	box-shadow: none;
	font-family: var(--vrgi-font-body);
	font-size: var(--vrgi-fs-body);
	font-weight: var(--vrgi-fw-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.vrgi-btn--primary {
	background-color: var(--vrgi-accent);
	border-color: var(--vrgi-accent);
	color: var(--vrgi-on-accent);
}

.vrgi-btn--outline {
	background-color: transparent;
	border-color: var(--vrgi-text);
	color: var(--vrgi-text);
}

.vrgi-btn--light {
	background-color: var(--vrgi-color-white);
	border-color: var(--vrgi-color-white);
	color: var(--vrgi-text);
}

/* Hover y foco: se repite el color para ganar a a:hover / button:hover del padre. */
.vrgi-btn--primary:hover,
.vrgi-btn--primary:focus,
.vrgi-btn--primary:active,
.vrgi-btn--outline:hover,
.vrgi-btn--outline:focus,
.vrgi-btn--outline:active,
.vrgi-btn--light:hover,
.vrgi-btn--light:focus,
.vrgi-btn--light:active {
	background-color: var(--vrgi-surface-band);
	border-color: var(--vrgi-surface-band);
	color: var(--vrgi-text-on-dark);
	box-shadow: none;
	text-decoration: none;
}

/* Ocupa todo el ancho de su contenedor. */
.vrgi-btn--block {
	display: flex;
	width: 100%;
}

/* Fila de botones: se apilan a ancho completo en móvil. */
.vrgi-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vrgi-gap-sm);
}

@media (max-width: 36rem) {
	.vrgi-btn {
		min-height: var(--vrgi-control-height-touch);
	}

	.vrgi-btn-group > .vrgi-btn {
		width: 100%;
	}
}


/* 5. Enlace de acción ----------------------------------------------------- */

.vrgi-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--vrgi-chip-height);
	font-weight: var(--vrgi-fw-bold);
	color: var(--vrgi-accent);
	text-decoration: none;
	transition: color 150ms ease;
}

.vrgi-link:hover,
.vrgi-link:focus,
.vrgi-link:active {
	color: var(--vrgi-accent);
	text-decoration: underline;
}

.vrgi-link--tech,
.vrgi-link--tech:hover,
.vrgi-link--tech:focus,
.vrgi-link--tech:active {
	color: var(--vrgi-tech);
}

.vrgi-card--dark .vrgi-link,
.vrgi-card--dark .vrgi-link:hover,
.vrgi-card--dark .vrgi-link:focus,
.vrgi-card--dark .vrgi-link:active {
	color: var(--vrgi-tech-on-dark);
}


/* 6. Tarjetas -------------------------------------------------------------- */
/*
 * .vrgi-card es la tarjeta blanca; .vrgi-card--dark la oscura. Estructura:
 *   .vrgi-card > .vrgi-card__media (opcional) + .vrgi-card__body
 * Puede ser un <div> o un <a> (tarjeta enlazada).
 */

.vrgi-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	overflow-wrap: break-word;
	border-radius: var(--vrgi-radius-lg);
	background-color: var(--vrgi-color-white);
	color: var(--vrgi-text);
	text-decoration: none;
}

.vrgi-card:hover,
.vrgi-card:focus,
.vrgi-card:active {
	color: var(--vrgi-text);
	text-decoration: none;
}

.vrgi-card__media {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.vrgi-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.625rem;
	padding: var(--vrgi-card-padding);
}

.vrgi-card__body > * {
	margin: 0;
}

.vrgi-card__title {
	font-family: var(--vrgi-font-heading);
	font-size: var(--vrgi-fs-h3);
	font-weight: var(--vrgi-fw-bold);
	line-height: var(--vrgi-lh-heading);
	letter-spacing: var(--vrgi-tracking-heading);
	color: inherit;
}

.vrgi-card__text {
	font-size: var(--vrgi-fs-body);
	line-height: var(--vrgi-lh-body);
	color: var(--vrgi-text-secondary);
}

/* Tarjeta oscura: se usa dentro de .vrgi-section--dark. */
.vrgi-card--dark {
	background-color: var(--vrgi-surface-dark-raised);
	color: var(--vrgi-text-on-dark);
}

.vrgi-card--dark:hover,
.vrgi-card--dark:focus,
.vrgi-card--dark:active {
	color: var(--vrgi-text-on-dark);
}

.vrgi-card--dark .vrgi-card__body {
	padding: var(--vrgi-card-padding-dark);
}

.vrgi-card--dark :is(h1, h2, h3, h4, h5, h6),
.vrgi-card--dark .vrgi-card__title {
	color: var(--vrgi-text-on-dark);
}

.vrgi-card--dark .vrgi-card__text {
	color: var(--vrgi-text-on-dark-secondary);
}


/* 7. Chips ----------------------------------------------------------------- */
/*
 * Para filtros y categorías. Un chip seleccionado lleva .vrgi-chip--selected
 * o aria-pressed="true" / aria-current="true" / aria-current="page".
 */

.vrgi-chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.vrgi-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--vrgi-chip-height);
	padding: 0 1.125rem;
	border: var(--vrgi-border-width) solid var(--vrgi-text);
	border-radius: var(--vrgi-radius-pill);
	box-shadow: none;
	background-color: transparent;
	font-family: var(--vrgi-font-body);
	font-size: 0.9375rem;
	font-weight: var(--vrgi-fw-bold);
	line-height: 1.2;
	color: var(--vrgi-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.vrgi-chip:hover,
.vrgi-chip:focus,
.vrgi-chip:active {
	background-color: var(--vrgi-color-white);
	border-color: var(--vrgi-text);
	color: var(--vrgi-text);
	box-shadow: none;
	text-decoration: none;
}

.vrgi-chip--selected,
.vrgi-chip[aria-pressed="true"],
.vrgi-chip[aria-current="true"],
.vrgi-chip[aria-current="page"],
.vrgi-chip--selected:hover,
.vrgi-chip--selected:focus,
.vrgi-chip--selected:active,
.vrgi-chip[aria-pressed="true"]:hover,
.vrgi-chip[aria-pressed="true"]:focus,
.vrgi-chip[aria-current="true"]:hover,
.vrgi-chip[aria-current="true"]:focus,
.vrgi-chip[aria-current="page"]:hover,
.vrgi-chip[aria-current="page"]:focus {
	background-color: var(--vrgi-surface-band);
	border-color: var(--vrgi-surface-band);
	color: var(--vrgi-text-on-dark);
}


/* 8. Banda de llamada a la acción (CTA) ----------------------------------- */
/*
 * .vrgi-cta > .vrgi-cta__content (título + texto) + un botón .vrgi-btn--light.
 * Fondo rojo con texto blanco.
 */

.vrgi-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vrgi-gap);
	box-sizing: border-box;
	padding: var(--vrgi-cta-padding);
	overflow-wrap: break-word;
	border-radius: var(--vrgi-cta-radius);
	background-color: var(--vrgi-accent);
	color: var(--vrgi-on-accent);
}

.vrgi-cta__content {
	flex: 1 1 20rem;
	max-width: 37.5rem;
}

.vrgi-cta__title {
	margin: 0;
	font-family: var(--vrgi-font-heading);
	font-size: var(--vrgi-fs-h2);
	font-weight: var(--vrgi-fw-bold);
	line-height: var(--vrgi-lh-heading);
	letter-spacing: var(--vrgi-tracking-heading);
	color: inherit;
}

.vrgi-cta__text {
	margin: 0.75rem 0 0;
	font-size: var(--vrgi-fs-lead);
	line-height: var(--vrgi-lh-body);
	color: inherit;
}

@media (max-width: 36rem) {
	.vrgi-cta > .vrgi-btn {
		width: 100%;
	}
}


/* 9. Foco visible y movimiento reducido ----------------------------------- */

.vrgi-btn:focus-visible,
.vrgi-chip:focus-visible,
.vrgi-link:focus-visible,
.vrgi-card:focus-visible {
	outline: 3px solid var(--vrgi-color-blue);
	outline-offset: 2px;
}

/* Sobre rojo o negro, el anillo azul no se distingue: pasa a blanco. */
.vrgi-cta .vrgi-btn:focus-visible,
.vrgi-section--dark .vrgi-btn:focus-visible,
.vrgi-section--dark .vrgi-chip:focus-visible,
.vrgi-section--dark .vrgi-link:focus-visible,
.vrgi-section--dark .vrgi-card:focus-visible,
.vrgi-card--dark .vrgi-link:focus-visible {
	outline-color: var(--vrgi-color-white);
}

@media (prefers-reduced-motion: reduce) {
	.vrgi-btn,
	.vrgi-chip,
	.vrgi-link {
		transition: none;
	}
}


/* 10. Tipografía de contenido (v0.3.0) ------------------------------------ */
/*
 * Los títulos y párrafos de las páginas llevan estas clases para no depender
 * de la tipografía global del tema padre. El tamaño sale de los tokens.
 */

.vrgi-heading {
	margin: 0;
	font-family: var(--vrgi-font-heading);
	font-size: var(--vrgi-fs-h2);
	font-weight: var(--vrgi-fw-bold);
	line-height: var(--vrgi-lh-heading);
	letter-spacing: var(--vrgi-tracking-heading);
	color: var(--vrgi-text);
}

/* Titular de portada (h1): un solo uso por página. */
.vrgi-heading--hero {
	font-size: var(--vrgi-fs-h1);
}

.vrgi-lead {
	max-width: 40rem;
	margin: 0;
	font-size: var(--vrgi-fs-lead);
	line-height: var(--vrgi-lh-body);
	color: var(--vrgi-text-secondary);
}

.vrgi-section--dark .vrgi-lead {
	color: var(--vrgi-text-on-dark-secondary);
}

/* Nota pequeña. En las maquetas se usa para avisos internos: se retiran antes de publicar. */
.vrgi-note {
	margin: 0.875rem 0 0;
	font-size: var(--vrgi-fs-small);
	line-height: var(--vrgi-lh-body);
	color: var(--vrgi-text-muted);
}


/* 11. Composición (v0.3.0) ------------------------------------------------- */

/* Pila vertical con separación uniforme (sustituye a los márgenes de cada elemento). */
.vrgi-stack {
	display: flex;
	flex-direction: column;
	gap: var(--vrgi-gap);
}

.vrgi-stack > * {
	margin: 0;
}

.vrgi-stack--tight {
	gap: 0.625rem;
}

/* Quita el espacio superior o inferior de una sección que sigue a otra clara. */
.vrgi-section--flush-top {
	padding-top: 0;
}

.vrgi-section--flush-bottom {
	padding-bottom: 0;
}

/* Alinea verticalmente al centro el contenido de una rejilla. */
.vrgi-grid--center {
	align-items: center;
}

/* Cabecera de sección: título a la izquierda y botón a la derecha (apilados en móvil). */
.vrgi-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vrgi-gap);
	margin-bottom: var(--vrgi-gap-lg);
}

@media (max-width: 36rem) {
	.vrgi-section-head > .vrgi-btn {
		width: 100%;
	}
}

/* Imagen destacada (portada). Lleva un cuadrado rojo desplazado detrás, como en la maqueta. */
.vrgi-hero__media {
	position: relative;
	isolation: isolate;
}

.vrgi-hero__media::after {
	content: "";
	position: absolute;
	bottom: -1.125rem;
	left: -1.125rem;
	z-index: -1;
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 1.5rem;
	background-color: var(--vrgi-accent);
}

/* Imagen real, cuando exista (reutiliza el radio de la banda CTA). */
.vrgi-media {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--vrgi-cta-radius);
}


/* 12. Marcadores y estado vacío (v0.3.0) ---------------------------------- */

/* Recuadro rayado «[Foto]»: temporal, hasta tener fotografías reales. */
.vrgi-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--vrgi-gap-sm);
	text-align: center;
	font-size: var(--vrgi-fs-small);
	line-height: var(--vrgi-lh-body);
	color: var(--vrgi-text-muted);
	background-image: repeating-linear-gradient(135deg, var(--vrgi-placeholder-a) 0, var(--vrgi-placeholder-a) 12px, var(--vrgi-placeholder-b) 12px, var(--vrgi-placeholder-b) 24px);
}

.vrgi-placeholder--card {
	aspect-ratio: 4 / 3;
}

.vrgi-placeholder--hero {
	min-height: clamp(18.75rem, 12rem + 25vw, 30rem);
	border-radius: var(--vrgi-cta-radius);
}

/* Estado vacío de un catálogo dinámico (p. ej. Aplicaciones sin ninguna publicada). */
.vrgi-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 12.5rem;
	padding: var(--vrgi-gap-lg) var(--vrgi-gap);
	overflow-wrap: break-word;
	text-align: center;
	color: var(--vrgi-text-muted);
	border: var(--vrgi-border-width) dashed var(--vrgi-text-muted);
	border-radius: var(--vrgi-radius-lg);
}

.vrgi-empty > * {
	margin: 0;
}


/* 13. Adaptación a bloques del núcleo (v0.3.0) ---------------------------- */
/*
 * Las secciones de Inicio se construyen con bloques editables de WordPress
 * (Grupo, Encabezado, Párrafo, Botones, Imagen). Esta sección traduce los
 * componentes anteriores a ese marcado:
 *  - Botones: el bloque Botón pone la clase de estilo en su contenedor
 *    (.wp-block-button.is-style-vrgi-*), no en el enlace; se estiliza el enlace.
 *  - Fotos: .vrgi-photo es un recuadro rayado con un bloque Imagen dentro. Sin
 *    imagen se ve el marcador; al subir una foto, la cubre.
 *  - Tarjetas enlazadas: el enlace va en el título y se extiende a toda la tarjeta.
 */

/* Botones del núcleo ------------------------------------------------------ */
.wp-block-buttons.vrgi-btn-group,
.wp-block-buttons.vrgi-section-head__action,
.wp-block-buttons.vrgi-cta__action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vrgi-gap-sm);
	margin: 0;
}

.wp-block-button:is(.is-style-vrgi-primary, .is-style-vrgi-outline, .is-style-vrgi-light) {
	margin: 0;
}

.wp-block-button:is(.is-style-vrgi-primary, .is-style-vrgi-outline, .is-style-vrgi-light) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	box-sizing: border-box;
	min-height: var(--vrgi-control-height);
	padding: 0 1.5rem;
	border: var(--vrgi-border-width) solid transparent;
	border-radius: var(--vrgi-radius-pill);
	box-shadow: none;
	font-family: var(--vrgi-font-body);
	font-size: var(--vrgi-fs-body);
	font-weight: var(--vrgi-fw-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.wp-block-button.is-style-vrgi-primary > .wp-block-button__link {
	background-color: var(--vrgi-accent);
	border-color: var(--vrgi-accent);
	color: var(--vrgi-on-accent);
}

.wp-block-button.is-style-vrgi-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--vrgi-text);
	color: var(--vrgi-text);
}

.wp-block-button.is-style-vrgi-light > .wp-block-button__link {
	background-color: var(--vrgi-color-white);
	border-color: var(--vrgi-color-white);
	color: var(--vrgi-text);
}

.wp-block-button:is(.is-style-vrgi-primary, .is-style-vrgi-outline, .is-style-vrgi-light) > .wp-block-button__link:is(:hover, :focus, :active) {
	background-color: var(--vrgi-surface-band);
	border-color: var(--vrgi-surface-band);
	color: var(--vrgi-text-on-dark);
	box-shadow: none;
	text-decoration: none;
}

.wp-block-button:is(.is-style-vrgi-primary, .is-style-vrgi-outline, .is-style-vrgi-light) > .wp-block-button__link:focus-visible {
	outline: 3px solid var(--vrgi-color-blue);
	outline-offset: 2px;
}

.vrgi-cta .wp-block-button > .wp-block-button__link:focus-visible,
.vrgi-section--dark .wp-block-button > .wp-block-button__link:focus-visible {
	outline-color: var(--vrgi-color-white);
}

@media (max-width: 36rem) {
	.wp-block-button:is(.is-style-vrgi-primary, .is-style-vrgi-outline, .is-style-vrgi-light) > .wp-block-button__link {
		min-height: var(--vrgi-control-height-touch);
	}

	.vrgi-btn-group > .wp-block-button,
	.vrgi-section-head__action,
	.vrgi-section-head__action > .wp-block-button,
	.vrgi-cta__action,
	.vrgi-cta__action > .wp-block-button {
		width: 100%;
	}

	.wp-block-button:is(.is-style-vrgi-primary, .is-style-vrgi-outline, .is-style-vrgi-light) > .wp-block-button__link {
		width: 100%;
	}
}

/* Enlace de texto dentro de un párrafo (.vrgi-link sobre <p>) ------------- */
p.vrgi-link a {
	color: inherit;
	text-decoration: inherit;
}

p.vrgi-link a:is(:hover, :focus, :active) {
	color: inherit;
	text-decoration: underline;
}

/* Fotos (bloque Imagen dentro de un recuadro) ----------------------------- */
.vrgi-photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
	background-image: repeating-linear-gradient(135deg, var(--vrgi-placeholder-a) 0, var(--vrgi-placeholder-a) 12px, var(--vrgi-placeholder-b) 12px, var(--vrgi-placeholder-b) 24px);
}

.vrgi-photo::before {
	content: "[Foto]";
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--vrgi-gap-sm);
	text-align: center;
	font-size: var(--vrgi-fs-small);
	color: var(--vrgi-text-muted);
}

.vrgi-photo > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.vrgi-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vrgi-photo--card {
	aspect-ratio: 4 / 3;
}

.vrgi-photo--hero {
	min-height: clamp(18.75rem, 12rem + 25vw, 30rem);
	border-radius: var(--vrgi-cta-radius);
}

.vrgi-photo--hero::before {
	content: "[Foto principal de productos reales]";
}

/* Tarjeta enlazada: el enlace del título cubre toda la tarjeta ------------ */
.vrgi-card--link {
	position: relative;
}

.vrgi-card--link .vrgi-card__title a,
.vrgi-card--link .vrgi-card__title a:is(:hover, :focus, :active) {
	color: inherit;
	text-decoration: none;
}

.vrgi-card--link .vrgi-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vrgi-card--link:hover .vrgi-card__title a {
	text-decoration: underline;
}

.vrgi-card--link .vrgi-card__title a:focus-visible {
	outline: none;
}

.vrgi-card--link .vrgi-card__title a:focus-visible::after {
	outline: 3px solid var(--vrgi-color-blue);
	outline-offset: -3px;
	border-radius: var(--vrgi-radius-lg);
}

/* Grupos usados como contenedores: sin márgenes propios del tema padre. */
.wp-block-group:is(.vrgi-section, .vrgi-container, .vrgi-grid, .vrgi-stack, .vrgi-card, .vrgi-card__body, .vrgi-cta, .vrgi-cta__content, .vrgi-hero__media, .vrgi-empty) {
	margin-block: 0;
}


/* 14. Refuerzos de compatibilidad (v0.3.1) --------------------------------- */
/*
 * Solo AÑADE reglas; no cambia ninguna de las secciones 1-13. Dos objetivos:
 *  A) Capas intermedias: si WordPress o el editor meten un contenedor entre un
 *     Grupo y sus hijos (.wp-block-group__inner-container en WordPress antiguo o
 *     .block-editor-block-list__layout en el editor), la rejilla o la pila veían
 *     un solo hijo y apilaban todo. Con display: contents esa capa deja de
 *     contar y los hijos vuelven a ser hijos directos. Sin capa, no hace nada.
 *  B) Enlaces: subir el peso de las reglas de enlace para ganar a las reglas
 *     de enlaces del contenido del tema padre (azul y subrayado).
 */

/* A. Capas intermedias --------------------------------------------------- */
.vrgi-grid > .wp-block-group__inner-container,
.vrgi-grid > .block-editor-block-list__layout,
.vrgi-stack > .wp-block-group__inner-container,
.vrgi-stack > .block-editor-block-list__layout,
.vrgi-card > .wp-block-group__inner-container,
.vrgi-card > .block-editor-block-list__layout,
.vrgi-card__body > .wp-block-group__inner-container,
.vrgi-card__body > .block-editor-block-list__layout,
.vrgi-section-head > .wp-block-group__inner-container,
.vrgi-section-head > .block-editor-block-list__layout,
.vrgi-cta > .wp-block-group__inner-container,
.vrgi-cta > .block-editor-block-list__layout,
.vrgi-hero__media > .wp-block-group__inner-container,
.vrgi-hero__media > .block-editor-block-list__layout {
	display: contents;
}

.vrgi-section .vrgi-grid {
	display: grid;
}

/* B. Enlaces de texto (.vrgi-link sobre <p>) y títulos enlazados ---------- */
.vrgi-section .vrgi-link a,
.vrgi-section .vrgi-link a:is(:link, :visited) {
	color: inherit;
	text-decoration: none;
}

.vrgi-section .vrgi-link a:is(:hover, :focus, :active) {
	color: inherit;
	text-decoration: underline;
}

.vrgi-section .vrgi-card--link .vrgi-card__title a,
.vrgi-section .vrgi-card--link .vrgi-card__title a:is(:link, :visited, :hover, :focus, :active) {
	color: inherit;
	text-decoration: none;
}

.vrgi-section .vrgi-card--link:hover .vrgi-card__title a {
	text-decoration: underline;
}


/* 15. Páginas interiores (v0.4.0) ------------------------------------------ */
/* Solo se AÑADEN reglas; las secciones 1-14 no cambian. */

/* Pila de texto con ancho de lectura (cabecera de página). */
.vrgi-stack--narrow {
	max-width: 46rem;
}

/* Recuadro de icono (48 px): sin imagen muestra el recuadro rayado vacío. */
.vrgi-photo--icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
}

.vrgi-photo--icon::before {
	content: "";
}

/* Etapa de un método (Paso 1, 2...). Se usa dentro de .vrgi-grid--4. */
.vrgi-step {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	box-sizing: border-box;
	padding: var(--vrgi-card-padding);
	overflow-wrap: break-word;
	border-radius: var(--vrgi-radius-lg);
	background-color: var(--vrgi-color-white);
	color: var(--vrgi-text);
}

.vrgi-step > * {
	margin: 0;
}

.vrgi-step__label {
	font-size: 0.8125rem;
	font-weight: var(--vrgi-fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vrgi-accent);
}