/* =====================================================================
   MALA NAIL SALON · styles.css
   Sistema de diseño compartido — estética kawaii asiática, elegante.
   Paleta: rosa · morado · azul (pastel) + magenta (CTA) + dorado (acento)
   Tipografía: Special Gothic Expanded One (display) · Momo Signature
   (manuscrita/acento) · Quicksand (cuerpo)
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* color */
  --magenta:#ec3f9a;
  --magenta-deep:#d62f86;
  --magenta-ink:#b21f6e;
  --rosa:#f9b4d0;
  --rosa-200:#ffd4e6;
  --rosa-100:#ffe7f2;
  --rosa-50:#fff3f8;
  --morado:#c9a4ec;
  --morado-200:#e0caf7;
  --morado-100:#efe2fb;
  --azul:#a8c8f2;
  --azul-200:#cfe1fb;
  --azul-100:#e6f0fd;
  --gold:#e3ab38;
  --gold-soft:#f4d489;
  --ink:#43303a;
  --ink-soft:#856f79;
  --ink-faint:#b4a3ac;
  --cream:#d8b7dd;
  --white:#ffffff;

  /* GRADIENTES característicos (firma de la marca) */
  --grad-brand:linear-gradient(120deg,var(--magenta) 0%,#e85ab0 38%,var(--morado) 72%,var(--azul) 110%);
  --grad-brand-soft:linear-gradient(120deg,var(--rosa) 0%,var(--morado-200) 55%,var(--azul-200) 100%);
  --grad-warm:linear-gradient(135deg,var(--magenta),#f25cae 55%,var(--morado));
  --grad-pastel:linear-gradient(135deg,var(--rosa-100),var(--morado-100) 50%,var(--azul-100));
  --grad-gold:linear-gradient(135deg,var(--gold-soft),var(--gold));
  --grad-text:linear-gradient(100deg,var(--magenta) 0%,#d44ba2 40%,var(--morado) 78%,var(--azul) 120%);
  --grad-text-light:linear-gradient(100deg,#fff 0%,var(--rosa-100) 60%,var(--morado-100) 110%);

  /* type */
  --font-display:'Special Gothic Expanded One','Arial Narrow',system-ui,sans-serif;
  --font-script:'Momo Signature','Segoe Script',cursive;
  --font-sans:'Quicksand',-apple-system,system-ui,sans-serif;

  /* radius */
  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-pill:999px;

  /* shadow */
  --sh-sm:0 4px 14px rgba(214,47,134,.08);
  --sh-md:0 12px 32px rgba(160,90,150,.14);
  --sh-lg:0 24px 60px rgba(150,80,140,.20);
  --sh-glow:0 10px 28px rgba(236,63,154,.40);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.6);

  /* motion */
  --ease:cubic-bezier(.21,.78,.35,1);
  --ease-soft:cubic-bezier(.4,.2,.2,1);

  --maxw:1120px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-weight:500;
  font-size:clamp(15px,1.4vw,17px);
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* =====================================================================
   CURSOR DE BRILLO (solo PC / dispositivos con mouse fino)
   ===================================================================== */
@media (hover:hover) and (pointer:fine){
  body, a, button, .link-card, label[for]{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23ff8fcb'/%3E%3Cstop offset='1' stop-color='%23c9a4ec'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15 2c.7 4.6 2.7 6.6 7.3 7.3C17.7 10 15.7 12 15 16.6 14.3 12 12.3 10 7.7 9.3 12.3 8.6 14.3 6.6 15 2z' fill='url(%23g)' stroke='%23ec3f9a' stroke-width='.6' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='21' r='2.1' fill='%23fff' stroke='%23ec3f9a' stroke-width='.5'/%3E%3Ccircle cx='6.5' cy='22.5' r='1.3' fill='%23f4d489'/%3E%3C/svg%3E") 4 4, auto;
  }
  /* estela de destellos */
  .spark{
    position:fixed;z-index:9999;pointer-events:none;width:14px;height:14px;
    margin:-7px 0 0 -7px;
    background:radial-gradient(circle at 50% 50%, #fff 0%, var(--rosa) 45%, var(--magenta) 100%);
    border-radius:14px 1px 14px 1px;
    opacity:.9;transform:scale(.4) rotate(0deg);
    animation:sparkPop .72s var(--ease) forwards;
  }
}
@keyframes sparkPop{
  0%{opacity:.95;transform:scale(.3) rotate(0deg)}
  60%{opacity:.7}
  100%{opacity:0;transform:scale(1.1) rotate(90deg) translateY(8px)}
}

/* ---------- Atmospheric background ---------- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 55% at 12% 8%,  var(--rosa-100) 0%, transparent 60%),
    radial-gradient(55% 50% at 88% 4%,  var(--morado-100) 0%, transparent 55%),
    radial-gradient(60% 60% at 92% 78%, var(--azul-100) 0%, transparent 60%),
    radial-gradient(55% 55% at 4% 92%,  var(--rosa-50) 0%, transparent 60%),
    linear-gradient(180deg, var(--cream), #fff6fb 60%, var(--cream));
  background-attachment:fixed;
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Falling sakura petals ---------- */
.petals{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;top:-8%;
  width:14px;height:14px;
  background:radial-gradient(circle at 30% 30%, #fff 0%, var(--rosa) 55%, var(--magenta) 130%);
  border-radius:14px 1px 14px 1px;
  opacity:.55;
  animation:petalFall linear infinite;
  will-change:transform;
}
@keyframes petalFall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg)}
  100%{transform:translateY(112vh) translateX(40px) rotate(420deg)}
}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,5vw,40px);position:relative;z-index:1}
section{position:relative;z-index:1}
.section{padding-block:clamp(56px,9vw,108px)}
.center{text-align:center}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-weight:400;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--magenta);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before,.eyebrow::after{content:"✦";color:var(--gold);font-size:1em;letter-spacing:0}
.eyebrow.solo::after{content:none}

