/*
Theme Name: SVC Child
Template: twentytwentyfive
Description: Child theme de Twenty Twenty-Five para SV Consultores — tokens, patrones y plantillas propios sobre la base FSE del tema padre.
Author: SV Consultores
Version: 0.4.0
Text Domain: svc-child
*/

/*
 * theme.json ya pone settings.useRootPaddingAwareAlignments:false y
 * styles.spacing.padding en 0 — wp_get_global_stylesheet() ya no emite
 * ninguna regla .alignfull ni la variable --wp--style--root--padding-left
 * en ningún origen (núcleo, tema padre ni el merge final). Pese a eso, el
 * padding-left heredado de twentytwentyfive (~45px fluido a 1440px, su
 * var:preset|spacing|50) sigue apareciendo en el DOM real sobre CADA sección
 * alignfull del sitio — sumado al padding de 64px que cada patrón ya pone a
 * mano, fiel a UI.dc.html (64px reales, no ~109px). No se pudo aislar qué
 * capa exacta de WP sigue emitiéndolo — se neutraliza aquí, en la única hoja
 * de estilos que controlo con certeza, en vez de seguir a ciegas. El padding
 * real vuelve a 64px tras esto.
 */
.alignfull {
	padding-left: 0;
	padding-right: 0;
}

/*
 * El núcleo imprime `:where(.wp-site-blocks) > * { margin-block-start:
 * 1.2rem; margin-block-end: 0 }` como fallback de blockGap cuando el tema no
 * define styles.spacing.blockGap — no vive en ningún archivo de este tema,
 * lo emite wp_get_global_stylesheet() antes de este stylesheet. Ese 1.2rem
 * metía un hueco visible entre secciones alignfull pegadas a propósito
 * (hero navy → franja de co-marca, sin separación). Se neutraliza aquí: el
 * selector con clase (especificidad 0,1,0) le gana al `:where()` del núcleo
 * (especificidad 0) sin necesitar !important.
 */
.wp-site-blocks>* {
	margin-block-start: 0;
}

/* Tamaño compartido por las migas claras y navy; Inicio queda excluido. */
.svc-migas {
	font-size: var(--wp--preset--font-size--xs);
}

body:not(.home) .svc-migas {
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

/*
 * Los patrones reutilizan el padding lateral de 64px de UI.dc.html
 * (escritorio) en sus secciones a sangre completa. A <=600px ese valor deja
 * muy poco ancho de línea y parte palabras largas del H1 del hero a mitad
 * ("obligaci-ones"). En vez de tocar cada patrón, se redefine el propio
 * token de espaciado — sigue siendo "la única fuente de tokens", sólo que
 * con un valor distinto bajo ese breakpoint, igual que ya hace la escala
 * tipográfica fluida.
 */
@media (max-width: 600px) {
	:root {
		--wp--preset--spacing--64: 1.5rem;
	}
}

/* Escala relativa al navegador: A− / A / A+ = 87.5 / 100 / 112.5%.
   El estado compartido se aplica en wp_head antes del primer pintado. */
html { font-size: 100%; }
html[data-svc-escala="87.5"] { font-size: 87.5%; }
html[data-svc-escala="112.5"] { font-size: 112.5%; }

/*
 * Alto contraste: en vez de reescribir cada componente del sitio a mano,
 * se remapean las MISMAS variables de theme.json que todo el CSS de este
 * archivo y todos los bloques ya consumen (`var(--wp--preset--color--*)`)
 * — es la fuente de color única del tema, así que redefinirlas aquí basta
 * para que tarjetas, nav, footer, calendario, formularios, etc. seguan
 * fondo negro/texto blanco/acento aclarado sin overrides por componente.
 * Excepción esperada: un puñado de colores decorativos puntuales del
 * archivo están en hex literal (verde de WhatsApp, placeholders de redes
 * sociales, franja de co-marca) en vez de token — esos no cambian aquí, a
 * propósito, para no tocar más CSS del necesario para esta función.
 */
html[data-svc-contraste="alto"] {
	--wp--preset--color--primario: #000000;
	--wp--preset--color--primario-claro: #000000;
	--wp--preset--color--primario-oscuro: #000000;
	--wp--preset--color--acento: #ffb067;
	--wp--preset--color--acento-oscuro: #ffb067;
	--wp--preset--color--texto: #ffffff;
	--wp--preset--color--texto-suave: #e6e6e6;
	--wp--preset--color--base: #000000;
	--wp--preset--color--base-alt: #000000;
	--wp--preset--color--borde: #ffffff;
	--wp--preset--color--borde-campo: #ffffff;
}

html[data-svc-contraste="alto"] body {
	background: #000000;
	color: #ffffff;
}

/*
 * "base" hace doble función en este tema: fondo claro por defecto (tarjetas,
 * header, `body` vía theme.json `styles.color.background`) — remapeado a
 * negro arriba, correcto para ese rol — Y color de texto blanco explícito
 * sobre secciones YA oscuras (hero, footer, migas navy, intro de Contacto:
 * "has-base-color"/`textColor:"base"`). Remapear la MISMA variable rompía
 * ese segundo uso (texto negro sobre fondo ya negro, invisible — bug real
 * encontrado probando en vivo con Playwright). Se fuerza blanco literal
 * sólo para ese rol de texto, sin tocar la variable de fondo.
 */
html[data-svc-contraste="alto"] .has-base-color {
	color: #ffffff !important;
}

html[data-svc-contraste="alto"] .has-primario-color {
	color: #ffffff !important;
}

/*
 * Mismo bug que ".has-base-color" arriba, pero en reglas propias de este
 * archivo (no la clase generada por el núcleo): estos componentes fijan
 * `color`/`outline-color` a `var(--wp--preset--color--base)` a propósito,
 * sobre un fondo YA oscuro (`primario`/`primario-oscuro`, negro en alto
 * contraste) — texto/anillo blanco que necesitan seguir blancos, no la
 * variable de fondo que acaban de heredar negra. Encontrado con el mismo
 * método (Playwright en vivo): el H1 del hero de portada desaparecía.
 */
html[data-svc-contraste="alto"] .svc-nav-principal .wp-block-navigation__responsive-container-open,
html[data-svc-contraste="alto"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
html[data-svc-contraste="alto"] .svc-nav-principal .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
html[data-svc-contraste="alto"] .svc-caltrib-grid__dia--seleccionado,
html[data-svc-contraste="alto"] .svc-caltrib-chip,
html[data-svc-contraste="alto"] .svc-pildora-cercania,
html[data-svc-contraste="alto"] .svc-monograma,
html[data-svc-contraste="alto"] .svc-hero-3c__titulo {
	color: #ffffff !important;
}

html[data-svc-contraste="alto"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	border-bottom-color: #ffffff !important;
}

html[data-svc-contraste="alto"] .has-primario-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible,
html[data-svc-contraste="alto"] .has-primario-oscuro-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible,
html[data-svc-contraste="alto"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	outline-color: #ffffff !important;
}

/*
 * Tercera ronda del mismo bug, esta vez con "primario": en el resto del
 * sitio ese token es casi siempre texto/acento navy SOBRE una superficie
 * clara ("base"/"base-alt" — logo del header, ítem de nav activo, calendario
 * tributario, franja co-marca, etiqueta de reseña...). Como esas superficies
 * ya se volvieron negras arriba, un texto que además se vuelve negro
 * desaparece — encontrado en vivo en /servicios/ (el ítem de nav activo
 * "Servicios" no se veía) y confirmado por auditoría del resto de usos de
 * "color: var(--primario)" en este archivo.
 */
html[data-svc-contraste="alto"] .svc-whatsapp-flotante__title,
html[data-svc-contraste="alto"] .svc-logo__titulo,
html[data-svc-contraste="alto"] .svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
html[data-svc-contraste="alto"] .svc-enlace-subrayado,
html[data-svc-contraste="alto"] .svc-calc-tab.is-activa,
html[data-svc-contraste="alto"] .svc-cta-boton-expandir,
html[data-svc-contraste="alto"] .svc-caltrib-panel__titulo,
html[data-svc-contraste="alto"] .svc-caltrib-panel.is-expandida .svc-caltrib-panel__expandir,
html[data-svc-contraste="alto"] .svc-caltrib-panel__expandir:hover,
html[data-svc-contraste="alto"] .svc-caltrib-tab.is-activa,
html[data-svc-contraste="alto"] .svc-caltrib-mes-select,
html[data-svc-contraste="alto"] .svc-caltrib-mes-boton,
html[data-svc-contraste="alto"] .svc-caltrib-item__fecha,
html[data-svc-contraste="alto"] .svc-caltrib-item__leermas,
html[data-svc-contraste="alto"] .svc-caltrib-lista-completa__separador,
html[data-svc-contraste="alto"] .svc-resena-empresa,
html[data-svc-contraste="alto"] .svc-hero-cobrand__nombre-top,
html[data-svc-contraste="alto"] .svc-hero-cobrand__info-linea1 {
	color: #ffffff !important;
}

html[data-svc-contraste="alto"] .svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	border-bottom-color: #ffffff !important;
}

/*
 * theme.json fija `styles.elements.link.color.text: primario-claro` como
 * color GLOBAL de cualquier <a> sin regla más específica — primario-claro
 * también se volvió negro arriba. Rompía, por ejemplo, los enlaces sueltos
 * del footer (Navegación/Temas del blog: <li><a>, sin clase propia, sin
 * ninguna regla de este archivo que los cubra). Un <a> con color explícito
 * de un componente (migas, tarjetas, etc.) sigue ganando por especificidad
 * — esta regla sólo llena el hueco de los enlaces "sin estilizar".
 */
html[data-svc-contraste="alto"] a {
	color: #ffffff;
}

/* Mismo hueco que el tema oscuro más abajo: "primario" también aparece en
   `style` inline de varios patrones PHP (aside-relacionados-*.php y afines), no
   sólo en este archivo. */
html[data-svc-contraste="alto"] [style*="color:var(--wp--preset--color--primario)"] {
	color: #ffffff !important;
}

/*
 * Tema oscuro (reemplaza a "Alto contraste" en la UI — ese toggle queda
 * oculto con `hidden` en patterns/header.php, no borrado). Mismo mecanismo
 * de remapeo de variables que arriba, con una paleta menos extrema (gris
 * azulado oscuro, no negro puro; texto hueso, no blanco puro) y las MISMAS
 * correcciones de colisión ya encontradas y validadas en vivo con Playwright
 * para "Alto contraste": "base"/"primario" hacen doble función (fondo Y
 * texto-sobre-fondo-oscuro a la vez) en este tema, así que remapear la
 * variable sin más rompe el segundo uso. "primario" NO se toca aquí — ya es
 * un navy oscuro que funciona tal cual sobre la nueva página oscura (hero,
 * footer, franja de accesibilidad no cambian de tono).
 */
html[data-svc-tema="oscuro"] {
	--wp--preset--color--acento-oscuro: #ff8a3d;
	--wp--preset--color--texto: #e7ecf3;
	--wp--preset--color--texto-suave: #97a3b8;
	--wp--preset--color--base: #161b26;
	--wp--preset--color--base-alt: #10141c;
	--wp--preset--color--borde: #2a3244;
	--wp--preset--color--borde-campo: #2a3244;
}

html[data-svc-tema="oscuro"] body {
	background: #10141c;
	color: #e7ecf3;
}

html[data-svc-tema="oscuro"] .has-base-color {
	color: #ffffff !important;
}

/* Mismo bug, clase generada por el núcleo en vez de inline style: tarjetas
   de Software y de Herramienta (templates/page-software.html,
   page-herramienta.html), y el teléfono del header (patterns/header.php). */
html[data-svc-tema="oscuro"] .has-primario-color {
	color: #e7ecf3 !important;
}

html[data-svc-tema="oscuro"] .svc-nav-principal .wp-block-navigation__responsive-container-open,
html[data-svc-tema="oscuro"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
html[data-svc-tema="oscuro"] .svc-nav-principal .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
html[data-svc-tema="oscuro"] .svc-caltrib-grid__dia--seleccionado,
html[data-svc-tema="oscuro"] .svc-caltrib-chip,
html[data-svc-tema="oscuro"] .svc-pildora-cercania,
html[data-svc-tema="oscuro"] .svc-monograma,
html[data-svc-tema="oscuro"] .svc-hero-3c__titulo {
	color: #ffffff !important;
}

html[data-svc-tema="oscuro"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	border-bottom-color: #ffffff !important;
}

html[data-svc-tema="oscuro"] .has-primario-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible,
html[data-svc-tema="oscuro"] .has-primario-oscuro-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible,
html[data-svc-tema="oscuro"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	outline-color: #ffffff !important;
}

html[data-svc-tema="oscuro"] .svc-whatsapp-flotante__title,
html[data-svc-tema="oscuro"] .svc-logo__titulo,
html[data-svc-tema="oscuro"] .svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
html[data-svc-tema="oscuro"] .svc-enlace-subrayado,
html[data-svc-tema="oscuro"] .svc-calc-tab.is-activa,
html[data-svc-tema="oscuro"] .svc-cta-boton-expandir,
html[data-svc-tema="oscuro"] .svc-caltrib-panel__titulo,
html[data-svc-tema="oscuro"] .svc-caltrib-panel.is-expandida .svc-caltrib-panel__expandir,
html[data-svc-tema="oscuro"] .svc-caltrib-panel__expandir:hover,
html[data-svc-tema="oscuro"] .svc-caltrib-tab.is-activa,
html[data-svc-tema="oscuro"] .svc-caltrib-mes-select,
html[data-svc-tema="oscuro"] .svc-caltrib-mes-boton,
html[data-svc-tema="oscuro"] .svc-caltrib-item__fecha,
html[data-svc-tema="oscuro"] .svc-caltrib-item__leermas,
html[data-svc-tema="oscuro"] .svc-caltrib-lista-completa__separador,
html[data-svc-tema="oscuro"] .svc-resena-empresa,
html[data-svc-tema="oscuro"] .svc-hero-cobrand__nombre-top,
html[data-svc-tema="oscuro"] .svc-pasos__titulo,
html[data-svc-tema="oscuro"] .svc-hero-cobrand__info-linea1 {
	color: #e7ecf3 !important;
}

html[data-svc-tema="oscuro"] .svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	border-bottom-color: #e7ecf3 !important;
}

html[data-svc-tema="oscuro"] a {
	color: #e7ecf3;
}

/*
 * Cuarta ronda, encontrada navegando fichas de Servicio/Software (patterns/
 * aside-relacionados-servicio.php, aside-relacionados-software.php,
 * fila-equipo-servicios.php): "primario"
 * como color de TEXTO también aparece en `style` inline de varios patrones
 * PHP, no sólo en este archivo — se había auditado sólo style.css la vez
 * pasada. Mismo bug (navy sobre la tarjeta ya oscura), mismo arreglo, pero
 * por selector de atributo en vez de listar cada clase: todos esos inline
 * comparten el mismo fragmento exacto de `style`.
 */
html[data-svc-tema="oscuro"] [style*="color:var(--wp--preset--color--primario)"] {
	color: #e7ecf3 !important;
}

/*
 * Botón flotante de WhatsApp — reproduce el componente de UI.dc.html
 * (13 apariciones idénticas en el archivo): en escritorio es una píldora
 * blanca con círculo verde + icono + texto de dos líneas; en móvil
 * (<=600px, breakpoint del header) se reduce a un círculo verde de solo
 * icono, como en el mockup "Móvil Inicio".
 */
/*
 * Contenedor compartido de los botones flotantes (Calendario Tributario +
 * WhatsApp) — antes esta posición fija vivía en .svc-whatsapp-flotante
 * directamente; ahora vive un nivel arriba para que ambos botones se apilen
 * y se muevan juntos con el mismo scroll-anchor al footer (whatsapp-
 * flotante.js). El orden en el DOM decide el apilado: primer hijo arriba.
 */
.svc-flotantes {
	position: fixed;
	right: 32px;
	bottom: 32px;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	/* La caja del contenedor mide como el hijo más ancho (la píldora de
	   WhatsApp, ~262px) y es transparente en los huecos: sin esto tapaba clics
	   y hover del contenido de atrás. Sólo los 3 botones reciben el puntero
	   (pointer-events se hereda a sus descendientes). */
	pointer-events: none;
}

.svc-flotantes>* {
	pointer-events: auto;
}

.svc-whatsapp-flotante__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0.5rem 1.375rem 0.5rem 0.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radius--full);
	box-shadow: 0 10px 30px rgba(6, 32, 63, 0.18);
	text-decoration: none;
}

.svc-whatsapp-flotante__icon {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	/* Verde convencional de marca WhatsApp — no forma parte de la paleta
	   semántica del sitio, igual que en UI.dc.html (13 apariciones de #25D366). */
	background: #25d366;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svc-whatsapp-flotante__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.svc-whatsapp-flotante__title {
	font: 600 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
}

.svc-whatsapp-flotante__subtitle {
	font: 400 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

@media (max-width: 600px) {
	.svc-flotantes {
		right: 16px;
		bottom: 16px;
		gap: 12px;
	}

	.svc-whatsapp-flotante__link {
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: 0 8px 22px rgba(6, 32, 63, 0.28);
		border-radius: 50%;
	}

	.svc-whatsapp-flotante__icon {
		width: 56px;
		height: 56px;
	}

	.svc-whatsapp-flotante__text {
		display: none;
	}
}

/*
 * El reposo del stack flotante (.svc-flotantes) es el mismo en todas las
 * páginas — sin override por plantilla. Evitar que tape el footer se
 * resuelve midiendo su posición real en vivo (whatsapp-flotante.js). La
 * tarjeta CTA lateral (.svc-aside-fija) no se esquiva: los widgets
 * (z-index 100) quedan por encima de ella.
 */

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

/*
 * El anillo de foco global usa "primario-claro" (#1B4A8F) sobre CUALQUIER
 * fondo, pero contra los fondos navy del propio sitio (primario #0A2A5A,
 * primario-oscuro #06203F) el contraste real es de sólo 1.62:1 / 1.88:1 —
 * muy por debajo del 3:1 que exige WCAG 1.4.11 para indicadores de foco
 * no-texto. Esto hacía el foco casi invisible en: los botones del hero, el
 * enlace "Inicio" de las migas de pan de Servicios/Software/Software-item/
 * Herramientas, el botón "Escríbanos" de la caja CTA de sidebar-blog, y
 * todos los enlaces del footer.
 * Se resuelve cambiando el color del anillo a "base" (blanco) sólo cuando
 * el fondo ambiente real es navy, con contraste >=14:1 en ambos casos —
 * sin tocar el token global ni el resto del sitio (offset:2px deja el
 * anillo fuera de la caja del control, así que lo que importa es el fondo
 * que queda detrás, no el relleno del propio control).
 * Excepción necesaria: cta-formulario anida una tarjeta blanca
 * (has-base-background-color) DENTRO de su columna navy — el único control
 * real ahí (el botón "Enviar solicitud") vuelve a tener fondo real claro,
 * así que recupera el anillo oscuro por defecto (regla más específica,
 * gana por especificidad de selector, sin !important).
 * Segunda excepción: el propio `wp:navigation` de WP core estampa
 * `has-primario-background-color` en su
 * `.wp-block-navigation__responsive-container` de forma PERMANENTE (es la
 * clase que representa `overlayBackgroundColor`), exista o no overlay activo
 * — a 1440px ese contenedor se ve inline sobre el header BLANCO, no sobre
 * navy. Sin esta excepción el nav de escritorio (y el botón del submenú
 * "Software") quedaban con anillo blanco invisible sobre fondo blanco. Se
 * restringe el anillo claro al único momento real en que el fondo SÍ es
 * navy: cuando el propio núcleo añade `.is-menu-open` (overlay realmente
 * desplegado, pantalla completa en móvil/tableta).
 */
.has-primario-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.has-primario-oscuro-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

.has-primario-background-color .has-base-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.has-primario-background-color .has-base-alt-background-color :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--primario-claro);
}

