/*
 * Decam CR — estilos del tema.
 * Colores, fuentes y tamaños base vienen de theme.json (variables --wp--preset--*).
 * Aquí: componentes y comportamiento responsive. Mobile-first.
 *
 * Índice
 *  1. Base y accesibilidad
 *  2. Encabezado y navegación
 *  3. Botones
 *  4. Secciones e introducciones
 *  5. Portada (video)
 *  6. Contadores
 *  7. ¿Por qué publica y no vende?
 *  8. Servicios (tarjetas)
 *  9. Casos de éxito
 * 10. Cómo trabajamos (pasos)
 * 11. Para quién / listas con marca
 * 12. Equipo
 * 13. Preguntas frecuentes
 * 14. CTA final
 * 15. Pie
 * 16. Contacto y textos legales
 * 17. Blog
 * 18. WhatsApp flotante
 * 19. Estados iniciales de animación
 * 20. Galería de videos y visor
 */

:root {
	--dc-azul: var(--wp--preset--color--azul, #1E589D);
	--dc-noche: var(--wp--preset--color--azul-noche, #0D2747);
	--dc-tinta: var(--wp--preset--color--tinta, #13233A);
	--dc-pizarra: var(--wp--preset--color--pizarra, #4A5A70);
	--dc-celeste: var(--wp--preset--color--celeste, #E7F4FD);
	--dc-ambar: var(--wp--preset--color--ambar, #F0B85A);
	--dc-linea: var(--wp--preset--color--linea, #D3E1EE);
	--dc-claro-suave: #C9D6E6; /* texto secundario sobre azul noche (≈ 11:1) */
	--dc-radio: 6px;
	--dc-encabezado: 72px;
	--dc-gutter: clamp(1rem, 4vw, 2.5rem);
	--dc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. Base y accesibilidad ---------- */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--dc-encabezado) + 1rem);
}

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

h1, h2, h3, h4 {
	text-wrap: balance;
	font-optical-sizing: auto;
}

p, li {
	text-wrap: pretty;
}

/* Medida de lectura cómoda para párrafos sueltos. */
.wp-block-post-content p,
.dc-lead {
	max-width: 68ch;
}

.dc-lead {
	color: var(--dc-tinta);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

:focus-visible {
	outline: 3px solid var(--dc-azul);
	outline-offset: 3px;
	border-radius: 2px;
}

.has-azul-noche-background-color :focus-visible,
.dc-hero :focus-visible,
.dc-sitio-encabezado :focus-visible {
	outline-color: var(--dc-ambar);
}

.skip-link.screen-reader-text:focus {
	background: var(--dc-noche);
	color: #fff;
	z-index: 100000;
}

img {
	height: auto;
}

::selection {
	background: var(--dc-azul);
	color: #fff;
}

/* Texto solo para lectores de pantalla. */
.dc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Los marcadores [PENDIENTE: …] deben verse a simple vista. */
.dc-pendiente {
	display: inline-block;
	background: #FFF3CD;
	color: #5C4400;
	border: 1px dashed #B58900;
	border-radius: 4px;
	padding: 0.15em 0.5em;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Secciones a todo el ancho: sin espacio entre una y otra. */
.wp-block-post-content > .alignfull,
.dc-main > .wp-block-group,
.dc-main > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.dc-main {
	margin-block-start: 0;
}

.dc-main > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Sin espacio entre el pie y el contenido. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- 2. Encabezado y navegación ---------- */

.dc-sitio-encabezado {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.dc-encabezado {
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.dc-encabezado__barra {
	min-height: var(--dc-encabezado);
	gap: 1.5rem;
}

.dc-logo {
	display: block;
	line-height: 0;
	flex-shrink: 0;
}

.dc-logo img {
	display: block;
	height: 30px;
	width: auto;
}

@media (min-width: 782px) {
	.dc-logo img {
		height: 36px;
	}
}

.dc-encabezado__acciones {
	gap: 1.75rem;
}

/* Portada: encabezado transparente sobre el video hasta que se baja. */
.dc-portada .dc-sitio-encabezado {
	position: fixed;
	left: 0;
	right: 0;
}

.dc-portada:not(.dc-desplazado) .dc-encabezado {
	background-color: transparent !important;
}

.dc-desplazado .dc-encabezado {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dc-nav {
	--navigation-layout-justification-setting: flex-end;
	gap: 1.5rem;
}

.dc-nav .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: none;
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
}

.dc-nav .wp-block-navigation-item__content:hover,
.dc-nav .current-menu-item > .wp-block-navigation-item__content,
.dc-nav .dc-nav-actual,
.dc-nav [aria-current="page"] {
	border-bottom-color: var(--dc-ambar);
}

/* Submenú de servicios */
.dc-nav .wp-block-navigation__submenu-container {
	background-color: var(--dc-noche) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: var(--dc-radio);
	padding: 0.5rem 0 !important;
	min-width: 270px !important;
	box-shadow: 0 18px 40px rgba(5, 18, 36, 0.35);
}

.dc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.15rem !important;
	border-bottom: 0;
}

.dc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, 0.07);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Botón del menú en celular */
.dc-nav .wp-block-navigation__responsive-container-open,
.dc-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
	padding: 0.5rem;
	margin: -0.5rem;
}

.dc-nav .wp-block-navigation__responsive-container-open svg,
.dc-nav .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

/* Menú desplegado (celular y tablet) */
.dc-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--wp-admin--admin-bar--height, 0px) + 1.25rem) var(--dc-gutter) 2rem;
}

.dc-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem !important;
	gap: 0 !important;
	align-items: stretch !important;
}

.dc-nav .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
	align-items: stretch !important;
}

.dc-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.dc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 500;
	padding-block: 0.7rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	width: 100%;
}

