/* ============================================================
   Milan Testing Laboratory
   ============================================================

   PATRÓN ANTI-FALLO (reveal con JS):
   Nunca poner opacity:0 directo. Siempre bajo .js para que
   sin JavaScript el contenido sea visible:

     .js .reveal        { opacity:0; transform:translateY(20px); transition:opacity .5s,transform .5s; }
     .js .reveal.visible{ opacity:1; transform:none; }

   IntersectionObserver en main.js añade la clase .visible.
   Sin JS: la clase .js nunca existe → contenido siempre visible.
   ============================================================ */
:root{
  --navy:       #00276c;
  --navy-2:     #021a4a;
  --navy-text:  #00277a;
  --teal:       #21cdad;
  --teal-2:     #0a9bb5;
  --blue:       #2ea3f2;
  --orange:     #f29d00;
  --fly-orange: #ea5a14;
  --fly-navy:   #15347e;
  --texto:      #5a6473;
  --texto-osc:  #1d2733;
  --gris-bg:    #f5f7fa;
  --borde:      #e3e8ee;
  --blanco:     #ffffff;
  --max:        1180px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Open Sans', system-ui, -apple-system, Arial, sans-serif;
  color:var(--texto);
  line-height:1.7;
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{ font-family:'Poppins',sans-serif; color:var(--navy-text); line-height:1.25; font-weight:700; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.section{ padding:84px 0; }
.eyebrow{
  text-align:center; text-transform:uppercase;
  letter-spacing:.16em; font-size:.82rem; font-weight:700;
  margin-bottom:12px; font-family:'Poppins',sans-serif;
}
.eyebrow-teal{ color:var(--teal); }
.eyebrow-onteal{ color:#ffffff; opacity:.95; }
.section-title{ text-align:center; font-size:2.2rem; margin-bottom:50px; color:var(--navy-text); font-weight:700; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-block; padding:13px 34px; border-radius:4px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.9rem;
  letter-spacing:.03em; cursor:pointer; border:2px solid transparent;
  transition:all .25s ease;
}
.btn-light{ background:#fff; color:var(--navy); border-color:#fff; }
.btn-light:hover{ background:transparent; color:#fff; border-color:#fff; }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); }
.btn-outline-light{ background:transparent; color:#fff; border-color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--navy); }

/* ---------------- Header ---------------- */
.top-bar{ background:var(--navy); color:#c3d0e6; font-family:'Poppins',sans-serif; font-size:.8rem; }
.top-bar-inner{ display:flex; justify-content:space-between; align-items:center; min-height:40px; gap:16px; flex-wrap:wrap; }
.top-contact{ display:flex; align-items:center; gap:26px; }
.top-social{ display:flex; align-items:center; gap:20px; font-weight:500; }
.top-bar a, .top-hours{ color:#c3d0e6; display:inline-flex; align-items:center; gap:7px; transition:color .2s; }
.top-bar a:hover{ color:#fff; }
.top-bar svg{ width:14px; height:14px; fill:currentColor; }
.site-header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  box-shadow:0 1px 0 var(--borde);
  transition:box-shadow .25s ease;
}
.site-header.scrolled{ box-shadow:0 6px 22px rgba(0,0,0,.10); }
.header-inner{ display:flex; align-items:center; gap:22px; min-height:80px; }
.logo{ margin-right:auto; }
.logo img{ height:59px; width:auto; }
.main-nav{ display:flex; gap:2px; }
.main-nav a{
  position:relative; font-family:'Poppins',sans-serif; font-weight:500; font-size:.92rem;
  color:var(--navy-text); padding:10px 14px; transition:color .2s;
}
.main-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--fly-orange); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.main-nav a:hover{ color:var(--fly-orange); }
.main-nav a:hover::after{ transform:scaleX(1); }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:linear-gradient(90deg,#f9a826 0%,#ef4a2a 100%); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.85rem;
  padding:12px 24px; border-radius:30px;
  box-shadow:0 8px 20px rgba(239,74,42,.3); transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(239,74,42,.42); }
.nav-cta span{ transition:transform .2s; }
.nav-cta:hover span{ transform:translateX(3px); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:26px; height:3px; border-radius:2px; background:var(--navy); }

/* ---------------- Hero ---------------- */
.hero{ width:100%; overflow:hidden; line-height:0; }
.hero img{ width:100%; height:auto; display:block; }

/* ---------------- Nosotros ---------------- */
.nosotros{ background:var(--blanco); }
.nosotros-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.nosotros-media{ position:relative; padding-left:30px; }
.nosotros-img{
  width:100%;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 16px 30px rgba(0,39,108,.20));
}
.hex-badges{
  position:absolute; left:-22px; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column;
}
.hex-badge{
  width:142px; height:158px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#fff; text-align:center; padding:0 16px;
  margin-bottom:-30px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
.hex-badge:last-child{ margin-bottom:0; }
.hex-badge svg{ width:42px; height:42px; fill:#fff; }
.hex-badge span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem; line-height:1.15; }
.hex-badge.teal{ background:var(--teal); margin-left:72px; }
.hex-badge.navy{ background:var(--navy); margin-left:0; }
.hex-badge.orange{ background:var(--fly-orange); margin-left:72px; }
.nosotros-text h2{ font-size:1.75rem; color:var(--navy-text); margin-bottom:22px; }
.nosotros-text p{ margin-bottom:16px; }

/* ---------------- Certificaciones ---------------- */
.certificaciones{
  background:
    radial-gradient(circle at 20% 20%, rgba(46,163,242,.10), transparent 40%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#dfe7f2;
}
.certificaciones .eyebrow{ margin-bottom:24px; }
.cert-grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.cert-text h2{ font-size:1.55rem; font-weight:600; color:#fff; margin-bottom:30px; line-height:1.5; }
.cert-img img{ border-radius:6px; box-shadow:0 16px 40px rgba(0,0,0,.4); margin:0 auto; max-height:520px; width:auto; }

/* ---------------- Servicios ---------------- */
.servicios{ background:var(--blanco); }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.service-card{
  background:#fff; border:1px solid var(--borde); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.12); }
.service-img{ aspect-ratio:370/237; overflow:hidden; }
.service-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.service-card:hover .service-img img{ transform:scale(1.06); }
.service-body{ padding:26px 24px; }
.service-body h3{ font-size:1.18rem; color:var(--navy-text); margin-bottom:14px; line-height:1.35; }
.service-body p{ font-size:.86rem; color:var(--texto); line-height:1.6; }

/* ---------------- Galería ---------------- */
.galeria{ background:var(--blanco); }
.galeria-band{
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  text-align:center; padding:64px 24px;
}
.galeria-band h2{ color:#fff; font-size:2.2rem; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.gallery-item{ display:block; overflow:hidden; cursor:pointer; position:relative; }
.gallery-item img{ width:100%; aspect-ratio:400/284; object-fit:cover; transition:transform .4s, filter .3s; }
.gallery-item:hover img{ transform:scale(1.08); filter:brightness(.82); }

/* ---------------- Contacto ---------------- */
.contacto{
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  color:#fff;
}
.contacto .eyebrow{ margin-bottom:12px; }
.contacto-title{ text-align:center; color:#fff; font-size:2rem; margin-bottom:48px; max-width:780px; margin-left:auto; margin-right:auto; }
.contacto-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label{
  display:flex; flex-direction:column; gap:6px;
  font-family:'Poppins',sans-serif; font-size:.88rem; font-weight:500; color:#fff;
}
.contact-form input, .contact-form textarea{
  border:none; border-radius:5px; padding:12px 14px;
  font-family:'Open Sans',sans-serif; font-size:.95rem; color:var(--texto-osc);
  background:#fff; transition:box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; box-shadow:0 0 0 3px rgba(0,39,108,.25);
}
.contact-form button{ align-self:flex-start; margin-top:8px; }
.contact-img img{ border-radius:6px; box-shadow:0 16px 40px rgba(0,0,0,.25); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--navy); color:#aebbd0; position:relative; }
.site-footer::before{ content:""; display:block; height:4px; background:linear-gradient(90deg, var(--fly-orange) 0%, var(--teal) 100%); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1.15fr 1fr; gap:40px; padding:60px 0 46px; }
.footer-brand img{ max-width:190px; background:#fff; padding:14px; border-radius:8px; }
.footer-tagline{ font-size:.9rem; line-height:1.65; margin-top:18px; max-width:290px; }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{
  width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;
}
.footer-social a:hover{ background:var(--fly-orange); transform:translateY(-2px); }
.footer-social svg{ width:32px; height:32px; fill:#fff; }
.footer-col h5{
  color:#fff; font-family:'Poppins',sans-serif; font-size:.98rem; letter-spacing:.03em;
  margin-bottom:20px; padding-bottom:10px; position:relative;
}
.footer-col h5::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:2px;
  background:var(--fly-orange); border-radius:2px;
}
.footer-info{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; margin-bottom:13px; line-height:1.55; }
.footer-info svg{ width:16px; height:16px; fill:var(--teal); flex:0 0 auto; margin-top:3px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:22px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.footer-bottom p{ font-size:.85rem; margin:0; }
.footer-top-link{ font-size:.85rem; color:#aebbd0; transition:color .2s; }
.footer-top-link:hover{ color:#fff; }

/* ---------------- WhatsApp float ---------------- */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; width:56px; height:56px;
  background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:90; transition:transform .2s;
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:32px; height:32px; fill:#fff; }

/* ---------------- Lightbox ---------------- */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:200; padding:30px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92%; max-height:90vh; border-radius:6px; }
.lightbox-close{ position:absolute; top:18px; right:30px; color:#fff; font-size:46px; line-height:1; cursor:pointer; font-family:Arial,sans-serif; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:992px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .nosotros-grid{ gap:46px; }
  .hex-badges{ left:-22px; }
}
@media (max-width:768px){
  .section{ padding:60px 0; }
  .top-bar{ display:none; }
  .nav-cta{ display:none; }
  .main-nav{
    position:absolute; top:80px; left:0; right:0; background:#fff;
    flex-direction:column; gap:0; border-bottom:1px solid var(--borde);
    box-shadow:0 10px 24px rgba(0,0,0,.1); max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .main-nav.open{ max-height:420px; }
  .main-nav a{ padding:14px 22px; border-radius:0; border-bottom:1px solid var(--gris-bg); }
  .main-nav a::after{ display:none; }
  .nav-toggle{ display:flex; }
  .nosotros-grid, .cert-grid, .contacto-grid{ grid-template-columns:1fr; gap:36px; }
  .nosotros-media{ order:-1; margin-left:18px; padding-left:24px; }
  .hex-badges{ left:-12px; }
  .hex-badge{ width:104px; height:116px; margin-bottom:-22px; padding:0 10px; }
  .hex-badge svg{ width:30px; height:30px; }
  .hex-badge span{ font-size:.74rem; }
  .hex-badge.teal, .hex-badge.orange{ margin-left:48px; }
  .nosotros-text h2{ font-size:1.5rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 30px; }
  .footer-bottom-inner{ justify-content:center; text-align:center; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .services-grid, .form-row.two{ grid-template-columns:1fr; }
  .section-title, .galeria-band h2, .contacto-title{ font-size:1.6rem; }
  .hex{ width:60px; height:68px; }
  .hex svg{ width:28px; height:28px; }
  .hex-label{ font-size:.85rem; }
}