/* ============================================
   HOSPITAL SAN MIGUEL SONSONATE — Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  /* Color */
  --navy: #081429;
  --teal: #004f6d;
  --teal-soft: #e6f2f5;
  --red: #e43333;
  --red-dark: #6b1418;
  --pearl: #f5f5f7;
  --white: #ffffff;
  --gray: #6b737e;
  --border: #e6e9ec;
  --whatsapp: #25d366;

  /* Shadows */
  --shadow-sm: 0 5px 16px rgba(13,31,51,.06);
  --shadow-lg: 0 8px 24px rgba(13,31,51,.12);

  /* Radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 26px;
  --r-pill: 100px;

  /* Type */
  --font: 'Montserrat', system-ui, sans-serif;

  /* Layout */
  --container: 1240px;
  --pad-section: 64px;
  --pad-section-m: 40px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --fast: .2s;
  --med: .45s;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0; font-family:var(--font); color:var(--navy);
  background:var(--white); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  opacity:0; animation:body-fade-in .5s var(--ease) .15s forwards;
}
@keyframes body-fade-in{ to{ opacity:1; } }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 100px; }
@media (max-width:900px){ .container{ padding:0 20px; } }

/* ---------- Utility: reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--med) var(--ease), transform var(--med) var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity var(--med) var(--ease), transform var(--med) var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.55s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:.65s; }

/* ---------- Chip / Eyebrow ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--white); border:1px solid rgba(0,79,109,.35);
  color:var(--teal); font-weight:700; font-size:11px; letter-spacing:.03em;
  padding:6px 14px; border-radius:var(--r-pill);
}
.deco-bar{ width:56px; height:4px; background:var(--teal); border-radius:2px; margin:16px auto 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head h2{ font-size:clamp(22px,3vw,28px); font-weight:800; margin-top:14px; line-height:1.25; }
.section-head p{ font-size:14px; color:var(--gray); margin-top:12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--r-pill); font-weight:700; font-size:14px;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-teal{ background:var(--teal); color:var(--white); }
.btn-teal:hover{ background:#003d54; box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.btn-red{ background:var(--red); color:var(--white); }
.btn-red:hover{ background:#c72424; box-shadow:0 8px 20px rgba(228,51,51,.35); transform:translateY(-2px); }
.btn-whatsapp{ background:var(--whatsapp); color:var(--white); }
.btn-whatsapp:hover{ background:#1fb956; box-shadow:0 8px 20px rgba(37,211,102,.35); transform:translateY(-2px); }
.btn-outline{ background:transparent; border:1.5px solid var(--border); color:var(--navy); }
.btn-outline:hover{ border-color:var(--teal); color:var(--teal); }

/* ============ NAVBAR ============ */
.navbar{
  position:sticky; top:0; z-index:100; background:var(--white);
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 100px; transition:box-shadow var(--fast) var(--ease), padding var(--fast) var(--ease);
}
.navbar.scrolled{ box-shadow:0 2px 18px rgba(13,31,51,.08); padding-top:12px; padding-bottom:12px; }
.brand-strip{ height:3px; display:flex; opacity:.85; }
.brand-strip span{ flex:1; }
.brand-strip span:nth-child(1){ background:var(--teal); }
.brand-strip span:nth-child(2){ background:var(--navy); }
.brand-strip span:nth-child(3){ background:var(--red); }

.logo-lockup{ display:flex; align-items:center; gap:12px; }
.logo-full-img{ height:44px; width:auto; flex-shrink:0; }
@media (max-width:900px){ .logo-full-img{ height:36px; } }
.logo-mark{ width:26px; height:36px; }
.logo-text{ line-height:1.1; }
.logo-text .name{ font-weight:800; font-size:13px; color:var(--navy); display:block; }
.logo-text .place{ font-weight:600; font-size:11px; color:var(--teal); display:block; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-weight:600; font-size:13.5px; color:var(--navy); position:relative; padding:4px 0; transition:color var(--fast); }
.nav-links a:hover{ color:var(--teal); }
.nav-links a.active{ color:var(--teal); }
.nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--teal); border-radius:2px; }
.nav-links a.nav-login{ background:var(--teal); color:var(--white); padding:8px 18px; border-radius:100px; transition:background var(--fast); }
.nav-links a.nav-login:hover{ background:var(--navy); color:var(--white); }
.nav-links a.nav-login.active::after{ display:none; }


