/* ============================================================
   BRAÑA — Stylesheet principal
   braña.com · braña.es
   ============================================================ */

/* ── VARIABLES ── */
:root {
  --green:        #1b3a0e;
  --green-mid:    #28521a;
  --green-light:  #3b6d22;
  --amber:        #c4842a;
  --amber-light:  #e0a040;
  --cream:        #f0e8d5;
  --cream-dim:    rgba(240,232,213,0.65);
  --cream-faint:  rgba(240,232,213,0.28);
  --dark:         #0c1607;
  --dark2:        #111e09;
  --transition:   .35s cubic-bezier(.25,.46,.45,.94);
}

/* ── RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html  { scroll-behavior:smooth; font-size:16px }
body  {
  background:var(--dark);
  color:var(--cream);
  font-family:'Jost',Arial,sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img   { display:block; max-width:100%; height:auto }
a     { color:inherit; text-decoration:none }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 3rem;
  transition:all .5s;
}
nav.scrolled {
  background:rgba(12,22,7,0.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:1rem 3rem;
  border-bottom:.5px solid rgba(196,132,42,0.2);
}
.nav-logo {
  display:flex; align-items:center; gap:.8rem;
}
.nav-logo img { height:36px; width:auto }
.nav-logo span {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.4rem; font-weight:400;
  letter-spacing:.25em; color:var(--cream);
}
.nav-links { display:flex; gap:2.2rem; align-items:center }
.nav-links a {
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,232,213,.72); transition:color var(--transition);
}
.nav-links a:hover { color:var(--amber-light) }
.nav-cta {
  padding:.5rem 1.3rem;
  border:.5px solid var(--amber);
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream) !important;
  transition:all var(--transition);
}
.nav-cta:hover { background:var(--amber); color:var(--dark) !important }
.lang-sw {
  display:flex; gap:.5rem; margin-left:.8rem; padding-left:1rem;
  border-left:.5px solid rgba(240,232,213,.18);
}
.lang-sw button {
  background:none; border:none; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:.65rem;
  letter-spacing:.1em; color:rgba(240,232,213,.4);
  transition:color var(--transition); padding:0;
}
.lang-sw button.on,
.lang-sw button:hover { color:var(--amber-light) }

/* ── HERO ── */
.hero {
  height:100vh; position:relative;
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
}
.hero-ov {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(10,18,5,.92) 0%,rgba(10,18,5,.45) 45%,rgba(10,18,5,.18) 100%);
}
.hero-content { position:relative; z-index:2; padding:0 3rem 6rem; max-width:860px }
.hero-ey {
  font-size:.65rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.2rem;
  opacity:0; animation:fup .9s .4s forwards;
}
.hero-h1 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(3.2rem,6.5vw,6rem);
  font-weight:300; line-height:1.02; letter-spacing:.03em;
  opacity:0; animation:fup .9s .7s forwards;
}
.hero-h1 em { font-style:italic; color:var(--amber-light) }
.hero-p {
  font-size:.88rem; line-height:1.85; color:var(--cream-dim);
  max-width:520px; margin:1.4rem 0 2.2rem;
  opacity:0; animation:fup .9s 1s forwards;
}
.hero-act {
  display:flex; gap:1.2rem; align-items:center;
  opacity:0; animation:fup .9s 1.3s forwards;
}
.hero-sc {
  position:absolute; right:3rem; bottom:3rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  opacity:0; animation:fup .9s 1.8s forwards;
}
.hero-sc span {
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(240,232,213,.3);
}
.s-line {
  width:.5px; height:44px; background:rgba(240,232,213,.15);
  position:relative; overflow:hidden;
}
.s-line::after {
  content:''; position:absolute; top:-100%; left:0;
  width:100%; height:100%; background:var(--amber);
  animation:sdrop 2.2s 2s infinite;
}

/* ── BUTTONS ── */
.btn-p {
  padding:.82rem 2rem;
  border:.5px solid var(--amber);
  background:transparent; color:var(--cream);
  font-family:'Jost',sans-serif; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:all var(--transition);
  display:inline-block;
}
.btn-p:hover { background:var(--amber); color:var(--dark) }
.btn-g {
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream-dim); transition:color var(--transition);
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-g:hover { color:var(--cream) }
.btn-g::after { content:'→' }

