/* =========================================
   KABALA UNAWATUNA
   Identity system — brand guide aligned
   Terracotta · Forest · Cream
   ========================================= */

:root {
    /* --- Brand colors (from KABALA brand guide) --- */
    --terra: #BC6C55;
    --terra-deep: #8E4F3D;
    /* Terracota para TEXTO. #BC6C55 sobre crema da 3,30:1 y no llega al 4,5:1
       que pide la WCAG AA en tamano normal; estos dos si llegan. El --terra
       original se reserva para titulares grandes, iconos, bordes y fondos. */
    --terra-text: #8E4F3D;      /* 5,35:1 sobre crema */
    --terra-on-dark: #DCA48F;   /* 4,82:1 sobre forest-deep (pie de pagina) */
    --terra-on-forest: #E4B5A2; /* 3,59:1 sobre forest — solo titulares grandes */
    /* --terra-display es el acento de los <em> de titular. Se redefine mas
       abajo segun el fondo de la seccion, y como las variables se heredan,
       cualquier <em> nuevo queda cubierto sin tocar su regla. */
    --terra-display: var(--terra);
    /* Fondo de los paneles que llevan texto. El #BC6C55 de marca deja el crema
       en 3,30:1 y no hay tono de texto que lo salve; oscurecido da 5,35:1.
       El --terra original se queda para lineas, iconos y adornos sin texto. */
    --terra-panel: #8E4F3D;
    --terra-panel-hover: #6E3C2E;
    --forest: #436451;
    --forest-deep: #2E4538;
    --cream: #F4EBE4;
    --cream-warm: #EAD9CB;
    --ink: #2B1F18;
    --ink-soft: #6F5648;
    --line: rgba(43, 31, 24, 0.12);

    --font-display: "Josefin Sans", "Town 10 Display", sans-serif;
    --font-body: "Roboto Flex", "Myriad Pro", -apple-system, system-ui, sans-serif;

    --max-w: 1320px;
    --gutter: clamp(20px, 4vw, 48px);
    --radius: 2px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
    overflow-x: hidden;
    font-variation-settings: "wdth" 100, "opsz" 14;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--forest);
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
}

.eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.36em;
    font-size: 11px;
    font-weight: 500;
    color: var(--terra-text);
    text-indent: 0.36em;
}

/* ---------- Layout helpers ---------- */
.wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section { padding: clamp(80px, 12vw, 160px) 0; }

/* ---------- Navigation ---------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 22px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Solo se anima el fondo. El cambio de altura es instantáneo a propósito:
       animar el padding obliga al navegador a recalcular la maqueta en cada
       fotograma y la barra da tirones en móviles lentos. */
    transition: background 400ms var(--ease), border-color 400ms var(--ease);
}

.nav.scrolled {
    background: rgba(244, 235, 228, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px var(--gutter);
    border-bottom: 1px solid var(--line);
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cream);
    transition: color 400ms var(--ease);
}
.nav.scrolled .nav__logo { color: var(--forest); }
.nav__logo img { width: 36px; height: auto; display: block; image-rendering: high-quality; }
.nav__logo-text {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.18em;
}

.nav__menu { display: flex; gap: 36px; align-items: center; }

.nav__link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream);
    transition: color 300ms var(--ease), opacity 300ms var(--ease);
    opacity: 0.92;
}
.nav.scrolled .nav__link { color: var(--ink); }
.nav__link:hover { opacity: 1; }
.nav.scrolled .nav__link:hover { color: var(--terra-text); }

.nav__cta {
    background: var(--terra-panel);
    color: var(--cream) !important;
    padding: 12px 22px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    transition: background 300ms var(--ease), transform 300ms var(--ease);
    opacity: 1 !important;
}
.nav__cta:hover {
    background: var(--terra-panel-hover);
    transform: translateY(-1px);
}
.nav.scrolled .nav__cta { color: var(--cream) !important; }

.nav__burger {
    display: none;
    width: 32px;
    height: 24px;
    position: relative;
    z-index: 110;
}
.nav__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--cream);
    transition: all 400ms var(--ease);
}
.nav__burger span:nth-child(1) { top: 4px; }
.nav__burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__burger span:nth-child(3) { bottom: 4px; }
.nav.scrolled .nav__burger span { background: var(--forest); }
.nav.open .nav__burger span { background: var(--forest); }
.nav.open .nav__burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cream);
    overflow: hidden;
    padding: 0;
    background: var(--terra);
}

.hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(67, 100, 81, 0.25) 0%, transparent 60%),
        var(--terra);
    z-index: 0;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 0;
}

/* Sin animación para quien la haya desactivado en su sistema: se queda el fotograma fijo */
@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
    .has-video .hero__bg {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 18%, transparent 70%, rgba(0, 0, 0, 0.4) 100%),
            url("kabala-hero-poster.jpg") center / cover no-repeat;
    }
}
/* Minimal vignette — only at extremes, preserves true video colors */
.hero__video + .hero__bg {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 18%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}
.has-video .hero__skull {
    opacity: 0.92;
}
.has-video .hero__brand,
.has-video .hero__city {
    color: var(--cream);
    text-shadow: 0 6px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
}
.has-video .hero__claim {
    color: var(--cream);
    text-shadow: 0 4px 18px rgba(0,0,0,0.5);
}