/* En el menú abierto todo va alineado a la izquierda. */
.dc-nav .is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.dc-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.dc-nav .is-menu-open .wp-block-navigation__container,
.dc-nav .is-menu-open .wp-block-navigation-item,
.dc-nav .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

/* Con el menú abierto no hace falta el botón flotante encima. */
body:has(.dc-nav .is-menu-open) .dc-wa-flotante {
	display: none;
}

.dc-nav .is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0.25rem 0 0.75rem !important;
	min-width: 0 !important;
}

.dc-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 0 0.45rem 1rem !important;
	font-size: 1.05rem;
	color: var(--dc-claro-suave);
}

/* El menú completo (7 enlaces + botón) no cabe por debajo de 1280px: se usa el botón de menú. */
@media (max-width: 1279px) {
	.dc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

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

/* El botón "Escríbanos" del encabezado se oculta en celular: está el botón flotante. */
@media (max-width: 599px) {
	.dc-encabezado__cta {
		display: none !important;
	}
}

.dc-encabezado__cta .wp-block-button__link {
	padding: 0.6rem 1.1rem;
	font-size: 0.95rem;
}

/* Migas de pan */
.dc-migas-barra {
	padding-top: 1.25rem;
	padding-bottom: 0;
}

.dc-migas ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--dc-pizarra);
}

.dc-migas li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: #8394AA;
}

.dc-migas a {
	color: var(--dc-pizarra);
	text-underline-offset: 0.2em;
}

.dc-migas a:hover {
	color: var(--dc-azul);
}

.dc-migas [aria-current] {
	color: var(--dc-tinta);
	font-weight: 600;
}

/* ---------- 3. Botones ---------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Ícono de WhatsApp en cualquier botón que lleve a wa.me */
.wp-block-button__link[href*="wa.me"]::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("../img/icono-whatsapp.svg") center / contain no-repeat;
	mask: url("../img/icono-whatsapp.svg") center / contain no-repeat;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--dc-azul);
	border: 2px solid var(--dc-azul);
	padding: 0.85rem 1.4rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--dc-azul);
	color: #fff;
}

.wp-block-button.is-style-claro > .wp-block-button__link {
	background: #fff;
	color: var(--dc-noche);
	border-color: #fff;
}

.wp-block-button.is-style-claro > .wp-block-button__link:hover {
	background: var(--dc-celeste);
	border-color: var(--dc-celeste);
	color: var(--dc-noche);
}

.wp-block-button.is-style-contorno-claro > .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.75);
}

.wp-block-button.is-style-contorno-claro > .wp-block-button__link:hover {
	background: #fff;
	color: var(--dc-noche);
	border-color: #fff;
}

