@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Italiana&display=swap');

:root{
  --bg:#17211e;
  --bg2:#1d2925;
  --bg3:#24312c;
  --ivory:#f2eee5;
  --muted:#b5b9b1;
  --gold:#c4a66e;
  --line:rgba(242,238,229,.16);
  --serif:'Italiana',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans);font-weight:300;line-height:1.65;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--bg)}

.site-header{
 position:fixed;z-index:1000;top:0;left:0;width:100%;
 height:88px;padding:14px clamp(20px,4vw,62px);
 display:flex;align-items:center;justify-content:space-between;
 color:#fff;background:rgba(16,24,21,.34);
 border-bottom:1px solid rgba(255,255,255,.08);
 backdrop-filter:blur(12px);
 transition:background .35s ease,box-shadow .35s ease;
}
.site-header.scrolled{background:rgba(23,33,30,.93);box-shadow:0 12px 40px rgba(0,0,0,.14)}
.brand img{width:142px;height:58px;object-fit:contain}
.brand .logo-dark{display:none}
.nav{display:flex;gap:clamp(20px,2.8vw,42px);align-items:center}
.nav a{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.9;position:relative;padding:8px 0}
.nav a:after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--gold);transition:.3s}
.nav a:hover:after,.nav a.active:after{width:100%}
.menu-btn{display:none;border:0;background:transparent;color:#fff;width:48px;height:48px;padding:8px}
.menu-btn span{display:block;height:1px;background:currentColor;margin:7px 0;transition:.3s}
.mobile-menu{display:none}

.hero{
 min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#111;
}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.hero-slide.active{opacity:1}
.hero-slide img{height:100%;object-fit:cover;object-position:center}
.hero-slide:after{
 content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(10,16,14,.68) 0%,rgba(10,16,14,.24) 52%,rgba(10,16,14,.12) 100%),
 linear-gradient(0deg,rgba(10,16,14,.62),transparent 55%);
}
.hero-content{position:relative;z-index:3;width:100%;max-width:1350px;margin:auto;padding:150px clamp(22px,7vw,110px) 100px}
.hero-kicker{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:#ddc38e;margin-bottom:22px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(55px,8vw,108px);line-height:.91;letter-spacing:-.025em;max-width:850px;margin:0}
.hero h1 em{font-style:italic;color:#d9bd86}
.hero-description{max-width:520px;color:rgba(250,247,239,.86);font-size:15px;line-height:1.85;margin:30px 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:50px;
 padding:0 23px;border:1px solid rgba(242,238,229,.55);background:transparent;color:var(--ivory);
 font-size:10px;letter-spacing:.17em;text-transform:uppercase;transition:.35s ease;
}
.btn:hover{background:var(--ivory);border-color:var(--ivory);color:var(--bg);transform:translateY(-2px)}
.btn.gold{border-color:var(--gold);color:#e1c58d}
.btn.gold:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.season-chip{
 display:inline-flex;gap:10px;align-items:center;color:#e0c691;font-size:9px;
 letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px
}
.season-chip:before{content:"";width:28px;height:1px;background:var(--gold)}
.hero-progress{
 position:absolute;z-index:5;right:clamp(20px,5vw,75px);bottom:42px;
 display:flex;gap:8px;align-items:center;color:#fff
}
.hero-progress button{border:0;padding:0;width:35px;height:18px;background:transparent;cursor:pointer;position:relative}
.hero-progress button:before{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:rgba(255,255,255,.4)}
.hero-progress button.active:before{background:#fff}
.hero-counter{font-size:9px;letter-spacing:.18em;margin-left:8px}
.scroll-label{position:absolute;z-index:4;left:clamp(20px,5vw,75px);bottom:38px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.scroll-label span{display:inline-block;width:42px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}

.section{padding:clamp(90px,12vw,170px) clamp(22px,7vw,110px)}
.section-inner{max-width:1350px;margin:auto}
.eyebrow{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.display{font-family:var(--serif);font-size:clamp(45px,6.3vw,82px);line-height:1.02;font-weight:400;margin:0;letter-spacing:-.02em}
.display em{font-style:italic;color:#d8bd88}
.copy{color:var(--muted);font-size:14px;line-height:1.9;max-width:540px}
.rule{width:42px;height:1px;background:var(--gold);margin:25px 0}

.statement{background:var(--bg)}
.statement-grid{display:grid;grid-template-columns:.65fr 1.7fr;gap:10vw;align-items:start}
.statement-side{padding-top:9px}
.statement-side .small{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:40px}

.full-bleed{position:relative;min-height:78svh;overflow:hidden}
.full-bleed .photo{position:absolute;inset:-5%;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 1.3s ease}
.full-bleed:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,13,11,.6),transparent 65%)}
.full-copy{position:relative;z-index:2;min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(50px,8vw,105px) clamp(22px,7vw,110px);max-width:950px}
.full-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7vw,94px);line-height:.95;margin:12px 0 20px}
.full-copy p{max-width:500px;color:rgba(250,247,239,.82);margin:0 0 28px}

.services{background:var(--bg2)}
.services-head{max-width:800px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:65px}
.service{padding:35px 22px;min-height:190px;border-right:1px solid var(--line)}
.service:last-child{border-right:0}
.service-num{font-family:var(--serif);font-size:27px;color:var(--gold);margin-bottom:28px}
.service h3{font-family:var(--serif);font-size:26px;font-weight:400;margin:0 0 8px}
.service p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}

.editorial{display:grid;grid-template-columns:1fr 1fr;min-height:720px}
.editorial-copy{display:flex;justify-content:center;flex-direction:column;padding:clamp(50px,8vw,120px);background:var(--bg3)}
.editorial-copy h2{font-family:var(--serif);font-size:clamp(46px,5.7vw,75px);font-weight:400;line-height:1.02;margin:14px 0 22px}
.editorial-image{overflow:hidden}
.editorial-image img{height:100%;object-fit:cover;transition:transform 1.2s ease}
.editorial:hover .editorial-image img{transform:scale(1.035)}

.christmas{background:#18211e}
.christmas-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:7vw;align-items:center}
.christmas-image{min-height:650px;overflow:hidden}
.christmas-image img{height:100%;object-fit:cover}
.christmas-copy h2{font-family:var(--serif);font-size:clamp(48px,6vw,78px);font-weight:400;line-height:.98;margin:15px 0 25px}
.christmas-copy p{color:var(--muted);max-width:500px}
.reservation-note{margin:25px 0;color:#dbc08a;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.portfolio{background:#202c28}
.portfolio-top{display:flex;align-items:end;justify-content:space-between;gap:30px}
.portfolio-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:55px}
.p-card{position:relative;min-height:520px;overflow:hidden}
.p-card.tall{min-height:700px}
.p-card img{height:100%;object-fit:cover;transition:transform 1s ease}
.p-card:hover img{transform:scale(1.04)}
.p-card:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(7,11,9,.65))}
.p-caption{position:absolute;z-index:2;bottom:28px;left:28px;right:28px}
.p-caption small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#dfc18b}
.p-caption h3{font-family:var(--serif);font-weight:400;font-size:34px;margin:5px 0 0}

