/* =================================================================
   OBELUM LABS — sistema de diseño
   -----------------------------------------------------------------
   Este fichero NO maqueta páginas. Aporta:
     1. Los tokens de marca (colores, tipografía, radios, easing).
     2. Clases de utilidad que se aplican desde Elementor, en
        Avanzado → Clases CSS de cualquier sección o widget.

   Al montar una página nueva en Elementor solo hay que escribir el
   nombre de la clase en ese campo. Todo lo demás sale solo.
   ================================================================= */

/* ---------- Tipografía propia ------------------------------------ */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
	     url("../fonts/Inter-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ---------- Tokens ----------------------------------------------- */
:root {
	--obelum-abismo:      #0A1325;
	--obelum-noche:       #070D1C;
	--obelum-profundo:    #0F2042;
	--obelum-cobalto:     #1E5BFF;
	--obelum-cobalto-luz: #5B8CFF;
	--obelum-halo:        #9DB8FF;
	--obelum-blanco:      #FFFFFF;
	--obelum-gris-claro:  #C7D2E8;
	--obelum-niebla:      #A8B6D1;
	--obelum-linea:       rgba(91, 140, 255, 0.14);

	--obelum-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--obelum-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

	--obelum-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--obelum-radius-sm: 8px;
	--obelum-radius:    14px;
	--obelum-radius-lg: 28px;

	--obelum-header-h: 72px;
}

/* ---------- Base -------------------------------------------------- */
html {
	color-scheme: dark;
	scroll-behavior: smooth;
	/* Compensa el header fijo al saltar a un ancla (#metodo, #resultados…). */
	scroll-padding-top: calc(var(--obelum-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	font-family: var(--obelum-sans);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--obelum-gris-claro);
	background-color: var(--obelum-abismo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--obelum-blanco);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

:focus-visible {
	outline: 2px solid var(--obelum-cobalto-luz);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: rgba(30, 91, 255, 0.45);
	color: var(--obelum-blanco);
}

/* Elementor pinta un fondo blanco por defecto en el contenedor de página. */
.elementor-section,
.e-con,
.e-parent { background-color: transparent; }

/* =================================================================
   CLASES DE UTILIDAD — se escriben en Elementor → Avanzado → Clases CSS
   ================================================================= */

/* ---------- ob-seccion --------------------------------------------
   El respiro vertical estándar entre secciones. Aplicar al
   contenedor exterior de cualquier sección nueva para que herede
   el mismo ritmo que el resto de la web.
   ------------------------------------------------------------------ */
.ob-seccion { padding-block: clamp(4rem, 10vw, 7.5rem); }

/* El encabezado de sección (rótulo + titular + entradilla) no debe
   estirarse a todo lo ancho: se lee mal en pantallas grandes. */
.ob-seccion > .ob-eyebrow,
.ob-seccion > .ob-titular,
.ob-seccion > .ob-lead { max-width: 760px; }

.ob-seccion > .ob-lead { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- ob-fondo-noche ----------------------------------------
   Fondo alterno, un tono más oscuro. Para separar secciones
   consecutivas sin necesidad de líneas divisorias.
   ------------------------------------------------------------------ */
.ob-fondo-noche { background-color: var(--obelum-noche); }

/* ---------- ob-hero-meta ------------------------------------------
   La línea fina bajo los botones del hero
   ("Diagnóstico gratuito · Producción en menos de 4 semanas…").
   ------------------------------------------------------------------ */
.ob-hero-meta,
.ob-hero-meta p {
	font-size: 0.875rem;
	color: var(--obelum-niebla);
	letter-spacing: 0.02em;
	margin: 0;
}

/* ---------- ob-eyebrow --------------------------------------------
   El rótulo pequeño en mayúsculas sobre cada titular
   ("QUÉ HACEMOS", "MÉTODO"…). Aplicar a un widget de Texto.
   ------------------------------------------------------------------ */
.ob-eyebrow,
.ob-eyebrow p {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--obelum-cobalto-luz);
	margin: 0;
}

/* Variante con el punto pulsante delante (solo en el hero). */
.ob-eyebrow--punto p::before,
.ob-eyebrow--punto::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 0.6rem;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--obelum-cobalto-luz);
	box-shadow: 0 0 14px var(--obelum-cobalto-luz);
	animation: ob-pulse 2.4s var(--obelum-ease) infinite;
}

@keyframes ob-pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.4); opacity: 0.55; }
}

