/* ==========================================================================
   Digital Business — sistema visual sobre Divi
   --------------------------------------------------------------------------
   Portado del sitio estático digitalbusiness-home-v2_3.html.

   Orden del archivo:
     1. Tokens
     2. Base tipográfica (acotada a body.db-site)
     3. Titulares y textos
     4. Fondos de sección
     5. Botones
     6. Componentes de sección
     7. Estilos de los shortcodes propios
     8. Cabecera y pie de Divi
     9. Aparición
    10. Responsive

   Regla de oro: si un estilo se ve pisado, es un global de Divi ganando por
   especificidad. Se resuelve anteponiendo body.db-site al selector.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--db-ink: #1A1A1A;
	--db-ink-2: #5A6066;
	--db-paper: #FFFFFF;
	--db-paper-2: #F4F7F8;
	--db-line: #E2E7E9;
	--db-cyan: #0FA2DC;
	--db-green: #58C43C;
	--db-grad: linear-gradient(100deg, #0FA2DC 0%, #58C43C 100%);

	/* Los cinco pasos del degradé. Si cambiás --db-cyan/--db-green,
	   recalculá estos cinco: son la interpolación entre ambos. */
	--db-p1: #0FA2DC;
	--db-p2: #21ABB4;
	--db-p3: #34B38C;
	--db-p4: #46BC64;
	--db-p5: #58C43C;

	--db-display: "Archivo", system-ui, sans-serif;
	--db-body: "Public Sans", system-ui, sans-serif;
	--db-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ==========================================================================
   2. Base tipográfica
   ========================================================================== */

body.db-site {
	background: var(--db-paper);
	color: var(--db-ink);
	font-family: var(--db-body);
	font-size: 17px;
	line-height: 1.62;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

body.db-site #page-container {
	overflow-x: hidden;
}

body.db-site p {
	margin: 0 0 16px;
	padding-bottom: 0;
	line-height: 1.62;
}

body.db-site img {
	max-width: 100%;
	display: block;
}

body.db-site :focus-visible {
	outline: 3px solid var(--db-cyan);
	outline-offset: 3px;
}

/* Divi mete un padding por defecto en las filas y columnas que rompe las
   grillas del diseño original. Se neutraliza acá y se controla por sección. */
body.db-site .et_pb_row {
	padding: 0 !important;
	width: 90%;
	max-width: 1180px;
}

body.db-site .et_pb_column {
	margin-bottom: 0;
}

body.db-site .et_pb_section {
	padding: 0;
}

body.db-site .et_pb_module {
	margin-bottom: 0;
}

/* ==========================================================================
   3. Titulares y textos
   --------------------------------------------------------------------------
   !important porque Divi declara sus propios tamaños de encabezado en
   et_pb_text h1..h4 y gana por especificidad.
   ========================================================================== */

body.db-site .db-h1 h1,
body.db-site .db-h2 h2,
body.db-site .db-h3 h3,
body.db-site h1,
body.db-site h2,
body.db-site h3,
body.db-site h4 {
	font-family: var(--db-display) !important;
	font-weight: 800 !important;
	letter-spacing: -.035em !important;
	line-height: 1.02 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-transform: uppercase !important;
	color: var(--db-ink);
}

body.db-site .db-h1 h1 {
	font-size: clamp(40px, 6.4vw, 78px) !important;
}

body.db-site .db-h1 h1 span {
	display: block;
}

body.db-site .db-h2 h2 {
	font-size: clamp(30px, 4.4vw, 52px) !important;
}

body.db-site h3 {
	font-size: 20px !important;
	letter-spacing: -.02em !important;
	line-height: 1.15 !important;
}

body.db-site h4 {
	font-size: 15px !important;
	letter-spacing: -.01em !important;
}

