/* ==========================================================================
   PLANTILLAS INTERNAS — Design System v3
   Servicios · Cultura · Contacto · Casos de Exito

   Patron del kit: hero sobre la base Deep Abyss (con el resplandor flotante
   detras) y el contenido en paneles claros que "flotan" sobre esa capa.
   El chrome de tarjetas lo aporta .card de global.css; aqui solo va lo
   especifico de cada plantilla.
   ========================================================================== */

/* ==========================================================================
   HERO COMPARTIDO (sobre la base oscura)
   ========================================================================== */
.tpl-hero {
	padding: calc(var(--nav-height) + 4.5rem) 0 3rem;
	text-align: center;
	position: relative;
}

@media (min-width: 768px) {
	.tpl-hero { padding: calc(var(--nav-height) + 7rem) 0 4rem; }
}

.tpl-hero--tall { padding-bottom: 4rem; }
@media (min-width: 768px) { .tpl-hero--tall { padding-bottom: 5rem; } }

.tpl-hero__inner {
	max-width: 60rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.tpl-hero__title {
	font-size: clamp(2.5rem, 6.5vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
	color: var(--chalk);
	max-width: 17ch;
	text-wrap: balance;
	margin: 0;
}

.tpl-hero__subtitle {
	font-size: clamp(1rem, 2vw, 1.1875rem);
	line-height: 1.65;
	color: rgba(255, 249, 250, 0.72);
	max-width: 65ch;
	margin: 0 auto;
	text-wrap: pretty;
}

/* ==========================================================================
   PANEL DE CONTENIDO (Gutenberg)
   Es la superficie de lectura: panel claro flotante sobre la base Abyss.
   ========================================================================== */
.tpl-panel {
	margin-bottom: 2rem;
}

.tpl-panel:last-child { margin-bottom: 0; }

/* Encabezado de seccion dentro de un panel claro */
.tpl-section-header {
	text-align: center;
	margin-bottom: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.tpl-section-header__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-strong);
	margin: 0;
}

.tpl-section-header__desc {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-body);
	max-width: 65ch;
	margin: 0 auto;
	text-wrap: pretty;
}

/* ==========================================================================
   SERVICIOS — Hub de categorias
   ========================================================================== */
.tpl-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.75rem;
}

.tpl-hub-card { gap: 1.25rem; }

.tpl-hub-card__badge {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-accent);
}

.tpl-hub-card__title {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	margin: 0;
}

.tpl-hub-card__desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-muted);
	max-width: 44ch;
	flex: 1;
	text-wrap: pretty;
}

.tpl-hub-card__count {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-faint);
}

.tpl-hub-card__cta { margin-top: auto; }

/* ==========================================================================
   BANNER DE CIERRE (panel oscuro)
   ========================================================================== */
.tpl-cta-banner {
	text-align: center;
	position: relative;
	overflow: hidden;
	padding: 3.5rem 1.5rem;
	border-radius: var(--radius-panel);
	background: var(--abyss);
	background-image: var(--grad-dark-card);
}

@media (min-width: 768px) { .tpl-cta-banner { padding: 5rem 3rem; } }

.tpl-cta-banner__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.tpl-cta-banner__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--chalk);
	max-width: 24ch;
	text-wrap: balance;
	margin: 0;
}

.tpl-cta-banner__text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255, 249, 250, 0.72);
	max-width: 65ch;
	margin: 0;
	text-wrap: pretty;
}

/* ==========================================================================
   CULTURA — Valores y Equipo
   ========================================================================== */
.tpl-valores__grid,
.tpl-equipo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.75rem;
}

.tpl-valor-card {
	gap: 0.875rem;
	align-items: flex-start;
}

.tpl-valor-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-icon);
	background-image: var(--grad-accent);
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	font-weight: 700;
	font-size: 1.0625rem;
}

.tpl-valor-card__title {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	margin: 0;
}

.tpl-valor-card__desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-body);
	margin: 0;
	text-wrap: pretty;
}