/* ── TYPOGRAPHY UTILS ── */
.s-lbl {
  font-size:.6rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--amber); margin-bottom:.9rem;
}
.s-ttl {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2rem,3.8vw,3.2rem);
  font-weight:300; line-height:1.12; letter-spacing:.02em;
}
.s-ttl em { font-style:italic; color:var(--amber-light) }
.s-bdy { font-size:.87rem; line-height:1.9; color:var(--cream-dim) }

/* ── INTRO ── */
.intro { display:grid; grid-template-columns:1fr 1fr; min-height:90vh }
.intro-vis { position:relative; overflow:hidden }
.intro-vis img { width:100%; height:100%; object-fit:cover; transition:transform 8s ease }
.intro-vis:hover img { transform:scale(1.04) }
.intro-vis-ov {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(12,22,7,.4) 0%,transparent 60%);
}
.intro-txt {
  background:var(--dark2);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem 4.5rem;
}
.stats { margin-top:3rem; padding-top:2rem; border-top:.5px solid rgba(196,132,42,.2); display:flex; gap:3rem }
.stat .num {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2.8rem; font-weight:300; color:var(--amber-light); line-height:1;
}
.stat .lbl {
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim); margin-top:.3rem;
}

/* ── ZONAS ── */
.zonas { padding:7rem 3rem }
.z-hdr {
  max-width:1200px; margin:0 auto 3.5rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:3rem;
}
.z-grid {
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:420px 260px;
  gap:1rem;
}
.z-card { position:relative; overflow:hidden; cursor:pointer }
.z-card:first-child { grid-row:1/3 }
.z-img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--transition) }
.z-card:hover .z-img { transform:scale(1.06) }
.z-grad {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(10,18,5,.88) 0%,rgba(10,18,5,.1) 55%);
}
.z-info { position:absolute; bottom:0; left:0; right:0; padding:1.8rem }
.z-tag { font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--amber); margin-bottom:.35rem }
.z-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.55rem; font-weight:300; line-height:1.1 }
.z-card:first-child .z-name { font-size:2.3rem }
.z-desc { font-size:.74rem; color:var(--cream-dim); margin-top:.35rem; line-height:1.6 }

/* ── ALOJAMIENTO ── */
.aloj { background:var(--dark2); padding:7rem 3rem }
.aloj-in { max-width:1200px; margin:0 auto }
.aloj-hdr { text-align:center; margin-bottom:4rem }
.aloj-hdr .s-bdy { max-width:580px; margin:.8rem auto 0 }
.aloj-lay {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:rgba(196,132,42,.12);
}
.aloj-pnl { background:var(--dark2) }
.aloj-iw { position:relative; height:380px; overflow:hidden }
.aloj-iw img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease }
.aloj-pnl:hover .aloj-iw img { transform:scale(1.04) }
.aloj-bdg {
  position:absolute; top:1.2rem; left:1.2rem;
  background:rgba(12,22,7,.85); border:.5px solid rgba(196,132,42,.4);
  padding:.4rem .9rem; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber);
}
.aloj-body { padding:2rem 2.5rem 2.5rem }
.aloj-nm { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.6rem; font-weight:300; margin-bottom:.5rem }
.aloj-sb { font-size:.75rem; color:var(--amber); letter-spacing:.15em; text-transform:uppercase; margin-bottom:.9rem }
.aloj-dc { font-size:.83rem; line-height:1.85; color:var(--cream-dim); margin-bottom:1.4rem }
.specs { display:flex; flex-wrap:wrap; gap:.6rem }
.spec { padding:.32rem .85rem; border:.5px solid rgba(196,132,42,.25); font-size:.68rem; letter-spacing:.08em; color:var(--cream-dim) }

