/* =========================================================
   Contabilidad Tributaria — sistema visual editorial
   ---------------------------------------------------------
   Principio rector: tinta sobre papel. La jerarquía se
   construye con tipografía, aire y filetes de 1px, no con
   sombras, gradientes ni esquinas redondeadas.

   1. Fundamentos y tokens
   2. Accesibilidad transversal
   3. Tipografía editorial
   4. Estructura de sección y numeración
   5. Encabezado
   6. Portada (hero)
   7. Servicios — filas de libro contable
   8. Diferenciadores
   9. Audiencias
  10. Preguntas frecuentes
  11. Contacto y pie
  12. Botón flotante de WhatsApp
  13. Impresión
   ========================================================= */

/* ---------------------------------------------------------
   1. Fundamentos y tokens
   --------------------------------------------------------- */

:root {
	/* Con densidad de pantalla fraccionaria el navegador ajusta 1px a 0.8px
	   físicos: no hay forma de evitarlo desde CSS, así que el color del filete
	   se elige ya contando con ese aclarado. */
	--ct-filete: 1px solid var(--wp--preset--color--linea);
	--ct-filete-oscuro: 1px solid rgba(255, 255, 255, 0.18);
	--ct-transicion: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Medida de lectura. «ch» mide el ancho del glifo cero, no el del texto:
	   68ch daban 84 caracteres reales en Public Sans, un 25% más de lo
	   declarado. En «em» la cuenta sale honesta: 34em ≈ 66-70 caracteres. */
	--ct-medida: 34em;

	/* Tres respiros con argumento, no un padding constante repetido seis
	   veces. Corto: bloques que continúan la misma idea. Medio: cambio de
	   sección sobre el mismo papel. Largo: solo antes de invertir a banda
	   oscura, donde el silencio prepara el corte. */
	--aire-corto: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	--aire-medio: clamp(4rem, 3rem + 4vw, 6rem);
	--aire-largo: clamp(5.5rem, 4rem + 6vw, 8.5rem);

	/* Escala del cuerpo: cuatro pasos, no once valores sueltos. Los saltos
	   grandes (titulares) los declara theme.json; estos son los del texto,
	   que es donde la jerarquia se aplanaba. */
	--txt-xs: 0.75rem;   /* rótulos, antetítulos, numeración */
	--txt-s: 0.875rem;   /* secundario: pie, navegación, resúmenes */
	--txt-m: 1.0625rem;  /* cuerpo */
	--txt-l: 1.3rem;     /* entradillas */
}

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

html {
	-webkit-text-size-adjust: 100%;
}

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

/* El lenguaje es "documento", no "aplicación": nada de esquinas
   redondeadas ni sombras heredadas de los estilos base de bloques. */
.wp-block-button__link,
.wp-block-group,
.wp-block-image img,
.wp-block-details {
	border-radius: 0;
	box-shadow: none;
}

::selection {
	background: var(--wp--preset--color--toga);
	color: var(--wp--preset--color--papel);
}

/* Sobre las bandas oscuras el fondo ya es toga: se invierte para que
   seleccionar produzca algún cambio visible. */
.ct-seccion--oscura ::selection {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--toga);
}

/* ---------------------------------------------------------
   2. Accesibilidad transversal
   --------------------------------------------------------- */

/* Foco visible y consistente en todo elemento interactivo.
   :focus-visible evita el anillo al hacer clic con el ratón. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--laton);
	outline-offset: 3px;
	border-radius: 0;
}

/* Sobre fondos oscuros el latón baja a 2.44:1: invertimos a papel, que
   sobre toga mide 14.32:1. Ojo: esto va por el fondo real, no por la
   sección. El pie es claro y NO debe entrar aquí. */
.has-toga-background-color a:focus-visible,
.has-toga-background-color button:focus-visible {
	outline-color: var(--wp--preset--color--papel);
}

/* El botón flotante es position:fixed: lo que tiene detrás cambia al
   desplazarse, así que ningún color único de anillo le sirve. Se le da un
   doble anillo —claro por dentro, tinta por fuera— que contrasta contra
   cualquier fondo del tema. */
