/* ==========================================================================
   Centralo — sistema de diseño

   Tema claro y cálido. La referencia es el sector: sol, cobre, señal de
   obra. El ámbar se usa para superficies y detalles; para texto y botones
   se baja a naranja 700, que es el primer tono de la rampa que llega a
   4,5:1 sobre blanco.
   ========================================================================== */

:root {
    --bg: #FDFBF7;          /* blanco cálido, no clínico */
    --bg-alt: #F6F1E9;      /* franjas alternas de sección */
    --surface: #FFFFFF;
    --border: #E7E1D6;
    --border-strong: #D6CDBE;

    --ink: #1C1917;         /* casi negro cálido */
    --ink-soft: #44403C;
    --ink-muted: #6B6259;

    --brand-100: #FEF3C7;
    --brand-300: #FCD34D;
    --brand-500: #F59E0B;   /* ámbar: rellenos, iconos, decoración */
    --brand-600: #EA580C;
    --brand-700: #C2410C;   /* naranja accesible: texto y botones */
    --brand-900: #7C2D12;

    --success: #15803D;
    --success-bg: #F0FDF4;
    --danger: #B91C1C;
    --danger-bg: #FEF2F2;

    --gradient-brand: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);

    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-lg: 20px;
    --radius-md: 12px;
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
    --shadow-md: 0 4px 16px rgba(28, 25, 23, 0.07);
    --shadow-lg: 0 18px 40px -18px rgba(124, 45, 18, 0.28);
}

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

html {
    scroll-behavior: smooth;
    font-family: var(--font-family);
    background-color: var(--bg);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   Tipografía y utilidades
   ========================================================================== */

h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.gradient-text {
    background: var(--gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand-700); /* respaldo si el navegador no recorta el fondo */
}

.highlight {
    color: var(--brand-600);
}

.section {
    padding: 90px 0;
    position: relative;
    /* La barra de navegación es fija: sin esto, al pulsar "Precios" el título
       de la sección queda tapado por la propia barra. */
    scroll-margin-top: 96px;
}

.section-dark {
    background-color: var(--bg-alt);
}

.section-title {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.section-title h2 {
    font-size: 36px;
    margin-bottom: 12px;
}

.section-title p {
    color: var(--ink-muted);
    font-size: 18px;
}

.glass-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--brand-100);
    border: 1px solid var(--brand-300);
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--brand-900);
}

/* Iconos: heredan el color del contenedor vía currentColor. */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--brand-700);
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: 700;
}
.skip-link:focus { left: 0; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--brand-700);
    outline-offset: 3px;
}

/* ==========================================================================
   Barra de navegación
   ========================================================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(253, 251, 247, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 22px;
    font-weight: 800;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.03em;
}

.logo-icon {
    width: 28px;
    height: 28px;
    color: var(--brand-600);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    color: var(--ink-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    /* Sin esto, "Cómo funciona" parte en dos líneas y el botón de la derecha
       en tres en cuanto la ventana baja de 900 px. */
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-btn {
    background: var(--gradient-brand);
    color: #FFFFFF !important;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600 !important;
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    padding: 170px 0 90px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(150px);
    z-index: 0;
    opacity: 0.5;
}

.hero-glow-1 {
    top: 4%;
    left: 12%;
    background: var(--brand-300);
}

.hero-glow-2 {
    top: 16%;
    right: 10%;
    background: #FDBA74;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.badge {
    display: inline-block;
    background: var(--brand-100);
    border: 1px solid var(--brand-300);
    color: var(--brand-900);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: 52px;
    line-height: 1.12;
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: 20px;
    color: var(--ink-soft);
    max-width: 750px;
    margin: 0 auto 36px auto;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 60px;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--gradient-brand);
    color: #FFFFFF;
    box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -18px rgba(124, 45, 18, 0.45);
}

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background: var(--bg-alt);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

/* Barra de cifras */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    box-shadow: var(--shadow-md);
}

.stat-item {
    display: grid;
    /* Rejilla y no columna flexible: así la cifra y la etiqueta de las cuatro
       casillas comparten línea base aunque una de ellas ocupe dos líneas. */
    grid-template-rows: 36px auto;
    align-content: start;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

.stat-number {
    align-self: end;
    font-size: 30px;
    font-weight: 800;
    color: var(--brand-700);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Una cifra ("< 30 s") y una frase ("Sin permanencia") no pueden ir al mismo
   cuerpo: la frase parte en dos líneas y descuadra la fila entera. */
.stat-number.stat-frase {
    font-size: 21px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.stat-label {
    font-size: 13px;
    color: var(--ink-muted);
    text-align: center;
}

/* ==========================================================================
   Selector de sector
   ========================================================================== */

.niche-selector {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.niche-btn {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--ink-muted);
    padding: 12px 24px;
    border-radius: 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.niche-btn:hover {
    border-color: var(--brand-500);
    color: var(--ink);
}

.niche-btn.active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: var(--shadow-lg);
}

.niche-card-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: center;
}

.niche-info h3 {
    font-size: 26px;
    margin-bottom: 12px;
}

.niche-info p {
    color: var(--ink-soft);
    margin-bottom: 20px;
}

.problem-solution-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.box-item {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    font-size: 15px;
    line-height: 1.55;
    border-left: 3px solid;
}

.box-item.problem {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: #7F1D1D;
}

.box-item.solution {
    background: var(--success-bg);
    border-color: var(--success);
    color: #14532D;
}

.niche-preview {
    padding: 32px 28px;
    text-align: center;
    background: var(--bg-alt);
    border-color: var(--border-strong);
}

.preview-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ink-muted);
    margin-bottom: 10px;
}

