/*
Theme Name:   Crisju Autolavados
Theme URI:    https://artbyte.es
Description:  Tema hijo de Kadence para Crisju Autolavados (KIT Digital). Identidad visual en variables CSS.
Author:       ARTBYTE
Author URI:   https://artbyte.es
Template:     kadence
Version:      1.0.0
Text Domain:  crisju
*/

/*
 * TOKENS
 * Los valores de color viven en un único sitio: inc/identidad.php, que los
 * vuelca en la paleta global de Kadence (--global-paletteN). Aquí solo se
 * nombran por su uso. Nunca escribir hex de marca fuera de este bloque.
 */
:root {
	/* Color */
	--crisju-primario: var(--global-palette3);        /* #272e81 azul del logo */
	--crisju-acento: var(--global-palette1);          /* #007AA7 cian accesible: botones, enlaces, texto destacado */
	--crisju-acento-marca: var(--global-palette2);    /* #00AEEF cian de marca: iconos, ondas, detalles (nunca texto pequeño sobre blanco) */
	--crisju-texto: var(--global-palette4);           /* #2C2C2A */
	--crisju-texto-suave: var(--global-palette5);     /* #5B6573 */
	--crisju-texto-apagado: var(--global-palette6);   /* #646E7C */
	--crisju-borde: var(--global-palette7);           /* #E3E8EF gris claro */
	--crisju-fondo-alterno: var(--global-palette8);   /* #DDF1FA azul muy claro (antes #F5F7FA) */
	--crisju-blanco: var(--global-palette9);          /* #FFFFFF */
	--crisju-whatsapp: var(--global-palette11);       /* #25D366 verde WhatsApp: solo con texto --crisju-primario encima */

	/* Tipografía (familias definidas en inc/identidad.php) */
	--crisju-fuente-titulares: var(--global-heading-font);
	--crisju-fuente-texto: var(--global-base-font);

	/* Forma */
	--crisju-radio: 12px;
	--crisju-radio-boton: 999px;
	--crisju-sombra-tarjeta: 0 6px 24px color-mix(in srgb, var(--crisju-primario) 10%, transparent);

	/* Accesibilidad */
	--crisju-foco-color: var(--crisju-acento-marca);
	--crisju-foco-ancho: 3px;

	/* Separadores de onda (formas SVG como máscara: el color lo pone --crisju-onda-color) */
	/* El motivo ocupa el ancho completo una sola vez (16/09/2026, petición de la usuaria): el alto sale de
	   su proporción, 100 / 7,1124 = 14,06 vw (202 px en 1440, 53 px en móvil). */
	--crisju-onda-alto: 14.06vw;
	/* Motivo definitivo de Juan (16/09/2026): olas con burbujas, 570 × 80 (7,11:1). Sus bordes casan
	   (misma altura a izquierda y derecha), así que repite sin costura y sin espejarlo, y está relleno
	   hasta abajo, que es lo que permite pintarlo del color de la sección siguiente.
	   El color lo pone --crisju-onda-color: el SVG solo sirve de máscara. */
	--crisju-motivo: url("assets/img/motivo-juan.svg");
	/* Pruebas anteriores (olas con espuma, en espejo para poder repetirlas). Se conservan por si acaso. */
	--crisju-motivo1: url("assets/img/motivo1-espejo.svg");
	--crisju-motivo2: url("assets/img/motivo2-espejo.svg");
	--crisju-onda-forma: var(--crisju-motivo);
	--crisju-onda-tam: 100% 100%; /* con el alto en 14,06 vw no se deforma: es su proporción exacta */
	--crisju-onda-rep: no-repeat;
	--crisju-onda-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 48C240 8 480 8 720 40s480 40 720 0v40H0z'/%3E%3C/svg%3E");
	--crisju-onda-doble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.35' d='M0 32C200 0 440 64 720 28s520 -20 720 20v32H0z'/%3E%3Cpath d='M0 56C260 24 520 72 780 50s460 -26 660 2v28H0z'/%3E%3C/svg%3E");

	/* Marcador de datos pendientes del cliente (no es color de marca) */
	--crisju-pendiente-fondo: #FFF3CD;
	--crisju-pendiente-texto: #664D03;
}

/* FOCO VISIBLE (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--crisju-foco-ancho) solid var(--crisju-foco-color);
	outline-offset: 2px;
}

/* UTILIDADES reutilizables desde el editor (campo "Clase CSS adicional") */
.crisju-fondo-alterno {
	background-color: var(--crisju-fondo-alterno);
}

.crisju-fondo-primario {
	background-color: var(--crisju-primario);
	color: var(--crisju-blanco);
}

