:root{
  --cream:#fbf6f1;--white:#fffdfb;--blush:#f4d6d6;--rose:#f0a0a9;--deep:#dd6d7c;
  --ink:#4a3236;--muted:#8d7477;--gold:#b8925a;
  --serif:'Cormorant Garamond',serif;--sans:'Jost',sans-serif;--script:'Pinyon Script',cursive;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--cream);overflow-x:hidden;line-height:1.7}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--deep);font-weight:300}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05}
h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1.2rem}
.script{font-family:var(--script)}
.eyebrow{font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
section{padding:8rem 6vw}

.btn{display:inline-block;padding:1rem 2.4rem;border-radius:999px;background:linear-gradient(135deg,var(--rose),var(--deep));color:var(--white);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;border:0;cursor:pointer;box-shadow:0 15px 35px -12px rgba(201,123,134,.6);transition:transform .5s var(--ease),box-shadow .5s var(--ease);font-family:var(--sans)}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 40px -12px rgba(201,123,134,.75)}
.btn--small{padding:.7rem 1.6rem;font-size:.7rem}
.btn--full{width:100%}
.link{font-family:var(--serif);font-style:italic;font-size:1.2rem;border-bottom:1px solid var(--rose)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1rem 6vw;transition:.5s var(--ease)}
.nav.scrolled{background:rgba(251,246,241,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(184,146,90,.2);padding:.5rem 6vw}
.nav__logo{display:flex;align-items:center;gap:.6rem}
.nav__logo img{width:34px;height:34px;object-fit:contain;transform:scale(1.5)}
.nav__logo img{
  background:var(--white);
  border-radius:50%;
  padding:3px;

  border:1px solid rgba(184,146,90,.12);

  box-shadow:
    0 8px 22px -15px rgba(74,50,54,.35);
}
.nav__logo span{margin-left: 0.7rem; font-family:var(--script);font-size:1.8rem;color:var(--deep)}
.nav__links{
  display:flex;
  align-items:center;
  gap:2rem;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.nav__links a:not(.btn){position:relative}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--deep);transition:.4s var(--ease)}
.nav__links a:not(.btn):hover::after{width:100%}
.nav__toggle{display:none;background:none;border:0;width:30px;cursor:pointer}
.nav__toggle span{display:block;height:1px;background:var(--ink);margin:7px 0;transition:.4s}
/* redes sociales navbar */

.nav__socials{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-left:-.7rem;
}

.nav__social{
  position:relative;
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;
  color:#fff;

  overflow:hidden;

  box-shadow:
    0 8px 20px -8px rgba(74,50,54,.35);

  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    filter .4s var(--ease);
}

.nav__social iconify-icon{
  position:relative;
  z-index:2;
  font-size:1.15rem;
}


/* evita la línea rosa del hover normal del navbar */

.nav__social::after{
  display:none !important;
}


/* WHATSAPP */

.nav__social--whatsapp{
  background:
    linear-gradient(
      145deg,
      #5df28a,
      #25d366 55%,
      #128c4a
    );
}


/* FACEBOOK */

.nav__social--facebook{
  background:
    linear-gradient(
      145deg,
      #4f91ff,
      #1877f2 55%,
      #0b55be
    );
}


/* INSTAGRAM */

.nav__social--instagram{
  background:
    radial-gradient(
      circle at 30% 107%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 45%,
      #d6249f 60%,
      #285aeb 90%
    );
}


/* TIKTOK */

.nav__social--tiktok{
  background:
    linear-gradient(
      145deg,
      #25f4ee,
      #171717 42%,
      #171717 58%,
      #fe2c55
    );
}


/* hover */

.nav__social:hover{
  transform:translateY(-3px) scale(1.06);

  filter:
    brightness(.78)
    saturate(1.15);

  box-shadow:
    0 12px 25px -8px rgba(74,50,54,.5);
}

/* hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center;padding-top:9rem;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 20%,#fbe5e5 0,transparent 55%),var(--cream)}
.hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;animation:float 14s ease-in-out infinite}
.hero__blob--1{width:420px;height:420px;background:var(--blush);top:-100px;left:-120px}
.hero__blob--2{width:300px;height:300px;background:#f7e6d4;bottom:-80px;left:40%;animation-delay:-6s}
@keyframes float{50%{transform:translate(40px,30px) scale(1.1)}}
.hero__text{position:relative;z-index:2}
.hero h1{font-size:clamp(3.2rem,6vw,7rem);font-weight:300;margin-bottom:1.8rem;letter-spacing:-.01em}
.hero__lead{max-width:30rem;color:var(--muted);font-size:1.05rem;margin-bottom:2.5rem}
.hero__cta{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.hero__stats{display:flex;gap:3rem;margin-top:4rem;padding-top:2rem;border-top:1px solid rgba(184,146,90,.25)}
.hero__stats strong{font-family:var(--serif);font-size:2.4rem;font-weight:400;display:block;color:var(--deep)}
.hero__stats span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero__media{position:relative;justify-self:center;width:min(100%,460px)}
.hero__frame{aspect-ratio:4/5;border-radius:240px 240px 24px 24px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(74,50,54,.35)}
.hero__frame img{transform:scale(1.1);transition:transform 1.6s var(--ease)}
.loaded .hero__frame img{transform:scale(1)}
.hero__badge{position:absolute;left:-2.5rem;bottom:3rem;background:var(--white);padding:1.1rem 1.8rem;border-radius:18px;box-shadow:0 20px 40px -18px rgba(74,50,54,.3);text-align:center;animation:float 8s ease-in-out infinite}
.hero__badge .script{font-size:2rem;color:var(--deep);line-height:1}
.hero__badge small{display:block;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.hero__circle{overflow:visible;position:absolute;top:-2rem;right:-2.5rem;width:140px;animation:spin 22s linear infinite;fill:var(--gold);font-size:13px;letter-spacing:3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* marquee */
.marquee{background:var(--ink);color:var(--blush);padding:1.4rem 0;overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;gap:2.5rem;animation:mq 30s linear infinite;font-family:var(--serif);font-style:italic;font-size:1.6rem;align-items:center}
.marquee__track{color:var(--gold)}
.marquee span{color:var(--blush)}
@keyframes mq{to{transform:translateX(-50%)}}

/* about */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:6rem;align-items:center;background:var(--white)}
.about__img{aspect-ratio:4/5;border-radius:24px;overflow:hidden;position:relative}
.about__img::after{content:"";position:absolute;inset:1.2rem;border:1px solid rgba(255,255,255,.7);border-radius:16px}
.about__text>p:not(.eyebrow):not(.signature){color:var(--muted);margin-bottom:1.8rem}
.checks{list-style:none;display:grid;gap:.8rem;margin-bottom:2rem}
.checks li::before{content:"✦";color:var(--rose);margin-right:.8rem}
.signature{font-family:var(--script);font-size:2.6rem;color:var(--deep)}

