/* ==========================================================
   CAKE STUDIO BARCELONA v2 — shared tokens & primitives
   ========================================================== */

:root{
  --c-pink:#F3D7D9;
  --c-pink-deep:#EAB9BC;
  --c-cream:#FAF7F2;
  --c-cream-soft:#F5F0E9;
  --c-choco:#3A2B2B;
  --c-choco-soft:#5A4747;
  --c-white:#FFFDFB;
  --c-gold:#C9A46A;
  --c-gold-soft:#E0C99A;
  --c-line:rgba(58,43,43,.10);
  --c-line-strong:rgba(58,43,43,.28);
  --c-muted:#8a7878;

  --ff-display:"Cormorant Garamond","Italiana",Georgia,serif;
  --ff-body:"Inter","Helvetica Neue",sans-serif;

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:42px;

  --shadow-sm:0 6px 24px -8px rgba(58,43,43,.10);
  --shadow-md:0 18px 48px -16px rgba(58,43,43,.18);
  --shadow-lg:0 30px 80px -20px rgba(58,43,43,.22);

  --max-w:1280px;
  --gutter:clamp(20px,4vw,56px);
  --section-y:clamp(90px,11vw,160px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  font-weight:400;font-size:16px;line-height:1.6;
  color:var(--c-choco);
  background:var(--c-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}
address{font-style:normal}

.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y);position:relative;background:var(--c-white)}
.section-cream{background:var(--c-cream)}
.section-pink{background:linear-gradient(160deg,#F3D7D9 0%,#F8DEDF 60%,#FAF7F2 100%)}

/* Display typography */
.display-h1,.display-h2{
  font-family:var(--ff-display);
  font-weight:400;letter-spacing:-.01em;
  color:var(--c-choco);line-height:1.02;
}
.display-h1{font-size:clamp(46px,8vw,124px);line-height:.94;letter-spacing:-.025em}
.display-h2{font-size:clamp(34px,5.4vw,76px);line-height:1.04}
.display-h1 em,.display-h2 em{font-style:italic;font-weight:400}
.display-h1.light,.display-h2.light{color:var(--c-white)}
.display-h2.dark{color:var(--c-choco)}

.eyebrow{
  display:inline-block;
  font-family:var(--ff-body);
  font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-choco-soft);
  margin-bottom:22px;
}
.eyebrow-dark{color:var(--c-choco)}
.eyebrow-light{color:var(--c-white);opacity:.85}

.lead{
  font-size:clamp(16px,1.4vw,18px);
  color:var(--c-choco-soft);
  max-width:42ch;line-height:1.65;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;
  font-size:14px;font-weight:500;letter-spacing:.01em;
  border-radius:999px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.btn-sm{padding:10px 18px;font-size:13px}
.btn-dark{
  background:var(--c-choco);color:var(--c-white);
  box-shadow:0 14px 30px -14px rgba(58,43,43,.55);
}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(58,43,43,.7);background:#2a1f1f}
.btn-ghost{
  background:transparent;color:var(--c-choco);
  border:1px solid var(--c-line-strong);
}
.btn-ghost:hover{background:var(--c-choco);color:var(--c-white);border-color:var(--c-choco)}
.btn-light{
  background:var(--c-white);color:var(--c-choco);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.4);
}
.btn-light:hover{transform:translateY(-2px);background:var(--c-cream)}
.btn-gold{
  background:var(--c-gold);color:var(--c-choco);
  box-shadow:0 14px 30px -14px rgba(201,164,106,.55);
}
.btn-gold:hover{transform:translateY(-2px);background:var(--c-gold-soft)}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* Focus */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible{
  outline:2px solid var(--c-gold);outline-offset:3px;border-radius:6px;
}

/* Section head helpers (shared) */
.section-head{max-width:760px;margin:0 auto 80px;text-align:center}
.section-head-row{
  display:flex;justify-content:space-between;align-items:baseline;
  text-align:left;max-width:none;gap:40px;flex-wrap:wrap;margin-bottom:60px;
}
.section-sub{margin-top:24px;font-size:16px;color:var(--c-choco-soft);line-height:1.7;max-width:42ch}

/* Stars (shared) */
.stars,.t-stars{display:inline-flex;gap:3px}
.stars svg,.t-stars svg{width:16px;height:16px;fill:var(--c-gold)}
.t-stars svg{width:18px;height:18px}
.t-stars.sm svg{width:14px;height:14px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
}
/* ==========================================================
   11 — Site header + floating WhatsApp
   ========================================================== */

/* Reserve scroll padding so anchors don't slide under fixed header */
html{scroll-padding-top:88px}

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  padding-block:18px;
  background:transparent;
  transition:
    background .35s var(--ease),
    backdrop-filter .35s var(--ease),
    padding-block .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}

/* Scrolled state — applied by global JS toggling .scrolled */
.site-header.scrolled{
  background:rgba(255,253,251,.85);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
          backdrop-filter:saturate(140%) blur(14px);
  padding-block:10px;
  border-bottom-color:var(--c-line);
  box-shadow:0 6px 24px -18px rgba(58,43,43,.18);
}

/* Layout grid: brand · nav · cta · toggle */
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:32px;
}

/* ─── Brand ─── */
.brand{
  position:relative;
  font-family:var(--ff-display);
  font-size:26px;line-height:1;
  color:var(--c-choco);
  display:inline-flex;align-items:baseline;gap:.18em;
  padding:6px 2px;
  letter-spacing:-.01em;
}
.brand-cake{font-style:italic;font-weight:500}
.brand-studio em{
  font-style:italic;font-weight:500;
  color:var(--c-gold);
  letter-spacing:.005em;
}
.brand-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--c-gold);
  align-self:center;margin-left:4px;
  transition:transform .4s var(--ease);
}
.brand:hover .brand-dot{transform:scale(1.6) rotate(45deg)}
.brand:hover .brand-studio em{color:var(--c-gold-soft)}

/* ─── Desktop nav ─── */
.nav-desktop{justify-self:center}
.nav-desktop ul{
  display:flex;align-items:center;gap:38px;
}
.nav-desktop a{
  position:relative;
  font-family:var(--ff-body);
  font-size:13.5px;font-weight:500;
  letter-spacing:.04em;
  color:var(--c-choco);
  padding:8px 2px;
  transition:color .3s var(--ease);
}
.nav-desktop a::after{
  content:"";
  position:absolute;
  left:2px;right:2px;bottom:2px;
  height:1px;
  background:var(--c-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.nav-desktop a:hover{color:var(--c-choco-soft)}
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after{transform:scaleX(1)}

/* ─── Inline CTA (smaller, refined) ─── */
.header-cta{
  padding:9px 16px;
  font-size:12.5px;
  letter-spacing:.04em;
  border-color:var(--c-line);
}
.header-cta svg{transition:transform .35s var(--ease)}
.header-cta:hover svg{transform:translateX(3px)}

/* ─── Mobile toggle (hidden on desktop) ─── */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  position:relative;
  border-radius:999px;
  transition:background .3s var(--ease);
}
.nav-toggle:hover{background:rgba(58,43,43,.06)}
.nav-toggle span{
  position:absolute;
  left:50%;
  width:20px;height:1.6px;
  background:var(--c-choco);
  border-radius:2px;
  transform:translateX(-50%);
  transition:transform .35s var(--ease),opacity .25s var(--ease),top .35s var(--ease);
}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
.nav-toggle.open span:nth-child(1){top:21px;transform:translateX(-50%) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:21px;transform:translateX(-50%) rotate(-45deg)}

/* ─── Mobile full-screen overlay nav ─── */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:75;
  background:var(--c-cream);
  padding:96px var(--gutter) 40px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .35s;
  overflow-y:auto;
}
.mobile-nav.open{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear 0s;
}
.mobile-nav-inner{
  max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;
  min-height:calc(100vh - 140px);
}
.mobile-nav ul{
  display:flex;flex-direction:column;
  gap:6px;
  border-top:1px solid var(--c-line);
  padding-top:24px;
}
.mobile-nav li{
  border-bottom:1px solid var(--c-line);
}
.mobile-nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4px;
  font-family:var(--ff-display);
  font-size:32px;line-height:1.1;
  color:var(--c-choco);
  letter-spacing:-.01em;
  transition:color .3s var(--ease),padding-left .35s var(--ease);
}
.mobile-nav a em{font-style:italic;font-weight:400}
.mobile-nav a::after{
  content:"→";
  font-family:var(--ff-body);
  font-size:18px;
  color:var(--c-gold);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible{
  color:var(--c-gold);
  padding-left:8px;
}
.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after{opacity:1;transform:translateX(0)}

/* Stagger fade-in of items when nav opens */
.mobile-nav li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobile-nav.open li{opacity:1;transform:none}
.mobile-nav.open li:nth-child(1){transition-delay:.08s}
.mobile-nav.open li:nth-child(2){transition-delay:.14s}
.mobile-nav.open li:nth-child(3){transition-delay:.20s}
.mobile-nav.open li:nth-child(4){transition-delay:.26s}
.mobile-nav.open li:nth-child(5){transition-delay:.32s}

.mobile-nav-foot{
  margin-top:auto;
  padding-top:36px;
  display:flex;flex-direction:column;gap:18px;
}
.mobile-cta{
  width:100%;
  justify-content:center;
  padding:18px 22px;
  font-size:14px;
}
.mobile-nav-meta{
  font-size:12.5px;
  letter-spacing:.04em;
  line-height:1.7;
  color:var(--c-choco-soft);
  text-align:center;
}
.mobile-nav-meta a{
  color:var(--c-choco);
  border-bottom:1px solid var(--c-line);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.mobile-nav-meta a:hover{color:var(--c-gold);border-color:var(--c-gold)}

/* Lock scroll while mobile nav is open (cooperatively — JS adds .nav-open on body) */
body.nav-open{overflow:hidden}

/* ─── Floating WhatsApp ─── */
.float-wa{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 40px -12px rgba(37,211,102,.55),0 6px 18px -6px rgba(0,0,0,.18);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.float-wa:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 26px 50px -14px rgba(37,211,102,.65),0 8px 22px -6px rgba(0,0,0,.22);
}
.float-wa svg{position:relative;z-index:2}

.float-wa-ring{
  position:absolute;inset:0;
  border-radius:50%;
  background:#25D366;
  z-index:1;
  animation:wa-pulse 2.4s var(--ease) infinite;
}
@keyframes wa-pulse{
  0%  {transform:scale(1);   opacity:.55}
  70% {transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* ─── Responsive ─── */
@media (max-width:1080px){
  .header-inner{
    grid-template-columns:auto 1fr auto;
    gap:20px;
  }
  .nav-desktop ul{gap:26px}
}

@media (max-width:880px){
  html{scroll-padding-top:74px}
  .site-header{padding-block:14px}
  .site-header.scrolled{padding-block:10px}
  .header-inner{
    grid-template-columns:auto 1fr auto;
    gap:12px;
  }
  .nav-desktop,
  .header-cta{display:none}
  .nav-toggle{display:block;justify-self:end}
  .brand{font-size:23px}
}

@media (max-width:560px){
  .float-wa{
    width:50px;height:50px;
    right:18px;bottom:18px;
  }
  .float-wa svg{width:23px;height:23px}
  .mobile-nav a{font-size:28px;padding:16px 4px}
  .mobile-nav{padding-top:84px}
  .brand{font-size:21px}
}

/* Reduced motion — kill the pulse */
@media (prefers-reduced-motion:reduce){
  .float-wa-ring{animation:none;opacity:0}
  .site-header,.mobile-nav,.nav-desktop a::after,.nav-toggle span{
    transition:none;
  }
}
/* ============================================================
   HERO — Cake Studio BCN
   Cinematic, editorial, layered. Vogue × Parisian patisserie.
   ============================================================ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding-top:clamp(110px,14vh,160px);
  padding-bottom:clamp(80px,10vh,120px);
  background:
    radial-gradient(120% 80% at 80% 0%, #FBE9EB 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, #F8F0E2 0%, transparent 55%),
    var(--c-white);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  /* Subtle grain / paper texture cue */
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(58,43,43,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}

/* ---------- Decorative blobs ---------- */
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  animation:hero-float 14s ease-in-out infinite;
}
.hero-blob--pink{
  width:520px; height:520px;
  top:-160px; right:-120px;
  background:radial-gradient(circle, var(--c-pink) 0%, transparent 70%);
}
.hero-blob--gold{
  width:380px; height:380px;
  bottom:120px; left:-140px;
  background:radial-gradient(circle, var(--c-gold-soft) 0%, transparent 70%);
  opacity:.4;
  animation-delay:-5s;
}
.hero-blob--cream{
  width:300px; height:300px;
  top:40%; left:42%;
  background:radial-gradient(circle, var(--c-cream-soft) 0%, transparent 70%);
  opacity:.6;
  animation-delay:-9s;
}
@keyframes hero-float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-30px) scale(1.05)}
}