.crisju-tarjeta {
	background-color: var(--crisju-blanco);
	border: 1px solid var(--crisju-borde);
	border-radius: var(--crisju-radio);
	box-shadow: var(--crisju-sombra-tarjeta);
}

/*
 * SEPARADORES DE ONDA (reutilizables)
 * En cualquier fila o grupo, campo "Clase CSS adicional":
 *   crisju-onda-abajo  → onda en el borde inferior, del color de la sección SIGUIENTE
 *   crisju-onda-arriba → onda en el borde superior, del color de la sección ANTERIOR
 * Color (obligatorio elegir uno): crisju-onda-blanco | crisju-onda-alterno | crisju-onda-primario
 * Forma (opcional): crisju-onda-doble (por defecto, suave)
 * Ejemplo: "crisju-onda-abajo crisju-onda-blanco"
 * Regla de la web: cada sección lleva onda abajo con el color de la sección siguiente,
 * alternando fondos blanco / azul muy claro (#DDF1FA, palette8) y banda azul al final.
 */
.crisju-onda-abajo,
.crisju-onda-arriba {
	position: relative;
	--crisju-onda-color: var(--crisju-blanco);
	--crisju-onda-forma: var(--crisju-motivo);
	--crisju-onda-tam: 100% 100%; /* una sola vez, a todo el ancho */
	--crisju-onda-rep: no-repeat;
}

/* La onda dibujada de antes queda como alternativa: se estira de lado a lado */
.crisju-onda-clasica {
	--crisju-onda-forma: var(--crisju-onda-suave);
	--crisju-onda-tam: 100% 100%;
	--crisju-onda-rep: no-repeat;
}

/*
 * Motivos de Juan (16/09/2026): probados y descartados de momento — el cliente los está
 * rehaciendo junto con las cabeceras. El mecanismo queda listo: con las clases de abajo, una
 * sección usa el motivo en vez de la onda dibujada. Los motivos conservan su proporción y se
 * repiten (`auto 100%` + `repeat-x`); las versiones "-espejo" (dibujo + reflejo solapado 1 px)
 * se repiten sin costura. Baldosa ≈ 8 × el alto de la onda.
 * Aprendido en la prueba: estirarlos (`100% 100%`) achata las burbujas, y sin repetir no caben
 * (a ancho completo el dibujo mide 362 px de alto y al recortarlo se pierde la cresta).
 */
.crisju-onda-motivo2 {
	--crisju-onda-forma: var(--crisju-motivo2);
	--crisju-onda-tam: auto 100%;
	--crisju-onda-rep: repeat-x;
}

/* motivo1 es solo la línea con burbujas: decorativo, no tapa la sección anterior */
.crisju-onda-motivo1 {
	--crisju-onda-forma: var(--crisju-motivo1);
	--crisju-onda-tam: auto 100%;
	--crisju-onda-rep: repeat-x;
}

:root {
	/* Alto de la banda de foto de la cabecera en móvil (≤ 767 px) */
	--crisju-hero-movil: 250px;
}

/* Las filas de Kadence ya van con `position: relative`, pero las clases deben valer también en un
   grupo normal de Gutenberg (patrón "Sección con onda arriba y abajo"). */
.crisju-onda-abajo,
.crisju-onda-arriba {
	position: relative;
}

.crisju-onda-abajo::after,
.crisju-onda-arriba::before,
.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: var(--crisju-onda-alto);
	background-color: var(--crisju-onda-color);
	-webkit-mask: var(--crisju-onda-forma) var(--crisju-onda-pos, left center) / var(--crisju-onda-tam) var(--crisju-onda-rep);
	mask: var(--crisju-onda-forma) var(--crisju-onda-pos, left center) / var(--crisju-onda-tam) var(--crisju-onda-rep);
	pointer-events: none;
}

.crisju-onda-abajo::after {
	/* -3 px: con -1 px quedaba una línea fina entre el motivo y la sección siguiente (subpíxel de la
	   máscara). Como el motivo va del color de la sección de abajo, sobresalir no se nota. */
	bottom: -3px;
}

/* Espacio propio para la onda: la sección crece lo que mide la onda y no tapa fotos ni textos */
.crisju-onda-abajo {
	padding-bottom: var(--crisju-onda-alto);
}

.crisju-onda-arriba {
	padding-top: var(--crisju-onda-alto);
}

/* En un grupo de Gutenberg con fondo, el núcleo pone `padding: 20px` con dos clases y gana a las
   reglas de arriba: la onda se comería el texto. Se sube la especificidad (clase repetida) y se
   añade un respiro además del alto de la onda. */