.wp-block-navigation__responsive-container.has-primario-background-color:not(.is-menu-open) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--primario-claro);
}

/*
 * Área táctil mínima 44×44px. El botón hamburguesa ("Abrir el menú") y el
 * botón de cerrar (X) del overlay son, por defecto en
 * wp-includes/blocks/navigation/style.css, una caja de exactamente 24×24px
 * sin relleno (`padding:0` del núcleo) — bien por debajo de 44×44. Se
 * agranda sólo el área clicable con padding; el ícono SVG interno sigue
 * midiendo 24×24 (tamaño fijado por el propio núcleo), sin cambio visual
 * de composición.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 10px;
}

.wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
}

/*
 * Botón hamburguesa en cuadrado navy (mockup): en todo el rango responsive
 * (<=1024px, celular + tableta) donde el núcleo colapsa el nav a este botón
 * — el "cerrar" (X) del overlay no se toca, sólo el de abrir.
 */
@media (max-width: 1024px) {
	.svc-nav-principal .wp-block-navigation__responsive-container-open {
		background: var(--wp--preset--color--primario);
		color: var(--wp--preset--color--base);
		border-radius: var(--wp--custom--radius--md);
	}
}

/*
 * Fila del header en responsive (<=1024px): el mockup pide sólo
 * logo + botón "Solicitar consulta" + hamburguesa, ambos a la derecha —
 * sin el bloque de horario/teléfono (svc-header-actions > :first-child) y
 * con el botón ANTES que la hamburguesa (orden inverso al del marcado:
 * nav, actions, dentro de "svc-header-right"). `order` reordena
 * visualmente sin tocar el HTML. La fila (2 hijos ya: logo y
 * svc-header-right) sigue con el "justifyContent:space-between" de
 * fábrica — con sólo 2 hijos eso ya empuja logo a la izquierda y
 * svc-header-right al borde derecho, sin overrides.
 * Alto del botón "Solicitar consulta" igualado a los 44px reales de la
 * hamburguesa (ver nota WCAG de línea 190) para que ambos controles de
 * la derecha queden a la misma altura.
 */
@media (max-width: 1024px) {
	.svc-header-actions> :first-child {
		display: none;
	}

	.svc-header-actions {
		order: 2;
	}

	.svc-nav-principal {
		order: 3;
	}

	.svc-header-actions .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		height: 44px;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/*
 * En celular real (<600px) el botón "Solicitar consulta" desaparece del
 * header — sólo queda logo + hamburguesa; la acción sigue disponible
 * dentro del propio overlay del menú. Por encima (tableta, 600-1024px)
 * el botón se conserva, según se pidió antes.
 * Selector de 2 clases: el "display:flex" del núcleo llega vía
 * "body .is-layout-flex" (0,1,1) — un solo ".svc-header-actions" (0,1,0)
 * pierde ese empate de especificidad y el botón seguía visible.
 */
@media (max-width: 599px) {
	.svc-header-actions.is-layout-flex {
		display: none;
	}
}

/*
 * Mismo problema en el botón/ícono del submenú "Software" (escritorio):
 * `.wp-block-navigation-submenu__toggle` mide 0.6em (12px) de lado, con
 * `padding:0` y `width`/`height` explícitos en el núcleo — mucho más
 * chico que 44×44. Como el propio SVG interno hereda su tamaño de este
 * mismo elemento (`svg{width:inherit;height:inherit}` en el núcleo), no se
 * puede simplemente agrandar `width`/`height` sin agrandar también la
 * flechita visualmente. Se fuerza `box-sizing:content-box` sólo aquí y se
 * agranda con padding — el padding no participa del valor computado de
 * `width` que el SVG hereda, así que la flecha sigue viéndose igual de
 * chica, pero la caja clicable real pasa a 44×44 (12px + 16px×2).
 */
.svc-nav-principal .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
	box-sizing: content-box;
	padding: 16px;
}

/*
 * Ícono de submenú (Servicios/Software/Herramientas): el chevron por
 * defecto del núcleo es un trazo abierto sin relleno (ver
 * wp-includes/blocks/navigation-link/shared/render-submenu-icon.php,
 * `stroke-width:1.5` sobre un path en V, sin `fill`) — no coincide con
 * UI.dc.html, que pide un triángulo sólido apuntando abajo. Se oculta el
 * SVG del núcleo y se dibuja el triángulo con el truco de borde CSS
 * (`::after`), del mismo color que el texto del ítem (currentColor seguirá
 * los mismos estados de color activo/hover ya definidos arriba). El
 * `.wp-block-navigation-item` es flex con `align-items:center`, así que el
 * triángulo (caja de padding simétrico) queda centrado en el alto total del
 * <li> — pero el <a> de texto tiene `padding-bottom:8px` (la reserva del
 * borde de "ítem activo", arriba) SIN padding-top, así que el texto no
 * ocupa el alto completo del <li>: queda corrido hacia arriba dentro de su
 * propia caja. Centrar el triángulo contra el <li> completo lo deja ~4px
 * (mitad del padding-bottom asimétrico) por debajo del centro óptico del
 * texto. Se corrige en el bloque de escritorio (línea ~1190) con un ajuste
 * fino de esos 4px — no aquí, porque el valor depende del padding de 6px
 * sólo activo a partir de esa media query.
 */
.svc-nav-principal .wp-block-navigation__submenu-icon svg {
	display: none;
}

.svc-nav-principal .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.svc-nav-principal .wp-block-navigation__submenu-icon::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid currentColor;
}

.svc-nav-principal .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon::after {
	transform: rotate(180deg);
}

/*
 * El enlace "DTE Masters" del submenú "Software", ya con el submenú
 * desplegado, medía 2px de ancho de anillo (offset:0, blanco) en vez de
 * los 3px que confirma el resto del sitio. Causa real: abrir este submenú
 * sólo es posible con un clic de mouse, y comparado con el mismo elemento
 * enfocado por teclado (Tab), abrirlo con clic apaga el `:focus-visible`
 * del navegador para el enfoque posterior — el enlace sigue calificando
 * para `:focus` liso, y ahí la única regla que sigue aplicando es la del
 * propio `twentytwentyfive`
 * (`:where(.wp-site-blocks :focus){outline-width:2px}`), ya que este tema
 * hijo sólo define el anillo de 3px sobre `:focus-visible` (a propósito,
 * para no mostrar anillo en clics de mouse en el resto del sitio). El
 * resto de la navegación no depende de un clic previo para ser alcanzable,
 * así que no expone este caso. Se refuerza el mismo 3px también sobre
 * `:focus` (no sólo `:focus-visible`), acotado sólo a los enlaces reales
 * dentro de un submenú desplegado — no cambia el comportamiento de
 * `:focus` liso en el resto de la navegación ni del sitio. Mismo esquema
 * de color que las reglas de foco de más arriba: `primario-claro` sobre
 * el fondo claro del dropdown de escritorio, `base` (blanco) cuando el
 * overlay móvil/tableta (fondo navy) está realmente abierto
 * (`.is-menu-open`).
 */
.svc-nav-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	outline-width: 3px;
	outline-style: solid;
	outline-color: var(--wp--preset--color--primario-claro);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	outline-color: var(--wp--preset--color--base);
}

/*
 * Estado activo del ítem de nav actual (Inicio/Servicios/Software/
 * Herramientas/Nosotros/Blog/Contacto), a juego con UI.dc.html (id 1p,
 * ítem activo: peso 600, color `primario`, borde inferior 3px `primario`;
 * el resto reserva el mismo borde en transparente para no saltar de tamaño
 * al activarse). La clase `.current-menu-item` la añade `functions.php`
 * (`svc_child_marcar_enlace_nav_activo`) — el núcleo sólo la pone solo
 * cuando el enlace apunta a un `id` de post/página, no a un `url` de texto
 * plano como usan estos 7 ítems. Mismo elemento se reutiliza dentro del
 * overlay móvil/tableta (fondo navy vía `overlayBackgroundColor:"primario"`),
 * así que ahí el color activo cambia a `base` (blanco) — igual que ya hace
 * el anillo de foco más arriba — para no quedar navy sobre navy.
 */
.svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
	border-bottom: 3px solid transparent;
	padding-bottom: 0.5rem;
	transition: color 120ms ease, border-bottom-color 120ms ease;
	/* Área táctil: el nav en línea de escritorio medía 31-42px de alto real
	   (sin min-height propio, sólo el padding-bottom de arriba) — bajo el
	   mínimo de 44px. El overlay móvil ya tenía su propio min-height (más
	   específico, línea ~762) y no lo pisa esto. */
	min-height: 24px;
	min-width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ítems del nav en línea de escritorio (>1024px, ver breakpoint de la
   hamburguesa más arriba) más gruesos que el cuerpo del sitio — pedido
   explícito, sólo para el nav en línea, no para la lista del overlay
   móvil/tableta (esa conserva el peso 400 por defecto). */
@media (min-width: 1025px) {
	.svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
		font-weight: 500;
	}
}

.svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primario);
	font-weight: 700;
	border-bottom-color: var(--wp--preset--color--primario);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--base);
}

/*
 * Hover del ítem de nav (mismo panel id="1p", "NAVEGACIÓN · ESTADOS DEL
 * MENÚ": reposo/hover/página actual). El texto activo se excluye — ya
 * comunica "aquí está" con su propio color+peso, no debe parpadear a los
 * colores de hover al pasar el mouse. Dentro del overlay móvil/tableta
 * (fondo navy) `acento-oscuro` cae a 2.69:1 — se usa `acento` en su lugar
 * (6:1 sobre navy, medido), el mismo tono que ya pinta el borde inferior
 * en ambos contextos.
 */
.svc-nav-principal .wp-block-navigation__container>.wp-block-navigation-item:not(.current-menu-item)>.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--acento-oscuro);
	border-bottom-color: var(--wp--preset--color--acento);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.current-menu-item)>.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--acento);
	border-bottom-color: var(--wp--preset--color--acento);
}

/*
 * Estado activo de una SUB-categoría dentro de un submenú desplegado
 * (Servicios/Software): las 6/3 sub-categorías se veían todas iguales sin
 * importar en cuál estuviera parado el visitante.
 * `svc_child_marcar_enlace_nav_activo()` SÍ marca `current-menu-item` en el
 * hijo real (corre sobre cualquier `core/navigation-link`, sin importar el
 * nivel de anidamiento), pero las 2 reglas de "ítem activo" de arriba sólo
 * apuntan a hijos DIRECTOS de `.wp-block-navigation__container` (el nivel
 * superior, con el selector `>`) — un hijo dentro de
 * `.wp-block-navigation__submenu-container` nunca calificaba. El fondo del
 * desplegable es SIEMPRE navy aquí, tanto en el clic de escritorio como en
 * el overlay móvil (a diferencia del nivel superior, que cambia de fondo
 * claro a navy sólo en el overlay) — basta una sola regla para los 2
 * contextos, sin duplicar por `.is-menu-open`.
 */
.svc-nav-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: 3px solid transparent;
}

.svc-nav-principal .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	font-weight: 700;
	border-bottom-color: var(--wp--preset--color--acento);
}

.svc-nav-principal .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.current-menu-item)>.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--acento);
}

/*
 * Overlay móvil/tableta ("Abrir el menú") mal dispuesto. Causa raíz:
 * `svc-nav-principal` fija `justifyContent:"right"` para el nav EN LÍNEA de
 * escritorio, que el núcleo traduce a la clase `.items-justified-right` →
 * `align-items:flex-end`.
 * Esa regla se sigue aplicando dentro del overlay, donde el propio núcleo
 * cambia `flex-direction` a `column` — el resultado es una pila vertical
 * alineada al borde DERECHO en vez de ocupar el ancho completo, con el
 * `.wp-block-navigation__responsive-container` en `padding:0`, así que el
 * texto queda pegado (a veces cortado) contra el borde real de la pantalla.
 * UI.dc.html ("Móvil menú abierto", línea 2875) muestra el patrón contrario:
 * filas de ancho completo, alineadas a la izquierda, min-height 56px,
 * padding lateral 20px, con un divisor `border-bottom:1px solid #163A6B`
 * bajo cada fila. Se reproduce aquí, acotado a `.is-menu-open` para no tocar
 * el nav en línea de escritorio (que sí debe seguir alineado a la derecha).
 * El divisor va en `.wp-block-navigation-item` (el `<li>` contenedor), no en
 * `.wp-block-navigation-item__content` (el `<a>` interno) — ese último ya
 * tiene su propio `border-bottom` para el indicador de página activa/hover
 * de más arriba; son dos bordes con propósito distinto en dos elementos
 * distintos, sin pisarse entre sí.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
	/* No basta con align-items:stretch: ".items-justified-right" (pensada
	   para el nav en línea de escritorio) le da a esta lista un ancho de
	   contenido (max-content) para poder "justificarla" a la derecha del
	   header — en la pila vertical del overlay ese ancho angosto persiste
	   (240px reales dentro de un overlay de 768px), así que
	   align-items:stretch no tenía ninguna caja ancha donde estirar sus
	   hijos. Se fuerza el ancho completo aquí, no sólo la alineación. */
	width: 100%;
	align-items: stretch;
	padding: 0.5rem 1.25rem 1.5rem;
	row-gap: 0;
	box-sizing: border-box;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right>.wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #163a6b;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right>.wp-block-navigation-item>.wp-block-navigation-item__content {
	width: 100%;
	min-height: 3.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border-bottom: none;
	padding: 0;
}

/* El toggle "Software" (flecha) comparte fila con su enlace — necesita el
   mismo min-height para no achicar la fila, y separarse del texto. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation-item__content {
	flex: 1;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	min-height: 3.5rem;
}

/* Hijos del submenú ("DTE Masters"): mismo criterio de fila ancho-completo
   e izquierda, con la sangría de 16px que marca UI.dc.html para distinguirlos
   de sus padres — y su propio divisor, no el heredado (más tenue, mismo tono). */
/*
 * "DTE Masters" seguía angosto (200px) pese al `width:100%` de arriba: el
 * propio núcleo (wp-includes/blocks/navigation/style.css) tiene una regla
 * SÓLO para el estado abierto del submenú
 * (`[aria-expanded=true] ~ .wp-block-navigation__submenu-container`,
 * `width:auto;min-width:200px`) con más especificidad (5 clases/atributos)
 * que la regla de arriba (3) — gana ella, no la de aquí, mientras el
 * submenú está realmente desplegado (que es el único momento en que se ve).
 * Se iguala la especificidad con clases reales que el propio elemento ya
 * trae, en vez de `!important`.
 */
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu.has-primario-background-color {
	width: 100%;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 1rem;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #163a6b;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	width: 100%;
	min-height: 3rem;
	display: flex;
	align-items: center;
	/* #A9BCD8 literal, no token: es el mismo tono "texto secundario sobre
	   navy" que UI.dc.html usa en esta fila exacta (línea 2883) — no está en
	   la paleta semántica porque sólo aplica a este contexto puntual, mismo
	   criterio que el #26497E de .svc-social-link. primario-claro
	   (el token más cercano) mide <2:1 de contraste aquí, casi ilegible. */
	color: #a9bcd8;
}

/*
 * Dos síntomas reales de subrayado, misma causa — `theme.json`
 * `styles.elements.link.:hover.typography.textDecoration` está en
 * `"underline"` GLOBAL (para el texto de cuerpo, donde sí ayuda: WCAG
 * 1.4.1, un enlace dentro de un párrafo no debe distinguirse sólo por
 * color). UI.dc.html en cambio nunca subraya nada (`a{text-decoration:none}`
 * global, línea 25-28) — dos componentes con SU PROPIO indicador de estado
 * ya construido reciben ADEMÁS ese subrayado nativo por encima:
 * 1. El nav del header: ya cambia de color y dibuja su propio borde inferior
 *    de 3px al pasar el mouse (arriba, "Hover del ítem de nav") — el
 *    subrayado nativo se dibuja encima, doble línea real bajo el texto. Se
 *    apaga sólo en el nav.
 * 2. Los enlaces del footer (Navegación/Temas del blog/Contacto/redes/
 *    copyright): no tienen ningún indicador propio, así que caían
 *    directo al subrayado nativo — visible incluso en reposo, no sólo al
 *    pasar el mouse, porque el navegador ya subraya todo <a> por defecto y
 *    nada en el footer reseteaba esa base. Los enlaces del cuerpo del
 *    sitio (párrafos, migas de pan, tarjetas) no se tocan — ahí el
 *    subrayado-al-hover sigue siendo una señal real, no un bug.
 */
.svc-nav-principal .wp-block-navigation-item__content {
	text-decoration: none;
}

/*
 * El header pinta por encima del contenido: el nav en línea es un stacking
 * context (translate(-50%,-50%) en >=1025px) y el <main>/<article>/hero son
 * position:relative o con transform y van DESPUÉS en el DOM, así que a
 * igual nivel tapaban los desplegables. z-index 50 queda por debajo de las
 * capas fijas del tema (.svc-flotantes y calendario = 100-102); mientras el
 * overlay de hamburguesa está abierto WordPress marca <html> con
 * has-modal-open y el header sube por encima de esas capas, como antes
 * (el overlay traía z-index:100000 propio).
 */
header.wp-block-template-part {
	position: relative;
	z-index: 50;
}

html.has-modal-open header.wp-block-template-part {
	z-index: 200;
}

footer.wp-block-template-part a {
	text-decoration: none;
	font-weight: 600;
	/* Área táctil: los enlaces del footer medían ~21-23px de alto real (sin
	   min-height propio) — bajo 44×44. inline-flex conserva el flujo en
	   línea (el separador " · " de aviso-legal/política-privacidad y el
	   <br> de teléfono/correo siguen funcionando) mientras fija la caja. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Paginación (archive.html/page-blog.html/author.html): los números de
 * página (`.wp-block-query-pagination-numbers a`) miden ~7-11px de ancho
 * por 28px de alto con la tipografía propia del tema — muy por debajo de
 * 44×44 — y el enlace "Siguiente página" mide 32px de alto. Se agranda con
 * relleno + tamaño mínimo, sin tocar el texto/flecha que ya provee el
 * bloque núcleo. El número de la página actual es un <span>, no un enlace
 * (no es interactivo), pero se iguala su caja por consistencia visual con
 * los números clicables.
 */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 4px 12px;
	box-sizing: border-box;
}

