:root{
  --bg:#ffffff;
  --navy:#0B1B2B;
  --lime:#78D742;
  --muted:#4A5568;
  --accent:#E8F6EA;

  /* redes */
  --wa:#25D366;

  /* tipografía fluida */
  --fs-hero: clamp(28px, 5.6vw, 42px);
  --fs-sub:  clamp(16px, 2.9vw, 18px);

  /* layout */
  --container: 1120px;
  --pad: 16px;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--navy); background:var(--bg);
  -webkit-tap-highlight-color: transparent;
}
a{color:var(--navy);text-decoration:none}
img{max-width:100%;display:block;height:auto}
.container{max-width:var(--container);margin:auto;padding:0 var(--pad)}
.row{display:flex;gap:16px}
.column{display:flex;flex-direction:column;gap:8px}
.centerY{align-items:center}
.between{justify-content:space-between}
.end{justify-content:flex-end}
.wrap{flex-wrap:wrap}
.gap-8{gap:8px}
.gap-12{gap:12px}
.hide{display:none}
.hideMobile{display:none}
.onlyMobile{display:inline-flex}
@media (min-width:900px){
  .hideMobile{display:flex}
  .onlyMobile{display:none}
}

.topbar{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #eef;z-index:20}
.logo{width:44px;height:44px}
.logo.sm{width:32px;height:32px}
.brand{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.brand strong{font-size:16px;color:var(--navy)}
.nav a{padding:16px 10px;border-radius:10px}
.nav a:hover{background:var(--accent)}

.btn{padding:10px 16px;border-radius:999px;border:0;background:var(--navy);color:#fff;cursor:pointer;transition:.25s transform, .25s opacity}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid #e5e7eb}
.btn.white{background:#fff;color:var(--navy)}
.btn.primary{background:var(--lime);color:#0B1B2B;font-weight:700}
.btn.cart{display:inline-flex;align-items:center;gap:8px}
.badge{background:var(--lime);color:#0B1B2B;padding:2px 8px;border-radius:999px;font-size:12px}

.hero{position:relative}
.heroSlide{
  min-height:68vh;
  display:flex; align-items:center;
  /* El HTML define: style="--bg:url('/assets/heroX.jpg')" */
  --overlay:linear-gradient(180deg, rgba(11,27,43,.40), rgba(11,27,43,.35));
  background-image: var(--overlay), var(--bg);
  background-size: cover;
  background-position: center;
}
.heroContent{color:#fff;max-width:640px;margin-left:6vw}
.heroContent h1,.heroContent h2{font-size:var(--fs-hero);margin:0 0 8px}
.heroContent p{font-size:var(--fs-sub);color:#E8F6EA;line-height:1.55}

@media (max-width:680px){
  .heroSlide{min-height:56vh}
  .heroContent{margin-left:var(--pad);margin-right:var(--pad);max-width:520px}
}

.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg,#f9fafb, #fff)}
.sectionHeader{text-align:center;margin-bottom:24px}
.sectionHeader h3{font-size:clamp(22px,3.8vw,28px);margin:0 0 6px}
.sectionHeader p{color:var(--muted)}

.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.catalogo{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.doctors{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.contact{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

@media (max-width:480px){
  .section{padding:48px 0}
  .grid{gap:12px}
  .cards{grid-template-columns:1fr}
  .catalogo{grid-template-columns:1fr}
  .doctors{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}

.card{border:1px solid #eef;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(11,27,43,.04)}
.card img{aspect-ratio: 16/9; object-fit: cover; transition:transform .35s ease}
.card:hover img{transform:scale(1.03)}
.cardBody{padding:14px}
.card h4{margin:0 0 6px}
.link{color:var(--lime);font-weight:600}

.form{display:flex;flex-direction:column;gap:12px}
.form .input, .form input, .form select, .form textarea{
  width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font:inherit
}
.formGrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ok{color:#0a7b22;font-weight:600}

.footer{border-top:1px solid #eef;padding:32px 0;background:#fff}
.muted{color:#6b7280}

.modal{border:0;border-radius:16px;padding:0}
.modal::backdrop{background:rgba(0,0,0,.35)}
.modalBox{min-width:min(92vw,800px);padding:16px;border-radius:16px;background:#fff}
.cartItems{display:flex;flex-direction:column;gap:10px;max-height:40vh;overflow:auto;padding:10px;border:1px dashed #e5e7eb;border-radius:12px}

/* Accesibilidad y motion-reduce */
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Pequeños detalles de lujo */
.card img{transition:transform .35s ease}
.card:hover img{transform:scale(1.03)}

/* Utilidades */
.row .input{min-width:220px}
/* Redes sociales elegantes */
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid #e5e7eb;border-radius:12px;
  color:var(--navy);
  transition:.25s transform,.25s color,.25s border-color
}
.social a:hover{color:var(--lime);border-color:var(--lime);transform:translateY(-2px)}
.social svg{width:20px;height:20px}

/* WhatsApp flotante (con SVG externo /assets/wa.svg) */
.waBtn{
  position:fixed; right:22px; bottom:22px;
  width:60px; height:60px; border-radius:999px;
  background:linear-gradient(135deg, var(--wa) 0%, #1ebe5c 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 38px rgba(37,211,102,.35), 0 2px 6px rgba(0,0,0,.15);
  border:0; cursor:pointer; transition:transform .2s, box-shadow .25s, filter .25s;
  isolation:isolate; z-index:999;
}
.waBtn:hover{ transform:translateY(-2px); filter:saturate(1.05) }
.waBtn .waImg{ width:28px; height:28px; display:block; pointer-events:none; }

.waBtn::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit; z-index:-1;
  box-shadow:0 0 0 0 rgba(37,211,102,.35); animation:waPulse 2s infinite;
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.35)}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* Lista de contacto con iconos */
.contactList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.contactList li{ display:flex; gap:12px; align-items:flex-start }
.contactList a{ color:var(--navy); text-decoration:none }
.contactList a:hover{ text-decoration:underline }
.icoCircle{
  width:36px; height:36px; min-width:36px;
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e6eaf2;
  box-shadow:0 6px 12px rgba(11,27,43,.06), inset 0 -1px 0 rgba(11,27,43,.04);
  color:var(--navy);
}
.icoCircle svg{ width:18px; height:18px; fill:currentColor }
.icoCircle.wa{ color:var(--wa) }
.contactList li:hover .icoCircle{
  transform: translateY(-1px);
  transition: .2s transform, .2s box-shadow, .2s border-color;
  border-color: var(--lime);
  box-shadow:0 10px 18px rgba(11,27,43,.10);
}