/* ---------- Side editorial label ---------- */
.hero-side{
  position:absolute;
  left:28px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-body);
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--c-choco-soft);
  z-index:3;
  white-space:nowrap;
}
.hero-side-line{
  display:block; width:46px; height:1px;
  background:var(--c-choco-soft);
  opacity:.5;
}

/* ---------- Rotating gold seal ---------- */
.hero-seal{
  position:absolute;
  top:clamp(120px,16vh,180px);
  right:clamp(28px,5vw,72px);
  width:130px; height:130px;
  z-index:4;
  pointer-events:none;
}
.hero-seal-ring{
  width:100%; height:100%;
  animation:hero-rotate 22s linear infinite;
}
.hero-seal-text{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:.18em;
  fill:var(--c-gold);
  text-transform:uppercase;
}
.hero-seal-mark{
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:var(--c-gold);
}
.hero-seal-mark svg{ width:32px; height:32px }
@keyframes hero-rotate{ to{ transform:rotate(360deg) } }

/* ---------- Grid ---------- */
.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}

/* ---------- Copy column ---------- */
.hero-copy{ max-width:600px }
.hero-title{
  margin-top:8px;
  font-size:clamp(48px,7.4vw,112px);
  line-height:.94;
  color:var(--c-choco);
}
.hero-title em{
  font-style:italic;
  color:var(--c-gold);
  font-weight:400;
  white-space:nowrap;
}
.hero-title-row{ display:block }
.hero-title-row--in{ padding-left:clamp(40px,7vw,90px) }
.hero-place{
  position:relative;
  font-style:italic;
  display:inline-block;
}
.hero-place::after{
  content:"";
  position:absolute; left:2%; right:2%; bottom:.06em; height:.16em;
  background:linear-gradient(90deg,transparent, var(--c-pink-deep) 30%, var(--c-pink-deep) 70%, transparent);
  opacity:.55;
  z-index:-1;
  border-radius:6px;
}

.hero-sub{
  margin-top:32px;
  max-width:46ch;
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.6;
  color:var(--c-choco-soft);
}

/* Proof row */
.hero-proof{
  margin-top:32px;
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
}
.hero-proof-rating{ display:inline-flex; align-items:baseline; gap:8px }
.hero-proof-num{
  font-family:var(--ff-display);
  font-size:34px; line-height:1;
  color:var(--c-choco);
  font-weight:500;
  letter-spacing:-.02em;
}
.hero-proof-slash{
  font-family:var(--ff-display);
  font-size:18px; color:var(--c-choco-soft);
  margin-right:6px;
}
.hero-proof-divider{
  display:block; width:1px; height:22px;
  background:var(--c-line-strong); opacity:.5;
}
.hero-proof-text{
  font-size:13px;
  color:var(--c-choco-soft);
  letter-spacing:.02em;
}
.hero-proof-text strong{ color:var(--c-choco); font-weight:600 }

/* CTAs */
.hero-cta{
  margin-top:36px;
  display:flex; gap:14px; flex-wrap:wrap;
}

/* Meta line */
.hero-meta{
  margin-top:42px;
  display:flex; gap:22px; flex-wrap:wrap;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--c-muted);
}
.hero-meta li{ display:inline-flex; align-items:center; gap:8px }
.hero-meta-dot{
  display:inline-block; width:5px; height:5px;
  background:var(--c-gold);
  border-radius:50%;
}

/* ---------- Stage (image collage) ---------- */
.hero-stage{
  position:relative;
  aspect-ratio: 0.92 / 1;
  min-height:520px;
}

.hero-card{
  position:absolute;
  overflow:hidden;
  background:var(--c-cream);
  box-shadow:var(--shadow-lg);
  transition:transform .9s var(--ease), box-shadow .6s var(--ease);
}
.hero-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease), filter .8s var(--ease);
}
.hero-card:hover img{ transform:scale(1.05) }

.hero-card-caption{
  position:absolute;
  left:18px; bottom:18px; right:18px;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--ff-display);
  color:var(--c-white);
  font-size:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  pointer-events:none;
}
.hero-card-num{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  font-family:var(--ff-body);
  font-weight:500;
  background:rgba(255,253,251,.92);
  color:var(--c-choco);
  padding:5px 10px;
  border-radius:99px;
  text-shadow:none;
}
.hero-card-name{
  font-style:italic;
  font-size:15px;
}

/* MAIN — large, organic, vertical, top-right */
.hero-card--main{
  width:74%;
  height:88%;
  top:0;
  right:0;
  border-radius: 60% 60% 48% 48% / 38% 38% 52% 52%;
  animation:hero-bob 9s ease-in-out infinite;
}

/* SMALL — square-ish circle, floating bottom-left */
.hero-card--small{
  width:46%;
  height:42%;
  bottom:14%;
  left:-4%;
  border-radius: 52% 48% 60% 40% / 45% 55% 45% 55%;
  z-index:2;
  box-shadow:var(--shadow-md), 0 0 0 8px var(--c-white);
  animation:hero-bob 11s ease-in-out infinite;
  animation-delay:-3s;
}

/* ACCENT — small organic pebble, top-left, with gold ring */
.hero-card--accent{
  width:30%;
  height:26%;
  top:6%;
  left:0;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  box-shadow:var(--shadow-sm), 0 0 0 1px var(--c-gold-soft);
  animation:hero-bob 13s ease-in-out infinite;
  animation-delay:-6s;
}

@keyframes hero-bob{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  50%{ transform:translateY(-10px) rotate(.4deg) }
}

/* Floating chip (quote) */
.hero-chip{
  position:absolute;
  left:-2%;
  top:8%;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:99px;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:14px;
  color:var(--c-choco);
  box-shadow:var(--shadow-sm);
  z-index:5;
}
.hero-chip svg{ color:var(--c-gold); flex:none }

/* Pill (bottom right of stage) */
.hero-pill{
  position:absolute;
  right:-2%;
  bottom:4%;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--c-choco);
  color:var(--c-white);
  border-radius:99px;
  font-size:12px;
  letter-spacing:.06em;
  box-shadow:var(--shadow-md);
  z-index:5;
}
.hero-pill-k{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:14px;
  color:var(--c-gold-soft);
}
.hero-pill-v{ opacity:.85 }

/* ---------- Scroll cue ---------- */
.hero-scroll{
  position:absolute;
  left:50%;
  bottom:78px;
  transform:translateX(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--ff-body);
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--c-choco-soft);
  z-index:3;
}
.hero-scroll-line{
  width:1px; height:48px;
  background:linear-gradient(var(--c-choco), transparent);
  position:relative; overflow:hidden;
}
.hero-scroll-line::after{
  content:"";
  position:absolute; left:0; top:-50%;
  width:100%; height:50%;
  background:var(--c-gold);
  animation:hero-scroll 2.4s var(--ease) infinite;
}
@keyframes hero-scroll{
  0%{ top:-50%; opacity:0 }
  30%{ opacity:1 }
  100%{ top:100%; opacity:0 }
}

