/* ══════════════════════════════════════════════════════════════════════════════
 * CASA RURAL EL ÁLAMO — includes/web/css/base.css
 * ══════════════════════════════════════════════════════════════════════════════
 *
 *  Fundación visual de la web pública:
 *    · Reset moderno (no full Meyer reset, solo lo necesario)
 *    · Variables CSS de marca (paleta + tipografía + espaciado)
 *    · Sistema tipográfico serif con itálicas doradas
 *    · Utilidades comunes (contenedor, pretítulo, títulos con itálica, CTA)
 *
 *  Los temas específicos (primavera, verano…) sobrescriben las CSS variables
 *  vía <style> inline desde temas.css o via JS dinámico.
 * ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * 1. FUENTE: Cormorant Garamond (recomendada)
 * ══════════════════════════════════════════════════════════════════════════ */
/* La importación real se hace en el <head> del template con preconnect para
   performance. Este bloque es solo para referencia del sistema tipográfico. */


/* ══════════════════════════════════════════════════════════════════════════
 * 2. VARIABLES GLOBALES — identidad de marca
 * ══════════════════════════════════════════════════════════════════════════
 * Estos valores son la base estable. Los temas añaden overrides encima. */

:root {
    /* ── Paleta base ───────────────────────────────────────────────── */
    --color-verde-oliva:       #5a6b3c;   /* Primary */
    --color-verde-oliva-hover: #4a5a2e;
    --color-verde-oliva-suave: #7a8a5c;
    --color-marron-choc:       #4a3425;   /* Secondary */
    --color-marron-suave:      #6b4f3a;
    --color-dorado:            #c9a961;   /* Accent */
    --color-dorado-claro:      #e8d5a0;
    --color-dorado-oscuro:     #a88b3f;
    --color-crema:             #faf8f3;   /* Background */
    --color-crema-oscuro:      #f0ede5;
    --color-crema-muy-oscuro:  #e5dfd2;   /* Bordes, separadores */
    --color-texto:             #3d3529;   /* Text on light */
    --color-texto-suave:       #7a7263;
    --color-texto-claro:       #b0a89a;

    /* ── Estados ───────────────────────────────────────────────────── */
    --color-exito:             #4a7c3a;
    --color-aviso:             #b8860b;
    --color-error:             #a04040;

    /* ── Colores semánticos (usados por componentes, sobrescritos por tema) ─ */
    --color-primary:           var(--color-verde-oliva);
    --color-primary-hover:     var(--color-verde-oliva-hover);
    --color-secondary:         var(--color-marron-choc);
    --color-accent:            var(--color-dorado);
    --color-bg:                var(--color-crema);
    --color-bg-alt:            var(--color-crema-oscuro);
    --color-surface:           #ffffff;
    --color-border:            var(--color-crema-muy-oscuro);

    /* ── Tipografía ────────────────────────────────────────────────── */
    --font-serif:              'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --font-sans:               -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono:               ui-monospace, Menlo, Consolas, 'Courier New', monospace;

    /* ── Escala tipográfica (responsive, clamp) ────────────────────── */
    --fs-caption:              clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);   /* 12-14 */
    --fs-pretitulo:            clamp(0.8rem,  0.75rem + 0.2vw, 0.9rem);   /* 13-14 */
    --fs-body:                 clamp(1rem,    0.95rem + 0.2vw, 1.1rem);   /* 16-18 */
    --fs-body-lg:              clamp(1.1rem,  1rem + 0.5vw, 1.25rem);     /* 18-20 */
    --fs-subtitulo:            clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);    /* 20-24 */
    --fs-h3:                   clamp(1.5rem,  1.3rem + 1vw, 2rem);        /* 24-32 */
    --fs-h2:                   clamp(2rem,    1.7rem + 1.5vw, 2.75rem);   /* 32-44 */
    --fs-h1:                   clamp(2.5rem,  2rem + 2.5vw, 4rem);        /* 40-64 */
    --fs-hero:                 clamp(3rem,    2.5rem + 3vw, 5rem);        /* 48-80 */

    /* ── Pesos ─────────────────────────────────────────────────────── */
    --fw-light:                300;
    --fw-normal:               400;
    --fw-medium:               500;
    --fw-semibold:             600;
    --fw-bold:                 700;

    /* ── Line heights ──────────────────────────────────────────────── */
    --lh-tight:                1.15;   /* Títulos grandes */
    --lh-snug:                 1.3;    /* Subtítulos */
    --lh-normal:               1.55;   /* Cuerpo */
    --lh-relaxed:              1.75;   /* Texto largo */

    /* ── Letter spacing ────────────────────────────────────────────── */
    --ls-eyebrow:              0.12em;  /* PRETÍTULOS EN MAYÚSCULAS */
    --ls-wide:                 0.05em;  /* Botones, menús */
    --ls-normal:               0em;

    /* ── Espaciado (sistema de 8px) ────────────────────────────────── */
    --sp-1:                    0.25rem;   /* 4px */
    --sp-2:                    0.5rem;    /* 8px */
    --sp-3:                    0.75rem;   /* 12px */
    --sp-4:                    1rem;      /* 16px */
    --sp-5:                    1.5rem;    /* 24px */
    --sp-6:                    2rem;      /* 32px */
    --sp-7:                    3rem;      /* 48px */
    --sp-8:                    4rem;      /* 64px */
    --sp-9:                    6rem;      /* 96px */
    --sp-10:                   8rem;      /* 128px */

    /* ── Layout ────────────────────────────────────────────────────── */
    --container-max:           1200px;
    --container-narrow:        820px;
    --container-wide:          1400px;
    --header-height:           72px;
    --header-height-scroll:    56px;

    /* ── Bordes ────────────────────────────────────────────────────── */
    --br-sm:                   4px;
    --br-md:                   8px;
    --br-lg:                   16px;
    --br-pill:                 999px;

    /* ── Sombras (suaves, tipo papel) ──────────────────────────────── */
    --shadow-sm:               0 1px 2px rgba(61, 53, 41, 0.05);
    --shadow-md:               0 2px 8px rgba(61, 53, 41, 0.08);
    --shadow-lg:               0 8px 24px rgba(61, 53, 41, 0.12);
    --shadow-hover:            0 4px 16px rgba(61, 53, 41, 0.15);

    /* ── Transiciones ──────────────────────────────────────────────── */
    --t-fast:                  150ms ease-out;
    --t-normal:                250ms ease-out;
    --t-slow:                  400ms ease-out;

    /* ── Z-index ───────────────────────────────────────────────────── */
    --z-dropdown:              100;
    --z-sticky:                200;
    --z-fixed:                 300;
    --z-modal-backdrop:        400;
    --z-modal:                 500;
    --z-popover:               600;
    --z-tooltip:               700;
    --z-toast:                 800;
    --z-splash:                9999;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 3. RESET (moderno, solo lo esencial)
 * ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Scroll offset para que las anclas no queden bajo el header sticky.
       NOTA: scroll-behavior:smooth se aplica ahora desde main.js solo a los
       clics en anclas internas (ver initScrollSuave). Aplicarlo a nivel CSS
       global interfería con el scroll del trackpad en Chrome/Edge Windows,
       causando saltos discretos al desplazar. */
    scroll-padding-top: calc(var(--header-height) + var(--sp-4));
}

