/* no-perder-clientes.css -- estilos exclusivos de /no-perder-clientes/.
   Sacado del cssPagina inline (migracion Eleventy, 3-sep-2026): mismo
   contenido, solo cambia de <style> inline a archivo cacheable, igual
   que index.css con la home. base.css/nav.css/botones.css/faq.css/pie.css
   ya cubren lo comun; esto es solo lo especifico de esta landing. */

/* Reset, html/body y .container los pone css/base.css. */


/* ===== NAV =====
   Pastilla clara flotando. Sobre el hero oscuro contrasta sola; al
   hacer scroll sigue funcionando sobre el cuerpo claro. No cambia. */
.subnav {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 1000; width: calc(100% - 48px); max-width: 1200px; height: 62px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
    box-shadow: 0 8px 30px rgba(14, 17, 22, 0.14);
}
.subnav .logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--ink); text-decoration: none; letter-spacing: -0.05em; }
.subnav .logo img { height: 24px; width: auto; display: block; filter: invert(1) brightness(0.12); }
.subnav-right { display: flex; align-items: center; gap: 14px; }
.subnav .back { font-size: 0.85rem; color: var(--ink-mid); text-decoration: none; transition: color 0.3s ease; }
.subnav .back:hover { color: var(--ink); }

/* ===== HERO OSCURO (centrado, sin foto: fondo de degradado cobalto) =====
   Requiere class="inverse" en el <header class="hero">. */
.hero.inverse {
    position: relative; min-height: 72vh;
    display: flex; align-items: center; overflow: hidden; padding: var(--space-11) 0 var(--space-10);
    /* Verde limpio. Llevaba dos lavados dorados apilados (20% y 10%)
       que sobre el verde viraban a amarillo; el sistema los evita. */
    background: var(--night-900);
}
.hero.inverse::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(245, 246, 248, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 246, 248, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, black 0%, transparent 75%);
    mask-image: radial-gradient(60% 60% at 50% 30%, black 0%, transparent 75%);
}
.hero-content-centered {
    position: relative; z-index: 2; max-width: 760px; margin: 0 auto;
    text-align: center; display: flex; flex-direction: column; align-items: center;
}

/* [4-sep-2026] Fuera .hero-badge, aqui y en la home: repetia el titular
   y ocupaba la primera linea de la pagina. Este ademas iba en DORADO
   —rgba(214,186,130) y rgba(200,168,94)— que es de la paleta anterior y
   ya no existe en tokens.css: era color huerfano, sin token detras. */
.hero.inverse h1 {
    font-family: var(--font-display); font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    font-weight: 400; line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 22px;
    max-width: 18ch; color: var(--on-night);
}
/* El degradado cierra en cobalto-300, no en el saturado: sobre negro,
   el #C8A85E da 3.21:1 y solo valdría para texto muy grande. */
.hero.inverse h1 .hl { background: linear-gradient(118deg, var(--on-night) 6%, var(--cobalt-300) 94%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero.inverse p.sub { font-size: 1.16rem; color: var(--on-night-body); font-weight: 400; max-width: 52ch; margin: 0 auto 14px; }
.hero.inverse p.hero-quien { font-size: 0.92rem; color: var(--on-night-soft); font-weight: 400; max-width: 46ch; margin: 0 auto 38px; }
.hero-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.hero-ctas-centered { align-items: center; }
/* El boton viene de botones.css, comun a todo el sitio. */
.hero.inverse .link-soft { color: var(--on-night-soft); }
.hero.inverse .link-soft:hover { color: var(--on-night); }
.hero.inverse .hero-microcopy { font-size: 0.85rem; color: var(--on-night-mid); font-weight: 400; margin: 0; }

/* Placeholder genérico (aún en uso en mockups de imágenes pendientes) */
.img-placeholder {
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: 1.5px dashed var(--cobalt-border); border-radius: 16px;
    background: var(--cobalt-tint);
    color: var(--ink-mid); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em;
    padding: 24px; line-height: 1.6;
}

/* ===== SECCIONES ===== */
.section:nth-of-type(even) { background-color: var(--bg-alt); }
.section + .section::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: min(760px, 82%); height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(26,29,35,0.07) 30%, rgba(26,29,35,0.13) 50%, rgba(26,29,35,0.07) 70%, transparent 100%);
}
.s-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Bloque 2 — PRUEBA: capturas + logos */
.pruebas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
.prueba-card { display: flex; flex-direction: column; gap: 14px; }
.prueba-card p { font-size: 0.92rem; color: var(--ink-soft); font-weight: 300; text-align: center; }

