/* ============================================================
   Dra. Juliana Wagner — Medicina Estética
   PORTADA · estilo fiel a la web (web definitiva en camino)
   Fuentes y paleta tomadas del sitio original.
   ============================================================ */

@font-face{
  font-family:'MerchantThin';
  src:url('../fonts/Merchant-Thin.otf') format('opentype');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'MerchantRegular';
  src:url('../fonts/Merchant-Regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'EyeCatchingPro';
  src:url('../fonts/EyeCatchingPro.woff') format('woff'),
      url('../fonts/EyeCatchingPro.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap;
}

:root{
  --bg:        #FCFBFA;
  --bg-2:      #F7F2EF;
  --pink-soft: #FFECEB;
  --nude:      #AF8883;
  --nude-2:    #C49895;
  --nude-deep: #8A6460;
  --border:    #DCD1C1;
  --gold:      #E7B962;
  --ink:       #2E2824;
  --gray:      #6E6660;

  --merchant:'MerchantRegular', 'Cormorant Garamond', Georgia, serif;
  --merchant-thin:'MerchantThin', 'Cormorant Garamond', Georgia, serif;
  --eye:'EyeCatchingPro', 'Cormorant Garamond', cursive;
  --sans:'Manrope', system-ui, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  min-height:100svh;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* halo rosado muy sutil arriba */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 55% at 50% -8%, var(--pink-soft) 0%, transparent 60%);
  opacity:.7;
}

.portada{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px 44px;
}

/* --- logo --- */
.logo{
  width:min(80vw,420px);margin:0 auto 24px;
  filter:drop-shadow(0 10px 28px rgba(175,136,131,.18));
}

/* --- eyebrow --- */
.eyebrow{
  font-family:var(--sans);
  font-size:12px;letter-spacing:.48em;text-transform:uppercase;
  color:var(--nude);font-weight:500;
}

/* --- rule --- */
.rule{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:26px auto;width:min(86vw,300px);
}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:var(--border)}
.rule i{color:var(--nude);font-style:normal;font-size:12px}

/* --- tagline --- */
.tagline{
  font-family:var(--merchant-thin);font-weight:300;
  font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.18;
  color:var(--ink);max-width:640px;margin:0 auto;letter-spacing:.01em;
}
.tagline .accent{
  font-family:var(--eye);color:var(--nude);
  font-size:1.35em;line-height:.9;display:inline-block;
}
.sub{
  color:var(--gray);font-weight:400;font-size:.98rem;
  max-width:460px;margin:16px auto 0;line-height:1.6;
}

/* --- sucursales --- */
.sucs{
  display:flex;justify-content:center;gap:clamp(18px,5vw,56px);flex-wrap:wrap;
  margin:50px auto 6px;max-width:1000px;
}
.suc{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:210px;max-width:270px;padding:4px;
}
.suc__city{
  font-family:var(--merchant);font-weight:400;
  font-size:1.7rem;line-height:1.1;color:var(--nude-deep);
  position:relative;padding-bottom:12px;letter-spacing:.01em;
}
.suc__city::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:28px;height:2px;background:var(--nude);border-radius:2px;opacity:.7}
.suc__prov{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--nude);font-weight:600}
.suc__addr{font-size:.92rem;font-weight:400;color:var(--gray);line-height:1.55;margin-top:4px;max-width:220px;
  min-height:2.9em;display:flex;align-items:center;justify-content:center;text-align:center}
.suc__addr.todo{color:var(--nude-2);font-style:italic}
.suc__wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--nude-deep);padding:10px 20px;border:1px solid var(--border);border-radius:999px;
  background:#fff;transition:all .32s var(--ease);
}
.suc__wa svg{width:15px;height:15px}
.suc__wa:hover{border-color:var(--nude);color:#fff;background:var(--nude);box-shadow:0 10px 22px -12px rgba(175,136,131,.8)}
.suc__wa.off{opacity:.5;pointer-events:none}

/* --- redes --- */
.social{display:flex;gap:13px;justify-content:center;margin-top:48px}
.social a{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:#fff;color:var(--nude-deep);
  transition:all .34s var(--ease);
}
.social a svg{width:19px;height:19px}
.social a:hover{transform:translateY(-3px);border-color:var(--nude);color:#fff;background:var(--nude);
  box-shadow:0 12px 24px -12px rgba(175,136,131,.7)}

/* --- footer --- */
.pie{
  position:relative;z-index:1;text-align:center;
  padding:22px 20px 26px;font-size:11px;letter-spacing:.1em;color:var(--gray);
}
.pie b{color:var(--nude-deep);font-weight:600}
.pie a{color:var(--nude-deep);font-weight:600}
.pie a:hover{color:var(--gold)}

/* --- reveal --- */
.fade{opacity:0;transform:translateY(16px);animation:fade 1s var(--ease) forwards}
.fade.d1{animation-delay:.1s}.fade.d2{animation-delay:.22s}.fade.d3{animation-delay:.36s}
.fade.d4{animation-delay:.5s}.fade.d5{animation-delay:.64s}.fade.d6{animation-delay:.78s}
@keyframes fade{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none;opacity:1;transform:none}}

@media (max-width:620px){
  .sucs{gap:36px;margin-top:40px}
  .suc{min-width:0;width:100%;max-width:300px}
}