/* =================================================================
   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 ------------------------------------
   Libre Franklin para todo, Bodoni Moda en cursiva para las palabras
   que rematan una frase.

   Antes había aquí Inter e Instrument Serif. Las dos están en la lista
   de caras sobreexpuestas: Inter es la de la primera hornada de webs
   generadas con IA, e Instrument la de la segunda. Cambiar una por la
   otra habría sido cambiar de uniforme, no salir del uniforme.

   Solo se sirve el subconjunto latino, que es el que cubre el
   castellano; los demás eran peso muerto en cada visita.            */
@font-face {
	font-family: "Libre Franklin";
	src: url("../fonts/LibreFranklin-Variable.woff2") format("woff2-variations"),
	     url("../fonts/LibreFranklin-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/BodoniModa-Italic.woff2") format("woff2-variations"),
	     url("../fonts/BodoniModa-Italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* ---------- Tokens ----------------------------------------------- */
:root {
	/* Fondos. Ni un negro puro: el tinte cálido es lo que separa esto
	   del azul marino de manual y lo que hace que el ámbar no chirríe. */
	--obelum-tinta:       #14110F;
	--obelum-tinta-honda: #0C0A09;
	--obelum-sepia:       #241D17;

	/* Acentos. El cobre manda en lo sólido (botones); el ámbar, en lo
	   fino (rótulos, números, filetes). */
	--obelum-brasa:       #C9662E;
	--obelum-ambar:       #E9A23B;
	--obelum-ambar-luz:   #F3C177;

	/* Textos. El "blanco" es hueso: el blanco puro sobre fondo oscuro
	   deslumbra y es otro de los tics de interfaz hecha con IA. */
	--obelum-hueso:       #F6F1EA;
	--obelum-lino:        #D8CFC4;
	--obelum-ceniza:      #A2968A;

	--obelum-linea:       rgba(246, 241, 234, 0.13);

	--obelum-sans:  "Libre Franklin", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
	--obelum-serif: "Bodoni Moda", 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-lino);
	background-color: var(--obelum-tinta);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

/* Elementor genera una hoja propia por página (post-NN.css) que pinta
   los encabezados con los colores de su "Kit por defecto", que no son
   los de la marca. Esa regla usa dos clases y le gana a la
   de arriba, que solo usa la etiqueta. Añadiendo `body` delante subimos
   lo justo para recuperar el blanco, sin recurrir a !important.
   Si algún día quieres otro color en un titular concreto, cámbialo en
   Elementor: sus estilos por widget son más específicos y mandan. */
body .elementor-widget-heading .elementor-heading-title {
	color: var(--obelum-hueso);
}

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

::selection {
	background: rgba(201, 102, 46, 0.45);
	color: var(--obelum-hueso);
}

/* Hello Elementor imprime el título de la página encima del contenido.
   En una landing eso significa ver la palabra "Inicio" sobre el hero, y
   además crea un segundo H1 que compite con el titular de verdad: dos
   encabezados principales en la misma página confunden a los buscadores.
   Se oculta solo en páginas; en entradas de blog el título sí interesa. */
body.page .page-header { display: none; }

/* 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-tinta-honda); }

/* ---------- 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-ceniza);
	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-ambar);
	margin: 0;
}

/* Variante con el punto pulsante delante (solo en el hero).
   El :not(:has(p)) evita el punto doble: la clase se pone en el widget,
   pero el editor de texto mete un <p> dentro y antes disparaban los
   dos selectores a la vez. */
.ob-eyebrow--punto p::before,
.ob-eyebrow--punto:not(:has(p))::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 0.6rem;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--obelum-ambar);
	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-hueso);
}

.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-hueso);
}

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

/* ---------- ob-destacado ------------------------------------------
   La palabra en cursiva serif y en ámbar 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-ambar);
	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 = cobre relleno · ob-btn-fantasma = borde sutil
   ------------------------------------------------------------------ */

/* Sin esto los botones salen subrayados: Hello Elementor subraya todos
   los enlaces del contenido y un botón de Elementor es un <a>. */
.ob-btn .elementor-button,
.ob-btn .elementor-button:hover,
.ob-btn .elementor-button:focus { text-decoration: none; }

/* Que el botón mida lo que mide su texto y no se estire a todo el
   ancho de la columna. Se nota sobre todo en móvil, donde los botones
   del hero se apilan. */
.ob-btn { align-self: flex-start; }
.ob-cta .ob-btn { align-self: center; }

.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;
}

