/*
Theme Name: EDISAS
Theme URI: https://edisas.mx
Author: EDISAS
Description: Tema a la medida de Equipos y Desarrollos Informáticos.
Version: 1.2.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: edisas
*/

/* ==========================================================================
   EDISAS — estilos globales

   Motivo visual único ("el trazo"): una línea de 1px con el gradiente de marca
   (navy → azul eléctrico → cian) que ilumina los cantos vivos de la interfaz:
   el filo inferior del header, el prefijo de cada kicker, el canto superior de
   las cards al hover y el arranque del footer. Es el único adorno del sistema;
   todo lo demás se mantiene plano y silencioso.

   Los colores, tipografías, tamaños y espaciados salen de theme.json
   (var(--wp--preset--*)). Aquí solo viven valores no tokenizados.
   ========================================================================== */

:root {
	color-scheme: dark;

	--edisas-radius: 14px;
	--edisas-radius-sm: 8px;
	--edisas-header-h: 74px;

	/* El trazo: gradiente de marca desvanecido en los extremos. */
	--edisas-trace: linear-gradient(
		90deg,
		transparent 0%,
		var(--wp--preset--color--navy) 14%,
		var(--wp--preset--color--accent) 52%,
		var(--wp--preset--color--cyan) 86%,
		transparent 100%
	);

	/* Gradiente para cifra recortada (`background-clip: text`). No es el preset
	   `brand` tal cual: su primera parada es `navy`, que sobre el fondo oscuro
	   deja los números casi ilegibles. Recorre el mismo camino desde la parada
	   siguiente, azul eléctrico → cian, y conserva la lectura de marca.

	   Va casi vertical (165°) a propósito: en diagonal, un número de un dígito
	   recorre muy poco gradiente y sale plano, mientras que uno de tres lo
	   recorre entero. Así las cuatro cifras se degradan igual, midan lo que
	   midan. */
	--edisas-gradient-num: linear-gradient(
		165deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--cyan) 100%
	);

	/* Azul de botones: variante oscurecida de `accent` para que el texto
	   blanco alcance AA (5.09:1). `accent` puro sobre blanco da 3.71:1.
	   Fuente de verdad única: el token `accent-strong` de theme.json, que es
	   también el que usa `styles.elements.button`. */
	--edisas-btn: var(--wp--preset--color--accent-strong);
	--edisas-btn-hover: #4468ee;

	--edisas-whatsapp: #25d366;

	/* Colores de estado del formulario (sección 21). No son presets de
	   theme.json a propósito: el editor no debe ofrecerlos como color de texto
	   ni de fondo, solo los usa el sistema para decir «salió», «falló» o
	   «revisa esto». Elegidos para leerse sobre `surface` (#0d0d2b): 10.86:1,
	   9.97:1 y 11.34:1 respectivamente, muy por encima de AA. */
	--edisas-exito: #4ade80;
	--edisas-error: #fca5a5;
	--edisas-aviso: #fbbf24;

	--edisas-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.9);
	--edisas-glow: 0 12px 32px -14px
		color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	--edisas-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	--edisas-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--edisas-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--edisas-header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* El footer se apoya siempre en la base de la ventana, aunque la página sea corta. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Respiro por defecto para plantillas sin secciones propias (blog, 404, páginas
   sueltas). Las plantillas que arrancan con un hero a sangre añaden `edisas-flush`. */
.wp-site-blocks > main {
	padding-block: var(--wp--preset--spacing--50);
}

.wp-site-blocks > main.edisas-flush {
	padding-block: 0;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3 {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

/* Foco visible en cian, siempre por encima del contorno del elemento. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. Utilidades globales (las reutilizan todos los patterns)
   -------------------------------------------------------------------------- */

.edisas-section {
	position: relative;
	padding-block: var(--wp--preset--spacing--60);
}

.edisas-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block: 0 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
}

.edisas-kicker::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.75rem;
	block-size: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--cyan));
}

.edisas-card {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius);
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	transition:
		border-color 0.3s var(--edisas-ease),
		transform 0.3s var(--edisas-ease),
		box-shadow 0.3s var(--edisas-ease);
}

.edisas-card > :first-child {
	margin-block-start: 0;
}

.edisas-card > :last-child {
	margin-block-end: 0;
}

/* El trazo se enciende en el canto superior al interactuar con la card. */
.edisas-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: var(--edisas-trace);
	opacity: 0;
	transition: opacity 0.3s var(--edisas-ease);
	pointer-events: none;
}

.edisas-card:hover,
.edisas-card:focus-within {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	transform: translateY(-3px);
	box-shadow: var(--edisas-shadow), var(--edisas-glow);
}

.edisas-card:hover::before,
.edisas-card:focus-within::before {
	opacity: 1;
}

/* Botones sólidos (bloque button del núcleo, anchors sueltos y el `submit` del
   formulario de contacto, que es un <input> y no puede llevar las otras dos
   clases). Un único botón para todo el sitio: si el azul cambia, cambia aquí. */
.wp-block-button .wp-block-button__link,
a.edisas-btn,
input.edisas-form__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--edisas-btn);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--edisas-radius-sm);
	padding: 0.7rem 1.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.25s var(--edisas-ease),
		box-shadow 0.25s var(--edisas-ease),
		transform 0.25s var(--edisas-ease);
}

.wp-block-button .wp-block-button__link:hover,
a.edisas-btn:hover,
input.edisas-form__btn:hover {
	background-color: var(--edisas-btn-hover);
	box-shadow: var(--edisas-glow);
	transform: translateY(-1px);
}

.wp-block-button .wp-block-button__link:active,
a.edisas-btn:active,
input.edisas-form__btn:active {
	transform: translateY(0);
}

/* Botón fantasma. */
.edisas-btn-ghost .wp-block-button__link,
a.edisas-btn-ghost {
	background-color: transparent;
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: none;
}

.edisas-btn-ghost .wp-block-button__link:hover,
a.edisas-btn-ghost:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	box-shadow: none;
}

/* Reveal al hacer scroll. El estado oculto solo se aplica si hay JS
   (functions.php marca <html class="js"> antes de pintar), de modo que sin
   JavaScript todo el contenido queda visible. Ver Task 14. */
html.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.55s var(--edisas-ease),
		transform 0.55s var(--edisas-ease);
	will-change: opacity, transform;
}

html.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	border-block-end: 1px solid var(--wp--preset--color--border);
}

/* El fondo translúcido va en un pseudo-elemento: `backdrop-filter` en el propio
   header lo convertiría en bloque contenedor y recortaría el overlay del menú
   móvil (position: fixed) a la altura de la barra. */
header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgb(6 6 23 / 0.8);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
}

/* El trazo marca el filo del header. */
header.wp-block-template-part::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	block-size: 1px;
	background: var(--edisas-trace);
	opacity: 0.65;
	pointer-events: none;
}

body.admin-bar header.wp-block-template-part {
	inset-block-start: 32px;
}

.edisas-header__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	min-height: var(--edisas-header-h);
}

.edisas-header__inner > .edisas-logo {
	flex: 0 0 auto;
	margin-inline-end: auto;
}

.edisas-logo,
.edisas-logo a {
	display: block;
	margin: 0;
	line-height: 0;
}

.edisas-header__inner .edisas-logo img {
	inline-size: 146px;
	block-size: auto;
}

.edisas-header__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Separador de pelo entre navegación y acciones (solo escritorio). */
.edisas-header__actions::before {
	content: "";
	inline-size: 1px;
	block-size: 22px;
	background-color: var(--wp--preset--color--border);
	flex: 0 0 auto;
}

.edisas-header__tel p {
	margin: 0;
}

.edisas-header__tel a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--text);
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s var(--edisas-ease);
}

.edisas-header__tel a::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1rem;
	block-size: 1rem;
	background-color: var(--wp--preset--color--cyan);
	mask: var(--edisas-icon-phone) center / contain no-repeat;
	-webkit-mask: var(--edisas-icon-phone) center / contain no-repeat;
	transition: background-color 0.25s var(--edisas-ease);
}

.edisas-header__tel a:hover {
	color: var(--wp--preset--color--cyan);
}

.edisas-header__cta {
	margin: 0;
}

.edisas-header__cta .wp-block-button__link {
	padding: 0.6rem 1.15rem;
}

/* --------------------------------------------------------------------------
   4. Navegación
   -------------------------------------------------------------------------- */

.edisas-nav a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	padding-block: 0.4rem;
	text-decoration: none;
	transition: color 0.25s var(--edisas-ease);
}

/* Subrayado con el gradiente de marca que crece desde la izquierda. */
.edisas-nav a.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--cyan));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--edisas-ease);
}

.edisas-nav a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.edisas-nav .current-menu-item > a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

.edisas-nav a.wp-block-navigation-item__content:hover::after,
.edisas-nav .current-menu-item > a.wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.edisas-nav .wp-block-navigation__responsive-container-open,
.edisas-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--text);
	padding: 0.25rem;
}

.edisas-nav .wp-block-navigation__responsive-container-open:focus-visible,
.edisas-nav .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 3px;
}

/* El hueco entre enlaces no puede ser fijo. Con seis entradas —más el logotipo,
   el teléfono y el botón— la barra a 1024px se llena hasta el último píxel con
   los 24px por omisión: cabe, pero no respira. Arranca en 1rem justo donde la
   navegación pasa a horizontal y crece con la ventana hasta el 1.5rem que usa
   el resto del sitio.

   Vive aquí y no en el `blockGap` del bloque a propósito: el núcleo no emite
   ese gap para `wp:navigation` —se queda en el 24px global de `is-layout-flex`—,
   así que la hoja de estilos es el único sitio donde la medida es real. Fuera
   del rango horizontal no se toca nada: el overlay lleva su propio `gap: 0`. */
@media (min-width: 1024px) {
	.edisas-nav .wp-block-navigation__container {
		gap: clamp(1rem, 0.1rem + 1.4vw, 1.5rem);
	}
}

/* La navegación horizontal solo cabe a partir de 1024px: por debajo forzamos
   el overlay nativo del bloque (el núcleo lo hace a 600px). */
@media (max-width: 1023px) {
	.edisas-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.edisas-nav .wp-block-navigation__responsive-container:not(.is-menu-open):not(.always-shown) {
		display: none;
	}
}

/* Overlay móvil sobre fondo oscuro. */
/* El núcleo propaga el gap por toda la cadena del overlay con `gap: inherit`,
   así que lo anulamos en el contenedor y todo lo de dentro hereda 0. */
.edisas-nav .wp-block-navigation__responsive-container.is-menu-open {
	gap: 0;
	background-color: var(--wp--preset--color--base);
	padding: clamp(1.5rem, 6vw, 3rem);
}

.edisas-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	inline-size: 100%;
}

.edisas-nav .is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
	gap: 0;
	inline-size: 100%;
}

.edisas-nav .is-menu-open .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.edisas-nav .is-menu-open .wp-block-navigation-item:last-child {
	border-block-end: 0;
}

.edisas-nav .is-menu-open a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	inline-size: 100%;
	padding-block: 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 7vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text);
}

.edisas-nav .is-menu-open a.wp-block-navigation-item__content::after {
	display: none;
}

/* El enlace ocupa toda la fila: el contorno va por fuera para no cruzar el texto. */
.edisas-nav .is-menu-open a.wp-block-navigation-item__content:focus-visible {
	outline-offset: 2px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */

footer.wp-block-template-part {
	position: relative;
	background-color: var(--wp--preset--color--surface);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

/* El trazo marca el arranque del footer. */
footer.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -1px;
	block-size: 1px;
	background: var(--edisas-trace);
	opacity: 0.5;
	pointer-events: none;
}

.edisas-footer__inner {
	padding-block: var(--wp--preset--spacing--50);
}

.edisas-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 1.75fr 1fr;
	gap: clamp(2rem, 3vw, 3rem);
	align-items: start;
}