/* Mockup del panel (sustituye a capturas reales hasta tener piloto) */
.mockup {
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; box-shadow: 0 12px 30px rgba(26,29,35,0.06); font-size: 0.72rem;
}
.mockup-toolbar {
    display: flex; align-items: center; gap: 6px; padding: 10px 12px;
    background: var(--bg-input); border-bottom: 1px solid var(--line);
}
.mockup-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-decor); opacity: 1; }
.mockup-title { margin-left: 8px; font-weight: 600; color: var(--ink-mid); font-size: 0.7rem; }

/* Panel tipo kanban */
.mockup-panel { aspect-ratio: 16/10; }
.mockup-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); height: calc(100% - 33px); }
.mockup-col { background: var(--bg); padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.mockup-col-head { font-size: 0.62rem; font-weight: 700; padding: 4px 6px; border-radius: 5px; text-align: left; }
.mockup-col-head em { font-style: normal; opacity: 0.6; margin-left: 3px; }
.mockup-col-head.lead { background: var(--rojo-bg); color: var(--rojo); }
.mockup-col-head.llamada { background: var(--cobalt-tint); color: var(--cobalt-700); }
.mockup-col-head.propuesta { background: var(--ambar-bg); color: var(--ambar); }
.mockup-col-head.venta { background: var(--verde-bg); color: var(--verde); }
.mockup-card {
    background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px;
    padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
}
.mockup-card strong { font-size: 0.66rem; font-weight: 600; color: var(--ink); }
.mockup-card span { font-size: 0.58rem; color: var(--ink-decor); }

/* Aviso de hoy */
.mockup-aviso { aspect-ratio: 16/10; display: flex; flex-direction: column; }
.mockup-aviso-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; }
.mockup-aviso-fecha { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-decor); margin-bottom: 4px; }
.mockup-aviso-item {
    display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--ink);
    background: var(--bg-alt); border-radius: 8px; padding: 8px 10px;
}
.mockup-badge { font-size: 0.58rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; flex: none; }
.mockup-badge.rojo { background: var(--rojo-bg); color: var(--rojo); }
.mockup-badge.ambar { background: var(--ambar-bg); color: var(--ambar); }
.mockup-badge.verde { background: var(--verde-bg); color: var(--verde); }

/* Ficha de lead */
.mockup-ficha { aspect-ratio: 16/10; }
.mockup-ficha-body { padding: 14px; display: flex; flex-direction: column; }
.mockup-ficha-nombre { font-size: 0.9rem; color: var(--ink); margin-bottom: 3px; }
.mockup-ficha-origen { font-size: 0.65rem; color: var(--ink-decor); margin-bottom: 14px; }
.mockup-timeline { display: flex; flex-direction: column; gap: 10px; }
.mockup-tl-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.7rem; color: var(--ink-soft); line-height: 1.4; }
.mockup-tl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt-600); margin-top: 4px; flex: none; }
.mockup-tl-item.pend .mockup-tl-dot { background: var(--ambar); }
.mockup-tl-item.pend { color: var(--ambar); font-weight: 500; }
.confianza-bar {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px;
    padding-top: 40px; border-top: 1px solid var(--line);
}
.confianza-bar span {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
    color: var(--ink-mid); letter-spacing: -0.01em;
}
.confianza-bar .confianza-intro {
    font-weight: 400; font-size: 0.85rem; letter-spacing: 0.02em;
    color: var(--ink-mid); opacity: 1;
}

