/* ============================================================================
   PandaNexo Posadas — DESIGN TOKENS
   Sistema de diseño unificado (landing + panel admin).
   Basado en Material Design 3: color por roles, escala de formas,
   elevación tonal, tipografía fluida y motion expresivo.

   Identidad: santuario boutique caribeño. Paleta cálida y terrosa
   (terracota + verde selva + latón) que comunica refugio, calma y lujo
   artesanal — deliberadamente distinta del azul técnico de Rent a Car.

   Capas:
     1. Primitivas  → rampas de color crudas, nunca se usan directamente.
     2. Semánticas  → roles (surface, on-surface, primary...). Cambian con el tema.
     3. Sistema     → tipografía, espaciado, radios, elevación, motion, layout.
     4. Legado      → alias de las variables antiguas para no romper nada.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. PRIMITIVAS — rampas de color
   ---------------------------------------------------------------------------- */
:root {
    /* Marca: terracota caribeña. Transmite refugio, calidez, artesanía. */
    --terra-50:  #FBF1ED;
    --terra-100: #F6E0D7;
    --terra-200: #ECC4B4;
    --terra-300: #E0A288;
    --terra-400: #D27D5C;
    --terra-500: #C25E3A;
    --terra-600: #A8482A;
    --terra-700: #8A3823;
    --terra-800: #6E2D20;
    --terra-900: #56241E;
    --terra-950: #31120F;

    /* Secundario: verde selva tropical. Palmas, jardines, frescura. */
    --jungle-50:  #F0F7F1;
    --jungle-100: #DBEDDE;
    --jungle-200: #BADEC1;
    --jungle-300: #8FC79E;
    --jungle-400: #5DAA72;
    --jungle-500: #388D52;
    --jungle-600: #267140;
    --jungle-700: #1D5A34;
    --jungle-800: #18482B;
    --jungle-900: #133A23;
    --jungle-950: #0A2115;

    /* Terciario / premium: latón (brass). Lujo cálido, sustituye al oro frío. */
    --brass-50:  #FBF6EC;
    --brass-100: #F5E9CC;
    --brass-200: #EBD49B;
    --brass-300: #DCB86A;
    --brass-400: #CDA040;
    --brass-500: #B8862E;
    --brass-600: #9A6C24;
    --brass-700: #7B521F;
    --brass-800: #5F401D;
    --brass-900: #4A321A;
    --brass-950: #2A1B0E;

    /* Neutrales cálidos (sand/stone) — coherentes con la identidad terracota. */
    --sand-0:    #FFFFFF;
    --sand-25:   #FDFBF8;
    --sand-50:   #FAF6F0;
    --sand-100:  #F4EDE3;
    --sand-200:  #E9DDCC;
    --sand-300:  #D8C5AC;
    --sand-400:  #B89F82;
    --sand-500:  #9A8062;
    --sand-600:  #7C6649;
    --sand-700:  #5E4D37;
    --sand-800:  #3F3326;
    --sand-850:  #2E2519;
    --sand-900:  #211A11;
    --sand-950:  #15110B;
    --sand-1000: #0D0A06;

    /* Funcionales */
    --emerald-50:  #ECFDF5;
    --emerald-100: #D1FAE5;
    --emerald-400: #34D399;
    --emerald-500: #10B981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-900: #064E3B;

    --amber-50:  #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-700: #B45309;
    --amber-900: #78350F;

    --red-50:  #FEF2F2;
    --red-100: #FEE2E2;
    --red-400: #F87171;
    --red-500: #EF4444;
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --red-900: #7F1D1D;

    /* Marca de canal */
    --whatsapp:      #25D366;
    --whatsapp-ink:  #128C7E;
}

