/*
 * global.css — Sistema de diseño de calcularrentabilidad.com
 * Filosofía: Refinado, editorial, confianza financiera.
 * Paleta: Azul marino profundo + Verde acento + Blancos cálidos.
 * Tipografía: Fraunces (display/títulos) + DM Sans (cuerpo/UI)
 */

/* ─── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ─── CUSTOM PROPERTIES (Design Tokens) ────────────────────── */
:root {
    /* Colores */
    --color-navy:       #0D1F3C;
    --color-navy-mid:   #1A3560;
    --color-accent:     #00C896;
    --color-accent-dim: #009E78;
    --color-gold:       #E8A838;
    --color-bg:         #F7F8FA;
    --color-bg-deep:    #EDF1F6;   /* Para alternar secciones: gris frío perceptible frente al blanco */
    --color-surface:    #FFFFFF;
    --color-border:     #E2E8F0;
    --color-text:       #1E293B;
    --color-muted:      #64748B;
    --color-error:      #E53E3E;

    /* Tipografía */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'DM Sans', -apple-system, sans-serif;
    --font-head:    'Space Grotesk', var(--font-body), sans-serif;

    /* Escala tipográfica */
    --text-xs:   clamp(0.75rem,  1.5vw, 0.813rem);
    --text-sm:   clamp(0.875rem, 1.8vw, 0.938rem);
    --text-base: clamp(1rem,     2vw,   1.063rem);
    --text-md:   clamp(1.125rem, 2.2vw, 1.25rem);
    --text-lg:   clamp(1.25rem,  2.5vw, 1.5rem);
    --text-xl:   clamp(1.5rem,   3vw,   2rem);
    --text-2xl:  clamp(2rem,     4vw,   2.75rem);
    --text-3xl:  clamp(2.5rem,   5vw,   3.75rem);

    /* ─── ESCALA DE ESPACIADO COMPLETA ───────────────────────
       Base 4px. Cada paso = múltiplo del anterior.
       TODOS los tokens referenciados en vivienda.css y
       simulador.css están definidos aquí.
    ──────────────────────────────────────────────────────── */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px  ← NUEVO */
    --space-6:   1.5rem;    /* 24px */
    --space-7:   1.75rem;   /* 28px  ← NUEVO */
    --space-8:   2rem;      /* 32px */
    --space-9:   2.25rem;   /* 36px  ← NUEVO */
    --space-10:  2.5rem;    /* 40px  ← NUEVO */
    --space-12:  3rem;      /* 48px */
    --space-14:  3.5rem;    /* 56px  ← NUEVO */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px  ← NUEVO (por si se usa en home) */
    --space-24:  6rem;      /* 96px */

    /* Layout */
    --container-max:  1200px;
    --container-wide: 1400px;
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  32px;

    /* Sombras */
    --shadow-sm:     0 1px 3px rgba(13,31,60,.06), 0 1px 2px rgba(13,31,60,.04);
    --shadow-md:     0 4px 16px rgba(13,31,60,.08), 0 2px 8px rgba(13,31,60,.05);
    --shadow-lg:     0 12px 40px rgba(13,31,60,.12), 0 4px 16px rgba(13,31,60,.08);
    --shadow-accent: 0 4px 24px rgba(0,200,150,.25);

    /* Transiciones */
    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET MÍNIMO ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── UTILIDADES DE CONTENEDOR ──────────────────────────────── */
.crr-container {
    width: min(var(--container-max), 100% - var(--space-8));
    margin-inline: auto;
}

.crr-container--wide {
    width: min(var(--container-wide), 100% - var(--space-8));
    margin-inline: auto;
}

/* ─── TIPOGRAFÍA GLOBAL ─────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    line-height: 1.15;
    color: var(--color-navy);
    font-weight: 600;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { max-width: 70ch; }

/* ─── BOTONES GLOBALES ──────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-navy);
}
.btn--primary:hover {
    background: var(--color-accent-dim);
    box-shadow: var(--shadow-accent);
    transform: translateY(-1px);
}

.btn--navy {
    background: var(--color-navy);
    color: #fff;
}
.btn--navy:hover {
    background: var(--color-navy-mid);
    transform: translateY(-1px);
}

.btn--outline {
    background: transparent;
    color: var(--color-navy);
    border: 1.5px solid var(--color-border);
}
.btn--outline:hover {
    border-color: var(--color-navy);
    background: var(--color-navy);
    color: #fff;
}

/* ─── BADGES ────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.badge--accent  { background: rgba(0,200,150,.12); color: var(--color-accent-dim); }
.badge--navy    { background: var(--color-navy); color: #fff; }
.badge--gold    { background: rgba(232,168,56,.15); color: #9A6B10; }
.badge--muted   { background: var(--color-border); color: var(--color-muted); }

/* ─── UTILIDADES ────────────────────────────────────────────── */
.text-accent  { color: var(--color-accent-dim); }
.text-muted   { color: var(--color-muted); }
.text-navy    { color: var(--color-navy); }
.font-display { font-family: var(--font-head); }

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

/* ─── KADENCE HEADER ────────────────────────────────────────── */
#masthead .menu-item a,
#masthead .menu-item > a {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-weight: 500 !important;
}

#masthead .current-menu-item > a,
#masthead .menu-item > a:hover {
    color: var(--color-accent) !important;
    text-shadow: none;
}

/* Botón hamburguesa del menú móvil: por defecto usa un gris oscuro
   (--global-palette5) pensado para cabecera clara. Como la cabecera es
   transparente sobre heros oscuros, se vuelve invisible. Lo forzamos a blanco. */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
    color: #ffffff !important;
}
.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
    color: var(--color-accent) !important;
}

/* Compensar altura del header absoluto en todas las páginas */
.site-main {
    padding-top: 80px;
}

/* Excluir páginas que tienen su propio hero oscuro */
.home .site-main,
.blog .site-main,
.single-post .site-main,
.page-template-simulador-hipoteca .site-main,
.page-template-page-home .site-main,
.page-template-page-vivienda .site-main,
.page-template-page-impuestos .site-main,
.page-template-page-inversion .site-main {
    padding-top: 0;
}

/* Todas las secciones hero absorben el header transparente */
.crr-hero,
.viv-hero,
.sim-hero,
.imp-hero,
.inv-hero,
.legal-hero,
.sp-hero,
.sg-hero,
.ct-hero {
    padding-top: calc(var(--space-14) + 150px) !important;
}

/* Línea de acento al pie de los heros de categoría, como la del
   panel de cálculo de los simuladores (sim-panel__head) */
.viv-hero::after,
.imp-hero::after,
.inv-hero::after,
.neg-hero::after,
.cmp-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--color-accent);
}

/* En móvil/tablet la cabecera es mucho más baja (una sola fila con logo
   y botón de menú), así que el mismo colchón que necesita el header de
   escritorio deja un hueco enorme antes del contenido. Lo reducimos. */
@media (max-width: 768px) {
    .crr-hero,
    .viv-hero,
    .sim-hero,
    .imp-hero,
    .inv-hero,
    .legal-hero,
    .sp-hero,
    .sg-hero,
    .ct-hero {
        padding-top: 110px !important;
    }
}

/* El Personalizador de Kadence fija el logo a max-width:403px sin variante
   para móvil. A esa anchura, el logo por sí solo ya no cabe junto al botón
   de menú en pantallas estrechas, y lo empuja fuera de la vista. Lo reducimos. */
@media (max-width: 480px) {
    .site-branding a.brand img {
        max-width: 230px !important;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    .site-branding a.brand img {
        max-width: 300px !important;
    }
}