/* ═══════════════════════ Medical Point ═══════════════════════ */
:root{
  --bg:#ffffff; --cream:#f2f6f7; --wash:#e7f0f2;
  --blue:#6b93a3; --blue-2:#547c8c; --blue-3:#3f6371; --blue-section:#6f96a6;
  --ink:#17262b; --ink-2:#33474e; --body:#586d73; --muted:#8ba0a6;
  --line:rgba(23,38,43,.10); --line-2:rgba(23,38,43,.17);
  --radius:16px; --radius-lg:22px;
  --shadow:0 10px 30px -14px rgba(24,50,60,.18), 0 2px 8px rgba(24,50,60,.05);
  --shadow-lg:0 26px 60px -24px rgba(24,50,60,.30);
  --ring:0 0 0 4px rgba(107,147,163,.20);
  --warn:#97710e; --danger:#b3261e; --success:#1f7a4d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.muted{color:var(--muted)}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; gap:.55em; font-weight:600; font-size:14.5px;
  padding:.72em 1.4em; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background .2s, color .2s, box-shadow .2s; white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue-2); color:#fff; box-shadow:0 8px 20px -8px rgba(63,99,113,.55)}
.btn-primary:hover{background:var(--blue-3)}
.btn-primary.lg,.btn-ghost-dark.lg{padding:.9em 1.8em; font-size:15.5px}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--cream)}
.btn-ghost .play-ic{width:26px;height:26px; border-radius:50%; background:var(--blue-2); color:#fff; display:grid; place-items:center; margin-left:-.35em}
.btn-pill{background:#fff; color:var(--ink); border-color:var(--line-2); font-weight:700}
.btn-pill:hover{border-color:var(--blue); color:var(--blue-2)}
.btn-light{background:#fff; color:var(--blue-3)}
.btn-light:hover{background:var(--cream)}
.btn-outline{background:transparent; color:var(--blue-2); border-color:var(--line-2); font-weight:700}
.btn-outline:hover{background:var(--wash); border-color:var(--blue)}
.btn-ghost-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12)}

/* ── Header ── */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s}
.site-header.scrolled{border-color:var(--line); box-shadow:0 6px 24px -18px rgba(24,50,60,.35)}
.header-inner{display:flex; align-items:center; gap:24px; height:74px}
.brand{display:inline-flex; align-items:center; gap:10px}
.brand-logo{display:block}
.brand-logo.full{height:60px; width:auto}
.brand-logo.mark{height:38px; width:auto; display:none}
.brand-chip{width:40px; height:40px; background:#fff; border-radius:12px; display:grid; place-items:center; flex:none}
.brand-chip img{height:27px; width:auto; display:block}
.brand-wordmark{font-weight:800; font-size:18px; color:#fff; letter-spacing:-.02em}
.nav{margin-left:auto; display:flex; gap:6px}
.nav a{padding:.5em .9em; border-radius:9px; font-size:14.5px; font-weight:600; color:var(--ink-2); transition:color .2s, background .2s}
.nav a:hover{color:var(--blue-2); background:var(--wash)}
.header-actions{display:flex; align-items:center; gap:14px; margin-left:8px}
.soy-link{font-size:13.5px; font-weight:700; color:var(--blue-2); white-space:nowrap}
.soy-link:hover{color:var(--blue-3)}
.finder.cols-3{grid-template-columns:repeat(3,1fr) auto}
.menu-toggle{display:none; width:42px; height:42px; border:1px solid var(--line-2); background:#fff; border-radius:11px; flex-direction:column; gap:4px; align-items:center; justify-content:center; cursor:pointer}
.menu-toggle span{width:17px; height:2px; background:var(--ink); border-radius:2px; transition:.25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Hex pattern ── */
.hex-field{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z M28 48l24 14v28' fill='none' stroke='%236b93a3' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 96px; -webkit-mask-image:radial-gradient(120% 70% at 100% 0,#000,transparent 60%); mask-image:radial-gradient(120% 70% at 100% 0,#000,transparent 60%)}
.hex-field.soft{-webkit-mask-image:radial-gradient(90% 120% at 90% 10%,#000,transparent 70%); mask-image:radial-gradient(90% 120% at 90% 10%,#000,transparent 70%); opacity:.7}

/* ── Hero ── */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#fff, var(--cream))}
.hero-grid{position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:36px; align-items:center; padding:30px 24px 40px}
.hero-copy h1{font-size:clamp(34px,4.6vw,54px); margin:0}
.hero-copy .hl{color:var(--blue-2)}
.lead{margin-top:18px; font-size:17px; max-width:47ch; color:var(--body)}
.lead strong{color:var(--ink-2); font-weight:700}
.hero-cta{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.hero-search{display:inline-flex; align-items:center; gap:13px; margin-top:26px; background:#fff; border:1px solid var(--line);
  padding:12px 18px 12px 14px; border-radius:15px; box-shadow:var(--shadow); max-width:340px}
.hero-search .search-ic{width:38px; height:38px; border-radius:10px; background:var(--wash); color:var(--blue-2); display:grid; place-items:center; flex:none}
.search-text{display:flex; flex-direction:column; line-height:1.25}
.search-text b{color:var(--ink); font-size:14px}
.search-text small{color:var(--muted); font-size:12px}
.hero-figure{position:relative; justify-self:center; width:min(100%,430px)}
/* Blob azul orgánico detrás de la doctora recortada (como la referencia). */
.hero-blob{position:absolute; left:1%; right:3%; top:3%; bottom:7%; z-index:0;
  background:radial-gradient(120% 120% at 40% 25%,#89aab8,#6f96a6);
  border-radius:52% 48% 46% 54% / 56% 53% 47% 44%}
.hero-figure img{position:relative; z-index:1; display:block; width:100%; height:auto}

/* ── Stats ── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-top:-6px; overflow:hidden}
.stat{padding:26px 22px; text-align:center; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block; font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{font-size:13.5px; color:var(--body)}

/* ── Finder ── */
.finder{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:10px; margin-top:26px; background:var(--blue-2);
  padding:14px; border-radius:var(--radius-lg); box-shadow:0 18px 40px -22px rgba(63,99,113,.7)}
.finder-field{display:flex; flex-direction:column; gap:3px; background:#fff; border-radius:12px; padding:9px 14px}
.finder-field>span{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.finder-field select,.finder-field input{border:0; background:transparent; font:inherit; font-size:14px; font-weight:600; color:var(--ink); padding:0; outline:none; width:100%}
.btn-find{background:#fff; color:var(--blue-3); align-self:stretch; padding:0 24px; border-radius:12px; font-weight:700}
.btn-find:hover{background:var(--wash)}

/* ── Combobox de Doctor (autocompletar + avatares) ── */
.finder-field.combo{position:relative}
.combo-menu{position:absolute; top:calc(100% + 9px); left:0; right:0; z-index:45; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--line-2); border-radius:15px; box-shadow:var(--shadow-lg);
  max-height:330px; overflow:auto; display:none}
.combo-menu.open{display:block}
.combo-opt{display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:11px; cursor:pointer; transition:background .15s}
.combo-opt:hover,.combo-opt.hi{background:var(--wash)}
.combo-opt img{width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:top; flex:none; background:var(--wash); box-shadow:0 0 0 1px var(--line)}
.combo-opt .txt{min-width:0}
.combo-opt b{display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.25; letter-spacing:0}
.combo-opt small{font-size:11.5px; color:var(--muted)}
.combo-empty{padding:16px 12px; text-align:center; color:var(--muted); font-size:13px}
.combo-menu li mark{background:transparent; color:var(--blue-2); font-weight:800}

/* ── Sections ── */
.section{padding:88px 0}
.section-head{max-width:620px; margin-bottom:44px}
.section-head.center{margin-inline:auto; text-align:center}
.kicker{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-2); margin-bottom:14px}
.section-head h2{font-size:clamp(26px,3.2vw,38px)}
.section-head p{margin-top:14px; font-size:16.5px}

/* ── Especialidades ── */
.esp-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.esp-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:26px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s}
.esp-card:hover{transform:translateY(-5px); border-color:var(--blue); box-shadow:var(--shadow)}
.esp-ic{width:56px; height:56px; color:var(--blue-2); display:grid; place-items:center; margin-bottom:8px}
.esp-ic svg{width:100%; height:100%}
.esp-card b{color:var(--ink); font-size:14.5px; font-weight:700}
.esp-card small{color:var(--muted); font-size:12px}
.esp-otros{justify-content:center; background:transparent; border-style:dashed}
.esp-otros b{color:var(--blue-2); font-size:14.5px}
.esp-otros:hover b{color:var(--blue-3)}
.esp-more{text-align:center; margin-top:32px; color:var(--body)}
.esp-more a{color:var(--blue-2); font-weight:700}

/* ── Servicios ── */
.servicios{position:relative; background:var(--blue-section); color:#fff; overflow:hidden}
.servicios h2,.servicios h3{color:#fff}
.serv-grid{display:grid; grid-template-columns:1fr 1.15fr .82fr; gap:38px; align-items:center}
.serv-copy{max-width:280px}
.serv-copy h2{font-size:clamp(24px,2.8vw,32px)}
.serv-copy p{margin-top:14px; color:rgba(255,255,255,.82)}
.serv-copy .btn{margin-top:22px}
/* Lista dividida por hairlines — SIN tarjetas ni ícono-en-cuadrito */
.serv-list{display:grid; grid-template-columns:1fr 1fr; gap:0 32px}
.serv-row{display:flex; gap:14px; padding:20px 0; border-top:1px solid rgba(255,255,255,.22)}
.serv-ic{flex:none; color:#fff; opacity:.92; margin-top:1px}
.serv-row h3{font-size:15.5px; font-weight:700}
.serv-row p{margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.78); line-height:1.55}
.serv-figure{align-self:end; justify-self:center; width:min(100%,330px)}
.serv-figure img{display:block; width:100%; height:auto}
.ekg{margin-top:40px; height:40px; opacity:.5}
.ekg svg{width:100%; height:40px}

/* ── Why ── */
.why{background:var(--cream)}
/* Sin tarjetas ni ícono-en-cuadrito: ítems divididos por una línea vertical */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.why-item{padding:4px 30px; border-left:1px solid var(--line-2)}
.why-item:first-child{border-left:0; padding-left:0}
.why-ic{color:var(--blue-2); margin-bottom:18px; display:block}
.why-ic svg{width:30px; height:30px}
.why-item h3{font-size:16.5px; font-weight:700}
.why-item p{margin-top:10px; font-size:13.5px}

/* ── Sedes ── */
.sede-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.sede-card{display:grid; grid-template-columns:150px 1fr; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.sede-map{position:relative; background:url("/img/map-bg.svg") center/cover no-repeat, var(--wash)}
.sede-map::after{content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-60%);
  background:var(--blue-2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s-7-5-7-11a7 7 0 1 1 14 0c0 6-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='11' r='2.6' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s-7-5-7-11a7 7 0 1 1 14 0c0 6-7 11-7 11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 6px 8px rgba(63,99,113,.4))}
.sede-body{padding:22px}
.sede-body h3{font-size:20px}
.sede-addr{margin-top:6px; font-size:13.5px}
.sede-meta{list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:9px}
.sede-meta li{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding-bottom:9px; border-bottom:1px solid var(--line)}
.sede-meta li:last-child{border-bottom:0; padding-bottom:0}
.sede-meta span{color:var(--muted)}
.sede-meta b{color:var(--ink); font-weight:700}
.sede-body .btn{margin-top:6px; width:100%; justify-content:center}

/* ── CTA ── */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--blue-2),var(--blue-3)); color:#fff}
.cta-inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:64px 24px; flex-wrap:wrap}
.cta-inner h2{color:#fff; font-size:clamp(24px,3vw,34px)}
.cta-inner p{margin-top:10px; color:rgba(255,255,255,.85)}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* ── Footer ── */
.footer{background:var(--ink); color:rgba(255,255,255,.7); padding:60px 0 26px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.10)}
.foot-brand p{margin-top:14px; font-size:13.5px; max-width:30ch; line-height:1.6}
.foot-col h4{color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; font-weight:700}
.foot-col a{display:block; padding:5px 0; font-size:14px; color:rgba(255,255,255,.7); transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; gap:12px; padding-top:22px; font-size:12.5px; color:rgba(255,255,255,.55); flex-wrap:wrap}
.foot-legal a:hover{color:#fff}

/* ── Reveal ── */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ═══ Responsive ═══ */
@media (max-width:980px){
  .nav{position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:2px; background:#fff; padding:16px 24px 24px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .3s cubic-bezier(.2,.8,.3,1); margin:0}
  .nav.open{transform:none}
  .nav a{padding:.8em 1em}
  .menu-toggle{display:flex}
  /* sin la nav en el flujo, empuja acciones (Soy paciente + menú) al extremo derecho */
  .header-actions{margin-left:auto}
  .hero-grid{grid-template-columns:1fr; padding-top:36px}
  .hero-figure{order:-1; max-width:360px}
  .hero-figure img{width:min(100%,340px)}
  .float-badge{right:6px}
  .serv-grid{grid-template-columns:1fr}
  .serv-list{order:2}
  .serv-figure{order:3; justify-self:center; max-width:320px}
  .serv-copy{max-width:none; order:1}
  .why-grid{grid-template-columns:1fr 1fr; gap:0 30px}
  .why-item:nth-child(3){border-left:0; padding-left:0}
  .why-item:nth-child(-n+2){padding-bottom:22px}
  .why-item:nth-child(n+3){border-top:1px solid var(--line-2); padding-top:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .section{padding:60px 0}
  /* Hero en teléfono: primero el mensaje + CTA (visibles de una), foto compacta debajo */
  .hero-grid{padding:20px 18px 30px; gap:18px}
  .hero-copy{order:1}
  .hero-figure{order:2; max-width:250px; margin:2px auto 0}
  .hero-figure img{width:min(70vw,230px)}
  .hero-copy h1{font-size:clamp(28px,8.2vw,40px); line-height:1.08}
  .lead{font-size:15.5px; margin-top:14px; max-width:none}
  .hero-cta{flex-direction:column; align-items:stretch; gap:10px; margin-top:22px}
  .hero-cta .btn{width:100%; justify-content:center}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  /* Finder en teléfono: 1 columna (cajas iguales, texto completo) y más compactas.
     Se incluye .finder.cols-3 para ganar en especificidad a la regla de escritorio. */
  .finder, .finder.cols-3{grid-template-columns:1fr; gap:8px; padding:10px}
  .finder-field{padding:7px 14px}
  .btn-find{grid-column:1 / -1; padding:13px}
  .esp-grid{grid-template-columns:1fr 1fr 1fr}
  .serv-list{grid-template-columns:1fr}
  .serv-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-item{border-left:0!important; padding:16px 0!important; border-top:1px solid var(--line-2)}
  .why-item:first-child{border-top:0}
  .sede-grid{grid-template-columns:1fr}
  .sede-card{grid-template-columns:1fr}
  .sede-map{height:120px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-inner{padding:48px 20px}
  .header-actions .btn-pill{display:none}
  .brand-logo.full{display:none}
  .brand-logo.mark{display:block}
}