/* Texto con el degradé de marca recortado */
body.db-site .db-grad-text {
	background: var(--db-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Bajada */
body.db-site .db-lead p {
	font-size: clamp(17px, 1.9vw, 20px);
	color: var(--db-ink-2);
	max-width: 58ch;
	font-weight: 300;
	margin: 0;
}

/* Volanta: monoespaciada, con la barrita del degradé adelante */
body.db-site .db-eyebrow p {
	font-family: var(--db-mono);
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--db-ink-2);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

body.db-site .db-eyebrow p::before {
	content: "";
	width: 26px;
	height: 3px;
	background: var(--db-grad);
	flex: none;
}

body.db-site .db-eyebrow-center p {
	justify-content: center;
}

/* Barra corta del degradé, debajo del h1 */
body.db-site .db-rule {
	height: 5px;
	background: var(--db-grad);
	width: 150px;
	margin: 26px 0;
}

/* Nota monoespaciada al pie de un bloque */
body.db-site .db-note p {
	font-family: var(--db-mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--db-ink-2);
	margin: 0;
	text-transform: uppercase;
}

/* ==========================================================================
   4. Fondos de sección
   ========================================================================== */

body.db-site .db-section {
	padding: 82px 0;
	border-top: 1px solid var(--db-line);
	background: var(--db-paper);
}

body.db-site .db-section-hero {
	padding: 80px 0 68px;
	border-top: 0;
	background: var(--db-paper);
	overflow: hidden;
}

/* Banda oscura: invierte todos los colores de texto */
body.db-site .db-section-dark {
	background: var(--db-ink);
	border-top: 0;
	padding: 82px 0;
}

body.db-site .db-section-dark h2,
body.db-site .db-section-dark h3,
body.db-site .db-section-dark h4 {
	color: #fff !important;
}

body.db-site .db-section-dark p {
	color: #B4BBC1;
	font-weight: 300;
}

body.db-site .db-section-dark .db-eyebrow p {
	color: #9AA1A7;
}

/* Sección clara del cierre */
body.db-site .db-section-cta {
	background: var(--db-paper-2);
	border-top: 1px solid var(--db-line);
	padding: 94px 0;
	text-align: center;
}

/* Divi le pone la clase et_pb_text_align_left a todo módulo Texto, con
   !important. En la sección de cierre hay que revertirlo. */
body.db-site .db-section-cta .et_pb_text,
body.db-site .db-section-cta .et_pb_text_inner {
	text-align: center !important;
}

body.db-site .db-section-cta .db-h2 h2 {
	max-width: 18ch;
	margin: 0 auto 18px !important;
}

body.db-site .db-section-cta .db-lead p {
	margin: 0 auto 30px;
}

body.db-site .db-section-cta .db-note p {
	margin-top: 26px;
	font-size: 11px;
	letter-spacing: .1em;
}

/* ==========================================================================
   5. Botones
   --------------------------------------------------------------------------
   Son enlaces dentro de un módulo Texto, no módulos Botón de Divi: eso permite
   ponerlos lado a lado con control real del espaciado (ver trampa 4 de la
   referencia). El :after es la flecha que Divi agrega en hover.
   ========================================================================== */

body.db-site .db-btn,
body.db-site .db-actions a {
	font-family: var(--db-display);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 22px;
	background: var(--db-ink);
	color: #fff;
	display: inline-block;
	border: 2px solid var(--db-ink);
	transition: transform .15s ease;
	line-height: 1.3;
}

body.db-site .db-actions a:hover,
body.db-site .db-btn:hover {
	transform: translateY(-2px);
}

/* Las variantes se escriben con a.clase para empatar en especificidad con
   ".db-actions a" y ganar por orden. Sin esto el botón degradado sale negro. */
body.db-site a.db-btn-grad,
body.db-site .db-actions a.db-btn-grad {
	background: var(--db-grad);
	border-color: transparent;
	color: #fff;
}

body.db-site a.db-btn-ghost,
body.db-site .db-actions a.db-btn-ghost {
	background: transparent;
	color: var(--db-ink);
}

body.db-site a.db-btn-ghost:hover,
body.db-site .db-actions a.db-btn-ghost:hover {
	background: var(--db-ink);
	color: #fff;
}

body.db-site .db-section-dark a.db-btn-ghost {
	color: #fff;
	border-color: #fff;
}

/* Divi envuelve el contenido del módulo Texto en .et_pb_text_inner, así que el
   flex tiene que ir ahí adentro y no sobre el módulo. */
body.db-site .db-actions {
	margin-top: 30px;
}

body.db-site .db-actions .et_pb_text_inner {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

body.db-site .db-actions-center .et_pb_text_inner {
	justify-content: center;
}

body.db-site .db-actions p {
	margin: 0;
}

/* La flecha del hover de Divi */
body.db-site .db-btn.et_pb_button:after,
body.db-site .db-btn-grad.et_pb_button:after,
body.db-site .db-btn-ghost.et_pb_button:after {
	display: none !important;
}

/* ==========================================================================
   6. Componentes de sección
   ========================================================================== */

/* --- Filas en grilla real ------------------------------------------------
   Divi maqueta las columnas con float + margen porcentual, y eso no reproduce
   las grillas del diseño (gaps fijos, columnas de igual alto). Estas clases se
   ponen en la Clase CSS de la FILA y la convierten en un grid CSS. Las columnas
   de adentro siguen siendo columnas Divi normales y editables.
   -------------------------------------------------------------------------- */

body.db-site .db-grid-2 .et_pb_column,
body.db-site .db-grid-3 .et_pb_column,
body.db-site .db-grid-4 .et_pb_column,
body.db-site .db-hero-row .et_pb_column,
body.db-site .db-split .et_pb_column,
body.db-site .db-band-grid .et_pb_column,
body.db-site .db-duo .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

body.db-site .db-grid-2,
body.db-site .db-grid-3,
body.db-site .db-grid-4,
body.db-site .db-hero-row,
body.db-site .db-split,
body.db-site .db-band-grid,
body.db-site .db-duo {
	display: grid !important;
}

/* Divi limpia los floats con ::before/::after. En un contenedor grid esos
   pseudoelementos se convierten en celdas fantasma y descolocan la grilla. */
body.db-site .db-grid-2::before,
body.db-site .db-grid-2::after,
body.db-site .db-grid-3::before,
body.db-site .db-grid-3::after,
body.db-site .db-grid-4::before,
body.db-site .db-grid-4::after,
body.db-site .db-hero-row::before,
body.db-site .db-hero-row::after,
body.db-site .db-split::before,
body.db-site .db-split::after,
body.db-site .db-band-grid::before,
body.db-site .db-band-grid::after,
body.db-site .db-duo::before,
body.db-site .db-duo::after {
	content: none !important;
	display: none !important;
}

body.db-site .db-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 56px; }
body.db-site .db-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 34px; }
body.db-site .db-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 26px; }

