:root {
    --gold: #d99b31;
    --dark: #080603;
    --paper: #f5eee3;
}

* { box-sizing: border-box; }

html { background: var(--dark); scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--paper);
    background: var(--dark);
    font-family: "Cormorant Garamond", Georgia, serif;
}

a, button { -webkit-tap-highlight-color: transparent; }

.visual-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: start center;
    overflow: hidden;
    background: var(--dark);
    animation: page-in .75s ease both;
}

.visual-page picture { display: block; width: 100%; }
.visual-page img { display: block; width: 100%; height: auto; }

.site-header { position: relative; z-index: 20; }
.brand-link {
    position: fixed;
    z-index: 21;
    top: 3%; left: 3%;
    width: 29%; height: 17%;
}

.menu-toggle {
    position: fixed;
    z-index: 30;
    top: clamp(18px, 4.6vw, 48px);
    right: clamp(18px, 4.5vw, 70px);
    width: 74px;
    height: 108px;
    padding: 14px 17px 8px;
    border: 1px solid var(--gold);
    border-radius: 40px 40px 12px 12px;
    color: var(--gold);
    background: rgba(5,4,2,.22);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

.menu-toggle span { display:block; height:2px; margin:6px 0; background:currentColor; }
.menu-toggle strong { position:absolute; top:80px; left:50%; transform:translateX(-50%); font:500 17px/1 Georgia,serif; white-space:nowrap; }

/* Las dos primeras composiciones ya traen el botón dibujado; esta zona
   transparente lo vuelve funcional sin duplicar el diseño. */
.route-inicio .menu-toggle,
.route-tavit .menu-toggle {
    top: 4.3%; right: 3.5%; width: 9%; height: 12%;
    min-width: 90px; min-height: 90px;
    border: 0; background: transparent; backdrop-filter: none;
}
.route-inicio .menu-toggle span,
.route-inicio .menu-toggle strong,
.route-tavit .menu-toggle span,
.route-tavit .menu-toggle strong { visibility: hidden; }

.site-menu {
    position: fixed;
    z-index: 50;
    inset: 0 0 0 auto;
    width: min(390px, 88vw);
    padding: 11vh 50px 50px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: linear-gradient(145deg, #161008, #050403 70%);
    border-left: 1px solid rgba(217,155,49,.55);
    box-shadow: -24px 0 70px rgba(0,0,0,.72);
    transform: translateX(105%);
    transition: transform .45s cubic-bezier(.22,.8,.22,1);
}

.site-menu.open { transform: translateX(0); }
.site-menu a { color:var(--paper); text-decoration:none; font-size:clamp(28px,3vw,42px); border-bottom:1px solid rgba(217,155,49,.26); padding-bottom:10px; transition:.25s; }
.site-menu a:hover, .site-menu a[aria-current="page"] { color:var(--gold); padding-left:8px; }
.menu-eyebrow { margin:0 0 12px; color:var(--gold); letter-spacing:.5em; font:500 14px Montserrat,sans-serif; }
.menu-close { position:absolute; top:24px; right:28px; border:0; color:var(--gold); background:none; font-size:42px; cursor:pointer; }
.menu-mark { color:var(--gold); margin-top:auto; text-align:center; font-size:28px; }
.menu-backdrop { position:fixed; z-index:40; inset:0; background:rgba(0,0,0,.68); opacity:0; pointer-events:none; transition:opacity .35s; }
.menu-backdrop.open { opacity:1; pointer-events:auto; }

.hotspot { position:absolute; display:block; }
.hotspot--start { left:4.4%; top:73.2%; width:33.5%; height:8.2%; border-radius:50px; }

.next-page { position:fixed; z-index:15; left:50%; bottom:22px; width:46px; height:46px; transform:translateX(-50%); border:1px solid rgba(217,155,49,.65); border-radius:50%; background:rgba(0,0,0,.4); }
.next-page span { position:absolute; width:16px; height:16px; left:14px; top:11px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg); animation:float 1.8s ease-in-out infinite; }

.error-page { min-height:100vh; display:grid; place-items:center; padding:30px; text-align:center; background:radial-gradient(circle at center,#26170a,#060402 65%); }
.error-page span { color:var(--gold); font-size:40px; }
.error-page h1 { margin:12px 0; font-size:clamp(42px,7vw,82px); font-weight:400; }
.error-page p { font-size:24px; }
.error-page a { display:inline-block; padding:12px 28px; border:1px solid var(--gold); border-radius:30px; color:var(--gold); text-decoration:none; }

@keyframes page-in { from { opacity:0; transform:scale(1.008); } to { opacity:1; transform:none; } }
@keyframes float { 50% { transform:translateY(5px) rotate(45deg); } }

@media (min-aspect-ratio: 16/10) and (min-width: 900px) {
    .visual-page--wide img { min-height:100vh; object-fit:cover; object-position:center; }
}

@media (max-width: 760px) {
    .visual-page { min-height:auto; padding-top:0; }
    .visual-page img { width:auto; max-width:none; height:100vh; object-fit:cover; }
    .visual-page--wide img { object-position:62% center; }
    .visual-page--services img { object-position:64% center; }
    .visual-page--portrait img { width:100%; height:auto; min-height:100vh; object-position:top center; }
    .brand-link { width:58%; height:14%; }
    .menu-toggle { top:14px; right:14px; width:58px; height:78px; padding:10px 13px; background:rgba(5,4,2,.64); }
    .menu-toggle strong { top:57px; font-size:12px; }
    .menu-toggle span { margin:4px 0; }
    .route-inicio .menu-toggle,
    .route-tavit .menu-toggle { top:14px; right:14px; width:72px; height:88px; min-width:0; min-height:0; }
    .hotspot--start { display:none; }
    .next-page { bottom:12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}