.preview-value {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--brand-700);
    margin-bottom: 8px;
}

.preview-note {
    color: var(--ink-muted);
    font-size: 13px;
}

/* ==========================================================================
   Calculadora
   ========================================================================== */

.calculator-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    padding: 40px;
}

.calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}

.input-group label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    color: var(--ink-soft);
}

.highlight-val {
    color: var(--brand-700);
    font-weight: 800;
    font-size: 18px;
    white-space: nowrap;
}

.input-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    outline: none;
}

.input-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-brand);
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.input-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-600);
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.calc-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.result-box {
    padding: 22px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid;
}

.result-box.danger {
    background: var(--danger-bg);
    border-color: #FECACA;
}

.result-box.success {
    background: var(--success-bg);
    border-color: #BBF7D0;
}

.result-label {
    display: block;
    font-size: 14px;
    color: var(--ink-muted);
    margin-bottom: 6px;
}

.result-amount {
    display: block;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.result-box.danger .result-amount { color: var(--danger); }
.result-box.success .result-amount { color: var(--success); }

.result-box small {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.5;
}

/* ==========================================================================
   Productos
   ========================================================================== */

/* Dos columnas y no cuatro: cada producto lleva media docena de bullets, y a
   cuatro columnas la línea se queda en tres palabras y no hay quien lo lea. */
.producto-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
}

.producto {
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.producto-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.producto-cabecera .pilar-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.producto h3 {
    font-size: 21px;
    margin-bottom: 4px;
}

.producto-claim {
    color: var(--brand-700);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}

.producto > p {
    color: var(--ink-muted);
    font-size: 15px;
}

.producto-puntos {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 2px;
}

.producto-puntos li {
    position: relative;
    padding-left: 20px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.producto-puntos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--brand-500);
}

/* El de "a medida" no cierra una venta, abre una conversación: por eso es el
   único de los cuatro que lleva botón dentro de la tarjeta. Ocupa la fila
   entera para que cierre el bloque en vez de quedarse huérfano al lado de un
   hueco vacío. */
.producto-medida {
    grid-column: 1 / -1;
    border-color: var(--brand-300);
    background: var(--bg-alt);
}

/* display:block a propósito: 'columns' no tiene efecto sobre un contenedor
   flex, y la lista base lo es. */
.producto-medida .producto-puntos {
    display: block;
    columns: 2;
    column-gap: 32px;
}

.producto-medida .producto-puntos li {
    break-inside: avoid;
    margin-bottom: 9px;
}

.producto-medida .btn {
    align-self: flex-start;
    margin-top: 4px;
}

@media (max-width: 700px) {
    .producto-medida .producto-puntos { columns: 1; }
}

.pilar-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--brand-100);
    color: var(--brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.pilar-icon .icon {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Precios
   ========================================================================== */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.pricing-card {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.pricing-card.featured {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-lg);
}

/* La tarjeta a medida no compite en precio: no lleva cifra, así que se
   distingue por el fondo para que nadie la lea como "la barata". */
.pricing-medida {
    background: var(--bg-alt);
    border-color: var(--brand-300);
}

.pricing-medida .setup-price {
    font-size: 24px;
}

.pricing-medida .monthly-price {
    font-size: 16px;
}

.popular-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-brand);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.card-header h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.pack-desc {
    color: var(--ink-muted);
    font-size: 14.5px;
    min-height: 44px;
    margin-bottom: 18px;
}

.price-box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 22px;
}

.setup-price {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.monthly-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-700);
    margin-top: 4px;
}

/* En línea propia: con cuatro tarjetas la columna se queda en ~270 px y
   "1.200 € puesta en marcha" partía por la mitad de la frase. */
.subtext {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0;
}

.pricing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 26px;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* La marca de verificación va como SVG incrustado en el propio CSS: evita
   repetir un <svg> en cada una de las quince líneas de la tabla de precios. */