/* Las tres proporciones propias del diseño original */
body.db-site .db-hero-row {
	grid-template-columns: 1.08fr .92fr;
	gap: 60px;
	align-items: center;
}

body.db-site .db-split {
	grid-template-columns: .85fr 1.15fr;
	gap: 56px;
}

body.db-site .db-band-grid {
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* Separación entre la fila del titular y la grilla que le sigue */
body.db-site .db-mt-40 { margin-top: 40px !important; }
body.db-site .db-mt-44 { margin-top: 44px !important; }
body.db-site .db-mt-34 { margin-top: 34px !important; }

/* --- "Por qué se traba": lista de verdades con línea divisoria ----------- */

body.db-site .db-truths {
	border-top: 2px solid var(--db-ink);
}

body.db-site .db-truth {
	padding: 22px 0;
	border-bottom: 1px solid var(--db-line);
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 28px;
	align-items: start;
}

body.db-site .db-truth p {
	margin: 0;
	color: var(--db-ink-2);
	font-weight: 300;
}

/* --- Personas (Quiénes somos) ------------------------------------------- */

body.db-site .db-duo {
	grid-template-columns: repeat(2, 1fr);
	background: var(--db-line);
	border: 1px solid var(--db-line);
	margin-top: 40px !important;
	gap: 1px;
}

body.db-site .db-person {
	background: #fff;
	padding: 34px 30px;
	height: 100%;
}

body.db-site .db-person::before {
	content: "";
	display: block;
	height: 5px;
	width: 64px;
	margin-bottom: 22px;
	background: var(--db-grad);
}

body.db-site .db-person .db-role {
	font-family: var(--db-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--db-ink-2);
	margin: 6px 0 16px;
}

body.db-site .db-person p:last-child {
	margin: 0;
	color: var(--db-ink-2);
	font-weight: 300;
}

/* --- Pasos (Cómo trabajamos) -------------------------------------------- */

body.db-site .db-step .db-n {
	font-family: var(--db-display);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .06em;
	padding-bottom: 12px;
	border-bottom: 3px solid;
	border-image: var(--db-grad) 1;
	margin-bottom: 16px;
	display: block;
	text-transform: uppercase;
}

body.db-site .db-step h3 {
	font-size: 17px !important;
	margin-bottom: 7px !important;
}

body.db-site .db-step p {
	margin: 0;
	font-size: 15.5px;
	color: var(--db-ink-2);
	font-weight: 300;
}

/* --- Motivos (grilla de seis) ------------------------------------------- */

body.db-site .db-why h4 {
	margin-bottom: 8px !important;
	font-size: 16px !important;
}

body.db-site .db-why h4::before {
	content: "";
	display: block;
	height: 4px;
	width: 38px;
	background: var(--db-grad);
	margin-bottom: 14px;
}

body.db-site .db-why p {
	margin: 0;
	font-size: 15.5px;
	color: var(--db-ink-2);
	font-weight: 300;
}

/* ==========================================================================
   7. Shortcodes propios
   ========================================================================== */

/* --- [db_cadena] : el recorrido de una venta, en el hero ---------------- */

body.db-site .db-chain {
	background: var(--db-paper-2);
	border: 1px solid var(--db-line);
	padding: 26px;
}

body.db-site .db-chain-title {
	margin: 0 0 18px !important;
	color: var(--db-ink-2) !important;
	font-family: var(--db-mono) !important;
	font-weight: 400 !important;
	font-size: 11px !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
}

body.db-site .db-link {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 14px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--db-line);
	padding: 13px 16px;
	margin-bottom: 8px;
}