.ct-whatsapp-float:focus-visible {
	outline: 2px solid var(--wp--preset--color--papel);
	outline-offset: -4px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--tinta);
}

/* Texto solo para lectores de pantalla. Se usa para avisar de los enlaces
   que abren pestaña nueva; se oculta con clip, no con display:none, para
   que siga formando parte del nombre accesible. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* Enlace de salto: oculto hasta recibir foco por teclado. */
.ct-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--toga);
	color: var(--wp--preset--color--papel);
	font-size: var(--txt-s);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform var(--ct-transicion);
}

.ct-skip-link:focus {
	transform: translateY(0);
}

/* Respetar la preferencia del sistema por menos movimiento. */
@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;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* El encabezado fijo no debe tapar el destino de un ancla. */
[id] {
	scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------
   3. Tipografía editorial
   --------------------------------------------------------- */

/* Los títulos se equilibran solos: evita la línea huérfana
   de una sola palabra, que es lo que delata una plantilla. */
h1,
h2,
h3,
.wp-block-heading {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Los signos de apertura cuelgan: en español «¿» abre muchos titulares y
   sin esto mete una sangría óptica falsa. Safari es el único que lo
   implementa hoy; donde no, la declaración se descarta sin efecto. */
p,
h1,
h2,
h3,
.wp-block-details summary {
	hanging-punctuation: first last;
}

/* Medida de lectura. Ojo con el orden: WordPress aplica margin-inline:auto
   a los hijos de un layout «constrained», así que un max-width más estrecho
   que la columna CENTRA el párrafo en vez de acortarlo. Sin el margin-inline
   explícito, el texto corrido queda desplazado respecto a su propio titular. */
.ct-prosa :where(p, li, h2, h3, ul, ol) {
	max-width: var(--ct-medida);
	margin-inline: 0;
}

.ct-prosa .has-large-font-size {
	max-width: var(--ct-medida);
	margin-inline: 0;
}

/* Listas de documento: raya en vez de disco, alineada al borde izquierdo
   del texto. Los discos por defecto cuelgan fuera de la columna y rompen
   el único eje duro que tiene el diseño. */
.ct-prosa ul {
	list-style: none;
	padding-left: 1.6rem;
}

.ct-prosa ul li {
	position: relative;
}

.ct-prosa ul li::before {
	content: "—";
	position: absolute;
	left: -1.6rem;
	color: var(--wp--preset--color--linea);
}

/* M7 · Los subapartados de una ficha no pueden gritar igual que los
   titulares de sección de la portada. */
.ct-prosa h2 {
	font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.75rem);
	margin-top: var(--aire-corto);
}

/* Cifras tabulares: en un sitio contable los números se alinean. */
.ct-seccion__num,
.ct-servicio__num {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Antetítulo: versalita espaciada, el gesto editorial por excelencia. */
.ct-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--txt-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--laton);
}

/* Filete que nace del antetítulo y llega SIEMPRE al borde de la retícula.
   Antes unas veces alcanzaba el borde y otras moría a mitad de camino
   apuntando al vacío: un gesto solo es firma si se repite igual. */
.ct-eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp--preset--color--linea);
}

.ct-eyebrow--clara {
	color: var(--wp--preset--color--papel);
	opacity: 0.85;
}

.ct-eyebrow--clara::after {
	background: rgba(255, 255, 255, 0.18);
}

/* Entradilla: el párrafo que sigue al titular. */
.ct-entradilla {
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--tinta-media);
}

/* Enlaces de texto: subrayado fino que engorda al pasar. */
.ct-prosa a,
.ct-enlace {
	color: var(--wp--preset--color--tinta);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--linea);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color var(--ct-transicion), color var(--ct-transicion);
}

.ct-prosa a:hover,
.ct-enlace:hover {
	color: var(--wp--preset--color--laton);
	text-decoration-color: var(--wp--preset--color--laton);
}