.wp-block-group.crisju-onda-arriba.crisju-onda-arriba {
	padding-top: calc(var(--crisju-onda-alto) + 2rem);
}

.wp-block-group.crisju-onda-abajo.crisju-onda-abajo {
	padding-bottom: calc(var(--crisju-onda-alto) + 2rem);
}

/* Variante: la onda pisa el contenido (fotos a sangre), sin reservarle espacio. Uso: + "crisju-onda-pisa" */
.crisju-onda-abajo.crisju-onda-pisa {
	padding-bottom: 0;
}

.crisju-onda-pisa::after {
	z-index: 2;
	/* El motivo es macizo en su tercio inferior (el dibujo ocupa de y=50 a 80 del viewBox de 80,18):
	   anclado abajo se comía media fila de fotos. Se baja ese 37 %, que cae sobre el relleno superior
	   de la sección siguiente y va de su mismo color (invisible), así que sobre las fotos solo quedan
	   las líneas y las burbujas (16/09/2026, petición de la usuaria). */
	bottom: calc(-3px - var(--crisju-onda-alto) * 0.37);
}

/* Onda de arriba que pisa las fotos: color propio (la de abajo usa --crisju-onda-color). Uso: + "crisju-onda-arriba-pisa crisju-onda-arriba-blanco" */
.crisju-onda-arriba-pisa::before {
	content: "";
	position: absolute;
	/* Mismo criterio que .crisju-onda-pisa, hacia arriba: la parte maciza se sale por encima de las
	   fotos, sobre el relleno de la sección anterior y de su color. */
	top: calc(1px - var(--crisju-onda-alto) * 0.3);
	left: 0;
	right: 0;
	z-index: 2;
	height: var(--crisju-onda-alto);
	background-color: var(--crisju-onda-color-arriba, var(--crisju-blanco));
	-webkit-mask: var(--crisju-onda-forma) var(--crisju-onda-pos, left center) / var(--crisju-onda-tam) var(--crisju-onda-rep);
	mask: var(--crisju-onda-forma) var(--crisju-onda-pos, left center) / var(--crisju-onda-tam) var(--crisju-onda-rep);
	transform: scaleY(-1);
	pointer-events: none;
}

.crisju-onda-arriba-blanco {
	--crisju-onda-color-arriba: var(--crisju-blanco);
}

/* La onda del pie sube sobre la última sección: se le reserva el mismo espacio */
.entry-content > .wp-block-kadence-rowlayout:last-child {
	padding-bottom: var(--crisju-onda-alto);
}

.crisju-onda-arriba::before {
	top: -1px;
	transform: scaleY(-1);
	/* Color propio: una sección puede llevar onda arriba (del color de la sección anterior) y abajo
	   (del de la siguiente), que casi nunca son el mismo. Si no se dice nada, hereda el de abajo. */
	background-color: var(--crisju-onda-color-arriba, var(--crisju-onda-color));
}

.crisju-onda-arriba-alterno {
	--crisju-onda-color-arriba: var(--crisju-fondo-alterno);
}

.crisju-onda-arriba-primario {
	--crisju-onda-color-arriba: var(--crisju-primario);
}

.crisju-onda-blanco {
	--crisju-onda-color: var(--crisju-blanco);
}

.crisju-onda-alterno {
	--crisju-onda-color: var(--crisju-fondo-alterno);
}

.crisju-onda-primario {
	--crisju-onda-color: var(--crisju-primario);
}

.crisju-onda-doble {
	--crisju-onda-forma: var(--crisju-onda-doble);
}

/* Pie: onda en todas las páginas, del color del pie, subiendo sobre la sección anterior */
.site-footer {
	position: relative;
	--crisju-onda-color: var(--crisju-fondo-alterno);
	--crisju-onda-forma: var(--crisju-motivo);
	--crisju-onda-tam: 100% 100%;
	--crisju-onda-rep: no-repeat;
}

.site-footer::before {
	/* 3 px de solape: con 1 px se veía una línea fina entre el motivo y el pie (subpíxel de la
	   máscara), igual que pasaba en las secciones (16/09/2026). */
	bottom: calc(100% - 3px);
}

/* Inicio, 4 destacados: iconos grandes en fila, texto debajo (2 × 2 en móvil) */
.crisju-destacados .wp-block-kadence-iconlist ul.kt-svg-icon-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	max-width: 1100px;
	margin: 0 auto !important; /* Kadence fija margin 0 0 10px con más especificidad y la fila quedaba a la izquierda */
	padding: 0;
}

.crisju-destacados .wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	text-align: center;
}

.crisju-destacados .wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-single {
	margin: 0 !important; /* Kadence deja 20 px a la derecha del icono: lo descentraba respecto al texto */
}

