:root {
  --primary: #1e73be;
  --accent: #2baf66;
  --bg: #f4fbf9;
  --paper: #fff;
  --ink: #1e2a35;
  --ink-2: #5a6b79;
  --ring: #e7eef0;
  --radius: 12px;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}
body {
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 14px 60px;
}
header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(244, 251, 249, 0.85);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--ring);
}
.nav {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
}
.logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ring);
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.brand h1 {
  font-family: "Crimson Text", serif;
  font-size: 24px;
  margin: 0;
  color: var(--primary);
}
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.menu a {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: #fff;
}
.menu a:hover {
  background: #f8fbff;
}
.hero-min {
  padding: 14px 12px;
  border-bottom: 1px solid var(--ring);
  color: var(--ink-2);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--ring);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card .thumb {
  height: 120px;
  background: linear-gradient(135deg, #1e73be, #2baf66);
}
.card .body {
  padding: 12px;
}
.card h3 {
  font-family: "Crimson Text", serif;
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--primary);
}
.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}
.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  border: 1px solid var(--primary);
  font-size: 13px;
}
footer {
  border-top: 1px solid var(--ring);
  color: var(--ink-2);
  padding: 16px 12px;
  text-align: center;
}
.hide {
  display: none !important;
}
.prose {
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.prose h2,
.prose h3 {
  font-family: "Crimson Text", serif;
  color: var(--primary);
  margin-top: 8px;
}
.prose img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
}
#layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  margin-top: 14px;
}
.sidebar {
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
}
.side-item {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}
.side-item.active {
  outline: 2px solid var(--accent);
  background: #f9fffb;
}
.side-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2baf66, #1e73be);
}
.side-title {
  font-size: 14px;
}
.detail {
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.detail-header {
  padding: 12px;
  border-bottom: 1px solid var(--ring);
}
.detail-title {
  font-family: "Crimson Text", serif;
  font-size: 24px;
  margin: 0;
  color: var(--primary);
}
.badge {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 3px 7px;
  background: #f3f8ff;
  color: var(--primary);
}
.detail-body {
  padding: 12px;
}
.area {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  margin-bottom: 10px;
}
.num {
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2baf66, #1e73be);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
}
.figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  #layout {
    grid-template-columns: 1fr;
  }
  .figure {
    grid-template-columns: 1fr;
  }
  .wrap {
    padding: 16px 10px 40px;
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
/* 1) Oculta cualquier overlay viejo del template dentro del slide */
#hero .carousel-item .container:not(.mini-caption),
#hero .carousel-item .slide-caption,
#hero .hero-caption-bar {
  display: none !important;
}

/* 2) Asegura que el slide no “estire” por contenido interno */
#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item {
  position: relative;
  overflow: hidden;
}

/* 3) Franja mínima pegada al borde inferior (no tapa la foto) */
#hero .mini-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1rem;                 /* franja compacta */
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff;
  pointer-events: none;                /* no intercepta clics fuera del botón */
}
#hero .mini-caption h3{
  margin: 0; font-weight: 600; color: #fff;
  font-size: clamp(1rem, 2vw, 1.2rem);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  max-width: 70ch;
}
#hero .mini-caption .btn{
  pointer-events: auto;                /* el botón sí es clickable */
  white-space: nowrap;
}

/* 4) Altura del slide (ajústala a gusto) */
#hero .carousel-item{
  min-height: 62vh;                    /* o 70vh si quieres más alto */
  background-size: cover;
  background-position: center;
}
@media (min-width: 992px){
  #hero .carousel-item{ min-height: 72vh; }
}
/* ——— Quitar overlays viejos que tapan la foto ——— */
#hero .carousel-item .slide-caption,
#hero .carousel-item .carousel-caption,
#hero .carousel-item .container:not(.mini-caption),
#heroCaption,
.hero-caption-bar {
  display: none !important;
}

/* ——— Asegurar que el carrusel no reserve espacio extra ——— */
#hero, #hero .carousel, #hero .carousel-inner, #hero .carousel-item {
  position: relative;
  overflow: hidden;
}
#hero { padding-bottom: 0 !important; }

/* ——— Franja mínima pegada abajo, sin bordes verdes ——— */
#hero .mini-caption{
  position: absolute;
  left: 16px;               /* separada de los bordes */
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff;
  border: 0 !important;     /* por si algún estilo previo ponía borde */
  pointer-events: none;     /* no intercepta clics fuera del botón */
  z-index: 2;
}
#hero .mini-caption h3{
  margin: 0;
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.15rem);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  max-width: 70ch;
  color: #fff;
}
#hero .mini-caption .btn{
  pointer-events: auto;     /* el botón sí es clickeable */
  white-space: nowrap;
}

/* ——— Altura del slide ——— */
#hero .carousel-item{
  min-height: 62vh;
  background-size: cover;
  background-position: center;
}
@media (min-width: 992px){
  #hero .carousel-item{ min-height: 72vh; }
}
/* Desactiva márgenes manuales heredados */
main, #hero { margin-top: 0 !important; }

/* Empuje global para topbar + header fijos */
:root { --page-offset: 120px; }          /* fallback */
body { padding-top: var(--page-offset); }

/* Si tienes un “hero-card” o carrusel arriba, no necesita margen */
.hero-card { margin-top: 0; }
/* ---- GLightbox en héroe: hacer clic posible ---- */
.hero-card { position: relative; }
.hero-card .carousel-item { position: relative; }

