/* =========================================================
   0) VARIABLES (COLORES + ESCALAS)
   ========================================================= */
:root{
  /* Marca */
  --blue: #2B4C9A;
  --blue-deep: #1F3C88;
  --soft-blue: #EEF3FF;

  /* Acentos */
  --teal: #1C8A84;
  --yellow: #E7C873;
  --pink: #E98AA6;

  /* Neutros */
  --bg: #F7F3EB;
  --surface: #FFFFFF;
  --text: #1F2937;
  --muted: #6B7280;
  --border: #E6E0D6;

  /* Gradiente */
  --blue-dark: #04133d;
  --blue-mid:  #2B6CB0;

  /* Layout */
  --max: 1100px;
  --gutter: 16px;       /* padding lateral base */
  --radius: 16px;
  --shadow: 0 2px 8px rgba(0,0,0,.08);

  /* Header control (desktop) */
  --header-shift-desktop: 20px;
}

/* =========================================================
   1) BASE (mínimo y estable)
   ========================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem var(--gutter);
}

/* Utilidades */
.hidden { display: none !important; }
.muted  { color: var(--muted); }

.grid { display: grid; gap: 1rem; }

/* Esta clase ya la usas en el HTML: grid-md-2 */
.grid-md-2 { grid-template-columns: 1fr; }

@media (min-width: 768px){
  .grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   2) HEADER + NAV (BASE)
   ========================================================= */
.header-main{
  position: sticky;
  top: 0;
  z-index: 50;

  background: linear-gradient(
  180deg,
  var(--blue-dark) 0%,
  var(--blue-dark) 80%,
  var(--pink) 100%
);

  border-bottom: 5px solid rgba(229,231,235,.9);

  display: flex;
  align-items: center;
}

/* Altura del header sin “magia” */
.header-main{
  height: 140px;
}

.header-main .container{
  width: 100%;
}

/* Nav layout */
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* Logo header */
.logo--header{
  width: auto;
  height: 150px; /* base */
  flex-shrink: 0;
}

/* Links */
.nav a{
  font-weight: 600;
  padding: .5rem .75rem;
  border-radius: .5rem;
}

/* Links en header (blancos) */
.header-main .nav nav > a:not(.btn-cita),
.header-main #servicesToggle{
  color: #fff;
}

.header-main .nav nav > a:not(.btn-cita):hover,
.header-main .nav nav > a:not(.btn-cita).active,
.header-main #servicesToggle:hover{
  color: var(--pink);
  text-decoration: underline;
}

/* Desktop nav visible desde 1100px */
.show-md { display: none; }
@media (min-width: 1100px){
  .show-md { display: inline-flex; align-items: center; gap: .5rem; }
}

/* Botón hamburguesa (si existe en tu HTML en otras páginas) */
.menu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(229,231,235,.95);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
}
@media (min-width: 1100px){
  .menu-btn{ display: none; }
}

/* =========================================================
   PANEL MÓVIL DEBAJO DEL HEADER (blanco)
   ========================================================= */

.mobile-panel{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid rgba(229,231,235,.95);
  padding: .75rem 0;
  z-index: 999;
}

/* Contenedor de links dentro del panel */
.mobile-nav-links{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);

  display: grid;
  gap: .45rem;
}

/* Links del panel */
.mobile-nav-links a{
  color: var(--blue);
  font-weight: 700;
  padding: .65rem .75rem;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(31,60,136,.06);
  font-size: 1rem;
  line-height: 1.2;
}

.mobile-nav-links a:hover{
  text-decoration: underline;
}

/* Botón Servicios dentro del panel */
.mobile-drop-btn{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(229,231,235,.95);
  background: rgba(31,60,136,.06);
  color: var(--blue);
  font-weight: 700;
  border-radius: 12px;
  padding: .65rem .75rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.2;
}

/* Submenú Servicios */
.mobile-submenu{
  display: grid;
  gap: .35rem;
  padding-left: .35rem;
}

.mobile-submenu a{
  background: rgba(236,72,153,.08);
}

/* En desktop, nunca se ve el panel */
@media (min-width: 1100px){
  .mobile-panel{ display: none !important; }
}

/* Dropdown */
.dropdown{ position: relative; display: inline-flex; align-items: center; }

.dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;

  background: #fff;
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 14px;
  min-width: 190px;
  padding: .35rem;

  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 999;
}