/* ── EXPERIENCIAS ── */
.exp { padding:7rem 3rem }
.exp-in { max-width:1200px; margin:0 auto }
.exp-hdr { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:4rem }
.exp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }
.ec { position:relative; overflow:hidden; cursor:pointer }
.ec:nth-child(1), .ec:nth-child(5) { grid-column:span 2 }
.ec-img {
  width:100%; height:240px; object-fit:cover;
  transition:transform .8s var(--transition), filter .6s;
}
.ec:nth-child(1) .ec-img, .ec:nth-child(5) .ec-img { height:320px }
.ec:hover .ec-img { transform:scale(1.06); filter:brightness(1.1) }
.ec-ov {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(10,18,5,.9) 0%,rgba(10,18,5,.05) 55%);
  transition:background .5s;
}
.ec:hover .ec-ov { background:linear-gradient(0deg,rgba(10,18,5,.95) 0%,rgba(10,18,5,.2) 60%) }
.ec-info { position:absolute; bottom:0; left:0; right:0; padding:1.4rem }
.ec-tag { font-size:.57rem; letter-spacing:.28em; text-transform:uppercase; color:var(--amber); margin-bottom:.3rem }
.ec-nm { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.2rem; font-weight:300; line-height:1.15 }
.ec:nth-child(1) .ec-nm, .ec:nth-child(5) .ec-nm { font-size:1.55rem }
.ec-dc {
  font-size:.73rem; color:var(--cream-dim); margin-top:.3rem; line-height:1.6;
  opacity:0; max-height:0; overflow:hidden;
  transition:max-height .5s ease, opacity .4s;
}
.ec:hover .ec-dc { opacity:1; max-height:80px }

/* ── SOCIOS ── */
.socios { padding:6rem 3rem; background:var(--dark2); border-top:.5px solid rgba(196,132,42,.1) }
.soc-in { max-width:1200px; margin:0 auto }
.soc-top { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; margin-bottom:4rem }
.soc-vis { position:relative; height:340px; overflow:hidden }
.soc-vis img { width:100%; height:100%; object-fit:cover }
.soc-vis-ov { position:absolute; inset:0; background:rgba(12,22,7,.3) }
.soc-grid { display:grid; grid-template-columns:repeat(4,1fr); border:.5px solid rgba(196,132,42,.12) }
.soc-item {
  padding:2rem 1.8rem; border-right:.5px solid rgba(196,132,42,.12);
  transition:background .4s;
}
.soc-item:last-child { border-right:none }
.soc-item:hover { background:rgba(196,132,42,.04) }
.soc-ico { width:30px; height:30px; margin-bottom:1rem; opacity:.7 }
.soc-cat { font-size:.58rem; letter-spacing:.25em; text-transform:uppercase; color:var(--amber); margin-bottom:.4rem }
.soc-nm { font-family:'Cormorant Garamond',Georgia,serif; font-size:1rem; font-weight:400; margin-bottom:.4rem }
.soc-dc { font-size:.74rem; color:var(--cream-dim); line-height:1.65 }

/* ── PROMISE / CTA ── */
.promise { position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center; overflow:hidden }
.pr-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30% }
.pr-ov { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,18,5,.9) 0%,rgba(10,18,5,.6) 100%) }
.pr-ct {
  position:relative; z-index:2; text-align:center;
  max-width:700px; padding:3rem;
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
}
.pr-ttl { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(2.4rem,4.5vw,4rem); font-weight:300; line-height:1.08 }
.p-div { width:50px; height:.5px; background:var(--amber) }

/* ── FOOTER ── */
footer { background:var(--dark2); border-top:.5px solid rgba(196,132,42,.12) }
.ft-main {
  max-width:1200px; margin:0 auto; padding:4rem 3rem;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
}
.ft-logo-wrap { display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem }
.ft-logo-wrap img { height:42px; width:auto }
.ft-tag { font-size:.75rem; color:var(--cream-dim); line-height:1.8; max-width:260px }
.f-col h4 {
  font-size:.58rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.2rem; font-weight:400;
}
.f-col a { display:block; font-size:.78rem; color:var(--cream-dim); margin-bottom:.55rem; transition:color var(--transition) }
.f-col a:hover { color:var(--cream) }
.ft-bot {
  max-width:1200px; margin:0 auto; padding:1.4rem 3rem;
  border-top:.5px solid rgba(196,132,42,.08);
  display:flex; justify-content:space-between; align-items:center;
}
.ft-bot p { font-size:.68rem; color:rgba(240,232,213,.25) }

