:root{
  --bg: #1e2f40;
  --panel:#111826;
  --muted:#9fb0c7;
  --text:#e9eef6;
  --brand:#5eead4;
  --brand-2:#60a5fa;
  --ring: 0 0 0 3px rgba(94,234,212,0.25);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1000px 600px at 10% -10%, rgba(96,165,250,.15), transparent 40%) , var(--bg);
  color: var(--text);
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background: rgba(11,15,23,.6); border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex; align-items:center; gap:1rem; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:700}
.logo{width:64px; height:64px; object-fit:contain; border-radius:8px; background:#0e1525}
.nav{margin-left:auto; display:flex; gap:.6rem; flex-wrap:wrap}
.nav a{
  color:var(--muted); text-decoration:none; padding:.55rem .9rem; border-radius:999px; border:1px solid transparent;
}

.brand span {
  font-size: 1.2rem; /* tamaño de texto */
}

.nav a:hover, .nav a.active{color:var(--text); border-color: rgba(255,255,255,.12); background:rgba(255,255,255,.04)}

.nav-toggle{display:none; margin-left:auto; font-size:1.3rem; background:transparent; color:var(--text); border:0; padding:.4rem .6rem; border-radius:12px}
.nav-toggle:focus{outline:none; box-shadow: var(--ring)}

.hero{
  min-height:62vh; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(11,15,23,.2), rgba(11,15,23,.85)), var(--hero-img) center/cover no-repeat;
}



.hero-inner{text-align:center; padding:5rem 0}
.hero h1{font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem); margin:.2rem 0 1rem}
.hero p{max-width:750px; margin:0 auto 1.5rem; color:var(--muted)}
.actions{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}

.section{padding:3.5rem 0}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding:1.1rem; box-shadow: var(--shadow);
}
.card.tall{padding:0; overflow:hidden}
.card-img{width:100%; height:180px; object-fit:cover; display:block}
.card-body{padding:1.1rem}

.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:1.5rem; align-items:center}
.split-media img{width:100%; height:100%; border-radius: var(--radius); object-fit:cover}
.checklist{padding-left:1rem}
.checklist li{margin:.35rem 0}
.marquee{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; align-items:center; opacity:.9}
.marquee img{width:100%; height:70px; object-fit:cover; border-radius:12px; filter:saturate(0) contrast(1.1); opacity:.8}

.page-title{margin:0 0 .25rem}
.page-lead{color:var(--muted); margin-bottom:1.4rem}

.staff-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.staff-card{overflow:hidden; border-radius: var(--radius); background: #0e1525; border:1px solid rgba(255,255,255,.07)}
.staff-photo img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center ; /* 0% es arriba, 100% es abajo */
  display: block;
}
.staff-info{padding:1rem}
.staff-info .role{color:var(--brand-2); font-weight:600; margin:.2rem 0}
.staff-info .cred{color:var(--muted); margin:0}

.contact-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem; align-items:start}
.form .form-row{display:flex; flex-direction:column; gap:.4rem; margin-bottom:.9rem}
input, textarea{
  width:100%; padding:.8rem .9rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:#0c1322; color:var(--text);
}
input:focus, textarea:focus{outline:none; box-shadow: var(--ring); border-color: transparent}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:999px; border:1px solid transparent;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b0f17; font-weight:700; cursor:pointer;
}
.btn:hover{filter:brightness(1.02)}
.btn:focus{outline:none; box-shadow: var(--ring)}
.btn.btn-outline{
  background: transparent; color: var(--text); border-color: rgba(255,255,255,.2)
}

.alert{
  background: rgba(94,234,212,.12);
  border:1px solid rgba(94,234,212,.4);
  padding: .9rem 1rem; border-radius: 12px; margin-bottom:1rem;
}

.side-img{margin-top:1rem; width:100%; height:220px; object-fit:cover; border-radius:14px}

.site-footer{border-top:1px solid rgba(255,255,255,.08); margin-top:2rem; background: rgba(255,255,255,.02)}
.footer-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1.2rem 0}
.footer-inner a{color:var(--text); opacity:.9}

/* Responsive */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr 1fr}
  .split, .contact-grid{grid-template-columns:1fr}
  .marquee{grid-template-columns:repeat(2,1fr)}
  .staff-grid{grid-template-columns:1fr 1fr}
  .hero{min-height:56vh}
  .nav{display:none; position:absolute; right:1rem; top:64px; background:#0e1525; padding:.6rem; border-radius:14px; border:1px solid rgba(255,255,255,.1)}
  .nav a{display:block; padding:.6rem .8rem}
  .nav-toggle{display:inline-block}
}
@media (max-width: 560px){
  .grid-3{grid-template-columns:1fr}
  .staff-grid{grid-template-columns:1fr}
  .card-img{height:160px}
}



.contact-side a {
  color: var(--text); /* blanco definido en :root */
  text-decoration: none;
}

.contact-side a:hover {
  color: var(--brand); /* opcional: cambia a color de acento al pasar el mouse */
}