/* Villa Lasata · demo-homepage · "Cartel de Andalucía" (litho-affichewereld, seed 371e107b) */

@font-face{font-family:'Abril Fatface';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/AbrilFatface-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Archivo-var.woff2') format('woff2-variations');}
@font-face{font-family:'Archivo';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/Archivo-400i.woff2') format('woff2');}

:root{
  --rosa:#F5D9C8;        /* rosa cal: roze kalkmuur, paginagrond */
  --rosa-diep:#EFCDB8;   /* albero: diepere roze-zandvelden */
  --granate:#7C2331;     /* Málaga-wijn granaat: de committed inkt */
  --granate-diep:#471520;/* avondgranaat: drenched secties */
  --tinta:#33201B;       /* warm bruinzwart: tekstinkt */
  --bruin:#6E4A3C;       /* secundaire tekst, getint uit de grond */
  --azahar:#FFF8EF;      /* oranjebloesemwit: knockout-type en sheets */
  --miel:#D9973B;        /* honinggoud: alleen ornament en focus */
  --hairline:rgba(51,32,27,.28);
  --maat:65ch;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:17px;line-height:1.7;
  color:var(--tinta);
  background:var(--rosa);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--granate);text-decoration-thickness:1px;text-underline-offset:3px;}
:focus-visible{outline:3px solid var(--miel);outline-offset:2px;}
::selection{background:var(--granate);color:var(--azahar);}

h1,h2,h3{font-family:'Abril Fatface',serif;font-weight:400;line-height:1.06;text-wrap:balance;}
h2{font-size:clamp(2.1rem,4.6vw,3.3rem);color:var(--granate);margin-bottom:1.6rem;}
h3{font-size:clamp(1.25rem,2.2vw,1.55rem);color:var(--tinta);margin-bottom:.7rem;}
p{max-width:var(--maat);}
p + p{margin-top:1em;}
.klein{font-size:.82rem;color:var(--bruin);}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem);}
section{padding:clamp(4.5rem,9vw,7.5rem) 0;}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--rosa);
  border-bottom:1px solid var(--hairline);
}
.masthead .wrap{display:flex;align-items:center;gap:2rem;height:64px;}
.wordmark{font-family:'Abril Fatface',serif;font-size:1.35rem;color:var(--granate);text-decoration:none;letter-spacing:.01em;}
.masthead nav{display:flex;gap:1.6rem;margin-left:auto;}
.masthead nav a{
  font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent;
  transition:color .25s,border-color .25s;
}
.masthead nav a:hover{color:var(--granate);border-bottom-color:var(--granate);}
.knop{
  display:inline-block;font-weight:650;font-size:.9rem;letter-spacing:.04em;
  padding:.85rem 1.6rem;border:2px solid var(--granate);border-radius:2px;
  text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.knop-vol{background:var(--granate);color:var(--azahar);}
.knop-vol:hover{background:var(--granate-diep);border-color:var(--granate-diep);}
.knop-lijn{color:var(--granate);background:transparent;}
.knop-lijn:hover{background:var(--granate);color:var(--azahar);}
.knop-licht{border-color:var(--azahar);color:var(--azahar);}
.knop-licht:hover{background:var(--azahar);color:var(--granate-diep);}
.masthead .knop{margin-left:.4rem;padding:.55rem 1.15rem;font-size:.8rem;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;flex-direction:column;padding:0;}
.hero-beeld{position:absolute;inset:0;overflow:hidden;}
.hero-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;}
.hero-beeld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(51,32,27,0) 38%,rgba(51,32,27,.62) 88%);
}
.hero-inhoud{position:relative;z-index:2;margin-top:auto;padding:0 clamp(1.1rem,4vw,2.5rem) 3.2rem;color:var(--azahar);}
.hero h1{
  font-size:clamp(3.4rem,9.5vw,6rem);color:var(--azahar);
  text-shadow:0 2px 26px rgba(51,32,27,.45);margin-bottom:.9rem;
}
.hero-sub{font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.55;max-width:34em;text-shadow:0 1px 14px rgba(51,32,27,.55);}
.hero-acties{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem;}
.hero .knop-vol{border-color:var(--granate);box-shadow:0 6px 22px rgba(51,32,27,.35);}