/* ----------------------------------------------------------------------------
   2. SEMÁNTICAS — TEMA CLARO (por defecto)
   Fondo crema/arena cálido; superficies blancas con calidez sutil.
   ---------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Fondo de pantalla y superficies con elevación tonal */
    --surface-dim:        #F2E9DD;
    --surface:            var(--sand-50);
    --surface-bright:     var(--sand-25);
    --surface-1:          var(--sand-0);
    --surface-2:          var(--sand-0);
    --surface-3:          var(--sand-50);
    --surface-4:          var(--sand-100);
    --surface-5:          var(--sand-100);
    --surface-alt:        var(--sand-100);
    --surface-sunken:     var(--sand-100);
    --surface-inverse:    var(--sand-900);
    --on-surface-inverse: var(--sand-50);

    /* Texto */
    --on-surface:         var(--sand-900);
    --on-surface-strong:  var(--sand-950);
    --on-surface-variant: var(--sand-700);
    --on-surface-muted:   var(--sand-500);
    --on-surface-faint:   var(--sand-400);

    /* Bordes */
    --outline:            var(--sand-200);
    --outline-variant:    var(--sand-100);
    --outline-strong:     var(--sand-300);
    --outline-focus:      var(--terra-500);

    /* Primario (terracota) */
    --primary:               var(--terra-600);
    --primary-hover:         var(--terra-700);
    --primary-active:        var(--terra-800);
    --on-primary:            #FFFFFF;
    --primary-container:     var(--terra-50);
    --primary-container-alt: var(--terra-100);
    --on-primary-container:  var(--terra-800);
    --primary-outline:       var(--terra-200);

    /* Secundario (verde selva) */
    --secondary:              var(--jungle-600);
    --on-secondary:           #FFFFFF;
    --secondary-container:    var(--jungle-50);
    --on-secondary-container: var(--jungle-800);

    /* Terciario / premium (latón) */
    --tertiary:              var(--brass-600);
    --on-tertiary:           #FFFFFF;
    --tertiary-container:    var(--brass-50);
    --on-tertiary-container: var(--brass-800);

    /* Estados */
    --success:              var(--jungle-600);
    --on-success:           #FFFFFF;
    --success-container:    var(--jungle-50);
    --on-success-container: var(--jungle-700);

    --warning:              var(--amber-600);
    --on-warning:           #FFFFFF;
    --warning-container:    var(--amber-50);
    --on-warning-container: var(--amber-700);

    --danger:               var(--red-600);
    --on-danger:            #FFFFFF;
    --danger-container:     var(--red-50);
    --on-danger-container:  var(--red-700);

    --info:                 var(--jungle-600);
    --on-info:              #FFFFFF;
    --info-container:       var(--jungle-50);
    --on-info-container:    var(--jungle-700);

    /* Canal WhatsApp */
    --wa:                   var(--whatsapp);
    --wa-hover:             var(--whatsapp-ink);
    --on-wa:                #FFFFFF;
    --wa-container:         var(--emerald-50);
    --on-wa-container:      var(--emerald-700);

    /* Capas de interacción (state layers M3) */
    --state-hover:    rgba(33, 26, 17, 0.05);
    --state-press:    rgba(33, 26, 17, 0.09);
    --state-selected: rgba(168, 72, 42, 0.10);
    --ripple-ink:     rgba(33, 26, 17, 0.16);
    --ripple-ink-on-primary: rgba(255, 255, 255, 0.35);

    /* Scrim y sombras */
    --scrim:         rgba(21, 17, 11, 0.48);
    --shadow-rgb:    62, 45, 28;
    --shadow-alpha:  0.12;

    /* Efecto vidrio (app bars translúcidas como en Android 14) */
    --glass-bg:     rgba(250, 246, 240, 0.84);
    --glass-border: rgba(255, 255, 255, 0.6);

    /* Gradientes de marca */
    --gradient-brand:   linear-gradient(135deg, var(--terra-600) 0%, var(--terra-500) 50%, var(--brass-500) 100%);
    --gradient-surface: linear-gradient(180deg, var(--terra-50) 0%, var(--sand-0) 70%);
    --gradient-sheen:   linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
    --gradient-jungle:  linear-gradient(135deg, var(--jungle-700) 0%, var(--jungle-600) 100%);
}

