/* ============================================================================
   adberg child · base-overrides.css
   ----------------------------------------------------------------------------
   Pequeños ajustes globales que Elementor no gestiona y que el design system
   define como obligatorios:
     · Selección violeta
     · Focus ring visible (regla de accesibilidad del DS)
     · Tipografía display sentence-case con tracking premium
     · Body bg/fg cogidos de los tokens
     · Utilidades helper para el hero (.adb-glow, .adb-eyebrow, .adb-editorial)
     · Marquee infinito CSS para sustituir embla en Elementor

   Cualquier ajuste por widget se hace desde Elementor (Custom CSS por elemento).
   ============================================================================ */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px; /* compensa la cabecera fija al saltar a anclas */
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv11";
}

/* Selección — violeta, blanco sobre violeta */
::selection {
	background: var(--violet-500);
	color: #FFFFFF;
}

/* Focus visible — sólo en navegación con teclado */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--violet-400);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/* Headings — display, sentence case, tracking negativo.
   Elementor inyecta sus propios estilos; subimos especificidad con .elementor-widget-heading. */
.elementor-widget-heading .elementor-heading-title,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	color: var(--fg);
	text-wrap: balance;
}

/* Display sizes — para el Hero principal usar la clase utilidad */
.adb-display-xl {
	font-size: var(--fs-display-xl) !important;
	line-height: var(--lh-tight) !important;
	letter-spacing: var(--ls-display) !important;
}

.adb-display-lg {
	font-size: var(--fs-display-lg) !important;
	line-height: var(--lh-tight) !important;
	letter-spacing: var(--ls-display) !important;
}

/* Eyebrow — mono uppercase con tracking 0.18em (regla del DS) */
.adb-eyebrow {
	font-family: var(--font-mono) !important;
	font-size: var(--fs-micro) !important;
	font-weight: 500 !important;
	letter-spacing: var(--ls-eyebrow) !important;
	text-transform: uppercase !important;
	color: var(--fg-muted) !important;
	display: inline-block;
}

/* Editorial italic — para los hero secundarios y citas */
.adb-editorial {
	font-family: var(--font-editorial) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: var(--lh-snug) !important;
}

/* Color helpers — para usar desde Elementor sin custom CSS por widget */
.adb-text-violet     { color: var(--violet-300) !important; }
.adb-text-muted      { color: var(--fg-muted) !important; }
.adb-text-faint      { color: var(--fg-faint) !important; }
.adb-bg-obsidian     { background-color: var(--obsidian-950) !important; }
.adb-bg-graphite     { background-color: var(--graphite-850) !important; }
.adb-bg-brand-soft   { background-color: var(--brand-soft) !important; }
.adb-border-soft     { border: 1px solid var(--border) !important; }
.adb-border-strong   { border: 1px solid var(--border-strong) !important; }

/* Violet glow — el "one violet moment per fold" del DS.
   Aplicar a un Inner Container vacío detrás del hero. */
.adb-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(160px);
	z-index: -1;
}
.adb-glow--primary {
	background: rgba(124, 92, 255, 0.16);
	width: 640px;
	height: 640px;
	top: -100px;
	right: -130px;
}
.adb-glow--secondary {
	background: rgba(73, 51, 184, 0.10);
	width: 420px;
	height: 420px;
	bottom: 0;
	left: -160px;
	filter: blur(180px);
}

/* CTA primario violeta — bótón Elementor con clase adb-cta-primary
   sobreescribe el estilo mínimo necesario; el resto se afina en Elementor. */
.adb-cta-primary .elementor-button,
.elementor-button.adb-cta-primary {
	background-color: var(--brand) !important;
	color: var(--fg-on-brand) !important;
	border-radius: var(--radius-sm) !important;
	transition: transform var(--dur-base) var(--ease-out-premium),
	            background-color var(--dur-base) var(--ease-out-premium),
	            box-shadow var(--dur-base) var(--ease-out-premium) !important;
}
.adb-cta-primary .elementor-button:hover,
.elementor-button.adb-cta-primary:hover {
	background-color: var(--brand-hover) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-violet);
}
.adb-cta-primary .elementor-button:active,
.elementor-button.adb-cta-primary:active {
	background-color: var(--brand-press) !important;
	transform: translateY(0);
}

/* CTA secundario outline */
.adb-cta-secondary .elementor-button,
.elementor-button.adb-cta-secondary {
	background-color: transparent !important;
	color: var(--fg) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: var(--radius-sm) !important;
	transition: border-color var(--dur-base) var(--ease-out-premium),
	            background-color var(--dur-base) var(--ease-out-premium) !important;
}
.adb-cta-secondary .elementor-button:hover,
.elementor-button.adb-cta-secondary:hover {
	border-color: var(--violet-400) !important;
	background-color: rgba(124, 92, 255, 0.06) !important;
}

