/* ============================================================================
   cj-intellia.com — acondicionamiento móvil (Android + iOS)
   ----------------------------------------------------------------------------
   Se carga en TODAS las páginas, después del CSS de cada una, y sólo corrige
   lo que rompe en un teléfono real. Nada aquí cambia el aspecto en escritorio:
   todo va dentro de `@media (max-width: 767px)`, `@media (hover: none)` o
   `@supports`.

   Qué arregla, y por qué:
     1. Notch / barra de gestos  — safe-area-inset
     2. 100vh en iOS Safari      — la barra de URL lo hace más alto que la
                                   pantalla y corta contenido -> 100svh
     3. Zoom automático de iOS   — al enfocar un input de menos de 16px, Safari
                                   hace zoom y el usuario queda atrapado
     4. Áreas táctiles           — mínimo 44x44 (Apple HIG) / 48dp (Android)
     5. Controles con :hover     — en táctil no hay hover: eran inalcanzables
     6. Inflado de texto Android — text-size-adjust
   ========================================================================== */

/* ------------------------------------------------- 1. notch y safe areas -- */
/* Requiere viewport-fit=cover en el meta viewport (ya añadido en todas). */
@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* Los elementos fijos se posicionan contra el viewport, no contra el body:
     necesitan su propio respeto por la muesca y la barra de gestos. */
  #main-header,
  .bv-header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  #mobile-menu,
  .bv-nav.open {
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* El botón flotante de WhatsApp queda bajo la barra de gestos del iPhone. */
  a[href*="wa.me"].fixed,
  .whatsapp-float {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* ---------------------------------------------- 2. alturas de viewport ---- */
/* `svh` = altura con la barra de URL visible: nunca corta. No uso `dvh`
   porque cambia al hacer scroll y provoca saltos de layout. */
@supports (min-height: 100svh) {
  .min-h-screen { min-height: 100svh; }
  .h-screen     { height: 100svh; }
  .min-h-\[100dvh\] { min-height: 100svh; }
  .h-\[100dvh\]     { height: 100svh; }
}

/* --------------------------------------- 3. zoom automático al enfocar ---- */
/* iOS Safari hace zoom si el campo tiene menos de 16px. A 16px no lo hace y
   en un teléfono se lee mejor de todos modos. */
@media (max-width: 767px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------- 4. áreas táctiles ------ */
@media (hover: none) {
  /* Los puntos de la galería miden 8x8: se conserva el tamaño visual y se
     agranda sólo la zona sensible con un pseudo-elemento. */
  .inline-dots button {
    position: relative;
  }
  .inline-dots button::after {
    content: "";
    position: absolute;
    inset: -18px;
  }

  /* Botones de 40x40 que no llegan al mínimo. */
  .inline-expand,
  #mobile-menu-close,
  .inline-prev,
  .inline-next,
  .lightbox button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Enlaces de navegación y del pie: alto de toque cómodo. */
  .mobile-nav-link,
  .bv-nav a,
  .bv-footer a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ------------------------------------------- 5. controles sólo-hover ------ */
/* `opacity-0 group-hover:opacity-100` deja el control invisible y sin forma de
   activarlo en una pantalla táctil. */
@media (hover: none) {
  .inline-expand,
  .inline-prev,
  .inline-next {
    opacity: 1 !important;
  }

  /* El spotlight y el tilt siguen al cursor: sin cursor sólo estorban. */
  .spot::before { opacity: 0 !important; }
  .tilt { transform: none !important; }
}

/* ----------------------------------------- 6. detalles de plataforma ------ */
html {
  -webkit-text-size-adjust: 100%;   /* Android infla el texto en landscape */
  text-size-adjust: 100%;
}

@media (max-width: 767px) {
  /* El resaltado azul de Android al tocar ensucia; el :active ya da feedback. */
  a, button, [role="button"], summary {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
  }

  /* Evita que el scroll de un carrusel arrastre la página entera. */
  .tablewrap,
  .tabs,
  .marquee,
  [class*="overflow-x-auto"] {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Ninguna palabra larga (URLs, referencias técnicas) debe empujar el ancho. */
  body {
    overflow-wrap: break-word;
  }
}

/* --------------------------------- 7. remate de las áreas táctiles ------- */
/* Controles concretos que quedaban por debajo del mínimo. Donde agrandar el
   elemento rompería el layout se conserva el tamaño visual y se amplía sólo
   la zona sensible con un pseudo-elemento. */
@media (hover: none) {
  /* Flechas de mes del calendario de reservas: 24x24 reales. */
  #cal-prev,
  #cal-next {
    position: relative;
  }
  #cal-prev::after,
  #cal-next::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  /* Botones que se quedaban a 1-2 px del mínimo: subirlos no mueve nada. */
  a[href="#reservas"],
  .portfolio-demo-btn,
  #web-archive a,
  footer a[class*="inline-flex"],
  a[class*="w-10"][class*="h-10"],
  button[class*="w-10"][class*="h-10"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Cierres de modal/lightbox con icono suelto. */
  [class*="lightbox"] button,
  .modal-close,
  button > .material-symbols-outlined {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Cabecera y migas de la gama Bove. */
@media (hover: none) {
  .bv-brand,
  .crumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  #bvNavToggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Pestañas de filtro de la gama: 38 px de alto en táctil. */
@media (hover: none) {
  .tabs button {
    min-height: 44px;
  }
  .tabs .pillbg {
    top: 4px;
    bottom: 4px;
  }
}