.instagram{background:var(--bg)}
.ig-head{display:flex;align-items:end;justify-content:space-between;gap:30px}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:45px}
.ig-tile{aspect-ratio:1;overflow:hidden;position:relative}
.ig-tile img{height:100%;object-fit:cover;transition:transform .7s ease}
.ig-tile:hover img{transform:scale(1.06)}
.ig-tile span{position:absolute;inset:0;display:grid;place-items:center;background:rgba(9,14,12,.3);opacity:0;transition:.3s;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.ig-tile:hover span{opacity:1}

.workshop{background:#24302b}
.workshop-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.workshop-image{min-height:620px;overflow:hidden}
.workshop-image img{height:100%;object-fit:cover}
.workshop-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(48px,6vw,78px);line-height:.98;margin:14px 0 24px}
.workshop-copy p{color:var(--muted);max-width:500px}

.contact{background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw}
.form{display:grid;gap:12px;margin-top:35px}
.field{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ivory);padding:15px 0;outline:none}
.field::placeholder{color:#8e9690}
.field:focus{border-color:var(--gold)}
textarea.field{min-height:120px;resize:vertical}
.contact-info{display:grid;align-content:center;gap:30px}
.contact-info h3{font-family:var(--serif);font-weight:400;font-size:31px;margin:4px 0}
.contact-info a{color:var(--muted);font-size:13px}

.footer{background:#101815;padding:80px clamp(22px,7vw,110px) 25px}
.footer-top{max-width:1350px;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;align-items:end}
.footer-logo{width:175px;filter:brightness(0) invert(1)}
.footer-title{font-family:var(--serif);font-size:40px;line-height:1}
.footer-links{display:flex;gap:16px 24px;flex-wrap:wrap;font-size:9px;letter-spacing:.17em;text-transform:uppercase}
.footer-bottom{max-width:1350px;margin:55px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;color:#87908a;font-size:9px;letter-spacing:.08em}

.whatsapp{
 position:fixed;z-index:1100;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;
 display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 12px 35px rgba(0,0,0,.25);
 transition:.3s;font-size:24px
}
.whatsapp:hover{transform:translateY(-3px) scale(1.04)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s ease}
.reveal.visible{opacity:1;transform:none}
.delay1{transition-delay:.12s}.delay2{transition-delay:.22s}.delay3{transition-delay:.32s}

@media(max-width:900px){
 .nav{display:none}.menu-btn{display:block}
 .mobile-menu{display:flex;position:fixed;z-index:900;inset:0;background:var(--bg);color:var(--ivory);padding:120px 25px 40px;flex-direction:column;transform:translateX(100%);transition:.45s cubic-bezier(.2,.7,.2,1)}
 .mobile-menu.open{transform:none}
 .mobile-menu a{font-family:var(--serif);font-size:40px;padding:11px 0;border-bottom:1px solid var(--line)}
 .statement-grid,.christmas-grid,.workshop-grid,.contact-grid{grid-template-columns:1fr}
 .editorial{grid-template-columns:1fr}
 .editorial-image{min-height:70svh;order:-1}
 .service-grid{grid-template-columns:1fr 1fr}
 .service:nth-child(2){border-right:0}.service:nth-child(n+3){border-top:1px solid var(--line)}
 .portfolio-grid{grid-template-columns:1fr}
 .p-card,.p-card.tall{min-height:70svh}
 .christmas-image,.workshop-image{min-height:70svh}
 .ig-grid{grid-template-columns:repeat(3,1fr)}
 .footer-top{grid-template-columns:1fr}
}
@media(max-width:560px){
 .site-header{height:76px;padding:10px 17px}
 .brand img{width:116px;height:50px}
 .hero-content{padding:130px 22px 88px}
 .hero h1{font-size:clamp(50px,15vw,70px)}
 .hero-description{font-size:14px;margin:24px 0}
 .hero-actions .btn{width:100%}
 .hero-progress{right:20px;bottom:28px}
 .scroll-label{left:20px;bottom:28px}
 .section{padding:78px 20px}
 .display{font-size:45px}
 .full-bleed,.full-copy{min-height:82svh}
 .full-copy{padding:55px 20px}
 .service{padding:25px 15px;min-height:170px}
 .service h3{font-size:22px}
 .ig-head,.portfolio-top{align-items:start;flex-direction:column}
 .ig-grid{gap:5px}
 .p-card,.p-card.tall{min-height:72svh}
 .footer-bottom{flex-direction:column}
}

/* Scroll cue: visible, restrained and animated */
.scroll-label{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.86);
}
.scroll-label b{font-size:9px;font-weight:400;letter-spacing:.22em;text-transform:uppercase}
.scroll-label span{width:38px;height:1px;background:currentColor;margin:0;opacity:.65}
.scroll-label i{
  width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);display:block;animation:scrollDown 1.7s ease-in-out infinite;
}
@keyframes scrollDown{
  0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.45}
  50%{transform:translateY(4px) rotate(45deg);opacity:1}
}