.tpl-valor-card__limit {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--text-accent);
	margin: 0;
}

/* -- Equipo -- */
.tpl-equipo-card {
	text-align: center;
	align-items: center;
	gap: 0.5rem;
}

.tpl-equipo-card__avatar {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background-image: var(--grad-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	margin-bottom: 0.75rem;
}

.tpl-equipo-card__name {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--text-strong);
	margin: 0;
}

.tpl-equipo-card__role {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-accent);
}

.tpl-equipo-card__bio {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0;
	text-wrap: pretty;
}

/* ==========================================================================
   CASOS DE EXITO
   ========================================================================== */
.tpl-casos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.75rem;
}

.tpl-caso-card {
	gap: 0.75rem;
	align-items: flex-start;
}

.tpl-caso-card__categoria {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-accent);
}

.tpl-caso-card__resultado {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.25rem 0;
}

.tpl-caso-card__resultado-num {
	font-size: 2.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	background-image: var(--grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.tpl-caso-card__resultado-metrica {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-muted);
}

.tpl-caso-card__cliente {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--text-strong);
	margin: 0;
}

.tpl-caso-card__resumen {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-body);
	margin: 0;
	text-wrap: pretty;
}

/* ==========================================================================
   ESTADO VACIO (aviso solo para editores)
   Se muestra cuando la pagina aun no tiene contenido en Gutenberg.
   ========================================================================== */
.tpl-empty-hint {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--surface-border-strong);
	border-radius: var(--radius-card);
	background: var(--surface);
	color: var(--text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.tpl-empty-hint i {
	color: var(--text-accent);
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

/* ==========================================================================
   CASOS — Lienzo de portafolio (rejilla glass lista para llenarse)
   Al insertar un bloque "Columnas" desde Gutenberg, cada columna se convierte
   automaticamente en una tarjeta glass oscura. Asi el usuario inyecta su
   portafolio sin tocar codigo y el grid ya viene armado y responsivo.
   ========================================================================== */
.tpl-casos-canvas {
	color: var(--text-body);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.tpl-casos-canvas > *:first-child { margin-top: 0; }

.tpl-casos-canvas h2,
.tpl-casos-canvas h3 {
	color: var(--chalk);
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.tpl-casos-canvas h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; margin: 2.5rem 0 1rem; }
.tpl-casos-canvas h3 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.tpl-casos-canvas p { margin-bottom: 1.5rem; max-width: 65ch; text-wrap: pretty; }
.tpl-casos-canvas strong { color: var(--chalk); font-weight: 600; }
.tpl-casos-canvas a { color: var(--lava-light); }

/* -- El bloque "Columnas" se comporta como rejilla de portafolio -- */
.tpl-casos-canvas .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.75rem;
	margin: 0 0 1.75rem;
	align-items: stretch;
}

/* -- Cada columna es una tarjeta glass -- */
.tpl-casos-canvas .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	background: rgba(0, 22, 33, 0.55);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-card);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: var(--shadow-3);
	flex-basis: auto !important;
	transition: transform var(--t-slow) var(--ease),
	            border-color var(--t-slow) var(--ease),
	            box-shadow var(--t-slow) var(--ease);
}

@media (min-width: 768px) { .tpl-casos-canvas .wp-block-column { padding: 2.5rem; } }

.tpl-casos-canvas .wp-block-column:hover {
	/* v6: el hover no desplaza */
	border-color: rgba(255, 249, 250, 0.24);
	box-shadow: var(--shadow-3);
}

.tpl-casos-canvas .wp-block-column > *:first-child { margin-top: 0; }
.tpl-casos-canvas .wp-block-column > *:last-child { margin-bottom: 0; }
.tpl-casos-canvas .wp-block-column h2,
.tpl-casos-canvas .wp-block-column h3,
.tpl-casos-canvas .wp-block-column h4 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.tpl-casos-canvas .wp-block-column p { font-size: 0.9375rem; line-height: 1.65; margin: 0; color: var(--text-body); }
.tpl-casos-canvas .wp-block-column img { border-radius: var(--radius-input); }