.script{font-family:var(--font-script);font-weight:400;line-height:1;color:var(--magenta)}

h1,h2,h3{line-height:1.1;color:var(--ink);font-weight:400}

.title{
  font-family:var(--font-display);font-weight:400;color:var(--ink);
  font-size:clamp(1.9rem,5vw,3.3rem);letter-spacing:.01em;line-height:1.08;
  text-transform:uppercase;
}
/* texto a dos tonos = GRADIENTE real */
.title .em,
.em-grad{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.subtitle{
  font-family:var(--font-display);font-weight:400;letter-spacing:.01em;text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,1.8rem);color:var(--ink);
}
.lead{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--ink-soft);font-weight:500;max-width:60ch}
.muted{color:var(--ink-soft)}

.section-head{max-width:740px;margin-inline:auto;text-align:center;margin-bottom:clamp(34px,5vw,56px)}
.section-head .lead{margin:16px auto 0}
.section-head .eyebrow{margin-bottom:14px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-sans);
  font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:.95em 1.7em;border-radius:var(--r-pill);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn--primary{
  color:#fff;
  background:var(--grad-warm);
  background-size:160% 160%;
  box-shadow:var(--sh-glow);
  animation:gradShift 7s ease infinite;
}
.btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .7s var(--ease);
}
.btn--primary:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 16px 38px rgba(236,63,154,.5)}
.btn--primary:hover::after{transform:translateX(130%)}
.btn--ghost{
  color:var(--magenta-ink);background:rgba(255,255,255,.7);
  border:1.5px solid transparent;
  background-image:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),var(--grad-brand);
  background-origin:border-box;background-clip:padding-box,border-box;
  backdrop-filter:blur(6px);box-shadow:var(--sh-sm);
}
.btn--ghost:hover{transform:translateY(-3px);color:var(--magenta);box-shadow:var(--sh-md)}
.btn--gold{
  color:#5a4310;background:var(--grad-gold);
  box-shadow:0 8px 22px rgba(227,171,56,.4);
}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(227,171,56,.5)}
.btn--block{display:flex;width:100%}
.btn--lg{padding:1.1em 2.1em;font-size:1.06rem}