/* Enlace de texto con flecha implícita: "Ver servicio", "Conocer al equipo" */
.dc-enlace a {
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.dc-enlace a:hover {
	text-decoration-thickness: 2px;
}

/* ---------- 4. Secciones e introducciones ---------- */

.dc-seccion {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

.dc-seccion--compacta {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.dc-contenedor > :first-child {
	margin-top: 0;
}

.dc-seccion h2 {
	max-width: 22ch;
}

.dc-seccion h2 + p {
	margin-top: 1rem;
}

.dc-separa {
	margin-top: var(--wp--preset--spacing--60) !important;
}

/* Sobre azul de marca (CTA final): texto secundario más claro para mantener contraste. */
.has-azul-background-color .dc-lead,
.has-azul-background-color .dc-suave {
	color: #E7F4FD;
}

.has-azul-background-color :focus-visible {
	outline-color: #fff;
}

.has-azul-noche-background-color a:not(.wp-block-button__link) {
	color: #fff;
}

.has-azul-noche-background-color a:not(.wp-block-button__link):hover {
	color: var(--dc-ambar);
}

.has-azul-noche-background-color .dc-lead,
.has-azul-noche-background-color .dc-suave {
	color: var(--dc-claro-suave);
}

.dc-suave {
	color: var(--dc-pizarra);
}

/* Introducción de páginas internas (celeste) */
.dc-intro {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--70);
}

.dc-intro h1 {
	max-width: 20ch;
	margin-top: 0.5rem;
}

.dc-intro .dc-lead {
	margin-top: 1.25rem;
}

.dc-intro .wp-block-buttons {
	margin-top: 2rem;
}

/* ---------- 5. Portada (video) ---------- */

.dc-hero.wp-block-cover {
	min-height: 100vh;
	min-height: 100svh;
	padding-top: calc(var(--dc-encabezado) + var(--wp-admin--admin-bar--height, 0px) + 2rem);
	padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
	padding-left: var(--dc-gutter);
	padding-right: var(--dc-gutter);
	align-items: flex-end;
	background-color: var(--dc-noche);
}

.dc-hero .wp-block-cover__video-background,
.dc-hero .wp-block-cover__image-background {
	object-fit: cover;
}

/*
 * Capa para contraste. El tema la controla aquí (la opacidad del bloque en el editor no aplica):
 * azul noche al 82 % como mínimo donde hay texto en celular y 88 % en la zona del texto en
 * pantallas grandes; así el párrafo no compite con las caras ni con los subtítulos del video
 * (contraste del texto blanco ≥ 8:1 incluso sobre un fotograma blanco).
 */
.dc-hero .wp-block-cover__background {
	opacity: 1 !important;
	background-color: transparent !important;
	background-image: linear-gradient(to top, rgba(13, 39, 71, 0.9) 0%, rgba(13, 39, 71, 0.82) 35%, rgba(13, 39, 71, 0.82) 85%, rgba(13, 39, 71, 0.74) 100%);
}

/* En pantallas grandes el texto ocupa la izquierda y los ~640 px de abajo: ahí una franja
   lateral oscurece más (≈ 88 %); a la derecha y arriba, sin texto, se deja ver el video.
   El menú tiene su propia franja (abajo). */
@media (min-width: 1024px) {
	.dc-hero .wp-block-cover__background {
		background-image:
			linear-gradient(to right, rgba(13, 39, 71, 0.55) 0, rgba(13, 39, 71, 0.55) calc(50% - 40px), rgba(13, 39, 71, 0) 72%),
			linear-gradient(to top,
				rgba(13, 39, 71, 0.88) 0,
				rgba(13, 39, 71, 0.74) 640px,
				rgba(13, 39, 71, 0.5) 760px,
				rgba(13, 39, 71, 0.5) 100%);
	}
}

/* Franja oscura detrás del menú mientras el encabezado es transparente sobre el video:
   74 % en la altura del menú y se desvanece hacia abajo. Garantiza 4,5:1 sobre cualquier fotograma. */
.dc-portada .dc-sitio-encabezado::before {
	content: "";
	position: absolute;
	inset: 0 0 -64px 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(13, 39, 71, 0.74) 0, rgba(13, 39, 71, 0.74) var(--dc-encabezado), rgba(13, 39, 71, 0) calc(var(--dc-encabezado) + 64px));
	transition: opacity 0.35s ease;
}

.dc-portada.dc-desplazado .dc-sitio-encabezado::before {
	opacity: 0;
}

/* Botón para pausar / reproducir el video de fondo (lo activa decam.js). */
.dc-video-control {
	display: none;
	position: absolute;
	z-index: 3;
	top: calc(var(--dc-encabezado) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
	right: max(var(--dc-gutter), calc((100% - 1200px) / 2)); /* alineado con el borde del contenido */
	width: 44px;
	height: 44px;
	place-items: center;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: rgba(13, 39, 71, 0.6);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dc-js .dc-video-control {
	display: grid;
}

.dc-video-control:hover {
	background: var(--dc-noche);
	border-color: #fff;
}

.dc-video-control__play,
.dc-video-control.is-pausado .dc-video-control__pausa {
	display: none;
}

.dc-video-control.is-pausado .dc-video-control__play {
	display: block;
}

/* Con "reducir movimiento": no se reproduce el video, se muestra la imagen de póster.
   Si el visitante pulsa "Reproducir", decam.js agrega .dc-video-activo y el video vuelve. */
@media (prefers-reduced-motion: reduce) {
	.dc-hero.wp-block-cover {
		background-image: var(--dc-poster, none);
		background-size: cover;
		background-position: center;
	}

	.dc-hero:not(.dc-video-activo) .wp-block-cover__video-background {
		visibility: hidden;
	}
}

/* El bloque Portada fija margin:0 y width:auto con "abajo a la izquierda": se alinea al contenedor de 1200px. */
.dc-hero.wp-block-cover .wp-block-cover__inner-container {
	max-width: 1200px !important;
	width: 100% !important;
	margin-inline: auto !important;
	color: #fff;
	z-index: 2;
}

.dc-hero .wp-block-cover__inner-container > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.dc-hero h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 24ch;
	margin: 0;
	color: #fff;
}

.dc-hero .dc-lead {
	color: #fff;
	font-weight: 500;
	max-width: 38rem;
	margin-top: 1.5rem;
	text-shadow: 0 1px 2px rgba(5, 18, 36, 0.6), 0 0 24px rgba(5, 18, 36, 0.5);
}

.dc-hero .wp-block-buttons {
	margin-top: 2.25rem;
	gap: 0.75rem;
}

/* En celular, dejar libre la esquina del botón flotante de WhatsApp. */
@media (max-width: 781px) {
	.dc-hero.wp-block-cover {
		padding-bottom: 6rem;
	}

	.dc-pie {
		padding-bottom: calc(var(--wp--preset--spacing--50) + 4.5rem) !important;
	}
}

@media (max-width: 599px) {
	.dc-hero .wp-block-buttons,
	.dc-intro .wp-block-buttons,
	.dc-cta .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.dc-hero .wp-block-button,
	.dc-intro .wp-block-button,
	.dc-cta .wp-block-button {
		width: 100%;
	}

	.dc-hero .wp-block-button__link,
	.dc-intro .wp-block-button__link,
	.dc-cta .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- 6. Contadores ---------- */

.dc-cifras {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	border-bottom: 1px solid var(--dc-linea);
}

.dc-cifras .wp-block-columns {
	gap: 0;
	margin: 0;
}

.dc-cifra {
	padding: 1.5rem 0;
	border-top: 1px solid var(--dc-linea);
}

.dc-cifra:first-child {
	border-top: 0;
	padding-top: 0;
}

.dc-cifra:last-child {
	padding-bottom: 0;
}

@media (min-width: 782px) {
	.dc-cifra {
		padding: 0 2rem;
		border-top: 0;
		border-left: 1px solid var(--dc-linea);
	}

	.dc-cifra:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

.dc-cifras {
	--dc-cifra-grande: clamp(2.75rem, 2rem + 3vw, 4.25rem);
}

.dc-cifra__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--dc-cifra-grande);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--dc-azul);
	font-variant-numeric: lining-nums tabular-nums;
	margin: 0;
}

/* Contador escrito en palabras ("Más del doble"): más pequeño para caber en una línea,
   alineado abajo con la misma altura que las cifras para que las etiquetas coincidan. */
.dc-cifra__num.dc-cifra__num--texto {
	font-size: clamp(2rem, 1.55rem + 1.6vw, 2.9rem);
	min-height: var(--dc-cifra-grande);
	display: flex;
	align-items: flex-end;
	letter-spacing: -0.015em;
}

.dc-cifra__nota {
	margin-top: 0.3rem !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--dc-pizarra);
}