.hero__skull {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -103%);
    width: clamp(190px, 17vw, 250px);
    height: auto;
    z-index: 1;
    filter: drop-shadow(0 30px 60px rgba(46, 69, 56, 0.18));
}

.hero__content {
    position: relative;
    z-index: 2;
    padding: clamp(60px, 12vh, 100px) var(--gutter) clamp(80px, 14vh, 140px);
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
    transform: translateY(24vh);
}

.hero__brand {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(56px, 9.5vw, 140px);
    letter-spacing: 0.22em;
    line-height: 1;
    color: var(--cream);
    margin-bottom: 18px;
    text-indent: 0.22em;
}

.hero__city {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.6em;
    font-size: clamp(11px, 1.4vw, 16px);
    color: var(--cream);
    margin-bottom: 40px;
    text-indent: 0.6em;
    opacity: 0.9;
}

.hero__claim {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(18px, 2.1vw, 24px);
    color: var(--cream);
    letter-spacing: 0.05em;
    max-width: 32ch;
    margin: 0 auto 40px;
    line-height: 1.45;
}

.hero__ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    transition: all 350ms var(--ease);
    border-radius: 0;
    text-indent: 0.28em;
    will-change: transform;
}
.btn svg { text-indent: 0; transition: transform 300ms var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary {
    background: var(--forest);
    color: var(--cream);
}
.btn--primary:hover {
    background: var(--forest-deep);
    transform: translateY(-2px);
}
.btn--terra {
    background: var(--terra-panel);
    color: var(--cream);
}
.btn--terra:hover {
    background: var(--terra-panel-hover);
    transform: translateY(-2px);
}
.btn--ghost {
    border: 1px solid rgba(244, 235, 228, 0.6);
    color: var(--cream);
}
.btn--ghost:hover {
    background: var(--cream);
    color: var(--forest);
    border-color: var(--cream);
}
.btn--outline {
    border: 1px solid var(--forest);
    color: var(--forest);
}
.btn--outline:hover {
    background: var(--forest);
    color: var(--cream);
}

.hero__scroll {
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 3;
    color: var(--cream);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.85;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero__scroll::after {
    content: "";
    width: 1px;
    height: 40px;
    background: var(--cream);
    animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%, 100% { transform: scaleY(1); transform-origin: top; }
    50% { transform: scaleY(0.3); transform-origin: top; }
}

/* ---------- Welcome / Concept ---------- */
.welcome {
    background: var(--cream);
    text-align: center;
}
.welcome__inner {
    max-width: 760px;
    margin: 0 auto;
}
.welcome__title {
    font-size: clamp(40px, 6vw, 80px);
    margin: 20px 0 48px;
    font-weight: 300;
    letter-spacing: 0.025em;
    color: var(--forest);
    line-height: 1.05;
}
.welcome__lead {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.5;
    color: var(--forest);
    margin-bottom: 36px;
    letter-spacing: 0.015em;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
}
.welcome__body p {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--ink-soft);
    margin-bottom: 22px;
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
}
.welcome__signoff {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    color: var(--terra-text);
    margin-top: 36px;
}
.welcome__divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 48px 0;
    color: var(--terra);
}
.welcome__divider::before,
.welcome__divider::after {
    content: "";
    width: 60px;
    height: 1px;
    background: var(--terra);
    opacity: 0.5;
}
.welcome__divider img { width: 30px; height: auto; opacity: 0.8; }

/* ---------- Why us — Three pillars ---------- */
.pillars {
    background: var(--forest);
    color: var(--cream);
}
.pillars__head {
    text-align: center;
    margin-bottom: 80px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.pillars__head .eyebrow { color: var(--cream); opacity: 0.7; }
.pillars__head h2 {
    color: var(--cream);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 300;
    margin: 16px 0 24px;
    letter-spacing: 0.03em;
}
.pillars__head p {
    color: var(--cream-warm);
    font-size: 16px;
    line-height: 1.7;
}

.pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    text-align: center;
}
.pillar svg {
    width: 56px;
    height: 56px;
    margin: 0 auto 24px;
    color: var(--terra);
    stroke-width: 1;
}
.pillar h3 {
    font-family: var(--font-display);
    color: var(--cream);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.pillar p {
    color: var(--cream-warm);
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 32ch;
    margin: 0 auto;
}

/* ---------- Signature dishes ---------- */
.signatures {
    background: var(--cream);
}
.signatures__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 80px;
    gap: 40px;
    flex-wrap: wrap;
}
.signatures__head h2 {
    font-size: clamp(40px, 5.5vw, 72px);
    max-width: 18ch;
    font-weight: 300;
    color: var(--forest);
    letter-spacing: 0.03em;
}
.signatures__head p {
    max-width: 36ch;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.7;
}