/* Marquee infinito CSS — sustituye embla del Next.js.
   Aplicar a un Container con dirección row, overflow hidden, dentro
   un Inner Container con los logos repetidos 2x y la clase adb-marquee. */
.adb-marquee-track {
	display: flex;
	gap: var(--space-12);
	animation: adb-marquee 40s linear infinite;
	width: max-content;
}
@keyframes adb-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.adb-marquee-track img {
	max-height: 40px;
	width: auto;
	opacity: 0.9;
	filter: brightness(0) invert(1);
	transition: opacity var(--dur-base) var(--ease-out-premium),
	            filter var(--dur-base) var(--ease-out-premium);
}
.adb-marquee-track img:hover {
	opacity: 1;
	filter: brightness(1) invert(0);
}

/* Progress rail — 6 segmentos finos para los eyebrows de sección.
   El segmento activo va con data-active="true". Funciona en obsidian e ivory. */
.adb-rail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.adb-rail__seg {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--border-strong);
	transition: height var(--dur-base) var(--ease-out-premium),
	            background-color var(--dur-base) var(--ease-out-premium);
}
.adb-rail__seg[data-active="true"] {
	height: 2px;
	background: var(--violet-500);
}
[data-surface="editorial"] .adb-rail__seg[data-active="true"] {
	background: var(--violet-600);
}
@media (min-width: 768px) {
	.adb-rail__seg { width: 24px; }
}

/* Stats grid pattern — líneas verticales con máscara radial. Aplicar a un
   Inner Container absoluto detrás del Counter row en StatsBand. */
.adb-stats-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.35;
	background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 96px 100%;
	-webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
	        mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
}

/* Citation tile — pequeño tile violeta para el hero / answer-card */
.adb-citation {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--brand-soft);
	color: var(--brand-on-soft);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

/* Container max — sólo si quieres aplicar el ancho del DS sin tocar Site Settings */
.adb-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Reading column — 720 px para los bloques de texto editorial */
.adb-reading {
	max-width: var(--container-text);
	margin-inline: auto;
}

/* Section padding helper — equivalente a section-y del DS */
.adb-section {
	padding-block: var(--section-y);
}

/* Map embed — los iframes de Google Maps se ven mejor desaturados sobre obsidian */
.adb-map iframe {
	filter: grayscale(55%) contrast(0.92) saturate(0.85);
}

/* ============================================================================
   Helpers para el Template Kit de Elementor (adberg-home.json)
   ----------------------------------------------------------------------------
   El template solo aporta estructura + copy; el peso visual vive aquí para que
   los widgets queden limpios y editables. Todas usan tokens del DS.
   ============================================================================ */

/* Premium Counter (variante premium de StatsBand) — hereda el look del numero grande */
.adb-counter .premium-counter-area {
	font-family: var(--font-display) !important;
	font-weight: 500 !important;
	font-size: clamp(64px, 10vw, 120px) !important;
	line-height: 1 !important;
	letter-spacing: var(--ls-display) !important;
	color: var(--fg) !important;
}
.adb-counter .premium-counter-title {
	font-family: var(--font-mono) !important;
	font-size: var(--fs-micro) !important;
	font-weight: 500 !important;
	letter-spacing: var(--ls-eyebrow) !important;
	text-transform: uppercase !important;
	color: var(--violet-400) !important;
	margin-top: 16px !important;
}

/* Número grande de StatsBand */
.adb-stat-number {
	font-family: var(--font-display) !important;
	font-weight: 500 !important;
	font-size: clamp(64px, 10vw, 120px) !important;
	line-height: 1 !important;
	letter-spacing: var(--ls-display) !important;
	color: var(--fg) !important;
}
.adb-stat-label {
	font-family: var(--font-mono) !important;
	font-size: var(--fs-micro) !important;
	font-weight: 500 !important;
	letter-spacing: var(--ls-eyebrow) !important;
	text-transform: uppercase !important;
	color: var(--violet-400) !important;
}
.adb-note {
	font-family: var(--font-body) !important;
	font-size: var(--fs-caption) !important;
	color: var(--fg-faint) !important;
}

/* Card sobre superficie ivory (paper) */
.adb-card {
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 28px;
	box-shadow: var(--shadow-xs);
	transition: transform var(--dur-base) var(--ease-out-premium),
	            border-color var(--dur-base) var(--ease-out-premium),
	            box-shadow var(--dur-base) var(--ease-out-premium);
}
.adb-card:hover {
	transform: translateY(-1px);
	border-color: rgba(124, 92, 255, 0.35);
	box-shadow: var(--shadow-md);
}