.dc-cifra__texto {
	margin-top: 0.75rem !important;
	color: var(--dc-pizarra);
	font-size: 1.0625rem;
	max-width: 22ch;
}

/* ---------- 7. ¿Por qué publica y no vende? ---------- */

.dc-porque .wp-block-columns {
	gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.dc-razon {
	padding-top: 1.25rem;
	border-top: 2px solid var(--dc-azul);
}

.dc-razon + .dc-razon {
	margin-top: 2.25rem !important;
}

.dc-razon h3 {
	margin: 0;
}

.dc-razon p {
	margin-top: 0.6rem;
	color: var(--dc-pizarra);
}

/* ---------- 8. Servicios (tarjetas) ---------- */

.dc-servicios {
	gap: 1rem !important;
}

.dc-servicio {
	position: relative;
	background: #fff;
	border: 1px solid var(--dc-linea);
	border-radius: var(--dc-radio);
	padding: 1.75rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease;
}

.dc-servicio:hover,
.dc-servicio:focus-within {
	border-color: var(--dc-azul);
}

.dc-servicio h3 {
	margin: 0;
	font-size: 1.375rem;
}

.dc-servicio h3 a {
	color: var(--dc-tinta);
	text-decoration: none;
}

/* Toda la tarjeta es clicable (el enlace real es el título). */
.dc-servicio h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--dc-radio);
}

