/* styles.css */
:root{
  --primary:#0A284B; /* azul acero */
  --accent:#E69A28;  /* naranja técnico */
  --muted:#6C757D;
  --bg:#F5F6F7;
  --card:#ffffff;
  --radius:12px;
  --glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;background:var(--bg);color:#222;line-height:1.5;-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.navbar{background:linear-gradient(90deg,var(--primary),#08203a);color:#fff;position:sticky;top:0;z-index:60;box-shadow:0 6px 18px rgba(8,32,58,0.25)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font-family:Montserrat,Inter;font-weight:700;color:#fff;text-decoration:none;font-size:1.15rem}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:rgba(255,255,255,0.92);text-decoration:none;padding:8px 12px;border-radius:8px;transition:background .18s,transform .14s}
.nav a:hover{background:rgba(255,255,255,0.06);transform:translateY(-2px)}
.nav a.cta{background:var(--accent);color:var(--primary);font-weight:600}
.nav a.active{box-shadow:inset 0 -2px 0 rgba(255,255,255,0.12)}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.3rem}


/* HERO */
.hero{padding:60px 0;background:linear-gradient(180deg,rgba(10,40,75,0.92),rgba(10,40,75,0.6));color:#fff}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:30px;align-items:center}
.hero-copy h1{font-family:Montserrat,Inter;font-size:2.1rem;margin:0 0 12px}
.lead{opacity:0.92;margin-bottom:18px}
.hero-media img{width:100%;height:320px;object-fit:cover;border-radius:12px;box-shadow:0 12px 30px rgba(2,10,20,0.35)}
.hero-actions{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-weight:600;border:0;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);color:var(--primary);box-shadow:0 8px 18px rgba(230,154,40,0.18);transform:translateZ(0);transition:transform .16s ease, box-shadow .16s}
.btn.primary:active{transform:scale(.98)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff}

/* INTRO */
.intro{padding:36px 0}
.intro-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:center}
.stats{display:flex;gap:12px;justify-content:flex-end}
.stat{background:var(--card);padding:12px 18px;border-radius:10px;box-shadow:0 6px 18px rgba(12,20,30,0.06);text-align:center}
.stat .num{font-weight:700;font-size:1.1rem;color:var(--primary)}
.stat .label{font-size:0.85rem;color:var(--muted)}

/* CARDS / GRID */
.grid{display:grid;gap:20px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(2,10,20,0.06);transition:transform .18s,box-shadow .18s}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 40px rgba(2,10,20,0.12)}
.card-body{padding:14px}
.card-body h3{margin:0 0 8px;color:var(--primary)}
.card-body p{margin:0;color:var(--muted)}

/* FILTERS */
.filters{margin:18px 0}
#search{width:100%;padding:12px;border-radius:10px;border:1px solid #e6e6e6}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,8,20,0.6);z-index:90}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-inner{max-width:90%;max-height:90%;background:transparent;position:relative}
.lightbox img{max-width:100%;max-height:80vh;border-radius:10px;display:block}
.lb-caption{color:#fff;margin-top:10px;text-align:center}
.lightbox .close{position:absolute;right:-10px;top:-10px;background:var(--card);border-radius:50%;width:38px;height:38px;border:0;font-size:20px;cursor:pointer}

/* PAGES */
.py{padding:36px 0}
.page-header{margin-bottom:20px}
.muted{color:var(--muted)}
.services-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.services-cards .card img{height:150px}
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center}
.about-media img{width:100%;height:320px;object-fit:cover;border-radius:12px}
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:20px}
.contact-form{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 12px 30px rgba(2,10,20,0.06);display:flex;flex-direction:column;gap:12px}
.contact-form label{display:block;font-size:.9rem}
.contact-form input, .contact-form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #e6e6e6}
.map-frame iframe{width:100%;height:320px;border-radius:12px;border:0}
.contact-info{margin-top:12px;color:var(--muted)}

/* FOOTER */
.site-footer{background:linear-gradient(180deg,#051428,var(--primary));color:#fff;padding:28px 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.footer-grid h3,h4{margin:0}
.copyright{text-align:center;padding:12px 0;opacity:.9}

/* Responsive */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr 320px}
  .intro-grid{grid-template-columns:1fr}
  .stats{justify-content:flex-start}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:linear-gradient(180deg,var(--primary),#07243a);flex-direction:column;padding:12px}
  .nav a{padding:12px 16px}
  .nav-toggle{display:block}
  .hero-inner{grid-template-columns:1fr}
  .hero-media{order:-1}
  .hero-media img{height:220px}
  .grid.cards{grid-template-columns:1fr}
}


/* ripple effect for buttons */
[data-ripple]{position:relative;overflow:hidden}
[data-ripple]::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;background:rgba(255,255,255,0.18);transform:translate(-50%,-50%);border-radius:999px;opacity:0;transition:width .4s ease,height .4s ease,opacity .6s}
[data-ripple].rip::after{width:300px;height:300px;opacity:1;transition:none}



.logo-animated {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Botón flotante de WhatsApp 
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  text-decoration: none;
}
*/


/* small utilities */
.hidden{display:none}

/* logo */ 

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
}

.logo-img {
  width: 60px;
  height: auto;
  display: block;
  margin-bottom: 6px;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25D366; /* verde clásico de WhatsApp */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* sombra para efecto levitar */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.4);
}

.whatsapp-icon {
  color: white;
  font-size: 32px;
}