/* Enlace con flecha que avanza: microinteracción con intención. */
.ct-enlace-flecha {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	font-weight: 600;
	font-size: var(--txt-s);
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.ct-enlace-flecha::after {
	content: "→";
	transition: transform var(--ct-transicion);
}

.ct-enlace-flecha:hover {
	color: var(--wp--preset--color--laton);
}

.ct-enlace-flecha:hover::after {
	transform: translateX(0.3rem);
}

/* ---------------------------------------------------------
   4. Estructura de sección y numeración
   --------------------------------------------------------- */

/* Contador de secciones: 01, 02, 03… como un expediente. */
body {
	counter-reset: seccion;
}

/* Las secciones se tocan borde con borde. Sin esto, el blockGap heredado
   por <main> deja 28px del fondo del body asomando entre una banda y la
   siguiente: sobre el corte a la banda oscura se lee como una raya blanca
   accidental, no como una decisión. */
main > .ct-seccion,
main > .ct-hero,
main > .wp-block-group {
	margin-block: 0;
}

/* Ritmo asignado por argumento. El padding de cada sección lo fija esta
   regla, no el atributo del bloque: así el ritmo se decide en un solo
   sitio y se puede leer de un vistazo. */
.ct-seccion {
	counter-increment: seccion;
	border-top: var(--ct-filete);
	padding-top: var(--aire-medio);
	padding-bottom: var(--aire-medio);
}

/* Antes de una banda oscura, más silencio arriba y menos abajo: la
   asimetría es la que convierte el corte en un cambio de acto. */
.ct-seccion:has(+ .ct-seccion--oscura) {
	padding-bottom: var(--aire-largo);
}

.ct-seccion--oscura {
	border-top-color: transparent;
	padding-top: var(--aire-largo);
	padding-bottom: var(--aire-medio);
}

/* Al salir de una banda oscura hacia el papel, el aire de entrada se
   recorta: el contraste de fondo ya ha marcado la separación. */
.ct-seccion--oscura + .ct-seccion {
	padding-top: var(--aire-corto);
}

/* La portada ya cierra con su propio filete: evitar la línea doble
   cuando la primera sección la sigue inmediatamente. */
.ct-hero + .ct-seccion {
	border-top: 0;
}

/* Retícula maestra de 12 columnas.

   La asimetría solo significa algo si se repite: antes cada bloque elegía su
   propio borde izquierdo y había cinco alineaciones sin relación entre sí.
   Ahora todo cuelga de la misma retícula y las columnas son el vocabulario
   común de la página. */
.ct-reticula {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--30);
}

@media (min-width: 900px) {
	.ct-reticula {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30);
	}
}

/* Cabecera de sección: el rótulo ocupa las dos primeras columnas y el
   titular arranca en la tercera. Ese arranque en la columna 3 es el que
   repiten después las filas de contenido. */
.ct-seccion__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--aire-corto);
}

@media (min-width: 900px) {
	.ct-seccion__cabecera {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	.ct-seccion__cabecera > :first-child {
		grid-column: 1 / span 2;
	}

	/* El titular no se estira hasta el borde: 6 columnas dan una medida de
	   titular cómoda y dejan aire a la derecha, que es lo que hace que un
	   titular grande se lea como decisión y no como relleno. */
	.ct-seccion__cabecera > :last-child {
		grid-column: 3 / span 7;
	}
}

/* Número de sección grande: ocupa la columna izquierda que antes quedaba
   vacía bajo el antetítulo. Es el gesto que sostiene visualmente la idea de
   expediente, en vez de dejarla en un contador de 12px. */
.ct-seccion__folio {
	display: none;
}

@media (min-width: 900px) {
	.ct-seccion__folio {
		display: block;
		margin-top: 0.6rem;
		font-family: var(--wp--preset--font-family--display);
		font-size: 4.5rem;
		font-weight: 400;
		line-height: 0.9;
		letter-spacing: -0.03em;
		color: #A99C86;
		font-variant-numeric: tabular-nums;
	}

	.ct-seccion__folio::before {
		content: counter(seccion, decimal-leading-zero);
	}

	.ct-seccion--oscura .ct-seccion__folio {
		color: rgba(251, 250, 247, 0.22);
	}
}

/* ---------------------------------------------------------
   5. Encabezado
   --------------------------------------------------------- */

/* El sticky debe ir en el envoltorio de la parte de plantilla, no en el
   grupo interior: position:sticky se mueve dentro de la caja del padre, y
   si el padre mide exactamente lo mismo que el hijo no queda recorrido y
   la barra se va con la página. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__bar {
	background: var(--wp--preset--color--papel);
	border-bottom: var(--ct-filete);
	transition: border-color var(--ct-transicion);
}

/* La navegación descansa sobre una línea base tipográfica,
   no sobre botones ni píldoras. */
.site-header__bar .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	font-size: var(--txt-s);
	font-weight: 500;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

/* Subrayado que crece desde la izquierda: gesto discreto y preciso. */
.site-header__bar .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--laton);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ct-transicion);
}

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

