/* ========== Base ========== */
:root{
  --bg: #0f2f4a;
  --bg-2:#0b2438;
  --text:#0b1220;
  --muted:#5b6b7a;
  --card:#ffffff;
  --soft:#eef2f6;
  --line: rgba(15,47,74,.15);
  --radius: 18px;
  --shadow: 0 12px 30px rgba(2,10,20,.12);
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background: #f6f7fb;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

.container{
  width: min(var(--max), calc(100% - 32px));
  margin-inline:auto;
}

/* ========== Header / Nav ========== */
.header{
  position: sticky;
  top:0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(15,47,74,.98), rgba(11,36,56,.98));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 180px;
}
.brand img{
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  padding:6px;
}
.brand strong{
  color:#fff;
  letter-spacing:.2px;
  font-weight: 800;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:22px;
}
.navlinks a{
  color: rgba(255,255,255,.9);
  font-weight: 650;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.navlinks a:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.social{
  display:flex;
  align-items:center;
  gap:10px;
}
.iconbtn{
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .2s ease, transform .2s ease;
}
.iconbtn:hover{background: rgba(255,255,255,.16); transform: translateY(-1px);}
.iconbtn svg{width:18px; height:18px; fill:#fff}

/* Hamburger */
.burger{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  cursor:pointer;
}
.burger span{
  display:block;
  width: 20px;
  height: 2px;
  background:#fff;
  margin: 5px auto;
  border-radius:2px;
}

/* Mobile menu drawer */
.drawer{
  display:none;
  padding: 0 0 14px 0;
}
.drawer a{
  display:block;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color:#fff;
}

/* ========== Hero ========== */
.hero{
  position: relative;
  min-height: 62vh;
  background: #0b2438;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg, rgba(11,36,56,.85), rgba(11,36,56,.45), rgba(11,36,56,.85));
  z-index:1;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.05);
}
.hero-inner{
  position: relative;
  z-index: 2;
  padding: 56px 0;
  display:flex;
  align-items:flex-end;
  min-height: 62vh;
}
.hero-title{
  color:#fff;
  font-weight: 900;
  font-size: clamp(34px, 5.2vw, 64px);
  letter-spacing: .8px;
  margin:0;
  text-transform: uppercase;
}

/* ========== Sections ========== */
.section{
  padding: 56px 0;
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.grid-2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}
.h-eyebrow{
  display:inline-block;
  font-weight: 900;
  color: var(--bg);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.h2{
  margin: 8px 0 10px;
  font-size: 26px;
}
.p{
  margin:0;
  line-height: 1.6;
  color: #1a2a3a;
}
.ul{
  margin: 14px 0 0;
  padding-left: 18px;
  color: #1a2a3a;
  line-height: 1.65;
}
.ul li{margin: 6px 0}

.brandstrip{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-top: 18px;
}
.brandstrip img{
  height: 80px;
  width:auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
}

.brandiso img{
  height: 150px;
  width:auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
}

.brands2 img{
  height: 80px;
  width:auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
}

.brandstriplog img{
  height: 150px;
  width:auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
}

.media{
  display:grid;
  gap: 12px;
  align-self: flex-start;
}
.media .img{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(2,10,20,.10);
}
.media .img img{
  width:100%;
  height: 200px;
  object-fit: cover;
}

/* Video */
.video{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(2,10,20,.10);
  background:#000;
}
.video iframe{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  display:block;
}

/* Clients grid */
.clients{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.clients .logo{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display:grid;
  place-items:center;
  min-height: 110px;
  box-shadow: 0 8px 22px rgba(2,10,20,.08);
}
.clients .logo img{max-height: 66px; width:auto; object-fit:contain}

/* Equip lists */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.kicker{
  font-weight: 900;
  color: var(--bg);
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 6px;
}
.list{
  margin:0;
  padding-left: 18px;
  line-height: 1.7;
}

/* Contact form */
.form{
  display:grid;
  gap: 12px;
  margin-top: 16px;
}
.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field label{
  display:block;
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 6px;
  color: #122233;
}
.input, .textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,47,74,.18);
  background: #fbfcff;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.textarea{min-height: 120px; resize: vertical}
.input:focus, .textarea:focus{
  border-color: rgba(15,47,74,.45);
  box-shadow: 0 0 0 4px rgba(15,47,74,.10);
}
.btn{
  border:0;
  cursor:pointer;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg);
  color:#fff;
  font-weight: 800;
  letter-spacing:.2px;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.06)}