/* ----------------------------------------------------------------------------
   2b. SEMÁNTICAS — TEMA OSCURO
   Espresso profundo con acentos de latón. Conserva el alma del "obsidiano
   dorado" original pero con la paleta cálida unificada.
   ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --surface-dim:        var(--sand-1000);
        --surface:            #16110A;
        --surface-bright:     #1F1810;
        --surface-1:          #1C160E;
        --surface-2:          #221A11;
        --surface-3:          #2A2015;
        --surface-4:          #33271A;
        --surface-5:          #3C2E1F;
        --surface-alt:        #1C160E;
        --surface-sunken:     var(--sand-1000);
        --surface-inverse:    var(--sand-100);
        --on-surface-inverse: var(--sand-900);

        --on-surface:         #F2E8DA;
        --on-surface-strong:  #FBF6EC;
        --on-surface-variant: #C9B89E;
        --on-surface-muted:   #9C8A70;
        --on-surface-faint:   #7A6A52;

        --outline:            rgba(184, 159, 130, 0.22);
        --outline-variant:    rgba(184, 159, 130, 0.12);
        --outline-strong:     rgba(184, 159, 130, 0.36);
        --outline-focus:      var(--terra-300);

        --primary:               var(--terra-300);
        --primary-hover:         var(--terra-200);
        --primary-active:        var(--terra-100);
        --on-primary:            var(--terra-950);
        --primary-container:     rgba(210, 125, 92, 0.18);
        --primary-container-alt: rgba(210, 125, 92, 0.26);
        --on-primary-container:  var(--terra-200);
        --primary-outline:       rgba(224, 162, 136, 0.40);

        --secondary:              var(--jungle-300);
        --on-secondary:           var(--jungle-950);
        --secondary-container:    rgba(143, 199, 158, 0.16);
        --on-secondary-container: var(--jungle-200);

        --tertiary:              var(--brass-300);
        --on-tertiary:           var(--brass-950);
        --tertiary-container:    rgba(220, 184, 106, 0.16);
        --on-tertiary-container: var(--brass-100);

        --success:              var(--jungle-300);
        --on-success:           var(--jungle-950);
        --success-container:    rgba(143, 199, 158, 0.16);
        --on-success-container: var(--jungle-100);

        --warning:              var(--amber-400);
        --on-warning:           var(--amber-900);
        --warning-container:    rgba(251, 191, 36, 0.16);
        --on-warning-container: var(--amber-100);

        --danger:               var(--red-400);
        --on-danger:            var(--red-900);
        --danger-container:     rgba(248, 113, 113, 0.16);
        --on-danger-container:  var(--red-100);

        --info:                 var(--jungle-300);
        --on-info:              var(--jungle-950);
        --info-container:       rgba(143, 199, 158, 0.16);
        --on-info-container:    var(--jungle-100);

        --wa:                   var(--emerald-400);
        --wa-hover:             #6EE7B7;
        --on-wa:                var(--emerald-900);
        --wa-container:         rgba(52, 211, 153, 0.16);
        --on-wa-container:      var(--emerald-100);

        --state-hover:    rgba(255, 255, 255, 0.06);
        --state-press:    rgba(255, 255, 255, 0.11);
        --state-selected: rgba(224, 162, 136, 0.20);
        --ripple-ink:     rgba(255, 255, 255, 0.20);
        --ripple-ink-on-primary: rgba(255, 255, 255, 0.28);

        --scrim:         rgba(5, 4, 2, 0.70);
        --shadow-rgb:    0, 0, 0;
        --shadow-alpha:  0.46;

        --glass-bg:     rgba(22, 17, 10, 0.84);
        --glass-border: rgba(184, 159, 130, 0.16);

        --gradient-brand:   linear-gradient(135deg, var(--terra-500) 0%, var(--terra-600) 55%, var(--brass-600) 100%);
        --gradient-surface: linear-gradient(180deg, rgba(194, 94, 58, 0.10) 0%, #16110A 70%);
        --gradient-sheen:   linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%);
        --gradient-jungle:  linear-gradient(135deg, var(--jungle-600) 0%, var(--jungle-700) 100%);
    }
}

/* Igual que el bloque anterior, pero forzado por el usuario. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --surface-dim:        var(--sand-1000);
    --surface:            #16110A;
    --surface-bright:     #1F1810;
    --surface-1:          #1C160E;
    --surface-2:          #221A11;
    --surface-3:          #2A2015;
    --surface-4:          #33271A;
    --surface-5:          #3C2E1F;
    --surface-alt:        #1C160E;
    --surface-sunken:     var(--sand-1000);
    --surface-inverse:    var(--sand-100);
    --on-surface-inverse: var(--sand-900);

    --on-surface:         #F2E8DA;
    --on-surface-strong:  #FBF6EC;
    --on-surface-variant: #C9B89E;
    --on-surface-muted:   #9C8A70;
    --on-surface-faint:   #7A6A52;

    --outline:            rgba(184, 159, 130, 0.22);
    --outline-variant:    rgba(184, 159, 130, 0.12);
    --outline-strong:     rgba(184, 159, 130, 0.36);
    --outline-focus:      var(--terra-300);

    --primary:               var(--terra-300);
    --primary-hover:         var(--terra-200);
    --primary-active:        var(--terra-100);
    --on-primary:            var(--terra-950);
    --primary-container:     rgba(210, 125, 92, 0.18);
    --primary-container-alt: rgba(210, 125, 92, 0.26);
    --on-primary-container:  var(--terra-200);
    --primary-outline:       rgba(224, 162, 136, 0.40);

    --secondary:              var(--jungle-300);
    --on-secondary:           var(--jungle-950);
    --secondary-container:    rgba(143, 199, 158, 0.16);
    --on-secondary-container: var(--jungle-200);

    --tertiary:              var(--brass-300);
    --on-tertiary:           var(--brass-950);
    --tertiary-container:    rgba(220, 184, 106, 0.16);
    --on-tertiary-container: var(--brass-100);

    --success:              var(--jungle-300);
    --on-success:           var(--jungle-950);
    --success-container:    rgba(143, 199, 158, 0.16);
    --on-success-container: var(--jungle-100);

    --warning:              var(--amber-400);
    --on-warning:           var(--amber-900);
    --warning-container:    rgba(251, 191, 36, 0.16);
    --on-warning-container: var(--amber-100);

    --danger:               var(--red-400);
    --on-danger:            var(--red-900);
    --danger-container:     rgba(248, 113, 113, 0.16);
    --on-danger-container:  var(--red-100);

    --info:                 var(--jungle-300);
    --on-info:              var(--jungle-950);
    --info-container:       rgba(143, 199, 158, 0.16);
    --on-info-container:    var(--jungle-100);

    --wa:                   var(--emerald-400);
    --wa-hover:             #6EE7B7;
    --on-wa:                var(--emerald-900);
    --wa-container:         rgba(52, 211, 153, 0.16);
    --on-wa-container:      var(--emerald-100);

    --state-hover:    rgba(255, 255, 255, 0.06);
    --state-press:    rgba(255, 255, 255, 0.11);
    --state-selected: rgba(224, 162, 136, 0.20);
    --ripple-ink:     rgba(255, 255, 255, 0.20);
    --ripple-ink-on-primary: rgba(255, 255, 255, 0.28);

    --scrim:         rgba(5, 4, 2, 0.70);
    --shadow-rgb:    0, 0, 0;
    --shadow-alpha:  0.46;

    --glass-bg:     rgba(22, 17, 10, 0.84);
    --glass-border: rgba(184, 159, 130, 0.16);

    --gradient-brand:   linear-gradient(135deg, var(--terra-500) 0%, var(--terra-600) 55%, var(--brass-600) 100%);
    --gradient-surface: linear-gradient(180deg, rgba(194, 94, 58, 0.10) 0%, #16110A 70%);
    --gradient-sheen:   linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%);
    --gradient-jungle:  linear-gradient(135deg, var(--jungle-600) 0%, var(--jungle-700) 100%);
}

/* ----------------------------------------------------------------------------
   3. SISTEMA — tipografía, espaciado, forma, elevación, motion, layout
   La escala es idéntica a Rent a Car para mantener coherencia entre productos
   PandaNexo; sólo cambian las familias tipográficas (editorial serif + sans).
   ---------------------------------------------------------------------------- */