.crisju-destacados .wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-text {
	font-family: var(--global-heading-font-family);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--crisju-primario);
}

@media (max-width: 767px) {
	.crisju-destacados .wp-block-kadence-iconlist ul.kt-svg-icon-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.crisju-destacados .wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-text {
		font-size: 1.0625rem;
	}
}

/* Los títulos de las tarjetas también son H2, pero dentro de una tarjeta 44 px es demasiado */
.kb-row-layout-id18_714c7a-03 h2 {
	font-size: 1.75rem;
	line-height: 1.25;
}

/* Servicios y tarifas, tarjetas de precios (fila 18_714c7a-03): botón "Reservar cita" alineado abajo en las tres */
.kb-row-layout-id18_714c7a-03 .wp-block-kadence-column > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.kb-row-layout-id18_714c7a-03 .kt-inside-inner-col > .wp-block-kadence-advancedbtn {
	margin-top: auto;
}

/* Apiladas (tableta y móvil) el salto forzado de "Limpieza<br>básica" sobra */
@media (max-width: 1024px) {
	.kb-row-layout-id18_714c7a-03 h2 br {
		display: none;
	}
}

/* Bandas azules finales (clase crisju-banda-cta, la pone cj_cta en Inicio y Servicios): botones en una línea,
   mismo ancho y alto (Servicios: WhatsApp + "Enviar consulta"; Inicio: "Solicitar cita online"). */
.crisju-banda-cta .wp-block-kadence-advancedbtn {
	display: grid !important;
	grid-template-columns: max-content;
	justify-content: center;
	gap: 12px;
}

.crisju-banda-cta .wp-block-kadence-advancedbtn .kb-button {
	width: 100%;
	justify-content: center;
	white-space: nowrap;
}

/* El de contorno lleva 2 px de borde: el primero, uno transparente para medir lo mismo (Kadence fija 0 con más especificidad) */
.crisju-banda-cta .wp-block-kadence-advancedbtn .kb-button:first-child {
	border: 2px solid transparent !important;
}


/* Escritorio: el titular manda (1,3fr) y la columna de botones toma el ancho que necesitan
   (antes 204 px y el texto se partía en dos líneas) */
@media (min-width: 1025px) {
	.crisju-banda-cta .kb-row-layout-wrap > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto !important;
	}
}

/* Inicio, "Pide tu cita en 3 pasos": la columna del número es estrecha y el punto de "1." bajaba de línea */
.kt-adv-heading6_b28ce4-4c,
.kt-adv-heading6_0ac746-dc,
.kt-adv-heading6_8eec6f-91 {
	white-space: nowrap;
}

/* CÓMO LLEGAR: enlaces a Google Maps, Waze y Apple Maps (16/09/2026) */
.crisju-como-llegar {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.crisju-como-llegar a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35em 0.9em;
	border: 1px solid var(--crisju-acento);
	border-radius: var(--crisju-radio-boton);
	color: var(--crisju-acento);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.crisju-como-llegar a:hover,
.crisju-como-llegar a:focus-visible {
	background-color: var(--crisju-acento);
	color: var(--crisju-blanco);
}

.crisju-como-llegar img {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.crisju-donde-estamos {
	margin-top: 1.25rem;
}

/* Pie: datos del lavadero con un icono por línea (16/09/2026; antes eran párrafos corridos) */
.site-footer .crisju-datos-pie {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .crisju-dato {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0 0 0.75rem;
	line-height: 1.45;
}

.site-footer .crisju-dato__icono {
	flex: 0 0 auto;
	margin-top: 0.1em;
	color: var(--crisju-acento);
	line-height: 0;
}

.site-footer .crisju-dato--whatsapp .crisju-dato__icono {
	color: var(--crisju-whatsapp);
}

/* Pie, línea 1 en escritorio: logo | datos | menú. Con columnas iguales el logo se llevaba un tercio
   y sobraba hueco a la derecha (16/09/2026). */
@media (min-width: 1025px) {
	#colophon .site-middle-footer-inner-wrap {
		grid-template-columns: 300px minmax(0, 1fr) minmax(0, 320px) !important;
	}
}

/* En tableta las tres columnas iguales (215 px) apretaban los datos y el menú (usuaria, 16/09/2026):
   el logo se lleva solo lo justo y los datos se quedan con el resto. */
@media (min-width: 768px) and (max-width: 1024px) {
	#colophon .site-middle-footer-inner-wrap {
		grid-template-columns: 150px minmax(0, 1fr) auto !important;
		column-gap: 2.5rem;
	}
}

/* Las columnas del pie, alineadas arriba (Kadence las centra verticalmente y el logo caía
   a media altura junto a los datos; usuaria, 16/09/2026) */
#colophon .site-middle-footer-inner-wrap .site-footer-focus-item {
	align-items: flex-start;
}