/*
 * Lockup del logo del header (ícono + "SV CONSULTORES" + "EL SALVADOR"), un
 * único enlace en vez de dos adyacentes al mismo destino — ver el
 * comentario de header.php. Valores de UI.dc.html línea 595-600 (fuente
 * #1): título 700/20px/-0.01em navy, subtítulo 500/11px/0.24em (muy
 * espaciado) en el tono naranja oscuro que ya pasa AA ("acento-oscuro" —
 * el #C25A12 literal del mockup no pasaba 4.5:1). `text-decoration:none`
 * aquí es lo que quita el subrayado nativo del navegador que traía el <a>
 * del título viejo (no hay ninguna regla global previa que lo reseteara
 * fuera del nav/footer, que ya se corrigieron aparte).
 */
.svc-logo {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	text-decoration: none;
	/* Medía 40px de alto (ícono 40px, el bloque de texto de 2 líneas es
	   más bajo) — 4px bajo el mínimo táctil de 44px, sitewide. min-height
	   + align-items:center ya existente centra el contenido sin tocar el
	   tamaño del ícono. */
	min-height: 44px;
}

.svc-logo__texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.svc-logo__titulo {
	font: 700 var(--wp--preset--font-size--m) / 1 var(--wp--preset--font-family--poppins);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primario);
}

.svc-logo__subtitulo {
	font: 500 var(--wp--preset--font-size--xs) / 1 var(--wp--preset--font-family--poppins);
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--acento-oscuro);
}

/*
 * Cabecera: el bloque de horario/teléfono + CTA no debe comprimirse
 * (eso partía el texto del botón "Solicitar consulta" en varias líneas
 * a 375/768px). Por debajo de 1024px el horario/teléfono se oculta y el
 * botón queda solo junto a la hamburguesa (regla de línea 232) — ya no
 * se oculta el propio botón, sigue siendo la acción visible en todo
 * ancho, hasta celular.
 */
.svc-header-actions {
	flex-shrink: 0;
}

.svc-header-actions .wp-block-button__link {
	white-space: nowrap;
	font-size: 1rem;
	padding: 0 var(--wp--preset--spacing--24);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Botón/franja de accesibilidad (patterns/footer.php, primer hijo de
 * .svc-flotantes): hereda su `position:fixed` del contenedor — nunca lo
 * define aquí — para quedar siempre arriba del botón de Calendario
 * Tributario y moverse con él, incluido el reanclaje dinámico de
 * whatsapp-flotante.js cerca del footer. `.svc-utilbar` sólo reserva el
 * tamaño del icono (52px); el panel es hermano ABSOLUTO dentro de esa caja,
 * así que no participa del alto/gap del stack.
 */
.svc-utilbar {
	--svc-a11y-icono: 52px;
	position: relative;
	/* Sombra del CONJUNTO icono+franja (no `box-shadow` por separado en el
	   icono): así, con la franja abierta, se lee una sola pieza. Mismo
	   valor visual que `0 10px 30px` de los otros botones flotantes
	   (el blur de drop-shadow equivale a la mitad del de box-shadow). */
	filter: drop-shadow(0 10px 15px rgba(6, 32, 63, 0.18));
}

.svc-utilbar__panel {
	position: absolute;
	top: 50%;
	/* Ancla en el CENTRO del icono (no en su borde izquierdo): la franja
	   queda pegada al botón, sin hueco donde el :hover se pierda y la
	   franja se cierre a mitad del movimiento del mouse. El icono (z-index
	   1) tapa el tramo que queda detrás. */
	right: 50%;
	transform: translateY(-50%);
	/* Mismo alto que el icono y sin redondeo a la derecha: el borde derecho
	   queda tapado por el icono, así franja + botón activo forman una sola
	   cápsula. */
	height: var(--svc-a11y-icono);
	background: var(--wp--preset--color--primario);
	border-radius: calc(var(--svc-a11y-icono) / 2) 0 0 calc(var(--svc-a11y-icono) / 2);
	overflow: hidden;
	max-width: 0;
	white-space: nowrap;
	/* Crece rápido y termina suave (curva "ease-out-expo") hacia la
	   izquierda: el borde derecho queda fijo pegado al icono (ancla de
	   `right:50%`), sólo el borde izquierdo avanza — se lee como que la
	   franja "sale" del icono en vez de deslizarse a velocidad pareja. */
	transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-svc-contraste="alto"] .svc-utilbar__panel {
	border: 1px solid var(--wp--preset--color--borde);
}

/*
 * Franja visible = botón activo (mismo azul, sin costura). Se abre por:
 *  - :hover del ICONO (no de la caja de 52px del `.svc-utilbar`, que abriría
 *    con sólo rozar las esquinas vacías) o de la propia franja, para poder
 *    mover el mouse del icono hacia ella;
 *  - foco de TECLADO (:focus-visible, no :focus-within — un clic de mouse
 *    deja el foco en el botón y mantendría la franja abierta al intentar
 *    cerrarla);
 *  - [data-abierto="true"]: fijada por clic (a11y-franja.js).
 * [data-abierto="false"] = cerrada por clic/Esc: suprime hover y teclado
 * hasta que el mouse salga (JS lo limpia), si no el propio :hover del botón
 * la reabriría al instante.
 */
.svc-utilbar[data-abierto="true"] .svc-utilbar__panel,
.svc-utilbar:not([data-abierto="false"]):has(.svc-a11y__icono:hover, .svc-utilbar__panel:hover, :focus-visible) .svc-utilbar__panel {
	max-width: 20rem;
}

.svc-utilbar[data-abierto="true"] .svc-a11y__icono,
.svc-utilbar:not([data-abierto="false"]):has(.svc-a11y__icono:hover, .svc-utilbar__panel:hover, :focus-visible) .svc-a11y__icono {
	color: #ffffff;
	background: var(--wp--preset--color--primario);
	border-color: var(--wp--preset--color--primario);
}

.svc-a11y__controles {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
	padding: 0 0 0 var(--wp--preset--spacing--16);
	/* Deja libre el tramo de la franja que queda detrás del icono
	   (media anchura del icono) más un respiro antes del borde del botón. */
	padding-right: calc(var(--svc-a11y-icono) / 2 + var(--wp--preset--spacing--8));
}

/*
 * Círculo blanco con borde azul — a propósito distinto de los otros 2
 * botones del stack (Calendario navy lleno, WhatsApp verde lleno) para
 * leerse como "ayuda/accesibilidad", no como una acción más. Mismo
 * diámetro (52px) y sombra (vía `filter` en `.svc-utilbar`) que
 * `.svc-calendario-flotante`, para que los 3 se vean como una sola familia
 * de componente.
 */
.svc-a11y__icono {
	flex: none;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--svc-a11y-icono);
	height: var(--svc-a11y-icono);
	border: 2px solid var(--wp--preset--color--primario);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primario);
	cursor: pointer;
	transition: color 0.25s, background 0.25s, border-color 0.25s;
}

.svc-a11y__icono:hover,
.svc-a11y__icono:focus-visible {
	color: #ffffff;
	background: var(--wp--preset--color--primario);
	border-color: var(--wp--preset--color--primario-oscuro);
}

.svc-a11y__label {
	font: 500 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: #c7d6ec;
	white-space: nowrap;
}

.svc-a11y__grupo {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--4);
}

.svc-a11y__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2rem;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	cursor: pointer;
}

.svc-a11y__btn[data-escala="87.5"] {
	font-size: var(--wp--preset--font-size--xs);
}

.svc-a11y__btn[data-escala="100"] {
	font-size: var(--wp--preset--font-size--s);
}

.svc-a11y__btn[data-escala="112.5"] {
	font-size: var(--wp--preset--font-size--nav-mobile);
}

.svc-a11y__btn[aria-pressed="true"] {
	background: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--texto);
}

.svc-a11y__sep {
	width: 1px;
	height: 1.375rem;
	background: rgba(255, 255, 255, 0.22);
}

.svc-a11y__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: 500 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: #ffffff;
	white-space: nowrap;
}

/* "Alto contraste" queda oculto vía `hidden` en el markup (header.php) — sin
   esto, el `display:inline-flex` de arriba le gana al `[hidden]{display:none}`
   nativo del navegador y el botón se ve igual. */
.svc-a11y__toggle[hidden] {
	display: none;
}

.svc-a11y__moneda {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 1.5px solid #ffffff;
	background: linear-gradient(90deg, #ffffff 50%, var(--wp--preset--color--primario) 50%);
}

.svc-a11y__icono-tema {
	flex: none;
	width: 1rem;
	height: 1rem;
}

.svc-a11y__toggle[aria-pressed="true"] {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Foco naranja de 3px sobre cualquier control de la franja — mismo ancho/
   offset que el anillo global (:focus-visible, línea ~155), sólo cambia el
   color para que resalte sobre el fondo navy de la propia franja. */
.svc-utilbar :focus-visible {
	outline-color: var(--wp--preset--color--acento);
}

/* Foco por clic de mouse: sin anillo. El `:focus{outline:2px}` de core lo
   dibuja con `currentColor` (blanco sobre el botón activo) y rompería la
   fusión franja+botón; el anillo de teclado (:focus-visible) queda intacto. */
.svc-utilbar :focus:not(:focus-visible) {
	outline: none;
}

/*
 * <900px: sin :hover real (táctil), el toque en el botón-icono alterna
 * [data-abierto] vía a11y-franja.js, igual que el clic de mouse. Los botones
 * de control piden área táctil mínima de 44×44px, fija en px y no en rem
 * porque la franja cambia el root font-size del propio `<html>` (A−/A/A+),
 * así que un `2.75rem` mide sólo 38.5px con A− (87.5%) en vez de
 * los 44px reales que pide el control táctil.
 */
@media (max-width: 900px) {
	.svc-a11y__btn {
		width: 44px;
		height: 44px;
	}

	/* Sólo icono sol/luna — con el label de texto ya no cabía en 375-390px
	   (causaba scroll horizontal). El aria-label del botón sigue describiendo
	   la acción para lectores de pantalla. */
	.svc-a11y__toggle-texto {
		display: none;
	}
}

/* <=600px: mismo breakpoint donde .svc-flotantes agranda Calendario/WhatsApp
   a 56px (ver "Botón flotante de WhatsApp" más abajo) — el icono de
   accesibilidad crece igual para seguir leyéndose como la misma familia. */
@media (max-width: 600px) {
	.svc-utilbar {
		--svc-a11y-icono: 56px;
	}
}

/*
 * Utilidades globales para los patrones (Componentes y estados, UI.dc.html
 * id="1b"). Se definen una sola vez aquí y se reutilizan en todos los
 * patrones — nada de estilos ad-hoc por patrón.
 */

/* Tarjeta con borde (servicio, sector, entrada, herramienta...).
   Hover: borde a "primario", sombra suave (spec: "Hover: borde a #0A2A5A,
   sombra 0 2px 8px rgba(11,59,92,.10). Toda la tarjeta es enlace."). */
.svc-tarjeta {
	display: flex;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	transition: border-color 120ms, box-shadow 120ms;
}

a.svc-tarjeta {
	text-decoration: none;
	color: inherit;
}

.svc-tarjeta:hover {
	border-color: var(--wp--preset--color--primario);
	box-shadow: 0 2px 8px rgba(11, 59, 92, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.svc-tarjeta {
		transition: none;
	}
}

/*
 * Tarjeta de entrada (page-blog.html, archive.html, author.html,
 * search.html — misma tarjeta duplicada en las 4, cada una es una
 * plantilla .html estática sin patrón PHP compartido para el wp:query).
 * padding-left:0 en la columna de texto es intencional en escritorio: el
 * espacio con la imagen lo da el gap de las columnas, no un padding
 * propio. Al apilarse en el breakpoint núcleo de columnas (781px), ese gap
 * pasa a ser vertical (entre imagen y texto) y el texto queda pegado al
 * borde izquierdo de la tarjeta sin ningún margen — se restaura aquí para
 * que quede igual que el padding-right ya fijo (24px) en vez de asimétrico.
 * `!important` necesario: padding-left:0 viene como `style` EN LÍNEA en el
 * propio HTML del bloque (los 4 templates lo serializan así), y un atributo
 * `style` gana siempre sobre cualquier regla de hoja de estilos sin
 * importar su especificidad — sin esto, la media query de abajo nunca
 * llega a aplicarse.
 */
@media (max-width: 781px) {
	.svc-tarjeta-texto {
		padding-left: var(--wp--preset--spacing--24) !important;
	}
}

/*
 * Red de seguridad GLOBAL para `prefers-reduced-motion`, no acotada a
 * `.svc-tarjeta`: cubre cualquier
 * transición/animación que el CSS propio de svc-child defina hoy o en el
 * futuro (los bloques núcleo — navegación, social-links, imagen — ya traen
 * su propio guard en wp-includes, así que esto es exclusivamente para
 * nuestro propio CSS). Se usa el patrón estándar de duración casi-cero en
 * vez de `transition:none`/`animation:none` para no romper JS que dependa
 * de los eventos `transitionend`/`animationend` (algunos navegadores no
 * disparan ese evento si la propiedad se quita del todo).
 * Uno de los cuatro `!important` documentados en este archivo (verde de
 * WhatsApp, anillo de foco, padding de .svc-tarjeta-texto en móvil) —
 * justificado porque una red de seguridad de movimiento reducido sólo
 * cumple su función si gana sin importar qué especificidad tenga la regla
 * que agregue la animación real, presente o futura.
 */
@media (prefers-reduced-motion: reduce) {

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

/*
 * Reveal global de entrada (carga + scroll): aplica solo cuando JS confirmó
 * soporte de IntersectionObserver (scroll-reveal.js añade .svc-js-reveal en
 * <html>) — si JS falla o está desactivado el contenido nunca se oculta.
 * Mismo easing que .svc-header-search (cubic-bezier(0.16, 1, 0.3, 1)) para
 * consistencia con el resto del sitio. La red de prefers-reduced-motion de
 * arriba ya neutraliza esta transición a 0.01ms sin cambios aquí.
 */
html.svc-js-reveal .svc-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * `transform:none` (no translateY(0)): cualquier valor distinto de none —
 * incluso la identidad— deja a la sección como stacking context. Como el nav
 * del header ya es uno (translate(-50%,-50%) en >=1025px) y el hero va
 * después en el DOM, el hero tapaba los desplegables del menú. Con none, la
 * sección vuelve a ser un bloque normal una vez revelada.
 */
html.svc-js-reveal .svc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Enlace de texto ("Conocer más", "Leer la entrada", "Abrir calculadora"...).
   Línea gruesa de 2px en "acento" bajo el texto — el subrayado de diseño de
   la plantilla. text-decoration:none en ambos estados: sólo se quita el
   subrayado fino por defecto del navegador, la línea gruesa se conserva. */
.svc-enlace-subrayado {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--primario);
	border-bottom: 2px solid var(--wp--preset--color--acento);
	padding-bottom: 0.1875rem;
	text-decoration: none;
}

.svc-enlace-subrayado:hover {
	color: var(--wp--preset--color--acento-oscuro);
	border-bottom-color: var(--wp--preset--color--acento-oscuro);
	text-decoration: none;
}

/*
 * Botones sólidos (relleno "acento" por defecto vía theme.json
 * `styles.elements.button`, o "primario" si algún patrón lo sobreescribe):
 * el color de hover ya lo resuelve theme.json (acento-oscuro/base, AA-safe,
 * ver token de arriba) — lo que faltaba es el movimiento. UI.dc.html no
 * anima nada en su export estático; se añade elevación + sombra al pasar
 * el mouse y un "asentado" más corto al clic, mismo criterio de duración
 * que `.svc-tarjeta` (120ms) y ya cubierto por la red de
 * `prefers-reduced-motion` global de más arriba.
 */
.wp-element-button,
.wp-block-button__link {
	box-sizing: border-box;
	min-height: 48px;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: 0 6px 16px rgba(10, 42, 90, 0.18);
	transform: translateY(-1px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	box-shadow: 0 2px 6px rgba(10, 42, 90, 0.16);
	transform: translateY(0);
	transition-duration: 60ms;
}

.wp-block-button__link.svc-inactivo:hover,
.wp-block-button__link.svc-inactivo:active {
	box-shadow: none;
	transform: none;
}

/*
 * Botón contorno (`is-style-outline`: "Ver servicios" en hero-portada sobre
 * navy, "Ver detalle" en page-software.html sobre blanco). El núcleo no le
 * da NINGÚN estilo de hover — fondo transparente siempre, sin importar el
 * mouse. Se rellena con el propio `currentColor` del botón a baja opacidad:
 * funciona en los dos contextos sin necesito saber si el fondo real detrás
 * es claro u oscuro (blanco+texto navy → lavado navy tenue; navy+texto
 * blanco → lavado claro tenue), sin tocar el color del texto.
 */
:root :where(.wp-block-button.is-style-outline > .wp-block-button__link),
:root :where(.wp-block-button .wp-block-button__link.is-style-outline) {
	padding-block: 11px;
	transition: background-color 120ms ease, border-color 120ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wp-block-button.is-style-outline>.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:hover {
	background-color: rgba(10, 42, 90, 0.08);
	background-color: color-mix(in srgb, currentColor 14%, transparent);
	box-shadow: 0 6px 16px rgba(10, 42, 90, 0.12);
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline>.wp-block-button__link:active,
.wp-block-button .wp-block-button__link.is-style-outline:active {
	background-color: rgba(10, 42, 90, 0.14);
	background-color: color-mix(in srgb, currentColor 22%, transparent);
	box-shadow: none;
	transform: translateY(0);
	transition-duration: 60ms;
}

/* Campo de formulario (input/select/textarea). El único punto donde se
   usa el token "borde-campo" — distinto de "borde" (tarjetas/contenedores). */
.svc-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.svc-campo label,
.svc-campo>span:first-child {
	font: 500 var(--wp--preset--font-size--s)/1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto);
}

/*
 * width:100%/min-width:0/box-sizing: sin un width propio, un <input>
 * respeta el atributo HTML "size" de CF7 (size="40", ~346px) en vez del
 * ancho real disponible del flex de .svc-campo. A 768/1440px 346px cabía
 * de sobra y el bug quedaba invisible; a 375px, dentro de la tarjeta más
 * angosta de cta-formulario (banda navy con padding + tarjeta blanca con
 * su propio padding, sólo 279px reales), el input ya no cabía y desbordaba
 * la página 26px hacia la derecha — regresión introducida al pasar
 * cta-formulario de <input> estáticos (sin "size") a los <input> reales
 * que genera CF7 (con "size=40").
 */
.svc-campo input,
.svc-campo select,
.svc-campo textarea {
	min-height: 3rem;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--borde-campo);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	font: 400 1rem var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto);
}

.svc-campo textarea {
	min-height: 6rem;
	padding: 0.75rem 0.875rem;
	resize: vertical;
}

/*
 * Contador de caracteres del textarea "mensaje" — ver
 * svc-contador-mensaje.js, que crea este <span> tras el textarea con
 * insertAdjacentElement('afterend'). CF7 envuelve label+textarea juntos en
 * un único <label> (mismo <label>Texto<br />[textarea...]</label> que usan
 * todos los campos de este formulario — ver post_content de CF7 #33), así
 * que el <span> queda anidado DENTRO de ese <label>, no como hijo directo
 * del flex de .svc-campo: display:block + text-align aquí en vez de
 * align-self, que sólo funcionaría si fuera un item del flex.
 */
.svc-contador-mensaje {
	display: block;
	margin-top: 4px;
	text-align: right;
	font: 400 var(--wp--preset--font-size--xs)/1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

/*
 * Contact Form 7 aplica su propio wpautop() al contenido crudo de cada
 * formulario antes de renderizarlo, así que cada campo (label+input) queda
 * envuelto en un <p> real que la hoja de estilos por defecto del navegador
 * da ~1em de margin arriba/abajo. Ese <p> es HIJO ÚNICO del flex de
 * .svc-campo — un flex item nunca colapsa su propio margin contra el
 * contenedor ni contra otros items — así que el margin del navegador se
 * SUMA al gap:16px real de .wpcf7-form, doblando el espacio visible entre
 * campos (~80-100px en vez de 16px). El [submit] y el
 * <span class="svc-form-nota"> finales tienen el mismo problema: van
 * sueltos en su propia línea en el contenido crudo (no dentro de un <div>),
 * así que wpautop también los envuelve en su propio <p>. Selector por
 * descendencia (no hijo directo `>`): en Inicio, svc-cta-colapsable.js
 * mueve esos mismos <p>/<div class="svc-campo"> dentro de un <details>
 * para el acordeón — siguen siendo descendientes de .wpcf7-form, sólo más
 * anidados.
 */
.wpcf7-form p {
	margin: 0;
}

/*
 * CF7 no trae ningún margen entre el input y su mensaje de error de
 * validación (`.wpcf7-not-valid-tip`, `display:block` sin margin-top — ver
 * includes/css/styles.css del propio plugin). El anillo de foco global
 * sale 5px fuera del borde del control (`outline:3px` +
 * `outline-offset:2px`, ver regla `:focus-visible` arriba) — sin ese
 * margen, el mensaje de error nace pegado al borde inferior y el anillo lo
 * pisa visualmente en el primer render (p. ej. "Introduzca una dirección
 * de correo electrónico válida." solapado con el anillo azul del campo
 * Correo). Los formularios de herramientas (anatomia-calculadora.php) no
 * usan este mecanismo de CF7 — su error es un único aviso compartido
 * (`#svc-calc-error`) debajo de todo el formulario, no un texto por campo,
 * así que no les aplica este mismo bug.
 */
.svc-campo .wpcf7-not-valid-tip {
	margin-top: 8px;
}

/* Rejilla de 2 columnas para grupos de campos (cta-formulario,
   anatomia-calculadora). A <=600px colapsa a 1 columna — dos columnas
   de 1fr producían overflow horizontal en 375px (campos de ~193px
   cada una, más ancho que el contenido disponible). */
.svc-grid-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
	.svc-grid-campos {
		grid-template-columns: 1fr;
	}
}

/* Campo de monto: "$" fijo fuera del valor editable — calculadoras.js
   envuelve cada input de dinero en este span e inserta el símbolo, así
   el usuario nunca puede borrar/mezclar el "$" con el número tecleado. */
.svc-campo-monto {
	position: relative;
	display: block;
}

.svc-campo-monto .svc-simbolo-moneda {
	position: absolute;
	left: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--texto-suave);
	font: 400 1rem var(--wp--preset--font-family--poppins);
	pointer-events: none;
}

.svc-campo-monto input {
	padding-left: 1.75rem;
}

/* "Actualizado al <fecha>" bajo el botón de cada calculadora (calculadoras.js). */
.svc-calc-actualizacion {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-suave);
}

/* Tabs Mensual/Quincenal del desglose de salario neto
   (patterns/anatomia-calculadora.php). Mismo lenguaje visual que
   .svc-caltrib-tab (footer.php, calendario tributario): subrayado de 2px en
   "primario" para la tab activa. */
.svc-calc-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.svc-calc-tab {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0.5rem 0.625rem;
	font: 600 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
	border-bottom: 2px solid transparent;
}

.svc-calc-tab.is-activa {
	color: var(--wp--preset--color--primario);
	border-bottom-color: var(--wp--preset--color--primario);
}

/* Píldora/etiqueta (categorías del blog, tags, paginación). Reposo: fondo
   "base-alt" + borde "borde". Hover/foco: borde a "primario". */
.svc-etiqueta {
	display: inline-flex;
	align-items: center;
	padding: 0.4375rem 0.875rem;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--borde);
	font: 500 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}