.dc-servicio p {
	color: var(--dc-pizarra);
	margin-top: 0.6rem;
}

.dc-servicio .dc-servicio__mas {
	margin-top: auto;
	padding-top: 1.25rem;
	color: var(--dc-azul);
	font-weight: 600;
	font-size: 0.975rem;
}

.dc-servicio--incluido {
	background: var(--dc-celeste);
	border-color: transparent;
}

/* Lista "qué incluye" en páginas de servicio */
.dc-incluye {
	display: grid;
	gap: 0;
	padding: 0;
	list-style: none;
	margin-top: 1.5rem;
}

.dc-incluye li {
	position: relative;
	padding: 1rem 0 1rem 2.25rem;
	border-top: 1px solid var(--dc-linea);
}

.dc-incluye li:last-child {
	border-bottom: 1px solid var(--dc-linea);
}

.dc-incluye li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 1.3rem;
	width: 1.1rem;
	height: 0.6rem;
	border-left: 2.5px solid var(--dc-azul);
	border-bottom: 2.5px solid var(--dc-azul);
	transform: rotate(-45deg);
}

@media (min-width: 782px) {
	.dc-incluye.dc-incluye--2col {
		grid-template-columns: 1fr 1fr;
		column-gap: 3rem;
	}

	.dc-incluye.dc-incluye--2col li:nth-last-child(2) {
		border-bottom: 1px solid var(--dc-linea);
	}
}

/* ---------- 9. Casos de éxito ---------- */

.dc-casos h2 {
	color: #fff;
}

.dc-casos__lista {
	margin-top: var(--wp--preset--spacing--60) !important;
}

.dc-caso {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"etiqueta"
		"resultado"
		"plazo"
		"barras"
		"detalle";
	column-gap: clamp(2rem, 1rem + 4vw, 5rem);
	padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.dc-caso:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.dc-caso > * {
	margin: 0 !important;
}

.dc-caso__etiqueta {
	grid-area: etiqueta;
	font-weight: 600;
	color: var(--dc-claro-suave);
	font-size: var(--wp--preset--font-size--small);
}

.dc-caso__resultado {
	grid-area: resultado;
	margin-top: 0.5rem !important;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
	color: #fff;
	font-variant-numeric: lining-nums tabular-nums;
}

.dc-monto {
	white-space: nowrap;
}

.dc-monto--despues {
	color: var(--dc-ambar);
}

.dc-caso__plazo {
	grid-area: plazo;
	margin-top: 0.5rem !important;
	font-size: var(--wp--preset--font-size--medium);
	color: #fff;
}

.dc-caso__detalle {
	grid-area: detalle;
	margin-top: 1.25rem !important;
	color: var(--dc-claro-suave);
	max-width: 46ch;
}

.dc-caso__detalle strong {
	color: #fff;
	font-weight: 600;
}

/* Barras antes / después (las agrega decam.js a partir de las cifras del título) */
.dc-caso__barras {
	grid-area: barras;
	margin-top: 1.75rem !important;
	display: grid;
	gap: 0.6rem;
}

.dc-barra {
	display: grid;
	grid-template-columns: 4.75rem 1fr;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--dc-claro-suave);
}

.dc-barra__pista {
	height: 14px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.dc-barra__relleno {
	display: block;
	height: 100%;
	width: var(--dc-ancho, 100%);
	border-radius: 2px;
	background: #6F8BB0;
	transform-origin: left center;
	will-change: transform;
}

.dc-barra--despues .dc-barra__relleno {
	background: var(--dc-ambar);
}

@media (min-width: 900px) {
	.dc-caso {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		grid-template-areas:
			"etiqueta  barras"
			"resultado barras"
			"plazo     detalle";
		align-items: start;
	}

	.dc-caso__barras {
		margin-top: 2rem !important;
		align-self: end;
	}

	.dc-caso__detalle {
		margin-top: 1.25rem !important;
	}
}

.dc-casos__nota {
	margin-top: 2rem !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--dc-claro-suave);
}

/* ---------- 10. Cómo trabajamos (pasos) ---------- */

.dc-proceso .wp-block-columns {
	gap: clamp(2rem, 1rem + 4vw, 6rem);
}

@media (min-width: 782px) {
	.dc-pegajoso {
		position: sticky;
		top: calc(var(--dc-encabezado) + var(--wp-admin--admin-bar--height, 0px) + 2rem);
		align-self: flex-start;
	}
}

