/* ============================================================
   Dental Line Panamá — RECREACIÓN del diseño de referencia
   "Dentist Personal Web Landing Page" (RONJIT UKIL, Dribbble)
   Copiando la estructura original, con la info de Dental Line
   y su paleta (azul + arena/crema + navy). Estático · responsive.
   ============================================================ */

:root{
  --sky:      #dbeaf7;
  --sky-soft: #eaf3fb;
  --navy:     #16273f;
  --ink:      #46536b;
  --muted:    #7c889c;
  --blue:     #0d6fc7;
  --blue-d:   #0a5aa5;
  --blue-050: #eaf4fc;
  --sand:     #f2e6d6;   /* acento cálido (reemplaza el rosa del original) */
  --sand-soft:#f7eee2;
  --line:     #e7ebf1;
  --white:    #ffffff;
  --shadow-sm:0 6px 18px rgba(22,39,63,.07);
  --shadow-md:0 20px 46px rgba(22,39,63,.12);
  --shadow-lg:0 34px 80px rgba(22,39,63,.18);
  --maxw:1180px;
  --disp:'Quicksand', system-ui, sans-serif;   /* redondeada, como el original */
  --body:'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--white); line-height:1.65; font-size:17px; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5{ margin:0; color:var(--navy); }
.disp{ font-family:var(--disp); font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Botón tipo "APPOINTMENT" del original */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--disp); font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding:.95rem 1.7rem; border-radius:999px; cursor:pointer; border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap; }
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 12px 26px rgba(13,111,199,.28); }
.btn-primary:hover{ background:var(--blue-d); transform:translateY(-2px); }
.btn-sand{ background:var(--sand); color:var(--navy); }
.btn-sand:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:#cbd7e6; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.link-arrow{ font-family:var(--disp); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); border-bottom:2px solid var(--blue); padding-bottom:4px; display:inline-flex; gap:.5rem; align-items:center; }
.link-arrow:hover{ color:var(--blue); }

/* ---------------- NAV ---------------- */
.header{ position:sticky; top:0; z-index:60; background:rgba(219,234,247,.86); backdrop-filter:saturate(160%) blur(10px); }
.nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px 0; }
.brand img{ height:44px; }
.nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; justify-self:center; }
.nav-links a{ font-family:var(--disp); font-weight:600; font-size:.9rem; color:var(--navy); }
.nav-links a:hover{ color:var(--blue); }
.nav-right{ display:flex; align-items:center; gap:16px; justify-self:end; }
.nav-call{ display:flex; align-items:center; gap:10px; }
.nav-call .ph{ width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--blue); box-shadow:var(--shadow-sm); }
.nav-call .ph svg{ width:19px; height:19px; }
.nav-call .txt small{ display:block; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:var(--disp); font-weight:600; }
.nav-call .txt b{ font-family:var(--disp); color:var(--navy); font-size:.98rem; }
.nav-toggle{ display:none; width:46px; height:46px; border:0; background:var(--sand); border-radius:12px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle svg{ width:24px; height:24px; color:var(--navy); }

/* ---------------- HERO ---------------- */
.hero{ background:var(--sky); position:relative; padding:34px 0 90px; overflow:hidden; }
.hero .deco{ position:absolute; color:#bcd6ee; opacity:.7; }
.hero .deco.d1{ top:120px; right:80px; width:30px; }
.hero .deco.d2{ bottom:120px; left:120px; width:34px; }
.hero-topphoto{ position:absolute; top:70px; left:6%; width:120px; transform:rotate(-8deg); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); border:4px solid #fff; }
.hero-topphoto img{ height:92px; object-fit:cover; width:100%; }
.hero h1{ font-family:var(--disp); font-weight:700; font-size:clamp(2.5rem,5.4vw,4.3rem); text-align:center; max-width:15ch; margin:8px auto 0; color:var(--navy); line-height:1.06; }
.hero-band{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin-top:-6px; }
.hero-left{ max-width:250px; justify-self:start; }
.hero-left .rule{ width:46px; height:2px; background:var(--navy); margin-bottom:18px; }
.hero-left p{ font-size:.96rem; color:var(--ink); margin-bottom:22px; }
.hero-center{ position:relative; align-self:end; }
.portrait{ position:relative; width:min(400px,42vw); aspect-ratio:1/1; border-radius:50%; background:var(--sand); display:flex; align-items:flex-end; justify-content:center; }
.portrait > img{ width:99%; height:99%; object-fit:cover; object-position:top center; border-radius:50%; }
.hero-badge{ position:absolute; top:-4px; left:-10px; width:98px; height:98px; z-index:3; }
.hero-badge svg.ring{ width:100%; height:100%; }
.hero-badge .core{ position:absolute; inset:0; margin:auto; width:44px; height:44px; background:var(--blue); border-radius:50%; display:grid; place-items:center; }
.hero-badge .core svg{ width:20px; height:20px; color:#fff; }
.teeth-card{ position:absolute; right:-30px; bottom:44px; width:110px; transform:rotate(6deg); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-md); border:4px solid var(--sand); z-index:4; }
.teeth-card img{ height:80px; width:100%; object-fit:cover; }
.hero-right{ justify-self:end; max-width:230px; }
.hero-right h4{ font-family:var(--disp); font-weight:600; font-size:.92rem; color:var(--navy); margin-bottom:16px; line-height:1.4; }
.hero-logos{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--navy); margin-bottom:14px; }
.hero-logos .lg{ display:flex; align-items:center; gap:6px; font-family:var(--disp); font-weight:600; font-size:.7rem; color:var(--ink); }
.hero-logos .lg svg{ width:22px; height:22px; color:var(--blue); }
.hero-right .years{ font-family:var(--disp); font-weight:600; color:var(--muted); font-size:.82rem; letter-spacing:.08em; }

/* ---------------- SECCIÓN base ---------------- */
.section{ padding:96px 0; }

/* ---------------- SERVICIOS (Amazing feel) ---------------- */
.svc-head{ display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start; margin-bottom:44px; }
.svc-label{ display:flex; align-items:center; gap:14px; font-family:var(--disp); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-top:8px; }
.svc-label::after{ content:""; width:60px; height:1px; background:#cfd7e2; }
.svc-head h2{ font-family:var(--disp); font-weight:700; font-size:clamp(2rem,3.8vw,3rem); color:var(--navy); line-height:1.1; }
.svc-head .r{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 40px; }
.svc-item.offset{ margin-top:56px; }
.svc-item .ph{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm); }
.svc-item .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.svc-item:hover .ph img{ transform:scale(1.05); }
.svc-item .num{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); font-family:var(--disp); font-weight:700; font-size:.72rem; letter-spacing:.1em; color:var(--navy); padding:.3rem .7rem; border-radius:999px; }
.svc-item h3{ font-family:var(--body); font-weight:700; font-size:1.25rem; color:var(--navy); margin:20px 0 8px; }
.svc-item p{ font-size:.93rem; color:var(--muted); }