/* Hero Ken Burns: each real image moves gently in one direction before the crossfade. */
.hero-slide img{transform:scale(1.045);will-change:transform;}
.hero-slide.active.hero-slide--from-left img{animation:heroMoveLeft 6.5s cubic-bezier(.2,.55,.2,1) forwards}
.hero-slide.active.hero-slide--from-right img{animation:heroMoveRight 6.5s cubic-bezier(.2,.55,.2,1) forwards}
@keyframes heroMoveLeft{from{transform:scale(1.09) translate3d(2.5%,0,0)}to{transform:scale(1.03) translate3d(-2.5%,0,0)}}
@keyframes heroMoveRight{from{transform:scale(1.03) translate3d(-2.5%,0,0)}to{transform:scale(1.09) translate3d(2.5%,0,0)}}
.btn-instagram{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.88)}
.btn-instagram:hover{border-color:var(--gold);background:var(--gold);color:var(--bg)}
.scroll-strip{overflow:hidden;background:#111a17;color:var(--ivory);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:17px 0;white-space:nowrap}
.scroll-strip-track{display:inline-flex;align-items:center;gap:28px;min-width:max-content;animation:scrollStrip 28s linear infinite;font-size:10px;letter-spacing:.25em;text-transform:uppercase}
.scroll-strip-track i{font-style:normal;color:var(--gold);font-size:9px}
@keyframes scrollStrip{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero-slide.active.hero-slide--from-left img,.hero-slide.active.hero-slide--from-right img{animation:none}.scroll-strip-track{animation:none}}
@media(max-width:560px){.hero-actions .btn-instagram{width:auto}.scroll-strip-track{gap:20px;font-size:9px;letter-spacing:.2em}.scroll-strip{padding:15px 0}}

/* Delicate WhatsApp invitation: appears after 60s, dismissible. */
.contact-chat{
  position:fixed;
  right:20px;
  bottom:92px;
  z-index:1090;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s ease;
}
.contact-chat.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.contact-chat a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:0 15px;
  border:1px solid rgba(242,238,229,.18);
  background:rgba(16,24,21,.94);
  color:var(--ivory);
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.contact-chat-dot{
  width:7px;height:7px;border-radius:50%;
  background:#25d366;
  box-shadow:0 0 0 4px rgba(37,211,102,.10);
}
.contact-chat-close{
  position:absolute;
  right:-7px;
  top:-8px;
  width:20px;height:20px;
  border:1px solid rgba(242,238,229,.24);
  border-radius:50%;
  background:#18231f;
  color:var(--ivory);
  cursor:pointer;
  font-size:14px;
  line-height:16px;
  padding:0;
}
@media(max-width:560px){
  .contact-chat{right:16px;bottom:88px}
  .contact-chat a{min-height:38px;padding:0 13px}
}

.page-seo-line{margin-top:18px;color:var(--muted);font-size:13px;line-height:1.8;max-width:650px}

/* Final header cleanup */
.site-header .brand{display:flex;align-items:center;flex:0 0 auto}
.site-header .brand img{display:block;object-fit:contain}

/* Luxury photographic atmosphere for dark-green sections */
.dark-green-atmosphere{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.dark-green-atmosphere::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("../img/evento-panorama.webp");
  background-size:cover;
  background-position:center;
  transform:scale(1.035);
  filter:saturate(.55) contrast(.92);
}
.dark-green-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(12,25,21,.80);
  pointer-events:none;
}
.dark-green-atmosphere > *{
  position:relative;
  z-index:1;
}

