:root{
  --brand:#0a9800;
  --brand-2:#2f9726;
  --bg:#f5f7fb;
}
*{ box-sizing: border-box; }
body{ margin:0; background:var(--bg); font-family: system-ui, -apple-system, Roboto, Segoe UI, Arial, sans-serif; }

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 16px; background:var(--brand); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.topbar .brand{ display:flex; align-items:center; gap:8px; font-weight:600; }

.main-tabs{ 
  max-width:1100px; 
  margin:0 auto; }
sl-tab[slot="nav"]{ padding:12px 16px; }

.hero{
  padding:40px 16px 24px;
  text-align:center;
}
.hero h1{ margin:0 0 8px; 
  font-size:clamp(22px,5vw,42px); 
  color:var(--brand); }
.hero p{ 
  margin:0 0 16px; 
  color:#050608; }
.hero-img{
  width: min(100%, 980px);
  max-height: 420px;          /* evita que crezca demasiado */
  display: block;
  margin: 16px auto 20px;     /* centrada y con aire */
  border-radius: 14px;
  object-fit: cover;          /* recorte elegante si no es 16:9 */
  aspect-ratio: 16/9;         /* mantiene proporción visual */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  outline: 3px solid #0b6b3a22; /* toque verde suave */
}

.content{ 
  max-width:900px;
   margin:16px auto; 
   padding:0 16px; }
.grid{ 
  max-width:1100px; 
  margin:16px auto; 
  padding:0 16px;
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.career sl-button{ 
  margin-top:10px; }

.info-card{ 
  display:block; }
.info-card sl-details{ 
  margin-bottom:8px; }

.actions{ display:flex; justify-content:flex-end; margin-top:12px; }

#toast{ position:fixed; right:16px; bottom:16px; }