/* Card sobre superficie obsidian (graphite) */
.adb-card-dark {
	background: var(--graphite-850);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 20px;
	transition: transform var(--dur-base) var(--ease-out-premium),
	            border-color var(--dur-base) var(--ease-out-premium),
	            box-shadow var(--dur-base) var(--ease-out-premium);
}
.adb-card-dark:hover {
	transform: translateY(-1px);
	border-color: rgba(124, 92, 255, 0.30);
	box-shadow: 0 18px 40px rgba(8, 7, 13, 0.45);
}

/* Badge violeta (disciplina en cards de casos) */
.adb-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(124, 92, 255, 0.30);
	background: rgba(124, 92, 255, 0.15);
	color: var(--violet-300);
	border-radius: var(--radius-pill);
	padding: 2px 12px;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

/* Blockquote editorial con borde violeta */
.adb-blockquote {
	border-left: 2px solid var(--violet-500);
	padding-left: 24px;
	margin: 0;
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 2.5vw, 30px);
	line-height: var(--lh-snug);
	color: var(--fg);
}
[data-surface="editorial"] .adb-blockquote { border-left-color: var(--violet-600); }

/* Número grande tenue de los pasos del método */
.adb-step-num {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(48px, 6vw, 72px);
	line-height: 1;
	color: rgba(102, 72, 232, 0.12);
}

/* Panel FAQ con tinte violeta */
.adb-faq-panel {
	border: 1px solid rgba(124, 92, 255, 0.15);
	background: rgba(124, 92, 255, 0.06);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-xs);
}
@media (min-width: 768px) {
	.adb-faq-panel { padding: 48px; }
}

/* Answer card del bloque de superficies IA */
.adb-answer {
	border: 1px solid var(--border-strong);
	background: rgba(244, 241, 255, 0.03);
	border-radius: var(--radius-md);
	padding: 20px;
}
.adb-answer__meta {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--fg-faint);
}
.adb-answer__brand { color: var(--violet-300); font-weight: 500; }

/* Estrellas amber */
.adb-stars { color: var(--signal-amber); letter-spacing: 2px; }

/* ============================================================================
   Cabecera (Theme Builder · adberg-header.json)
   ----------------------------------------------------------------------------
   El JSON aporta estructura + sticky de Elementor; el cristal, el cambio al
   hacer scroll y el estilo del menú viven aquí.
   ============================================================================ */

.adb-header {
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	        backdrop-filter: blur(18px) saturate(1.5);
	background-color: rgba(8, 7, 13, 0.55);
	border-bottom: 1px solid var(--border);
	transition: background-color var(--dur-slow) var(--ease-out-premium),
	            border-color var(--dur-slow) var(--ease-out-premium);
}
/* Estado al hacer scroll: Elementor añade .elementor-sticky--effects */
.adb-header.elementor-sticky--effects {
	background-color: rgba(8, 7, 13, 0.86);
	border-bottom-color: var(--border-strong);
}
.adb-header-inner {
	min-height: 64px;
	transition: min-height var(--dur-slow) var(--ease-out-premium);
}
.adb-header.elementor-sticky--effects .adb-header-inner {
	min-height: 56px;
}

/* Nav Menu de Elementor Pro sobre obsidian */
.adb-nav .elementor-nav-menu a {
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	color: var(--fg-muted);
	transition: color var(--dur-fast) var(--ease-out-premium),
	            background-color var(--dur-fast) var(--ease-out-premium);
}
.adb-nav .elementor-nav-menu > li > a {
	border-radius: var(--radius-xs);
	padding-block: 6px;
}
.adb-nav .elementor-nav-menu a:hover,
.adb-nav .elementor-nav-menu a.elementor-item-active,
.adb-nav .elementor-nav-menu a:focus {
	color: var(--fg);
	background-color: rgba(124, 92, 255, 0.08);
}
/* Submenú "Servicios" */
.adb-nav .elementor-nav-menu--dropdown,
.adb-nav .elementor-nav-menu ul.sub-menu {
	background-color: var(--obsidian-900);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	box-shadow: 0 30px 60px rgba(8, 7, 13, 0.5);
	padding: 8px;
}
.adb-nav .elementor-nav-menu ul.sub-menu a:hover {
	border-radius: var(--radius-xs);
}
/* Hamburguesa móvil */
.adb-nav .elementor-menu-toggle {
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	width: 40px;
	height: 40px;
}
.adb-nav .elementor-menu-toggle:hover {
	border-color: var(--violet-400);
	background-color: rgba(124, 92, 255, 0.08);
}
/* Dropdown a pantalla completa en móvil */
.adb-nav .elementor-nav-menu--dropdown {
	color: var(--fg);
}