.note{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Footer */
.footer{
  margin-top: 56px;
  background: linear-gradient(180deg, #0b2438, #091f30);
  color:#fff;
  padding: 36px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.footer h6{
  margin:0 0 10px;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
  opacity:.9;
}
.footer p{
  margin:0;
  line-height:1.6;
  opacity:.95;
}
.footer .footlogo img{
  width: 92px;
  height:auto;
  opacity:.95;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px;
  background: rgba(255,255,255,.06);
}

/* Toast */
.toast{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 80;
  background:#0b2438;
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  transform: translateY(20px);
  opacity: 0;
  pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
  max-width: 420px;
}
.toast.show{
  transform: translateY(0);
  opacity: 1;
}

/* ========== Responsive ========== */
@media (max-width: 900px){
  .grid-2{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .clients{grid-template-columns: repeat(2, 1fr)}
  .footer-grid{grid-template-columns: 1fr}
  .navlinks, .social{display:none}
  .burger{display:block}
  .drawer{display:block}
  .row{grid-template-columns: 1fr}
  .hero-inner{align-items:center}
}

/* =========================
   CONTACT FORM – BENDER
========================= */

.contact-form {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #0b2438;
}

.contact-input,
.contact-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,47,74,.25);
  background: #f9fbfd;
  font-size: 14px;
  outline: none;
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: #0b3a67;
  box-shadow: 0 0 0 3px rgba(11,58,103,.15);
}

.contact-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Button */
.contact-btn {
  align-self: flex-start;
  background: linear-gradient(180deg, #0b3a67, #072b4a);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 24px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Responsive */
@media (max-width: 900px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}

.ig-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.ig-item{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(15,47,74,.15);
  box-shadow: 0 10px 22px rgba(2,10,20,.08);
  aspect-ratio: 1 / 1;
  background: #fff;
}

.ig-item a{display:block; height:100%;}
.ig-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .25s ease;
}
.ig-item:hover img{transform: scale(1.03);}

@media (max-width: 900px){
  .ig-grid{grid-template-columns: repeat(2, 1fr);}
}

/* =========================
   CERTIFICACIONES (FIX LAYOUT)
========================= */

.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

/* Tarjeta compacta */
.cert-item {
  background: #ffffff;
  border: 1px solid rgba(15,47,74,.15);
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  box-shadow: 0 6px 16px rgba(2,10,20,.08);
}

/* Logos más chicos */
.cert-item img {
  width: 72px;
  height: 52px;
  object-fit: contain;
}

/* Texto */
.cert-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #0b2438;
}

.cert-item strong {
  font-weight: 800;
}

/* Desktop grande: 2 columnas SOLO dentro del bloque izquierdo */
@media (min-width: 1100px) {
  .cert-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .cert-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
   ABOUT2 / CERTIFICACIONES (NEW)
========================= */

.about2 {
  padding: 56px 0;
}

.about2-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 26px;
  align-items: start;
  border: 1px solid rgba(15,47,74,.14);
}

/* Left text */
.about2-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #0b3a67;
  text-transform: uppercase;
}

.about2-h2 {
  margin: 8px 0 10px;
  font-size: 30px;
  line-height: 1.15;
  color: #071f33;
}

.about2-h3 {
  margin: 6px 0 10px;
  font-size: 20px;
  line-height: 1.2;
  color: #071f33;
}

.about2-p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #0b2438;
}

.about2-p2 { margin-top: 14px; }

.about2-ul {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #0b2438;
  font-size: 15px;
  line-height: 1.55;
}

.about2-spacer { height: 18px; }

/* Cert grid */
.about2-certs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;  /* ✅ una sola columna */
  gap: 18px;                  /* ✅ separación prolija */
}

/* Tarjeta */
.about2-cert {
  border-radius: 20px;
  border: 1px solid rgba(15,47,74,.18);
  background: #ffffff;
  padding: 22px 26px;

  display: grid;
  grid-template-columns: 220px 1fr;  /* ✅ logo grande + texto cómodo */
  gap: 18px;
  align-items: center;

  box-shadow: 0 10px 26px rgba(2,10,20,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.about2-cert:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(2,10,20,.15);
}

/* Contenedor del logo */
.about2-logo {
  width: 220px;
  height: 120px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(15,47,74,.14);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

/* Imagen del logo */
.about2-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about2-certtitle {
  font-weight: 900;
  font-size: 18px;     /* ✅ como ISO */
  color: #071f33;
  margin-bottom: 6px;
}

.about2-certdesc {
  font-size: 15px;     /* ✅ como ISO */
  line-height: 1.6;
  color: #0b2438;
}

/* Tablets */
/*@media (max-width: 1100px) {
  .about2-certs {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .about2-cert {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .about2-logo {
    width: 100%;
    height: 130px;
  }
}

/* Right side */
.about2-right {
  display: grid;
  gap: 16px;
  align-content: start;
}

.about2-brand {
  border-radius: 18px;
  /*background: #0b3a67;*/
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about2-brand img {
  width: 100%;
  height: auto;
  max-width: 520px;
}

.about2-video iframe {
  width: 100%;
  height: 290px;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 980px) {
  .about2-card {
    grid-template-columns: 1fr;
  }

  .about2-video iframe {
    height: 240px;
  }
}

/*@media (max-width: 520px) {
  .about2-card {
    padding: 18px;
  }

  .about2-cert {
    grid-template-columns: 170px 1fr;
    text-align: left;
  }

 .about2-logo {
  width: 170px;
  height: 115px;
  }
}

/* =========================
   CERTIFICACIÓN ISO – DESTACADA
========================= */

/* Ocupa todo el ancho de la grilla */
.about2-cert--wide {
  grid-column: auto;
  grid-template-columns: 220px 1fr;
  padding: 22px 26px;
}

/* Logo ISO más grande */
.about2-logo--iso {
  width: 220px;
  height: 120px;
  padding: 0px;
}

/* Texto más cómodo */
.about2-cert--wide .about2-certtitle {
  font-size: 18px;
}

.about2-cert--wide .about2-certdesc {
  font-size: 15px;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 700px) {
  .about2-cert--wide {
    grid-template-columns: 1fr;
  }

  .about2-logo--iso {
    width: 100%;
    height: 120px;
  }
}