:root{--primary:#0056b3;--primary-dark:#003f86;--muted:#f6f8fb;--text:#222}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}
.container{width:min(1100px,92%);margin-inline:auto}
/* Navbar */
.navbar{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.logo{height:40px}
.menu{display:flex;gap:20px}
.menu a{color:var(--primary);text-decoration:none;font-weight:700}
.menu a:hover{color:var(--primary-dark)}
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, #e0f0ff, #f5faff);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.menu a {
  color: #003366;
}

.menu a:hover {
  color: #0077cc;
}




/* Hero / Carousel */
.hero{position:relative;isolation:isolate}
.slides{position:relative;height:78vh;min-height:380px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:grid;place-items:center}
.slide::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;filter:brightness(.65)}
.slide.active{opacity:1}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.caption{position:relative;color:#fff;text-align:center;padding:0 16px;animation:fadeSlide 1s ease}
.caption h1{font-size:clamp(1.8rem,4vw,3rem);margin:.2rem 0 0}
.caption p{opacity:.95;margin:.4rem 0 0}
.ctrl{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:0;width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.ctrl:hover{background:rgba(0,0,0,.6)}
.prev{left:14px}.next{right:14px}
.dots{position:absolute;inset:auto 0 14px;display:flex;gap:8px;justify-content:center}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#ffffff88}
.dots button.active{background:#fff}

.carousel-item {
  display: flex;
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  height: 100vh;           /* alto completo de pantalla */
}

.carousel-item img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}


.carousel .slide img {
  width: 100%;
  aspect-ratio: 16/9; /* Ajusta la proporción */
  object-fit: cover;
  object-position: center;
}






/* Sections */
.section{padding:64px 0;text-align:center}
h2{color:var(--primary);margin:0 0 14px}
.about p{max-width:780px;margin-inline:auto}
.services{background:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 8px 20px rgba(0,0,0,.06);font-weight:600;transition:transform .2s ease}
.card:hover{transform:translateY(-3px)}
.form{max-width:560px;margin:20px auto 0;display:grid;gap:12px}
.form input,.form textarea{padding:12px 14px;border:1px solid #d9dee7;border-radius:10px}
.form button{background:var(--primary);color:#fff;border:0;padding:12px 16px;border-radius:10px;font-weight:700;cursor:pointer}
.form button:hover{background:var(--primary-dark)}
.footer{background:var(--primary);color:#fff;text-align:center;padding:18px 0;margin-top:30px}

/* Typing cursor */
.typing-text{display:inline-block;position:relative}
.typing-text::after{content:"|";position:absolute;right:-10px;animation:blink .8s infinite;color:#fff}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Reveal */
@keyframes fadeSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.menu{display:none}}



/* === Servicios: tarjetas === */
.services .cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:900px){ .services .cards{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .services .cards{grid-template-columns:1fr;} }

.card.service{
  background:#fff; border-radius:12px; padding:22px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  display:flex; flex-direction:column; gap:10px; text-align:left;
}
.card.service h3{ margin:0; color:var(--primary); }
.btn-outline{
  align-self:flex-start;
  background:#fff; border:2px solid var(--primary); color:var(--primary);
  padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer;
}
.btn-outline:hover{ background:var(--primary); color:#fff; }
.btn-primary{
  background:var(--primary); color:#fff; border:0;
  padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none;
}
.btn-primary:hover{ background:var(--primary-dark); }

/* === Modal === */
.modal{ position:fixed; inset:0; display:none; }
.modal.show{ display:block; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter:saturate(120%) blur(1px);
}
.modal-dialog{
  position:relative; z-index:2;
  width:min(560px,92%); margin:8vh auto 0;
  background:#fff; border-radius:14px; padding:22px 22px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  animation:pop .18s ease-out;
}
@keyframes pop{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }
.modal-close{
  position:absolute; right:10px; top:8px; border:0; background:transparent;
  font-size:22px; cursor:pointer; color:#667;
}
.modal-actions{ display:flex; gap:10px; margin-top:14px; }
/* ===== Hover sombreado de tarjetas ===== */
.card.service{
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
  
  .modal-image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

  
  
}

/* Capa de sombreado suave */
.card.service::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(0,86,179,.18), rgba(0,86,179,0) 60%);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

/* Efecto al pasar el cursor o enfocar con teclado */
.card.service:hover,
.card.service:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,86,179,.25);
  border-color: rgba(0,86,179,.35);
}
.card.service:hover::after,
.card.service:focus-within::after{
  opacity:1;
}

/* Estado activo (cuando el modal está abierto) */
.card.service.is-active{
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0,86,179,.30);
  border-color: rgba(0,86,179,.55);
}
.card.service.is-active::after{ opacity:1; }

/* Botón más visible al pasar el cursor */
.btn-outline:hover{
  background: #0056b3;
  color: #fff;
  border-color: #0056b3;
}

/* Accesibilidad: foco visible en botón */
.btn-outline:focus-visible{
  outline: 3px solid rgba(0,86,179,.45);
  outline-offset: 2px;
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .card.service{ transition: none; }
  .card.service:hover,
  .card.service:focus-within{ transform: none; }
}

/* Sección Quiénes Somos con tarjetas */
.about .intro {
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 1.1rem;
  color: #444;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.about-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 86, 179, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.about-card h3 {
  color: var(--primary);
  margin-bottom: 10px;
}

.about-card p, .about-card ul {
  font-size: 0.95rem;
  color: #333;
}

.about-card ul {
  list-style: none;
  padding: 0;
}

.about-card li {
  margin: 5px 0;
}

.about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 86, 179, 0.25);
}

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