:root {
    /* Familias — serif editorial para titulares (lujo boutique), sans para UI */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-seal:    'Cinzel', Georgia, serif;
    --font-body:    'Outfit', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    --font-ui:      'Outfit', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    --font-mono:    ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    --font-numeric: 'Outfit', system-ui, sans-serif;

    /* Escala tipográfica fluida */
    --text-2xs: 0.6875rem;
    --text-xs:  0.75rem;
    --text-sm:  0.8125rem;
    --text-md:  0.875rem;
    --text-base:0.9375rem;
    --text-lg:  1rem;
    --text-xl:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --text-2xl: clamp(1.1875rem, 1.08rem + 0.5vw, 1.375rem);
    --text-3xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
    --text-4xl: clamp(1.625rem, 1.3rem + 1.7vw, 2.25rem);
    --text-5xl: clamp(1.9375rem, 1.35rem + 2.9vw, 3rem);
    --text-6xl: clamp(2.25rem, 1.4rem + 4.2vw, 3.75rem);
    /* Titulares editoriales más grandes para el landing boutique */
    --text-display: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

    /* Pesos */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* Interlineado */
    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;

    /* Tracking */
    --ls-tighter: -0.02em;
    --ls-tight:   -0.01em;
    --ls-normal:  0;
    --ls-wide:    0.02em;
    --ls-wider:   0.06em;

    /* Espaciado — rejilla de 4pt */
    --sp-0:  0;
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-7:  1.75rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

    /* Escala de formas (M3 shape scale) */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  28px;
    --r-3xl:  36px;
    --r-full: 999px;

    /* Elevación */
    --el-0: none;
    --el-1: 0 1px 2px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.9)),
            0 1px 3px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.5));
    --el-2: 0 1px 2px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.8)),
            0 3px 8px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.7));
    --el-3: 0 2px 4px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.7)),
            0 8px 20px -4px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.9));
    --el-4: 0 4px 8px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.6)),
            0 14px 32px -6px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 1.05));
    --el-5: 0 6px 12px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.6)),
            0 24px 52px -10px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 1.2));

    --el-primary: 0 4px 14px -2px rgba(168, 72, 42, 0.34);
    --el-brass:   0 4px 14px -2px rgba(184, 134, 46, 0.30);
    --el-wa:      0 4px 14px -2px rgba(16, 185, 129, 0.34);

    /* Motion — curvas de Material 3 Expressive */
    --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized:  cubic-bezier(0.05, 0.7, 0.1, 1);
    --ease-decelerate:  cubic-bezier(0, 0, 0, 1);
    --ease-accelerate:  cubic-bezier(0.3, 0, 1, 1);
    --ease-spring:      cubic-bezier(0.34, 1.4, 0.64, 1);

    --dur-instant: 80ms;
    --dur-fast:    140ms;
    --dur-base:    220ms;
    --dur-slow:    320ms;
    --dur-slower:  480ms;

    --tr-fast: var(--dur-fast) var(--ease-standard);
    --tr-base: var(--dur-base) var(--ease-standard);
    --tr-slow: var(--dur-slow) var(--ease-emphasized);

    /* Layout */
    --appbar-h:           60px;
    --bottomnav-h:        62px;
    --sidebar-w:          268px;
    --sidebar-collapsed-w: 76px;
    --content-max:        1280px;
    --content-narrow:     1040px;
    --reading-max:        68ch;

    --touch-min: 48px;

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);

    --z-base:      0;
    --z-raised:    10;
    --z-sticky:    100;
    --z-appbar:    900;
    --z-bottomnav: 950;
    --z-scrim:     1000;
    --z-drawer:    1010;
    --z-sheet:     1020;
    --z-dialog:    1030;
    --z-snackbar:  1100;
    --z-tooltip:   1200;
}