/* Bloque 3 — EL PROBLEMA (contraste así-hoy / así-debería) */
.problema-grid { max-width: 900px; margin: 0 auto; }
.contraste-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.contraste-col { border-radius: 14px; padding: 26px 24px; border: 1px solid; }
.contraste-col.mal { background: var(--rojo-bg); border-color: var(--rojo-border); }
.contraste-col.bien { background: var(--verde-bg); border-color: var(--verde-border); }
.contraste-label { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; margin-bottom: 16px; }
.contraste-col.mal .contraste-label { color: var(--rojo); }
.contraste-col.bien .contraste-label { color: var(--verde); }
.contraste-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.contraste-col li { font-size: 0.92rem; color: var(--ink-soft); font-weight: 400; line-height: 1.5; padding-left: 20px; position: relative; }
.contraste-col.mal li::before { content: '–'; position: absolute; left: 0; color: var(--rojo); font-weight: 700; }
.contraste-col.bien li::before { content: '–'; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.problema-frase {
    font-family: var(--font-heading); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700;
    line-height: 1.4; letter-spacing: -0.01em; margin-top: 36px; max-width: 46ch; color: var(--ink);
}

/* Bloque 4 — BENEFICIOS */
.beneficios-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.beneficio { text-align: center; }
/* Iconos de línea (SVG inline, no emoji) en azul cobalto, consistentes en toda la página */
.ic-line {
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--cobalt-tint); border: 1px solid var(--cobalt-border);
}
.ic-line svg { width: 22px; height: 22px; stroke: var(--cobalt-600); }
.beneficio h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; color: var(--ink); }
.beneficio p { font-size: 0.86rem; color: var(--ink-mid); font-weight: 300; line-height: 1.5; }

