/* ============================================================================
   mobile.css — Foco Rojo

   La landing viene exportada de Claude Design y usa estilos inline en casi
   todos sus elementos (~340). Un estilo inline gana a cualquier regla de
   hoja de estilos, así que la única forma de adaptarla es pisarlo con
   !important. De ahí que este archivo lo use en casi todas sus reglas: no es
   descuido, es el único mecanismo disponible sin reescribir el markup.

   Se carga DESPUÉS del <style> de cada página para ganar en el cascade.

   Dos cortes:
     900px  el diseño de escritorio arma rejillas de 2 y 4 columnas que por
            debajo de este ancho dejan columnas de 40-170px. Aquí se colapsan.
     620px  ajustes finos de teléfono: aire, tipografía y áreas táctiles.
   ========================================================================== */


/* ==========================================================================
   1. NAVEGACIÓN
   El diseño original esconde los enlaces bajo 1080px y no pone nada en su
   lugar: en teléfono no había forma de navegar entre secciones. En vez de un
   menú con JS (que se perdería al reexportar la landing), la barra pasa a dos
   filas: marca y interruptor arriba, enlaces abajo en una tira desplazable.
   ========================================================================== */
@media (max-width: 1080px) {
  /* Los enlaces vuelven a mostrarse: la regla original los escondía sin dejar
     ninguna alternativa para navegar. */
  nav .fr-nav-links {
    display: flex !important;
    min-width: 0;
    overflow-x: auto;
    gap: 20px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav .fr-nav-links::-webkit-scrollbar { display: none; }
  nav .fr-nav-links a { flex-shrink: 0; font-size: 14.5px !important; }

  /* Entre 561 y 1080px marca, enlaces e interruptor caben en una sola fila
     (~470px de contenido), así que la barra se queda de una altura. */
  section[id] { scroll-margin-top: 82px; }
}

/* Por debajo de 560px la fila única ya no alcanza: la barra pasa a dos filas,
   marca e interruptor arriba y los enlaces en una tira desplazable abajo. */
@media (max-width: 560px) {
  nav {
    flex-wrap: wrap !important;
    row-gap: 9px !important;
    padding: 11px 20px !important;
  }
  nav .fr-nav-links {
    order: 3;
    width: 100%;
    gap: 18px !important;
    padding-bottom: 2px;
  }
  section[id] { scroll-margin-top: 100px; }
}

/* ==========================================================================
   2. COLAPSO DE REJILLAS Y AIRE GENERAL
   ========================================================================== */
@media (max-width: 900px) {

  /* El escritorio reserva 40px por lado; en 375px eso deja 295px de contenido. */
  section, footer { padding-left: 24px !important; padding-right: 24px !important; }

  /* Toda rejilla multicolumna de la página pasa a una sola columna.
     minmax(0,1fr) y no 1fr: 1fr tiene min-width auto y no deja que el
     contenido se encoja, que es justo lo que cortaba el titular de servicios. */
  section [style*="display: grid"],
  footer [style*="display: grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Los max-width inline están calculados en ch para columnas anchas
     (22ch, 15ch…) y en móvil desbordan el viewport. */
  section [style*="max-width"],
  footer [style*="max-width"] { max-width: 100% !important; }

  /* Botones tipo pastilla: el alto fijo de 52px hacía que el texto se saliera
     de la pastilla en cuanto necesitaba dos líneas. */
  section a[style*="border-radius: 999px"],
  footer a[style*="border-radius: 999px"],
  section button[style*="border-radius: 999px"] {
    height: auto !important;
    min-height: 52px !important;
    padding: 14px 24px !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    line-height: 1.3 !important;
  }
}


/* ==========================================================================
   3. HERO
   La rejilla 1.08fr / 0.92fr dejaba el texto en 129px de ancho y el visual
   del botón de encendido en 110px, encimados.
   ========================================================================== */
@media (max-width: 900px) {
  body > div > section:not([id]) {
    padding: 56px 24px 88px !important;
  }
  body > div > section:not([id]) [style*="display: grid"] {
    gap: 28px !important;
  }

  /* El visual 3D del botón se oculta: es decorativo y a este tamaño sólo
     encimaba el texto. El interruptor de luces que lleva dentro sigue
     disponible en la barra superior, así que no se pierde la función. */
  body > div > section:not([id]) [data-tilt] { display: none !important; }

  body > div > section:not([id]) h1 {
    font-size: clamp(31px, 8.4vw, 46px) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.02em !important;
    margin-top: 22px !important;
  }
  body > div > section:not([id]) h1 + p,
  body > div > section:not([id]) p {
    font-size: 16.5px !important;
    line-height: 1.62 !important;
  }

  /* La etiqueta "Estudio de diseño y desarrollo web" se partía en 4 líneas. */
  body > div > section:not([id]) [style*="border-radius: 999px"][style*="text-transform: uppercase"] {
    font-size: 10.5px !important;
    letter-spacing: 0.1em !important;
    padding: 7px 13px !important;
    gap: 7px !important;
  }

  /* Los dos CTA a todo el ancho: se leen mejor y dan un área táctil clara. */
  body > div > section:not([id]) a[style*="border-radius: 999px"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body > div > section:not([id]) [style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }
}


/* ==========================================================================
   4. SERVICIOS
   El titular tenía max-width 22ch (522px) dentro de una caja de 295px y la
   sección recorta el desborde: el texto se perdía literalmente.
   ========================================================================== */
@media (max-width: 900px) {
  #servicios { padding: 76px 24px !important; }

  /* min-width auto en el item de la rejilla era lo que impedía encogerse. */
  #servicios > div > div > div,
  #servicios > div > div { min-width: 0 !important; }

  #servicios h2 {
    font-size: clamp(23px, 6.1vw, 31px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
  }
  #servicios [style*="display: grid"] { gap: 14px !important; }
  #servicios h3 { font-size: 18.5px !important; }
  #servicios p { font-size: 15.5px !important; line-height: 1.6 !important; }
}


/* ==========================================================================
   5. PROCESO
   La rejilla 0.44fr / 1fr dejaba las tarjetas en 166px: el texto salía a dos
   o tres palabras por línea. Y el apilado pegajoso sumaba 46vh de margen por
   tarjeta (373px cada una), que en móvil sólo es scroll vacío.
   ========================================================================== */
@media (max-width: 900px) {
  #proceso { padding: 76px 24px 24px !important; }

  /* Las letras verticales P-R-O-C-E-S-O son decorativas y ocupaban una
     columna de 73px de ancho por 354px de alto. */
  #proceso [data-fill-word] { display: none !important; }
  #proceso [style*="align-self: stretch"] { display: none !important; }

  #proceso h2 { font-size: clamp(25px, 6.6vw, 34px) !important; margin-bottom: 26px !important; }

  /* El JS de la landing escribe top/transform/filter inline en cada cuadro;
     !important los neutraliza sin tocar el script. */
  #proceso [data-stack-card] {
    position: static !important;
    top: auto !important;
    margin-bottom: 16px !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    padding: 26px 22px 30px !important;
  }
  #proceso [data-stack-card]:last-child { margin-bottom: 0 !important; }

  #proceso [data-stack-card] h3 {
    font-size: clamp(21px, 5.6vw, 27px) !important;
    line-height: 1.15 !important;
  }
  #proceso [data-stack-card] p { font-size: 15.5px !important; line-height: 1.62 !important; }

  /* Las pastillas de cada fase caben en dos filas en lugar de desbordarse. */
  #proceso [data-stack-card] [style*="display: flex"] { flex-wrap: wrap !important; gap: 7px !important; }
}


/* ==========================================================================
   6. PORTAFOLIO
   En escritorio es un escenario de 190vh donde dos tarjetas orbitan con el
   scroll. En móvil el ancho min(30vw,360px,38vh) las dejaba en 112px y el
   recorrido se volvía ~2700px de scroll casi vacío. Pasa a lista apilada.
   ========================================================================== */
@media (max-width: 900px) {
  #portafolio {
    height: auto !important;
    padding: 72px 24px 84px !important;
  }
  /* el contenedor pegajoso de 100vh con overflow hidden */
  #portafolio > div {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    top: auto !important;
  }
  /* el título "Portafolio", posicionado en absoluto sobre el escenario */
  #portafolio > div > div:first-child {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-bottom: 24px !important;
  }
  #portafolio [data-orbit-stage] {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    gap: 26px !important;
  }
  /* Cada proyecto queda estático y a todo el ancho. Las maquetas internas
     miden su texto en cqw, así que al ensanchar la tarjeta la miniatura
     escala con ella. */
  #portafolio [data-orbit] {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
  }
  #portafolio [data-card3d-inner] { transform: none !important; }

  /* Nombre e industria: en una fila con space-between la industria se salía. */
  #portafolio [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 2px 12px !important;
  }
}