/* El `.elementor-element` de más no es decorativo: Elementor añade al
   final del documento una hoja en línea con los colores de su kit
   (`.elementor-widget-button .elementor-button`). Empata en prioridad
   con una regla de dos clases y gana por cargar después, así que el
   botón salía verde. Con esta clase extra subimos un escalón y manda
   el cobre de la marca.

   Sin halo de color: una sombra difusa y teñida alrededor de un botón
   sobre fondo oscuro es de los tics más reconocibles de las interfaces
   generadas con IA. La elevación se hace con una sombra neutra, como
   la de un objeto que proyecta sombra de verdad. */
.elementor-element.ob-btn-primario .elementor-button {
	background-color: var(--obelum-brasa);
	color: var(--obelum-hueso);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.elementor-element.ob-btn-primario .elementor-button:hover,
.elementor-element.ob-btn-primario .elementor-button:focus {
	background-color: var(--obelum-ambar);
	color: var(--obelum-tinta);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

/* ---------- Cualquier boton, naranja por defecto -------------------
   Hasta aqui el cobre dependia de que el widget llevara la clase
   `ob-btn-primario`. Un boton nuevo anadido desde el editor no la lleva,
   y entonces manda el acento del kit por defecto de Elementor, que es
   verde (#61CE70). De ahi que unos botones salieran naranjas y otros
   verdes sin motivo aparente.

   Aqui se invierte: el naranja de la marca es el comportamiento normal
   de cualquier boton, y solo las variantes declaradas a proposito
   (`ob-btn-fantasma`) se salen. El `:not` las excluye para que la regla
   general no las pise.                                               */
body[class*="elementor-kit-"] .elementor-element:not([class*="ob-btn-"]) .elementor-button {
	background-color: var(--obelum-brasa);
	color: var(--obelum-hueso);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body[class*="elementor-kit-"] .elementor-element:not([class*="ob-btn-"]) .elementor-button:hover,
body[class*="elementor-kit-"] .elementor-element:not([class*="ob-btn-"]) .elementor-button:focus {
	background-color: var(--obelum-ambar);
	color: var(--obelum-tinta);
}

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

.elementor-element.ob-btn-fantasma .elementor-button:hover,
.elementor-element.ob-btn-fantasma .elementor-button:focus {
	border-color: var(--obelum-ambar);
	color: var(--obelum-hueso);
	background-color: rgba(233, 162, 59, 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 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(233, 162, 59, 0.32) 0%,
		rgba(201, 102, 46, 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(243, 193, 119, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(243, 193, 119, 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(36, 29, 23, 0.55) 0%,
		rgba(36, 29, 23, 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(233, 162, 59, 0.18) 0%, transparent 45%);
	opacity: 0;
	transition: opacity .35s var(--obelum-ease);
	pointer-events: none;
}

.ob-tarjeta:hover {
	border-color: rgba(233, 162, 59, 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-ambar);
	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(36, 29, 23, 0.4) 0%,
		rgba(36, 29, 23, 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-hueso);
}

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

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

.ob-metrica-etiqueta,
.ob-metrica-etiqueta p {
	margin-top: 0.85rem;
	color: var(--obelum-ceniza);
	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-ambar);
	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 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(201, 102, 46, 0.45) 0%, transparent 55%),
		linear-gradient(180deg, var(--obelum-sepia) 0%, rgba(36, 29, 23, 0.6) 100%);
	border: 1px solid rgba(233, 162, 59, 0.25);
	overflow: hidden;
	text-align: center;
}

.ob-cta::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at 50% 50%,
		rgba(233, 162, 59, 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-ceniza);
	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.
   Sin ancestro `.ehf-header`: según la versión del plugin, la cabecera
   se envuelve en una etiqueta u otra, y exigir ese contenedor hacía que
   los estilos no se aplicaran. */
.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);
}

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

/* El logo, a una altura fija. La imagen original es grande y sin esto
   la cabecera se dispara de alto. */
.ob-header img {
	height: 36px;
	width: auto;
	max-width: none;
}

.ob-footer img { height: 32px; width: auto; max-width: none; }

/* Que el logo y el botón no se estiren: solo el menú del centro
   reparte el espacio sobrante. */
.ob-header > .elementor-widget-image,
.ob-header > .elementor-widget-button { flex: none; }

/* La cabecera flota sobre el hero, así que el contenido de las páginas
   interiores necesita despejar su altura. En la portada no hace falta:
   el hero ya reserva ese espacio en su propio relleno superior. */
body:not(.home) .ob-header + * { padding-top: var(--obelum-header-h); }

/* ---------- La cabecera en el móvil -------------------------------
   Elementor apila los contenedores en vertical por debajo de 768 px.
   En una cabecera fija eso es un desastre: pasaba de 72 a 179 px de
   alto, con el logo y el botón montados uno encima del otro.

   Aquí se mantiene en horizontal: logo a la izquierda, menú
   hamburguesa a la derecha. Elementor fija la dirección con un
   selector de tres clases, así que añadimos `body` delante para
   ganarle por un punto en lugar de recurrir a !important.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	body .ob-header.e-con.e-flex,
	body .ob-header.e-con.e-flex > .e-con-inner {
		--flex-direction: row;
		--align-items: center;
		--justify-content: space-between;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/* El botón de llamada se escondía aquí porque el logo, el menú y el
	   botón no cabían en los 370 px de la fila. Al quitar el menú sí
	   caben, y sin botón la cabecera móvil se quedaba con el logo solo. */

	.ob-header img { height: 30px; }

	/* El widget del menú reservaba 312 px de ancho para mostrar una
	   hamburguesa de 40. Con el logo al lado no cabían en los 370 de
	   la fila, se partía en dos líneas y la cabecera crecía hasta los
	   114 px. Que ocupe lo que realmente mide. */
	.ob-header .ob-menu,
	.ob-header .ob-menu > .elementor-widget-container {
		width: auto;
		flex: 0 0 auto;
	}

	/* Y que la fila no se parta bajo ningún concepto. */
	body .ob-header.e-con.e-flex > .e-con-inner { flex-wrap: nowrap; }

	/* La hamburguesa, pegada al borde derecho.
	   El plugin la centra con `margin: 0 auto`. Anular solo el margen
	   izquierdo no sirve de nada: mientras el derecho siga en `auto`,
	   los dos se reparten el hueco y queda centrada igual. Hay que
	   fijar el derecho a cero. */
	.ob-header .ob-menu .elementor-widget-container {
		display: flex;
		justify-content: flex-end;
	}

	.ob-header .ob-menu .hfe-nav-menu { justify-content: flex-end; }

	/* Este selector es largo a propósito. La alineación del widget de
	   menú es un ajuste de Elementor, y lo traduce a una regla con el
	   identificador del elemento:
	     .elementor-56 .elementor-element.elementor-element-XXXX .hfe-nav-menu__toggle
	   que son cuatro clases. Para ganarle hacen falta cinco. Lo suyo
	   sería cambiar ese ajuste en el editor, pero está enterrado y hay
	   que tocarlo solo en la vista de móvil; esto es más robusto y no
	   se pierde si alguien reinserta la plantilla. */
	body .ob-header .ob-menu.elementor-widget.elementor-widget-navigation-menu .hfe-nav-menu__toggle {
		margin-left: auto;
		margin-right: 0;
	}
}

/* Menú de navegación: subrayado que crece desde la izquierda.
   El selector lleva `.elementor-widget-navigation-menu` por lo mismo
   que los botones: la hoja en línea de Elementor pinta estos enlaces
   con el gris de su kit y hay que ganarle en prioridad. */
.ob-menu.elementor-widget-navigation-menu .menu-item a.hfe-menu-item {
	position: relative;
	font-size: 0.95rem;
	color: var(--obelum-lino);
	transition: color .2s var(--obelum-ease);
}

.ob-menu.elementor-widget-navigation-menu .menu-item a.hfe-menu-item:hover,
.ob-menu.elementor-widget-navigation-menu .menu-item a.hfe-menu-item:focus {
	color: var(--obelum-hueso);
	background-color: transparent;
}

.ob-menu .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--obelum-ambar);
	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-tinta-honda);
	padding-block: 3rem 2rem;
}

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

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