.header-main .dropdown-menu a{
  display: block;
  padding: .55rem .75rem;
  border-radius: 10px;
  color: var(--blue);
  text-decoration: none;
}

.header-main .dropdown-menu a:hover,
.header-main .dropdown-menu a:focus{
  background: var(--soft-blue);
  outline: none;
}

/* Botón cita */
.btn-cita{
  background: var(--pink);
  color: #fff !important;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-block;
  padding: .6rem 1rem;
  transition: transform .15s ease, background-color .15s ease;
}

.btn-cita:hover{
  background: var(--pink);
  color: #fff !important;
  transform: scale(1.03);
}
/* Botones estándar */
.btn{
  display: inline-block;
  background: var(--blue-dark);
  color: #fff !important;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
  padding: .6rem 1rem;
  transition: transform .15s ease, background-color .15s ease, }

.btn:hover{
  background: var(--pink);
  color: #fff !important;
  transform: scale(1.03);
}

.btn-index{
  display: flex;
  background: var(--pink);
  color: #fff !important;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
  padding: .6rem 1rem;
  transition: transform .15s ease, background-color .15s ease,}

.btn-index:hover{
  background: var(--pink);
  color: #fff !important;
  transform: scale(1.03);
}

/* =========================================================
   3) HERO (BASE: móvil-first)
   ========================================================= */
/* HERO CONTENEDOR GENERAL */
.hero{
  background: var(--bg); /* color crema */
}

/* CONTENEDORES INTERNOS */
.hero-left{
  background: var(--blue-dark);
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 370px;
  max-height: none;
  overflow: hidden;
}

.hero-right{
  background: var(--pink);
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 370px;
  max-height: none;
  overflow: hidden;
}

/* Ajuste visual para que no se peguen */
.hero-left{
  margin-bottom: 1rem;
}

@media (min-width: 768px){
  .hero-left{
    margin-bottom: 0;
  }
}

/* Tu HTML ya tiene grid-md-2 dentro de .hero:
   <div class="container grid grid-md-2 hero-grid"> ... */
.hero-grid{
  align-items: stretch;
  gap: .5rem;
}

/* Columnas */
.hero-left,
.hero-right{
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px){
  .hero-left,
  .hero-right{
    align-items: center;
  }
}

.hero-psicologia{
  background: transparent;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 500px;
  max-height: none;
  overflow: hidden;
}

.hero-logopedia{
  background: transparent;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 500px;
  max-height: none;
  overflow: hidden;
}

.hero-formacion{
  background: transparent;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 500px;
  max-height: none;
  overflow: hidden;
}

.hero-psicomotricidad{
  background: transparent;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 500px;
  max-height: none;
  overflow: hidden;
}

.hero-educativo{
  background: transparent;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 500px;
  max-height: none;
  overflow: hidden;
}

/* Logo-eslogan (flujo normal, NO absolute) */
.logo-eslogan{
  width: min(520px, 92vw);
  border-radius: var(--radius);
  pointer-events: none;
  margin-inline: auto;
}

/* Carrusel */
.hero-visual{
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  flex: 1;
}

.hero-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: opacity;
}

.hero-visual img:first-child{
  opacity: 1;
}

/* =========================================================
   HERO – TICKER (tren de letras)
   ========================================================= */

.hero-ticker{
  margin-top: 1.25rem;
  background: var(--blue-dark);
  border: 2px solid var(--pink);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  padding-block: 1.6rem;
}

/* estrellas */
.hero-ticker::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(10px 10px at 10% 20%, rgba(255,255,255,.9) 40%, transparent 20%),
    radial-gradient(9px 9px at 30% 80%, rgba(255,255,255,.8) 40%, transparent 20%),
    radial-gradient(8px 8px at 70% 30%, rgba(255,255,255,.7) 40%, transparent 20%),
    radial-gradient(7px 7px at 85% 70%, rgba(255,255,255,.6) 40%, transparent 20%),
    radial-gradient(6px 6px at 55% 55%, rgba(255,255,255,.55) 40%, transparent 20%);
  opacity: .40;
}

/* Track animado */
.ticker-track{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  width: max-content;
  will-change: transform;

  /* La distancia la setea JS en px */
  --ticker-distance: 600px;
  animation: tickerMove 18s linear infinite;
}

/* cada mitad idéntica */
.ticker-group{
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding: .35rem 1.6rem;
  white-space: nowrap;
}