.imprint{
  position:relative;z-index:2;background:var(--granate);color:var(--azahar);max-width:none;
  text-align:center;padding:.72rem 1rem;
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.imprint span{color:var(--miel);}

/* usp-strook */
.usp{background:var(--rosa-diep);border-bottom:1px solid var(--hairline);padding:0;}
.usp ul{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem 0;padding:1.05rem 0;
}
.usp li{
  font-size:.82rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--granate);
  padding:0 1.6rem;position:relative;white-space:nowrap;
}
.usp li + li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:1em;width:1px;background:var(--hairline);}

/* ---------- litho-ornamenten ---------- */
.zonlijn{display:flex;align-items:center;gap:1.2rem;margin:0 0 2.6rem;color:var(--granate);}
.zonlijn::before,.zonlijn::after{content:"";height:1px;background:var(--hairline);flex:1;}
.zonlijn svg{flex:0 0 auto;}

.plate{position:relative;}
.plate figure{margin:0;}
.plate .kader{
  border:1px solid var(--tinta);outline:1px solid var(--tinta);outline-offset:5px;
  overflow:hidden;background:var(--rosa-diep);
}
.plate img{width:100%;height:100%;object-fit:cover;}
.plate figcaption{
  margin-top:14px;background:var(--granate);color:var(--azahar);
  padding:.55rem .9rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.plate figcaption b{font-weight:700;color:var(--miel);letter-spacing:.22em;}
.plate figcaption span{opacity:.92;font-weight:500;}

/* stempel */
.stempel{
  position:absolute;top:-3.2rem;right:-1.6rem;width:132px;height:132px;z-index:3;
  transform:rotate(-9deg);pointer-events:none;filter:drop-shadow(1px 2px 4px rgba(51,32,27,.18));
}

/* ---------- secties ---------- */
.intro .kolommen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start;}
.intro .plate{margin-top:3.4rem;}
.renovatie{
  margin-top:2.2rem;padding:1.4rem 1.6rem;background:var(--rosa-diep);
  border:1px solid var(--tinta);max-width:var(--maat);
}
.renovatie p{font-weight:500;}

.villa-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin-top:3.4rem;}
.villa-grid .plate:nth-child(1){grid-column:1/8;}
.villa-grid .plate:nth-child(2){grid-column:8/13;}
.villa-grid .plate:nth-child(3){grid-column:1/5;}
.villa-grid .plate:nth-child(4){grid-column:5/9;}
.villa-grid .plate:nth-child(5){grid-column:9/13;}
.villa-grid .plate:nth-child(1) .kader{aspect-ratio:16/10;}
.villa-grid .plate:nth-child(2) .kader{aspect-ratio:16/10;}
.villa-grid .plate:nth-child(n+3) .kader{aspect-ratio:4/3.4;}

/* faciliteiten */
.fac{background:var(--rosa-diep);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.fac-kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);margin-top:2.6rem;}
.fac ul{list-style:none;}
.fac li{padding:.6rem 0;border-bottom:1px solid var(--hairline);font-size:.95rem;}
.fac li:first-child{border-top:2px solid var(--granate);}
.fac h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--granate);}

/* naamverhaal */
.naam{background:var(--granate-diep);color:var(--azahar);position:relative;overflow:hidden;}
.naam h2{color:var(--azahar);}
.naam .kolommen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center;}
.naam p{color:rgba(255,248,239,.88);}
.naam .plate .kader{border-color:var(--azahar);outline-color:var(--azahar);}
.naam .plate figcaption{background:var(--granate);}
.naam .accent{
  font-family:'Abril Fatface',serif;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.4;
  color:var(--miel);max-width:24em;margin-top:1.6rem;
}
.naam .zonlijn{color:var(--miel);}
.naam .zonlijn::before,.naam .zonlijn::after{background:rgba(255,248,239,.25);}