.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-phone{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--navy); }
.nav-phone svg{ color:var(--red); width:15px; height:15px; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; padding:6px; }
.menu-toggle span{ width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform var(--fast), opacity var(--fast); }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* El menú mobile SIEMPRE está oculto fuera de pantalla por defecto, sin importar el ancho de la ventana */
.mobile-menu{
  position:fixed; inset:0; background:rgba(255,255,255,.90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); z-index:99;
  padding:0 24px 32px; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--med) var(--ease);
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-strip{ height:3px; display:flex; margin:0 -24px 28px; }
.mobile-menu-strip span{ flex:1; }
.mobile-menu-strip span:nth-child(1){ background:var(--teal); opacity:.85; }
.mobile-menu-strip span:nth-child(2){ background:var(--navy); opacity:.85; }
.mobile-menu-strip span:nth-child(3){ background:var(--red); opacity:.85; }
.mobile-menu-links{ display:flex; flex-direction:column; margin-top:96px; }
.mobile-menu a{ font-size:18px; font-weight:700; color:var(--navy); }
.mobile-menu-links a{ padding:16px 0; border-bottom:1px solid var(--border); transition:color var(--fast); }
.mobile-menu-links a.active{ color:var(--teal); }
.mobile-menu-links a:last-child{ border-bottom:none; }
.mobile-menu-links a.nav-login{ color:var(--teal); font-weight:800; }
.mobile-menu-contact{ margin-top:auto; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:14px; }
.mobile-menu .btn{ width:100%; margin-top:10px; }

@media (max-width:900px){
  .navbar{ padding:14px 20px; }
  .nav-links, .nav-phone, .btn.hero-cta{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ============ HERO ============ */
.hero{
  position:relative; width:100%; height:min(715px,100vh); overflow:hidden;
  display:flex; align-items:center; color:var(--white);
}
.hero video, .hero .hero-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(8,20,41,.82) 0%, rgba(8,20,41,.55) 42%, rgba(8,20,41,.15) 75%);
}
.hero-content{ position:relative; z-index:2; max-width:560px; padding:0 100px; }
@media (max-width:900px){ .hero-content{ padding:0 20px; max-width:100%; } }

.badge-24{ display:inline-flex; align-items:center; gap:6px; background:var(--red); color:var(--white); font-weight:700; font-size:11px; letter-spacing:.03em; padding:6px 14px; border-radius:var(--r-pill); }
.badge-24 .dot{ width:6px; height:6px; border-radius:50%; background:var(--white); animation:pulse-dot 1.8s infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.hero h1{ font-size:clamp(28px,4.2vw,42px); font-weight:800; line-height:1.15; margin:18px 0 14px; letter-spacing:-.01em; }
.hero p{ font-size:15px; line-height:1.5; opacity:.92; max-width:460px; }
.hero-btns{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.hero-stats{ display:flex; align-items:center; gap:10px; margin-top:38px; font-size:12px; font-weight:600; opacity:.85; }
.hero-stats .sep{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }

/* ============ AREAS ============ */
.areas{ padding:var(--pad-section) 0; background:var(--white); }
.areas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
@media (max-width:900px){ .areas-grid{ grid-template-columns:1fr; } }

.area-card{
  position:relative; height:270px; border-radius:var(--r-lg); overflow:hidden;
  background-color:var(--teal); background-size:cover; background-position:center; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.photo-tag{
  position:absolute; top:14px; left:14px; z-index:3;
  background:rgba(255,255,255,.16); border:1px dashed rgba(255,255,255,.5); color:#fff;
  font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:var(--r-pill);
  backdrop-filter:blur(2px);
}
.area-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.area-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,20,41,.05) 40%, rgba(8,20,41,.82) 100%);
}
.area-card .label{
  position:absolute; left:20px; bottom:20px; right:20px; z-index:2; color:var(--white);
  transform:translateY(38px); transition:transform var(--med) var(--ease);
}
.area-card:hover .label{ transform:translateY(0); }
.area-card .label h3{ font-size:17px; font-weight:800; margin-bottom:8px; }
.area-card .label p{
  font-size:12.5px; line-height:1.5; opacity:0; max-height:0; overflow:hidden;
  transition:opacity var(--med) var(--ease) .05s, max-height var(--med) var(--ease);
}
.area-card:hover .label p{ opacity:.92; max-height:80px; }
.area-card .more-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12px; font-weight:700; color:var(--white);
  opacity:0; transition:opacity var(--med) var(--ease) .1s;
}
.area-card:hover .more-link{ opacity:1; }