/* Interior pages — workshop rhythm fix */
.page-hero{
  padding:clamp(130px,14vw,190px) clamp(22px,7vw,110px) clamp(70px,9vw,110px);
  max-width:1350px;
  margin:0 auto;
}
.page-hero .body-copy{margin-top:26px;max-width:620px}
.workshop-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw;
  align-items:center;
}
.workshop-layout .workshop-image{
  min-height:0;
  height:min(68vh,720px);
  overflow:hidden;
}
.workshop-layout .workshop-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo-band{
  position:relative;
  min-height:78svh;
  overflow:hidden;
}
.photo-band .band-image{
  position:absolute;
  inset:-4%;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}
.photo-band .band-copy{
  position:relative;
  z-index:2;
  min-height:78svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(50px,8vw,120px);
}
.photo-band .band-copy h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(48px,6vw,86px);
  line-height:.98;
  margin:14px 0 0;
}
.photo-band .band-copy h2 em{font-style:italic;color:#d8bd88}

@media(max-width:900px){
  .workshop-layout{
    grid-template-columns:1fr;
    gap:42px;
  }
  .workshop-layout .workshop-image{
    height:min(62svh,560px);
  }
}

@media(max-width:560px){
  .page-hero{
    padding:116px 20px 54px;
  }
  .page-hero .display{
    font-size:clamp(48px,14vw,68px);
  }
  .page-hero .body-copy{
    margin-top:20px;
  }
  .workshop-layout{
    gap:38px;
  }
  .workshop-layout .workshop-image{
    height:auto;
    aspect-ratio:4/3;
    min-height:0;
  }
  .workshop-layout > .reveal{
    transform:none;
  }
  .workshop-layout .display{
    font-size:clamp(46px,13vw,64px);
  }
  .photo-band,
  .photo-band .band-copy{
    min-height:72svh;
  }
  .photo-band .band-copy{
    padding:60px 20px;
  }
}

/* Premium UX + accessibility polish */
.skip-link{
  position:fixed;left:18px;top:12px;z-index:3000;
  transform:translateY(-160%);
  background:var(--ivory);color:var(--bg);
  padding:10px 14px;font-size:11px;letter-spacing:.08em;
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.btn:focus-visible,.menu-btn:focus-visible,.nav a:focus-visible,.footer-links a:focus-visible{
  outline:1px solid var(--gold);outline-offset:5px
}
.hero-slide img,.editorial-image img,.p-card img,.ig-tile img,.christmas-image img,.workshop-image img{
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}
@media(max-width:560px){
  .contact-chat{bottom:92px}
  .whatsapp{right:16px;bottom:16px}
}

/* Hero CTA row — Instagram + WhatsApp side by side */
.hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.hero-actions .btn{
  flex:0 0 auto;
  min-width:max-content;
}
.hero-actions .btn-instagram,
.hero-actions .btn-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:560px){
  .hero-actions{
    width:100%;
    gap:10px;
  }
  .hero-actions .btn:first-child{
    width:100%;
  }
  .hero-actions .btn-instagram,
  .hero-actions .btn-whatsapp{
    flex:1 1 calc(50% - 5px);
    min-width:0;
  }
}

/* Hero social actions — Instagram + WhatsApp side by side */
.hero-social-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.hero-social-actions .btn{
  width:100%;
  justify-content:center;
}
@media(max-width:560px){
  .hero-social-actions{gap:10px}
  .hero-social-actions .btn{min-height:52px;padding-inline:12px}
}

/* Hero social actions — Instagram and WhatsApp stay side-by-side */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.hero-actions .btn{
  white-space:nowrap;
}
@media(max-width:560px){
  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .hero-actions .btn:first-child{
    grid-column:1 / -1;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Deep green page atmosphere — photographic texture under the entire page */
body{
  position:relative;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:url("../img/evento-panorama.webp");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  opacity:.20;
  filter:saturate(.48) contrast(.88);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(12,25,21,.80);
}
/* Let the global atmosphere show through instead of stacking a separate
   photographic image behind every dark-green section. */
.dark-green-atmosphere::before,
.dark-green-atmosphere::after{
  display:none;
}
@media(max-width:700px){
  body::before{background-attachment:scroll}
}

/* Hero CTA hierarchy — portfolio wide, social CTAs equal below */
.hero-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  width:100%;
}
.hero-actions > .btn{
  width:100%;
}
.hero-social-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
}
.hero-social-row .btn{
  width:100%;
  min-width:0;
  justify-content:center;
  white-space:nowrap;
}
@media(max-width:560px){
  .hero-actions{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-social-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .hero-social-row .btn{
    padding-left:10px;
    padding-right:10px;
  }
}

/* Header brand — single, controlled logo treatment on every page */
.site-header .brand{
  width:142px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
}
.site-header .brand img{
  width:142px;
  height:58px;
  object-fit:contain;
  display:block;
}
@media(max-width:560px){
  .site-header .brand{
    width:116px;
    height:50px;
  }
  .site-header .brand img{
    width:116px;
    height:50px;
  }
}

/* FINAL HERO CTA SYSTEM — one wide CTA, two equal CTAs below */
.hero-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:min(100%, 570px) !important;
  max-width:570px !important;
}
.hero-actions > .btn{
  width:100% !important;
  min-height:58px;
  border:1px solid rgba(220,188,132,.92) !important;
  background:rgba(10,19,16,.24) !important;
  color:var(--ivory) !important;
  box-sizing:border-box;
}
.hero-social-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  width:100% !important;
}
.hero-social-row .btn{
  width:100% !important;
  min-height:58px;
  border:1px solid rgba(220,188,132,.92) !important;
  background:rgba(10,19,16,.24) !important;
  color:var(--ivory) !important;
  box-sizing:border-box;
}
.hero-actions .btn:hover,
.hero-social-row .btn:hover{
  background:rgba(220,188,132,.10) !important;
  border-color:var(--gold) !important;
}
@media(max-width:560px){
  .hero-actions{
    width:100% !important;
    max-width:none !important;
  }
  .hero-social-row{
    grid-template-columns:1fr 1fr !important;
  }
  .hero-actions .btn,
  .hero-social-row .btn{
    min-height:54px;
  }
}