@media (max-width: 600px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* === Franja de estadísticas + CTA === */
.stats-cta{
  background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
  padding-top: 48px;
  padding-bottom: 48px;
}

.stats-wrap{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.stat{
  background:#fff;
  border-radius:14px;
  padding:22px;
  text-align:center;
  box-shadow: 0 8px 22px rgba(0,86,179,.12);
  border:1px solid rgba(0,86,179,.08);
}

.stat-number{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.stat-label{
  margin-top: 6px;
  color: #445;
  font-weight: 600;
}

/* CTA */
.cta-wrap{
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 16px;
  color:#fff;
  padding: 26px 20px;
  display: grid;
  gap:10px;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0,86,179,.25);
}

.cta-wrap h3{
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.cta-wrap p{
  margin: 0 0 6px 0;
  opacity: .95;
}

.cta-actions{
  display:flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-actions .btn-primary{
  background:#fff;
  color: var(--primary);
  border:0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
}
.cta-actions .btn-primary:hover{ filter: brightness(0.92); }

.cta-actions .btn-outline{
  background: transparent;
  color:#fff;
  border:2px solid #fff;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
}
.cta-actions .btn-outline:hover{
  background: rgba(255,255,255,.12);
}

/* Responsive */
@media (max-width: 900px){
  .stats-wrap{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .stats-wrap{ grid-template-columns: 1fr; }
}
/* Icono circular para stats */
.stat-icon{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  margin:0 auto 8px;
  color:#fff;
  background: radial-gradient(100% 100% at 30% 20%, #2f7edb, #0056b3);
  box-shadow: 0 8px 18px rgba(0,86,179,.25);
}
.stat-icon svg{ display:block }

/* Sutileza al pasar el cursor */
.stat{
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,86,179,.16);
}

/* (ya existentes de la franja, por si te faltan) */
.stats-cta{ background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%); padding:48px 0; }
.stats-wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:28px; }
.stat{ background:#fff; border-radius:14px; padding:22px; text-align:center; box-shadow:0 8px 22px rgba(0,86,179,.12); border:1px solid rgba(0,86,179,.08); }
.stat-number{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:var(--primary); line-height:1.1; }
.stat-label{ margin-top:6px; color:#445; font-weight:600; }
@media (max-width: 900px){ .stats-wrap{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .stats-wrap{ grid-template-columns:1fr; } }




/* ===== Franja de Partners ===== */
.partners {
  background: #f6f8fb;
  padding: 40px 0;
  text-align: center;
}

.partners-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 24px;
}

.partners-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.partner-logo {
  max-height: 60px;
  transition: transform 0.3s ease;
  filter: grayscale(100%);
}

.partner-logo:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}

@media (max-width: 768px) {
  .partners-logos {
    gap: 20px;
  }
  .partner-logo {
    max-height: 45px;
  }
}


/* ===== Botón flotante de WhatsApp ===== */
.whatsapp-float {
  position: fixed;
  width: 75px;
  height: 65px;
  bottom: 20px;
  right: 20px;
  background: #25d366;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background: #1ebe5d;
}


/* Icono en tarjetas */
.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;               /* Flex para centrar */
  justify-content: center;     /* Centrado horizontal */
  align-items: center;         /* Centrado vertical */
  margin: 0 auto 10px;         /* Centra el contenedor dentro de la tarjeta */
  color: #fff;
  background: radial-gradient(100% 100% at 30% 20%, #2f7edb, #0056b3);
  box-shadow: 0 8px 18px rgba(0,86,179,.22);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}


/* Icono en modal (más grande) */
.modal-icon{
  width:72px; height:72px; border-radius:16px; margin:4px 0 12px;
  display:grid; place-items:center;
  color:#fff; background: linear-gradient(135deg, #2f7edb, #0056b3);
  box-shadow:0 10px 24px rgba(0,86,179,.25);
}
.modal-icon svg{ width:34px; height:34px; }