/*
  05-responsive.css — 224live · HOME
  Media queries de la Home, por breakpoint descendente.
  Incluye el responsive de las secciones limpiadas (#propiedades, #mercado),
  que en el HTML original iba inline.
  (Las reglas de Servicios y Aviso legal se reincorporan en sus fases.)
*/

/* ─── ≤ 860px ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  #hero {
    grid-template-columns: 1fr;
  }

  .hero-right {
    display: none;
  }

  .problema-layout,
  .concepto-layout,
  .cierre-inner,
  .contacto-layout,
  .prop-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .s-grid,
  .mercado-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── ≤ 820px ─────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .hbg {
    display: flex;
  }
}

/* ─── ≤ 760px ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .accesos-grid {
    grid-template-columns: 1fr;
  }

  .pilares {
    grid-template-columns: 1fr;
  }

  .servicios-note {
    text-align: left;
  }

  /* WA FAB vs botón "Enviar mi caso": el FAB flotante no debe tapar el envío.
     Damos holgura inferior al formulario y compactamos un poco el FAB. */
  #contacto { padding-bottom: calc(var(--pv) + 76px); }

  .wa-fab {
    width: 48px;
    height: 48px;
    bottom: 18px;
    right: 18px;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   SERVICIOS — servicios.html
   ════════════════════════════════════════════════════════════════════════ */

/* ─── ≤ 900px ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .excl-features { grid-template-columns: repeat(2, 1fr); }
}

/* ─── ≤ 860px ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .compra-layout,
  .reloc-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ─── ≤ 760px ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .asesoria-grid { grid-template-columns: 1fr; }
}

/* ─── ≤ 640px ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sinexcl-grid,
  .exp-principles {
    grid-template-columns: 1fr;
  }

  .exp-invest {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ─── ≤ 560px ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .excl-features { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════
   AVISO LEGAL — aviso-legal.html
   ════════════════════════════════════════════════════════════════════════ */

/* MEJORA A11Y: en la página legal (nav sin hamburguesa) mantenemos el CTA
   visible en móvil; los enlaces de navegación quedan disponibles en el footer. */
@media (max-width: 820px) {
  .page-aviso-legal .nav-cta { display: inline-block; }
}

/* ─── ≤ 760px ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .legal-cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .legal-toc { position: static; }
}