.site-header__bar .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--laton);
}

/* Cabecera compacta en pantallas estrechas.

   El tema no carga el menú superpuesto de WordPress (overlayMenu:"never")
   porque arrastra 43 KB de JavaScript —la Interactivity API completa— en un
   tema que no escribe ni una línea de JS. A cambio, la navegación tiene que
   caber por sí sola: se reduce el cuerpo, se aprieta el interlineado y el
   botón de WhatsApp sale de la barra, porque ya está flotando abajo. */
@media (max-width: 1000px) {
	.site-header__bar .wp-block-navigation {
		gap: 0.35rem 1rem;
	}

	.site-header__bar .wp-block-navigation-item__content {
		padding-block: 0.15rem;
		font-size: var(--txt-s);
	}

	.site-header__bar .wp-block-buttons {
		display: none;
	}
}

@media (max-width: 600px) {
	.site-header__bar .wp-block-navigation-item__content {
		font-size: var(--txt-xs);
	}

	.site-header__bar .wp-block-group {
		row-gap: 0.5rem;
	}
}

/* ---------------------------------------------------------
   6. Portada (hero)
   --------------------------------------------------------- */

.ct-hero {
	border-bottom: var(--ct-filete);
}

/* Retícula asimétrica: el titular pesa a la izquierda, el
   texto de apoyo entra abajo a la derecha. Es lo contrario
   del bloque centrado que usa todo el mundo. */
.ct-hero__reticula {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 900px) {
	.ct-hero__reticula {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
		align-items: end;
	}
}

.ct-hero__titular {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

/* La cursiva de Newsreader es genuinamente distinta a la
   redonda: la usamos para acentuar una palabra del titular. */
.ct-hero__titular em {
	font-style: italic;
	color: var(--wp--preset--color--laton);
}

/* Barra de credenciales: datos concretos, no adjetivos. */
.ct-credenciales {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin-top: var(--wp--preset--spacing--50);
	border-top: var(--ct-filete);
}

.ct-credencial {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 0 0;
}

.ct-credencial__dato {
	display: block;
	/* Monoespaciada: es la familia que el sistema reserva para cifras.
	   Tenerlas en serif mientras los contadores decorativos iban en mono
	   invertía el criterio. */
	font-family: var(--wp--preset--font-family--mono);
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--tinta);
}

.ct-credencial__glosa {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--txt-s);
	line-height: 1.4;
	color: var(--wp--preset--color--tinta-media);
}

/* ---------------------------------------------------------
   7. Servicios — filas de libro contable
   --------------------------------------------------------- */

/* Cada servicio es una partida de un libro, no una tarjeta
   flotante. Filete arriba, numeración en mono, sin sombra. */
.ct-servicios {
	border-top: var(--ct-filete);
}

.ct-servicio {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: var(--ct-filete);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--ct-transicion);
}

/* Colocación explícita, no automática. Por debajo de 900px la flecha es
   display:none, así que quedan tres hijos en una retícula de dos columnas
   y la colocación automática mandaba el resumen a la columna de 3.5rem:
   una tira vertical de una palabra por línea. */
.ct-servicio__num {
	grid-column: 1;
}

.ct-servicio__titulo,
.ct-servicio__resumen {
	grid-column: 2;
}