/* Logo de la cabecera transparente: un poco más grande y separado de la barra (usuaria, 16/09/2026) */
.transparent-header #main-header .site-branding img {
	max-width: 250px;
	margin-top: 10px;
}

/* Logo del pie: vertical en escritorio y tableta, horizontal en móvil */
.crisju-logo-pie-h {
	display: none;
}

@media (max-width: 1024px) {
	/* En tableta el logo cabe en su columna estrecha */
	.site-footer .crisju-logo-pie img {
		width: 150px !important;
	}
}

@media (max-width: 767px) {
	.site-footer .crisju-logo-pie {
		display: none;
	}

	.site-footer .crisju-logo-pie-h {
		display: block;
	}
}

/* Pie, línea 2: una raya suave entre el menú y los enlaces legales, y otra entre el © y los logos KIT */
#colophon .site-bottom-footer-inner-wrap .footer-html,
#colophon .site-bottom-footer-inner-wrap .footer-widget2 {
	border-top: 1px solid color-mix(in srgb, var(--crisju-primario) 18%, transparent);
	padding-top: 1.25rem;
	margin-top: 1.25rem;
}

/* Pie: el menú es su propia columna y arranca a la altura de los datos; solo cuando se apila
   (móvil) necesita aire por encima. El logo trae 9 px de margen del bloque de imagen. */
@media (max-width: 767px) {
	.site-footer .footer-navigation {
		margin-top: 1.25rem;
	}
}

.site-footer .crisju-logo-pie,
.site-footer .crisju-logo-pie-h {
	margin-top: 0;
}

/* Menú del pie en columna, un enlace por línea (16/09/2026: en fila se partía 2-2-1 y quedaba raro).
   Con #colophon delante: Kadence lo centra y da relleno lateral a los enlaces con esa especificidad. */
#colophon .footer-navigation .footer-menu-container > ul {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#colophon .footer-navigation .footer-menu-container > ul > li > a {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 767px) {
	/* En móvil todo se apila: el logo grande alarga mucho el pie (el bloque fija el ancho en línea) */
	.site-footer .crisju-logo-pie img {
		width: 180px !important;
	}

	/* Enlaces legales en columna: se ocultan los separadores y cada enlace ocupa su línea */
	#colophon .footer-html .crisju-sep {
		display: none;
	}

	#colophon .footer-html a,
	#colophon .footer-html .crisju-gestionar-cookies {
		display: block;
		margin-bottom: 0.35rem;
	}
}

/* Pie: enlaces legales y © bajo el menú, en la misma columna y con aire (16/09/2026) */
#colophon .site-middle-footer-inner-wrap .footer-html {
	margin-top: 1.5rem;
}

/* Pie: logos obligatorios del programa KIT Digital, solos y centrados en la fila inferior */
.site-footer .crisju-logos-kit {
	margin: 0 auto;
	text-align: center;
}

/* Enlaces legales sin subrayado, como el resto de enlaces del pie (#colophon: especificidad de Kadence) */
#colophon .footer-html a,
#colophon .footer-html .crisju-gestionar-cookies {
	text-decoration: none;
}

#colophon .footer-html a:hover,
#colophon .footer-html .crisju-gestionar-cookies:hover {
	text-decoration: underline;
}

/* © más pequeño y con el doble de aire por encima */
#colophon .footer-html .crisju-copyright {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 0.8125rem;
}

.site-footer .crisju-logos-kit img {
	width: 100%;
	max-width: 960px;
	height: auto;
}

/* Pie: "Gestionar cookies" es un botón (lo escucha Complianz) con aspecto de enlace */
.site-footer .crisju-gestionar-cookies {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: var(--crisju-primario);
	text-decoration: underline;
	cursor: pointer;
}

.site-footer .crisju-gestionar-cookies:hover {
	color: var(--crisju-acento);
	background: none;
}

.site-footer .crisju-gestionar-cookies:focus-visible {
	outline: var(--crisju-foco, 2px solid currentColor);
	outline-offset: 2px;
}

/* TABLAS DE PRECIOS (bloque Tabla con clase crisju-tabla) */
.crisju-tabla table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--crisju-blanco);
	border-radius: var(--crisju-radio);
	overflow: hidden;
	box-shadow: var(--crisju-sombra-tarjeta);
}

.crisju-tabla th,
.crisju-tabla td {
	padding: 0.75em 1em;
	border: 0;
	border-bottom: 1px solid var(--crisju-borde);
	text-align: left;
	vertical-align: top;
}