/* =================================================================
   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; }
}

/* =================================================================
   FASE 2 — LANDING DEL CUELLO DE BOTELLA
   -----------------------------------------------------------------
   Lenguaje visual propio, distinto del de la portada clonada: nada de
   tarjetas con halo ni iconos abstractos de tres en tres. Aquí manda
   la tipografía, la cifra y la línea fina. Lo que se dibuja se dibuja
   porque explica algo — la cadena de etapas es un diagrama, no adorno.
   ================================================================= */

/* ---------- Apertura ----------------------------------------------
   Sin rejilla ni resplandor: el argumento entra solo, alineado a la
   izquierda y con la frase incómoda a tamaño de titular.            */
.ob-apertura {
	padding-block: clamp(6rem, 14vw, 11rem) clamp(4rem, 9vw, 7rem);
	border-bottom: 1px solid var(--obelum-linea);
}

.ob-apertura > * { max-width: 940px; }

/* Espaciado explícito y no heredado del hueco por defecto de
   Elementor, que cambia según el kit activo. */
.ob-apertura .ob-lead { margin-block: 1.6rem 2.25rem; }
.ob-apertura .ob-byline { margin-top: 1.9rem; }

.ob-tesis,
.ob-tesis .elementor-heading-title {
	font-size: clamp(2.3rem, 6.2vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	font-weight: 600;
	text-wrap: balance;
}

/* La parte que remata la frase, en serif cursiva: el contraste hace
   que se lea como una voz y no como un eslogan de plantilla.        */
.ob-serif {
	font-family: var(--obelum-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--obelum-ambar-luz);
	letter-spacing: -0.01em;
}

/* Firma humana. Una web que promete diagnósticos sin nadie visible
   detrás parece una fachada.                                        */
.ob-byline,
.ob-byline p {
	font-size: 0.9375rem;
	color: var(--obelum-ceniza);
	letter-spacing: 0.01em;
	margin: 0;
}

.ob-byline strong { color: var(--obelum-lino); font-weight: 600; }

/* ---------- Cadena de las 6 etapas --------------------------------
   Rejilla de tres, unida por una línea fina que pasa por encima de
   los números. En móvil la línea se pone vertical y queda una
   cronología.                                                       */
.ob-etapas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem);
}