.edisas-footer__grid > * {
	margin-block: 0;
	min-inline-size: 0;
}

.edisas-footer__col > :first-child {
	margin-block-start: 0;
}

.edisas-footer__col > :last-child {
	margin-block-end: 0;
}

.edisas-footer__brand .edisas-logo img {
	inline-size: 158px;
	block-size: auto;
}

.edisas-footer__claim {
	margin-block: 1.25rem 0;
	max-inline-size: 26ch;
	font-size: 1rem;
	line-height: 1.6;
}

.edisas-footer__title {
	margin-block: 0 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
}

.edisas-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.edisas-footer__links li + li {
	margin-block-start: 0.6rem;
}

.edisas-footer__links a {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 0.2s var(--edisas-ease);
}

.edisas-footer__links a:hover {
	color: var(--wp--preset--color--text);
}

.edisas-footer__label {
	margin-block: 1.15rem 0.2rem;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	opacity: 0.75;
}

.edisas-footer__contact p,
.edisas-footer__brands p {
	margin-block: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.edisas-footer__contact p.edisas-footer__label,
.edisas-footer__brands p.edisas-footer__label {
	margin-block: 1.15rem 0.2rem;
}

.edisas-footer__contact .edisas-footer__title + .edisas-footer__label,
.edisas-footer__brands .edisas-footer__title + .edisas-footer__label {
	margin-block-start: 0;
}

.edisas-footer__contact a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	transition: color 0.2s var(--edisas-ease), border-color 0.2s var(--edisas-ease);
}

.edisas-footer__contact a:hover {
	color: var(--wp--preset--color--cyan);
	border-block-end-color: var(--wp--preset--color--cyan);
}

.edisas-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.edisas-footer__legal {
	margin: 0;
}

.edisas-footer__legal a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s var(--edisas-ease);
}

.edisas-footer__legal a:hover {
	color: var(--wp--preset--color--cyan);
}

/* Mientras el contenido no esté limitado a 1200px, el FAB de WhatsApp se
   sobrepone a la línea legal: le reservamos su espacio. */
@media (max-width: 1279px) {
	.edisas-footer__inner {
		padding-block-end: calc(var(--wp--preset--spacing--50) + 4.5rem);
	}
}

@media (max-width: 991px) {
	.edisas-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.edisas-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   6. Botón flotante de WhatsApp (markup inyectado por edisas-core)
   -------------------------------------------------------------------------- */

a.edisas-wa-fab {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	z-index: 999;
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background-color: var(--edisas-whatsapp);
	color: #fff;
	text-decoration: none;
	box-shadow:
		0 12px 28px -8px rgb(37 211 102 / 0.5),
		0 4px 12px rgb(0 0 0 / 0.45);
	transition:
		transform 0.25s var(--edisas-ease),
		box-shadow 0.25s var(--edisas-ease);
}

a.edisas-wa-fab:hover,
a.edisas-wa-fab:focus-visible {
	transform: translateY(-2px) scale(1.04);
	box-shadow:
		0 18px 34px -8px rgb(37 211 102 / 0.6),
		0 4px 12px rgb(0 0 0 / 0.45);
}

a.edisas-wa-fab svg {
	inline-size: 28px;
	block-size: 28px;
	display: block;
}

/* --------------------------------------------------------------------------
   7. Responsive del header
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.edisas-header__inner .edisas-nav {
		order: 3;
	}

	.edisas-header__actions {
		order: 2;
	}

	.edisas-header__actions::before {
		display: none;
	}
}

@media (max-width: 639px) {
	:root {
		--edisas-header-h: 64px;
	}

	.edisas-header__inner .edisas-logo img {
		inline-size: 122px;
	}

	.edisas-header__tel a {
		font-size: 0.8125rem;
	}

	/* Con poco ancho gana el click-to-call: la cotización sigue disponible en
	   el menú (Contacto) y en el botón flotante de WhatsApp. */
	.wp-block-buttons.edisas-header__cta {
		display: none;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		inset-block-start: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar header.wp-block-template-part {
		inset-block-start: 0;
	}
}

/* --------------------------------------------------------------------------
   8. Contenedor de sección a sangre

   Los patterns de contenido son grupos `alignfull` (para que el fondo y las
   decoraciones lleguen al borde de la ventana) con un `__inner` que recupera
   el ancho de 1200px y el padding raíz. Así la copia queda alineada con el
   logotipo del header y con el footer.
   -------------------------------------------------------------------------- */

.edisas-hero__inner,
.edisas-servicios__inner,
.edisas-ia__inner,
.edisas-gobierno__inner,
.edisas-marcas__inner,
.edisas-cifras__inner,
.edisas-noticias__inner,
.edisas-cta__inner,
.edisas-servicio-hero__inner,
.edisas-servicio__inner,
.edisas-producto__inner,
.edisas-producto-home__inner,
.edisas-contacto__inner,
.edisas-blog__inner,
.edisas-post__inner,
.edisas-relacionados__inner {
	inline-size: 100%;
	max-inline-size: calc(
		1200px + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)
	);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* --------------------------------------------------------------------------
   9. Home — Hero

   Composición asimétrica: la copia se ancla a la izquierda y el campo visual
   ocupa el ángulo superior derecho. El resplandor de `navy` y la retícula de
   puntos son un solo gesto —la retícula únicamente existe donde el resplandor
   la ilumina, porque comparte su misma máscara elíptica—. Encima, el trazo de
   marca baja desde el filo del header por el costado del titular y se apaga.
   -------------------------------------------------------------------------- */

.edisas-hero {
	/* Una única elipse gobierna el resplandor y el recorte de la retícula, así
	   que basta redefinirla para reencuadrar todo el campo visual. */
	--edisas-hero-field: ellipse 72% 92% at 84% 0%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-content: center;
	/* ~80vh, pero sin abrir un vacío desmedido en ventanas muy altas. */
	min-block-size: min(80vh, 48rem);
	padding-block: clamp(3.5rem, 9vh, 7rem);
}

/* En vertical el campo se aplana: si conserva su proporción se come la mitad
   superior de la pantalla y compite con el titular. */
@media (max-width: 1023px) {
	.edisas-hero {
		--edisas-hero-field: ellipse 96% 40% at 86% 0%;
	}
}

/* Una sola elipse gobierna las dos capas: la retícula solo se ve donde el
   resplandor la alcanza, y ambas se apagan a la vez. */
.edisas-hero::before,
.edisas-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Retícula de puntos, recortada por la elipse. */
.edisas-hero::before {
	z-index: -1;
	background-image: radial-gradient(
		circle at 1px 1px,
		color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent) 1px,
		transparent 0
	);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(
		var(--edisas-hero-field),
		#000 0%,
		rgb(0 0 0 / 0.45) 40%,
		transparent 74%
	);
	mask-image: radial-gradient(
		var(--edisas-hero-field),
		#000 0%,
		rgb(0 0 0 / 0.45) 40%,
		transparent 74%
	);
}

/* Resplandor de `navy`: el volumen que sostiene la retícula. */
.edisas-hero::after {
	z-index: -2;
	background-image: radial-gradient(
		var(--edisas-hero-field),
		color-mix(in srgb, var(--wp--preset--color--navy) 55%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--navy) 30%, transparent) 26%,
		color-mix(in srgb, var(--wp--preset--color--accent) 9%, transparent) 50%,
		transparent 76%
	);
}

.edisas-hero__copy {
	position: relative;
	max-inline-size: 46rem;
	padding-inline-start: clamp(1.15rem, 2.4vw, 1.9rem);
}

/* El trazo del header, girado 90°: entra encendido en cian y se disuelve. */
.edisas-hero__copy::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 6px;
	inline-size: 1px;
	block-size: calc(66% - 6px);
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--cyan) 0%,
		var(--wp--preset--color--accent) 26%,
		var(--wp--preset--color--navy) 66%,
		transparent 100%
	);
	pointer-events: none;
}

.edisas-hero__title {
	margin-block: 0;
	max-inline-size: 15ch;
	font-size: clamp(2.35rem, 1.35rem + 4.2vw, 4.35rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.edisas-hero__lead {
	margin-block: clamp(1.1rem, 0.7rem + 1vw, 1.6rem) 0;
	max-inline-size: 52ch;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
}

.wp-block-buttons.edisas-hero__cta {
	margin-block-start: clamp(1.9rem, 1.2rem + 1.6vw, 2.75rem);
	gap: 0.85rem 1rem;
}

.edisas-hero__cta .wp-block-button__link {
	padding: 0.95rem 1.85rem;
	font-size: 1rem;
}

/* En ventanas apaisadas y bajas el 80vh aprieta: manda el contenido. */
@media (max-height: 620px) {
	.edisas-hero {
		min-block-size: 0;
	}
}

@media (max-width: 519px) {
	.edisas-hero__cta .wp-block-button,
	.edisas-hero__cta .wp-block-button__link {
		inline-size: 100%;
	}
}

/* --------------------------------------------------------------------------
   10. Home — Servicios

   Rejilla 3 / 2 / 1. Cuando el total de tarjetas deja la última fila con una
   suelta (4, 7, 10…), esa tarjeta cierra la rejilla a lo ancho en vez de
   dejar un hueco: el hueco deja de leerse como un descuido.
   -------------------------------------------------------------------------- */

.edisas-servicios__head {
	margin-block-end: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}

/* El límite vive en el propio H2: en `ch` sobre el cuerpo del bloque daría una
   medida del tamaño del párrafo, no del titular. */
.edisas-servicios__title {
	margin-block: 0;
	max-inline-size: 22ch;
	font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.edisas-servicios__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.9rem, 0.5rem + 1vw, 1.4rem);
}

.edisas-servicios__card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
}

.edisas-servicios__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 46px;
	block-size: 46px;
	margin-block-end: 1.15rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	border-radius: 12px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	color: var(--wp--preset--color--cyan);
	transition:
		background-color 0.3s var(--edisas-ease),
		border-color 0.3s var(--edisas-ease);
}

.edisas-servicios__icon svg {
	display: block;
}

.edisas-card:hover .edisas-servicios__icon,
.edisas-card:focus-within .edisas-servicios__icon {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
}

.edisas-servicios__card-title {
	margin-block: 0 0.55rem;
	font-size: 1.1875rem;
	line-height: 1.25;
}

.edisas-servicios__card-text {
	margin-block: 0 1.35rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.edisas-servicios__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.45rem;
	margin-block-start: auto;
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.25s var(--edisas-ease);
}

/* Toda la tarjeta es zona de clic, pero el enlace sigue siendo el único
   elemento enfocable: el overlay no recibe tabulación ni duplica el destino. */
.edisas-servicios__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.edisas-servicios__arrow {
	transition: transform 0.25s var(--edisas-ease);
}

.edisas-card:hover .edisas-servicios__link,
.edisas-card:focus-within .edisas-servicios__link {
	color: var(--wp--preset--color--cyan);
}

.edisas-card:hover .edisas-servicios__arrow {
	transform: translateX(3px);
}