body {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    color: var(--color-texto);
    background: var(--color-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    /* db 28/04/2026: 'clip' (en lugar de 'hidden') NO crea contexto de scroll
       y por tanto NO rompe position:sticky de elementos hijos como la
       caja "Llegada y salida" en el bloque Normas. Fallback a hidden para
       navegadores que aún no soportan clip. */
    overflow-x: hidden;
    overflow-x: clip;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--t-fast);
}

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

button {
    cursor: pointer;
    border: none;
    background: transparent;
}

ul, ol {
    list-style: none;
}

/* Accesibilidad: mantener outline visible solo en navegación por teclado */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--br-sm);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 4. SISTEMA TIPOGRÁFICO
 * ══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: var(--fw-normal);
    line-height: var(--lh-tight);
    color: var(--color-texto);
    letter-spacing: var(--ls-normal);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Itálica dorada — el sello de marca */
.italica-dorada, em.italica-dorada {
    font-style: italic;
    color: var(--color-accent);
    font-weight: var(--fw-normal);
}

/* Los títulos que combinan texto normal + itálica dorada */
.titulo-compuesto {
    display: block;
}
.titulo-compuesto em {
    font-style: italic;
    color: var(--color-accent);
    display: inline;
}

p {
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--color-texto);
    max-width: 70ch;  /* Líneas legibles */
}