.svc-etiqueta:hover {
	border-color: var(--wp--preset--color--primario);
	color: var(--wp--preset--color--primario);
}

/* Íconos de red social del footer (patterns/footer.php) — 44x44px,
   borde #26497E, según UI.dc.html líneas 970-977 (valor de esa fuente
   exacta, no un token de theme.json: es un tono intermedio de navy usado
   solo en este componente, mismo criterio que el #ffffff33 del
   separador del propio footer). */
.svc-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #26497E;
	border-radius: 4px;
	color: var(--wp--preset--color--base);
	transition: border-color 0.15s, color 0.15s;
}

.svc-social-link:hover,
.svc-social-link:focus-visible {
	border-color: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--acento);
}

/* "Abrir en Maps" / "Abrir en Waze" de Contacto: logo + texto, ambos enlaces
   centrados en la misma línea (flex; con inline el baseline del SVG los desalineaba). */
.svc-mapas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
}

.svc-mapas a {
	gap: 6px;
}

/* Columna lateral fija (aside de Servicios/Software): permanece visible
   mientras el usuario baja por la columna principal, como en UI.dc.html
   ("position:sticky;top:24px" en las dos pantallas 1d/1n). Sólo tiene efecto
   en pantallas donde la columna cabe junto al contenido (roto en mobile,
   donde wp:columns ya apila y el aside pasa a fluir normalmente). */
.svc-aside-fija {
	position: sticky;
	top: 24px;
}

/* Índice "En este artículo" (single.html). UI.dc.html dibuja esto
   como una columna fija a la izquierda del cuerpo del artículo (1fr | 720px
   | 1fr) — geometría que no se puede reproducir de forma robusta dentro de
   una plantilla compartida por *todas* las entradas, porque la lista de
   anclas es manual/editorial (distinta en cada artículo) y sólo puede vivir
   dentro de wp:post-content, no en single.html. Se resuelve con una caja
   fija (sticky) que el autor inserta como primer bloque de la entrada — el
   mismo contenido y espíritu ("índice fijo, lista manual de anclas"), como
   una mini-caja al inicio del artículo en vez de un raíl lateral aparte.
   Se desactiva en tablet/móvil por espacio, igual que "07-móvil"/"08-tableta"
   no la muestran. */
.svc-indice {
	position: sticky;
	top: 24px;
	/* Sin esto la caja se estira al alto de toda la fila de columnas. */
	align-self: flex-start;
}

/* Tipografía del índice con los tokens del sitio (antes 11px/14px, muy por
   debajo del resto del cuerpo): sobretítulo = eyebrow, enlaces = "s". */
.svc-indice > p:first-child {
	font-size: var(--wp--preset--font-size--eyebrow);
}

.svc-indice ul {
	font-size: var(--wp--preset--font-size--s);
}

@media (max-width: 768px) {
	.svc-indice {
		position: static;
	}
}

/*
 * Entrada de blog (templates/single.html).
 *
 * Layout: 70/30 como el índice del blog; el cuerpo ocupa toda su columna
 * en vez de una franja centrada de 50rem. Debajo de 1025px la barra lateral
 * cae bajo el artículo (a 30% de un viewport de tablet quedaría en ~200px).
 *
 * Tipografía: el cuerpo de la entrada hereda los estilos de bloque del tema
 * padre (h2 de 42px, cita de 36px light, tabla de 19px con rejilla negra),
 * fuera de escala con el resto del sitio. Se fijan aquí los tamaños por
 * defecto de cada bloque con los mismos tokens que usan las demás páginas
 * (h2 = xl, h3 = l, cuerpo = m) para que el Autor escriba con bloques
 * normales sin configurar nada. Un tamaño puesto a mano en el editor sigue
 * ganando (estilo en línea / clase has-*-font-size).
 */
@media (max-width: 1024px) {
	.svc-articulo-columnas.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.svc-articulo-columnas.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Buscador del sidebar: input y botón con la MISMA altura. El botón hereda
   del tema padre font-size 20px + padding 16px (=64px, contra 48px del input);
   aquí se iguala a la del input (.svc-campo input) con piso de 44px táctiles:
   con A− (87.5%) 3rem son sólo 42px. */
.svc-buscador-blog .svc-campo input,
.svc-buscador-blog .wp-element-button {
	min-height: max(3rem, 44px);
}

.svc-buscador-blog .wp-element-button {
	padding: 0 24px;
	font-size: 1rem;
}

/* Tamaño fijado aquí y no en el bloque: un tamaño en rem puesto en wp:post-excerpt
   se convierte en un clamp() fluido que en móvil quedaba (14px) por debajo del
   cuerpo (17px). Mismo par 1.25rem/1.125rem que el resto de bajadas del sitio. */
.svc-articulo-lead {
	max-width: 60rem;
	font-size: var(--wp--preset--font-size--lead);
}


/* La categoría es un sobretítulo (textColor acento-oscuro en el bloque), pero
   el color de enlace global la pintaba azul. */
.wp-block-post-terms a {
	color: inherit;
}

.svc-articulo-cuerpo {
	overflow-wrap: break-word;
}

/* Páginas legales: hero editorial sin imagen y documento en una columna de
   lectura. El título conserva el tratamiento de los demás heroes del sitio. */
.svc-hero-legal {
	box-sizing: border-box;
}

.svc-hero-legal__intro {
	max-width: 48rem;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	opacity: 0.9;
}

.svc-legal-documento {
	box-sizing: border-box;
}

.svc-legal-documento .svc-articulo-cuerpo {
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.6;
}

.svc-legal-documento .svc-articulo-cuerpo h2 {
	padding-top: var(--wp--preset--spacing--24);
	border-top: 1px solid var(--wp--preset--color--borde);
}

.svc-legal-documento .svc-articulo-cuerpo > :first-child {
	padding-top: 0;
	border-top: 0;
}

@media (max-width: 600px) {
	.svc-hero-legal {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}


	.svc-legal-documento {
		padding-bottom: var(--wp--preset--spacing--64) !important;
	}
}

.svc-articulo-cuerpo > :first-child {
	margin-block-start: 0;
}

.svc-articulo-cuerpo h2 {
	margin-block: var(--wp--preset--spacing--40) 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
}

.svc-articulo-cuerpo h3 {
	margin-block: var(--wp--preset--spacing--24) 0;
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.25;
}

.svc-articulo-cuerpo h4 {
	margin-block: var(--wp--preset--spacing--24) 0;
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.3;
}

.svc-articulo-cuerpo h5,
.svc-articulo-cuerpo h6 {
	margin-block: var(--wp--preset--spacing--24) 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.3;
}

.svc-articulo-cuerpo ul,
.svc-articulo-cuerpo ol {
	padding-left: 1.5rem;
}

.svc-articulo-cuerpo li + li {
	margin-top: 0.375rem;
}

.svc-articulo-cuerpo :is(p, li, td) a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.svc-articulo-cuerpo .svc-indice a {
	text-decoration: none;
}

.svc-articulo-cuerpo blockquote {
	margin-inline: 0;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	border-left: 3px solid var(--wp--preset--color--acento);
	background: var(--wp--preset--color--base-alt);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.5;
}

.svc-articulo-cuerpo blockquote p {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.svc-articulo-cuerpo blockquote cite {
	font-size: var(--wp--preset--font-size--s);
	font-style: normal;
	font-weight: 400;
	color: var(--wp--preset--color--texto-suave);
}

.svc-articulo-cuerpo .wp-block-table {
	overflow-x: auto;
}

.svc-articulo-cuerpo .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

.svc-articulo-cuerpo .wp-block-table :is(th, td) {
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--borde);
	text-align: left;
	vertical-align: top;
}

.svc-articulo-cuerpo .wp-block-table th {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primario);
	font-weight: 600;
}

.svc-articulo-cuerpo figure {
	margin-inline: 0;
}

.svc-articulo-cuerpo img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

.svc-articulo-cuerpo figcaption {
	margin-top: var(--wp--preset--spacing--8);
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--texto-suave);
	text-align: left;
}

/*
 * El núcleo fija en 600px el punto donde el menú "overlayMenu:mobile" deja
 * de mostrar la hamburguesa y pasa a nav en línea
 * (wp-includes/blocks/navigation/style.css, selectors
 * ".wp-block-navigation__responsive-container-open:not(.always-shown)"
 * y ".wp-block-navigation__responsive-container:not(.hidden-by-default)
 * :not(.is-menu-open)"). El spec de tableta (768px) pide el menú
 * colapsado igual que en móvil, con el botón de contacto siempre
 * visible ("Tableta Inicio", UI.dc.html id="1j": sólo logo + botón +
 * hamburguesa, sin nav en línea) -- sólo a partir de escritorio se ve
 * el nav completo. Se extiende el breakpoint reusando las mismas clases
 * que ya genera el bloque núcleo, sin tocar su marcado ni duplicar su
 * comportamiento de apertura/cierre.
 */
@media (min-width: 600px) and (max-width: 1024px) {
	.svc-nav-principal .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.svc-nav-principal .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * Banda de cifras y grid de sectores: wp:columns colapsa a 1 columna por
 * debajo de 782px (comportamiento núcleo), dejando una lista apretada de
 * 4 u 8 filas en vez de una grilla. UI.dc.html dibuja la banda de cifras
 * en grid 2x2 tanto a 375px (id="1i") como a 768px (id="1j") -- se fuerza
 * aquí para todo el rango <=781px, reusando el propio wp:columns en vez
 * de reconstruir el patrón con bloques nuevos. El grid de sectores sigue
 * el mismo tratamiento por consistencia (misma mecánica de wp:columns,
 * mismo criterio 2 columnas del mockup móvil a 375px).
 */
@media (max-width: 781px) {
	.svc-banda-cifras.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--24);
	}

	.svc-grid-sectores.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
}

/* Título de sector con icono lineal al lado (patterns/grid-sectores.php). */
.svc-sector-titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.svc-sector-icono {
	flex: none;
	color: var(--wp--preset--color--acento-oscuro);
}

/* Móvil: la grilla es de 2 columnas (~125px útiles por card); con el icono
   al lado, "Restaurantes"/"Construcción" no caben y se parten a media
   palabra. El icono pasa arriba del título. */
@media (max-width: 480px) {
	.svc-sector-titulo {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/*
 * Tarjetas de servicio (usadas en Inicio y en su propia página): a 768px
 * ("Tableta Inicio", UI.dc.html id="1j") pasan a una grilla 2+1 -- la
 * tercera tarjeta ocupa el ancho completo -- documentado explícitamente
 * en el propio mockup ("la retícula de 3 columnas pasa a 2 + 1"). Acotado
 * a la franja 601-781px: por debajo ya apila en 1 columna por defecto
 * (comportamiento núcleo, correcto para 375px) y por encima ya son 3
 * columnas correctas (1440px).
 */
@media (min-width: 601px) and (max-width: 781px) {
	.svc-tarjetas-servicio.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--24);
	}

	.svc-tarjetas-servicio>.wp-block-column:last-child {
		grid-column: span 2;
	}
}

/*
 * Listado de blog (archive.html, page-blog.html, author.html): a 768px
 * ("Tableta blog listado", UI.dc.html id="1j") las tarjetas pasan a una
 * grilla de 2 columnas con imagen arriba; fuera de esa franja (375 y
 * 1440) siguen en 1 columna, tal como ya construían por defecto los
 * templates. Acotado a 601-781px: el wp:columns interno de cada tarjeta
 * (imagen | contenido) sólo se apila verticalmente por debajo de 782px
 * (núcleo, gratis); forzar la grilla más allá de ese punto produciría 2
 * columnas de tarjetas horizontales, que no es ninguna composición de
 * los mockups.
 */
@media (min-width: 601px) and (max-width: 781px) {
	.svc-listado-blog .wp-block-post-template {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--24);
	}
}

/*
 * El teaser "Lo último que publicamos" de Inicio (blog-teaser.php) es un
 * wp:columns de 3 tarjetas fijas — el mismo tipo de bloque que
 * tarjetas-servicio y grid-sectores, con el mismo bug de núcleo (colapsa a
 * 1 columna por debajo de 782px) ya corregido en esos dos patrones y en el
 * listado de /blog/, pero que nunca llegó a este componente de portada
 * porque no es una plantilla de blog. UI.dc.html no dibuja un mockup de
 * tableta específico para esta sección exacta (su "Tableta Inicio" corta
 * justo antes, después de la banda de cifras), así que se sigue el mismo
 * criterio de tarjetas-servicio en vez del de svc-listado-blog: son 3
 * tarjetas fijas (no un listado de conteo variable), así que la tercera
 * ocupa el ancho completo (2 + 1) en vez de dejar un hueco vacío junto a
 * ella — misma franja 601-781px, mismo patrón que el resto de esta
 * página.
 */
@media (min-width: 601px) and (max-width: 781px) {
	.svc-blog-teaser.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--24);
	}

	.svc-blog-teaser>.wp-block-column:last-child {
		grid-column: span 2;
	}
}

/*
 * Mismo bug de fondo que tarjetas-servicio/grid-sectores (wp:columns
 * colapsa a 1 columna por debajo de 782px) en 2 grillas que nunca lo
 * habían recibido — "El equipo" de Nosotros (4 tarjetas) y las 6 tarjetas
 * de /herramientas/. A diferencia de tarjetas-servicio (3 fijas, 2+1),
 * aquí el conteo es par — 2 columnas llenas sin necesidad de que la
 * última ocupe todo el ancho.
 */
@media (min-width: 601px) and (max-width: 781px) {
	.svc-grid-equipo.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--24);
	}
}

/*
 * El header se partía en 2 filas a 768px y a 1440px: patterns/header.php:11
 * usa "layout":{"flexWrap":"wrap"} sin ninguna excepción de escritorio.
 * Fix en 2 capas:
 *
 * 1) A partir de 768px, nunca envolver la fila del header a una segunda
 *    línea. A 768px el nav ya está colapsado a hamburguesa (regla de
 *    responsive fino, abajo), así que esta sola regla ya deja logo +
 *    hamburguesa + horario/teléfono/botón en una fila.
 *
 * 2) A partir de 1025px —el mismo punto en que esa misma regla vuelve a
 *    mostrar el nav completo en línea— el contenido real (logo + 7 ítems
 *    de nav + horario/teléfono/botón) mide ~76px más que el ancho
 *    disponible a 1440px: crecido sobre todo por el área táctil de 44×44
 *    del botón del submenú "Software" (+20px) y por gaps heredados sin
 *    fijar a un token propio. Se ajusta SÓLO en este rango de escritorio
 *    con mouse:
 *    - logo y nav dejan de encogerse (si no, el nombre del sitio o
 *      "Contacto" se partían en 2 líneas en vez de simplemente ceder
 *      espacio de separación entre bloques).
 *    - los gaps (fila del header, grupo del logo, nav interno, bloque de
 *      acciones) bajan uno o dos escalones dentro de la propia escala
 *      4·8·16·24·40·64·96 — no se inventa ningún valor fuera de ella.
 *    - el botón/ícono del submenú "Software" baja de 44×44 a 24×24: sigue
 *      cumpliendo el mínimo real de WCAG 2.5.8 (Target Size, AA, 24×24);
 *      el 44×44 es una mejora AAA (2.5.5) que aquí sólo debe aplicar a un
 *      control que en este rango de ancho se opera con mouse, no con
 *      dedo. Por debajo de 1025px este mismo botón vive dentro del
 *      overlay móvil/tableta de pantalla completa (recurso táctil real) y
 *      esta regla no lo alcanza — conserva su 44×44.
 */