/* ---------- Italic marquee tagline ---------- */
.hero-marquee{
  position:absolute;
  left:0; right:0; bottom:0;
  padding-block:20px;
  border-top:1px solid var(--c-line);
  background:linear-gradient(180deg, transparent 0%, rgba(255,253,251,.85) 60%);
  overflow:hidden;
  z-index:2;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.hero-marquee-track{
  display:flex; align-items:center; gap:36px;
  width:max-content;
  animation:hero-marquee 38s linear infinite;
}
.hero-marquee-item{
  font-family:var(--ff-display);
  font-size:clamp(22px,2.4vw,30px);
  line-height:1;
  color:var(--c-choco);
  white-space:nowrap;
}
.hero-marquee-item em{
  font-style:italic;
  font-weight:400;
}
.hero-marquee-item:nth-child(4n+1) em{ color:var(--c-gold) }
.hero-marquee-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c-pink-deep);
  flex:none;
  opacity:.8;
}
@keyframes hero-marquee{
  to{ transform:translateX(-50%) }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .hero{
    padding-top:clamp(96px,14vh,140px);
    min-height:auto;
  }
  .hero-grid{
    grid-template-columns: 1fr;
    gap:60px;
  }
  .hero-side{ display:none }
  .hero-seal{
    top:auto;
    bottom:auto;
    right:24px;
    top:96px;
    width:96px; height:96px;
  }
  .hero-seal-mark svg{ width:24px; height:24px }
  .hero-title{ font-size:clamp(46px,10vw,72px) }
  .hero-title-row--in{ padding-left:clamp(28px,8vw,60px) }
  .hero-stage{
    min-height:auto;
    aspect-ratio: 1 / 1;
    max-width:560px;
    margin-inline:auto;
    width:100%;
  }
  .hero-card--main{ width:72%; height:84% }
  .hero-card--small{ width:48%; height:42%; left:-2% }
  .hero-card--accent{ width:30%; height:24% }
  .hero-scroll{ display:none }
  .hero-blob--pink{ width:380px; height:380px; top:-100px; right:-160px }
  .hero-blob--gold{ width:280px; height:280px; left:-160px }
}

@media (max-width:560px){
  .hero{
    padding-top:96px;
    padding-bottom:140px;
  }
  .hero-seal{
    width:78px; height:78px;
    right:16px;
    top:84px;
  }
  .hero-seal-text{ font-size:9px; letter-spacing:.14em }
  .hero-seal-mark svg{ width:20px; height:20px }

  .hero-title{
    font-size:clamp(44px,12vw,58px);
    line-height:.96;
  }
  .hero-title em{ white-space:normal }
  .hero-title-row--in{ padding-left:0 }

  .hero-sub{
    margin-top:24px;
    font-size:15px;
  }

  .hero-proof{
    margin-top:26px;
    gap:12px;
  }
  .hero-proof-num{ font-size:28px }

  .hero-cta{
    margin-top:28px;
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-cta .btn{
    justify-content:center;
    width:100%;
  }

  .hero-meta{
    margin-top:30px;
    gap:14px;
    font-size:11px;
  }

  .hero-stage{ aspect-ratio: 0.95 / 1 }
  .hero-card--main{
    width:80%; height:80%;
    top:4%; right:0;
  }
  .hero-card--small{
    width:54%; height:44%;
    bottom:6%; left:-4%;
  }
  .hero-card--accent{
    width:34%; height:24%;
    top:0; left:2%;
  }
  .hero-card-caption{
    left:12px; bottom:12px; right:12px;
  }
  .hero-card-num{ font-size:9px; padding:4px 8px }
  .hero-card-name{ font-size:13px }

  .hero-chip{
    top:2%;
    font-size:12px;
    padding:8px 12px;
  }
  .hero-pill{
    right:-2%; bottom:0;
    padding:10px 14px;
    font-size:11px;
  }
  .hero-pill-k{ font-size:13px }

  .hero-marquee{ padding-block:14px }
  .hero-marquee-item{ font-size:18px }
  .hero-marquee-track{ gap:24px }
}
/* ==========================================================
   02 · ABOUT — El estudio (cream)
   Editorial split: copy / numbered manifest + layered visual
   ========================================================== */

.about{
  position:relative;
  overflow:hidden;
}

/* subtle paper grain feel using two soft radial washes */
.about::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 8% 12%, rgba(243,215,217,.35) 0%, transparent 60%),
    radial-gradient(40% 30% at 92% 88%, rgba(201,164,106,.10) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}

.about__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(48px,7vw,120px);
  align-items:center;
}

/* ---------- LEFT — copy column ---------- */
.about__copy{
  max-width:560px;
}

.about__title{
  margin-bottom:32px;
}
.about__title em{
  color:var(--c-gold);
  font-style:italic;
  display:inline;
}

.about__lead{
  max-width:46ch;
  margin-bottom:56px;
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.7;
}

/* numbered manifest */
.about__list{
  border-top:1px solid var(--c-line);
  margin-bottom:48px;
}
.about__item{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:24px;
  align-items:start;
  padding:26px 0 24px;
  border-bottom:1px solid var(--c-line);
  transition:background .35s var(--ease);
}
.about__item:hover{
  background:linear-gradient(90deg,rgba(201,164,106,.05) 0%,transparent 70%);
}

.about__num{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(34px,3.4vw,44px);
  line-height:1;
  color:var(--c-gold);
  letter-spacing:-.01em;
  -webkit-text-stroke:.5px var(--c-gold);
  display:inline-block;
  padding-top:4px;
  position:relative;
}
.about__num::after{
  content:"";
  position:absolute;
  right:18px;top:50%;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--c-gold);
  opacity:.55;
  transform:translateY(-50%);
}

.about__item-title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(22px,1.9vw,26px);
  letter-spacing:-.005em;
  color:var(--c-choco);
  margin-bottom:6px;
  line-height:1.15;
}
.about__item-text{
  font-size:15px;
  line-height:1.65;
  color:var(--c-choco-soft);
  max-width:42ch;
}

/* signature row */
.about__signature{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--ff-body);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--c-choco-soft);
}
.about__sig-line{
  width:48px;
  height:1px;
  color:var(--c-gold);
  opacity:.7;
}
.about__sig-text{
  font-weight:500;
  color:var(--c-choco);
}
.about__sig-text em{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  color:var(--c-gold);
  font-size:15px;
}
.about__sig-since{
  margin-left:auto;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-muted);
}

/* ---------- RIGHT — visual ---------- */
.about__visual{
  position:relative;
  aspect-ratio:5/6;
  width:100%;
  max-width:560px;
  justify-self:end;
}

.about__main-frame{
  position:relative;
  width:88%;
  height:100%;
  margin-left:auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--c-cream-soft);
  isolation:isolate;
}
.about__main-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease), filter .8s var(--ease);
  filter:saturate(.96) contrast(1.02);
}
.about__visual:hover .about__main-img{
  transform:scale(1.04);
}

.about__main-caption{
  position:absolute;
  left:22px;bottom:22px;
  z-index:3;
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-white);
  background:rgba(58,43,43,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:8px 14px;
  border-radius:999px;
}
.about__main-caption em{
  font-family:var(--ff-display);
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  color:var(--c-gold-soft);
  font-size:13px;
  margin-right:6px;
}

/* pill — open atelier */
.about__pill{
  position:absolute;
  top:18px;left:18px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 12px;
  background:rgba(255,253,251,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:999px;
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-choco);
  box-shadow:var(--shadow-sm);
}
.about__pill-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-gold);
  box-shadow:0 0 0 4px rgba(201,164,106,.18);
  animation:about-pulse 2.6s var(--ease) infinite;
}
@keyframes about-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(201,164,106,.18)}
  50%{box-shadow:0 0 0 7px rgba(201,164,106,.04)}
}

/* floating accent — overlapping cutout */
.about__float-frame{
  position:absolute;
  left:-4%;
  bottom:-6%;
  width:46%;
  aspect-ratio:4/5;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  border:6px solid var(--c-cream);
  transform:rotate(-3.5deg);
  transition:transform .8s var(--ease);
  z-index:2;
}
.about__visual:hover .about__float-frame{
  transform:rotate(-1.5deg) translateY(-4px);
}
.about__float-img{
  width:100%;height:100%;
  object-fit:cover;
}

/* "since 2018" italic display */
.about__since{
  position:absolute;
  top:8%;
  left:-2%;
  z-index:1;
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px,3.2vw,42px);
  color:var(--c-gold);
  letter-spacing:-.01em;
  line-height:1;
  opacity:.85;
  transform:rotate(-90deg);
  transform-origin:left top;
  white-space:nowrap;
}
.about__since em{
  font-style:italic;
  color:var(--c-choco-soft);
  margin-right:4px;
  font-size:.7em;
  letter-spacing:.02em;
}

/* decorative blobs */
.about__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  z-index:0;
  pointer-events:none;
}
.about__blob--pink{
  width:200px;height:200px;
  background:rgba(243,215,217,.65);
  top:-30px;right:-40px;
}
.about__blob--gold{
  width:160px;height:160px;
  background:rgba(201,164,106,.18);
  bottom:-30px;right:18%;
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .about__inner{
    gap:60px;
  }
  .about__visual{max-width:480px}
}

@media (max-width:880px){
  .about__inner{
    grid-template-columns:1fr;
    gap:64px;
  }
  .about__copy{
    max-width:none;
    order:2;
  }
  .about__visual{
    order:1;
    max-width:520px;
    margin:0 auto;
    aspect-ratio:4/5;
  }
  .about__main-frame{width:84%}
  .about__lead{margin-bottom:40px}
  .about__list{margin-bottom:36px}
  .about__since{
    top:6%;
    font-size:32px;
  }
}

@media (max-width:560px){
  .about__item{
    grid-template-columns:64px 1fr;
    gap:16px;
    padding:22px 0;
  }
  .about__num{font-size:32px}
  .about__num::after{display:none}
  .about__item-title{font-size:20px}
  .about__main-caption{
    left:14px;bottom:14px;
    font-size:10px;
    padding:6px 11px;
  }
  .about__pill{
    top:12px;left:12px;
    font-size:10px;
    padding:6px 12px 6px 10px;
  }
  .about__float-frame{
    width:50%;
    border-width:5px;
    left:-6%;
  }
  .about__signature{
    flex-wrap:wrap;
    gap:10px;
  }
  .about__sig-since{margin-left:0}
  .about__since{display:none}
}
/* ============================================================
   SERVICES — "Qué hacemos"
   White section, 4 service cards, editorial pastry-atelier feel
   ============================================================ */

.svc-section {
  background: var(--c-white);
  position: relative;
  overflow: hidden;
}

/* soft pink wash, top-right, decorative */
.svc-section::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(243, 215, 217, .55), rgba(243, 215, 217, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* faint gold hairline below the heading */
.svc-section::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom,
              transparent, var(--c-gold-soft));
  transform: translateX(-50%);
  opacity: .6;
  pointer-events: none;
}

.svc-section .container { position: relative; z-index: 1; }