/* ---------- ob-titular / ob-lead ----------------------------------
   Escala tipográfica fluida. Se encoge sola en móvil, así que no
   hace falta configurar tamaños por dispositivo en Elementor.
   ------------------------------------------------------------------ */
.ob-titular-xl,
.ob-titular-xl .elementor-heading-title {
	font-size: clamp(2.6rem, 6vw, 4.25rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--obelum-blanco);
}

.ob-titular,
.ob-titular .elementor-heading-title {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--obelum-blanco);
}

.ob-lead,
.ob-lead p {
	font-size: 1.15rem;
	color: var(--obelum-niebla);
	max-width: 64ch;
}

/* ---------- ob-destacado ------------------------------------------
   La palabra en cursiva serif y azul dentro de un titular.
   En Elementor se escribe dentro del propio campo de texto:
   <span class="ob-destacado">resultados medibles</span>
   ------------------------------------------------------------------ */
.ob-destacado {
	color: var(--obelum-cobalto-luz);
	font-style: italic;
	font-family: var(--obelum-serif);
	font-weight: 400;
}

/* ---------- ob-btn ------------------------------------------------
   Botones. Aplicar a un widget de Botón de Elementor.
   ob-btn-primario = azul relleno · ob-btn-fantasma = borde sutil
   ------------------------------------------------------------------ */
.ob-btn .elementor-button,
.ob-btn.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.9rem 1.4rem;
	font-family: var(--obelum-sans);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.2;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: transform .2s var(--obelum-ease),
	            box-shadow .25s var(--obelum-ease),
	            background-color .2s var(--obelum-ease),
	            border-color .2s var(--obelum-ease),
	            color .2s var(--obelum-ease);
	white-space: nowrap;
}

.ob-btn-primario .elementor-button {
	background-color: var(--obelum-cobalto);
	color: var(--obelum-blanco);
	box-shadow: 0 8px 24px -10px rgba(30, 91, 255, 0.6);
}

.ob-btn-primario .elementor-button:hover,
.ob-btn-primario .elementor-button:focus {
	background-color: var(--obelum-cobalto-luz);
	color: var(--obelum-blanco);
	transform: translateY(-1px);
	box-shadow: 0 14px 38px -10px rgba(91, 140, 255, 0.65);
}

.ob-btn-fantasma .elementor-button {
	background-color: transparent;
	color: var(--obelum-blanco);
	border-color: var(--obelum-linea);
}

.ob-btn-fantasma .elementor-button:hover,
.ob-btn-fantasma .elementor-button:focus {
	border-color: var(--obelum-cobalto-luz);
	color: var(--obelum-blanco);
	background-color: rgba(91, 140, 255, 0.06);
}

.ob-btn-grande .elementor-button { padding: 1.1rem 1.8rem; font-size: 1rem; }
.ob-btn-pequeno .elementor-button { padding: 0.65rem 1.1rem; font-size: 0.875rem; }

/* La flechita que avanza al pasar el ratón. */
.ob-btn .elementor-button-icon { transition: transform .25s var(--obelum-ease); }
.ob-btn .elementor-button:hover .elementor-button-icon { transform: translateX(3px); }

/* ---------- ob-hero -----------------------------------------------
   Contenedor del hero: alto de pantalla completa, halo azul de fondo
   y rejilla difuminada. Aplicar al contenedor exterior.
   ------------------------------------------------------------------ */
.ob-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-block: calc(var(--obelum-header-h) + 3rem) 4rem;
	overflow: hidden;
	isolation: isolate;
}

/* El halo: un resplandor radial centrado arriba. */
.ob-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -10%;
	width: 1100px;
	height: 1100px;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 30%,
		rgba(91, 140, 255, 0.32) 0%,
		rgba(30, 91, 255, 0.12) 30%,
		transparent 65%);
	filter: blur(20px);
	pointer-events: none;
	z-index: -1;
}

/* La rejilla técnica, con máscara para que se desvanezca por los bordes. */
.ob-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(157, 184, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(157, 184, 255, 0.06) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 65%);
	-webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 65%);
	opacity: 0.5;
	pointer-events: none;
	z-index: -1;
}

