/* ============================================================
   Layout: MOSAICO — paneles y tarjetas flotantes (bento)
   Menú en píldora flotante, hero como tarjeta gigante, secciones
   como paneles redondeados alternados y grilla bento en servicios.
   Solo consume variables del tema activo → sirve con los 5 temas.
   ============================================================ */

/* ---------- Nav: isla flotante ---------- */
[data-layout="mosaico"] .nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw, 1200px), calc(100% - 24px));
  border-radius: 999px; border: 1px solid var(--border, rgba(128,128,128,.15));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: var(--shadow-md, 0 12px 30px rgba(0,0,0,.14));
}
[data-layout="mosaico"] .nav.scrolled { background: color-mix(in srgb, var(--bg) 96%, transparent); }
[data-layout="mosaico"] .nav-in { height: 60px; }
/* los anclas no deben quedar debajo de la isla */
[data-layout="mosaico"] [id] { scroll-margin-top: 96px; }

/* ---------- Hero: tarjeta gigante redondeada ---------- */
[data-layout="mosaico"] .hero {
  margin: 90px clamp(12px, 2vw, 24px) 0;
  border-radius: 32px; min-height: 86vh;
}

/* ---------- Secciones: paneles redondeados alternados ---------- */
[data-layout="mosaico"] .sec { margin-inline: clamp(12px, 2vw, 24px); border-radius: 32px; }
[data-layout="mosaico"] [data-sec]:nth-of-type(even) .sec { background: var(--surface); }

/* ---------- Beneficios: fichas ---------- */
[data-layout="mosaico"] .pillar {
  background: var(--bg); border: 1px solid var(--border, rgba(128,128,128,.12));
  border-radius: 22px; padding: 24px;
}

/* ---------- Servicios: grilla bento (ancha/angosta alternadas) ---------- */
@media (min-width: 900px) {
  [data-layout="mosaico"] .card-grid { grid-template-columns: repeat(6, 1fr); }
  [data-layout="mosaico"] .card.svc { grid-column: span 2; }
  [data-layout="mosaico"] .card.svc:nth-child(4n+1),
  [data-layout="mosaico"] .card.svc:nth-child(4n) { grid-column: span 4; }
}
[data-layout="mosaico"] .card { border-radius: 26px; }

/* ---------- Horario / precios / citas: todo más redondeado ---------- */
[data-layout="mosaico"] .sched-day { border-radius: 18px; }
[data-layout="mosaico"] .price { border-radius: 26px; background: var(--bg); }
[data-layout="mosaico"] .quote { border-radius: 22px; background: var(--bg); }
[data-layout="mosaico"] .media { border-radius: 20px; }
[data-layout="mosaico"] .plans-banner { background: var(--bg); }

/* ---------- Cierre y footer: también paneles ---------- */
[data-layout="mosaico"] .cta-band { margin-inline: clamp(12px, 2vw, 24px); border-radius: 32px; }
[data-layout="mosaico"] .footer {
  margin: 24px clamp(12px, 2vw, 24px); border-radius: 32px;
  background: var(--surface);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* el menú desplegable cuelga de la isla: esquinas acordes */
  [data-layout="mosaico"] .nav-links { top: 62px; border-radius: 20px; overflow: hidden; }
}