/* ============================================
   TULUMB CAFÉ & RESORT — HOMEPAGE STYLESHEET
   ============================================ */
:root{
  --ivory:#F8F5EE;--sand:#DCC9A3;--taupe:#B79D7C;
  --sage:#6D7A63;--charcoal:#2E2E2E;--bronze:#8A6A44;
  --font-h:"Playfair Display",Georgia,serif;
  --font-sub:"Cormorant Garamond",Georgia,serif;
  --font-b:"Inter",Arial,sans-serif;
  --sh:0 32px 80px rgba(46,46,46,.14);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--ivory);color:var(--charcoal);font-family:var(--font-b);line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;border:0;outline:0}
::selection{background:var(--bronze);color:var(--ivory)}

/* UTILITY */
.wrap{width:min(1180px,100% - 40px);margin:0 auto}
.narrow{max-width:880px;margin:0 auto}
.full{grid-column:1/-1}
.center-head{text-align:center;margin-bottom:60px}

/* ANIMATION */
.anim-in{opacity:0;transform:perspective(1200px) rotateX(3deg) translateY(32px) scale(0.975);transform-origin:top center;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim-in.visible{opacity:1;transform:perspective(1200px) rotateX(0deg) translateY(0) scale(1)}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4{font-family:var(--font-h);font-weight:500;line-height:1.04}
h1{font-size:clamp(3.2rem,10vw,8rem);letter-spacing:-.045em}
h2{font-size:clamp(2.6rem,6vw,5.2rem);letter-spacing:-.035em}
h3{font-size:1.6rem;letter-spacing:-.01em}
h4{font-size:.82rem;font-family:var(--font-b);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:16px}
.kicker{margin-bottom:14px;font-size:.76rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(248,245,238,.8)}
.kicker--dark{color:var(--bronze)}.kicker--warm{color:var(--taupe)}
.lead{font-family:var(--font-sub);font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.45;margin:12px 0 20px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:15px 28px;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:all .25s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn--fill{background:var(--ivory);color:var(--charcoal)}
.btn--fill:hover{background:var(--bronze);color:var(--ivory);border-color:var(--bronze)}
.btn--bronze{background:var(--bronze);color:var(--ivory)}
.btn--bronze:hover{background:var(--ivory);color:var(--charcoal)}
.btn--ghost{border-color:rgba(248,245,238,.7);color:var(--ivory)}
.btn--ghost:hover{background:rgba(248,245,238,.12)}
.btn--ghost-light{border-color:rgba(248,245,238,.3);color:var(--ivory)}
.btn--ghost-light:hover{background:rgba(248,245,238,.1)}
.btn--dark{background:var(--charcoal);color:var(--ivory)}
.btn--dark:hover{background:var(--bronze);color:var(--ivory)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.link-arrow{display:inline-block;margin-top:22px;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid rgba(46,46,46,.25);transition:border-color .2s}
.link-arrow:hover{border-color:var(--bronze);color:var(--bronze)}

/* ===== NAVBAR ===== */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:20px 0;transition:background .35s,padding .35s,box-shadow .35s}
.nav.scrolled{padding:12px 0;background:rgba(248,245,238,.94);backdrop-filter:blur(20px);box-shadow:0 8px 30px rgba(46,46,46,.07)}
.nav__inner{width:min(1280px,100% - 36px);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;flex-direction:column;line-height:1;color:var(--ivory);transition:color .3s}
.nav.scrolled .logo,.logo--footer{color:var(--charcoal)}
.logo--footer{color:var(--ivory)!important;margin-bottom:18px}
.logo__word{font-family:var(--font-h);font-size:clamp(1.8rem,3.8vw,2.6rem);font-weight:600;letter-spacing:.02em;text-transform:lowercase}
.logo__tag{margin-top:6px;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,245,238,.9);transition:color .2s}
.nav.scrolled .nav__links a{color:rgba(46,46,46,.78)}
.nav__links a:hover{color:var(--bronze)}
.nav__cta{border:1px solid currentColor!important;padding:10px 18px!important}
.hamburger{display:none;width:42px;height:42px;background:0;cursor:pointer;position:relative;z-index:5}
.hamburger span{display:block;width:26px;height:2px;margin:5px auto;background:var(--ivory);transition:all .3s}
.nav.scrolled .hamburger span,.nav.open .hamburger span{background:var(--charcoal)}
.nav.open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .hamburger span:nth-child(2){opacity:0}
.nav.open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:-14% 0;background:url('https://images.pexels.com/photos/8484851/pexels-photo-8484851.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=2200&h=1400') center/cover;will-change:transform}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.52))}
.hero__content{position:relative;z-index:2;width:min(960px,100% - 36px);text-align:center;color:var(--ivory);padding-top:80px}
.hero__sub{width:min(700px,100%);margin:24px auto 36px;font-family:var(--font-sub);font-size:clamp(1.22rem,2.4vw,1.7rem);color:rgba(248,245,238,.88)}
.hero__btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(248,245,238,.65);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase}
.scroll-hint i{width:1px;height:46px;background:rgba(248,245,238,.5);animation:scrollPulse 1.6s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ===== SECTIONS ===== */
.sec{padding:clamp(60px,8vw,110px) 0}
.sec--ivory{background:var(--ivory)}
.sec--sand{background:rgba(220,201,163,.18)}
.sec--dark{background:var(--charcoal);color:var(--ivory)}
.sec--dark .copy p:not(.kicker){color:rgba(248,245,238,.76)}
.sec__head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:36px}