@media (min-width: 640px) and (max-width: 1023.98px) {
	.edisas-servicios__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Cuando la última tarjeta queda sola en su renglón, se ensancha a todo el
	   ancho en vez de dejar medio renglón vacío.

	   La condición no la puede calcular el PHP: depende de cuántas columnas
	   pinta la rejilla, y eso solo lo sabe el media query. «Última y sola» se
	   escribe `:last-child:nth-child(Nn + 1)` con N = número de columnas — aquí
	   2, y 3 en el breakpoint siguiente. Los dos rangos no se solapan justo
	   para no tener que revertir el ensanchamiento al pasar a tres columnas.

	   Ojo si algún día se mete algo que no sea una tarjeta dentro de la rejilla
	   (un separador, un CTA): `:nth-child` cuenta TODOS los hijos, así que la
	   cuenta se desfasa y el ensanchamiento deja de aplicarse sin avisar. */
	.edisas-servicios__card:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"icon title link"
			"icon text  link";
		align-items: center;
		column-gap: clamp(1.1rem, 2vw, 1.75rem);
	}

	.edisas-servicios__card:last-child:nth-child(2n + 1) .edisas-servicios__icon {
		grid-area: icon;
		margin-block-end: 0;
	}

	.edisas-servicios__card:last-child:nth-child(2n + 1) .edisas-servicios__card-title {
		grid-area: title;
		align-self: end;
		margin-block-end: 0.3rem;
	}

	.edisas-servicios__card:last-child:nth-child(2n + 1) .edisas-servicios__card-text {
		grid-area: text;
		align-self: start;
		margin-block-end: 0;
		max-inline-size: 80ch;
	}

	.edisas-servicios__card:last-child:nth-child(2n + 1) .edisas-servicios__link {
		grid-area: link;
		align-self: center;
		margin-block-start: 0;
		white-space: nowrap;
	}
}

@media (min-width: 1024px) {
	.edisas-servicios__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Misma regla que arriba con N = 3. Con nueve tarjetas no aplica —la rejilla
	   cierra exacta—, pero vuelve a entrar sola en cuanto el total sea 7, 10, 13… */
	.edisas-servicios__card:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"icon title link"
			"icon text  link";
		align-items: center;
		column-gap: clamp(1.1rem, 2vw, 1.75rem);
	}

	.edisas-servicios__card:last-child:nth-child(3n + 1) .edisas-servicios__icon {
		grid-area: icon;
		margin-block-end: 0;
	}

	.edisas-servicios__card:last-child:nth-child(3n + 1) .edisas-servicios__card-title {
		grid-area: title;
		align-self: end;
		margin-block-end: 0.3rem;
	}

	.edisas-servicios__card:last-child:nth-child(3n + 1) .edisas-servicios__card-text {
		grid-area: text;
		align-self: start;
		margin-block-end: 0;
		max-inline-size: 80ch;
	}

	.edisas-servicios__card:last-child:nth-child(3n + 1) .edisas-servicios__link {
		grid-area: link;
		align-self: center;
		margin-block-start: 0;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   11. Home — Franja IA

   Entre dos rejillas de tarjetas, la franja cambia de plano en lugar de subir
   de tamaño: fondo `surface` y el trazo de marca cerrando arriba y abajo a
   sangre, como un paréntesis. Es el gesto del filo del header, repetido. Por
   eso la franja no lleva ningún otro adorno, y respira menos que una sección
   normal: comprimida se lee como una pausa, no como un capítulo.
   -------------------------------------------------------------------------- */

.edisas-ia {
	position: relative;
	background-color: var(--wp--preset--color--surface);
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}

.edisas-ia::before,
.edisas-ia::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 1px;
	background: var(--edisas-trace);
	pointer-events: none;
}

.edisas-ia::before {
	inset-block-start: 0;
}

.edisas-ia::after {
	inset-block-end: 0;
}

