/* =====================================================
   RALVA — PROPERTIES GRID (ES + EN) — FINAL FIX
   - Back sin huecos
   - Botones SIEMPRE visibles
   - Tipografía compacta
   - Responsive real
   ===================================================== */

/* =========================
   BASE LAYOUT
   ========================= */

.ralva-prop-page{
  position:relative;
  min-height:100vh;
  padding:28px 16px 70px;
}

.ralva-prop-shell{
  width:min(1200px,100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

.ralva-prop-title{
  margin:0 0 14px;
  font-size:clamp(22px,2vw,30px);
  color:#F8F5F0;
}

.ralva-prop-sub{
  margin:0 0 18px;
  color:rgba(248,245,240,.82);
  font-size:14px;
}

/* =========================
   FILTROS
   ========================= */

.ralva-prop-filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
  padding:14px;
  border-radius:16px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(213,194,154,.22);
  backdrop-filter: blur(10px);
  margin:0 0 18px;
}

.ralva-prop-filters .field{
  min-width:220px;
  flex:1;
}

.ralva-prop-filters label{
  display:block;
  font-size:12px;
  margin-bottom:6px;
  color:#F8F5F0;
}

.ralva-prop-filters select{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(213,194,154,.25);
  background:#fff;
  padding:0 12px;
  outline:none;
}

.ralva-btn{
  height:42px;
  border-radius:12px;
  padding:0 16px;
  border:1px solid rgba(213,194,154,.35);
  background:rgba(213,194,154,.95);
  color:#0e3554;
  font-weight:800;
  cursor:pointer;
}

.ralva-btn.secondary{
  background:transparent;
  color:#F8F5F0;
  border:1px solid rgba(248,245,240,.25);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   GRID
   ========================= */

.ralva-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

/* Tablet */
@media (max-width:980px){
  .ralva-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Móvil */
@media (max-width:560px){
  .ralva-grid{ grid-template-columns:1fr; }
}

/* =========================
   CARD FLIP
   ========================= */

.ralva-card{
  perspective:1200px;
}

.ralva-card__inner{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:18px;
  transform-style:preserve-3d;
  transition:transform .55s ease;
}

.ralva-card:hover .ralva-card__inner{
  transform:rotateY(180deg);
}

.ralva-face{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
  backface-visibility:hidden;
  border:1px solid rgba(213,194,154,.22);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* FRONT */
.ralva-front{ background:#0b1f2f; }

.ralva-front img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ralva-front__overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:12px;
  background:linear-gradient(to top, rgba(0,0,0,.70), transparent);
}

.ralva-front__title{
  margin:0;
  font-size:16px;
  line-height:1.2;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* BACK — (AQUÍ está el arreglo real) */
.ralva-back{
  transform:rotateY(180deg);
  background:rgba(14,53,84,.86);
  color:#fff;

  display:flex;
  flex-direction:column;

  /* ✅ ya NO space-between (evita huecos) */
  justify-content:flex-start;
  gap:8px;

  padding:12px;
}

/* Meta stack compacta */
.ralva-back__meta{
  display:flex;
  flex-direction:column;
  gap:6px;

  /* ✅ esto hace que NO tape los botones */
  flex: 1 1 auto;
  min-height: 0;
}

/* Cada fila meta compacta */
.ralva-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;

  padding:8px 10px;
  background:rgba(0,0,0,.25);
  border-radius:12px;

  margin:0;           /* ✅ adiós margin-bottom */
  line-height:1.05;   /* ✅ más compacto */
}

.ralva-meta b{
  font-size:12px;
  line-height:1.05;
  opacity:.92;
  font-weight:800;
}

.ralva-meta span{
  font-size:13px;
  line-height:1.05;
  font-weight:900;
  text-align:right;
  white-space:nowrap;
}

/* CTA — SIEMPRE visible */
.ralva-back__cta{
  display:flex;
  gap:10px;
  margin-top:auto;        /* ✅ pega CTA al fondo */
  padding-top:4px;
}

.ralva-back__cta a{
  flex:1;
  text-decoration:none;
}

/* Botones estilo premium (faltaban en tu CSS) */
.ralva-pill{
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:900;
  border:1px solid rgba(213,194,154,.35);
  transition:transform .12s ease, filter .12s ease;
}

.ralva-pill.primary{
  background:rgba(213,194,154,.95);
  color:#0e3554;
}

.ralva-pill.ghost{
  background:transparent;
  color:#F8F5F0;
  border:1px solid rgba(248,245,240,.25);
}

.ralva-pill:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

/* =========================
   RESPONSIVE ALTURA (sin cortar)
   ========================= */

/* Tablet: un poco más alto */
@media (max-width:980px){
  .ralva-card__inner{ aspect-ratio: 7 / 9; } /* más alto que 4/3 */
  .ralva-front__title{ font-size:15px; }
}

/* Móvil: mucho más alto + CTA en columna */
@media (max-width:560px){
  .ralva-card__inner{
    aspect-ratio: 3 / 5;
    min-height: 390px;
  }

  /* Botones en columna (nunca desaparecen) */
  .ralva-back__cta{
    flex-direction:column;
  }
  .ralva-back__cta a{
    flex: 1 1 auto;
  }
  .ralva-pill{
    height:44px;
  }

  /* Si algún teléfono es muy bajo, el meta scrollea pero CTA queda fijo visible */
  .ralva-back__meta{
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    padding-right:4px;
  }

  .ralva-meta span{
    white-space:normal; /* permite partir si es necesario */
  }
}

/* Evitar hover raro en touch */
@media (hover: none){
  .ralva-card:hover .ralva-card__inner{ transform:none; }
}

/* =========================
   PAGINACIÓN
   ========================= */

.ralva-pagination{
  margin-top:22px;
  text-align:center;
}

.ralva-pagination .page-numbers{
  display:inline-block;
  min-width:40px;
  height:40px;
  line-height:40px;
  margin:0 4px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid rgba(213,194,154,.28);
  color:#fff;
  background:rgba(0,0,0,.25);
}

.ralva-pagination .current{
  background:rgba(213,194,154,.95);
  color:#0e3554;
  font-weight:900;
}