/*
 * Landing "Cómo publicar".
 *
 * Estructura inspirada en la referencia que pasó Diego (bloque oscuro con forma
 * orgánica arriba, cuerpo crema con tarjetas), pero con SU paleta: el naranja de
 * la referencia se reemplaza por el coral de la marca (#F9A392), que funciona
 * bien contra el verde profundo por ser casi complementarios.
 *
 * Tipografías: Montserrat (ya la carga el tema, no hay peticiones nuevas) y
 * Georgia para los títulos grandes, que es el serif de sistema que ya se usa en
 * la página del formulario.
 *
 * Todo va prefijado .mbl para no chocar con Astra ni con Elementor.
 */

/* Chrome en Android (y los navegadores dentro de apps como WhatsApp) aplican un
   "modo oscuro automático" a las páginas que no declaran en qué esquema están
   pensadas: invierten los fondos claros por su cuenta. Esta landing se veía casi
   negra en el móvil por eso. Declararlo la deja fuera de esa inversión.
   Sólo afecta a esta página: va sobre la clase que añade el plugin. */
html:has(body.mbl-page),
.mbl-page { color-scheme: light; }

.mbl-page,
.mbl {
	/* Colores del hero elegidos por Diego. El fondo va oscuro, lo que ya no da
	   problemas porque la cabecera de esta página dejó de ser transparente:
	   el menú va sobre su propia barra blanca y no depende de este fondo. */
	--mbl-hero-bg:    #042729;  /* fondo del bloque */
	--mbl-wave:       #b9cdbe;  /* la ola de la derecha */
	/* Texto sobre el fondo oscuro: blanco cálido elegido por Diego, de la misma
	   familia que el crema de la franja de números. El párrafo usa ese mismo tono
	   rebajado, en vez de un gris aparte, para que no aparezca un cuarto color. */
	--mbl-hero-title: rgb(248, 245, 238);
	--mbl-hero-lead:  rgba(248, 245, 238, .76);
	--mbl-ink:        #042729;  /* mismo oscuro para títulos y cierre, así no hay dos verdes */
	--mbl-ink-soft:   #0A3A3C;
	--mbl-cream:      #F5F2EA;  /* crema que eligió Diego, para la franja de números */
	--mbl-card:       #FFFFFF;
	--mbl-body-bg:    #FFFFFF;
	--mbl-coral:      #F9A392;  /* coral de marca, para detalles sobre fondo oscuro */
	--mbl-coral-deep: #B04A32;  /* terracota: acento sobre fondos claros */
	--mbl-text:       #35443F;
	--mbl-muted:      #5B6B64;
	--mbl-line:       #DFE7E2;

	/* Móvil del hero: paleta propia, deliberadamente distinta del verde del
	   fondo (azul-negro, no otro verde) para que el aparato se recorte contra
	   el hero en vez de mimetizarse con él. */
	--mbl-phone-bezel:      #060708;
	--mbl-phone-bezel-edge: #2b3038;
	--mbl-chat-bg-1:        #131a26;
	--mbl-chat-bg-2:        #05070c;
	--mbl-wa-green:         #25D366;

	--mbl-serif: Georgia, "Times New Roman", Times, serif;
	--mbl-sans:  "Montserrat", system-ui, sans-serif;

	font-family: var(--mbl-sans);
	color: var(--mbl-text);
	line-height: 1.65;
}

/* El tema mete el título de la página y un contenedor angosto; esta landing
   necesita ir de borde a borde. */