.edisas-ia__inner {
	display: grid;
	align-items: center;
	gap: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.edisas-ia__title {
	margin-block: 0 0.8rem;
	max-inline-size: 20ch;
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.edisas-ia__text {
	margin-block: 0;
	max-inline-size: 60ch;
	color: var(--wp--preset--color--muted);
}

.wp-block-buttons.edisas-ia__cta {
	margin-block: 0;
}

/* La respuesta se ancla al canto opuesto de la copia: la banda se lee de un
   golpe —argumento, acción— en vez de como otro bloque apilado. */
@media (min-width: 900px) {
	.edisas-ia__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.wp-block-buttons.edisas-ia__cta {
		justify-self: end;
	}
}

/* --------------------------------------------------------------------------
   12. Home — Gobierno

   Dos columnas: el argumento y su prueba. La tarjeta de credenciales se queda
   deliberadamente escueta —una lista marcada, sin párrafos— porque su trabajo
   es respaldar el texto de al lado, no repetirlo.
   -------------------------------------------------------------------------- */

.edisas-gobierno__inner {
	display: grid;
	align-items: center;
	gap: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
}

.edisas-gobierno__title {
	margin-block: 0 0.85rem;
	max-inline-size: 18ch;
	font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.edisas-gobierno__text {
	margin-block: 0;
	max-inline-size: 54ch;
	color: var(--wp--preset--color--muted);
}

.edisas-gobierno__card {
	padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.edisas-gobierno__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edisas-gobierno__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-block: 0.9rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	font-weight: 500;
	line-height: 1.3;
}

.edisas-gobierno__item:first-child {
	padding-block-start: 0;
}

.edisas-gobierno__item:last-child {
	padding-block-end: 0;
}

.edisas-gobierno__item + .edisas-gobierno__item {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.edisas-gobierno__check {
	flex: 0 0 auto;
	inline-size: 22px;
	block-size: 22px;
	color: var(--wp--preset--color--cyan);
}

@media (min-width: 900px) {
	.edisas-gobierno__inner {
		grid-template-columns: 1.05fr 0.95fr;
	}
}

/* --------------------------------------------------------------------------
   13. Home — Marcas (marquesina)

   Marcas escritas en la tipografía de titulares y en color `muted`: la franja
   se queda en segundo plano, que es su sitio entre dos secciones que sí piden
   atención.

   El bucle son dos pistas idénticas desplazadas -100% de su propio ancho: al
   salir la primera, la segunda ocupa su lugar exacto. `min-inline-size: 100%`
   garantiza que dos pistas cubran siempre la ventana, por ancha que sea. Los
   cantos se disuelven con el mismo desvanecido de los extremos del trazo.
   -------------------------------------------------------------------------- */

/* Sin respiro propio: la franja no es un capítulo, es un renglón dentro del
   ritmo de la página. Con su propio `padding` de sección sumado al de las dos
   vecinas la marquesina quedaba flotando en un hueco doble del habitual. */
.edisas-marcas {
	padding-block: 0;
	overflow: hidden;
}

.edisas-marcas__inner {
	margin-block-end: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
}

.edisas-marcas .edisas-kicker {
	margin-block: 0;
}

.edisas-marquee {
	--edisas-marquee-gap: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);

	display: flex;
	inline-size: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.edisas-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-around;
	min-inline-size: 100%;
	gap: var(--edisas-marquee-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	animation: edisas-marquee 30s linear infinite;
}

.edisas-marquee__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--edisas-marquee-gap);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

/* Punto separador: la misma unidad que forma la retícula del hero. */
.edisas-marquee__item::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

/* Al apuntar o tabular sobre la franja el desplazamiento se detiene: leer una
   marca concreta no debería exigir perseguirla. */
.edisas-marquee:hover .edisas-marquee__track,
.edisas-marquee:focus-within .edisas-marquee__track {
	animation-play-state: paused;
}

@keyframes edisas-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/* Sin movimiento la marquesina se convierte en una lista centrada: la pista
   duplicada sobra y los cantos ya no necesitan desvanecerse. */
@media (prefers-reduced-motion: reduce) {
	.edisas-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* `flex: 1 1 100%` es imprescindible: en movimiento la pista se dimensiona a
	   su contenido (`flex: 0 0 auto`) y, así, `flex-wrap` no tendría contra qué
	   plegar. Aquí se ciñe al ancho de la franja y las marcas caen por renglones. */
	.edisas-marquee__track {
		flex: 1 1 100%;
		max-inline-size: 100%;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.9rem;
		animation: none;
	}

	.edisas-marquee__track[aria-hidden="true"] {
		display: none;
	}

	.edisas-marquee__item:last-child::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   14. Home — Cifras

   Cierre de la home. Las cifras se recortan sobre el gradiente de marca: es el
   trazo del sistema, esta vez con masa. Entre columnas vuelve el trazo de 1px
   girado 90°, el mismo gesto que baja por el costado del titular del hero.

   El número final está escrito en el HTML; `data-target` solo le dice a la
   Task 14 desde dónde contar. Sin JavaScript la cifra se lee igual.
   -------------------------------------------------------------------------- */

.edisas-cifras__grid {
	--edisas-cifras-gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--edisas-cifras-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Alineadas a la izquierda, no centradas: toda la página se lee desde el mismo
   margen y, con el trazo separando columnas, la fila se comporta como una
   tabla de datos en lugar de como una tira de medallas. */
.edisas-cifras__item {
	position: relative;
	min-inline-size: 0;
}

.edisas-cifras__num {
	display: flex;
	align-items: baseline;
	gap: 0.04em;
	margin-block: 0 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	/* Ancho de dígito fijo: la cuenta de la Task 14 no bailará al pasar de
	   una cifra a otra. */
	font-variant-numeric: tabular-nums;
	/* Reserva por si el recorte a texto no está disponible. */
	color: var(--wp--preset--color--accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.edisas-cifras__num {
		background-image: var(--edisas-gradient-num);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.edisas-cifras__affix {
	font-size: 0.55em;
	font-weight: 500;
}

.edisas-cifras__label {
	margin: 0;
	max-inline-size: 20ch;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

@media (min-width: 600px) {
	.edisas-cifras__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* El separador solo aparece con las cuatro en fila: en la rejilla 2×2 cortaría
   la lectura por la mitad en vez de acompañarla. */
@media (min-width: 900px) {
	.edisas-cifras__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.edisas-cifras__item + .edisas-cifras__item::before {
		content: "";
		position: absolute;
		inset-block: 0.2rem;
		inset-inline-start: calc(var(--edisas-cifras-gap) / -2);
		inline-size: 1px;
		background: linear-gradient(
			180deg,
			transparent 0%,
			color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent) 50%,
			transparent 100%
		);
	}
}

/* --------------------------------------------------------------------------
   15. Home — Noticias

   Rejilla 3 / 2 / 1, la misma cadencia que Servicios. La imagen destacada sale
   a sangre por el canto superior de la tarjeta: los márgenes negativos anulan
   el padding y el radio se lo presta `.edisas-card`, que ya recorta.

   Sin imagen destacada el hueco 16:9 se mantiene y muestra el gradiente de
   marca atenuado bajo la retícula de puntos del hero. El marcador vive en los
   pseudo-elementos del contenedor y la figura va por encima con `z-index`, así
   que cuando llega la imagen lo tapa sin necesidad de `:has()`.
   -------------------------------------------------------------------------- */

.edisas-noticias__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.9rem 2.5rem;
	margin-block-end: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}

.edisas-noticias__title {
	margin-block: 0;
	max-inline-size: 20ch;
	font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

/* El enlace al archivo se apoya en la base del titular: es una salida de la
   sección, no una segunda línea de encabezado. */
.edisas-noticias__all {
	flex: 0 0 auto;
	margin-block: 0;
	padding-block-end: 0.35rem;
}

.edisas-noticias__all a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--cyan);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.25s var(--edisas-ease);
}

.edisas-noticias__all a:hover {
	color: var(--wp--preset--color--text);
}

.edisas-noticias__arrow {
	transition: transform 0.25s var(--edisas-ease);
}

.edisas-noticias__all a:hover .edisas-noticias__arrow {
	transform: translateX(3px);
}

/* Selectores cualificados: `.wp-block-post-template` de core comparte
   especificidad con la clase del tema y el orden de impresión de sus estilos
   no está garantizado. */
.edisas-noticias .edisas-noticias__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.1rem, 0.7rem + 1.2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.edisas-noticias .edisas-noticias__grid > li {
	display: flex;
	min-inline-size: 0;
}

.edisas-noticias__card {
	--edisas-noticias-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);

	display: flex;
	flex-direction: column;
	inline-size: 100%;
	padding: var(--edisas-noticias-pad);
}

/* El trazo de `.edisas-card` nace en el canto superior, justo donde la imagen
   sale a sangre. Sin subirlo de capa quedaría enterrado bajo el medio. */
.edisas-noticias__card::before {
	z-index: 2;
}

/* Selector con la misma forma que `.edisas-card > :first-child`, que anula el
   margen superior de todo primer hijo: sin igualar su especificidad el medio no
   sale a sangre. */
.edisas-noticias__card > .edisas-noticias__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-block: calc(var(--edisas-noticias-pad) * -1) clamp(1rem, 0.8rem + 0.6vw, 1.35rem);
	margin-inline: calc(var(--edisas-noticias-pad) * -1);
	background-color: var(--wp--preset--color--surface-2);
}

/* Marcador de posición, capa 1: el gradiente de marca atenuado. */
.edisas-noticias__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--wp--preset--gradient--brand);
	opacity: 0.32;
}

/* Marcador de posición, capa 2: la retícula del hero, desvanecida hacia abajo
   para que el hueco tenga dirección y no se lea como una textura pegada. */
.edisas-noticias__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(
		circle at 1px 1px,
		color-mix(in srgb, var(--wp--preset--color--cyan) 85%, transparent) 1px,
		transparent 0
	);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 78% 110% at 18% 8%, #000 0%, transparent 76%);
	mask-image: radial-gradient(ellipse 78% 110% at 18% 8%, #000 0%, transparent 76%);
	opacity: 0.5;
}

/* La figura tapa el marcador cuando la entrada sí trae imagen destacada. */
.edisas-noticias__media .wp-block-post-featured-image {
	position: relative;
	z-index: 1;
	block-size: 100%;
	margin: 0;
}

.edisas-noticias__media .wp-block-post-featured-image a,
.edisas-noticias__media .wp-block-post-featured-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Por encima del overlay del título: si no, la categoría deja de ser clicable. */
.edisas-noticias__cat {
	position: relative;
	z-index: 3;
	margin-block: 0 0.6rem;
	color: var(--wp--preset--color--cyan);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.edisas-noticias__cat a {
	color: inherit;
	text-decoration: none;
}

.edisas-noticias__cat a:hover {
	color: var(--wp--preset--color--text);
}

.edisas-noticias__card-title {
	margin-block: 0 1.25rem;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.edisas-noticias__card-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 0.25s var(--edisas-ease);
}

/* Toda la tarjeta es zona de clic; el título sigue siendo el único elemento
   enfocable, como en Servicios. */
.edisas-noticias__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.edisas-card:hover .edisas-noticias__card-title a,
.edisas-card:focus-within .edisas-noticias__card-title a {
	color: var(--wp--preset--color--cyan);
}

.edisas-noticias__date {
	margin-block: auto 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.edisas-noticias__empty {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 640px) {
	.edisas-noticias .edisas-noticias__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.edisas-noticias .edisas-noticias__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   16. CTA — Contacto (reutilizado en las páginas de servicio)

   Único bloque del sitio donde el gradiente de marca ocupa masa en lugar de un
   trazo de 1px. La home abre con el resplandor de `navy` bajo la retícula de
   puntos y cierra con el gradiente completo bajo la misma retícula.

   Contraste: sobre el gradiente crudo el texto blanco no aguanta —en la parada
   cian (#22d3ee) da 1.8:1—. El velo oscuro se refuerza justo donde el gradiente
   aclara sin apagar la marca. Medido sobre el render a 1440px (captura con el
   texto oculto, muestreo de toda la tarjeta), el peor fondo queda en 0.115 de
   luminancia y de ahí salen los pisos reales: H2 6.38:1, lead 5.89:1 y la meta
   —el texto más pequeño, 14px— 5.37:1. Todo por encima de AA (4.5:1).
   -------------------------------------------------------------------------- */

.edisas-cta__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-items: center;
	gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	border-radius: var(--edisas-radius);
	padding: clamp(2rem, 1.35rem + 3vw, 3.5rem);
	background-image: var(--wp--preset--gradient--brand);
	color: #fff;
	box-shadow: var(--edisas-shadow);
}

/* Velo direccional. Va en un pseudo-elemento con z-index negativo: dentro del
   contexto de apilamiento aislado se pinta sobre el fondo del elemento y bajo
   su contenido. */
.edisas-cta__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: linear-gradient(
		135deg,
		rgb(6 6 23 / 0.3) 0%,
		rgb(6 6 23 / 0.52) 52%,
		rgb(6 6 23 / 0.72) 100%
	);
	pointer-events: none;
}

/* La retícula del hero, en blanco y recortada al ángulo superior derecho: el
   mismo encuadre con el que abre la página. */
.edisas-cta__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(
		circle at 1px 1px,
		rgb(255 255 255 / 0.18) 1px,
		transparent 0
	);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(ellipse 62% 120% at 100% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 62% 120% at 100% 0%, #000 0%, transparent 72%);
	pointer-events: none;
}

.edisas-cta__title {
	margin-block: 0;
	max-inline-size: 18ch;
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #fff;
}

.edisas-cta__lead {
	margin-block: clamp(0.9rem, 0.7rem + 0.5vw, 1.2rem) 0;
	max-inline-size: 46ch;
	color: rgb(255 255 255 / 0.94);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.edisas-cta__meta {
	margin-block-start: clamp(1.15rem, 0.9rem + 0.6vw, 1.6rem);
}

/* El <p> es real, no heredado: `render_block_core_shortcode()` devuelve
   `wpautop( $content )`, así que cada bloque `wp:shortcode` de la meta llega
   envuelto en su propio párrafo. Mismo caso en `.edisas-cta__actions > p`, que
   envuelve el enlace de WhatsApp. */
.edisas-cta__meta p {
	margin-block: 0;
	max-inline-size: 44ch;
	color: rgb(255 255 255 / 0.88);
	font-size: 0.875rem;
	line-height: 1.55;
}

.edisas-cta__meta p + p {
	margin-block-start: 0.3rem;
}

.edisas-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1rem;
}

/* `> p` es el envoltorio que wpautop pone alrededor del enlace de WhatsApp: es
   un ítem flex real de esta fila, no un selector muerto. */
.edisas-cta__actions > .wp-block-buttons,
.edisas-cta__actions > p {
	margin-block: 0;
}

/* Botón sólido invertido: blanco sobre el gradiente, texto en el fondo de la
   página (19:1). */
.edisas-cta .wp-block-button__link {
	background-color: #fff;
	color: var(--wp--preset--color--base);
	padding: 0.95rem 1.85rem;
	font-size: 1rem;
}

.edisas-cta .wp-block-button__link:hover {
	background-color: #fff;
	box-shadow: 0 16px 34px -16px rgb(0 0 0 / 0.75);
	transform: translateY(-1px);
}

/* El enlace de WhatsApp lo imprime el shortcode de edisas-core: aquí solo se
   viste de botón fantasma para el gradiente. */
.edisas-cta .edisas-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: var(--edisas-radius-sm);
	background-color: rgb(255 255 255 / 0.08);
	padding: 0.95rem 1.85rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.25s var(--edisas-ease),
		border-color 0.25s var(--edisas-ease),
		transform 0.25s var(--edisas-ease);
}

.edisas-cta .edisas-wa:hover {
	background-color: rgb(255 255 255 / 0.18);
	border-color: rgb(255 255 255 / 0.8);
	transform: translateY(-1px);
}

/* El foco global es cian y sobre el gradiente se pierde justo en su parada
   cian. Dentro de la tarjeta manda el blanco. */
.edisas-cta a:focus-visible {
	outline-color: #fff;
}

/* En pantallas estrechas los dos botones ocupan el ancho: `.wp-block-buttons`
   es un ítem flex y sin estirarlo se queda al tamaño de su contenido. */
@media (max-width: 519px) {
	.edisas-cta__actions {
		align-items: stretch;
	}

	.edisas-cta__actions > .wp-block-buttons,
	.edisas-cta__actions > p,
	.edisas-cta__actions .wp-block-button,
	.edisas-cta__actions .wp-block-button__link,
	.edisas-cta__actions .edisas-wa {
		inline-size: 100%;
	}
}

@media (min-width: 860px) {
	.edisas-cta__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, auto);
		gap: clamp(2rem, 1rem + 4vw, 4rem);
	}

	/* En dos columnas los botones se apilan y comparten ancho: la columna se
	   lee como un bloque de respuesta, no como una fila suelta. */
	.edisas-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.edisas-cta__actions > .wp-block-buttons,
	.edisas-cta__actions > p,
	.edisas-cta__actions .wp-block-button,
	.edisas-cta__actions .wp-block-button__link,
	.edisas-cta__actions .edisas-wa {
		inline-size: 100%;
	}
}

/* --------------------------------------------------------------------------
   17. Páginas de servicio (plantillas `page-servicio` y `page-servicios`)

   El hero interior es la versión corta del de la home: el mismo campo visual
   —resplandor de `navy` y retícula de puntos recortados por una elipse— pero
   aplanado contra el filo del header, sin altura mínima y sin botones. Aquí
   las dos capas caben en un solo pseudo-elemento porque comparten la misma
   máscara: el resplandor ya se apaga solo antes del borde de la elipse.

   La prosa la escribe una persona en el editor, así que se viste el bloque
   `wp:post-content` entero (`.edisas-prosa`) y no clase por clase: el texto
   normal, los H2 y las listas se ven bien sin recordar nada. Solo el párrafo
   de entrada y los dos componentes con forma propia —la lista de entregables
   y la rejilla del proceso— piden una clase explícita.
   -------------------------------------------------------------------------- */

.edisas-servicio-hero {
	/* Una sola elipse gobierna el resplandor y el recorte de la retícula. Más
	   estirada en vertical que la de la home: la banda es mucho más baja y con
	   la proporción original la retícula se cortaría a media altura. */
	--edisas-servicio-field: ellipse 58% 165% at 88% 0%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(2.75rem, 2rem + 3.4vw, 4.5rem) clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}

@media (max-width: 1023px) {
	.edisas-servicio-hero {
		--edisas-servicio-field: ellipse 96% 130% at 86% 0%;
	}
}

.edisas-servicio-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(
			circle at 1px 1px,
			color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent) 1px,
			transparent 0
		),
		radial-gradient(
			var(--edisas-servicio-field),
			color-mix(in srgb, var(--wp--preset--color--navy) 52%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--navy) 26%, transparent) 34%,
			color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent) 56%,
			transparent 78%
		);
	background-size: 34px 34px, auto;
	-webkit-mask-image: radial-gradient(
		var(--edisas-servicio-field),
		#000 0%,
		rgb(0 0 0 / 0.42) 44%,
		transparent 80%
	);
	mask-image: radial-gradient(
		var(--edisas-servicio-field),
		#000 0%,
		rgb(0 0 0 / 0.42) 44%,
		transparent 80%
	);
}

.edisas-servicio-hero__title {
	margin-block: 0;
	max-inline-size: 18ch;
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3.05rem);
	line-height: 1.07;
	letter-spacing: -0.032em;
}

/* Solo la plantilla de índice trae bajada (viene del extracto de la página). */
.edisas-servicio-hero__lead p {
	margin-block: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem) 0;
	max-inline-size: 56ch;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.6;
}

/* El cuerpo abre más apretado que una sección normal: viene de su propio hero,
   no de otra sección, y un `spacing|60` arriba abriría un vacío. */