@media (min-width: 768px) {
	.svc-header-row.is-layout-flex {
		flex-wrap: nowrap;
	}
}

@media (min-width: 1025px) {
	.svc-header-row.is-layout-flex {
		column-gap: 16px;
	}

	.svc-header-row>.wp-block-group:first-child {
		flex-shrink: 0;
	}

	.svc-header-row>.wp-block-group:first-child.is-layout-flex {
		column-gap: 4px;
	}

	/*
	 * Nav centrado en escritorio (mockup): el nav vive anidado dentro de
	 * "svc-header-right" junto a las acciones (ver nota en header.php sobre
	 * por qué comparten wrapper — necesario para que envuelvan juntos en
	 * <=1024px). Centrarlo respecto de ESE wrapper no lo centraría respecto
	 * al header completo, porque el wrapper solo cubre nav+acciones, no
	 * logo+nav+acciones. Se saca el nav del flujo flex con
	 * `position:absolute` y se centra respecto a "svc-header-row" (el
	 * ancestro posicionado más cercano, fila completa) — independiente del
	 * ancho real de logo y acciones a cada lado, igual que en el mockup.
	 * Sólo aquí (>=1025px): por debajo, el nav colapsa al overlay de
	 * hamburguesa y debe seguir en su lugar normal dentro del flujo.
	 */
	.svc-header-row {
		position: relative;
	}

	nav.svc-nav-principal {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.svc-nav-principal .wp-block-navigation__container {
		flex-wrap: nowrap;
		column-gap: 16px;
	}

	.svc-header-actions.is-layout-flex {
		column-gap: 16px;
	}

	.svc-nav-principal .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
		padding: 6px;
	}

	/* Ver nota en la definición del triángulo (línea ~290): sube 4px para
	   alinearse al centro óptico del texto en vez del alto total del <li>. */
	.svc-nav-principal .wp-block-navigation__submenu-icon::after {
		transform: translateY(-4px);
	}

	.svc-nav-principal .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon::after {
		transform: translateY(-4px) rotate(180deg);
	}
}

/*
 * A 1025-1919px el nav en línea se salía del viewport de verdad
 * (`scrollWidth` de la fila del header ~1378px contra un viewport de
 * 1025px, 353px de más — "Lun a Vie…" y el botón "Solicitar consulta"
 * quedaban recortados fuera de la pantalla, no sólo apretados). El
 * contenido completo (logo+eslogan+7 ítems de nav+horario/teléfono+botón,
 * con el espaciado íntegro de UI.dc.html) sigue sin caber ni a 1440px
 * exacto (83px de sobrante real) — el propio lienzo del mockup no deja
 * margen para el espaciado completo a su propio ancho de referencia. En
 * vez de volver a apretar los gaps del nav (eso es exactamente lo que ya
 * se ajustó una vez y seguía sintiéndose "todo junto" — 6px de columna
 * real entre ítems, muy por debajo del 24px de UI.dc.html), se libera
 * espacio ocultando el eslogan de marca y el bloque de horario/teléfono
 * en todo este tramo — el botón "Solicitar consulta" (la acción real) se
 * queda siempre visible. Sólo a partir de 1920px (monitor externo típico,
 * con margen real de sobra) se muestra todo completo con el espaciado
 * íntegro del mockup.
 */
@media (min-width: 1025px) and (max-width: 1919px) {
	.svc-header-actions> :first-child {
		display: none;
	}

	/*
	 * Sigue sin caber sólo con el horario oculto (218px de sobra todavía a
	 * 1025px con el eslogan largo de antes, "CONTABILIDAD · IMPUESTOS ·
	 * LEGAL"). El ajuste de logo acortó ese eslogan a "EL SALVADOR" — sólo
	 * 9px de sobra a 1025px con la marca completa visible, así que ya NO
	 * hace falta ocultarla; basta con recortar el gap del nav un poco más
	 * (8px en vez de 10px, sigue siendo más abierto que los 6px que
	 * motivaron el ajuste original).
	 */
	.svc-nav-principal .wp-block-navigation__container {
		column-gap: 8px;
		font-size: var(--wp--preset--font-size--s);
	}

	.svc-header-actions .wp-block-button__link {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Inactivo (ej. botón "Enviando…"): sin cursor de puntero, colores apagados
   (mismos valores que UI.dc.html id="1b", "PRIMARIO · INACTIVO"; el par no
   pasa AA a propósito — es el tratamiento estándar para controles inactivos,
   que quedan exentos del contraste mínimo por no ser accionables).
   Selector compuesto para igualar la especificidad del botón global de
   theme.json sin recurrir a !important. */
.wp-block-button__link.svc-inactivo {
	background: #e4e0d3;
	color: #8b8677;
	cursor: not-allowed;
	pointer-events: none;
}

/*
 * Contact Form 7: mismo layout que tenía el formulario estático de
 * page-contacto.html, ahora aplicado sobre el marcado real que genera CF7
 * (`.wpcf7-form`, `.wpcf7-list-item`, etc.) en vez de reinventarlo.
 * `.svc-campo`/`.svc-grid-campos` ya estilizan label/input/select/textarea
 * por descendencia — CF7 los envuelve en spans intermedios
 * (`.wpcf7-form-control-wrap`) que no rompen esos selectores.
 */
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	margin-top: var(--wp--preset--spacing--16);
}

.wpcf7-submit {
	align-self: flex-start;
}

/* [acceptance] genera su propio <label> interno (input + texto) — el
   contenedor `.svc-consentimiento` sólo aporta la clase de enganche;
   el layout en fila vive en ese <label> real, no en un <label> propio
   anidado (dos <label> anidados serían HTML inválido). */
.svc-consentimiento .wpcf7-list-item {
	margin: 0;
}

.svc-consentimiento .wpcf7-list-item label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font: 400 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

.svc-consentimiento input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--wp--preset--color--primario);
}

.svc-form-nota {
	font: 400 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

/* Mensajes de estado de CF7 (éxito/error), mostrados sobre el propio
   formulario — nunca en una ventana emergente, tal como pide el plan. */
.wpcf7-response-output {
	border-radius: var(--wp--custom--radius--sm);
	font: 400 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	padding: 0.75rem 1rem;
	margin: var(--wp--preset--spacing--16) 0 0;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: #2e7d32;
	color: #1b5e20;
	background: #edf7ed;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	border-color: #b3261e;
	color: #b3261e;
	background: #fdecea;
}

.wpcf7-form.invalid .wpcf7-response-output {
	border-color: var(--wp--preset--color--acento-oscuro);
	color: var(--wp--preset--color--acento-oscuro);
	background: var(--wp--preset--color--base-alt);
}

/*
 * Acordeón del CTA de Inicio (svc-cta-colapsable.js): sólo reordena el DOM
 * (agrupa nombre+correo arriba, mete el resto en un <details>) — el CSS
 * aquí sólo viste ese <details>/<summary> nativos. .svc-cta-detalles > * usa
 * margin-top en vez de gap porque el contenido movido dentro de un
 * <details> deja de ser hijo directo del flex .wpcf7-form (gap:16px ya no
 * les aplica).
 */
.svc-cta-detalles {
	border-top: 1px solid var(--wp--preset--color--contorno, #e4e0d3);
	padding-top: var(--wp--preset--spacing--16);
	interpolate-size: allow-keywords;
}

.svc-cta-detalles>*+* {
	margin-top: var(--wp--preset--spacing--16);
}

.svc-cta-boton-expandir {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font: 600 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
}

.svc-cta-boton-expandir::-webkit-details-marker {
	display: none;
}

.svc-cta-boton-expandir::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-cta-detalles[open]>.svc-cta-boton-expandir::after {
	transform: rotate(45deg);
}

/*
 * Animación de apertura/cierre de "Completar solicitud". CSS puro sobre
 * ::details-content (Chrome/Edge 131+, Safari 18.4+, Firefox 143+); en
 * navegadores sin soporte la regla se descarta y el <details> abre seco,
 * como antes. `interpolate-size` permite animar height:0 <-> auto y
 * `content-visibility ... allow-discrete` mantiene el contenido visible
 * mientras dura el cierre. Mismo easing que el resto del sitio; la red
 * global de prefers-reduced-motion neutraliza las transiciones, y el
 * stagger de campos queda dentro de `no-preference` porque su
 * animation-delay no se anula con esa red.
 */
.svc-cta-detalles::details-content {
	block-size: 0;
	overflow: hidden;
	/* El overflow:hidden de la animación recortaba el anillo de foco de los
	   campos (outline 3px + offset 2px = 5px fuera del borde). El padding le
	   da holgura y el margen negativo iguala el desplazamiento, así los
	   campos plegados siguen alineados con nombre/correo. */
	padding: 6px;
	margin: -6px;
	opacity: 0;
	transition: block-size 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.35s ease,
		content-visibility 0.5s allow-discrete;
}

.svc-cta-detalles[open]::details-content {
	block-size: auto;
	opacity: 1;
}

@keyframes svc-cta-campo-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.svc-cta-detalles[open]>*:not(summary) {
		animation: svc-cta-campo-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: calc(0.1s + var(--i, 0) * 50ms);
	}
}

/*
 * Footer (patterns/footer.php) real, causa raíz doble, no un ajuste
 * cosmético:
 * 1) su fila de 4 columnas era un wp:group con layout:flex sin ancho
 *    explícito por columna -- con flex-wrap:wrap + justify-content:space-
 *    between, la columna "Contacto" (la más ancha, con dirección+teléfono+
 *    correo+íconos) no cabía en la fila y saltaba sola a una segunda línea,
 *    dejando 3 columnas mal repartidas arriba. UI.dc.html (línea 936) define
 *    esta fila como CSS grid real con proporciones fijas
 *    "1.4fr 1fr 1fr 1.2fr" -- se reproduce aquí en vez de simular con flex.
 * 2) el propio `.alignwide` del tema no aporta ningún ancho máximo cuando su
 *    ancestro no usa layout:constrained (theme.json tiene
 *    useRootPaddingAwareAlignments:false, que apaga el mecanismo nativo de
 *    WP que generaría esa regla a nivel de raíz) -- el logo del footer
 *    medía x:0, pegado al borde izquierdo real del viewport, sin margen.
 *    Igual que el resto del sitio (banda-cifras, cta-formulario, etc.), la
 *    solución real es que la sección a sangre completa traiga su propio
 *    padding de 64px en vez de depender de un ancho centrado -- ya
 *    corregido en el propio patrón (padding-left/right en el wp:group
 *    exterior); esta clase sólo resuelve la grilla interna de 4 columnas.
 */
.wp-block-group.svc-footer-columnas {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}

/*
 * Las columnas de grid tienen min-width:auto por defecto — el correo sin
 * cortes "contacto@svconsultores.com" en la columna Contacto (la más
 * angosta, 1.2fr) podía forzar esa pista más ancha que su reparto real y
 * desbalancear las 4 columnas justo antes de que la tableta las colapse a
 * 2 (mismo criterio que min-width:0 ya usado en .svc-campo input más
 * arriba para el mismo tipo de bug con el <input size=40> de CF7).
 */
.wp-block-group.svc-footer-columnas>* {
	min-width: 0;
	overflow-wrap: break-word;
}

@media (max-width: 781px) {
	.wp-block-group.svc-footer-columnas {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.wp-block-group.svc-footer-columnas {
		grid-template-columns: 1fr;
	}
}

.svc-calendario-flotante-wrap {
	position: relative;
}

.svc-calendario-flotante {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--primario);
	box-shadow: 0 10px 30px rgba(6, 32, 63, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
}

.svc-calendario-flotante:hover {
	background: var(--wp--preset--color--primario-claro);
}

.svc-calendario-flotante__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--texto);
	font: 700 12px/18px var(--wp--preset--font-family--poppins);
	text-align: center;
}

.svc-caltrib-panel {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 12px;
	width: 400px;
	max-width: calc(100vw - 32px);
	max-height: min(74vh, 620px);
	overflow-y: auto;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 20px 50px rgba(6, 32, 63, 0.28);
	z-index: 101;
}

.svc-caltrib-panel,
.svc-caltrib-lista-mes,
.svc-caltrib-lista-anio {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--borde) transparent;
}

.svc-caltrib-panel::-webkit-scrollbar,
.svc-caltrib-lista-mes::-webkit-scrollbar,
.svc-caltrib-lista-anio::-webkit-scrollbar {
	width: 8px;
}

.svc-caltrib-panel::-webkit-scrollbar-track,
.svc-caltrib-lista-mes::-webkit-scrollbar-track,
.svc-caltrib-lista-anio::-webkit-scrollbar-track {
	background: transparent;
}

.svc-caltrib-panel::-webkit-scrollbar-thumb,
.svc-caltrib-lista-mes::-webkit-scrollbar-thumb,
.svc-caltrib-lista-anio::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--borde);
	border-radius: 4px;
}

.svc-caltrib-panel::-webkit-scrollbar-thumb:hover,
.svc-caltrib-lista-mes::-webkit-scrollbar-thumb:hover,
.svc-caltrib-lista-anio::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--texto-suave);
}

.svc-caltrib-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1rem 0;
}

.svc-caltrib-panel__titulos {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.svc-caltrib-panel__titulo {
	font: 600 var(--wp--preset--font-size--l)/1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
	margin: 0;
}

.svc-caltrib-eyebrow {
	display: none;
	font: 700 var(--wp--preset--font-size--eyebrow)/1 var(--wp--preset--font-family--poppins);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-eyebrow {
	display: block;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-panel__titulo {
	font-size: var(--wp--preset--font-size--l);
}

.svc-caltrib-subtitulo--expandida {
	display: none;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-subtitulo--normal {
	display: none;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-subtitulo--expandida {
	display: block;
}

.svc-caltrib-panel__acciones {
	display: flex;
	align-items: center;
	gap: 4px;
}

.svc-caltrib-panel__expandir {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	color: var(--wp--preset--color--texto-suave);
	padding: 0.375rem;
	border-radius: var(--wp--custom--radius--sm);
}

.svc-caltrib-panel__expandir:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primario);
}

.svc-caltrib-panel__expandir-icono:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 6px;
}

.svc-caltrib-panel__expandir-texto {
	font: 600 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-panel__expandir {
	border-color: var(--wp--preset--color--borde);
	padding: 0.5rem 0.75rem;
	color: var(--wp--preset--color--primario);
}

.svc-caltrib-panel__cerrar {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--wp--preset--color--texto-suave);
	padding: 0.25rem 0.5rem;
}

.svc-caltrib-subtitulo {
	margin: 0;
	padding: 0 1rem;
	font: 400 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

.svc-caltrib-leyenda-detalle {
	margin: 6px 16px 0;
}

.svc-caltrib-leyenda-detalle summary {
	cursor: pointer;
	font: 600 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
	list-style: none;
}

.svc-caltrib-leyenda-detalle summary::-webkit-details-marker {
	display: none;
}

.svc-caltrib-leyenda-detalle summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 4px;
	font-size: 0.625rem;
	transition: transform 120ms ease;
}

.svc-caltrib-leyenda-detalle[open] summary::before {
	transform: rotate(90deg);
}

.svc-caltrib-leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.svc-caltrib-leyenda li {
	display: flex;
	align-items: center;
	gap: 5px;
	font: 400 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

.svc-caltrib-tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0.75rem 1rem 0;
	margin-top: 10px;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/*
 * Leyenda "inline": mismos 5 <li> de .svc-caltrib-leyenda (reutiliza la
 * clase), en el lugar del <details> (bajo el subtítulo, alineada a la
 * izquierda con el título) y SIEMPRE visible — sólo tiene sentido con
 * .is-expandida; en el panel miniatura sigue viviendo el <details>
 * colapsable de arriba. Fila propia, no junto a los tabs: con el texto
 * más grande de la vista expandida ya no cabe al lado, y `margin-left:
 * auto` la dejaba pegada a la derecha.
 */
.svc-caltrib-leyenda--inline {
	display: none;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-leyenda-detalle {
	display: none;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-leyenda--inline {
	display: flex;
	gap: 6px 20px;
	margin: 12px 16px 0;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-leyenda--inline li {
	gap: 8px;
	font-size: var(--wp--preset--font-size--xs);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-leyenda--inline .svc-caltrib-punto {
	width: 10px;
	height: 10px;
}

.svc-caltrib-tab {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0.5rem 0.625rem;
	font: 600 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
	border-bottom: 2px solid transparent;
}

.svc-caltrib-tab.is-activa {
	color: var(--wp--preset--color--primario);
	border-bottom-color: var(--wp--preset--color--primario);
}

.svc-caltrib-panel__body {
	padding: 0.75rem 1rem 1rem;
}

.svc-caltrib-mes-select {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primario);
	font: 600 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	padding: 0.25rem 0.375rem;
	min-height: 2.125rem;
}

/*
 * Botones ‹/› SIEMPRE en el mismo lugar: el <select> del medio usa
 * flex:1/min-width:0 en vez de ancho natural, así el ancho del nombre del
 * mes ("Enero" vs "Septiembre") nunca empuja los botones — quedan pegados
 * a los bordes del contenedor pase lo que pase. Sólo hay un año cargado
 * (ver svc-caltrib-subtitulo) — no hay selector de año, y ‹/› se
 * deshabilitan en enero/diciembre en vez de dar vuelta al año.
 */
.svc-caltrib-mes-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

#svc-caltrib-mes-select {
	flex: 1;
	min-width: 0;
	text-align: center;
	text-align-last: center;
}

.svc-caltrib-mes-boton {
	flex: none;
	border: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--base);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 0.9375rem;
	cursor: pointer;
	line-height: 1;
	color: var(--wp--preset--color--primario);
}

.svc-caltrib-mes-boton:hover {
	background: var(--wp--preset--color--base-alt);
}

.svc-caltrib-mes-boton:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: var(--wp--preset--color--base);
}

.svc-caltrib-grid {
	display: grid;
	/*
	 * minmax(0, 1fr), no 1fr a secas: un <span> de texto sin wrap dentro de
	 * una celda (los chips de la vista expandida) tiene un ancho mínimo
	 * intrínseco = su texto completo, y ESE mínimo se filtra hacia la pista
	 * del grid salvo que se le ponga un tope explícito — si no, la columna
	 * con el evento de título más largo empuja a todas las demás.
	 */
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
	margin-bottom: 8px;
}

.svc-caltrib-grid__cabecera {
	text-align: center;
	font: 600 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
	padding-bottom: 0.25rem;
}

/*
 * Cada cabecera trae 3 <span> (letra / 3 letras / nombre completo, ver
 * renderGrid() en el JS): se muestra uno según el ancho — miniatura y
 * móvil, la letra; la vista expandida sube a "Lun" y luego a "Lunes" (ver
 * más abajo, junto a los demás estilos de .is-expandida).
 */
.svc-caltrib-grid__nombre--abrev,
.svc-caltrib-grid__nombre--completo {
	display: none;
}

/*
 * Es un <button> (excepto los "--vacio", que siguen siendo <div>, ver
 * renderGrid() en el JS) — de ahí el reset de borde/fondo/fuente, para que
 * no se vea como botón de navegador. Clicable en toda la celda: selecciona
 * la fecha y resalta sus actividades en la lista de abajo.
 */
.svc-caltrib-grid__dia {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	aspect-ratio: 1;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--sm);
	font: 400 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto);
}

.svc-caltrib-grid__dia:hover {
	background: var(--wp--preset--color--base-alt);
}

.svc-caltrib-grid__dia:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario);
	outline-offset: 1px;
}