/* omgeving */
.omg-kolommen{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,5rem);align-items:start;margin-top:1rem;}
.afstanden{list-style:none;border-top:2px solid var(--granate);margin-top:2.4rem;}
.afstanden li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--hairline);
}
.afstanden .plaats{font-weight:650;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;}
.afstanden .lijn{flex:1;border-bottom:1px dotted var(--hairline);transform:translateY(-4px);}
.afstanden .km{font-variant-numeric:tabular-nums;font-weight:500;color:var(--bruin);font-size:.95rem;}
.omg-plates{display:grid;gap:2.2rem;}

/* tarifa */
.tarifa{background:var(--granate);color:var(--azahar);}
.tarifa-kop{text-align:center;margin-bottom:3rem;}
.tarifa-kop h2{color:var(--azahar);font-size:clamp(2.6rem,6vw,4.2rem);}
.tarifa-kop .onderkop{color:var(--miel);font-weight:600;font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;margin:.8rem auto 0;max-width:none;}
.sheet{
  background:var(--azahar);color:var(--tinta);
  border:1px solid var(--tinta);outline:1px solid var(--tinta);outline-offset:5px;
  box-shadow:0 18px 50px rgba(40,12,18,.45);
  padding:clamp(1.6rem,4vw,3.2rem);
  max-width:820px;margin:0 auto;
}
.sheet table{width:100%;border-collapse:collapse;}
.sheet caption{
  font-family:'Abril Fatface',serif;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--granate);
  padding-bottom:1.2rem;caption-side:top;text-align:left;
}
.sheet th{
  text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bruin);
  padding:.5rem .4rem;border-bottom:2px solid var(--granate);
}
.sheet td{padding:.78rem .4rem;border-bottom:1px solid var(--hairline);font-size:.98rem;}
.sheet tbody tr{transition:background .2s;}
.sheet tbody tr:hover{background:var(--rosa-diep);}
.sheet .seizoen{font-weight:650;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;}
.sheet .prijs{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;}
.sheet .hoog .prijs{color:var(--granate);}
.sheet tfoot td{border-bottom:none;padding-top:1.1rem;font-size:.82rem;color:var(--bruin);}
.tarifa-detail{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,4vw,3rem);
  max-width:980px;margin:3.6rem auto 0;
}
.tarifa-detail h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--miel);}
.tarifa-detail ul{list-style:none;}
.tarifa-detail li{padding:.5rem 0;border-bottom:1px solid rgba(255,248,239,.16);font-size:.92rem;color:rgba(255,248,239,.9);}
.tarifa-detail b{color:var(--azahar);font-weight:650;}

/* over ons / reserveren */
.boek{position:relative;padding:0;color:var(--azahar);}
.boek-beeld{position:absolute;inset:0;overflow:hidden;}
.boek-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;}
.boek-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,32,27,.68),rgba(51,32,27,.45) 45%,rgba(51,32,27,.78));}
.boek .wrap{position:relative;z-index:2;padding-top:clamp(5rem,10vw,8rem);padding-bottom:clamp(5rem,10vw,8rem);}
.boek h2{color:var(--azahar);}
.boek .kolommen{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,5rem);align-items:center;}
.boek p{color:rgba(255,248,239,.92);}
.boek .ondertekening{font-family:'Abril Fatface',serif;font-size:1.15rem;color:var(--miel);margin-top:1.4rem;}
.boek-kaart{
  background:var(--azahar);color:var(--tinta);
  border:1px solid var(--tinta);outline:1px solid var(--tinta);outline-offset:5px;
  box-shadow:0 18px 50px rgba(30,12,10,.5);
  padding:clamp(1.6rem,3.4vw,2.6rem);
}
.boek-kaart h3{font-family:'Abril Fatface',serif;font-size:1.5rem;color:var(--granate);margin-bottom:.8rem;}
.boek-kaart p{color:var(--tinta);}
.boek-kaart p.klein{color:var(--bruin);}
.boek-kaart .contactlijst{list-style:none;margin:1.4rem 0 1.8rem;}
.boek-kaart .contactlijst li{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--hairline);}
.boek-kaart .contactlijst svg{flex:0 0 auto;color:var(--granate);}
.boek-kaart .contactlijst a{font-weight:600;text-decoration:none;}
.boek-kaart .contactlijst a:hover{text-decoration:underline;}
.boek-kaart .knoppen{display:flex;flex-wrap:wrap;gap:.8rem;}