.sig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.sig {
    background: transparent;
    border: 1px solid var(--line);
    transition: transform 600ms var(--ease), border-color 600ms var(--ease), background 600ms var(--ease), box-shadow 600ms var(--ease);
    padding: 0;
    position: relative;
}
.sig:hover {
    transform: translateY(-8px);
    border-color: var(--terra);
    background: #FFFFFF;
    box-shadow: 0 24px 60px -20px rgba(184, 60, 20, 0.18);
}
.sig__num {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--terra-text);
    letter-spacing: 0.36em;
    padding: 36px 36px 0;
    font-weight: 400;
}
.sig__body { padding: 20px 36px 44px; }
.sig__name {
    font-family: var(--font-display);
    font-size: 28px;
    margin-bottom: 16px;
    font-weight: 400;
    color: var(--forest);
    letter-spacing: 0.015em;
    line-height: 1.15;
}
.sig__desc {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 28px;
}
.sig__price {
    font-family: var(--font-display);
    color: var(--terra-text);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.signatures__foot {
    text-align: center;
    margin-top: 64px;
}

/* ---------- Sunset CTA ---------- */
.sunset {
    background: var(--terra-panel);
    color: var(--cream);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sunset__skull {
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 360px;
    height: auto;
    opacity: 0.22;
    z-index: 0;
}
.sunset__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sunset .eyebrow { color: var(--cream); opacity: 0.7; }
.sunset__title {
    font-size: clamp(40px, 5.6vw, 72px);
    margin: 16px 0 28px;
    font-weight: 300;
    color: var(--cream);
    letter-spacing: 0.03em;
}
.sunset__body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--cream-warm);
    margin-bottom: 40px;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Hours block ---------- */
.hours {
    background: var(--cream);
    text-align: center;
}
.hours__title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 300;
    color: var(--forest);
    margin: 16px 0 48px;
    letter-spacing: 0.04em;
}
.hours__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 880px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}
.hours__col dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--terra-text);
    margin-bottom: 12px;
    font-weight: 500;
}
.hours__col dd {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--forest);
    font-weight: 400;
    line-height: 1.5;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--forest-deep);
    color: var(--cream);
    padding: 100px 0 40px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}
.footer__brand {
    color: var(--cream);
    margin-bottom: 16px;
}
.footer__brand img { width: 64px; height: auto; margin-bottom: 22px; image-rendering: high-quality; }
.footer__brand-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: var(--cream);
    margin-bottom: 4px;
}
.footer__brand-city {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.5em;
    color: var(--terra-on-dark);
}
.footer__tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--cream-warm);
    max-width: 32ch;
    line-height: 1.55;
    margin-top: 24px;
}

.footer__col h4 {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--terra-on-dark);
    margin-bottom: 24px;
    font-weight: 500;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 12px; font-size: 14px; opacity: 0.78; line-height: 1.5; }
.footer__col a:hover { color: var(--terra-on-dark); opacity: 1; }