/* ==========================================================================
   7. FAQ Y CONTACTO
   ========================================================================== */
@media (max-width: 900px) {
  #faq { padding: 76px 24px !important; }
  #faq h2 { font-size: clamp(24px, 6.4vw, 32px) !important; margin-bottom: 26px !important; }
  #faq summary { font-size: 16.5px !important; padding-top: 18px !important; padding-bottom: 18px !important; }
  #faq details p { font-size: 15.5px !important; line-height: 1.62 !important; }

  #contacto { padding: 80px 24px !important; }
  #contacto h2 { font-size: clamp(25px, 6.6vw, 34px) !important; line-height: 1.12 !important; }
  #contacto p { font-size: 16.5px !important; line-height: 1.6 !important; }
}


/* ==========================================================================
   8. FOOTER
   Cuatro columnas (1.4fr + 3×1fr) daban 55px, 40px, 40px y 40px de ancho:
   el texto se partía carácter por carácter.
   ========================================================================== */
@media (max-width: 900px) {
  footer { padding: 56px 24px 34px !important; }
  footer [style*="display: grid"] { gap: 30px !important; }
  footer p[style*="margin: 48px"] { margin-top: 34px !important; }
}


/* ==========================================================================
   9. PÁGINA DE COTIZACIÓN
   Ya colapsa por sus propias media queries; aquí sólo se alinea la escala
   tipográfica con la de la landing.
   ========================================================================== */