/* La firma luminosa de la esquina inferior derecha. */
.ob-hero-firma {
	position: absolute;
	right: -40px;
	bottom: -20px;
	width: min(46vw, 600px);
	pointer-events: none;
	opacity: 0.85;
	z-index: -1;
}

@media (max-width: 880px) {
	.ob-hero-firma { display: none; }
}

/* ---------- ob-tarjeta --------------------------------------------
   Las tres tarjetas de "Qué hacemos". Aplicar a cada contenedor
   interno. El resplandor sigue al cursor (lo mueve obelum.js).
   ------------------------------------------------------------------ */
.ob-tarjeta {
	position: relative;
	padding: 2rem;
	background: linear-gradient(180deg,
		rgba(15, 32, 66, 0.55) 0%,
		rgba(15, 32, 66, 0.25) 100%);
	border: 1px solid var(--obelum-linea);
	border-radius: var(--obelum-radius-lg);
	overflow: hidden;
	transition: transform .35s var(--obelum-ease), border-color .35s var(--obelum-ease);
	--mx: 50%;
	--my: 50%;
}

.ob-tarjeta::before {
	content: "";
	position: absolute;
	inset: -1px;
	background: radial-gradient(circle at var(--mx) var(--my),
		rgba(91, 140, 255, 0.18) 0%, transparent 45%);
	opacity: 0;
	transition: opacity .35s var(--obelum-ease);
	pointer-events: none;
}

.ob-tarjeta:hover {
	border-color: rgba(91, 140, 255, 0.35);
	transform: translateY(-2px);
}

.ob-tarjeta:hover::before { opacity: 1; }

/* Los títulos dentro de tarjetas y pasos: más contenidos que un h3
   suelto, para que no compitan con el titular de la sección. */
.ob-tarjeta h3,
.ob-paso h3 {
	font-size: 1.25rem;
	margin-bottom: 0.65rem;
}

/* Los iconos de línea de cada tarjeta. */
.ob-tarjeta .elementor-icon,
.ob-icono {
	color: var(--obelum-cobalto-luz);
	fill: none;
	stroke: currentColor;
}

.ob-icono svg { width: 48px; height: 48px; }

/* ---------- ob-caja -----------------------------------------------
   El recuadro que envuelve las métricas: mismo lenguaje que las
   tarjetas pero sin hover, para bloques de datos.
   ------------------------------------------------------------------ */
.ob-caja {
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	background: linear-gradient(180deg,
		rgba(15, 32, 66, 0.4) 0%,
		rgba(15, 32, 66, 0.15) 100%);
	border: 1px solid var(--obelum-linea);
	border-radius: var(--obelum-radius-lg);
}

/* ---------- ob-metrica --------------------------------------------
   Cifras grandes. El número cuenta desde cero al entrar en pantalla:
   se activa poniendo data-count-to="70" en Avanzado → Atributos
   personalizados del widget que contiene la cifra.
   ------------------------------------------------------------------ */
.ob-metrica,
.ob-metrica .elementor-heading-title {
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--obelum-blanco);
}

/* El signo y la unidad (−, %, ×, sem) van en azul. */
.ob-metrica-signo,
.ob-metrica-unidad {
	color: var(--obelum-cobalto-luz);
}

.ob-metrica-unidad { font-weight: 500; }

.ob-metrica-etiqueta,
.ob-metrica-etiqueta p {
	margin-top: 0.85rem;
	color: var(--obelum-niebla);
	font-size: 0.95rem;
	max-width: 30ch;
}

/* ---------- ob-paso -----------------------------------------------
   Las tres fases del método, separadas por una línea vertical fina.
   ------------------------------------------------------------------ */
.ob-paso-fase,
.ob-paso-fase p {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--obelum-cobalto-luz);
	margin: 0 0 1rem;
}

