/* ════════════════════════════════════════════════════════════════════
   MOBILE BASE — resets globales (carga ANTES que todo lo demás).
   Reglas que se aplican a TODOS los viewports porque son seguras y
   evitan problemas comunes (overflow horizontal, zoom iOS en inputs,
   touch targets mínimos, imágenes que rompen layout).
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

img, video, iframe, picture, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* iOS NO hace zoom al hacer focus si el input es ≥16px */
input, textarea, select {
  font-size: 16px;
  font-family: inherit;
}

/* Touch targets mínimo 44×44 (WCAG/Apple HIG). Aplica solo en móvil
   para no romper el diseño desktop. */
@media (max-width: 768px) {
  button,
  a.btn, a.nav-cta, a.h-btn, a.nav-mobile-cta,
  a.btn-fill, a.btn-fill-white, a.btn-outline-white, a.btn-line,
  a.btn-primary, a.fab-trigger, .chat-toggle {
    min-height: 44px;
    min-width: 44px;
  }
}

/* No scroll horizontal NUNCA — ni siquiera por error */
body { position: relative; }

/* Imágenes responsive con object-fit cover por defecto donde aplica */
.h-hero-video, .h-cinema-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SAFETY NET: si una imagen no carga (network, lazy intersection observer
   roto, etc.) el contenedor sigue ocupando espacio mínimo. Y CUALQUIER
   imagen con data-reveal/data-split que GSAP haya dejado en opacity:0
   y NO haya restaurado por algún error → forzamos opacity 1 en móvil. */
@media (max-width: 768px) {
  img, picture, picture img {
    opacity: 1 !important;
  }
  /* Evitar que GSAP deje invisible cualquier elemento contenedor de imagen */
  [data-reveal] img, [data-reveal] picture,
  [data-split-reveal], [data-split-reveal] img,
  .h-reveal-mask img, .h-reveal-mask {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   EFECTOS VISUALES → DESACTIVADOS EN MÓVIL
   En móvil priorizamos rendimiento. backdrop-filter, blur grandes,
   shadows pesados, gradientes animados → fuera. La estética premium
   se queda en desktop. Móvil = limpio y rápido.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sin shimmer animado en banner texts — el gradient text ya es decorativo */
  .h-banner-text {
    animation: none !important;
  }
  /* Sin backdrop-filter (blur) en glass elements — caro en móvil */
  .h-pill, .nav-inner, .h-hero-floating, .h-hero-floating-1, .h-hero-floating-2,
  .sv-trust-badge, .h-bento-pill, .h-press-label {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Sin animaciones de revelado pesadas en mobile (initSplitReveal está OFF,
     pero por si acaso el HTML tiene clases de animación CSS pura) */
  .sv-word-anim {
    opacity: 1 !important;
    transform: none !important;
    background: inherit !important;
  }
  /* Cursor custom desktop NO aplica en touch — desactivado por safety */
  .sv-cursor, .sv-cursor-dot, .sv-cursor-ring {
    display: none !important;
  }
  /* Tilt 3D y magnetic effects no aplican en touch */
  [data-tilt], [data-magnetic] {
    transform: none !important;
  }
  /* Sticky CTA pill desktop redundante — el mobile-cta-bar inferior es el CTA */
  .h-sticky-cta {
    display: none !important;
  }
  /* h-cinema-video pesado — usar solo poster en móvil (no autoplay vídeo) */
  .h-cinema-video {
    display: none !important;
  }
  .h-cinema {
    background-image: var(--cinema-poster, url('../img/implantes-hero-new.jpg'));
    background-size: cover;
    background-position: center;
  }
}