/* ==========================================================================
   Altia Migration — base.css
   Reglas mínimas compartidas por TODAS las páginas del sitio:
   tokens de diseño (color/tipografía/espaciado), reset y elementos base.
   El estilo propio de cada página (hero, secciones, etc.) vive en su
   propio archivo CSS (p. ej. home.css). El header y el footer, al ser
   componentes compartidos, viven en layout.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Work+Sans:wght@400;500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');



:root {

    font-size: 85%; 
    /* ---- Color: paleta "gourmet" ocre / burdeos ---- */
    --color-bone: #F9F7F4;
    /* fondo principal, blanco hueso */
    --color-cream: #EADFC5;
    /* fondo alterno, ocre claro */
    --color-tan: #A3856B;
    /* acentos suaves, bordes sobre oscuro */
    --color-burgundy: #6B1F27;
    /* color principal: CTA, enlaces, acentos */
    --color-burgundy-dark: #4A151B;
    /* hover / variante oscura del burdeos */
    --color-wine-black: #1E0E0C;
    /* fondo oscuro: header sobre hero, footer */
    --color-gold: #C6A15B;
    /* acento cálido, detalles finos */
    --color-ink: #271A14;
    /* texto principal sobre fondos claros */
    --color-ink-soft: #6B5A4C;
    /* texto secundario / atenuado */
    --color-white: #FFFFFF;

    /* ---- Tipografía ---- */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Raleway', sans-serif;

    /* ---- Espaciado ---- */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.75rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 8rem;

    /* ---- Layout ---- */
    --content-max: 1180px;
    --radius-sm: 2px;
    --radius-md: 4px;

    /* ---- Transición ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bone);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ---- Tipografía base ---- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
    color: var(--color-ink);
}

p {
    margin: 0;
}

/* Foco de teclado visible en todo el sitio */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-burgundy);
    outline-offset: 3px;
}

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

/* ---- Utilidades compartidas ---- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--color-burgundy);
    font-weight: 600;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.9em 1.7em;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-burgundy);
    color: var(--color-white);
    border-color: var(--color-burgundy);
}

.btn-primary:hover {
    background: var(--color-burgundy-dark);
    border-color: var(--color-burgundy-dark);
}

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.45);
}

.btn-outline:hover {
    border-color: var(--color-white);
    background: rgba(255, 255, 255, 0.08);
}

.btn-outline-dark {
    background: transparent;
    color: var(--color-ink);
    border-color: rgba(39, 26, 20, 0.3);
}

.btn-outline-dark:hover {
    border-color: var(--color-ink);
    background: rgba(39, 26, 20, 0.05);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Marcador de idioma actual en el selector ES/EN del header */
[aria-current="true"] {
    color: var(--color-burgundy);
    font-weight: 600;
}

/* ---- Utilidad: aparición suave al hacer scroll ----
   Cualquier página puede marcar un elemento con [data-reveal] para que
   entre con un fundido + leve desplazamiento cuando entra en pantalla.
   La lógica vive en js/reveal.js; aquí solo se define el estado visual. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}