.footer__bottom {
    padding-top: 36px;
    border-top: 1px solid rgba(244, 235, 228, 0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    opacity: 0.55;
    letter-spacing: 0.02em;
}

/* ---------- Food & Drinks page ---------- */
.page-hero {
    padding: 220px 0 120px;
    background: var(--terra-panel);
    color: var(--cream);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero__skull {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: auto;
    opacity: 0.85;
}
.page-hero .eyebrow { color: var(--cream); opacity: 0.7; padding-top: 80px; display: inline-block; }
.page-hero h1 {
    font-size: clamp(48px, 8vw, 112px);
    font-weight: 300;
    margin: 14px 0 24px;
    color: var(--cream);
    letter-spacing: 0.04em;
}
.page-hero p {
    max-width: 56ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.7;
    color: var(--cream-warm);
}

/* Menu category */
.menu-section {
    background: var(--cream);
    padding: clamp(80px, 12vw, 130px) 0;
}
.menu-section + .menu-section { padding-top: 0; }

.menu-section--forest {
    background: var(--forest);
}
.menu-section--terra {
    background: var(--terra-panel);
}

.menu-section__head {
    text-align: center;
    margin-bottom: 64px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.menu-section__title {
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 300;
    margin: 14px 0 18px;
    color: var(--forest);
    letter-spacing: 0.04em;
}
.menu-section__sub {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.7;
}

.menu-section--forest .menu-section__title,
.menu-section--terra .menu-section__title { color: var(--cream); }
.menu-section--forest .menu-section__sub,
.menu-section--terra .menu-section__sub { color: var(--cream-warm); }
.menu-section--forest .eyebrow,
.menu-section--terra .eyebrow { color: var(--cream); opacity: 0.7; }

.menu-list {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 0;
}
.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.menu-item:last-child { border-bottom: none; }
.menu-item__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.menu-item__name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    color: var(--forest);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-indent: 0.08em;
}
.menu-item__tag {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    padding: 3px 9px;
    border: 1px solid var(--terra);
    color: var(--terra-text);
    font-weight: 500;
}
.menu-item__desc {
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
    margin-top: 8px;
    max-width: 56ch;
    font-style: italic;
}
.menu-item__price {
    font-family: var(--font-display);
    color: var(--terra-text);
    font-size: 19px;
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums lining-nums;
}
.menu-item__price small {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 0.05em;
    font-style: italic;
    font-family: var(--font-body);
}

.menu-section--forest .menu-item,
.menu-section--terra .menu-item { border-color: var(--cream-warm); }
.menu-section--forest .menu-item__name,
.menu-section--terra .menu-item__name { color: var(--cream); }
.menu-section--forest .menu-item__desc,
.menu-section--terra .menu-item__desc { color: var(--cream-warm); }
/* Sobre el verde no sirve ninguna terracota: la clara da 3,07:1 y la oscura menos
   aun. Arena calida, 4,81:1, y mantiene la jerarquia frente al crema del nombre. */
.menu-section--forest .menu-item__price { color: var(--cream-warm); }
.menu-section--terra .menu-item__price { color: var(--cream); }
.menu-section--terra .menu-item__price small { color: var(--cream-warm); }
.menu-section--forest .menu-item__price small { color: var(--cream-warm); }
.menu-section--forest .menu-item__tag { color: var(--cream); border-color: var(--cream); }
.menu-section--terra .menu-item__tag { color: var(--cream); border-color: var(--cream); }

.menu-note {
    text-align: center;
    margin-top: 48px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.menu-section--forest .menu-note,
.menu-section--terra .menu-note { color: var(--cream-warm); }

.menu-cta {
    background: var(--cream-warm);
    text-align: center;
    padding: clamp(80px, 12vw, 130px) 0;
}
.menu-cta h3 {
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 300;
    margin-bottom: 20px;
    color: var(--forest);
    letter-spacing: 0.04em;
}
.menu-cta p {
    color: var(--ink-soft);
    margin-bottom: 32px;
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.7;
}

/* ====================================================
   NEW SECTIONS — Story, Experience, Bar Program, Visit
   ==================================================== */

/* ---------- The Story (manifest, two-column) ---------- */
.story {
    background: var(--forest);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}
.story__skull {
    position: absolute;
    left: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: 480px;
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
}
.story__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 8vw, 120px);
    position: relative;
    z-index: 1;
    align-items: start;
}
.story__aside .eyebrow {
    color: var(--terra-text);
    margin-bottom: 24px;
    display: block;
}
.story__aside h2 {
    color: var(--cream);
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.05;
}
.story__aside h2 em {
    font-style: italic;
    color: var(--terra-display);
    font-weight: 300;
}
.story__body p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--cream-warm);
    margin-bottom: 22px;
}
.story__body p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 72px;
    line-height: 0.85;
    float: left;
    color: var(--terra);
    margin: 6px 12px 0 0;
    font-weight: 400;
}
.story__values {
    list-style: none;
    margin-top: 40px;
    padding: 0;
    border-top: 1px solid rgba(244, 235, 228, 0.15);
}
.story__values li {
    padding: 22px 0;
    border-bottom: 1px solid rgba(244, 235, 228, 0.15);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    align-items: baseline;
}
.story__values dt,
.story__values .value-name {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--terra-text);
    font-weight: 400;
}
.story__values dd,
.story__values .value-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--cream-warm);
    font-style: italic;
}

/* ---------- Beach Club Experience (4 cards) ---------- */
.experience {
    background: var(--cream);
}
.experience__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 80px;
}
.experience__head h2 {
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 300;
    margin: 16px 0 24px;
    color: var(--forest);
    letter-spacing: 0.03em;
}
.experience__head h2 em {
    font-style: italic;
    color: var(--terra-display);
    font-weight: 300;
}
.experience__head p {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.7;
}
.experience__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.xp-card {
    padding: 48px 32px;
    border-right: 1px solid var(--line);
    transition: background 400ms var(--ease);
    position: relative;
}
.xp-card:last-child { border-right: none; }
.xp-card:hover { background: var(--cream-warm); }
.xp-card__num {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.32em;
    color: var(--terra-text);
    margin-bottom: 32px;
    font-weight: 400;
}
.xp-card__title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--forest);
    font-weight: 400;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.xp-card__desc {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.7;
}

/* ---------- Pull Quote ---------- */
.pullquote {
    background: var(--terra-panel);
    color: var(--cream);
    text-align: center;
    padding: clamp(80px, 14vw, 180px) 0;
    position: relative;
    overflow: hidden;
}
.pullquote__skull {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    opacity: 0.08;
    z-index: 0;
}
.pullquote blockquote {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.pullquote__mark {
    font-family: var(--font-display);
    font-size: 120px;
    line-height: 0.5;
    color: var(--cream);
    opacity: 0.4;
    margin-bottom: 24px;
    font-style: italic;
}
.pullquote p {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(24px, 3.4vw, 44px);
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 32px;
}
.pullquote cite {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cream-warm);
}

/* ---------- Bar Program (two-column) ---------- */
.bar-program {
    background: var(--forest-deep);
    color: var(--cream);
}
.bar-program__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: center;
}
.bar-program__visual {
    background: var(--terra);
    aspect-ratio: 4/5;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}