.ob-etapa {
	position: relative;
	padding-top: 2.75rem;
}

/* La línea que enhebra la cadena: nace en el número y recorre la
   celda. Al ser por celda, la rejilla la corta sola al final de
   cada fila.                                                        */
.ob-etapa::before {
	content: "";
	position: absolute;
	top: 0.72rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--obelum-linea);
}

.ob-etapa-num {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: var(--obelum-tinta);
	box-shadow: 0 0 0 1px var(--obelum-ambar);
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--obelum-ambar);
	letter-spacing: 0;
}

.ob-fondo-noche .ob-etapa-num { background: var(--obelum-tinta-honda); }

.ob-etapa-nombre {
	font-size: 1.375rem;
	line-height: 1.32;
	letter-spacing: -0.015em;
	margin: 0 0 0.5rem;
	color: var(--obelum-hueso);
}

.ob-etapa-texto {
	margin: 0;
	font-size: 0.9688rem;
	line-height: 1.62;
	color: var(--obelum-ceniza);
	max-width: 34ch;
}

@media (max-width: 900px) {
	.ob-etapas { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ob-etapas {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Cronología: la línea baja por la izquierda y los números la
	   van marcando.                                                  */
	.ob-etapa {
		padding: 0 0 2.25rem 2.75rem;
	}

	.ob-etapa::before {
		top: 0.35rem;
		bottom: 0;
		left: 0.72rem;
		right: auto;
		width: 1px;
		height: auto;
	}

	.ob-etapa:last-child::before { bottom: auto; height: 1.1rem; }

	.ob-etapa-num { top: 0; }
	.ob-etapa-texto { max-width: none; }
}

/* ---------- Cita ---------------------------------------------------
   La bisagra del argumento. Va sin caja y con mucho aire por arriba:
   viene justo después de la cadena de las seis etapas y necesita esa
   pausa para leerse como una conclusión y no como un pie de foto.
   El hueco de arriba es casi el doble que el de abajo a propósito —
   la frase pertenece a lo que acaba de terminar.                    */
.ob-cita {
	border-left: 2px solid var(--obelum-brasa);
	padding: 0.35rem 0 0.35rem clamp(1.25rem, 3vw, 2rem);
	margin-block: clamp(5rem, 11vw, 8.5rem) clamp(2.5rem, 5vw, 4rem);
	max-width: 780px;
}

.ob-cita,
.ob-cita p {
	font-family: var(--obelum-serif);
	font-style: italic;
	font-size: clamp(1.5rem, 3.4vw, 2.125rem);
	line-height: 1.34;
	color: var(--obelum-hueso);
}

/* El margen a cero es solo para los párrafos de dentro. Estaba puesto
   en el mismo bloque que la tipografía y, al ir después, borraba el
   `margin-block` de la propia cita: por eso nunca tuvo aire alrededor
   por mucho que se subieran los valores de arriba. */
.ob-cita p { margin: 0; }

/* ---------- Los 5 pasos de la Teoría de las Restricciones ----------
   Lista editorial con filetes, no tarjetas: es una secuencia, y una
   secuencia se lee de arriba abajo.                                 */
.ob-pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 820px;
	counter-reset: paso;
}

.ob-pasos li {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 0 1.25rem;
	align-items: baseline;
	padding-block: clamp(1.35rem, 2.6vw, 1.85rem);
	border-top: 1px solid var(--obelum-linea);
	counter-increment: paso;
}

.ob-pasos li:last-child { border-bottom: 1px solid var(--obelum-linea); }

.ob-pasos li::before {
	content: counter(paso);
	font-family: var(--obelum-serif);
	font-style: italic;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--obelum-ambar);
}