/* Grid */
.grid-2{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.grid-2--rev{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
.copy p:not(.kicker){color:rgba(46,46,46,.64);font-weight:300}

/* About — Arch Image */
.arch-img{position:relative;width:min(420px,100%);margin-left:auto}
.arch-img::before{content:"";position:absolute;width:180px;height:180px;left:-38px;bottom:-38px;border-radius:50%;background:rgba(183,157,124,.2);z-index:-1}
.arch-img::after{content:"";position:absolute;width:120px;height:120px;top:-32px;right:-32px;border-radius:50%;border:1px solid rgba(138,106,68,.28);z-index:-1}
.arch-img img{aspect-ratio:4/5;width:100%;object-fit:cover;border-radius:230px 230px 3px 3px;box-shadow:var(--sh)}

/* Experience Grid */
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.exp__img-wrap{overflow:hidden;margin-bottom:20px}
.exp__img-wrap img{aspect-ratio:3/4;width:100%;object-fit:cover;transition:transform .9s var(--ease),filter .4s}
.exp:hover .exp__img-wrap img{transform:scale(1.04);filter:brightness(.92)}
.exp h3{margin-bottom:8px}.exp p{color:rgba(46,46,46,.58);font-size:.92rem;font-weight:300}

/* Dining */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin:28px 0 36px}
.feat-grid span{padding-bottom:11px;border-bottom:1px solid rgba(248,245,238,.14);font-family:var(--font-sub);font-size:1.3rem;color:rgba(248,245,238,.8)}
.dining-img img{width:100%;min-height:600px;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,.22)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:12px;margin-top:36px}
.gallery__item{margin:0;overflow:hidden}
.gallery__item--wide{grid-column:span 2}
.gallery__item--tall{grid-row:span 2}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.gallery__item:hover img{transform:scale(1.09);filter:brightness(.78)}

/* Events */
.event-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px;text-align:left}
.event-col{padding:26px 0 0;border-top:1px solid rgba(138,106,68,.22)}
.event-col p{color:rgba(46,46,46,.6);font-weight:300;margin:8px 0}

