/* ============================================================================
   MEJORAS VISUALES — Avera Mendoza
   Capa de refinamiento sobre el build de Astro. El código fuente no está en
   el servidor (solo el build compilado), así que NADA del build se toca:
   esta hoja se carga después de _astro/index.*.css y gana por orden.
   Para revertir todo: sacar el <link> de mejoras.css y el <script> de
   mejoras.js del index.html.
   Los selectores del build usan [data-astro-cid-*] (especificidad 0,2,0):
   por eso casi todo acá va prefijado con la clase de su sección, para
   empatar esa especificidad y ganar por orden de carga.
   La paleta sale de las variables del propio build (--color-primary,
   --color-secondary, --color-accent-*).
   ========================================================================== */

/* ---------- 1. Navegación ---------- */
/* Desplazamiento suave a las anclas; el destino no queda bajo el header
   pegajoso. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  /* Sin anclaje de scroll: cuando el header se pliega, el ajuste automático
     de scrollY que hace el navegador realimentaba el bucle de vibración. */
  overflow-anchor: none;
}

/* Header pegajoso: en una página larga de una sola hoja, el menú siempre a
   mano. Al hacer scroll la barra de contacto de arriba se pliega (el teléfono
   ya está en el pie y en el flotante de WhatsApp) y aparece una sombra. */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 300ms ease;
}
header.mj-scrolled {
  box-shadow: 0 6px 24px rgb(15 40 60 / 0.09);
}
header > div:first-child {
  max-height: 56px;
  overflow: hidden;
  transition: max-height 350ms ease, opacity 250ms ease;
}
header.mj-scrolled > div:first-child {
  max-height: 0;
  opacity: 0;
}

/* El header no es una barra: es una isla flotante — una tarjeta redondeada
   con sombra, metida en una banda blanca con relleno alrededor. Arriba de
   todo se ve bien, pero al hacerla pegajosa ese marco blanco viaja con el
   scroll y ocupa muchísimo alto.
   Al scrollear la isla se aplana: pierde el radio, la sombra y el aire de
   los costados, y queda una franja blanca fina. La separación del contenido
   la da la sombra del propio header, no el hueco.
   Se apunta por estructura (nav > contenedor > isla) y no por las clases de
   utilidad de Tailwind, que cambian de nombre en cada compilación. */
header > div:nth-child(2) {
  transition: padding 320ms ease;
}
header > div:nth-child(2) > div > div {
  transition:
    border-radius 320ms ease,
    box-shadow 320ms ease,
    padding 320ms ease;
}
header.mj-scrolled > div:nth-child(2) {
  padding-bottom: 0;
}
header.mj-scrolled > div:nth-child(2) > div > div {
  border-radius: 0;
  box-shadow: none;
  padding-block: 0.6rem;
  /* sin relleno lateral propio, el logo se alinea con el contenido de la
     página en vez de quedar 40px más adentro */
  padding-inline: 0;
}

/* ---------- 2. Reveals al hacer scroll ---------- */
/* El build ya trae .fade-up + IntersectionObserver, pero uniforme: 20px,
   medio segundo, todos a la vez. Se alarga el recorrido y se le da una curva
   que frena al llegar. El escalonado por posición lo pone mejoras.js con
   transition-delay en línea. */