.crisju-tabla thead th {
	background-color: var(--crisju-primario);
	color: var(--crisju-blanco);
	font-family: var(--crisju-fuente-titulares);
}

.crisju-tabla th:last-child,
.crisju-tabla td:last-child {
	text-align: right;
	font-weight: 700;
	color: var(--crisju-primario);
}

.crisju-tabla thead th:last-child {
	color: var(--crisju-blanco);
}

@media (max-width: 600px) {
	.crisju-tabla table {
		table-layout: auto;
		font-size: 0.9em;
	}
}

/* FORMULARIOS (WPForms, marcado moderno): sus variables apuntan a los tokens */
.wpforms-container {
	/* WPForms pinta el botón en reposo con la variable "-alt": las dos al acento. */
	--wpforms-button-background-color: var(--crisju-acento);
	--wpforms-button-background-color-alt: var(--crisju-acento);
	--wpforms-button-border-color: var(--crisju-acento);
	--wpforms-button-text-color: var(--crisju-blanco);
	--wpforms-button-text-color-alt: var(--crisju-blanco);
	--wpforms-button-border-radius: var(--crisju-radio-boton);
	--wpforms-button-size-font-size: 1.1rem;
	--wpforms-button-size-height: 3.25rem;
	--wpforms-button-size-padding-h: 2.25rem;
	--wpforms-field-border-color: var(--crisju-texto-apagado); /* bordes de campo ≥ 3:1 (WCAG 1.4.11) */
	--wpforms-field-border-radius: var(--crisju-radio);
	--wpforms-field-text-color: var(--crisju-texto);
	--wpforms-label-color: var(--crisju-primario);
	--wpforms-label-sublabel-color: var(--crisju-texto-suave);
}

/* Selector reforzado: WPForms fija el tamaño de texto dentro de su contenedor. */
/* Aviso destacado: recuadro azul claro, franja verde WhatsApp, texto azul oscuro (≈ 12:1) */
div.wpforms-container-full .wpforms-submit-container .crisju-aviso-whatsapp,
.crisju-aviso-whatsapp {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0.875rem 1rem;
	background-color: var(--crisju-fondo-alterno);
	border-left: 4px solid var(--crisju-whatsapp);
	border-radius: var(--crisju-radio);
	color: var(--crisju-primario);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.45;
}

div.wpforms-container-full .wpforms-submit-container .crisju-aviso-whatsapp strong {
	font-weight: 700;
}

/* Icono: glifo azul oscuro sobre círculo verde (6,90:1). Selector reforzado: WPForms resetea los span del formulario */
div.wpforms-container-full .wpforms-submit-container .crisju-aviso-whatsapp .crisju-aviso-whatsapp__icono,
.crisju-aviso-whatsapp__icono {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--crisju-whatsapp);
	color: var(--crisju-primario);
}

/*
 * CABECERAS CON FOTO (clase crisju-hero, la pone $cabecera en fase3-paginas.php)
 * Diseño de Juan (16/09/2026). En vez de capa plana azul (haría falta 70 % de opacidad para que el
 * texto blanco cumpliera contraste en los brillos de la foto, y eso la apaga), degradado azul opaco
 * a la izquierda, donde va el texto, y transparente a la derecha, donde se ve el coche.
 */
.crisju-hero::before {
	content: "";
	display: block; /* el tema le pone display:table (clearfix) y se quedaba sin altura */
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--crisju-primario) 96%, transparent) 0%,
		color-mix(in srgb, var(--crisju-primario) 90%, transparent) 36%,
		color-mix(in srgb, var(--crisju-primario) 60%, transparent) 60%,
		color-mix(in srgb, var(--crisju-primario) 15%, transparent) 85%,
		transparent 100%);
	pointer-events: none;
}

.crisju-hero > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

/* El texto arranca en la misma vertical que el logo: mismo borde de contenido que la cabecera */
@media (min-width: 768px) {
	.crisju-hero > .kt-row-column-wrap {
		padding-left: var(--global-content-edge-padding, 24px) !important;
		/* La cabecera flota sobre la foto (80 px): en tableta el titular llegaba a tocarla. */
		padding-top: max(9.5rem, 10vw) !important;
	}

	/* En tableta Kadence vuelve a centrar los titulares con su propia regla; además repite la clase,
	   así que hay que subir un escalón más de especificidad para ganarle. */
	.crisju-hero .kt-inside-inner-col .wp-block-kadence-advancedheading.wp-block-kadence-advancedheading {
		text-align: left !important;
	}

	.crisju-hero .kt-inside-inner-col .wp-block-kadence-advancedbtn.wp-block-kadence-advancedbtn {
		justify-content: flex-start !important;
	}
}

