/* =============================================================================
   Opo.Site — sensación de app en el móvil (páginas comerciales)
   =============================================================================
   Acompaña a assets/nav-movil.css (la barra y el panel). Esta hoja se ocupa del
   RESTO de la página en pantallas de teléfono: hasta ahora, por debajo del hero
   el móvil recibía la web de escritorio encogida — secciones con 80-128 px de
   aire, titulares a tamaño cartel, y tarjetas cuyo único feedback era hover,
   que en un táctil no existe.

   Lo que hace, en orden de importancia:

     1. RITMO — comprime el espaciado vertical de escritorio a cadencia de app.
        Una app respira en 40-56 px entre bloques, no en 80-128.
     2. TACTO — todo lo pulsable responde al dedo: se hunde al tocarlo y su
        sombra dura se aplana, que es exactamente el lenguaje de la marca
        ("sombra dura o nada") aplicado al gesto de pulsar.
     3. PULGAR — los carruseles se llevan con el dedo (las flechas son cosa de
        ratón), las chips se deslizan en horizontal, los botones flotantes
        respetan la zona segura del sistema.

   Todo vive bajo max-width: 767px: el escritorio no cambia ni un píxel. Las
   anulaciones apuntan a las clases de Tailwind que ya usan las ocho páginas,
   así que no hay que tocar su HTML. Esta hoja se carga después del script de
   Tailwind CDN, por lo que a igualdad de especificidad gana la última regla.
   ============================================================================= */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------ base */

  html {
    /* El subrayado azul de toque de Android/iOS rompe la ilusión de app. */
    -webkit-tap-highlight-color: transparent;
  }
  body {
    /* Sin rebote del navegador al llegar arriba: el rebote es del sistema,
       y dentro del WebView delata que esto es una página. */
    overscroll-behavior-y: none;
  }
  a, button {
    /* Elimina la espera de doble toque y el zoom accidental al pulsar deprisa. */
    touch-action: manipulation;
  }

  /* ------------------------------------------------------------------ ritmo */

  /* Cadencia de secciones: de aire de cartel a aire de app. Las clases de
     Tailwind se anulan aquí en vez de editarse en ocho archivos. */
  .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-28 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-20 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
  .py-16 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* Separaciones internas gigantes de escritorio. */
  .mb-20 { margin-bottom: 2.5rem !important; }
  .mb-16 { margin-bottom: 2.25rem !important; }
  .space-y-24 > * + * { margin-top: 3.5rem !important; }

  /* Titulares: el 6xl/4xl de escritorio grita en 375 px de ancho. Se baja un
     escalón manteniendo la jerarquía (Playfair sigue mandando). */
  .text-4xl { font-size: 1.9rem !important; line-height: 1.15 !important; }
  h1.text-4xl, h2.text-4xl { text-wrap: balance; }
  .text-3xl { font-size: 1.6rem !important; line-height: 1.2 !important; }

  /* Los CTA redondos de 20 px de padding vertical son de landing de escritorio;
     52-56 px de alto es el estándar cómodo de una app. */
  .px-10.py-5 { padding: .95rem 1.75rem !important; font-size: 1rem !important; }

  /* Tarjetas: el padding interior de 32-40 px se come el ancho del teléfono. */
  .p-8 { padding: 1.4rem !important; }
  .md\:p-10 { padding: 1.4rem !important; }
  .rounded-\[3rem\] { border-radius: 1.75rem !important; }

  /* La barra de anuncios en bucle: más fina, como una píldora de estado. */
  .marquee-content { font-size: .68rem !important; }

  /* --------------------------------------------------------------- el tacto */

  /* La respuesta al dedo con el lenguaje de la marca: al pulsar, la tarjeta o
     el botón se hunden hacia su sombra dura y la sombra se aplana. Es el
     equivalente táctil exacto del "4px 4px 0" en reposo. */
  a:active, button:active {
    transform: translate(2px, 2px) scale(.99);
    transition: transform .06s ease-out;
  }
  .shadow-brutal:active {
    box-shadow: 1px 1px 0 0 #0A192F !important;
  }
  .shadow-brutal-lg:active {
    box-shadow: 2px 2px 0 0 #0A192F !important;
  }
  /* Los acordeones del FAQ y los toggles del panel no deben "saltar". */
  #nav-mobile button:active, .faq-answer:active, summary:active {
    transform: none;
  }

  /* El efecto 3D de las tarjetas (tilt) persigue al ratón; en táctil no existe
     y su transición reacciona a toques fantasma. Se congela. */
  .tilt-card { transition: box-shadow .3s ease !important; transform: none !important; }

  /* ------------------------------------------------------------- carruseles */

  /* Testimonios: en el teléfono se pasan con el pulgar (el gesto ya está
     programado); las flechas son afordancia de ratón y se retiran. Los puntos
     se quedan como indicador de posición, más gorditos para verse. */
  #carousel-prev, #carousel-next { display: none !important; }
  #carousel-track { height: 400px !important; }
  #carousel-dots { gap: .55rem !important; }
  #carousel-dots .dot { width: 8px; height: 8px; }
  #carousel-dots .dot.active { width: 24px; }

  /* Chips de confianza (portada): de columna que envuelve a fila que se
     desliza, con imán de posición — el patrón de fichas de cualquier app. */
  .bg-brand-light.py-12 .flex.flex-wrap {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    /* Que la primera y la última chip no queden pegadas al borde. */
    padding-left: 1rem; padding-right: 1rem;
    scrollbar-width: none;
  }
  .bg-brand-light.py-12 .flex.flex-wrap::-webkit-scrollbar { display: none; }
  .bg-brand-light.py-12 .flex.flex-wrap > * {
    flex-shrink: 0;
    scroll-snap-align: center;
    white-space: nowrap;
  }

  /* ------------------------------------------------------ botones flotantes */

  /* El botón de WhatsApp y el de volver arriba respetan la zona segura del
     sistema (la barra de gestos de iOS/Android) y se hacen de tamaño app. */
  a[aria-label="Escríbenos por WhatsApp"] {
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px) + .75rem) !important;
    width: 3.5rem !important; height: 3.5rem !important;
  }
  #back-to-top {
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px) + .75rem) !important;
    width: 2.75rem !important; height: 2.75rem !important;
  }

  /* ------------------------------------------------------------- detallitos */

  /* La barra de progreso de lectura, algo más presente: en una app ese hilo
     naranja arriba es el único indicador de dónde estás en la página. */
  #progress-bar { height: 3px; }

  /* Los grupos de precios: la tarjeta destacada de escritorio se elevaba con
     translate; en columna única esa elevación descuadra el flujo. */
  .md\:-translate-y-6 { transform: none !important; }
}

/* Con animaciones reducidas, el hundimiento al pulsar se sustituye por un
   cambio de sombra a secas (información sin movimiento). */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  a:active, button:active { transform: none; }
}