/* ==========================================================
   RESPONSIVE — tablet y teléfono.
   Se escribe sección por sección a medida que se construyen.
   ========================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .menu { gap: 12px; padding: 9px 10px 9px 20px; }
  .menu__logo { margin-right: auto; }
  .menu__hamburguesa { display: flex; }

  /* La lista pasa de links en fila a tarjeta desplegable debajo de la píldora */
  .menu__links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
    margin: 0; padding: 10px;
    background: rgba(23, 32, 43, .95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--borde-menu); border-radius: var(--radio-tarjeta);
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
    transition: opacity var(--t-luz), transform var(--t-luz), visibility var(--t-luz);
  }
  .menu--abierto .menu__links {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }
  .menu__links a { display: block; padding: 13px 14px; border-radius: 10px; }
  .menu__links a:hover, .menu__links a:focus-visible { background: rgba(255, 255, 255, .05); }

  /* Tres columnas de ~270px no alcanzan para esos párrafos: se apilan */
  .criterio__grilla { grid-template-columns: 1fr; max-width: 640px; }

  /* Proceso: las imágenes bajan debajo del texto. Apilado, el texto va primero
     (por eso "El informe en PDF" también está en la lista, decidido 2026-09-23) */
  .paso--llamada .paso__cuerpo { grid-template-columns: 1fr; gap: 28px; }
  .relevamiento__detalle { grid-template-columns: 1fr; gap: 30px; }

  .fundador__cuerpo { grid-template-columns: 1fr; gap: 36px; }
  .pie__grilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 640px) {
  :root { --alto-menu: 80px; }
  body { font-size: 17px; }

  .menu { top: 12px; padding: 7px 7px 7px 16px; }
  .menu__logo img { height: 30px; }
  .menu__cta { min-height: 44px; padding: 0 18px; font-size: 15px; }

  .hero {
    --orbe: 1100px;          /* más chica: en pantalla angosta la curva tiene que verse */
    --cresta: 150px;
    min-height: 0;
    padding: 118px 0 250px;
  }
  .orbita__bruma {
    background: radial-gradient(ellipse 420px 320px at 50% calc(100% - var(--cresta)),
      rgba(226, 154, 88, .24) 0%, rgba(226, 154, 88, .10) 38%,
      rgba(226, 154, 88, .03) 60%, rgba(226, 154, 88, 0) 78%);
  }
  .hero__velo {                          /* en teléfono el texto ocupa todo el ancho */
    background: linear-gradient(180deg, rgba(23, 32, 43, .7) 0%, rgba(23, 32, 43, .35) 55%, rgba(23, 32, 43, 0) 75%);
  }
  .hero__contenido { gap: 22px; }
  .hero__bajada { font-size: 18px; }
  .hero__botones { flex-direction: column; align-items: stretch; }
  .hero__botones .boton { width: 100%; padding: 0 16px; font-size: 17px; }   /* que "20 minutos" entre en una línea */

  .seccion { padding-block: 64px; }
  .problema__grilla { grid-template-columns: 1fr; gap: 14px; }
  .problema__tarjeta { padding: 22px 22px; }

  .criterio__entrada p { font-size: 18px; }
  .criterio__grilla { gap: 14px; }
  .criterio__regla { padding: 24px 22px; }

  .casos .contenedor { gap: 32px; }
  .casos__bajada { font-size: 18px; }
  .casos__grupos { gap: 32px; }
  .casos__rotulo { align-items: flex-start; gap: 12px; }
  .casos__rotulo::after { display: none; }      /* en angosto el título ocupa dos líneas: la línea sobra */
  .casos__grilla { grid-template-columns: 1fr; gap: 14px; }
  .caso { padding: 22px 22px; }

  /* Proceso: la espina se afina para dejarle ancho a la tarjeta */
  .proceso .contenedor { gap: 40px; }
  .paso { gap: 16px; }
  .paso__espina { width: 32px; }
  .paso__nodo { width: 32px; height: 32px; font-size: 12px; }
  .paso__cuerpo { padding-bottom: 36px; }
  .paso__texto > p { font-size: 17px; }
  .recorrido { padding: 20px 18px; }
  .relevamiento { padding: 24px 20px; gap: 20px; }
  .relevamiento__lema { font-size: 18px; }
  .relevamiento__credito { font-size: 18px; padding-left: 16px; }
  .pdf { width: auto; }
  .pdf__hojas { zoom: .76; }      /* la hoja entera, a escala: 330px no entran en la tarjeta */

  /* Para quién es: dos columnas no entran. En vez de alternar sí/no,
     que en una sola columna se lee como un ida y vuelta confuso, cada
     .filtro__grupo pasa de ser columna de grilla a tarjeta apilada
     normal — primero todos los "sí", después todos los "no" — con la
     misma etiqueta flotante y el mismo relleno que en escritorio. */
  .filtro .contenedor { gap: 32px; }
  .filtro__bajada { font-size: 17px; }
  .filtro__marco { margin-top: 0; }
  .filtro__divisor, .filtro__rotulo { display: none; }
  .filtro__grilla { display: flex; flex-direction: column; gap: 34px; }
  .filtro__grupo { display: block; }
  .filtro__fila { padding: 15px 22px; font-size: 16px; }
  .filtro__grupo > .filtro__fila:first-of-type { margin-top: 34px; }
  .filtro__marca { width: 15px; margin-top: 5px; }  /* que el texto largo no lo aplaste */
  .filtro__cierre .boton { width: 100%; padding: 0 16px; font-size: 17px; }

  .fundador .contenedor { gap: 32px; }
  .fundador__texto p { font-size: 17px; }

  .pregunta summary { gap: 16px; padding: 20px 20px; }
  .pregunta__respuesta { padding: 0 20px 22px; font-size: 17px; }

  .empezar { padding-block: 88px 150px; }
  .empezar__bajada { font-size: 18px; }
  .empezar .boton--principal { width: 100%; padding: 0 16px; font-size: 17px; }
  .empezar__luz::before { width: 600px; height: 420px; top: calc(100% - 220px); }
  .empezar__luz::after { width: 1100px; height: 1100px; top: calc(100% - 110px); }

  .pie { padding-top: 52px; }
  .pie__grilla { grid-template-columns: 1fr; gap: 36px; }
  .pie__base { margin-top: 44px; }
}