@media(max-width:560px){
  .hero-content{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .hero-content > *{
    max-width:100%;
    box-sizing:border-box;
  }
  .hero h1{
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }
  .hero-description{
    max-width:100%;
  }
}

/* Global dark-green photographic atmosphere */
html,body{background:var(--bg)}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:url("../img/evento-panorama.webp");
  background-size:cover;
  background-position:center 35%;
  opacity:.32;
  filter:saturate(.42) contrast(.90) brightness(.72);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(12,25,21,.80);
}
.dark-green-atmosphere{
  background:transparent !important;
}
.dark-green-atmosphere::before,
.dark-green-atmosphere::after{
  display:none !important;
}
@media(max-width:700px){
  body::before{
    background-attachment:scroll;
    background-position:center top;
    opacity:.28;
  }
}

/* Philosophy block — deliberate editorial line breaks */
.philosophy-copy,
.manifesto-copy{
  max-width:920px;
}
.philosophy-copy h2,
.manifesto-copy h2{
  max-width:920px;
  text-wrap:balance;
}
.philosophy-copy p,
.manifesto-copy p{
  max-width:760px;
}
@media(max-width:560px){
  .philosophy-copy h2,
  .manifesto-copy h2{
    max-width:100%;
    font-size:clamp(43px,12.2vw,60px);
    line-height:.98;
    text-wrap:pretty;
  }
}