/* divider between sections */
.section-divider{ display:flex; justify-content:center; }
.section-divider span{ width:64px; height:3px; border-radius:1.5px; background:var(--navy); opacity:.05; }

/* ============ INTEGRAL / DISTINGUE ============ */
.distingue{ padding:var(--pad-section) 0; background:var(--white); }
.distingue-panel{
  background:var(--white); border:1px solid rgba(0,79,109,.20); border-radius:var(--r-xl);
  padding:32px; margin-top:16px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:1fr 1.15fr; gap:32px; align-items:center;
}
@media (max-width:900px){ .distingue-panel{ grid-template-columns:1fr; padding:20px; } }
.distingue-photo{
  height:340px; border-radius:var(--r-md); background-color:var(--navy); background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
@media (max-width:900px){ .distingue-photo{ height:200px; } }
.distingue-photo .dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.distingue-photo .dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); transition:background var(--fast), width var(--fast); }
.distingue-photo .dots span.active{ background:var(--white); width:18px; border-radius:3px; }

.distingue-cards h3.kicker{ font-size:15px; font-weight:800; margin-bottom:16px; }
.d-card{ display:flex; gap:14px; padding:14px 0; background:rgba(0,79,109,.02); border-radius:var(--r-sm); }
.d-card + .d-card{ margin-top:6px; }
.d-card .bar{ width:3px; flex-shrink:0; border-radius:2px; }
.d-card:nth-child(1) .bar, .d-card.bar-red .bar{ background:var(--red); }
.d-card.bar-navy .bar{ background:var(--navy); }
.d-card.bar-teal .bar{ background:var(--teal); }
.d-card h4{ font-size:14.5px; font-weight:800; margin-bottom:4px; }
.d-card p{ font-size:13px; color:var(--gray); line-height:1.5; }

/* ============ ASEGURADORAS ============ */
.aseguradoras{ padding:var(--pad-section) 0; background:var(--white); }
.ins-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:16px; }
@media (max-width:900px){ .ins-grid{ grid-template-columns:repeat(2,1fr); } }
.ins-card{
  display:block; background:var(--white); border:1.5px solid rgba(0,79,109,.15); border-radius:var(--r-md);
  padding:24px 16px; text-align:center; transition:transform var(--fast) var(--ease), border-color var(--fast);
}
.ins-card:hover{ transform:translateY(-4px); border-color:var(--teal); box-shadow:var(--shadow-sm); }
.ins-card .logo-ph{
  height:48px; margin:0 auto 12px; background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:var(--white); border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#aab0b6; letter-spacing:.05em;
}
.ins-card .logo-ph.logo-ph-lg{ height:64px; }
.ins-card span{ font-size:12.5px; font-weight:700; }
.ins-note{ text-align:center; font-size:12.5px; color:var(--gray); margin-top:22px; }
.ins-note a{ color:var(--teal); font-weight:700; }