.svc-caltrib-grid__dia--vacio {
	visibility: hidden;
	cursor: default;
}

.svc-caltrib-grid__dia--hoy {
	background: var(--wp--preset--color--base-alt);
	font-weight: 700;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primario);
}

/* Día de la próxima actividad pendiente (ver eventoProximo en el JS). */
.svc-caltrib-grid__dia--proximo {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primario);
}

/*
 * Día elegido con clic — fondo sólido en vez de sólo borde, para no
 * confundirse con --hoy/--proximo (ambos son sólo un borde/box-shadow).
 * Después de esas dos reglas a propósito: si el día seleccionado también es
 * hoy o el próximo, este fondo debe ganar visualmente.
 */
.svc-caltrib-grid__dia--seleccionado {
	background: var(--wp--preset--color--primario);
	color: var(--wp--preset--color--base);
	box-shadow: none;
}

.svc-caltrib-grid__dia--seleccionado:hover {
	background: var(--wp--preset--color--primario-claro);
}

.svc-caltrib-grid__puntos {
	display: flex;
	gap: 2px;
}

.svc-caltrib-punto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
}

/*
 * Etiquetas de texto por día — sólo en .is-expandida (ver renderGrid() en
 * el JS, que elige puntos vs. etiquetas según esta misma clase). El color
 * deja de ser el único portador de información: hay espacio de sobra para
 * el título de cada actividad.
 */
.svc-caltrib-grid__chips {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

.svc-caltrib-chip {
	display: block;
	/*
	 * box-sizing:border-box es necesario, no cosmético — sin un reset
	 * global a border-box en el tema, width:100% + padding horizontal se
	 * SUMABAN (content-box, default del navegador) y el chip quedaba 8px
	 * más ancho que su contenedor, empujando el texto/borde fuera de la
	 * celda en vez de quedar a ras.
	 */
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 600 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--base);
	padding: 0.0625rem 0.25rem;
	border-radius: 3px;
}

/*
 * Sin alto fijo ni scroll propio en el panel miniatura: con scroll interno
 * aquí Y scroll en .svc-caltrib-panel (el panel ya no cabe completo desde
 * que el texto se agrandó, ver más abajo), quedaban dos scrolls anidados
 * compitiendo por la rueda del mouse — caótico, y ninguno de los dos traía
 * indicador visible. Un solo scroll (el del panel) es más predecible; ver
 * el scrollbar visible que se agrega más abajo.
 */
.svc-caltrib-lista-mes {
	list-style: none;
	margin: 8px 0 0;
	padding: 0.5rem 0.25rem 0 0;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.svc-caltrib-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 0.375rem 0;
	font: 400 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto);
}

.svc-caltrib-item .svc-caltrib-punto {
	margin-top: 5px;
}

.svc-caltrib-item__fecha {
	color: var(--wp--preset--color--primario);
	white-space: nowrap;
}

/* Próxima actividad pendiente (fecha >= hoy más cercana) — ver eventoProximo en el JS. */
.svc-caltrib-item--proximo {
	border: 1.5px solid var(--wp--preset--color--primario);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.5rem;
}

.svc-caltrib-item--proximo .svc-caltrib-item__fecha {
	color: var(--wp--preset--color--acento);
	font-weight: 700;
}

/*
 * Actividad de la fecha elegida en la grilla (ver seleccionarFecha() en el
 * JS) — fondo, no borde, para no confundirse con --proximo (ambas clases
 * pueden coincidir en el mismo <li>, se ven bien juntas).
 */
.svc-caltrib-item--seleccionado {
	background: var(--wp--preset--color--base-alt);
	border-left: 3px solid var(--wp--preset--color--primario);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.5rem 0.5rem 0.5rem 0.375rem;
}

.svc-caltrib-item__descripcion {
	display: block;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--xs);
	margin-top: 2px;
}

/*
 * Recorte a 2 líneas + "…" nativo — en las dos listas de actividades (tab
 * "Calendario" y tab "Lista de actividades"), miniatura y expandida; ver
 * crearItemEvento() en el JS.
 */
.svc-caltrib-item__descripcion--clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Botón "Leer más" la desactiva — mayor especificidad (2 clases) que --clamp arriba, gana sin importar el orden. */
.svc-caltrib-item__descripcion--clamp.svc-caltrib-item__descripcion--expandida {
	display: block;
	overflow: visible;
}

.svc-caltrib-item--expandible {
	cursor: pointer;
}

.svc-caltrib-item__leermas {
	display: inline-block;
	margin-top: 2px;
	border: 0;
	background: none;
	padding: 0;
	font: 600 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
	text-decoration: underline;
	cursor: pointer;
}

.svc-caltrib-item__leermas:hover {
	color: var(--wp--preset--color--primario-claro);
}

/* Igual que .svc-caltrib-lista-mes: sin scroll propio en el panel miniatura — un solo scroll, el de .svc-caltrib-panel. */
.svc-caltrib-lista-anio {
	max-height: none;
}

/*
 * Una sola lista continua, un solo scroll (el de .svc-caltrib-lista-anio
 * arriba) — antes cada mes era su propio <ul class="svc-caltrib-lista-mes">,
 * que trae alto fijo + scroll propio (necesario en el tab "Calendario", ver
 * la nota de alto fijo más arriba), así que aquí quedaba un scroll anidado
 * por mes dentro del scroll del año: tedioso para recorrer el año completo.
 * Los meses se separan con un renglón dentro de esta misma lista, no con
 * listas nuevas.
 */
.svc-caltrib-lista-completa {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svc-caltrib-lista-completa__separador {
	/*
	 * Sin text-transform:capitalize — el JS (capitalizar()) ya sube sólo la
	 * primera letra de "enero de 2026"; capitalize en CSS subía TAMBIÉN la
	 * "d" de "de", quedando "Enero De 2026".
	 */
	position: sticky;
	top: 0;
	background: var(--wp--preset--color--base);
	font: 700 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.625rem 0 0.25rem;
	margin-top: 4px;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.svc-caltrib-lista-completa__separador:first-child {
	margin-top: 0;
	padding-top: 0;
}

.svc-caltrib-vacio {
	color: var(--wp--preset--color--texto-suave);
	font: 400 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	padding: 0.75rem 0;
}

@media (max-width: 600px) {
	.svc-calendario-flotante {
		width: 56px;
		height: 56px;
	}

	.svc-caltrib-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		width: 100%;
		max-width: 100%;
		max-height: 80vh;
		border-radius: 16px 16px 0 0;
	}
}

/*
 * Vista "expandida" — botón Expandir/Contraer del header (accesibilidad:
 * modal a pantalla completa con texto y objetivos más grandes, sin depender
 * del zoom del navegador). Mismo componente/mismo JSON, sólo una clase de
 * estado sobre el panel existente — no hay una segunda plantilla.
 */
.svc-caltrib-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 42, 90, 0.55);
	z-index: 100;
}

.svc-caltrib-backdrop:not([hidden]) {
	display: block;
}

.svc-caltrib-panel.is-expandida {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(94vw, 1100px);
	height: min(90vh, 760px);
	max-width: none;
	max-height: none;
	border-radius: var(--wp--custom--radius--md);
	z-index: 102;
}