/* FINAL MOBILE STATEMENT — text gets the full editorial width */
@media(max-width:900px){
  .statement-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .statement-grid > .reveal:last-child{
    width:100% !important;
    min-width:0 !important;
  }
  .statement-grid .display{
    max-width:100% !important;
    width:100% !important;
    line-height:.98 !important;
    text-wrap:pretty;
  }
  .statement-grid .copy{
    max-width:100% !important;
  }
}
@media(max-width:560px){
  .statement{
    padding-top:86px !important;
    padding-bottom:88px !important;
  }
  .statement-grid{
    gap:30px !important;
  }
  .statement-grid .display{
    font-size:clamp(43px,12.3vw,59px) !important;
    letter-spacing:-.025em;
  }
  .statement-grid .copy{
    margin-top:25px !important;
    font-size:14px;
    line-height:1.75;
  }
}

/* The photographic texture belongs to the PAGE background itself.
   The 80% green veil is intentionally part of the background layer. */
html,body{
  background-color:var(--bg);
}
body{
  background-image:
    linear-gradient(rgba(12,25,21,.80),rgba(12,25,21,.80)),
    url("../img/evento-panorama.webp");
  background-size:cover;
  background-position:center 35%;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
body::before,
body::after{
  display:none !important;
}
@media(max-width:700px){
  body{
    background-attachment:scroll;
    background-position:center top;
  }
}

/* FINAL HERO MOBILE GEOMETRY — full-width composition requested */
@media (max-width: 560px){
  .hero-content{
    box-sizing:border-box !important;
    width:100vw !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .hero-actions{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    gap:9px !important;
  }

  /* Wide top CTA */
  .hero-actions > .btn{
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:58px !important;
    box-sizing:border-box !important;
    border:1px solid #d9b96f !important;
    background:rgba(11,18,15,.30) !important;
    color:#f6f1e7 !important;
    margin:0 !important;
  }

  /* Two equal lower CTAs, filling the exact same width as the top CTA */
  .hero-social-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    gap:9px !important;
    margin:0 !important;
  }

  .hero-social-row .btn{
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:58px !important;
    box-sizing:border-box !important;
    border:1px solid #d9b96f !important;
    background:rgba(11,18,15,.30) !important;
    color:#f6f1e7 !important;
    margin:0 !important;
    padding:0 8px !important;
  }

  .hero-actions .btn:hover,
  .hero-social-row .btn:hover{
    border-color:#ead09a !important;
    background:rgba(217,185,111,.12) !important;
    color:#fffaf1 !important;
    transform:translateY(-1px);
  }
}

/* Desktop keeps the same hierarchy, simply wider. */
@media (min-width:561px){
  .hero-actions{
    width:min(570px,100%) !important;
    max-width:570px !important;
  }
  .hero-social-row{
    width:100% !important;
  }
}

/* ==========================================================
   FINAL V26 — HERO CTA GEOMETRY
   Mobile: one full-width portfolio + two equal CTAs below.
   ========================================================== */
.hero-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-areas:
    "portfolio portfolio"
    "instagram whatsapp" !important;
  gap:10px !important;
  width:100% !important;
  max-width:570px !important;
  margin:0 !important;
}
.hero-actions .hero-portfolio{
  grid-area:portfolio !important;
}
.hero-actions .hero-instagram{
  grid-area:instagram !important;
}
.hero-actions .hero-whatsapp{
  grid-area:whatsapp !important;
}
.hero-actions .btn{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:58px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #d9b96f !important;
  background:rgba(10,19,16,.30) !important;
  color:#f6f1e7 !important;
  margin:0 !important;
}
@media(max-width:560px){
  .hero-content{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .hero-actions{
    width:100% !important;
    max-width:none !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "portfolio portfolio"
      "instagram whatsapp" !important;
    gap:9px !important;
  }
  .hero-actions .btn{
    min-height:58px !important;
    padding:0 10px !important;
    font-size:10px !important;
    letter-spacing:.15em !important;
  }
}

/* ==========================================================
   FINAL V26 — ACTUAL IMAGE TEXTURE ON THE GREEN PAGE AREAS
   80% green veil over a subtle real event photograph.
   ========================================================== */
.statement,
.services,
.instagram,
.workshops,
.contact{
  position:relative !important;
  isolation:isolate !important;
  background:transparent !important;
}
.statement::before,
.services::before,
.instagram::before,
.workshops::before,
.contact::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background-image:url("../img/evento-panorama.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  filter:saturate(.45) contrast(.9) brightness(.78) !important;
}
.statement::after,
.services::after,
.instagram::after,
.workshops::after,
.contact::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:rgba(12,25,21,.80) !important;
}
.statement > *,
.services > *,
.instagram > *,
.workshops > *,
.contact > *{
  position:relative !important;
  z-index:1 !important;
}