body.db-site .db-link:last-of-type {
	margin-bottom: 0;
}

body.db-site .db-link .db-ln {
	font-family: var(--db-display);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -.04em;
}

body.db-site .db-link strong {
	font-family: var(--db-display);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: -.01em;
	display: block;
	color: var(--db-ink);
}

body.db-site .db-link em {
	font-style: normal;
	font-size: 14.5px;
	color: var(--db-ink-2);
	font-weight: 300;
}

/* --- [db_pilares] : los cinco pilares con espina degradada -------------- */

body.db-site .db-pillars {
	margin-top: 46px;
	position: relative;
}

body.db-site .db-pillar {
	display: grid;
	grid-template-columns: 110px 1fr 1.1fr;
	gap: 34px;
	padding: 30px 0;
	border-bottom: 1px solid var(--db-line);
	align-items: start;
}

body.db-site .db-pillar:first-child {
	border-top: 2px solid var(--db-ink);
}

body.db-site .db-pnum {
	font-family: var(--db-display);
	font-weight: 800;
	font-size: 46px;
	line-height: .9;
	letter-spacing: -.05em;
}

body.db-site .db-pnum small {
	display: block;
	font-family: var(--db-mono);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--db-ink-2);
	margin-top: 10px;
}

body.db-site .db-pillar-1 .db-pnum { color: var(--db-p1); }
body.db-site .db-pillar-2 .db-pnum { color: var(--db-p2); }
body.db-site .db-pillar-3 .db-pnum { color: var(--db-p3); }
body.db-site .db-pillar-4 .db-pnum { color: var(--db-p4); }
body.db-site .db-pillar-5 .db-pnum { color: var(--db-p5); }

body.db-site .db-pillar h3 {
	margin-bottom: 8px !important;
}

body.db-site .db-pillar .db-what {
	margin: 0;
	color: var(--db-ink-2);
	font-weight: 300;
}

body.db-site .db-plist {
	list-style: none;
	padding: 0 !important;
	margin: 0;
	font-family: var(--db-mono);
	font-size: 12.5px;
	line-height: 2;
	color: var(--db-ink-2);
}

body.db-site .db-plist li {
	list-style: none;
	padding: 0;
}

body.db-site .db-plist li::before {
	content: "→ ";
	opacity: .55;
}

/* --- [db_stack] : la grilla de piezas de contenido ---------------------- */

body.db-site .db-stack {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

body.db-site .db-chip {
	border: 1px solid #34383D;
	padding: 16px 8px;
	text-align: center;
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	color: #8E969D;
}

body.db-site .db-chip-on {
	border-color: transparent;
	background: var(--db-grad);
	color: #fff;
	font-weight: 500;
}

body.db-site .db-stack-note {
	font-family: var(--db-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-top: 16px;
	color: #8E969D !important;
}

/* --- [db_casos] : grilla de casos de estudio ---------------------------- */

body.db-site .db-cases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--db-line);
	border: 1px solid var(--db-line);
	margin-top: 40px;
}