.ob-pasos h3 {
	font-size: 1.125rem;
	line-height: 1.35;
	margin: 0 0 0.3rem;
	color: var(--obelum-hueso);
	letter-spacing: -0.01em;
}

.ob-pasos p {
	margin: 0;
	max-width: 52ch;
	font-size: 0.9688rem;
	line-height: 1.62;
	color: var(--obelum-ceniza);
}

@media (max-width: 600px) {
	.ob-pasos li { grid-template-columns: 2.25rem 1fr; gap: 0 0.9rem; }
	.ob-pasos li::before { font-size: 1.75rem; }
}

/* ---------- Remate -------------------------------------------------
   La conclusión comercial. Va sola, centrada y con aire.            */
.ob-remate {
	border-top: 1px solid var(--obelum-linea);
	border-bottom: 1px solid var(--obelum-linea);
	padding-block: clamp(3rem, 7vw, 5rem);
	text-align: center;
}

.ob-remate .ob-titular,
.ob-remate .ob-titular .elementor-heading-title {
	font-size: clamp(1.75rem, 4.2vw, 2.75rem);
	max-width: 22ch;
	margin-inline: auto;
}

.ob-remate .ob-lead,
.ob-remate .ob-lead p {
	max-width: 60ch;
	margin-inline: auto;
}

/* ---------- Quién está detrás -------------------------------------- */
.ob-autor {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: start;
	max-width: 780px;
}

.ob-autor img {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	object-fit: cover;
	/* Retrato vertical con la cara en el tercio superior: centrado le
	   cortaria la frente. */
	object-position: 50% 25%;
	border: 1px solid var(--obelum-linea);
	display: block;
	background: var(--obelum-sepia);
}

/* Mientras no haya foto: un hueco con las iniciales, honesto y sin
   silueta genérica de banco de imágenes.                            */
.ob-autor-inicial {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--obelum-linea);
	font-family: var(--obelum-serif);
	font-style: italic;
	font-size: 2.5rem;
	color: var(--obelum-ambar);
}

.ob-autor h3 {
	margin: 0 0 0.15rem;
	font-size: 1.25rem;
	color: var(--obelum-hueso);
}

.ob-autor .ob-autor-rol {
	margin: 0 0 0.9rem;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--obelum-ambar);
}

.ob-autor p { margin: 0 0 0.8rem; color: var(--obelum-ceniza); }
.ob-autor p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.ob-autor { grid-template-columns: 1fr; }
}

/* ---------- Cierre -------------------------------------------------- */
.ob-cierre {
	text-align: center;
	padding-block: clamp(5rem, 11vw, 8rem);
}

.ob-cierre .ob-titular,
.ob-cierre .ob-titular .elementor-heading-title {
	font-size: clamp(2rem, 5.2vw, 3.25rem);
	max-width: 18ch;
	margin-inline: auto;
}

.ob-cierre .ob-lead,
.ob-cierre .ob-lead p {
	max-width: 54ch;
	margin-inline: auto;
}

.ob-cierre .ob-btn { align-self: center; }

/* =================================================================
   PULIDO — alineación, respiración y cabecera sin menú
   ================================================================= */

/* ---------- Una sola alineación en el cuerpo ----------------------
   Al editar los textos en Elementor se le quedó alineación centrada
   y anchura propia a tres widgets: el titular de la apertura y los
   párrafos de "Las 6 etapas" y de la Teoría de las Restricciones —
   este último a 279 px, una columna estrecha en mitad de la página.

   Se corrige aquí y no en el editor para que no vuelva a pasar cada
   vez que se retoque un texto.

   Dos cosas que hay que respetar en estos selectores, y por las que
   un primer intento no hizo absolutamente nada:

   1. Los widgets NO cuelgan del contenedor de la sección. Elementor
      mete `.e-con-inner` por en medio, así que `.ob-seccion > .widget`
      no coincide con nada. La ruta buena es
      `.ob-seccion > .e-con-inner > .widget`.
   2. Hace falta especificidad de sobra: Elementor guarda estos
      ajustes en una hoja propia de la página (`post-108.css`) con la
      forma `.elementor-108 .elementor-element.elementor-element-XXXX`,
      que son tres clases.

   De regalo, ese `.e-con-inner` deja fuera los remates: `.ob-remate`
   y `.ob-cierre` son contenedores hijos, y sus textos son nietos del
   `.e-con-inner` de la sección. Siguen centrados, que es lo que
   queremos.                                                          */
body .ob-apertura > .e-con-inner > .elementor-element.elementor-widget {
	text-align: left;
	width: auto;
	max-width: 940px;
}

body .ob-seccion > .e-con-inner > .elementor-element.elementor-widget {
	text-align: left;
	width: auto;
	max-width: 100%;
}