/* Keep the hero itself as a photographic composition, never give it the
   global green texture layer. */
.hero{
  z-index:0;
}
@media(max-width:700px){
  .statement::before,
  .services::before,
  .instagram::before,
  .workshops::before,
  .contact::before{
    background-position:center top !important;
  }
}

/* HERO — single primary action */
.hero-actions{
  display:block !important;
  width:min(570px,100%) !important;
  max-width:570px !important;
  margin:0 !important;
}
.hero-actions .hero-portfolio{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  min-height:58px !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #d9b96f !important;
  background:rgba(10,19,16,.30) !important;
  color:#f6f1e7 !important;
  margin:0 !important;
}
.hero-actions .hero-portfolio:hover{
  background:rgba(217,185,111,.10) !important;
  border-color:#ead09a !important;
}
@media(max-width:560px){
  .hero-actions{
    width:100% !important;
    max-width:none !important;
  }
  .hero-actions .hero-portfolio{
    min-height:58px !important;
  }
}

/* No accidental social CTA styles in the hero */
.hero-social-row{display:none !important}

/* Keep the floating delayed contact bubble as the only WhatsApp invitation. */

/* ==========================================================
   FINAL STRUCTURAL FIX — fixed header must never visually
   bleed through interior-page content.
   ========================================================== */
