/*
Theme Name: Kadence Child (DTAC)
Template: kadence
Description: Tema hijo de Kadence para el sitio DTAC.
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body,
.entry-content,
.wp-block-heading,
h1, h2, h3, h4, h5, h6,
p, a, button, input, textarea, select {
	font-family: 'Inter', sans-serif;
}

/* Todo elemento interactivo transiciona suave y reacciona igual en hover/focus/active. */
a,
button,
.wp-block-button__link,
.header-button,
.dtac-arrow-link,
.dtac-footer-card__email,
.dtac-footer-card__col a,
.dtac-logo-tile {
	transition: all .3s ease-in-out;
}

/* ---------------------------------------------------------------------
 * Responsive: tamaños de H1/H2 en tablet y móvil.
 * !important porque casi todos los H1/H2 del sitio traen su propio
 * font-size inline (tamaño de fuente personalizado de Gutenberg), que si
 * no se sobreescribiría a esta regla de clase.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	h1 {
		font-size: 40px !important;
	}
	h2 {
		font-size: 32px !important;
	}
}

@media (max-width: 600px) {
	h1 {
		font-size: 32px !important;
	}
	h2 {
		font-size: 26px !important;
	}
}

/* ---------------------------------------------------------------------
 * Layout reutilizable: secciones a sangre con contenido centrado.
 * ------------------------------------------------------------------ */

/* !important porque Kadence trae .wp-block-group.has-background{padding:20px 30px}
   con más especificidad que una sola clase nuestra, y se comería este padding. */
.dtac-section {
	padding-top: 110px !important;
	padding-bottom: 110px !important;
}

.dtac-section--flush-bottom {
	padding-bottom: 0 !important;
}

.dtac-section--flush-top {
	padding-top: 0 !important;
}

/* Mismo problema de especificidad que --flush-top-mobile (ver comentario de
   abajo): en móvil, ".dtac-section{padding-top:64px !important}" tiene la
   misma especificidad que ".dtac-section--flush-top" sola y va declarada
   después, así que le devolvía el padding-top a secciones que pedían
   quedarse a 0 (p.ej. "Ficha técnica" en las páginas de producto). Se repite
   aquí el mismo truco: sumar ".dtac-section" sube la especificidad y gana
   siempre. */
@media (max-width: 600px) {
	.dtac-section.dtac-section--flush-top {
		padding-top: 0 !important;
	}
}

/* Como --flush-top pero solo en móvil, para secciones que en escritorio sí
   necesitan su padding-top normal (p.ej. la banda CTA final de Inicio).
   Especificidad ".dtac-section.dtac-section--flush-top-mobile" (2 clases):
   más abajo en este mismo fichero hay un ".dtac-section{padding-top:64px
   !important}" para móvil — misma especificidad que un
   ".dtac-section--flush-top-mobile" normal y declarado DESPUÉS, así que
   ganaba por ir después. Sumar ".dtac-section" sube la especificidad y gana
   siempre, sin depender del orden. */
@media (max-width: 600px) {
	.dtac-section.dtac-section--flush-top-mobile {
		padding-top: 0 !important;
	}
}

/* Primer bloque de una página interior (justo debajo del breadcrumb, p.ej.
   el título grande + subtítulo de La Gama DTAC): con el aire que ya aporta
   el breadcrumb encima, no hace falta el padding-top completo de 110px —
   se deja uno más ajustado. Añadir junto a "dtac-section" (no en su lugar)
   en la primera sección de cualquier página interior con este patrón. */
.dtac-section--page-start {
	padding-top: 56px !important;
}

@media (max-width: 600px) {
	.dtac-section--page-start {
		padding-top: 40px !important;
	}
}

/* Padding-top puntual de 50px para una sección concreta (p.ej. "Información
   técnica" en La Gama DTAC, justo debajo de "¿Por qué elegir DTAC?"): ni el
   110px de .dtac-section ni el 0 de --flush-top encajaban, así que se deja
   esta clase con un valor propio, reutilizable en cualquier otra sección que
   necesite este mismo ajuste. */
.dtac-section--pad-top-50 {
	padding-top: 50px !important;
}

/* Sección "MLR" de Sobre Nosotros: en tablet/móvil, por debajo de 781px
   (el punto en el que las columnas de foto+texto se apilan), sin
   padding-top propio y con un margin-top negativo — scoped a esta
   página y a esta sección en concreto, no toca el resto de usos de
   .dtac-section--pad-top-50 (p.ej. La Gama DTAC). */
@media (max-width: 781px) {
	.page-id-37 .dtac-section--pad-top-50 {
		padding-top: 0 !important;
		margin-top: -20px;
	}
}

/* Kadence añade 5rem (80px) de margen por debajo de TODO el contenido antes
   del footer (.content-area{margin-bottom:5rem}), fuera de nuestras propias
   secciones — en La Gama DTAC eso dejaba una banda blanca entre la última
   sección (de color) y el footer. Se quita aquí SOLO en esa página
   (.page-id-38, no de forma general en todo el sitio): el espacio de
   respiro final lo da ya el propio padding-bottom de su última
   .dtac-section, dentro de su color, no fuera. */
.page-id-38 .content-area {
	margin-bottom: 0 !important;
}

/* max-width 1312, sin padding lateral: mismo tope que usa .site-container
   (el header) y que el contenido real de cada página, para que coincidan
   exactamente sin necesitar padding extra aquí. El breadcrumb reutiliza
   esta misma caja tal cual (ver ".dtac-breadcrumb-wrap .dtac-inner" más
   abajo, solo le añade padding vertical propio). */
