/* ---------- self-hosted fonts (no external requests, RGPD) ---------- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/dm-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/dm-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/dm-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/dm-sans-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/frank-ruhl-libre-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/frank-ruhl-libre-latin-700-normal.woff2') format('woff2');}

:root{
  --bg:#FDF8F1;
  --pink:#F3C9C6;
  --pink-light:#F8DFDC;
  --earth:#EFE0DA;
  --earth-border:#E4CFC5;
  --accent:#9C4A52;
  --accent-dark:#7E3A41;
  --cta:#8C2433;
  --cta-dark:#6E1A27;
  --malva:#4A2E3A;
  --malva-2:#5B3A46;
  --text:#4A2E3A;
  --text-muted:#59454A;
  --cream-text:#FBF3EC;
  --band-text:#E7D6D2;
  --pink-dark:#D89B96;
  --pink-mid:#BE7A6D;
  --pink-deep:#9C5347;
  --rose-shadow:#6E362E;
  --photo-pale:#E8A684;
  --photo-light:#DD8D6C;
  --photo-mid:#D07A59;
  --photo-mid2:#C4694C;
  --photo-base:#B15138;
  --photo-dark:#A84530;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  overflow-x:hidden;
  position:relative;
}
/* ---------- organic vector background (site.-bg svg, fixed behind all pages) ---------- */
.site-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
  display:block;
  filter:blur(3px);
}
.bg-shape{
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform;
  animation-duration:14s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.bg-shape-1{animation-name:bgDrift1; animation-delay:0s;}
.bg-shape-2{animation-name:bgDrift2; animation-delay:-4s;}
.bg-shape-3{animation-name:bgDrift3; animation-delay:-8s;}
.bg-shape-4{animation-name:bgDrift1; animation-delay:-3s;}
.bg-shape-5{animation-name:bgDrift2; animation-delay:-7s;}
.bg-shape-6{animation-name:bgDrift3; animation-delay:-11s;}
.bg-shape-7{animation-name:bgDrift1; animation-delay:-6s;}
.bg-shape-8{animation-name:bgDrift2; animation-delay:-2s;}
.bg-shape-9{animation-name:bgDrift3; animation-delay:-9.5s;}
.bg-shape-10{animation-name:bgDrift1; animation-delay:-1s;}
.bg-shape-11{animation-name:bgDrift3; animation-delay:-5.5s;}
.bg-shape-12{animation-name:bgDrift2; animation-delay:-10s;}
@keyframes bgDrift1{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg);}
  25%{transform:translate(2.6%,-2%) scale(1.06) rotate(3.5deg);}
  50%{transform:translate(-1.6%,1.7%) scale(0.95) rotate(-2.6deg);}
  75%{transform:translate(-2.2%,-1.1%) scale(1.03) rotate(1.8deg);}
}
@keyframes bgDrift2{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg);}
  30%{transform:translate(-2.8%,2.2%) scale(0.94) rotate(-3.8deg);}
  60%{transform:translate(2%,-1.5%) scale(1.07) rotate(2.8deg);}
}
@keyframes bgDrift3{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg);}
  20%{transform:translate(1.7%,2.5%) scale(1.05) rotate(2.1deg);}
  55%{transform:translate(-2.4%,-1.6%) scale(0.94) rotate(-3.2deg);}
  80%{transform:translate(1.1%,-2%) scale(1.04) rotate(1.4deg);}
}
@media (prefers-reduced-motion:reduce){.bg-shape{animation:none;}}
h1,h2,h3{font-family:'Frank Ruhl Libre', Georgia, 'Times New Roman', serif; font-weight:500; margin:0;}
p{margin:0;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-dark);}
img,svg{display:block;}
ul{margin:0; padding:0; list-style:none;}