.edisas-servicio {
	padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

/* La columna de lectura se ancla a la izquierda, en el mismo eje que el titular
   del hero: el layout `constrained` la centraría dentro de los 1200px de la
   sección y la página quedaría con dos ejes verticales.

   El `!important` no es negociable: el núcleo emite el centrado como
   `margin-left: auto !important` en `core-block-supports`, así que solo se
   puede responder con la misma moneda. */
.edisas-prosa.is-layout-constrained > :where(:not(.alignwide):not(.alignfull)) {
	margin-inline-start: 0 !important;
}

/* `wp:post-content` con layout `constrained` reaplica el padding raíz; dentro
   de `__inner` ya está puesto y duplicarlo desalinearía prosa y titular. */
.edisas-servicio__inner > .wp-block-post-content {
	padding-inline: 0;
}

.edisas-prosa > p {
	margin-block: 0 1.15rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.75;
}

/* Párrafo de entrada: amplía la tarjeta de la home y sostiene el titular. */
.edisas-prosa > p.edisas-servicio__lead {
	margin-block-end: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
	color: var(--wp--preset--color--text);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
}

.edisas-prosa > h2 {
	margin-block: clamp(2.5rem, 2rem + 1.8vw, 3.5rem) 1.1rem;
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem);
	line-height: 1.18;
}

/* El trazo de marca vuelve como filo superior del titular de apartado: es el
   mismo gesto del kicker sin repetir el kicker. */
.edisas-prosa > h2::before {
	content: "";
	display: block;
	inline-size: 2.25rem;
	block-size: 1px;
	margin-block-end: 0.9rem;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--cyan));
}

.edisas-prosa > h3 {
	margin-block: 2rem 0.75rem;
	font-size: 1.1875rem;
	line-height: 1.25;
}

.edisas-prosa > :last-child {
	margin-block-end: 0;
}

/* Lista de entregables: la paloma va como máscara sobre color de marca, así
   hereda el cian sin meter un SVG por ítem en el contenido de la página. */
.edisas-prosa .edisas-lista-check {
	list-style: none;
	margin-block: 0 1.15rem;
	padding-inline-start: 0;
	display: grid;
	gap: 0.8rem;
}

.edisas-prosa .edisas-lista-check > li {
	position: relative;
	padding-inline-start: 2rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

/* El término que abre cada entregable sube al color de texto: la lista se lee
   de un vistazo aunque el detalle vaya en secundario. */
.edisas-prosa .edisas-lista-check > li strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.edisas-prosa .edisas-lista-check > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.35em;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	background-color: var(--wp--preset--color--cyan);
	mask: var(--edisas-icon-check) center / contain no-repeat;
	-webkit-mask: var(--edisas-icon-check) center / contain no-repeat;
}

/* Rejilla del proceso: cuatro pasos, 4 / 2 / 1. Va `alignwide` en el contenido
   para respirar frente a la columna de texto y marcar el cambio de registro
   entre leer y ver. */
.edisas-proceso {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.9rem, 0.5rem + 1vw, 1.25rem);
	margin-block: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0;
}

/* El grupo es `is-layout-flow`: sin esto cada paso arrastraría el margen
   vertical del flujo y se sumaría al `gap` de la rejilla. */
.edisas-proceso > * {
	margin-block: 0;
}

.edisas-proceso__step {
	padding: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
}