/* La imagen no debe interceptar clicks */
.hero-card .hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* La franja no bloquea interacciones */
.hero-card .mini-caption{
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff;
  pointer-events: none;
}

/* Pero el botón SÍ recibe el clic */
.hero-card .mini-caption .btn,
.hero-card .mini-caption a{
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

/* Controles del carrusel por encima */
.hero-card .carousel-control-prev,
.hero-card .carousel-control-next{ z-index: 4; }
/* ===========================
   RESPONSIVE CELULAR
   =========================== */

/* HOME GRID */
#home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 16px;
}

/* AREAS */
.area {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
}

.num {
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2f8f83;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

  /* Oculta sidebar */
  #side {
    display: none;
  }

  /* Layout vertical */
  #layout {
    display: block;
    padding: 12px;
  }

  /* Hero */
  .hero-icon h2 {
    font-size: 1.3rem;
    text-align: center;
  }

  .hero-icon i {
    font-size: 40px;
  }

  /* Áreas en columna */
  .area {
    flex-direction: column;
    align-items: flex-start;
  }

  .num {
    margin-bottom: 6px;
  }

  /* Botones */
  .btn {
    width: 100%;
    text-align: center;
  }

}
/* ===========================
   HEADER / MENU RESPONSIVE
   =========================== */

.menu-toggle{
  display:none;
  border:0;
  background:#0b5ed7;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:10px;
  font-size:22px;
  line-height:40px;
}

/* Ajusta el header en general (si tienes .header-inner o similar) */
header .container,
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* MOBILE */
@media (max-width: 768px){

  /* muestra botón */
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* el nav se vuelve desplegable */
  #mainNav{
    display:none;           /* cerrado por defecto */
    position:absolute;
    left:12px;
    right:12px;
    top:70px;               /* ajusta si tu header es más alto */
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    padding:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    z-index:9999;
  }

  /* cuando esté abierto */
  #mainNav.open{ display:block; }

  /* links en columna */
  #mainNav a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
  }

  #mainNav a:hover{
    background:rgba(11,94,215,.08);
  }
}
/* =========================
   MENU RESPONSIVE FIX
   ========================= */

.menu-toggle{
  display:none;
  border:0;
  background:#2f6fb3;
  color:#fff;
  width:42px;
  height:42px;
  border-radius:10px;
  font-size:22px;
  line-height:42px;
  align-items:center;
  justify-content:center;
}

/* MOBILE */
@media (max-width: 768px){

  .menu-toggle{
    display:flex;
  }

  #mainNav{
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:85px; /* ajusta si tu header es más alto */
    background:#fff;
    border-radius:12px;
    padding:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    z-index:9999;
  }

  /* ESTA LINEA ES LA CLAVE */
  #mainNav.open{
    display:block;
  }

  #mainNav a{
    display:block;
    padding:10px;
    border-radius:8px;
  }

  #mainNav a:hover{
    background:#f2f2f2;
  }
}
/* ===========================
   HEADER / MENU RESPONSIVE
   =========================== */

.menu-toggle{
  display:none;
  border:0;
  background:#2f6fb3;
  color:#fff;
  width:42px;
  height:42px;
  border-radius:10px;
  font-size:22px;
  line-height:42px;
  align-items:center;
  justify-content:center;
}

/* MOBILE */
@media (max-width: 768px){
  #header .container{ position: relative; }

  .menu-toggle{
    display:flex;
  }

  /* NAV como dropdown */
  #mainNav{
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:85px; /* ajusta si tu header cambia */
    background:#fff;
    border-radius:12px;
    padding:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    z-index:9999;
  }

  /* ESTO HACE QUE ABRA */
  #mainNav.open{
    display:block;
  }

  #mainNav a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
  }

  #mainNav a:hover{
    background:#f2f2f2;
  }
}
/* =========================================================
   MENU / HEADER: FIX ÚNICO (desktop + mobile) - PONER AL FINAL
   ========================================================= */

/* Header layout estable */
#header .container{
  display:flex;
  align-items:center;
  gap:14px;
}

/* El logo nunca debe reventar el header */
#header .logo img{
  height:60px !important;
  width:auto !important;
  max-width:220px;
  object-fit:contain;
  display:block;
}

/* Menú desktop: separación real */
#mainNav{
  display:flex;
  align-items:center;
  gap:18px;               /* <-- aquí se quita lo “pegado” */
  margin-left:auto;       /* empuja el nav a la derecha */
  white-space:nowrap;
}

/* Links */
#mainNav a{
  display:inline-flex;
  align-items:center;
  padding:6px 8px;
  font-weight:500;
  text-decoration:none;
}

/* Botón FB */
#mainNav .appointment-btn{
  margin-left:8px;
  padding:8px 12px;
  border-radius:8px;
}

/* Botón hamburguesa: oculto en desktop */
.menu-toggle{
  display:none;
}

/* ======= MOBILE ======= */
@media (max-width: 768px){

  /* muestra hamburguesa */
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Nav como dropdown */
  #mainNav{
    display:none;               /* cerrado por defecto */
    position:absolute;
    left:12px;
    right:12px;
    top:calc(100% + 10px);
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    padding:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    z-index:9999;

    /* columna */
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  /* coincide con tu JS (nav.classList.toggle("open")) */
  #mainNav.open{
    display:flex;
  }

  #mainNav a{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
  }

  #mainNav a:hover{
    background:#f2f2f2;
  }
}