/* footer */
footer{background:var(--tinta);color:rgba(255,248,239,.78);padding:3.6rem 0 2.6rem;}
footer .kolommen{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);}
footer h3{font-family:'Abril Fatface',serif;color:var(--azahar);font-size:1.25rem;}
footer a{color:var(--rosa);}
footer ul{list-style:none;}
footer li{padding:.28rem 0;font-size:.92rem;}
.licentie{display:flex;align-items:center;gap:1rem;margin-top:1.2rem;}
.licentie img{width:54px;height:auto;background:var(--azahar);padding:4px;border-radius:2px;}
.credit{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,248,239,.18);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;
}
.credit a{color:var(--miel);}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s);}
.reveal.in{opacity:1;transform:none;}
.plate.reveal .kader img{transform:scale(1.045);transition:transform 1.4s var(--ease);transition-delay:var(--d,0s);}
.plate.reveal.in .kader img{transform:scale(1);}
.plate.reveal figcaption{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease);transition-delay:calc(var(--d,0s) + .25s);}
.plate.reveal.in figcaption{clip-path:inset(0 0 0 0);}
.hero-inhoud>*{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
body.klaar .hero-inhoud>*{opacity:1;transform:none;}
body.klaar .hero-inhoud>*:nth-child(2){transition-delay:.12s;}
body.klaar .hero-inhoud>*:nth-child(3){transition-delay:.24s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.plate.reveal .kader img,.plate.reveal figcaption,.hero-inhoud>*{
    opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;
  }
  *{animation:none !important;}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .masthead .wrap{flex-wrap:wrap;height:auto;row-gap:0;padding-top:.55rem;gap:1rem;}
  .masthead nav{order:3;width:100%;overflow-x:auto;gap:1.2rem;margin-left:0;padding-bottom:.55rem;scrollbar-width:none;}
  .masthead nav::-webkit-scrollbar{display:none;}
  .masthead nav a{white-space:nowrap;font-size:.74rem;padding:.15rem 0;}
  .masthead .knop{margin-left:auto;}
  .intro .kolommen,.naam .kolommen,.omg-kolommen,.boek .kolommen{grid-template-columns:1fr;}
  .villa-grid .plate{grid-column:1/13 !important;}
  .villa-grid .plate .kader{aspect-ratio:16/10 !important;}
  .fac-kolommen{grid-template-columns:1fr;}
  .tarifa-detail{grid-template-columns:1fr;}
  footer .kolommen{grid-template-columns:1fr;}
  .stempel{top:-2.6rem;right:.4rem;width:108px;height:108px;}
  .intro .plate{margin-top:2.2rem;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .hero{min-height:88vh;}
  .hero-beeld img{object-position:38% 62%;}
  .imprint{letter-spacing:.14em;font-size:.66rem;}
  .usp li{padding:0 .9rem;font-size:.72rem;}
  .sheet td{font-size:.9rem;padding:.68rem .3rem;}
  .sheet .seizoen{font-size:.74rem;}
  .masthead .wrap{gap:1rem;}
}