.edisas-proceso__num {
	margin-block: 0 0.6rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	/* Reserva por si el recorte a texto no está disponible. */
	color: var(--wp--preset--color--accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.edisas-proceso__num {
		background-image: var(--edisas-gradient-num);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.edisas-proceso__step-title {
	margin-block: 0 0.45rem;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.edisas-proceso__step-text {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.edisas-proceso {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.edisas-proceso {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Índice de servicios. El pattern de la home trae su propio encabezado —kicker
   `SERVICIOS` y titular—, y aquí el hero ya dijo las dos cosas. Lo que sobra es
   el kicker: repetiría literalmente el del hero, dos veces la misma palabra en
   media pantalla. El titular, en cambio, se queda visible.

   Se queda por jerarquía, no por adorno: es el único H2 entre el H1 de la
   página y los H3 de las tarjetas, y suprimirlo —con `display:none` o con
   cualquier técnica que lo saque del árbol de accesibilidad— deja el esquema
   de encabezados saltando de H1 a H3. */
.edisas-servicios-indice .edisas-kicker {
	display: none;
}

/* Bajo un H1 que ya nombró la página, el titular del pattern entra como
   subtítulo de sección y no como segunda portada: mismo cuerpo que los H2 de
   las páginas de servicio, con el mismo filo de marca encima. */
.edisas-servicios-indice .edisas-servicios__title {
	max-inline-size: 26ch;
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.edisas-servicios-indice .edisas-servicios__title::before {
	content: "";
	display: block;
	inline-size: 2.25rem;
	block-size: 1px;
	margin-block-end: 0.9rem;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--cyan));
}

.edisas-servicios-indice .edisas-servicios__head {
	margin-block-end: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.edisas-servicios-indice .edisas-servicios {
	padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   18. Páginas de contenido (plantilla `page`: Nosotros, avisos legales)

   La plantilla genérica reusa el hero corto y la prosa de las páginas de
   servicio, así que aquí solo viven las dos cosas que no existían allá: la
   rejilla de valores y las listas sin paloma (el aviso de privacidad enumera
   datos y finalidades, no entregables; la paloma leería como una promesa).
   -------------------------------------------------------------------------- */

/* Listas normales dentro de la prosa. `.edisas-lista-check` sigue mandando en
   los entregables; esto viste todo lo demás. */
.edisas-prosa > ul:not(.edisas-lista-check),
.edisas-prosa > ol {
	margin-block: 0 1.15rem;
	padding-inline-start: 1.35rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.75;
}

.edisas-prosa > ul:not(.edisas-lista-check) > li,
.edisas-prosa > ol > li {
	margin-block-end: 0.5rem;
}

.edisas-prosa > ul:not(.edisas-lista-check) > li::marker,
.edisas-prosa > ol > li::marker {
	color: var(--wp--preset--color--cyan);
}

.edisas-prosa > ul:not(.edisas-lista-check) > li strong,
.edisas-prosa > ol > li strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* Rejilla de valores: seis tarjetas, 3 / 2 / 1. Va `alignwide` como la del
   proceso, por la misma razón —cambiar de registro entre leer y ver. */
.edisas-valores {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.9rem, 0.5rem + 1vw, 1.25rem);
	margin-block: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0;
}

/* El grupo es `is-layout-flow`: sin esto cada tarjeta arrastraría el margen
   vertical del flujo y se sumaría al `gap` de la rejilla. */
.edisas-valores > * {
	margin-block: 0;
}

.edisas-valores__item {
	padding: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
}

/* Los H3 de las tarjetas no son hijos directos de `.edisas-prosa`, así que no
   heredan los márgenes del apartado: se visten aquí. */
.edisas-valores__title {
	margin-block: 0 0.5rem;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.edisas-valores__title::before {
	content: "";
	display: block;
	inline-size: 1.75rem;
	block-size: 1px;
	margin-block-end: 0.75rem;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--cyan));
}

.edisas-valores__text {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.edisas-valores {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.edisas-valores {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   19. Noticias — listado (plantillas `home` y `archive`)

   Maquetación de revista con una sola rejilla. La entrada más reciente no sale
   de una segunda consulta: es la misma tarjeta de siempre, que al ser la
   primera de la rejilla ocupa el ancho completo y gira a dos columnas —imagen
   a la izquierda, texto a la derecha—. Un único markup para las dos formas,
   así que la paginación y el archivo de categoría siguen siendo los nativos
   del núcleo (`inherit: true`) y no hay consultas con `offset` que mantener
   sincronizadas. El precio: en la página 2 la primera entrada vuelve a salir
   destacada. Es la convención de cualquier revista paginada, no un defecto.

   El motivo del trazo entra aquí por el único sitio donde todavía no había
   estado: la vertical. En la destacada, la junta entre la imagen y la copia se
   ilumina con el gradiente de marca girado 90°. Es el canto vivo de la portada
   del listado, y es el único adorno que se añade a la sección.
   -------------------------------------------------------------------------- */

.edisas-blog-hero__lead {
	margin-block: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem) 0;
	max-inline-size: 60ch;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.6;
}

/* Archivo de término: el núcleo antepone «Categoría:» dentro del propio H1 y
   envuelve solo el nombre del término en un `span` sin clase. En vez de
   esconder el prefijo o de duplicarlo en un segundo antetítulo —el kicker ya
   ocupa ese sitio—, se rebaja a entradilla del titular: la línea se lee
   «Categoría: Seguridad» sin que el prefijo compita con el término.

   El `:has()` es la comprobación de que el prefijo existe: si algún día el
   archivo llega sin él, el titular no se queda entero en gris. */
.edisas-blog-hero__title:has(> span) {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

.edisas-blog-hero__title > span {
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

/* Rail de categorías. Mismo alfabeto que el kicker —versalitas, 0.14em de
   entreletra— pero encerrado: un kicker rotula, un chip se pulsa. El radio es
   el de los botones del sistema; una píldora sería un vocabulario nuevo por
   una sola pieza. */
.edisas-filtro {
	margin-block-end: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.edisas-filtro__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edisas-filtro__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 0.95rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius-sm);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		color 0.25s var(--edisas-ease),
		border-color 0.25s var(--edisas-ease),
		background-color 0.25s var(--edisas-ease);
}

.edisas-filtro__chip:hover {
	color: var(--wp--preset--color--text);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

.edisas-filtro__chip.is-current {
	color: var(--wp--preset--color--cyan);
	border-color: color-mix(in srgb, var(--wp--preset--color--cyan) 55%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--cyan) 12%, transparent);
}

/* El listado nace de su propio hero, no de otra sección: arriba abre apretado,
   igual que el cuerpo de las páginas de servicio. */
.edisas-blog {
	padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

/* Rejilla compartida por el listado y por los relacionados de la entrada.
   Selectores cualificados: `.wp-block-post-template` de core comparte
   especificidad con la clase del tema y el orden de impresión de sus estilos
   no está garantizado. */
.wp-block-query .edisas-cards-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.1rem, 0.7rem + 1.2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-query .edisas-cards-grid > li {
	display: flex;
	min-inline-size: 0;
}

.edisas-blog__card {
	--edisas-blog-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);

	display: flex;
	flex-direction: column;
	inline-size: 100%;
	padding: var(--edisas-blog-pad);
}

/* El trazo de `.edisas-card` nace en el canto superior, justo donde la imagen
   sale a sangre. Sin subirlo de capa quedaría enterrado bajo el medio. */
.edisas-blog__card::before {
	z-index: 2;
}

/* Selector con la misma forma que `.edisas-card > :first-child`, que anula el
   margen superior de todo primer hijo: sin igualar su especificidad el medio no
   sale a sangre. */
.edisas-blog__card > .edisas-blog__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-block: calc(var(--edisas-blog-pad) * -1) clamp(1rem, 0.8rem + 0.6vw, 1.35rem);
	margin-inline: calc(var(--edisas-blog-pad) * -1);
	background-color: var(--wp--preset--color--surface-2);
}

/* Sin imagen destacada el hueco 16:9 no se colapsa: enseña el gradiente de
   marca atenuado bajo la retícula de puntos del hero. Vive en pseudo-elementos
   por detrás de la figura, así que cuando sí hay imagen queda tapado sin
   depender de `:has()`. Es el mismo marcador del pattern de la home. */
.edisas-blog__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--wp--preset--gradient--brand);
	opacity: 0.32;
}

.edisas-blog__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(
		circle at 1px 1px,
		color-mix(in srgb, var(--wp--preset--color--cyan) 85%, transparent) 1px,
		transparent 0
	);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 78% 110% at 18% 8%, #000 0%, transparent 76%);
	mask-image: radial-gradient(ellipse 78% 110% at 18% 8%, #000 0%, transparent 76%);
	opacity: 0.5;
}

.edisas-blog__media .wp-block-post-featured-image {
	position: relative;
	z-index: 1;
	block-size: 100%;
	margin: 0;
}

.edisas-blog__media .wp-block-post-featured-image a,
.edisas-blog__media .wp-block-post-featured-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* La columna de texto: existe para que la tarjeta pueda girar a dos columnas
   sin cambiar el markup. En vertical es transparente al layout. */
.edisas-blog__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-inline-size: 0;
}

/* Por encima del overlay del título: si no, la categoría deja de ser clicable. */
.edisas-blog__cat {
	position: relative;
	z-index: 3;
	margin-block: 0 0.6rem;
	color: var(--wp--preset--color--cyan);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.edisas-blog__cat a {
	color: inherit;
	text-decoration: none;
}

.edisas-blog__cat a:hover {
	color: var(--wp--preset--color--text);
}

.edisas-blog__title {
	margin-block: 0 0.7rem;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.edisas-blog__title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 0.25s var(--edisas-ease);
}

/* Toda la tarjeta es zona de clic; el título sigue siendo el único elemento
   enfocable, como en Servicios. */
.edisas-blog__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.edisas-card:hover .edisas-blog__title a,
.edisas-card:focus-within .edisas-blog__title a {
	color: var(--wp--preset--color--cyan);
}

/* El extracto se recorta a tres líneas: los pies de tarjeta quedan alineados
   entre sí aunque los textos midan distinto, que es lo que hace que una
   rejilla se lea como rejilla. */
.edisas-blog__excerpt {
	margin-block: 0 1.25rem;
}

.edisas-blog__excerpt p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin-block: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.edisas-blog__date {
	margin-block: auto 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.edisas-blog__empty {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
}

/* Paginación. El filo superior de 1px la separa de la rejilla sin abrir otra
   banda; cuando hay una sola página el núcleo no imprime el bloque y el filo
   tampoco aparece. */
.edisas-paginacion {
	margin-block-start: clamp(2rem, 1.6rem + 1.6vw, 3rem);
	padding-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-block-start: 1px solid var(--wp--preset--color--border);
	gap: 1rem;
}

.edisas-paginacion .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.edisas-paginacion a,
.edisas-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.4rem;
	block-size: 2.4rem;
	padding-inline: 0.7rem;
	border: 1px solid transparent;
	border-radius: var(--edisas-radius-sm);
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		color 0.25s var(--edisas-ease),
		border-color 0.25s var(--edisas-ease),
		background-color 0.25s var(--edisas-ease);
}

.edisas-paginacion a:hover {
	color: var(--wp--preset--color--text);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

.edisas-paginacion .page-numbers.current {
	color: var(--wp--preset--color--cyan);
	border-color: color-mix(in srgb, var(--wp--preset--color--cyan) 55%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--cyan) 12%, transparent);
}

.edisas-paginacion .wp-block-query-pagination-previous,
.edisas-paginacion .wp-block-query-pagination-next {
	border-color: var(--wp--preset--color--border);
}

/* Dos columnas y no tres. La destacada ya ocupa una fila entera, así que el
   resto del listado hereda su misma medida partida por la mitad: la cadencia
   sale 1 · 2 · 2 y la portada se lee como una portada. A tres columnas las
   tarjetas quedarían con la imagen del tamaño de un sello y, salvo que el
   número de entradas sea múltiplo de tres, la última fila abre un hueco.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
	.wp-block-query .edisas-cards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Los relacionados sí llegan a tres, pero la rejilla se cuenta sola: al pie
	   del primer artículo del blog solo hay dos entradas más que ofrecer, y con
	   tres columnas fijas la fila quedaría coja. `auto-fit` reparte lo que haya
	   entre el ancho disponible. */
	.edisas-relacionados .edisas-cards-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	}
}

/* La destacada. Rompe la rejilla a partir de 768px —por debajo, una tarjeta
   apaisada dejaría la imagen del tamaño de un sello— y gira a dos columnas.
   La imagen manda la altura: a 52 % del ancho de la sección su proporción 16:9
   da más alto del que ocupa la copia, así que la fila la fija ella y el pie de
   texto se descuelga con el `margin-block: auto 0` de la fecha. */
@media (min-width: 768px) {
	.edisas-blog__grid > li:first-child {
		grid-column: 1 / -1;
	}

	.edisas-blog__grid > li:first-child .edisas-blog__card {
		--edisas-blog-gap: clamp(1.75rem, 1rem + 2.4vw, 3rem);

		flex-direction: row;
		align-items: stretch;
		gap: var(--edisas-blog-gap);
	}

	.edisas-blog__grid > li:first-child .edisas-blog__media {
		flex: 0 0 52%;
		margin-block: calc(var(--edisas-blog-pad) * -1);
		margin-inline: calc(var(--edisas-blog-pad) * -1) 0;
	}

	.edisas-blog__grid > li:first-child .edisas-blog__body {
		position: relative;
		justify-content: center;
		padding-block: 0.5rem;
	}

	/* El trazo, por una vez, en vertical: la junta entre la imagen y la copia. */
	.edisas-blog__grid > li:first-child .edisas-blog__body::before {
		content: "";
		position: absolute;
		inset-block: calc(var(--edisas-blog-pad) * -1);
		inset-inline-start: calc(var(--edisas-blog-gap) / -2);
		inline-size: 1px;
		background: linear-gradient(
			180deg,
			transparent 0%,
			var(--wp--preset--color--navy) 12%,
			var(--wp--preset--color--accent) 50%,
			var(--wp--preset--color--cyan) 88%,
			transparent 100%
		);
		pointer-events: none;
	}

	.edisas-blog__grid > li:first-child .edisas-blog__title {
		margin-block-end: 0.9rem;
		font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
		line-height: 1.14;
		letter-spacing: -0.025em;
	}

	.edisas-blog__grid > li:first-child .edisas-blog__excerpt p {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	.edisas-blog__grid > li:first-child .edisas-blog__date {
		margin-block: 1.25rem 0;
	}
}

/* --------------------------------------------------------------------------
   20. Noticias — entrada individual (plantilla `single`)

   El artículo reusa el hero corto y la prosa de las páginas de servicio; lo
   propio de aquí son tres cosas: el antetítulo, que ya no es una palabra fija
   sino la categoría de la entrada; la imagen destacada a 1200px sobre la
   columna de lectura de 760px —la asimetría es deliberada, es lo que separa
   un artículo de una ficha—; y el pie con otras noticias antes del CTA.

   El orden del cierre es «seguir leyendo» y luego «hablemos». Al revés, el
   CTA quedaría interrumpido por tres tarjetas y dejaría de ser un cierre.
   -------------------------------------------------------------------------- */

/* `wp:post-terms` sale como un `div`; `.edisas-kicker` lo viste igual que a
   los antetítulos escritos a mano y aquí solo se recolocan los enlaces. */
.edisas-post-hero__cat a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--edisas-ease);
}

.edisas-post-hero__cat a:hover {
	color: var(--wp--preset--color--text);
}

/* Un titular de artículo es una frase, no un rótulo de dos palabras como el
   de una página de servicio: pide más medida y algo menos de cuerpo. */
.edisas-post-hero__title {
	max-inline-size: 22ch;
	font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.85rem);
	line-height: 1.1;
	letter-spacing: -0.028em;
}

.edisas-post-hero__fecha {
	margin-block: clamp(1rem, 0.8rem + 0.6vw, 1.4rem) 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.edisas-post {
	padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
}

.edisas-post__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-block-end: clamp(2rem, 1.6rem + 1.6vw, 3rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius);
	background-color: var(--wp--preset--color--surface-2);
}

/* Sin imagen destacada no se reserva el hueco: en una tarjeta el marcador
   sostiene la rejilla, pero en un artículo solo sería un vacío decorativo
   entre el titular y la primera línea. */
.edisas-post__media:not(:has(img)) {
	display: none;
}

/* El trazo enciende el canto superior de la imagen, como en las cards. */
.edisas-post__media::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 2;
	block-size: 1px;
	background: var(--edisas-trace);
	pointer-events: none;
}

.edisas-post__media .wp-block-post-featured-image {
	block-size: 100%;
	margin: 0;
}

.edisas-post__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* `wp:post-content` con layout `constrained` reaplica el padding raíz; dentro
   de `__inner` ya está puesto y duplicarlo desalinearía prosa y titular. */
.edisas-post__inner > .wp-block-post-content {
	padding-inline: 0;
}

/* Entradilla del artículo. Misma pieza que el lead de las páginas de servicio;
   nombre propio porque una entrada no es una ficha de servicio y la clase
   tiene que poder decirse en voz alta al escribirla en el editor. */
.edisas-prosa > p.edisas-post__lead {
	margin-block-end: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
	color: var(--wp--preset--color--text);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
}

/* Cita de apoyo dentro del artículo: sin comillas ni cursiva, solo el trazo de
   marca sosteniéndola por el flanco. */
.edisas-prosa > blockquote {
	margin-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	margin-inline: 0;
	padding-inline-start: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
	border-inline-start: 2px solid;
	border-image: linear-gradient(
			180deg,
			var(--wp--preset--color--accent),
			var(--wp--preset--color--cyan)
		)
		1;
}

.edisas-prosa > blockquote p {
	margin-block: 0;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

/* Infografía de la nota (bloque `wp:html` que inserta el generador de noticias
   IA). El SVG llega con `viewBox` y `width="100%"`: la caja solo le pone marco,
   fondo y aire. `overflow: hidden` recorta lo que el dibujo se salga del radio.
   Sin alto fijo: el `height: auto` deja que la proporción del viewBox mande, que
   es lo que la hace legible tanto a 390px como a 1440px. */
.edisas-infografia {
	margin-block: var(--wp--preset--spacing--50);
	margin-inline: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background-color: var(--wp--preset--color--surface);
}

.edisas-infografia svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Foto de banco con su crédito. El pie va en el mismo registro tipográfico que
   el resto de pies de figura del artículo, un punto por debajo de la prosa.

   Se cuelga de `.edisas-foto-nota` —la clase que el generador pone en el bloque
   `wp:image`— y NO de `.wp-block-image` a secas: `.edisas-prosa` es la misma clase
   del contenido de las páginas (Servicios, Nosotros, Contacto), así que un
   selector genérico les cambiaría también sus imágenes. */
.edisas-prosa .edisas-foto-nota {
	margin-block: var(--wp--preset--spacing--50);
}

.edisas-prosa .edisas-foto-nota img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 14px;
}

.edisas-prosa .edisas-foto-nota figcaption {
	margin-block-start: 0.75rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Otras noticias. El filo de 1px lo separa del artículo sin abrir otra banda
   de color: el cambio de registro lo marca la rejilla, no un fondo. */
.edisas-relacionados {
	padding-block: 0 clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.edisas-relacionados__inner {
	padding-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.edisas-relacionados__title {
	margin-block: 0 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem);
	line-height: 1.18;
}

/* --------------------------------------------------------------------------
   21. Contacto (plantilla `page-contacto`) y Contact Form 7

   Dos columnas en escritorio —formulario | datos y mapa— y una sola pila en
   móvil, con el formulario siempre primero: quien entra a esta página ya
   decidió escribir.

   Los controles de Contact Form 7 se visten aquí y no en el plugin: CF7 no
   emite ninguna clase propia salvo `wpcf7-*`, así que el markup del formulario
   (`scripts/content/formulario-contacto.html`, que vive en la meta `_form`)
   añade sus propias clases `edisas-form__*` y el CSS engancha en ellas. Las
   `wpcf7-*` solo se tocan donde son inevitables: los mensajes de validación y
   la caja de respuesta, que las pinta el plugin.

   Los colores de estado de CF7 por omisión —#46b450, #dc3232, #ffb900— están
   pensados para fondo blanco y aquí se apagan; los sustituyen los tokens
   `--edisas-exito`, `--edisas-error` y `--edisas-aviso` del `:root`.
   -------------------------------------------------------------------------- */

/* El lead del hero no reusa `.edisas-servicio-hero__lead`: aquella regla viste
   el <p> que el bloque `post-excerpt` mete DENTRO de un div, y este lead es un
   párrafo suelto de la plantilla. Mismos valores, un nivel menos de anidación. */
.edisas-contacto-hero__lead {
	margin-block: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem) 0;
	max-inline-size: 56ch;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.6;
}

/* Como en las páginas de servicio: el cuerpo abre apretado porque viene de su
   propio hero y no de otra sección. */
.edisas-contacto {
	padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

/* El contenedor que el núcleo emite alrededor de `wp:post-content` no debe
   volver a meter padding: `__inner` ya lo puso. */
.edisas-contacto__inner > .wp-block-post-content {
	padding-inline: 0;
}

.edisas-contacto__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
	align-items: start;
}

/* Los dos hijos vienen de bloques de flujo y arrastrarían su margen vertical,
   que se sumaría al `gap`. */
.edisas-contacto__grid > * {
	margin-block: 0;
}

/* El reparto no es mitad y mitad: el formulario tiene dos campos por fila y
   necesita el ancho; la columna de datos es una lista corta. */
@media (min-width: 1024px) {
	.edisas-contacto__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

.edisas-contacto__aside {
	display: grid;
	gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
	align-content: start;
}

.edisas-contacto__aside > * {
	margin-block: 0;
}

/* Panel: la superficie de `.edisas-card` sin su comportamiento. La card se
   levanta al hover y al `focus-within` porque siempre es un teaser que lleva a
   otra parte; aquí son dos bloques de página, y con `focus-within` el panel
   entero daría un salto cada vez que el cursor entra en un campo. */
.edisas-contacto__panel {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius);
	padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
}

.edisas-contacto__panel-title {
	margin-block: 0 0.55rem;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* El trazo de marca, el mismo gesto que abre los H2 de la prosa. */
.edisas-contacto__panel-title::before {
	content: "";
	display: block;
	inline-size: 2.25rem;
	block-size: 1px;
	margin-block-end: 0.9rem;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--cyan));
}

.edisas-contacto__panel-lead {
	margin-block: 0 clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem);
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Datos de contacto ---------------------------------------------------- */

/* El arranque replica el hueco que en el panel del formulario abre su bajada,
   para que las dos columnas empiecen a la misma altura. */
.edisas-datos__lista {
	display: grid;
	gap: 1.15rem;
	margin-block: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem) 0;
}