/* Y se devuelve la anchura de lectura al encabezado de sección, que
   la regla de arriba acaba de soltar. Misma especificidad: gana por
   ir después. */
body .ob-seccion > .e-con-inner > .elementor-element.ob-eyebrow,
body .ob-seccion > .e-con-inner > .elementor-element.ob-titular,
body .ob-seccion > .e-con-inner > .elementor-element.ob-lead {
	max-width: 760px;
}

/* ---------- La tipografía de la marca, por encima del Kit ---------
   Elementor aplica la fuente de su "Kit por defecto" —Roboto— con la
   clase `.elementor-kit-N` puesta en el <body>. Eso le gana a la
   regla `body { font-family: … }` del tema, que solo usa la etiqueta,
   y por eso la web entera se estaba viendo en Roboto: titulares,
   párrafos y botones. Inter se descargaba, pero no la usaba nadie.

   El selector de atributo evita escribir el número del kit, que
   cambia si algún día se regenera.

   Las piezas en serif (`.ob-serif`, `.ob-cita`, `.ob-destacado`, los
   números de los pasos) declaran su familia en sus propias reglas,
   más específicas para ese elemento, así que no las toca.           */
body[class*="elementor-kit-"] {
	font-family: var(--obelum-sans);
}

body[class*="elementor-kit-"] .elementor-widget-text-editor,
body[class*="elementor-kit-"] .elementor-widget-button .elementor-button,
body[class*="elementor-kit-"] .elementor-widget-heading .elementor-heading-title {
	font-family: inherit;
}

/* Y esto es lo que hacía falta para los widgets a los que alguien les
   tocó la tipografía desde el editor. Elementor guarda esa eleccion en
   la hoja de la pagina con

     .elementor-108 .elementor-element.elementor-element-XXXX

   que son tres clases, y le ganaba a la regla de arriba —dos clases y
   un elemento—. Por eso media portada seguia en Roboto aunque el tema
   pidiera Libre Franklin.

   Repitiendo las clases que el propio widget ya lleva (`elementor-element`,
   `elementor-widget` y la de su tipo) mas `body` delante, se llega a
   cuatro clases y un elemento y gana el tema. Asi no hay que perseguir
   cada identificador ni reinsertar la plantilla.

   Se declara en el contenedor del widget, no en los parrafos: los hijos
   lo heredan, y las piezas en serif (`.ob-serif`, `.ob-cita`) conservan
   su familia porque la declaran en su propia regla, que apunta al
   elemento y por tanto gana a lo heredado.                            */
body[class*="elementor-kit-"] .elementor-element.elementor-widget.elementor-widget-text-editor,
body[class*="elementor-kit-"] .elementor-element.elementor-widget.elementor-widget-heading {
	font-family: var(--obelum-sans);
}

/* Y esto es lo que de verdad centraba los párrafos: el editor dejó
   `style="text-align: center"` escrito dentro de cada <p>. Un estilo
   en línea gana a cualquier selector por especificidad, así que aquí
   `!important` no es pereza — es la única herramienta que lo alcanza.
   Al reinsertar la plantilla estos estilos desaparecen y la regla se
   queda sin efecto, que es lo que queremos: red de seguridad, no
   parche permanente. */
body .ob-apertura > .e-con-inner > .elementor-widget p[style],
body .ob-seccion > .e-con-inner > .elementor-widget p[style],
body .ob-apertura > .e-con-inner > .elementor-widget p[style] span[style],
body .ob-seccion > .e-con-inner > .elementor-widget p[style] span[style] {
	text-align: left !important;
	font-size: inherit !important;
	background-color: transparent !important;
}

/* ---------- Aire entre las frases separadas -----------------------
   Las frases van partidas para que cada idea respire, unas veces en
   párrafos sueltos y otras con un salto de línea. Se cubren los dos
   casos: los saltos no admiten margen directo, pero convertidos en
   bloque sí.                                                        */
.ob-lead p + p,
.ob-cita p + p { margin-top: 0.5em; }

.ob-lead br,
.ob-cita br,
.ob-tesis br,
.ob-titular br {
	display: block;
	content: "";
	margin-bottom: 0.3em;
}

/* ---------- Cabecera sin menú -------------------------------------
   En una landing de un solo argumento cada enlace del menú es una
   salida. Quedan el logo y el botón.

   El 20/8/2026 el widget se borró en Ultimate Addons -> Cabecera y pie.
   Antes se ocultaba aquí con `display: none`, pero seguía en el HTML:
   tres enlaces a secciones que ya no existen, que Google leía y que
   arrastraban el CSS y el JS del plugin (14 KB de página).

   Las reglas de estilo del menú que hay más arriba se quedan por si
   algún día vuelve; sin widget no pintan nada.                      */