/* ---------- Glass card base ---------- */
.card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md), var(--sh-inset);
  backdrop-filter:blur(10px);
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(255,250,253,.78);
  border-bottom:1px solid rgba(236,63,154,.1);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{height:30px;width:auto}
.nav-logo .cat{height:38px}
.nav-links{display:none;align-items:center;gap:30px}
.nav-links a{
  font-weight:600;font-size:.95rem;color:var(--ink);position:relative;padding:6px 0;
  transition:color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;
  background:var(--grad-brand);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--magenta)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:none}

.nav-toggle{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px}
.nav-toggle span{width:24px;height:2.4px;background:var(--grad-brand);border-radius:3px;transition:.3s}
#navchk{display:none}
.mobile-menu{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .4s var(--ease);
  background:rgba(255,250,253,.97);border-bottom:1px solid rgba(236,63,154,.12);
  position:sticky;top:74px;z-index:49;backdrop-filter:blur(14px);
}
.mobile-menu>div{min-height:0}
#navchk:checked ~ .mobile-menu{grid-template-rows:1fr}
.mobile-menu nav{display:flex;flex-direction:column;padding:8px 24px 22px}
.mobile-menu a{padding:13px 4px;font-weight:600;border-bottom:1px dashed rgba(236,63,154,.16)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu .btn{margin-top:14px}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{padding-block:clamp(40px,7vw,80px) clamp(50px,8vw,96px);text-align:center;position:relative}
.hero-medallion{
  width:clamp(150px,30vw,224px);aspect-ratio:1;margin:0 auto 26px;position:relative;
  display:grid;place-items:center;animation:floatY 6s var(--ease-soft) infinite;
}
.hero-medallion::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, var(--rosa-100), var(--morado-100) 70%, transparent 72%);
  box-shadow:0 30px 60px rgba(201,164,236,.4);
}
.hero-medallion::after{
  content:"";position:absolute;inset:6%;border-radius:50%;
  border:2px dashed var(--gold-soft);opacity:.8;animation:spin 40s linear infinite;
}
.hero-medallion img{width:78%;position:relative;z-index:1;filter:drop-shadow(0 8px 14px rgba(178,31,110,.18))}
.hero h1{
  font-family:var(--font-display);font-weight:400;color:var(--ink);
  font-size:clamp(1.9rem,5.4vw,3.7rem);letter-spacing:.005em;margin-bottom:.4em;
  max-width:18ch;margin-inline:auto;text-transform:uppercase;line-height:1.08;
}
.hero h1 .em{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero .lead{margin:0 auto 30px;font-size:clamp(1.02rem,1.9vw,1.28rem);max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.tag{
  font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--magenta-ink);
  background:rgba(255,255,255,.7);border:1px solid var(--rosa-200);
  padding:.5em 1.1em;border-radius:var(--r-pill);box-shadow:var(--sh-sm);
}
.scroll-cue{margin-top:46px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-faint);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue .dot{width:22px;height:34px;border:2px solid var(--rosa);border-radius:14px;position:relative}
.scroll-cue .dot::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:3px;background:var(--magenta);transform:translateX(-50%);animation:scrollDot 1.6s infinite}

/* =====================================================================
   LINKTREE (index.html)
   ===================================================================== */
.tree-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(36px,8vw,68px) 0 40px}
.tree-inner{width:100%;max-width:448px;padding-inline:22px;text-align:center}
.tree-cat{width:clamp(116px,32vw,150px);margin:0 auto 14px;animation:floatY 6s var(--ease-soft) infinite;filter:drop-shadow(0 10px 16px rgba(178,31,110,.2))}
.tree-wordmark{width:min(64%,230px);margin:0 auto 12px}
.tree-tagline{font-size:.86rem;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;margin-bottom:30px;display:flex;align-items:center;justify-content:center;gap:.6em;flex-wrap:wrap}
.tree-tagline b{color:var(--magenta);font-weight:700}

