/* ============================================================
   Vil·la Minerva — Home
   Lujo discreto · blanco cálido + oliva nude
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root{
  --bg:        #F7F5EF;   /* warm white */
  --paper:     #FFFFFF;
  --ink:       #2A2B26;
  --ink-soft:  #54564C;
  --muted:     #8E8F80;
  --line:      #E5E2D7;
  --line-soft: #EEEBE1;

  --olive:      #79826A;
  --olive-deep: #5C6450;
  --olive-tint: #ECEEE6;
  --nude:       #E5D2B0;
  --nude-soft:  #F0E8D8;
  --cream:      #F4F1E9;

  /* roles (re-pointed by olive-intensity tweak) */
  --eyebrow:    var(--olive);
  --feature-bg: var(--olive);      /* the big "Bodas" band */
  --soft-bg:    var(--nude-soft);  /* subtle section tint */
  --rule:       var(--olive);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, sans-serif;

  /* heading family (re-pointed by type tweak) */
  --head-family: var(--serif);
  --head-weight: 400;
  --head-style:  normal;
  --head-spacing: 0;
  --head-transform: none;

  --maxw: 1280px;
  --gut: clamp(22px, 5vw, 80px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--eyebrow);
  margin:0 0 1.4em;
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow.center{ justify-content:center; }
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:currentColor;
  opacity:.55;
}
.eyebrow.noline::before{ display:none; }

h1,h2,h3{
  font-family:var(--head-family);
  font-weight:var(--head-weight);
  font-style:var(--head-style);
  letter-spacing:var(--head-spacing);
  text-transform:var(--head-transform);
  color:var(--ink);
  margin:0;
  line-height:1.08;
}
h1{ font-size:clamp(42px, 6.4vw, 92px); }
h2{ font-size:clamp(32px, 4.4vw, 60px); }
h3{ font-size:clamp(22px, 2.2vw, 30px); line-height:1.15; }

.lead{
  font-size:clamp(18px,1.5vw,21px);
  color:var(--ink-soft);
  font-weight:300;
  line-height:1.75;
  max-width:46ch;
}
p{ margin:0 0 1.1em; }
.muted{ color:var(--muted); }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
section{ position:relative; }
.pad{ padding:clamp(80px,11vh,150px) 0; }
.pad-sm{ padding:clamp(54px,7vh,90px) 0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans);
  font-size:12px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  padding:16px 30px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  border-radius:0;
  transition:.45s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{ background:var(--ink); color:var(--cream); }
.btn .arr{ transition:transform .45s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn.solid{ background:var(--olive); border-color:var(--olive); color:var(--cream); }
.btn.solid:hover{ background:var(--olive-deep); border-color:var(--olive-deep); }
.btn.light{ border-color:var(--cream); color:var(--cream); }
.btn.light:hover{ background:var(--cream); color:var(--ink); }

.link{
  font-family:var(--sans);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.8em;
  padding-bottom:5px;
  border-bottom:1px solid var(--rule);
  transition:gap .4s, color .4s;
}
.link:hover{ gap:1.3em; color:var(--olive-deep); }

/* ---------- real images ---------- */
.ph.has-img{ background:none; }
.ph.has-img::after{ display:none; }
.ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- image placeholder ---------- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,#ECE8DC 0 11px,#F2EEE3 11px 22px);
  overflow:hidden;
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--sans);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#A6A595;
  background:rgba(247,245,239,.82);
  padding:6px 11px;
  margin:13px;
  border:1px solid rgba(0,0,0,.05);
}
.ph.dark{
  background:repeating-linear-gradient(135deg,#34352E 0 11px,#3B3C34 11px 22px);
}
.ph.dark::after{ color:#9FA08F; background:rgba(20,21,18,.55); border-color:rgba(255,255,255,.08); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.09s; }
.rv.d2{ transition-delay:.18s; }
.rv.d3{ transition-delay:.27s; }
.rv.d4{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
}