/* selfcare / momento para ti */

.selfcare{
  position:relative;
  display:grid;
  grid-template-columns:1fr .9fr;
  align-items:center;
  gap:7rem;
  background:var(--white);
  overflow:hidden;
  padding-top:2rem;
}

/* detalle ambiental muy suave */
.selfcare::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(244,214,214,.55),
    rgba(244,214,214,0) 70%
  );
  right:-130px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}

.selfcare::after{
  content:"";
  position:absolute;
  left:6vw;
  right:6vw;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(184,146,90,.25),
    transparent
  );
}


/* texto */

.selfcare__text{
  position:relative;
  z-index:2;
  max-width:610px;
}

.selfcare__text h2{
  max-width:590px;
}

.selfcare__lead{
  max-width:520px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.9;
  margin-bottom:2rem;
}

.selfcare__detail{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin:2rem 0 2.5rem;
}

.selfcare__line{
  display:block;
  width:55px;
  height:1px;
  flex-shrink:0;
  background:var(--gold);
}

.selfcare__detail p{
  font-family:var(--serif);
  font-size:1.35rem;
  font-style:italic;
  color:var(--ink);
  line-height:1.4;
}

.selfcare__cta{
  display:flex;
  align-items:center;
}


/* zona del video */

.selfcare__media{
  position:relative;
  z-index:2;
  width:min(100%,460px);
  justify-self:center;
  padding:1.5rem;
}


/* celular */

.phone{
  position:relative;
  width:100%;
  aspect-ratio:9 / 16;
  padding:10px;
  border-radius:52px;

  background:
    linear-gradient(
      145deg,
      #f3dfd2,
      #fffaf6 32%,
      #c9a273 60%,
      #f6e9df
    );

  box-shadow:
    0 45px 80px -35px rgba(74,50,54,.45),
    0 20px 40px -25px rgba(221,109,124,.35),
    inset 0 0 0 1px rgba(255,255,255,.8);
}

.phone::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:49px;
  border:1px solid rgba(184,146,90,.45);
  pointer-events:none;
  z-index:0;
}


/* parlante / isla superior */

.phone__speaker{
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:31%;
  height:24px;
  border-radius:30px;
  background:#2c2425;
  z-index:5;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}


/* pantalla */

.phone__screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:43px;
  overflow:hidden;
  background:#f4d6d6;
}

.phone__screen video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* degradado inferior para texto */

.phone__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      transparent 55%,
      rgba(74,50,54,.08) 70%,
      rgba(74,50,54,.48) 100%
    );
  pointer-events:none;
}


/* texto sobre video */

.phone__caption{
  position:absolute;
  left:0;
  right:0;
  bottom:2rem;
  text-align:center;
  color:white;
  z-index:2;
  text-shadow:0 3px 15px rgba(74,50,54,.25);
}

.phone__caption .script{
  display:block;
  font-size:2.6rem;
  line-height:1;
}

.phone__caption small{
  display:block;
  margin-top:.4rem;
  font-size:.58rem;
  letter-spacing:.3em;
  text-transform:uppercase;
}


/* pequeño detalle flotante */

.selfcare__flower{
  position:absolute;
  right:-.5rem;
  top:18%;
  width:55px;
  height:55px;

  display:grid;
  place-items:center;

  border-radius:50%;
  background:var(--white);
  color:var(--gold);

  font-size:1.3rem;

  box-shadow:
    0 15px 35px -15px rgba(74,50,54,.35);

  animation:float 7s ease-in-out infinite;
}

.selfcare__note{
  position:absolute;
  left:-4rem;
  bottom:20%;

  padding:.8rem 1.2rem;

  background:rgba(255,253,251,.92);
  backdrop-filter:blur(10px);

  border:1px solid rgba(184,146,90,.18);
  border-radius:999px;

  box-shadow:
    0 18px 40px -25px rgba(74,50,54,.3);

  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight: 500;
  color:var(--gold);

  white-space:nowrap;
}

/* services */
.services{background:linear-gradient(180deg,var(--cream),#f9ebe8)}
.section-head{text-align:center;margin-bottom:4rem}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}

.card{position:relative;background:var(--white);padding:2.6rem 2rem;border-radius:200px 200px 20px 20px;text-align:center;transition:transform .6s var(--ease),box-shadow .6s var(--ease);border:1px solid rgba(232,165,173,.25);cursor:pointer;}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 60px -25px rgba(201,123,134,.45)}
.card__n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.1rem}
.card h3{font-size:1.9rem;margin:1.6rem 0 1rem}
.card p{color:var(--muted);font-size:.92rem;min-height:5.5rem}
.card__foot{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(184,146,90,.2)}
.card__foot span,.card__foot em{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-style:normal}
.card__foot strong{font-family:var(--serif);font-size:2.2rem;font-weight:400;margin:0 .4rem;color:var(--ink)}
.card--feat{background:linear-gradient(160deg,var(--blush),var(--white))}
.card__tag{position:absolute;top:1.2rem;left:50%;transform:translateX(-50%);background:var(--deep);color:var(--white);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;padding:.3rem .9rem;border-radius:99px}
.cards .card:nth-last-child(2):nth-child(4n + 1){
    grid-column:2;
}
/* gallery */
.gallery{background:var(--white); padding-top:3rem;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:1.2rem}
.g{position:relative;overflow:hidden;border-radius:20px;cursor:pointer}
.g--tall{grid-row:span 2}
.g--wide{grid-column:span 2}
.g img{transition:transform 1.2s var(--ease)}
.g:hover img{transform:scale(1.08)}
.g figcaption{position:absolute;left:1.4rem;bottom:1.2rem;color:var(--white);font-family:var(--serif);font-style:italic;font-size:1.6rem;opacity:0;transform:translateY(12px);transition:.5s var(--ease);text-shadow:0 2px 12px rgba(0,0,0,.3)}
.g::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(74,50,54,.5));opacity:0;transition:.5s}
.g:hover figcaption,.g:hover::after{opacity:1;transform:none}
.g figcaption{z-index:2}

/* =========================
   ENCUENTRA TU ESTILO
========================= */

.styles{
  position:relative;
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(244,214,214,.48),
      transparent 28%
    ),
    var(--white);

  overflow:hidden;
}


/* encabezado */

.styles__head{
  display:grid;
  grid-template-columns:1fr .7fr;
  align-items:end;
  gap:5rem;
  margin-bottom:4.5rem;
}

.styles__head h2{
  margin-bottom:0;
}

.styles__intro{
  color:var(--muted);
  max-width:480px;
  line-height:1.9;
  justify-self:end;
}

.styles__intro strong{
  color:var(--deep);
  font-weight:400;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15em;
}


/* GRID */

.style-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
  align-items:start;
}


/* CARD */

.style-card{
  position:relative;
  height:580px;
  border-radius:180px 180px 24px 24px;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;

  box-shadow:
    0 35px 70px -35px rgba(74,50,54,.35);

  transition:
    transform .8s var(--ease),
    box-shadow .8s var(--ease);
}

.style-card--lift{
  margin-top:3rem;
}

.style-card img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
  object-fit:cover;

  transition:
    transform 1.4s var(--ease),
    filter 1s var(--ease);
}

.style-card__shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(74,50,54,.02) 20%,
      rgba(74,50,54,.08) 45%,
      rgba(74,50,54,.72) 100%
    );

  z-index:1;

  transition:background .7s var(--ease);
}


/* numero */

.style-card__number{
  position:absolute;
  top:2rem;
  left:50%;
  transform:translateX(-50%);

  z-index:2;

  color:rgba(255,255,255,.9);
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(255,255,255,.12);
  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.45);
}


/* contenido */

.style-card__content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  z-index:2;

  padding:2.2rem 2rem 2.4rem;

  color:white;

  transform:translateY(56px);

  transition:transform .7s var(--ease);
}

.style-card__mini{
  display:block;

  margin-bottom:.6rem;

  font-size:.58rem;
  letter-spacing:.26em;
  text-transform:uppercase;

  color:#f8dedc;
}

.style-card h3{
  font-family:var(--serif);
  font-size:clamp(2.2rem,3vw,3.3rem);
  font-weight:300;
  margin-bottom:.8rem;
}

.style-card__content p{
  opacity:0;

  font-size:.85rem;
  line-height:1.7;

  color:rgba(255,255,255,.83);

  margin-bottom:1.3rem;

  transform:translateY(15px);

  transition:
    opacity .6s var(--ease),
    transform .6s var(--ease);
}

.style-card__content a{
  display:inline-flex;
  align-items:center;
  gap:.7rem;

  color:white;

  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;

  opacity:0;
  transform:translateY(15px);

  transition:
    opacity .6s var(--ease) .05s,
    transform .6s var(--ease) .05s;
}

.style-card__content a span{
  transition:transform .35s var(--ease);
}

.style-card__content a:hover span{
  transform:translateX(5px);
}


/* hover */

.style-card:hover{
  transform:translateY(-10px);

  box-shadow:
    0 45px 90px -35px rgba(74,50,54,.48);
}

.style-card--lift:hover{
  transform:translateY(calc(-10px));
}

.style-card:hover img{
  transform:scale(1.07);
  filter:saturate(1.04);
}

.style-card:hover .style-card__shade{
  background:
    linear-gradient(
      to bottom,
      rgba(74,50,54,.03),
      rgba(74,50,54,.13) 38%,
      rgba(74,50,54,.86) 100%
    );
}

.style-card:hover .style-card__content{
  transform:translateY(0);
}

.style-card:hover .style-card__content p,
.style-card:hover .style-card__content a{
  opacity:1;
  transform:translateY(0);
}


/* =========================
   NO HAY LIMITES
========================= */

.styles__freedom{
  position:relative;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;

  gap:2rem;

  margin-top:7rem;

  padding:2.6rem 3rem;

  border-radius:28px;

  background:
    linear-gradient(
      120deg,
      rgba(244,214,214,.36),
      rgba(251,246,241,.75),
      rgba(247,230,212,.42)
    );

  border:1px solid rgba(184,146,90,.18);

  overflow:hidden;
}

.styles__freedom::before{
  content:"";
  position:absolute;

  width:300px;
  height:300px;

  right:-100px;
  top:-130px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(240,160,169,.28),
      transparent 70%
    );
}

.styles__spark{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:var(--white);
  color:var(--gold);

  box-shadow:
    0 15px 35px -20px rgba(74,50,54,.4);

  font-size:1.2rem;
}

.styles__small{
  display:block;

  margin-bottom:.2rem;

  color:var(--gold);

  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.styles__freedom h3{
  font-size:2rem;
  margin-bottom:.3rem;
}

.styles__freedom p{
  max-width:650px;

  color:var(--muted);

  font-size:.9rem;
  line-height:1.7;
}

.styles__freedom .link{
  position:relative;
  z-index:2;

  white-space:nowrap;
}

/* reviews */
.reviews{text-align:center;background:var(--blush);background:radial-gradient(circle at 50% 0,#fbe9e9,var(--blush))}
.slider{position:relative;max-width:900px;margin:0 auto;min-height:260px}
.slide{position:absolute;inset:0;font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.6rem);font-style:italic;font-weight:300;line-height:1.35;opacity:0;transform:translateY(20px);transition:1s var(--ease)}
.slide.active{opacity:1;transform:none}
.slide cite{display:block;margin-top:1.6rem;font-family:var(--sans);font-style:normal;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--deep)}
.dots{display:flex;justify-content:center;gap:.6rem;margin-top:2rem}
.dots button{width:8px;height:8px;border-radius:99px;border:0;background:var(--rose);opacity:.4;cursor:pointer;transition:.4s}
.dots button.on{width:28px;opacity:1;background:var(--deep)}


/* salon */

.salon{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5.5rem;
  align-items:center;
  background:var(--white);
  overflow:hidden;
}

.salon__glow{
  position:absolute;
  top:-160px;
  left:-160px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,214,214,.85) 0%, rgba(247,230,212,.55) 38%, rgba(255,253,251,0) 72%);
  filter:blur(18px);
  pointer-events:none;
  z-index:0;
}

.salon__media,
.salon__text{
  position:relative;
  z-index:1;
}

.salon__frame{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 35px 80px -35px rgba(74,50,54,.28);
  background:var(--white);
}

.salon__frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.salon__frame::after{
  content:"";
  position:absolute;
  inset:1rem;
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  pointer-events:none;
}

.salon__text{
  max-width:580px;
}

.salon__lead{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.9;
  margin-bottom:2rem;
}

.salon__features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 1.5rem;
  margin-bottom:2.2rem;
}

.salon__item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:1rem 1rem;
  background:rgba(244,214,214,.14);
  border:1px solid rgba(184,146,90,.12);
  border-radius:16px;
}

.salon__item span{
  color:var(--gold);
  font-size:1rem;
  line-height:1.4;
}

.salon__item p{
  margin:0;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.6;
}

.salon__quote{
  display:flex;
  align-items:flex-start;
  gap:1rem;
}

.salon__line{
  display:block;
  width:58px;
  height:1px;
  background:var(--gold);
  margin-top:.9rem;
  flex-shrink:0;
}

.salon__quote p{
  margin:0;
  font-family:var(--serif);
  font-size:1.35rem;
  font-style:italic;
  color:var(--deep);
  line-height:1.45;
}

/* ========================================
   TU IDEA ES LA QUE MÁS CUENTA
======================================== */

.idea{
  position:relative;
  background:var(--white);
  overflow:hidden;
  padding-top: 3rem;
}