.linktree{display:flex;flex-direction:column;gap:14px}
.link-card{
  display:flex;align-items:center;gap:15px;
  padding:16px 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-sm), var(--sh-inset);backdrop-filter:blur(8px);
  font-weight:700;font-size:1.02rem;color:var(--ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s,background .3s;
  position:relative;overflow:hidden;
}
.link-card .ic{font-size:1.3rem;width:30px;text-align:center;flex:none}
.link-card .lbl{flex:1;text-align:left}
.link-card .chev{color:var(--rosa);font-size:1.1rem;transition:transform .3s var(--ease),color .3s}
.link-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--rosa);background:#fff}
.link-card:hover .chev{transform:translateX(4px);color:var(--magenta)}
.link-card.primary{
  color:#fff;background:var(--grad-warm);background-size:160% 160%;
  box-shadow:var(--sh-glow);border-color:transparent;animation:gradShift 7s ease infinite;
}
.link-card.primary .chev{color:rgba(255,255,255,.85)}
.link-card.primary:hover{box-shadow:0 16px 38px rgba(236,63,154,.5)}

.tree-socials{display:flex;justify-content:center;gap:14px;margin-top:28px}
.soc{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.8);border:1px solid var(--rosa-200);box-shadow:var(--sh-sm);
  color:var(--magenta);transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s;
}
.soc svg{width:21px;height:21px}
.soc:hover{transform:translateY(-3px) scale(1.05);background:var(--grad-warm);color:#fff;box-shadow:var(--sh-glow)}
.tree-foot{margin-top:26px;font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em}

/* =====================================================================
   CATEGORY TEASERS (home)
   ===================================================================== */
.teaser{display:grid;gap:clamp(22px,4vw,48px);align-items:center;grid-template-columns:1fr}
.teaser + .teaser{margin-top:clamp(40px,6vw,72px)}
.teaser-media{
  position:relative;border-radius:var(--r-lg);aspect-ratio:4/3;overflow:hidden;
  background:var(--grad-pastel);
  box-shadow:var(--sh-md);border:1px solid rgba(255,255,255,.7);
  display:grid;place-items:center;
}
.teaser-media::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  background-size:220% 100%;animation:shimmer 4.5s linear infinite;
}
.teaser-media .ghost-cat{width:42%;opacity:.5;filter:grayscale(.1)}
.teaser-media .ph-tag{position:absolute;bottom:14px;left:14px;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--magenta-ink);background:rgba(255,255,255,.85);padding:.4em .9em;border-radius:var(--r-pill);z-index:1}
.teaser-body .eyebrow{margin-bottom:14px}
.teaser-body h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,4.4vw,2.5rem);color:var(--ink);margin-bottom:.35em;line-height:1.05}
.teaser-body h3 .em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.teaser-body p{color:var(--ink-soft);margin-bottom:22px;max-width:48ch}
.price-from{font-weight:700;color:var(--magenta);font-size:.95rem;margin-bottom:18px;display:inline-block}

/* =====================================================================
   HISTORIA
   ===================================================================== */
.historia{position:relative}
.historia .narrative{max-width:760px;margin-inline:auto;text-align:center}
.historia .narrative p{font-size:clamp(1.05rem,1.9vw,1.28rem);color:var(--ink);margin-bottom:1em;font-weight:500}
.historia .narrative .quote{
  font-family:var(--font-script);font-size:clamp(2rem,5vw,3.1rem);
  line-height:1.2;margin:.2em auto;max-width:18ch;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.beneficios{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(34px,5vw,52px)}
.benef{padding:28px 24px;border-radius:var(--r-md);text-align:center}
.benef .bi{font-size:2rem;margin-bottom:12px;display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--grad-pastel);box-shadow:var(--sh-sm)}
.benef h4{font-family:var(--font-display);text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;margin-bottom:10px;color:var(--ink);line-height:1.2}
.benef p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* =====================================================================
   GALERÍA
   ===================================================================== */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gallery-tile{
  position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  background:var(--grad-pastel);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-sm);
  display:grid;place-items:center;color:var(--magenta-ink);
}
.gallery-tile:nth-child(3n){background:linear-gradient(135deg,var(--morado-100),var(--rosa-100))}
.gallery-tile:nth-child(3n+1){background:linear-gradient(135deg,var(--azul-100),var(--morado-100))}
.gallery-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:220% 100%;animation:shimmer 5s linear infinite}
.gallery-tile .gi{font-size:1.7rem;opacity:.7;position:relative;z-index:1;font-weight:700}
.gallery-tile.big{grid-column:span 2;aspect-ratio:2/1}

/* =====================================================================
   RESEÑAS
   ===================================================================== */
.reviews{text-align:center}
.review-badge{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  padding:22px 40px;border-radius:var(--r-lg);margin-bottom:38px;
}
.review-badge .stars{color:var(--gold);font-size:1.5rem;letter-spacing:3px}
.review-badge .num{font-family:var(--font-script);font-size:3rem;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.review-badge .meta{font-size:.84rem;color:var(--ink-soft);font-weight:600;letter-spacing:.04em}
.review-grid{display:grid;grid-template-columns:1fr;gap:18px;text-align:left}
.review-card{padding:26px 24px;border-radius:var(--r-md);position:relative}
.review-card .stars{color:var(--gold);font-size:.95rem;letter-spacing:2px;margin-bottom:10px}
.review-card p{color:var(--ink);font-size:.98rem;margin-bottom:14px;font-style:italic}
.review-card .who{font-weight:700;color:var(--magenta-ink);font-size:.9rem}
.review-card .ph-note{position:absolute;top:14px;right:16px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);background:var(--rosa-50);padding:.3em .7em;border-radius:var(--r-pill)}

/* =====================================================================
   CONTACTO / FOOTER
   ===================================================================== */
.contacto{position:relative}
.contact-card{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;border-radius:var(--r-lg)}
.contact-info{padding:clamp(28px,5vw,46px)}
.contact-info h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.5rem,4vw,2.2rem);color:var(--ink);margin-bottom:18px;line-height:1.1}
.contact-info h3 .em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.info-row{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}
.info-row .ir-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--grad-pastel);color:var(--magenta);box-shadow:var(--sh-sm)}
.info-row .ir-ic svg{width:18px;height:18px}
.info-row .ir-t{font-size:.95rem;line-height:1.45}
.info-row .ir-t b{display:block;color:var(--ink);font-weight:700;margin-bottom:1px}
.info-row .ir-t span{color:var(--ink-soft)}
.contact-map{
  position:relative;min-height:230px;
  background:linear-gradient(135deg,var(--azul-100),var(--morado-100),var(--rosa-100));
  display:grid;place-items:center;text-align:center;padding:30px;
}
.contact-map::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(236,63,154,.14) 1.4px,transparent 1.4px);background-size:18px 18px;opacity:.7}
.contact-map .pin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.contact-map .pin .pin-ic{font-size:2.4rem;filter:drop-shadow(0 6px 8px rgba(178,31,110,.25))}
.contact-socials{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

.foot{padding:30px 0 38px;text-align:center;border-top:1px solid rgba(236,63,154,.1);margin-top:clamp(50px,8vw,90px)}
.foot .fwm{width:130px;margin:0 auto 14px;opacity:.92}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-bottom:16px;font-size:.9rem;font-weight:600}
.foot-links a{color:var(--ink-soft)}
.foot-links a:hover{color:var(--magenta)}
.foot .cr{font-size:.78rem;color:var(--ink-faint)}