/* ---------- header / top nav bar (no hamburger, always visible) ---------- */
header{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:18px 20px 4px 20px; gap:8px 0; position:sticky; top:0; z-index:20; background:var(--bg);
  box-shadow:0 1px 0 rgba(74,46,58,.06);
}
.logo{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  line-height:1; text-decoration:none; color:var(--text);
}
.logo-main{display:flex; align-items:baseline; gap:5px;}
.logo-areola{font-family:'DM Sans', system-ui, sans-serif; font-weight:800; font-size:clamp(1.5rem,3.8vw,1.95rem); letter-spacing:-0.01em; color:var(--malva);}
.logo-studio{font-family:'Frank Ruhl Libre', serif; font-weight:500; font-size:clamp(1.5rem,3.8vw,1.95rem); color:var(--malva);}
.logo-sub{font-family:'Frank Ruhl Libre', serif; font-style:italic; font-size:11.5px; color:var(--accent); letter-spacing:.02em; margin-top:1px;}
.header-actions{display:flex; align-items:center; gap:14px;}
.nav-strip{
  order:3; flex-basis:100%;
  display:flex; gap:22px; overflow-x:auto; white-space:nowrap;
  padding:10px 2px 14px 2px; scrollbar-width:none;
}
.nav-strip::-webkit-scrollbar{display:none;}
.nav-link{color:var(--text); font-size:15px; padding-bottom:4px; border-bottom:2px solid transparent;}
.nav-link:hover{color:var(--accent);}
.nav-link.active{color:var(--accent); font-weight:600; border-bottom-color:var(--accent);}

@media (max-width:899px){
  .logo{flex-shrink:1; min-width:0;}
  .logo-areola,.logo-studio{font-size:clamp(1.05rem,5.2vw,1.4rem);}
  .logo-sub{font-size:10px;}
  .header-actions{flex-shrink:0;}
  .header-actions .btn{padding:9px 14px; font-size:12px; gap:6px; white-space:nowrap; flex-shrink:0;}
  .header-actions .btn svg{width:11px; height:11px; flex-shrink:0;}
}

@media (min-width:900px){
  header{padding:26px 56px; flex-wrap:nowrap;}
  .nav-strip{order:0; flex-basis:auto; overflow:visible; padding:0; margin:0 40px; gap:32px;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--cta); color:var(--cream-text);
  padding:14px 24px; border-radius:999px;
  font-size:14px; font-weight:600; border:none; cursor:pointer;
  font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 4px 14px rgba(140,36,51,0);
}
.btn:hover{background:var(--cta-dark); color:var(--cream-text); transform:translateY(-2px) scale(1.02); box-shadow:0 12px 22px rgba(110,26,39,.35);}
.btn svg{transition:transform .18s ease;}
.btn:hover svg{transform:translateX(2px) rotate(-6deg);}
.btn-ghost{background:transparent; color:var(--cream-text); border:1.5px solid rgba(251,243,236,.5);}
.btn-ghost:hover{background:rgba(251,243,236,.12); color:var(--cream-text); box-shadow:none;}

/* ---------- decorative organic blobs (kept for reference — unused in this alternative) ---------- */
.blob{position:absolute; opacity:.85; animation:float 7s ease-in-out infinite;}
.blob.delay-1{animation-delay:.7s;}
.blob.delay-2{animation-delay:1.4s;}
.blob.delay-3{animation-delay:2.3s;}
.blob.blob-fast{animation-duration:5.4s;}
.blob.blob-sm{opacity:.5;}
@keyframes float{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  33%{transform:translate(12px,-38px) rotate(5deg);}
  66%{transform:translate(-14px,-20px) rotate(-4deg);}
}
@media (prefers-reduced-motion:reduce){.blob{animation:none;}}