body.db-site .db-case {
	background: #fff;
	padding: 26px 24px;
}

body.db-site .db-case .db-k {
	font-family: var(--db-mono);
	font-size: 10.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--db-ink-2);
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 3px solid;
	border-image: var(--db-grad) 1;
}

body.db-site .db-case h3 {
	font-size: 18px !important;
	margin-bottom: 7px !important;
}

body.db-site .db-case p {
	margin: 0;
	font-size: 15.5px;
	color: var(--db-ink-2);
	font-weight: 300;
}

/* --- Aviso de dato faltante (lo muestran los shortcodes sin datos) ------ */

body.db-site .db-aviso {
	border: 1px dashed var(--db-cyan);
	background: #F4FBFE;
	color: var(--db-ink-2);
	font-family: var(--db-mono);
	font-size: 12.5px;
	padding: 18px 20px;
	margin: 0;
}

/* ==========================================================================
   8. Cabecera y pie de Divi
   --------------------------------------------------------------------------
   El sitio original tenía una barra pegajosa translúcida con el logo, cuatro
   enlaces y un botón de WhatsApp. Se reproduce sobre el header nativo de Divi
   para no perder el menú editable desde Apariencia → Menús.
   ========================================================================== */

body.db-site #main-header {
	background: rgba(255, 255, 255, .94) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--db-line);
	box-shadow: none !important;
	padding: 0;
}

body.db-site #main-header .container {
	padding: 14px 28px !important;
	width: 90%;
	max-width: 1180px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Divi posiciona el logo en absoluto para centrarlo vertical. Dentro de un
   contenedor flex eso lo saca del flujo y se monta sobre el menú. */
body.db-site #main-header .logo_container {
	position: relative !important;
	width: auto !important;
	height: auto !important;
	flex: none;
	display: flex;
	align-items: center;
}

body.db-site #main-header .logo_helper {
	display: none;
}

body.db-site #logo {
	max-height: 38px !important;
	height: 38px;
	width: auto;
	margin: 0;
}

/* El buscador de Divi no existe en el diseño original */
body.db-site #et_top_search,
body.db-site #et_search_icon {
	display: none !important;
}

body.db-site #et-top-navigation {
	padding-left: 0 !important;
	padding-top: 0 !important;
	float: none;
	display: flex;
	align-items: center;
}

body.db-site #top-menu {
	display: flex;
	gap: 26px;
	align-items: center;
}

body.db-site #top-menu li {
	padding-right: 0;
	margin: 0;
}

body.db-site #top-menu a {
	font-family: var(--db-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--db-ink-2) !important;
	padding-bottom: 0;
	opacity: 1;
}

body.db-site #top-menu a:hover {
	color: var(--db-ink) !important;
	opacity: 1;
}

/* El último ítem del menú es el botón de WhatsApp */
body.db-site #top-menu li.db-nav-cta a {
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .04em;
	padding: 13px 22px !important;
	background: var(--db-grad);
	color: #fff !important;
	border: 2px solid transparent;
	transition: transform .15s ease;
}

body.db-site #top-menu li.db-nav-cta a:hover {
	transform: translateY(-2px);
	color: #fff !important;
}

/* Divi marca el ítem de la página actual; acá molesta */
body.db-site #top-menu li.current-menu-item > a {
	color: var(--db-ink) !important;
}

body.db-site #main-header .et_mobile_menu {
	border-top: 3px solid var(--db-cyan);
}

/* Pie
   El pie nativo de Divi se oculta entero y se reemplaza por db_render_footer(),
   que se engancha en et_after_main_content. */
body.db-site #main-footer {
	display: none;
}

body.db-site .db-footer {
	background: var(--db-paper);
	border-top: 1px solid var(--db-line);
	padding: 40px 0 52px;
	font-family: var(--db-mono);
	font-size: 11.5px;
	color: var(--db-ink-2);
	letter-spacing: .05em;
}

body.db-site .db-footer-in {
	width: 90%;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

body.db-site .db-footer-in img {
	height: 30px;
	width: auto;
	opacity: .75;
}

/* ==========================================================================
   9. Aparición
   ========================================================================== */

body.db-site .db-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
}