@media (min-width: 900px) {
	/* Las filas cuelgan de la retícula maestra de 12 columnas, igual que las
	   cabeceras de sección y los criterios: el título arranca en la columna 3
	   como todos los titulares, y ese eje repetido es lo que convierte la
	   asimetría en sistema en vez de en cinco decisiones sueltas. */
	.ct-servicio {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30);
		align-items: baseline;
	}

	.ct-servicio__num {
		grid-column: 1 / span 2;
	}

	.ct-servicio__titulo {
		grid-column: 3 / span 4;
	}

	.ct-servicio__resumen {
		grid-column: 7 / span 5;
	}

	.ct-servicio__flecha {
		grid-column: 12;
	}
}

/* Al pasar el cursor la fila se "abre": el papel se profundiza y entra un
   filete de latón por la izquierda. Se usa box-shadow inset y no
   padding-left porque este último es una propiedad de maquetación: animarla
   fuerza un reflujo de la retícula en cada hover, diez veces por portada.
   Y se acota a punteros finos: en táctil el estado hover se queda pegado
   al volver con el botón atrás. */
@media (hover: hover) and (pointer: fine) {
	.ct-servicio:hover {
		background-color: var(--wp--preset--color--papel-hondo);
		box-shadow: inset 3px 0 0 0 var(--wp--preset--color--laton);
	}

	.ct-servicio:hover .ct-servicio__flecha {
		opacity: 1;
		transform: translateX(0.35rem);
	}
}

/* El teclado debe recibir la misma señal que el ratón. */
.ct-servicio:focus-visible {
	background-color: var(--wp--preset--color--papel-hondo);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--laton);
}

.ct-servicio:focus-visible .ct-servicio__flecha {
	opacity: 1;
	transform: translateX(0.35rem);
}

.ct-servicio__num {
	font-size: var(--txt-xs);
	font-weight: 500;
	color: var(--wp--preset--color--laton);
	letter-spacing: 0.04em;
}

.ct-servicio__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ct-servicio__resumen {
	margin: 0.4rem 0 0;
	font-size: var(--txt-s);
	line-height: 1.6;
	color: var(--wp--preset--color--tinta-media);
}

@media (min-width: 900px) {
	.ct-servicio__resumen {
		margin-top: 0;
	}
}

.ct-servicio__flecha {
	display: none;
	font-size: var(--txt-m);
	color: var(--wp--preset--color--laton);
	transition: transform var(--ct-transicion);
}

@media (min-width: 900px) {
	/* Diez flechas idénticas siempre visibles son decoración sin función:
	   la fila entera ya es un enlace. Aparecen al apuntar o al enfocar. */
	.ct-servicio__flecha {
		display: block;
		text-align: right;
		opacity: 0;
		transition: opacity var(--ct-transicion), transform var(--ct-transicion);
	}
}

/* ---------------------------------------------------------
   8. Diferenciadores
   --------------------------------------------------------- */

/* Seis criterios no son una rejilla: son una lista.

   Una retícula 3×2 de tarjetas es el patrón que produce cualquier generador,
   y cambiar la sombra por un filete no cambia el patrón. Aquí cada criterio
   es una fila a ancho completo con la misma anatomía que las filas de
   servicio —enunciado a la izquierda, desarrollo a la derecha— de modo que
   las dos secciones hablan el mismo idioma y comparten la retícula. */
.ct-porque {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--ct-filete);
}

.ct-porque__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem 0;
	padding: var(--aire-corto) 0;
	border-bottom: var(--ct-filete);
}

@media (min-width: 900px) {
	.ct-porque__item {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30);
		align-items: baseline;
	}

	/* Mismo arranque en la columna 3 que los titulares de sección. */
	.ct-porque__titulo {
		grid-column: 3 / span 4;
	}

	.ct-porque__texto {
		grid-column: 7 / span 6;
	}
}

.ct-porque__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ct-porque__texto {
	margin: 0;
	max-width: 46ch;
	font-size: var(--txt-s);
	line-height: 1.65;
	color: var(--wp--preset--color--tinta-media);
}

/* ---------------------------------------------------------
   9. Audiencias
   --------------------------------------------------------- */

