/* movil.css · recomposición para teléfono.
   Todo lo de este archivo vive dentro de (max-width: 767px): por encima de ese
   ancho no cambia ni una regla. Se carga el último para ganar el desempate de
   cascada sin subir especificidad a base de !important.

   El problema que resuelve: en escritorio cada apartado se lee de un vistazo,
   pero al apilar en una columna el mismo contenido pedía hasta dos pantallas
   por sección (15 pantallas de página). No es un encogido proporcional: los
   bloques se recomponen: el icono de las tarjetas pasa al lado del título en
   vez de encima, el número de cada paso se pone en línea con su título, y los
   tres tipos de inmueble pasan a fila de tres pictogramas. */

@media (max-width: 767px) {

  /* ── Ritmo vertical general ────────────────────────────────────────────── */

  /* 80 px arriba y abajo por sección son 160 px de aire entre bloques: con el
     cambio de fondo de .seccion--alt marcando ya la frontera, 56 basta. */
  :root { --seccion-y: 56px; }

  .separador { margin-bottom: 12px; }
  .antetitulo { margin-bottom: 10px; }
  .cabecera-seccion { margin-bottom: 26px; }
  .entradilla { margin-top: 12px; }

  /* ── Tarjetas: el icono se pone al lado del título ─────────────────────── */

  /* Apilado, cada tarjeta gastaba icono (48) + hueco (12) + título antes de
     empezar el texto. En una retícula de 2 columnas el icono comparte línea con
     el título y el texto corre por debajo a todo el ancho, que además es el que
     manda en el número de líneas. */
  .card {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 16px;
  }

  .card__icono { grid-column: 1; grid-row: 1; width: 38px; height: 38px; }
  .card__icono .icono { width: 23px; height: 23px; }
  .card__titulo { grid-column: 2; grid-row: 1; }
  .card__texto { grid-column: 1 / -1; grid-row: 2; line-height: 1.5; }

  .rejilla { gap: 12px; }

  /* Las tarjetas de ¿es tu caso? y las de apoyo de la portada no llevan texto
     debajo: el título ES el contenido. Ahí 18 px no contrastan con nada y solo
     sirven para partir la frase en tres líneas, así que bajan a 16 y caben en
     dos. En las tarjetas con .card__texto el título se queda en 18 px, que es
     donde la diferencia entre título y cuerpo sí se ve. */
  .situaciones .card__titulo,
  .portada__apoyos .card__titulo {
    font-size: 1rem;
    line-height: 1.35;
  }

  /* ── 1. Portada ────────────────────────────────────────────────────────── */

  .portada { padding-top: calc(var(--cabecera-alto) + 28px); }
  .portada__grid { gap: 28px; }
  /* El h1 toca su suelo (clamp 6vw topado a 36px) pero .portada__sub sigue en
     1.1em, así que en una columna de 342px la relación se invierte: 3 líneas de
     titular contra 7 de subtítulo, y la portada se lee como un párrafo con un
     rótulo encima. A 18px —el cuerpo del sitio, no letra pequeña— baja a 6. */
  .portada__sub {
    margin-top: 18px;
    font-size: 1.125rem;
    line-height: 1.5;
  }

  /* Evita que 'Sin compromiso.' deje 'compromiso.' sola en la segunda línea */
  .portada__nota { text-wrap: pretty; }
  .portada__cta { margin-top: 24px; }
  .portada__nota { margin-top: 12px; }
  .fachada { width: 52%; max-width: 190px; }

  /* El SVG se pinta a la mitad de tamaño y el trazo se encoge con él, hasta
     0,8px al 55% de opacidad: el dibujo se vuelve un fantasma. Se compensa el
     grosor para recuperar el peso de escritorio sin mover un píxel el alto. */
  .fachada .fachada__trazos { stroke-width: 3.4; }
  .portada__apoyos { gap: 10px; margin-top: 32px; }

  /* ── 2. ¿Es tu caso? ───────────────────────────────────────────────────── */

  .situaciones { gap: 12px; }
  .cierre { margin-top: 32px; }
  .cierre__texto { font-size: 1.2rem; }
  .cierre .boton { margin-top: 20px; }

  /* ── 3. Cómo funciona ──────────────────────────────────────────────────── */

  /* El número a 56 px encima del título costaba 64 px por paso antes de que
     empezara a leerse nada. Pasa a 28 px en la misma línea que el título: sigue
     siendo el elemento que más pesa de la fila, en Fraunces y en verde, pero ya
     no ocupa una banda para él solo. El punto y la línea que los une se quedan;
     proceso.js recalcula el trazado a partir de la posición real de las marcas,
     así que sigue a la nueva retícula sin tocar el JS. */
  /* Con la cabecera de sección a 26px y los pasos a 22px, el corte principal
     (titular → lista) pesaba igual que el corte entre pasos y dejaba de leerse.
     Los márgenes colapsan, así que el hueco final es max(26, 40) = 40. */
  .proceso { margin-top: 40px; }

  .proceso__pasos { gap: 22px; }

  .proceso .paso {
    grid-template-columns: 14px auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
  }

  /* 7 px = medio punto: lo centra sobre un número de 28 px de alto */
  .proceso .paso__marca { grid-column: 1; grid-row: 1; margin-top: 7px; }

  .proceso .paso__numero {
    grid-column: 2;
    grid-row: 1;
    font-size: 28px;
  }

  .proceso .paso__titulo {
    grid-column: 3;
    grid-row: 1;
    font-size: 1.1875rem;
  }

  .proceso .paso__texto { grid-column: 2 / -1; grid-row: 2; line-height: 1.5; }

  .proceso__nota { margin-top: 28px; padding-top: 18px; }

  /* ── 4. Qué compramos ──────────────────────────────────────────────────── */

  /* Viviendas, locales y edificios son tres etiquetas de una palabra: en fila
     de tres se leen de golpe y bajan de 266 px a poco más de 100. */
  .tipos { gap: 10px; flex-wrap: nowrap; }
  .tipos > li { flex: 1 1 0; min-width: 0; }

  .tipos .card--compacta {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 8px;
    padding: 14px 6px;
    text-align: center;
  }

  .tipos .card--compacta .card__icono {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
  }

  .tipos .card--compacta .card__titulo {
    grid-column: 1;
    grid-row: 2;
    font-size: 1rem;
  }

  .franja { margin-top: 18px; padding: 14px 16px; gap: 14px; }
  .franja .card__icono { width: 40px; height: 40px; }
  .paneles { margin-top: 12px; gap: 12px; }

  /* ── 5. Dónde compramos ────────────────────────────────────────────────── */

  /* El viewBox deja un 19% vacío a la derecha (el dibujo acaba en x=645 de 800).
     En dos columnas ese vacío hacía de calle hacia las tarjetas; en una sola
     columna solo encoge el mapa y lo descuelga a la izquierda. Se recorta aquí
     y no en el viewBox para no tocar el escritorio: comprobado que no hay nada
     dibujado más allá de x=645, así que no se corta ninguna provincia. */
  .donde__mapa { overflow: hidden; }

  .mapa {
    width: 121%;
    max-width: none; /* base.css pone img, svg { max-width: 100% } */
  }

  /* Los 42 puntos llevan r=4 en unidades del viewBox, así que escalan con el
     mapa y se quedan en 4px de diámetro mientras la viñeta de la leyenda que
     los describe mide 10. Con non-scaling-stroke el trazo se mide en píxeles
     de pantalla y pone un suelo fijo al diámetro: mismo verde que el relleno,
     así que es un punto más gordo, no un anillo. Por encima de 480px el mapa
     ya es ancho y el punto crece solo. */
  @media (max-width: 480px) {
    .mapa__capital {
      stroke: var(--verde);
      stroke-width: 2px;
      vector-effect: non-scaling-stroke;
    }
  }

  .donde { gap: 28px; }
  .donde__texto { gap: 14px; }
  .leyenda { margin-top: 12px; }

  /* ── 7. Preguntas ──────────────────────────────────────────────────────── */

  /* 64 px de mínimo y 18 de relleno dejaban 12 preguntas en 1.100 px. Con 56 y
     13 el objetivo táctil sigue por encima de los 44 px que pide la WCAG. */
  /* La sangría de 8px existe para que el fondo de :hover no toque el texto en
     escritorio. En táctil no hay hover, y ahí solo resta medida a una columna
     estrecha y descuelga el texto de los filetes y del margen de la página. */
  .acordeon__boton {
    min-height: 52px;
    padding: 11px 0;
    gap: 12px;
    line-height: 1.35;
    text-wrap: balance;
  }

  .acordeon__boton:focus-visible { outline-offset: 0; }
  .acordeon__icono { width: 22px; height: 22px; }
  .acordeon__contenido p { padding: 0 0 16px; }

  /* ── 8. Formulario ─────────────────────────────────────────────────────── */

  /* Los campos no se tocan: 56 px de alto es lo que hace cómodo escribir en un
     móvil. Lo que se recorta es el aire entre ellos. */
  .formulario-caja { padding: 20px 16px; }
  .formulario__paso { margin-top: 22px; }
  .formulario__campos { gap: 16px; }
  .campo { gap: 6px; }
  /* Mientras .campo__dos sea una sola columna, el legend "Municipio y provincia"
     cae justo encima de la etiqueta "Municipio" con la misma tipografía y se lee
     como si fuera su rótulo. Baja al nivel de antetítulo del sistema. */
  .campo:has(> .campo__dos) > legend.campo__etiqueta {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .formulario__acciones { margin-top: 24px; }
  .formulario__nota { margin-top: 16px; }

  /* ── 9. Contacto ───────────────────────────────────────────────────────── */

  /* Etiqueta y dato caben uno debajo de otro a la derecha del icono: la tarjeta
     pasa de 179 px a menos de 90 y las cuatro vías de contacto entran juntas. */
  .card-contacto {
    align-items: center;
    row-gap: 2px;
  }

  .card-contacto .card__icono { grid-column: 1; grid-row: 1 / span 2; }
  .card-contacto__etiqueta { grid-column: 2; grid-row: 1; }
  .card-contacto__dato { grid-column: 2; grid-row: 2; font-size: 19px; }

  /* El 17px de componentes.css es una concesión a la rejilla de 4 columnas de
     escritorio. Apiladas a ancho completo hay sitio de sobra y el correo era el
     único dato con otro cuerpo. Por debajo de 360px no cabe en una línea, así
     que ahí se queda como está. */
  @media (min-width: 360px) {
    .card-contacto__dato--email { font-size: 19px; }
  }
  .card-contacto__nota { grid-column: 2; grid-row: 3; }

  /* ── Pie ───────────────────────────────────────────────────────────────── */

  .pie { padding: 44px 0; }
  .pie .marca { margin-bottom: 12px; }
  .pie__copy { margin-top: 32px; padding-top: 18px; }

  /* Los <a> del pie fabrican su zona táctil con padding + margen negativo, así
     que la caja de 50px se pinta fuera de su huella de maquetación e invade
     12px arriba y abajo. Con 8px entre filas se solapaban 16px: el enlace de
     abajo, que pinta encima, dejaba el de arriba en 34px útiles, y un toque
     sobre la parte baja de "Aviso legal" abría la política de privacidad.
     20px de hueco y 10px de relleno: cajas de 46px que se tocan sin pisarse. */
  .pie__lista li + li { margin-top: 20px; }
  .pie__lista a { padding: 10px 0; margin: -10px 0; }
  .pie__lista li { text-wrap: pretty; }

  /* Al abrir las filas hay que abrir también los bloques o los tres grupos
     dejan de leerse como grupos. */
  .pie__grid { gap: 40px; }

  /* ── Páginas aparte (gracias y legales) ────────────────────────────────── */

  .pagina-simple { padding-top: calc(var(--cabecera-alto) + 28px); }
}

/* El overlay .menu-movil (z-index 55) es hijo de la cabecera y tapa el motivo,
   que no lleva z-index; la hamburguesa se salva porque tiene el 60 explícito.
   Con el menú abierto la fila de arriba se quedaba con la X sola a la derecha,
   y el motivo es el único elemento de identidad de la web. El corte va en 1023
   porque es el ancho hasta el que existe el menú desplegable. */

@media (max-width: 1023px) {
  .cabecera .marca { position: relative; z-index: 60; }

  /* Visible pero inerte: con el menú abierto no debe navegar a #inicio */
  body.menu-abierto .cabecera .marca { pointer-events: none; }
}

/* En pantallas de 320-360 px las tres columnas de tipo de inmueble dejan 71 px
   de caja útil y "Viviendas" a 16 px mide 74: no se corta, pero roza el borde.
   Un punto menos y vuelve a respirar. */

@media (max-width: 379px) {
  .tipos .card--compacta { padding: 14px 4px; }
  .tipos .card--compacta .card__titulo { font-size: 0.9375rem; }
}