/* =============================================================================
   Echagüe Theme — styles.css (reemplazo completo)
   ============================================================================= */

/* ---------- Variables de marca ---------- */
:root{
  --brand-navy: #0b2b4c;     /* Azul principal */
  --brand-gold: #e7c85b;     /* Dorado acento  */
  --bg: #ffffff;
  --text-900: #0d1321;       /* Texto principal */
  --text-700: #2a3240;       /* Texto secundario */
  --muted: #f6f7fb;          /* Fondo gris claro */
  --radius: 16px;
  --shadow: 0 10px 25px rgba(3,20,36,.08);
  --container-max: 1200px;
}

/* ---------- Base / Resets suaves ---------- */
html{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*{ box-sizing: border-box; }
body{ margin:0; color:var(--text-900); background:var(--bg); }
a{ color:var(--brand-navy); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; height:auto; }

/* ---------- Layout utilitario ---------- */
.container{ max-width: var(--container-max); margin:0 auto; padding:0 16px; }
.section{ padding: 1.5rem 0; }
.section__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.section__title{ margin:0; font-size:1.5rem; font-weight:900; }

/* Grid generico (no usado para resultados inmersivos) */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(8,1fr); } }
@media (max-width:640px){  .grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:12px; border:1px solid transparent;
  font-weight:700; box-shadow:var(--shadow); cursor:pointer; background:#fff; color:var(--brand-navy);
}
.btn--primary{ background:var(--brand-navy); color:#fff; }
.btn--gold{ background:var(--brand-gold); color:#101010; }
.btn--ghost{ background:#fff; color:var(--brand-navy); border-color:rgba(11,43,76,.15); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* ---------- Header / Nav ---------- */
.header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eef0f4; }
.header__bar{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand__logo{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.brand__name{ font-weight:800; color:var(--brand-navy); letter-spacing:.2px; }
.nav{ display:flex; gap:1rem; }
.nav a{ padding:.4rem .6rem; border-radius:10px; }
.nav a:hover{ background:var(--muted); }

/* ---------- Hero (fondo suave, ruta relativa para subcarpeta) ---------- */
.hero{
  position:relative; color:#fff;
  background:
    linear-gradient(120deg, rgba(11,43,76,.75), rgba(11,43,76,.35)),
    url('../img/sample/placeholder.jpg') center/cover no-repeat;
}
.hero__inner{ padding:4.5rem 0; }
.hero h1{ font-size:2.2rem; margin:0 0 .4rem; }
.hero p{ margin:0 0 1.2rem; color:#eaf2ff; }

/* ---------- Buscador ---------- */
.search{
  background:#fff; border-radius:16px; padding:.8rem; box-shadow:var(--shadow);
  display:grid; gap:.6rem; grid-template-columns:1fr 1fr 1fr 1fr auto;
}
.search__segmented{
  grid-column:1/-1; display:flex; border:1px solid #e3e6ea; border-radius:12px; overflow:hidden;
}
.segment{ flex:1; text-align:center; padding:.6rem; font-weight:700; cursor:pointer; background:#fff; color:var(--text-700); }
.segment.is-active{ background:var(--brand-gold); color:#101010; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-size:.78rem; color:#4c566a; }
.input,.select{ border:1px solid #e3e6ea; border-radius:10px; padding:.72rem .8rem; outline:none; }
.input:focus,.select:focus{ border-color:var(--brand-navy); box-shadow:0 0 0 3px rgba(11,43,76,.1); }
@media (max-width:1024px){ .search{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){  .search{ grid-template-columns:1fr; } }

/* ---------- Cards base ---------- */
.card{
  background:#fff; border:1px solid #eef0f4; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.card__media{ background:#f4f6fa; } /* fondo neutro si la imagen demora */
.card__media img{ width:100%; height:220px; object-fit:cover; } /* default para cards comunes */
.card__body{ padding:1rem; display:flex; flex-direction:column; gap:.45rem; }
.card__title{ font-weight:800; margin:0; }
.card__meta{ display:flex; flex-wrap:wrap; gap:.8rem; color:#4c566a; font-size:.9rem; }
.card__price{ font-weight:900; color:var(--brand-navy); font-size:1.1rem; }
.badge{ display:inline-block; padding:.35rem .6rem; border-radius:999px; font-size:.75rem; font-weight:800; }
.badge--new{ background:#eaf5ff; color:#095a9d; }
.badge--featured{ background:#fff6df; color:#8a6400; }
.badge--sold{ background:#ffefef; color:#9d0c0c; }

/* ---------- Tarjeta de RESULTADOS (inmersiva, 1 por fila) ---------- */
#filter-results{ border-top:1px solid #eef0f4; }
#results-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem;
}
#results-grid > .card{ grid-column:1 / -1; } /* 1 por fila */

.card--result{ border-radius:18px; overflow:hidden; }
.card--result .card__media{
  position:relative;
  height: clamp(320px, 65vh, 720px);   /* foto grande, casi pantalla en móvil */
  aspect-ratio: auto;
  background:#f4f6fa;
  overflow:hidden;
  border-bottom:1px solid #eef0f4;
}
.card--result .card__media img{ object-position:center 30%; }

.card--result .card__media img{
  width:100%;
  height:100% !important;             /* fuerza a cubrir el contenedor */
  object-fit:cover;
  object-position:center center;
  display:block;
  transition: transform .25s ease;
}
.card--result:hover .card__media img{ transform: scale(1.03); }

/* Overlay sólo en la base: precio + chips */
.card__overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:.9rem 1.1rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem;
  color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 85%);
}
.card__price-big{ font-weight:900; font-size:1.12rem; }
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .6rem; border-radius:999px; font-weight:800; font-size:.72rem; border:1px solid transparent; }
.chip--op{ background: var(--brand-gold); color:#101010; }
.chip--type{ background: rgba(255,255,255,.18); color:#fff; border-color: rgba(255,255,255,.25); }

/* Cintas de estado */
.ribbon{
  position:absolute; top:10px; right:-38px; transform:rotate(45deg);
  background:#c21d1d; color:#fff; font-weight:800; padding:.3rem 2.2rem; font-size:.75rem; box-shadow:var(--shadow);
}
.ribbon--reserved{ background:#b67800; }

/* Cuerpo compacto */
.card--result .card__body{ padding:1rem 1.1rem 1.2rem; }
.card--result .card__title{ margin:0 0 .35rem; }
.card--result .card__meta{ gap:.6rem; }
.card__cta{ margin-top:.6rem; }

/* Scroll-snap vertical en móvil (encaja una propiedad por pantalla) */
@media (max-width:640px){
  #results-grid{ scroll-snap-type: y proximity; }
  #results-grid > .card{ scroll-snap-align: start; }
}

/* ---------- Carousel ---------- */
.carousel{ position:relative; }
.carousel__track{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem .25rem 1rem;
}
.carousel__slide{
  scroll-snap-align:start; flex:0 0 88%;
  border-radius:16px; overflow:hidden; border:1px solid #eef0f4; box-shadow:var(--shadow); background:#fff;
}
.carousel__slide .media{ aspect-ratio:16/9; background:#f4f6fa; }
.carousel__slide img{ width:100%; height:100% !important; object-fit:cover; }
.carousel__caption{ padding:.75rem 1rem; }
.carousel__btn{
  position:absolute; top:42%; transform:translateY(-50%);
  background:#fff; border:1px solid #e3e6ea; border-radius:999px; padding:.6rem; box-shadow:var(--shadow); cursor:pointer;
}
.carousel__btn--prev{ left:-.3rem; }
.carousel__btn--next{ right:-.3rem; }
@media (min-width:640px){  .carousel__slide{ flex-basis:46%; } }
@media (min-width:1024px){ .carousel__slide{ flex-basis:31%; } }

/* ---------- Casos de éxito (galería 4) ---------- */
.gallery4{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1rem;
}
.gallery4__item{
  grid-column:span 3;
  aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow); border:1px solid #eef0f4;
}
.gallery4__item img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:1024px){ .gallery4__item{ grid-column:span 6; } }
@media (max-width:640px){  .gallery4__item{ grid-column:span 12; } }

/* ---------- Footer ---------- */
.footer{ background:#081e36; color:#cdd7e5; padding:2rem 0; margin-top:3rem; }
.footer a{ color:#fff; }
.footer__cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; }
.footer__brand{ display:flex; gap:1rem; align-items:center; }
.footer__brand img{ width:48px; height:48px; border-radius:50%; }
.footer__copy{ margin-top:1rem; color:#8ba0bc; font-size:.9rem; }
@media (max-width:640px){ .footer__cols{ grid-template-columns:1fr; } }

/* ---------- Accesibilidad / Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
/* Garantiza que todas las fotos de resultados llenen el contenedor */
.card--result .card__media{ background:#f4f6fa; }
.card--result .card__media img{
  width:100%;
  height:100% !important;
  object-fit:cover;
  object-position:center center; /* si querés subir un poco el foco: center 30% */
  display:block;
}