.dc-pasos {
	position: relative;
	counter-reset: paso;
	padding-left: 3.75rem;
}

/* Línea vertical: pista y progreso (el progreso lo dibuja decam.js al bajar). */
.dc-pasos::before,
.dc-pasos__progreso {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 2px;
	background: var(--dc-linea);
}

.dc-pasos__progreso {
	background: var(--dc-azul);
	transform-origin: top center;
	transform: scaleY(1);
	will-change: transform;
}

.dc-paso {
	position: relative;
	counter-increment: paso;
	padding-bottom: 2.25rem;
}

.dc-paso:last-child {
	padding-bottom: 0;
}

.dc-paso + .dc-paso {
	margin-top: 0 !important;
}

.dc-paso::before {
	content: counter(paso);
	position: absolute;
	left: -3.75rem;
	top: -0.15rem;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--dc-azul);
	color: var(--dc-azul);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1.1rem;
	z-index: 1;
}

.has-celeste-background-color .dc-paso::before {
	background: var(--dc-celeste);
}

.dc-paso h3 {
	margin: 0;
	font-size: 1.375rem;
}

.dc-paso p {
	margin-top: 0.4rem;
	color: var(--dc-pizarra);
}

/* ---------- 11. Para quién / listas con marca ---------- */

.dc-para-quien .wp-block-columns {
	gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.dc-lista-check {
	list-style: none;
	padding: 0;
	margin-top: 1.25rem;
}

.dc-lista-check li {
	position: relative;
	padding-left: 2rem;
	margin-top: 0.9rem;
}

.dc-lista-check li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.45em;
	width: 0.95rem;
	height: 0.5rem;
	border-left: 2.5px solid var(--dc-azul);
	border-bottom: 2.5px solid var(--dc-azul);
	transform: rotate(-45deg);
}

.dc-nota-recuadro {
	border-left: 3px solid var(--dc-azul);
	padding: 0.25rem 0 0.25rem 1.25rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	color: var(--dc-tinta);
}

/* ---------- 12. Equipo ---------- */

.dc-equipo {
	gap: 2rem 1.25rem !important;
}

.dc-persona .wp-block-image {
	margin: 0;
}

.dc-persona .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--dc-radio);
	background: var(--dc-celeste);
}

.dc-persona h3 {
	margin-top: 1rem !important;
	font-size: 1.25rem;
}

.dc-persona .dc-persona__cargo {
	margin-top: 0.2rem !important;
	color: var(--dc-azul);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.dc-persona .dc-persona__bio {
	margin-top: 0.6rem !important;
	color: var(--dc-pizarra);
	font-size: 1rem;
}

/* ---------- 13. Preguntas frecuentes ---------- */

.dc-faq {
	max-width: 860px;
}

.dc-faq .wp-block-details {
	border-top: 1px solid var(--dc-linea);
	margin: 0 !important;
	padding: 0;
}

.dc-faq .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--dc-linea);
}

.dc-faq summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 1.35rem 3rem 1.35rem 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--dc-tinta);
}

.dc-faq summary::-webkit-details-marker {
	display: none;
}

.dc-faq summary::before,
.dc-faq summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--dc-azul);
	transition: transform 0.3s var(--dc-ease);
}

.dc-faq summary::after {
	transform: rotate(90deg);
}

.dc-faq details[open] summary::after {
	transform: rotate(0deg);
}

.dc-faq summary:hover {
	color: var(--dc-azul);
}

.dc-faq .wp-block-details > :not(summary) {
	margin-top: 0;
	padding-bottom: 1.35rem;
	padding-right: 3rem;
	color: var(--dc-pizarra);
}

.dc-faq .wp-block-details > :not(summary) + :not(summary) {
	margin-top: -0.5rem;
}

/* ---------- 14. CTA final ---------- */

.dc-cta {
	position: relative;
	overflow: hidden;
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
	isolation: isolate;
}

/* Isotipo principal como marca de agua (decorativo). */
.dc-cta::after {
	content: "";
	position: absolute;
	right: -6%;
	top: 50%;
	width: min(46vw, 560px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: url("../logos/decam-isotipo-principal.svg") center / contain no-repeat;
	opacity: 0.08;
	z-index: -1;
	pointer-events: none;
}

.dc-cta h2 {
	color: #fff;
	max-width: 18ch;
}

.dc-cta .wp-block-buttons {
	margin-top: 2rem;
}

/* ---------- 15. Pie ---------- */

.dc-pie {
	font-size: 0.975rem;
	color: var(--dc-claro-suave);
}

.dc-pie__columnas {
	gap: 2.5rem 3rem;
}

.dc-pie .dc-logo img {
	height: 40px;
}

.dc-pie__lema {
	margin-top: 1.25rem !important;
	max-width: 30ch;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.2rem;
	line-height: 1.4;
	color: #fff;
}

.dc-pie__redes {
	margin-top: 1.5rem !important;
}

.dc-pie__titulo {
	font-weight: 600;
	color: #fff;
	margin: 0 0 0.75rem;
}

.dc-pie__lista {
	list-style: none;
	padding: 0;
	margin: 0;
}

.dc-pie__lista li {
	padding: 0.3rem 0;
}

.dc-pie a {
	color: var(--dc-claro-suave);
	text-decoration: none;
}

.dc-pie a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dc-pie__contacto a {
	color: #fff;
}

.dc-pie__base {
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.875rem;
	gap: 0.5rem 2rem;
}

.dc-pie__base p {
	margin: 0;
}

/* ---------- 16. Contacto ---------- */

/* Datos de contacto */
.dc-datos {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
}

.dc-datos li {
	padding: 1rem 0;
	border-top: 1px solid var(--dc-linea);
}

.dc-datos li:last-child {
	border-bottom: 1px solid var(--dc-linea);
}

.dc-datos strong {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--dc-pizarra);
	font-weight: 600;
}

/* Política de privacidad y textos largos: alineados a la izquierda con medida de lectura. */
.dc-legal .dc-contenedor > * {
	max-width: 760px;
}

.dc-legal h2 {
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem);
	margin-top: 2.75rem;
}

.dc-legal h3 {
	font-size: 1.2rem;
	margin-top: 1.75rem;
}

.dc-legal p,
.dc-legal li {
	color: var(--dc-tinta);
}

/* ---------- 17. Blog ---------- */

.dc-tarjeta-post {
	border-top: 2px solid var(--dc-azul);
	padding-top: 1.25rem;
}

.dc-tarjeta-post .wp-block-post-title a {
	color: var(--dc-tinta);
	text-decoration: none;
}

.dc-tarjeta-post .wp-block-post-title a:hover {
	color: var(--dc-azul);
	text-decoration: underline;
}

.dc-tarjeta-post .wp-block-post-date {
	color: var(--dc-pizarra);
}

.dc-articulo__fecha {
	color: var(--dc-pizarra);
	margin-top: 1rem;
}

/* ---------- 18. WhatsApp flotante ---------- */

.dc-wa-flotante {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 56px;
	min-width: 56px;
	padding: 0 14px;
	justify-content: center;
	border-radius: 999px;
	background: #0F7A6E; /* verde WhatsApp oscurecido: 5,2:1 con el texto y el ícono blancos */
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 10px 28px rgba(13, 39, 71, 0.28);
	transition: background-color 0.2s ease, transform 0.2s var(--dc-ease);
}

.dc-wa-flotante:hover {
	background: #0B6359;
	color: #fff;
	transform: translateY(-2px);
}

.dc-wa-flotante:focus-visible {
	outline: 3px solid var(--dc-noche);
	outline-offset: 3px;
}

.dc-wa-flotante__texto {
	display: none;
}

@media (min-width: 782px) {
	.dc-wa-flotante {
		padding: 0 20px 0 16px;
	}

	.dc-wa-flotante__texto {
		display: inline;
	}
}

/* ---------- 19. Estados iniciales de animación ----------
 * Solo existen con html.dc-motion (JS activo + sin "reducir movimiento").
 * decam.js los lleva a su estado final.
 */

.dc-motion .dc-seccion:not(.dc-casos) > .dc-contenedor > *,
.dc-motion .dc-casos > .dc-contenedor > h2,
.dc-motion .dc-casos > .dc-contenedor > .dc-lead {
	opacity: 0;
	transform: translateY(24px);
}

/* El titular y el subtítulo no se ocultan: son lo primero que mide Google (LCP; en celular el
   subtítulo es el bloque más grande) y deben verse al instante. Solo entran animados los botones. */
.dc-motion .dc-hero .wp-block-cover__inner-container > *:not(h1):not(.dc-lead) {
	opacity: 0;
	transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 20. Galería de videos y visor ----------
 * La galería es un grupo .dc-trabajos con bloques Video; inc/render.php los convierte en
 * miniaturas (.dc-trabajo) y decam.js abre el visor (.dc-visor).
 */

.dc-trabajos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.dc-trabajos > * {
	margin: 0 !important;
}

@media (min-width: 600px) {
	.dc-trabajos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 1024px) {
	.dc-trabajos {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Portada: 4 videos (2 × 2 en celular y tablet, 4 en fila en escritorio). */
.dc-trabajos.dc-trabajos--portada {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 782px) {
	.dc-trabajos.dc-trabajos--portada {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

.dc-trabajo {
	position: relative;
	margin: 0;
	aspect-ratio: 9 / 16;
	border-radius: var(--dc-radio);
	overflow: hidden;
	background: var(--dc-noche);
	isolation: isolate;
	box-shadow: 0 1px 0 rgba(13, 39, 71, 0.06);
}

/* Degradado inferior para que el título se lea sobre cualquier imagen. */
.dc-trabajo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 48%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(13, 39, 71, 0.94) 0%, rgba(13, 39, 71, 0.6) 45%, rgba(13, 39, 71, 0) 100%);
}

.dc-trabajo__enlace {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	text-decoration: none;
}

.dc-trabajo__enlace:focus-visible {
	outline: 3px solid var(--dc-ambar);
	outline-offset: -3px;
	border-radius: var(--dc-radio);
	z-index: 3;
}

.dc-trabajo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--dc-ease);
}

.dc-trabajo__play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	background: rgba(13, 39, 71, 0.38);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	transition: transform 0.35s var(--dc-ease), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.dc-trabajo__play svg {
	margin-left: 3px; /* centro óptico del triángulo */
}

.dc-trabajo__duracion {
	position: absolute;
	z-index: 2;
	top: 0.6rem;
	right: 0.6rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: rgba(13, 39, 71, 0.72);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.dc-trabajo__titulo {
	position: absolute;
	z-index: 2;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.8rem;
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.125rem);
	font-weight: 500;
	line-height: 1.25;
	text-wrap: balance;
	pointer-events: none;
}

.dc-trabajo__enlace:hover .dc-trabajo__img,
.dc-trabajo__enlace:focus-visible .dc-trabajo__img {
	transform: scale(1.04);
}

.dc-trabajo__enlace:hover .dc-trabajo__play,
.dc-trabajo__enlace:focus-visible .dc-trabajo__play {
	transform: scale(1.08);
	background: var(--dc-ambar);
	border-color: var(--dc-ambar);
	color: var(--dc-noche);
}

@media (max-width: 599px) {
	.dc-trabajo__play {
		width: 48px;
		height: 48px;
		margin: -24px 0 0 -24px;
	}

	.dc-trabajo__titulo {
		left: 0.65rem;
		right: 0.65rem;
		bottom: 0.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dc-trabajo__enlace:hover .dc-trabajo__img,
	.dc-trabajo__enlace:focus-visible .dc-trabajo__img,
	.dc-trabajo__enlace:hover .dc-trabajo__play,
	.dc-trabajo__enlace:focus-visible .dc-trabajo__play {
		transform: none;
	}
}

/* Visor */
html.dc-visor-abierto {
	overflow: hidden;
}

.dc-visor {
	width: min(92vw, calc((100dvh - 7rem) * 9 / 16));
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: visible;
}

.dc-visor::backdrop {
	background: rgba(5, 18, 36, 0.9);
}

.dc-visor__marco {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dc-visor__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.dc-visor__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	line-height: 1.3;
}

.dc-visor__cerrar {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dc-visor__cerrar:hover {
	background: #fff;
	color: var(--dc-noche);
}

.dc-visor__cerrar:focus-visible {
	outline: 3px solid var(--dc-ambar);
	outline-offset: 3px;
}

.dc-visor__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	max-height: calc(100dvh - 7rem);
	border-radius: var(--dc-radio);
	background: #000;
}

/* Celular: pantalla completa, con el botón de cerrar arriba a la derecha. */
@media (max-width: 599px) {
	.dc-visor {
		width: 100vw;
		height: 100dvh;
		margin: 0;
		inset: 0;
	}

	.dc-visor__marco {
		height: 100%;
		box-sizing: border-box;
		padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
		background: #000;
	}

	.dc-visor__video {
		flex: 1;
		min-height: 0;
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
		object-fit: contain;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dc-visor[open] {
		animation: dc-visor-entra 0.25s var(--dc-ease);
	}

	@keyframes dc-visor-entra {
		from {
			opacity: 0;
			transform: scale(0.98);
		}

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

/* Sección de la galería en la portada y en "Nuestro trabajo". */
.dc-trabajos-seccion .dc-trabajos + .wp-block-buttons,
.dc-trabajos-seccion .dc-trabajos + p {
	margin-top: var(--wp--preset--spacing--60) !important;
}