/* ============================================================
   Web para Doctores — Estilo BEAUTY (inspirado en Medikale)
   Claro, serif elegante, rosa/crema, formas suaves, curvas.
   Compartido por: index, sobre, servicios, citas, contacto
   ============================================================ */
:root{
  --rose:#C58792; --rose-d:#A8616D; --rose-l:#F7E9E9; --blush:#FBF1EF; --cream:#FCF8F3; --cream-2:#F4E9DD;
  --ink:#3E322F; --ink-2:#897A74; --line:#EEE3DB; --gold:#B59268; --white:#fff; --wa:#25D366; --star:#D9A45F;
  --sans:"neue-haas-unica",system-ui,-apple-system,sans-serif;
  --serif:"ambroise-std",Georgia,"Times New Roman",serif;
  --pad:clamp(22px,5vw,60px); --sec:clamp(70px,10vw,140px); --maxw:1200px;
  --r:14px; --r-lg:26px; --pill:999px;
  --shadow:0 14px 40px rgba(120,80,70,.10); --shadow-lg:0 30px 70px rgba(120,80,70,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:var(--rose-d)}
.muted{color:var(--ink-2)}
.lead{font-size:clamp(1.04rem,1.5vw,1.22rem);color:var(--ink-2);line-height:1.75}
.display{font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.02em}
.h2{font-size:clamp(2rem,4vw,3.1rem)}
.h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.center{text-align:center}.mxa{margin-left:auto;margin-right:auto}
em,.it-serif{font-style:italic;color:var(--rose-d)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.9rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:1.05rem 2rem;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;transition:.25s ease;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn-rose{background:var(--rose-d);color:#fff}
.btn-rose:hover{background:var(--ink);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--rose)}
.btn-line:hover{background:var(--rose-d);color:#fff;border-color:var(--rose-d)}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{transform:translateY(-2px)}
.link-u{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rose-d);border-bottom:1px solid var(--rose);padding-bottom:4px;transition:.25s}
.link-u:hover{gap:.8rem;color:var(--ink)}

/* Nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--cream) 86%,transparent);backdrop-filter:blur(12px);transition:.3s;border-bottom:1px solid transparent}
.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:86px}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand b{font-family:var(--serif);font-size:1.5rem;font-weight:500}
.brand span{font-family:var(--sans);font-size:.64rem;text-transform:uppercase;letter-spacing:.24em;color:var(--ink-2);margin-top:5px}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);font-family:var(--sans);transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--rose-d)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger span{width:24px;height:1.5px;background:var(--ink)}

/* Hero (full-bleed image + soft light scrim, serif headline left) */
.hero{position:relative;overflow:hidden;background:var(--blush)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--cream) 8%,rgba(252,248,243,.86) 38%,rgba(252,248,243,.25) 62%,rgba(252,248,243,0) 100%)}
.hero-in{position:relative;z-index:2;padding:clamp(70px,11vw,150px) 0;max-width:40rem}
.hero h1{margin:18px 0 0}
.hero p{color:var(--ink-2);margin:24px 0 32px;max-width:38ch;font-size:clamp(1.05rem,1.5vw,1.22rem)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-tags{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;font-family:var(--sans);font-size:.84rem;color:var(--ink-2)}
.hero-tags .it{display:inline-flex;align-items:center;gap:8px}
.hero-tags b{font-family:var(--serif);font-size:1.3rem;color:var(--rose-d)}

/* Wave divider */
.wave{display:block;width:100%;height:60px;color:var(--cream)}
.wave.blush{color:var(--blush)}
.wave svg{display:block;width:100%;height:100%}

/* Sections */
.sec{padding:var(--sec) 0}
.sec-blush{background:var(--blush)}
.sec-cream2{background:var(--cream-2)}
.sec-head{max-width:60ch}.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{margin-top:14px}.sec-head p{margin-top:18px}

/* Statement */
.statement{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.3;max-width:24ch;margin:0 auto;text-align:center;color:var(--ink)}
.sign{margin-top:26px;text-align:center;font-family:var(--sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;color:var(--rose-d)}

/* Services (soft rounded cards) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
.svc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 32px;text-align:center;transition:.3s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.svc .ico{width:66px;height:66px;border-radius:50%;background:var(--rose-l);color:var(--rose-d);display:grid;place-items:center;margin:0 auto 22px}
.svc .ico svg{width:30px;height:30px}
.svc h3{font-size:1.4rem;margin-bottom:10px}
.svc p{color:var(--ink-2);font-size:.97rem}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}}

/* About / split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px);align-items:center}
.split.rev .s-txt{order:2}
.s-media{position:relative}
.s-media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover}
.s-media .badge{position:absolute;left:-18px;bottom:26px;background:var(--white);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:16px 20px;text-align:center}
.s-media .badge b{font-family:var(--serif);font-size:1.9rem;color:var(--rose-d);display:block;line-height:1}
.s-media .badge span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
.cred{list-style:none;margin-top:24px;display:grid;gap:14px}
.cred li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.cred li svg{width:20px;height:20px;color:var(--rose-d);flex:none;margin-top:4px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}.split.rev .s-txt{order:0}.s-media .badge{left:14px}}

/* Stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats .s b{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,3.2rem);color:var(--rose-d);display:block;line-height:1}
.stats .s span{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);margin-top:10px;display:block}
@media(max-width:680px){.stats{grid-template-columns:1fr 1fr;gap:30px}}

/* Testimonial */
.testi{text-align:center;max-width:50rem;margin:0 auto}
.testi .stars{color:var(--star);letter-spacing:3px;margin-bottom:20px;font-size:1.1rem}
.testi q{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.4;font-style:italic;display:block}
.testi .who{margin-top:26px;font-family:var(--sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--rose-d)}

/* CTA */
.cta{background:var(--rose-d);color:#fff;border-radius:var(--r-lg);padding:clamp(48px,7vw,96px) var(--pad);text-align:center}
.cta h2{color:#fff;max-width:20ch;margin:14px auto 0}
.cta p{color:rgba(255,255,255,.85);max-width:46ch;margin:18px auto 30px}
.cta .eyebrow{color:#F3D9DC}
.cta .btn-line{border-color:rgba(255,255,255,.6);color:#fff}.cta .btn-line:hover{background:#fff;color:var(--rose-d)}

/* Form card (citas) */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,3vw,42px);box-shadow:var(--shadow-lg)}
.form-card h3{font-size:1.7rem;margin-bottom:8px}
.form-card .sub{color:var(--ink-2);font-size:.95rem;margin-bottom:24px}
.field{display:grid;gap:15px}
.field input,.field select{width:100%;height:52px;border:1px solid var(--line);border-radius:12px;padding:0 16px;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--cream);transition:.2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--rose);background:#fff;box-shadow:0 0 0 3px rgba(197,135,146,.16)}
.field .two{display:grid;grid-template-columns:1fr 1fr;gap:15px}

/* Appointment split */
.appt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
.appt ul{list-style:none;margin-top:24px;display:grid;gap:18px}
.appt li{display:flex;gap:14px;align-items:flex-start}
.appt li .ico{width:46px;height:46px;border-radius:50%;background:var(--rose-l);color:var(--rose-d);display:grid;place-items:center;flex:none}
.appt li .ico svg{width:20px;height:20px}
.appt li b{display:block;margin-bottom:3px;font-family:var(--sans);font-weight:600}
.appt li p{color:var(--ink-2);font-size:.93rem}
@media(max-width:860px){.appt{grid-template-columns:1fr;gap:34px}}

/* Footer */
.foot{background:var(--ink);color:#cbb8b1;padding:clamp(56px,7vw,88px) 0 36px}
.foot a{color:#cbb8b1;transition:.2s}.foot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot .brand b,.foot .brand span{color:#fff}
.foot-top p{margin-top:14px;font-size:.93rem;max-width:30ch}
.foot h5{color:#fff;font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:16px}
.foot-col a{display:block;margin-bottom:11px;font-size:.93rem}
.foot-bot{padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#9b857d}
@media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:30px}}

/* WhatsApp float */
.fab{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 14px 30px rgba(37,211,102,.4);transition:.2s}
.fab:hover{transform:scale(1.07)}.fab svg{width:30px;height:30px;color:#fff}

/* Preview ribbon */
.pflag{background:var(--ink);color:#F3D9DC;font-size:.82rem;text-align:center;padding:9px 16px}
.pflag b{color:#fff}.pflag a{color:#F3D9DC;text-decoration:underline}

/* Inner page header */
.phead{background:var(--blush);text-align:center}
.phead-in{padding:clamp(60px,8vw,110px) 0 clamp(30px,4vw,50px)}
.phead h1{margin-top:14px}
.phead .crumb{margin-top:16px;font-family:var(--sans);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:860px){.nav-links{display:none}.burger{display:flex}}