/* ===== Diseño general ===== */
:root{
  --bg:#f6f7fb;
  --paper:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --brand:#0d47a1;
  --brand-2:#1967d2;
  --line:#e6e9ef;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
}

/* ===== Navbar ===== */
.navbar{
  position:sticky; top:0; z-index:50;
  background:var(--brand); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.navbar .wrap{
  max-width:1100px; margin:0 auto; padding:10px 14px;
  display:flex; align-items:center; gap:14px;
}
.brand{ font-weight:800; letter-spacing:.3px; }
.nav{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.nav a{
  color:#dbeafe; text-decoration:none; padding:8px 10px; border-radius:8px;
}
.nav a:hover{ background:#0b3a84; color:#fff; }
.btn-cta{
  background:#1976d2;; color:var(--brand); font-weight:700; border-radius:999px; padding:8px 14px;
}

/* ===== Shell / secciones ===== */
.shell{ max-width:1100px; margin:22px auto; padding:0 14px; }
.section{ background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 28px rgba(13,71,161,.06); }
.section header{ padding:14px 16px; border-bottom:1px solid #eef2f7; }
.section header h2{ margin:0; font-size:22px; color:var(--brand); }
.section .body{ padding:16px; }

/* ===== Carrusel ===== */
.carousel{
  position:relative; border-radius:14px; overflow:hidden; height:min(420px, 56vh);
  background:#0b3a84;
}
.slide{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; text-align:center; padding:24px;
  opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;
  background:linear-gradient(120deg, #0d47a1, #1976d2);
}
.slide.active{ opacity:1; transform:none; }
.slide h1{ margin:0 0 6px; font-size:clamp(26px,4vw,36px); }
.slide p{ margin:4px 0 12px; color:#e8f1ff; }
.carousel .dots{
  position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px;
}
.dot{ width:10px; height:10px; border-radius:999px; background:#ffffff50; cursor:pointer; border:1px solid #fff8; }
.dot.active{ background:#fff; }

/* ===== Historia ===== */
.history p{ margin:8px 0; color:#374151; }
.lead{ font-size:18px; }

/* ===== Artículos ===== */
.grid3{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
@media (max-width:900px){ .grid3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid3{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .12s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.card .thumb{
  height:160px; background:#dbe7ff; display:grid; place-items:center;
  color:#0b3a84; font-weight:800; letter-spacing:.5px;
  background-image:linear-gradient(135deg, #e3f2fd, #bbdefb);
}
.card .card-body{ padding:12px 14px; display:grid; gap:6px; flex:1; }
.card h3{ margin:0; font-size:18px; color:#0d47a1; }
.card p{ margin:0; color:#374151; }
.card .meta{ font-size:12px; color:var(--muted); }
.card .actions{ margin-top:auto; }
.btn{
  appearance:none; border:1px solid #cfd8dc; background:#fff; color:#123;
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.btn:hover{ background:#f5f8ff; }
.btn-primary{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
.center{ text-align:center; }

/* ===== Mi consultorio ===== */
.map{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; height:300px;
}

/* ===== Artículo (detalle) ===== */
.hero{
  background:linear-gradient(135deg, #e3f2fd, #bbdefb);
  border:1px solid var(--line); border-radius:14px; padding:18px;
}
.hero h1{ margin:0 0 6px; color:#0d47a1; }
.hero .meta{ color:#475569; }

/* ===== Aparecer suave ===== */
.reveal{ opacity:0; transform:translateY(10px); animation:reveal .5s ease forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }