/*
 * Estilos de componentes del tema DualByte.
 *
 * Colores, tipografías y tamaños base vienen de theme.json (variables --wp--preset--*).
 * Aquí solo va lo que theme.json no cubre: tarjetas, héroes, menú, carrusel, visor,
 * formularios, botones flotantes y asistente.
 *
 * Reglas de accesibilidad que este archivo garantiza:
 *   - Todo control táctil mide al menos 44 x 44 px.
 *   - Foco visible: anillo de 2 px en #C24A0E (blanco sobre fondos azules).
 *   - Sin desplazamiento horizontal desde 360 px de ancho.
 *   - Contrastes calculados en scripts/contrastes.py (todos cumplen WCAG 2.2 AA).
 *
 * © 2026 DualByte Comunicaciones S.A.S. Todos los derechos reservados.
 */

:root {
	--db-accion: var(--wp--preset--color--accion);
	--db-accion-hover: var(--wp--preset--color--accion-hover);
	--db-marca: var(--wp--preset--color--marca);
	--db-azul: var(--wp--preset--color--azul);
	--db-azul-medio: var(--wp--preset--color--azul-medio);
	--db-fondo: var(--wp--preset--color--fondo);
	--db-blanco: #fff;
	--db-borde: var(--wp--preset--color--borde);
	--db-borde-campo: #857d76; /* 4,04:1 sobre blanco: cumple 1.4.11 (el #C9C2B8 del diseño no). */
	--db-texto: var(--wp--preset--color--texto);
	--db-texto-suave: var(--wp--preset--color--texto-suave);
	--db-acento: var(--wp--preset--color--acento);
	--db-claro: var(--wp--preset--color--claro-sobre-azul);
	--db-hielo: var(--wp--preset--color--hielo);
	--db-whatsapp: #128c7e;
	--db-radio: 16px;
	--db-sombra: 0 8px 24px rgba(0, 24, 72, 0.18);
	--db-titulos: var(--wp--preset--font-family--outfit);
}

/* ---------- Base ---------- */

/* Sin separación entre encabezado, contenido y pie (cada sección trae su propio aire). */
.wp-site-blocks > * + *,
.db-principal > .wp-block-post-content > * + *,
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

html {
	scroll-padding-top: 16px;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--db-accion);
	outline-offset: 2px;
}

:where(.db-seccion--azul, .db-heroe-inicio, .db-heroe-pilar, .db-heroe-wana, .db-subnav-wana, .db-pie, .db-llamado, .db-tarjeta--oscura, .db-destacado--oscuro, .db-visor) :focus-visible {
	outline-color: #fff;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.db-principal {
	margin-block: 0;
}

.db-principal > .wp-block-post-content > * {
	margin-block-start: 0;
}

/* ---------- Secciones ---------- */

.db-seccion {
	padding-block: var(--wp--preset--spacing--70);
}

.db-seccion--compacta {
	padding-block: var(--wp--preset--spacing--60);
}

.db-seccion--sin-arriba {
	padding-block-start: 0;
}

.db-seccion--blanca {
	background: var(--db-blanco);
	border-block: 1px solid var(--db-borde);
}

.db-seccion--azul {
	background: var(--db-azul);
	color: var(--db-blanco);
}

.db-seccion--azul :where(h1, h2, h3, h4) {
	color: var(--db-blanco);
}

.db-seccion--azul .db-texto-suave,
.db-seccion--azul p {
	color: var(--db-claro);
}

.db-seccion--azul .db-rotulo {
	color: var(--db-acento);
}

.db-encabezado-seccion {
	margin-block-end: var(--wp--preset--spacing--50);
}

.db-encabezado-seccion > * {
	max-width: 760px;
}

.db-encabezado-seccion > * + * {
	margin-block-start: 12px;
}

.db-fila-titulo {
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px 24px;
	margin-block-end: var(--wp--preset--spacing--40);
}

.db-fila-titulo > * {
	margin: 0;
}

.db-panel {
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 20px;
	padding: clamp(24px, 5vw, 48px);
}

.db-panel--dos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(28px, 5vw, 48px);
	align-items: center;
}

.db-panel__texto > * + * {
	margin-block-start: 16px;
}

.db-centrado {
	justify-content: center;
}

/* ---------- Textos ---------- */

.db-rotulo {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--db-accion);
	margin: 0;
}

.db-rotulo--claro {
	color: var(--db-acento);
}

.db-entradilla {
	font-size: var(--wp--preset--font-size--mediano);
	line-height: 1.6;
	color: var(--db-claro);
	max-width: 680px;
}

.db-lema {
	font-family: var(--db-titulos);
	font-weight: 800;
	font-size: clamp(30px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--db-blanco);
	margin: 0;
}

.db-lema--pequeno {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
}

.db-color-marca {
	color: var(--db-marca); /* 4,72:1 sobre azul; solo en texto grande. */
}

.db-texto-suave {
	color: var(--db-texto-suave);
}

.db-texto-grande {
	font-size: 17px;
	line-height: 1.6;
}

.db-titulo-mediano {
	font-size: clamp(26px, 3vw, 34px);
}

.db-titulo-pequeno {
	font-size: clamp(20px, 2.4vw, 24px);
}

.db-enlace-fuerte a,
.db-mas {
	font-weight: 700;
}

.db-enlace-fuerte a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.db-mas {
	color: var(--db-accion);
	margin-block-start: auto;
}

.db-nota {
	font-size: 14px;
	color: var(--db-texto-suave);
}

.db-marca-wana {
	font-family: var(--db-titulos);
	font-weight: 800;
	font-size: 28px;
	letter-spacing: 0.05em;
	color: var(--db-azul);
	margin: 0;
}

.db-etiqueta,
.db-etiqueta-nuevo {
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	border-radius: 999px;
	padding: 2px 9px;
	vertical-align: middle;
}

.db-etiqueta {
	background: #fbe9df;
	color: var(--db-accion-hover); /* 5,45:1 */
}

.db-etiqueta--aviso {
	margin: 0;
}

.db-etiqueta-nuevo {
	background: var(--db-accion);
	color: var(--db-blanco); /* 4,91:1 */
	margin-inline-start: 6px;
}

.db-tarjeta--oscura .db-etiqueta-nuevo {
	background: var(--db-acento);
	color: var(--db-azul); /* 9,72:1 */
}

/* Ícono oficial de WhatsApp antes de cada enlace al móvil. */
.db-wa::before,
.db-boton-wa .wp-block-button__link::before,
.db-icono-wa {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url(../images/whatsapp.svg) no-repeat center / contain;
	mask: url(../images/whatsapp.svg) no-repeat center / contain;
	flex: none;
}

.db-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

/* ---------- Botones ---------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	text-decoration: none;
}

.db-boton-wa .wp-block-button__link {
	gap: 10px;
}

.db-boton-contorno .wp-block-button__link,
.db-heroe-inicio .db-boton-wa .wp-block-button__link,
.db-llamado .db-boton-wa .wp-block-button__link {
	background: transparent;
	color: var(--db-blanco);
	border: 1.5px solid #8fa0c4; /* 6,53:1 sobre azul */
}

.db-llamado .db-boton-wa .wp-block-button__link {
	border-color: var(--db-blanco);
}

.db-boton-contorno .wp-block-button__link:hover,
.db-heroe-inicio .db-boton-wa .wp-block-button__link:hover,
.db-llamado .db-boton-wa .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--db-blanco);
}

.db-boton-blanco .wp-block-button__link {
	background: var(--db-blanco);
	color: var(--db-accion-hover); /* 6,42:1 */
}

.db-boton-blanco .wp-block-button__link:hover {
	background: #fbe9df;
	color: var(--db-accion-hover);
}

.db-boton-texto .wp-block-button__link {
	background: transparent;
	color: var(--db-accion);
	padding-inline: 12px;
}

.db-boton-texto .wp-block-button__link:hover {
	background: transparent;
	color: var(--db-accion-hover);
	text-decoration: underline;
}

/* ---------- Encabezado y menú ---------- */

.db-encabezado {
	background: var(--db-blanco);
	border-bottom: 1px solid var(--db-borde);
	padding-block: 10px;
	position: relative;
	z-index: 30;
}

.db-encabezado__fila {
	gap: 16px;
	min-height: 52px;
}

.db-logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	flex: none;
}

.db-logo img {
	height: 35px;
	width: auto;
	display: block;
}

.db-menu-principal .wp-block-navigation-item__content,
.db-menu-principal .wp-block-navigation-submenu__toggle {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 12px;
	color: var(--db-texto);
	text-decoration: none;
}

.db-menu-principal .wp-block-navigation__container {
	gap: 4px;
	align-items: center;
}

.db-menu-principal .current-menu-item > .wp-block-navigation-item__content {
	color: var(--db-azul);
	box-shadow: inset 0 -2px 0 var(--db-marca);
}

.db-menu-principal .wp-block-navigation__submenu-container {
	border: 1px solid var(--db-borde) !important;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 24, 72, 0.14);
	padding: 8px;
	min-width: 320px !important;
	background: var(--db-blanco) !important;
}

.db-menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 12px 14px;
	width: 100%;
}

.db-menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--db-fondo);
}

.db-menu-principal .db-menu-cotizar > .wp-block-navigation-item__content {
	background: var(--db-accion);
	color: var(--db-blanco);
	border-radius: 8px;
	padding-inline: 18px;
	margin-inline-start: 8px;
}

.db-menu-principal .db-menu-cotizar.current-menu-item > .wp-block-navigation-item__content {
	box-shadow: none;
}

.db-menu-principal .db-menu-cotizar > .wp-block-navigation-item__content:hover {
	background: var(--db-accion-hover);
	color: var(--db-blanco);
}

.db-menu-principal .wp-block-navigation__responsive-container-open,
.db-menu-principal .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* Insignia «Nuevo» junto a WANA (decorativa; el enlace se llama «WANA»). */
.db-menu-wana > .wp-block-navigation-item__content::after {
	content: "Nuevo";
	font-size: 11px;
	font-weight: 700;
	color: var(--db-blanco);
	background: var(--db-accion); /* 4,91:1 */
	border-radius: 999px;
	padding: 2px 8px;
	margin-inline-start: 6px;
}

.db-menu-principal .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 16px;
}

.db-menu-principal .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.db-menu-principal .is-menu-open .wp-block-navigation__submenu-container {
	display: none !important;
	min-width: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0 0 16px !important;
}

.db-menu-principal .is-menu-open .wp-block-navigation-submenu.is-open > .wp-block-navigation__submenu-container,
.db-menu-principal .is-menu-open .wp-block-navigation-submenu:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column !important;
}

.db-menu-principal .is-menu-open .wp-block-navigation-submenu__toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--db-texto);
	cursor: pointer;
}

.db-menu-principal .is-menu-open .db-menu-cotizar > .wp-block-navigation-item__content {
	margin: 12px 0 0;
	justify-content: center;
}

/* ---------- Subnavegación de WANA y selector de pilares ---------- */

.db-subnav-wana {
	background: var(--db-azul);
	border-bottom: 1px solid var(--db-azul-medio);
	padding-block: 4px;
}

.db-subnav-wana__fila {
	gap: 4px 16px;
}

.db-subnav-wana__marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--db-blanco);
	text-decoration: none;
	font-family: var(--db-titulos);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.06em;
}

.db-subnav-wana__marca:hover {
	color: var(--db-blanco);
}

.db-subnav-wana__menu .wp-block-navigation-item__content,
.db-selector-pilares__menu .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 12px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

/* Especificidad doble para ganarle al color que pone el bloque Navegación. */
.db-subnav-wana .db-subnav-wana__menu .wp-block-navigation-item__content {
	color: var(--db-claro); /* 12,46:1 sobre azul */
}

.db-subnav-wana .db-subnav-wana__menu .wp-block-navigation-item__content:hover,
.db-subnav-wana .db-subnav-wana__menu .current-menu-item > .wp-block-navigation-item__content,
.db-subnav-wana .db-subnav-wana__destacado > .wp-block-navigation-item__content {
	color: var(--db-blanco);
}

.db-subnav-wana__menu .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 0 -2px 0 var(--db-acento);
}

.db-selector-pilares {
	background: var(--db-blanco);
	border-bottom: 1px solid var(--db-borde);
}

.db-selector-pilares .db-selector-pilares__menu .wp-block-navigation-item__content {
	color: var(--db-texto-suave);
}

.db-selector-pilares .db-selector-pilares__menu .current-menu-item > .wp-block-navigation-item__content {
	color: var(--db-azul);
	box-shadow: inset 0 -3px 0 var(--db-marca);
}

@media (max-width: 768px) {
	.db-selector-pilares {
		display: none !important;
	}
}

/* ---------- Migas de pan ---------- */

.db-migas {
	font-size: 14px;
	color: var(--db-texto-suave);
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	align-items: center;
}

.db-migas a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

:where(.db-seccion--azul, .db-heroe-pilar) .db-migas,
:where(.db-seccion--azul, .db-heroe-pilar) .db-migas a {
	color: var(--db-hielo);
}

/* ---------- Héroe del inicio ---------- */

.db-heroe-inicio {
	color: var(--db-blanco);
	background-color: var(--db-azul);
	background-image: linear-gradient(rgba(0, 24, 72, 0.86), rgba(0, 24, 72, 0.93)), url(../images/hero-datacenter-800.webp);
	background-size: cover;
	background-position: center;
	padding-block: clamp(56px, 9vw, 96px);
}

@media (min-width: 801px) {
	.db-heroe-inicio {
		background-image: linear-gradient(rgba(0, 24, 72, 0.86), rgba(0, 24, 72, 0.93)), url(../images/hero-datacenter.webp);
	}
}

.db-heroe-inicio h1 {
	color: var(--db-blanco);
	font-size: var(--wp--preset--font-size--heroe);
	letter-spacing: -0.02em;
}

.db-heroe-inicio__fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(32px, 6vw, 56px);
	align-items: center;
}

.db-heroe-inicio__texto > * + * {
	margin-block-start: 22px;
}

.db-heroe-pilares ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.db-heroe-pilares__titulo {
	font-size: 13px;
	font-weight: 600;
	color: var(--db-hielo);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.db-acceso-pilar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--db-azul-medio);
	color: var(--db-blanco);
	text-decoration: none;
}

.db-acceso-pilar:hover {
	color: var(--db-blanco);
	background: #10368a;
}

.db-acceso-pilar--destacado {
	background: var(--db-accion);
}

.db-acceso-pilar--destacado:hover {
	background: var(--db-accion-hover);
}

.db-acceso-pilar__numero {
	font-family: var(--db-titulos);
	font-weight: 700;
	width: 28px;
	flex: none;
	color: var(--db-acento);
}

.db-acceso-pilar--destacado .db-acceso-pilar__numero {
	color: var(--db-blanco);
}

.db-acceso-pilar__texto {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	color: var(--db-hielo);
}

.db-acceso-pilar--destacado .db-acceso-pilar__texto {
	color: var(--db-blanco);
}

.db-acceso-pilar__texto strong {
	font-family: var(--db-titulos);
	font-size: 17px;
	color: var(--db-blanco);
}

@media (min-width: 960px) {
	.db-heroe-pilares li:nth-child(2) { margin-inline-start: 20px; }
	.db-heroe-pilares li:nth-child(3) { margin-inline-start: 40px; }
	.db-heroe-pilares li:nth-child(4) { margin-inline-start: 60px; }
}

/* ---------- Héroe de pilar ---------- */

.db-heroe-pilar {
	background: var(--db-azul);
	color: var(--db-blanco);
	padding-block: clamp(40px, 7vw, 72px);
}

.db-heroe-pilar h1 {
	color: var(--db-blanco);
}

.db-heroe-pilar__fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 40px;
	align-items: end;
}

.db-heroe-pilar__texto > * + * {
	margin-block-start: 14px;
}

.db-heroe-pilar__foto .wp-block-image img {
	border-radius: var(--db-radio);
	max-height: 280px;
	width: 100%;
}

.db-heroe-pilar__foto > * + * {
	margin-block-start: 16px;
}

/* ---------- Héroe de WANA ---------- */

.db-heroe-wana {
	background: var(--db-azul);
	color: var(--db-blanco);
	text-align: center;
	padding-block: clamp(48px, 8vw, 72px) 0;
	overflow: hidden;
}

.db-heroe-wana > * {
	margin-inline: auto;
}

.db-heroe-wana__h1 {
	color: var(--db-acento) !important;
	font-size: clamp(16px, 2vw, 20px) !important;
	letter-spacing: 0.02em;
	font-weight: 700;
	max-width: 760px;
}

.db-heroe-wana .db-lema {
	max-width: 960px;
	margin-block-start: 16px;
}

.db-heroe-wana .db-entradilla {
	max-width: 760px;
	margin-block-start: 20px;
}

.db-heroe-wana .wp-block-buttons {
	margin-block: 24px 40px;
}

.db-maqueta {
	max-width: 980px;
	margin: 0 auto;
	text-align: left;
}

.db-maqueta__ventana {
	background: var(--db-fondo);
	color: var(--db-texto);
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
	font-size: 13px;
}

.db-maqueta__barra {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 10px 14px;
	background: #e9edf5;
}

.db-maqueta__barra span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #b9c3d9;
}

.db-maqueta__barra em {
	margin-inline-start: 12px;
	font-style: normal;
	color: var(--db-texto-suave);
}

.db-maqueta__cuerpo {
	display: grid;
	grid-template-columns: 160px 1fr;
	min-height: 240px;
}

.db-maqueta__menu {
	background: var(--db-azul);
	color: var(--db-claro);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.db-maqueta__menu strong {
	color: var(--db-blanco);
}

.db-maqueta__panel {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.db-maqueta__saludo {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.db-maqueta__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.db-maqueta__kpis span,
.db-maqueta__pendientes {
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 10px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.db-maqueta__kpis b {
	font-size: 20px;
	color: var(--db-azul);
}

.db-maqueta figcaption,
.db-maqueta + figcaption {
	color: var(--db-hielo);
	font-size: 13px;
	padding: 10px 0 16px;
	text-align: center;
}

@media (max-width: 600px) {
	.db-maqueta__cuerpo { grid-template-columns: 1fr; }
	.db-maqueta__menu { flex-direction: row; flex-wrap: wrap; }
	.db-maqueta__kpis { grid-template-columns: 1fr; }
}

/* ---------- Tarjetas ---------- */

.db-tarjeta {
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: var(--db-radio);
	padding: clamp(22px, 3vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
}

.db-tarjeta > * {
	margin: 0;
}

.db-tarjeta--suave {
	background: var(--db-fondo);
}

.db-tarjeta--oscura {
	background: var(--db-azul);
	border-color: var(--db-azul);
	color: var(--db-claro);
}

.db-tarjeta--oscura :where(h2, h3, h4, a) {
	color: var(--db-blanco);
}

.db-tarjeta--oscura .db-tarjeta__numero,
.db-tarjeta--oscura .db-mas,
.db-tarjeta--oscura .db-enlace-fuerte a {
	color: var(--db-acento);
}

.db-tarjeta__foto {
	margin: calc(-1 * clamp(22px, 3vw, 30px)) calc(-1 * clamp(22px, 3vw, 30px)) 4px !important;
}

.db-tarjeta__foto img {
	width: 100%;
	height: 170px;
	border-radius: var(--db-radio) var(--db-radio) 0 0;
}

.db-tarjeta__numero {
	font-family: var(--db-titulos);
	font-weight: 700;
	color: var(--db-accion);
}

.db-tarjeta__titulo {
	font-size: 21px;
}

.db-tarjeta__titulo a {
	color: inherit;
	text-decoration: none;
}

.db-tarjeta ul,
.db-tarjeta ol {
	padding-inline-start: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	line-height: 1.45;
}

/* Tarjeta clicable: el enlace del título cubre toda la tarjeta. */
.db-tarjeta--enlace {
	position: relative;
	transition: box-shadow 0.2s, transform 0.2s;
}

.db-tarjeta--enlace .db-tarjeta__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.db-tarjeta--enlace:hover {
	box-shadow: var(--db-sombra);
}

.db-tarjeta--enlace:focus-within {
	outline: 2px solid var(--db-accion);
	outline-offset: 2px;
}

.db-tarjeta--enlace .db-tarjeta__titulo a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: no-preference) {
	.db-tarjeta--enlace:hover {
		transform: translateY(-2px);
	}
}

.db-modalidad {
	border-top: 3px solid var(--db-marca);
	padding-top: 16px;
}

.db-modalidad--azul {
	border-top-color: var(--db-azul);
}

.db-modalidad h3 {
	font-size: 19px;
	margin: 0 0 6px;
}

.db-modalidad p {
	margin: 0;
	font-size: 15px;
}

.db-mini-modulo,
.db-dato,
.db-capa {
	background: var(--db-fondo);
	border: 1px solid var(--db-borde);
	border-radius: 12px;
	padding: 18px 20px;
}

.db-seccion--azul .db-capa {
	background: var(--db-azul-medio);
	border-color: var(--db-azul-medio);
}

.db-mini-modulo > *,
.db-dato > *,
.db-capa > * {
	margin: 0;
}

.db-mini-modulo h3,
.db-dato h3,
.db-capa h3 {
	font-size: 17px;
	margin-block-end: 4px;
}

.db-mini-modulo p,
.db-dato p,
.db-capa p {
	font-size: 14px;
}

.db-seccion--blanca .db-dato {
	background: var(--db-fondo);
}

.db-plan__precio {
	font-family: var(--db-titulos);
	font-weight: 700;
	font-size: 22px;
	color: var(--db-azul);
}

.db-plan--destacado {
	border: 2px solid var(--db-accion);
}

.db-fichas {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.db-fichas li {
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 600;
	color: var(--db-azul);
}

.db-fichas--grandes li {
	border-radius: 14px;
	padding: 18px 20px;
	font-family: var(--db-titulos);
	font-weight: 700;
	font-size: 17px;
	flex: 1 1 160px;
	text-align: center;
}

.db-pasos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	padding-inline-start: 20px;
	margin-block-start: 28px;
	color: var(--db-claro);
}

.db-cuerpo-pilar > .db-bloque-pilar + .db-bloque-pilar {
	margin-block-start: var(--wp--preset--spacing--60);
}

.db-destacado {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px;
	align-items: center;
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: var(--db-radio);
	padding: clamp(20px, 3vw, 28px);
}

.db-destacado--oscuro {
	background: var(--db-azul);
	border-color: var(--db-azul);
	color: var(--db-claro);
}

.db-destacado--oscuro :where(h2, a) {
	color: var(--db-blanco);
}

.db-destacado--oscuro .db-mas {
	color: var(--db-acento);
}

.db-destacado__foto img {
	border-radius: 12px;
	width: 100%;
	max-height: 280px;
}

.db-destacado__texto > * + * {
	margin-block-start: 12px;
}

.db-aviso-cumplimiento,
.db-aviso-accion {
	background: #fbe9df;
	border-inline-start: 4px solid var(--db-accion);
	border-radius: 12px;
	padding: 20px 24px;
	margin-block-start: 24px;
}

.db-aviso-cumplimiento h3 {
	font-size: 18px;
	margin: 0 0 6px;
}

.db-aviso-cumplimiento p {
	margin: 0;
	color: var(--db-texto);
}

.db-aviso-accion {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	justify-content: space-between;
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-inline-start: 4px solid var(--db-accion);
	margin-block-start: var(--wp--preset--spacing--60);
}

.db-bpo > * + * {
	margin-block-start: 20px;
}

.db-graficos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px;
}

.db-grafico {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	cursor: zoom-in;
	height: 100%;
	box-sizing: border-box;
}

.db-grafico img {
	width: 100%;
	height: 230px;
	object-fit: contain;
}

.db-grafico__pie {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-family: var(--db-titulos);
	font-weight: 700;
	color: var(--db-azul);
}

.db-grafico__pie span + span {
	color: var(--db-accion);
	font-size: 14px;
	font-family: var(--wp--preset--font-family--manrope);
}

/* ---------- Visor ampliado ---------- */

.db-visor {
	border: 0;
	padding: 24px;
	background: transparent;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.db-visor::backdrop {
	background: rgba(0, 24, 72, 0.92);
}

.db-visor__figura {
	margin: 0 auto;
	max-width: 1200px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.db-visor__imagen {
	width: 100%;
	max-height: 82vh;
	object-fit: contain;
	background: var(--db-blanco);
	border-radius: 12px;
}

.db-visor__pie {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	color: var(--db-blanco);
}

.db-visor__cerrar {
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--db-blanco);
	background: transparent;
	color: var(--db-blanco);
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Carrusel de clientes ---------- */


.db-carrusel-logos.wp-block-gallery {
	gap: 12px !important;
}

.db-carrusel-logos .wp-block-image {
	width: 140px !important;
	height: 60px;
	flex: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 10px;
	padding: 6px;
	box-sizing: border-box;
	margin: 0 !important;
}

.db-carrusel-logos .wp-block-image img {
	max-height: 46px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	filter: grayscale(1);
	opacity: 0.85;
	transition: filter 0.2s, opacity 0.2s;
}

.db-carrusel-logos .wp-block-image:hover img,
.db-carrusel__ventana:focus-visible img {
	filter: none;
	opacity: 1;
}

.db-carrusel__barra {
	display: flex;
	justify-content: flex-end;
	margin-block: -56px 12px;
}

.db-carrusel__pausa,
.db-carrusel__flecha {
	min-height: 44px;
	min-width: 44px;
	border: 1px solid var(--db-borde);
	background: var(--db-blanco);
	color: var(--db-azul);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.db-carrusel__pausa {
	padding: 0 16px;
	border-radius: 8px;
	font-size: 14px;
}

.db-carrusel__flecha {
	width: 44px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	flex: none;
}

.db-carrusel__fila {
	display: flex;
	align-items: center;
	gap: 10px;
}

.db-carrusel__ventana {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	border-radius: 10px;
}

.db-carrusel--activo .db-carrusel-logos.wp-block-gallery {
	flex-wrap: nowrap !important;
	transition: transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.db-carrusel--activo .db-carrusel-logos.wp-block-gallery {
		transition: none;
	}
}

@media (max-width: 600px) {
	.db-carrusel__barra {
		margin-block-start: 0;
	}
}

/* ---------- Blog ---------- */

.db-tarjeta-blog {
	position: relative;
	background: var(--db-fondo);
	border: 1px solid var(--db-borde);
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.db-seccion:not(.db-seccion--blanca) .db-tarjeta-blog {
	background: var(--db-blanco);
}

.db-tarjeta-blog .wp-block-post-featured-image {
	margin: 0;
}

.db-tarjeta-blog__texto {
	padding: 20px 22px 24px;
}

.db-tarjeta-blog__texto > * {
	margin: 0;
}

.db-tarjeta-blog__texto > * + * {
	margin-block-start: 8px;
}

.db-tarjeta-blog__categoria {
	font-size: 13px;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

.db-tarjeta-blog__categoria a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -12px;
}

.db-tarjeta-blog__titulo {
	font-size: 19px;
}

.db-tarjeta-blog__titulo a {
	color: var(--db-azul);
	text-decoration: none;
}

.db-tarjeta-blog__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.db-tarjeta-blog:focus-within {
	outline: 2px solid var(--db-accion);
	outline-offset: 2px;
}

.db-tarjeta-blog:hover {
	box-shadow: var(--db-sombra);
}

.db-tarjeta-blog .wp-block-post-excerpt {
	font-size: 15px;
	color: var(--db-texto-suave);
}

.wp-block-query-pagination {
	margin-block-start: 32px;
	gap: 8px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.db-entrada {
	padding-block: var(--wp--preset--spacing--60);
}

.db-entrada__meta {
	gap: 6px;
	font-size: 14px;
	color: var(--db-texto-suave);
	align-items: center;
}

.db-entrada__meta > * {
	margin: 0;
}

.db-entrada .wp-block-post-featured-image img {
	border-radius: var(--db-radio);
}

.db-entrada .wp-block-post-content {
	font-size: 17px;
	line-height: 1.7;
}

.db-entrada .wp-block-post-content h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	margin-block-start: 1.6em;
}

/* ---------- Nosotros ---------- */

.db-linea {
	list-style: none;
	padding: 0;
	border-inline-start: 2px solid var(--db-borde);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.db-linea li {
	position: relative;
	padding-inline-start: 22px;
	color: var(--db-texto-suave);
}

.db-linea li::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--db-marca);
}

.db-linea__fecha {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--db-accion);
}

.db-linea strong {
	color: var(--db-azul);
	font-family: var(--db-titulos);
	font-size: 18px;
}

.db-organigrama {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 8px 0;
}

.db-organigrama__caja {
	background: var(--db-fondo);
	border: 1px solid var(--db-borde);
	border-radius: 12px;
	padding: 14px 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	position: relative;
}

.db-organigrama__caja strong {
	font-family: var(--db-titulos);
	color: var(--db-azul);
}

.db-organigrama__caja span {
	font-size: 14px;
	color: var(--db-texto-suave);
}

.db-organigrama__caja--principal {
	background: var(--db-azul);
	border-color: var(--db-azul);
}

.db-organigrama__caja--principal strong,
.db-organigrama__caja--principal span {
	color: var(--db-blanco);
}

.db-organigrama__caja--principal::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -29px;
	height: 28px;
	border-left: 2px solid var(--db-borde-campo);
}

.db-organigrama__ramas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	border-top: 2px solid var(--db-borde-campo);
	padding-top: 16px;
}

.db-tarjeta-legal {
	scroll-margin-top: 16px;
}

.db-tarjeta-legal h3 {
	font-size: 20px;
}

.db-tarjeta-legal h3:focus {
	outline: none;
}

.db-leer-mas,
.db-pregunta {
	margin: 0;
}

.db-leer-mas > summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--db-borde);
	border-radius: 8px;
	font-weight: 700;
	color: var(--db-accion);
	cursor: pointer;
	list-style: none;
}

.db-leer-mas > summary::-webkit-details-marker {
	display: none;
}

.db-leer-mas[open] > summary {
	margin-block-end: 12px;
}

.db-pregunta {
	border: 1px solid var(--db-borde);
	border-radius: 12px;
	padding: 0 20px;
	margin-block-start: 12px;
	background: var(--db-blanco);
}

.db-pregunta > summary {
	min-height: 56px;
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 17px;
	color: var(--db-azul);
	cursor: pointer;
}

.db-pregunta > p {
	color: var(--db-texto-suave);
	margin: 0 0 18px;
}

/* ---------- Franja de llamado a la acción ---------- */

.db-llamado {
	background: var(--db-accion);
	color: var(--db-blanco);
	padding-block: clamp(44px, 7vw, 64px);
}

.db-llamado h2 {
	color: var(--db-blanco);
	font-size: clamp(26px, 3vw, 36px);
}

.db-llamado p {
	color: var(--db-blanco);
	font-size: 17px;
	margin: 8px 0 0;
}

.db-llamado__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.db-llamado__texto {
	max-width: 640px;
}

.db-llamado__texto > * {
	margin: 0;
}

/* ---------- Pie ---------- */

.db-pie {
	background: var(--db-azul);
	color: var(--db-claro);
	padding-block: 56px 0;
	font-size: 15px;
	margin-block-start: 0;
}

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

.db-pie a:hover {
	color: var(--db-blanco);
	text-decoration: underline;
}

.db-pie__columnas {
	gap: 36px;
	padding-block-end: 40px;
}

.db-pie__logo {
	height: 84px;
	width: auto;
}

.db-pie__titulo {
	color: var(--db-blanco) !important;
	font-size: 16px !important;
	margin: 0 0 8px;
}

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

.db-pie__lista a,
.db-pie__contacto a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.db-pie__wana a {
	color: var(--db-acento);
	font-weight: 700;
}

.db-pie__contacto p {
	margin: 0 0 6px;
}

.db-pie__preferencias {
	min-height: 44px;
	margin-block-start: 6px;
	padding: 0 14px;
	background: transparent;
	color: var(--db-claro);
	border: 1px solid #8fa0c4;
	border-radius: 8px;
	font: inherit;
	cursor: pointer;
}

.db-pie__derechos {
	border-top: 1px solid var(--db-azul-medio);
	padding-block: 18px;
	font-size: 14px;
	color: var(--db-hielo);
	gap: 8px 24px;
}

.db-pie__derechos p {
	margin: 0;
}

.db-formulario-contenedor {
	max-width: 800px;
	margin-inline: auto;
}

.db-formulario-contenedor .db-texto-grande {
	margin-top: 8px;
	margin-bottom: 24px;
}

.db-formulario-pagina {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(28px, 5vw, 48px);
	align-items: start;
}

.db-formulario-pagina__texto > * + * {
	margin-block-start: 18px;
}

.db-formulario {
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: var(--db-radio);
	padding: clamp(20px, 4vw, 36px);
	scroll-margin-top: 16px;
}

@media (min-width: 960px) {
	.db-formulario-pagina {
		grid-template-columns: 1fr 1.4fr;
	}
}

.db-canales {
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 14px;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.db-canales h3 {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--db-texto-suave);
	margin: 0;
}

.db-canales p {
	margin: 0;
}

.db-canales a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.db-cf7 fieldset {
	border: 0;
	margin: 0 0 24px;
	padding: 0;
	min-width: 0;
}

.db-cf7 legend {
	font-family: var(--db-titulos);
	font-weight: 700;
	font-size: 20px;
	color: var(--db-azul);
	margin-block-end: 10px;
	padding: 0;
}

.db-campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 16px;
}

.db-campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
}

.db-campo--ancho {
	grid-column: 1 / -1;
}

.db-ayuda {
	font-size: 13px;
	font-weight: 400;
	color: var(--db-texto-suave);
	margin: 0;
}

.db-cf7 :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%;
	min-height: 46px;
	box-sizing: border-box;
	border: 1px solid var(--db-borde-campo);
	border-radius: 8px;
	padding: 0 12px;
	font: inherit;
	font-weight: 400;
	background: var(--db-blanco);
	color: var(--db-texto);
}

.db-cf7 textarea {
	padding: 12px;
	min-height: 120px;
	resize: vertical;
}

.db-cf7 input[type="file"] {
	min-height: 46px;
	font: inherit;
	font-weight: 400;
	max-width: 100%;
}

.db-cf7 :where(input, select, textarea):focus-visible {
	border-color: var(--db-accion);
	outline: 2px solid var(--db-accion);
	outline-offset: 1px;
}

.db-opciones .wpcf7-list-item {
	display: block;
	margin: 0;
}

.db-opciones .wpcf7-radio,
.db-opciones .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 10px;
}

.db-opciones label {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 44px;
	border: 1px solid var(--db-borde);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-sizing: border-box;
}

.db-opciones--simples label {
	border: 0;
	padding: 0;
	font-weight: 400;
}

.db-opciones input,
.db-autorizacion input {
	width: 22px;
	height: 22px;
	margin: 0;
	flex: none;
	accent-color: var(--db-accion);
}

.db-autorizacion {
	font-size: 14px;
	line-height: 1.5;
	color: var(--db-texto-suave);
	margin: 0 0 20px;
}

.db-autorizacion label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	cursor: pointer;
}

.db-cf7 .wpcf7-submit {
	min-height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: 10px;
	background: var(--db-accion);
	color: var(--db-blanco);
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
}

.db-cf7 .wpcf7-submit:hover {
	background: var(--db-accion-hover);
}

.db-cf7 .wpcf7-not-valid-tip {
	color: #b91c1c;
	font-size: 14px;
	font-weight: 600;
	margin-block-start: 4px;
}

.db-cf7 .wpcf7-not-valid {
	border-color: #b91c1c !important;
}

.db-cf7 .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: 8px;
	font-weight: 600;
}

.db-cf7.sent .wpcf7-response-output {
	border-color: #15803d !important;
	color: #15803d;
}

.db-cf7.invalid .wpcf7-response-output,
.db-cf7.failed .wpcf7-response-output,
.db-cf7.spam .wpcf7-response-output {
	border-color: #b91c1c !important;
	color: #b91c1c;
}