.bar-program__visual img {
    max-width: 65%;
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.25));
}
.bar-program__text { max-width: 520px; }
.bar-program__text .eyebrow {
    color: var(--terra-text);
    margin-bottom: 24px;
    display: block;
}
.bar-program__text h2 {
    color: var(--cream);
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 300;
    letter-spacing: 0.03em;
    margin-bottom: 32px;
}
.bar-program__text h2 em {
    font-style: italic;
    color: var(--terra-display);
    font-weight: 300;
}
.bar-program__text p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--cream-warm);
    margin-bottom: 22px;
}
.bar-program__signatures {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid rgba(244, 235, 228, 0.15);
}
.bar-program__sig-item {
    padding: 18px 0;
    border-bottom: 1px solid rgba(244, 235, 228, 0.08);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: baseline;
}
.bar-program__sig-item:last-child { border-bottom: none; }
.bar-program__sig-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 400;
    white-space: nowrap;
}
.bar-program__sig-desc {
    font-size: 13px;
    color: var(--cream-warm);
    line-height: 1.6;
    font-style: italic;
}

/* ---------- Plan Your Visit ---------- */
.plan-visit {
    background: var(--cream);
}
.plan-visit__head {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 80px;
}
.plan-visit__head h2 {
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 300;
    margin: 16px 0 24px;
    color: var(--forest);
    letter-spacing: 0.03em;
}
.plan-visit__head h2 em {
    font-style: italic;
    color: var(--terra-display);
    font-weight: 300;
}
.plan-visit__head p {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.7;
}
.plan-visit__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}
.tip {
    text-align: left;
}
.tip__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
    color: var(--terra);
    stroke-width: 1.2;
}
.tip h3 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--forest);
    font-weight: 400;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tip p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 14px;
}
.tip strong {
    font-weight: 500;
    color: var(--forest);
}

/* ---------- Menu downloads ---------- */
.downloads {
    background: var(--cream-warm);
    text-align: center;
    padding: clamp(80px, 12vw, 130px) 0;
}
.downloads__head {
    max-width: 560px;
    margin: 0 auto 56px;
}
.downloads__head h2 {
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 300;
    margin: 14px 0 18px;
    color: var(--forest);
    letter-spacing: 0.04em;
}
.downloads__head p {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.7;
}
.downloads__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 760px;
    margin: 0 auto;
}
.dl-card {
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 40px 32px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 400ms var(--ease), border-color 400ms var(--ease), background 400ms var(--ease);
}
.dl-card:hover {
    transform: translateY(-4px);
    border-color: var(--terra);
    background: #FFFFFF;
}
.dl-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--forest);
    color: var(--cream);
    border-radius: 0;
}
.dl-card__icon svg { width: 22px; height: 22px; }
.dl-card__label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--terra-text);
}
.dl-card__name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--forest);
    margin-top: -4px;
}
.dl-card__meta {
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dl-card__meta-cta {
    color: var(--terra-text);
    font-weight: 500;
}

/* ---------- WhatsApp floating ---------- */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 95;
    background: #25D366;
    color: white;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.5);
    transition: transform 300ms var(--ease);
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 28px; height: 28px; }

/* ---------- Reveal animations ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .sig-grid { grid-template-columns: repeat(2, 1fr); }
    .pillars__grid { grid-template-columns: 1fr; gap: 48px; max-width: 480px; margin: 0 auto; }
    .hours__grid { grid-template-columns: 1fr; gap: 24px; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 720px) {
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 82%;
        max-width: 360px;
        height: 100vh;
        height: 100svh;
        background: var(--cream);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 40px;
        gap: 28px;
        transition: right 400ms var(--ease);
        box-shadow: -20px 0 60px -20px rgba(0,0,0,0.3);
    }
    .nav.open .nav__menu { right: 0; }
    .nav__link, .nav.scrolled .nav__link {
        color: var(--forest);
        font-size: 18px;
        letter-spacing: 0.18em;
    }
    .nav__cta { font-size: 12px; padding: 14px 22px; }
    .nav__burger { display: block; }

    .sig-grid { grid-template-columns: 1fr; }
    .signatures__head { flex-direction: column; align-items: flex-start; }
    .footer__grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    .menu-item { grid-template-columns: 1fr; gap: 6px; }
    .menu-item__price { margin-top: 4px; }
    .hero__scroll { display: none; }
    .hero__ctas { width: 100%; }
    .btn { width: 100%; justify-content: center; }
    .fab { bottom: 16px; right: 16px; width: 54px; height: 54px; }

    .hero__content { transform: translateY(26vh); }
    .hero__skull { width: 240px; transform: translate(-50%, -65%); }
    .nav__logo-text { display: none; }

    .downloads__grid { grid-template-columns: 1fr; }

    .story__grid { grid-template-columns: 1fr; gap: 40px; }
    .story__values li { grid-template-columns: 1fr; gap: 8px; }
    .experience__grid { grid-template-columns: 1fr; }
    .xp-card { border-right: none; border-bottom: 1px solid var(--line); }
    .xp-card:last-child { border-bottom: none; }
    .bar-program__grid { grid-template-columns: 1fr; }
    .bar-program__visual { aspect-ratio: 16/10; padding: 40px; }
    .plan-visit__grid { grid-template-columns: 1fr; gap: 48px; max-width: 480px; }
    .pullquote__mark { font-size: 80px; }
}

@media (max-width: 1024px) {
    .experience__grid { grid-template-columns: repeat(2, 1fr); }
    .xp-card:nth-child(1), .xp-card:nth-child(2) { border-bottom: 1px solid var(--line); }
    .xp-card:nth-child(2) { border-right: none; }
    .plan-visit__grid { grid-template-columns: 1fr; gap: 48px; max-width: 560px; }
}

/* ---------- Portada en pantallas bajas ----------
   El bloque de texto de la portada se desplaza hacia abajo para dejar sitio a la
   calavera. En portatiles de poca altura ese desplazamiento dejaba el boton
   "Book a Table" fuera de pantalla, asi que aqui se reduce. */