@media (min-width: 992px) {
    :root {
        --appbar-h:    68px;
        --bottomnav-h: 0px;
    }
}

/* ----------------------------------------------------------------------------
   4. LEGADO — alias de las variables antiguas.
   Permite re-tematizar el CSS existente (incluido el modo oscuro) sin tocar
   un solo selector. Cubre tanto el landing obsidiano/dorado como el admin
   que usaba tokens --posada-* (azul océano) inexistentes.
   ---------------------------------------------------------------------------- */
:root {
    /* posada.css — obsidiano & dorado original */
    --obsidian-base:        var(--surface);
    --obsidian-surface:     var(--surface-1);
    --obsidian-card:        var(--surface-2);
    --obsidian-card-alt:    var(--surface-3);
    --obsidian-border:      var(--outline);
    --obsidian-border-subtle: var(--outline-variant);

    --gold-champagne:       var(--brass-500);
    --gold-light:           var(--brass-200);
    --gold-bright:          var(--brass-300);
    --gold-dark:            var(--brass-700);
    --gold-glow:            rgba(184, 134, 46, 0.28);

    --text-white-pure:      var(--on-surface-strong);
    --text-gold-light:      var(--brass-200);
    --text-muted-gold:      var(--on-surface-muted);
    --text-muted-dark:      var(--on-surface-faint);

    --resort-whatsapp:      var(--wa);
    --resort-whatsapp-dark: var(--wa-hover);

    --font-editorial: var(--font-display);
    --font-seal:      var(--font-seal);
    --font-ui:        var(--font-body);
    --font-heading:   var(--font-body);

    --shadow-obsidian-1: var(--el-1);
    --shadow-obsidian-2: var(--el-2);
    --shadow-gold-glow:  var(--el-brass);

    /* admin (login.php + admin/*.php) — tokens --posada-* inexistentes */
    --posada-bg-screen:        var(--surface);
    --posada-surface-alt:      var(--surface-alt);
    --posada-border-light:     var(--outline);
    --posada-border-mid:       var(--outline-strong);
    --posada-text-dark:        var(--on-surface-strong);
    --posada-text-medium:      var(--on-surface-variant);
    --posada-text-muted:       var(--on-surface-muted);
    --posada-ocean-primary:    var(--primary);
    --posada-ocean-dark:       var(--primary-hover);
    --posada-ocean-surface:    var(--primary-container);
    --posada-teal:             var(--secondary);
    --elevation-1:             var(--el-1);
    --elevation-2:             var(--el-2);
    --elevation-ocean:         var(--el-primary);

    /* Utilidades de texto presentes en el marcado */
    --text-ocean:  var(--primary);
    --text-gold:   var(--tertiary);

    /* Alias de elevación/sombra usados en algunos inline styles */
    --shadow-sm: var(--el-1);
    --shadow:    var(--el-2);
    --shadow-lg: var(--el-3);
    --shadow-xl: var(--el-4);
}

/* Helpers de color de texto usados en el HTML existente.
   Se definen como clases para no romper el marcado del landing. */
.text-gold  { color: var(--tertiary) !important; }
.text-ocean { color: var(--primary) !important; }
.font-bold  { font-weight: var(--fw-bold) !important; }

.d-desk-only { display: none !important; }
@media (min-width: 992px) {
    .d-desk-only { display: inline-flex !important; }
}