/* ---------------- ¿POR QUÉ ELEGIRNOS? ---------------- */
.why{ background:var(--sky-soft); }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.why-card{ background:#fff; border-radius:22px; box-shadow:var(--shadow-sm); padding:44px; }
.why-card .lbl{ font-family:var(--disp); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.why-card h2{ font-family:var(--body); font-weight:700; font-size:1.7rem; margin:10px 0 14px; }
.why-card > p{ color:var(--muted); font-size:.98rem; margin-bottom:22px; }
.why-list{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:14px; }
.why-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; color:var(--ink); }
.why-list .ck{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--blue-050); color:var(--blue); display:grid; place-items:center; margin-top:2px; }
.why-list .ck svg{ width:14px; height:14px; }
.why-collage{ position:relative; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:16px; }
.why-collage img{ width:100%; height:100%; object-fit:cover; border-radius:18px; box-shadow:var(--shadow-sm); }
.why-collage .tall{ grid-row:span 2; min-height:360px; }

/* ---------------- GRANDES RESULTADOS ---------------- */
.results{ background:var(--sky); text-align:center; }
.results h2{ font-family:var(--disp); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.8rem); }
.results p.sub{ color:var(--ink); max-width:52ch; margin:14px auto 40px; }
.results-stage{ position:relative; max-width:760px; margin:0 auto; }
.results-stage .frame{ border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); border:8px solid #fff; }
.results-stage .frame img{ width:100%; display:block; }
.results-stage .arrow{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:var(--shadow-md); display:grid; place-items:center; color:var(--navy); border:0; cursor:default; }
.results-stage .arrow svg{ width:22px; height:22px; }
.results-stage .arrow.l{ left:-26px; } .results-stage .arrow.r{ right:-26px; }