@media (max-width: 900px) {
  .fr-cot-hero { padding: 52px 24px 92px !important; }
  .fr-cot-hero h1 {
    font-size: clamp(30px, 8.2vw, 44px) !important;
    line-height: 1.07 !important;
  }
  .fr-cot-hero p { font-size: 16.5px !important; }
  .fr-cot-main { padding: 40px 24px 72px !important; gap: 22px !important; }
  .fr-form { padding: 26px 22px 30px !important; }
  .fr-side-title { font-size: 20px !important; }
  .fr-paso { font-size: 15.5px !important; }
}


/* ==========================================================================
   10. AJUSTES DE TELÉFONO
   ========================================================================== */
@media (max-width: 620px) {
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  #servicios, #faq { padding-top: 64px !important; padding-bottom: 64px !important; }
  #proceso { padding-top: 64px !important; }
  #portafolio { padding-top: 60px !important; padding-bottom: 72px !important; }
  #contacto { padding-top: 68px !important; padding-bottom: 68px !important; }
  .fr-cot-hero, .fr-cot-main { padding-left: 20px !important; padding-right: 20px !important; }

  /* El botón flotante de WhatsApp se acerca al borde para estorbar menos. */
  .fr-wa { right: 16px !important; bottom: 16px !important; }

}

/* Sin puntero fino no hay hover: el tilt 3D de las tarjetas se queda pegado
   en la última posición tocada. Mejor desactivarlo. */
@media (hover: none) {
  [data-card3d-inner], [data-tilt-inner] { transform: none !important; }
}