:root {
    --primary-color: #e8d3d1;
    --secondary-color: #8b7355;
    --text-color: #2c2c2c;
    --light-bg: #fff9f8;
    --accent-color: #d4af37;
    --header-height: 68px; /* ajusta si tu header es distinto */
    --logo-height: 500px;   /* altura visual del área del logo */
    --gutter: 1rem;
}

/* Reset y base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-bg);
}

/* Header (fijo) */

/* Header layout: logo a la izquierda, nav al centro/derecha, toggle a la derecha */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* logo a la izquierda */
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* Logo en header */
.logo-link { display: inline-flex; align-items: center; }
.site-logo {
    display: block;
    max-height: calc(var(--header-height) - 14px); /* cabe dentro del header */
    width: auto;
    height: auto;
    object-fit: contain;
}


header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    z-index: 1000;
}

/* Navegación */
nav.primary-navigation ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
    padding: 0 var(--gutter);
}
nav.primary-navigation a {
    color: var(--secondary-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.95rem;
    transition: color .25s;
}
nav.primary-navigation a:hover { color: var(--accent-color); }

/* Logo debajo de la cabecera (no fixed) */
.top-logo {
    height: var(--logo-height);
    padding: 8px 12px;
    margin-top: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 900;
}
.top-logo .site-logo {
    display: block;
    max-height: calc(var(--logo-height) - 12px);
    max-width: 95%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Empujar el main para que no quede oculto por header+logo */
main {
    margin-top: calc(var(--header-height) + var(--logo-height) + 16px);
    min-height: calc(100vh - (var(--header-height) + var(--logo-height)));
    padding-bottom: 4rem;
}

/* Secciones */
section {
    padding: 1rem 0;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: opacity .3s ease-out, transform .3s ease-out;
}
section:nth-child(even) { background-color: #fff; }

h2 {
    font-size: 2.6rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 400;
    position: relative;
}
h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--accent-color);
    margin: 1rem auto 0;
}

/* Story: imagen izquierda, texto derecha */
.story-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 1400px;
    padding: 0 var(--gutter);
}
.story-image {
    width: 48%;
    height: auto;
    border-radius: 0;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.08);
    flex-shrink: 0;
    object-fit: cover;
    margin: 0; /* sin margen alrededor de la imagen */
    display: block;
}
.story-text {
    flex: 1;
    font-size: 1.25rem;
    line-height: 1.7;
    font-style: italic;
    padding: 0 1.25rem;
    color: var(--text-color);
}

/* Footer */
footer {
    background-color: var(--secondary-color);
    color: #fff;
    text-align: center;
    padding: 2rem;
}

/* Mobile nav (hamburger) */
.mobile-nav-toggle {
    display: none;
    position: absolute;
    right: 1rem;
    top: calc((var(--header-height) - 36px)/2);
    z-index: 1100;
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
}
.hamburger, .hamburger::before, .hamburger::after {
    display: block;
    background: var(--secondary-color);
    height: 3px;
    width: 22px;
    border-radius: 2px;
    position: relative;
    transition: all .3s ease;
}
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; }
.hamburger::before { top: -7px; } .hamburger::after { top: 7px; }
.mobile-nav-toggle.active .hamburger { transform: rotate(45deg); }
.mobile-nav-toggle.active .hamburger::before { transform: rotate(90deg) translateX(1px); }
.mobile-nav-toggle.active .hamburger::after { opacity: 0; }

/* Responsive */
@media (max-width: 1024px) {
    h2 { font-size: 2.2rem; }
}

@media (max-width: 768px) {
    :root { --header-height: 56px; --logo-height: 56px; }

    .mobile-nav-toggle { display: flex; }
    nav.primary-navigation {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.99);
        display: none;
        padding: 0.8rem 0;
        z-index: 1000;
    }
    nav.primary-navigation.active { display: block; }
    nav.primary-navigation ul { flex-direction: column; align-items: center; gap: .6rem; padding: 0; }

    /* story -> column en móviles */
    .story-container { flex-direction: column; text-align: center; gap: 1.2rem; padding: 0 1rem; }
    .story-image { width: 100%; margin: 0; border-radius: 8px; }
    .story-text { padding: 0 1rem; font-size: 1.1rem; }

    main { margin-top: calc(var(--header-height) + var(--logo-height) + 12px); }
    h2 { font-size: 2rem; }
}