/* ============ UBICACION ============ */
.location{ padding:var(--pad-section) 0; background:var(--pearl); }
.loc-card{
  background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  padding:32px; max-width:620px; margin:24px auto 0;
}
.loc-row{ display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.loc-row:last-of-type{ border-bottom:none; }
.loc-row-link{ cursor:pointer; transition:background var(--fast); border-radius:10px; }
.loc-row-link:hover{ background:var(--pearl); }
.loc-row-link .loc-arrow{ margin-left:auto; color:var(--teal); align-self:center; flex-shrink:0; }
.loc-row .ico{ width:38px; height:38px; border-radius:50%; background:var(--teal-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--teal); }
.loc-emergency svg{ flex-shrink:0; }
.loc-row strong{ display:block; font-size:13.5px; margin-bottom:2px; }
.loc-row span{ font-size:13px; color:var(--gray); }
.loc-emergency{ display:inline-flex; align-items:center; gap:8px; background:rgba(228,51,51,.08); color:var(--red); font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:var(--r-pill); margin-top:16px; }
.loc-btns{ display:flex; gap:10px; margin-top:20px; }
.loc-social{ margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.loc-social strong{ display:block; font-size:12.5px; margin-bottom:10px; color:var(--navy); }

/* ============ BANNER FRASE ============ */
.banner-frase{
  background:linear-gradient(120deg, var(--red-dark), var(--red));
  padding:28px 0; text-align:center; color:var(--white);
}
.banner-frase p.eyebrow{ font-size:13px; font-weight:700; opacity:.55; letter-spacing:.04em; margin-bottom:8px; }
.banner-frase h2{ font-size:clamp(20px,3vw,26px); font-weight:800; }

/* ============ FOOTER ============ */
.footer{ background:var(--white); border-top:1px solid var(--border); padding:48px 0 24px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-col h4{ font-size:11px; font-weight:800; color:var(--teal); letter-spacing:.04em; margin-bottom:10px; }
.footer-col p, .footer-col a{ font-size:12.5px; color:var(--gray); display:block; margin-bottom:8px; line-height:1.6; }
.footer-brand p{ max-width:260px; }
.footer-divider{ height:1px; background:var(--border); margin:28px 0 18px; }
.social-links{ display:flex; gap:16px; margin-top:4px; flex-wrap:wrap; }
.social-links a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--gray); transition:color var(--fast); }
.social-links a:hover{ color:var(--teal); }
.footer-bottom{ font-size:11px; color:var(--gray); text-align:center; }

/* ============ PAGE LOADER ============ */
.page-loader{
  position:fixed; inset:0; z-index:9999; background:var(--white);
  display:flex; align-items:center; justify-content:center;
  opacity:1; visibility:visible; transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.page-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.page-loader img{ width:320px; height:auto; animation:loader-pulse 1.1s ease-in-out infinite; }
@media (max-width:600px){ .page-loader img{ width:220px; } }
@keyframes loader-pulse{ 0%,100%{ opacity:.4; transform:scale(.94); } 50%{ opacity:1; transform:scale(1); } }

/* ============ FAB WHATSAPP ============ */
.fab{
  position:fixed; right:28px; bottom:28px; z-index:90; width:60px; height:60px; border-radius:50%;
  background:var(--whatsapp); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4); transition:transform var(--fast) var(--ease);
}
.fab:hover{ transform:scale(1.08); }
.fab::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--whatsapp);
  opacity:0; animation:fab-ring 2.4s infinite;
}
@keyframes fab-ring{ 0%{ opacity:.5; transform:scale(.9); } 100%{ opacity:0; transform:scale(1.35); } }
@media (max-width:900px){ .fab{ width:52px; height:52px; right:20px; bottom:20px; } }