.edisas-datos__item {
	display: grid;
	gap: 0.2rem;
}

.edisas-datos__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.edisas-datos__valor {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.edisas-datos__valor a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color 0.2s var(--edisas-ease), border-color 0.2s var(--edisas-ease);
}

.edisas-datos__valor a:hover {
	color: var(--wp--preset--color--cyan);
	border-block-end-color: currentColor;
}

/* WhatsApp conserva su verde: es el único color ajeno a la paleta que el sitio
   usa a propósito, porque identifica el canal (igual que el botón flotante). */
.edisas-datos__valor .edisas-wa {
	color: var(--edisas-whatsapp);
}

.edisas-datos__valor .edisas-wa:hover {
	color: var(--edisas-whatsapp);
}

/* --- Mapa ----------------------------------------------------------------- */

.edisas-contacto__mapa {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius);
}

.edisas-contacto__mapa iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	/* Google no ofrece tema oscuro en el embed público y un rectángulo blanco
	   de 16:9 sería lo más brillante de todo el sitio. La inversión con giro de
	   tono deja el mapa en gama oscura conservando el sentido del color (agua
	   azul, vialidades claras); el `contrast` recupera el borde entre calles
	   que la inversión aplana. */
	filter: invert(0.92) hue-rotate(180deg) saturate(0.85) contrast(1.05);
}

/* --- Formulario (Contact Form 7) ------------------------------------------ */

/* Cada campo es un <p> del markup de `_form`: label arriba, control abajo, y
   el aviso de validación de CF7 cuelga dentro del propio `__control`. */
.edisas-form__field {
	display: grid;
	gap: 0.4rem;
	margin-block: 0 1.15rem;
}

.edisas-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 1rem;
}

@media (min-width: 560px) {
	.edisas-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.edisas-form__field label {
	display: block;
	color: var(--wp--preset--color--text);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

/* El asterisco va en cian y fuera del árbol de accesibilidad: la obligación ya
   la comunica el `aria-required` que CF7 pone en el control. */
.edisas-form__req {
	color: var(--wp--preset--color--cyan);
}

.edisas-form__opt {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	font-size: 0.75rem;
}

/* CF7 envuelve cada control en un <span>; sin esto el input no ocuparía la
   fila y el mensaje de validación no podría caer debajo. */
.edisas-form .wpcf7-form-control-wrap {
	display: block;
}

.edisas-form input[type="text"],
.edisas-form input[type="email"],
.edisas-form input[type="tel"],
.edisas-form select,
.edisas-form textarea {
	inline-size: 100%;
	max-inline-size: 100%;
	background-color: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius-sm);
	padding: 0.7rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	/* 1rem exacto: por debajo de 16px, Safari en iOS hace zoom al enfocar y
	   descuadra la página entera. */
	font-size: 1rem;
	line-height: 1.5;
	transition:
		border-color 0.2s var(--edisas-ease),
		background-color 0.2s var(--edisas-ease),
		box-shadow 0.2s var(--edisas-ease);
}

.edisas-form ::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 72%, transparent);
	opacity: 1;
}

.edisas-form textarea {
	display: block;
	min-block-size: 9rem;
	resize: vertical;
}

/* Flecha propia: la nativa de los navegadores llega en color de sistema y
   sobre `surface-2` desaparece. */
.edisas-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a8cc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 1.05rem;
	padding-inline-end: 2.6rem;
}

/* Las opciones las pinta el sistema operativo con su propio fondo; sin esto,
   en Windows salen texto claro sobre blanco. */
.edisas-form select option {
	background-color: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--text);
}

.edisas-form :is(input, select, textarea):hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--border));
}

/* Foco: borde `accent` para señalar el campo activo y anillo cian por fuera,
   que es el que se ve a distancia y el que sobrevive al modo de alto
   contraste. Se usa `:focus` y no `:focus-visible` a propósito: en un campo de
   texto el foco siempre es intencional, venga del teclado o del ratón. */
.edisas-form :is(input, select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--surface-2) 90%, var(--wp--preset--color--accent));
}

/* Campo rechazado por la validación de CF7. Se encadena con
   `.wpcf7-form-control` —la otra clase que CF7 pone en todo control— para
   ganarle en especificidad a la regla base: `input[type="email"]` cuenta como
   selector de atributo, o sea al mismo nivel que una clase. */
.edisas-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--edisas-error);
	background-color: color-mix(in srgb, var(--edisas-error) 9%, var(--wp--preset--color--surface-2));
}

.edisas-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 0.4rem;
	color: var(--edisas-error);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.45;
}

.edisas-form__aviso {
	margin-block: 0.35rem 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.edisas-form__aviso a {
	color: var(--wp--preset--color--accent);
}

.edisas-form__submit {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-block: clamp(1.25rem, 1rem + 0.8vw, 1.6rem) 0;
}

input.edisas-form__btn {
	padding-inline: 1.75rem;
	font-size: 1rem;
	cursor: pointer;
}

input.edisas-form__btn:disabled {
	opacity: 0.6;
	transform: none;
	box-shadow: none;
}

/* El spinner de CF7 llega en gris de escritorio (#23282d sobre #fbfbfc) y
   sobre el panel oscuro no se distingue. Pasa a la paleta y pierde el margen
   de 24px del plugin, que aquí lo pone el `gap` del flex. */
.edisas-form__submit .wpcf7-spinner {
	margin: 0;
	opacity: 1;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

.edisas-form__submit .wpcf7-spinner::before {
	background-color: var(--wp--preset--color--cyan);
}

/* --- Mensajes de CF7 ------------------------------------------------------ */

/* CF7 monta la caja con 2px de borde de color y sin fondo: se rehace entera
   —fondo teñido, 1px y radio del tema— y el color pasa también al texto, que
   es lo que de verdad se lee. */
.wpcf7 form .wpcf7-response-output {
	margin: clamp(1.25rem, 1rem + 0.8vw, 1.6rem) 0 0;
	padding: 0.85rem 1rem;
	border-width: 1px;
	border-radius: var(--edisas-radius-sm);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text);
}

.wpcf7 form.sent .wpcf7-response-output {
	color: var(--edisas-exito);
	border-color: color-mix(in srgb, var(--edisas-exito) 45%, transparent);
	background-color: color-mix(in srgb, var(--edisas-exito) 10%, transparent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	color: var(--edisas-aviso);
	border-color: color-mix(in srgb, var(--edisas-aviso) 45%, transparent);
	background-color: color-mix(in srgb, var(--edisas-aviso) 10%, transparent);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	color: var(--edisas-error);
	border-color: color-mix(in srgb, var(--edisas-error) 45%, transparent);
	background-color: color-mix(in srgb, var(--edisas-error) 10%, transparent);
}

/* --------------------------------------------------------------------------
   22. Módulo de productos (pymeFy.MX)

   Las capturas del producto vienen de un sitio claro y aterrizan en una página
   oscura. Sin marco, un PNG blanco se lee como un agujero de luz recortado en
   la maqueta. El marco lo convierte en pantalla: un bisel continuo de
   `surface-2` que rodea la imagen por los cuatro costados —34px arriba, donde
   viven los tres puntos, y 6px en el resto—, con el trazo de marca encendiendo
   su canto superior igual que el filo del header. Debajo, un halo ancho y muy
   bajo de azul eléctrico: la luz que derramaría una pantalla encendida, y lo
   que impide que el rectángulo claro quede pegado sobre el fondo.

   Radios concéntricos: 14px fuera, 6px de bisel, 8px dentro (14 − 6). Es el par
   `--edisas-radius` / `--edisas-radius-sm` del sistema, sin números nuevos.
   -------------------------------------------------------------------------- */

.edisas-captura {
	--edisas-captura-bar: 34px;
	--edisas-captura-bisel: 6px;

	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0 var(--edisas-captura-bisel) var(--edisas-captura-bisel);
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius);
	box-shadow:
		var(--edisas-shadow),
		0 34px 80px -48px color-mix(in srgb, var(--wp--preset--color--accent) 65%, transparent);
}

/* Barra del navegador. El trazo de marca se apoya en su canto superior, que es
   también el borde vivo del marco. */
.edisas-captura::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: var(--edisas-captura-bar);
	background-color: var(--wp--preset--color--surface-2);
	background-image: var(--edisas-trace);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 1px;
	border-block-end: 1px solid var(--wp--preset--color--border);
	pointer-events: none;
}

/* Los tres puntos: uno real y dos de sombra. En gris de texto secundario, no en
   semáforo —el marco acompaña a la captura, no compite con ella—. */
.edisas-captura::after {
	content: "";
	position: absolute;
	inset-block-start: calc((var(--edisas-captura-bar) - 10px) / 2);
	inset-inline-start: 14px;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--muted) 40%, transparent);
	box-shadow:
		18px 0 0 color-mix(in srgb, var(--wp--preset--color--muted) 40%, transparent),
		36px 0 0 color-mix(in srgb, var(--wp--preset--color--muted) 40%, transparent);
	pointer-events: none;
}

.edisas-captura img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	margin-block-start: var(--edisas-captura-bar);
	border-end-start-radius: var(--edisas-radius-sm);
	border-end-end-radius: var(--edisas-radius-sm);
}

/* El pie, si lo hay, vive sobre el bisel: es rótulo del marco, no de la página. */
.edisas-captura figcaption {
	margin: 0;
	padding: 0.7rem 0.35rem 0.15rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.45;
	text-align: center;
}

/* Etiqueta de producto. Mismo tracking y peso que el kicker: son la misma voz,
   una en línea y la otra encabezando sección. */