.idea__inner{
  position:relative;
  z-index:2;

  max-width:980px;
  margin:0 auto;
  text-align:center;
}

.idea h2{
  max-width:760px;
  margin:0 auto 1.4rem;
}

.idea__lead{
  max-width:650px;
  margin:0 auto 3rem;

  color:var(--muted);
  font-size:1rem;
  line-height:1.95;
}


/* glow suaves */

.idea__glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(18px);
}

.idea__glow--left{
  width:380px;
  height:380px;
  left:-140px;
  top:40px;
  background:
    radial-gradient(
      circle,
      rgba(244,214,214,.55) 0%,
      rgba(247,230,212,.22) 48%,
      transparent 72%
    );
}

.idea__glow--right{
  width:420px;
  height:420px;
  right:-160px;
  bottom:20px;
  background:
    radial-gradient(
      circle,
      rgba(244,214,214,.45) 0%,
      rgba(251,246,241,0) 70%
    );
}


/* mosaico */

.idea__cloud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.95rem .85rem;

  max-width:900px;
  margin:0 auto;
  padding:1rem 0 0;
}


/* pills */

.idea-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:46px;
  padding:.8rem 1.2rem;

  border-radius:999px;

  background:rgba(255,253,251,.95);
  border:1px solid rgba(184,146,90,.16);

  color:var(--ink);

  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;

  box-shadow:
    0 10px 25px -20px rgba(74,50,54,.35);

  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    background .45s var(--ease),
    color .45s var(--ease),
    border-color .45s var(--ease);
}


/* variaciones para que se vea editorial */

.idea-pill:nth-child(3n + 1){
  transform:rotate(-2deg);
}

.idea-pill:nth-child(4n + 2){
  transform:rotate(2deg);
}

.idea-pill:nth-child(5n){
  transform:translateY(5px);
}

.idea-pill:nth-child(6n){
  transform:translateY(-4px);
}


/* tonos */

.idea-pill--soft{
  background:rgba(244,214,214,.48);
  border-color:rgba(221,109,124,.14);
}

.idea-pill--cream{
  background:#fbf3e9;
  border-color:rgba(184,146,90,.14);
}

.idea-pill--gold{
  color:var(--gold);
  border-color:rgba(184,146,90,.3);
  background:rgba(255,253,251,.98);
}


/* pill destacada */

.idea-pill--featured{
  padding:.9rem 1.5rem;

  background:
    linear-gradient(
      135deg,
      var(--rose),
      var(--deep)
    );

  color:var(--white);
  border-color:transparent;

  font-family:var(--sans);
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;

  box-shadow:
    0 16px 30px -14px rgba(221,109,124,.65);
}


/* hover */

.idea-pill:hover{
  transform:translateY(-5px) rotate(0deg);
  background:var(--deep);
  color:var(--white);
  border-color:var(--deep);

  box-shadow:
    0 16px 30px -16px rgba(221,109,124,.65);
}


/* texto final */

.idea__closing{
  max-width:640px;
  margin:3rem auto 0;

  color:var(--muted);
  font-size:.98rem;
  line-height:1.9;
}

/* =========================
   ANTES DE TU CITA
========================= */

.before{
  position:relative;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(244,214,214,.42),
      transparent 32%
    ),
    var(--white);

  overflow:hidden;
}

.before__head{
  max-width:720px;
  margin:0 auto 4.5rem;
  text-align:center;
}

.before__head h2{
  margin-bottom:1.5rem;
}

.before__intro{
  max-width:620px;
  margin:0 auto;

  color:var(--muted);
  font-size:1rem;
  line-height:1.9;
}


/* PASOS */

.before__steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;

  max-width:1250px;
  margin:0 auto;
}

.before__step{
  position:relative;

  min-height:300px;
  padding:2.4rem 1.8rem;

  border-radius:26px;

  background:
    linear-gradient(
      145deg,
      rgba(255,253,251,.96),
      rgba(251,246,241,.82)
    );

  border:1px solid rgba(184,146,90,.16);

  box-shadow:
    0 30px 60px -40px rgba(74,50,54,.35);

  transition:
    transform .6s var(--ease),
    box-shadow .6s var(--ease);
}

.before__step:hover{
  transform:translateY(-8px);

  box-shadow:
    0 35px 70px -35px rgba(221,109,124,.32);
}


/* número */

.before__number{
  display:block;

  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;

  color:var(--gold);

  margin-bottom:2.8rem;
}


/* estrella */

.before__icon{
  position:absolute;
  top:1.8rem;
  right:1.8rem;

  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(244,214,214,.36);
  color:var(--deep);
}


/* textos */

.before__step h3{
  font-size:1.8rem;
  margin-bottom:1rem;
}

.before__step p{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.8;
}


/* cierre */

.before__ending{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:1.5rem;

  max-width:850px;

  margin:4.5rem auto 0;

  text-align:center;
}

.before__ending > span{
  width:70px;
  height:1px;
  background:rgba(184,146,90,.5);
}

.before__ending p{
  font-family:var(--serif);
  font-size:1.45rem;
  font-style:italic;

  color:var(--ink);
}

.before__ending em{
  color:var(--deep);
}

/* ========================================
   LO QUE HACE ESPECIAL TU CITA
======================================== */

.special{
  position:relative;
  background:var(--white);
  overflow:hidden;
  padding-top:5rem;
}


/* Glow rosa / crema muy suave */

.special__glow{
  position:absolute;
  width:600px;
  height:600px;
  right:-260px;
  bottom:-220px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(244,214,214,.5) 0%,
      rgba(247,230,212,.28) 42%,
      transparent 72%
    );

  filter:blur(20px);
  pointer-events:none;
}


/* =====================
   HEADER
===================== */

.special__head{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr .72fr;

  align-items:end;
  gap:5rem;

  margin-bottom:4.5rem;
}

.special__head h2{
  margin-bottom:0;
}

.special__intro{
  justify-self:end;

  max-width:480px;

  color:var(--muted);
  font-size:1rem;
  line-height:1.9;
}


/* =====================
   GRID
===================== */

.special__grid{
  position:relative;
  z-index:2;

  display:grid;

  /*
    Los primeros dos bloques ocupan menos.
    El tercero tiene mayor protagonismo.
  */

  grid-template-columns:.85fr .85fr 1.3fr;

  gap:1.4rem;

  align-items:stretch;
}


/* =====================
   CARDS
===================== */

.special-card{
  position:relative;

  min-height:430px;

  display:flex;
  flex-direction:column;

  padding:2.5rem 2.2rem;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,253,251,.98),
      rgba(251,246,241,.72)
    );

  border:1px solid rgba(184,146,90,.15);

  overflow:hidden;

  transition:
    transform .7s var(--ease),
    box-shadow .7s var(--ease),
    border-color .7s var(--ease);
}