/* Columnas fijas y no flex: con ocho elementos la retícula cierra en filas
   completas (4+4, 2+2+2+2) y no deja una última fila de celdas más anchas
   que las de arriba, que es lo que delata una tabla mal cuadrada. */
.ct-audiencias {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--ct-filete-oscuro);
}

@media (min-width: 900px) {
	.ct-audiencias {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ct-audiencia {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
	border-bottom: var(--ct-filete-oscuro);
	font-size: var(--txt-m);
	line-height: 1.4;
	color: var(--wp--preset--color--papel);
}

.ct-audiencia__marca {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--txt-xs);
	letter-spacing: 0.14em;
	color: rgba(251, 250, 247, 0.55);
}

/* --------------------------------------------------------
  10. Preguntas frecuentes
   -------------------------------------------------------- */

.wp-block-details {
	padding: var(--wp--preset--spacing--30) 0;
	border: 0;
	border-bottom: var(--ct-filete);
	border-radius: 0;
}

.wp-block-details summary {
	position: relative;
	padding-right: 2.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--txt-l);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--tinta);
	cursor: pointer;
	list-style: none;
	transition: color var(--ct-transicion);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--laton);
}

/* Marcador de cruz que gira a "menos" al abrir: una sola
   forma que se transforma, en lugar de cambiar de carácter. */
.wp-block-details summary::after,
.wp-block-details summary::before {
	content: "";
	position: absolute;
	right: 0.4rem;
	top: 0.7em;
	width: 0.85rem;
	height: 1px;
	background: var(--wp--preset--color--laton);
	transition: transform var(--ct-transicion);
}

.wp-block-details summary::before {
	transform: rotate(90deg);
}

.wp-block-details[open] summary::before {
	transform: rotate(0deg);
}

.wp-block-details > *:not(summary) {
	max-width: var(--ct-medida);
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--tinta-media);
	font-size: var(--txt-m);
}

/* --------------------------------------------------------
  11. Contacto y pie
   -------------------------------------------------------- */

.ct-contacto__dato {
	display: block;
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: var(--ct-filete-oscuro);
}

.ct-contacto__rotulo {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--txt-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(251, 250, 247, 0.55);
}

.ct-contacto__valor {
	font-size: var(--txt-l);
	color: var(--wp--preset--color--papel);
	transition: color var(--ct-transicion), text-decoration-color var(--ct-transicion);
}

/* Solo los que son enlaces llevan subrayado. Junto a ellos hay un <span>
   con idéntico estilo, así que sin esta marca el enlace no se distingue
   del texto plano por ningún medio visual (WCAG 1.4.1). */
a.ct-contacto__valor {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.24em;
	text-decoration-color: rgba(251, 250, 247, 0.45);
}

span.ct-contacto__valor {
	text-decoration: none;
}

a.ct-contacto__valor:hover {
	color: var(--wp--preset--color--laton-claro);
	text-decoration-color: var(--wp--preset--color--laton-claro);
}

/* El antetítulo de la ficha de servicio es el único que lleva enlace: debe
   verse como tal, no como el rótulo no clicable del resto de secciones. */
.ct-eyebrow a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--wp--preset--color--linea);
	transition: text-decoration-color var(--ct-transicion);
}

.ct-eyebrow a:hover {
	text-decoration-color: currentColor;
}

.ct-pie {
	border-top: var(--ct-filete);
}

/* Sin viñetas: son la única lista con bolitas de un sistema que declara
   jerarquía por filetes, y con padding-left:0 los discos cuelgan fuera de
   la columna. */
.ct-pie__lista {
	list-style: none;
}

.ct-pie a {
	color: var(--wp--preset--color--tinta-media);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--linea);
	text-underline-offset: 0.24em;
	transition: color var(--ct-transicion), text-decoration-color var(--ct-transicion);
}

.ct-pie a:hover,
.ct-pie a:focus-visible {
	color: var(--wp--preset--color--laton);
	text-decoration-color: currentColor;
}

/* Migas de navegación */
.ct-migas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--txt-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--laton);
}

.ct-migas__item + .ct-migas__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--linea);
}