.dtac-inner {
	width: 100%;
	max-width: 1312px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* Cover del hero (Inicio): forzado explícito a sangre completa, por si el
   mecanismo nativo de .alignfull de WordPress se ve recortado por vivir
   anidado dentro de .content-container.site-container (una caja ya
   estrecha) — igual que tuvimos que sacar el breadcrumb "a mano" en vez de
   fiarnos de que .alignfull escapase solo en ese contexto. */
.wp-block-cover.alignfull {
	width: auto !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

@media (max-width: 600px) {
	.dtac-section {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
	/* El Cover del hero trae padding lateral inline (64px) que en móvil
	   deja muy poco ancho útil. */
	.wp-block-cover.alignfull {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	/* Banda de "Contacta con nosotros": con el .dtac-inner a 0px de padding
	   en móvil, el texto y los botones quedarían pegados al borde. */
	.dtac-cta-band {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	/* Botones sin flecha (los de flecha ya llevan su propio padding asimétrico
	   por el circulito): menos padding lateral en móvil. */
	.wp-block-button.dtac-btn:not(.has-arrow-icon) .wp-block-button__link {
		padding-left: 13px !important;
		padding-right: 13px !important;
	}
}

/* Etiqueta pequeña en mayúsculas ("LOREM IPSUM DOLOR") y fila título+intro. */
.entry-content p.dtac-eyebrow {
	color: #6f7454;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin: 0;
	line-height:16px;
	margin-bottom:40px !important;
}

.dtac-heading-row {
	margin-top: 24px;
	gap: 20px 64px !important;
	align-items: flex-end !important;
}

/* Sin margin-bottom en Contacto y en su página de "Gracias", solo en móvil:
   ahí el heading-row es lo único que hay antes del siguiente bloque, así que
   el margin-bottom de 1.75em que Gutenberg pone por defecto a todo
   .wp-block-columns dejaba un hueco de más. Scoped a estas dos páginas, no
   toca el resto de usos de .dtac-heading-row (Inicio, Sobre Nosotros, La
   Gama DTAC...). */
@media (max-width: 781px) {
	.page-id-47 .dtac-heading-row,
	.page-id-308 .dtac-heading-row {
		margin-bottom: 0 !important;
	}
}

.dtac-heading-row .wp-block-paragraph {
	margin-bottom: 0 !important;
}

/* Título+intro de Sobre Nosotros: espacio antes de la foto grande de
   debajo. Scoped a esta página, no toca el mismo bloque en La Gama
   DTAC. */
.page-id-37 .dtac-heading-row {
	margin-bottom: 40px !important;
}

.dtac-heading-row .wp-block-column:last-child {
	max-width: 440px;
	margin-left: auto !important;
}

/* Cuando WordPress apila las dos columnas (una encima de otra, por debajo de
   781px — el punto en el que el propio core de Gutenberg deja de ponerlas en
   fila), el margin-left:auto + max-width de arriba dejaban el párrafo más
   estrecho y empujado a la derecha, mientras el título quedaba a la
   izquierda. Se anulan ambos para que las dos queden alineadas a la
   izquierda igual. */
@media (max-width: 781px) {
	.dtac-heading-row .wp-block-column:last-child {
		max-width: none;
		margin-left: 0 !important;
	}

	/* Caso "Proyectos Destacados": ahí la segunda columna no es un párrafo
	   normal sino un botón/enlace con el texto alineado a la derecha
	   (has-text-align-right) — al apilarse, ese texto también debe quedar a
	   la izquierda, igual que el título de encima. */
	.dtac-heading-row .wp-block-column:last-child .has-text-align-right {
		text-align: left !important;
	}
}

/* Solo el título+subtítulo de cabecera de La Gama DTAC, y solo en escritorio:
   más aire antes de "LA SOLUCIÓN PERIMETRAL DEFINITIVA". */
@media (min-width: 1025px) {
	.dtac-range-header-row {
		margin-bottom: 70px !important;
	}
}

/* Título "¿Por qué elegir los vallados inteligentes DTAC?" (La Gama DTAC):
   más estrecho que el ancho completo de .dtac-inner, como en el Figma. */
.dtac-range-why-heading {
	max-width: 677px;
}

/* Título "¿Quieres saber más...?" (La Gama DTAC): antes vivía en la columna
   del 55% de un dtac-heading-row de dos columnas; al apilarlo con el párrafo
   debajo se le da el mismo ancho relativo a mano. */
.dtac-range-info-heading {
	max-width: 55%;
	margin-top:40px !important;
}


.dtac-heading-row h2 {
	color: #1f2428;
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -1.1px;
	line-height: 1.1;
	margin: 0;
}

.dtac-heading-row p {
	color: #6b6b63;
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}

/* Párrafos: separación más ajustada que el valor por defecto del tema. */
/* Kadence también pone margin-top en los párrafos; por colapso de márgenes
   gana el mayor de los dos entre dos <p> seguidos, así que hay que anular
   también el top o el bottom de 20px no se nota. */
.entry-content p {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}

/* ---------------------------------------------------------------------
 * Botones y enlaces con flecha (reutilizado en header, hero, tarjetas y CTA final).
 * ------------------------------------------------------------------ */

/* Todos los botones: mayúsculas, semibold e Inter, tengan o no flecha. */
.wp-block-button__link {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

/* Botones "outline"/planos de contenido: mismo padding vertical que los que llevan flecha, para que midan lo mismo de alto.
   OJO: el selector cuelga de .wp-block-button (el div envoltorio), no de .wp-block-button__link (el <a>): el
   atributo "className" de Gutenberg solo pinta esas clases extra en el div, nunca en el <a> — ponerlas también a
   mano en el <a> hace que el bloque salga como "contenido inválido" al comparar con lo que genera el editor. */
.wp-block-button.dtac-btn .wp-block-button__link {
	padding: 14.62px 22px !important;
}

/* Mismo efecto de "oscurecerse un poco" que el botón del header al pasar el
   ratón, pero con filter en vez de un hex fijo: cada botón tiene un color de
   fondo distinto, y así se adapta solo sin tener que declarar uno por uno. */
.wp-block-button.dtac-btn .wp-block-button__link:hover,
.wp-block-button.dtac-btn .wp-block-button__link:focus,
.wp-block-button.dtac-btn .wp-block-button__link:active,
.wp-block-button.has-arrow-icon .wp-block-button__link:hover,
.wp-block-button.has-arrow-icon .wp-block-button__link:focus,
.wp-block-button.has-arrow-icon .wp-block-button__link:active {
	filter: brightness(0.92);
}

/* Colores de hover explícitos para los dos botones verdes de flecha: el
   filter de arriba apenas se nota sobre el fondo claro de "Solicita fichas
   de producto", así que aquí se ve un cambio de fondo claro. */
.wp-block-button.dtac-btn--dark .wp-block-button__link:hover,
.wp-block-button.dtac-btn--dark .wp-block-button__link:focus,
.wp-block-button.dtac-btn--dark .wp-block-button__link:active {
	background-color: #5c6046 !important;
}

.wp-block-button.dtac-btn--light .wp-block-button__link:hover,
.wp-block-button.dtac-btn--light .wp-block-button__link:focus,
.wp-block-button.dtac-btn--light .wp-block-button__link:active {
	background-color: #e6e4dc !important;
}

/* Botones/enlaces con flecha en circulito. El header usa ::before (Kadence
   escapa el HTML del label y no deja meter un <span> real ahí); el resto de
   botones/enlaces de contenido usan un <span class="dtac-arrow-chip"> real
   en el HTML, tal y como pidió Vero, para que el texto de la flecha coja
   bien los estilos. */
#main-header .header-button-wrap .header-button,
.dtac-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	text-decoration: none;
}

.wp-block-button.has-arrow-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 20px 6px 6px !important;
	line-height:1.2 !important;
}
/* Flecha como pseudo-elemento (icono de fondo), no como HTML real dentro del
   texto editable del botón/enlace. Antes vivía como
   <span class="dtac-arrow-chip"><svg>...</span> pegada al texto del label, y
   el editor de bloques la borraba en cuanto alguien tocaba ese texto (el
   RichText de Gutenberg no reconoce ese HTML como un formato válido y lo
   descarta al reescribir el bloque). Colgando la flecha de la propia clase
   del bloque/enlace (que no se toca al editar texto) sobrevive a cualquier
   edición — mismo truco que ya usa el botón del header con ::before.
   Corregido 2026-09-25 a petición del cliente. */
.wp-block-button.has-arrow-icon .wp-block-button__link::before,
.dtac-arrow-link::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	padding: 12px 9px;
	border-radius: 3px;
	background: #878c69 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
	background-clip: padding-box;
	flex-shrink: 0;
	box-sizing: content-box;
	transition: all .3s ease-in-out;
}

/* Variante clara (circulito blanco, icono oliva): mismos colores que ya
   tenía el chip real. */
.dtac-arrow-link.is-chip-light::before {
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7454' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.dtac-arrow-link.is-chip-light:hover::before,
.dtac-arrow-link.is-chip-light:focus::before,
.dtac-arrow-link.is-chip-light:active::before {
	background-color: #6f7454;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Tarjeta entera en hover/focus/active: el circulito de fondo desaparece y
   solo queda la flecha, en blanco, igual que hacía antes con el chip real. */
.dtac-card-linked:hover .dtac-arrow-link::before,
.dtac-card-linked:focus-within .dtac-arrow-link::before,
.dtac-card-linked:active .dtac-arrow-link::before {
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

/* El "→" es un SVG de trazo grueso (icono), no el carácter Unicode "→": ese
   se renderiza como una flecha de teclado, fina y desproporcionada. */
.dtac-arrow-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 9px;
	border-radius: 3px;
	background: #878c69;
	color: #fff;
	flex-shrink: 0;
	transition: all .3s ease-in-out;
}

.dtac-arrow-chip svg {
	width: 14px;
	height: 14px;
	display: block;
}

#main-header .header-button-wrap .header-button::before {
	content: "";
	display: inline-flex;
	width: 14px;
	height: 14px;
	padding: 12px 9px;
	border-radius: 3px;
	background: #878c69 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
	background-clip: padding-box;
	flex-shrink: 0;
	box-sizing: content-box;
	transition: all .3s ease-in-out;
}

/* background-color (no "background" a secas): así no se pierde el icono de
   fondo del botón del header al pasar el ratón, que es el efecto raro que
   se veía (la flecha desaparecía y solo quedaba el cuadrado de color). */
#main-header .header-button-wrap .header-button:hover::before,
#main-header .header-button-wrap .header-button:focus::before,
#main-header .header-button-wrap .header-button:active::before {
	background-color: #6f7454;
}
a:hover .dtac-arrow-chip,
a:focus .dtac-arrow-chip,
a:active .dtac-arrow-chip {
	background-color: #878c69 !important;
}

/* Selector de idioma "EN / ES" del header (nodo 312:3 del Figma): mismo
   elemento "HTML" de Kadence que ya usaba el botón, colocado justo antes,
   como en el diseño. Solo texto, sin bandera ni desplegable. */
#main-header .header-html {
	display: flex;
	align-items: center;
}

#main-header .header-html-inner {
	display: flex;
}

.dtac-lang-switcher {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.55;
	letter-spacing: 1.1px;
	color: #6B6B63;
	white-space: nowrap;
	margin-right:20px;
}

.dtac-lang-switcher a,
.dtac-lang-switcher .dtac-lang-current {
	color: inherit;
	text-decoration: underline;
}

.dtac-lang-switcher a:hover,
.dtac-lang-switcher a:focus,
.dtac-lang-switcher a:active {
	color: #2e2e26;
}

.dtac-lang-switcher .dtac-lang-current {
	color: #6B6B63;
	font-weight: 700;
}
.dtac-lang-switcher a:not(.dtac-lang-current) {
	text-decoration: none !important;
}

/* Misma pieza en móvil, pegada al icono de menú (fila derecha del header
   móvil: selector de idioma + hamburguesa). */
.mobile-html {
	display: flex;
	align-items: center;
	margin-right: 14px;
}

.mobile-html-inner {
	display: flex;
}

/* Variante: enlace con flecha sobre tarjeta clara (circulito blanco). */
.dtac-arrow-link.is-chip-light {
	color: #6f7454;
	font-size: 13px;
	font-weight: 600;
}

.dtac-arrow-link.is-chip-light .dtac-arrow-chip {
	background-color: #ffffff;
	color: #6f7454;
	transition: all .2s ease-in-out;
}

.dtac-arrow-link.is-chip-light:hover .dtac-arrow-chip,
.dtac-arrow-link.is-chip-light:focus .dtac-arrow-chip,
.dtac-arrow-link.is-chip-light:active .dtac-arrow-chip {
	background-color: #6f7454;
	color: #fff;
}

/* Variante: circulito de navegación suelto (p.ej. flecha de "siguiente" bajo
   Proyectos Destacados), sin fondo, solo borde. */
.dtac-arrow-chip--outline {
	width: 55px;
	height: 25px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid #e4e2dc;
	background: transparent;
	color: #6f7454;
}

.dtac-arrow-chip--outline svg {
	width: 25px;
	height: 25px;
}

.dtac-arrow-chip--outline:hover,
.dtac-arrow-chip--outline:focus {
	background-color: #6f7454;
	border-color: #6f7454;
	color: #fff;
}

/* Reset de <button> nativo para que el circulito de navegación (elemento
   real, no decorativo) no herede el estilo por defecto del navegador. */
button.dtac-arrow-chip--outline {
	font-family: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Carrusel de "Proyectos Destacados": una tarjeta visible a la vez, botón
 * de flecha real que avanza a la siguiente (JS embebido en el propio
 * bloque HTML de Inicio).
 * ------------------------------------------------------------------ */

.dtac-project-slide {
	display: none;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	text-decoration: none;
	color: inherit;
}

.dtac-project-slide.is-active {
	display: block;
}

.dtac-project-slide.is-visible {
	opacity: 1;
}

.dtac-project-slide__media {
	width: 100%;
	height: 290px;
	object-fit: cover;
	display: block;
}

.dtac-project-slide__text {
	max-width: 360px;
	padding: 24px 26px 28px;
}

.dtac-project-slide__tag {
	display: inline-block;
	color: #6f7454;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.9px;
	border: 1px solid #e4e2dc;
	border-radius: 3px;
	padding: 5px 10px;
}

.dtac-project-slide__title {
	color: #1f2428;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.13px;
	margin: 12px 0 0;
}

.dtac-project-slide__desc {
	color: #6b6b63;
	font-size: 13px;
	line-height: 1.65;
	margin: 0;
}

.dtac-projects-nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

.dtac-arrow-chip--prev svg {
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
 * Tarjetas con altura igualada (producto, proyectos, patentes...).
 * ------------------------------------------------------------------ */
.single-content .dtac-cards-equal figure.wp-block-image, .single-content  .dtac-box.dtac-box--bordered figure.wp-block-image {
	margin-bottom: 0 !important;
}
.dtac-cards-equal > .wp-block-column {
	display: flex;
}

.dtac-cards-equal > .wp-block-column > .wp-block-group {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Responsive: cualquier fila de varias tarjetas (3, 4, 7 repartidas en
   filas...) pasa a 2 columnas en tablet (782–1200px), en vez de apretar
   todas en una sola fila. Progresión 4→2→1: empieza en 782px (no 601px) a
   propósito, justo donde termina la regla nativa de WordPress que apila las
   columnas a 1 sola por debajo de 781px.
   display:grid (no flex-wrap/flex-basis): WordPress trae varias reglas
   propias sobre flex-wrap/flex-basis/flex-grow para .wp-block-columns y
   .wp-block-column a distintos anchos (algunas con !important, alguna
   incluso repetida con valores opuestos según el breakpoint), y pelear
   contra todas ellas a base de especificidad no daba resultado fiable.
   Pasando el contenedor a grid, esas propiedades de flex dejan de tener
   ningún efecto (son exclusivas de flexbox), así que no hay nada que
   vencer. */
@media (min-width: 782px) and (max-width: 1200px) {
	.dtac-cards-equal.dtac-cards-equal {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	.dtac-cards-equal.dtac-cards-equal > .wp-block-column {
		width: 100% !important;
	}
}

.dtac-card-media {
	display: block;
	margin: 0;
}

.dtac-card-media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.dtac-card-media.dtac-card-media--tall img {
	height: 290px;
}

.dtac-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.dtac-card-body .dtac-arrow-link {
	margin-top: auto;
}

/* Kadence pone 20px 30px de padding por defecto a TODO wp-block-group con
   fondo (.entry-content .wp-block-group.has-background{padding:20px 30px}).
   Lo anulamos aquí para partir de cero y que sean nuestras clases .dtac-box*
   las que decidan el padding de cada tarjeta (o ninguno, en las que llevan
   una imagen a sangre completa). */
.dtac-inner .wp-block-group.has-background {
	padding: 0 !important;
}
.blog .wp-block-group.has-background {
	padding-left:24px !important;
	padding-right:24px !important;
}
/* Fuera de .dtac-inner (p.ej. páginas legales, que no usan nuestro sistema
   de secciones), en vez del 20px 30px por defecto de Kadence para cualquier
   wp:group con fondo, se deja este valor. */
.entry-content .wp-block-group.has-background:not(.dtac-box) {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* Cajas genéricas reutilizadas por las tarjetas de estadísticas, sectores y descargas.
   overflow:hidden para que una imagen a sangre completa (tarjetas de producto,
   proyectos...) respete las esquinas redondeadas en vez de taparlas con sus
   propias esquinas cuadradas. */
.dtac-box {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.dtac-box--bordered {
	border: 1px solid #e4e2dc;
}

/* Tarjeta entera clicable: el enlace visible (p.ej. "VER FICHA TÉCNICA")
   lleva un ::after que se estira a toda la tarjeta, así que hacer clic en
   cualquier punto (imagen, texto...) navega igual. Al pasar el ratón por
   cualquier parte de la tarjeta (incluida esa capa) se activa :hover en el
   contenedor de forma normal, sin necesitar :has(). El fondo solo cambia en
   hover/focus, nunca en reposo. */
.dtac-card-linked {
	transition: background-color .3s ease-in-out;
}

/* Misma tarjeta y mismo hover/focus/active en cualquier página (Inicio y La
   Gama DTAC comparten estas clases tal cual — la única diferencia entre
   páginas es el color de fondo EN REPOSO de la tarjeta, que se declara aparte
   por bloque, no aquí). */
.dtac-card-linked:hover,
.dtac-card-linked:focus-within,
.dtac-card-linked:active {
	background-color: #6f7454 !important;
}

.dtac-card-linked:hover .dtac-card-body,
.dtac-card-linked:focus-within .dtac-card-body,
.dtac-card-linked:active .dtac-card-body,
.dtac-card-linked:hover .dtac-card-body *,
.dtac-card-linked:focus-within .dtac-card-body *,
.dtac-card-linked:active .dtac-card-body * {
	color: #ffffff !important;
}

/* El circulito de fondo del chip desaparece en hover/focus/active: se queda
   solo la flecha, en blanco para seguir viéndose sobre el nuevo fondo oliva. */
.dtac-card-linked:hover .dtac-arrow-chip,
.dtac-card-linked:focus-within .dtac-arrow-chip,
.dtac-card-linked:active .dtac-arrow-chip {
	background-color: transparent !important;
	color: #ffffff !important;
}

/* OJO: sin position:relative aquí. El ::after debe posicionarse respecto al
   .dtac-box (que ya es relative), no respecto al propio enlace — si no, el
   área clicable se queda del tamaño del texto "VER FICHA TÉCNICA" en vez de
   cubrir toda la tarjeta. */
.dtac-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Misma especificidad que el reset de arriba (.dtac-inner .wp-block-group.*),
   para que estas SÍ ganen sobre el padding:0 general. */
.dtac-inner .wp-block-group.dtac-box--pad-lg {
	padding: 30px 30px 32px !important;
}

.dtac-inner .wp-block-group.dtac-box--pad-md {
	padding: 28px 28px 30px !important;
}

.dtac-inner .wp-block-group.dtac-box--pad-sm {
	padding: 22px !important;
}

/* Grid de 7 razones "Por qué elegir DTAC" (La Gama DTAC): antes eran 3 filas
   fijas de wp:columns (3+3+1, la última con una columna vacía de relleno
   para que la tarjeta 7 no ocupara el ancho completo) — en responsive esa
   columna vacía dejaba un hueco. Con un grid de verdad, las 7 tarjetas viven
   en un único contenedor y el propio grid las reparte solo, sin huecos, en
   cualquier número de columnas.
   display:contents en el envoltorio de Gutenberg: .dtac-why-grid es un
   wp:group, y Gutenberg mete sus hijos en un .wp-block-group__inner-container
   de por medio — poner el grid directamente en ESE div (con distintos
   intentos de selector) no se aplicaba de forma fiable. En vez de seguir
   peleando por averiguar qué otra regla lo estaba venciendo, se hace que ese
   div intermedio deje de existir a efectos de layout (display:contents): sus
   7 hijos (las tarjetas) pasan a comportarse como hijos directos de
   .dtac-why-grid, que es el único que de verdad necesita ser grid. */
.dtac-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding-bottom: 110px;
}

.dtac-why-grid > .wp-block-group__inner-container {
	display: contents;
}

/* El párrafo de cada tarjeta trae 20px de margin-bottom de la regla global
   .entry-content p{margin-bottom:20px} — al quedar atrapado por el
   overflow:hidden de .dtac-box, ese margen se comía espacio dentro de la
   propia tarjeta en vez de desaparecer. */
.entry-content .dtac-why-grid p {
	margin-bottom: 0 !important;
}

/* La tarjeta en sí (.dtac-box, que es un wp:group) también traía margin-bottom
   de Kadence: ".single-content .wp-block-group{margin-bottom:var(--global-md-
   spacing)}" — esa clase .single-content SÍ está presente en esta página
   (class="entry-content single-content"), así que afectaba a cada tarjeta del
   grid, no solo al párrafo de dentro. */
.dtac-why-grid .dtac-box {
	margin-bottom: 0 !important;
}

@media (min-width: 782px) and (max-width: 1200px) {
	.dtac-why-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.dtac-why-grid {
		grid-template-columns: 1fr;
	}
}

/* Banda CTA final (fondo verde sólido, La Gama DTAC): igual que las
   .dtac-box--pad-*, necesita su propia regla porque también es un
   .wp-block-group.has-background dentro de .dtac-inner y si no, el reset
   general de arriba se lo comería. */
.dtac-inner .wp-block-group.dtac-cta-band {
	padding: 84px 64px !important;
}

@media (max-width: 600px) {
	.dtac-inner .wp-block-group.dtac-cta-band {
		padding: 48px 24px !important;
	}
}

/* Fichas descargables (La Gama DTAC): el enlace .dtac-download-card va
   dentro de un párrafo normal (bloque, no HTML a mano) para que sea editable.
   Como .dtac-cards-equal > .wp-block-column tiene display:flex, ese párrafo
   pasa a ser un elemento flex y por defecto se encoge a su contenido en vez
   de ocupar toda la columna — hay que decirle explícitamente que ocupe el
   100%, igual que hace .dtac-download-card por su cuenta cuando no hay ningún
   contenedor flex de por medio (como en Inicio, que usa HTML a mano). */
.dtac-download-card-wrap {
	width: 100%;
}

/* Tarjetas compactas (fichas descargables): sin margen inferior en figuras
   ni párrafos, para que la fila icono + texto + descarga quede centrada. */
.dtac-box--pad-sm figure.wp-block-image,
.dtac-box--pad-sm p {
	margin-bottom: 0 !important;
}

/* Ni la propia tarjeta (algunas traían margin-top/bottom:0 inline de WP,
   otras nada) debe llevar margen vertical: lo pone la columna/fila que la contiene. */
.dtac-box--pad-sm {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
 * Logos de clientes.
 * ------------------------------------------------------------------ */

/* Gutenberg envuelve los hijos de un wp:group en un
   .wp-block-group__inner-container aparte: el display:flex tiene que ir ahí,
   no en el wp-block-group exterior (que solo tiene ese wrapper como único hijo). */
.dtac-logo-row,
.dtac-logo-row .wp-block-group__inner-container {
	display: flex;
	gap: 16px;
	width: 100%;
	justify-content: center;
}

.dtac-logo-tile {
	flex: 1 0 0;
	min-width: 0;
	height: auto;
	border-radius: 6px;
	background: #1f2428;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom:0 !important;
	transition: background-color .3s ease-in-out;
}

/* Solo la primera fila de logos lleva ese margen inferior. */
.dtac-logo-row:first-of-type {
	margin-bottom: 10px !important;
}

.dtac-logo-tile img {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: 100% !important;
	opacity: .85;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	transform: scale(1.3);
}
@media(min-width:1025px) {
    .dtac-logo-tile .mas-tam2 img {
        transform: scale(1.45);
    }
    .dtac-logo-tile .mas-taminus img {
        transform: scale(1.2);
    }
    .dtac-logo-tile .mas-tam img {
        transform: scale(1.65);
    }
    .dtac-logo-tile img {
        transform: scale(1.35);
    }
    .dtac-logo-tile a:hover img,
    .dtac-logo-tile a:focus-visible img,
    .dtac-logo-tile a:active img {
    	opacity: 1;
    	transform: scale(1.3);
    }
    .dtac-logo-tile .mas-tam2 a:hover img,
    .dtac-logo-tile .mas-tam2 a:focus-visible img,
    .dtac-logo-tile .mas-tam2 a:active img {
        transform: scale(1.4);
    }
    .dtac-logo-tile .mas-tam a:hover img,
    .dtac-logo-tile .mas-tam a:focus-visible img,
    .dtac-logo-tile .mas-tam a:active img {
        transform: scale(1.6);
    }
}
.dtac-logo-tile .mas-taminus img {
    transform: scale(1.2);
}

/* Feedback visible al pasar el ratón, activar o navegar con teclado. */
.dtac-logo-tile:has(a:hover),
.dtac-logo-tile:has(a:focus-visible),
.dtac-logo-tile:has(a:active) {
	background-color: #6f7454;
}

.dtac-logo-tile a:hover img,
.dtac-logo-tile a:focus-visible img,
.dtac-logo-tile a:active img {
	opacity: 1;
	transform: scale(1.3);
}

.dtac-logo-tile a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-radius: 4px;
}

/* En tablet, con 6-7 logos por fila sin espacio para encogerse tanto, se
   pasa a 3 columnas que van saltando de línea (en vez de apretarlos todos en
   una sola fila cada vez más estrecha). */
@media (min-width: 601px) and (max-width: 1024px) {
	.dtac-logo-row,
	.dtac-logo-row .wp-block-group__inner-container {
		flex-wrap: wrap !important;
		gap: 12px !important;
	}

	.dtac-logo-tile {
		flex: 0 0 calc(33.333% - 8px) !important;
		height: auto;
	}
}

/* En móvil, con todos los logos en una sola fila encogida no se ven:
   se pasa a 2 columnas que van saltando de línea. */
@media (max-width: 600px) {
	.dtac-logo-row,
	.dtac-logo-row .wp-block-group__inner-container {
		flex-wrap: wrap !important;
		gap: 12px !important;
	}

	.dtac-logo-tile {
		flex: 0 0 calc(50% - 6px) !important;
		height: auto;
	}
}

/* ---------------------------------------------------------------------
 * Iconos con fondo (Brochure downloads).
 * ------------------------------------------------------------------ */

.dtac-icon-box {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: #f6f5f1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dtac-icon-box img {
	width: 24px;
	height: 24px;
}

/* Tarjeta de ficha descargable: un único <a> real envolviendo todo (icono,
   texto y flecha de descarga), en HTML a mano -- así no hay ningún bloque
   ni elemento extra ni "fantasma" en el editor, solo la tarjeta con enlace. */
.dtac-download-card {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	padding: 22px;
	border: 1px solid #e4e2dc;
	border-radius: 10px;
	background: #ffffff;
	text-decoration: none;
}

.dtac-download-card:hover,
.dtac-download-card:focus,
.dtac-download-card:active {
	box-shadow: 0px 8px 20px rgba(31, 36, 40, 0.1);
	border-color: #6f7454;
}

.dtac-download-card__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dtac-download-card__title {
	color: #1f2428;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 5px;
}

.dtac-download-card__meta {
	color: #6f7454;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.9px;
}

.dtac-download-card__icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.dtac-icon-box--lg {
	width: 48px;
	height: 48px;
}

.dtac-icon-box--lg img {
	width: 22px !important;
	height: 22px !important;
}

/* ---------------------------------------------------------------------
 * Tabla comparativa (La Gama DTAC): cabecera con icono+nombre por columna
 * y fila de datos con introducción en negrita + lista de viñetas, divisores
 * verticales entre columnas. Construida con Columns/Group/List nativos (no
 * core/table, que no admite iconos ni listas dentro de una celda) y esta
 * clase encima para el aspecto de "tabla" (fondo, redondeo, divisores).
 * ------------------------------------------------------------------ */
.dtac-compare-table {
	background: #ffffff;
	border-radius: 10px;
	padding: 8px 28px;
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Esto es una tabla, no una fila que deba apilarse en móvil: WordPress
   apila cualquier wp:columns por debajo de 781px (flex-wrap:wrap +
   flex-basis:100% en cada columna, ambos con !important), así que aquí se
   pasan a display:grid con anchos de columna fijos en px — el grid ignora
   por completo las propiedades de flex-wrap/flex-basis que trae WordPress
   (no hay nada que vencer por especificidad), así la fila nunca se apila:
   si no cabe, aparece scroll horizontal en .dtac-compare-table de arriba. */
.dtac-compare-head.dtac-compare-head,
.dtac-compare-row.dtac-compare-row {
	display: grid !important;
	grid-template-columns: 130px repeat(4, 220px);
	min-width: 100%;
	width: max-content;
}

.dtac-compare-head.dtac-compare-head > .wp-block-column,
.dtac-compare-row.dtac-compare-row > .wp-block-column {
	width: auto !important;
}

/* El icono de cada columna de cabecera traía el margin-bottom por defecto de
   figure.wp-block-image (más de 20px), dejando demasiado hueco antes del
   nombre del producto. */
.dtac-compare-head figure.wp-block-image {
	margin-bottom: 20px !important;
}

.dtac-compare-table .wp-block-columns {
	margin-bottom: 0 !important;
}

.dtac-compare-head {
	border-bottom: 0.5px solid #EAE8E2;
	padding: 22px 0 !important;
	align-items: flex-end !important;
}

.dtac-compare-row {
	padding: 18px 0 !important;
}

.dtac-compare-head > .wp-block-column,
.dtac-compare-row > .wp-block-column {
	border-left: 1px solid #EAE8E2;
	padding-left: 20px !important;
	box-sizing: border-box;
}

.dtac-compare-head > .wp-block-column:first-child,
.dtac-compare-row > .wp-block-column:first-child {
	border-left: none;
	padding-left: 0 !important;
}

.entry-content p.dtac-compare-head-name {
	color: #1f2428;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.102px;
	margin-top: 12px !important;
	margin-bottom: 0 !important;
}

.dtac-compare-label {
	color: #1f2428;
	font-size: 16px;
	font-weight: 600;
	margin: 0 !important;
}

.dtac-compare-row p {
	color: #1f2428;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 10px !important;
}

.dtac-compare-row ul {
	margin: 0 !important;
	padding-left: 19.5px;
}

.dtac-compare-row li {
	color: #6b6b63;
	font-size: 13px;
	line-height: 2;
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
 * Breadcrumb propio (ver functions.php, hook kadence_before_main_content):
 * con el título de página oculto (_kad_post_title=hide) el hero nativo de
 * Kadence (.entry-hero.page-hero-section) deja de pintarse por completo, así
 * que lo único visible es este div. Se inyecta DENTRO de
 * `.content-container.site-container` (ancho de caja de Kadence, 1312px),
 * no a sangre como nuestras secciones — por eso no basta con ponerle
 * `.dtac-inner` (quedaría más estrecho y descentrado respecto al resto). Se
 * saca a todo el ancho del viewport con la MISMA fórmula que usa el propio
 * WordPress para `.alignfull` (margin: calc(50% - 50vw), sin position/left/
 * right) — no un truco distinto a mano, para que el redondeo/centrado sea
 * exactamente igual que el de cualquier sección `alignfull` del sitio y no
 * se desalinee nunca por unos pocos píxeles. Dentro se repite el mismo
 * `.dtac-inner` que usa cualquier otra sección, para que quede alineado con
 * el contenido y la cabecera.
 * SIEMPRE la misma regla, en todas las páginas (ver functions.php): el
 * breadcrumb usa idéntica estructura en cualquier página, así que no hace
 * falta distinguir "fullwidth" de "normal" aquí — solo el color de fondo o
 * un margen suelto (ver ".dtac-legal-page .dtac-breadcrumb-wrap" más abajo)
 * pueden variar por tipo de página, nunca la caja en sí. */
.dtac-breadcrumb-wrap {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #f6f5f1;
	box-sizing: border-box;
}

/* El breadcrumb es HTML puesto a mano (no bloques de Gutenberg), así que no
   se beneficia del auto-centrado por bloque que sí tiene el contenido real
   — SÍ necesita su propio padding lateral, iguales cortes que el header
   (30px hasta 1372px, 24px en móvil). */
.dtac-breadcrumb-wrap .dtac-inner {
	max-width: 1372px;
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: 30px;
	padding-right: 30px;
}

@media (max-width: 600px) {
	.dtac-breadcrumb-wrap .dtac-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */

/* Menú activo/actual en semibold, como en el Figma. */
#main-header .main-navigation .current-menu-item > a,
#main-header .main-navigation .current-menu-ancestor > a,
#main-header .main-navigation .current-menu-parent > a {
	font-weight: 600;
}

/* Header alineado con el breadcrumb a CUALQUIER ancho, no solo en un rango
   concreto: el header (.site-container, tope de 1312px SIN padding fijo,
   típicamente 24px de Kadence) y el breadcrumb (.dtac-breadcrumb-wrap
   .dtac-inner, tope de 1372px CON 30px de padding fijo — el resto de
   .dtac-inner ya no lleva padding) usan fórmulas de ancho distintas. Solo
   coinciden por casualidad a partir de 1372px de viewport
   (1372 - 30*2 = 1312, el mismo tope que el header). Por debajo de eso, hay
   que igualar el padding del header al del breadcrumb en cada tramo para
   que ambos queden SIEMPRE a la misma distancia del borde.
   En móvil (≤600px) NO se pone a 0: el texto real de la página en móvil sí
   tiene aire lateral, heredado del .entry-content-wrap de Kadence (~24px) —
   el header y el breadcrumb deben igualar ese valor real. */
.site-main-header-wrap .site-header-row-container-inner > .site-container {
	padding-left: 30px !important;
	padding-right: 30px !important;
}

@media (min-width: 1372px) {
	.site-main-header-wrap .site-header-row-container-inner > .site-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 600px) {
	.site-main-header-wrap .site-header-row-container-inner > .site-container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */

.dtac-footer-card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px 24px;
	background: #ffffff;
	border: 1px solid #e4e2dc;
	border-radius: 12px;
	padding: 48px;
}

.dtac-footer-card__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 260px;
}

.dtac-footer-card__logo {
	width: 100px;
	height: auto;
}

.dtac-footer-card__address {
	margin: 0;
	color: #6b6b63;
	font-size: 13px;
	line-height: 1.75;
}

.dtac-footer-card__email {
	display: inline-flex;
	align-self: flex-start;
	border: 1px solid #e4e2dc;
	border-radius: 4px;
	padding: 9px 14px;
	color: #6f7454;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

.dtac-footer-card__email:hover,
.dtac-footer-card__email:focus,
.dtac-footer-card__email:active {
	background: #6f7454;
	color: #fff !important;
	border-color: #6f7454;
}

.dtac-footer-card__title {
	margin: 0 0 14px;
	color: #6f7454;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.dtac-footer-card__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dtac-footer-card__col a {
	color: #6b6b63;
	font-size: 13px;
	text-decoration: none;
}

.dtac-footer-card__col a:hover,
.dtac-footer-card__col a:focus,
.dtac-footer-card__col a:active {
	color: #2e2e26 !important;
}

/* Regla decorativa entre la tarjeta y la barra inferior, como en el Figma. */
.site-bottom-footer-wrap {
	background-image: url('/wp-content/uploads/2026/09/tick-ruler.svg');
	background-repeat: repeat-x;
	background-position: top center;
	background-size: auto 14px;
	padding-top: 26px !important;
}

/* ---------------------------------------------------------------------
 * Submenús del header: tarjeta blanca con borde/radio como el resto del
 * sitio, en vez del color de paleta genérico de Kadence.
 * ------------------------------------------------------------------ */

.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
	background: #6f7454 !important;
	border: 1px solid #6f7454 !important;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0px 12px 24px rgba(31, 36, 40, 0.16);
}

.header-navigation .header-menu-container ul ul li.menu-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header-navigation .header-menu-container ul ul li.menu-item:last-child {
	border-bottom: none;
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
	color: #ffffff;
	transition: all .3s ease-in-out;
}

.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:focus,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: #ffffff !important;
	background: #878c69 !important;
}

/* ---------------------------------------------------------------------
 * Menú móvil (drawer): mismos colores que el submenú de escritorio de
 * arriba (fondo verde #6f7454, separadores blancos translúcidos, hover
 * #878c69), en vez del panel negro por defecto de Kadence
 * (.drawer-inner{background:rgba(9,12,16,.97)}).
 * ------------------------------------------------------------------ */
.drawer-inner {
	background-color: #6f7454 !important;
}

/* ".popup-drawer .drawer-content"/".drawer-header" son clases genéricas que
   Kadence reutiliza también en el buscador (#search-drawer) y el carrito
   (#cart-drawer) — se scopean a #mobile-drawer (el ID real del menú móvil)
   para no tocar esos otros popups. */
#mobile-drawer .drawer-content {
	padding: 0 !important;
}

/* Cabecera del drawer (donde vive la "X" de cerrar): menos padding lateral
   que el 1.5em por defecto de Kadence. */
#mobile-drawer .drawer-header {
	padding: 0 .4em !important;
}

.mobile-menu-container .menu-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Los ítems CON submenú no llevan el <a> como hijo directo del <li>: Kadence
   lo mete dentro de <div class="drawer-nav-drop-wrap"><a>...</a><button
   class="drawer-sub-toggle">...</button></div> — hay que igualar ese <a>
   (".drawer-nav-drop-wrap > a") a los que sí son hijos directos, si no se
   quedan con el padding/color por defecto de Kadence (menos aire a la
   izquierda, azul de enlace sin sobreescribir). */
.mobile-menu-container .menu-item > a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 24px;
	color: #ffffff !important;
}

/* El enlace ("La Gama DTAC") ocupa todo el ancho disponible, y el botón de
   la flecha ("drawer-sub-toggle") solo lo justo para el icono — sin esto,
   al ponerles el mismo padding/width:100% que a un <a> suelto, la flecha se
   comía tanto sitio como el propio enlace dentro del flex. */
.mobile-menu-container .drawer-nav-drop-wrap {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.mobile-menu-container .drawer-nav-drop-wrap > a {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 14px 24px;
	color: #ffffff !important;
}

.drawer-nav-drop-wrap .drawer-sub-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 14px 18px;
	color: #ffffff !important;
}

.mobile-menu-container .menu-item > a:hover,
.mobile-menu-container .menu-item > a:focus,
.mobile-menu-container .menu-item > a:active,
.mobile-menu-container .drawer-nav-drop-wrap > a:hover,
.mobile-menu-container .drawer-nav-drop-wrap > a:focus,
.mobile-menu-container .drawer-nav-drop-wrap > a:active,
.mobile-menu-container .menu-item.current-menu-item > a {
	color: #ffffff !important;
	background: #4c5039 !important;
}

/* Página actual (o menú padre de la página actual): igual que en escritorio
   (negrita), pero en blanco — sin esto se queda con el azul de enlace nativo
   del navegador, que ninguna regla de arriba llega a pisar en este caso
   concreto. */
.mobile-menu-container .menu-item.current-menu-item > a,
.mobile-menu-container .menu-item.current-menu-item .drawer-nav-drop-wrap > a,
.mobile-menu-container .menu-item.current-menu-ancestor > a,
.mobile-menu-container .menu-item.current-menu-ancestor > .drawer-nav-drop-wrap > a {
	color: #ffffff !important;
	font-weight: 600;
}

.drawer-nav-drop-wrap .drawer-sub-toggle {
	border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Submenú desplegado dentro del propio drawer: un tono más un poco más
   oscuro que el fondo para diferenciarlo de sus padres, igual criterio que
   el hover de arriba. */
.mobile-menu-container ul.sub-menu,
.mobile-menu-container ul.submenu {
	background-color: rgba(0, 0, 0, 0.1);
	padding-left: 0;
}

/* ---------------------------------------------------------------------
 * Breadcrumb (todas las páginas menos Inicio).
 * ------------------------------------------------------------------ */

/* Solo en páginas legales (Aviso Legal, Política de Cookies, Política de
   privacidad): más aire antes del título de la página. */
.dtac-legal-page .dtac-breadcrumb-wrap {
	margin-bottom: 50px;
	background-color: #ffffff;
}

.kadence-breadcrumbs {
	display: block;
}

.kadence-breadcrumb-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
}

.kadence-breadcrumb-container a {
	color: #6b6b63;
	text-decoration: none;
}

.kadence-breadcrumb-container a:hover,
.kadence-breadcrumb-container a:focus {
	color: #6f7454;
}

.kadence-breadcrumb-container .bc-delimiter {
	color: #6b6b63;
}

.kadence-breadcrumb-container .kadence-bread-current {
	color: #1f2428;
	font-weight: 500;
}

/* ---------------------------------------------------------------------
 * Páginas legales: tipografía como en Inicio (Inter, misma paleta),
 * en tamaños razonables para un documento largo en vez de los tamaños de
 * titular de la portada.
 * ------------------------------------------------------------------ */

/* Fondo de página y sin la "tarjeta" blanca que Kadence pone por defecto
   alrededor del contenido (ya quitada además con el meta _kad_post_content_style). */
body.dtac-legal-page {
	background-color: #f6f5f1;
}

/* .content-container.site-container (la caja que envuelve el contenido real
   de la página, puesta por el propio theme en single.php) — no
   ".site-header-row-container-inner > .site-container" del header, que debe
   mantener su padding para seguir alineado con .dtac-inner. */
.dtac-legal-page .content-container.site-container {
	padding-left: 30px !important;
	padding-right: 30px !important;
	padding-bottom: 80px;
}

@media (min-width: 1362px) {
	.dtac-legal-page .content-container.site-container {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
}

/* Solo en páginas legales: más aire entre el contenido y el footer. */
.dtac-legal-page .site-middle-footer-inner-wrap {
	padding-top: 80px !important;
}

/* Listado "Casos de Éxito" (page-casos-de-exito.php, página 42): mismo aire
   antes del footer que en la ficha de cada caso (ahí lo da el padding-bottom
   de .caso-cta; aquí no hay banda CTA propia, así que se pone directamente
   en el footer). */
.page-id-42 .site-middle-footer-inner-wrap {
	padding-top: 80px !important;
}

.dtac-legal-page .entry-content-wrap,
.dtac-legal-page .entry.single-entry {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.dtac-legal-page .entry-content.single-content {
	margin-top: 25px;
}

.dtac-legal-page .entry-content h1 {
	color: #1f2428;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.8px;
	line-height: 1.15;
}

.dtac-legal-page .entry-content h2 {
	color: #1f2428;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.4px;
	margin-top: 40px;
}

.dtac-legal-page .entry-content h3 {
	color: #1f2428;
	font-size: 19px;
	font-weight: 600;
	margin-top: 28px;
}

.dtac-legal-page .entry-content p,
.dtac-legal-page .entry-content li {
	color: #6b6b63;
	font-size: 15px;
	line-height: 1.7;
}

.dtac-legal-page .entry-content a {
	color: #6f7454;
}

.dtac-legal-page .entry-content ul,
.dtac-legal-page .entry-content ol {
	padding-left: 22px;
}

.dtac-legal-page .entry-content li + li {
	margin-top: 8px;
}

/* ---------------------------------------------------------------------
 * Ajustes finales sueltos.
 * ------------------------------------------------------------------ */

/* Kadence centra por defecto una sola columna de footer
   (.site-footer-row-columns-1 .site-footer-section{text-align:center}). */
.site-middle-footer-wrap .site-footer-section {
	text-align: left;
}

/* Botones "outline" (borde sin relleno, p.ej. "Llámanos"): un fondo sutil en
   hover/focus/active para que se note el estado, ya que brightness() no
   hace nada sobre un fondo transparente. */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:active {
	background-color: rgba(255, 255, 255, 0.15);
}
.dtac-cards-equal.n-margin, .wp-block-group.alignfull.dtac-section.has-background, 
.dtac-cards-equal.n-margin .wp-block-columns.are-vertically-aligned-center,
.wp-block-group.dtac-logo-row.no-mb {
	margin-bottom: 0 !important;
}
.dtac-cards-equal.n-margin {
	gap: 12px 30px !important;
}
.site-footer-row-container-inner .site-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.site-main-header-inner-wrap {
	min-height: auto !important;
}
#main-header .header-button.button-size-custom {
    padding: 6px 20px 6px 6px !important;
}
/* Subtítulo del hero: clase propia en el bloque en vez del selector
   wp-container-core-group-is-layout-XXXX (ese lo genera WordPress solo y
   puede cambiar si se vuelve a guardar el bloque). */
.dtac-hero-subtitle {
	max-width: 650px !important;
	margin-left: auto;
	margin-right: auto;
}
.site-footer-row.site-footer-row-columns-1 .site-footer-section {
	text-align: left !important;
}
.dtac-footer-card__col ul  {
	padding-left: 0 !important;
	gap: 8px !important;
}
.site-bottom-footer-inner-wrap {
	padding-top: 0 !important;
}

/* Barra inferior del footer (copyright + Aviso legal/Privacidad/Cookies):
   en cuanto las dos columnas dejan de caber en la misma línea y saltan
   una debajo de otra, la segunda (alineada a la derecha en escritorio)
   debe pasar a alinearse a la izquierda igual que la primera, y conviene
   darle algo de aire a los lados. */
@media (max-width: 1314px) {
	.site-bottom-footer-inner-wrap {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.site-bottom-footer-inner-wrap .site-footer-section {
		text-align: left !important;
	}
	.site-middle-footer-inner-wrap {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}
.site-middle-footer-inner-wrap {
	padding-bottom:45px !important;
}
.entry-content .dtac-project-slide__text p.dtac-project-slide__title {
	margin-top: 12px !important;
	margin-bottom: 12px !important;
}
.dtac-arrow-link.is-chip-light.dtac-range-card-link .dtac-arrow-chip {
	background: transparent !important;
}

/* ---------------------------------------------------------------------
 * Ficha de producto (DTAC eco y el resto de páginas de producto
 * individuales: pro, clear, basic reutilizarán estas mismas clases).
 * ------------------------------------------------------------------ */

/* Cabecera de producto: título + CTA a la izquierda, foto grande a la
   derecha. Gap propio (64px en el Figma) en vez del gap por defecto de
   wp:columns, en CSS normal (no en el JSON del bloque) — mismo patrón que
   ".dtac-heading-row{gap:...}" ya usado en La Gama DTAC. */
.dtac-product-hero {
	gap: 30px 64px !important;
	margin-bottom: 0 !important;
}

/* object-fit vive aquí, en CSS normal, no como estilo propio del bloque
   Image (ver dtac-bloques-gutenberg-validos: el Image block no admite
   object-fit como atributo, invalidaría el bloque) — la imagen ya viene
   recortada de Figma a una proporción muy cercana, aspect-ratio solo
   afina el encaje en cualquier ancho de forma responsive. */
.dtac-product-hero-media img {
	display: block;
	width: 100%;
	aspect-ratio: 820 / 480;
	object-fit: cover;
	border-radius: 10px;
}

/* Fila de estadísticas: gap propio de 20px, scoped por componente (no
   toca los .dtac-cards-equal de La Gama DTAC, que ya tienen su propio
   gap) — reutilizable en las 4 páginas de ficha de producto. */
.dtac-product-stats.dtac-cards-equal,
.dtac-product-gallery-row {
	gap: 20px !important;
}

/* Título "Nuestro vallado inteligente..." (fichas de producto): menos
   separación respecto al eyebrow de encima que el margen por defecto del
   H2. Clase propia en el bloque (no h2 general) para no tocar el resto
   del sitio. */
.dtac-product-features-heading {
	margin-top: 12px !important;
}

/* Tarjetas de características: mismo patrón que .dtac-why-grid (La Gama
   DTAC) — un único grid con las 5 tarjetas como hijos directos, en vez de
   dos filas de wp:columns por separado, para que en responsive no quede
   ninguna fila a medias ni huecos vacíos. Las 5 tarjetas miden lo mismo
   (ya no hay fila de 2 "más anchas" como en el Figma original).
   display:contents en el inner-container que Gutenberg mete dentro de
   TODO wp:group, para que las tarjetas se comporten como hijos directos
   del grid. */
.dtac-product-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media(min-width:601px) {
	.dtac-product-features-grid {
		padding-bottom: 110px;
	}
}

.dtac-product-features-grid > .wp-block-group__inner-container {
	display: contents;
}

.dtac-product-features-grid .dtac-box {
	margin-bottom: 0 !important;
}

@media (min-width: 782px) and (max-width: 1200px) {
	.dtac-product-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.dtac-product-features-grid {
		grid-template-columns: 1fr;
	}
}

/* Galería de producto: fila 1 = foto ancha + foto cuadrada, fila 2 = 3
   fotos iguales. Placeholder gris editable desde el editor (clic en la
   imagen → Reemplazar) hasta que haya fotos reales de instalación. */
.dtac-product-gallery-media img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.dtac-product-gallery-media--wide,
.dtac-product-gallery-media--wide img {
	height: 100%;
}

.dtac-product-gallery-media--wide img {
	aspect-ratio: 848 / 440;
}

.dtac-product-gallery-media--square img {
	aspect-ratio: 1 / 1;
}

.dtac-product-gallery-media--card img {
	aspect-ratio: 424 / 260;
}
.dtac-product-gallery-media--card.img-menor-alt img {
	height:250px;
}

@media (min-width: 782px) and (max-width: 1200px) {
	.dtac-product-gallery-row.dtac-product-gallery-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}
	.dtac-product-gallery-row.dtac-product-gallery-row > .wp-block-column {
		width: 100% !important;
	}
}

/* Números/estadísticas del producto. */
.entry-content p.dtac-stat-number {
	color: #1f2428;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.54px;
	margin-bottom: 10px !important;
}
@media(max-width:680px) {
	.entry-content p.dtac-stat-number {
		font-size:26px;
	}
}

.entry-content p.dtac-stat-label {
	color: #6b6b63;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 0 !important;
}

/* Fila de estadísticas: Kadence añade margin-bottom tanto a la propia fila
   (".single-content .wp-block-columns{margin-bottom:...}") como a cada
   tarjeta (".single-content .wp-block-group{margin-bottom:...}") — se
   anulan los dos, scoped solo a este bloque concreto. */
.dtac-product-stats {
	margin-bottom: 0 !important;
}

.dtac-product-stats .dtac-box {
	margin-bottom: 0 !important;
}

/* Tarjeta de descarga de ficha técnica, variante de color sobre fondo
   oliva (sección "Ficha técnica" de cada página de producto). Misma
   estructura que .dtac-download-card (La Gama DTAC), solo cambia el
   color — regla de hover/focus/active propia porque el selector base y
   este modificador tienen la misma especificidad (0,2,0): al declararse
   después en el fichero, este modificador gana (mismo patrón que
   dtac-btn--dark/light). */
.dtac-product-brochure {
	margin-bottom: 0 !important;
}

/* Título + tarjeta en fila, centrados como bloque compacto (no a todo el
   ancho): mismo patrón que .dtac-logo-row, display:flex en CSS normal
   sobre el inner-container que mete Gutenberg en todo wp:group, en vez
   de la propiedad "layout" nativa del bloque. */
.dtac-product-brochure,
.dtac-product-brochure .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 48px;
}

.dtac-product-brochure h2 {
	margin: 0;
	max-width: 469px;
}

.dtac-download-card--accent {
	width: 297px;
	max-width: 100%;
	background: #878c69;
	border-color: #ffffff;
}

.dtac-download-card--accent .dtac-download-card__title,
.dtac-download-card--accent .dtac-download-card__meta {
	color: #ffffff;
}

.dtac-download-card--accent:hover,
.dtac-download-card--accent:focus,
.dtac-download-card--accent:active {
	border-color: #f6f5f1;
	box-shadow: 0px 8px 20px rgba(31, 36, 40, 0.18);
}

/* Nodo 479:677 del Figma: recuadro 44×56 (más alto que ancho, no cuadrado
   como el .dtac-icon-box base de La Gama DTAC) con el icono a 28×28. */
.dtac-icon-box--accent {
	height: 56px;
	background: #e4e2dc;
}

.dtac-icon-box--accent img {
	width: 28px;
	height: 28px;
}

/* Igual que La Gama DTAC (.page-id-38 .content-area): sin el margen
   inferior de 5rem que Kadence pone por defecto antes del footer, para
   que el fondo de la última sección llegue justo hasta el footer —
   las 4 páginas de ficha de producto lo necesitan igual. */
.page-id-39 .content-area,
.page-id-168 .content-area,
.page-id-40 .content-area,
.page-id-41 .content-area {
	margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
 * Sobre Nosotros.
 * ------------------------------------------------------------------ */

/* Foto grande bajo el título+intro ("01 Statement"): proporción del
   Figma (1312×420 dentro de un frame de 1440 con el mismo padding
   lateral que usa el resto del sitio), object-fit en CSS normal (no en
   el atributo del bloque Image, ver dtac-bloques-gutenberg-validos). */
.dtac-about-hero-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1312 / 420;
	object-fit: cover;
	border-radius: 10px;
}

/* Filas de foto + texto (MLR, Misión, Visión): gap propio de 72px del
   Figma, en CSS normal en vez del blockGap nativo del bloque (mismo
   motivo que .dtac-product-hero — evita tener que adivinar cómo
   serializa Gutenberg el atributo). */
.dtac-about-media-row {
	gap: 30px 72px !important;
	margin-bottom: 0 !important;
}

/* Foto de "MLR": se estira a la misma altura que el bloque de texto de
   al lado (columna con display:flex + align-items:stretch por
   defecto) — mismo patrón que se pidió para la primera foto de la
   galería de las fichas de producto. En móvil, cuando las columnas se
   apilan, height:100% de un contenedor sin alto fijo se queda en 0, así
   que se cambia a una proporción fija. */
.dtac-about-mlr-media,
.dtac-about-mlr-media img {
	height: 100%;
}

.dtac-about-mlr-media img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 781px) {
	.dtac-about-mlr-media,
	.dtac-about-mlr-media img {
		height: auto;
	}
	.dtac-about-mlr-media img {
		aspect-ratio: 520 / 440;
	}
}

/* Párrafo de "Misión"/"Visión": más estrecho que la columna de texto
   (560px en el Figma), como en el diseño. */
.entry-content .dtac-about-purpose-text {
	max-width: 560px;
	margin-bottom: 0 !important;
}

/* Fotos de "Misión"/"Visión": proporción fija 520×440 del Figma. */
.dtac-about-square-media img {
	display: block;
	width: 100%;
	aspect-ratio: 520 / 440;
	object-fit: cover;
	border-radius: 10px;
}

/* Lista de 3 puntos de "MLR": filas apiladas con separador inferior,
   sin tarjeta ni fondo (a diferencia de .dtac-box). Borde en CSS normal
   (no en el atributo "border" del bloque) para no depender de
   has-border-color en un wp:group sin fondo. */
.dtac-about-list-item {
	border-bottom: 1px solid #e4e2dc;
	padding: 18px 0 22px 0;
	margin-bottom:5px !important;
}

.entry-content p.dtac-about-list-item__title {
	color: #1f2428;
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 8px !important;
}

.entry-content p.dtac-about-list-item__desc {
	color: #6b6b63;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 0 !important;
}

/* Título "Valores": menos separación respecto al eyebrow de encima que
   el margen por defecto del H2 — mismo ajuste que
   .dtac-product-features-heading en las fichas de producto. */
.dtac-about-values-heading {
	margin-top: 12px !important;
}

/* Grid de 4 tarjetas de "Valores": mismo patrón que
   .dtac-product-features-grid — un único grid con las tarjetas como
   hijos directos (display:contents en el inner-container que Gutenberg
   mete en todo wp:group), para que en responsive no queden huecos. 4 se
   divide de forma exacta en 2 columnas, así que en tablet nunca deja
   ninguna tarjeta suelta a medias. */
.dtac-about-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.dtac-about-values-grid > .wp-block-group__inner-container {
	display: contents;
}

.dtac-about-values-grid .dtac-box {
	margin-bottom: 0 !important;
}

.dtac-about-values-grid p {
	margin-bottom: 0 !important;
}

@media (min-width: 782px) and (max-width: 1200px) {
	.dtac-about-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.dtac-about-values-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Contacto (formulario Fluent Forms).
 * ------------------------------------------------------------------ */

/* Ambas secciones comparten el mismo fondo (#f6f5f1): al usar padding en
   vez de flush + margin, el margin-bottom que Kadence añade por defecto
   a todo wp:group dentro de .single-content no tiene forma de escapar
   (el padding lo contiene, evita el "margin collapsing" que dejaba una
   franja blanca). Separación final pedida entre título y la fila de
   foto+formulario: 20px arriba y 20px abajo, no el 110px por defecto de
   .dtac-section. */
.page-id-47 .dtac-contact-header,
.page-id-308 .dtac-contact-header {
	margin-bottom: 0 !important;
	padding-bottom: 20px !important;
}

.page-id-47 .dtac-contact-form-section,
.page-id-308 .dtac-contact-form-section {
	padding-top: 20px !important;
}

/* Fila foto + formulario: gap propio, en CSS normal en vez del blockGap
   nativo del bloque (mismo motivo que .dtac-product-hero/.dtac-about-
   media-row). */
.dtac-contact-row {
	gap: 64px !important;
}

/* Foto: se estira a la misma altura que el formulario de al lado
   (columna con align-items:stretch por defecto de wp:columns) — mismo
   patrón que la foto de "MLR" en Sobre Nosotros. En móvil, cuando las
   columnas se apilan, height:100% de un contenedor sin alto fijo se
   queda en 0, así que se cambia a una proporción fija. */
.dtac-contact-media,
.dtac-contact-media img {
	height: 100%;
}

.dtac-contact-media img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 781px) {
	.dtac-contact-media,
	.dtac-contact-media img {
		height: auto;
	}
	.dtac-contact-media img {
		aspect-ratio: 4 / 3;
	}

	/* En móvil, formulario primero y foto después (al revés que el orden
	   real en el HTML, foto primero): .dtac-contact-row sigue siendo flex
	   al apilarse (flex-wrap:wrap + flex-basis:100% por columna, no
	   flex-direction:column), así que "order" reordena las columnas sin
	   tocar el HTML ni afectar al orden en escritorio. Solo en Contacto
	   (page-id-47): la página de "Gracias" reutiliza la misma fila
	   foto+columna pero ahí sí debe quedarse en su orden normal. */
	.page-id-47 .dtac-contact-row .wp-block-column:first-child {
		order: 2;
	}
	.page-id-47 .dtac-contact-row .wp-block-column:last-child {
		order: 1;
	}
}

/* Mismo motivo que .dtac-contact-header más arriba: Kadence añade
   margin-bottom por defecto a todo wp:group dentro de .single-content, y
   aquí el formulario es lo último antes de que acabe la sección — se anula
   para que no quede un hueco de más debajo del botón "Enviar". */
.dtac-contact-form-wrap {
	margin-bottom: 0 !important;
}

.dtac-contact-form-wrap .ff-el-input--label label {
	color: #1f2428;
	font-size: 15px;
	font-weight: 500;
}

.dtac-contact-form-wrap .ff-el-form-control,
.dtac-contact-form-wrap textarea.ff-el-form-control {
	border: 1px solid #e4e2dc;
	border-radius: 4px;
	padding: 12px 14px;
	font-size: 16px;
	color: #1f2428;
	font-family: 'Inter', sans-serif;
}

.dtac-contact-form-wrap textarea.ff-el-form-control {
	min-height: 200px;
}

.dtac-contact-form-wrap .ff-el-form-control:hover,
.dtac-contact-form-wrap .ff-el-form-control:focus,
.dtac-contact-form-wrap .ff-el-form-control:active {
	border-color: #6f7454;
	outline: none;
	box-shadow: 0 0 0 1px #6f7454;
}

.dtac-contact-form-wrap .ff_tc_label {
	font-size: 15px;
	color: #6b6b63;
	line-height: 1.6;
}

.dtac-contact-form-wrap .ff_tc_label a {
	color: #6f7454;
}

.dtac-contact-form-wrap button.ff-btn {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.9px;
	border-radius: 4px !important;
	padding: 14px 26px !important;
	transition: all .3s ease-in-out;
}

.dtac-contact-form-wrap button.ff-btn:hover,
.dtac-contact-form-wrap button.ff-btn:focus,
.dtac-contact-form-wrap button.ff-btn:active {
	filter: brightness(0.92);
}

/* ---------------------------------------------------------------------
 * Blog: listado (archive/home.php de Kadence) y entrada individual
 * (single.php). No son plantillas propias, así que se reviste el HTML
 * que genera Kadence por defecto con la misma paleta/tipografía del
 * resto del sitio en vez de sustituir la plantilla entera.
 * ------------------------------------------------------------------ */

/* Cabecera del listado ("Blog" y categoría/etiqueta): se sustituye por
   la cabecera propia inyectada en functions.php (dtac-heading-row, igual
   que Contacto/Sobre Nosotros), así que el título por defecto de Kadence
   se oculta del todo. */
.dtac-blog .entry-hero.post-archive-hero-section {
	display: none !important;
}

/* En categoría/etiqueta (a diferencia del listado del blog, que sí es
   una página real con sus propios metadatos de Kadence) no hay un post
   al que colgarle _kad_post_title/_kad_post_layout — Kadence usa ahí sus
   valores globales de archivo (title-style-above, content-style-boxed),
   por eso necesita su propio reset aquí en vez de heredarlo. */
.dtac-blog.content-style-boxed #primary .entry:not(.loop-entry) {
	box-shadow: none !important;
	background: transparent !important;
}

/* Padding superior de la cabecera del blog/categoría: mucho más
   ajustado que el de una página normal (.dtac-section--page-start,
   56px) — aquí ya viene justo debajo del breadcrumb sin más contenido
   alrededor, así que necesita bastante menos aire. */
.dtac-blog .dtac-section--page-start {
	padding-top: 16px !important;
}
@media(max-width:1024px) {
	.dtac-section--page-start {
		padding-top: 26px !important;
	}
}
@media (max-width: 600px) {
	.dtac-blog .dtac-section--page-start {
		padding-top: 12px !important;
	}
	/* Sin padding-bottom en móvil: pegado a las tarjetas del listado. */
	.dtac-archive-header {
		padding-bottom: 0 !important;
	}
	/* Forzado explícito a 100%: la fila de título+intro (dtac-heading-row)
	   se quedaba más estrecha que el viewport en móvil, con hueco vacío a
	   la derecha (el fondo #f6f5f1 de la sección sí llegaba a los dos
	   bordes gracias al escape de arriba, pero esta fila interior no). Se
	   fuerza aquí en vez de depender de que el motor de grid/flex de
	   Kadence lo calcule solo. */
	.dtac-archive-header .dtac-inner,
	.dtac-archive-header .dtac-heading-row {
		width: 100% !important;
		max-width: 100% !important;
	}
	.dtac-archive-header .dtac-heading-row > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Cabecera del listado ("Blog" y categoría/etiqueta): al vivir DENTRO de
   .content-container (igual que el Cover del hero, ver más arriba en este
   fichero), el .alignfull nativo de WordPress no llega a sangre completa —
   Kadence neutraliza su margin ahí (".content-container .alignfull{margin:
   0;width:unset}", misma especificidad que el .alignfull de core pero
   cargada después). Se fuerza el mismo escape a mano que ya usa
   .wp-block-cover.alignfull, para que el fondo #f6f5f1 llegue de verdad a
   los dos bordes del viewport en cualquier ancho, no solo hasta el borde de
   .content-container. */
.dtac-archive-header.alignfull {
	width: auto !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.dtac-blog .entry-hero .hero-container.site-container {
	max-width: 1312px;
	padding-left: 30px;
	padding-right: 30px;
}

@media (min-width: 1372px) {
	.dtac-blog .entry-hero .hero-container.site-container {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 600px) {
	.dtac-blog .entry-hero .hero-container.site-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.dtac-blog .archive-title.page-title {
	color: #1f2428;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 48px;
	letter-spacing: -1.008px;
}

.dtac-blog .content-container.site-container,
.dtac-blog-single .content-container.site-container {
	max-width: 1312px !important;
	padding-left: 30px !important;
	padding-right: 30px !important;
}

@media (min-width: 1372px) {
	.dtac-blog .content-container.site-container,
	.dtac-blog-single .content-container.site-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 600px) {
	.dtac-blog .content-container.site-container,
	.dtac-blog-single .content-container.site-container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* Fondo de página igual que el resto del sitio, tanto en el listado
   como en la entrada individual. Kadence pinta el fondo real detrás de
   todo en ".site" (blanco, var(--global-palette9)), no en <body> — por
   eso la franja rara: cualquier margen/hueco en el flujo dejaba ver ese
   blanco de ".site" por debajo, no el de <body>. Hay que cambiar el de
   ".site", no (solo) el del body. */
body.dtac-blog,
body.dtac-blog-single,
body.dtac-blog .site,
body.dtac-blog-single .site {
	background-color: #f6f5f1;
}

.dtac-blog .content-area,
.dtac-blog-single .content-area {
	background-color: #f6f5f1;
}

/* En categoría/etiqueta (sin metadatos de Kadence propios, a diferencia
   de la página Blog) sigue aplicándose el margen vertical por defecto
   de Kadence (.content-area{margin-top:5rem}) — se anula aquí para que
   quede el mismo espacio arriba que en el listado del blog. */
.dtac-blog .content-area {
	margin-top: 0 !important;
}

/* Tarjetas del listado: mismo patrón que .dtac-box (fondo blanco,
   borde, radio 10px, sin la sombra por defecto de Kadence). */
.dtac-blog #archive-container.kadence-posts-list {
	gap: 24px;
	margin-top: 40px;
	padding-bottom:50px;
}

/* Distinta a propósito de .dtac-footer-card (blanca, borde, radio 12,
   una sola tarjeta ancha): aquí son varias tarjetas pequeñas en rejilla,
   con la etiqueta de categoría como pastilla rellena, para que no se
   confundan con la tarjeta del footer aunque ambas sean blancas con
   borde. !important porque en categoría/etiqueta Kadence trae sus
   propios estilos de tarjeta de archivo con más peso. */
.dtac-blog .entry.loop-entry {
	position: relative;
	background-color: #ffffff !important;
	border: 1px solid #e4e2dc !important;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: none;
	transition: all .3s ease-in-out;
}

.dtac-blog .entry.loop-entry:hover,
.dtac-blog .entry.loop-entry:focus-within,
.dtac-blog .entry.loop-entry:active {
	border-color: #6f7454 !important;
	box-shadow: 0px 8px 20px rgba(31, 36, 40, 0.08);
}

.dtac-blog .entry.loop-entry .entry-content-wrap {
	padding: 28px;
}

.dtac-blog .entry.loop-entry .post-thumbnail {
	margin-bottom: 0 !important;
}

.dtac-blog .entry-taxonomies {
	margin-bottom: 10px;
}

.dtac-blog .category-links a {
	display: inline-block !important;
	background-color: #f6f5f1 !important;
	color: #6f7454 !important;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 5px 10px !important;
	border-radius: 999px !important;
}

.dtac-blog-single .category-links a {
	color: #6f7454;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
}

.dtac-blog .entry-title,
.dtac-blog .entry-title a {
	color: #1f2428;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 19px;
	letter-spacing: -0.133px;
	text-decoration: none;
}

.dtac-blog .entry-title a:hover,
.dtac-blog .entry-title a:focus,
.dtac-blog .entry-title a:active {
	color: #6f7454;
}

/* Sin autor en ningún sitio del blog (listado, entrada individual). */
.dtac-blog .posted-by,
.dtac-blog-single .posted-by {
	display: none;
}

.dtac-blog .entry-meta,
.dtac-blog .entry-meta * {
	color: #6b6b63;
	font-size: 12px;
}

.dtac-blog .entry-summary p {
	color: #6b6b63;
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.dtac-blog .post-more-link {
	color: #6f7454;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all .3s ease-in-out;
}

.dtac-blog .post-more-link svg {
	width: 15px;
	height: 15px;
}

.dtac-blog .post-more-link:hover,
.dtac-blog .post-more-link:focus,
.dtac-blog .post-more-link:active {
	color: #5c6046;
}

/* Paginación del listado (cuando haya más de una página de entradas). */
.dtac-blog .pagination,
.dtac-blog .page-numbers {
	font-family: 'Inter', sans-serif;
}

.dtac-blog .page-numbers a,
.dtac-blog .page-numbers span {
	color: #1f2428;
	border: 1px solid #e4e2dc;
	border-radius: 4px;
}

.dtac-blog .page-numbers.current {
	background-color: #6f7454 !important;
	border-color: #6f7454 !important;
	color: #ffffff !important;
}

.dtac-blog .page-numbers a:hover,
.dtac-blog .page-numbers a:focus,
.dtac-blog .page-numbers a:active {
	background-color: #f6f5f1;
	border-color: #6f7454;
}

/* Entrada individual: tarjeta plana (sin sombra/borde de Kadence) con la
   tipografía del resto del sitio. */
.dtac-blog-single .entry.single-entry {
	box-shadow: none;
	background: transparent;
}

.dtac-blog-single .entry-content-wrap {
	padding: 0;
}

.dtac-blog-single .entry-header.post-title {
	margin-top: 24px;
	margin-bottom: 32px;
}

/* Imagen destacada: por defecto Kadence la pone "detrás" del título
   (posicionada de forma absoluta, formato alto 2:3) — se pasa a un
   bloque normal en el flujo, más baja, recortada con cover y con
   espacio antes del texto de la entrada. */
.dtac-blog-single .post-thumbnail {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	padding: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 0 50px !important;
}

.dtac-blog-single .post-thumbnail-inner {
	position: static !important;
	height: auto !important;
	padding: 0 !important;
	padding-bottom: 0 !important;
}

.dtac-blog-single .post-thumbnail img {
	position: static !important;
	display: block;
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 10px;
}

.dtac-blog-single .entry-title {
	color: #1f2428;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 44px;
	letter-spacing: -1px;
	line-height: 1.15;
	margin-top: 16px;
}

.dtac-blog-single .entry-meta,
.dtac-blog-single .entry-meta * {
	color: #6b6b63;
	font-size: 13px;
}

.dtac-blog-single .entry-content.single-content {
	background: transparent !important;
	padding-bottom:50px;
}

.dtac-blog-single .entry-content.single-content p,
.dtac-blog-single .entry-content.single-content li {
	color: #6b6b63;
	font-size: 16px;
	line-height: 1.75;
}

.dtac-blog-single .entry-content.single-content h2 {
	color: #1f2428;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 30px;
	margin-top: 44px;
}

.dtac-blog-single .entry-content.single-content h3 {
	color: #1f2428;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 22px;
	margin-top: 32px;
}

.dtac-blog-single .entry-content.single-content a {
	color: #6f7454;
}

.dtac-blog-single .entry-content.single-content a:hover,
.dtac-blog-single .entry-content.single-content a:focus,
.dtac-blog-single .entry-content.single-content a:active {
	color: #5c6046;
}

.dtac-blog-single .comments-title,
.dtac-blog-single .comment-reply-title {
	color: #1f2428;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
}

.dtac-blog-single .comment-content,
.dtac-blog-single .comment-content p {
	color: #6b6b63;
	font-size: 14px;
}

.dtac-blog-single .comment-form input:not([type="submit"]),
.dtac-blog-single .comment-form textarea {
	border: 1px solid #e4e2dc;
	border-radius: 4px;
	font-family: 'Inter', sans-serif;
}

.dtac-blog-single .comment-form input:not([type="submit"]):hover,
.dtac-blog-single .comment-form input:not([type="submit"]):focus,
.dtac-blog-single .comment-form input:not([type="submit"]):active,
.dtac-blog-single .comment-form textarea:hover,
.dtac-blog-single .comment-form textarea:focus,
.dtac-blog-single .comment-form textarea:active {
	border-color: #6f7454;
	outline: none;
}

/* ---------------------------------------------------------------------
 * Caso de Éxito (CPT "caso_exito", single-caso_exito.php).
 * Plantilla escrita a mano fuera de .entry-content/.content-container (ver
 * comentario al principio de single-caso_exito.php), así que este bloque es
 * autosuficiente: no reutiliza .dtac-inner/.dtac-section/.dtac-box tal cual
 * (esas llevan resets pensados para bloques de Gutenberg) sino sus propios
 * equivalentes con el mismo criterio visual del resto del sitio.
 * ------------------------------------------------------------------ */

.caso-inner {
	width: 100%;
	max-width: 1312px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}
@media(min-width:1372px) {
	.caso-inner {
		padding-left: 0px;
		padding-right: 0px;
	}
}
@media (max-width: 600px) {
	.caso-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.caso-eyebrow {
	color: #6f7454;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.caso-heading {
	color: #1f2428;
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -1.008px;
	line-height: 1.12;
	margin: 0 0 24px;
	max-width: 800px;
}

.caso-box {
	position: relative;
	border-radius: 10px;
	border: 1px solid #e4e2dc;
	box-sizing: border-box;
	overflow: hidden;
}

/* --- Hero ------------------------------------------------------------ */
.caso-hero {
	background-color: #f6f5f1;
	padding: 27.6px 0 80px;
}

.caso-hero__crumb {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: #6b6b63;
	margin: 0 0 64px;
	flex-wrap:Wrap;
}

.caso-hero__crumb a {
	color: inherit;
	text-decoration: none;
}

.caso-hero__crumb a:hover,
.caso-hero__crumb a:focus,
.caso-hero__crumb a:active {
	color: #6f7454;
}

.caso-hero__crumb-current {
	color: #1f2428;
	font-weight: 500;
}

.caso-hero__title {
	color: #1f2428;
	font-size: 52px;
	font-weight: 600;
	letter-spacing: -1.3px;
	line-height: 1.1;
	margin: 0 0 26px;
	max-width: 820px;
}

.caso-hero__subtitle {
	color: #6b6b63;
	font-size: 19px;
	line-height: 1.6;
	max-width: 720px;
	margin: 0 0 38px;
}
@media(max-width:600px) {
	.caso-hero__subtitle {
		font-size: 16px;
	}
}

.caso-hero__image {
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.caso-hero__image img {
	width: 100%;
	height: clamp(260px, 40vw, 520px);
	object-fit: cover;
	display: block;
}

/* --- Datos del caso ---------------------------------------------------- */
.caso-datos {
	background-color: #fff;
	padding: 80px 0;
}

.caso-datos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.caso-datos__card {
	background-color: #f6f5f1;
	padding: 26px 26px 28px;
}

.caso-datos__label {
	color: #6f7454;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	margin: 0 0 10px;
}

.caso-datos__value {
	color: #1f2428;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.114px;
	margin: 0;
}

@media (max-width: 1024px) {
	.caso-datos__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* --- El contexto -------------------------------------------------------- */
.caso-contexto {
	background-color: #f6f5f1;
	padding: 96px 0;
}

.caso-contexto__grid {
	display: grid;
	grid-template-columns: 1fr 560px;
	gap: 20px 64px;
	align-items: stretch;
}

.caso-contexto__text {
	color: #6b6b63;
	font-size: 16px;
	line-height: 1.75;
}

.caso-contexto__text p {
	margin: 0 0 20px;
}

.caso-contexto__image {
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	height: 100%;
}

.caso-contexto__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.caso-contexto__grid {
		grid-template-columns: 1fr;
	}

	.caso-contexto__image {
		height: 360px;
	}
}

/* --- La solución ---------------------------------------------------- */
.caso-solucion {
	background-color: #fff;
	padding: 96px 0;
}

.caso-solucion__intro {
	color: #6b6b63;
	font-size: 17px;
	line-height: 1.7;
	max-width: 760px;
	margin: 0 0 36px;
}

/* El campo ahora es WYSIWYG (para poder poner negrita fácilmente desde el
   formulario): el <p> que genera el editor lleva su propio margin de
   navegador por defecto, que se anula aquí — el margen ya lo pone el div
   contenedor de arriba. */
.caso-solucion__intro p {
	margin: 0;
}

.caso-solucion__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.caso-solucion__card {
	background-color: #f6f5f1;
	padding: 28px 28px 30px;
}

.caso-solucion__card--destacada {
	background-color: #6f7454;
	border-color: #6f7454;
}

.caso-solucion__num {
	color: #6f7454;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.32px;
	margin: 0 0 14px;
}

.caso-solucion__card--destacada .caso-solucion__num {
	color: #fff;
}

.caso-solucion__title {
	color: #1f2428;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.114px;
	margin: 0 0 14px;
}

.caso-solucion__card--destacada .caso-solucion__title {
	color: #fff;
}

.caso-solucion__text {
	color: #6b6b63;
	font-size: 14px;
	line-height: 1.7;
}

.caso-solucion__text p {
	margin: 0;
}

.caso-solucion__card--destacada .caso-solucion__text {
	color: #fff;
}

@media (max-width: 900px) {
	.caso-solucion__grid {
		grid-template-columns: 1fr;
	}
}

/* --- El resultado ---------------------------------------------------- */
.caso-resultado {
	background-color: #f6f5f1;
	padding: 96px 0;
}
@media(max-width:600px) {
	.caso-resultado, .caso-solucion, .caso-datos, .caso-contexto, .caso-solucion, .caso-galeria, .caso-productos {
		padding: 64px 0 !important;
	}
	.caso-hero, .caso-cta {
		padding-bottom:64px !important;
	}
}
.caso-resultado__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 36px;
}

.caso-resultado__stat {
	background-color: #fff;
	padding: 30px 28px 32px;
}

.caso-resultado__value {
	color: #1f2428;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.57px;
	margin: 0 0 10px;
}

.caso-resultado__label {
	color: #6b6b63;
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}

.caso-resultado__text {
	color: #6b6b63;
	font-size: 16px;
	line-height: 1.75;
	max-width: 900px;
}

.caso-resultado__text p {
	margin: 0 0 20px;
}

.caso-resultado__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.caso-resultado__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* --- Galería ------------------------------------------------------------ */
.caso-galeria {
	background-color: #fff;
	padding: 96px 0;
}

/* La cuadrícula cambia según cuántos elementos traiga el caso (3 a 5 fotos/
   vídeos), calcando el patrón real que usa Figma en cada caso (confirmado
   con Gijón/5, Málaga/3 y Tarragona/3 — los dos de 3 usan el mismo patrón,
   así que no es casualidad):
   - 3 elementos: 2 arriba (iguales) + 1 ancho a todo el ancho abajo.
   - 4 elementos: 3 arriba + 1 ancho a todo el ancho abajo.
   - 5 elementos: 3 arriba + 2 abajo (el primero el doble de ancho que el
     segundo), el patrón de Gijón.
   Filas de altura fija (300/420px) en vez de aspect-ratio para que las fotos
   de distinta proporción se recorten igual; en móvil se cae a los
   breakpoints de abajo, pensados para cualquier número de fotos. */
.caso-galeria__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.caso-galeria__grid--3 {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 300px 420px;
}

.caso-galeria__grid--3 .caso-galeria__item:nth-child(3) {
	grid-column: 1 / -1;
}

.caso-galeria__grid--4 {
	grid-template-rows: 300px 420px;
}

.caso-galeria__grid--4 .caso-galeria__item:nth-child(4) {
	grid-column: 1 / -1;
}

.caso-galeria__grid--5 {
	grid-template-rows: 300px 420px;
}

.caso-galeria__grid--5 .caso-galeria__item:nth-child(4) {
	grid-column: span 2;
}

.caso-galeria__item {
	background-color: #ebebeb;
}

.caso-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.caso-galeria__video,
.caso-galeria__video iframe {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.caso-galeria__video-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #6b6b63;
	font-weight: 600;
	text-decoration: underline;
}

/* Los spans asimétricos de arriba (columna doble, nth-child sueltos) están
   pensados para la cuadrícula de escritorio a 3 columnas. Sin resetearlos
   del todo aquí, esas reglas (más específicas: ".caso-galeria__grid--N
   .caso-galeria__item:nth-child(N)") seguían ganando a un simple reset por
   nth-child suelto y pedían 2 columnas en un grid que ya solo tenía 1 o 2
   — de ahí los huecos vacíos y la columna extra estrecha en móvil que veía
   Vero. Se anula explícitamente CADA variante (--3/--4/--5) en vez de un
   selector genérico, para tener más especificidad y ganar siempre. */
@media (max-width: 900px) {
	.caso-galeria__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-auto-rows: auto;
	}

	.caso-galeria__item {
		aspect-ratio: 4 / 3;
	}

	.caso-galeria__grid--3 .caso-galeria__item,
	.caso-galeria__grid--4 .caso-galeria__item,
	.caso-galeria__grid--5 .caso-galeria__item {
		grid-column: auto !important;
	}

	/* Con número impar de elementos (3 o 5) el último se queda solo en su
	   fila: se estira a las dos columnas para no dejar un hueco vacío al
	   lado. Con 4 (par) no hace falta, ya cuadra solo. */
	.caso-galeria__grid--3 .caso-galeria__item:last-child,
	.caso-galeria__grid--5 .caso-galeria__item:last-child {
		grid-column: span 2 !important;
	}
}

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

	/* Una sola columna: ningún elemento debe pedir "span 2" (ni siquiera el
	   último, de la regla ":last-child" de la media query de arriba) o el
	   grid crearía una segunda columna implícita estrecha solo para
	   acomodarlo, descuadrando toda la fila. OJO: hay que repetir también el
	   selector con ":last-child" — cuenta como una clase más a efectos de
	   especificidad, así que un reset sin él (menos específico) no le gana
	   aunque vaya después en el fichero. */
	.caso-galeria__grid--3 .caso-galeria__item,
	.caso-galeria__grid--4 .caso-galeria__item,
	.caso-galeria__grid--5 .caso-galeria__item,
	.caso-galeria__grid--3 .caso-galeria__item:last-child,
	.caso-galeria__grid--5 .caso-galeria__item:last-child {
		grid-column: auto !important;
	}
}

/* --- Productos utilizados ---------------------------------------------- */
.caso-productos {
	background-color: #f6f5f1;
	padding: 96px 0;
}

.caso-productos__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.caso-productos__card {
	background-color: #ebebeb;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px;
	color: inherit;
	text-decoration: none;
	transition: background-color .3s ease-in-out;
}

.caso-productos__card:hover,
.caso-productos__card:focus-visible,
.caso-productos__card:active {
	background-color: #6f7454;
}

.caso-productos__card:hover *,
.caso-productos__card:focus-visible *,
.caso-productos__card:active * {
	color: #fff;
}

.caso-productos__thumb {
	flex: 0 0 150px;
	width: 150px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}

.caso-productos__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.caso-productos__name {
	color: #1f2428;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.176px;
	margin: 0 0 10px;
}

.caso-productos__text {
	color: #6b6b63;
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 10px;
}

.caso-productos__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #6f7454;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.caso-productos__link-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.caso-productos__card:hover .caso-productos__link,
.caso-productos__card:focus-visible .caso-productos__link,
.caso-productos__card:active .caso-productos__link {
	color: #fff;
}

@media (max-width: 781px) {
	.caso-productos__grid {
		grid-template-columns: 1fr;
	}

	/* Logo + texto en fila (como escritorio) queda muy apretado en móvil —
	   pasa a dos filas dentro de la propia tarjeta: logo arriba, texto
	   debajo. */
	.caso-productos__card {
		flex-direction: column;
		align-items: flex-start;
	}

	.caso-productos__thumb {
		width: 100%;
		flex-basis: auto;
	}
}

/* --- Contacto / CTA ------------------------------------------------------ */
.caso-cta {
	background-color: #f6f5f1;
	padding: 0 0 110px;
}

.caso-cta__band {
	background-color: #6f7454;
	border-radius: 12px;
	padding: 84px 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}

.caso-cta__eyebrow {
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin: 0;
}

.caso-cta__title {
	color: #fff;
	font-size: 44px;
	font-weight: 600;
	letter-spacing: -1.1px;
	line-height: 1.1;
	margin: 0;
}

.caso-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.caso-cta__btn {
	display: inline-flex;
	align-items: center;
	padding: 15px 24px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: all .3s ease-in-out;
}

.caso-cta__btn--light,
.caso-cta__btn--light:visited {
	background-color: #f6f5f1;
	color: #6b6b63;
}

.caso-cta__btn--light:hover,
.caso-cta__btn--light:focus-visible,
.caso-cta__btn--light:active {
	background-color: #fff;
}

.caso-cta__btn--light:focus-visible {
	outline: 2px solid #6f7454;
	outline-offset: 2px;
}

.caso-cta__btn--outline,
.caso-cta__btn--outline:visited {
	border: 1px solid #f6f5f1;
	color: #fff;
}

.caso-cta__btn--outline:hover,
.caso-cta__btn--outline:focus-visible,
.caso-cta__btn--outline:active {
	background-color: rgba(255, 255, 255, .15);
	color: #fff !important;
}

.caso-cta__btn--outline:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.caso-cta__band {
		padding: 48px 24px;
	}

	.caso-cta__title {
		font-size: 32px;
	}
}

/* --- Listado "Casos de Éxito" (page-casos-de-exito.php) ------------------ */
.caso-index__hero {
	background-color: white;
	padding: 27.6px 0 56px;
}

.caso-index__intro {
	color: #6b6b63;
	font-size: 17px;
	line-height: 1.7;
	max-width: 640px;
	margin: 0;
}

.caso-index__list {
	background-color: #fff;
	padding: 0 0 90px;
}

.caso-index__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.caso-index__card {
	background-color: #f6f5f1;
	color: inherit;
	text-decoration: none;
	display: block;
	transition: background-color .3s ease-in-out;
}

.caso-index__card:hover,
.caso-index__card:focus-visible,
.caso-index__card:active {
	background-color: #6f7454;
}

.caso-index__card:hover *,
.caso-index__card:focus-visible *,
.caso-index__card:active * {
	color: #fff;
}

.caso-index__thumb {
	aspect-ratio: 16 / 10;
	background-color: #e4e2dc;
	height:180px;
	width:100%;
}

.caso-index__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.caso-index__body {
	padding: 24px 26px 28px;
}

.caso-index__name {
	color: #1f2428;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.176px;
	margin: 0 0 10px;
}

.caso-index__excerpt {
	color: #6b6b63;
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 22px;
}

.caso-index__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #6f7454;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.caso-index__card:hover .caso-index__link,
.caso-index__card:focus-visible .caso-index__link,
.caso-index__card:active .caso-index__link {
	color: #fff;
}

/* Mismo efecto que .dtac-card-linked: el circulito de fondo desaparece en
   hover y se queda solo la flecha en blanco, en vez de un olivo sobre otro
   olivo (el fondo de la tarjeta ya cambia a #6f7454 en hover). !important
   necesario para ganarle a la regla global "a:hover .dtac-arrow-chip"
   (línea ~398), que también es !important pero con menos especificidad. */
.caso-index__card:hover .caso-index__link .dtac-arrow-chip,
.caso-index__card:focus-visible .caso-index__link .dtac-arrow-chip,
.caso-index__card:active .caso-index__link .dtac-arrow-chip {
	background-color: transparent !important;
	color: #ffffff !important;
}

.caso-index__empty {
	color: #6b6b63;
	font-size: 16px;
}

@media (max-width: 781px) {
	.caso-index__grid {
		grid-template-columns: 1fr;
	}
}
.dtac-about-listado {
	margin-top: 15px !important;
}
.dtac-about-listado li {
	color: #6b6b63;
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 8px !important;
}

/* Página 404: centrada dentro del mismo ancho de contenido que el resto del
   sitio (404_vertical_padding está en "hide" para no llevar el padding
   genérico de WP, pero al no tener bloques propios que aporten espaciado,
   aquí sí hace falta uno a mano). */
.dtac-404 .page-header {
	margin-bottom:0 !important;
}
.dtac-404 .entry-content-wrap {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top:30px !important;
	padding-bottom: 80px !important;
}

.dtac-404 .page-title {
	margin-bottom: 16px;
}

.dtac-404 .entry-content-wrap p {
	color: #6b6b63;
}

.dtac-404 .wp-block-buttons {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}

/* Blog sin entradas todavía: mismo tratamiento que el 404 (ver arriba),
   pero el fondo se aplica al .site de la página del Blog en vez de por el
   404_content_background del customizer (esa opción es específica del
   panel "404 Layout" de Kadence, aquí no existe un panel equivalente). */
body.blog .site {
	background: #F6F5F1;
}

.dtac-archive-empty .page-content {
	max-width: 640px;
	text-align: left;
	padding-top: 30px;
	padding-bottom: 80px;
}

.dtac-archive-empty__title {
	margin-bottom: 16px;
}

.dtac-archive-empty .page-content p {
	color: #6b6b63;
}

.dtac-archive-empty .wp-block-buttons {
	margin-top: 32px;
	display: flex;
	justify-content: flex-start;
}

/* Sombra del header SOLO cuando está pegado con fondo blanco (scrolleado):
   mismo selector exacto que usa Kadence para pintar ese fondo blanco
   (#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start)
   > .site-header-row-container-inner{background:#ffffff;}), así que no
   aparece en el estado "recién fijado" (.item-at-start, fondo #f6f5f1
   normal) ni en la cabecera normal antes de hacer scroll. */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
/* BANNER COOKIES */
.cmplz-title {
	font-size: 16px !important;
}
.cmplz-message a {
	text-decoration: underline !important;
}
.cmplz-message a:hover {
	opacity: .8 !important;
}
.cmplz-message p {
	margin-top:0px !important;
	font-size: 15px !important;
	line-height: 25px !important;
}
.cmplz-description {
	font-size: 14px !important;
}
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-deny {
    margin-right: 180px !important;
}
@media(min-width: 769px) {
	#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
	order: 3 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny {
	order: 2 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences {
	order: 1 !important;
}
}
@media (max-width: 768px) {
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
	order: 1 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny {
	order: 2 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences {
	order: 3 !important;
}
}
.cmplz-btn.cmplz-save-preferences {
	order: 4 !important;
}
.cmplz-cookiebanner {
	padding-top:20px !important;
}
.cmplz-buttons button:hover, .cmplz-buttons a:hover {
	opacity: .9 !important;
}
#cmplz-cookiebanner-container .cmplz-description {
	line-height: 24px !important;
	padding-top:0px !important;
}
#cmplz-cookiebanner-container .cmplz-icon {
	display:flex;
	align-items:center;
}
#cmplz-cookiebanner-container .cmplz-icon svg {
	height: 13px !important;
	width: 100% !important;
}
.cmplz-service-header p {
	margin-bottom: 0px !important;
}
.cmplz-cookiebanner.cmplz-show {
    padding-top: 30px !important;
    padding-bottom: 20px !important;
}
.cmplz-cookiebanner .cmplz-message {
	margin-bottom: 15px !important;
}
.cmplz-btn.cmplz-manage-consent.manage-consent-1.cmplz-show {
	display:none;
}
.dtac-cards-equal.dtac-home-card {
    gap: 15px 20px;
    margin-bottom: 0 !important;
}
.dtac-cards-equal.dtac-home-card p.has-text-color.wp-block-paragraph {
    margin-bottom: 0 !important;
}
@media(max-width:1105px) and (min-width:358px) {
    .site-branding a.brand img {
        max-width:130px !important;
    }
}
@media(max-width:357px) {
    .dtac-lang-switcher {
        margin-right: 0 !important;
    }
    .site-branding a.brand img {
        max-width:110px !important;
    }
}
@media(max-width:312px) {
    .site-header-item.site-header-focus-item {
        margin-right: 0 !important;
    }
}
h2.wp-block-heading.has-text-color {
    margin-top: 0 !important;
}
@media(max-width:600px) {
    .dtac-why-grid {
        padding-bottom:44px;
    }
}
@media(max-width:768px) {
    .cmplz-cookiebanner .cmplz-message {
        margin-top:15px;
    }
}
.dtac-section.pd-bot-0 {
    padding-bottom: 10px !important;
}