:root {
    /* Colors */
    --color-bg: #f8fafc;
    --color-text-main: #0f172a;
    --color-text-muted: #475569;
    --color-primary: #0ea5e9;
    --color-primary-dark: #0284c7;
    --color-primary-light: #e0f2fe;
    
    --color-rose: #f43f5e;
    --color-rose-bg: #ffe4e6;
    --color-sky: #0ea5e9;
    --color-sky-bg: #e0f2fe;
    --color-indigo: #6366f1;
    --color-indigo-bg: #e0e7ff;
    --color-purple: #a855f7;
    --color-purple-bg: #f3e8ff;
    --color-amber: #f59e0b;
    --color-amber-bg: #fef3c7;
    --color-emerald: #10b981;
    --color-emerald-bg: #d1fae5;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3);

    /* Fonts */
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-heading: 'Manrope', system-ui, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* PEND-189 (2026-09-29): en un iPhone de 375 px la página medía 488 de ancho (se corría de costado) porque los orbs
   decorativos sobresalen, y el `overflow-x: hidden` solo en el body no alcanza en los navegadores de celular. Dos cosas:
   el recorte va en html Y body, con `clip` (no convierte al body en contenedor de scroll, así el header position:fixed
   sigue igual) y `hidden` antes como respaldo para navegadores que no conocen `clip`; y los orbs viven en cajas .orbs que
   los recortan (abajo, en Decorations). El body es position: relative para que la caja .orbs del <main> lo cubra entero:
   hasta ahora los orbs se ubicaban contra el bloque inicial (la ventana), que arriba de todo coincide con el body. */
html {
    overflow-x: hidden;
    overflow-x: clip;
    /* 07/11/2026 (revisión de Fable 5.1): el encabezado es fijo (115 px en el celular, ~70 en la PC) y tapaba el título de
       cada sección a la que lleva un ancla (#respuestas-ia, #preguntas…, también los enlaces de los anuncios). */
    scroll-padding-top: 8rem;
}
@media (min-width: 768px) {
    html { scroll-padding-top: 5.5rem; }
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.5;
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ==========================================================================
   Header & Nav
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding: 1rem 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* 23/10/2026 (decisión del dueño): el logo de la app (LogoDelSidebar.tsx): isotipo de /isotype.svg y "Cognalio" en
   CognalioFont con el mismo degradé. */
@font-face {
    font-family: 'CognalioFont';
    src: url('/fonts/Cognalio-font.otf') format('opentype');
    font-display: swap;
}

.logo-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon img {
    width: 100%;
    height: 100%;
}

.logo-text {
    font-family: 'CognalioFont', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    line-height: 1;
    transform: translateY(3px);
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 35%, #6366F1 70%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-nav {
    display: none;
    gap: 2rem;
}

@media (min-width: 768px) {
    .main-nav {
        display: flex;
    }
}

.main-nav a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: color 0.2s;
}

.main-nav a:hover {
    color: var(--color-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 07/11/2026 (revisión de Fable 5.1): "Iniciar sesión" como enlace de texto al lado del botón "Probar gratis 30 días" en la
   PC; en el celular va en la fila del menú (.entrar-celular) y el botón dice solo "Probar gratis". */
.entrar-pc {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: color 0.2s;
}
.entrar-pc:hover { color: var(--color-primary); }
.main-nav .entrar-celular { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-large {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    border-radius: 0.75rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    box-shadow: 0 4px 15px -3px rgba(14, 165, 233, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -3px rgba(14, 165, 233, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Decorations & Utilities
   ========================================================================== */
.bg-grid {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100vh;
    z-index: -10;
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 110%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 110%);
}

/* PEND-189 (2026-09-29): la caja que recorta los orbs para que no ensanchen la página en el celular. Cubre su bloque
   contenedor: el <body> para la de arriba (el <main> no está posicionado) y .core-pillars para la de .orb-3. Con
   z-index -5 queda detrás del contenido y delante de .bg-grid (-10), como estaban los orbs sueltos. */
.orbs {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;   /* = inset: 0, que Safari anterior a 14.1 no conoce */
    overflow: hidden;
    pointer-events: none;
    z-index: -5;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -5;
    opacity: 0.4;
    pointer-events: none;
}

.orb-1 {
    width: 600px; height: 600px;
    background: var(--color-primary-light);
    top: -100px; left: 50%;
    transform: translateX(-50%);
}

.orb-2 {
    width: 400px; height: 400px;
    background: #bfdbfe; /* blue-200 */
    /* PEND-189: era `top: 20%` contra el bloque inicial (la altura de la ventana); ahora su caja es el body entero, así que
       el mismo lugar es 20vh (20svh donde existe: la ventana con las barras del celular visibles, como el bloque inicial). */
    top: 20vh; top: 20svh; left: 10%;
}

.orb-3 {
    width: 500px; height: 500px;
    background: var(--color-primary-light);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.text-gradient {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    position: relative;
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    background: var(--color-primary-light);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: var(--color-primary-dark);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0); }
    100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.hero-title {
    font-size: 3rem;
    max-width: 800px;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .hero-title { font-size: 4.5rem; }
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
    .hero-subtitle { font-size: 1.25rem; }
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
        width: auto;
    }
}

/* ==========================================================================
   Social Proof
   ========================================================================== */
.social-proof {
    margin-top: 4rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .social-proof {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.proof-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.proof-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
/* PEND-189 (2026-09-29): los íconos son SVG en línea (sprite al principio del <body> de landing.html) y ya no la fuente
   Material Symbols (1,1 MB). .icono reproduce lo que hacía la clase de la fuente: 24 px por omisión, un cuadrado de 1em
   del color del texto; donde el ícono tenía otro tamaño (.proof-icon, .zz-icon, los style="font-size" del HTML) se
   sigue fijando con font-size, igual que antes. */
.icono {
    display: inline-block;
    font-size: 24px;
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}
.sprite-iconos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.proof-icon { font-size: 1.25rem; }
.icon-api { color: var(--color-amber); }
.icon-bolt { color: var(--color-indigo); }
.icon-lock { color: var(--color-emerald); }

/* ==========================================================================
   Features Bento Grid
   ========================================================================== */
.features {
    position: relative;
    padding: 6rem 0;
}

.features-header {
    text-align: center;
    max-width: 600px;
    margin-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
}

.features-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .features-header h2 { font-size: 3rem; }
}
.icon-sky { background: var(--color-sky-bg); color: var(--color-sky); border-color: rgba(14,165,233,0.2); }
.icon-indigo { background: var(--color-indigo-bg); color: var(--color-indigo); border-color: rgba(99,102,241,0.2); }
.icon-purple { background: var(--color-purple-bg); color: var(--color-purple); border-color: rgba(168,85,247,0.2); }
.icon-emerald { background: var(--color-emerald-bg); color: var(--color-emerald); border-color: rgba(16,185,129,0.2); }
.icon-amber { background: var(--color-amber-bg); color: var(--color-amber); border-color: rgba(245,158,11,0.2); }

/* Capturas dentro de las tarjetas */
.mini-browser {
    width: 100%;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
    overflow: hidden;
    transform: scale(0.95);
    transform-origin: center right;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mini-header {
    background: #f8fafc;
    padding: 0.35rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.mini-browser img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: left top;
}

.feature-list li {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.feature-list .check { color: var(--color-rose); }

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section {
    padding: 6rem 0;
}

.cta-box {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 2rem;
    padding: 5rem 2rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background: radial-gradient(circle, var(--color-sky-bg) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.cta-box h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .cta-box h2 { font-size: 3.5rem; }
}

.cta-box p {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: white;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    padding: 4rem 0 2rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

/* PEND-133 (2026-09-19): tres columnas (marca, Plataforma, Legal): la de "Desarrolladores" se retiró del HTML. */
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.footer-brand p {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    max-width: 250px;
}
/* 29/10/2026: el contacto del pie (Paddle pide un contacto visible desde la portada), con el aspecto de los enlaces del pie. */
.footer-contacto a { color: var(--color-text-muted); text-decoration: underline; transition: color 0.2s; }
.footer-contacto a:hover { color: var(--color-primary); }
@media (pointer: coarse) {
    .footer-contacto a { padding: 14px 0; }
}

.footer-links h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.footer-links li { margin-bottom: 0.75rem; }
.footer-links a {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--color-primary); }
/* PEND-189 (2026-09-29): en pantallas táctiles los enlaces del pie medían 17-19 px de alto, menos de los 44 px que
   pide una zona tocable. El padding vertical de un elemento en línea agranda la zona que recibe el toque sin mover
   nada (no cambia la altura de la línea), así que el dibujo es el mismo; en la PC (puntero fino) no cambia nada. Las
   zonas de dos enlaces vecinos se pisan unos px: el toque ahí va al de abajo, que es el que se ve más cerca. */
@media (pointer: coarse) {
    .footer-links a { padding: 14px 0; }
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    padding-top: 2rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* 23/10/2026: el selector de país (Argentina, Brasil, resto de Latinoamérica); la portada que se está viendo va marcada. */
.footer-pais {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
}
.footer-pais a { color: var(--color-text-muted); transition: color 0.2s; }
.footer-pais a:hover { color: var(--color-primary); }
.footer-pais a[aria-current="page"] { color: var(--color-text-main); font-weight: 600; }
/* El botón flotante de WhatsApp (60 px, a 2rem del borde) tapaba el último país al final de la página. */
@media (min-width: 768px) {
    .footer-pais { margin-right: 5.5rem; }
}
@media (pointer: coarse) {
    .footer-pais a { padding: 14px 0; }
}

/* ==========================================================================
   New Landing Page Features (Dynamic Text, WSP)
   ========================================================================== */

/* Dynamic Text */
.dynamic-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-emerald));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    min-width: 280px;
    text-align: left;
}

/* Títulos de sección */
.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

/* Float WhatsApp */
.float-wsp {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: transform 0.3s ease;
}
.float-wsp:hover {
    transform: scale(1.1);
    color: white;
}
/* ALTA-21/10 (B13): en el celular el botón de 60 px pegado abajo tapaba la flecha de "Comenzar prueba gratis" (390×844).
   Más chico (44 px, el mínimo cómodo para el dedo), más arriba y más pegado al borde: a partir de 380 px de ancho ya no
   cruza al botón principal en ningún punto del scroll, y en la primera pantalla no lo pisa en ningún tamaño. */
@media (max-width: 480px) {
    .float-wsp {
        width: 44px;
        height: 44px;
        right: 0.75rem;
        bottom: 5rem;
    }
    .float-wsp .icono {
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   Zig-Zag Pillars
   ========================================================================== */
.core-pillars {
    position: relative;
    padding: 6rem 0;
}
.zz-row {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    margin-bottom: 6rem;
}
.zz-row:last-child {
    margin-bottom: 0;
}
@media (min-width: 992px) {
    .zz-row {
        flex-direction: row;
        gap: 6rem;
    }
    .zz-row.reverse {
        flex-direction: row-reverse;
    }
}
.zz-content {
    flex: 1;
}
.zz-image {
    flex: 1.2;
    width: 100%;
}
.zz-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}
/* PEND-189: era `.zz-icon span { font-size: 2rem; font-weight: 600; }` sobre la fuente; el peso 600 ahora viene en el
   dibujo (el sprite trae esos cuatro íconos en peso 600). */
.zz-icon .icono { font-size: 2rem; }
.zz-content h3 {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-main);
}
.zz-content p {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
}
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.feature-list li {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.feature-list .check { 
    color: var(--color-emerald);
    background: var(--color-emerald-bg);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Enhancing mini-browser for zz */
.zz-image .mini-browser {
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
    transform: scale(1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.zz-row:hover .zz-image .mini-browser {
    transform: translateY(-5px);
    box-shadow: 0 35px 60px -15px rgba(15, 23, 42, 0.2);
}
.zz-image .mini-browser img {
    height: 350px;
    object-position: left top;
}
@media (min-width: 992px) {
    .zz-image .mini-browser img {
        height: 450px;
    }
}

/* 07/11/2026: la casilla de mail del bloque de avisos (texto, no captura: los asuntos de los mails de verdad). */
.casilla {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}
.casilla li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.casilla li:last-child { border-bottom: none; }
.casilla-de {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-main);
}
.casilla-asunto {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* 07/11/2026: compradores y operadores, en dos tarjetas debajo de los cuatro bloques. */
.extras {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 6rem;
}
@media (min-width: 768px) {
    .extras { grid-template-columns: 1fr 1fr; }
}
.extra {
    background: white;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    padding: 2rem;
}
.extra h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}
.extra p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* 07/11/2026 (decisión del dueño, 3A): la sección de precios, sin montos. */
.planes {
    text-align: center;
    padding-top: 1rem;   /* la sección de funciones ya deja 6rem abajo */
    max-width: 760px;
}
.planes .section-title { margin-bottom: 1.5rem; }
.planes p {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.planes-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}
.btn-secundario {
    background: white;
    color: var(--color-text-main);
    border: 1px solid rgba(15, 23, 42, 0.15);
}
.btn-secundario:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ==========================================================================
   Sales & CRO Tweaks
   ========================================================================== */
.micro-text {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    font-weight: 500;
}
.risk-reversal {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin-top: 1rem;
    font-weight: 400;
}
.faq-section {
    /* PEND-209: solo arriba y abajo; "5rem 0" pisaba el relleno lateral de .container y en el celular el texto tocaba el borde */
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}
.faq-item h4 {
    font-size: 1.15rem;
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
}
.faq-item p {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}
/* 23/10/2026: "Mirá los precios" en la respuesta sobre la prueba. */
.faq-item p a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   06/11/2026 (ADR-0017): el cartel de consentimiento de cookies analíticas. Oculto por defecto (`hidden` en el HTML);
   /gtag-init.js lo muestra solo en los países de la lista de OPS. Abajo de la pantalla, sin tapar el botón de WhatsApp.
   ========================================================================== */
.consentimiento {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 1rem;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.consentimiento[hidden] {
    display: none;
}

.consentimiento-cuerpo {
    flex: 1 1 18rem;
}

.consentimiento-titulo {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-text-main, #0f172a);
}

.consentimiento-texto {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted, #475569);
}

.consentimiento-texto a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.consentimiento-botones {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.consentimiento-btn-secundario {
    background: #ffffff;
    color: var(--color-text-main, #0f172a);
    border: 1px solid rgba(15, 23, 42, 0.2);
}

.consentimiento-btn-secundario:hover {
    background: #f1f5f9;
}

@media (max-width: 600px) {
    .consentimiento {
        bottom: 5rem;   /* por encima del botón flotante de WhatsApp */
    }
    .consentimiento-botones {
        width: 100%;
        margin-left: 0;
    }
    .consentimiento-botones .btn {
        flex: 1 1 0;
    }
}

/* 07/11/2026 (pedido del dueño): en el celular el menú del encabezado quedaba oculto entero y no había cómo llegar a los
   precios desde arriba (el primer enlace estaba en las preguntas frecuentes, casi al final). Debajo del logo y del botón
   va una segunda fila con "Preguntas frecuentes" y "Precios"; "Plataforma" y "Soluciones" siguen solo en la PC porque no
   entran en 375 px. El encabezado pasa de 69 a 115 px y sigue por debajo de los 8rem que la portada deja arriba (.hero).
   En 320 px el botón baja a su propia línea, alineado a la derecha. inicio.html (app.cognalio.com) usa la misma hoja: su
   menú ("Plataforma" y "Precios") también aparece en el celular. Guarda: precioVisibleEnElCelular.spec.ts.
   07/11/2026 (revisión de Fable 5.1): "Soluciones" ya no existe (una sola sección, "Funciones"); en la fila del menú entra
   "Entrar" (en la PC, "Iniciar sesión" al lado del botón; las dos palabras no entraban en 375 px), y el botón dice solo "Probar gratis" (sin " 30 días"). */
@media (max-width: 767px) {
    .header-container { flex-wrap: wrap; row-gap: 0.25rem; }
    .header-actions { margin-left: auto; }
    .main-nav { display: flex; order: 3; width: 100%; justify-content: center; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0; }
    .main-nav a { white-space: nowrap; }
    .main-nav a[href="#plataforma"] { display: none; }
    .main-nav .entrar-celular { display: inline; }
    .entrar-pc, .solo-pc { display: none; }
}
@media (max-width: 767px) and (pointer: coarse) {
    .main-nav a { padding: 10px 0; }
}