/* ---------- Section head ---------- */
.svc-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 84px);
}

.svc-title {
  margin: 14px 0 18px;
  color: var(--c-choco);
  letter-spacing: -.01em;
}
.svc-title em {
  font-style: italic;
  color: var(--c-gold);
}

.svc-sub {
  color: var(--c-choco-soft);
  font-size: 16px;
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto;
}

/* ---------- Grid ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ---------- Card ---------- */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 28px 30px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition:
    background .55s var(--ease),
    border-color .55s var(--ease),
    box-shadow .55s var(--ease),
    transform .55s var(--ease);
  overflow: hidden;
  isolation: isolate;
  transition-delay: var(--d, 0s);
}

/* a soft top hairline accent that grows on hover */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, var(--c-gold-soft), transparent);
  transform: scaleX(.2);
  transform-origin: left center;
  opacity: 0;
  transition: opacity .5s var(--ease), transform .8s var(--ease);
}

.svc-card:hover {
  background: var(--c-white);
  border-color: rgba(201, 164, 106, .35);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.svc-card:hover::before { opacity: 1; transform: scaleX(1); }

/* number — top-right, faint serif */
.svc-num {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--c-gold);
  letter-spacing: .05em;
  opacity: .8;
}

/* icon container */
.svc-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  color: var(--c-choco);
  margin-bottom: 26px;
  transition:
    background .5s var(--ease),
    border-color .5s var(--ease),
    color .5s var(--ease),
    transform .8s var(--ease);
}
.svc-card:hover .svc-icon {
  background: var(--c-pink);
  border-color: rgba(201, 164, 106, .4);
  color: var(--c-choco);
  transform: rotate(-3deg) scale(1.04);
}

/* svg sizing safety */
.svc-icon svg { display: block; }

/* name */
.svc-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(22px, 1.4vw + 14px, 26px);
  line-height: 1.15;
  color: var(--c-choco);
  margin: 0 0 12px;
  letter-spacing: -.005em;
}
.svc-name em {
  font-style: italic;
  color: var(--c-gold);
  font-weight: 500;
}

/* description */
.svc-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-choco-soft);
  margin: 0 0 26px;
  flex: 1;
}

/* footer of card */
.svc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px dashed var(--c-line);
}

.svc-tag {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--c-gold);
}

.svc-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  color: var(--c-choco-soft);
  transition:
    background .4s var(--ease),
    color .4s var(--ease),
    border-color .4s var(--ease),
    transform .5s var(--ease);
}
.svc-card:hover .svc-arrow {
  background: var(--c-choco);
  color: var(--c-white);
  border-color: var(--c-choco);
  transform: translateX(3px);
}

/* ---------- Footer note ---------- */
.svc-note {
  margin: clamp(48px, 5vw, 72px) auto 0;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(16px, 1.1vw + 10px, 19px);
  line-height: 1.55;
  color: var(--c-choco-soft);
  max-width: 640px;
}
.svc-note-mark {
  color: var(--c-gold);
  margin-right: 10px;
  font-style: normal;
  letter-spacing: .4em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .svc-card { padding: 32px 26px 26px; }
}

@media (max-width: 720px) {
  .svc-head { margin-bottom: 44px; }
  .svc-sub  { font-size: 15px; }
}

@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-card { padding: 30px 24px 24px; }
  .svc-icon { width: 56px; height: 56px; margin-bottom: 22px; }
  .svc-icon svg { width: 30px; height: 30px; }
  .svc-num  { font-size: 15px; top: 18px; right: 20px; }
  .svc-name { font-size: 22px; }
  .svc-text { font-size: 14px; }
  .svc-section::before { width: 360px; height: 360px;
                          top: -120px; right: -140px; }
}

/* respect reduced-motion: don't slide cards */
@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card::before,
  .svc-icon,
  .svc-arrow { transition: none; }
  .svc-card:hover { transform: none; }
}
/* ==========================================================
   04 — EXPERIENCE  (pink editorial spread + image strip)
   ========================================================== */

.experience{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* override the default --section-y so the strip can breathe */
  padding-block:clamp(100px,12vw,170px) clamp(80px,9vw,130px);
}

/* gentle vignette over the pink gradient */
.experience::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(255,253,251,.55), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(234,185,188,.35), transparent 70%);
  pointer-events:none;z-index:0;
}
.experience > .container,
.experience > .exp-strip-wrap{position:relative;z-index:1}

/* ── Decorative ornaments ───────────────────────────────── */
.exp-ornament{
  position:absolute;
  color:var(--c-gold);
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
.exp-ornament svg{width:100%;height:100%;display:block}
.exp-ornament-1{
  top:6%;right:6%;
  width:clamp(80px,10vw,140px);height:clamp(80px,10vw,140px);
  animation:exp-spin 60s linear infinite;
}
.exp-ornament-2{
  bottom:30%;left:4%;
  width:clamp(40px,5vw,68px);height:clamp(40px,5vw,68px);
  opacity:.45;
}
@keyframes exp-spin{to{transform:rotate(360deg)}}

/* ── Editorial 2-column grid ────────────────────────────── */
.exp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,7vw,120px);
  align-items:start;
  margin-bottom:clamp(70px,9vw,130px);
}

/* ── Left: heading ──────────────────────────────────────── */
.exp-head{position:relative}
.exp-title{
  margin-top:6px;
  color:var(--c-choco);
}
.exp-title em{
  font-style:italic;
  color:var(--c-gold);
  position:relative;
  display:inline-block;
}
.exp-title em::after{
  content:"";
  position:absolute;
  left:2%;right:6%;
  bottom:.05em;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--c-gold-soft) 30%,var(--c-gold-soft) 70%,transparent);
  opacity:.55;
}
.exp-mark{
  display:inline-block;
  margin-top:36px;
  width:42px;height:42px;
  color:var(--c-gold);
}
.exp-mark svg{width:100%;height:100%}

/* ── Right: blockquote ──────────────────────────────────── */
.exp-quote{
  position:relative;
  padding-top:18px;
  padding-left:clamp(0px,3vw,40px);
}
.exp-quotemark{
  position:absolute;
  left:-6px;top:-44px;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:160px;
  line-height:1;
  color:var(--c-gold);
  opacity:.45;
  user-select:none;
  pointer-events:none;
}
.exp-quote blockquote{border:0;margin:0;padding:0}
.exp-quote blockquote p{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.32;
  letter-spacing:-.005em;
  color:var(--c-choco);
  max-width:24ch;
}
.exp-quote blockquote p em{
  font-style:italic;
  color:var(--c-gold);
  white-space:nowrap;
}

/* signature */
.exp-sign{margin-top:clamp(36px,4.5vw,56px)}
.exp-divider{
  display:block;
  width:64px;height:1px;
  background:var(--c-gold);
  margin-bottom:18px;
  opacity:.85;
}
.exp-sign-name{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(24px,2.2vw,28px);
  line-height:1;
  color:var(--c-choco);
  margin-bottom:6px;
}
.exp-sign-role{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-choco-soft);
}
.exp-sign-role .dot{margin:0 6px;color:var(--c-gold)}

/* ── Edge-to-edge image strip (bleeds slightly) ─────────── */
.exp-strip-wrap{
  position:relative;
  width:calc(100% + 24px);
  margin-left:-12px;
  padding-inline:clamp(8px,2vw,24px);
  overflow:hidden;
}
.exp-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:1fr;
  gap:clamp(10px,1.4vw,20px);
  align-items:end;
  list-style:none;
}
.exp-card{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:var(--c-cream);
  transform:translateY(0);
  transition:transform .65s var(--ease),box-shadow .65s var(--ease);
  isolation:isolate;
}
.exp-card-normal{aspect-ratio:3/4}
.exp-card-tall{aspect-ratio:3/4.6;transform:translateY(-28px)}

.exp-card figure{
  position:relative;
  width:100%;height:100%;
  margin:0;
  overflow:hidden;
}
.exp-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease),filter .6s var(--ease);
  filter:saturate(1) contrast(1.02);
}

/* caption overlay — hidden by default */
.exp-card figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px 18px 16px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,transparent 0%,rgba(58,43,43,.0) 30%,rgba(58,43,43,.78) 100%);
  color:var(--c-white);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.cap-num{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:22px;
  line-height:1;
  color:var(--c-gold-soft);
  letter-spacing:.01em;
}
.cap-text{
  font-family:var(--ff-body);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:right;
  max-width:60%;
  line-height:1.45;
}
.cap-text em{
  display:block;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:13px;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--c-gold-soft);
  margin-top:2px;
}

/* hover */
.exp-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.exp-card-tall:hover{transform:translateY(-32px)}
.exp-card:hover img{transform:scale(1.08);filter:saturate(1.05) contrast(1.04)}
.exp-card:hover figcaption{opacity:1;transform:translateY(0)}

/* tiny corner index for editorial feel */
.exp-card::before{
  content:"";
  position:absolute;
  top:14px;left:14px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--c-gold);
  opacity:0;
  transition:opacity .4s var(--ease);
  z-index:2;
}
.exp-card:hover::before{opacity:.9}

/* ── Responsive ─────────────────────────────────────────── */

/* 1080: drop strip to 4 items, hide one */
@media (max-width:1080px){
  .exp-grid{gap:clamp(36px,5vw,80px)}
  .exp-strip{grid-template-columns:repeat(4,1fr)}
  .exp-strip .exp-card:nth-child(5){display:none}
}

/* 880: stack columns, 3 strip items */
@media (max-width:880px){
  .exp-grid{
    grid-template-columns:1fr;
    gap:clamp(40px,7vw,70px);
    margin-bottom:clamp(56px,8vw,90px);
  }
  .exp-quote{padding-left:0}
  .exp-quotemark{font-size:120px;top:-32px;left:-4px}
  .exp-quote blockquote p{max-width:38ch}
  .exp-mark{margin-top:24px}

  .exp-strip{grid-template-columns:repeat(3,1fr)}
  .exp-strip .exp-card:nth-child(4),
  .exp-strip .exp-card:nth-child(5){display:none}
  .exp-card-tall{transform:translateY(-18px)}
  .exp-card-tall:hover{transform:translateY(-22px)}

  .exp-ornament-1{width:90px;height:90px;top:3%;right:4%}
  .exp-ornament-2{display:none}
}