/* ============ PAGEHERO (paginas internas: servicios, seguros, nosotros) ============ */
.pagehero{ position:relative; height:280px; display:flex; align-items:center; color:var(--white); overflow:hidden; }
@media (max-width:900px){ .pagehero{ height:200px; } }
.pagehero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.pagehero::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,20,41,.85) 0%, rgba(0,79,109,.6) 70%); }
.pagehero-content{ position:relative; z-index:2; }
.breadcrumb{ font-size:12px; opacity:.75; margin-bottom:10px; }
.breadcrumb a{ color:var(--white); }
.pagehero h1{ font-size:clamp(24px,3.5vw,34px); font-weight:800; }
.pagehero p{ font-size:14px; opacity:.9; margin-top:8px; max-width:480px; }

/* ============ NOSOTROS ============ */
.historia{ padding:56px 0; background:var(--white); }
@media (max-width:900px){ .historia{ padding:38px 0; } }
.historia-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:800px){ .historia-grid{ grid-template-columns:1fr; gap:28px; } }
.historia-photo{ height:360px; border-radius:22px; background-size:cover; background-position:center; box-shadow:var(--shadow-sm); }
@media (max-width:900px){ .historia-photo{ height:220px; } }
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.badge{ display:inline-flex; align-items:center; gap:6px; background:var(--teal-soft); color:var(--teal); font-weight:700; font-size:11.5px; padding:7px 14px; border-radius:100px; }
.historia-text h2{ font-size:clamp(20px,3vw,26px); font-weight:800; margin-bottom:14px; }
.historia-text p{ font-size:14px; color:var(--gray); line-height:1.7; }

