/* === Base styles === */
:root{
  --bg: #004080;         /* profundo azul petróleo */
  --bg-2:#00264d;
  --accent: #d4af37;     /* dorado ingeniería */
  --text: #1e293b;       /* slate-900 */
  --muted:#475569;       /* slate-600 */
  --surface:#ffffff;
  --surface-2:#f8fafc;   /* slate-50 */
  --link:#1e3a8a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--surface-2)}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* === Layout === */
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:1px solid #e2e8f0}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;color:#004080}
.menu{display:flex;gap:20px}
.menu a{font-weight:600;color:#004080}
.menu a.btn{background:var(--accent);color:#004080;padding:10px 14px;border-radius:12px}
.menu a.btn:hover{filter:brightness(.95);text-decoration:none}

/* === Hero === */
.hero{background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);color:white;padding:72px 0 56px;position:relative;overflow:hidden}
.hero .title{font-size:42px;line-height:1.1;margin:0 0 14px;font-weight:800}
.hero .subtitle{font-size:18px;opacity:.9;max-width:780px}
.hero .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid transparent;font-weight:700;cursor:pointer}
.btn.primary{background:var(--accent);color:#004080}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.25);color:white}

/* === Logos grid === */
.section{padding:56px 0}
.section h2{font-size:28px;margin:0 0 16px}
.section p.lead{color:var(--muted);margin:0 0 24px}
.logogrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.logo-card{background:white;border:1px solid #e2e8f0;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:18px;min-height:110px;transition:transform .18s ease, box-shadow .18s ease}
.logo-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(2,6,23,.08)}

/* === Two columns === */
.twocol{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.card{background:white;border:1px solid #e2e8f0;border-radius:16px;padding:22px}
.card h3{margin-top:0;font-size:20px}

/* === Contact form === */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1 / -1}
.input{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font-size:16px}
.textarea{width:100%;min-height:140px;resize:vertical}
.helper{font-size:12px;color:#64748b;margin-top:6px}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:10px}
.alert{padding:12px 14px;border-radius:12px;font-size:14px}
.alert.success{background:#ecfdf5;border:1px solid #34d399;color:#065f46}
.alert.error{background:#fef2f2;border:1px solid #ef4444;color:#7f1d1d}

/* === Footer === */
.footer{background:white;border-top:1px solid #e2e8f0;padding:30px 0;margin-top:56px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.footer h4{margin:0 0 10px;font-size:16px}
.small{font-size:13px;color:#64748b}

/* === Responsive === */
@media (max-width: 980px){
  .twocol{grid-template-columns:1fr}
  .logogrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .menu{display:none}
  .hero .title{font-size:34px}
  .logogrid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}


.grid-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  align-items: center;
  justify-items: center;
}
.grid-logos img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
  display: block;
}


.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
}
.gallery-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s;
}
.gallery-grid img:hover {
  transform: scale(1.05);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.video-card {
  position: relative;
}
.video-card img {
  width: 100%;
  border-radius: 8px;
}
.video-card .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 8px;
}
.video-card:hover .overlay {
  opacity: 1;
}
.video-card .overlay a {
  background: #d9534f;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
}