/* ==========================================================================
   CONTACTO — dos columnas sobre la base Deep Abyss
   Sin panel claro intermedio: la ficha y el formulario glass flotan
   directamente sobre el fondo oscuro y el resplandor.
   ========================================================================== */
.contacto-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 900px) {
	.contacto-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; }
}

/* -- Ficha de contacto (lenguaje visual del footer) -- */
.contacto-ficha {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contacto-ficha__title {
	font-size: clamp(1.75rem, 3.5vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--chalk);
	margin: 0;
}

.contacto-ficha__text {
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 249, 250, 0.72);
	max-width: 44ch;
	margin: 0 0 0.5rem;
	text-wrap: pretty;
}

.contacto-ficha__items {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.contacto-ficha__item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.contacto-ficha__item > i {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-icon);
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: var(--lava-light);
}

.contacto-ficha__item > span {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	min-width: 0;
}

.contacto-ficha__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 249, 250, 0.45);
}

.contacto-ficha__value {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--chalk);
	word-break: break-word;
	transition: color var(--t-fast) ease;
}

a.contacto-ficha__value:hover { color: var(--lava-light); }

.contacto-ficha__social {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 249, 250, 0.10);
}

.contacto-ficha__social-links { display: flex; gap: 0.5rem; }

/* -- Columna del formulario -- */
.contacto-form { min-width: 0; }

/* ==========================================================================
   FASE 18 · CONTACTO CRO — dos columnas, pasos y carrusel de resenas
   Sustituye al bloque `.contacto-ficha` / `.contacto-grid` anterior.
   ========================================================================== */

.contacto-cro {
	padding: calc(var(--nav-height) + 3.5rem) 0 5rem;
}

@media (min-width: 768px) {
	.contacto-cro { padding: calc(var(--nav-height) + 5rem) 0 6rem; }
}

.contacto-cro__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.contacto-cro__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 4.5rem;
	}
}

/* -- Columna izquierda -- */
.contacto-proceso {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	min-width: 0;
}

@media (min-width: 1024px) {
	.contacto-proceso {
		position: sticky;
		top: calc(var(--nav-height) + 2rem);
	}
}

.contacto-proceso__title {
	font-size: clamp(2.25rem, 5.5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--text-strong);
	margin: 0 0 1rem;
}

.contacto-proceso__sub {
	font-size: clamp(1rem, 2.2vw, 1.1875rem);
	line-height: 1.6;
	color: var(--text-body);
	margin: 0;
	max-width: 46ch;
}

/* -- Los tres pasos -- */
.contacto-pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	counter-reset: none;
}

.contacto-paso {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

/* Circulo Radiant Lava con el numero */
.contacto-paso__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-full);
	background: var(--lava);
	background-image: linear-gradient(140deg, var(--lava) 0%, var(--magenta) 130%);
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: var(--shadow-accent);
}

.contacto-paso__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-top: 0.25rem;
}

.contacto-paso__titulo {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text-strong);
}

.contacto-paso__texto {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--text-body);
}

/* -- Carrusel de resenas -- */
.contacto-resenas {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contacto-resenas__pista {
	position: relative;
	display: grid;
}

/* Todas las resenas ocupan la misma celda del grid: la altura la marca la mas
   alta y no hay salto al cambiar de una a otra. */
.contacto-resena {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem;
	border-radius: var(--radius-card);
	background: rgba(0, 22, 33, 0.55);
	border: 1px solid rgba(255, 249, 250, 0.12);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: var(--shadow-3);

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--t-slow) var(--ease),
	            transform var(--t-slow) var(--ease),
	            visibility var(--t-slow) var(--ease);
}

.contacto-resena.is-activo {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.contacto-resena__estrellas {
	display: flex;
	gap: 0.1875rem;
	color: var(--lava);
	font-size: 1rem;
}

.contacto-resena__texto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--text-body);
	quotes: none;
}

