/* SpeedCell OS · capa responsive (móvil, tablet, portátil).
   Se carga después del bundle: sólo overrides, no toca el build de React. */

/* ===== 1. Titular del hero =====
   El <span class="whitespace-nowrap">talleres de reparación</span> se salía
   de su caja en todos los anchos (se cortaba en cel y tablet). */
#hero h1 .whitespace-nowrap { white-space: normal !important; }

@media (min-width: 1024px) and (max-width: 1239px) {
  /* en pantallas medianas conservamos las 3 líneas del diseño original
     y encogemos el tipo lo justo para que la línea larga quepa */
  #hero h1 .whitespace-nowrap { white-space: nowrap !important; }
  #hero h1 { font-size: min(104px, calc((100vw - 68px) / 11)) !important; }
}
@media (min-width: 1240px) {
  #hero h1 .whitespace-nowrap { white-space: nowrap !important; }
}

/* ===== 2. Header en tablet (768–899px) =====
   La barra desktop sólo respira desde 1000px: por debajo el logo se encimaba con
   el menú y el botón "Agendar demo gratis" se salía. Ahí usamos hamburguesa. */
@media (min-width: 768px) and (max-width: 999px) {
  header > div:first-child > nav { display: none !important; }
  header > div:first-child > div.hidden { display: none !important; }
  header > div:first-child > button { display: flex !important; }
  header > div:nth-child(2) { display: block !important; }
}

/* ===== 3. Menú móvil =====
   El contenido mide ~420px y el panel topó en max-h-96 (384px): cortaba el CTA. */
header > div[class*="max-h-96"] {
  max-height: min(78vh, 560px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== 4. CTA flotante =====
   Tapaba el pie y los campos del formulario en pantallas chicas. */
@media (max-width: 999px) {
  footer { padding-bottom: 92px !important; }
  html.sc-hide-fcta div.fixed.z-40[class*="bottom-4"] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px) !important;
  }
}

/* ===== 5. Precios =====
   La imagen de planes con 3 columnas quedaba ilegible en cel: se desliza en horizontal. */
#sc-pz .sc-pz-hint {
  display: none; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #22c55e; opacity: .85;
}
@media (max-width: 800px) {
  #sc-pz .sc-pz-stage {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(34,197,94,.5) transparent;
  }
  #sc-pz .sc-pz-stage::-webkit-scrollbar { height: 6px; }
  #sc-pz .sc-pz-stage::-webkit-scrollbar-thumb { background: rgba(34,197,94,.5); border-radius: 999px; }
  #sc-pz .sc-pz-img { width: 860px !important; max-width: none !important; }
  #sc-pz .sc-pz-hint { display: flex; }
}

/* ===== 5b. El salto de línea del sello de confianza estaba oculto en cel =====
   Sin él, "...Bogotá." y "Diseñado por técnicos..." quedaban pegados. */
@media (max-width: 639px) {
  #hero p br[class*="sm:block"] { display: block !important; }
}

/* ===== 6. Formulario en iOS =====
   Safari hace zoom automático si el input baja de 16px. */
@media (max-width: 767px) {
  #leadform input, #leadform select, #leadform textarea { font-size: 16px !important; }
}

/* ===== 7. Ajustes finos de tipografía táctil ===== */
@media (max-width: 480px) {
  html { -webkit-text-size-adjust: 100%; }
}