/* 560: 2 strip items */
@media (max-width:560px){
  .experience{padding-block:clamp(80px,16vw,120px) clamp(60px,12vw,90px)}
  .exp-title{font-size:clamp(34px,9vw,48px)}
  .exp-quote blockquote p{font-size:clamp(20px,5vw,24px)}
  .exp-quotemark{font-size:90px;top:-22px}
  .exp-sign-name{font-size:24px}

  .exp-strip{grid-template-columns:repeat(2,1fr);gap:10px}
  .exp-strip .exp-card:nth-child(3),
  .exp-strip .exp-card:nth-child(4),
  .exp-strip .exp-card:nth-child(5){display:none}
  .exp-card-normal{aspect-ratio:3/4}
  .exp-card-tall{aspect-ratio:3/4.4;transform:translateY(-14px)}
  .exp-card-tall:hover{transform:translateY(-18px)}

  /* on touch, always show caption */
  .exp-card figcaption{
    opacity:1;transform:none;
    padding:12px 12px 10px;
  }
  .cap-num{font-size:18px}
  .cap-text{font-size:10px;letter-spacing:.14em}
  .cap-text em{font-size:12px}
}
/* ==========================================================================
   05 — GALLERY · Instagram masonry · cream background
   ========================================================================== */

.gallery {
  position: relative;
  overflow: hidden;
}

.gallery::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(243, 215, 217, .35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.gallery::after {
  content: "";
  position: absolute;
  bottom: -12%;
  left: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(201, 164, 106, .14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.gallery .container {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* HEAD ROW                                                                   */
/* -------------------------------------------------------------------------- */

.gallery-head {
  margin-bottom: clamp(36px, 5vw, 64px);
  align-items: end;
  gap: clamp(24px, 4vw, 60px);
}

.gallery-head__left {
  max-width: 560px;
}

.gallery-title {
  margin: 14px 0 0;
  line-height: 1.02;
}

.gallery-title em {
  color: var(--c-gold);
  font-style: italic;
}

.gallery-head__right {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}

.gallery-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-choco-soft);
  font-family: "Inter", sans-serif;
}

.gallery-handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-choco);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: rgba(255, 253, 251, .6);
  backdrop-filter: blur(6px);
  transition: all .4s var(--ease);
}

.gallery-handle:hover {
  border-color: var(--c-gold);
  background: var(--c-white);
  transform: translateY(-2px);
}

.gallery-handle__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  position: relative;
}

.gallery-handle__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  opacity: .55;
  animation: gallery-pulse 2.4s ease-in-out infinite;
}

@keyframes gallery-pulse {
  0%, 100% { transform: scale(.85); opacity: .55; }
  50%      { transform: scale(1.4);  opacity: 0; }
}

/* -------------------------------------------------------------------------- */
/* MASONRY                                                                    */
/* -------------------------------------------------------------------------- */

.masonry {
  column-count: 3;
  column-gap: 22px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.masonry-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 22px;
  break-inside: avoid;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  transform: translateZ(0);
  transition:
    box-shadow .55s var(--ease),
    transform .55s var(--ease);
}

.masonry-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.masonry-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
}

.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-md);
  transition: transform 1s var(--ease), filter .6s var(--ease);
  filter: saturate(.97);
}

.masonry-item:hover img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.masonry-item.tall img {
  aspect-ratio: 3 / 4.4;
  height: auto;
  width: 100%;
  object-fit: cover;
}

/* numeric tag in corner */
.masonry-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--c-white);
  background: rgba(58, 43, 43, .35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 253, 251, .25);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.masonry-item:hover .masonry-tag {
  opacity: 1;
  transform: translateY(0);
}

/* caption overlay */
.masonry-item figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 22px 20px;
  background: linear-gradient(
    to top,
    rgba(58, 43, 43, .85) 0%,
    rgba(58, 43, 43, .55) 38%,
    rgba(58, 43, 43, 0)   78%
  );
  color: var(--c-white);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .55s var(--ease),
    transform .65s var(--ease);
  pointer-events: none;
  border-radius: var(--r-md);
}

.masonry-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.masonry-cap {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--c-white);
  transform: translateY(10px);
  transition: transform .65s var(--ease) .05s;
}

.masonry-meta {
  display: block;
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 253, 251, .82);
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform .65s var(--ease) .12s,
    opacity .55s var(--ease) .12s;
}

.masonry-item:hover .masonry-cap,
.masonry-item:hover .masonry-meta {
  transform: translateY(0);
}

.masonry-item:hover .masonry-meta {
  opacity: 1;
}

/* subtle inner ring */
.masonry-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 253, 251, .35);
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
}

.masonry-item:hover::after {
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* FOOTER CTA                                                                 */
/* -------------------------------------------------------------------------- */

.gallery-foot {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.gallery-foot__line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--c-line), transparent);
  margin-bottom: 4px;
}

.gallery-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.gallery-cta .ig-icon {
  flex-shrink: 0;
  transition: transform .5s var(--ease);
}

.gallery-cta:hover .ig-icon {
  transform: rotate(-6deg) scale(1.08);
}

.gallery-cta .arrow {
  flex-shrink: 0;
  transition: transform .5s var(--ease);
}

.gallery-cta:hover .arrow {
  transform: translateX(4px);
}

.gallery-foot__hint {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--c-muted);
  letter-spacing: .01em;
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .masonry {
    column-count: 3;
    column-gap: 18px;
  }
  .masonry-item {
    margin-bottom: 18px;
  }
}

@media (max-width: 880px) {
  .gallery-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .gallery-head__right {
    max-width: 100%;
    padding-top: 0;
  }
  .masonry {
    column-count: 2;
    column-gap: 16px;
  }
  .masonry-item {
    margin-bottom: 16px;
  }
  .masonry-item figcaption {
    padding: 18px 16px 16px;
  }
  .masonry-cap {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .masonry {
    column-count: 1;
  }
  .masonry-item {
    margin-bottom: 14px;
  }
  /* on touch: always show caption (no hover) */
  .masonry-item figcaption {
    opacity: 1;
    transform: none;
    background: linear-gradient(
      to top,
      rgba(58, 43, 43, .82) 0%,
      rgba(58, 43, 43, .35) 50%,
      rgba(58, 43, 43, 0)   90%
    );
  }
  .masonry-cap,
  .masonry-meta {
    transform: none;
    opacity: 1;
  }
  .masonry-tag {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .masonry-item,
  .masonry-item img,
  .masonry-item figcaption,
  .masonry-cap,
  .masonry-meta,
  .masonry-tag,
  .gallery-cta .ig-icon,
  .gallery-cta .arrow,
  .gallery-handle__dot::after {
    transition: none !important;
    animation: none !important;
  }
}
/* ==========================================================
   SECTION 06 — TESTIMONIALS
   Editorial review cards + reviews stat strip
   ========================================================== */

.section-testimonials{
  background:var(--c-white);
  position:relative;
  overflow:hidden;
}

/* soft gold halo behind the head — extremely subtle */
.section-testimonials::before{
  content:"";
  position:absolute;
  top:-12%;
  left:50%;
  transform:translateX(-50%);
  width:780px;height:780px;
  background:radial-gradient(closest-side,rgba(201,164,106,.08),transparent 70%);
  pointer-events:none;
  z-index:0;
}
.section-testimonials > .container{position:relative;z-index:1}

/* ---------- Section head ---------- */
.section-testimonials .section-head{margin-bottom:72px}
.section-testimonials .display-h2 em{
  color:var(--c-gold);
  font-style:italic;
}
.t-sub-center{margin:24px auto 0;text-align:center}
.t-em{color:var(--c-choco);font-style:italic}

/* ---------- Cards grid ---------- */
.t-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:stretch;
  margin-bottom:80px;
}

/* ---------- Card base ---------- */
.t-card{
  position:relative;
  border-radius:var(--r-lg);
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:440px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  overflow:hidden;
}
.t-card-inner{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:42px 38px 36px;
  gap:28px;
}
.t-card:hover{transform:translateY(-6px)}

/* ---------- Cream variant (left & right) ---------- */
.t-card-cream{
  background:var(--c-cream);
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-sm);
}
.t-card-cream:hover{box-shadow:var(--shadow-md)}

/* delicate top inner line — like a deckled edge */
.t-card-cream::before{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,164,106,.35),transparent);
  pointer-events:none;
}

/* ---------- Choco variant (middle, FEATURED) ---------- */
.t-card-choco{
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(201,164,106,.12),transparent 55%),
    var(--c-choco);
  color:var(--c-white);
  box-shadow:var(--shadow-lg);
  /* subtle vertical lift so it reads as the focal piece */
  transform:translateY(-12px);
}
.t-card-choco:hover{transform:translateY(-18px)}
.t-card-choco .t-quote{color:var(--c-white)}
.t-card-choco .t-name{color:var(--c-white)}
.t-card-choco .t-caption{color:rgba(255,253,251,.62)}
.t-card-choco::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 50% at 100% 100%,rgba(201,164,106,.18),transparent 60%);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.9;
}

/* featured flag */
.t-flag{
  position:absolute;
  top:22px;right:24px;
  font-family:var(--ff-body);
  font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--c-gold-soft);
  z-index:2;
}

/* ---------- Quote block ---------- */
.t-quote{
  position:relative;
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px,1.65vw,24px);
  line-height:1.42;
  letter-spacing:-.005em;
  color:var(--c-choco);
  padding:0;
  margin:0;
  flex:1;
}

/* editorial gold curly quote marks — large, refined, NOT clip-art */
.t-mark{
  font-family:var(--ff-display);
  font-style:italic;
  color:var(--c-gold);
  font-size:1.6em;
  line-height:0;
  font-weight:500;
  vertical-align:-.18em;
  margin-right:.05em;
  letter-spacing:0;
}
.t-mark-open{
  display:inline-block;
  margin-right:.12em;
  transform:translateY(.06em);
}
.t-mark-close{
  display:inline-block;
  margin-left:.06em;
  transform:translateY(.06em);
  color:var(--c-gold);
  opacity:.85;
}
.t-card-choco .t-mark{color:var(--c-gold-soft)}

/* ---------- Author block (sticks to bottom) ---------- */
.t-author{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:24px;
  border-top:1px solid var(--c-line);
}
.t-card-choco .t-author{border-top-color:rgba(255,253,251,.14)}

/* ---------- Avatar ---------- */
.t-avatar{
  flex:0 0 auto;
  width:50px;height:50px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;justify-content:center;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:19px;
  font-weight:500;
  color:var(--c-choco);
  letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 6px 14px -8px rgba(58,43,43,.35);
  user-select:none;
}
.t-avatar-pink{
  background:
    radial-gradient(120% 120% at 20% 20%,#FBE6E7 0%,var(--c-pink) 45%,var(--c-pink-deep) 100%);
  color:var(--c-choco);
}
.t-avatar-gold{
  background:
    radial-gradient(120% 120% at 25% 20%,#F1DDB6 0%,var(--c-gold-soft) 45%,var(--c-gold) 100%);
  color:var(--c-choco);
}
.t-avatar-cream{
  background:
    radial-gradient(120% 120% at 25% 20%,#FFFDFB 0%,var(--c-cream) 45%,var(--c-cream-soft) 100%);
  color:var(--c-choco);
}

/* ---------- Author text ---------- */
.t-author-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.25;
}
.t-name{
  font-family:var(--ff-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.005em;
  color:var(--c-choco);
}
.t-caption{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:14px;
  color:var(--c-choco-soft);
  letter-spacing:.005em;
}

/* ============================================================
   REVIEWS STRIP — cream rounded bar with 4 stat blocks
   ============================================================ */
.reviews-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,2.8vw,40px);
  padding:34px clamp(28px,4vw,56px);
  background:var(--c-cream);
  border:1px solid var(--c-line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.reviews-strip::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(var(--r-xl) - 1px);
  background:linear-gradient(180deg,rgba(255,253,251,.4),transparent 30%);
  pointer-events:none;
}

.rs-stat{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  position:relative;
  z-index:1;
}

.rs-num{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(36px,3.6vw,52px);
  line-height:1;
  color:var(--c-choco);
  letter-spacing:-.015em;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
}
.rs-num-tight em{
  font-style:italic;
  font-size:.5em;
  font-weight:400;
  color:var(--c-gold);
  letter-spacing:.01em;
  line-height:1;
}

.rs-meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.rs-label{
  font-family:var(--ff-body);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-choco-soft);
}

.rs-divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg,transparent,var(--c-line-strong) 30%,var(--c-line-strong) 70%,transparent);
  opacity:.55;
  flex:0 0 auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .t-grid{
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:60px;
  }
  .t-card{min-height:0}
  .t-card-choco{transform:none}
  .t-card-choco:hover{transform:translateY(-6px)}

  .reviews-strip{
    flex-wrap:wrap;
    gap:24px 16px;
    padding:28px 22px;
    border-radius:var(--r-lg);
  }
  .rs-stat{flex:1 1 40%}
  .rs-divider{display:none}
}

@media (max-width:560px){
  .section-testimonials .section-head{margin-bottom:54px}
  .t-card-inner{padding:32px 26px 28px;gap:22px}
  .t-quote{font-size:18px;line-height:1.45}
  .t-flag{font-size:9.5px;letter-spacing:.22em}

  .reviews-strip{
    padding:26px 18px;
    gap:22px 12px;
  }
  .rs-stat{flex:1 1 100%}
  .rs-num{font-size:34px}
  .rs-label{font-size:9.5px;letter-spacing:.2em}
}
/* ========================================================================
   07 · WORKSHOPS — editorial split, atelier voice
   ======================================================================== */

.ws-section {
  position: relative;
  overflow: hidden;
}

/* Soft cream → tinted gradient + faint vertical seam */
.ws-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%,
                    rgba(234, 185, 188, .22), transparent 60%),
    radial-gradient(ellipse 70% 60% at 0% 100%,
                    rgba(201, 164, 106, .10), transparent 70%);
  pointer-events: none;
}

/* ---------------------------- Layout grid ---------------------------- */
.ws-grid {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* ---------------------------- Decorative rule ---------------------------- */
.ws-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  height: 100%;
  min-height: 420px;
  justify-content: center;
  color: var(--c-choco-soft);
}
.ws-rule-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--c-gold);
  letter-spacing: .04em;
}
.ws-rule-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--c-line) 12%,
    var(--c-line) 88%,
    transparent
  );
  min-height: 240px;
}
.ws-rule-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------------------------- Text column ---------------------------- */
.ws-text {
  position: relative;
  max-width: 540px;
}
.ws-title {
  position: relative;
  margin: 18px 0 22px;
  color: var(--c-choco);
}
.ws-title em {
  color: var(--c-gold);
  font-style: italic;
}
.ws-title-accent {
  position: relative;
  display: inline-block;
}
.ws-flourish {
  display: block;
  width: 180px;
  height: 14px;
  margin-top: 10px;
  color: var(--c-gold-soft);
  opacity: .9;
}
.ws-lead {
  color: var(--c-choco-soft);
  max-width: 480px;
  margin-bottom: 32px;
}

/* ---------------------------- Chips · fashion-show passes ---------------------------- */
.ws-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
}
.ws-chip {
  --chip-bg: var(--c-white);
  --chip-fg: var(--c-choco);
  --chip-bd: var(--c-line);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-bd);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--chip-fg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset,
              0 4px 14px -10px rgba(58, 43, 43, .25);
  transition: background .35s var(--ease),
              color .35s var(--ease),
              border-color .35s var(--ease),
              transform .35s var(--ease),
              box-shadow .35s var(--ease);
  cursor: default;
}
.ws-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 164, 106, .12);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.ws-chip:hover {
  background: var(--c-choco);
  color: var(--c-cream);
  border-color: var(--c-choco);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -16px rgba(58, 43, 43, .55);
}
.ws-chip:hover .ws-chip-dot {
  background: var(--c-gold-soft);
  box-shadow: 0 0 0 3px rgba(224, 201, 154, .25);
}

/* ---------------------------- Stats row ---------------------------- */
.ws-stats {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 34px);
  margin: 0 0 36px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.ws-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-stat-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1;
  color: var(--c-choco);
  letter-spacing: -.01em;
}
.ws-stat-num span {
  font-size: .42em;
  font-style: normal;
  font-family: "Inter", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-left: 4px;
  vertical-align: 0.55em;
}
.ws-stat-lbl {
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}
.ws-stat-sep {
  width: 1px;
  align-self: stretch;
  background: var(--c-line);
  margin-bottom: 4px;
}

/* ---------------------------- CTA row ---------------------------- */
.ws-cta-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ws-cta-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-choco-soft);
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  letter-spacing: .01em;
}
.ws-cta-note svg { color: var(--c-gold); }

/* ---------------------------- Visual column ---------------------------- */
.ws-visual {
  position: relative;
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--c-cream-soft);
  isolation: isolate;
}
.ws-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease), filter 1s var(--ease);
  filter: saturate(1.02) contrast(1.02);
}
.ws-frame:hover .ws-img {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.04);
}

/* gentle vignette so floating elements stay readable */
.ws-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(58, 43, 43, 0) 50%,
      rgba(58, 43, 43, .28) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Floating tag */
.ws-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(250, 247, 242, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--c-choco);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px -14px rgba(58, 43, 43, .5);
}
.ws-tag-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
}
.ws-tag-pulse::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  opacity: .5;
  animation: ws-pulse 2.4s var(--ease) infinite;
}
@keyframes ws-pulse {
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Editorial caption (top-right) */
.ws-caption {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  color: var(--c-cream);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(58, 43, 43, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 251, .18);
}
.ws-caption em {
  color: var(--c-gold-soft);
  font-style: italic;
  font-size: 1.05em;
}

/* Gold corner marks framing the visual */
.ws-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-gold);
  opacity: .7;
  pointer-events: none;
}
.ws-corner-tl {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 6px;
}
.ws-corner-br {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 6px;
}

/* ---------------------------- Responsive ---------------------------- */
@media (max-width: 1080px) {
  .ws-grid {
    grid-template-columns: 36px 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
  }
  .ws-rule-num { font-size: 18px; }
}

@media (max-width: 880px) {
  .ws-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .ws-rule { display: none; }

  .ws-text { max-width: none; }

  .ws-visual {
    order: -1;
  }
  .ws-frame {
    max-width: 100%;
    aspect-ratio: 4 / 4.6;
  }

  .ws-stats {
    gap: 16px;
  }
  .ws-stat-num { font-size: 36px; }
  .ws-stat-lbl { font-size: 9.5px; letter-spacing: .22em; }

  .ws-flourish { width: 140px; }
}

@media (max-width: 560px) {
  .ws-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
  }
  .ws-stat-sep { display: none; }
  .ws-stat {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    width: 100%;
  }
  .ws-stat-num { font-size: 34px; }

  .ws-chips { gap: 6px; }
  .ws-chip { font-size: 11.5px; padding: 8px 13px; }

  .ws-cta-row { gap: 14px; }
  .ws-cta-note { font-size: 14px; }

  .ws-tag {
    left: 12px;
    bottom: 12px;
    font-size: 10.5px;
    padding: 8px 13px;
  }
  .ws-caption {
    top: 12px;
    right: 12px;
    font-size: 11.5px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ws-img,
  .ws-chip,
  .ws-tag-pulse::before {
    transition: none !important;
    animation: none !important;
  }
  .ws-frame:hover .ws-img { transform: none; }
}
/* ==========================================================
   08 — LOCATION / Visita
   White background. Two-column split: info + map.
   ========================================================== */

.loc{
  background:var(--c-white);
  position:relative;
  overflow:hidden;
}
.loc::before{
  content:"";
  position:absolute;
  inset:auto -8% -30% auto;
  width:60%;
  height:520px;
  background:radial-gradient(closest-side, rgba(243,215,217,.35), transparent 70%);
  pointer-events:none;
  z-index:0;
}
.loc::after{
  content:"";
  position:absolute;
  inset:-10% auto auto -6%;
  width:380px;
  height:380px;
  background:radial-gradient(closest-side, rgba(201,164,106,.10), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.loc-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);
  gap:clamp(40px,6vw,90px);
  align-items:start;
}

/* --------- LEFT: info column --------- */
.loc-info{
  padding-top:clamp(0px,1vw,18px);
}
.loc-title{
  margin-top:6px;
  max-width:14ch;
}
.loc-title em{
  color:var(--c-gold);
  font-style:italic;
}
.loc-lead{
  margin-top:26px;
  max-width:46ch;
  font-size:clamp(15px,1.15vw,17px);
  color:var(--c-choco-soft);
  line-height:1.7;
}