/* La vista expandida conserva los tamaños compartidos por función. */
.svc-caltrib-panel.is-expandida .svc-caltrib-subtitulo {
	font-size: var(--wp--preset--font-size--xs);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-tab {
	font-size: var(--wp--preset--font-size--s);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-mes-select {
	font-size: var(--wp--preset--font-size--s);
	min-height: 2.25rem;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-mes-boton {
	width: 36px;
	height: 36px;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-grid__cabecera {
	font-size: var(--wp--preset--font-size--xs);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-grid__dia {
	font-size: var(--wp--preset--font-size--s);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-chip {
	font-size: var(--wp--preset--font-size--xs);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-item {
	font-size: var(--wp--preset--font-size--s);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-item .svc-caltrib-punto {
	margin-top: 7px;
}

.svc-caltrib-panel.is-expandida .svc-caltrib-item__descripcion {
	font-size: var(--wp--preset--font-size--xs);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-item__leermas {
	font-size: var(--wp--preset--font-size--xs);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-lista-completa__separador,
.svc-caltrib-panel.is-expandida .svc-caltrib-vacio {
	font-size: var(--wp--preset--font-size--xs);
}

.svc-caltrib-panel.is-expandida .svc-caltrib-lista-anio {
	max-height: min(60vh, 560px);
	overflow-y: auto;
}

/*
 * Calendario en 2 columnas (grilla del mes + agenda al lado) — sólo cabe a
 * partir de ~681px; por debajo, la grilla de 7 columnas no admite texto
 * legible (ver activarTab('lista') forzado en el JS al expandir en móvil),
 * así que ahí se mantiene el apilado normal de una columna.
 */
@media (min-width: 681px) {

	/*
	 * :not([hidden]) es necesario, no cosmético — un ID (#svc-caltrib-
	 * panel-calendario) tiene más especificidad que la regla nativa
	 * [hidden]{display:none}, así que sin esto el "display:grid" de abajo
	 * GANABA sobre el hidden que pone activarTab() al cambiar al tab
	 * "Lista de actividades": el calendario se quedaba visible y la lista
	 * aparecía apilada debajo en vez de reemplazarlo.
	 */
	.svc-caltrib-panel.is-expandida #svc-caltrib-panel-calendario:not([hidden]) {
		display: grid;
		grid-template-columns: 1fr 280px;
		grid-template-areas: 'nav nav' 'grid lista';
		column-gap: 24px;
		row-gap: 12px;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-mes-nav {
		grid-area: nav;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-grid {
		grid-area: grid;
		align-content: start;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-lista-mes {
		grid-area: lista;
		height: auto;
		max-height: 100%;
		overflow-y: auto;
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--borde);
		padding-left: 0.75rem;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-grid__dia {
		aspect-ratio: auto;
		min-height: 5.75rem;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 0.375rem;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-grid__numero {
		align-self: flex-start;
		font-weight: 600;
	}

	/*
	 * Cabecera alineada a la izquierda, con el mismo padding que la celda,
	 * para quedar sobre el número del día. "Lun" (3 letras) desde aquí;
	 * el nombre completo sólo desde 960px — "Miércoles" no cabe antes en
	 * una columna de la grilla (el panel mide 94vw y la agenda lateral
	 * ocupa 280px).
	 */
	.svc-caltrib-panel.is-expandida .svc-caltrib-grid__cabecera {
		text-align: left;
		padding-left: 0.375rem;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-grid__nombre--letra {
		display: none;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-grid__nombre--abrev {
		display: inline;
	}
}

@media (min-width: 960px) {

	/* Agenda un poco más ancha: con el texto agrandado, 280px partía títulos como "(F-07)" en dos líneas. */
	.svc-caltrib-panel.is-expandida #svc-caltrib-panel-calendario:not([hidden]) {
		grid-template-columns: 1fr 320px;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-grid__nombre--abrev {
		display: none;
	}

	.svc-caltrib-panel.is-expandida .svc-caltrib-grid__nombre--completo {
		display: inline;
	}
}

@media (max-width: 680px) {
	.svc-caltrib-panel.is-expandida {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

/*
 * Fichas de Servicios/Software — componentes que UI.dc.html define para
 * los índices (1d/1n) y las 9 fichas de detalle
 * (1r/1t/1u/1v/1w/1x/1y/1z/1aa). "56px" es un valor real del mockup para
 * el hero de estas 2 pantallas — no está en la escala 4·8·16·24·40·64·96
 * existente, así que se agrega su propio token en theme.json en vez de
 * aproximarlo a 40/64.
 */

/* Píldora de cercanía del hero (fondo navy): fondo translúcido + punto
   "acento" + frase corta. Texto en color "base" (blanco) en vez del
   #E6EDF7 literal del mockup — mismo criterio ya usado en el resto del
   hero (párrafo principal también usa "base"), sin inventar un tono nuevo
   para una diferencia imperceptible. */
.svc-pildora-cercania {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	margin-top: 4px;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	border-radius: var(--wp--custom--radius--full);
	background: rgba(255, 255, 255, 0.1);
	font: 500 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--base);
}

.svc-pildora-cercania__punto {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--acento);
}

/* Caja de imagen del hero/tarjeta de índice (400px alto en hero, 168px en
   banda de tarjeta) cuando no hay fotografía real todavía (mismo criterio
   que Nosotros): fondo "base-alt" + logo/ilustración ya existente
   centrada con "contain" (nunca recortada), o el nombre del producto en
   texto real si no existe ningún archivo para ese slug. */
.svc-foto-caja {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--wp--custom--radius--md);
	padding: 32px;
	box-sizing: border-box;
}

/*
 * object-fit sólo controla cómo encaja el contenido DENTRO de la caja del
 * <img> — necesita que el <img> mismo ya mida algo (aquí, el 100% de
 * .svc-foto-caja menos su padding). Un `max-width/max-height` sin ancho
 * base no funciona: los SVG de assets/img/servicios no traen width/height
 * propios en su <svg> raíz, sólo viewBox, así que sin esto
 * el navegador les da el tamaño de reemplazo por defecto (300×150) y
 * quedaban minúsculos dentro de la caja.
 */
.svc-foto-caja img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Fallback de las tarjetas de listado sin foto (functions.php,
   svc_child_foto_fallback_listados): logo pequeño centrado en vez del
   100% de la caja; min-height para que no colapse cuando la tarjeta apila
   la imagen sobre el texto (móvil), donde el 100% no tiene alto de
   referencia. Sin radio: la tarjeta ya recorta con su propio borde. */
.svc-foto-fallback {
	min-height: 160px;
	border-radius: 0;
}

.svc-foto-fallback img {
	width: 96px;
	height: 96px;
}

.svc-foto-caja__texto {
	font: 600 1.5rem var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
	text-align: center;
	padding: 0 1.5rem;
}

/* Banda fotográfica de las tarjetas de índice (Servicios/Software):
   168px de alto fijo, sin radio (la tarjeta ya recorta con overflow:hidden).
   position:relative es el ancla de .svc-foto-cover cuando la banda es una
   foto real en vez de un ícono/logo (ver .svc-foto-servicio más abajo). */
/*
 * width:100% explícito — sin ancho propio, esta banda quedaba en 0px de
 * ancho real en /servicios/ (tarjetas-indice-servicios.php): es hijo de un
 * `<a class="svc-tarjeta">` en flex-column con align-items:flex-start (no
 * "stretch"), y su <img> real (.svc-foto-cover) es position:absolute, así
 * que no aporta ningún ancho intrínseco al padre — la única foto visible
 * era la de la ficha de detalle (hero-servicio-item.php), que vive dentro
 * de un grid con columna fija de 400px, no de este flex-column.
 */
.svc-tarjeta-foto {
	width: 100%;
	height: 168px;
	border-radius: 0;
	position: relative;
}

/* Bloque "EN PALABRAS SENCILLAS" de las fichas: fondo "base-alt", borde
   izquierdo de 3px "acento", radio sólo en el lado derecho. */
.svc-callout-sencillo {
	background: var(--wp--preset--color--base-alt);
	border-left: 3px solid var(--wp--preset--color--acento);
	border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
	padding: 1.125rem 1.375rem;
}

.svc-callout-sencillo__etiqueta {
	font: 600 var(--wp--preset--font-size--xs)/1.5 var(--wp--preset--font-family--poppins);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--acento-oscuro);
}

.svc-callout-sencillo p {
	margin: 8px 0 0;
	color: var(--wp--preset--color--texto);
}

/* Lista "QUÉ HACEMOS POR USTED"/"QUÉ RESUELVE": viñeta circular en vez del
   punto nativo del navegador. */
.svc-lista-vinetas {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.svc-lista-vinetas li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.svc-vinieta-circulo {
	flex: none;
	margin-top: 4px;
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--radius--full);
	background: #fff1e6;
	border: 1.5px solid var(--wp--preset--color--acento);
}

/* Tríptico "Cómo trabajamos con usted"/"Cómo lo implementamos": 3 pasos
   numerados en círculo sobre fondo "base-alt". */
.svc-paso {
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.375rem;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.svc-paso__numero {
	width: 34px;
	height: 34px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--acento);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--acento-oscuro);
}

/* Ritmo entre secciones de la ficha de servicio (templates/page-servicio-item.html):
   post-content ahí es una secuencia plana de bloques sin wp:group por sección,
   así que el blockGap de 16px del tema (theme.json) quedaba igual entre
   "etiqueta + titular" que entre bloques que en realidad son secciones
   distintas (callout, checklist, CTA, tríptico). Mismo criterio que
   .svc-articulo-cuerpo h2/h3 (líneas ~1776-1799): romper el ritmo plano con
   margin-block-start puntual en los bloques que sí abren sección nueva. */
.svc-servicio-cuerpo > :first-child {
	margin-block-start: 0;
}

.svc-servicio-cuerpo .svc-callout-sencillo {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.svc-servicio-cuerpo > p.has-acento-oscuro-color {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.svc-servicio-cuerpo .wp-block-buttons {
	margin-block: var(--wp--preset--spacing--24) 0;
}

/* Separar las secciones sin convertir cada paso o pregunta en otro titular.
   Los tamaños base se fijan en theme.json para compartirlos con el editor. */
:is(.svc-servicio-cuerpo, .svc-herramienta-cuerpo, .svc-software-cuerpo) > h2 {
	margin-block: 2.75rem 0;
}

:is(.svc-servicio-cuerpo, .svc-herramienta-cuerpo, .svc-software-cuerpo) > h3 {
	margin-block: 1.75rem 0;
}

:is(.svc-servicio-cuerpo, .svc-herramienta-cuerpo, .svc-software-cuerpo) > :is(h2, h3) + p {
	margin-block-start: .75rem;
}

:is(.svc-servicio-cuerpo, .svc-herramienta-cuerpo, .svc-software-cuerpo) > :first-child {
	margin-block-start: 0;
}

/* Monograma (iniciales) para el retrato del consultor: no hay fotografía
   real de estas personas todavía, y no son datos que deba inventarse como
   una imagen — un círculo con iniciales es el mismo criterio de "sustituto
   honesto" que ya usa cualquier producto sin foto de perfil real. */
.svc-monograma {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--primario);
	color: var(--wp--preset--color--base);
	font: 600 1rem var(--wp--preset--font-family--poppins);
}

.svc-monograma--64 {
	width: 64px;
	height: 64px;
	font-size: 1.0625rem;
}

.svc-monograma--84 {
	width: 84px;
	height: 84px;
	font-size: 1.3125rem;
}

/* Retrato real (svc_child_foto_url()) en el mismo hueco circular que el
   monograma de iniciales — mismos tamaños --64/--84, mismo criterio de
   overflow:hidden + object-fit:cover que .svc-foto-caja para que el <img>
   llene el círculo sin deformarse. */
.svc-foto-persona {
	flex: none;
	display: block;
	border-radius: var(--wp--custom--radius--full);
	overflow: hidden;
}

.svc-foto-persona img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.svc-foto-persona--64 {
	width: 64px;
	height: 64px;
}

.svc-foto-persona--84 {
	width: 84px;
	height: 84px;
}

/*
 * Foto de escena (hero de portada, testimonio, retratos del grid de
 * Nosotros) en vez de la leyenda de texto/caja gris de "pendiente de foto":
 * llena el contenedor que la envuelve. Object-fit:cover (recorta para
 * llenar) en vez de "contain" (que sí usa .svc-foto-caja para no recortar
 * un SVG/logo) porque aquí SÍ hay contenido de foco central
 * (rostro/personas) que puede perder algo de borde sin perder sentido.
 *
 * position:absolute + inset:0 (contenedor con position:relative) en vez de
 * width/height:100% en flujo normal: los 3 contenedores que usan esta
 * clase son bloques `layout:flex` de WP, y el CSS que el propio núcleo
 * genera para ese tipo de layout centra en el eje cruzado
 * (align-items:center) en vez de estirar (align-items:stretch) — un
 * height:100% ahí nunca llega a resolver contra el min-height del padre
 * porque el padre no le da una altura definida a un hijo centrado, así
 * que el navegador cae al tamaño intrínseco de la imagen y la CAJA es la
 * que termina creciendo a como venga la foto, no al revés. Un elemento con
 * position:absolute queda fuera del flujo (no participa del cálculo de
 * altura automática del padre ni de ese centrado), así que sí puede
 * resolver su 100% contra la altura ya puesta por min-height, sin ese
 * ciclo.
 */
.svc-foto-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Caja de foto real de servicio (hero de ficha, patterns/hero-servicio-item.php)
 * — mismo fondo/radio que .svc-foto-caja pero SIN su padding:32px ni su
 * regla `img{object-fit:contain}` (pensada para no recortar un ícono
 * SVG). Una foto de stock va borde a borde con .svc-foto-cover encima;
 * mezclar ambas clases en el mismo <img> haría que `.svc-foto-caja img`
 * (más específica) le gane a `.svc-foto-cover` en object-fit/tamaño.
 */
.svc-foto-servicio {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base-alt);
}

/*
 * Hero de índices/fichas de Servicios y Software: grid de 2 columnas
 * (1fr/400px) fijo en línea, vía `style` — una regla de hoja normal no le
 * gana a eso, así que hace falta !important para colapsar a 1 columna en
 * tableta/móvil (foto debajo del texto, UI.dc.html "1i" móvil), mismo
 * criterio ya documentado para los otros 2 `!important` del sitio (verde
 * de WhatsApp, anillo de foco global).
 */
@media (max-width: 781px) {
	.svc-hero-ficha {
		grid-template-columns: 1fr !important;
	}
}

/* Fila de retratos del equipo (índice de Servicios): 6 columnas fijas en
   escritorio, se acorta por ancho en tableta/móvil — mismo criterio ya
   usado en el resto de grillas del sitio (2+1/2×2). */
@media (max-width: 781px) {
	.svc-fila-equipo {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.svc-fila-equipo {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


/* Última fila de los submenús Servicios/Software ("Ver todos los
   servicios"/"Ver todo el software", UI.dc.html 1n líneas 632-638): línea
   separadora arriba + color "acento-oscuro" en vez del texto normal del
   submenú, igual que el resto de enlaces "Ver todo(s)" del sitio. */
.svc-nav-ver-todo {
	border-top: 1px solid var(--wp--preset--color--borde);
	margin-top: 8px;
	padding-top: 0.5rem;
}

.svc-nav-ver-todo .wp-block-navigation-item__content {
	min-height: 44px;
	display: flex;
	align-items: center;
	/* "acento" (naranja brillante), no "acento-oscuro": este enlace vive
	   sobre el fondo navy del propio desplegable — acento-oscuro está
	   calibrado para AA sobre fondos claros, no sobre navy. Mismo tono ya
	   usado para el tramo activo de las migas sobre navy. */
	color: var(--wp--preset--color--acento) !important;
	font-weight: 600;
}

/* Reseñas y logos: dos pistas continuas, en sentidos opuestos.
   Cada tarjeta lleva su margen para que -50% coincida con el segundo juego. */
.svc-resenas-mask,
.svc-clientes-mask {
	margin: 0 calc(var(--wp--preset--spacing--64) * -1);
	padding: 4px var(--wp--preset--spacing--64);
	overflow: hidden;
}

.svc-resenas-track,
.svc-clientes-track {
	display: flex;
	width: max-content;
}

@keyframes svc-resenas-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.svc-resenas-track {
	animation: svc-resenas-marquee 46s linear infinite;
}

.svc-resenas-mask:hover .svc-resenas-track,
.svc-resenas-mask:focus-within .svc-resenas-track {
	animation-play-state: paused;
}

.svc-resena-tarjeta {
	flex: none;
	width: 380px;
	margin: 0 var(--wp--preset--spacing--24) 0 0;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--24);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
}

.svc-resena-tarjeta blockquote {
	margin: 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--m);
	line-height: 1.55;
	color: var(--wp--preset--color--texto);
}

.svc-resena-tarjeta figcaption {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.svc-resena-barra {
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--acento);
}

.svc-resena-empresa {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--primario);
}

@keyframes svc-clientes-marquee {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}

.svc-clientes-track {
	animation: svc-clientes-marquee 52s linear infinite;
}

.svc-clientes-mask:hover .svc-clientes-track {
	animation-play-state: paused;
}

.svc-cliente-logo {
	flex: none;
	width: 176px;
	height: 96px;
	margin: 0 20px 0 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.svc-cliente-logo img {
	max-height: 44px;
	max-width: 144px;
	width: auto;
	height: auto;
	display: block;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 0.25s, opacity 0.25s;
}

.svc-cliente-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/*
 * padding-left/right en línea (`style` del propio wp:group) — mismo
 * motivo de `!important` ya documentado arriba para .svc-tarjeta-texto/
 * .svc-hero-ficha/.svc-fila-equipo: un atributo `style` inline gana
 * siempre sobre una regla de hoja sin !important, sin importar
 * especificidad.
 */
@media (max-width: 781px) {

	.svc-resenas,
	.svc-clientes {
		padding-left: var(--wp--preset--spacing--24) !important;
		padding-right: var(--wp--preset--spacing--24) !important;
	}

	.svc-resenas-mask,
	.svc-clientes-mask {
		margin: 0 calc(var(--wp--preset--spacing--24) * -1);
		padding: 4px var(--wp--preset--spacing--24);
	}

	.svc-resena-tarjeta {
		width: 300px;
	}
}

/* Sin movimiento automático, las seis citas siguen accesibles por scroll
   horizontal (incluido teclado); las copias para el bucle ya no hacen falta. */
@media (prefers-reduced-motion: reduce) {
	.svc-resenas-mask { overflow-x: auto; }
	.svc-resenas-track { animation: none; transform: none; gap: var(--wp--preset--spacing--24); }
	.svc-resena-tarjeta { margin-right: 0; }
	.svc-resena-tarjeta[aria-hidden="true"] { display: none; }
}

/* Fondo a sangre completa; el contenido en flujo reserva altura antes de cargar. */
.svc-hero-3c {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: clamp(600px, 43vw, 760px);
	color: #ffffff;
}

.svc-hero-3c>* {
	margin: 0;
}

.svc-hero-3c__poster,
.svc-hero-3c__video {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
}

.svc-hero-3c__video {
	z-index: -2;
	opacity: 0;
}

.svc-hero-3c.has-video .svc-hero-3c__video {
	opacity: 1;
}

.svc-hero-3c__texto {
	box-sizing: border-box;
	width: min(100%, 788px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	padding: 40px 64px 88px;
}

.svc-hero-3c__texto>* {
	margin-block: 0;
}

.svc-hero-3c__motion {
	position: absolute;
	left: 64px;
	bottom: 24px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid #8aa0c0;
	border-radius: 4px;
	background: rgba(6, 24, 49, .86);
	color: #ffffff;
	font: 500 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	cursor: pointer;
}

.svc-hero-3c__motion:hover {
	background: #0a2a5a;
	border-color: #ffffff;
}

.svc-hero-3c :is(button, a):focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 4px;
}

.svc-hero-3c__eyebrow {
	margin: 0;
	font: 600 var(--wp--preset--font-size--eyebrow)/1 var(--wp--preset--font-family--poppins);
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--acento);
}

/*
 * Chip "Próximo vencimiento": <button> que abre el calendario tributario
 * flotante en la fecha indicada (ver calendario-tributario.js). Texto en
 * #ffffff literal, igual que el resto del hero, para no depender del
 * remapeo de "base" en tema oscuro / contraste alto.
 */
.svc-hero-3c__vence {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: 44px;
	padding: 10px 16px 10px 32px;
	position: relative;
	border: 1px solid #8AA0C0;
	border-radius: 6px;
	background: transparent;
	color: #ffffff;
	font: 400 var(--wp--preset--font-size--xs)/1.3 var(--wp--preset--font-family--poppins);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s;
}

.svc-hero-3c__vence::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 16px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
}

.svc-hero-3c__vence:hover {
	border-color: var(--wp--preset--color--acento);
}

.svc-hero-3c__vence-cuando {
	white-space: nowrap;
}

.svc-hero-3c__vence-etiqueta {
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
}

.svc-hero-3c__titulo {
	margin: 0;
	font: 600 var(--wp--preset--font-size--display)/1.15 var(--wp--preset--font-family--poppins);
	letter-spacing: -0.025em;
	color: #ffffff;
	text-wrap: balance;
}

.svc-hero-3c__parrafo {
	margin: 0;
	max-width: 640px;
	font: 400 var(--wp--preset--font-size--lead)/1.6 var(--wp--preset--font-family--poppins);
	color: #D8E3F2;
}

.svc-hero-3c__botones.wp-block-buttons {
	gap: 16px;
	flex-wrap: wrap;
}

.svc-hero-3c__botones .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0 30px;
	font-size: 1.0625rem;
}

/* Los dos destinos caben en el espacio del hero sin alargar la sección. */
.svc-hero-3c .svc-hero-3c__botones {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	width: 100%;
}

.svc-hero-3c .svc-hero-3c__botones .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 10px 18px;
}

/* Franja de co-marca: pegada al hero (mismo <div>, sin margen entre
   ambos bloques), ancho completo, borde superior naranja de 3px. */
.svc-hero-cobrand {
	background: var(--wp--preset--color--base-alt);
	border-top: 3px solid var(--wp--preset--color--acento);
	padding: 22px 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: nowrap;
}

.svc-hero-cobrand > * {
	margin-block: 0;
}

.svc-hero-cobrand__marca {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-shrink: 0;
}

.svc-hero-cobrand__logo-svc {
	flex: none;
	display: block;
	width: 44px;
	height: 44px;
}

.svc-hero-cobrand__nombre {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.svc-hero-cobrand__nombre-top {
	font: 700 1.1875rem/1 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
	white-space: nowrap;
}

/*
 * #C25A12 literal del brief no pasa 4.5:1 sobre el fondo claro de la
 * franja (mismo hallazgo ya documentado para el subtítulo "EL SALVADOR"
 * del header, línea ~600 de este archivo) — se usa "acento-oscuro", el
 * tono ya validado en AA para este mismo rol de texto.
 */
.svc-hero-cobrand__nombre-bottom {
	font: 500 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--poppins);
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--acento-oscuro);
}

.svc-hero-cobrand__x {
	font: 300 1.625rem/1 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

.svc-hero-cobrand__contabi {
	display: block;
	width: 96px;
	height: auto;
}

.svc-hero-cobrand__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	max-width: 840px;
	text-align: left;
}

.svc-hero-cobrand__info-linea1 {
	margin: 0;
	font: 600 1.125rem/1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
}

.svc-hero-cobrand__info-linea2 {
	margin: 0;
	font: 400 var(--wp--preset--font-size--xs)/1.4 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto-suave);
}

.svc-hero-cobrand__info-linea1 a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.svc-hero-cobrand__info-linea1 a::after {
	content: " →";
}

.svc-hero-cobrand__info-linea1 a:hover {
	color: var(--wp--preset--color--acento-oscuro);
}

.svc-hero-cobrand__info-linea1 a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

@media (max-width: 1199px) {
	.svc-hero-cobrand__nombre {
		display: none;
	}
}

a {
	text-decoration: none;
}

@media (max-width: 1023px) {


	.svc-hero-3c__texto {
		width: min(100%, 680px);
		padding: 40px 40px 96px;
	}

	.svc-hero-3c__motion {
		left: 40px;
	}
}

@media (max-width: 767px) {
	.svc-hero-3c {
		min-height: 680px;
	}

	.svc-hero-3c__poster,
	.svc-hero-3c__video {
		object-position: 66% 50%;
	}

	.svc-hero-3c__texto {
		gap: 10px;
		padding: 16px 24px 80px;
	}

	.svc-hero-3c .svc-hero-3c__eyebrow {
		line-height: 1.4;
	}

	.svc-hero-3c .svc-hero-3c__botones {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-hero-3c .svc-hero-3c__botones .wp-block-button__link {
		padding: 6px 16px;
	}

	.svc-hero-3c__motion {
		left: 24px;
		bottom: 20px;
	}

	/* Dejar libre el carril de los controles flotantes existentes. */
	.svc-hero-3c .svc-hero-3c__botones,
	.svc-hero-3c__vence {
		width: calc(100% - 56px);
		box-sizing: border-box;
	}



	.svc-hero-3c__botones .wp-block-button,
	.svc-hero-3c__botones .wp-block-button__link {
		width: 100%;
	}

	.svc-hero-cobrand {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 12px 16px;
		padding: 12px 24px;
	}

	/* El logo de la alianza comparte fila con el título; la descripción
	   aprovecha todo el ancho sin repetir la marca SVC del encabezado. */
	.svc-hero-cobrand__logo-svc,
	.svc-hero-cobrand__x {
		display: none;
	}

	.svc-hero-cobrand__info {
		display: contents;
	}

	.svc-hero-cobrand__info-linea2 {
		grid-column: 1 / -1;
	}

	.svc-hero-cobrand__contabi {
		width: 64px;
	}
}
/*
 * Cards (.svc-tarjeta) — espaciado vertical único para todo el sitio.
 *
 * .svc-tarjeta-cuerpo es la pila de contenido de la card: el propio
 * .svc-tarjeta cuando la card lleva padding directo (Inicio, Herramientas),
 * o el grupo bajo la foto cuando la card tiene banda de imagen (Servicios,
 * Software, blog). .svc-tarjeta-texto es lo mismo para la columna de texto
 * de las entradas del listado de blog. Un solo valor de separación entre
 * etiqueta, título, texto y enlace; cambiarlo aquí cambia todas las cards.
 * (Los presets de espacio 12/20/32/44 no existen en theme.json: usarlos en
 * el marcado deja la variable inválida y el espacio en 0.)
 */
.svc-tarjeta-cuerpo,
.svc-tarjeta-texto {
	--svc-tarjeta-gap: var(--wp--preset--spacing--16);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--svc-tarjeta-gap);
}

/* `>` sube la especificidad por encima de la regla del núcleo
   `.is-layout-flex > :is(*, div){margin:0}` (0,1,1) y del margen por defecto
   de los bloques en flujo normal (columna de texto del blog). */
.svc-tarjeta-cuerpo>*,
.svc-tarjeta-texto>* {
	margin-block: 0;
}

/* Banda de imagen + cuerpo: el cuerpo crece hasta el pie de la card. */
.svc-tarjeta>.svc-tarjeta-cuerpo {
	flex: 1 1 auto;
	align-self: stretch;
}

/* La card es flex vertical alineada a la izquierda: sin esto la foto
   destacada no se estira y queda al ancho de la imagen (mitad de la card en
   "Entradas relacionadas"). */
.svc-tarjeta>.wp-block-post-featured-image {
	align-self: stretch;
}

/* Enlace "Ver detalle"/"Conocer más"/"Abrir calculadora": pegado al pie de
   la card, así las de una misma fila terminan en la misma línea aunque un
   texto ocupe una línea más. */
.svc-tarjeta-cuerpo>.svc-tarjeta-cta {
	margin-top: auto;
	padding-top: 0.5rem;
}

/*
 * Cards de una misma fila al mismo alto: cada .wp-block-column ya se estira
 * al alto de la fila, pero la card (<a>/<div>) que va dentro no llenaba la
 * columna. La columna pasa a flex para que la card la llene.
 */
.svc-tarjetas-servicio>.wp-block-column,
.svc-blog-teaser>.wp-block-column {
	display: flex;
}

.svc-tarjetas-servicio .svc-tarjeta,
.svc-blog-teaser .svc-tarjeta {
	flex: 1 1 auto;
	min-width: 0;
}

/* Icono lineal de cada card de servicio (patterns/tarjetas-servicio.php). */
.svc-tarjeta-icono {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	background: var(--wp--preset--color--primario);
	color: var(--wp--preset--color--acento);
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Pasos "Cómo es una implementación": número y título en la MISMA fila
 * (título con ajuste de línea), con conector entre pasos. Horizontal desde
 * 1200px — por debajo el título más largo ("Nos quedamos el primer
 * cierre") ya no cabe junto al círculo en una columna de un tercio — y
 * vertical (línea a la izquierda) en tableta/móvil. Lista ordenada real:
 * el número visible es decorativo (aria-hidden), la posición la anuncia la
 * lista.
 */
.svc-pasos {
	--svc-paso-numero: 40px;
	--svc-paso-gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.svc-pasos__paso {
	position: relative;
	margin: 0;
	padding-bottom: 1.75rem;
}

.svc-pasos__paso:last-child {
	padding-bottom: 0;
}

/* Conector vertical: del pie del círculo al círculo del paso siguiente. */
.svc-pasos__paso:not(:last-child)::before {
	content: "";
	position: absolute;
	left: calc(var(--svc-paso-numero) / 2 - 1px);
	top: var(--svc-paso-numero);
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--borde-campo);
}

.svc-pasos__cabeza {
	display: flex;
	align-items: center;
	gap: var(--svc-paso-gap);
}

.svc-pasos__numero {
	box-sizing: border-box;
	flex: none;
	width: var(--svc-paso-numero);
	height: var(--svc-paso-numero);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--acento);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 1rem/1 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--acento-oscuro);
}

.svc-pasos__titulo {
	margin: 0;
	font: 600 var(--wp--preset--font-size--m) / 1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
}

.svc-pasos__texto {
	margin: 0.625rem 0 0 calc(var(--svc-paso-numero) + var(--svc-paso-gap));
	color: var(--wp--preset--color--texto-suave);
}

@media (min-width: 1200px) {
	.svc-pasos {
		flex-direction: row;
		gap: var(--wp--preset--spacing--24);
	}

	.svc-pasos__paso {
		flex: 1 1 0;
		min-width: 0;
		padding-bottom: 0;
	}

	.svc-pasos__paso:not(:last-child)::before {
		display: none;
	}

	.svc-pasos__titulo {
		white-space: normal;
	}

	/* Conector horizontal: llena lo que sobra de la columna y se estira sobre
	   el gap hasta tocar el círculo siguiente. */
	.svc-pasos__paso:not(:last-child) .svc-pasos__cabeza::after {
		content: "";
		flex: 1 1 1.5rem;
		min-width: 1.5rem;
		height: 2px;
		background: var(--wp--preset--color--borde-campo);
		margin-right: calc(var(--wp--preset--spacing--24) * -1);
	}
}

/*
 * Hero de Nosotros (patterns/hero-nosotros.php): la foto destacada llena el
 * fondo y una capa navy en degradado horizontal la vuelve translúcida
 * (opaca donde va el texto, casi limpia a la derecha). Mismo alto mínimo y
 * misma tipografía que el hero de portada. Texto en #ffffff literal, igual
 * que el resto de heros, para no depender del remapeo de "base" en tema
 * oscuro / contraste alto. `isolation` deja los z-index negativos dentro
 * del hero.
 */
.svc-hero-nos {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 520px;
	color: #ffffff;
}

.svc-hero-nos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(10, 42, 90, 0.97) 0%, rgba(10, 42, 90, 0.9) 34%, rgba(10, 42, 90, 0.5) 62%, rgba(10, 42, 90, 0.18) 100%);
}

.svc-hero-nos__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.svc-hero-nos__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 30%;
}

.svc-hero-nos__texto {
	flex: 1;
	box-sizing: border-box;
	max-width: 760px;
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
}

.svc-hero-nos__texto > * {
	margin: 0;
}

.svc-hero-nos__titulo {
	font: 700 var(--wp--preset--font-size--xxl)/1.15 var(--wp--preset--font-family--poppins);
	letter-spacing: -0.025em;
	color: #ffffff;
	text-wrap: pretty;
}

.svc-hero-nos__parrafo {
	max-width: 560px;
	font: 400 var(--wp--preset--font-size--lead)/1.6 var(--wp--preset--font-family--poppins);
	color: #d8e3f2;
}

@media (max-width: 1023px) {


	.svc-hero-nos__texto {
		padding: 56px 40px;
	}
}

@media (max-width: 767px) {
	.svc-hero-nos {
		min-height: 0;
	}

	.svc-hero-nos::before {
		background: linear-gradient(180deg, rgba(10, 42, 90, 0.78) 0%, rgba(10, 42, 90, 0.93) 100%);
	}

	.svc-hero-nos__img {
		object-position: 78% 30%;
	}

	.svc-hero-nos__texto {
		padding: 40px 24px 48px;
	}


}

/*
 * Ruta "Cómo trabajamos" de Nosotros (patterns/pasos-como-trabajamos.php):
 * 4 pasos con círculo numerado, icono y tarjeta. Línea de tiempo vertical
 * (círculo a la izquierda, conector debajo) hasta 1199px; desde 1200px, 4
 * columnas con el conector horizontal atravesando los círculos. Lista
 * ordenada real: el número visible es decorativo (aria-hidden).
 */
.svc-ruta {
	--svc-ruta-marca: 48px;
	--svc-ruta-gap: var(--wp--preset--spacing--24);
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: var(--svc-ruta-gap);
}

.svc-ruta__paso {
	position: relative;
	margin: 0;
	display: grid;
	grid-template-columns: var(--svc-ruta-marca) minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}

.svc-ruta__marca {
	box-sizing: border-box;
	width: var(--svc-ruta-marca);
	height: var(--svc-ruta-marca);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--acento);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 1.125rem/1 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--acento-oscuro);
}

/* Conector vertical: del pie del círculo al círculo del paso siguiente. */
.svc-ruta__paso:not(:last-child)::before {
	content: "";
	position: absolute;
	left: calc(var(--svc-ruta-marca) / 2 - 1px);
	top: var(--svc-ruta-marca);
	bottom: calc(var(--svc-ruta-gap) * -1);
	width: 2px;
	background: var(--wp--preset--color--borde-campo);
}

.svc-ruta__tarjeta {
	align-self: stretch;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-top: 3px solid var(--wp--preset--color--acento);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.25rem 1.375rem;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.svc-ruta__cabeza {
	display: flex;
	align-items: center;
	gap: 12px;
}

.svc-ruta__icono {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--acento-oscuro);
	display: flex;
	align-items: center;
	justify-content: center;
}

.svc-ruta__titulo {
	margin: 0;
	font: 600 var(--wp--preset--font-size--m) / 1.3 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--primario);
}

.svc-ruta__texto {
	margin: 0;
	text-wrap: pretty;
	color: var(--wp--preset--color--texto-suave);
}

@media (min-width: 1200px) {
	.svc-ruta {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* 1fr en la fila de la tarjeta: sin él, el alto sobrante de la fila
	   (todas las columnas igualan al paso más alto) se reparte también
	   entre círculo y tarjeta y desalinea las tarjetas más cortas. */
	.svc-ruta__paso {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		row-gap: 16px;
	}

	/* Conector horizontal: del borde del círculo al círculo de la columna
	   siguiente (cruza el gap de la grilla). */
	.svc-ruta__paso:not(:last-child)::before {
		left: calc(var(--svc-ruta-marca) + 10px);
		right: calc(10px - var(--svc-ruta-gap));
		top: calc(var(--svc-ruta-marca) / 2 - 1px);
		bottom: auto;
		width: auto;
		height: 2px;
	}
}

html[data-svc-tema="oscuro"] .svc-ruta__titulo {
	color: #e7ecf3;
}

/* "Sobre nosotros": 4 valores como tarjetas de igual alto. wp:columns colapsa
   a 1 columna bajo 782px y a 4 columnas apretadas justo después (a 1024px
   "Confidencialidad" se parte en 2 líneas): grilla propia 1/2/4 columnas. */
.svc-valores.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--24);
}