@media (min-width: 880px) {
	.ob-paso {
		padding-inline: 2rem;
		border-left: 1px solid var(--obelum-linea);
	}
	/* La primera columna no lleva línea a su izquierda. */
	.ob-paso:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------- ob-cta ------------------------------------------------
   El recuadro azul de llamada a la acción del final, con el
   resplandor que respira.
   ------------------------------------------------------------------ */
.ob-cta {
	position: relative;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 3.5rem);
	border-radius: var(--obelum-radius-lg);
	background:
		radial-gradient(circle at 80% 20%, rgba(30, 91, 255, 0.45) 0%, transparent 55%),
		linear-gradient(180deg, var(--obelum-profundo) 0%, rgba(15, 32, 66, 0.6) 100%);
	border: 1px solid rgba(91, 140, 255, 0.25);
	overflow: hidden;
	text-align: center;
}

.ob-cta::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at 50% 50%,
		rgba(91, 140, 255, 0.18) 0%, transparent 55%);
	animation: ob-breathe 6s var(--obelum-ease) infinite;
	pointer-events: none;
}

@keyframes ob-breathe {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

/* El contenido debe quedar por encima del resplandor. */
.ob-cta > * { position: relative; z-index: 1; }

/* Dentro del CTA el texto va centrado y con ancho limitado. */
.ob-cta .ob-lead,
.ob-cta .ob-lead p {
	margin-inline: auto;
	text-align: center;
}

/* ---------- ob-banda ----------------------------------------------
   Tira horizontal con filete arriba y abajo (la de confianza).
   ------------------------------------------------------------------ */
.ob-banda {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--obelum-linea);
	border-bottom: 1px solid var(--obelum-linea);
}

.ob-banda-etiqueta,
.ob-banda-etiqueta p {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--obelum-niebla);
	margin: 0;
}

/* ---------- ob-reveal ---------------------------------------------
   Aparición suave al hacer scroll. Aplicar a cualquier elemento.

   Para escalonar hermanos, añadir además ob-delay-80, ob-delay-160…
   Se usan clases y no atributos porque los atributos personalizados
   de Elementor son función de la versión Pro: en la gratuita se
   descartan en silencio y el escalonado no llegaría a la página.
   ------------------------------------------------------------------ */
.ob-delay-80  { --reveal-delay:  80; }
.ob-delay-160 { --reveal-delay: 160; }
.ob-delay-240 { --reveal-delay: 240; }
.ob-delay-320 { --reveal-delay: 320; }

.ob-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s var(--obelum-ease), transform .8s var(--obelum-ease);
	transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}

.ob-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* =================================================================
   HEADER — construido con el plugin HFE (Header, Footer & Blocks)
   ================================================================= */

/* El header flota sobre el hero y solo se opaca al bajar. */
.ehf-header .ob-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	background-color: transparent;
	transition: background-color .3s var(--obelum-ease),
	            border-color .3s var(--obelum-ease),
	            backdrop-filter .3s var(--obelum-ease);
}

.ehf-header .ob-header.is-scrolled {
	background-color: rgba(7, 13, 28, 0.78);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom-color: var(--obelum-linea);
}

/* Menú de navegación: subrayado que crece desde la izquierda. */
.ob-menu .hfe-nav-menu__layout-horizontal .menu-item > a {
	position: relative;
	font-size: 0.95rem;
	color: var(--obelum-gris-claro);
	transition: color .2s var(--obelum-ease);
}

.ob-menu .menu-item > a:hover { color: var(--obelum-blanco); }

.ob-menu .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--obelum-cobalto-luz);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--obelum-ease);
}

.ob-menu .menu-item > a:hover::after { transform: scaleX(1); }

/* =================================================================
   FOOTER
   ================================================================= */
.ob-footer {
	border-top: 1px solid var(--obelum-linea);
	background-color: var(--obelum-noche);
	padding-block: 3rem 2rem;
}

.ob-footer,
.ob-footer p,
.ob-footer a {
	font-size: 0.9rem;
	color: var(--obelum-niebla);
}

.ob-footer a { transition: color .2s var(--obelum-ease); }
.ob-footer a:hover { color: var(--obelum-blanco); }

/* =================================================================
   MOVIMIENTO REDUCIDO
   Si el sistema del visitante lo pide, se apaga toda la animación.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.ob-reveal { opacity: 1; transform: none; }
	.ob-cta::before { animation: none; opacity: 0.7; }
	.ob-eyebrow--punto::before,
	.ob-eyebrow--punto p::before { animation: none; }
}