/* tile list */
.loc-tiles{
  list-style:none;
  margin:42px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:560px){
  .loc-tiles{grid-template-columns:1fr}
}

.loc-tile{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px 18px 18px;
  background:var(--c-cream-soft);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px -14px rgba(58,43,43,.20);
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.loc-tile::before{
  /* hairline left rule, like a folder tab */
  content:"";
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:2px;
  background:linear-gradient(180deg, transparent, var(--c-gold-soft) 30%, var(--c-gold) 50%, var(--c-gold-soft) 70%, transparent);
  opacity:.55;
  transition:opacity .35s var(--ease), width .35s var(--ease);
}
.loc-tile:hover{
  transform:translateX(4px);
  background:#fffaf2;
  border-color:rgba(201,164,106,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 34px -22px rgba(58,43,43,.30);
}
.loc-tile:hover::before{opacity:1;width:3px}

.loc-tile-ico{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--c-gold);
  background:#fff;
  border:1px solid var(--c-line);
  box-shadow:0 4px 10px -6px rgba(201,164,106,.4);
}
.loc-tile-ico svg{width:22px;height:22px;display:block}

.loc-tile-body{min-width:0}
.loc-tile-title{
  font-family:var(--ff-display);
  font-size:20px;
  line-height:1.15;
  color:var(--c-choco);
  letter-spacing:-.005em;
}
.loc-tile-sub{
  margin-top:3px;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--c-muted);
  text-transform:uppercase;
}

.loc-tile-edge{
  /* tiny "page corner" detail in top-right of each tile */
  position:absolute;
  top:0; right:0;
  width:18px; height:18px;
  background:
    linear-gradient(135deg, transparent 50%, rgba(201,164,106,.25) 50%);
  border-bottom-left-radius:6px;
  opacity:.7;
}

/* CTAs */
.loc-ctas{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* meta line */
.loc-meta{
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--c-choco-soft);
  text-transform:uppercase;
}
.loc-meta-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-gold);
  box-shadow:0 0 0 4px rgba(201,164,106,.18);
}

/* --------- RIGHT: map column --------- */
.loc-mapwrap{
  position:relative;
  isolation:isolate;
}

.map-frame{
  position:relative;
  height:560px;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--c-line) inset;
  background:var(--c-cream);
}
.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  filter:saturate(.85) contrast(.95);
  transition:filter .5s var(--ease);
}
.map-frame:hover iframe{filter:saturate(1) contrast(1)}

/* tiny corner ticks — like a map register mark */
.map-frame-corner{
  position:absolute;
  width:18px;height:18px;
  border:1.5px solid rgba(255,253,251,.85);
  pointer-events:none;
  z-index:2;
  mix-blend-mode:overlay;
}
.map-frame-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.map-frame-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.map-frame-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.map-frame-corner.br{bottom:14px;right:14px;border-left:0;border-top:0}

/* floating "El Born · 08003" pill */
.loc-pill{
  position:absolute;
  top:-14px;
  left:28px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px 10px 14px;
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:999px;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-choco);
  box-shadow:var(--shadow-md);
}
.loc-pill-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-gold);
  box-shadow:0 0 0 4px rgba(201,164,106,.22);
  animation:locPulse 2.6s var(--ease) infinite;
}
@keyframes locPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(201,164,106,.22)}
  50%   {box-shadow:0 0 0 8px rgba(201,164,106,.06)}
}

/* studio "stamp" overlay bottom-right of map */
.loc-stamp{
  position:absolute;
  z-index:3;
  right:22px;
  bottom:22px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:18px 22px;
  background:rgba(255,253,251,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  max-width:240px;
}
.loc-stamp-line{
  font-family:var(--ff-display);
  font-size:22px;
  line-height:1;
  color:var(--c-choco);
}
.loc-stamp-line.italic{
  font-style:italic;
  color:var(--c-gold);
}
.loc-stamp-coord{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--c-line);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-muted);
}

/* note under map */
.loc-mapnote{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--c-choco-soft);
}
.loc-mapnote svg{color:var(--c-gold);flex-shrink:0}

/* --------- responsive --------- */
@media (max-width:880px){
  .loc-grid{
    grid-template-columns:1fr;
    gap:56px;
  }
  .loc-title{max-width:none}
  .map-frame{height:360px;border-radius:var(--r-lg)}
  .loc-pill{left:18px;top:-12px;padding:8px 14px;font-size:10.5px}
  .loc-stamp{
    right:14px;bottom:14px;
    padding:14px 16px;
    max-width:200px;
  }
  .loc-stamp-line{font-size:18px}
  .loc-tiles{margin-top:34px}
}

@media (max-width:480px){
  .loc-stamp{display:none}
  .map-frame-corner{display:none}
  .loc-tile{padding:16px}
  .loc-tile-ico{flex-basis:40px;width:40px;height:40px}
  .loc-tile-ico svg{width:20px;height:20px}
  .loc-tile-title{font-size:18px}
}
/* ============================================================
   FINAL CTA — Pide tu pieza
   Cinematic chocolate gradient with dreamy floating blobs.
   The last emotional beat before the footer.
   ============================================================ */

.final-cta{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(120px, 15vw, 180px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,253,251,.06), transparent 60%),
    linear-gradient(150deg, #3A2B2B 0%, #5A4747 100%);
  color: var(--c-white);
  text-align: center;
}

/* ---------- Floating blurred blobs ---------- */
.fc-blob{
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .4;
  pointer-events: none;
  will-change: transform;
}
.fc-blob--gold{
  top: -160px;
  left: -120px;
  width: 540px;
  height: 540px;
  background: radial-gradient(closest-side, #C9A46A 0%, rgba(201,164,106,0) 70%);
  animation: fc-drift-a 18s ease-in-out infinite alternate;
}
.fc-blob--pink{
  bottom: -180px;
  right: -140px;
  width: 580px;
  height: 580px;
  background: radial-gradient(closest-side, #F3D7D9 0%, rgba(243,215,217,0) 70%);
  animation: fc-drift-b 22s ease-in-out infinite alternate;
}

@keyframes fc-drift-a{
  0%   { transform: translate3d(0,0,0)   scale(1); }
  100% { transform: translate3d(40px,30px,0) scale(1.06); }
}
@keyframes fc-drift-b{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-50px,-30px,0) scale(1.08); }
}

/* ---------- Subtle grain ---------- */
.fc-grain{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

/* ---------- Inner column ---------- */
.fc-inner{
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Gold divider (top decoration) ---------- */
.fc-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(220px, 60%);
  margin-bottom: 36px;
  color: var(--c-gold);
}
.fc-divider__line{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201,164,106,0) 0%,
    rgba(201,164,106,.65) 50%,
    rgba(201,164,106,0) 100%);
}
.fc-divider__mark{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--c-gold);
  transform: translateY(-4px);
}

/* ---------- Atelier label ---------- */
.fc-atelier{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--c-gold-soft);
  margin: 0 0 28px;
  opacity: .92;
}
.fc-atelier em{
  font-style: italic;
  color: var(--c-gold);
}
.fc-atelier__dot{
  display: inline-block;
  margin: 0 8px;
  color: var(--c-gold);
  opacity: .7;
}

/* ---------- Eyebrow override (light variant on dark bg) ---------- */
.final-cta .eyebrow.eyebrow-light{
  color: rgba(255,253,251,.7);
  margin-bottom: 22px;
}

/* ---------- Headline ---------- */
.fc-headline{
  font-size: clamp(46px, 7.4vw, 92px);
  line-height: .98;
  letter-spacing: -.012em;
  margin: 0 0 28px;
  color: var(--c-white);
  font-weight: 300;
  text-wrap: balance;
}
.fc-headline em{
  font-style: italic;
  color: var(--c-gold-soft);
  /* Subtle warm shimmer on the italic word */
  background: linear-gradient(180deg, #E0C99A 0%, #C9A46A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-inline: 2px;
}

/* ---------- Lede paragraph ---------- */
.fc-lede{
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: rgba(255,253,251,.78);
  max-width: 520px;
  margin: 0 auto 44px;
  font-weight: 300;
}

/* ---------- CTA row ---------- */
.fc-cta-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 56px;
}

/* CTA button polish (only padding/shape, .btn .btn-light remain global) */
.fc-cta{
  position: relative;
  padding: 18px 30px;
  font-size: 15px;
  letter-spacing: .01em;
  box-shadow:
    0 18px 48px -16px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04);
  transition: transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.fc-cta:hover{
  transform: translateY(-2px);
  box-shadow:
    0 28px 60px -18px rgba(0,0,0,.55),
    0 0 0 1px rgba(201,164,106,.25);
}
.fc-cta__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
}
.fc-cta__icon svg{ display: block; }
.fc-cta__arrow{
  margin-left: 4px;
  transition: transform .35s var(--ease);
}
.fc-cta:hover .fc-cta__arrow{
  transform: translateX(4px);
}

/* Phone link (secondary) */
.fc-phone{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  text-decoration: none;
  color: var(--c-white);
  line-height: 1.1;
  transition: color .3s var(--ease);
}
.fc-phone:hover{ color: var(--c-gold-soft); }
.fc-phone__label{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,253,251,.55);
  margin-bottom: 4px;
}
.fc-phone__num{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(255,253,251,.25);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.fc-phone:hover .fc-phone__num{ border-color: var(--c-gold); }

/* ---------- Trust row ---------- */
.fc-trust{
  list-style: none;
  padding: 0;
  margin: 0 0 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 16px;
  font-size: 13px;
  color: rgba(255,253,251,.7);
  letter-spacing: .02em;
}
.fc-trust__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fc-trust__icon{
  color: var(--c-gold);
  flex-shrink: 0;
}
.fc-trust__sep{
  color: rgba(255,253,251,.3);
  font-size: 14px;
  user-select: none;
}

/* ---------- Signature foot ---------- */
.fc-signature{
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  letter-spacing: .02em;
  color: rgba(255,253,251,.5);
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,253,251,.08);
  width: min(360px, 80%);
}
.fc-signature em{
  font-style: italic;
  color: var(--c-gold-soft);
  font-size: 17px;
}
.fc-signature__sep{
  margin: 0 6px;
  color: rgba(255,253,251,.3);
}
.fc-signature__dot{
  margin: 0 6px;
  color: var(--c-gold);
  opacity: .6;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 880px){
  .final-cta{
    padding-block: clamp(100px, 14vw, 140px);
  }
  .fc-blob--gold{
    width: 380px; height: 380px;
    top: -120px; left: -120px;
  }
  .fc-blob--pink{
    width: 420px; height: 420px;
    bottom: -160px; right: -160px;
  }
  .fc-headline{
    font-size: clamp(40px, 9vw, 64px);
  }
  .fc-cta-row{
    gap: 22px;
  }
}

@media (max-width: 560px){
  .final-cta{
    padding-block: 96px;
    text-align: center;
  }
  .fc-divider{
    width: 60%;
    margin-bottom: 28px;
  }
  .fc-atelier{
    font-size: 16px;
    margin-bottom: 22px;
  }
  .fc-headline{
    font-size: clamp(36px, 11vw, 48px);
    line-height: 1.02;
    letter-spacing: -.005em;
  }
  .fc-lede{
    font-size: 15px;
    margin-bottom: 36px;
    padding-inline: 8px;
  }
  .fc-cta-row{
    flex-direction: column;
    gap: 20px;
    margin-bottom: 44px;
  }
  .fc-cta{
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 16px 22px;
  }
  .fc-phone{
    align-items: center;
    text-align: center;
  }
  .fc-trust{
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
  }
  .fc-trust__sep{ display: none; }
  .fc-signature{
    font-size: 14px;
    padding-top: 28px;
    width: 90%;
  }
  .fc-signature em{ font-size: 16px; }
  .fc-blob--gold{
    width: 320px; height: 320px;
    filter: blur(80px);
  }
  .fc-blob--pink{
    width: 340px; height: 340px;
    filter: blur(80px);
  }
}

/* Reduced motion: stop drifting blobs */
@media (prefers-reduced-motion: reduce){
  .fc-blob--gold,
  .fc-blob--pink{
    animation: none;
  }
  .fc-cta,
  .fc-cta__arrow,
  .fc-phone,
  .fc-phone__num{
    transition: none;
  }
}
/* ============================================
   FOOTER — Cake Studio Barcelona
   Chocolate dark, premium editorial
   ============================================ */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--c-cream);
  background: linear-gradient(180deg, #3A2B2B 0%, #2A1F1F 100%);
  padding-top: 0;
  padding-bottom: 36px;
  margin-top: clamp(40px, 6vw, 80px);
}

.site-footer .container {
  position: relative;
  z-index: 2;
}

/* ----- Decorative blobs ----- */
.sf-blob {
  position: absolute;
  inset: auto;
  z-index: 0;
  pointer-events: none;
  filter: blur(90px);
  border-radius: 50%;
  opacity: .14;
}
.sf-blob--pink {
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--c-pink) 0%, transparent 70%);
  opacity: .18;
}
.sf-blob--gold {
  bottom: -160px;
  left: -100px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--c-gold) 0%, transparent 70%);
  opacity: .12;
}

/* ============================================
   1) MARQUEE
   ============================================ */
.sf-marquee {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,253,251,.14);
  border-bottom: 1px solid rgba(255,253,251,.08);
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px) 0;
  margin-bottom: clamp(64px, 8vw, 110px);
  background: linear-gradient(180deg, rgba(255,253,251,.02), transparent);
}
.sf-marquee__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: sf-scroll 42s linear infinite;
  will-change: transform;
}
.sf-marquee__item {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
  color: var(--c-white);
  padding: 0 clamp(28px, 4vw, 56px);
  letter-spacing: .005em;
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
}
.sf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(201,164,106,.35);
}
@keyframes sf-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-marquee__track { animation: none; }
}

/* ============================================
   2) FOOTER TOP — 4 col grid
   ============================================ */
.sf-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
  gap: clamp(36px, 4.5vw, 72px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* ---- Brand col ---- */
.sf-brand {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
  color: var(--c-white);
  text-decoration: none;
  letter-spacing: -.005em;
  margin-bottom: 18px;
}
.sf-brand em {
  font-style: italic;
  color: var(--c-gold);
}
.sf-bio {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(250, 247, 242, .68);
  max-width: 34ch;
  margin: 0 0 28px;
}

/* social ring */
.sf-social {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,253,251,.22);
  color: var(--c-cream);
  text-decoration: none;
  transition: transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.sf-social a svg {
  width: 17px;
  height: 17px;
}
.sf-social a:hover {
  color: var(--c-choco);
  background: var(--c-gold);
  border-color: var(--c-gold);
  transform: translateY(-2px) rotate(-6deg);
}

/* ---- Heading shared ---- */
.sf-h {
  position: relative;
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 6px 0 22px;
  padding-bottom: 12px;
}
.sf-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: var(--c-gold);
}

/* ---- Estudio links ---- */
.sf-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-links a {
  position: relative;
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  color: rgba(250, 247, 242, .72);
  text-decoration: none;
  padding-left: 0;
  transition: padding-left .3s var(--ease), color .3s var(--ease);
}
.sf-links a:hover {
  padding-left: 4px;
  color: var(--c-gold-soft);
}

/* ---- Visita ---- */
.sf-address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(250, 247, 242, .72);
  margin: 0 0 20px;
}
.sf-sep {
  display: inline-block;
  margin: 0 4px;
  color: var(--c-gold);
  opacity: .65;
}
.sf-hours {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sf-hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,253,251,.14);
  font-size: 13.5px;
  color: rgba(250, 247, 242, .78);
}
.sf-hours li:last-child {
  border-bottom: 0;
}
.sf-hours li span:first-child {
  letter-spacing: .04em;
  color: rgba(250, 247, 242, .58);
}
.sf-hours li span:last-child {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  color: var(--c-white);
  font-style: italic;
}
.sf-note {
  margin: 0;
  font-size: 13px;
}
.sf-note em {
  color: var(--c-gold-soft);
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
}

/* ---- IG grid ---- */
.sf-ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.sf-ig-grid a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,253,251,.04);
}
.sf-ig-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
  filter: saturate(.95) brightness(.95);
}
.sf-ig-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(58,43,43,.4));
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.sf-ig-grid a:hover img {
  transform: scale(1.08);
  filter: saturate(1.05) brightness(1);
}
.sf-ig-grid a:hover::after {
  opacity: 1;
}
.sf-ig-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 17px;
  color: var(--c-gold-soft);
  text-decoration: none;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.sf-ig-link svg {
  width: 16px;
  height: 16px;
  transition: transform .35s var(--ease);
}
.sf-ig-link:hover {
  color: var(--c-gold);
  gap: 12px;
}
.sf-ig-link:hover svg {
  transform: translateX(3px);
}

/* ============================================
   3) NEWSLETTER BAND
   ============================================ */
.sf-newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  padding: clamp(50px, 6vw, 80px) 0;
  border-top: 1px solid rgba(255,253,251,.12);
  border-bottom: 1px solid rgba(255,253,251,.12);
}
.sf-nl__copy .eyebrow-light {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--c-gold-soft);
}
.sf-nl__h {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  color: var(--c-white);
  margin: 0;
  max-width: 18ch;
  letter-spacing: -.01em;
}
.sf-nl__h em {
  font-style: italic;
  color: var(--c-gold-soft);
}
.sf-nl__form {
  width: 100%;
}
.sf-nl__field {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,253,251,.28);
  border-radius: 999px;
  padding: 6px 6px 6px 24px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.sf-nl__field:focus-within {
  border-color: var(--c-gold-soft);
  background: rgba(255,253,251,.04);
}
.sf-nl__field input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  color: var(--c-white);
  padding: 14px 8px 14px 0;
  min-width: 0;
}
.sf-nl__field input::placeholder {
  color: rgba(250, 247, 242, .42);
}
.sf-nl__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-gold);
  color: var(--c-choco);
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.sf-nl__btn svg {
  width: 14px;
  height: 14px;
  transition: transform .3s var(--ease);
}
.sf-nl__btn:hover {
  background: var(--c-gold-soft);
  transform: translateX(2px);
}
.sf-nl__btn:hover svg {
  transform: translateX(3px);
}
.sf-nl__btn.is-done {
  background: var(--c-cream);
  color: var(--c-choco);
}
.sf-nl__btn.is-done svg {
  display: none;
}
.sf-nl__note {
  margin: 14px 4px 0;
  font-size: 12px;
  color: rgba(250, 247, 242, .48);
  letter-spacing: .01em;
}

/* ============================================
   4) FOOTER BOTTOM
   ============================================ */
.sf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  flex-wrap: wrap;
}
.sf-legal {
  margin: 0;
  font-size: 13px;
  color: rgba(250, 247, 242, .55);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sf-legal a {
  color: rgba(250, 247, 242, .68);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.sf-legal a:hover {
  color: var(--c-gold-soft);
}
.sf-craft {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sf-heart {
  display: inline-block;
  color: var(--c-pink-deep);
  font-style: normal;
  font-size: 20px;
  animation: sf-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes sf-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  35%      { transform: scale(1.2); opacity: .85; }
  70%      { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-heart { animation: none; }
}

/* ----- a11y helper ----- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1080px) {
  .sf-top {
    grid-template-columns: 1fr 1fr;
    gap: 56px 48px;
  }
  .sf-col--brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .sf-newsletter {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sf-nl__h { max-width: none; }
}

@media (max-width: 880px) {
  .sf-marquee { margin-bottom: 56px; }
  .sf-top {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 56px;
  }
  .sf-col--brand { max-width: none; }
  .sf-bio { max-width: none; }
  .sf-newsletter { padding: 44px 0; }
  .sf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 28px;
  }
}

@media (max-width: 560px) {
  .sf-marquee { padding: 18px 0; margin-bottom: 44px; }
  .sf-marquee__item { font-size: 26px; padding: 0 24px; gap: 18px; }
  .sf-brand { font-size: 32px; }
  .sf-nl__h { font-size: 26px; }
  .sf-nl__field {
    flex-direction: column;
    align-items: stretch;
    border-radius: 22px;
    padding: 10px;
    gap: 8px;
  }
  .sf-nl__field input {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,253,251,.04);
  }
  .sf-nl__btn {
    justify-content: center;
    width: 100%;
    padding: 16px 22px;
  }
  .sf-ig-grid { gap: 5px; }
  .sf-legal { font-size: 12px; }
  .sf-craft { font-size: 16px; }
}