/* ── REVEAL ANIMATIONS ── */
.rv { opacity:0; transform:translateY(28px); transition:opacity .85s ease, transform .85s ease }
.rv.on { opacity:1; transform:translateY(0) }
.d1 { transition-delay:.12s }
.d2 { transition-delay:.26s }
.d3 { transition-delay:.4s }
.d4 { transition-delay:.54s }

@keyframes fup {
  from { opacity:0; transform:translateY(22px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes sdrop {
  from { top:-100% }
  to   { top:100% }
}

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .z-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto }
  .z-card:first-child { grid-row:auto; grid-column:span 2 }
  .aloj-lay { grid-template-columns:1fr }
  .exp-grid { grid-template-columns:repeat(2,1fr) }
  .ec:nth-child(1), .ec:nth-child(5) { grid-column:span 2 }
  .soc-grid { grid-template-columns:repeat(2,1fr) }
  .soc-item:nth-child(2) { border-right:none }
  .soc-item:nth-child(3) { border-top:.5px solid rgba(196,132,42,.12) }
  .soc-item:nth-child(4) { border-right:none; border-top:.5px solid rgba(196,132,42,.12) }
  .ft-main { grid-template-columns:1fr 1fr; gap:2rem }
}
@media (max-width:768px) {
  nav { padding:1.2rem 1.5rem }
  nav.scrolled { padding:.8rem 1.5rem }
  .nav-links { display:none }
  .hero-content { padding:0 1.5rem 4rem }
  .intro { grid-template-columns:1fr }
  .intro-vis { height:320px }
  .zonas, .aloj, .exp, .socios { padding:4rem 1.5rem }
  .z-hdr { flex-direction:column; gap:1rem }
  .z-grid { grid-template-columns:1fr; grid-template-rows:auto }
  .z-card:first-child { grid-column:auto; grid-row:auto }
  .z-img, .z-card:first-child .z-img { height:280px }
  .exp-hdr { grid-template-columns:1fr }
  .exp-grid { grid-template-columns:1fr }
  .ec:nth-child(1), .ec:nth-child(5) { grid-column:auto }
  .soc-top { grid-template-columns:1fr }
  .soc-grid { grid-template-columns:1fr 1fr }
  .ft-main { grid-template-columns:1fr; gap:2rem }
  .ft-bot { flex-direction:column; gap:.5rem; text-align:center }
  .promise { min-height:80vh }
  .pr-ct { padding:2rem 1.5rem }
}

/* ── COOKIE BANNER ── */
#cookie-banner {
  position:fixed; bottom:1.5rem; left:1.5rem; right:1.5rem; z-index:500;
  background:rgba(17,30,9,.97); border:.5px solid rgba(196,132,42,.3);
  backdrop-filter:blur(8px); padding:1.2rem 1.8rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  transform:translateY(120%); transition:transform .5s ease;
}
#cookie-banner.show { transform:translateY(0) }
#cookie-banner p { font-size:.75rem; color:var(--cream-dim); max-width:600px; line-height:1.7 }
#cookie-banner p a { color:var(--amber); text-decoration:underline }
.cookie-btns { display:flex; gap:.8rem; flex-shrink:0 }
.cookie-btns button {
  padding:.45rem 1.1rem; font-family:'Jost',sans-serif; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border:none;
  transition:all var(--transition);
}
.btn-accept { background:var(--amber); color:var(--dark) }
.btn-accept:hover { background:var(--amber-light) }
.btn-decline { background:transparent; border:.5px solid rgba(196,132,42,.4) !important; color:var(--cream-dim) }
.btn-decline:hover { color:var(--cream) }

/* ── SCROLL PROGRESS ── */
#scroll-progress {
  position:fixed; top:0; left:0; height:2px; z-index:300;
  background:var(--amber); width:0%; transition:width .1s linear;
}