.special-card:hover{
  transform:translateY(-8px);

  border-color:rgba(221,109,124,.24);

  box-shadow:
    0 35px 70px -42px rgba(74,50,54,.38);
}


/* top */

.special-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:4rem;
}

.special-card__number{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;

  color:var(--gold);
}


/* icono */

.special-card__icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(244,214,214,.32);

  border:1px solid rgba(221,109,124,.12);

  color:var(--deep);

  font-size:1rem;
}

.special-card__icon--rose{
  background:var(--deep);
  color:var(--white);

  box-shadow:
    0 10px 25px -12px rgba(221,109,124,.7);
}


/* textos */

.special-card__label{
  display:block;

  margin-bottom:.8rem;

  font-size:.58rem;
  letter-spacing:.28em;
  text-transform:uppercase;

  color:var(--gold);
}

.special-card h3{
  font-size:clamp(1.9rem,2.6vw,2.7rem);
  font-weight:300;

  margin-bottom:1.4rem;
}

.special-card p{
  color:var(--muted);

  font-size:.92rem;
  line-height:1.85;
}


/* pequeña línea inferior */

.special-card__line{
  width:48px;
  height:1px;

  margin-top:auto;

  background:var(--gold);

  opacity:.5;
}


/* ========================================
   TU IDEA ES LA QUE MÁS CUENTA
======================================== */

.special-card--idea{
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(244,214,214,.6),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #fffdfb,
      #fbf5f2
    );
}


/* mosaico */

.idea-cloud{
  display:flex;
  flex-wrap:wrap;

  align-items:center;
  justify-content:center;

  gap:.65rem;

  margin-top:auto;
  padding-top:2.2rem;
}


/* tags */

.idea-tag{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:.58rem 1rem;

  border-radius:999px;

  background:var(--white);

  border:1px solid rgba(184,146,90,.18);

  color:var(--ink);

  font-family:var(--serif);
  font-style:italic;
  font-size:.98rem;

  box-shadow:
    0 10px 25px -20px rgba(74,50,54,.35);

  cursor:default;

  transition:
    transform .45s var(--ease),
    background .45s var(--ease),
    color .45s var(--ease),
    box-shadow .45s var(--ease);
}


/* pequeñas variaciones */

.idea-tag:nth-child(3n + 1){
  transform:rotate(-2deg);
}

.idea-tag:nth-child(4n + 2){
  transform:rotate(2deg);
}

.idea-tag:nth-child(5n){
  transform:translateY(4px);
}


/* colores */

.idea-tag--pink{
  background:rgba(244,214,214,.55);
  border-color:rgba(221,109,124,.15);
}

.idea-tag--cream{
  background:#fbf3e9;

  border-color:
    rgba(184,146,90,.16);
}

.idea-tag--gold{
  color:var(--gold);

  border-color:
    rgba(184,146,90,.35);

  background:
    rgba(255,253,251,.9);
}


/* tag protagonista */

.idea-tag--featured{
  background:
    linear-gradient(
      135deg,
      var(--rose),
      var(--deep)
    );

  color:var(--white);

  border-color:transparent;

  padding:.68rem 1.35rem;

  font-family:var(--sans);
  font-style:normal;

  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;

  box-shadow:
    0 15px 30px -15px rgba(221,109,124,.7);
}


/* hover de mosaico */

.idea-tag:hover{
  transform:
    translateY(-4px)
    rotate(0deg);

  background:var(--deep);
  border-color:var(--deep);

  color:var(--white);

  box-shadow:
    0 15px 30px -18px rgba(221,109,124,.7);
}


/* ========================================
   FRASE FINAL
======================================== */

.special__ending{
  position:relative;
  z-index:2;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:1.8rem;

  margin:5rem auto 0;

  max-width:900px;

  text-align:center;
}

.special__ending-line{
  display:block;

  width:75px;
  height:1px;

  flex-shrink:0;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(184,146,90,.65)
    );
}

.special__ending-line:last-child{
  transform:scaleX(-1);
}

.special__ending p{
  font-family:var(--serif);

  font-size:clamp(1.25rem,2vw,1.55rem);

  font-style:italic;
  line-height:1.5;

  color:var(--ink);
}

.special__ending em{
  color:var(--deep);
}

/* ========================================
   INSTAGRAM
======================================== */

.instagram-section{
  position:relative;

  padding:8rem 6vw;

  display:flex;
  justify-content:center;
  align-items:center;

  color:#fff;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #f6a15f 0%,
      #ed6d73 24%,
      #dc4f7b 48%,
      #c93c8a 72%,
      #9644b6 100%
    );

  z-index:0;
}


/* =====================
   CONTENEDOR
===================== */

.instagram-container{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:.9fr 1.1fr;

  align-items:center;

  gap:6rem;

  max-width:1200px;
  width:100%;
}


/* ========================================
   FRAME / EMBED
======================================== */

.instagram-frame{
  position:relative;

  width:100%;
  max-width:460px;

  justify-self:center;

  padding:14px;

  border-radius:30px;

  background:rgba(255,255,255,.14);

  border:1px solid rgba(255,255,255,.24);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    0 35px 80px -35px rgba(79,24,73,.55);

  overflow:hidden; /* IMPORTANTE */

  transition:
    transform .6s var(--ease),
    box-shadow .6s var(--ease);
}



.iframe-container{
  position:relative;

  width:100%;

  overflow:hidden;

  border-radius:20px;

  background:#fff;

  isolation:isolate;
}


.instagram-frame iframe,
.instagram-media{
  width:100% !important;

  margin:0 !important;

  border-radius:18px !important;

  box-shadow:none !important;
}


/* ========================================
   INFORMACIÓN
======================================== */

.instagram-info{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  max-width:590px;
}


/* encabezado */

.instagram-heading{
  position:relative;
  display:block;
  margin-bottom:1.6rem;
}


/* icono */

.instagram-icon{
  position:absolute;

  left:-78px;
  top:.15rem;

  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  box-shadow:
    0 15px 35px -20px rgba(0,0,0,.4);
}

.instagram-icon iconify-icon{
  font-size:1.8rem;
  color:#fff;
}


/* eyebrow */

.instagram-eyebrow{
  margin-bottom:.55rem;

  font-size:.68rem;

  letter-spacing:.3em;
  text-transform:uppercase;

  color:rgba(255,255,255,.72);
}


/* título */

.instagram-title{
  margin:0;
  font-family:var(--serif);

  font-size:clamp(2.6rem,4.5vw,4.2rem);

  font-weight:300;
  line-height:1.03;

  color:#fff;
}

.instagram-title em{
  color:#fff7f4;

  font-weight:300;
}


/* descripción */

.instagram-subtitle{
  max-width:540px;

  margin-bottom:2rem;

  color:
    rgba(255,255,255,.88);

  font-size:1rem;

  line-height:1.9;
}


/* perfil */