@media (max-height: 840px) {
    .hero__content { transform: translateY(20vh); }
    .hero__skull   { width: clamp(150px, 12.5vw, 175px); transform: translate(-50%, -127%); }
}
@media (max-height: 700px) {
    .hero__content { transform: translateY(10vh); padding-top: clamp(40px, 8vh, 70px); }
    .hero__skull   { width: clamp(110px, 9vw, 140px); transform: translate(-50%, -150%); }
    .hero__scroll  { display: none; }
}

/* Movil: la calavera va despues de las reglas por altura para que gane siempre.
   Colocada para que "KABALA" cruce la barbilla, igual que en escritorio. */
@media (max-width: 768px) {
    .hero__skull { width: 190px; transform: translate(-50%, -115%); }
}

/* ==========================================================================
   PASADA DE ACCESIBILIDAD — 14/08/2026
   Todo lo de aqui abajo es correccion, no diseno nuevo. Va al final a
   proposito: son reglas que deben ganar por cascada sin tocar el sistema
   visual que ya estaba montado arriba.
   ========================================================================== */

/* --- 1. Foco visible. No habia ninguna regla de foco en toda la hoja, asi que
   quien navega con teclado dependia del contorno por defecto del navegador,
   invisible sobre el video del hero y sobre los botones sin borde. --- */
:where(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--forest);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Sobre fondo oscuro o sobre el video el verde no se ve: se invierte a crema. */
.hero :where(a, button):focus-visible,
.footer :where(a, button):focus-visible,
.sunset :where(a, button):focus-visible,
.pullquote :where(a, button):focus-visible,
.menu-section--forest :where(a, button):focus-visible,
.menu-section--terra :where(a, button):focus-visible,
.nav:not(.scrolled) :where(a, button):focus-visible,
.fab:focus-visible {
    outline-color: var(--cream);
}
/* Nunca quitar el contorno sin sustituto: si algo lo apaga, esto lo repone. */
:where(a, button):focus-visible { outline-style: solid; }

/* --- 2. Salto al contenido. Cinco enlaces de menu por delante del contenido en
   las dos paginas; con teclado eso son cinco tabulaciones en cada carga. --- */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    background: var(--forest);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 28px;
    transition: transform 200ms var(--ease);
}
.skip-link:focus-visible {
    transform: translate(-50%, 0);
    outline-offset: -6px;
    outline-color: var(--cream);
}

/* --- 3. Area tactil del boton de menu. El dibujo mide 32x24 px; el minimo
   aceptable para el dedo es 44x44. Se agranda la zona sensible con un
   pseudoelemento y el dibujo se queda exactamente igual. --- */
.nav__burger { position: relative; }
.nav__burger::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* --- 4. Movimiento reducido. La regla que ya existia solo apagaba el video del
   hero; las apariciones al hacer scroll, el marquee y los desplazamientos al
   pasar el raton seguian corriendo. --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Sin transicion, lo que aparece al hacer scroll tiene que nacer visible
       o la pagina se queda en blanco. */
    .reveal { opacity: 1 !important; transform: none !important; }
    .btn:hover, .sig:hover, .dl-card:hover, .fab:hover, .xp-card:hover {
        transform: none !important;
    }
}

/* --- 5. Sin JavaScript. Los bloques .reveal nacen con opacity:0 y solo los
   enciende el observador; si el script no carga, la pagina entera queda
   invisible. Esto la deja legible pase lo que pase. --- */
.no-js .reveal { opacity: 1; transform: none; }

/* --- 6. will-change permanente en todos los botones mantiene una capa de
   composicion reservada aunque no haya animacion. Solo mientras se toca. --- */
.btn { will-change: auto; }
.btn:hover, .btn:focus-visible { will-change: transform; }

/* --- 7. El boton "Book a Table" de la barra es terracota. Sobre el hero de la
   carta, que tambien es terracota, el contraste de la forma es 1,0:1 — el boton
   desaparece y solo se lee el texto suelto. Un filo crema (3,3:1, por encima del
   minimo de 3:1 que pide la WCAG para bordes de control) le devuelve la forma
   sin tocar el relleno de marca. Al hacer scroll la barra se vuelve crema y el
   filo sobra, asi que solo se aplica en la barra transparente. --- */
.nav:not(.scrolled) .nav__cta {
    box-shadow: inset 0 0 0 1px rgba(244, 235, 228, 0.75);
}

