/*////////////////////////////////////////////////////////////////////////////////////////////////////

    Themes Bootstrap - Smart Agency Template v1.0.0 (https://themesbootstrap.com.mx/templates/smart-agenct-template.html)
    Copyright 2019 Themes Bootstrap
    Licensed under MIT (https://github.com/diegovr7/smart-agency/blob/master/LICENSE)

////////////////////////////////////////////////////////////////////////////////////////////////////*/
:root{
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-600: #1e40af;
  --accent: #06b6d4;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,0.08);
  --max-width: 1180px;
  --card-img-height: 220px; /* valor por defecto */
  font-size: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Skip link */
.skip-link{
  position:fixed;
  left:8px;
  top:8px;
  background:#111827;
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  z-index:2000;
  transform:translateY(-120%);
  transition:transform .18s ease;
  text-decoration:none;
}
.skip-link:focus{transform:translateY(0)}

/* Header / Navbar */
.site-header{
  background:transparent;
  padding:12px 0;
}
.navbar .container{max-width:var(--max-width)}
.brand{display:flex;align-items:center}
.logo-brand{height:44px;width:auto}

/* Hero */
.hero{
  padding:10px 0;
  background:linear-gradient(180deg, rgba(37,99,235,0.06), transparent 40%);
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:32px;
  align-items:center;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 16px;
}
.hero-content h1{
  margin:0 0 8px;
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-0.02em;
}
.lead{
  color:var(--muted);
  margin:0 0 0px;
  max-width:90ch;
}
.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--primary);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  box-shadow: var(--shadow-sm);
  border: none;
  text-decoration:none;
}
.btn-cta:hover{background:var(--primary-600)}
.btn-cta:focus{outline:3px solid rgba(37,99,235,0.15);outline-offset:3px}

/* Portfolio grid */
.section{padding:10px 0}
.section-portfolio .container{max-width:var(--max-width)}
.section-title{
  text-align:left;
  margin:0 0 20px;
  font-size:20px;
  font-weight:600;
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:focus-within,
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md)}

/* imagenes de tarjeta: permitir recorte centrado por defecto y opción contain */
.card-img{
  width:100%;
  height:var(--card-img-height);
  object-fit:cover;         /* recorta centrado por defecto */
  object-position:center;
  display:block;
  background:#e6eef9;
}

/* cuando la imagen es larga/vertical y debe mostrarse completa */
.card-img--contain{
  object-fit:contain;       /* muestra la imagen completa dentro del área */
  background: linear-gradient(180deg,#eef2ff,#f8fafc); /* fondo neutro para espacios vacíos */
  padding:8px;
}

/* Overlay */
.card-overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: linear-gradient(180deg, rgba(11,18,35,0) 0%, rgba(11,18,35,0.6) 100%);
  color:#fff;
  transform:translateY(0);
}
.card-title{
  margin:0;
  font-weight:600;
  font-size:15px;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.btn-download{
  background:rgba(255,255,255,0.12);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.12);
  transition:background .12s ease, transform .12s ease;
}
.btn-download:hover{background:rgba(255,255,255,0.18); transform:translateY(-2px)}
.btn-download:focus{outline:3px solid rgba(255,255,255,0.12); outline-offset:3px}

/* Contact */
.section-contact{background:transparent;padding:32px 0}
.section-contact .muted{color:var(--muted)}

/* Footer */
.site-footer{
  padding:20px 0;
  background:#0f172a;
  color:#cbd5e1;
}
.footer-inner{max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; gap:16px; padding:0 16px}
.footer-copy{margin:0;font-size:14px;color:#cbd5e1}

/* Responsive */
@media (max-width:992px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-visual{display:none}
  .portfolio-grid{grid-template-columns:repeat(1,1fr)}
  .card-img{height:200px}
}
@media (min-width:993px) and (max-width:1200px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1201px){
  .portfolio-grid{grid-template-columns:repeat(3,1fr)}
}

/* altura responsive para tarjetas */
@media (min-width:1200px){
  :root{ --card-img-height: 220px; }
}
@media (min-width:900px) and (max-width:1199px){
  :root{ --card-img-height: 200px; }
}
@media (max-width:899px){
  :root{ --card-img-height: 180px; }
}

/* Focus visible for keyboard users */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(37,99,235,0.18); outline-offset:3px}