/* ======================================================================
   MEMORIAL PETS — RESPONSIVE.CSS
   Capa adicional SOLO para celulares y tablets.
   No modifica ni elimina nada del CSS actual: este archivo se carga
   DESPUÉS de los demás .css y únicamente actúa dentro de @media queries,
   por lo que en escritorio (>991px) el sitio se ve exactamente igual.
   ====================================================================== */

/* Evita que cualquier elemento provoque scroll horizontal en móvil/tablet */
@media (max-width: 991.98px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100%;
  }
}

/* ======================================================================
   1. HEADER / NAVBAR — siempre visible y bien configurado
   ====================================================================== */

/* El header ya es position:fixed inline; reforzamos que SIEMPRE quede
   arriba de todo (incluso del botón de WhatsApp) y con ancho correcto */
@media (max-width: 991.98px) {
  #site-header {
    width: 100% !important;
    z-index: 1050 !important;
    background: #ffffff;
  }

  #site-header .container-fluid.bg-light {
    /* La barra superior (teléfono/redes) ya se oculta con d-none d-lg-block,
       esto es solo un refuerzo por si algún navegador la muestra */
    display: none !important;
  }

  .navbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* Logo: tamaño correcto y sin el margin-left:30% que lo descentraba */
  .navbar-logo {
    height: 56px !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .navbar-brand {
    margin-left: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
  }

  /* Botón hamburguesa: más fácil de tocar */
  .navbar-toggler {
    padding: 6px 10px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 6px !important;
  }

  .navbar-toggler-icon {
    width: 1.4em;
    height: 1.4em;
  }

  /* Panel del menú colapsable: como un dropdown propio, con scroll,
     para que nunca tape ni rompa el contenido de la página */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 18px;
    z-index: 1049;
  }

  .navbar-nav.m-auto {
    margin: 0 !important;
    width: 100%;
  }

  .navbar-nav .nav-link,
  .navbar-nav .nav-item {
    width: 100%;
    padding: 12px 6px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 16px;
  }

  .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }
}

/* Espacio reservado para el header fijo en móvil/tablet.
   El JS de cada página ya calcula el alto real del header y lo aplica
   como padding-top del body, así que aquí solo damos un valor de
   respaldo (fallback) para que nunca se vea contenido tapado mientras
   carga la página. */
@media (max-width: 991.98px) {
  body { padding-top: 96px; }
}
@media (max-width: 575.98px) {
  body { padding-top: 84px; }
}

/* ======================================================================
   2. MEGA MENÚ "SERVICIOS" — en touch no existe :hover,
      se convierte en bloque desplegable normal dentro del menú
   ====================================================================== */
@media (max-width: 991.98px) {
  .mega-dropdown {
    width: 100%;
  }

  .mega-dropdown > .nav-link {
    width: 100%;
  }

  .mega-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 16px 10px !important;
    box-shadow: none !important;
    border-radius: 10px;
    background: #f7f9fb;
    margin: 6px 0 10px 0;

    /* En touch no hay :hover, así que el menú se abre al tocar
       el item (se activa con la clase .mega-open vía JS, ver abajo) */
    display: none;
  }

  .mega-dropdown.mega-open .mega-menu {
    display: grid !important;
  }

  .mega-menu::before {
    display: none;
  }

  .mega-column a {
    font-size: 15px;
    padding: 6px 0;
  }
}

/* ======================================================================
   3. BOTÓN DE WHATSAPP FLOTANTE — siempre visible, abajo a la derecha
   ====================================================================== */
@media (max-width: 991.98px) {
  .mp-whatsapp-float {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 2000 !important; /* siempre por encima del menú móvil */
  }

  .mp-whatsapp-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .mp-tooltip {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .mp-whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    right: 14px !important;
  }
}

/* ======================================================================
   4. AJUSTES GENERALES DE LECTURA EN TABLET Y CELULAR
   ====================================================================== */

/* Tablets (768px - 991px) */
@media (max-width: 991.98px) {
  .mp-hero-title { font-size: 2.1rem !important; line-height: 1.25 !important; }
  .mp-hero-sub   { font-size: 1rem !important; }

  .bg-light.text-center h3 { font-size: 3.2rem !important; }
  .bg-light.text-center h6 { font-size: 1.05rem !important; white-space: normal !important; }

  .mega-menu, .mega-column { text-align: left !important; }
}

/* Celulares (hasta 767px) */
@media (max-width: 767.98px) {
  .mp-hero-title { font-size: 1.7rem !important; }
  .mp-hero-eyebrow { font-size: 0.85rem !important; }

  .bg-light.text-center h3 { font-size: 2.6rem !important; }
  .bg-light.text-center h6 { font-size: 0.95rem !important; }

  .mp-cta-primary, .mp-cta-secondary {
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* Celulares pequeños (hasta 480px) */
@media (max-width: 480px) {
  .mp-hero-title { font-size: 1.45rem !important; }
  .navbar-logo { height: 48px !important; }
}

/* Evita que imágenes/videos se desborden en ninguna pantalla chica */
@media (max-width: 991.98px) {
  img, video { max-width: 100%; height: auto; }
}

/* ======================================================================
   5. GALERÍA DE FOTOS (Urnas de Cerámica, Aluminio, etc.) — .memorial-visual
      En desktop es una fila con 4 fotos de 180x180px. En tablet/celular
      esa fila no entra y se desborda, así que la convertimos en una
      cuadrícula ordenada que sí entra en la pantalla.
   ====================================================================== */
@media (max-width: 991.98px) {
  .memorial-visual {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 40px;
    padding: 0 12px;
  }

  .memorial-visual img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
  }
}

@media (max-width: 575.98px) {
  .memorial-visual {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 16px;
  }
}

/* ======================================================================
   7. TARJETAS "PLANES PREVENTIVOS" (.pcard) — Inicio
      En celular el padding de escritorio (40px 36px) deja muy poco
      espacio de lectura. Lo reducimos y ajustamos tipografía.
   ====================================================================== */
@media (max-width: 768px) {
  .pcard {
    padding: 28px 22px 26px !important;
  }

  .pcard-price {
    font-size: 2.3rem !important;
  }

  .pcard-title {
    font-size: 0.95rem !important;
    margin-bottom: 18px !important;
    padding-bottom: 16px !important;
  }

  .pcard-benefits li {
    font-size: 0.85rem !important;
  }

  .pricing-cards-row {
    gap: 20px !important;
    padding: 0 8px;
  }
}
      En tablet se ven bien en 2 columnas; en celulares angostos las
      pasamos a 1 columna para que el texto y el precio no se aprieten.
   ====================================================================== */
@media (max-width: 991.98px) {
  .prices {
    gap: 14px;
  }

  .prices div {
    padding: 14px 16px;
  }

  .prices span {
    font-size: 13px;
  }

  .prices strong {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .prices {
    grid-template-columns: 1fr !important;
  }

  .prices div {
    padding: 14px 18px;
  }

  .memorial-pets-btn {
    width: 100%;
    text-align: center;
    display: block;
  }

  .velacion-content > a {
    display: block;
    width: 100%;
  }
}