.ct-migas__item a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--wp--preset--color--linea);
}

.ct-migas__item a:hover {
	text-decoration-color: currentColor;
}

.ct-migas__item [aria-current] {
	color: var(--wp--preset--color--tinta-media);
}

/* --------------------------------------------------------
  12. Botón flotante de WhatsApp
   -------------------------------------------------------- */

/* Cuadrado, no círculo; sin sombra difusa. Coherente con el
   resto del lenguaje: es un sello, no una burbuja. */
.ct-whatsapp-float {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.15rem;
	background: var(--wp--preset--color--toga);
	color: var(--wp--preset--color--papel);
	font-size: var(--txt-s);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	/* Filete claro permanente: sobre las bandas oscuras (toga) el relleno
	   del botón coincide con el fondo y sin este borde el elemento
	   desaparece como objeto. Sobre papel el relleno ya contrasta solo. */
	border: 1px solid var(--wp--preset--color--papel);
	transition: background-color var(--ct-transicion), border-color var(--ct-transicion);
}

.ct-whatsapp-float:hover {
	background: var(--wp--preset--color--toga-clara);
	border-color: var(--wp--preset--color--laton);
	color: var(--wp--preset--color--papel);
}

.ct-whatsapp-float svg {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	fill: currentColor;
}

/* En móvil se reduce a sello cuadrado para no tapar contenido. */
@media (max-width: 600px) {
	.ct-whatsapp-float {
		right: 1rem;
		bottom: 1rem;
		padding: 0.85rem;
	}

	.ct-whatsapp-float__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* --------------------------------------------------------
  13. Impresión
   -------------------------------------------------------- */

/* Un sitio contable se imprime. Merece hoja limpia. */
@media print {
	.site-header__bar,
	.ct-whatsapp-float,
	.wp-block-buttons,
	.ct-skip-link,
	.ct-migas {
		display: none !important;
	}

	body {
		background: #FFFFFF;
		color: #000000;
		font-size: 11pt;
	}

	/* Los navegadores descartan los fondos al imprimir, pero no el color del
	   texto. Sin esto, las dos bandas oscuras salen en blanco sobre blanco:
	   «Destinatarios» y todo el bloque de contacto —justo lo que alguien
	   querría en papel— se imprimen invisibles. El !important es necesario
	   para vencer los estilos en línea de los patrones. */
	.ct-seccion--oscura,
	.ct-seccion--oscura * {
		background: transparent !important;
		color: #000000 !important;
	}

	.ct-servicio,
	.wp-block-details,
	.ct-porque__item {
		break-inside: avoid;
	}

	/* El contenido de <details> cuelga de ::details-content, un ancestro en
	   el árbol plano: poner display:block en los hijos de luz no lo revela
	   en Chromium. Sin las dos reglas, las respuestas salen en blanco. */
	.wp-block-details::details-content {
		content-visibility: visible !important;
		height: auto !important;
	}

	.wp-block-details > *:not(summary) {
		display: block !important;
	}

	/* La fila de servicio es una retícula: su ::after se convertiría en una
	   quinta celda con la URL cruda. Se excluye de la anotación de enlaces
	   y se le fuerza el reparto ancho, porque al paginar el ancho cae por
	   debajo del punto de ruptura y heredaría la disposición estrecha. */
	.ct-servicio {
		grid-template-columns: 3rem 14rem minmax(0, 1fr);
	}

	.ct-servicio__flecha {
		display: none;
	}

	a[href^="http"]:not(.ct-servicio):not(.wp-block-button__link):not(.ct-contacto__valor)::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555555;
		word-break: break-all;
	}
}

/* ---------------------------------------------------------
  14. Marca
   --------------------------------------------------------- */

/* Sello con las iniciales. El sitio no tenía ni un elemento gráfico propio:
   el único icono era el de WhatsApp, que es marca ajena. Este sello se
   repite en la cabecera, el pie y el icono de pestaña, y está construido
   con el mismo vocabulario que el resto —filete de 1px, sin radios—, así
   que pertenece al sistema en vez de estar pegado encima. */