/* Las interiores llevan una fila interna estrecha y centrada: a la izquierda y sin el relleno
   lateral que traía la plantilla, para que el texto arranque en la misma vertical que el logo */
.crisju-hero .kb-row-layout-wrap > .kt-row-column-wrap {
	margin-left: 0 !important;
	margin-right: auto !important;
	/* Con el H1 a 72 px, la caja de 600 px de la plantilla partía "Nuestros servicios de lavado"
	   en tres líneas: se iguala a los 760 px de la columna de Inicio (16/09/2026). */
	max-width: 760px !important;
}

.crisju-hero .kb-row-layout-wrap .kt-inside-inner-col {
	padding-left: 0 !important;
}

/* Texto a la izquierda, como en el diseño (la plantilla dejaba la columna pegada a la derecha) */
.crisju-hero > .kt-row-column-wrap > .wp-block-kadence-column {
	justify-self: start;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Clase repetida a propósito: Kadence imprime el text-align de cada titular en el <head>, después de
   esta hoja y con la misma especificidad, así que si no se sube gana el suyo. */
.crisju-hero .wp-block-kadence-advancedheading {
	max-width: 22ch; /* el titular rompe en dos líneas, como en el diseño */
	margin-left: 0;
	text-align: left !important; /* Kadence repite la clase en su regla y va después: solo gana !important */
}

.crisju-hero p.wp-block-kadence-advancedheading {
	max-width: 46ch; /* antetítulo y subtítulo necesitan más caja */
}

/* H1 del hero igual en las cinco páginas (usuaria, 16/09/2026): Inicio traía de la plantilla
   72 / 60 / 50 px y las interiores se quedaban en los 50 px del tema, que se veían pequeños.
   Kadence imprime el tamaño de cada titular en el <head>, después de esta hoja: hace falta !important. */
.crisju-hero h1.wp-block-kadence-advancedheading {
	font-size: 72px !important;
	line-height: 1.18 !important;
}

@media (max-width: 1024px) {
	.crisju-hero h1.wp-block-kadence-advancedheading {
		font-size: 60px !important;
		line-height: 1.13 !important;
	}
}

@media (max-width: 767px) {
	.crisju-hero h1.wp-block-kadence-advancedheading {
		font-size: 50px !important;
		line-height: 1.1 !important;
	}
}

.crisju-hero .wp-block-kadence-advancedbtn {
	justify-content: flex-start !important;
}

.crisju-hero .wp-block-kadence-advancedbtn {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	/* En móvil el titular sale de la foto (diseño de Juan): arriba la foto, debajo el texto en blanco */
	.crisju-hero {
		/* El hueco de la foto va como relleno de la sección: con margen en el hijo se colapsa
		   con el del padre y empuja la sección entera en vez de dejar sitio a la foto.
		   Alto de la banda: 250 px (usuaria, 16/09/2026; antes la proporción exacta de las fotos de
		   Juan, 150 px en un móvil de 375: se veían enteras pero muy bajas; con 400 px el recorte era
		   demasiado agresivo).
		   OJO: la banda es el relleno superior, pero el fondo cubre TODA la sección (835 px con el
		   texto y los botones). Con `cover` la foto se escalaba a esa altura y en la banda solo se veía
		   un trozo enorme del centro. Por eso se fija la altura del fondo a la de la banda
		   (`auto var(--crisju-hero-movil)`), anclado arriba: así se ve la foto entera de alto y solo se
		   recorta a lo ancho, por la derecha, que es donde está el motivo en las fotos de Juan. */
		padding: var(--crisju-hero-movil) 0 0 !important;
		background-position: var(--crisju-hero-movil-pos, right top) !important;
		background-size: var(--crisju-hero-movil-tam, auto var(--crisju-hero-movil)) !important;
		background-repeat: no-repeat !important;
		background-color: var(--crisju-blanco) !important;
	}

	/* La foto se ve limpia (en móvil no hay texto encima), pero el logo y el menú van en blanco sobre
	   ella: se protege solo la franja de arriba con un degradado que se disuelve enseguida. */
	.crisju-hero .kt-row-layout-overlay {
		display: none;
	}

	.crisju-hero::before {
		display: block;
		inset: 0 0 auto;
		/* Solo la franja de la cabecera: con la banda de 400 px el degradado cubría toda la foto y la
		   dejaba azulada (el piloto rojo del coche ni se veía). 160 px bastan para el logo y el menú. */
		height: min(160px, var(--crisju-hero-movil));
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--crisju-primario) 80%, transparent) 0%,
			color-mix(in srgb, var(--crisju-primario) 45%, transparent) 40%,
			transparent 100%);
	}

	.crisju-hero > .kt-row-column-wrap {
		padding: 1.75rem 20px 2.5rem !important;
		background-color: var(--crisju-blanco);
	}

	/* La onda se queda al pie de la foto, justo encima del bloque de texto */
	.crisju-hero::after {
		top: var(--crisju-hero-movil);
		bottom: auto;
		transform: translateY(-100%);
	}

	/* En móvil, debajo de la cabecera siempre va el bloque blanco del texto: la onda, blanca
	   (en escritorio lleva el color de la sección siguiente, que en Servicios es azul claro) */
	.crisju-hero {
		--crisju-onda-color: var(--crisju-blanco);
	}

	/* En móvil el texto va centrado bajo la foto, como en el diseño */
	.crisju-hero .wp-block-kadence-advancedheading {
		max-width: none;
		text-align: center !important;
	}

	.crisju-hero .wp-block-kadence-advancedbtn {
		justify-content: center !important;
	}

	/* Textos en azul sobre el blanco */
	.crisju-hero .kt-adv-heading-inner,
	.crisju-hero .wp-block-kadence-advancedheading,
	.crisju-hero .wp-block-kadence-advancedheading * {
		color: var(--crisju-primario) !important;
	}

	/* El botón de teléfono es blanco sobre la foto; sobre el bloque blanco, al revés */
	.crisju-hero .crisju-btn-telefono {
		background-color: var(--crisju-primario) !important;
		color: var(--crisju-blanco) !important;
	}
}