.ticker-text{
  color: #fff;
  font-weight: 900;
  letter-spacing: .8px;

  /* MÁS GRANDE */
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  line-height: 1;
}

@keyframes tickerMove{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--ticker-distance)),0,0); }
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
}

/* Animaciones (si tu JS las usa) */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-visual.is-animating img { animation: slideInRight .6s ease; }
.hero-caption.is-animating    { animation: slideInLeft  .6s ease; }

@media (prefers-reduced-motion: reduce){
  .hero-visual.is-animating img,
  .hero-caption.is-animating{
    animation: none;
  }
}

/* =========================================================
   4) TARJETAS / SECCIONES / FOOTER (BASE)
   ========================================================= */
.section{ padding: .50rem 0; }

.card{
  background: #fff;
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* =========================================================
                     CARDS DEL INDEX
   ========================================================= */
.services-grid .service-card{
  background: var(--blue-dark);
  color: #fff;
  border-color: rgba(233,138,166,.8);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.services-grid .service-card-4,
.services-grid .service-card-5{
  background: var(--blue-dark);
  color: #fff;
  border-color: rgba(233,138,166,.8);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  justify-content: center;
}

.services-grid .service-img-1{
  width: 100%;
  height: 200px;
  max-width: none;
  object-fit: contain;
  display: block;
  margin: 0 auto .1rem;
}

.services-grid .service-img-2{
  width: 100%;
  height: 200px;
  max-width: none;
  object-fit: contain;
  display: block;
  margin: 0 auto .1rem;
}

.services-grid .service-img-3{
  width: 100%;
  height: 200px;
  max-width: none;
  object-fit: contain;
  display: block;
  margin: 0 auto .1rem;
  transform: scale(1.2);
}

.services-grid .service-img-4{
  width: 100%;
  height: 200px;
  max-width: none;
  object-fit: contain;
  display: block;
  margin: 0 auto .1rem;
}

.services-grid .service-img-5{
  width: 100%;
  height: 200px;
  max-width: none;
  object-fit: contain;
  display: block;
  margin: 0 auto .1rem;
  transform: scale(1.2);
}

.services-grid .service-img{
  max-width: none;
}

.card-index{
  background: #fff;
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* =========================================================
   ABOUT (Nosotros) – Grid base (móvil)
   ========================================================= */
.about-grid{
  display: grid;
  grid-template-columns: 1fr; /* móvil: apilado */
  gap: 1rem;
}

/* ABOUT – bloques Misión / Visión / Valores */
.info-block{
  background: var(--blue-dark);
  color: #fff;
  border: 2px solid var(--pink);
}

.info-block p,
.info-block li,
.info-block strong{
  color: #fff;
}

/* ABOUT – tamaño de iconos */
.MisionPNG,
.VisionPNG,
.ValoresPNG{
  width: 100%;
  height: auto;
  transform: scale(3.35);
  margin-top: 1.0rem;
}

/* ABOUT: centra los íconos/imágenes */
.info-block .block-icon{
  display: grid;
  place-items: center;
  margin: 0 auto 1rem; /* centrado + separación abajo */
  width: 96px;         /* ajusta si quieres */
  height: 96px;
}

.info-block .block-icon img{
  display: block;
  max-width: 100%;
  height: auto;
}

.footer{
  color: #fff;
  background: linear-gradient(
  180deg,
  var(--blue-dark) 0%,
  var(--blue-dark) 80%,
  var(--pink) 100%
);
  padding: 2rem 0;
  margin-top: 2rem;
}

.footer a{
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
                  CARDS DEL SERVICIO PSICOLOGIA
   ========================================================= */

.card-psicologia-1{
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-psicologia-2{
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-modalidad{
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 18px;
  grid-column: 2;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.lista-psicologia li::marker {
  color: #62b825;
  font-size: 1.5rem;
}

/* =========================================================
                  CARDS DEL SERVICIO LOGOPEDIA
   ========================================================= */

.card-logopedia-1{
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-logopedia-2{
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-logopedia-3{
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  grid-column: 2;
}

.lista-logopedia li::marker {
  color: #40e0d0;
  font-size: 1.5rem;
}

/* =========================================================
                  CARDS DEL SERVICIO FORMACION
   ========================================================= */

.card-formacion-1{
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-formacion-2{
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.lista-formacion li::marker {
  color: #8400e0;
  font-size: 1.5rem;
}

/* =========================================================
            CARDS DEL SERVICIO PSICOMOTRICIDAD
   ========================================================= */

.card-psicomotricidad-1{
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-psicomotricidad-2{
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-psicomotricidad-3{
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.lista-psicomotricidad li::marker {
  color: #FF8000;
  font-size: 1.5rem;
}

/* =========================================================
            CARDS DEL SERVICIO EDUCATIVO
   ========================================================= */

.card-educativo-1{
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 18px;
  padding: 1.25rem;
  gap: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.card-educativo-2{
  background: #fff;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  padding: 1.25rem;
  gap: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.lista-educativo li::marker {
  color: #0000FF;
  font-size: 1.5rem;
}

/* =========================================================
   5) REGLAS PARA MÓVIL (PORTRAIT / LANDSCAPE)
   ========================================================= */

/* MÓVIL PORTRAIT (default): ya está cubierto por la base */

/* MÓVIL LANDSCAPE: ajusta alturas y tamaños para no “comerse” la pantalla */
/* MÓVIL VERTICAL (≤767): cards en 1 columna */
@media (max-width: 767px) and (orientation: portrait){
  .grid-3{
    grid-template-columns: 1fr;
  }
    .card-modalidad,
    .card-logopedia-3{
     grid-column: auto;
  }
}



@media (max-width: 767px) and (orientation: landscape){
  .header-main{ height: 120px; }
  .logo--header{ height: 120px; }

  .hero{ padding: 1rem 0 1.5rem; }
  .hero-visual{ aspect-ratio: 16 / 7; }
  .hero-caption{ font-size: clamp(1.15rem, 3.2vw, 1.9rem); }

  .services-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   6) REGLAS PARA TABLET (PORTRAIT / LANDSCAPE)
   ========================================================= */

/* TABLET PORTRAIT (768–1023): dos columnas, pero equilibradas */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait){
  .header-main{ height: 160px; }
  .logo--header{ height: 150px; }

  .hero-left{ justify-content: center; }  /* logo hacia la derecha */
  .hero-right{ justify-content: center; } /* carrusel hacia la izquierda */
  .logo-eslogan{ width: min(520px, 44vw); }
  .hero-visual{ width: min(820px, 50vw); }
}

/* TABLET LANDSCAPE (768–1023): más ancho, el carrusel crece */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape){
  .header-main{ height: 160px; }
  .logo--header{ height: 150px; }

  .hero-left{ justify-content: center; }
  .hero-right{ justify-content: center; }
  .logo-eslogan{ width: min(560px, 40vw); }
  .hero-visual{ width: min(900px, 56vw); }
   
  .grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;}

  .services-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .services-grid > div{
    grid-column: span 2;
  }
  .services-grid .service-card-4{ grid-column: 2 / span 2; }
  .services-grid .service-card-5{ grid-column: 4 / span 2; }
}

   /* ABOUT (Nosotros): tablet y superior */
@media (min-width: 768px){
  .about-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* misión | visión */
    align-items: stretch;
  }

  /* Valores ocupa toda la fila y queda centrado */
  .about-grid .card--wide{
    grid-column: 1 / -1;      /* ocupa las 2 columnas */
    justify-self: center;     /* centra el cuadro */
    width: min(760px, 100%);  /* ajusta el ancho del cuadro */
  }
}

/* =========================================================
   7) REGLAS PARA PC / LAPTOP (DESKTOP)
   ========================================================= */

/* DESKTOP BASE (>= 1024) */
@media (min-width: 1024px){
  .header-main{ height: 180px; }
  .logo--header{ height: 170px; }

  /* Hero en 2 columnas bien marcadas */
  .hero{ padding: 2rem 0 2.5rem; }
  .hero-left{ justify-content: center; }
  .hero-right{ justify-content: center; }

  .logo-eslogan{ width: clamp(420px, 34vw, 600px); }
  .hero-visual{ width: clamp(560px, 46vw, 980px); }

  .grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;}
}

/* DESKTOP NAV REAL (>= 1100) + SHIFT CONTROL */
@media (min-width: 1100px){
  /* 6 columnas virtuales para poder centrar la última fila */
  .services-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Todas las cards ocupan 2 columnas (equivale a 3 cards por fila) */
  .services-grid > div{
    grid-column: span 2;
  }

  /* Última fila centrada: 4 y 5 quedan debajo del “hueco” central */
  .services-grid .service-card-4{
    grid-column: 2 / span 2; /* columnas 2-3 */
  }
  .services-grid .service-card-5{
    grid-column: 4 / span 2; /* columnas 4-5 */
  }
}

/* =========================================================
   ESTRELLAS – EFECTO CONSTELACIÓN
   ========================================================= */

.header-main{
  position: relative;
  overflow: visible;
}

.footer{
  position: relative;
  overflow: hidden;
}

.header-main > *,
.footer > * {
  position: relative;
  z-index: 1;
}

/* 🌌 Capa 1 – Muchas estrellas pequeñas */
.header-main::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(6px 6px at 10% 20%, rgba(255,255,255,.9) 40%, transparent 41%),
    radial-gradient(5px 5px at 30% 80%, rgba(255,255,255,.8) 40%, transparent 41%),
    radial-gradient(4px 4px at 50% 40%, rgba(255,255,255,.7) 40%, transparent 41%),
    radial-gradient(3px 3px at 70% 60%, rgba(255,255,255,.85) 40%, transparent 41%),
    radial-gradient(2px 2px at 90% 25%, rgba(255,255,255,.9) 40%, transparent 41%);

  background-size: 120px 120px; /* 🔥 MÁS estrellas */
  opacity: 0.6;
}

/* ✨ Capa 2 – Estrellas medianas */
.header-main::after,
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(2px 2px at 15% 35%, rgba(255,255,255,.8) 40%, transparent 41%),
    radial-gradient(2px 2px at 60% 50%, rgba(255,255,255,.6) 40%, transparent 41%),
    radial-gradient(2px 2px at 85% 15%, rgba(255,255,255,.7) 40%, transparent 41%);

  background-size: 240px 240px;
  opacity: 0.45;
}

/* ✨ Animación suave */
@keyframes starsGlow {
  0%, 100% { opacity: .4; }
  50% { opacity: .75; }
}

.header-main::before,
.footer::before {
  animation: starsGlow 6s ease-in-out infinite;
}
/* =========================================================
   HOTFIX MENÚ MÓVIL (solo <1100px)
   - Panel blanco debajo del header
   - btn-cita siempre rosa en panel móvil
   - Mantener sticky (evitar que estrellas lo rompa)
   ========================================================= */

/* 1) Evita que el bloque de estrellas te rompa el sticky */
.header-main{
  position: sticky;
  top: 0;
}

/* 2) SOLO móvil/tablet: header apilado para que el panel quede debajo */
@media (max-width: 1099px){
  .header-main{
    display: flex;
    flex-direction: column; /* 👈 clave: panel debajo */
    align-items: stretch;
    height: auto;           /* 👈 evita que “corte” el panel */
  }

  /* Barra superior (logo + hamburguesa) mantiene tu alto */
  .header-main .container.nav{
    height: 140px;
    display: flex;
    align-items: center;
  }

  /* Panel móvil: ya NO absolute, para que empuje el contenido */
  .mobile-panel{
    position: static !important;
    width: 100%;
    z-index: auto;
  }

  /* btn-cita siempre rosa dentro del panel */
  .mobile-nav-links a.btn-cita{
    background: var(--pink) !important;
    color: #fff !important;
    text-decoration: none !important;
  }
  .mobile-nav-links a.btn-cita:hover{
    background: var(--pink) !important;
  }
}
/* =========================================================
   MÓVIL HORIZONTAL: menú en grilla 3x3 + cita abajo
   ========================================================= */
@media (max-width: 1099px) and (orientation: landscape){
  /* los botones se ordenan en 3 columnas */
  .mobile-nav-links{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }

  /* que los items (a y button) ocupen toda su celda */
  .mobile-nav-links a,
  .mobile-nav-links button{
    width: 100%;
  }

  /* El botón "Servicios" debe comportarse como “tile” */
  .mobile-drop-btn{
    margin: 0; /* por si tuvieras márgenes viejos */
  }

  /* El submenú debe ocupar toda la fila y verse debajo del botón */
  .mobile-submenu{
    grid-column: 1 / -1;
    padding-left: 0;
    margin-top: .2rem;

    /* opcional: que los servicios también vayan en 3 columnas */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
  }

  /* "Agende su cita" siempre al final ocupando toda la fila */
  .mobile-nav-links a.btn-cita{
    grid-column: 1 / -1;
  }
 }
}