.mbl-page .entry-title,
.mbl-page .ast-single-post-order,
.mbl-page .entry-header { display: none; }
.mbl-page .site-content .ast-container,
.mbl-page .entry-content { max-width: 100%; padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------------- CABECERA -----
   En esta página la cabecera transparente de Astra está DESACTIVADA (ajuste por
   página: post meta `theme-transparent-header-meta` = `disabled` en la 5025).
   Diego la quiere con fondo blanco, igual que en el resto del sitio, en vez de
   integrada con el bloque verde.

   Eso simplifica el resto: el hero ya no pasa por detrás del menú, así que no
   hace falta despejarlo con padding ni recolorear nada, y la cuña se recorta
   sola en el borde superior del hero — que es justo como se veía en la maqueta.
   Si algún día se reactiva la transparencia, hay que volver a mirar las tres
   cosas: el padding superior del hero, la posición de la cuña y el color del
   menú y el logo. */

.mbl * { box-sizing: border-box; }
.mbl p { margin: 0 0 1.1em; }
.mbl-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- HERO --- */
.mbl-hero {
	position: relative;
	/* z-index (no sólo position:relative) para que este bloque forme su propio
	   contexto de apilamiento: así el móvil de la derecha puede sangrar hacia
	   abajo y quedar POR ENCIMA del fondo de .mbl-stats, en vez de taparse con
	   el siguiente bloque. */
	z-index: 2;
	background: var(--mbl-hero-bg);
	color: var(--mbl-hero-title);
	/* Antes "hidden": ahora el móvil necesita poder sangrar por debajo del hero. */
	overflow: visible;
	padding: clamp(28px, 4vh, 46px) 0 clamp(20px, 3vh, 32px);
}
/* Grano sutil, para que el fondo plano no se vea digital. Sobre el fondo oscuro
   el punto va claro. */
.mbl-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05;
	background-image: radial-gradient(#fff 1px, transparent 1px);
	background-size: 4px 4px;
}
.mbl-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 65%) minmax(0, 35%);
	align-items: center;
	gap: clamp(16px, 3vw, 36px);
}
.mbl-hero__inner { max-width: 51rem; }

/* ----------------------------------------------------- MOVIL DEL HERO ---
   Reemplaza la cuña decorativa: en vez de un adorno abstracto, muestra
   literalmente la promesa del título (que te escriban por WhatsApp), con
   notificaciones que van llegando una por una. */