body.db-site .db-reveal.db-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

/* --- Cabecera móvil ------------------------------------------------------
   Divi pasa al menú hamburguesa en 980px, pero las reglas de escritorio de
   este tema (#top-menu en flex) le ganan por especificidad y dejan el menú
   largo visible además del ícono. Acá se apaga a mano y la cabecera vuelve a
   ser una sola línea: logo a la izquierda, hamburguesa a la derecha.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	body.db-site #main-header .container {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px !important;
		width: 100%;
	}

	body.db-site #top-menu-nav,
	body.db-site #top-menu {
		display: none !important;
	}

	body.db-site #et-top-navigation {
		display: flex !important;
		align-items: center;
		padding: 0 !important;
		margin: 0;
		float: none;
	}

	body.db-site .et_mobile_nav_menu {
		float: none;
		margin: 0;
	}

	body.db-site #logo {
		height: 32px;
		max-height: 32px !important;
	}

	/* Desplegable: los ítems heredan la tipografía de marca y el último
	   sigue siendo el botón de WhatsApp, ahora a todo el ancho. */
	body.db-site .et_mobile_menu {
		border-top: 3px solid var(--db-cyan);
		padding: 0;
		background: #fff;
	}

	body.db-site .et_mobile_menu li a {
		font-family: var(--db-display);
		font-weight: 600;
		font-size: 13.5px;
		letter-spacing: .03em;
		text-transform: uppercase;
		color: var(--db-ink-2);
		border-bottom: 1px solid var(--db-line);
		padding: 16px 20px;
	}

	body.db-site .et_mobile_menu li a:hover {
		color: var(--db-ink);
		background: var(--db-paper-2);
		opacity: 1;
	}

	body.db-site .et_mobile_menu li.db-nav-cta a {
		background: var(--db-grad);
		color: #fff;
		font-weight: 700;
		text-align: center;
		border-bottom: 0;
	}
}