@media (max-width: 480px) {
    h2 { font-size: 1.8rem; }
    .story-text { font-size: 1rem; }
}

/* Pantallas muy bajas en alto (landscape phones) */
@media (max-height: 500px) and (orientation: landscape) {
    section { min-height: auto; padding: 1.2rem 0; }
}

/* Mobile: reducir pero visible */
@media (max-width: 768px) {
    :root { --logo-height: 90px; }
    .top-logo {
        height: var(--logo-height);
        padding: 6px 10px;
    }
    .top-logo .site-logo {
        max-height: calc(var(--logo-height) - 8px);
    }
}

/* --- Fix: logo immediately under fixed header --- */
/* main se desplaza solo por la altura del header (no por header+logo) */
main {
    margin-top: var(--header-height); /* antes estaba calc(header+logo+...) */
}

/* sección del logo: sin padding ni min-height grande */
#logo {
    min-height: var(--logo-height); /* fuerza la altura del área del logo */
    height: var(--logo-height);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* la caja .top-logo no añade margen extra */
.top-logo {
    margin: 0;
    height: 100%;
    padding: 6px 8px;
}

/* asegurar que el logo ocupa su espacio pero no esté pequeño */
.top-logo .site-logo {
    max-height: calc(var(--logo-height) - 12px);
    width: auto;
    display: block;
}

/* pequeño espaciado entre logo y primer contenido */
#our-story {
    padding-top: 0.75rem; /* ajustar si quieres más/menos separación */
}

/* Mobile: mantener la misma lógica reduciendo alturas */
@media (max-width: 768px) {
    main { margin-top: var(--header-height); }
    #logo { min-height: var(--logo-height); height: var(--logo-height); }
    .top-logo .site-logo { max-height: calc(var(--logo-height) - 8px); }
}

/* Forzar que el nav se empuje a la derecha */
nav.primary-navigation {
    margin-left: auto; /* empuja la nav hacia la derecha del header */
}

/* Si mantienes sección #logo en el HTML, la ocultamos */
#logo, .top-logo { display: none !important; }

/* Ajustes móviles: mostrar botón, ocultar nav por defecto */
@media (max-width: 768px) {
    .mobile-nav-toggle { display: inline-flex; }
    nav.primary-navigation { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: rgba(255,255,255,0.98); padding: 0.8rem 0; z-index: 1000; }
    nav.primary-navigation.active { display: block; }
    nav.primary-navigation ul { flex-direction: column; align-items: center; gap: .6rem; padding: 0.5rem 0; }
    .site-logo { max-height: calc(var(--header-height) - 8px); }
    main { margin-top: var(--header-height); } /* main se ubica debajo del header */
}

/* Correciones rápidas para header, logo y main */
:root {
    --header-height: 68px;
}

/* Header layout */
.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* Logo en header */
.site-logo {
    display: block;
    max-height: calc(var(--header-height) - 12px);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Empujar main para que no quede oculto por el header fijo */
main {
    margin-top: var(--header-height);
    transition: margin-top .2s;
}

/* Mobile: mostrar toggle y esconder nav hasta active */
@media (max-width: 768px) {
    .mobile-nav-toggle { display: inline-flex; }
    nav.primary-navigation { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: #fff; z-index: 1100; }
    nav.primary-navigation.active { display: block; }
}

/* --- Forzar tamaño del logo y ajustes móviles --- */
/* Logo dentro del header */
.site-logo {
    display: block;
    width: auto;
    height: auto;
    /* Valor por defecto: que quepa dentro del header */
    max-height: calc(var(--header-height, 68px) - 12px);
    max-width: 95%;
    object-fit: contain;
}

/* Si usas .top-logo dentro del main, mantener su límite también */
.top-logo .site-logo {
    max-height: var(--logo-height, 80px);
}

/* Ajuste para pantallas pequeñas: forzar límite menor */
@media (max-width: 768px) {
    :root { --header-height: 56px; --logo-height: 56px; }
    .site-logo,
    .top-logo .site-logo {
        max-height: 40px; /* valor seguro para móviles; ajústalo si quieres más grande */
    }

    /* Evitar que el header empuje demasiado el contenido en móvil */
    main {
        margin-top: var(--header-height);
    }
}