.site-header{
  background:rgba(16,24,21,.98) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-header.scrolled{
  background:rgba(16,24,21,.99) !important;
}
body.interior-page main{
  padding-top:88px;
}
body.interior-page .page-hero{
  padding-top:clamp(72px,8vw,120px);
}
@media(max-width:900px){
  body.interior-page main{
    padding-top:76px;
  }
  body.interior-page .page-hero{
    padding-top:48px;
  }
}
@media(max-width:560px){
  body.interior-page .page-hero{
    padding-top:42px;
    padding-left:20px;
    padding-right:20px;
  }
}

/* Interior page content always establishes a clean stacking context. */
body.interior-page main,
body.interior-page .page-hero,
body.interior-page .section{
  position:relative;
  z-index:0;
}

/* ==========================================================
   FINAL AUDIT — INTERIOR PAGE HERO / FULL-WIDTH CONTENT
   The header is fixed; interior content starts below it.
   The hero band itself is full viewport width, while its
   typography is constrained inside a centered editorial rail.
   ========================================================== */
body.interior-page main{
  padding-top:88px !important;
}
body.interior-page .page-hero{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(72px,8vw,120px) clamp(22px,7vw,110px) clamp(70px,9vw,110px) !important;
}
body.interior-page .page-hero > *{
  width:100%;
  max-width:1350px;
  margin-left:auto;
  margin-right:auto;
}
body.interior-page .page-hero .display{
  max-width:1350px;
}
body.interior-page .page-hero .page-seo-line{
  max-width:1000px;
}
body.interior-page .page-hero .body-copy{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* Keep the page header opaque enough that scrolling content never shows
   through the navigation. */
.site-header{
  background:rgb(16,24,21) !important;
}
.site-header.scrolled{
  background:rgb(23,33,30) !important;
}

/* Mobile: no horizontal clipping of editorial headings or controls. */
@media(max-width:900px){
  body.interior-page main{
    padding-top:76px !important;
  }
  body.interior-page .page-hero{
    padding-top:48px !important;
    padding-bottom:58px !important;
  }
  body.interior-page .page-hero > *{
    max-width:none !important;
  }
}
@media(max-width:560px){
  body.interior-page .page-hero{
    padding:42px 20px 54px !important;
  }
  body.interior-page .page-hero .display{
    font-size:clamp(45px,13vw,64px) !important;
    line-height:.98 !important;
    letter-spacing:-.025em !important;
    overflow-wrap:normal;
  }
  body.interior-page .page-hero .page-seo-line{
    font-size:14px !important;
    line-height:1.7 !important;
  }
}