/* =========================================================
   GAVELLE BEAUTY — Design tokens
   Paleta extraída del logo: crema cálido + rosa empolvado
========================================================= */
:root{
  --cream:        #F5F4F2;
  --cream-deep:   #EDE7E2;
  --rose:         #CC9A93;
  --rose-deep:    #B07A72;
  --rose-line:    #DDBAB2;
  --ink:          #221F1D;
  --ink-soft:     #6B6560;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --max-w: 1120px;
  --radius: 18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }

.eyebrow{
  font-family:var(--font-sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--rose-deep);
  margin:0 0 14px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 34px;
  border-radius:999px;
  font-family:var(--font-sans);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn--primary{
  background:var(--rose);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(176,122,114,.6);
}
.btn--primary:hover{ background:var(--rose-deep); transform:translateY(-2px); }
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn--ghost:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.btn--wide{ width:100%; max-width:360px; }
.btn__icon{ width:19px; height:19px; flex-shrink:0; }

/* =========================================================
   NAV
========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,244,242,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rose-line);
}
.nav__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__logo{
  width:52px; height:52px;
  border-radius:50%;
  box-shadow:0 2px 10px -4px rgba(34,31,29,.25);
}
.nav__wordmark{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.03em;
}
.nav__links{ display:flex; align-items:center; gap:36px; }
.nav__links a{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.nav__links a:hover{ color:var(--rose-deep); }
.nav__cta{
  padding:10px 22px;
  border-radius:999px;
  background:var(--rose);
  color:#fff !important;
}
.nav__cta:hover{ background:var(--rose-deep); }

.nav__burger{
  display:none; background:none; border:0; cursor:pointer;
  width:32px; height:24px; flex-direction:column; justify-content:space-between; padding:0;
}
.nav__burger span{
  height:2px; width:100%; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav__mobile{
  display:none; flex-direction:column;
  padding:8px 24px 20px;
  border-top:1px solid var(--rose-line);
}
.nav__mobile a{
  padding:12px 0;
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--cream-deep);
}
.nav__mobile.is-open{ display:flex; }

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:96px 24px 72px;
  text-align:center;
  overflow:hidden;
}
.hero__logo{
  width:clamp(220px, 34vw, 340px); height:auto;
  margin:0 auto 20px;
  animation:hero-fade-up .8s ease both;
}
.hero__title{
  font-size:clamp(2.1rem, 5vw, 3.1rem);
  line-height:1.18;
  letter-spacing:-.01em;
  margin-bottom:22px;
  animation:hero-fade-up .8s .1s ease both;
}
.hero__subtitle{
  max-width:520px;
  margin:0 auto 40px;
  color:var(--ink-soft);
  font-size:1.02rem;
  animation:hero-fade-up .8s .2s ease both;
}
.hero__actions{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  animation:hero-fade-up .8s .3s ease both;
}
.eyebrow{ animation:hero-fade-up .8s ease both; }

@keyframes hero-fade-up{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero__sparkles{ position:absolute; inset:0; pointer-events:none; }
.sparkle{
  position:absolute;
  color:var(--rose-line);
  font-size:1.1rem;
  animation:twinkle 3.2s ease-in-out infinite;
}
.sparkle--1{ top:12%; left:8%;  animation-delay:0s; }
.sparkle--2{ top:22%; right:10%; font-size:.8rem; animation-delay:.8s; }
.sparkle--3{ bottom:18%; left:14%; font-size:.7rem; animation-delay:1.6s; }
.sparkle--4{ bottom:8%; right:16%; animation-delay:2.3s; }
@keyframes twinkle{
  0%,100%{ opacity:.25; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1.15); }
}

/* =========================================================
   SECTION DIVIDER (motivo del logo: destellos)
========================================================= */
.divider{
  display:flex; align-items:center; justify-content:center;
  max-width:var(--max-w); margin:0 auto; padding:0 24px;
}
.divider::before, .divider::after{
  content:""; flex:1; height:1px; background:var(--rose-line);
}
.divider__spark{
  color:var(--rose); font-size:.9rem; padding:0 18px;
}

/* =========================================================
   SECTION HEAD (shared)
========================================================= */
.section__head{
  max-width:640px; margin:0 auto; padding:88px 24px 40px; text-align:center;
}
.section__head h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:14px; }
.section__subtitle{ color:var(--ink-soft); font-size:1rem; }

/* =========================================================
   CATÁLOGO — embed dinámico de Canva
========================================================= */
.catalogo__frame-wrap{
  max-width:1100px;
  margin:0 auto 100px;
  padding:0 24px;
}
.catalogo__frame{
  position:relative;
  width:100%;
  padding-top:70.7%; /* proporción horizontal (páginas del catálogo ~1.41:1); ajusta este % si cambias el formato en Canva */
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(34,31,29,.28);
  border:1px solid var(--rose-line);
}
.catalogo__frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:none;
}
.catalogo__placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  padding:32px;
  text-align:center;
  background:linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 100%);
  color:var(--ink-soft);
}
.catalogo__placeholder-spark{ color:var(--rose); font-size:1.6rem; margin-bottom:6px; }
.catalogo__placeholder p{ margin:0; font-size:1rem; color:var(--ink); }
.catalogo__placeholder-note{
  font-size:.82rem !important;
  color:var(--ink-soft) !important;
}
.catalogo__placeholder-note code{
  background:var(--cream-deep);
  padding:2px 6px;
  border-radius:4px;
  font-family:monospace;
}

/* =========================================================
   REDES SOCIALES
========================================================= */
.redes{ padding-bottom:100px; }
.social{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
}
.social__link{
  display:flex; align-items:center; gap:12px;
  padding:16px 26px;
  border-radius:999px;
  border:1px solid var(--rose-line);
  background:#fff;
  font-size:.88rem;
  font-weight:500;
  letter-spacing:.03em;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.social__link:hover{
  transform:translateY(-3px);
  border-color:var(--rose);
  box-shadow:0 14px 30px -16px rgba(204,154,147,.6);
}
.social__link svg{ width:20px; height:20px; flex-shrink:0; }

/* =========================================================
   FOOTER
========================================================= */
.footer{
  text-align:center;
  padding:80px 24px 48px;
  background:var(--ink);
  color:var(--cream);
}
.footer__logo{
  width:70px; height:70px; border-radius:50%;
  margin:0 auto 20px;
  filter:brightness(0) invert(1);
  opacity:.92;
}
.footer__tagline{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.2rem;
  margin-bottom:32px;
  color:#fff;
}
.footer .btn--primary{ margin-bottom:22px; }
.footer__soon{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rose-line);
  margin-bottom:40px;
}
.footer__copy{
  font-size:.78rem;
  color:rgba(245,244,242,.5);
}

@media (max-width:600px){
  .hero{ padding:72px 20px 56px; }
  .section__head{ padding:64px 20px 32px; }
  .catalogo__frame-wrap{ margin-bottom:72px; }
}