.edisas-badge-producto {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.7rem;
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--edisas-radius-sm);
	color: var(--wp--preset--color--cyan);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.edisas-producto-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 720px) {
	.edisas-producto-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Wordmark de pymeFy.MX recompuesto con la tipografía y la paleta de EDISAS:
   no es su logotipo, es el nombre del producto escrito en esta casa. La sílaba
   de marca en azul eléctrico, el dominio en secundario y a media altura —así el
   conjunto se lee como una sola palabra con un sufijo, no como tres piezas—.

   `align-items: baseline` mantiene el `.MX` sobre la misma línea que el resto
   por mucho que cambie su tamaño relativo.

   CONTRATO DE MARCADO (corrige el `<span>` que anotó Task 1): la raíz es un
   elemento de bloque —hoy `<p>`— con las dos sílabas en `<span>`:

	 <p class="edisas-pymefy-marca">pyme<span class="edisas-pymefy-marca__fy">Fy</span><span class="edisas-pymefy-marca__mx">.MX</span></p>

   Es `<p>` y no `<span>` por dos razones: el lockup es una línea de contenido,
   hermana de la etiqueta `.edisas-badge-producto` —que sí nace de un
   `wp:paragraph`—, y `.edisas-producto__marca > p` cuenta con ello para anular
   sus márgenes. El `display: inline-flex` de aquí abajo hace que se comporte
   igual que un `<span>`, así que el cambio no toca el render. */
.edisas-pymefy-marca {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--text);
	white-space: nowrap;
}

.edisas-pymefy-marca__fy {
	color: var(--wp--preset--color--accent);
}

/* El `margin` final descuenta el espacio fantasma que el tracking deja detrás
   de la X: sin él, el lockup nunca cierra a ras con lo que venga después. */
.edisas-pymefy-marca__mx {
	margin-inline: 0.06em -0.09em;
	font-size: 0.44em;
	font-weight: 700;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--muted);
}

/* Composición de la ficha de producto (pattern `edisas/producto-pymefy`).

   Como el cuerpo de las páginas de servicio, abre apretada: viene de su propio
   hero y no de otra sección, así que un `spacing|60` arriba abriría un vacío.

   El ritmo vertical lo lleva una sola retícula en el `__inner` —identidad,
   ventajas, capturas y cierre a la misma distancia— en lugar de un margen
   distinto por bloque. */
.edisas-producto {
	padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.edisas-producto__inner {
	display: grid;
	gap: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
}

/* Encabezado a dos columnas desde 960px: identidad a la izquierda, argumento a
   la derecha. Apilado, el wordmark quedaría flotando sobre un muro de texto y
   la etiqueta se leería como kicker de sección —y no lo es: habla del producto,
   no de la página—. */
.edisas-producto__head {
	display: grid;
	gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	align-items: start;
}

@media (min-width: 960px) {
	.edisas-producto__head {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
	}
}

/* La etiqueta va cosida al wordmark, no encima de la sección. Se alinean por el
   centro óptico: `baseline` no sirve porque el wordmark es `inline-flex` y
   arrastra su propia línea base. */
.edisas-producto__marca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	margin-block-end: 1.15rem;
}

.edisas-producto__marca > p {
	margin-block: 0;
}

/* Bajo el H1 de la página y bajo un wordmark que ya nombró el producto, el
   titular entra como subtítulo de sección: mismo cuerpo que el H2 del índice de
   servicios, no una segunda portada. */
.edisas-producto__titulo {
	margin-block: 0;
	max-inline-size: 22ch;
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.edisas-producto__texto {
	margin-block: 0 1.1rem;
	max-inline-size: 62ch;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.7;
}

.edisas-producto__texto:last-child {
	margin-block-end: 0;
}

.edisas-producto__card {
	display: flex;
	flex-direction: column;
}

.edisas-producto__card-text {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Estas tarjetas no llevan enlace. El levantamiento y el trazo encendido de
   `.edisas-card` prometen un clic que aquí no existe, así que se quedan quietas:
   el hover del sitio significa «esto lleva a algún lado» y no se gasta en
   decorar. Del componente se aprovecha lo que sí aplica —superficie, borde,
   radio y padding—. */
.edisas-producto__card:hover,
.edisas-producto__card:focus-within {
	transform: none;
	box-shadow: none;
	border-color: var(--wp--preset--color--border);
}

.edisas-producto__card:hover::before,
.edisas-producto__card:focus-within::before {
	opacity: 0;
}

/* Las capturas cierran la ficha y se acotan por debajo del ancho de la sección:
   a 1200px el PNG de 1600 llega casi a tamaño real y el rectángulo claro pesa
   más que todo lo que lo rodea. A 62rem el texto de dentro sigue leyéndose en
   escritorio y el fondo oscuro respira por los costados. */
/* La captura, centrada y con techo propio: a todo lo ancho del `__inner` la
   portada de un sitio claro se convierte en una lámina que le gana el pulso al
   texto oscuro que la rodea. 62rem la deja del tamaño de una pantalla, no de un
   cartel. */
.edisas-producto__captura {
	inline-size: 100%;
	max-inline-size: 62rem;
	margin-inline: auto;
}

.edisas-producto__contacto {
	margin-block: 1.35rem 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.edisas-producto__contacto a {
	color: var(--wp--preset--color--cyan);
	text-decoration: none;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--cyan) 40%, transparent);
	transition: color 0.25s var(--edisas-ease), border-color 0.25s var(--edisas-ease);
}

.edisas-producto__contacto a:hover {
	color: var(--wp--preset--color--text);
	border-block-end-color: currentColor;
}

/* Franja de producto en el home (pattern `edisas/producto-home`).

   Es el adelanto de `/productos/`, y por eso pesa menos que la ficha: copia a
   un lado, captura al otro, nada más. Va sobre el fondo base —no sobre
   `surface`— porque justo debajo entra la franja de IA, que sí cambia de plano:
   dos superficies elevadas seguidas se leerían como una sola banda enorme.

   Lo que la separa de las tarjetas de Servicios no es el fondo, es la luz: un
   resplandor bajo y ancho de `navy` recostado en el costado de la captura, el
   mismo campo del hero a un tercio de su fuerza. En este sitio ese resplandor
   aparece donde hay algo que es de la casa —el hero y su producto—; las
   secciones de servicio nunca lo llevan. */
.edisas-producto-home {
	isolation: isolate;
	/* El resplandor se derrama hacia el costado y no debe abrir scroll lateral. */
	overflow: hidden;
}

.edisas-producto-home::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -10%;
	inset-inline-end: -8%;
	inline-size: min(78%, 62rem);
	background-image: radial-gradient(
		ellipse 62% 68% at 62% 50%,
		color-mix(in srgb, var(--wp--preset--color--navy) 78%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--navy) 34%, transparent) 42%,
		transparent 72%
	);
	pointer-events: none;
}

.edisas-producto-home__inner {
	display: grid;
	align-items: center;
	gap: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
}

/* La captura pide más ancho que la copia: es apaisada (1600×597) y a partes
   iguales la columna de texto queda con más medida de la que necesita un solo
   párrafo. */
@media (min-width: 960px) {
	.edisas-producto-home__inner {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		gap: clamp(2.5rem, 0.75rem + 4.4vw, 4.5rem);
	}
}

/* La etiqueta es un `inline-flex` dentro de un `<p>`: hay que devolverle los
   márgenes del bloque, que el componente no trae. */
.edisas-producto-home .edisas-badge-producto {
	margin-block: 0 1.2rem;
}

/* Un escalón por debajo del H2 de Servicios: esta franja acompaña a la rejilla
   que viene de arriba, no abre un capítulo nuevo. */
.edisas-producto-home__title {
	margin-block: 0 0.9rem;
	max-inline-size: 20ch;
	font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.35rem);
	line-height: 1.14;
	letter-spacing: -0.025em;
}

.edisas-producto-home__text {
	margin-block: 0 1.75rem;
	max-inline-size: 46ch;
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

.wp-block-buttons.edisas-producto-home__cta {
	margin-block: 0;
}

/* Apilada, la captura se acota y se centra: a ancho completo el rectángulo
   claro pesa más que el párrafo que sí lleva el mensaje, y por debajo de 768px
   el texto de dentro ya no se lee —queda como atmósfera, no como información—. */
@media (max-width: 959px) {
	.edisas-producto-home__captura {
		inline-size: 100%;
		max-inline-size: 34rem;
		margin-inline: auto;
	}

	/* Y el resplandor baja con ella. En una sola columna, dejarlo en el costado
	   deja una mancha azul iluminando el aire a la derecha del párrafo; detrás
	   de la captura vuelve a ser lo que es: la luz que echa una pantalla. */
	.edisas-producto-home::before {
		inset-block: auto 0;
		inset-inline: -12%;
		inline-size: auto;
		block-size: 64%;
		background-image: radial-gradient(
			ellipse 56% 58% at 50% 62%,
			color-mix(in srgb, var(--wp--preset--color--navy) 62%, transparent) 0%,
			transparent 74%
		);
	}
}

/* --------------------------------------------------------------------------
   23. Movimiento reducido
   -------------------------------------------------------------------------- */

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

	html.js .reveal {
		opacity: 1;
		transform: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   24. Preguntas frecuentes (páginas de servicio)

   Lista de preguntas y respuestas dentro de la columna de prosa: sin acordeón
   —el contenido es corto y se lee de corrido— y sin tarjetas, que competirían
   con la rejilla del proceso justo encima.

   El grupo alterna `q / a / q / a`, así que la separación entre pares no puede
   colgar de un selector hermano genérico: el filo vive en cada pregunta como
   `border-block-start`, y el hueco se reparte entre el `padding` de la pregunta
   y el margen de la respuesta anterior para que la línea caiga centrada en el
   aire que separa un par del siguiente.

   Va después de la sección 23 sin quedar fuera de su alcance: el bloque de
   movimiento reducido apaga animaciones y transiciones con `!important` sobre
   `*`, así que gana venga antes o después. Aquí, además, no hay ninguna.
   -------------------------------------------------------------------------- */

.edisas-faq {
	--edisas-faq-gap: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);

	margin-block: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0;
}

/* El grupo es `is-layout-flow`: sin esto el margen vertical del flujo se
   sumaría al hueco que ya reparten pregunta y respuesta. */
.edisas-faq > * {
	margin-block: 0;
}

.edisas-faq__q {
	margin-block: 0 0.5rem;
	padding-block-start: var(--edisas-faq-gap);
	border-block-start: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-size: 1.1875rem;
	line-height: 1.25;
}

/* La primera pregunta ya tiene encima el H2 del apartado: un filo más ahí
   leería como una raya suelta bajo el titular. */
.edisas-faq__q:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.edisas-faq__a {
	margin-block: 0 var(--edisas-faq-gap);
	max-inline-size: 68ch;
	color: var(--wp--preset--color--muted);
	line-height: 1.75;
}

.edisas-faq__a:last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   25. Párrafo destacado (páginas de servicio)

   Para el dato que decide una contratación y que se pierde si se lee como un
   párrafo más —hoy, el diagnóstico gratuito de la página de reparación—.

   Filo de acento a la izquierda y fondo apenas levantado en vez de una caja
   completa: la página ya tiene tarjetas (proceso) y listas con palomita, y una
   tercera figura con borde propio competiría con ellas. Aquí el peso lo pone la
   posición, no el marco.
   -------------------------------------------------------------------------- */

/* `.edisas-prosa > p` también fija `margin-block`, y con un selector más
   específico: sin repetir el descendiente aquí, el aire de arriba se perdería y
   el bloque quedaría pegado al párrafo anterior. */
.edisas-prosa > p.edisas-destacado,
.edisas-destacado {
	margin-block: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	padding: clamp(1rem, 0.85rem + 0.7vw, 1.35rem) clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 0.5rem 0.5rem 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.edisas-destacado strong {
	color: var(--wp--preset--color--cyan);
}