/* Testimonials */
.testimonials{padding:clamp(60px,8vw,100px) 0;overflow:hidden}
.stars{color:var(--bronze);font-size:1.1rem;letter-spacing:6px;margin-bottom:28px}
.testi-slider{position:relative;min-height:260px}
.testi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transform:translateX(30px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.testi.active{opacity:1;transform:translateX(0);pointer-events:auto}
.testi p{max-width:820px;font-family:var(--font-h);font-size:clamp(1.8rem,3.6vw,3.4rem);font-style:italic;line-height:1.2;margin-bottom:26px}
.testi cite{color:var(--taupe);font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.testi-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}
.testi-nav button{background:0;border:1px solid rgba(248,245,238,.2);color:var(--ivory);padding:10px 16px;cursor:pointer;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s}
.testi-nav button:hover{border-color:var(--bronze);color:var(--bronze)}
.testi-dots{display:flex;gap:8px}
.testi-dots span{width:8px;height:8px;border-radius:50%;background:rgba(248,245,238,.2);cursor:pointer;transition:background .3s}
.testi-dots span.active{background:var(--bronze)}

/* Location */
.info-list{list-style:none;padding:0}
.info-list li{margin:16px 0;padding-bottom:16px;border-bottom:1px solid rgba(46,46,46,.1);color:rgba(46,46,46,.64)}
.info-list strong{color:var(--charcoal)}
.map-box{height:500px;overflow:hidden;box-shadow:var(--sh);filter:grayscale(1) contrast(1.1)}
.map-box iframe{width:100%;height:100%;border:0}

/* Booking */
.book-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;padding:clamp(24px,5vw,50px);background:var(--ivory);box-shadow:var(--sh)}
.book-form label{display:grid;gap:6px}
.book-form span{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(46,46,46,.55)}
.book-form input,.book-form select,.book-form textarea{width:100%;border-bottom:1px solid rgba(46,46,46,.16);padding:10px 0;background:0;color:var(--charcoal);transition:border-color .2s}
.book-form input:focus,.book-form select:focus,.book-form textarea:focus{border-color:var(--bronze)}
.form-msg{grid-column:1/-1;min-height:22px;color:var(--sage);font-weight:600;font-size:.9rem}

/* Footer */
.footer{background:var(--charcoal);color:var(--ivory);padding:60px 0 28px}
.footer__grid{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr;gap:40px}
.footer p,.footer a{color:rgba(248,245,238,.6);font-size:.9rem}
.footer a:hover{color:var(--bronze)}
.footer__grid>div:not(:first-child) a{display:block;margin:7px 0}
.nl-form{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid rgba(248,245,238,.2)}
.nl-form input{background:0;color:var(--ivory);padding:10px 0;border:0}
.nl-form button{background:0;color:var(--taupe);cursor:pointer;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:0}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;margin-top:50px;padding-top:22px;border-top:1px solid rgba(248,245,238,.1);font-size:.78rem}
.social{display:flex;gap:18px}

/* WhatsApp */
.wa-btn{position:fixed;right:22px;bottom:22px;z-index:55;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 14px 38px rgba(0,0,0,.24);transition:transform .25s}
.wa-btn:hover{transform:scale(1.12)}


/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hamburger{display:block}
  .nav__links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:0;background:rgba(248,245,238,.98);backdrop-filter:blur(20px);transform:translateX(100%);transition:transform .35s var(--ease);z-index:4}
  .nav.open .nav__links{transform:translateX(0)}
  .nav__links a{color:var(--charcoal)!important;font-size:1.6rem;font-family:var(--font-h);letter-spacing:.04em;text-transform:none;padding:14px 0}
  .nav__cta{margin-top:18px}
  .grid-2,.grid-2--rev{grid-template-columns:1fr}
  .sec__head{flex-direction:column;align-items:flex-start}
  .exp-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .event-cols,.footer__grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero__btns,.btn-row{flex-direction:column}.btn{width:100%}
  .sec{padding:68px 0}
  .exp-grid,.feat-grid,.book-form{grid-template-columns:1fr}
  .gallery{grid-auto-rows:160px;gap:6px}
  .gallery__item--wide,.gallery__item--tall{grid-column:span 1;grid-row:span 1}
  .dining-img img,.map-box{min-height:0;height:380px}
  .footer__bottom{flex-direction:column}
  .logo__tag{display:none}
}