/* Tarjetas del listado de casas (diseño 2a)
   Sólo aplica dentro de .listado, no cambia estilos globales.
   Móvil: tarjeta vertical. Escritorio: fila de 3 columnas (foto · detalle · precio).
   El cambio de layout depende del ancho del listado (container query), porque la
   columna del listado mide 620-770px aun en escritorio. */

.listado-wrap { container-type: inline-size; }

.listado { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.listado > li { margin: 0; padding: 0; }

.casa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden; color: #222; font-size: 14px; line-height: 1.4; }
.casa a { color: inherit; }

/* Foto + carrusel */
.casa__foto { position: relative; aspect-ratio: 4 / 3; background: #f1f3f5; }
.casa__enlace { display: block; height: 100%; }
.casa__foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; }
.casa__prev,
.casa__next { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #222; font-size: 26px; line-height: 40px; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.casa__prev { left: 8px; }
.casa__next { right: 8px; }
.casa__contador { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; }
.casa__video { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff !important; font-size: 12px; text-decoration: none !important; }

/* Etiqueta de promoción: en móvil sobre la foto */
.casa__promo-tag { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 4px; background: #c62828; color: #fff; font-size: 12px; font-weight: 700; }

/* Detalle */
.casa__detalle { padding: 12px 14px 4px; }
.casa__zona { font-size: 13px; color: #666; }
.casa__zona a { color: #666; text-decoration: underline; }
.casa__estado { display: none; }
.casa__nombre { margin: 2px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #222; }
.casa__nombre a { color: #222; text-decoration: none; }
.casa__nombre a:hover { text-decoration: underline; }
.casa__capacidad { font-size: 14px; }
.casa__capacidad b { font-weight: 400; }
.casa__capacidad span:first-child,
.casa__capacidad span:first-child b { font-weight: 700; }
.casa__capacidad span + span:before { content: " · "; color: #666; font-weight: 400; }
.casa__amenidades { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.casa__amenidades li { margin: 0; padding: 2px 10px; border-radius: 12px; background: #f1f3f5; color: #444; font-size: 12px; line-height: 1.6; }
.casa__amenidades a { color: #444; text-decoration: none; }
.casa__promo { margin: 8px 0 0; color: #c62828; font-size: 13px; }
.casa__promo span { display: block; }

/* Precio */
.casa__precio { padding: 8px 14px 14px; }
.casa__monto { display: inline; font-size: 20px; font-weight: 700; }
.casa__nota { display: inline; margin-left: 6px; color: #666; font-size: 13px; }
.casa__noche { margin-top: 2px; color: #666; font-size: 13px; }
.casa__btn { display: block; height: 44px; margin-top: 10px; border-radius: 6px; background: #1f6fb2; color: #fff !important; font-size: 15px; font-weight: 600; line-height: 44px; text-align: center; text-decoration: none !important; }
.casa__btn:hover,
.casa__btn:focus { background: #185a91; }

/* Escritorio: fila horizontal */
@container (min-width: 560px) {
    .casa { grid-template-columns: min(42%, 360px) minmax(0, 1fr) min(28%, 240px); }
    /* la foto llena la altura de la fila sin desbordar su columna */
    .casa__foto { align-self: stretch; aspect-ratio: auto; min-height: 220px; }
    .casa__enlace { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; }
    .casa__prev,
    .casa__next { width: 40px; height: 40px; margin-top: -20px; line-height: 36px; font-size: 24px; }
    .casa__video { right: auto; left: 8px; }

    .casa__detalle { padding: 14px 16px; }
    .casa__estado { display: inline; }
    .casa__nombre { font-size: 20px; }
    .casa__capacidad { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
    .casa__capacidad span,
    .casa__capacidad span:first-child { font-weight: 400; }
    .casa__capacidad b { font-weight: 700; }
    .casa__capacidad span + span:before { content: none; }
    .casa__amenidades li { font-size: 13px; }

    .casa__precio { display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; border-left: 1px solid #f0f0f0; }
    .casa__promo-tag { position: static; align-self: flex-start; margin-bottom: auto; }
    .casa__monto { display: block; font-size: 24px; }
    .casa__nota { display: block; margin: 0; }
    .casa__btn { margin-top: 12px; }
}