/* Bloque 5 — DIFERENCIADOR (imagen + texto, 2 columnas, sin CTA) */
.diferenciador-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.diferenciador-photo {
    width: 100%; aspect-ratio: 4/5; object-fit: cover;
    border-radius: 20px; box-shadow: 0 30px 70px rgba(26,29,35,0.14), 0 0 0 1px var(--line);
}
.diferenciador-text p { font-size: 1.05rem; color: var(--ink-soft); font-weight: 300; margin-bottom: 18px; max-width: 54ch; }
.diferenciador-apoyos { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.diferenciador-apoyos li { font-size: 0.95rem; color: var(--ink); font-weight: 400; padding-left: 26px; position: relative; }
.diferenciador-apoyos li::before { content: '✓'; position: absolute; left: 0; color: var(--cobalt-600); font-weight: 700; }

/* Bloque 6 — QUÉ SE MONTA (bento asimétrico: 1 tarjeta destacada + 2 apiladas, no 3 iguales) */
.servicios-bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 48px; align-items: stretch; }
.servicios-bento-side { display: flex; flex-direction: column; gap: 24px; }
.servicio-card {
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.servicio-card:hover { border-color: var(--cobalt-border); transform: translateY(-4px); box-shadow: 0 20px 45px rgba(26,29,35,0.10), 0 0 30px -12px var(--cobalt-glow); }
.servicio-card-body { padding: 26px 24px; }
.servicio-card-body h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.servicio-card-body p { font-size: 0.92rem; color: var(--ink-soft); font-weight: 300; }
.servicios-cta { text-align: center; margin-bottom: 90px; }
.servicio-card-simple { padding: 32px 24px 8px; }
.servicio-ic.ic-line { margin: 0 0 6px; }
.servicio-card-simple .servicio-card-body { padding: 0 0 26px; }
/* Tarjeta destacada del bento: más grande, con eyebrow e icono mayor */
.servicio-card-lead {
    padding: 40px 36px; display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(160deg, var(--cobalt-tint), var(--bg));
}
.servicio-eyebrow {
    display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.14em; color: var(--cobalt-600); margin-bottom: 10px;
}
.servicio-card-lead .servicio-card-body { padding: 0; }
.servicio-card-lead .servicio-card-body h3 { font-size: 1.35rem; margin-bottom: 14px; }
.servicio-card-lead .servicio-card-body p { font-size: 1rem; max-width: 46ch; }
.ic-line-lg { width: 58px; height: 58px; margin-bottom: 20px !important; }
.ic-line-lg svg { width: 28px; height: 28px; }

/* Sub-bloque: cómo se conectan (solo texto) */
.flujo-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.flujo-apoyos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.flujo-apoyos-compact { margin-bottom: 40px; }
.flujo-apoyos-compact .flujo-apoyo strong { font-size: 0.9rem; }
.flujo-apoyos-compact .flujo-apoyo span { font-size: 0.82rem; }
.flujo-apoyo { text-align: center; }
.flujo-apoyo strong { display: block; font-size: 0.98rem; color: var(--ink); margin-bottom: 6px; }
.flujo-apoyo span { font-size: 0.88rem; color: var(--ink-soft); font-weight: 300; }

/* Flujograma de proceso: fases + estados + automatizaciones colgando */
.pipe-wrap {
    max-width: 1120px; margin: 0 auto; background: var(--bg); border: 1px solid var(--line);
    border-radius: 16px; padding: 28px 24px; box-shadow: 0 20px 50px rgba(26,29,35,0.06);
    overflow-x: auto;
}
/* pipe-fases y pipe-track comparten la MISMA rejilla: 4 estados + 1
   columna de resultado (algo más ancha) + 4 huecos de flecha entre
   medias, para que las etiquetas de fase queden alineadas exactamente
   sobre sus columnas de estado. Orden real: [Lead nuevo][→][Discovery
   (llamada 1)][→][Llamada 2/No responde][→][Propuesta][→][Venta/No venta] */
.pipe-fases {
    display: grid; grid-template-columns: 1fr 24px 1fr 24px 1.15fr 24px 1fr 24px 1fr;
    gap: 0; min-width: 1040px; margin-bottom: 18px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.pipe-fases span {
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
    color: var(--cobalt-600); text-align: center;
}
/* CAPTACIÓN = Lead nuevo (col 1). NUTRICIÓN = Discovery + Llamada 2
   (cols 3-5, cubre su flecha intermedia). CONVERSIÓN = Propuesta +
   Resultado (cols 7-9, cubre su flecha intermedia) */
.pipe-fases span:nth-child(1) { grid-column: 1; }
.pipe-fases span:nth-child(2) { grid-column: 3 / 6; }
.pipe-fases span:nth-child(3) { grid-column: 7 / 10; }
.pipe-track {
    display: grid; grid-template-columns: 1fr 24px 1fr 24px 1.15fr 24px 1fr 24px 1fr;
    align-items: center; gap: 0; min-width: 1040px;
}
.pipe-col { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 8px; }
.pipe-autos { display: flex; flex-direction: column; gap: 6px; min-height: 30px; justify-content: flex-end; width: 100%; }
.pipe-autos.down { justify-content: flex-start; }
.pipe-auto {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.02em; color: var(--ambar);
    background: var(--ambar-bg); border: 1px dashed var(--ambar-border); border-radius: 8px;
    padding: 6px 8px; text-align: center; line-height: 1.35;
}
.pipe-state {
    font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--ink);
    background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; text-align: center; width: 100%; box-shadow: 0 2px 8px rgba(26,29,35,0.04);
}
.pipe-arrow { color: var(--ink-decor); font-size: 1.1rem; text-align: center; }
.pipe-result-col { gap: 8px; }
.pipe-result {
    font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; border-radius: 10px;
    padding: 10px 16px; width: 100%; text-align: center;
}
.pipe-result.venta { background: var(--verde-bg); color: var(--verde); border: 1px solid var(--verde-border); }
.pipe-result.novent { background: var(--rojo-bg); color: var(--rojo); border: 1px solid var(--rojo-border); }
.auto-nota { text-align: center; max-width: 480px; margin: 20px auto 0; font-size: 0.9rem; color: var(--ink-mid); font-weight: 400; }

/* Bloque 7 — CÓMO TRABAJAMOS (reutiliza .metodo-grid del patrón DAI360) */
.pasos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.paso-col .p-num { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.25em; color: var(--ink-decor); display: block; margin-bottom: 12px; }
.paso-col h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--ink); }
.paso-col p { font-size: 0.94rem; color: var(--ink-soft); font-weight: 300; }