.mbl-hero__phone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: end;
	margin-right: clamp(30px, 9vw, 96px);
	margin-bottom: -58px; /* sangra hacia .mbl-stats */
}
.mbl-phone__caption {
	margin: 0 0 16px;
	font-size: .78rem;
	color: var(--mbl-hero-lead);
	text-align: center;
	display: flex;
	align-items: center;
	gap: 8px;
}
.mbl-phone__caption::before, .mbl-phone__caption::after {
	content: ""; width: 16px; height: 1px; background: rgba(248, 245, 238, .28);
}
.mbl-phone__stage { position: relative; width: min(206px, 52vw); }
.mbl-phone__glow {
	position: absolute; inset: -20% -38%;
	background: radial-gradient(closest-side, rgba(185, 205, 190, .40), rgba(185, 205, 190, 0) 72%);
	filter: blur(2px); z-index: 0;
}
.mbl-phone__frame {
	position: relative; z-index: 1;
	aspect-ratio: 9 / 19.3;
	background: linear-gradient(155deg, var(--mbl-phone-bezel-edge), var(--mbl-phone-bezel) 40%, #000 130%);
	border-radius: 42px; padding: 12px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 8px 22px -8px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .04);
	transform: rotate(-3.5deg);
}
.mbl-phone__notch {
	position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
	width: 84px; height: 20px; background: var(--mbl-phone-bezel); border-radius: 0 0 14px 14px; z-index: 3;
}
.mbl-phone__screen {
	position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden;
	background: radial-gradient(120% 60% at 50% 0%, var(--mbl-chat-bg-1), var(--mbl-chat-bg-2) 70%);
}
.mbl-phone__status {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px 3px; color: rgba(248, 245, 238, .85); font-size: .6rem; font-weight: 600; letter-spacing: .02em;
}
.mbl-phone__dots { display: flex; gap: 3px; align-items: center; }
.mbl-phone__dots span { width: 3px; height: 3px; border-radius: 50%; background: rgba(248, 245, 238, .85); }
.mbl-phone__context {
	margin: 5px 12px 0; padding: 7px 9px; border-radius: 10px;
	background: rgba(248, 245, 238, .06); border: 1px solid rgba(248, 245, 238, .08);
	display: flex; align-items: center; gap: 7px;
	font-size: .58rem; color: rgba(248, 245, 238, .55); letter-spacing: .03em;
}
.mbl-phone__wa-ico {
	width: 18px; height: 18px; border-radius: 50%; background: var(--mbl-wa-green);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mbl-phone__wa-ico svg { width: 10px; height: 10px; }
.mbl-phone__notifs { position: absolute; top: 70px; left: 10px; right: 10px; display: flex; flex-direction: column; gap: 7px; }
.mbl-notif { background: var(--mbl-cream); border-radius: 12px; padding: 8px 10px; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .45); }
.mbl-notif__top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.mbl-notif__badge {
	width: 13px; height: 13px; border-radius: 4px; background: var(--mbl-wa-green);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mbl-notif__badge svg { width: 8px; height: 8px; }
.mbl-notif__name { font-weight: 700; font-size: .68rem; color: var(--mbl-ink); flex: 1; }
.mbl-notif__time { font-size: .58rem; color: var(--mbl-muted); }
.mbl-notif__msg { font-size: .64rem; line-height: 1.35; color: var(--mbl-ink); margin: 0; padding-left: 19px; }
/* Sobre el fondo oscuro el terracota no contrasta: acá va el coral claro. */
.mbl-eyebrow {
	font-size: .72rem; font-weight: 700; letter-spacing: .2em;
	text-transform: uppercase; color: var(--mbl-coral); margin: 0 0 18px;
}
.mbl-hero h1 {
	font-family: var(--mbl-serif); font-weight: 400;
	/* Techo contenido a propósito: la maqueta aprobada era una miniatura de bloque
	   muy bajo, y la curva se estira con la altura. Cuanto más bajo el bloque, más
	   se parece a lo que Diego eligió. */
	font-size: clamp(1.8rem, 3.1vw, 2.35rem);
	line-height: 1.15; letter-spacing: -.015em; margin: 0 0 18px;
	color: var(--mbl-hero-title);
	text-wrap: balance;
}
/* Sólo color: el subrayado se partía en dos al cambiar de línea y quedaba sucio. */
.mbl-hero h1 em { font-style: normal; color: var(--mbl-coral); }
.mbl-hero__lead { font-size: 1.08rem; color: var(--mbl-hero-lead); max-width: 33em; margin: 0; }
/* .mbl-letter-accent usa terracota (--mbl-coral-deep) porque en el resto de la
   página va sobre fondo claro. Acá el fondo es oscuro, así que necesita el
   coral claro (--mbl-coral), igual que el resto de los acentos del hero. */
.mbl-hero .mbl-letter-accent { color: var(--mbl-coral); }

/* ------------------------------------------------------------- NUMEROS --- */
/* Franja crema (el color que eligió Diego): separa el hero del cuerpo sin
   introducir un tercer tono. Deliberadamente SIN cifras exactas (Diego pidió
   sacarlas: con pocas fichas todavía, un número concreto evidencia que el
   sitio recién está arrancando) — el mismo mensaje, en frases + ícono.
   El padding superior extra es el lugar donde "aterriza" el móvil del hero,
   que sangra desde arriba (ver .mbl-hero__phone). */
.mbl-stats { position: relative; background: var(--mbl-cream); color: var(--mbl-text); padding: clamp(84px, 10vw, 112px) 0 56px; }
.mbl-stats__grid {
	display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 48px); justify-content: center;
}
.mbl-stat { display: flex; align-items: flex-start; gap: 14px; max-width: 300px; text-align: left; }
.mbl-stat__icon {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
	background: rgba(176, 74, 50, .10); color: var(--mbl-coral-deep);
	display: flex; align-items: center; justify-content: center;
}
.mbl-stat__icon svg { width: 19px; height: 19px; }
.mbl-stat__body b { display: block; font-family: var(--mbl-serif); font-weight: 400; font-size: 1.05rem; color: var(--mbl-ink); margin-bottom: 4px; }
.mbl-stat__body p { font-size: .82rem; line-height: 1.5; color: var(--mbl-muted); margin: 0; }

/* -------------------------------------------------------------- CUERPO --- */
.mbl-body { background: var(--mbl-body-bg); padding: 84px 0; }
.mbl-section + .mbl-section { margin-top: 76px; }
/* Etiqueta "Etapa N" + línea punteada, según referencia de Diego. Sólo se usa
   en la sección de Beneficios por ahora, no en todas las secciones. */
.mbl-eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.mbl-eyebrow-badge {
	display: inline-block; font-size: .78rem; font-weight: 700;
	padding: 6px 14px; border: 1px solid var(--mbl-line); border-radius: 6px;
	color: var(--mbl-ink); white-space: nowrap;
}
.mbl-eyebrow-line { flex: 1 1 auto; min-width: 24px; border-top: 1px dashed var(--mbl-line); }

