/* Adaptación tablet y mobile. Todo vive bajo un breakpoint: el desktop no cambia.
   Prefijo :root para ganarle a Tailwind CDN, que inyecta su hoja después de esta. */

/* ---------- Tablet (768–1023) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Las tarjetas de pago van apiladas a todo el ancho: 440px de alto mínimo dejaba medio bloque vacío */
  :root #pago article > div { min-height: 300px; }
}

/* ---------- Mobile (≤767) ---------- */
@media (max-width: 767px) {
  /* El wordmark del hero a 22vw no cabía en el medianil y se recortaba la última "a" */
  :root #inicio p[aria-hidden="true"] { font-size: 19vw; }

  :root #pago article > div { min-height: 0; }
  :root #pago article h3 { padding-top: 3rem; }
  :root #pago article p.min-h-\[6\.5rem\] { min-height: 0; }

  /* Plano aéreo: a 358px los rótulos de los lotes no se leen; se deja ancho y se desplaza con el dedo */
  :root #masterplan figure > div:first-child { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  :root #masterplan figure > div:first-child img { width: 760px; max-width: none; }

  /* Tabla de valores: con 4 columnas y medianil de 16px la columna de precio se cortaba */
  :root #valores table { font-size: 13px; }
  :root #valores th,
  :root #valores td { padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
  /* Con superficie total y útil son 5 columnas: la de estado se oculta y el lote vendido lo dice en la celda de precio */
  :root #valores th:nth-child(4),
  :root #valores td:nth-child(4) { display: none; }
  :root #valores .precio-guion { display: none; }
  :root #valores .precio-vendido { display: inline; }

  /* Los títulos de pasos quedaban pegados al número */
  :root #comprar li { row-gap: .5rem; }
}

/* ---------- Chico (≤360) ---------- */
@media (max-width: 360px) {
  :root #valores th,
  :root #valores td { padding-left: .375rem; padding-right: .375rem; }
  :root #valores table { font-size: 12px; }
}

/* ---------- Touch: sin hover pegado ---------- */
@media (hover: none) {
  :root .step-row:hover { background-color: transparent; }
  :root #valores tr:hover { background-color: inherit; }
}