/* --- 8. El boton flotante de WhatsApp caia justo encima de "View the Menu" en
   movil: dos zonas tactiles superpuestas. Se despeja el hueco por debajo de los
   botones del hero y se respeta el area segura del iPhone. --- */
.fab {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: calc(24px + env(safe-area-inset-right, 0px));
}
@media (max-width: 768px) {
    .hero__ctas { margin-bottom: 104px; }
}

/* ==========================================================================
   GALERIA — 14/08/2026
   Nueve fotografias reales del local (las mando Juanra el 14/08/2026), de
   1170 px de ancho en origen. Las celdas van en 3:4 y la foto se encaja con
   object-fit: cover: las fotos son ~0,76 de proporcion, asi que el recorte es
   casi nulo y ninguna queda deformada.
   ========================================================================== */
.gallery {
    background: var(--cream-warm);
}
.gallery__head {
    max-width: 720px;
    margin: 0 auto clamp(48px, 6vw, 80px);
    text-align: center;
}
.gallery__head h2 {
    font-size: clamp(40px, 5.5vw, 72px);
    margin: 18px 0 22px;
}
.gallery__head h2 em {
    font-style: italic;
    color: var(--terra-display);
}
.gallery__head p {
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto;
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.shot {
    margin: 0;
    overflow: hidden;
    background: var(--cream);
}
.shot img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 700ms var(--ease);
}
.shot:hover img { transform: scale(1.04); }

/* Las fotos vienen ya casi en 3:4 (900x1100-1190), asi que el recorte es
   minimo. Solo dos piden anclaje: la del mar tiene mucho cielo arriba y el
   edificio abajo, y la de la calavera se descentra si se recorta por el medio. */
.shot img[src*="desde-el-mar"] { object-position: 50% 100%; }
.shot img[src*="calavera-muro"] { object-position: 50% 40%; }

@media (max-width: 900px) {
    .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 520px) {
    .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .gallery__head p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .shot:hover img { transform: none !important; }
}

/* ==========================================================================
   FOTOGRAFIA POR TODA LA PAGINA — 14/08/2026
   Antes las fotos vivian solo en la rejilla de la galeria y el resto de la
   home eran bloques de color plano. Ahora cada seccion que tiene algo que
   ensenar lo ensena, y la galeria se queda como cierre, no como el unico
   sitio donde hay imagen.
   ========================================================================== */

/* --- Banda de apertura: la primera vez que se ve el sitio entero --- */
.establishing {
    background: var(--cream);
    padding-top: 0;
    padding-bottom: clamp(60px, 9vw, 120px);
}
.establishing__frame { margin: 0; }
.establishing__frame img {
    width: 100%;
    aspect-ratio: 1170 / 620;
    object-fit: cover;
    display: block;
}
.establishing__frame figcaption {
    margin-top: 18px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--terra-text);
    text-indent: 0.2em;
}

/* --- La calavera del muro, junto al texto que la explica.
   La columna izquierda solo llevaba el titular y se quedaba corta de alto
   frente a los cuatro valores de la derecha; la foto la equilibra. --- */
.story__photo {
    margin: clamp(32px, 4vw, 48px) 0 0;
    overflow: hidden;
}
.story__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 42%;
    display: block;
}

/* --- Los platos: una foto ancha entre el titular y la lista.
   Va a sangre completa contra el ancho de la pagina para cortar el bloque
   de crema, que era lo que hacia que la seccion se leyera plana. --- */
.signatures__photo {
    margin: 0 0 clamp(48px, 6vw, 72px);
    overflow: hidden;
}
.signatures__photo img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: 50% 62%;
    display: block;
}

/* --- La barra: donde habia un PNG de la calavera sobre terracota ahora hay
   una copa de verdad, servida en el vaso calavera de la casa. --- */
.bar-program__visual--photo { padding: 0; background: var(--forest); }
.bar-program__visual--photo img {
    width: 100%;
    height: 100%;
    /* el max-width: 65%, la opacidad y la drop-shadow son de cuando aqui habia
       un PNG de la calavera flotando; sobre una foto hay que anularlos */
    max-width: none;
    opacity: 1;
    filter: none;
    object-fit: cover;
    object-position: 50% 45%;
    display: block;
}

/* --- Como llegar: la entrada real, con la pizarra y el pez verde.
   La seccion era texto centrado; pasa a dos columnas con la foto a la
   izquierda para que se reconozca el sitio al llegar en tuk-tuk. --- */
.hours { text-align: left; }
.hours__lead {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    margin-bottom: clamp(56px, 7vw, 88px);
}
.hours__photo { margin: 0; overflow: hidden; }
.hours__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 55%;
    display: block;
}
.hours__title { margin: 18px 0 24px; }
.hours__title em { font-style: italic; color: var(--terra); }
.hours__note {
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 46ch;
}
.hours__grid { text-align: left; }

/* --- Galeria: cinco fotos. La primera ocupa dos columnas en 3:2, que da
   exactamente la misma altura que una celda 3:4 de una columna, asi que las
   dos filas cuadran sin huecos. --- */
.shot--wide { grid-column: span 2; }
/* Cuando esta sola en su fila (2 columnas, pantallas estrechas) manda su propia
   proporcion. */
.shot--wide img { aspect-ratio: 16 / 10; }
/* En 3 columnas comparte fila con una celda normal, y el alto lo tiene que
   poner esa vecina. Con aspect-ratio o con height:100% la imagen se marca su
   propio alto y arrastra la fila (salian 1.071 px frente a 532). Sacandola del
   flujo, la figura no tiene contenido que la estire y hereda el alto de fila. */
@media (min-width: 901px) {
    .shot--wide { position: relative; }
    .shot--wide img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }
}

@media (max-width: 900px) {
    .hours__lead { grid-template-columns: 1fr; gap: 32px; }
    .hours__photo img { aspect-ratio: 16 / 10; }
    .signatures__photo img { aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
    .shot--wide { grid-column: span 2; }
    .shot--wide img { aspect-ratio: 4 / 3; }
    .establishing__frame img { aspect-ratio: 4 / 3; }
    .signatures__photo img { aspect-ratio: 4 / 3; }
}




/* ==========================================================================
   CONTRASTE POR CONTEXTO DE FONDO — 14/08/2026
   La pasada anterior mando `.eyebrow` y `.value-name` a --terra-text dando por
   hecho que iban sobre crema; en las secciones verdes daban 1,05:1, invisible.
   Arreglarlo seccion a seccion era un juego del topo: aqui se redefinen los dos
   tokens de texto en cada fondo oscuro y, como heredan, queda cubierto todo lo
   que hay ahora y lo que se anada despues.
   ========================================================================== */

/* Fondos verdes: sobre --forest ninguna terracota llega a 4,5:1 (la mas clara
   que lo consigue ya es crema), asi que el texto pequeno va en crema calido y
   el acento solo sobrevive en los titulares grandes, que solo piden 3:1. */
.story,
.bar-program,
.menu-section--forest,
.footer {
    --terra-text: var(--cream-warm);      /* 4,81:1 sobre --forest */
    --terra-display: var(--terra-on-forest); /* 3,59:1, solo titulares */
}

/* Fondo crema calido: la terracota de marca se queda en 2,82:1 incluso a 56 px. */
.gallery,
.downloads,
.menu-cta {
    --terra-display: var(--terra-deep);   /* 4,58:1 sobre --cream-warm */
}

/* ==========================================================================
   HERO CON FOTOGRAFIA — 14/08/2026
   Alternativa al montaje de video. El velo no es decoracion: sobre esta foto
   el crema del claim da 1,64:1 a pelo. Midiendo el percentil 99 de la banda
   donde cae el texto, hace falta un 45 % de negro para llegar a 4,79:1; se
   deja en 50 % en esa franja, con margen, y mas claro arriba para no apagar
   el cielo ni las palmeras.
   ========================================================================== */
.hero.has-photo { background: var(--forest-deep); }
.hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 62%;
    z-index: 0;
}
.has-photo .hero__bg {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.46) 0%,
        rgba(0, 0, 0, 0.28) 20%,
        rgba(0, 0, 0, 0.50) 46%,
        rgba(0, 0, 0, 0.58) 100%);
    z-index: 1;
}
.has-photo .hero__skull { opacity: 0.92; }
.has-photo .hero__brand,
.has-photo .hero__city {
    color: var(--cream);
    text-shadow: 0 6px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
}
.has-photo .hero__claim {
    color: var(--cream);
    text-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
/* En vertical el encuadre sube: interesa el edificio, no el agua del pie.
   Y el claim cae sobre una zona mas clara que en escritorio: medido en el
   render daba 4,12:1 en el pixel peor, por debajo del 4,5 que pide. Cinco
   puntos mas de velo en esa franja lo dejan con margen. */
@media (max-width: 768px) {
    .hero__photo { object-position: 50% 52%; }
    .has-photo .hero__bg {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.32) 20%,
            rgba(0, 0, 0, 0.58) 46%,
            rgba(0, 0, 0, 0.64) 100%);
    }
}

/* --- Pagina 404 --- */
.notfound {
    background: var(--cream);
    min-height: 78vh;
    display: flex;
    align-items: center;
    text-align: center;
    padding-top: clamp(120px, 16vw, 200px);
}
.notfound__skull {
    width: clamp(90px, 12vw, 140px);
    height: auto;
    margin: 0 auto clamp(28px, 4vw, 44px);
    opacity: 0.85;
}
.notfound__title {
    font-size: clamp(34px, 5.5vw, 68px);
    max-width: 16ch;
    margin: 0 auto 24px;
}
.notfound__body {
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 52ch;
    margin: 0 auto clamp(36px, 5vw, 52px);
}
.notfound__ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- El indicador "Scroll" caia justo encima del boton flotante de WhatsApp
   (58 px a 24 px del borde): se solapaban de y 818 a 872 en una ventana de
   900. Se sube por encima de la zona del boton y se le da su propio hueco.
   Corrige un solape que venia de antes, no del hero con foto. --- */
.hero__scroll {
    bottom: calc(24px + 58px + 20px + env(safe-area-inset-bottom, 0px));
}