/* Campo trampa del antispam: invisible para personas, visible para robots. */
.db-trampa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Botones flotantes: WhatsApp encima del asistente ---------- */

.db-flotantes {
	display: none !important;
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
}

.db-flotantes > * {
	pointer-events: auto;
}

@media (min-width: 600px) {
	.db-flotantes {
		right: 24px;
		bottom: 24px;
	}
}

html.db-con-aviso-cookies .db-flotantes {
	bottom: calc(16px + var(--db-alto-aviso, 150px));
}

.db-flotante-wa {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--db-whatsapp); /* ícono blanco 4,14:1; borde 3,83:1 sobre fondo cálido */
	color: var(--db-blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 24, 72, 0.3);
}

.db-flotante-wa:hover {
	color: var(--db-blanco);
	background: #0f7a6e;
}

.db-flotante-wa .db-icono-wa {
	width: 30px;
	height: 30px;
}

.db-flotante-asistente {
	height: 56px;
	padding: 0 20px;
	border-radius: 999px;
	border: 0;
	background: var(--db-azul);
	color: var(--db-blanco);
	font: inherit;
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(0, 24, 72, 0.3);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
}

.db-flotante-asistente[hidden] {
	display: none;
}

.db-icono-chat {
	width: 22px;
	height: 22px;
	border: 2px solid var(--db-acento);
	border-radius: 50% 50% 50% 8px;
	box-sizing: border-box;
}

.db-asistente {
	width: 360px;
	max-width: calc(100vw - 32px);
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 24, 72, 0.22);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 180px);
}

.db-asistente[hidden] {
	display: none;
}

.db-asistente__cabecera {
	background: var(--db-azul);
	color: var(--db-blanco);
	padding: 10px 8px 10px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.db-asistente__titulo {
	font-size: 16px !important;
	color: var(--db-blanco) !important;
	margin: 0;
}

.db-asistente__subtitulo {
	font-size: 12px;
	color: var(--db-hielo);
	margin: 0;
}

.db-asistente__cerrar {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--db-blanco);
	font-size: 18px;
	cursor: pointer;
}

.db-asistente__mensajes {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 260px;
	overflow-y: auto;
	background: var(--db-fondo);
}

.db-msj {
	max-width: 85%;
	margin: 0;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.5;
}

.db-msj--bot {
	align-self: flex-start;
	background: var(--db-blanco);
	border: 1px solid var(--db-borde);
	border-radius: 12px 12px 12px 4px;
	color: var(--db-texto);
}

.db-msj--visitante {
	align-self: flex-end;
	background: var(--db-azul);
	color: var(--db-blanco);
	border-radius: 12px 12px 4px 12px;
}

.db-msj .db-wa {
	min-height: 0;
	display: inline;
}

.db-asistente__rapidas {
	padding: 10px 12px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.db-asistente__rapidas button {
	min-height: 44px; /* La auditoría encontró 36 px en el diseño. */
	padding: 0 12px;
	border: 1px solid var(--db-borde);
	border-radius: 999px;
	background: var(--db-blanco);
	color: var(--db-azul);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.db-asistente__form {
	padding: 10px 12px;
	display: flex;
	gap: 8px;
}

.db-asistente__form input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	border: 1px solid var(--db-borde-campo);
	border-radius: 8px;
	padding: 0 12px;
	font: inherit;
	font-size: 14px;
}

.db-asistente__form button {
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: var(--db-accion);
	color: var(--db-blanco);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.db-asistente__aviso {
	margin: 0;
	padding: 0 12px 12px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--db-texto-suave);
}

/* ---------- Aviso de cookies ---------- */

.db-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--db-blanco);
	border-top: 1px solid var(--db-borde);
	box-shadow: 0 -8px 24px rgba(0, 24, 72, 0.12);
	padding: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.db-cookies[hidden] {
	display: none;
}

.db-cookies p {
	margin: 0;
	max-width: 760px;
}

.db-cookies__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.db-cookies__botones button {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	border: 1.5px solid var(--db-azul);
	background: var(--db-blanco);
	color: var(--db-azul);
}

.db-cookies__botones button:first-child {
	background: var(--db-azul);
	color: var(--db-blanco);
}

/* ---------- Ajustes para 360 px ---------- */

@media (max-width: 400px) {
	.db-menu-principal .db-menu-cotizar > .wp-block-navigation-item__content {
		margin-inline-start: 0;
	}

	.db-acceso-pilar {
		padding: 14px;
	}

	.wp-block-button__link {
		padding-inline: 20px;
	}
}