/* ---------- Preguntas frecuentes -----------------------------------
   Acordeon clasico: al abrir la pagina se ven las ocho preguntas y cada
   una despliega su respuesta al hacer clic.

   Se apoya en <details>/<summary> nativos. La flecha del navegador se
   quita —hace falta el `::-webkit-details-marker` para Safari— y se
   pinta un signo propio a la derecha, que es donde lo busca la vista.

   El interlineado se declara aqui a proposito: `reset.css` de Hello
   Elementor pone `html { line-height: 1.15 }` y todo lo que no lo suba
   lo hereda.                                                        */
.ob-faq {
	max-width: 760px;
}

.ob-faq-item {
	border-bottom: 1px solid var(--obelum-linea);
}

.ob-faq-item:first-child {
	border-top: 1px solid var(--obelum-linea);
}

.ob-faq-item summary {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	transition: color .18s var(--obelum-ease);
}

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

.ob-faq-item summary h3 {
	flex: 1;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--obelum-lino);
	transition: color .18s var(--obelum-ease);
}

.ob-faq-item summary:hover h3,
.ob-faq-item[open] summary h3 {
	color: var(--obelum-hueso);
}

/* El signo: una cruz que gira hasta convertirse en un menos. Dibujarla
   con dos pseudoelementos evita depender de una fuente de iconos. */
.ob-faq-item summary::after {
	content: "";
	flex: none;
	position: relative;
	width: 14px;
	height: 14px;
	align-self: center;
	background:
		linear-gradient(var(--obelum-ambar), var(--obelum-ambar)) center/14px 1px no-repeat,
		linear-gradient(var(--obelum-ambar), var(--obelum-ambar)) center/1px 14px no-repeat;
	transition: transform .25s var(--obelum-ease);
}

.ob-faq-item[open] summary::after {
	transform: rotate(90deg);
	background:
		linear-gradient(var(--obelum-ambar), var(--obelum-ambar)) center/14px 1px no-repeat;
}

.ob-faq-item summary:focus-visible {
	outline: 2px solid var(--obelum-ambar);
	outline-offset: 4px;
}

.ob-faq-respuesta {
	padding: 0 2.4rem 1.6rem 0;
}

.ob-faq-respuesta p {
	margin: 0 0 0.9rem;
	line-height: 1.62;
	color: var(--obelum-ceniza);
}

.ob-faq-respuesta p:last-child {
	margin-bottom: 0;
}

.ob-faq-respuesta ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ob-faq-respuesta li {
	position: relative;
	padding-left: 1.15rem;
	margin-bottom: 0.5rem;
	line-height: 1.62;
	color: var(--obelum-ceniza);
}

.ob-faq-respuesta li:last-child {
	margin-bottom: 0;
}

/* El guion largo en ambar: el mismo aire editorial del resto de la
   pagina, sin la vineta redonda de siempre. */
.ob-faq-respuesta li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	color: var(--obelum-ambar);
}

/* Las preguntas no se animan al entrar. Iban en un solo bloque enorme y
   el observador no lo descubria hasta ver un 12% de el: de entrada solo
   aparecia el titulo. Y con el JS caido no se verian nunca.

   Se anula tambien por id de seccion para que valga en la pagina ya
   publicada, cuyo HTML lleva la clase escrita dentro.                */
#preguntas .ob-reveal,
.ob-faq,
.ob-reveal:has(.ob-faq) {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ob-faq-item summary,
	.ob-faq-item summary h3,
	.ob-faq-item summary::after {
		transition: none;
	}
}

/* =================================================================
   PAGINAS LEGALES  —  aviso legal y politica de privacidad
   -----------------------------------------------------------------
   Su contenido sale dentro de `.page-content`, que no tenia ni una
   linea de estilo propia. Se veian asi:

     - a 1264 px de ancho, con lineas de mas de 200 caracteres;
     - pegadas al borde superior, por debajo de la cabecera fija, que
       tapaba el primer titular;
     - en el gris #7A7A7A que trae Hello Elementor de fabrica, que
       sobre el fondo tinta se queda en 4,3:1 y no llega al minimo.

   POR QUE HAY DOS JUEGOS DE SELECTORES. Las dos legales no estan
   montadas igual: el aviso legal es una pagina de bloques, y su HTML
   cuelga directamente de `.page-content`; la politica de privacidad se
   monto en Elementor, que mete sus contenedores por medio.

   De ahi el reparto:
     - `.page-content > X`  para las de bloques. El hijo directo es
       deliberado: `.page-content` envuelve TAMBIEN la portada, y un
       selector de descendiente le pondria a la landing la columna de
       42 rem y el interlineado de un texto legal.
     - `.ob-legal X`        para las de Elementor. La clase se escribe
       en el contenedor, en Avanzado -> Clases CSS.

   Cualquier legal futura entra por uno de los dos caminos sin tocar
   nada mas.
   ================================================================= */
