.anuncios-lista {
min-width: 0;
}
.tarjeta-horizontal {
--card-media-width: 110px;
--card-tier: var(--app-card-tier-base);
position: relative;
isolation: isolate;
min-width: 0;
height: 172px;
overflow: hidden;
display: grid;
grid-template-columns: var(--card-media-width) minmax(0, 1fr);
border: 1px solid var(--app-card-line);
border-radius: var(--app-radius-sm);
background: var(--app-card-surface);
color: var(--app-text);
box-shadow: var(--app-card-shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarjeta-horizontal:hover {
border-color: var(--app-card-line-hover);
box-shadow: var(--app-card-shadow-hover);
transform: translateY(-1px);
}
.tarjeta-horizontal::before {
content: "";
position: absolute;
z-index: 5;
inset: 0 0 auto;
height: 2px;
background: var(--card-tier);
pointer-events: none;
}
.tarjeta-horizontal.bordervips {
--card-tier: var(--app-card-tier-vip-bar);
border-color: var(--app-card-tier-vip-line);
}
.tarjeta-horizontal.borderlux {
--card-tier: var(--app-card-tier-lux-bar);
border-color: var(--app-card-tier-lux-line);
}
.tarjeta-slider {
position: relative;
min-width: 0;
min-height: 0;
overflow: hidden;
background: var(--app-service);
}
.tarjeta-slider > a,
.tarjeta-slider > a > .media-skeleton,
.tarjeta-slider > .media-skeleton {
width: 100%;
height: 100%;
display: block;
}
.anuncios-lista .tarjeta-horizontal.deferred-render {
content-visibility: auto;
contain-intrinsic-size: 172px;
}
.tarjeta-slider > a.open-gallery.has-card-loop {
position: relative;
overflow: hidden;
}
.tarjeta-slider .card-loop-video {
position: absolute;
z-index: 3;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
opacity: 0;
transition: opacity 180ms ease;
}
.tarjeta-slider > a.open-gallery.has-card-loop.is-loop-ready .card-loop-video { opacity: 1; }
.tarjeta-slider img,
.tarjeta-slider .img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-skeleton {
position: relative;
overflow: hidden;
background: var(--app-service);
}
.media-skeleton img {
position: relative;
z-index: 2;
}
.media-skeleton::before {
content: "";
position: absolute;
z-index: 1;
inset: 0;
translate: -100% 0;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-surface) 50%, transparent), transparent);
animation: app-card-skeleton 1.25s ease-in-out infinite;
}
.media-skeleton:has(img.lazyloaded)::before,
.media-skeleton:has(img.ls-is-cached)::before,
.media-skeleton.is-loaded::before,
.media-skeleton.has-error::before { display: none; }
@keyframes app-card-skeleton { to { translate: 100% 0; } }
.media-fallback {
width: 100%;
height: 100%;
display: grid;
place-content: center;
justify-items: center;
color: var(--app-muted);
font-size: 11px;
}
.badge-photocounter,
.badge-videocounter,
.plan_badge.tier-overlay {
position: absolute;
z-index: 4;
}
.badge-photocounter {
inset: auto auto 7px 7px;
background: var(--app-badge-media-scrim);
border-color: rgba(255, 255, 255, .18);
color: #fff;
backdrop-filter: blur(6px);
}
.badge-videocounter {
inset: auto 7px 7px auto;
background: rgba(19, 19, 20, .72);
border-color: rgba(255, 255, 255, .18);
color: #fff;
backdrop-filter: blur(6px);
}
.plan_badge.tier-overlay { inset: 7px auto auto 7px; }
.plan_badge.top { background: var(--app-badge-media-scrim); color: var(--app-tier-top-overlay-ink); }
.plan_badge.platino { background: var(--app-badge-media-scrim); color: var(--app-tier-vip-overlay-ink); }
.tarjeta-contenido {
min-width: 0;
min-height: 0;
padding: 10px 11px 9px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tarjeta-texto {
min-width: 0;
color: inherit;
text-decoration: none;
}
.tarjeta-header {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 8px;
}
.tarjeta-titulo {
min-width: 0;
margin: 0;
color: var(--app-heading);
font-size: 13px;
line-height: 1.3;
font-weight: 750;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.tarjeta-precio {
margin-inline-start: auto;
color: var(--app-heading);
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.tarjeta-nombre-edad,
.tarjeta-descripcion {
margin: 0;
color: var(--app-muted);
}
.tarjeta-nombre-edad {
margin-top: 4px;
font-size: 10.5px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tarjeta-descripcion {
margin-top: 7px;
font-size: 10.5px;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.nation-flag {
width: 19px;
height: 14px;
margin: 0 2px -2px;
border-radius: 2px;
display: inline-block;
object-fit: cover;
}
.tarjeta-footer {
min-width: 0;
margin-top: auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
}
.tarjeta-footer-left {
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
overflow: hidden;
}
.tarjeta-tiempo {
min-width: 0;
color: var(--app-muted);
font-size: 9.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.badge-reup {
background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface));
color: var(--app-accent);
}
.tarjeta-botones {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 4px;
}
.tarjeta-botones .app-btn {
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
padding: 0;
border: 0;
border-radius: 8px;
box-shadow: none;
}
.tarjeta-botones .app-btn:hover { filter: brightness(.94); }
.tarjeta-botones-right {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 4px;
}
.tarjeta-botones-right .btn-favorito { margin-left: 0; }
.tarjeta-botones .btn-card-flag {
background: var(--app-service);
color: var(--app-muted);
}
.tarjeta-botones .btn-card-flag:hover {
background: var(--app-service-hover);
color: var(--app-service-text);
filter: none;
}
.tarjeta-botones .btn-favorito { background: transparent; color: var(--app-muted); margin-left: auto; }
.tarjeta-botones .btn-favorito:hover,
.tarjeta-botones .btn-favorito:focus-visible { background: transparent; filter: none; }
.tarjeta-botones .btn-favorito i {
font-size: 20px;
color: var(--app-heart);
transition: transform .18s ease;
}
.tarjeta-botones .btn-favorito:hover i,
.tarjeta-botones .btn-favorito:focus-visible i { transform: scale(1.22); }
.tarjeta-botones .btn-favorito:active i { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.tarjeta-botones .btn-favorito i { transition: none; }
.tarjeta-botones .btn-favorito:hover i,
.tarjeta-botones .btn-favorito:focus-visible i { transform: none; }
}
.tarjeta-horizontal .azul { color: var(--app-selection); }
.t-km { color: var(--app-selection); font-weight: 600; }
.tarjeta-vertical-overlay { display: none; }
.list-view .anuncios-lista {
display: grid;
align-items: start;
}
.list-view-compact .anuncios-lista {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.list-view-large .anuncios-lista {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
}
.list-view-large .tarjeta-horizontal {
--card-media-width: 100%;
width: 100%;
height: auto;
aspect-ratio: 9 / 16;
display: block;
border: 0;
border-radius: var(--app-radius-sm);
box-shadow: none;
}
.list-view-large .tarjeta-horizontal:hover { box-shadow: none; transform: none; }
.list-view-large .tarjeta-horizontal::before { display: none; }
.list-view-large .tarjeta-slider { width: 100%; height: 100%; }
.list-view-large .tarjeta-contenido { position: absolute; z-index: 5; inset: 0; padding: 0; pointer-events: none; }
.list-view-large .tarjeta-contenido > :not(.tarjeta-footer) { display: none; }
.list-view-large .tarjeta-footer { position: absolute; inset: auto 5px 5px auto; margin: 0; pointer-events: auto; }
.list-view-large .tarjeta-footer-left,
.list-view-large .tarjeta-botones > :not(.btn-favorito):not(.tarjeta-botones-right) { display: none; }
.list-view-large .tarjeta-botones-right > :not(.btn-favorito) { display: none; }
.list-view-large .tarjeta-botones .btn-favorito { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.list-view-large .tarjeta-vertical-overlay {
position: absolute;
z-index: 3;
inset: 0;
padding: 46px 10px 10px;
color: #fff;
display: flex;
align-items: flex-end;
text-decoration: none;
background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0) 42%);
}
.tarjeta-vertical-info { min-width: 0; flex: 1; }
.tarjeta-vertical-name-age { font-size: 16px; line-height: 1.25; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-vertical-place { margin-top: 3px; padding-inline-end: 38px; color: #d5d5d8; font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-view-large .badge-photocounter { inset: 7px auto auto 7px; }
.list-view-large .badge-videocounter { inset: 7px 7px auto auto; }
.list-view-large .plan_badge.tier-overlay { inset: 7px 7px auto auto; }
.list-view-large .badge-videocounter:has(~ .plan_badge.tier-overlay) {
inset: calc(7px + 20px + 5px) 7px auto auto;
}
.list-results-summary { margin: 6px 0 16px; }
.list-status-alert__close {
width: 28px;
height: 28px;
flex: 0 0 28px;
margin: -3px -3px -3px 0;
padding: 0;
border: 0;
background: transparent;
color: var(--app-muted);
display: grid;
place-items: center;
cursor: pointer;
}
.list-status-alert__close:hover { color: var(--app-heading); }
.list-status-alert__close:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; border-radius: 6px; }
@media (max-width: 374.98px) {
.tarjeta-titulo { -webkit-line-clamp: 1; }
.tarjeta-nombre-edad:has(.t-place) {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 5px;
white-space: normal;
overflow: visible;
}
.tarjeta-nombre-edad .t-place { display: flex; min-width: 0; gap: 4px; white-space: nowrap; }
.tarjeta-nombre-edad .t-city { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-nombre-edad .t-km { flex: 0 0 auto; }
.tarjeta-nombre-edad .t-extra { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-nombre-edad .t-sep { display: none; }
}
@media (max-width: 360px) { .tarjeta-horizontal { --card-media-width: 120px; } }
@media (max-width: 767px) {
.list-view-compact .tarjeta-footer {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
justify-items: start;
gap: 5px;
}
.list-view-compact .tarjeta-footer-left {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
overflow: hidden;
}
.list-view-compact .tarjeta-tiempo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list-view-compact .badge-reup { flex: 0 0 auto; }
.list-view-compact .tarjeta-botones {
width: 100%;
max-width: 100%;
margin-inline-start: 0;
justify-content: flex-start;
}
}
@media (min-width: 480px) { .tarjeta-horizontal { --card-media-width: 130px; } }
@media (min-width: 600px) { .tarjeta-horizontal { --card-media-width: 150px; } }
@media (min-width: 768px) { .list-view-large .anuncios-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) {
.list-view-compact .anuncios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.list-view-large .anuncios-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .list-view-large .anuncios-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .list-view-large .anuncios-lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
.media-skeleton::before { animation: none; }
}
.carrusel-zona { width: 100%; min-width: 0; padding-top: .2rem; }
.carrusel { display: block; width: 100%; max-width: 100%; min-width: 0; }
.carrusel__pista {
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.carrusel__pista::-webkit-scrollbar { width: 0; height: 0; display: none; }
.carrusel__lista {
display: flex;
flex-wrap: nowrap;
gap: 1px;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.carrusel__item { flex: 0 0 calc((100% - 5px) / 6); height: auto; }
@media (max-width: 1399px) { .carrusel__item { flex-basis: calc((100% - 4px) / 5); } }
@media (max-width: 1199px) { .carrusel__item { flex-basis: calc((100% - 3px) / 4); } }
@media (max-width: 991px)  { .carrusel__item { flex-basis: calc((100% - 2px) / 3); } }
@media (max-width: 767px)  { .carrusel__item { flex-basis: calc((100% - 1px) / 2); } }
.carrusel__item img,
.carrusel__item a { -webkit-user-drag: none; user-select: none; }