/* CTA strip */
.cta-strip{
  border-radius:var(--r-lg);padding:clamp(34px,6vw,60px) clamp(24px,5vw,48px);text-align:center;
  background:var(--grad-warm);background-size:180% 180%;
  box-shadow:var(--sh-lg);color:#fff;position:relative;overflow:hidden;
  animation:gradShift 9s ease infinite;
}
.cta-strip::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.5px);background-size:20px 20px;opacity:.5}
.cta-strip h3{font-family:var(--font-script);font-size:clamp(2.4rem,6vw,3.8rem);margin-bottom:.2em;position:relative;font-weight:400;line-height:1.05}
.cta-strip p{position:relative;margin:0 auto 24px;max-width:42ch;color:rgba(255,255,255,.92);font-weight:500}
.cta-strip .btn{position:relative;background:#fff;color:var(--magenta-ink);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.cta-strip .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 38px rgba(0,0,0,.24)}

/* =====================================================================
   CATÁLOGO DE SERVICIOS (uñas / pestañas / peinado)
   ===================================================================== */
.svc-hero{padding-block:clamp(40px,7vw,72px) clamp(20px,4vw,40px);text-align:center}
.svc-hero .cat-mini{width:clamp(88px,20vw,118px);margin:0 auto 18px;animation:floatY 6s var(--ease-soft) infinite;filter:drop-shadow(0 8px 14px rgba(178,31,110,.2))}
.svc-hero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,6vw,3.6rem);line-height:1.05;margin-bottom:.3em}
.svc-hero h1 .em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.svc-hero p{max-width:52ch;margin:0 auto;color:var(--ink-soft);font-size:clamp(1rem,1.7vw,1.18rem)}

/* category nav (sticky pills) */
.cat-nav{position:sticky;top:74px;z-index:40;padding:14px 0;backdrop-filter:blur(12px);background:rgba(255,250,253,.8);border-bottom:1px solid rgba(236,63,154,.08)}
.cat-nav-inner{display:flex;gap:10px;overflow-x:auto;padding-inline:clamp(18px,5vw,40px);scrollbar-width:none;justify-content:flex-start}
.cat-nav-inner::-webkit-scrollbar{display:none}
.cat-chip{
  flex:none;font-weight:700;font-size:.86rem;letter-spacing:.01em;
  padding:.55em 1.15em;border-radius:var(--r-pill);color:var(--magenta-ink);
  background:rgba(255,255,255,.8);border:1px solid var(--rosa-200);
  transition:transform .25s var(--ease),background .3s,color .3s,box-shadow .3s;white-space:nowrap;
}
.cat-chip:hover{transform:translateY(-2px);background:var(--grad-warm);color:#fff;box-shadow:var(--sh-sm)}

.svc-section{padding-block:clamp(38px,6vw,64px)}
.svc-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vw,32px)}
.svc-cat-head .cap{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.3rem,3.4vw,2rem);line-height:1.05;white-space:nowrap}
.svc-cat-head .cap .em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.svc-cat-head .rule{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rosa),transparent)}

.svc-grid{display:grid;grid-template-columns:1fr;gap:18px}