.svc-valores .wp-block-column {
	display: flex;
	min-width: 0;
}

.svc-valores .svc-tarjeta {
	flex: 1 1 auto;
	min-width: 0;
}

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

@media (min-width: 1200px) {
	.svc-valores.wp-block-columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* "Nuestra experiencia" de Nosotros: rubros de clientes como píldoras
   (mismo look que .svc-etiqueta, sin hover: no son enlaces). */
.svc-rubros {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.svc-rubros li {
	margin: 0;
	padding: 0.5rem 1rem;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	font: 500 var(--wp--preset--font-size--s)/1.5 var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--texto);
}

/*
 * Caja CTA "¿Ya factura electrónicamente?": el margen inferior deja libre
 * sólo la píldora de WhatsApp (68px en escritorio, 56px en móvil) más su
 * separación del footer (16px, whatsapp-flotante.js) más un respiro de
 * 16px. Accesibilidad y Calendario, que van arriba en el stack, pueden
 * quedar sobre la caja: los huecos del contenedor ya no interceptan el
 * puntero (ver .svc-flotantes), así que el botón "Agendar revisión" sigue
 * alcanzable. Márgenes laterales iguales al padding de la sección de
 * tarjetas.
 */
.svc-cta-software {
	margin: 0 var(--wp--preset--spacing--64) 100px;
}

/*
 * El botón comparte patrón con los asides de ficha (aside-boton-software.php),
 * donde mide 100% del ancho. Aquí va junto al texto: ancho propio en
 * escritorio, y el texto cede espacio (flex-basis) antes de empujarlo a otra
 * fila. En móvil vuelve a 100%.
 */
.svc-cta-software>.wp-block-group {
	flex: 1 1 26rem;
}

.svc-cta-software>.wp-block-buttons {
	flex: none;
}

@media (min-width: 601px) {
	.svc-cta-software .wp-block-button.wp-block-button__width-100 {
		width: auto;
	}
}

@media (max-width: 600px) {
	.svc-cta-software>.wp-block-buttons {
		flex: 1 1 100%;
	}
}

/* El idioma comparte el extremo derecho con el CTA, fuera del overlay móvil. */
.svc-language-switcher {
	position: relative;
	flex: none;
	font-size: 1rem;
	white-space: nowrap;
	color: var(--wp--preset--color--texto);
}
.svc-language-switcher summary {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 8px;
	background: var(--wp--preset--color--base-alt);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.svc-language-switcher summary::-webkit-details-marker { display: none; }
.svc-language-switcher summary:hover,
.svc-language-switcher details[open] summary { border-color: currentColor; }
.svc-language-switcher__flag { font-size: 20px; line-height: 1; }
.svc-language-switcher__chevron {
	width: 6px;
	height: 6px;
	margin: 0 2px 3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.svc-language-switcher details[open] .svc-language-switcher__chevron {
	margin-bottom: -3px;
	transform: rotate(225deg);
}
.svc-language-switcher__options {
	position: absolute;
	z-index: 1;
	top: calc(100% + 8px);
	right: 0;
	min-width: 192px;
	padding: 6px;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 32px rgb(10 42 90 / 16%);
}
.svc-language-switcher a {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 12px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}
.svc-language-switcher a:hover,
.svc-language-switcher a[aria-current="page"] { background: var(--wp--preset--color--base-alt); }
.svc-language-switcher a[aria-current="page"] { font-weight: 600; }
.svc-language-switcher__check { margin-left: auto; }
.svc-language-switcher :is(summary, a):focus-visible {
	outline: 3px solid var(--wp--preset--color--acento-oscuro);
	outline-offset: 2px;
}
.svc-header-right.is-layout-flex { margin-left: auto; flex-shrink: 0; }
.svc-article-language { font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--texto-suave); margin-block:4px 8px; }
@media (max-width:600px) {
	.svc-header-row.is-layout-flex,
	.svc-header-right.is-layout-flex { gap: 8px; }
	.svc-language-switcher summary { padding-inline: 8px; }
}

/* Preserve the existing 48px primary action target in both languages. */
.svc-header-actions .wp-block-button__link, .svc-hero-3c .wp-block-button__link { min-height:48px; }

.svc-nav-principal .wp-block-navigation-item__label { white-space:nowrap; }
.svc-footer-columnas a[href^="mailto:"] { overflow-wrap:anywhere; }
/* El nav completo requiere espacio para el selector también con texto grande. */
@media (max-width:1365px) {
  nav.svc-nav-principal { position:static; transform:none; }
}
@media (min-width:600px) and (max-width:1365px) {
  .svc-nav-principal .wp-block-navigation__responsive-container-open:not(.always-shown) { display:flex; background:var(--wp--preset--color--primario); color:var(--wp--preset--color--base); border-radius:6px; }
  .svc-nav-principal .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display:none; }
  .svc-nav-principal { order:3; }
}

/* Contenido de servicios: componentes compartidos, con lectura finita y detalles nativos. */
.svc-servicio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}
.svc-servicio-grid > * { margin-block: 0; }
.svc-servicio-complemento { padding: 24px; flex-direction: column; gap: 16px; }
.svc-servicio-cuerpo .svc-servicio-complemento h3 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.svc-servicio-complemento p { margin: 0; }
.svc-servicio-detalle,
.svc-servicio-faq {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radius--sm);
	padding: 20px 24px;
}
.svc-servicio-detalle summary,
.svc-servicio-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--primario);
	line-height: 1.5;
}
.svc-servicio-detalle summary { font-size: 1.125rem; }
.svc-servicio-cuerpo .wp-block-button__link { min-height: 48px; }

/* Las acciones complementarias conservan su enlace y área táctil, con
   menos peso visual que la primera llamada a la acción de cada sección. */
.svc-servicio-cuerpo .wp-block-buttons + .wp-block-buttons {
	margin-block-start: 12px;
}
.svc-servicio-cuerpo .wp-block-buttons + .wp-block-buttons .wp-block-button__link,
.svc-servicio-detalle .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primario);
	border: 1px solid var(--wp--preset--color--borde-campo);
}
.svc-servicio-cuerpo .wp-block-buttons + .wp-block-buttons .wp-block-button__link:hover,
.svc-servicio-detalle .wp-block-button__link:hover {
	background: var(--wp--preset--color--base-alt);
	border-color: var(--wp--preset--color--primario);
}

/* Honorarios conserva la tarjeta y los colores de las otras calculadoras. */
.svc-honorarios { border: 1px solid var(--wp--preset--color--borde); border-radius: 6px; overflow: hidden; }
.svc-honorarios-cabecera { padding: 24px; background: var(--wp--preset--color--primario); color: white; }
.svc-honorarios-cabecera h2 { margin: 0; font-size: 1.25rem; color: inherit; }
.svc-honorarios-cabecera p { margin: 8px 0 0; font-size: var(--wp--preset--font-size--xs); }
.svc-honorarios-form { padding: 24px; background: var(--wp--preset--color--base-alt); }
.svc-honorarios-form button { width: auto; min-height: 48px; margin-top: 20px; border: 0; cursor: pointer; }
#svc-honorarios-ayuda { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--texto-suave); }
.svc-honorarios-resultado { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }
.svc-honorarios-resultado[hidden] { display: none; }
.svc-honorarios-resultado dl { margin: 0; }
.svc-honorarios-resultado dl > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--wp--preset--color--borde); padding: 12px 0; }
.svc-honorarios-resultado dd { margin: 0; white-space: nowrap; font-weight: 600; }
.svc-honorarios-liquido { background: var(--wp--preset--color--primario); color: white; border-radius: 6px; padding: 24px; }
.svc-honorarios-liquido h3 { color: var(--wp--preset--color--acento); font-size: var(--wp--preset--font-size--xs); letter-spacing: .06em; margin: 0; }
.svc-honorarios-liquido p { font-size: .9375rem; margin: 8px 0 0; }
#svc-resultado-honorarios-liquido { font-size: 2.375rem; font-weight: 600; letter-spacing: -.03em; }
.svc-honorarios #svc-calc-error { color: var(--wp--preset--color--acento-oscuro); }
@media (max-width: 600px) {
	.svc-honorarios-form button { width: 100%; }
	.svc-honorarios-resultado { grid-template-columns: 1fr; }
}

/* Contabilidad: seis áreas, tres columnas amplias y dos filas en escritorio. */
.svc-area-icono { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 6px; background: var(--wp--preset--color--base-alt); }
.svc-area-icono img { display: block; width: 30px; height: 30px; }
@media (min-width: 1280px) {
	.svc-contabilidad-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.svc-contabilidad-grid .svc-servicio-complemento { padding: 20px; }
}
.svc-programas-nuevos { margin-block: 2.75rem; }
.svc-programas-nuevos h2 { margin-block: 0 1rem; }
.svc-programas-nuevos li { padding-block: .5rem; }

/* Roles tipográficos compartidos con los presets de theme.json.
   Los !important del contenido normalizan tamaños inline de bloques ya
   guardados en WordPress, sin reescribir los textos ni la base de datos. */
.svc-nav-principal .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

.svc-nav-principal .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--nav-mobile);
}

.wp-block-button__link,
.svc-hero-3c__botones .wp-block-button__link,
.svc-campo :is(input, select, textarea),
.svc-campo label,
.svc-campo .svc-etiqueta,
.svc-calc-tab,
.svc-cta-boton-expandir,
.wpcf7-submit {
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

:is(.svc-servicio-cuerpo, .svc-software-cuerpo, .svc-herramienta-cuerpo, .svc-articulo-cuerpo) > p:not(.has-acento-oscuro-color):not(.has-xs-font-size):not(.has-eyebrow-font-size),
.svc-software-cuerpo p:not(.has-acento-oscuro-color),
:is(.svc-servicio-cuerpo, .svc-software-cuerpo, .svc-herramienta-cuerpo, .svc-articulo-cuerpo) > :is(ul, ol),
.svc-tarjeta-cuerpo .wp-block-post-excerpt,
.svc-resena-tarjeta blockquote {
	font-size: var(--wp--preset--font-size--m) !important;
	line-height: 1.6 !important;
}

.svc-herramienta-cuerpo .wp-block-button__link {
	font-size: var(--wp--preset--font-size--s) !important;
}

.svc-articulo-cuerpo h2 {
	line-height: 1.3;
}

.svc-articulo-cuerpo h3,
.svc-pasos__titulo,
.svc-tarjeta :is(h2, h3),
.svc-servicio-cuerpo .svc-servicio-complemento h3,
.svc-honorarios-cabecera h2 {
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.3;
}

.svc-articulo-lead,
.svc-hero-legal__intro,
.svc-hero-3c__parrafo,
.svc-hero-nos__parrafo {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
}

.svc-pildora-cercania,
.svc-calc-actualizacion,
.svc-campo .svc-ayuda,
.svc-form-nota,
.svc-article-language,
.svc-software-cuerpo p.has-acento-oscuro-color,
.wp-block-post-date,
.wp-block-post-author-name,
.svc-articulo-cuerpo figcaption {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}

/* Metadatos de bloques antiguos guardados con tamaños inline. */
.wp-block-post-content :is(p, span, li):is([style*="font-size:0.6875rem"], [style*="font-size:0.75rem"], [style*="font-size:0.8125rem"], [style*="font-size:0.875rem"]) {
	font-size: var(--wp--preset--font-size--xs) !important;
	line-height: 1.5 !important;
}

/* La franja también crece al ampliar el texto y mantiene visibles A−/A/A+. */
.svc-utilbar__panel {
	top: auto;
	bottom: 0;
	transform: none;
	height: auto;
	min-height: max(var(--svc-a11y-icono), 3rem);
}
.svc-a11y__controles { min-height: inherit; }
@media (max-width: 600px) {
	.svc-a11y__label { display: none; }
}

/* El ancho útil también responde a la fuente preferida del navegador o al
   zoom de sólo texto. 77.375rem + los dos márgenes de 4rem = 1366px a 16px. */
.svc-header-row { container: svc-header / inline-size; }
.svc-header-row:has(.is-menu-open) { container-type: normal; }
nav.svc-nav-principal:has(.is-menu-open) { position: static; transform: none; }
@container svc-header (width < 77.375rem) {
	nav.svc-nav-principal { position: static; transform: none; order: 3; }
	.svc-nav-principal .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		background: var(--wp--preset--color--primario);
		color: #ffffff;
		border-radius: var(--wp--custom--radius--md);
	}
	.svc-nav-principal .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* A+ necesita más espacio horizontal; se reutiliza el overlay de WordPress. */
@media (max-width: 1599px) {
	html[data-svc-escala="112.5"] nav.svc-nav-principal {
		position: static;
		transform: none;
		order: 3;
	}
	html[data-svc-escala="112.5"] .svc-nav-principal .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		background: var(--wp--preset--color--primario);
		color: #ffffff;
		border-radius: var(--wp--custom--radius--md);
	}
	html[data-svc-escala="112.5"] .svc-nav-principal .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}