.ct-sello {
	display: inline-flex;
	flex: none;
	color: var(--wp--preset--color--tinta);
}

.ct-sello svg {
	width: 2.2rem;
	height: 2.2rem;
	display: block;
}

.ct-sello text {
	font-family: Newsreader, ui-serif, Georgia, serif;
	font-size: 17px;
	font-weight: 400;
	fill: currentColor;
	letter-spacing: 0.02em;
}

.ct-sello__filete {
	fill: var(--wp--preset--color--laton);
}

.ct-marca .wp-block-site-title {
	margin: 0;
}

/* El elemento de mayor peso visual de la barra no puede ser el de un
   tercero. El CTA pasa de botón sólido a texto con filete inferior: sigue
   siendo el más visible por posición, sin gritar. */
.ct-cabecera__cta {
	display: inline-block;
	padding-block: 0.35rem;
	border-bottom: 2px solid var(--wp--preset--color--laton);
	font-size: var(--txt-s);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
	transition: color var(--ct-transicion), border-color var(--ct-transicion);
}

.ct-cabecera__cta:hover {
	color: var(--wp--preset--color--laton);
	border-color: var(--wp--preset--color--tinta);
}

@media (max-width: 1000px) {
	.ct-cabecera__cta {
		display: none;
	}

	.ct-sello svg {
		width: 1.8rem;
		height: 1.8rem;
	}
}

/* En escritorio el flotante sobra: el CTA de la barra y el bloque de
   contacto ya cubren la intención. Se reserva para pantallas estrechas,
   donde la barra no lleva CTA. */
@media (min-width: 1000.02px) {
	.ct-whatsapp-float {
		display: none;
	}
}

/* El acordeón arranca en la columna 3, igual que los titulares de sección
   y las filas de servicio. Antes era el único bloque centrado del sitio,
   justo el «centrado por defecto» que el sistema dice evitar. */
@media (min-width: 900px) {
	.ct-faq {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30);
	}

	.ct-faq > * {
		grid-column: 3 / span 8;
	}
}

/* El H1 lleva saltos explícitos: a 73px el reparto de líneas es una
   decisión de composición, no algo que delegar al navegador. En pantallas
   estrechas se sueltan para que el texto fluya. */
@media (max-width: 700px) {
	.ct-hero__titular br {
		display: none;
	}
}


/* Los tres pasos del cierre: convierten «escríbanos» en un compromiso
   explícito. Arrancan en la columna 3 como el resto del contenido. */
.ct-pasos {
	list-style: none;
	margin: var(--aire-corto) 0 0;
	padding: 0;
	counter-reset: paso;
	border-top: var(--ct-filete-oscuro);
}

.ct-pasos__item {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--20);
	align-items: baseline;
	padding: 0.9rem 0;
	border-bottom: var(--ct-filete-oscuro);
}

.ct-pasos__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--txt-xs);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--laton-claro);
}

.ct-pasos__texto {
	font-size: var(--txt-m);
	line-height: 1.5;
	color: var(--wp--preset--color--papel);
}

/* Los datos de contacto en cuatro columnas al pie de la banda, separados
   del argumento. <address> es su elemento semántico, y sin la cursiva que
   los navegadores le aplican por defecto. */
.ct-contacto {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: var(--aire-medio);
	font-style: normal;
	border-top: var(--ct-filete-oscuro);
}

@media (min-width: 900px) {
	.ct-contacto {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ct-contacto .ct-contacto__dato {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0;
	border-bottom: var(--ct-filete-oscuro);
}

/* La cursiva de Newsreader es un diseño propio, no una inclinación
   sintética: se reserva para glosas dentro de las entradillas de las
   bandas oscuras, donde el registro lo admite. */
.ct-entradilla em {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.08em;
	color: var(--wp--preset--color--laton-claro);
}

/* El sello del pie va en el mismo tono que el texto que acompaña. */
.ct-sello--pie {
	color: var(--wp--preset--color--tinta);
	margin-bottom: 0.75rem;
}

.ct-sello--pie svg {
	width: 2.4rem;
	height: 2.4rem;
}