/* =====================================================================================
   Tokens de diseño medidos en https://hotelpalmeral.com (Divi 5) a 1920 y 375 px.
   Ver migration/output/sistema-diseno.md
   ===================================================================================== */
:root {
    /* Colores de marca */
    --color-oro-claro: #d1c1a0;     /* títulos h2 grandes, números, etiquetas (rgb 209,193,160) */
    --color-oro: #bd9c5e;           /* líneas verticales, bordes, motor de reservas (rgb 189,156,94) */
    --color-marron: #6f5423;        /* menú, enlaces, títulos Garamond, botones (rgb 111,84,35) */
    --color-arena: #cfc19e;         /* franja del código promocional y banda de habitaciones (rgb 207,193,158) */
    --color-crema: #f1efe3;         /* panel de contacto, pie, bloque del motor (rgb 241,239,227) */
    --color-texto: #383630;         /* párrafos de contenido (rgb 56,54,48) */
    --color-gris: #666666;          /* texto base de Divi */
    --color-gris-oscuro: #333333;
    --color-borde-boton: #333333;
    --color-fondo-movil: #fafafa;   /* cabecera móvil */
    --color-blanco: #ffffff;
    --color-negro: #000000;
    --color-sombra-cabecera: rgba(181, 181, 181, 0.25);

    /* Tipografías (Google Fonts, cargadas en _Layout) */
    --fuente-titulos: "Montserrat", Helvetica, Arial, sans-serif;
    --fuente-serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --fuente-base: "Open Sans", Arial, sans-serif;
    --fuente-franja: "Poppins", Helvetica, Arial, sans-serif;

    /* Tamaños (rem sobre 16 px del navegador; el tamaño base 14 px va en body) */
    --texto-base: 0.875rem;         /* 14px body */
    --texto-parrafo: 1rem;          /* 16px párrafos */
    --interlineado-parrafo: 2.125rem; /* 34px */
    --texto-h1-hero: 1.875rem;      /* 30px */
    --texto-h2: 2rem;               /* 32px */
    --interlineado-h2: 3rem;        /* 48px */
    --texto-h3-serif: 2.25rem;      /* 36px */
    --texto-numero: 6.25rem;        /* 100px */
    --texto-menu: 0.875rem;         /* 14px */
    --texto-boton: 0.875rem;        /* 14px */

    /* Estructura */
    --alto-cabecera: 8.125rem;      /* 130px (escritorio) */
    --alto-franja: 3.25rem;         /* 52px franja del código */
    --alto-cabecera-movil: 10.125rem; /* 162px: barra 60 + reservar 50 + franja 52 */
    --alto-hero: 59.375rem;         /* 950px en escritorio */
    --ancho-contenido: 67.5rem;     /* 1080px filas de Divi */
    --relleno-fila: 1.6875rem;      /* 27px arriba/abajo de las filas */
    --transicion: 0.4s ease-in-out;
}