/* ============================================================
   LA BRISA · SALOU
   Tropical-beach aesthetic · warm sand + breeze teal
   ============================================================ */

:root{
  /* Palette */
  --cream:      #FBF6ED;
  --sand:       #F1E7D6;
  --sand-deep:  #E7D8BF;
  --tan:        #C9A877;
  --tan-deep:   #B08E5B;
  --brown:      #5E4B33;
  --brown-deep: #3C3020;
  --ink:        #2C2418;
  --teal:       #5EBDB2;
  --teal-deep:  #3E9A90;
  --muted:      #8A7A63;
  --line:       rgba(94,75,51,.16);

  --shadow:     0 18px 50px -24px rgba(60,48,32,.45);
  --radius:     18px;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;
  --script:"Qwigley", cursive;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.container{ width:min(1140px, 90vw); margin-inline:auto; }

/* ---------- Typography helpers ---------- */
.kicker{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--tan-deep); font-weight:500; margin-bottom:1rem;
}
.kicker--light{ color:var(--teal); }

.h2{
  font-family:var(--serif);
  font-size:clamp(2rem, 4.5vw, 3.1rem);
  font-weight:500; line-height:1.05; color:var(--brown-deep);
  letter-spacing:.01em;
}
.h2--light{ color:var(--cream); }

.brand__script{ font-family:var(--script); }

.section{ padding:clamp(4.5rem, 9vw, 8rem) 0; }
.section--sand{ background:var(--sand); }
.section--dark{ background:var(--brown-deep); }
.section__head{ text-align:center; max-width:640px; margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.section__sub{ color:var(--muted); font-size:1.05rem; margin-top:.6rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:500; font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.95rem 1.9rem; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--brown-deep);
  background:var(--brown-deep); color:var(--cream);
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); background:var(--teal-deep); border-color:var(--teal-deep); box-shadow:0 12px 28px -14px rgba(62,154,144,.7); }
.btn--ghost{ background:transparent; color:var(--brown-deep); }
.btn--ghost:hover{ background:var(--brown-deep); color:var(--cream); border-color:var(--brown-deep); }
.btn--light{ background:var(--teal); border-color:var(--teal); color:#0c2b28; }
.btn--light:hover{ background:var(--cream); border-color:var(--cream); color:var(--brown-deep); }
.btn--ghost-light{ background:transparent; color:var(--cream); border-color:rgba(251,246,237,.5); }
.btn--ghost-light:hover{ background:var(--cream); color:var(--brown-deep); border-color:var(--cream); }
.btn--small{ padding:.6rem 1.2rem; font-size:.72rem; }

.link{ color:var(--teal-deep); border-bottom:1px solid rgba(62,154,144,.4); padding-bottom:1px; }
.link:hover{ color:var(--brown-deep); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:.55rem 0;
}
.nav__inner{
  width:min(1140px,90vw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav.is-scrolled{ background:rgba(251,246,237,.92); backdrop-filter:blur(10px); box-shadow:0 4px 24px -16px rgba(60,48,32,.5); }

.brand{ display:flex; align-items:center; gap:.55rem; color:var(--brown-deep); transition:color .3s; }
.brand__mark{ width:38px; height:auto; flex:none; margin-top:-2px; }
.brand__text{ display:flex; flex-direction:column; line-height:.78; }
.brand__script{ font-size:2.7rem; white-space:nowrap; margin-top:-.1em; }
.brand__sub{ font-size:.56rem; letter-spacing:.42em; font-weight:500; margin-top:-2px; padding-left:.2em; }
.nav:not(.is-scrolled) .brand{ color:var(--brown-deep); }

.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links > a{
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400;
  color:var(--brown); position:relative; padding-bottom:2px;
}
.nav__links > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--teal-deep); transition:width .25s ease;
}
.nav__links > a:not(.btn):hover::after{ width:100%; }
.nav__scrim{ display:none; }

.nav__right{ display:flex; align-items:center; gap:1rem; }
.lang{ display:flex; gap:.15rem; border:1px solid var(--line); border-radius:999px; padding:.2rem; background:rgba(255,255,255,.4); }
.lang__btn{
  border:0; background:transparent; cursor:pointer; font-family:var(--sans);
  font-size:.72rem; font-weight:500; letter-spacing:.06em; color:var(--brown);
  padding:.32rem .6rem; border-radius:999px; transition:background .2s, color .2s;
}
.lang__btn:hover{ color:var(--brown-deep); }
.lang__btn.is-active{ background:var(--brown-deep); color:var(--cream); }

.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.35rem; }
.nav__burger span{ width:24px; height:2px; background:var(--brown-deep); border-radius:2px; transition:.3s; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  text-align:center; overflow:hidden; padding:7rem 1.5rem 4rem;
  background:
    radial-gradient(120% 90% at 50% -10%, #FCF8F0 0%, var(--sand) 48%, var(--sand-deep) 100%);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(to top, rgba(201,168,119,.28), transparent);
  pointer-events:none;
}
.hero__palms{ position:absolute; inset:0; pointer-events:none; }
.palm{ position:absolute; bottom:0; color:var(--tan); opacity:.55; width:clamp(140px,18vw,260px); }
.palm--l{ left:-1.5rem; transform:scaleX(-1) rotate(-4deg); transform-origin:bottom; }
.palm--r{ right:-1.5rem; transform:rotate(-2deg); transform-origin:bottom; }

.hero__content{ position:relative; z-index:2; max-width:680px; animation:rise 1s ease both; }
.hero__breeze{ width:clamp(150px, 24vw, 230px); height:auto; margin:0 auto .2rem; filter:drop-shadow(0 6px 16px rgba(94,189,178,.28)); animation:sway 7s ease-in-out infinite; }
.hero__logo{ font-family:var(--script); font-size:clamp(5.6rem, 17vw, 11rem); font-weight:400; color:var(--brown-deep); line-height:.78; }

@keyframes sway{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.hero__salou{ font-family:var(--sans); letter-spacing:.55em; font-size:clamp(.8rem,2vw,1rem); color:var(--tan-deep); font-weight:500; margin:.4rem 0 1.6rem; padding-left:.5em; }
.hero__tagline{ font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,3.4vw,2rem); color:var(--teal-deep); margin-bottom:.6rem; }
.hero__sub{ color:var(--muted); font-size:1.08rem; max-width:30ch; margin:0 auto 2.2rem; }
.hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.hero__scroll{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); width:24px; height:40px; border:2px solid var(--tan-deep); border-radius:14px; opacity:.6; z-index:2; }
.hero__scroll span{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--tan-deep); border-radius:2px; animation:scroll 1.6s ease-in-out infinite; }

