/*
 * SLE · Ajustes para teléfono (≤ 767 px).
 * Se carga con media="(max-width: 767px)": en tablet y escritorio ni se aplica ni se descarga,
 * por lo que el diseño aprobado de escritorio permanece idéntico.
 *
 * Causa raíz de la mayoría de los cortes: celdas de grid/flex con ancho mínimo "auto" que crecen
 * por una palabra larga (p. ej. «Almacenamiento» a 40 px) y empujan la caja fuera de la pantalla.
 * Se corrige con minmax(0,1fr), min-width:0 y salto de palabra seguro.
 */
@media (max-width: 767px) {

  /* ---------- 0. Base: palabras largas nunca rompen la caja ---------- */
  h1, h2, h3, h4, h5, h6, p, li, blockquote,
  .prose a, .cta-strip a, .footer a, .footer-meta, .footer-brand, .footer-tagline,
  .page-title, .page-intro, .hero-sub, .hero-quote, .hero-side-quote,
  [class*="service-"], [class*="anchor-"], [class*="client-"], [class*="person-"], [class*="job-"] {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* El logo de la barra superior heredaba el azul/subrayado del navegador. */
  a.nav-brand, a.sle-mobile-drawer__brand {
    color: inherit;
    text-decoration: none;
  }

  /* La sombra del menú lateral (cerrado, fuera de pantalla) se filtraba como una banda gris sobre el borde derecho de TODAS las páginas
     y tapaba el final del texto. Solo debe verse cuando el menú está abierto. */
  .sle-mobile-drawer__panel {
    box-shadow: none;
    border-left-color: transparent;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease, border-color 0.42s ease;
  }
  body.sle-menu-open .sle-mobile-drawer__panel {
    box-shadow: -32px 0 70px rgba(10, 9, 8, 0.24);
    border-left-color: rgba(10, 9, 8, 0.16);
  }

  /* Cursor personalizado: en pantallas táctiles no existe puntero y su anillo quedaba fijo en la esquina superior izquierda (arco negro). */
  @media (hover: none) {
    .cursor, #cursor { display: none !important; }
  }

  /* ---------- 1. Servicios (Automotriz y Flotas): una sola columna ---------- */
  .service-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 48px 0;
  }
  .service-num { padding-top: 0; }
  .service-headline { min-width: 0; gap: 14px; }
  .service-icon-svg { width: 56px; height: 56px; }
  .service-name { font-size: clamp(26px, 8.2vw, 34px); line-height: 1.12; }
  .service-detail { min-width: 0; padding-left: 0; gap: 20px; }
  .service-desc { font-size: 15px; line-height: 1.65; }
  .service-list { grid-template-columns: minmax(0, 1fr); }
  .service-list-item { padding: 12px 14px; font-size: 14px; line-height: 1.45; }
  .service-spec { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }

  /* Filas etiqueta + valor (tablas): separación mínima y el valor se ajusta a la derecha sin invadir la etiqueta */
  .service-spec-row, .anchor-spec, .hero-meta-row {
    gap: 16px;
    align-items: flex-start;
  }
  .service-spec-row > :first-child, .anchor-spec > :first-child, .hero-meta-row > :first-child {
    flex: 0 0 auto;
    max-width: 46%;
  }
  .service-spec-row strong, .anchor-spec strong, .hero-meta-row strong {
    min-width: 0;
    flex: 1 1 auto;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .service-spec.wide .service-spec-row strong { text-align: left; }

  /* ---------- 2. Servicios ancla (Industria): una sola columna ---------- */
  .anchor-service { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 0; }
  .anchor-num { padding-top: 0; }
  .anchor-name { font-size: clamp(24px, 7.4vw, 30px); }
  .anchor-detail, .anchor-side, .anchor-arrow { grid-column: auto; padding-left: 0; padding-top: 0; min-width: 0; }
  .anchor-spec { font-size: 11px; }
  .anchor-side { gap: 12px; justify-content: flex-start; }
  .anchor-arrow { justify-self: end; }

  /* ---------- 3. Portada ---------- */
  /* 12 columnas con separación de 32 px sumaban más que el ancho de la pantalla (hasta 56 px de desborde en 320 px) */
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0; }
  .duality-header h2 { font-size: clamp(30px, 9.4vw, 44px); }
  .duality-header h2 em { overflow-wrap: anywhere; }

  /* Clientes: dos columnas que no crecen con el nombre */
  .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-cell {
    min-width: 0;
    padding: 14px 10px;
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* ---------- 4. Páginas internas, legales y formularios ---------- */
  .prose, .prose p, .prose li { overflow-wrap: anywhere; }
  .cta-strip a { white-space: normal; max-width: 100%; }
  .footer-grid > * { min-width: 0; }

  /* Cinta de sectores: con «reducir movimiento» queda fija y las tarjetas de la derecha eran inalcanzables; se vuelve deslizable. */
  @media (prefers-reduced-motion: reduce) {
    .sectors-track { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; }
    .sector { scroll-snap-align: start; }
  }
}