/* Bloque 8 — PARA QUIÉN SÍ / NO */
.quien-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 940px; margin: 0 auto; }
.quien-col { border-radius: 14px; padding: 30px 28px; border: 1px solid; }
.quien-col.si { background: var(--verde-bg); border-color: var(--verde-border); }
.quien-col.no { background: var(--bg-alt); border-color: var(--line); }
.quien-label {
    display: block; font-family: var(--font-heading); font-weight: 700;
    font-size: 1rem; margin-bottom: 18px;
}
.quien-col.si .quien-label { color: var(--verde); }
.quien-col.no .quien-label { color: var(--ink-mid); }
.quien-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.quien-col li { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; padding-left: 26px; position: relative; }
.quien-col.si li::before { content: '✓'; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.quien-col.no li::before { content: '–'; position: absolute; left: 0; color: var(--ink-decor); font-weight: 700; }
@media (max-width: 900px) { .quien-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .quien-col { padding: 24px 20px; } }

/* FAQ */
.faq:hover { border-color: var(--cobalt-border); }
.faq button {
    width: 100%; background: none; border: none; cursor: pointer; text-align: left;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 24px 28px; color: var(--ink); font-family: var(--font-body); font-size: 1.05rem; font-weight: 600;
}
.faq .ico { font-size: 1.4rem; font-weight: 300; color: var(--ink-mid); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); line-height: 1; }
.faq.open { border-color: var(--cobalt-border); }
.faq.open .ico { transform: rotate(45deg); color: var(--cobalt-600); }
.faq .body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
.faq .body p { padding: 0 28px 24px; font-size: 0.95rem; color: var(--ink-soft); font-weight: 300; }

/* Bloque 10 — CIERRE + FORMULARIO */
.cierre-grid { display: block; max-width: 620px; margin: 0 auto; }
.cierre-text { text-align: center; }
.cierre-text h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 18px; color: var(--ink); }
.cierre-text p { font-size: 1.05rem; color: var(--ink-soft); font-weight: 300; max-width: 46ch; margin: 0 auto 32px; }
.cierre-text .glass-form-container { text-align: left; }

/* Formulario glass (patrón replicado de la home) */
.glass-form-container {
    max-width: 100%; margin: 0; position: relative; z-index: 1;
    border-radius: 16px; overflow: hidden; padding: 1px;
    background: linear-gradient(135deg, var(--cobalt-border), rgba(26,29,35,0.07));
}
.glass-form {
    background-color: var(--bg); border: none; border-radius: 15px; padding: 40px;
    box-shadow: 0 30px 60px rgba(26,29,35,0.09);
    position: relative; z-index: 1;
}
.form-group { position: relative; margin-bottom: 22px; display: flex; flex-direction: column; }
.form-group label {
    position: absolute; left: 18px; right: 18px; top: 17px; font-size: 0.9rem; color: var(--ink-mid);
    pointer-events: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: 0;
    font-weight: 400; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.form-group input {
    width: 100%; background-color: var(--bg-input); border: 1px solid var(--line-strong);
    border-radius: 12px; padding: 24px 18px 8px 18px; color: var(--ink); font-family: var(--font-body);
    font-size: 0.95rem; transition: all 0.3s ease; appearance: none;
}
.form-group input::placeholder { color: var(--ink-decor); opacity: 0; transition: opacity 0.2s ease; }
.form-group.focused input::placeholder { opacity: 1; }
.form-group.focused label, .form-group.has-value label { top: 6px; left: 18px; font-size: 0.72rem; color: var(--ink-mid); }
.form-group.focused label { color: var(--cobalt-700); }
.form-group input:focus { outline: none; border-color: var(--cobalt-600); background-color: var(--bg); box-shadow: 0 0 0 4px var(--cobalt-glow); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.form-note { font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-mid); text-align: center; margin-top: 10px; line-height: 1.5; }
.form-message { font-family: var(--font-body); font-size: 0.9rem; text-align: center; margin-top: 20px; min-height: 24px; }
.form-message.success { color: var(--verde); }
.form-message.error { color: var(--rojo); }

/* CTA final (no se usa como sección aparte: el cierre ya lleva form) */

/* Footer mini */

/* Reveal */

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .pruebas-grid, .beneficios-grid, .flujo-apoyos, .pasos-grid, .contraste-grid { grid-template-columns: 1fr; }
    .servicios-bento { grid-template-columns: 1fr; }
    .servicio-card-lead { padding: 32px 24px; }
    .diferenciador-grid { grid-template-columns: 1fr; gap: 36px; }
    .diferenciador-visual { order: -1; }
    .diferenciador-photo { max-width: 340px; margin: 0 auto; display: block; aspect-ratio: 1/1; }
    .subnav .back { display: none; }
    .beneficios-grid { gap: 32px; }
    .pasos-grid { gap: 36px; }
}