.instagram-profile{
  display:flex;
  flex-direction:column;

  margin-bottom:2.3rem;
}

.instagram-profile span{
  font-family:var(--serif);

  font-size:1.7rem;

  color:#fff;
}

.instagram-profile small{
  margin-top:.15rem;

  color:
    rgba(255,255,255,.68);

  font-size:.62rem;

  letter-spacing:.24em;

  text-transform:uppercase;
}


/* ========================================
   BOTÓN
======================================== */

.instagram-button{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:.8rem;

  padding:1rem 2rem;

  border-radius:999px;

  background:#fff;

  color:#c93c78;

  font-family:var(--sans);

  font-size:.72rem;

  letter-spacing:.18em;

  text-transform:uppercase;

  box-shadow:
    0 18px 40px -18px rgba(77,18,64,.5);

  transition:
    transform .45s var(--ease),
    background .45s var(--ease),
    color .45s var(--ease),
    box-shadow .45s var(--ease);
}

.instagram-button span{
  font-size:1rem;

  transition:
    transform .35s var(--ease);
}


.instagram-button:hover{
  transform:translateY(-4px);

  background:#7e215c;

  color:#fff;

  box-shadow:
    0 25px 45px -18px rgba(77,18,64,.65);
}

.instagram-button:hover span{
  transform:translateX(4px);
}


/* ========================================
   GLOWS
======================================== */

.instagram-glow{
  position:absolute;

  border-radius:50%;

  pointer-events:none;

  filter:blur(10px);

  z-index:1;
}


.instagram-glow--1{
  width:620px;
  height:620px;

  right:-180px;
  top:-260px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 40%,
      transparent 72%
    );
}


.instagram-glow--2{
  width:500px;
  height:500px;

  left:-180px;
  bottom:-260px;

  background:
    radial-gradient(
      circle,
      rgba(255,210,222,.28) 0%,
      transparent 70%
    );
}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:5rem;background:var(--cream)}
.contact__info>p:not(.eyebrow){color:var(--muted);margin-bottom:2.4rem}
.info{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.info small{display:block;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.info a,.info span{font-family:var(--serif);font-size:1.3rem}
.form{background:var(--white);padding:3rem;border-radius:28px;box-shadow:0 40px 80px -40px rgba(74,50,54,.3);display:grid;gap:1.4rem}
.form label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:grid;gap:.4rem}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);border:0;border-bottom:1px solid rgba(184,146,90,.35);background:transparent;padding:.6rem 0;outline:none;transition:border-color .3s;resize:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--deep)}

/* ========================================
   FOOTER PREMIUM
======================================== */

.footer{
  position:relative;
  padding:0 6vw;
  overflow:hidden;
  color:var(--white);

  background:
    linear-gradient(
      150deg,
      #4a3236 0%,
      #40282e 45%,
      #352329 100%
    );
}


/* GLOWS */

.footer__glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(25px);
}

.footer__glow--1{
  width:520px;
  height:520px;
  top:-260px;
  left:-180px;

  background:
    radial-gradient(
      circle,
      rgba(240,160,169,.25),
      transparent 70%
    );
}

.footer__glow--2{
  width:500px;
  height:500px;
  right:-220px;
  bottom:-260px;

  background:
    radial-gradient(
      circle,
      rgba(247,230,212,.13),
      transparent 70%
    );
}


/* ========================================
   FIRMA DE MARCA
======================================== */

.footer__signature{
  position:relative;
  z-index:2;

  max-width:760px;
  margin:0 auto;

  padding:5.5rem 0 4.5rem;

  text-align:center;
}


/* logo en círculo blanco */

.footer__logo-medallion{
  position:relative;

  width:120px;
  height:120px;

  display:grid;
  place-items:center;

  margin:0 auto 2rem;

  border-radius:50%;

  background:#fffdfb;

  box-shadow:
    0 20px 50px -20px rgba(0,0,0,.45),
    0 0 0 1px rgba(244,214,214,.15);

  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease);
}

.footer__logo-medallion::after{
  content:"";

  position:absolute;
  inset:-7px;

  border-radius:50%;

  border:
    1px solid rgba(240,160,169,.28);
}

.footer__logo-medallion img{
  width:78%;
  height:78%;

  object-fit:contain;
}

.footer__logo-medallion:hover{
  transform:translateY(-5px);

  box-shadow:
    0 28px 60px -20px rgba(0,0,0,.5),
    0 0 35px rgba(240,160,169,.15);
}


.footer__eyebrow{
  color:#deb58f;
  margin-bottom:1rem;
}


.footer__signature h2{
  max-width:820px;

  margin:0 auto 1.3rem;

  color:#fffaf7;

  font-size:
    clamp(2.8rem,4vw,4.8rem);

  font-weight:300;
}

.footer__signature h2 em{
  color:var(--rose);
}


.footer__signature-text{
  max-width:580px;

  margin:0 auto;

  color:rgba(255,255,255,.6);

  font-size:.98rem;
  line-height:1.9;
}


.footer__signature-script{
  display:block;

  margin-top:1.7rem;

  color:#ef9eaa;

  font-size:2.2rem;
}


/* divisor */

.footer__divider{
  position:relative;
  z-index:2;

  height:1px;
  width:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244,214,214,.2),
      rgba(184,146,90,.35),
      rgba(244,214,214,.2),
      transparent
    );
}


/* ========================================
   CONTENIDO
======================================== */

.footer__main{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    1.3fr
    .8fr
    .8fr
    1fr;

  gap:4rem;

  padding:4.5rem 0;
}


.footer__brand{
  max-width:330px;
}


.footer__title{
  margin-bottom:1.5rem;

  color:#deb58f;

  font-size:.62rem;

  letter-spacing:.28em;
  text-transform:uppercase;
}


.footer__brand-text{
  color:rgba(255,255,255,.58);

  font-size:.88rem;
  line-height:1.85;
}

/* divisor */

.footer__line{
  position:relative;
  z-index:2;

  width:100%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244,214,214,.28),
      rgba(184,146,90,.35),
      rgba(244,214,214,.28),
      transparent
    );
}


/* ========================================
   CONTENIDO PRINCIPAL
======================================== */

.footer__main{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    1.45fr
    .75fr
    .75fr
    1fr;

  gap:4rem;

  padding:5rem 0;
}


/* ========================================
   BRAND
======================================== */


.footer__logo{
  display:block;

  width:110px;
  height:110px;

  margin-bottom:.5rem;
}

.footer__logo img{
  width:100%;
  height:100%;

  object-fit:contain;

  /* ayuda al logo claro sobre fondo oscuro */
  filter:
    drop-shadow(
      0 10px 25px rgba(240,160,169,.14)
    );
}

.footer__name{
  margin-bottom:1rem;

  font-size:2.7rem;

  line-height:1;

  color:#f5abb4;
}

.footer__brand-text{
  color:rgba(255,255,255,.58);

  font-size:.88rem;

  line-height:1.85;
}