.valores{ padding:56px 0; background:var(--pearl); }
@media (max-width:900px){ .valores{ padding:38px 0; } }
.valores-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
@media (max-width:800px){ .valores-grid{ grid-template-columns:1fr; } }
.valor-card{ background:var(--white); border-radius:20px; padding:30px 24px; box-shadow:var(--shadow-sm); }
.valor-card .ico{ width:44px; height:44px; border-radius:12px; background:var(--teal-soft); color:var(--teal); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.valor-card h4{ font-size:15.5px; font-weight:800; margin-bottom:8px; }
.valor-card p{ font-size:13px; color:var(--gray); line-height:1.6; }

.mision-vision{ padding:56px 0; background:var(--white); }
@media (max-width:900px){ .mision-vision{ padding:32px 0; } }
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
@media (max-width:800px){ .mv-grid{ grid-template-columns:1fr; } }
.mv-card{ background:var(--pearl); border-radius:22px; padding:32px; border-left:4px solid var(--teal); }
.mv-card:nth-child(2){ border-left-color:var(--red); }
.mv-card h3{ font-size:16px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.mv-card p{ font-size:13.5px; color:var(--gray); line-height:1.7; }

/* ============ SEGUROS ============ */
.seguros-grid{ padding:56px 0; background:var(--white); }
@media (max-width:900px){ .seguros-grid{ padding:38px 0; } }

.como-funciona{ padding:56px 0; background:var(--pearl); }
@media (max-width:900px){ .como-funciona{ padding:38px 0; } }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
@media (max-width:800px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--white); border-radius:20px; padding:28px 24px; text-align:center; box-shadow:var(--shadow-sm); position:relative; }
.step .num{ width:36px; height:36px; border-radius:50%; background:var(--teal); color:var(--white); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.step h4{ font-size:15px; font-weight:800; margin-bottom:8px; }
.step p{ font-size:13px; color:var(--gray); line-height:1.55; }

.faq{ padding:56px 0; background:var(--white); }
@media (max-width:900px){ .faq{ padding:38px 0; } }
.faq-list{ max-width:720px; margin:28px auto 0; }
.faq-item{ border-bottom:1px solid var(--border); padding:18px 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:14.5px; }
.faq-q svg{ flex-shrink:0; transition:transform var(--fast) var(--ease); color:var(--teal); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--med) var(--ease); font-size:13.5px; color:var(--gray); line-height:1.6; }
.faq-item.open .faq-a{ max-height:200px; margin-top:12px; }

/* ============ SERVICIOS Y ESPECIALIDADES ============ */
.finder{ padding:56px 0; background:var(--pearl); }
@media (max-width:900px){ .finder{ padding:38px 0; } }
.finder-card{ background:var(--white); border-radius:26px; box-shadow:var(--shadow-sm); padding:32px; position:relative; }
@media (max-width:900px){ .finder-card{ padding:20px; border-radius:20px; } }
.finder-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--teal); border-radius:26px 26px 0 0; }
.search-row{ display:flex; gap:12px; }
@media (max-width:600px){ .search-row{ flex-direction:column; } }
.search-bar{ position:relative; flex:1; display:flex; align-items:center; gap:10px; background:var(--pearl); border:1.4px solid rgba(0,79,109,.28); border-radius:100px; padding:14px 20px; }
.search-bar svg{ color:var(--teal); flex-shrink:0; }
.search-bar input{ border:none; background:none; outline:none; font-family:inherit; font-size:14px; width:100%; color:var(--navy); }
.search-bar input::placeholder{ color:#9aa1a8; }
.search-btn{ box-shadow:0 8px 16px rgba(0,79,109,.25); }
.search-results{
  position:absolute; top:calc(100% + 10px); left:0; right:0; background:var(--white); border-radius:16px;
  box-shadow:var(--shadow-lg); border:1px solid var(--border); max-height:320px; overflow-y:auto; z-index:20; display:none;
}
.search-results.open{ display:block; }
.search-results a{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px; font-size:13.5px; font-weight:600; color:var(--navy); border-bottom:1px solid var(--border); }
.search-results a:last-child{ border-bottom:none; }
.search-results a:hover{ background:var(--pearl); color:var(--teal); }
.search-results a span.tag{ font-size:10px; font-weight:700; color:var(--teal); background:var(--teal-soft); padding:3px 8px; border-radius:100px; }
.search-results .empty{ padding:16px 18px; font-size:13px; color:var(--gray); }
.pill-wrap.expanded{ max-height:none; }

.finder-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px; padding-top:28px; border-top:1px solid var(--border); }
@media (max-width:700px){ .finder-cols{ grid-template-columns:1fr; gap:24px; } }
.finder-col-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.finder-col-head .ico{ width:32px; height:32px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.finder-col-head strong{ font-size:14px; }
.pill-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ background:var(--teal-soft); color:var(--teal); font-weight:600; font-size:11.5px; padding:7px 14px; border-radius:100px; transition:background var(--fast), color var(--fast); cursor:pointer; }
.pill:hover{ background:var(--teal); color:var(--white); }
.view-all{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--teal); margin-top:14px; }

.diagnostico{ padding:56px 0; background:var(--white); }
@media (max-width:900px){ .diagnostico{ padding:38px 0; } }
.diag-grid{ display:flex; flex-direction:column; gap:24px; margin-top:28px; }
.diag-card{ display:grid; grid-template-columns:340px 1fr; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.diag-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
@media (max-width:800px){ .diag-card{ grid-template-columns:1fr; } }
.diag-card .photo{ min-height:220px; background-size:cover; background-position:center; }
.diag-card .content{ padding:32px; display:flex; flex-direction:column; justify-content:center; }
.diag-card h3{ font-size:18px; font-weight:800; margin-bottom:10px; }
.diag-card p{ font-size:13.5px; color:var(--gray); line-height:1.6; }
.diag-card .diag-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--teal); margin-top:14px; }

.cta-cita{ padding:48px 0; background:var(--teal); text-align:center; color:var(--white); }
.cta-cita h3{ font-size:clamp(18px,2.5vw,22px); font-weight:800; margin-bottom:10px; }
.cta-cita p{ font-size:13.5px; opacity:.9; max-width:440px; margin:0 auto 22px; }