@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600&display=swap');

:root {
    --fungi-serif: "Bodoni Moda", "Times New Roman", serif;
    --fungi-condensed: "Bebas Neue", Impact, sans-serif;
    --fungi-sans: "Inter", Arial, sans-serif;
    --color-bg-light: #f4f2ec;
    --color-text-dark: #1a1a1a;
    --color-white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--color-bg-light); color: var(--color-text-dark); font-family: var(--fungi-serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.font-serif { font-family: var(--fungi-serif); }
.font-condensed { font-family: var(--fungi-condensed); text-transform: uppercase; letter-spacing: 1px;}
.font-sans { font-family: var(--fungi-sans); }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }

/* HEADER DESKTOP */
.fungi-header { background-color: var(--color-bg-light); color: var(--color-text-dark); height: 90px; width: 100%; position: relative; z-index: 90; display: flex; align-items: center; padding: 0 40px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.fungi-header-inner { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.fungi-menu-toggle { justify-self: start; background: none; border: none; color: inherit; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.mobile-icon { display: none; }
.fungi-logo-container { justify-self: center; text-align: center; }
.fungi-logo { display: block; line-height: 1; }

/* IMAGEN LOGO Y FILTRO NEGRO */
.fungi-logo-img {
    height: 55px; /* Ajuste para mantener proporción con el grid anterior */
    width: auto;
    display: block;
    margin: 0 auto;
    filter: brightness(0); /* Convierte el gris a negro sólido */
}

.fungi-tagline { display: block; font-size: 11px; margin-top: 5px; font-weight: 600;}
.fungi-lang-switch { justify-self: end; font-size: 13px; font-weight: 600; letter-spacing: 1px;}
.fungi-lang-switch a { color: #999; }
.fungi-lang-switch a.active { color: var(--color-text-dark); }

/* HUB HERO */
.hub-hero { display: flex; height: calc(100vh - 90px); width: 100vw; overflow: hidden; }
.hub-half { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; }
.hub-casa { border-right: 1px solid var(--color-white); }
.hub-cabins { border-left: 1px solid var(--color-white); }
.hub-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1.05); transition: transform 0.8s ease-out; animation: breathing 20s infinite alternate linear; }
.hub-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); transition: background 0.5s ease; }
.hub-half:hover .hub-bg { transform: scale(1.08); animation-play-state: paused; }
.hub-half:hover .hub-overlay { background: rgba(0, 0, 0, 0.35); }
.hub-content { position: relative; z-index: 10; color: var(--color-white); text-align: left; width: 100%; padding: 0 40px 0 15%; pointer-events: none; }
.hub-label-wrap { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 25px; }
.hub-label { font-size: 72px; font-family: var(--fungi-condensed); line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.hub-subtitle { font-size: 11px; font-weight: 600; letter-spacing: 2px; background: var(--color-white); color: var(--color-text-dark); padding: 5px 12px; margin-top: 5px; text-transform: uppercase; }
.hub-title { font-size: 52px; line-height: 1.1; margin-bottom: 35px; text-shadow: 0 2px 10px rgba(0,0,0,0.15); max-width: 480px; }
.hub-cta { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }

/* MENÚ LATERAL (DRAWER DESKTOP) */
.fungi-menu-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.fungi-menu-backdrop.active { opacity: 1; pointer-events: all; }
.fungi-menu-drawer { position: fixed; top: 0; left: 0; width: 45vw; min-width: 400px; max-width: 700px; height: 100vh; background: var(--color-bg-light); z-index: 999; transform: translateX(-100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); display: flex; flex-direction: column; padding: 40px; overflow-y: auto; }
.fungi-menu-drawer.active { transform: translateX(0); }
.fungi-menu-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
.fungi-menu-close { background: none; border: none; cursor: pointer; display: flex; }
.fungi-menu-drawer-content { display: flex; gap: 40px; flex: 1; }
.fungi-nav-main { flex: 1; display: flex; flex-direction: column; }
.nav-item { display: flex; align-items: flex-start; border-bottom: 1px solid #dcdad4; padding: 30px 0; gap: 20px; }
.nav-item:first-child { border-top: 1px solid #dcdad4; }
.nav-num { font-size: 10px; font-weight: 600; margin-top: 15px; width: 15px; }
.nav-item a { font-size: 56px; line-height: 0.9; }
.fungi-nav-aside { width: 220px; font-size: 11px; padding-top: 20px; }
.nav-lang { font-weight: 600; letter-spacing: 1px; margin-bottom: 40px; }
.nav-lang a { color: #888; }
.nav-lang a.active { color: var(--color-text-dark); }
.nav-contact h4 { font-weight: 600; letter-spacing: 1px; margin-bottom: 15px; }
.nav-contact p { line-height: 1.8; color: #555; margin-bottom: 10px;}
.fungi-menu-drawer-footer { display: flex; justify-content: space-between; font-size: 9px; font-weight: 600; text-transform: uppercase; margin-top: 40px; border-top: 1px solid #dcdad4; padding-top: 20px; color: #888; }

/* RESPONSIVE (MÓVIL MOCKUPS EXACTOS) */
@media (max-width: 900px) {
    .fungi-header { height: auto; padding: 20px; display: block; border-bottom: none; }
    .fungi-header-inner { display: flex; justify-content: center; position: relative; }
    .fungi-logo-img { height: 42px; } /* Logo un poco más grande en móvil según mockup */
    .fungi-tagline { font-size: 12px; margin-top: 8px; }
    .fungi-menu-toggle { position: absolute; top: 0px; right: 0px; height: 100%; }
    .desktop-text { display: none; }
    .mobile-icon { display: block; line-height: 0; }
    .fungi-lang-switch { display: none; }
    
    .hub-hero { flex-direction: column; height: calc(100vh - 85px); }
    .hub-half { flex: none; height: 50%; width: 100%; }
    .hub-casa { border-right: none; border-bottom: 1px solid var(--color-white); }
    .hub-cabins { border-left: none; }
    .hub-content { padding: 0 20px 0 20px; }
    .hub-label { font-size: 52px; }
    .hub-title { font-size: 34px; margin-bottom: 20px; }
    
    .fungi-menu-drawer { width: 100vw; max-width: 100vw; padding: 30px 25px; }
    .fungi-menu-drawer-header { margin-bottom: 40px; }
    .fungi-menu-drawer-header .fungi-logo-img { height: 32px; }
    .fungi-menu-drawer-content { flex-direction: column; gap: 30px; }
    .nav-item { padding: 20px 0; gap: 15px; }
    .nav-item a { font-size: 42px; line-height: 1; }
    .nav-num { margin-top: 10px; }
    .fungi-nav-aside { width: 100%; border-top: none; padding-top: 0; }
    .nav-lang { margin-bottom: 30px; }
    .fungi-menu-drawer-footer { flex-direction: column; gap: 10px; text-align: left; }
}

/* INSTITUCIONAL (ESTILO EDITORIAL REFINADO) */
.hub-institutional { padding: 160px 20px; text-align: center; background: var(--color-bg-light); }
.hub-institutional-inner { max-width: 580px; margin: 0 auto; }
.hub-institutional h2 { font-size: 44px; margin-bottom: 40px; font-style: italic; font-weight: 400; letter-spacing: -0.5px; color: var(--color-text-dark); }
.hub-institutional h2::after { content: ''; display: block; width: 30px; height: 1px; background-color: #dcdad4; margin: 40px auto 0 auto; }
.hub-institutional p { font-family: var(--fungi-sans); font-size: 15px; line-height: 2.2; color: #555; font-weight: 300; letter-spacing: 0.3px; }

/* FOOTER */
.fungi-footer {
    --footer-bg: #f2f0ea;
    --footer-ink: #77746d;
    --footer-ink-strong: #2d2b27;
    --footer-line: rgba(45, 43, 39, .12);
    padding-inline: clamp(18px, 4vw, 64px);
    border-top: 1px solid var(--footer-line);
    background: var(--footer-bg);
    color: var(--footer-ink);
}
.fungi-footer--cabins {
    --footer-bg: #182016;
    --footer-ink: rgba(255, 255, 255, .5);
    --footer-ink-strong: rgba(255, 255, 255, .78);
    --footer-line: rgba(255, 255, 255, .1);
}
.fungi-footer-inner {
    min-height: 74px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    max-width: 1440px;
    margin-inline: auto;
}
.fungi-footer-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.fungi-footer-brand {
    color: var(--footer-ink-strong);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    white-space: nowrap;
}
.fungi-footer-rights,
.fungi-footer-motto,
.fungi-footer-credit {
    margin: 0;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .08em;
}
.fungi-footer-motto {
    opacity: .72;
    font-family: var(--fungi-serif);
    font-size: 11px;
    font-style: italic;
    letter-spacing: .02em;
}
.fungi-footer-credit {
    justify-self: end;
    white-space: nowrap;
}
.fungi-footer-credit a {
    color: var(--footer-ink-strong);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}
.fungi-footer-credit a:hover {
    border-bottom-color: currentColor;
}
.fungi-footer-credit a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 1px;
}
@media (max-width: 760px) {
    .fungi-footer {
        padding-block: 19px;
    }
    .fungi-footer-inner {
        min-height: 0;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
        text-align: center;
    }
    .fungi-footer-meta {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 9px;
    }
    .fungi-footer-motto {
        order: -1;
    }
    .fungi-footer-credit {
        justify-self: center;
    }
}

@keyframes breathing { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .hub-bg { animation: none !important; transition: none !important; } .hub-half:hover .hub-bg { transform: scale(1.05); } }

/* Navegación editorial FUNGI 2027. */
.fungi-header { position: sticky; top: 0; z-index: 90; height: 88px; padding: 0 clamp(22px,3.5vw,54px); border-bottom: 1px solid rgba(26,26,26,.11); background: rgba(244,242,236,.94); backdrop-filter: blur(18px); }
.fungi-header-inner { grid-template-columns: 1fr auto 1fr; }
.fungi-menu-toggle { min-width: 98px; min-height: 44px; gap: 11px; padding: 0; border: 0; font: 700 9px/1 var(--fungi-sans); letter-spacing: .16em; }
.fungi-menu-glyph { width: 38px; height: 38px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid rgba(26,26,26,.2); border-radius: 50%; transition: color .25s, border-color .25s, background .25s, transform .25s; }
.fungi-menu-glyph i { width: 17px; height: 1px; display: block; background: currentColor; transition: width .25s, transform .25s; }
.fungi-menu-glyph i:last-child { width: 11px; justify-self: start; margin-left: 10px; }
.fungi-menu-toggle:hover .fungi-menu-glyph { color: #fff; border-color: #d72f5e; background: #d72f5e; transform: rotate(-8deg); }
.fungi-menu-toggle:hover .fungi-menu-glyph i:last-child { width: 17px; margin-left: 0; }
.fungi-logo-img { height: 51px; }
.fungi-tagline { margin-top: 3px; font: 500 9px/1 var(--fungi-sans); letter-spacing: .025em; }
.fungi-lang-switch { display: flex; gap: 8px; align-items: center; font: 700 9px/1 var(--fungi-sans); letter-spacing: .14em; }
.fungi-lang-switch a { position: relative; padding: 9px 1px; color: #99918a; }
.fungi-lang-switch a::after { content: ''; position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; background: #d72f5e; transform: scaleX(0); transition: transform .2s; }
.fungi-lang-switch a.active { color: #1a1a1a; }
.fungi-lang-switch a.active::after, .fungi-lang-switch a:hover::after { transform: scaleX(1); }
.fungi-lang-switch > span { color: #c4bdb6; }

.fungi-menu-backdrop { z-index: 998; background: rgba(18,14,12,.66); backdrop-filter: blur(7px); transition: opacity .45s ease; }
.fungi-menu-drawer { width: min(920px,82vw); min-width: 0; max-width: none; height: 100dvh; padding: 0; overflow: hidden; color: #211e1b; background: #f6f1e9; box-shadow: 30px 0 100px rgba(14,10,8,.24); transition: transform .65s cubic-bezier(.75,0,.18,1); }
.fungi-menu-drawer::before { content: 'FUNGI'; position: absolute; right: -55px; bottom: 5%; color: rgba(215,47,94,.045); font: 400 12rem/.8 var(--fungi-serif); transform: rotate(-90deg); pointer-events: none; }
.fungi-menu-drawer-header { min-height: 91px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0; padding: 0 clamp(25px,4vw,55px); border-bottom: 1px solid #dcd3ca; }
.fungi-drawer-logo { justify-self: start; }
.fungi-drawer-logo .fungi-logo-img { height: 42px; margin: 0; }
.fungi-menu-edition { color: #91887f; font: 700 7px/1 var(--fungi-sans); letter-spacing: .18em; }
.fungi-menu-close { position: relative; width: 43px; height: 43px; display: grid; place-items: center; justify-self: end; padding: 0; border: 1px solid #cec5bc; border-radius: 50%; background: transparent; transition: color .25s, border-color .25s, background .25s, transform .25s; }
.fungi-menu-close span { position: absolute; width: 17px; height: 1px; background: currentColor; transform: rotate(45deg); }
.fungi-menu-close span:last-child { transform: rotate(-45deg); }
.fungi-menu-close:hover { color: #fff; border-color: #d72f5e; background: #d72f5e; transform: rotate(8deg); }
.fungi-menu-drawer-content { min-height: 0; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(250px,.65fr); gap: clamp(35px,5vw,70px); padding: clamp(35px,6vh,70px) clamp(25px,4vw,55px); overflow-y: auto; }
.fungi-menu-primary { min-width: 0; }
.fungi-menu-kicker { margin-bottom: 23px; color: #d72f5e; font: 700 7px/1 var(--fungi-sans); letter-spacing: .2em; text-transform: uppercase; }
.fungi-nav-main { display: block; }
.nav-item { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr) 25px; gap: 13px; align-items: center; padding: clamp(15px,1.35vw,18px) 0; border-bottom: 1px solid #d8cfc6; opacity: 0; transform: translateX(-18px); transition: opacity .4s, transform .45s, padding .25s, color .25s; }
.nav-item:first-child { border-top: 1px solid #d8cfc6; }
.fungi-menu-drawer.active .nav-item { opacity: 1; transform: none; }
.fungi-menu-drawer.active .nav-item:nth-child(2) { transition-delay: .07s; }
.fungi-menu-drawer.active .nav-item:nth-child(3) { transition-delay: .14s; }
.nav-item:hover { padding-inline: 8px; color: #d72f5e; }
.nav-item.is-current::before { content: ''; position: absolute; top: 50%; left: -16px; width: 7px; height: 7px; border-radius: 50%; background: #d72f5e; transform: translateY(-50%); }
.nav-num { width: auto; margin: 0; color: #9d948c; font: 700 7px/1 var(--fungi-sans); }
.nav-item a { min-width: 0; display: grid; gap: 5px; font-size: inherit; line-height: inherit; }
.nav-item a strong { font: 400 clamp(2.15rem,3.85vw,3.9rem)/.96 var(--fungi-serif); letter-spacing: -.04em; }
.nav-item a small { color: #827970; font: 400 8px/1.4 var(--fungi-sans); letter-spacing: .055em; }
.nav-item > i { color: #d72f5e; font: 400 15px/1 var(--fungi-sans); font-style: normal; }
.fungi-nav-aside { width: auto; display: grid; align-content: start; gap: 28px; padding: 0; font-family: var(--fungi-sans); }
.fungi-menu-manifesto { position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; overflow: hidden; color: #fff; background: #d72f5e; }
.fungi-menu-manifesto > span { position: absolute; top: -25px; right: -5px; color: rgba(255,255,255,.16); font: 400 10rem/.8 var(--fungi-serif); }
.fungi-menu-manifesto p { position: relative; max-width: 17ch; margin-bottom: 20px; font: 400 1.55rem/1.05 var(--fungi-serif); }
.fungi-menu-manifesto small { position: relative; font: 700 6px/1 var(--fungi-sans); letter-spacing: .16em; }
.nav-lang { margin: 0; }
.nav-lang > span, .nav-contact h4 { display: block; margin-bottom: 11px; color: #9a9189; font: 700 6px/1 var(--fungi-sans); letter-spacing: .18em; }
.nav-lang > div { display: flex; gap: 7px; }
.nav-lang a { padding: 8px 10px; border: 1px solid #d2c9c0; color: #716961; font: 700 7px/1 var(--fungi-sans); letter-spacing: .1em; }
.nav-lang a.active { color: #fff; border-color: #211e1b; background: #211e1b; }
.nav-contact { display: grid; gap: 7px; }
.nav-contact h4 { margin-bottom: 5px; }
.nav-contact a, .nav-contact p { margin: 0; color: #5f5750; font: 400 9px/1.55 var(--fungi-sans); overflow-wrap: anywhere; }
.nav-contact .fungi-menu-social { width: max-content; margin-top: 8px; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: #d72f5e; font-weight: 700; }
.fungi-menu-drawer-footer { min-height: 56px; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0 clamp(25px,4vw,55px); border-top: 1px solid #dcd3ca; color: #8f867e; font: 700 6px/1 var(--fungi-sans); letter-spacing: .13em; }
.fungi-menu-open { overflow: hidden; }

@media (max-width: 900px) {
	.fungi-header { height: 76px; display: flex; padding: 0 15px; border-bottom: 1px solid rgba(26,26,26,.1); }
	.fungi-header-inner { width: 100%; display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; justify-content: initial; }
	.fungi-menu-toggle { position: static; width: 44px; min-width: 44px; height: 44px; min-height: 44px; justify-self: start; }
	.fungi-menu-glyph { width: 44px; height: 44px; }
	.fungi-menu-glyph i { width: 18px; }
	.fungi-menu-glyph i:last-child { width: 12px; margin-left: 11px; }
	.fungi-logo-container { min-width: 0; }
	.fungi-logo-img { height: 40px; }
	.fungi-tagline { margin-top: 3px; font-size: 7px; white-space: nowrap; }
	.fungi-lang-switch { display: flex; gap: 3px; justify-self: end; font-size: 7px; letter-spacing: .06em; }
	.fungi-lang-switch a { padding: 8px 2px; }
	.fungi-menu-drawer { width: 100vw; max-width: none; padding: 0; }
	.fungi-menu-drawer-header { min-height: 76px; grid-template-columns: 1fr auto 1fr; padding: 0 17px; }
	.fungi-menu-drawer-header .fungi-logo-img { height: 36px; }
	.fungi-menu-edition { font-size: 6px; }
	.fungi-menu-close { width: 44px; height: 44px; }
	.fungi-menu-drawer-content { display: flex; flex-direction: column; gap: 31px; padding: 29px 20px 35px; }
	.fungi-menu-kicker { margin-bottom: 16px; }
	.nav-item { grid-template-columns: 24px minmax(0,1fr) 18px; padding: 15px 0; }
	.nav-item a strong { font-size: clamp(2.05rem,9.6vw,2.85rem); line-height: .98; }
	.nav-item a small { max-width: 30ch; font-size: 7px; }
	.fungi-nav-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.fungi-menu-manifesto { grid-column: 1/-1; min-height: 125px; padding: 20px; }
	.fungi-menu-manifesto p { max-width: 25ch; margin-bottom: 13px; font-size: 1.35rem; }
	.nav-lang { margin: 0; }
	.nav-contact { min-width: 0; }
	.nav-contact p { display: none; }
	.fungi-menu-drawer-footer { min-height: 50px; gap: 12px; padding: 0 18px; }
	.fungi-menu-drawer-footer span:nth-child(2) { display: none; }
}

@media (max-width: 420px) {
	.fungi-menu-edition { visibility: hidden; }
	.fungi-menu-drawer-content { padding-top: 22px; }
	.fungi-nav-aside { grid-template-columns: 1fr; }
	.fungi-menu-manifesto { min-height: 105px; }
	.nav-lang > div { flex-wrap: wrap; }
	.nav-contact p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fungi-menu-drawer, .nav-item, .fungi-menu-glyph, .fungi-menu-close { transition: none !important; }
}