/* Tipografía & base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
:root{
  --brand:#2563eb;       /* azul */
  --ink:#0f172a;         /* casi negro */
  --muted:#6b7280;       /* gris texto */
  --bg:#f8fafc;          /* fondo suave */
  --card:#ffffff;
  --ring:rgba(37,99,235,.15);
}
*{box-sizing:border-box}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--ink); background:var(--bg);
}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

/* Branding */
.logo-dot{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#60a5fa,#2563eb);
  display:inline-block; box-shadow:0 0 0 3px var(--ring);
}
.brand-text{font-weight:800; letter-spacing:.2px}

/* HERO */
.hero{
  padding:48px 0; background:
    radial-gradient(1200px 300px at -10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 300px at 110% -10%, rgba(16,185,129,.08), transparent 60%);
}
.hero-title{
  font-size: clamp(28px, 3vw, 42px);
  line-height:1.1; font-weight:800; margin:0 0 10px;
}
.grad{background:linear-gradient(90deg,#2563eb,#06b6d4); -webkit-background-clip:text; color:transparent}
.hero-sub{color:var(--muted); font-size:clamp(14px,1.5vw,18px); margin-bottom:18px}

.hero-search .form-control,
.hero-search .form-select{
  border-radius:14px; border:1px solid #e5e7eb; padding:.75rem 1rem; background:#fff;
}
.hero-search .form-control:focus,
.hero-search .form-select:focus{
  border-color:#c7d2fe; box-shadow:0 0 0 .25rem var(--ring);
}

.chips .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid #e5e7eb; padding:.4rem .75rem;
  border-radius:999px; font-size:.9rem; color:#0f172a; margin-right:.5rem;
}

/* Tarjetas */
.card{border:1px solid #eef1f5; border-radius:16px; background:var(--card)}
.listing .card{transition:transform .15s ease, box-shadow .15s ease}
.listing .card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.card-logo{
  width:100%; aspect-ratio:16/9; object-fit:contain;
  background:linear-gradient(180deg,#f9fafb,#f3f4f6);
  border-bottom:1px solid #eef1f5; border-radius:16px 16px 0 0;
}
.badge-type{font-size:.7rem; letter-spacing:.6px}

/* Hero ilustración mock */
.hero-card{
  position:relative; background:#fff; border-radius:20px; padding:24px;
  border:1px solid #e5e7eb; box-shadow:0 14px 32px rgba(15,23,42,.08);
}
.hero-illustration{
  height:220px; border-radius:14px;
  background:
    linear-gradient(135deg,#eff6ff,#eef2ff);
  border:1px dashed #c7d2fe;
}
.hero-badge{
  position:absolute; top:12px; right:12px;
  background:#16a34a; color:#fff; font-weight:700;
  font-size:.75rem; padding:.25rem .5rem; border-radius:999px;
}
.hero-text{margin-top:10px; color:#475569; font-size:.95rem}

/* Footer */
footer{border-top:1px solid #eef1f5; margin-top:40px; padding:30px 0; color:#6b7280}
/* Evitar scroll horizontal */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Im¨¢genes dentro de cards: siempre responsivas */
.card-logo {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ajustar cards para que no rompan layout */
.listing .card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
html, body { overflow-x: hidden; max-width: 100%; }

.card-logo { 
  width: 100%; 
  height: auto; 
  display: block; 
  object-fit: contain;
}
.listing .card { overflow: hidden; }
/* assets/style.css */
.card-logo {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;   /* llena el cuadro; puede recortar */
  display: block;
}
/* Footer */
.site-footer{
  background: #0f1115;
  color:#cfd6e4;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Chips */
.chip{
  background:#f3f5fa;
  border:1px solid #e5eaf2;
  padding:.35rem .75rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  color:#2b2f36;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

/* Alineaci¨®n responsive de botones + chips */
.hero-actions { row-gap: .5rem; }

/* Hero card refinada */
.hero-card{
  background: radial-gradient(1200px 400px at -10% -40%, #cbe7ff 0%, rgba(203,231,255,0) 60%) , #ffffff;
  border:1px solid #e8eef6;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(16,24,40,.08);
  min-height: 240px;
  position: relative;
}
.hero-card .badge-new{
  position:absolute; right:14px; top:12px;
  background:#0bb67f; color:#fff; font-weight:700;
  border-radius:999px; padding:.25rem .6rem; font-size:.8rem;
}
.hero-card .hero-media{
  display:flex; align-items:center; justify-content:center;
  height:160px; border:2px dashed #d6e3f0; border-radius:14px;
  background:#f7fbff;
}
.hero-card .hero-media img{ max-height:140px; object-fit:contain; }
.hero-card .hero-cta{ font-size:.9rem; color:#667085; }
/* Evitar scroll horizontal */
html, body { overflow-x: hidden; max-width: 100%; }

/* Imagen de tarjeta: ocupar ¨¢rea 16:9 */
.card-logo{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* Chips y alineaci¨®n */
.chip{
  background:#f3f5fa; border:1px solid #e5eaf2;
  padding:.35rem .75rem; border-radius:999px;
  font-weight:600; font-size:.95rem; color:#2b2f36;
  display:inline-flex; align-items:center; gap:.4rem;
}
.hero-actions{ row-gap:.5rem; }

/* Hero card */
.hero-card{
  background: radial-gradient(1200px 400px at -10% -40%, #cbe7ff 0%, rgba(203,231,255,0) 60%) , #ffffff;
  border:1px solid #e8eef6; border-radius:20px; padding:18px;
  box-shadow:0 12px 40px rgba(16,24,40,.08); min-height:240px; position:relative;
}
.hero-card .badge-new{
  position:absolute; right:14px; top:12px; background:#0bb67f; color:#fff;
  font-weight:700; border-radius:999px; padding:.25rem .6rem; font-size:.8rem;
}
.hero-card .hero-media{
  display:flex; align-items:center; justify-content:center;
  height:160px; border:2px dashed #d6e3f0; border-radius:14px; background:#f7fbff;
}
.hero-card .hero-media img{ max-height:140px; object-fit:contain; }

/* Footer */
.site-footer{ background:#0f1115; color:#cfd6e4; border-top:1px solid rgba(255,255,255,.06); }
/* Hero destacado */
.hero-card{
  background: #fff;
  border:1px solid #e8eef6;
  border-radius:20px;
  padding:18px;
  box-shadow:0 12px 40px rgba(16,24,40,.08);
  position:relative;
}

.hero-card .badge-new{
  position:absolute; right:14px; top:12px;
  background:#0bb67f; color:#fff;
  font-weight:700; border-radius:999px;
  padding:.25rem .6rem; font-size:.8rem;
}

/* Ventana de imagen destacada */
.hero-card .hero-media{
  display:flex;
  align-items:center;
  justify-content:center;
  height:160px;
  border-radius:14px;
  background:#f7f9fc;        /* Fondo claro */
  overflow:hidden;
}

.hero-card .hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;          /* Llenar el cuadro */
  border-radius:14px;
}