@keyframes scroll{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,12px)} 100%{opacity:0} }
@keyframes rise{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.about__body{ color:var(--muted); font-size:1.12rem; margin-top:1.4rem; }
.about__cards{ display:grid; gap:1.1rem; }
.fcard{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.6rem; box-shadow:0 10px 30px -24px rgba(60,48,32,.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.fcard__icon{ font-size:1.7rem; display:block; margin-bottom:.4rem; }
.fcard h3{ font-family:var(--serif); font-size:1.45rem; font-weight:600; color:var(--brown-deep); }
.fcard p{ color:var(--muted); font-size:.98rem; margin-top:.2rem; }

/* ============================================================
   MENU
   ============================================================ */
.menu__tabs{ display:flex; justify-content:center; gap:.4rem; margin-bottom:3rem; }
.menu__tab{
  font-family:var(--sans); font-size:.82rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:.7rem 1.8rem; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--brown-deep); background:transparent; color:var(--brown-deep);
  transition:background .25s ease, color .25s ease;
}
.menu__tab.is-active{ background:var(--brown-deep); color:var(--cream); }

.menu__panel{ animation:fade .4s ease both; }
.menu__panel.is-hidden{ display:none; }
@keyframes fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.menu__cols{ columns:2; column-gap:clamp(2rem,5vw,4.5rem); }
.mcat{ break-inside:avoid; margin-bottom:2.6rem; }
.mcat__title{
  font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--brown-deep);
  display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem;
}
.mcat__title::after{ content:""; flex:1; height:1px; background:var(--line); }

.mitem{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.9rem; }
.mitem__main{ flex:1; min-width:0; }
.mitem__name{ font-size:1.02rem; font-weight:400; color:var(--ink); }
.mitem__desc{ font-size:.86rem; color:var(--muted); line-height:1.45; margin-top:.1rem; }
.mitem__dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); min-width:14px; }
.mitem__price{ font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--tan-deep); white-space:nowrap; }