.fade-up {
  transform: translateY(26px);
  transition:
    opacity 600ms ease,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 3. Entrada del hero ---------- */
/* El build no anima el hero: la página aparece seca. mejoras.js agrega
   .mj-hero al <section id="inicio"> y esto coreografía la carga:
   título → texto → botones → imagen → métricas, en cascada. */
.mj-hero h1 {
  animation: mjSube 700ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
.mj-hero h1 + p {
  animation: mjSube 700ms cubic-bezier(0.16, 1, 0.3, 1) 170ms both;
}
.mj-hero h1 ~ div {
  animation: mjSube 700ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both;
}
/* El hero pasó a <picture> para servir WebP. <picture> es inline y se
   interpondría entre el contenedor flex y el <img>, que lleva w-full: con
   display:contents desaparece del layout y el img se comporta igual que antes
   de envolverlo. */
.mj-hero picture {
  display: contents;
}

/* La imagen entra asentándose y después flota: un vaivén de 9px cada 7s.
   Las dos animaciones conviven porque la flotación arranca (1.6s) cuando la
   entrada ya terminó. */
.mj-hero img {
  animation:
    mjImagen 850ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both,
    mjFlota 7s ease-in-out 1.6s infinite alternate;
}
.mj-hero .grid > div:nth-child(1) { animation: mjSube 600ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both; }
.mj-hero .grid > div:nth-child(2) { animation: mjSube 600ms cubic-bezier(0.16, 1, 0.3, 1) 570ms both; }
.mj-hero .grid > div:nth-child(3) { animation: mjSube 600ms cubic-bezier(0.16, 1, 0.3, 1) 660ms both; }
.mj-hero .grid > div:nth-child(4) { animation: mjSube 600ms cubic-bezier(0.16, 1, 0.3, 1) 750ms both; }

@keyframes mjSube {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mjImagen {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes mjFlota {
  to { transform: translateY(-9px); }
}

/* ---------- 4. Botones ---------- */
/* El build los deja sin altura fija, sin nowrap y solo con transición de
   color. En el hero eso partía "SACAR TURNO" y "VER ESPECIALIDADES" en dos
   líneas, con los tres botones de alto distinto: el defecto más visible de
   la página.

   Lo que se corrige:
   - nowrap: la etiqueta nunca se parte. Son dos o tres palabras en
     mayúsculas, partirlas no ahorra espacio, solo ensucia.
   - inline-flex + place-items: el texto queda centrado óptica y
     verticalmente en vez de depender del padding.
   - min-width y misma altura: el primario y el secundario miden igual, así
     la fila se lee como un par y no como dos piezas sueltas.
   - el secundario nace con borde de 2px y el primario no tiene borde: eso
     los desalineaba 2px en altura. Se empareja con un borde transparente.
   - elevación al pasar y hundimiento al presionar. */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 11.5rem;
  padding: 0.875rem 2rem;
  border: 2px solid transparent;
  white-space: nowrap;
  line-height: 1;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms ease;
}
.btn-primary {
  box-shadow: 0 6px 16px rgb(54 164 217 / 0.26);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgb(54 164 217 / 0.36);
}
/* El secundario arrancaba muy liviano al lado del primario sólido: un fondo
   blanco propio le da cuerpo sin quitarle jerarquía. */
.btn-secondary {
  background-color: #fff;
  border-color: var(--color-primary, #36a4d9);
  box-shadow: 0 2px 8px rgb(15 40 60 / 0.06);
}
/* OJO CON @layer: los botones del build viven en @layer components, y esta
   hoja va SIN layer — lo sin layer le gana a lo con layer aunque tenga menos
   especificidad. Mi fondo blanco de arriba pisaba el relleno azul del hover
   del build, pero el color:#fff del build seguía vivo: texto blanco sobre
   blanco. Por eso el hover se redeclara COMPLETO acá afuera: cualquier
   propiedad que el build cambie en un estado hay que volver a cambiarla en
   esta hoja, o queda a mitad de camino. */
.btn-secondary:hover {
  background-color: var(--color-primary, #36a4d9);
  border-color: var(--color-primary, #36a4d9);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgb(54 164 217 / 0.3);
}
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-primary, #36a4d9);
  outline-offset: 3px;
}
/* En pantallas chicas los botones se apilan: que ocupen el ancho completo,
   que es lo que se espera de un CTA en celular. */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- 5. Tarjetas de centros (blobs de color) ---------- */
/* Ya tenían hover de escala; se cambia por levantar + crecer apenas, con una
   curva con más carácter, y el cursor deja de ser el de "no interactivo". */
.centros-section .blob-card {
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 380ms ease;
}
.centros-section .blob-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 60px rgb(0 0 0 / 0.22);
}

/* ---------- 6. Diferenciales ---------- */
/* No tenían ninguna respuesta al mouse. El ícono es lo que reacciona: el
   texto quieto, la ilustración viva. */
.dif-section .dif-card {
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dif-section .dif-card:hover {
  transform: translateY(-5px);
}
.dif-section .dif-card svg,
.dif-section .dif-icon {
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dif-section .dif-card:hover svg,
.dif-section .dif-card:hover .dif-icon {
  transform: scale(1.15) rotate(-5deg);
}

/* ---------- 7. Especialidades ---------- */
/* Son filas de lista: levantar sería raro. Al pasar: corrimiento lateral
   sutil, filete del color primario y el ícono que asoma. */
.esp-section .esp-item {
  transition:
    background-color 250ms ease,
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms ease;
}
.esp-section .esp-item:hover {
  background-color: rgb(54 164 217 / 0.05);
  box-shadow: inset 3px 0 0 var(--color-primary, #36a4d9);
  transform: translateX(6px);
}
.esp-section .esp-icon {
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.esp-section .esp-item:hover .esp-icon {
  transform: scale(1.12) rotate(-5deg);
}

/* ---------- 8. Formulario ---------- */
/* El foco del build es un anillo blanco casi invisible sobre la tarjeta.
   Pasa a un anillo del color primario, visible también con teclado. */
.cto-section .cto-input:focus {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4.5px var(--color-primary, #36a4d9);
}

/* ---------- 9. Pie ---------- */
/* Subrayado que se despliega de izquierda a derecha. */
.ftr .ftr-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 300ms ease;
}
.ftr .ftr-link:hover {
  background-size: 100% 1px;
}
.ftr .ftr-social-link {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ftr .ftr-social-link:hover {
  transform: translateY(-3px);
}

/* ---------- 10. Sin animaciones ---------- */
/* El build no contempla prefers-reduced-motion. Acá se apaga todo lo de esta
   capa y también su fade-up (mejoras.js además marca todo como visible). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { transition: none; transform: none; opacity: 1; }
  .mj-hero h1,
  .mj-hero h1 + p,
  .mj-hero h1 ~ div,
  .mj-hero img,
  .mj-hero .grid > div {
    animation: none;
  }
  .btn-primary, .btn-secondary,
  .centros-section .blob-card,
  .dif-section .dif-card, .dif-section .dif-card svg, .dif-section .dif-icon,
  .esp-section .esp-item, .esp-section .esp-icon,
  .ftr .ftr-link, .ftr .ftr-social-link,
  header, header > div:first-child {
    transition: none;
  }
}

/* ---------- 11. Catálogo de centros en el botón flotante ---------- */
/* El flotante abre esta lista en vez de ir a un único número. El panel lo
   crea mejoras.js y se ancla sobre el botón (que está fixed abajo a la
   derecha, z-index 9999: este va un punto abajo para quedar detrás de él). */
.mj-wa-panel {
  position: fixed;
  right: 1.75rem;
  bottom: calc(1.75rem + 56px + 14px);
  z-index: 9998;
  width: min(330px, calc(100vw - 3.5rem));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(10 35 50 / 0.22), 0 2px 8px rgb(10 35 50 / 0.10);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom right;
  transition:
    opacity 200ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mj-wa-panel.mj-visible {
  opacity: 1;
  transform: none;
}

.mj-wa-titulo {
  margin: 0 0 0.6rem;
  padding: 0 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-dark, #12384d);
}

.mj-wa-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.mj-wa-lista a {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: 11px;
  text-decoration: none;
  transition: background-color 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mj-wa-lista a:hover,
.mj-wa-lista a:focus-visible {
  background-color: rgb(37 211 102 / 0.10);
  transform: translateX(3px);
  outline: none;
}
.mj-wa-lista a:focus-visible {
  box-shadow: inset 0 0 0 2px #25d366;
}
/* El nombre del centro y su dirección, uno debajo del otro. */
.mj-wa-nombre {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-dark, #12384d);
  line-height: 1.3;
}
.mj-wa-dir {
  display: block;
  margin-top: 1px;
  font-size: 0.76rem;
  color: #6b7280;
}

/* Con el panel abierto el botón gira a una "X" y se le corta el pulso, que
   ahí ya no invita a nada. */
.wa-btn.mj-wa-abierto .wa-icon { transform: rotate(90deg); opacity: 0; }
.wa-btn.mj-wa-abierto .wa-pulse { animation: none; opacity: 0; }
.wa-btn .wa-icon { transition: transform 220ms ease, opacity 180ms ease; }
.wa-btn.mj-wa-abierto::before,
.wa-btn.mj-wa-abierto::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  z-index: 2;
}
.wa-btn.mj-wa-abierto::before { transform: rotate(45deg); }
.wa-btn.mj-wa-abierto::after  { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .mj-wa-panel,
  .mj-wa-lista a,
  .wa-btn .wa-icon { transition: none; }
  .mj-wa-panel { transform: none; }
}

/* ---------- 12. Sección de turnos ---------- */
/* Toma el mismo tratamiento que "Lo que nos hace diferentes": banda en
   --color-secondary recortada arriba y abajo por las mismas olas SVG, con la
   cabecera en blanco. Se replican sus medidas exactas (chip #00000026,
   título 2.5rem/800 con tracking -.02em, bajada #ffffffc7 a 36rem).

   Diferencia deliberada: el listado va sobre un panel blanco, no directo
   sobre el verde. Blanco sobre #569c2a da 3,40:1 — alcanza para un título
   grande, no para texto chico, y acá hay direcciones, etiquetas y notas que
   la gente necesita leer bien. El panel deja la cabecera sobre el verde (que
   es texto grande y pasa) y baja el contenido a fondo blanco, donde todo
   llega a AA. De paso, los botones no tienen que repintarse.

   Las olas van con fill blanco en las dos puntas porque esta sección queda
   entre dos secciones blancas: "Nuestros Centros" arriba y "Quiénes Somos"
   abajo. La original usa --color-secondary-hover en la de abajo porque
   desemboca en otro color. */
.mj-turnos-section {
  position: relative;
  background-color: var(--color-secondary, #569c2a);
  /* padding 0: cualquier relleno vertical asoma como una franja verde por
     debajo de la ola de abajo, que es el borde real de la sección. */
  padding: 0;
}
.mj-turnos-ola-top,
.mj-turnos-ola-bottom {
  width: 100%;
  line-height: 0;
  display: block;
  overflow: hidden;
}
.mj-turnos-ola-top svg,
.mj-turnos-ola-bottom svg { width: 100%; height: 80px; display: block; }
.mj-turnos-ola-top { margin-bottom: 1rem; }
/* La ola de abajo sube 1px sobre el borde de la sección. Con anchos que no
   dan un entero (zoom, pantallas HiDPI), el alto del SVG se redondea y deja
   una raya verde de menos de un píxel entre la ola y el final de la sección:
   este solape la tapa sin que se note en la curva. */
.mj-turnos-ola-bottom {
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.mj-turnos-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4.5rem;
}
.mj-turnos-header {
  text-align: center;
  margin-bottom: 3rem;
}
.mj-turnos-eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  background-color: #00000026;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
}
.mj-turnos-title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.mj-turnos-subtitle {
  max-width: 36rem;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #ffffffc7;
  line-height: 1.75;
}

/* Panel blanco: acá vive todo el texto chico. */
.mj-turnos-panel {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.5rem 2rem 1.75rem;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 20px 50px rgb(20 50 10 / 0.16);
}

.mj-turnos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mj-turno-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.875rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.mj-turno-item:last-child { border-bottom: none; }

/* min-width:0 para que el bloque de texto pueda encoger: sin esto el flex no
   deja que los nombres largos hagan wrap y la fila desborda. */
.mj-turno-info { flex: 1 1 18rem; min-width: 0; }
.mj-turno-nombre {
  margin: 0 0 0.3rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark, #1f2937);
  line-height: 1.3;
}
.mj-turno-dir {
  margin: 0 0 0.55rem;
  font-size: 0.875rem;
  color: var(--color-muted, #6b7280);
  line-height: 1.65;
}
.mj-turno-tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  color: var(--color-muted, #6b7280);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
}
.mj-turno-tag--online {
  background-color: color-mix(in srgb, var(--color-primary, #36a4d9) 12%, transparent);
  color: #22708f;
}
.mj-turno-nota {
  margin: 0.55rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
}

/* Botones con los mismos tokens que .btn-primary del build (font-heading,
   mayúsculas, .75rem, tracking .05em, radius-btn), con el alto reducido:
   son cinco filas y el botón de página completa las volvería un muro. */
.mj-turno-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex-shrink: 0;
}
.mj-turno-online,
.mj-turno-wa {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-btn, 9999px);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms ease;
}
.mj-turno-online {
  background-color: var(--color-primary, #36a4d9);
  color: #fff;
  box-shadow: 0 6px 16px rgb(54 164 217 / 0.24);
}
.mj-turno-online:hover {
  background-color: #2b8fc2;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgb(54 164 217 / 0.34);
}
/* WhatsApp en su verde de marca: se lee como otro canal, no como una versión
   menor del botón de reserva. */
.mj-turno-wa {
  background-color: rgb(37 211 102 / 0.12);
  color: #128c40;
}
.mj-turno-wa:hover {
  background-color: rgb(37 211 102 / 0.2);
  transform: translateY(-2px);
}
.mj-turno-online:focus-visible,
.mj-turno-wa:focus-visible {
  outline: 2px solid var(--color-primary, #36a4d9);
  outline-offset: 3px;
}

/* El teléfono va dentro del panel, no sobre el verde, por lo mismo. */
.mj-turnos-pie {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid #f0f0f0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-muted, #6b7280);
}
.mj-turnos-pie a {
  color: var(--color-primary, #36a4d9);
  font-weight: 600;
  text-decoration: none;
}
.mj-turnos-pie a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .mj-turnos-container { padding: 1rem 1.25rem 3rem; }
  .mj-turnos-title { font-size: 1.9rem; }
  .mj-turnos-panel { padding: 0.25rem 1.25rem 1.5rem; border-radius: 16px; }
  .mj-turno-item { padding: 1.5rem 0; }
  .mj-turno-acciones { width: 100%; }
  .mj-turno-online,
  .mj-turno-wa { flex: 1; text-align: center; }
  .mj-turnos-ola-top svg,
  .mj-turnos-ola-bottom svg { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .mj-turno-online,
  .mj-turno-wa { transition: none; }
}

/* ---------- 13. Invitación al Club Avera (abajo a la izquierda) ---------- */
/* Va en la esquina opuesta al botón de WhatsApp para que nunca compitan.
   Dos estados: burbuja replegada (solo el logo) y tarjeta abierta. Los dos
   viven en el mismo contenedor y se intercambian con opacidad + escala, con
   transform-origin abajo a la izquierda para que crezca DESDE la burbuja y
   no aparezca de la nada.
   El fondo es #faf7f2, el mismo crema de la sección del Club, para que se lea
   como la misma pieza. */
.mj-club {
  position: fixed;
  left: 1.75rem;
  bottom: 1.75rem;
  z-index: 9997;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 380ms ease, transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1), visibility 380ms;
}
.mj-club.mj-club-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* --- Burbuja replegada --- */
.mj-club-burbuja {
  /* relative para que el anillo del latido (::after, inset:0) se ancle a la
     burbuja y no al contenedor fijo, que la envuelve entera. */
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0.55rem;
  border: none;
  border-radius: 50%;
  background: #faf7f2;
  box-shadow: 0 6px 20px rgb(60 40 15 / 0.22);
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease;
}
.mj-club-burbuja img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.mj-club-burbuja:hover {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 26px rgb(60 40 15 / 0.3);
}
.mj-club-burbuja:focus-visible {
  outline: 2px solid var(--color-accent-orange, #ed7f2c);
  outline-offset: 3px;
}
/* Anillo que late: la burbuja tiene que pedir el clic sin gritar. */
.mj-club-burbuja::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent-orange, #ed7f2c);
  opacity: 0.55;
  z-index: -1;
  animation: mjClubLatido 2.8s ease-out infinite;
}
@keyframes mjClubLatido {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* --- Tarjeta abierta --- */
.mj-club-tarjeta {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 260px;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: 18px;
  background: #faf7f2;
  box-shadow: 0 20px 50px rgb(60 40 15 / 0.26);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6) translateY(8px);
  transform-origin: left bottom;
  transition:
    opacity 220ms ease,
    transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1),
    visibility 220ms;
}
.mj-club.mj-club-abierto .mj-club-tarjeta {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Con la tarjeta abierta la burbuja se esconde detrás: la tarjeta nace de ella. */
.mj-club.mj-club-abierto .mj-club-burbuja {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.mj-club.mj-club-abierto .mj-club-burbuja::after { animation: none; }

/* Composición centrada: el logo va al medio y el texto lo acompaña. Los dos
   botones ya estaban centrados, así que dejar el título y la bajada a la
   izquierda con el logo centrado se leería como un desalineo, no como una
   decisión. */
.mj-club-tarjeta { text-align: center; }
.mj-club-logo {
  display: block;
  width: 128px;
  height: auto;
  margin: 0 auto 0.7rem;
}
.mj-club-titulo {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-dark, #1f2937);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.mj-club-texto {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
  line-height: 1.55;
}
.mj-club-cta {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-btn, 9999px);
  background-color: var(--color-accent-orange, #ed7f2c);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgb(237 127 44 / 0.32);
  transition: background-color 200ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}
.mj-club-cta:hover {
  background-color: #d86f22;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgb(237 127 44 / 0.4);
}
.mj-club-mas {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted, #6b7280);
  text-align: center;
  text-decoration: none;
}
.mj-club-mas:hover { color: var(--color-dark, #1f2937); text-decoration: underline; }

.mj-club-cerrar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.06);
  color: #6b7280;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.mj-club-cerrar svg { width: 14px; height: 14px; }
.mj-club-cerrar:hover { background: rgb(0 0 0 / 0.12); color: #1f2937; }
.mj-club-cerrar:focus-visible {
  outline: 2px solid var(--color-accent-orange, #ed7f2c);
  outline-offset: 2px;
}

/* En celular la tarjeta se ensancha al ancho útil y la burbuja achica, para
   no chocar con el botón de WhatsApp de la esquina opuesta. */
@media (max-width: 480px) {
  .mj-club { left: 1rem; bottom: 1rem; }
  .mj-club-burbuja { width: 52px; height: 52px; }
  .mj-club-tarjeta { width: calc(100vw - 2rem); max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .mj-club,
  .mj-club-tarjeta,
  .mj-club-burbuja,
  .mj-club-cta { transition: none; }
  .mj-club-burbuja::after { animation: none; opacity: 0; }
  .mj-club.mj-club-visible { transform: none; }
  .mj-club.mj-club-abierto .mj-club-tarjeta { transform: none; }
}

/* ---------- 14. Datos de contacto ---------- */
/* Teléfono y correo de la barra superior: eran texto plano. Ahora son
   enlaces (WhatsApp y mailto), así que necesitan verse como tales sin
   romper el tono discreto de esa barra. */
.mj-top-link {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}
.mj-top-link:hover {
  color: var(--color-primary, #36a4d9);
  text-decoration: underline;
}

/* Horario de atención de cada centro, debajo de la dirección. En un tono más
   bajo que el nombre: es un dato de apoyo, no el título de la fila. */
.mj-turno-horario {
  margin: -0.3rem 0 0.55rem;
  font-size: 0.8125rem;
  color: var(--color-muted, #6b7280);
  line-height: 1.5;
}

/* ---------- 15. Nenes que flanquean la sección de turnos ---------- */
/* Cuatro chicos recortados (PNG transparente que mandó el cliente, partido
   por cuadrante) asomando desde las esquinas de la banda verde, detrás del
   panel blanco — como en su maqueta: los de arriba arriba, los de abajo
   abajo. Cada lado es UN pseudo-elemento con DOS capas de fondo, así no se
   agrega nada al DOM. WebP con respaldo PNG vía image-set.
   Decorado puro: sin pointer-events, invisible para lectores de pantalla. */
.mj-turnos-section { position: relative; }
.mj-turnos-section::before,
.mj-turnos-section::after {
  content: "";
  position: absolute;
  top: 96px;
  /* bottom casi 0 a propósito: las fotos de los chicos de abajo terminan en
     un corte recto, y con la caja cortando arriba de la ola ese borde queda
     flotando sobre el verde. Extendiendo la caja hasta el final de la
     sección, el corte entra en la zona blanca de la ola de abajo — que tiene
     z-index 1 contra 0 de los chicos — y la ola se lo traga. El vaivén sube
     8px como mucho y la franja blanca más finita mide ~35px: no llega a
     asomar nunca. */
  bottom: 4px;
  width: min(26vw, 500px);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  /* Sin drop-shadow a propósito: la sombra sigue la silueta de la foto —
     incluido el corte recto de abajo — y como la caja termina pegada al
     final de la sección, se proyectaba PASANDO la ola, como manchones grises
     sobre el blanco de la sección siguiente. La ola tapa a los chicos
     (z-index 1 contra 0) pero una sombra desborda la caja y no la tapa
     nadie. La maqueta original no llevaba sombra. */
}
.mj-turnos-section::before {
  left: 0;
  background-image: url("ninos/izq-arriba.png?v=1"), url("ninos/izq-abajo.png?v=1");
  background-image:
    image-set(url("ninos/izq-arriba.webp?v=1") type("image/webp"), url("ninos/izq-arriba.png?v=1") type("image/png")),
    image-set(url("ninos/izq-abajo.webp?v=1") type("image/webp"), url("ninos/izq-abajo.png?v=1") type("image/png"));
  background-position: left top, left bottom;
  background-size: 94% auto, 100% auto;
}
.mj-turnos-section::after {
  right: 0;
  background-image: url("ninos/der-arriba.png?v=1"), url("ninos/der-abajo.png?v=1");
  background-image:
    image-set(url("ninos/der-arriba.webp?v=1") type("image/webp"), url("ninos/der-arriba.png?v=1") type("image/png")),
    image-set(url("ninos/der-abajo.webp?v=1") type("image/webp"), url("ninos/der-abajo.png?v=1") type("image/png"));
  background-position: right top, right bottom;
  background-size: 98% auto, 96% auto;
}
/* La cabecera y el panel, por encima de las figuras. */
.mj-turnos-container { position: relative; z-index: 1; }

/* Se asoman con un vaivén mínimo, desfasado entre lados para que no respiren
   en espejo. */
@media (prefers-reduced-motion: no-preference) {
  .mj-turnos-section::before { animation: mjNinos 9s ease-in-out infinite alternate; }
  .mj-turnos-section::after  { animation: mjNinos 11s ease-in-out 1.5s infinite alternate; }
}
@keyframes mjNinos {
  to { transform: translateY(-8px); }
}

/* Sin ancho de sobra se meterían abajo del panel: fuera. */
@media (max-width: 1180px) {
  .mj-turnos-section::before,
  .mj-turnos-section::after { display: none; }
}

/* ---------- 16. Barra inferior: la web como app (solo celular) ---------- */
/* El patrón que hace que un sitio se sienta app: navegación fija abajo, al
   alcance del pulgar, con la acción principal (WhatsApp) al centro y en
   relieve. La barra la construye mejoras.js para todos los anchos; acá se
   muestra solo hasta 768px. En celular el flotante de WhatsApp se oculta
   (su función pasa al botón central), el pop del Club sube para no chocar,
   el panel del catálogo se ancla sobre la barra, y el header queda solo con
   la marca: la navegación vive abajo. */
.mj-tabbar { display: none; }

@media (max-width: 768px) {
  .mj-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgb(15 40 60 / 0.08);
    box-shadow: 0 -6px 24px rgb(15 40 60 / 0.08);
  }
  .mj-tab {
    flex: 1;
    margin: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 0;
    color: #6b7280;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, transform 120ms ease;
  }
  .mj-tab svg { width: 22px; height: 22px; }
  .mj-tab:active { transform: scale(0.94); }
  /* La activa lleva una pastilla suave detrás, además del color: el patrón
     de las apps actuales — se ve de un vistazo periférico, sin leer. */
  .mj-tab-activa {
    color: var(--color-primary, #36a4d9);
    background: rgb(54 164 217 / 0.1);
    border-radius: 13px;
  }

  /* WhatsApp al centro, DENTRO de la barra: la versión en relieve (salida
     22px hacia arriba) tapaba contenido y se veía desprolija en teléfonos
     reales. Adentro, centrado y en su círculo verde, sigue siendo el
     elemento más visible de la barra sin flotar sobre nada. */
  .mj-tab-wa {
    flex: 0 0 auto;
    align-self: center;
    width: 46px;
    height: 46px;
    margin: 0 10px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 3px 10px rgb(37 211 102 / 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 140ms ease, box-shadow 140ms ease;
  }
  .mj-tab-wa:active { transform: scale(0.92); }

  /* El resto del sitio le hace lugar a la barra. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* !important obligado: la regla del flotante en el build es un estilo con
     ámbito de Astro (.wa-btn[data-astro-cid-*]) que vive FUERA de @layer —
     ahí la especificidad vuelve a mandar y (0,2,0) le gana a esta clase
     sola. Sin esto quedaban DOS WhatsApp en celular: el flotante y el de la
     barra. */
  .wa-btn { display: none !important; }
  .mj-club { left: 1rem; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mj-wa-panel {
    left: 1rem;
    right: 1rem;
    width: auto;
    bottom: calc(80px + env(safe-area-inset-bottom));
    transform-origin: bottom center;
  }

  /* Header compacto: solo la marca. Sin barra de contacto (todo eso vive en
     Contacto y en el catálogo) y sin hamburguesa (la navegación está abajo). */
  header > div:first-child { display: none; }
  #menu-btn { display: none; }
  html { scroll-padding-top: 84px; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mj-tab,
  .mj-tab-wa { transition: none; }
}

/* ---------- 17. Sección del Club en celular ---------- */
/* Bug del build: .club-blob-wrap mide 620x620 FIJOS, sin media query. En un
   teléfono de 360-400px desborda la pantalla: blob y logo cortados, y de
   paso scroll horizontal en toda la página. El título también es fijo
   (2.75rem = 44px), gigante en móvil.
   Los estilos con ámbito de Astro van fuera de @layer, así que acá manda la
   especificidad clásica: el prefijo .club-section empata (0,2,0) y gana por
   orden de carga. */
@media (max-width: 1023px) {
  .club-section .club-blob-wrap {
    width: min(86vw, 420px);
    height: min(86vw, 420px);
  }
  .club-section .club-heading {
    font-size: clamp(1.7rem, 7.2vw, 2.35rem);
  }
}

/* ---------- 18. Tipografía unificada con Salta y San Juan ---------- */
/* El build enruta TODO por --font-heading y --font-body (ambas Figtree).
   Pisando las dos variables acá —esta hoja va sin @layer y el @theme del
   build adentro de uno, así que esto gana siempre— el sitio entero pasa a
   las familias de las sedes: Baloo 2 en títulos, Nunito Sans en texto.
   El <link> de Google Fonts del index ya pide estas dos en vez de Figtree. */
:root {
  --font-heading: "Baloo 2", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- 19. Móvil: sin zoom forzado de iOS en el formulario ---------- */
/* iOS agranda la página al enfocar campos con fuente <16px; el .cto-input
   del build usa 14.4px. */
@media (max-width: 768px) {
  .cto-section .cto-input { font-size: 16px; }
}

/* ---------- 20. Header móvil: barra de app, no isla ---------- */
/* En el teléfono la isla flotante (tarjeta redondeada con aire alrededor)
   gastaba ~90px de alto con el logo descolgado a la izquierda, y el hero le
   sumaba 80px más de padding. Como app: barra fina y plana con el logo
   centrado y una línea de pelo abajo — el par del tab bar inferior. */
@media (max-width: 768px) {
  header { border-bottom: 1px solid rgb(15 40 60 / 0.07); }
  header > div:nth-child(2) { padding: 0; }
  header > div:nth-child(2) > div > div {
    border-radius: 0;
    box-shadow: none;
    padding: 0.7rem 1rem;
    justify-content: center;
  }
  /* Sin isla que despegar, el hero no necesita 80px de aire. */
  section#inicio { padding-top: 1.75rem; }
  /* Y el título baja de 48px a un tamaño que no ocupa la pantalla entera. */
  section#inicio h1 { font-size: 2.15rem; line-height: 1.12; }
}

/* ---------- 21. Quiénes Somos: la fachada del centro en el anillo ---------- */
/* La foto real del Centro Pediátrico Integral ocupa el disco interior del
   anillo (el círculo celeste del SVG queda debajo, de respaldo mientras
   carga). El texto pasa a una tarjeta de vidrio para leerse sobre la
   fachada. El diámetro calca el del disco del SVG: r=112 sobre viewBox de
   400 → 56%. */
/* Anillo entero más grande (340→460px) y la foto ocupando el 78% del
   viewBox: llega hasta el anillo fino (r=152) y deja a la vista la órbita
   punteada exterior con sus puntos de colores. */
.qs-section .qs-ring-wrap { max-width: 460px; }
.qs-section .qs-foto {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #fff;
  box-shadow: 0 14px 34px rgb(15 40 60 / 0.2);
}
/* El anillo muestra SOLO la fachada: el "Cuidamos lo que más importa" y las
   métricas que el build ponía encima quedan ocultos — tapaban la foto y esa
   información ya vive en la barra de métricas del hero. */
.qs-section .qs-ring-center { display: none; }