/* ---------- wave dividers ---------- */
.wave{display:block; width:100%; height:48px; margin-top:-1px;}
.wave.flip{transform:scaleY(-1); margin-top:0; margin-bottom:-1px;}
@media (min-width:900px){.wave{height:64px;}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ---------- photo placeholders ---------- */
.photo-frame{
  background:var(--earth); border:1px solid var(--earth-border);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
}
.photo-frame:hover{transform:translateY(-6px) scale(1.015); box-shadow:0 18px 34px rgba(74,46,58,.15);}
.photo-caption{font-size:12px; color:#8A7268; padding:0 18px;}

/* ---------- organic photo shapes (images integrated as page adornment) ---------- */
.organic-frame{
  position:relative;
  background:linear-gradient(135deg, var(--pink-light) 0%, var(--earth) 55%, var(--earth-border) 100%);
  border:1px solid var(--earth-border);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; text-align:center;
  overflow:hidden;
  box-shadow:0 14px 30px rgba(74,46,58,.10);
  transition:transform .4s ease, box-shadow .4s ease;
}
.organic-frame:hover{transform:translateY(-6px) scale(1.03); box-shadow:0 22px 44px rgba(74,46,58,.2);}
.organic-frame .photo-caption{padding:0 18%; font-size:11px; line-height:1.4;}
.shape-circle{border-radius:50%;}
.shape-blob-a{border-radius:62% 38% 55% 45% / 48% 42% 58% 52%;}
.shape-blob-b{border-radius:41% 59% 47% 53% / 60% 45% 55% 40%;}
.shape-blob-c{border-radius:53% 47% 34% 66% / 55% 40% 60% 45%;}
@media (prefers-reduced-motion:reduce){.organic-frame{transition:none;}}

/* photo cluster — overlapping organic shapes (hero / portrait), layered like cut paper */
.photo-cluster{position:relative; width:100%; max-width:400px; margin:0 auto; aspect-ratio:1/1;}
.cluster-lg{position:absolute; width:78%; height:78%; top:6%; left:6%; z-index:1;}
.cluster-sm{position:absolute; width:44%; height:44%; z-index:2;}
.cluster-pos-1{top:-4%; right:-6%;}
.cluster-pos-2{bottom:-6%; left:-4%;}
@media (min-width:900px){.photo-cluster{max-width:none; height:440px;}}

.deco-blob{position:absolute; z-index:0; pointer-events:none; opacity:.5;}

/* ---------- context gallery — mostly rectangular, a couple of circular accents ---------- */
.gallery-grid{position:relative; display:grid; grid-template-columns:1fr; gap:20px; padding:16px 20px 56px 20px;}
.gallery-grid .photo-frame,
.gallery-grid .organic-frame{border-radius:26px;}
.gallery-grid .organic-frame.shape-circle{border-radius:50%;}
.gallery-grid .g-tall{height:260px;}
.gallery-grid .g-wide{height:200px;}
@media (min-width:900px){
  .gallery-grid{grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:24px; padding:16px 56px 80px 56px; max-width:1280px; margin:0 auto;}
  .gallery-grid .g-a{grid-column:1/3; grid-row:1/3;}
  .gallery-grid .g-b{grid-column:3/5; grid-row:1/2;}
  .gallery-grid .g-c{grid-column:3/4; grid-row:2/3;}
  .gallery-grid .g-d{grid-column:4/5; grid-row:2/3;}
  .gallery-grid .g-tall,.gallery-grid .g-wide{height:auto;}
}

/* ---------- hero photo carousel (clean crossfade, several context photos) ---------- */
.hero-carousel{position:relative; width:100%; height:320px; border-radius:28px; overflow:hidden; box-shadow:0 18px 40px rgba(74,46,58,.14);}
.hero-carousel .carousel-slide{
  position:absolute; inset:0; background:var(--earth); border:1px solid var(--earth-border);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-align:center;
  opacity:0; transition:opacity .8s ease; padding:20px;
}
.hero-carousel .carousel-slide.active{opacity:1;}
.carousel-dots{position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:2;}
.carousel-dot{width:7px; height:7px; border-radius:50%; background:rgba(74,46,58,.25); border:none; padding:0; cursor:pointer; transition:background .25s ease, transform .25s ease;}
.carousel-dot.active{background:var(--accent); transform:scale(1.3);}
@media (min-width:900px){.hero-carousel{height:420px;}}
@media (prefers-reduced-motion:reduce){.hero-carousel .carousel-slide{transition:none;}}

/* ---------- intro video (home, first media block) ---------- */
.intro-video{position:relative; width:100%; max-width:980px; aspect-ratio:16/9; border-radius:28px; overflow:hidden; background:var(--malva); box-shadow:0 18px 40px rgba(74,46,58,.18);}
.intro-video video{width:100%; height:100%; display:block; object-fit:cover; background:var(--malva);}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%; border:none; cursor:pointer;
  background:var(--cta); color:var(--cream-text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(110,26,39,.4);
  transition:background .18s ease, transform .18s ease, opacity .25s ease;
}
.video-play svg{margin-left:4px;}
.video-play:hover{background:var(--cta-dark); transform:translate(-50%,-50%) scale(1.07);}
.video-play:focus-visible{outline:3px solid var(--cream-text); outline-offset:3px;}
.intro-video.is-playing .video-play{opacity:0; pointer-events:none;}
@media (max-width:599px){.video-play{width:66px; height:66px;} .video-play svg{width:24px; height:24px;}}

/* ---------- "El estudio" photos — each kept in its original format ---------- */
.studio-photos{
  max-width:980px; margin:0 auto; padding:0 20px 56px 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;
}
.studio-photo{margin:0; border-radius:24px; overflow:hidden; box-shadow:0 14px 32px rgba(74,46,58,.14); background:var(--earth);}
.studio-photo img{width:100%; height:auto; display:block;}
.studio-photo-wide{grid-column:1 / -1;}
@media (min-width:900px){.studio-photos{gap:28px; padding:0 56px 80px 56px;}}
@media (max-width:599px){.studio-photos{grid-template-columns:1fr; gap:16px;}}

/* ---------- section title (bigger header for labelled sections) ---------- */
.section-title{font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--malva); text-align:center; margin-top:6px;}

/* ---------- reassurance band ---------- */
.band{background:var(--malva); padding:44px 20px; text-align:center; display:flex; justify-content:center; position:relative; overflow:hidden;}
.band p{font-size:1.2rem; line-height:1.55; color:var(--band-text); max-width:640px; position:relative; z-index:1;}
@media (min-width:900px){.band{padding:64px 56px;}}

/* ---------- feature cards (trust points) ---------- */
.feature-grid{display:grid; grid-template-columns:1fr; gap:22px; padding:44px 20px;}
.feature-card{
  background:var(--pink-light); border-radius:22px; padding:28px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{transform:translateY(-8px); box-shadow:0 18px 32px rgba(74,46,58,.16);}
.feature-card .icon-wrap{
  width:54px; height:54px; border-radius:60% 40% 55% 45% / 45% 55% 45% 55%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease;
}
.feature-card:hover .icon-wrap{transform:rotate(-8deg) scale(1.08);}
.feature-card p{font-size:16px; line-height:1.55; color:var(--malva);}
@media (min-width:900px){.feature-grid{grid-template-columns:repeat(3,1fr); gap:32px; padding:64px 56px; max-width:1280px; margin:0 auto;}}

/* ---------- process steps — clean infographic on an organic pink field ---------- */
.process-organic{background:var(--pink-light); position:relative;}
.process-flow{max-width:1040px; margin:0 auto; padding:6px 20px 46px 20px; position:relative; z-index:1;}
.flow-grid{display:flex; flex-direction:column; gap:18px; margin-top:24px;}
.flow-step{
  display:flex; align-items:flex-start; gap:16px; background:var(--bg);
  border-radius:20px; padding:20px 22px; box-shadow:0 10px 24px rgba(74,46,58,.08);
  transition:transform .28s ease, box-shadow .28s ease;
}
.flow-step:hover{transform:translateY(-5px); box-shadow:0 18px 34px rgba(74,46,58,.16);}
.flow-num{
  width:42px; height:42px; flex-shrink:0; background:var(--accent); color:var(--cream-text);
  display:flex; align-items:center; justify-content:center; font-family:'Frank Ruhl Libre', serif; font-size:17px; font-weight:600;
  transition:transform .28s ease;
}
.flow-step:hover .flow-num{transform:rotate(-8deg) scale(1.08);}
.flow-step:nth-child(6n+1) .flow-num{border-radius:58% 42% 63% 37% / 45% 55% 45% 55%;}
.flow-step:nth-child(6n+2) .flow-num{border-radius:40% 60% 45% 55% / 62% 38% 65% 35%;}
.flow-step:nth-child(6n+3) .flow-num{border-radius:65% 35% 40% 60% / 40% 65% 35% 60%;}
.flow-step:nth-child(6n+4) .flow-num{border-radius:35% 65% 60% 40% / 55% 35% 65% 45%;}
.flow-step:nth-child(6n+5) .flow-num{border-radius:50% 50% 70% 30% / 30% 65% 35% 70%;}
.flow-step:nth-child(6n+6) .flow-num{border-radius:70% 30% 50% 50% / 50% 40% 60% 50%;}
.flow-text h3{font-size:16.5px; color:var(--malva); margin-bottom:5px;}
.flow-text p{font-size:14px; line-height:1.55; color:var(--text-muted);}
@media (min-width:900px){
  .flow-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start;}
  .flow-step{flex-direction:column; text-align:left;}
  .flow-step:nth-child(2){margin-top:32px;}
  .flow-step:nth-child(5){margin-top:32px;}
  .flow-step:nth-child(3){margin-top:-16px;}
  .flow-step:nth-child(6){margin-top:0;}
}
@media (prefers-reduced-motion:reduce){.flow-step,.flow-num{transition:none;}}

/* ---------- final CTA ---------- */
.final-cta{padding:56px 20px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; position:relative;}
.final-cta h2{font-size:2rem; color:var(--malva); position:relative; z-index:1;}
.final-cta .btn{position:relative; z-index:1; padding:16px 30px;}
@media (min-width:900px){.final-cta{padding:88px 56px;}}

/* ---------- footer ---------- */
footer{background:var(--malva); padding:44px 20px 32px 20px; position:relative; overflow:hidden;}
.footer-top{display:flex; flex-direction:column; gap:20px; position:relative; z-index:1;}
.footer-brand{font-family:'Frank Ruhl Libre', serif; font-weight:700; font-size:clamp(1.3rem,3vw,1.6rem); color:var(--cream-text);}
.footer-tag{font-size:14.5px; color:#D8C3C0; line-height:1.6;}
.footer-legal{border-top:1px solid var(--malva-2); margin-top:24px; padding-top:20px; position:relative; z-index:1;}
.footer-legal p{font-size:13px; color:#C9B3B0; line-height:1.6;}
@media (min-width:900px){footer{padding:56px 56px 40px 56px;} .footer-top{flex-direction:row; justify-content:space-between; align-items:flex-start;}}

/* ---------- translucent intro/description panel — surfaces main page-intro text over the busier vector background ---------- */
.text-panel{
  background:rgba(251,243,236,.7);
  border-radius:26px;
  padding:34px 30px;
  box-shadow:0 10px 28px rgba(74,46,58,.06);
}
@media (min-width:900px){.text-panel{padding:44px 52px;}}

/* ---------- section title / eyebrow ---------- */
.eyebrow{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600;}
.section-pad{padding:56px 20px;}
@media (min-width:900px){.section-pad{padding:80px 56px;}}
.max-content{max-width:820px;}


/* ---------- FAQ accordion (organic cards, consistent with .flow-step / .feature-card language) ---------- */
.faq-list{max-width:820px; margin:0 auto; padding:0 20px 70px 20px; display:flex; flex-direction:column; gap:14px;}
.faq-item{
  background:rgba(251,243,236,.82);
  border:1px solid var(--earth-border);
  border-radius:20px;
  padding:4px 24px;
  box-shadow:0 8px 20px rgba(74,46,58,.07);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.faq-item.open{
  background:var(--pink-light);
  border-color:var(--pink);
  box-shadow:0 16px 30px rgba(74,46,58,.14);
}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; cursor:pointer;}
.faq-q h3{font-size:17px; color:var(--malva);}
.icon-plus{transition:transform .3s ease; flex-shrink:0;}
.faq-item.open .icon-plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s ease;}
.faq-item.open .faq-a{max-height:640px;}
.faq-a p{font-size:15px; line-height:1.65; color:var(--text-muted); padding-bottom:22px; max-width:640px;}
@media (min-width:900px){.faq-list{padding:0 56px 90px 56px;} .faq-item{padding:4px 30px;}}

/* ---------- casos: consent gate + case cards ---------- */
.consent-bar{
  margin:40px 20px 40px 20px; padding:24px 22px; background:var(--pink-light); border-radius:18px;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; text-align:center;
}
.consent-bar p{font-size:14.5px; color:var(--malva); line-height:1.55; max-width:520px; margin:0 auto;}
.case-grid{display:grid; grid-template-columns:1fr; gap:32px; padding:0 20px 70px 20px;}
.case-card h3{font-size:20px; color:var(--malva); margin-bottom:8px;}
.case-card p{font-size:14.5px; color:var(--text-muted); line-height:1.6;}
.gallery-gate{position:relative;}
.gallery-gate .gated-visual{filter:blur(16px); transition:filter .45s ease; pointer-events:none;}
.gallery-gate.revealed .gated-visual{filter:none; pointer-events:auto;}
.gate-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:rgba(251,243,236,.6); transition:opacity .4s ease; text-align:center; padding:20px;}
.gallery-gate.revealed .gate-overlay{opacity:0; pointer-events:none;}
.gate-overlay p{font-size:13.5px; color:var(--malva); max-width:260px;}
@media (min-width:900px){.consent-bar{margin:56px 56px 48px 56px;} .case-grid{grid-template-columns:repeat(2,1fr); gap:40px; padding:0 56px 96px 56px;}}
/* single featured case — image kept in its original proportions, text beside it */
.case-single{max-width:1040px; margin:0 auto; padding:0 20px 70px 20px;}
.case-feature{display:flex; flex-direction:column; align-items:center; gap:28px;}
.case-media{width:100%; max-width:460px; border-radius:24px; overflow:hidden; box-shadow:0 18px 40px rgba(74,46,58,.16); background:var(--earth);}
.case-media img{width:100%; height:auto; display:block;}
.case-text{max-width:520px; width:100%; text-align:center;}
.case-text .case-title{font-size:clamp(1.4rem,3vw,1.75rem); line-height:1.2; color:var(--malva); margin:10px 0 18px;}
.case-text p:not(.eyebrow){font-size:16px; line-height:1.7; color:var(--text-muted);}
.case-text p:not(.eyebrow) + p{margin-top:14px;}
@media (min-width:900px){
  .case-single{padding:0 56px 96px 56px;}
  .case-feature{flex-direction:row; align-items:center; justify-content:center; gap:56px;}
  .case-media{flex:0 0 460px;}
  .case-text{text-align:left;}
}

/* ---------- contact blobs (Instagram / Email / WhatsApp) ---------- */
.contact-blobs{display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin-top:8px; position:relative; z-index:1;}
.contact-blob{
  width:190px; height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(150deg, var(--pink-light), var(--pink)); color:var(--malva); text-decoration:none;
  text-align:center; padding:10%; box-shadow:0 16px 34px rgba(74,46,58,.16);
  transition:transform .3s ease, box-shadow .3s ease;
}
.contact-blob:hover{transform:translateY(-6px) scale(1.03); box-shadow:0 22px 44px rgba(74,46,58,.22); color:var(--malva);}
.contact-blob .contact-label{font-family:'Frank Ruhl Libre', serif; font-size:16.5px; font-weight:600;}
.contact-blob .contact-detail{font-size:12px; color:var(--text-muted);}
.contact-blob.is-pending{background:linear-gradient(150deg, var(--earth), var(--earth-border)); cursor:default;}
.contact-blob.is-pending:hover{transform:none; box-shadow:0 16px 34px rgba(74,46,58,.16);}
.shape-ig{border-radius:58% 42% 63% 37% / 45% 55% 45% 55%;}
.shape-mail{border-radius:40% 60% 45% 55% / 62% 38% 65% 35%;}
.shape-wa{border-radius:65% 35% 40% 60% / 40% 65% 35% 60%;}
@media (min-width:900px){.contact-blob{width:220px; height:220px;}}

/* ---------- "Sobre mí" portrait — circular crop that keeps the face whole and centred ---------- */
.portrait-circle{width:min(400px, 78vw); aspect-ratio:1/1; margin:0 auto; border-radius:50%; overflow:hidden; box-shadow:0 18px 44px rgba(74,46,58,.18); background:var(--earth);}
.portrait-circle img{width:100%; height:100%; display:block; object-fit:cover; object-position:50% 12%;}

/* ---------- CTA placed inside the hero text panel ---------- */
.panel-cta{margin-top:32px; display:flex; justify-content:center;}

/* ---------- secondary (outline) button — for off-site / non-conversion links ---------- */
.btn-outline{background:transparent; color:var(--malva); border:1.5px solid var(--malva);}
.btn-outline:hover{background:var(--malva); color:var(--cream-text); box-shadow:0 12px 22px rgba(74,46,58,.22);}

/* ---------- "Sobre mí" — other beauty services block ---------- */
.other-services{max-width:680px; margin:0 auto; padding:0 20px 80px 20px;}
.other-services .text-panel{text-align:center;}
.other-services h2{font-size:clamp(1.5rem,3.4vw,2rem); color:var(--malva); margin-top:12px;}
.other-services-copy{font-size:16.5px; line-height:1.7; color:var(--text-muted); margin:16px auto 28px auto; max-width:480px;}
@media (min-width:900px){.other-services{padding-bottom:110px;}}
@media (max-width:599px){.other-services .text-panel{padding:30px 20px;} .other-services .btn-ig{padding:13px 18px; font-size:13.5px; white-space:nowrap;}}

/* ---------- home hero (option C content, stacked: text panel, then vertical video) ---------- */
.hero-stack{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:44px; padding:40px 20px 56px 20px;}
.hero-panel{width:100%; max-width:860px; text-align:center;}
.hero-panel > *{max-width:640px; margin-left:auto; margin-right:auto;}
.hero-title{font-size:clamp(2.1rem,6vw,3.2rem); line-height:1.08; margin-top:12px; color:var(--malva);}
.hero-lead{font-size:clamp(1.1rem,2.6vw,1.25rem); color:var(--accent); font-weight:600; margin-top:22px;}
.hero-copy{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.hero-copy p{font-size:clamp(1rem,2.2vw,1.06rem); color:var(--text-muted); line-height:1.65;}
.hero-panel .panel-cta{justify-content:center; margin-top:28px;}
.intro-video.hero-video{width:100%; max-width:860px; aspect-ratio:16/9;}
@media (min-width:900px){.hero-stack{padding:56px 40px 72px 40px; gap:52px;}}

/* ---------- legal pages ---------- */
.legal-page{position:relative; z-index:1; max-width:860px; margin:0 auto; padding:48px 20px 80px 20px;}
.legal-title{font-size:clamp(2rem,5vw,2.8rem); color:var(--malva); margin-top:12px;}
.legal-updated{font-size:13.5px; color:var(--text-muted); margin-top:10px;}
.legal-body{margin-top:32px; text-align:left;}
.legal-body h2{font-family:'Frank Ruhl Libre', serif; font-size:clamp(1.2rem,2.6vw,1.45rem); color:var(--malva); margin:28px 0 10px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{font-family:'DM Sans', sans-serif; font-size:15.5px; font-weight:700; color:var(--accent); margin:18px 0 6px;}
.legal-body p, .legal-body li{font-size:15.5px; line-height:1.7; color:var(--text-muted);}
.legal-body p + p{margin-top:10px;}
.legal-body ul{padding-left:20px; list-style:disc; margin:8px 0;}
.legal-body ul.legal-data{list-style:none; padding-left:0;}
.legal-body li{margin-bottom:6px;}
.legal-body a{color:var(--accent); text-decoration:underline; word-break:break-word;}
.footer-links{margin-top:10px;}
.footer-links a{color:#E7D6D2; font-size:13px; text-decoration:underline;}

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