/* ===================================================
   D&C Clinics — design tokens
   Ink:      #14324A
   Blue (sig):#2D93B8
   Deep blue: #1B5E76
   Gold:     #B9964F
   Paper:    #FBF9F5
   Tint:     #EEF5F7
=================================================== */

:root{
  --ink:#14324A;
  --blue:#2D93B8;
  --blue-deep:#1B5E76;
  --gold:#B9964F;
  --gold-deep:#96793A;
  --paper:#FBF9F5;
  --tint:#EEF5F7;
  --white:#FFFFFF;
  --line:rgba(20,50,74,0.12);
  --shadow:0 20px 45px -20px rgba(20,50,74,0.25);
  --radius:22px;
  --font-display:'Fraunces', serif;
  --font-body:'Manrope', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; color-scheme:light only;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

h1,h2,h3{font-family:var(--font-display); margin:0 0 .4em; color:var(--ink); font-weight:600; line-height:1.12;}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.section-inner{max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:700;
  color:var(--blue-deep);
  margin-bottom:.6em;
}
.eyebrow.center, h2.center{text-align:center;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.6em;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn.small{padding:.55em 1.1em; font-size:.85rem;}
.btn.full{width:100%; justify-content:center;}
.btn-whatsapp{background:#25D366; color:#fff; box-shadow:var(--shadow);}
.btn-whatsapp:hover{background:#1FBE59;}
.wa-icon{width:18px; height:18px; fill:#fff;}
.btn-gold{background:var(--gold); color:#fff;}
.btn-gold:hover{background:var(--gold-deep);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:#fff;}

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,249,245,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--gold));
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
.brand-logo{width:40px; height:40px; object-fit:contain; border-radius:10px;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--ink);}
.brand-name em{color:var(--blue); font-style:normal;}
.main-nav{display:flex; gap:26px; font-weight:600; font-size:.92rem;}
.main-nav a{opacity:.85; position:relative; padding:4px 0;}
.main-nav a:hover{opacity:1; color:var(--blue-deep);}
.header-cta{display:flex; gap:10px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
.nav-toggle span{width:24px; height:2px; background:var(--ink);}

/* ============ HERO ============ */
.hero{
  position:relative;
  overflow:hidden;
  padding:150px 0 110px;
  background:
    linear-gradient(180deg, rgba(255,252,244,0.15) 0%, rgba(255,252,244,0.05) 30%, rgba(255,252,244,0.35) 100%),
    url('../assets/hero-interior.jpg');
  background-size:cover;
  background-position:center 35%;
}
.hero-arc{position:absolute; inset:0; z-index:0; opacity:.55;}
.hero-arc svg{width:100%; height:100%;}
#smileArc{
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  animation:drawArc 2.4s ease forwards;
}
@keyframes drawArc{ to{ stroke-dashoffset:0; } }

.hero-inner{position:relative; z-index:1; max-width:820px; margin:0 auto; padding:0 28px; text-align:center;}
.hero .eyebrow{color:var(--gold-deep); text-shadow:0 1px 12px rgba(255,255,255,0.8);}
.hero h1{font-size:clamp(2.2rem, 5vw, 3.6rem); letter-spacing:-.01em; color:var(--ink); text-shadow:0 2px 20px rgba(255,255,255,0.7);}
.hero .accent{color:var(--blue-deep);}
.hero-sub{max-width:560px; margin:1.2em auto 0; color:#3c5568; font-size:1.05rem; text-shadow:0 1px 14px rgba(255,255,255,0.7);}

.hero-split{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:3em; flex-wrap:wrap;
}
.hero-card{
  background:rgba(255,255,255,0.97);
  border-radius:var(--radius);
  padding:1.6em 1.9em;
  min-width:230px;
  box-shadow:0 25px 50px -15px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; gap:.3em;
  border:1px solid rgba(255,255,255,0.4);
  transition:transform .2s ease;
}
.hero-card:hover{transform:translateY(-6px);}
.hero-card-label{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-deep); font-weight:700;}
.hero-card-name{font-family:var(--font-display); font-size:1.25rem; font-weight:700;}
.hero-card-rating{color:var(--blue-deep); font-weight:600; font-size:.9rem;}
.hero-divider{font-family:var(--font-display); font-size:2.2rem; color:var(--gold); font-weight:700;}

/* Hero entrance animation */
@keyframes heroRise{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.hero .eyebrow{animation:heroRise .7s ease .1s both;}
.hero h1{animation:heroRise .8s ease .22s both;}
.hero-sub{animation:heroRise .8s ease .36s both;}
.hero-split{animation:heroRise .8s ease .5s both;}

/* Rotation note badge */
.rotation-note{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--tint);
  border:1px solid rgba(45,147,184,0.25);
  color:var(--blue-deep);
  font-size:.85rem; font-weight:600;
  padding:.55em .9em;
  border-radius:999px;
  margin-bottom:1.2em;
}

/* Wave dividers between sections */
.wave{width:100%; line-height:0; margin-top:-2px; position:relative; z-index:1;}
.wave svg{width:100%; height:50px; display:block;}
.wave--hero-to-paper path{fill:var(--paper);}
.wave--tint-to-white path{fill:var(--white);}
.wave--tint-to-ink path{fill:var(--ink);}

/* Sticky mobile action bar */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  gap:2px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(20,50,74,0.97);
  backdrop-filter:blur(8px);
  box-shadow:0 -10px 30px rgba(0,0,0,0.25);
}
.mobile-bar-btn{
  flex:1; text-align:center;
  padding:.85em 0;
  border-radius:14px;
  font-weight:700;
  font-size:.9rem;
  color:#fff;
  display:flex; align-items:center; justify-content:center; gap:.5em;
}
.mobile-bar-btn--blue{background:var(--blue);}
.mobile-bar-btn--gold{background:var(--gold);}
.mobile-bar-dot{width:8px; height:8px; border-radius:50%; background:#fff; opacity:.85;}

/* ============ ABOUT ============ */
.about{
  padding:90px 0;
  background:linear-gradient(135deg, rgba(45,147,184,0.07) 0%, var(--paper) 45%, rgba(185,150,74,0.10) 100%);
}
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:center;}
.about-copy h2{font-size:clamp(1.7rem,3vw,2.3rem);}
.about-stats{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.stat{
  background:var(--tint); border-radius:18px; padding:1.4em; text-align:center;
}
.stat:nth-child(odd){background:rgba(45,147,184,0.12);}
.stat:nth-child(even){background:rgba(185,150,74,0.14);}
.stat:nth-child(even) .stat-num{color:var(--gold-deep);}
.stat-num{display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--blue-deep); font-weight:700;}
.stat-label{font-size:.85rem; color:#4a6273;}

/* ============ CLINIC SECTIONS ============ */
.clinic{padding:90px 0; position:relative;}
.clinic--dany{background:var(--white);}
.clinic--celine{background:var(--tint);}
.clinic-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;}
.clinic-grid--reverse{grid-template-columns:.85fr 1.15fr;}
.clinic-grid--reverse .clinic-book{order:1;}
.clinic-grid--reverse .clinic-info{order:2;}

.clinic-rating{color:var(--gold-deep); font-weight:700; margin-bottom:1em;}
.clinic-bio{color:#374d5c; max-width:540px;}

.info-rows{display:flex; flex-direction:column; gap:18px; margin:1.6em 0;}
.info-row{display:flex; gap:14px; align-items:flex-start;}
.info-icon{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; flex-shrink:0;
}
.clinic--dany .info-icon{background:rgba(45,147,184,0.16); color:var(--blue-deep);}
.clinic--celine .info-icon{background:rgba(185,150,74,0.20); color:var(--gold-deep);}
.hours-table div{display:flex; justify-content:space-between; max-width:320px; padding:3px 0; font-size:.92rem; border-bottom:1px dashed var(--line);}
.hours-table .closed{color:#b45151; font-weight:600;}

.clinic-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6em;}
.clinic--dany .btn-ghost{border-color:var(--blue-deep); color:var(--blue-deep);}
.clinic--dany .btn-ghost:hover{background:var(--blue-deep); color:#fff;}
.clinic--celine .btn-ghost{border-color:var(--gold-deep); color:var(--gold-deep);}
.clinic--celine .btn-ghost:hover{background:var(--gold-deep); color:#fff;}

.clinic-book{
  position:relative;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:28px 28px 60px 60px;
  padding:2.4em 2em 2.2em;
  box-shadow:var(--shadow);
}
.clinic-book::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:7px;
}
#bookDany::before{background:linear-gradient(90deg, var(--blue), var(--blue-deep));}
#bookCeline::before{background:linear-gradient(90deg, var(--gold), var(--gold-deep));}
#bookDany{background:linear-gradient(180deg, rgba(45,147,184,0.06) 0%, var(--white) 22%);}
#bookCeline{background:linear-gradient(180deg, rgba(185,150,74,0.08) 0%, var(--white) 22%);}
.clinic-book h3{font-size:1.3rem;}
.book-note{font-size:.85rem; color:#5c7383; margin-bottom:1.2em;}
.book-form{display:flex; flex-direction:column; gap:14px;}
.book-form label{display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color:var(--ink);}
.book-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.book-form input, .book-form select, .book-form textarea{
  font-family:var(--font-body);
  padding:.7em .85em;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:.95rem;
  background:var(--paper);
}
#bookDany .book-form input, #bookDany .book-form select, #bookDany .book-form textarea{border-color:rgba(45,147,184,0.35);}
#bookCeline .book-form input, #bookCeline .book-form select, #bookCeline .book-form textarea{border-color:rgba(185,150,74,0.4);}
.book-form input:focus, .book-form select:focus, .book-form textarea:focus{
  outline:2px solid var(--blue);
  outline-offset:1px;
}

/* ============ SERVICES ============ */
.services{padding:90px 0; background:linear-gradient(180deg, var(--white) 0%, var(--tint) 100%);}
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:2.5em;}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-top:4px solid var(--blue);
  border-radius:18px;
  padding:1.6em 1.4em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:nth-child(even){border-top-color:var(--gold);}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.service-icon{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px;
  font-size:1.4rem; margin-bottom:.5em;
  background:rgba(45,147,184,0.14);
}
.service-card:nth-child(even) .service-icon{background:rgba(185,150,74,0.18);}
.service-card h3{font-size:1.02rem; margin:.5em 0 .3em;}
.service-card p{font-size:.86rem; color:#4a6273; margin:0;}

/* ============ REVIEWS ============ */
.reviews{padding:90px 0; background:var(--tint);}
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:2.5em;}
.review-card{
  background:var(--white); border-radius:20px; padding:1.8em;
  border:1px solid var(--line);
  border-left:5px solid var(--gold);
}
.review-stars{color:var(--gold); font-size:.95rem; margin-bottom:.6em;}
.review-card p{font-size:.92rem; color:#374d5c;}
.review-author{font-size:.8rem; color:#7a8e9a; font-weight:600;}
.reviews-cta{display:flex; justify-content:center; gap:28px; margin-top:2em; font-weight:700; color:var(--blue-deep); flex-wrap:wrap;}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink); color:#dbe6ec; padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.footer-logo{width:52px; height:52px; border-radius:12px; margin-bottom:.8em; background:#fff; padding:4px;}
.footer-brand p{color:#a9bcc7; font-size:.9rem; max-width:280px;}
.footer-col h4{font-family:var(--font-display); color:#fff; margin-bottom:.6em; font-size:1.05rem;}
.footer-col p{margin:0 0 .3em; font-size:.9rem; color:#a9bcc7;}
.footer-col a{color:var(--gold); font-weight:700; font-size:.88rem;}
.footer-bottom{text-align:center; color:#6f8894; font-size:.8rem; margin-top:50px;}

/* ============ TEAM ============ */
.team{padding:90px 0; background:var(--white);}
.team-sub{max-width:640px; margin:1em auto 0; text-align:center; color:#4a6273;}
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:2.8em;}
.team-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:2em 1.6em;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.team-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.team-avatar{
  width:60px; height:60px; margin:0 auto .8em;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:#fff;
}
.team-avatar--blue{background:linear-gradient(135deg, var(--blue), var(--blue-deep));}
.team-avatar--gold{background:linear-gradient(135deg, var(--gold), var(--gold-deep));}
.team-tags{color:var(--blue-deep); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.9em; line-height:1.5;}
.team-card p em{color:#8a7248; font-style:italic;}

.team-statement{
  margin-top:3.5em;
  text-align:center;
  max-width:720px; margin-left:auto; margin-right:auto;
  padding:2.4em 2em;
  border-radius:24px;
  background:linear-gradient(160deg, var(--tint) 0%, rgba(185,150,74,0.08) 100%);
  border:1px solid rgba(185,150,74,0.25);
}
.team-statement h3{font-size:1.35rem; margin-bottom:.5em;}
.team-statement p{color:#4a6273; margin:0;}

/* ============ TECHNOLOGY ============ */
.tech{padding:90px 0; background:linear-gradient(160deg, var(--tint) 0%, var(--paper) 100%);}
.tech-sub{max-width:640px; margin:0 auto 2.5em; text-align:center; color:#4a6273;}
.tech-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.tech-card{
  background:var(--white);
  border-radius:18px;
  padding:1.8em 1.4em;
  text-align:center;
  border-top:4px solid var(--blue);
  box-shadow:var(--shadow);
}
.tech-card:nth-child(even){border-top-color:var(--gold);}
.tech-icon{font-size:1.9rem; display:block; margin-bottom:.5em;}
.tech-card h3{font-size:1.02rem; margin:0 0 .4em;}
.tech-card p{font-size:.86rem; color:#4a6273; margin:0;}

/* ============ DOCTOR-CHOICE MODAL ============ */
.doctor-modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;}
.doctor-modal[hidden]{display:none;}
.doctor-modal-backdrop{position:absolute; inset:0; background:rgba(20,50,74,0.55); backdrop-filter:blur(3px);}
.doctor-modal-panel{
  position:relative; z-index:1;
  background:var(--white);
  border-radius:24px;
  padding:2.2em 2em;
  max-width:400px; width:100%;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
  animation:heroRise .25s ease both;
}
.doctor-modal-close{
  position:absolute; top:16px; right:16px;
  background:none; border:0; font-size:1.1rem; color:#7a8e9a; cursor:pointer;
}
.doctor-modal-panel h3{font-size:1.2rem; margin-bottom:1em;}
.doctor-modal-options{display:flex; flex-direction:column; gap:10px;}
.doctor-option{
  padding:.85em 1em;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--tint);
  font-weight:700;
  font-size:.95rem;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, background .15s ease;
}
.doctor-option:hover{transform:translateX(3px); background:rgba(45,147,184,0.16);}
.doctor-option--ghost{background:transparent; color:#5c7383; font-weight:600;}
.doctor-option--ghost:hover{background:var(--paper);}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .about-grid, .clinic-grid, .clinic-grid--reverse{grid-template-columns:1fr; gap:40px;}
  .clinic-grid--reverse .clinic-book{order:2;}
  .clinic-grid--reverse .clinic-info{order:1;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .tech-grid{grid-template-columns:repeat(2,1fr);}
  .reviews-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:30px;}
}
@media (max-width: 800px){
  .main-nav, .header-cta{display:none;}
  .nav-toggle{display:flex;}
  .main-nav.open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--white); padding:20px 28px; gap:16px; border-bottom:1px solid var(--line);
  }
  .mobile-bar{display:flex;}
  body{padding-bottom:78px;}
  .btn:active, .hero-card:active, .service-card:active, .review-card:active{transform:scale(0.97);}
}
@media (max-width: 560px){
  .services-grid{grid-template-columns:1fr;}
  .tech-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .book-row{grid-template-columns:1fr;}
  .hero-split{flex-direction:column;}
  .hero-divider{transform:rotate(90deg);}
}