p + p {
    margin-top: var(--sp-4);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 5. PRETÍTULOS (EYEBROW) — identidad de la web
 * ══════════════════════════════════════════════════════════════════════════ */

.pretitulo,
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-pretitulo);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-texto-suave);
    display: inline-block;
    margin-bottom: var(--sp-3);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 6. CONTENEDORES
 * ══════════════════════════════════════════════════════════════════════════ */

.contenedor {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
}

.contenedor--narrow {
    max-width: var(--container-narrow);
}

.contenedor--wide {
    max-width: var(--container-wide);
}

@media (min-width: 768px) {
    .contenedor {
        padding-left: var(--sp-6);
        padding-right: var(--sp-6);
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 7. BLOQUES (secciones con padding vertical consistente)
 * ══════════════════════════════════════════════════════════════════════════ */

.bloque {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
    scroll-margin-top: var(--header-height);
}

@media (min-width: 768px) {
    .bloque {
        padding-top: var(--sp-9);
        padding-bottom: var(--sp-9);
    }
}

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

/* Bloques destacados por el tema (ej: en Semana Santa, alrededores destaca) */
.bloque--destacado {
    position: relative;
}
.bloque--destacado::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    border-radius: var(--br-pill);
}

/* Cabecera estándar de bloque: pretítulo + título compuesto */
.bloque-cabecera {
    text-align: center;
    margin-bottom: var(--sp-7);
}

.bloque-cabecera h2 {
    margin-top: var(--sp-2);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 8. BOTONES (CTA)
 * ══════════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid transparent;
    border-radius: var(--br-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--t-fast);
    min-height: 44px;  /* Touch target */
    white-space: nowrap;
}

.btn--primario {
    background: var(--color-accent);
    color: var(--color-marron-choc);
    border-color: var(--color-accent);
}

.btn--primario:hover {
    background: var(--color-dorado-oscuro);
    border-color: var(--color-dorado-oscuro);
    color: var(--color-crema);
}

.btn--secundario {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--secundario:hover {
    background: var(--color-primary);
    color: var(--color-crema);
}

.btn--texto {
    background: transparent;
    color: var(--color-primary);
    padding: var(--sp-2) var(--sp-3);
    font-weight: var(--fw-medium);
}

.btn--grande {
    font-size: var(--fs-body-lg);
    padding: var(--sp-4) var(--sp-7);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 9. UTILIDADES
 * ══════════════════════════════════════════════════════════════════════════ */

.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;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }


/* ══════════════════════════════════════════════════════════════════════════
 * 10. ACCESIBILIDAD: respetar prefers-reduced-motion
 * ══════════════════════════════════════════════════════════════════════════ */

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


/* ══════════════════════════════════════════════════════════════════════════
 * 11. PRINT — estilos mínimos para imprimir la web
 * ══════════════════════════════════════════════════════════════════════════ */

@media print {
    body {
        background: white;
        color: black;
        font-size: 11pt;
    }
    .btn, .whatsapp-float, nav, footer {
        display: none !important;
    }
}
