/* ==========================================================================
   Lapsi.mx — Estilos de la capa SEO (migas, compartir, WhatsApp flotante)
   Se carga después de saas.css / freeware/styles.css en todas las páginas
   públicas. Usa las variables de la hoja principal con respaldo por si la
   página usa el tema teal de Freeware.
   ========================================================================== */

/* ===== Migajas de navegación ===== */
.migas {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted, #b9c0cf);
  list-style: none;
}
.migas li { display: inline-flex; align-items: center; gap: 0.35rem; }
.migas a { color: var(--text-muted, #b9c0cf); text-decoration: underline; text-underline-offset: 2px; }
.migas a:hover { color: var(--text-main, #fff); }
.migas__sep { opacity: 0.5; }
.migas [aria-current="page"] { color: var(--text-main, #fff); }

/* ===== Barra de compartir ===== */
.compartir {
  border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.08));
  padding: 1.6rem 0;
}
.compartir__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}
.compartir__titulo {
  font-family: var(--font-title, inherit);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main, #fff);
  margin: 0;
}
.compartir__botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.compartir__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: var(--bg-dark-card, rgba(255, 255, 255, 0.04));
  color: var(--text-muted, #b9c0cf);
  font-family: var(--font-body, inherit);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.compartir__btn:hover,
.compartir__btn:focus-visible {
  color: var(--text-main, #fff);
  border-color: var(--border-glow, rgba(139, 92, 246, 0.5));
  transform: translateY(-2px);
}
.compartir__btn.is-hecho {
  color: #0b3d2c;
  background: #34d399;
  border-color: #34d399;
}

/* ===== Botón flotante de WhatsApp ===== */
.wa-flotante {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 95;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #07301c;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.34);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s;
}
.wa-flotante:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 30px rgba(37, 211, 102, 0.44); }
.wa-flotante:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ===== Utilidades para páginas de aterrizaje ===== */
.prosa { max-width: 860px; margin: 0 auto; }
.prosa p { color: var(--text-muted, #b9c0cf); margin-bottom: 1rem; }
.prosa h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 2.2rem 0 0.8rem; }
.prosa h3 { font-size: 1.12rem; margin: 1.6rem 0 0.5rem; }
.prosa ul { list-style: none; margin: 0 0 1.2rem; }
.prosa ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--text-muted, #b9c0cf);
  font-size: 0.95rem;
}
.prosa ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--secondary-light, #22d3ee);
  font-weight: 700;
}
.prosa strong { color: var(--text-main, #fff); }
.prosa a { color: var(--secondary-light, #22d3ee); text-decoration: underline; text-underline-offset: 2px; }

.tabla-comparativa { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 1.2rem 0 1.6rem; }
.tabla-comparativa th,
.tabla-comparativa td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
  text-align: left;
  vertical-align: top;
  color: var(--text-muted, #b9c0cf);
}
.tabla-comparativa th { color: var(--text-main, #fff); font-family: var(--font-title, inherit); font-size: 0.9rem; }
.tabla-comparativa tr td:first-child { color: var(--text-main, #fff); font-weight: 600; }

.cierre-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1.4rem;
}

/* ===== Figura del proceso clínico ===== */
.figura-proceso { margin: 2.4rem auto 0; max-width: 1080px; text-align: center; }
.figura-proceso img { width: 100%; height: auto; }
.figura-proceso figcaption {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--text-muted, #b9c0cf);
}

/* ===== Corrección de rejillas en móvil (afecta también a la portada) ===== */
@media (max-width: 860px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ===== Ajustes móviles ===== */
@media (max-width: 640px) {
  .compartir__inner { justify-content: center; text-align: center; }
  .compartir__botones { justify-content: center; }
  .wa-flotante { width: 44px; height: 44px; left: 0.9rem; bottom: 0.9rem; }
  .tabla-comparativa { font-size: 0.84rem; }
  .tabla-comparativa th, .tabla-comparativa td { padding: 0.55rem 0.5rem; }
}

@media print {
  .compartir, .wa-flotante { display: none !important; }
}