.mnote{ font-size:.84rem; color:var(--muted); font-style:italic; margin:-.4rem 0 1.4rem; padding-left:.1rem; }

.menu__foot{
  text-align:center; margin-top:1.5rem; padding-top:1.8rem; border-top:1px solid var(--line);
  font-size:.95rem; letter-spacing:.04em; color:var(--brown);
}

/* ============================================================
   VISIT
   ============================================================ */
.visit__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.visit__block{ margin-top:1.8rem; }
.visit__block h3{ font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--brown-deep); margin-bottom:.25rem; }
.visit__days{ color:var(--ink); }
.visit__hours{ color:var(--muted); }
.visit__closed{ color:var(--tan-deep); font-size:.9rem; letter-spacing:.04em; }
.visit__addr{ color:var(--muted); line-height:1.6; }
.visit .btn{ margin-top:2rem; }

.visit__map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.visit__map iframe{ width:100%; height:430px; border:0; filter:saturate(.9) contrast(1.02); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 80% 0%, rgba(94,189,178,.18), transparent 55%);
}
.contact__inner{ position:relative; text-align:center; max-width:640px; }
.contact__sub{ color:rgba(251,246,237,.72); font-size:1.08rem; margin:.7rem auto 2.2rem; }
.contact__btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:rgba(251,246,237,.7); padding:2.6rem 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.footer__brand{ display:flex; flex-direction:column; }
.footer__brand .brand__script{ font-size:2.8rem; color:var(--cream); line-height:1; }
.footer__tag{ font-family:var(--serif); font-style:italic; color:var(--teal); font-size:.95rem; }
.footer__meta{ display:flex; flex-direction:column; text-align:right; gap:.2rem; font-size:.82rem; letter-spacing:.04em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .about__grid, .visit__grid{ grid-template-columns:1fr; }
  .menu__cols{ columns:1; }
  .visit__map{ order:-1; }
  .visit__map iframe{ height:300px; }

  .nav__burger{ display:flex; }
  .nav__inner{ position:relative; z-index:56; }   /* keep top bar above the drawer */
  /* backdrop-filter would make .nav the containing block of the fixed drawer,
     breaking its full height on scroll — disable it while the menu is open */
  .nav.is-open{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(82vw,330px);
    background:var(--cream); flex-direction:column; align-items:flex-start;
    gap:1.5rem; padding:6.5rem 2rem 2rem;
    border-left:1px solid var(--line);
    box-shadow:-26px 0 70px -22px rgba(44,36,24,.55);
    transform:translateX(100%); transition:transform .35s ease; z-index:55;
  }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links > a{ font-size:1.05rem; color:var(--brown-deep); }

  .nav__scrim{
    display:block; position:fixed; inset:0; z-index:54;
    background:rgba(44,36,24,.55);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s ease, visibility .35s ease;
  }
  .nav.is-open ~ .nav__scrim{ opacity:1; visibility:visible; pointer-events:auto; }
}

/* bloquea el scroll del fondo mientras el menú móvil está abierto */
html.menu-open{ overflow:hidden; }

@media (max-width:520px){
  .brand__mark{ width:30px; }
  .brand__script{ font-size:2.3rem; }
  .brand__sub{ font-size:.5rem; }
  .footer__inner{ flex-direction:column; text-align:center; }
  .footer__meta{ text-align:center; }
  .btn{ padding:.85rem 1.5rem; }
  .lang__btn{ padding:.3rem .45rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
}