/* ---------------- OPINIONES ---------------- */
.fb-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center; }
.fb-photo{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/5; }
.fb-photo img{ width:100%; height:100%; object-fit:cover; }
.fb-body .lbl{ font-family:var(--disp); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.fb-body h2{ font-family:var(--body); font-weight:700; font-size:1.7rem; margin:10px 0 18px; }
.fb-stars{ color:#f5b301; letter-spacing:3px; margin-bottom:10px; }
.fb-quote{ font-family:var(--disp); font-weight:700; color:var(--sand); font-size:3rem; line-height:.6; }
.fb-text{ color:var(--ink); font-size:1.05rem; margin:8px 0 22px; max-width:46ch; }
.fb-who{ display:flex; align-items:center; gap:12px; }
.fb-who .av{ width:44px; height:44px; border-radius:50%; background:var(--blue-050); color:var(--blue); display:grid; place-items:center; }
.fb-who .av svg{ width:24px; height:24px; }
.fb-who b{ font-family:var(--disp); color:var(--navy); display:block; font-size:1rem; }
.fb-who span{ font-size:.82rem; color:var(--muted); }

/* ---------------- BANDA FOTO ---------------- */
.photoband{ position:relative; height:360px; }
.photoband img{ width:100%; height:100%; object-fit:cover; }
.photoband .play{ position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--blue); box-shadow:var(--shadow-md); }
.photoband .play svg{ width:26px; height:26px; }

/* ---------------- BLOG (Journals) ---------------- */
.blog{ text-align:center; }
.blog h2{ font-family:var(--disp); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:44px; }
.blog-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; text-align:left; }
.blog-card{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); display:grid; grid-template-columns:.85fr 1.15fr; transition:transform .2s ease, box-shadow .2s ease; }
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.blog-card .im{ overflow:hidden; }
.blog-card .im img{ width:100%; height:100%; object-fit:cover; min-height:180px; }
.blog-card .bc{ padding:22px; display:flex; flex-direction:column; }
.blog-card .cat{ font-family:var(--disp); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.blog-card h3{ font-family:var(--body); font-weight:700; font-size:1.05rem; margin:8px 0 auto; color:var(--navy); line-height:1.35; }
.blog-card .rd{ font-family:var(--disp); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-top:16px; }
.blog-card .rd:hover{ color:var(--blue); }

/* ---------------- FOOTER (Visit my chamber) ---------------- */
.footer{ background:var(--sand-soft); padding:70px 0 28px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:40px; }
.footer-top h2{ font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); color:var(--navy); max-width:12ch; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--navy); box-shadow:var(--shadow-sm); transition:background .18s, color .18s, transform .18s; }
.footer-social a:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.footer-social svg{ width:19px; height:19px; }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; border-top:1px solid #e6d9c6; padding-top:36px; }
.footer-cols h5{ font-family:var(--disp); font-weight:700; font-size:.95rem; color:var(--navy); margin-bottom:14px; }
.footer-cols p, .footer-cols a{ font-size:.9rem; color:var(--ink); line-height:1.7; }
.footer-cols a:hover{ color:var(--blue); }
.footer-copy{ text-align:center; margin-top:40px; font-size:.82rem; color:var(--muted); }
.footer-copy a{ color:var(--blue); }

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

/* Panel móvil */
.mm-backdrop, .mobile-menu{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer-cols{ grid-template-columns:1fr 1fr; gap:26px; }
}
@media (max-width:880px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .nav{ grid-template-columns:1fr auto; }
  .nav-links{ display:none; }
  .nav-call .txt{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding:20px 0 60px; }
  .hero-topphoto{ display:none; }
  .hero h1{ font-size:clamp(2.2rem,8vw,3rem); max-width:18ch; }
  .hero-band{ grid-template-columns:1fr; gap:30px; margin-top:24px; text-align:center; }
  .hero-left, .hero-right{ max-width:none; justify-self:center; text-align:center; }
  .hero-left .rule{ margin:0 auto 16px; }
  .hero-center{ order:-1; }
  .portrait{ width:min(320px,78vw); margin:0 auto; }
  .hero-logos{ justify-content:center; }
  .svc-head{ grid-template-columns:1fr; gap:16px; }
  .svc-grid{ grid-template-columns:1fr; gap:26px; }
  .svc-item.offset{ margin-top:0; }
  .why-grid{ grid-template-columns:1fr; gap:36px; }
  .why-card{ padding:30px; }
  .fb-grid{ grid-template-columns:1fr; gap:28px; }
  .fb-photo{ max-width:360px; aspect-ratio:4/4; }
  .blog-grid{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; }

  .mm-backdrop{ display:block; position:fixed; inset:0; background:rgba(22,39,63,.45); z-index:75; opacity:0; visibility:hidden; transition:opacity .28s; }
  .mm-backdrop.open{ opacity:1; visibility:visible; }
  .mobile-menu{ display:flex; flex-direction:column; position:fixed; inset:0 0 0 auto; width:min(320px,86vw); z-index:80; background:#fff; box-shadow:var(--shadow-lg); padding:24px; transform:translateX(105%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
  .mobile-menu.open{ transform:translateX(0); }
  .mm-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
  .mm-head img{ height:40px; }
  .mm-close{ width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:12px; display:grid; place-items:center; cursor:pointer; }
  .mm-close svg{ width:24px; height:24px; }
  .mobile-menu a.mm-link{ font-family:var(--disp); font-weight:600; font-size:1.15rem; color:var(--navy); padding:14px 0; border-bottom:1px solid var(--line); }
  .mobile-menu .mm-cta{ margin-top:auto; display:grid; gap:12px; padding-top:22px; }
  body.menu-open{ overflow:hidden; }
}
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .blog-card{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .results-stage .arrow{ display:none; }
  .teeth-card{ right:0; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto; } }