.mbl-section__title {
	font-family: var(--mbl-serif); font-weight: 400;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15;
	margin: 0 0 14px; color: var(--mbl-ink);
}
/* Palabra destacada dentro de un título de sección, como "Beneficios": mismo
   terracota que el resto de los acentos sobre fondo claro. */
.mbl-section__title em { font-style: normal; color: var(--mbl-coral-deep); }
/* Solo la letra inicial en color, el resto de la palabra en el tono normal que
   tenga alrededor (heredado, sin necesidad de marcarlo). Sin scope a un bloque
   en particular: se reutiliza en títulos y en texto normal (ej. el Aviso Legal). */
.mbl-letter-accent { color: var(--mbl-coral-deep); }
.mbl-section__intro { color: var(--mbl-muted); max-width: 46em; margin: 0 0 38px; }

/* Tarjetas de ventajas */
.mbl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
/* El cuerpo es blanco, así que las tarjetas van en crema para despegarse. */
.mbl-card {
	background: var(--mbl-cream); border: 1px solid var(--mbl-line);
	border-radius: 14px; padding: 28px 26px 26px; position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}
.mbl-card::before {
	content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 3px;
	background: var(--mbl-coral); border-radius: 0 0 3px 3px;
}
.mbl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(23,53,45,.10); }
.mbl-card h3 { font-size: 1.06rem; font-weight: 700; margin: 0 0 10px; color: var(--mbl-ink); }
.mbl-card p { color: var(--mbl-muted); font-size: .96rem; margin: 0; }

/* Pasos: números sólidos con punto y líneas verticales entre columnas, según
   referencia que pasó Diego. El número usa el mismo terracota que ya llevan
   los números de la franja de arriba (--mbl-coral-deep), no un color nuevo. */
.mbl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; counter-reset: paso; }
.mbl-step {
	counter-increment: paso;
	border-left: 1px solid var(--mbl-line);
	padding-left: 26px;
}
.mbl-step:first-child { border-left: 0; padding-left: 0; }
.mbl-step::before {
	content: counter(paso, decimal-leading-zero) ".";
	display: block; font-family: var(--mbl-serif); font-weight: 400;
	font-size: 2.5rem; line-height: 1; color: var(--mbl-coral-deep);
	margin-bottom: 14px;
}
.mbl-step h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; color: var(--mbl-ink); }
.mbl-step p { color: var(--mbl-muted); font-size: .95rem; margin: 0; }

/* Bloque destacado */
.mbl-note {
	background: var(--mbl-cream); border-left: 4px solid var(--mbl-coral-deep);
	border-radius: 0 12px 12px 0; padding: 26px 28px;
}
.mbl-note p:last-child { margin-bottom: 0; }
/* Sólo cuando la nota va justo después de las tarjetas (como en Publicidad):
   separación extra para que no se sientan pegadas. En Aviso Legal y en el
   precio, la nota no sigue a ninguna tarjeta, así que no las afecta. */
.mbl-cards + .mbl-note { margin-top: 30px; }

/* Botón suelto a mitad de página (después de Etapa 5), no el cierre final. */
.mbl-section--center { text-align: center; }

.mbl-legal-link { margin: 14px 0 0; }
.mbl-legal-link a {
	color: var(--mbl-coral-deep); font-weight: 700; text-decoration: none;
}
.mbl-legal-link a:hover { text-decoration: underline; }

/* Preguntas */
.mbl-faq { border-top: 1px solid var(--mbl-line); }
.mbl-faq details { border-bottom: 1px solid var(--mbl-line); }
.mbl-faq summary {
	cursor: pointer; list-style: none; padding: 20px 40px 20px 0;
	font-weight: 600; color: var(--mbl-ink); position: relative;
}
.mbl-faq summary::-webkit-details-marker { display: none; }
.mbl-faq summary::after {
	content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 400; color: var(--mbl-coral-deep); transition: transform .2s ease;
}
.mbl-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mbl-faq details > div { padding: 0 40px 22px 0; color: var(--mbl-muted); }