.contacto-resena__autor {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding-top: 0.25rem;
	border-top: 1px solid rgba(255, 249, 250, 0.10);
}

.contacto-resena__nombre {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--text-strong);
	padding-top: 0.75rem;
}

.contacto-resena__cargo {
	font-size: 0.8125rem;
	color: var(--text-muted);
}

/* Reseñas reales (4-oct-2026): estrellas que no se dieron y el sello de
   cliente verificado (solo escriben quienes tienen un pedido pagado). */
.contacto-resena__estrellas .is-vacia {
	color: rgba(255, 249, 250, 0.2);
}

.contacto-resena__verificada {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.contacto-resena__verificada i {
	font-size: 0.9375rem;
	color: var(--lava-400);
}

/* «Tu reseña»: solo la ve el cliente con sesión (inc/resenas-clientes.php).
   Su reseña con «Retirar reseña», o «Crear reseña» si no tiene. */
.contacto-tuya {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.5rem;
	border-radius: var(--radius-card);
	background: rgba(255, 249, 250, 0.04);
	border: 1px dashed rgba(255, 249, 250, 0.18);
	scroll-margin-top: calc(var(--nav-height, 4.5rem) + 1.5rem);
}

.contacto-tuya__titulo {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text-strong);
}

.contacto-tuya__texto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--text-body);
}

.contacto-tuya__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-self: stretch;
}

.contacto-tuya__retirar { margin: 0; }

.contacto-tuya__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.contacto-tuya__boton:hover,
.contacto-tuya__boton:focus-visible { color: var(--text-strong); }

.contacto-tuya__crear { gap: 0.5rem; }

.contacto-tuya__aviso {
	align-self: stretch;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-input, 12px);
	border: 1px solid;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--text-strong);
}

.contacto-tuya__aviso--ok { background: rgba(37, 211, 102, 0.1); border-color: rgba(37, 211, 102, 0.35); }
.contacto-tuya__aviso--error { background: rgba(253, 24, 67, 0.12); border-color: rgba(253, 24, 67, 0.4); }

/* Puntos de navegacion */
.contacto-resenas__puntos {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.contacto-resenas__punto {
	width: 2rem;
	height: 0.25rem;
	padding: 0;
	border: none;
	border-radius: var(--radius-full);
	background: rgba(255, 249, 250, 0.18);
	cursor: pointer;
	transition: background-color var(--t-base) var(--ease), width var(--t-base) var(--ease);
}

.contacto-resenas__punto:hover { background: rgba(255, 249, 250, 0.32); }

.contacto-resenas__punto.is-activo {
	width: 3rem;
	background: var(--lava);
}

.contacto-resenas__punto:focus-visible {
	outline: 2px solid var(--lava);
	outline-offset: 3px;
}

/* -- Canales directos -- */
.contacto-directo {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--surface-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem 1.75rem;
	font-size: 0.875rem;
}

.contacto-directo li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-muted);
}

.contacto-directo i { color: var(--text-accent); font-size: 1.125rem; }
.contacto-directo a { color: var(--text-body); }
.contacto-directo a:hover { color: var(--text-accent); }

/* -- Columna derecha: panel de cristal con el formulario -- */
.contacto-panel {
	min-width: 0;
	padding: 1.75rem;
	border-radius: var(--radius-panel);
	background: rgba(0, 22, 33, 0.55);
	border: 1px solid rgba(255, 249, 250, 0.12);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	box-shadow: 0 32px 80px -32px rgba(0, 11, 17, 0.85);
}

@media (min-width: 768px) {
	.contacto-panel { padding: 2.5rem; }
}

/* El componente ya trae su propio fondo en el Home; aqui vive dentro del panel
   y debe ser transparente para no duplicar cristales. */
.contacto-panel .super-form {
	background: none;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
	.contacto-resena { transition: none; }
	.contacto-resenas__punto { transition: none; }
}