/* Tipografía base */
:root {
  --azul: #013893;
  --verde: #35C93C;
  --celeste: #9FEEFF;
  --negro: #000000;
  --gris: #f5f5f5;
  --font: 'Poppins', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: #222; line-height: 1.6; }

.container { width: min(1200px, 90%); margin: 0 auto; }
.section { padding: 60px 0; }
.section h2 { text-align: center; margin-bottom: 30px; font-size: 2rem; color: var(--azul); }
.section-alt { background: var(--gris); }

/* NAV */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.logo img { height: 48px; }
.nav-links { list-style: none; display: flex; gap: 20px; }
.nav-links a { text-decoration: none; color: var(--azul); font-weight: 500; }
.menu-btn { display: none; background: none; border: none; font-size: 28px; cursor: pointer; }

/* HERO */
.hero {
  background: url('../img/fondo.jpg') center/cover no-repeat fixed;
  color: white;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* overlay oscuro translúcido para que resalten los azules del logo */
}
.hero-content {
  position: relative;
  padding: 120px 0 100px;
  text-align: center;
}
.hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: 15px; font-weight: 700; }
.hero p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-2px); opacity: .9; }
.btn-primary { background: var(--verde); color: white; }
.btn-whatsapp { background: #25d366; color: white; }
.btn-big { font-size: 1.2rem; padding: 18px 40px; }

/* CARDS SERVICIOS */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.card{
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 32px 24px;          /* ↑ padding extra */
  min-height: 220px;           /* ↑ altura mínima */
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  display: flex;               /* ↓ distribuye vertical */
  flex-direction: column;
  justify-content: flex-start; /* icono, título, párrafo */
  transition: transform .15s ease;
}
.card:hover{ transform:translateY(-4px); }

.card-icon{
  width:64px;
  height:64px;
  margin-bottom:14px;
}
.card-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.card h3{
  color:var(--azul);
  margin-bottom:8px;
  font-size:1.1rem;
}
.card h3 { color: var(--azul); margin-bottom: 8px; }

/* WHY LIST */
.why-list { list-style: none; max-width: 800px; margin: 0 auto; font-size: 1.05rem; }
.why-list li { margin-bottom: 12px; }

/* TESTIMONIALS */
/* Fondo suave testimonios */
.testimonials-bg{
  position:relative;
  background:linear-gradient(180deg,#f7f9ff 0%,#e9f1ff 100%);
  padding:90px 0;
}
.testimonials-bg h2{ color:var(--azul); margin-bottom:40px; }

/* Slider */
.t-slider{ position:relative; overflow:hidden; min-height:180px; }
.t-slide{
  position:absolute; inset:0;
  opacity:0; transform:translateX(30px);
  transition:opacity .6s, transform .6s;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-left:6px solid var(--verde);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  padding:28px 32px; font-style:italic;
  display:flex; flex-direction:column; justify-content:center;
}
.t-slide.active{ opacity:1; transform:translateX(0); position:relative; }
.t-slide p{ margin-bottom:14px; color:#333; line-height:1.55; }
.t-slide span{ font-style:normal; color:var(--azul); font-weight:600; }

/* Dots */
.t-dots{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
.t-dots button{
  width:12px; height:12px; border-radius:50%;
  border:none; background:#cfd6e8; cursor:pointer;
  transition:transform .2s, background .2s;
}
.t-dots button.active{ background:var(--verde); transform:scale(1.2); }

/* CTA */
.cta { background: var(--azul); color: white; text-align: center; padding: 80px 0; }
.cta h2 { color: white; margin-bottom: 10px; }
.cta p { margin-bottom: 25px; }

/* CTA text fix */
.cta h2, .cta p{color:#fff;}
.cta .btn, .cta a{color:#fff !important;}


/* CONTACTO */
.socials { display: flex; gap: 16px; justify-content: center; margin-top: 16px; }
.socials a { color: var(--azul); text-decoration: none; font-weight: 500; }

/* FOOTER */
.footer { background: #111; color: #bbb; padding: 20px 0; text-align: center; font-size: .9rem; }

/* HERO LOGO */
.hero-logo{
  width:240px;/* ajusta aquí si quieres aún más grande */
  max-width:50vw;
  margin:0 auto 32px;
  display:block;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
  animation:dropIn .9s cubic-bezier(.22,1.28,.36,1) .1s both, gentleFloat 7s ease-in-out infinite;
}
@keyframes dropIn{
  0%{opacity:0; transform:translateY(-40px) scale(.7) rotateX(25deg);}
  60%{opacity:1; transform:translateY(10px) scale(1.05) rotateX(0);}
  100%{transform:translateY(0) scale(1);}
}
@keyframes gentleFloat{
  0%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
  100%{transform:translateY(0);}
}
@media (max-width:600px){.hero-logo{width:160px;}}

/* NAV OVERRIDES (barra superior vidrio/traslúcida) */
.nav{
  position:fixed;
  top:16px; left:50%; transform:translateX(-50%);
  width:min(1100px,92%);
  padding:12px 24px;
  background:rgba(255,255,255,.82); /* cámbialo a rgba(0,0,0,.55) si quieres oscuro */
  backdrop-filter:blur(14px);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:999;
}
.logo img{height:64px;} /* Logo del menú más grande */
.nav-links a{color:var(--azul);} /* asegura legibilidad sobre fondo claro */
body{padding-top:100px;} /* para que el header fijo no tape el contenido */

/* RESPONSIVE MENU */
@media (max-width: 800px) {
  .nav-links { position: fixed; top: 0; right: -100%; height: 100vh; width: 220px; background: white; flex-direction: column; padding: 80px 20px; gap: 24px; box-shadow: -4px 0 12px rgba(0,0,0,.1); transition: right .25s ease; }
  .nav-links a { color: var(--azul); font-size: 1.1rem; }
  .menu-btn { display: block; color: var(--azul); }
  .nav-links.show { right: 0; }
}
/* Hero CTA highlight */
.hero-cta .btn-primary{
  font-size:1.15rem;
  padding:16px 34px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.hero-cta .btn-primary:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
/* Fondo de camión detrás de las tarjetas de Servicios */
.services-bg{
  position: relative;
  padding: 90px 0;                           /* deja aire arriba y abajo */
  background: url('../img/camion-bg.jpg')   
              center/cover fixed no-repeat;  /* foto se ajusta, efecto parallax */
  color: #fff;                               /* por si escribes algo blanco */
}
.services-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);               /* velo sutil para legibilidad */
}
.services-bg > .container{
  position: relative; z-index: 2;            /* pone tarjetas encima del velo */
}
#servicios.section{
  padding: 120px 0;     /* antes 60px */
}
/* ICONOS Y DIMENSIÓN DE LAS TARJETAS DE SERVICIOS */
.card-icon{
  width:64px;
  height:64px;
  margin-bottom:14px;
}
.card-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Más aire y altura mínima para que respiren */
.card{
  padding:32px 24px;      /* antes 24 px */
  min-height:220px;        /* fuerza un alto cómodo */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
/* ===== Sticky CTA (solo móvil) ===== */
.sticky-cta{
  position:fixed;
  bottom:0; left:0; right:0;
  background:#fff;
  border-top:1px solid #e4e4e4;
  box-shadow:0 -4px 16px rgba(0,0,0,.1);
  display:none;                 /* oculto por defecto */
  justify-content:center;
  gap:14px;
  padding:12px 0;
  z-index:1000;
}
.sticky-cta .btn{
  font-size:1rem;
  padding:12px 24px;
}
.sticky-cta .btn-wa{
  background:#25d366;
  color:#fff;
}

/* Mostrar solo en pantallas <= 640 px */
@media (max-width:640px){
  .sticky-cta{ display:flex; }
  /* opcional: oculta la burbuja WA si tienes ambas */
  .wa-float{ display:none; }
}
/* Fondo motivador + checks verdes */
.why-bg{
  position:relative;
  padding:90px 0;
  background:linear-gradient(135deg,#1a3f93 0%,#00336e 60%,#00234d 100%);
  color:#fff;
}
.why-bg::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(53,201,60,.15) 0%,transparent 60%);
}
/* Lista con icono check */
.why-list{
  max-width:900px; margin:0 auto 40px;
  list-style:none; font-size:1.2rem;
}
.why-list li{
  margin-bottom:20px; position:relative; padding-left:46px;
  line-height:1.55;
}
.why-list li::before{
  content:"✔"; position:absolute; left:0; top:0;
  color:var(--verde); font-size:1.5rem; line-height:1;
}
/* CTA dentro de la sección */
.mini-cta{ text-align:center; }
/* --- Fix de color para el título de la sección WHY --- */
.why-bg h2{
  color:#fff !important;
  text-shadow:0 4px 10px rgba(0,0,0,.35);
}