/* ===== MÓVIL (<=640px) — la mayoría del tráfico llega por aquí ===== */
@media (max-width: 640px) {
    /* scroll-margin: la nav flotante ocupa 54px + 12px de separación
       superior; se deja holgura para que el título no quede pegado. */

    /* Nav: más estrecha y pegada arriba, para no comerse el hero */
    .subnav { top: 12px; width: calc(100% - 24px); height: 54px; padding: 0 8px 0 18px; }
    .subnav .logo img { height: 20px; }

    /* Hero: menos aire muerto arriba y tipografía que respira */
    .hero.inverse { min-height: auto; padding: 110px 0 64px; }
    .hero.inverse h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.15; max-width: 100%; }
    .hero.inverse p.sub { font-size: 1.02rem; }
    .hero.inverse p.hero-quien { margin-bottom: 30px; }
    .hero-ctas { width: 100%; }
    .hero.inverse .btn-main { width: 100%; text-align: center; padding: 17px 24px; }


    /* Mockups: en móvil se ven a una columna, así que se les da
       más alto para que el texto de dentro siga siendo legible */
    .pruebas-grid { gap: 34px; margin-bottom: 44px; }
    .mockup-panel { aspect-ratio: 4/3; }
    .mockup-cols { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
    .mockup-aviso, .mockup-ficha { aspect-ratio: 4/3; }
    .confianza-bar { gap: 20px 28px; padding-top: 32px; }
    .confianza-bar span { font-size: 0.95rem; }

    .contraste-col { padding: 22px 20px; }
    .problema-frase { margin-top: 28px; }

    /* Flujograma: en escritorio es una fila con scroll lateral. En móvil
       ese scroll no se ve y media tabla queda invisible, así que se
       reconstruye como columna vertical con las flechas girando 90º. */
    .pipe-wrap { padding: 20px 16px; overflow-x: visible; }
    .pipe-fases { display: none; }
    .pipe-track { grid-template-columns: 1fr; min-width: 0; gap: 4px; }
    .pipe-col { padding: 0; width: 100%; }
    .pipe-arrow { transform: rotate(90deg); font-size: 1rem; padding: 2px 0; }
    .pipe-autos { min-height: 0; width: 100%; }
    .pipe-auto { font-size: 0.68rem; }
    .pipe-result-col { flex-direction: row; gap: 10px; }
    .auto-nota { margin-top: 16px; }

    /* Formulario: el padding de 40px deja los campos muy estrechos */
    .glass-form { padding: 26px 20px; }
    .cierre-text h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
    .faq button { padding: 20px; font-size: 0.98rem; }
    .faq .body p { padding: 0 20px 20px; }

    /* Hueco para que la barra fija de abajo no tape el footer */
}

/* ===== BARRA CTA FIJA EN MÓVIL =====
   La página es larga: sin esto, quien va por la mitad no tiene botón
   a mano. Se oculta al llegar al formulario para no taparlo. */
.cta-movil {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-movil.visible { transform: translateY(0); }
/* Barra fija de movil: hereda el color de botones.css y solo
   ajusta que ocupe todo el ancho. */
.cta-movil a {
    display: block; width: 100%;
}
@media (max-width: 640px) { .cta-movil { display: block; } }
@media (prefers-reduced-motion: reduce) { .cta-movil { transition: none; } }

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

/* ===== SECCION DEL FOOTER CLASICO =====
   Mismo negro azulado que el hero: la página abre y cierra igual.
   Requiere class="inverse" en el <footer class="footer-section">. */

@media (max-width: 900px) {
}