.footer__socials{
  display:flex;
  align-items:center;

  gap:.75rem;

  margin-top:2rem;
}


.footer__social{
  position:relative;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex:0 0 42px;

  border-radius:50%;

  overflow:hidden;

  isolation:isolate;

  clip-path:circle(50%);

  color:#fff;

  background:transparent;

  border:0;

  box-shadow:
    0 10px 22px -12px rgba(0,0,0,.5);

  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease);
}


/* capa que realmente tiene el color */

.footer__social::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  z-index:-1;

  transition:
    filter .4s var(--ease),
    transform .4s var(--ease);
}


.footer__social iconify-icon{
  display:block;

  position:relative;
  z-index:2;

  width:20px;
  height:20px;

  font-size:1.25rem;

  color:#fff;
}


/* WHATSAPP */

.footer__social--whatsapp::before{
  background:
    linear-gradient(
      145deg,
      #5df28a,
      #25d366 55%,
      #128c4a
    );
}


/* FACEBOOK */

.footer__social--facebook::before{
  background:
    linear-gradient(
      145deg,
      #4f91ff,
      #1877f2 55%,
      #0b55be
    );
}


/* INSTAGRAM */

.footer__social--instagram::before{
  background:
    radial-gradient(
      circle at 30% 107%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 42%,
      #d6249f 62%,
      #285aeb 90%
    );
}


/* TIKTOK */

.footer__social--tiktok::before{
  background:
    linear-gradient(
      145deg,
      #25f4ee 0%,
      #161616 38%,
      #161616 62%,
      #fe2c55 100%
    );
}


/* hover */

.footer__social:hover{
  transform:
    translateY(-4px)
    scale(1.06);

  box-shadow:
    0 15px 28px -12px rgba(0,0,0,.55);
}

.footer__social:hover::before{
  filter:
    brightness(.78)
    saturate(1.12);
}


/* ========================================
   COLUMNAS
======================================== */



/* links */

.footer__links{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  gap:.8rem;
}

.footer__links a{
  position:relative;

  color:rgba(255,255,255,.64);

  font-family:var(--serif);

  font-size:1.05rem;

  transition:
    color .35s var(--ease),
    transform .35s var(--ease);
}

.footer__links a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-2px;

  width:0;
  height:1px;

  background:var(--rose);

  transition:
    width .4s var(--ease);
}

.footer__links a:hover{
  color:#fff;

  transform:translateX(4px);
}

.footer__links a:hover::after{
  width:100%;
}


/* ========================================
   CONTACTO
======================================== */

.footer__contact{
  display:flex;
  flex-direction:column;

  gap:1.3rem;
}

.footer__contact-item small{
  display:block;

  margin-bottom:.15rem;

  color:rgba(255,255,255,.38);

  font-size:.58rem;

  letter-spacing:.2em;

  text-transform:uppercase;
}

.footer__contact-item a,
.footer__contact-item span{
  color:rgba(255,255,255,.74);

  font-family:var(--serif);

  font-size:1.05rem;

  transition:
    color .35s var(--ease);
}

.footer__contact-item a:hover{
  color:var(--rose);
}


/* ========================================
   BOTTOM
======================================== */

.footer__bottom{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:1fr auto 1fr;

  align-items:center;

  gap:2rem;

  padding:1.8rem 0 2rem;

  border-top:
    1px solid rgba(255,255,255,.08);
}

.footer__bottom small{
  color:rgba(255,255,255,.42);

  font-size:.65rem;

  letter-spacing:.12em;
}

.footer__bottom p{
  color:rgba(244,214,214,.58);

  font-family:var(--serif);

  font-style:italic;

  font-size:.95rem;

  letter-spacing:.06em;
}

.footer__bottom a{
  justify-self:end;

  color:rgba(255,255,255,.5);

  font-size:.65rem;

  letter-spacing:.18em;

  text-transform:uppercase;

  transition:
    color .35s var(--ease);
}

.footer__bottom a:hover{
  color:var(--rose);
}

/* reveal + cursor */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.cursor{position:fixed;width:28px;height:28px;border:1px solid var(--deep);border-radius:50%;pointer-events:none;z-index:99;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;mix-blend-mode:multiply}
.cursor.big{width:60px;height:60px;background:rgba(232,165,173,.25)}
@media (hover:none){.cursor{display:none}}