/* Cierre */
.mbl-cta { background: var(--mbl-ink); color: #fff; padding: 76px 0; text-align: center; }
.mbl-cta h2 {
	font-family: var(--mbl-serif); font-weight: 400;
	font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 14px;
	color: var(--mbl-hero-title);
}
/* Mismo blanco cálido que el hero: los dos son texto claro sobre el verde
   oscuro, así que comparten familia en vez de tener cada uno su gris. */
.mbl-cta p { color: var(--mbl-hero-lead); max-width: 34em; margin: 0 auto 30px; }
/* Único lugar donde el coral claro va sobre fondo oscuro, y por eso brilla. */
.mbl-btn {
	display: inline-block; background: var(--mbl-coral); color: #2E1109;
	font-weight: 700; text-decoration: none; padding: 15px 34px; border-radius: 10px;
	transition: transform .2s ease, background .2s ease;
}
.mbl-btn:hover { background: var(--mbl-wave); color: var(--mbl-ink); transform: translateY(-2px); }
.mbl-cta small { display: block; margin-top: 18px; color: rgba(248, 245, 238, .58); font-size: .87rem; }

/* Alternativa al formulario, dentro del mismo cierre: en contorno a propósito,
   para que "Completar el formulario" siga siendo la acción principal. */
.mbl-cta__or { margin: 34px 0 14px; color: var(--mbl-hero-lead); font-size: .95rem; }
/* El color va forzado con !important: el tema pinta los enlaces en coral al
   pasar el mouse (a:hover global de Astra) y, al no fijarlo acá, ese coral
   sobre este fondo oscuro quedaba casi ilegible. */
.mbl-btn-outline {
	display: inline-block; background: transparent; color: var(--mbl-hero-title) !important;
	border: 1.5px solid rgba(248, 245, 238, .5); font-weight: 700; text-decoration: none;
	padding: 12px 28px; border-radius: 10px; transition: background .2s ease, border-color .2s ease;
}
.mbl-btn-outline:hover {
	background: rgba(248, 245, 238, .16); border-color: rgba(248, 245, 238, .85);
	color: var(--mbl-hero-title) !important;
}

/* -------------------------------------------------------- ANIMACION ------ */
@media (prefers-reduced-motion: no-preference) {
	.mbl-anim { opacity: 0; transform: translateY(14px); animation: mbl-in .7s ease forwards; }
	.mbl-anim:nth-child(2) { animation-delay: .08s; }
	.mbl-anim:nth-child(3) { animation-delay: .16s; }
	.mbl-anim:nth-child(4) { animation-delay: .24s; }
	@keyframes mbl-in { to { opacity: 1; transform: none; } }

	/* Móvil del hero: flota suave, y las notificaciones entran una por una
	   (controlado por landing.js, que añade/quita la clase .is-visible). Todo
	   esto queda contenido acá adentro: con reduced-motion, el móvil se ve
	   quieto y las 3 notificaciones aparecen fijas de una. */
	.mbl-phone__frame { animation: mbl-float 5s ease-in-out infinite; }
	@keyframes mbl-float {
		0%, 100% { transform: rotate(-3.5deg) translateY(0); }
		50%      { transform: rotate(-3.5deg) translateY(-10px); }
	}
	.mbl-notif {
		opacity: 0; transform: translateY(-16px) scale(.96);
		transition: opacity .45s cubic-bezier(.34, 1.56, .64, 1), transform .45s cubic-bezier(.34, 1.56, .64, 1);
	}
	.mbl-notif.is-visible { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------- MOVIL ----- */
@media (max-width: 900px) {
	/* El móvil pasa a debajo del texto: sin sangrado ni columna, y sin la
	   franja crema encima (ese efecto sólo tiene sentido en el layout ancho). */
	.mbl-hero__grid { grid-template-columns: 1fr; }
	.mbl-hero__phone { margin-right: 0; margin-bottom: 28px; }
	.mbl-stats { padding-top: 56px; }
}
@media (max-width: 860px) {
	.mbl-stat { max-width: none; }
	/* Mismo criterio que los pasos de más abajo: apilados en una columna. */
	.mbl-steps { grid-template-columns: 1fr; }
	.mbl-step { border-left: 0; border-top: 1px solid var(--mbl-line); padding-left: 0; padding-top: 22px; }
	.mbl-step:first-child { border-top: 0; padding-top: 0; }
	.mbl-body { padding: 60px 0; }
	.mbl-section + .mbl-section { margin-top: 56px; }
}