/* PÁGINAS LEGALES (clase crisju-legal, la pone functions.php en los 3 slugs legales).
   Son las únicas que usan el título de Kadence; el resto trae su cabecera con foto. */
.crisju-legal .entry-header.page-title {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: 2.5rem;
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
	background-color: var(--crisju-primario);
	text-align: center;
}

.crisju-legal .entry-header.page-title .entry-title {
	color: var(--crisju-blanco); /* 11,71:1 sobre el azul del logo */
}

/* Los H2 de sección (44 px) se comen estas páginas, que son texto seguido y numerado */
.crisju-legal .entry-content h2 {
	font-size: 1.625rem;
	line-height: 1.3;
	margin-top: 2.5rem;
}

/* PENDIENTE-CLIENTE: dato que falta, visible a propósito */
.crisju-pendiente {
	display: inline-block;
	padding: 0.1em 0.5em;
	border: 2px dashed currentColor;
	border-radius: 4px;
	background-color: var(--crisju-pendiente-fondo);
	color: var(--crisju-pendiente-texto);
	font-weight: 700;
}


/* ---------------------------------------------------------------------------
 * ANIMACIÓN DE ENTRADA (16/09/2026)
 *
 * Las clases las pone `assets/js/animaciones.js` al vuelo: si el JS no corre, no hay nada oculto.
 * La cabecera no se anima (es lo primero que se ve). Con "reducir movimiento" activado, el JS ni
 * siquiera arranca, pero se deja también la regla por si algo añadiera la clase desde el editor.
 * --------------------------------------------------------------------------- */
.crisju-anima {
	opacity: 0;
	/* 28 px y 0,7 s: con 12 px apenas se notaba (usuaria, 16/09/2026). La curva arranca rápida y
	   frena al final (como un "entrar y posarse"), que se lee mejor que un ease-out plano. */
	transform: translateY(28px);
	transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 0.84, 0.28, 1);
	will-change: opacity, transform;
}

.crisju-anima.crisju-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.crisju-anima,
	.crisju-anima.crisju-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Cabecera: entrada por CSS, sin JavaScript. Empieza en el primer pintado (`both` deja el estado
   inicial desde el primer fotograma), así no hay parpadeo ni rebote: el texto no llega a verse
   antes de empezar. Antetítulo → titular → texto → botones. */
@keyframes crisju-entrada {
	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.crisju-hero .kt-inside-inner-col > * {
	animation: crisju-entrada 0.7s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

.crisju-hero .kt-inside-inner-col > *:nth-child(2) {
	animation-delay: 0.12s;
}

.crisju-hero .kt-inside-inner-col > *:nth-child(3) {
	animation-delay: 0.24s;
}

.crisju-hero .kt-inside-inner-col > *:nth-child(4) {
	animation-delay: 0.36s;
}

.crisju-hero .kt-inside-inner-col > *:nth-child(n + 5) {
	animation-delay: 0.48s;
}

@media (prefers-reduced-motion: reduce) {
	.crisju-hero .kt-inside-inner-col > * {
		animation: none;
	}
}