:root{
  --brand:#ff7a00; --brand-600:#e56f00;
  --ink:#1f2937; --muted:#6b7280;
  --bg:#fff8f3; --card:#ffffff; --line:#ece6e1; --chip:#fff1e6;
}
html,body{background:var(--bg)!important;color:var(--ink);margin:0;min-height:100%}
a{text-decoration:none}
.navbar{background:#fff;border-bottom:1px solid var(--line)}
.brand{color:var(--brand)}
.btn-brand{background:var(--brand);color:#fff;border:0}.btn-brand:hover{background:var(--brand-600)}
.chip{background:var(--chip);border:1px solid #ffd7bd;color:#8a4404;border-radius:999px;padding:.35rem .6rem;font-weight:600}
.chip-state{background:#ffe9d6;border-color:#ffc59a}

/* contenedor único (NO mezclar con .container de Bootstrap) */
.wrap{max-width:1240px;width:100%;margin:0 auto;padding-left:12px;padding-right:12px}

/* Tarjetas / grid */
.hero{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px rgba(16,24,40,.06)}
.swiper{--swiper-pagination-color:var(--brand);--swiper-navigation-color:var(--brand);border-radius:14px}
.fit{width:100%;height:430px;object-fit:cover}

/* Filtros */
.filters{gap:.5rem;flex-wrap:wrap}
.filter-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1rem;font-weight:600;cursor:pointer}
.filter-pill.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* Buscador */
.search-pill{border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;background:#fff;padding:.25rem}
.search-pill input{border:0;outline:none;padding:.5rem 1rem;width:260px;background:transparent}
@media (max-width:575.98px){ .search-pill input{width:170px} }

/* Card grid */
.cardy{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(16,24,40,.06);transition:.2s}
.cardy:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,24,40,.12)}
.thumb{height:190px;background:#fff3e8;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.badge-chip{font-weight:700}
.b-perd{background:#ffe1b8;color:#7d3e00}
.b-enc{background:#dff7e5;color:#0f5132}

/* Recompensa */
.reward{display:inline-block;background:#dc2626;color:#fff;font-weight:800;border-radius:10px;padding:.25rem .55rem;box-shadow:0 6px 14px rgba(220,38,38,.25)}
.reward .ico{margin-right:.35rem}

/* Ads (opcional) */
.ad-box{background:#fff;border:1px dashed #f2b68d;border-radius:12px;min-height:90px}
.ad-label{font-size:.75rem;color:var(--muted)}

/* === Cards uniformes === */
.cardy{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Foto con proporción fija y recorte elegante (estructura base) */
.thumb{
  position:relative;
  background:#fff3e8;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Contenido de la card ocupa el resto y empuja el botón al fondo */
.card-bodyy{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  flex:1;
}

/* Reservamos alto mínimo para los textos variables */
.card-meta{
  min-height: 46px; /* ~2 líneas */
}

/* El botón va al fondo siempre */
.card-cta{
  margin-top:auto;
}

/* (Opcional) Clamp en 2 líneas para la ubicación si es muy larga */
.line-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== Footer sticky ===== */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main.wrap { flex: 1; }
footer { margin-top: auto; }

/* =========================================================
   OVERRIDE ESPECÍFICO PARA AMPLIAR LA FOTO EN LAS CARDS
   (deja intacto el resto de tu CSS)
   ========================================================= */
.cardy .thumb {
  height: 320px !important;   /* cámbialo a 300-360px a tu gusto */
  background: #e9eef3;
  overflow: hidden;
  position: relative;
}
.cardy .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* llena sin deformar (recorta un poco) */
  object-position: center;
}
/* Un poco más alto en desktop */
@media (min-width: 992px){
  .cardy .thumb{ aspect-ratio: 16 / 8.5; }
}


/* Marco con proporción fija (todas las cards pareja) */
.cardy .thumb{
  position: relative;
  aspect-ratio: 4 / 3;     /* 4:3 luce bien con fotos de perros */
  background: #eef2f6;     /* color de fondo neutro */
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* La imagen llena el marco */
.cardy .thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-position:center;
}

/* Horizontal / panorámica: llenamos y recortamos un poco */
.cardy .thumb img.fit-cover{
  object-fit: cover;
}

/* Vertical: mostramos completa, sin cortes (puede dejar bandas) */
.cardy .thumb img.fit-contain{
  object-fit: contain;
  background: linear-gradient(180deg,#eef2f6,#e9eef3);
}

/* En desktop, puedes dar un poquito más de aire a la foto si quieres */
@media (min-width: 992px){
  .cardy .thumb{ aspect-ratio: 16 / 10; } /* opcional; quita si prefieres 4:3 */
}

/* Asegurar que el botón queda al fondo (ya lo tenías, lo reforzamos) */
.cardy{ display:flex; flex-direction:column; }
.card-bodyy{ display:flex; flex-direction:column; flex:1; }
.card-cta{ margin-top:auto; }