/* ============================================================
   mobile.css — Mejoras de UX/SEO móvil para Funeravet
   Sin cambios de diseño visual; solo mejoras de usabilidad,
   accesibilidad y rendimiento.
   ============================================================ */

/* ─────────────────────────────────────────────
   1. Touch: eliminar el delay de 300ms en iOS
   ───────────────────────────────────────────── */
a, button, [role="button"],
.menu-servicios a,
.menu-principal a,
.boton-verde,
.boton-cafe,
.navbar-toggler {
  touch-action: manipulation;
}

/* ─────────────────────────────────────────────
   2. Mínimo 44px de área táctil (WCAG 2.5.5)
   ───────────────────────────────────────────── */
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
}
.menu-servicios a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-principal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-link {
  min-width: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   3. Imágenes: prevenir layout shift
   ───────────────────────────────────────────── */
img {
  height: auto;
}

/* ─────────────────────────────────────────────
   4. PUNTOS DEL CAROUSEL en móvil
      El problema: top: -11.5rem es un offset
      fijo que no se ajusta a la altura variable
      de cada tarjeta de servicio. En móvil se
      solapan con el contenido o quedan cortados.
      Solución: en móvil los ponemos en flujo
      normal, bien visibles debajo de la tarjeta.
   ───────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Resetear el posicionamiento absoluto/relativo con offset */
  .carousel-indicators {
    position: relative !important;
    /* anular el top hardcodeado */
    top: 0 !important;
    margin: 0.75rem auto 0.25rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px;
    padding: 0 !important;
  }

  .carousel-indicators [data-bs-target] {
    position: relative !important;
    top: 0 !important;            /* quitar el -11.5rem */
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background-color: rgba(38, 89, 0, 0.35) !important;
    border: 2px solid rgba(38, 89, 0, 0.5) !important;
    margin: 0 !important;
    flex-shrink: 0;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
  }

  .carousel-indicators [data-bs-target].active,
  .carousel-indicators .active {
    background-color: #A8CC4E !important;
    border-color: #265900 !important;
    transform: scale(1.25);
  }

  /* Hint de swipe debajo de los puntos */
  #carouselWRW .carousel-indicators::after {
    content: '← Desliza para ver más servicios →';
    display: block;
    text-align: center;
    font-size: 0.65rem;
    color: #916036;
    letter-spacing: 0.5px;
    margin-top: 4px;
    white-space: nowrap;
    width: 100%;
  }

  /* ─── Footer: texto mínimo legible ─── */
  .letra-footer {
    font-size: 0.75rem !important;   /* era 0.55rem */
    line-height: 1.55;
  }
  .letra-footer a {
    display: inline-block;
    padding: 2px 0;
  }

  /* ─── Números de teléfono ─── */
  .texto-titulo {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* ─── Tarjeta de servicio más cómoda ─── */
  .fondo-tit-serv {
    margin: 0 4px;
  }
  .texto-serv {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  /* ─── Precios ─── */
  .texto-tit-valor {
    font-size: 0.75rem;
  }
  .texto-valor {
    font-size: 0.9rem;
  }

  /* ─── Botones de acción más grandes ─── */
  .boton-verde,
  .boton-cafe {
    font-size: 1rem;
    padding: 0.65rem 1.5rem;
    min-height: 44px;
  }

  /* ─── Tabla de precios ─── */
  th, td {
    font-size: 0.7rem !important;
    padding: 6px 4px;
  }
}

/* ─────────────────────────────────────────────
   5. Teléfonos muy pequeños (≤380px)
   ───────────────────────────────────────────── */
@media (max-width: 380px) {
  .menu-servicios a {
    font-size: 0.6rem;
    padding: 0.4rem 0.2rem;
  }
  .letra-footer {
    font-size: 0.7rem !important;
  }
  .letra-2 {
    font-size: 1.6rem;
  }
}

/* ─────────────────────────────────────────────
   6. Utilidades globales
   ───────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
}