@media (max-width:960px){
  section{padding:6rem 6vw}
  .hero,
.about,
.selfcare,
.salon,
.contact{
  grid-template-columns:1fr;
  gap:3rem;
}
.hero__text{text-align:center;}
.hero__lead{margin:0 auto; margin-bottom:2.5rem;}
  .hero__media{order:2;width:min(85%,380px)}
  .hero__badge{left:-1rem}
  .hero__circle{right:-1rem;width:110px}
  .hero__cta{justify-content:center;}
  .cards{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .nav__toggle{display:block;z-index:60}
  .nav__links{
  position:fixed;
  inset:0;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(244,214,214,.55),
      transparent 40%
    ),
    var(--cream);

  flex-direction:column;
  justify-content:center;

  gap:1.8rem;

  font-size:1rem;

  opacity:0;
  pointer-events:none;

  transition:.5s var(--ease);
}
.nav__links.open{opacity:1;pointer-events:auto}
  .nav__toggle.open span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav__toggle.open span:last-child{transform:translateY(-4px) rotate(-45deg)}

  .nav__socials{
  margin-left:0;
  margin-top:.5rem;
  gap:.9rem;
}

.nav__social{
  width:44px;
  height:44px;
}

.nav__social iconify-icon{
  font-size:1.35rem;
}

.nav.scrolled{
    background:rgba(251,246,241,.94);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 1px 0 rgba(184,146,90,.2);
    padding: .8rem 6vw;
  }

  .nav__links{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;

    background:
      radial-gradient(
        circle at 50% 20%,
        rgba(244,214,214,.55),
        transparent 40%
      ),
      var(--cream);

    flex-direction:column;
    justify-content:center;
    gap:1.8rem;

    font-size:1rem;

    opacity:0;
    pointer-events:none;

    transition:.5s var(--ease);
  }

  .nav__links.open{
    opacity:1;
    pointer-events:auto;
  }
  .selfcare__text{
  max-width:650px;
  margin:0 auto;
  text-align:center;
}

.selfcare__lead{
  margin-left:auto;
  margin-right:auto;
}

.selfcare__detail{
  justify-content:center;
}

.selfcare__cta{
  justify-content:center;
}

.selfcare__media{
  width:min(75%,360px);
}

.selfcare__note{
  left:-3rem;
}

.styles__head{
  grid-template-columns:1fr;
  gap:1.3rem;
}

.styles__intro{
  justify-self:start;
  max-width:600px;
}

.style-grid{
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

.style-card{
  height:540px;
}

.style-card--lift{
  margin-top:0;
}

.styles__freedom{
  grid-template-columns:auto 1fr;
}

.styles__freedom .link{
  grid-column:2;
  width:max-content;
}

.salon__text{
  max-width:100%;
}

.salon__features{
  grid-template-columns:1fr 1fr;
}

.cards{
  grid-template-columns:1fr 1fr;
}

.cards .card:nth-last-child(2):nth-child(4n + 1){
  grid-column:auto;
}
 .before__steps{
    grid-template-columns:1fr 1fr;
  }

.special__head{
  grid-template-columns:1fr;
  gap:1.2rem;
}

.special__intro{
  justify-self:start;
  max-width:620px;
}

.special__grid{
  grid-template-columns:1fr 1fr;
}

.special-card--idea{
  grid-column:1 / -1;
  min-height:auto;
}

.special-card{
  min-height:390px;
}

.special-card--idea .special-card__top{
  margin-bottom:2rem;
}

.idea-cloud{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

.idea__lead{
  max-width:620px;
}

.idea__cloud{
  max-width:760px;
  gap:.8rem .75rem;
}

.instagram-container{
  grid-template-columns:1fr;
  gap:4rem;
}

.instagram-info{
  max-width:650px;

  margin:0 auto;

  align-items:center;

  text-align:center;
}

.instagram-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.instagram-icon{
  position:relative;

  left:auto;
  top:auto;

  margin-bottom:1rem;
}

.instagram-subtitle{
  margin-left:auto;
  margin-right:auto;
}

.instagram-profile{
  align-items:center;
}

.instagram-frame{
  order:2;

  width:min(100%,450px);
}

.instagram-info{
  order:1;
}

.footer__cta{
  flex-direction:column;

  align-items:flex-start;

  gap:2rem;
}

.footer__main{
    grid-template-columns:
      1.2fr 1fr 1fr;

    gap:3rem;
  }

  .footer__contact{
    grid-column:1 / -1;

    display:grid;

    grid-template-columns:
      repeat(4,1fr);

    padding-top:2rem;

    border-top:
      1px solid rgba(255,255,255,.08);
  }


}


@media (max-width:560px){
  .cards,.info{grid-template-columns:1fr}
  .hero__stats{gap:1.5rem}
  .hero__stats strong{font-size:1.8rem}
  .form{padding:2rem}
  .nav__logo span{display:none}

  .selfcare{
  gap:3rem;
}

.selfcare__media{
  width:min(88%,310px);
  padding:.5rem;
}

.phone{
  border-radius:42px;
  padding:8px;
}

.phone__screen{
  border-radius:35px;
}

.phone::before{
  border-radius:39px;
}

.phone__speaker{
  top:18px;
  height:20px;
}

.selfcare__note{
  position:relative;
  left:auto;
  bottom:auto;
  width:max-content;
  max-width:100%;
  margin:1.5rem auto 0;
  font-size:.52rem;
}

.selfcare__flower{
  right:-.2rem;
  top:15%;
}

.selfcare__detail{
  flex-direction:column;
  gap:.8rem;
}

.selfcare__detail p{
  font-size:1.2rem;
}

.style-grid{
  grid-template-columns:1fr;
}

.style-card{
  height:520px;
  max-width:400px;
  width:100%;
  margin:0 auto;
}

.style-card__content{
  transform:none;
}

.style-card__content p,
.style-card__content a{
  opacity:1;
  transform:none;
}

.styles__freedom{
  grid-template-columns:1fr;
  text-align:center;

  padding:2.2rem 1.6rem;
  margin-top:4rem;
}

.styles__spark{
  margin:0 auto;
}

.styles__freedom .link{
  grid-column:auto;
  margin:0 auto;
}

.styles__freedom p{
  margin:0 auto;
}

.salon__features{
  grid-template-columns:1fr;
}

.salon__quote{
  flex-direction:column;
  gap:.8rem;
}

.salon__line{
  margin-top:0;
}

 .before__steps{
    grid-template-columns:1fr;
  }

  .before__step{
    min-height:auto;
  }

  .before__ending{
    gap:.8rem;
  }

  .before__ending > span{
    width:30px;
  }

  .before__ending p{
    font-size:1.25rem;
  }

  .special{
  padding-top:4.5rem;
}

.special__grid{
  grid-template-columns:1fr;
}

.special-card,
.special-card--idea{
  grid-column:auto;
  min-height:auto;

  padding:2rem 1.6rem;
}

.special-card__top{
  margin-bottom:2.6rem;
}

.special-card__line{
  margin-top:2rem;
}

.idea-cloud{
  justify-content:flex-start;
  gap:.55rem;

  margin-top:1rem;
}

.idea-tag{
  padding:.5rem .85rem;
  font-size:.9rem;
}

.idea-tag--featured{
  font-size:.62rem;
}

.special__ending{
  gap:.8rem;
  margin-top:3.5rem;
}

.special__ending-line{
  width:25px;
}

.special__ending p{
  font-size:1.2rem;
}

.idea__lead{
  font-size:.95rem;
}

.idea__cloud{
  gap:.7rem .65rem;
}

.idea-pill{
  min-height:42px;
  padding:.72rem 1rem;
  font-size:.92rem;
}

.idea-pill--featured{
  font-size:.64rem;
  padding:.82rem 1.2rem;
}

.idea__closing{
  font-size:.93rem;
  margin-top:2.3rem;
}

.instagram-section{
  padding:6rem 6vw;
}

.instagram-title{
  font-size:2.8rem;
}

.instagram-subtitle{
  font-size:.95rem;
}

.instagram-frame{
  padding:9px;
  border-radius:24px;
}

.iframe-container{
  border-radius:17px;
}

.instagram-icon{
  width:52px;
  height:52px;
}

.instagram-button{
  width:100%;

  max-width:320px;
}

.footer{
  padding:0 6vw;
}

.footer__cta{
  padding:
    4.5rem 0
    3.5rem;
}

.footer__reserve{
  width:100%;

  justify-content:space-between;
}



.footer__logo{
  width:95px;
  height:95px;
}

.footer__name{
  font-size:2.5rem;
}


.footer__social{
  width:42px;
  height:42px;
}

.footer__signature{
    padding:4.5rem 0 3.8rem;
  }

  .footer__logo-medallion{
    width:105px;
    height:105px;
  }

  .footer__signature-script{
    font-size:2rem;
  }

  .footer__main{
    grid-template-columns:
      1fr 1fr;

    gap:3rem 2rem;

    padding:4rem 0;
  }

  .footer__brand{
    grid-column:1 / -1;

    max-width:100%;
  }

  .footer__contact{
    grid-template-columns:
      1fr 1fr;
  }

  .footer__bottom{
    grid-template-columns:1fr;

    text-align:center;

    gap:.8rem;
  }

  .footer__bottom a{
    justify-self:center;
  }

}