.page-content:has(> h1),
.page-content:has(> h2) {
	max-width: 42rem;
	margin-inline: auto;
}

.page-content:has(> h1),
.page-content:has(> h2),
.ob-legal {
	padding-inline: clamp(1.25rem, 5vw, 2rem);
	/* La cabecera va en position:fixed y no ocupa sitio en el flujo. */
	padding-block: calc(var(--obelum-header-h) + clamp(3rem, 8vw, 5.5rem))
	               clamp(4rem, 10vw, 7rem);
	color: var(--obelum-lino);
}

/* En Elementor la columna se estrecha por dentro: el contenedor pinta
   el fondo de lado a lado y `.e-con-inner` es lo que se centra. */
.ob-legal > .e-con-inner {
	max-width: 42rem;
	margin-inline: auto;
}

/* ---------- Titulo ------------------------------------------------ */
.page-content > h1,
.ob-legal h1 {
	font-size: clamp(2.1rem, 5.5vw, 3.1rem);
	line-height: 1.08;
	margin-block: 0 clamp(2rem, 5vw, 3rem);
}

/* Un filete ambar debajo del titulo, el mismo recurso que separa
   bloques en la portada. */
.page-content > h1::after,
.ob-legal h1::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--obelum-ambar);
}

/* ---------- Apartados --------------------------------------------- */
.page-content > h2,
.ob-legal h2 {
	font-size: clamp(1.3rem, 2.6vw, 1.6rem);
	line-height: 1.22;
	margin-block: clamp(2.75rem, 6vw, 3.75rem) 0.9rem;
	padding-top: clamp(2.75rem, 6vw, 3.75rem);
	border-top: 1px solid var(--obelum-linea);
}

/* El primer apartado no lleva filete: viene justo debajo del que ya
   dibuja el titulo, y dos rayas seguidas no separan nada. */
.page-content > h2:first-child,
.page-content > h1 + h2,
.ob-legal h2:first-child,
.ob-legal h1 + h2 {
	padding-top: 0;
	border-top: 0;
}

.page-content > h2:first-child,
.ob-legal h2:first-child {
	margin-top: 0;
}

/* ---------- Cuerpo ------------------------------------------------ */
.page-content > p,
.page-content > ul li,
.ob-legal p,
.ob-legal li {
	/* 1.75 y no 1.6: son parrafos largos que se leen de corrido, y el
	   texto legal ya cuesta bastante sin apreturas. */
	line-height: 1.75;
	color: var(--obelum-lino);
}

.page-content > p,
.ob-legal p {
	margin-block: 0 1.15em;
}

.page-content > p:last-child,
.ob-legal p:last-child {
	margin-bottom: 0;
}

.page-content > * strong,
.page-content > strong,
.ob-legal strong {
	color: var(--obelum-hueso);
	font-weight: 600;
}

.page-content > p em,
.ob-legal em {
	font-family: var(--obelum-serif);
	font-style: italic;
	font-size: 1.06em;
	color: var(--obelum-ceniza);
}

/* ---------- Listas ------------------------------------------------ */
/* Con guion largo en ambar, igual que las respuestas de las preguntas
   frecuentes. La vineta redonda de serie desentona. */
.page-content > ul,
.ob-legal ul {
	list-style: none;
	margin: 0 0 1.6em;
	padding: 0;
}

.page-content > ul li,
.ob-legal ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.85em;
}

.page-content > ul li:last-child,
.ob-legal ul li:last-child {
	margin-bottom: 0;
}

.page-content > ul li::before,
.ob-legal ul li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	color: var(--obelum-ambar);
}

/* ---------- Enlaces ----------------------------------------------- */
.page-content > * a,
.ob-legal a {
	color: var(--obelum-ambar);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(233, 162, 59, 0.4);
	transition: text-decoration-color 0.2s var(--obelum-ease);
}

.page-content > * a:hover,
.page-content > * a:focus-visible,
.ob-legal a:hover,
.ob-legal a:focus-visible {
	text-decoration-color: var(--obelum-ambar);
}

/* El titulo que pinta Hello Elementor encima de cada pagina ya no se
   imprime en las que traen su propio <h1>: lo corta el filtro
   `obelum_ocultar_titulo` de functions.php. Esconderlo por CSS no valia,
   porque escondido seguia estando en el codigo y contaba como segundo
   <h1> para los buscadores. */