.pricing-features li::before {
    content: '';
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    border-radius: 50%;
    background-color: var(--brand-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

.pricing-note {
    max-width: 760px;
    margin: 28px auto 0;
    text-align: center;
    color: var(--ink-muted);
    font-size: 14px;
}

/* ==========================================================================
   Simulador de WhatsApp
   ========================================================================== */

.demo-wrapper {
    display: flex;
    justify-content: center;
}

.chat-phone-frame {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(28, 25, 23, 0.35);
}

.phone-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--ink);
    color: #FFFFFF;
}

.avatar-box {
    position: relative;
    flex-shrink: 0;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar .icon {
    width: 22px;
    height: 22px;
}

.online-indicator {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22C55E;
    border: 2px solid var(--ink);
}

.phone-name {
    font-weight: 700;
    font-size: 15px;
}

.phone-status {
    font-size: 12px;
    color: #A8A29E;
}

.chat-messages {
    height: 380px;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-alt);
}

.message {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
}

.bot-msg {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
    color: var(--ink);
}

.user-msg {
    align-self: flex-end;
    background: var(--brand-100);
    border: 1px solid var(--brand-300);
    border-bottom-right-radius: 5px;
    color: var(--brand-900);
    /* Un mensaje pegado del portapapeles puede no tener espacios. */
    overflow-wrap: anywhere;
}

.msg-time {
    font-size: 10.5px;
    color: var(--ink-muted);
    text-align: right;
    margin-top: 4px;
}

.chat-input-bar {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.chat-input-bar input {
    flex: 1;
    min-width: 0;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 11px 16px;
    color: var(--ink);
    font-family: inherit;
    font-size: 14.5px;
    outline: none;
}

.chat-input-bar input:focus {
    border-color: var(--brand-500);
}

.chat-input-bar input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-input-bar button {
    background: var(--gradient-brand);
    color: #FFFFFF;
    border: none;
    padding: 0 20px;
    border-radius: 22px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
}

.chat-input-bar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    color: var(--ink);
}

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

.faq-item summary::after {
    content: '+';
    color: var(--brand-700);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.faq-item[open] summary::after { content: '\2212'; }

.faq-item p {
    margin-top: 12px;
    color: var(--ink-soft);
}

/* ==========================================================================
   Pie
   ========================================================================== */

.footer {
    padding: 44px 0;
    text-align: center;
    background: var(--ink);
    color: #A8A29E;
    font-size: 14px;
}

.footer p + p { margin-top: 8px; }
.footer-brand { color: #FAFAF9; }
.footer strong { color: #FFFFFF; }
.footer a { color: var(--brand-300); }

.footer-legal {
    max-width: 640px;
    margin-inline: auto;
    font-size: 13px;
    line-height: 1.6;
    color: #8A827A;
}

/* ==========================================================================
   Adaptación a pantalla
   ========================================================================== */

/* Cuatro tarjetas de precio no caben en un portátil pequeño: pasan a 2x2 antes
   de romper a columna única, que obliga a hacer scroll para comparar. */
@media (max-width: 1150px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .calculator-card { grid-template-columns: 1fr; }
    .niche-card-container { grid-template-columns: 1fr; }
    .hero h1 { font-size: 38px; }
    .stats-bar { grid-template-columns: 1fr 1fr; }
    .pack-desc { min-height: 0; }
}

@media (max-width: 900px) {
    /* La navegación no se oculta: en un móvil es la única forma de llegar
       a precios o a la demo sin recorrer toda la página. Pasa a una fila
       que se desplaza en horizontal. */
    .nav-container { flex-wrap: wrap; gap: 10px; }
    .nav-links {
        width: 100%;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a { font-size: 14px; }
    .nav-btn { padding: 8px 16px; }
}

@media (max-width: 600px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .producto-lista { grid-template-columns: 1fr; }
    .producto { padding: 24px 20px; }
    .section { padding: 64px 0; }
    .section-title h2 { font-size: 28px; }
    .hero { padding: 150px 0 70px 0; }
    .hero h1 { font-size: 32px; }
    .hero-subtitle { font-size: 17px; }
    .stats-bar { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; }
    .niche-card-container { padding: 24px; }
    .calculator-card { padding: 24px; }
    .preview-value { font-size: 34px; }
    .result-amount { font-size: 28px; }
}

/* ==========================================================================
   Páginas legales (baja, privacidad)
   ========================================================================== */

.legal-wrap {
    max-width: 760px;
}

.legal-card {
    padding: 36px 34px;
}

.legal-card h3 {
    font-size: 17px;
    margin: 26px 0 8px;
}

.legal-card h3:first-child {
    margin-top: 0;
}

.legal-card p {
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.65;
    margin-bottom: 12px;
}

.legal-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.legal-lista li {
    position: relative;
    padding-left: 20px;
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.6;
}

.legal-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--brand-500);
}

.legal-datos {
    background: var(--bg-alt);
    border-left: 3px solid var(--brand-500);
    padding: 14px 16px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.legal-volver {
    margin-top: 24px;
    font-size: 15px;
}

@media (max-width: 600px) {
    .legal-card { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}