/* DAVAL Fase 8 — utilidades de maquetación para páginas de bloques nativos.
   Se usan vía "Clases CSS adicionales" en el editor; colores desde las variables de Neve. */

:root {
	--daval-gold: var(--nv-primary-accent, #d6a805);
	--daval-dark: var(--nv-text-color, #010101);
	--daval-grey: #f5f5f5;
	/* Dorado de marca oscurecido para usarlo como TEXTO sobre fondos claros: 6.1:1 en blanco y 5.6:1
	   en gris (#d6a805 solo da 2.2:1). Sobre fondo oscuro se sigue usando --daval-gold (9.4:1).
	   Revisión UX/accesibilidad 17-sep-2026, hallazgo #1. */
	--daval-gold-text: #7a5f00;
}

/* Enlaces de texto en fondos claros: dorado oscuro + subrayado (Neve los pinta con el acento a 2.2:1) */
.nv-content-wrap a:not(.wp-block-button__link):not(.daval-card__link):not(.button):not(.e-button-base) { color: var(--daval-gold-text); text-decoration: underline; text-underline-offset: 2px; }
.nv-content-wrap a:not(.wp-block-button__link):not(.daval-card__link):not(.button):not(.e-button-base):hover { color: var(--daval-dark); }
.nv-content-wrap .daval-section--dark a:not(.wp-block-button__link):not(.e-button-base) { color: var(--daval-gold); }

/* Foco visible con contraste ≥ 3:1 en campos de formulario (Neve usa una sombra dorada a 2.2:1) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--daval-dark) !important; outline-offset: 2px; box-shadow: none !important; }
.daval-section--dark input:focus-visible, .daval-section--dark select:focus-visible, .daval-section--dark textarea:focus-visible { outline-color: #fff !important; }

/* Secciones ---------------------------------------------------------------- */
.daval-section { padding: 64px 24px; }
.daval-section > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.daval-section--dark { background: var(--daval-dark); color: #fff; }
.daval-section--dark h1, .daval-section--dark h2, .daval-section--dark h3, .daval-section--dark p, .daval-section--dark li { color: #fff; }
.daval-section--dark a:not(.wp-block-button__link) { color: var(--daval-gold); }
.daval-section--grey { background: var(--daval-grey); }
.daval-section--tight { padding-top: 40px; padding-bottom: 40px; }
/* Encabezado de sección que semánticamente es h2 pero visualmente pesa como h3 ("Relación con el
   Método"). Toma las variables de Neve en vez de un px fijo: así conserva el escalado por breakpoint
   del tema (20 px en móvil, 24 px en escritorio) sin duplicar sus media queries. */
.daval-section h2.daval-h-sub {
	font-size: var(--h3fontsize, 24px); line-height: var(--h3lineheight, 1.3em);
	font-weight: var(--h3fontweight, 600); letter-spacing: var(--h3letterspacing, 0px);
	text-transform: var(--h3texttransform, none);
}

/* Tipografía ----------------------------------------------------------------- */
.daval-eyebrow { color: var(--daval-gold-text) !important; letter-spacing: 3px; text-transform: uppercase; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.daval-section--dark .daval-eyebrow { color: var(--daval-gold) !important; }
.daval-lead { font-size: 1.25em; }
/* Longitud de línea 60–75 caracteres (revisión UX 17-sep-2026, #8); especificidad > layout "constrained" de core */
.daval-section .daval-lead, .entry-content .daval-lead { max-width: 68ch; }
.daval-lead.has-text-align-center { margin-left: auto; margin-right: auto; }
.daval-note { font-size: .95em; color: #555; }
.daval-section--dark .daval-note { color: #cfcfcf; }

/* Pasos (lista ordenada horizontal) ----------------------------------------- */
ol.daval-steps { list-style: none; counter-reset: paso; display: flex; gap: 20px; padding: 0; margin: 32px auto; max-width: 960px; }
ol.daval-steps li { counter-increment: paso; flex: 1 1 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 22px 20px 22px 20px; margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
ol.daval-steps li::before { content: counter(paso); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--daval-gold); color: var(--daval-dark); font-weight: 700; font-size: 18px; }
.daval-section:not(.daval-section--dark) ol.daval-steps li { background: var(--daval-grey); border-color: #e3e3e3; }

/* Tarjetas / rejillas -------------------------------------------------------- */
.daval-grid-3 .wp-block-column, .daval-grid-4 .wp-block-column, .daval-grid-2 .wp-block-column { background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 26px 22px; }
/* La variante oscura venía solo para 3 y 4 columnas; la de 2 se quedó fuera y heredaba el fondo
   blanco, así que en una sección oscura salían dos tarjetas blancas. Lo destapó "Qué recibes" de
   Auditoría Preventiva (14-oct-2026), la primera rejilla de 2 sobre fondo oscuro. */
.daval-section--dark .daval-grid-2 .wp-block-column, .daval-section--dark .daval-grid-3 .wp-block-column, .daval-section--dark .daval-grid-4 .wp-block-column { background: #1c1f24; border-color: #2a2e35; }
.daval-section--grey .daval-grid-3 .wp-block-column { background: #fff; }
.daval-card h3 { margin-top: 0; }

/* Botones ---------------------------------------------------------------------- */
.daval-btn-primary .wp-block-button__link { background: var(--daval-gold) !important; color: var(--daval-dark) !important; border-radius: 6px; padding: 14px 28px; font-weight: 700; }
.daval-btn-secondary .wp-block-button__link { background: transparent !important; color: currentColor !important; border: 2px solid currentColor; border-radius: 6px; padding: 12px 26px; font-weight: 600; }
.daval-section--dark .daval-btn-secondary .wp-block-button__link { color: #fff !important; }

/* Header: botón CTA global (Neve header builder) ---------------------------- */
.header-main-inner .builder-item--button_base .button.button-primary { background: var(--daval-gold); color: var(--daval-dark); border-radius: 6px; font-weight: 700; padding: 10px 18px; white-space: nowrap; }
.header-main-inner .builder-item--button_base .button.button-primary:hover { filter: brightness(.95); }

@media (max-width: 782px) {
	.daval-section { padding: 44px 18px; }
	ol.daval-steps { flex-direction: column; }
	.header-main-inner .builder-item--button_base .button.button-primary { padding: 8px 12px; font-size: 13px; }
}

/* Cifras institucionales ([daval_cifras]) ------------------------------------- */
ul.daval-cifras { list-style: none; display: flex; gap: 24px; justify-content: center; padding: 0; margin: 8px auto 0; max-width: 960px; flex-wrap: wrap; }
ul.daval-cifras li { flex: 1 1 200px; text-align: center; margin: 0; padding: 24px 16px; background: var(--daval-grey); border-top: 4px solid var(--daval-gold); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.daval-section--dark ul.daval-cifras li { background: #1c1f24; }
/* El "+" de "+25 elementos activos" es un elemento aparte del número: la animación de los
   contadores reescribe el textContent del número en cada frame y se llevaría el signo. Por eso
   comparte tipografía con él en lugar de vivir dentro. `__valor` existe solo para que los dos
   queden en la misma línea: el <li> es un flex en columna y, sueltos, se apilarían. */
.daval-cifras__valor { display: block; }
.daval-counter__number, .daval-cifras__prefijo { font-size: 56px; line-height: 1; font-weight: 700; color: var(--daval-dark); }
.daval-section--dark .daval-counter__number, .daval-section--dark .daval-cifras__prefijo { color: var(--daval-gold); }
.daval-cifras__label { text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; font-weight: 600; }

/* Tarjetas de servicio / pilares (grid responsivo con core/columns) ------------ */
/* OJO al tocar `.daval-cards`: estas tarjetas **entran animadas** al bajar por la página
   (difuminado + subida, pedido por Alan el 20-oct-2026). Esa animación NO está aquí: vive en
   `28-reveal.php`, que imprime su CSS en línea en la cabecera porque el estado oculto tiene que
   estar pintado en el primer frame. Allí está explicado por qué, y el interruptor para apagarla. */
.daval-cards .wp-block-column { background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; }
.daval-cards .wp-block-column h2, .daval-cards .wp-block-column h3 { margin: 0; font-size: 1.15em; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.daval-cards .wp-block-column p { margin: 0; }
.daval-cards .wp-block-column p:last-child { margin-top: auto; padding-top: 8px; }
.daval-cards .wp-block-column a.daval-card__link { color: var(--daval-dark); font-weight: 600; text-decoration: none; display: inline-block; padding: 12px 0; margin: -8px 0 -12px; min-height: 44px; box-sizing: border-box; }
.daval-cards .wp-block-column a.daval-card__link:hover, .daval-cards .wp-block-column a.daval-card__link:focus-visible { color: var(--daval-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.daval-section--dark .daval-cards .wp-block-column { background: #1c1f24; border-color: #2a2e35; }
.daval-section--dark .daval-cards a.daval-card__link { color: var(--daval-gold); }
/* Las siete tarjetas de servicio, del mismo tamaño en las dos filas (19-oct-2026, Alan: «aplica
   la opción A centrada»). core/columns reparte el ancho entre las columnas de cada bloque, así que
   una fila de tres saca tarjetas un 50 % más anchas que una de cuatro: las fotos se veían a 252 px
   abajo y a 169 arriba. Aquí se le fija a cada tarjeta un cuarto de la rejilla —descontando los
   tres huecos de separación— y se centra la fila incompleta, de modo que las siete miden lo mismo
   y el hueco sobrante queda repartido a los lados.

   Solo de 782 px para arriba: por debajo, el propio core apila las columnas con flex-basis 100 %
   !important y todas ocupan el ancho completo, que ya es lo que queremos en teléfono. La clase va
   únicamente en las dos filas de /servicios/ y de la portada; el hub de DAVALTECH usa daval-cards
   a secas porque sus cuatro tarjetas ya llenan la fila.

   El selector largo es a propósito y está probado en vivo: la regla de core que hay que vencer es
   `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0; flex-grow: 1 }`,
   con especificidad (0,3,0). Con `.daval-cards--siete > .wp-block-column` (0,2,0) no pasa nada:
   se aplicaba el centrado y el ancho se quedaba igual. Repitiendo las dos clases de core llegamos
   a (0,4,0) y gana sin necesidad de !important. */
@media (min-width: 782px) {
	.daval-cards--siete { justify-content: center; }
	.wp-block-columns.daval-cards--siete:not(.is-not-stacked-on-mobile) > .wp-block-column { flex: 0 1 calc((100% - 3 * var(--wp--style--block-gap, 2em)) / 4); }
}

.daval-pilares .wp-block-column { border-top: 4px solid var(--daval-gold); background: var(--daval-grey); border-radius: 10px; padding: 22px 20px; }
.daval-pilares .wp-block-column h2, .daval-pilares .wp-block-column h3 { margin: 0 0 6px; font-size: 1.05em; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.daval-pilares .wp-block-column p { margin: 0; }

/* Chips "sin enlace" (sectores, sub-líneas) ------------------------------------ */
ul.daval-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; margin: 16px auto 0; }
ul.daval-chips li { margin: 0; padding: 10px 18px; border: 1px solid #d0d0d0; border-radius: 999px; font-weight: 600; font-size: .95em; background: #fff; }
.daval-section--dark ul.daval-chips li { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
/* Los chips cierran con margin-bottom 0 y el bloque de botones de WordPress nace con
   margin-top 0, así que donde se siguen —el bloque DAVALTECH de la portada, único caso del
   sitio— el botón quedaba pegado a la última fila de chips (0 px medidos en staging). El resto
   de la portada separa el botón 28-30 px del bloque anterior; se iguala a 30. (15-oct-2026) */
ul.daval-chips + .wp-block-buttons { margin-top: 30px; }

/* Placeholder honesto de contenido pendiente ------------------------------------- */
.daval-pendiente { border-left: 4px solid var(--daval-gold); background: var(--daval-grey); padding: 14px 18px; border-radius: 6px; color: #555; font-size: .95em; }
.daval-section--dark .daval-pendiente { background: #1c1f24; color: #cfcfcf; }

/* Hero con imagen (core/cover) ---------------------------------------------------- */
.daval-hero.wp-block-cover { min-height: 520px; }
.daval-hero .wp-block-cover__inner-container { max-width: 960px; }
.daval-hero h1 { font-size: 46px; line-height: 1.15; }
@media (max-width: 782px) { .daval-hero h1 { font-size: 32px; } .daval-counter__number { font-size: 44px; } }

/* Hero de Home (dos columnas) ------------------------------------------------------ */
.daval-hero-cols { align-items: center; gap: 40px; }
.daval-hero-cols h1 { font-size: 42px; line-height: 1.15; margin: 8px 0 16px; }
.daval-hero-cols .daval-lead { font-size: 1.15em; }
.daval-hero__img img { border-radius: 12px; }
.daval-section .wp-block-columns.daval-hero-cols { max-width: 1100px; }
@media (max-width: 782px) { .daval-hero-cols h1 { font-size: 30px; } .daval-hero-cols { gap: 16px; } }
/* Las rejillas de tarjetas pueden usar hasta 1100px dentro de una sección */
.daval-section > .wp-block-columns, .daval-section > ul.daval-cifras { max-width: 1100px; }

/* Gaceta: introducción y navegación por categorías --------------------------------- */
.daval-gaceta-intro { max-width: 860px; margin: 0 auto 8px; padding: 8px 0 0; }
.daval-gaceta-cats { margin: 0 auto 36px; }
.daval-gaceta-cats ul.daval-chips li a { color: inherit; text-decoration: none; }
.daval-gaceta-cats ul.daval-chips li.is-active { background: var(--daval-gold); border-color: var(--daval-gold); }
.daval-gaceta-cats__vacia { font-weight: 400; color: #6b6b6b; font-size: .85em; }

/* Footer: crédito centrado en todos los anchos (petición de Alan, 14-sep-2026) */
.footer-bottom-inner .builder-item.cr, .footer-bottom-inner .builder-item.cr .item--inner, .footer-bottom-inner .builder-item.cr .component-wrap > div { text-align: center; width: 100%; }
.footer-bottom-inner .builder-item.cr .component-wrap { justify-content: center; }
.footer-bottom-inner .hfg-slot { justify-content: center; }

/* Objetivos táctiles (revisión UX 17-sep-2026, #5): íconos sociales 44 px; enlaces del footer con área
   de toque ≥ 44 px en pantallas táctiles. */
.wp-block-social-links .wp-block-social-link-anchor { min-width: 44px; min-height: 44px; padding: 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 782px) {
	.hfg_footer .widget_nav_menu .menu li a, .hfg_footer .nav-ul li a { padding-top: 12px; padding-bottom: 12px; display: inline-block; }
}

/* Widget de WhatsApp (WP Chat App) — ajustes de la revisión UX (#9, aprobados por Alan 23-sep-2026).
   En móvil la etiqueta "¿Necesitas ayuda?…" (156 px) + el ícono formaban una banda fija de ~212 px que
   cruzaba los CTA dorados al hacer scroll. Se oculta solo la etiqueta (≤ 782 px); el ícono se conserva.
   En móvil el widget baja a la esquina (20 px): ahí el botón "ir arriba" de Neve queda desactivado
   (`neve_scroll_to_top_on_mobile`), por lo que el rincón está libre. En escritorio conserva los 100 px
   del plugin (`btnBottomDistance`) porque "ir arriba" sí se muestra y se estorbarían.
   También respeta el área segura de los teléfonos con barra de gestos. */
@media (max-width: 782px) {
	.wa__btn_popup_txt { display: none !important; }
	.wa__btn_popup { bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Header pegajoso que se compacta al hacer scroll — revisión UX #11 (23-sep-2026).
   Neve gratuito no incluye esta función (es de Neve Pro), así que se resuelve con CSS + un script
   mínimo (70-header-sticky.php). Solo en escritorio (≥ 960 px): en móvil el header ya es bajo.

   La compactación es CONTINUA, no un salto: el script publica en `--daval-hdr-p` el avance del
   scroll entre 0 y 1 (0 = arriba del todo, 1 = a partir de 160 px, con suavizado smoothstep) y todas
   las medidas se interpolan con ese valor: el header se encoge al ritmo del dedo o de la rueda.
   Medidas: logotipo 100 → 52 px de alto (el ancho lo sigue por proporción), header 136 → 88 px. */
@media (min-width: 960px) {
	/* Neve pone `overflow: hidden` en .wrapper en todas las plantillas salvo la de Elementor, y un
	   ancestro con overflow distinto de visible anula el sticky. Se sustituye por `overflow-x: clip`,
	   que recorta igual en horizontal pero NO crea contenedor de desplazamiento (navegadores sin
	   soporte ignoran la línea y el header simplemente no se queda fijo). Se repite el selector del
	   tema (`body > .wrapper:not(.et-fb-iframe-ancestor)`, más específico que `.wrapper`) para anularlo. */
	body > .wrapper:not(.et-fb-iframe-ancestor) { overflow-x: clip !important; overflow-y: visible !important; }
	header.header {
		position: sticky;
		top: 0;
		z-index: 900;
		background: var(--nv-site-bg, #fff);
		box-shadow: 0 2px 10px rgba(0, 0, 0, calc(0.13 * var(--daval-hdr-p, 0)));
	}
	.admin-bar header.header { top: 32px; }
	.hfg_header .builder-item--logo img {
		max-height: calc(100px - 48px * var(--daval-hdr-p, 0));
		width: auto;
	}
	.hfg_header .builder-item--logo .item--inner {
		padding-top: calc(10px - 6px * var(--daval-hdr-p, 0));
		padding-bottom: calc(10px - 6px * var(--daval-hdr-p, 0));
	}
	/* Los enlaces internos (#metodo, #consorcio, #solicitud…) no deben quedar bajo el header fijo:
	   el header compacto mide 88 px, así que se reserva ese alto + un respiro. */
	html { scroll-padding-top: 104px; }
	/* Con movimiento reducido el header se queda fijo pero sin encogerse. */
	@media (prefers-reduced-motion: reduce) {
		.hfg_header .builder-item--logo img { max-height: 100px; }
		.hfg_header .builder-item--logo .item--inner { padding-top: 10px; padding-bottom: 10px; }
	}
}

/* Aviso de Privacidad Simplificado sobre el botón de envío (Aviso V2, jurídico 27-sep-2026). */
/* Texto más pequeño que el del formulario, a petición de Alan (28-sep-2026): es un texto legal de apoyo,
   no contenido principal. 13 px es el mínimo que se conserva por legibilidad; el contraste (#333 sobre
   #f5f5f5, 11:1) queda muy por encima del 4.5:1 exigido. */
.daval-ap__aviso { background: var(--daval-grey, #f5f5f5); border: 1px solid #e3e3e3; border-radius: 6px; padding: 12px 14px; margin: 4px 0 16px; }
.daval-ap__aviso p { margin: 0; font-size: 13px; line-height: 1.55; color: #333; }
.daval-ap__aviso a { color: var(--daval-gold-text, #7a5f00); text-decoration: underline; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Mapa de cobertura — /nosotros/, shortcode [daval_mapa_cobertura] (28-sep-2026).
   El SVG se genera sin colores propios: todo el estilo vive aquí para que el mapa
   respete la paleta del sitio sobre el fondo oscuro de la sección.
   --------------------------------------------------------------------------- */
.daval-mapa { width: 100%; max-width: 960px; margin: 8px auto 4px; }
.daval-mapa__svg { display: block; width: 100%; height: auto; }
.daval-mapa__estados path { fill: #15181c; stroke: #3d434b; stroke-width: .8; vector-effect: non-scaling-stroke; }
.daval-mapa__cobertura path { fill: var(--nv-primary-accent, #d6a805); stroke: #010101; stroke-width: .9; vector-effect: non-scaling-stroke; }
.daval-mapa__guias line { stroke: #868c94; stroke-width: 1; vector-effect: non-scaling-stroke; }
.daval-mapa__puntos circle { fill: #010101; stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.daval-mapa__rotulo rect { fill: #010101; stroke: #5f666e; stroke-width: 1; vector-effect: non-scaling-stroke; }
.daval-mapa__rotulo text { fill: #fff; font-size: 15.5px; font-weight: 600; font-family: inherit; }

/* En móvil el mapa mide ~290 px de ancho y los rótulos caerían a 5 px: se ocultan y los cinco estados
   se leen en las tarjetas que van debajo. Los puntos se invierten (blanco sólido sobre el dorado) porque
   a ese tamaño los cinco casi se tocan y el anillo negro los convertía en una mancha. */
@media (max-width: 782px) {
	.daval-mapa__guias,
	.daval-mapa__rotulo { display: none; }
	.daval-mapa__puntos circle { r: 6.5; fill: #fff; stroke: #010101; stroke-width: 2; }
}

/* En escritorio las tarjetas de estados duplican los rótulos del mapa: se ocultan (Alan, 28-sep-2026).
   Siguen en el HTML porque en móvil, sin rótulos, son el único texto que nombra los cinco estados. */
@media (min-width: 783px) {
	#cobertura-estados { display: none; }
}

/* Una sola foto en la columna de "Qué incluye" (Alan Dávalos, 13-oct-2026) ----------------------
   Monitoreo tiene una foto y nueve viñetas: la columna de texto mide 1 474 px y la de la foto, 682.
   Con el reparto normal esa tarjeta se estiraría hasta igualar al texto y quedarían ~790 px de
   tarjeta vacía — el triple de lo que ya se rechazó en Guardias y más que los 578 de Custodia.
   Estirar la foto tampoco servía: para llenar 1 422 px a 420 de ancho habría que recortarla a
   proporción 0,30 y de la imagen solo sobreviviría una franja vertical, sin el muro de pantallas,
   que es justo lo que esa página tiene que enseñar.
   Así que la tarjeta de la foto deja de estirarse y se ajusta a su contenido. Las dos quedan
   alineadas arriba, cada una con su alto, y no hay un solo pixel de tarjeta vacía. En cuanto
   Monitoreo tenga una segunda foto, se quita esta clase y vuelve al patrón de Guardias. */
.daval-grid-2--foto-sola .wp-block-column:first-child { align-self: flex-start; }

/* El caso contrario: foto alta y texto corto (Alan Dávalos, 13-oct-2026) ------------------------
   Investigaciones tiene una foto de 9:16 y cinco viñetas cortas. La tarjeta de texto mide 316 px y
   la de la foto 875: estirar el texto dejaría 559 px de tarjeta vacía, más que los 578 que ya se
   rechazaron en Custodia. Y estirar la foto a 419 × 264 pedía recortar a proporción 1,59 desde una
   de 0,56: sobrevivía un tercio del encuadre, sin el escudo, sin los libros y sin la pantalla.
   Así que la que no se estira es la del texto. Es `--foto-sola` reflejado; se mantienen las dos
   clases separadas porque dicen cosas distintas y la página siguiente puede necesitar cualquiera
   de las dos. */
.daval-grid-2--texto-corto .wp-block-column:last-child { align-self: flex-start; }

/* Foto a lo ancho, al cierre de la sección (Alan Dávalos, 13-oct-2026) --------------------------
   Capacitaciones tiene dos columnas de 301 px —Asesoría y Capacitación— y una sola foto, la del
   aula, que ilustra la segunda. Dentro de esa columna dejaba entre 326 y 571 px de tarjeta vacía
   al lado, según cuánto se recortara, y encima se veía a 419 px de ancho. Puesta a lo ancho bajo
   la rejilla se ve a 960, que es más del doble, y el recorte sale igual de caro: la foto es
   vertical y en cualquiera de los dos montajes hay que quedarse con un tercio largo del encuadre.

   16:9 y `object-position: center 25%`, no el centro: lo que cuenta está en la mitad alta —el
   escudo, el pizarrón, el instructor y la lámina proyectada—, y un recorte centrado le cortaba la
   cabeza al instructor y el título de la lámina. Con el 25 % entra todo eso y la primera fila de
   guardias; lo que se va es el fondo del aula, que son espaldas repetidas.

   El alto del recorte va en variable porque **cada foto necesita la suya**: es el porcentaje del
   alto original que queda por encima de lo que se ve. Se mira una vez, al montar la foto, y se
   deja anotado en su modificador. */
.daval-foto-banda { --banda-y: 25%; --banda-y-movil: 20%; margin: 26px 0 0; }
.daval-foto-banda img {
	width: 100%; height: auto; aspect-ratio: 16 / 9;
	object-fit: cover; object-position: center var(--banda-y);
	display: block; border-radius: 10px;
}
/* En teléfono una banda de 16:9 se queda en 190 px de alto y no se distingue nada; se le da más
   aire vertical y se sube un poco más el recorte, porque ahí lo único que se lee es el grupo. */
@media (max-width: 781px) {
	.daval-foto-banda img { aspect-ratio: 4 / 3; object-position: center var(--banda-y-movil); }
}
/* Auditoría: los dos caminan de espaldas por el pasillo y ocupan de la y 400 para abajo. Al 25 %
   la banda les cortaba los cascos; al 35 % entran enteros de la cabeza a la cintura, con la
   tableta, el gesto de señalar y el fondo de montacargas, que es lo que cuenta. Aquí el valor de
   móvil es el mismo: a 4:3 el encuadre aguanta sin subirlo. */
.daval-foto-banda--auditoria { --banda-y: 35%; --banda-y-movil: 35%; }

/* Y la foto se recorta a 3:4. Entera, de 9:16, se pinta a 417 × 742 y deja 408 px de página en
   blanco a la derecha de su mitad inferior: demasiado hueco para una sola columna de texto. A 3:4
   baja a 417 × 556 y el hueco queda en 221. Se pierde un 25 % del encuadre y es justo el que
   sobra —el techo vacío arriba y el escritorio desenfocado abajo—: el escudo, los libros, los dos
   investigadores, la pantalla y los expedientes siguen dentro. Es el mismo recorte por
   `object-fit` que ya usan Custodia y las galerías de evidencia. */
.daval-grid-2--texto-corto .wp-block-column:first-child figure.wp-block-image { margin: 0; }
.daval-grid-2--texto-corto .wp-block-column:first-child figure.wp-block-image img {
	width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
	display: block; border-radius: 10px;
}

/* Foto al pie de cada columna (Alan Dávalos, 13-oct-2026) ---------------------------------------
   En Peritos las fotos van debajo de las viñetas, no encabezando la columna. Como las dos listas
   no miden exactamente lo mismo, cada foto arrancaba a una altura distinta y bajo una de ellas
   quedaban 29 px más de blanco que bajo la otra, con las dos tarjetas lado a lado y con borde: se
   veía como un descuadre, no como una decisión. Empujar la foto al pie las deja a ras.

   Hay que volver la columna flex para que `margin-top: auto` tenga contra qué empujar; WordPress
   la deja en `block`. Va acotado a esta clase para no mover Guardias, Custodia ni Escoltas. */
.daval-grid-2--pie .wp-block-column { display: flex; flex-direction: column; }
.daval-grid-2--pie .wp-block-column > figure:last-child { margin-top: auto; margin-bottom: 0; }

/* Fotos de servicio en la columna de "Qué incluye" (Alan Dávalos, 13-oct-2026) ------------------
   Mismo sitio que en Guardias, CCTV y Cableado. La diferencia es la proporción: las de Guardias son
   verticales y llenan su columna solas, y las de Custodia son apaisadas, así que al apilar dos
   quedaba mucho blanco bajo la segunda dentro de la tarjeta.

   Por eso aquí las fotos **se estiran hasta llenar la columna**: las dos tarjetas de la rejilla ya
   miden lo mismo (son hermanas de un flex con `align-items: stretch`), eso le da a la columna una
   altura definida, y con `flex: 1` cada foto se lleva la mitad. El recorte lo resuelve
   `object-fit: cover`, así que no hay que calcular ninguna proporción a mano ni volver a tocarla
   si mañana cambia el texto de al lado.

   `min-height` es el seguro: si en algún contexto la columna no llegara a tener altura definida,
   `flex: 1` sobre una altura automática colapsaría las figuras a cero. */
/* La regla general `.daval-section > *` recorta a 960 px, y a 960 la columna de fotos se queda en
   417 px de ancho: las apaisadas tendrían que estirarse a 638 px de alto para igualar al texto, o
   sea recortar más de la mitad del encuadre. A 1100 px el recorte baja a un tercio y las dos fotos
   conservan lo que importa. Mismo truco y mismo ancho que las galerías de evidencia, unas líneas
   más abajo; donde no haya `:has()` se queda en 960, que también funciona. */
.daval-section > .wp-block-group__inner-container:has(.daval-grid-2--fotos) { max-width: 1100px; }
.daval-grid-2--fotos { align-items: stretch; }
.daval-grid-2--fotos .wp-block-column:first-child {
	display: flex; flex-direction: column; gap: 12px;
}
.daval-grid-2--fotos .wp-block-column:first-child figure.wp-block-image {
	flex: 1 1 0; min-height: 180px; margin: 0;
	border-radius: 10px; overflow: hidden; background: #e9e9e9;
}
.daval-grid-2--fotos .wp-block-column:first-child figure.wp-block-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Apiladas (WordPress rompe las columnas a 781 px) ya no hay columna hermana que marque la altura,
   así que las figuras vuelven a su proporción propia en vez de estirarse. */
@media (max-width: 781px) {
	.daval-grid-2--fotos .wp-block-column:first-child figure.wp-block-image { flex: none; }
	.daval-grid-2--fotos .wp-block-column:first-child figure.wp-block-image img { aspect-ratio: 3 / 2; }
}

/* Evidencia fotográfica de DAVALTECH (Alan Dávalos, 29-sep-2026).
   Dos cosas que el bloque nativo no resuelve solo en esta versión de WordPress:
   1. El ancho de columna. La galería anidada reparte a 50% por defecto y la clase columns-3 ya no
      trae regla propia, así que el tercio se declara aquí. El selector repite has-nested-images y
      el :not(#individual-image) de WordPress porque su regla vale como un id: con menos no gana.
   2. La proporción. Se mezclan fotos verticales y horizontales; sin recorte la rejilla queda
      dentada. Se fuerza un 4:3 recortado, que además reserva el alto y evita el salto al cargar. */
.daval-evidencia.wp-block-gallery { gap: 12px; }
.wp-block-gallery.has-nested-images.daval-evidencia figure.wp-block-image:not(#individual-image) { width: calc(33.333% - 8px); }
.daval-evidencia figure.wp-block-image { border-radius: 10px; overflow: hidden; background: #e9e9e9; }
.daval-evidencia figure.wp-block-image img {
	width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
/* Galerías de fotos verticales (Guardias Intramuros, 30-sep-2026): el hueco 4:3 recortaba a la
   persona por la cabeza. Con 3:4 las fotos de 825x1100 entran exactas y no se recorta nada. La clase
   la pone el generador cuando TODAS las fotos de esa galería son más altas que anchas. */
.daval-evidencia--retrato figure.wp-block-image img { aspect-ratio: 3 / 4; }

/* La sección recorta a 960 px a todos sus hijos; a la galería le sientan mejor 1100, como a las
   rejillas de tarjetas. Va con :has() sobre el contenedor interno que inserta WordPress — donde no
   haya soporte se queda en 960, que también funciona. El :has() es de descendencia, no de hijo
   directo, porque el JavaScript del carrusel envuelve la galería en un div. */
.daval-section > .wp-block-group__inner-container:has(.wp-block-gallery.daval-evidencia) { max-width: 1100px; }

/* Dos columnas en tableta y una en móvil: a tres columnas en 375 px cada foto mediría 110 px. */
@media (max-width: 980px) {
	.wp-block-gallery.has-nested-images.daval-evidencia figure.wp-block-image:not(#individual-image) { width: calc(50% - 6px); }
}
@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.daval-evidencia figure.wp-block-image:not(#individual-image) { width: 100%; }
}

/* --- Carrusel (Alan Dávalos, 29-sep-2026) ---------------------------------------------------------
   Solo lo llevan las galerías de más de dos fotos (clase daval-evidencia--carrusel, que pone el
   generador): con dos no hay nada que pasar y una fila de tres huecos con dos fotos se ve peor.
   Con 8 o 9 fotos la rejilla ocupaba tres filas y empujaba los botones fuera de la pantalla.

   El carril es la propia galería: se le quita el salto de línea y se le da desplazamiento horizontal
   con puntos de anclaje. Sin JavaScript sigue sirviendo —se arrastra con el dedo o el trackpad y se
   ve la barra de desplazamiento—; el JavaScript (75-evidencia-carrusel.php) solo añade las flechas y
   los puntos, y entonces la barra sobra y se oculta. El tamaño de tarjeta no cambia respecto a la
   rejilla: siguen siendo tres por pantalla, para que el resto de la página no se mueva. */
.daval-evidencia--carrusel.wp-block-gallery {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	padding-bottom: 8px;             /* sitio para la barra nativa mientras no hay JS */
}
.wp-block-gallery.has-nested-images.daval-evidencia--carrusel figure.wp-block-image:not(#individual-image) {
	flex: 0 0 calc(33.333% - 8px);   /* flex-basis, no width: en un carril sin salto de línea manda esta */
	scroll-snap-align: start;
}

.daval-carrusel { position: relative; }
.daval-carrusel--js .daval-evidencia--carrusel.wp-block-gallery { padding-bottom: 0; scrollbar-width: none; }
.daval-carrusel--js .daval-evidencia--carrusel.wp-block-gallery::-webkit-scrollbar { display: none; }
/* Cuando todas las fotos caben a la vez (pantalla ancha, pocas fotos) no hay nada que controlar. */
.daval-carrusel--completo .daval-carrusel__flecha,
.daval-carrusel--completo .daval-carrusel__puntos { display: none; }

/* Las flechas van encima de la primera y la última foto: la sección ya ocupa sus 1100 px y no queda
   margen a los lados para sacarlas fuera. */
.daval-carrusel__flecha {
	position: absolute; top: calc(50% - 7px); transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(17, 17, 17, .78); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background-color .15s ease, opacity .15s ease;
}
.daval-carrusel__flecha:hover { background: #111; }
.daval-carrusel__flecha:focus-visible { outline: 3px solid var(--nv-primary-accent, #c9a227); outline-offset: 2px; }
.daval-carrusel__flecha[disabled] { opacity: 0; pointer-events: none; }  /* en los extremos no estorba */
.daval-carrusel__flecha--prev { left: 10px; }
.daval-carrusel__flecha--sig { right: 10px; transform: translateY(-50%) scaleX(-1); }
.daval-carrusel__flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* Un punto por página, no por foto. El botón mide 24 px aunque el punto se vea de 9: en una pantalla
   táctil hay que poder darle. */
.daval-carrusel__puntos { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.daval-carrusel__punto {
	width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.daval-carrusel__punto::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c4c4c4;
	transition: background-color .15s ease;
}
.daval-carrusel__punto[aria-current="true"]::before { background: #111; }
.daval-carrusel__punto:focus-visible { outline: 2px solid var(--nv-primary-accent, #c9a227); outline-offset: 0; border-radius: 50%; }

@media (max-width: 980px) {
	.wp-block-gallery.has-nested-images.daval-evidencia--carrusel figure.wp-block-image:not(#individual-image) { flex-basis: calc(50% - 6px); }
}
@media (max-width: 600px) {
	/* 85 % y no 100: que asome la siguiente foto es lo que dice "esto se desliza". */
	.wp-block-gallery.has-nested-images.daval-evidencia--carrusel figure.wp-block-image:not(#individual-image) { flex-basis: 85%; }
	.daval-carrusel__flecha { width: 38px; height: 38px; }
	.daval-carrusel__flecha--prev { left: 6px; }
	.daval-carrusel__flecha--sig { right: 6px; }
}

/* ---------------------------------------------------------------------------------------------- */
/* Aviso de cookies (82-aviso-cookies.php) — tarea T3 de la revisión del 9-oct-2026.              */
/* Barra informativa anclada abajo. No es un modal: no hay velo, no cubre el contenido ni impide   */
/* desplazarse. Fondo oscuro de marca para que se lea como aviso del sitio y no como una capa      */
/* ajena, y el oro solo en el enlace y el botón, donde sí contrasta sobre oscuro (9.4:1).          */
/* ---------------------------------------------------------------------------------------------- */
.daval-cookies {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
	background: var(--daval-dark); color: #fff;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .25);
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	font-size: 14px; line-height: 1.55;
}
.daval-cookies[hidden] { display: none; }
.daval-cookies__caja {
	max-width: 1100px; margin: 0 auto;
	display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
}
.daval-cookies__texto { margin: 0; flex: 1 1 420px; }
.daval-cookies__texto a { color: var(--daval-gold); text-decoration: underline; text-underline-offset: 2px; }
.daval-cookies__texto a:hover { color: #fff; }
.daval-cookies__ok {
	flex: 0 0 auto;
	background: var(--daval-gold); color: var(--daval-dark);
	border: 0; border-radius: 6px; cursor: pointer;
	padding: 12px 30px; font-weight: 700; font-size: 15px; font-family: inherit;
	min-height: 44px;                 /* objetivo táctil mínimo */
}
.daval-cookies__ok:hover { background: #e8bd1f; }
.daval-cookies__ok:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Mientras la barra está puesta, el botón de WhatsApp se aparta y el contenido del pie deja de
   quedar debajo. La altura no se adivina: el JavaScript del módulo mide la barra y la publica en
   `--daval-cookies-alto`, porque cambia con el ancho de la pantalla y con el tamaño de letra que
   tenga puesto quien visita. Con un número fijo, a 375 px el botón de WhatsApp caía encima del
   texto (visto el 9-oct-2026). */
.daval-cookies-visible .wa__btn_popup {
	bottom: calc(var(--daval-cookies-alto, 0px) + 16px) !important;
	transition: bottom .2s ease;
}
.daval-cookies-visible body { padding-bottom: var(--daval-cookies-alto, 0px); }

@media (max-width: 782px) {
	.daval-cookies { font-size: 13.5px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
	.daval-cookies__caja { gap: 12px; }
	/* A 375 px el texto ocupa toda la línea y el botón queda abajo, a lo ancho: es más fácil de
	   acertar con el pulgar que un botón angosto a la derecha. */
	.daval-cookies__texto { flex: 1 1 100%; }
	.daval-cookies__ok { flex: 1 1 100%; }
}