.svc-card{
  position:relative;display:flex;flex-direction:column;
  padding:24px 22px;border-radius:var(--r-md);
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--sh-sm),var(--sh-inset);backdrop-filter:blur(10px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
  overflow:hidden;
}
.svc-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--grad-brand);opacity:.85;
}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--rosa)}
.svc-card.feat{
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,239,248,.92));
  border-color:var(--rosa-200);
}
.svc-card .badge{
  position:absolute;top:16px;right:16px;font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--grad-warm);
  padding:.35em .8em;border-radius:var(--r-pill);box-shadow:var(--sh-sm);
}
.svc-card .badge.gold{background:var(--grad-gold);color:#5a4310}
.svc-card h3{font-family:var(--font-sans);font-weight:700;font-size:1.16rem;color:var(--ink);margin-bottom:6px;padding-right:60px;line-height:1.25}
.svc-card .meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.svc-card .price{font-family:var(--font-display);font-size:1.5rem;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.svc-card .price.free{font-size:1.15rem}
.svc-card .dur{font-size:.82rem;font-weight:600;color:var(--ink-faint);background:var(--rosa-50);padding:.25em .7em;border-radius:var(--r-pill)}
.svc-card .desc{font-size:.93rem;color:var(--ink-soft);margin-bottom:18px;flex:1}
.svc-card .desc strong{color:var(--magenta-ink);font-weight:700}
.svc-card .note{font-size:.8rem;color:var(--ink-faint);margin-bottom:14px;font-style:italic}
.svc-card .agendar{margin-top:auto}

/* opcional info banner */
.svc-banner{
  border-radius:var(--r-md);padding:18px 22px;margin-bottom:clamp(22px,3vw,30px);
  background:var(--grad-pastel);border:1px solid rgba(255,255,255,.7);
  display:flex;gap:13px;align-items:flex-start;font-size:.92rem;color:var(--ink);box-shadow:var(--sh-sm)
}
.svc-banner .bic{font-size:1.3rem;flex:none}
.svc-banner b{color:var(--magenta-ink)}

.steps-hint{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}
.step-pill{font-size:.8rem;font-weight:700;color:var(--magenta-ink);background:rgba(255,255,255,.7);border:1px dashed var(--rosa);padding:.4em 1em;border-radius:var(--r-pill)}

/* =====================================================================
   POLÍTICAS
   ===================================================================== */
.pol-hero{padding-block:clamp(40px,7vw,70px) clamp(16px,3vw,30px);text-align:center}
.pol-hero .cat-mini{width:clamp(80px,18vw,104px);margin:0 auto 16px;filter:drop-shadow(0 8px 14px rgba(178,31,110,.18))}
.pol-hero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.9rem,5.5vw,3.2rem);margin-bottom:.3em;line-height:1.05}
.pol-hero h1 .em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pol-hero p{max-width:50ch;margin:0 auto;color:var(--ink-soft)}
.pol-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.pol-item{
  position:relative;padding:24px 24px 24px 70px;border-radius:var(--r-md);
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--sh-sm),var(--sh-inset);backdrop-filter:blur(8px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.pol-item:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.pol-item .pn{
  position:absolute;left:18px;top:22px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-size:1rem;color:#fff;
  background:var(--grad-warm);box-shadow:var(--sh-sm)
}
.pol-item h3{font-family:var(--font-sans);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:5px}
.pol-item p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* =====================================================================
   Decorative
   ===================================================================== */
.band{background:rgba(255,255,255,.5);backdrop-filter:blur(4px)}

/* Reveal on scroll — solo oculta cuando JS está listo para animarlos */
[data-reveal]{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal-ready [data-reveal]{opacity:0;transform:translateY(26px)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
[data-reveal][data-d="5"]{transition-delay:.4s}

/* hero load stagger */
.load-up{opacity:0;transform:translateY(22px);animation:fadeUp .9s var(--ease) forwards}
.load-up.d1{animation-delay:.12s}
.load-up.d2{animation-delay:.26s}
.load-up.d3{animation-delay:.4s}
.load-up.d4{animation-delay:.54s}
.load-up.d5{animation-delay:.68s}

/* FIX: elements that animate a gradient AND fade in need BOTH animations,
   otherwise the later `animation` declaration cancels fadeUp and the
   element stays at opacity:0. Combine them explicitly. */
.link-card.primary.load-up{
  animation:fadeUp .9s var(--ease) forwards, gradShift 7s ease infinite;
}
.link-card.primary.load-up.d2{animation-delay:.26s,0s}
.link-card.primary.load-up.d3{animation-delay:.4s,0s}
.btn--primary.load-up{
  animation:fadeUp .9s var(--ease) forwards, gradShift 7s ease infinite;
}
.btn--primary.load-up.d3{animation-delay:.4s,0s}

/* Keyframes */
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:140% 0}100%{background-position:-140% 0}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}100%{opacity:0}}

/* Responsive */
@media(min-width:600px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:640px){
  .beneficios{grid-template-columns:repeat(3,1fr)}
  .review-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media(min-width:860px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-toggle{display:none}
  .teaser{grid-template-columns:1fr 1fr}
  .teaser.flip .teaser-media{order:2}
  .contact-card{grid-template-columns:1.1fr 1fr}
  .contact-map{min-height:100%}
}
@media(min-width:1000px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .petals{display:none}
  html{scroll-behavior:auto}
  .spark{display:none}
}