@media (max-width: 940px) {
	body.db-site .db-section,
	body.db-site .db-section-dark {
		padding: 60px 0;
	}
	body.db-site .db-grid-2,
	body.db-site .db-hero-row,
	body.db-site .db-split,
	body.db-site .db-band-grid,
	body.db-site .db-duo {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	body.db-site .db-duo {
		gap: 1px;
	}
	body.db-site .db-grid-3,
	body.db-site .db-grid-4 {
		grid-template-columns: 1fr 1fr;
	}
	body.db-site .db-cases {
		grid-template-columns: 1fr 1fr;
	}
	body.db-site .db-pillar {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 26px 0;
	}
	body.db-site .db-pnum {
		font-size: 34px;
	}
	body.db-site .db-pnum small {
		display: inline;
		margin-left: 12px;
	}
	body.db-site .db-truth {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* --- Teléfono ------------------------------------------------------------
   Todo a una columna y se recortan los aires pensados para pantalla grande.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	body.db-site .db-cases,
	body.db-site .db-grid-3,
	body.db-site .db-grid-4 {
		grid-template-columns: 1fr;
	}

	body.db-site .db-grid-3,
	body.db-site .db-grid-4 {
		gap: 30px;
	}

	body.db-site .db-stack {
		grid-template-columns: repeat(2, 1fr);
	}

	body.db-site .db-section,
	body.db-site .db-section-dark {
		padding: 48px 0;
	}

	body.db-site .db-section-hero {
		padding: 40px 0 48px;
	}

	body.db-site .db-section-cta {
		padding: 56px 0;
	}

	body.db-site .db-mt-44,
	body.db-site .db-mt-40 {
		margin-top: 30px !important;
	}

	body.db-site .db-mt-34 {
		margin-top: 30px !important;
	}

	body.db-site .db-chain {
		padding: 18px;
	}

	body.db-site .db-case {
		padding: 22px 20px;
	}

	body.db-site .db-person {
		padding: 26px 22px;
	}

	body.db-site .db-duo {
		margin-top: 30px !important;
	}

	body.db-site .db-cases {
		margin-top: 30px;
	}

	body.db-site .db-pillars {
		margin-top: 30px;
	}

	/* Botones apilados: a media pantalla quedan de anchos distintos y se ve
	   desprolijo. En teléfono van uno debajo del otro, a todo el ancho. */
	body.db-site .db-actions .et_pb_text_inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	body.db-site .db-actions a {
		text-align: center;
		padding: 15px 18px;
	}

	/* La volanta: el texto se parte en dos renglones y la barrita tiene que
	   quedar alineada con el primero, no centrada contra los dos. */
	body.db-site .db-eyebrow p {
		align-items: flex-start;
		line-height: 1.6;
	}

	body.db-site .db-eyebrow p::before {
		margin-top: 6px;
	}

	body.db-site .db-eyebrow-center p {
		align-items: center;
	}

	/* El pie pasa de tres columnas a bloque centrado */
	body.db-site .db-footer {
		padding: 32px 0 40px;
	}

	body.db-site .db-footer-in {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.db-site * {
		transition: none !important;
		animation: none !important;
	}
	body.db-site .db-reveal {
		opacity: 1;
		transform: none;
	}
}

/* FOTOS SIN FONDO */
.foto-sin-fondo {
	background-color: transparent !important;
}

/* =============================================================================
   BOTONES NATIVOS DE DIVI — sección oscura (#contenido)
   -----------------------------------------------------------------------------
   Acá los botones son módulos Botón de Divi, no <a> dentro de un módulo Texto,
   así se editan desde el Builder. Divi envuelve cada uno en su propio
   .et_pb_button_module_wrapper, que es un div de bloque: sin estas reglas
   quedarían siempre uno debajo del otro.

   El ancho se resuelve con una consulta de contenedor sobre la columna, no con
   un breakpoint de pantalla. Mientras la columna tenga lugar, los dos van al
   lado con su ancho natural, como en producción. Cuando dejan de entrar, los
   dos pasan a ancho completo: así nunca quedan apilados y desparejos, que es
   lo que pasaba antes en ciertos anchos intermedios.
   ============================================================================= */

body.db-site #contenido .et_pb_column:first-of-type {
	container-type: inline-size;
}

/* Los dos llevan el mismo margen de arriba: al ir en la misma línea, sus cajas
   alinean por el borde superior y quedan parejos. Si el margen fuera solo del
   primero, el segundo subiría 30px. */
body.db-site #contenido .et_pb_button_module_wrapper {
	display: inline-block;
	vertical-align: top;
	margin: 30px 12px 0 0;
}

/* Divi le pone a sus botones borde redondeado, más interlínea y una transición
   sobre todas las propiedades. Los del hero no tienen nada de eso: son cuadrados
   y solo animan el desplazamiento. */
body.db-site #contenido .et_pb_button.db-btn {
	border-radius: 0;
	/* Divi declara line-height 1.7em con !important sobre .et_pb_button, y su CSS
	   por módulo redefine la transición. Sin !important el botón queda 5px más
	   alto que los del hero y anima todas las propiedades, no solo el desplazamiento. */
	line-height: 1.3 !important;
	transition: transform .15s ease !important;
}

/* En el hover, Divi agranda el padding para dejar lugar a su flecha, pisa el
   borde con transparente y suma un fondo translúcido. En el hero el hover es
   solo los 2px hacia arriba, así que se anula todo eso y se repone lo de cada
   variante. */
body.db-site #contenido .et_pb_button.db-btn:hover {
	padding: 13px 22px;
	border-width: 2px;
	border-style: solid;
	transform: translateY(-2px);
}

body.db-site #contenido .et_pb_button.db-btn-grad:hover {
	background: var(--db-grad);
	border-color: transparent;
	color: #fff;
}

body.db-site #contenido .et_pb_button.db-btn-ghost:hover {
	background: var(--db-ink);
	border-color: #fff;
	color: #fff;
}

@container (max-width: 520px) {
	body.db-site #contenido .et_pb_button_module_wrapper {
		display: block;
		width: 100%;
		margin: 12px 0 0 0;
	}

	/* Apilados, el que sigue al párrafo conserva la separación de la sección */
	body.db-site #contenido .et_pb_text + .et_pb_button_module_wrapper {
		margin-top: 30px;
	}

	body.db-site #contenido .et_pb_button_module_wrapper .et_pb_button {
		display: block;
		width: 100%;
		text-align: center;
	}
}