:root{
  --navy:#0B3B76;
  --blue:#0D6EFD;
  --blue-dark:#123E80;
  --blue-deep:#0D4B92;
  --orange:#FF6A1A;
  --orange-dark:#E65A0A;
  --yellow:#ff8800;
  --yellow-light:#FFE8A3;
  --paper:#F4F7FB;
  --white:#FFFFFF;
  --line:#E2E8F0;
  --texto:#333;
  --texto-suave:#555;
  --texto-claro:#666;
  --radius:14px;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
  scroll-behavior:smooth;
}
body{
  background:var(--paper);
  color:var(--texto);
  padding-top:90px;
  overflow-x:hidden;
}
h2, h4{ margin:0; font-weight:800; }
img{ max-width:100%; display:block; }
nav{
  position:fixed; top:0; left:0; width:100%; height:90px;
  background:var(--orange); display:grid;
  grid-template-columns:250px 1fr 220px; align-items:center;
  padding:0 50px; box-shadow:0 3px 15px rgba(0,0,0,.10);
  z-index:1000; transition:background .4s;
}
.logo-contenedor{ display:flex; justify-content:flex-start; align-items:center; }
.logo{ height:90px; }
.menu-centro{ display:flex; justify-content:center; align-items:center; }
.menu-centro ul{ display:flex; list-style:none; gap:45px; }
.menu-centro a{ text-decoration:none; color:var(--navy); font-size:21px; font-weight:bold; transition:.3s; }
.menu-centro a:hover{ color:var(--white); }
.boton-nav{ display:flex; justify-content:flex-end; }
.btn-cotizar{ background:var(--blue); color:var(--white); text-decoration:none; padding:14px 32px; border-radius:40px; font-weight:bold; transition:.3s; }
.btn-cotizar:hover{ background:var(--blue-dark); transform:translateY(-3px); }
.menu-toggle{ display:none; flex-direction:column; justify-content:space-between; width:30px; height:22px; background:none; border:none; cursor:pointer; z-index:1100; padding:0; }
.menu-toggle span{ display:block; height:3px; width:100%; background:var(--navy); border-radius:2px; transition:.3s; }
.header-scroll nav{ background:var(--blue-dark); }
.header-scroll .menu-centro a{ color:var(--yellow); }
.header-scroll .menu-centro a:hover{ color:var(--white); }
.header-scroll .btn-cotizar{ background:var(--orange); color:var(--white); }
.header-scroll .btn-cotizar:hover{ background:var(--orange-dark); }
.header-scroll .menu-toggle span{ background:var(--yellow); }
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background:linear-gradient(rgba(13,110,253,.55), rgba(13,110,253,.55)), url("img/fondo mision.png");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:var(--white); padding:40px 20px;
}
.hero h1{ font-size:60px; margin-bottom:20px; }
.hero p{ font-size:24px; margin-bottom:35px; }
.boton{ background:var(--yellow); color:black; text-decoration:none; padding:16px 38px; border-radius:35px; font-weight:bold; transition:.3s; }
.boton:hover{ transform:translateY(-4px); box-shadow:0 10px 25px rgba(0,0,0,.25); }
section{ padding:90px 10%; }
section h2{ text-align:center; font-size:38px; margin-bottom:50px; color:var(--blue); }
.nosotros{ padding:100px 8%; background:var(--white); }
.titulo-nosotros{ text-align:center; margin-bottom:70px; }
.titulo-nosotros span{ display:inline-block; background:var(--yellow-light); color:#D79B00; padding:10px 25px; border-radius:30px; font-weight:bold; margin-bottom:20px; }
.titulo-nosotros h2{ font-size:55px; color:var(--blue-deep); margin-bottom:20px; }
.titulo-nosotros p{ max-width:900px; margin:auto; font-size:22px; color:var(--texto-claro); line-height:1.7; }
.contenido-nosotros{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:80px; }
.imagen-nosotros img{ width:100%; border-radius:25px; box-shadow:0 15px 35px rgba(0,0,0,.15); }
.texto-nosotros h3{ color:var(--blue-deep); font-size:38px; margin-bottom:25px; }
.texto-nosotros p{ font-size:18px; color:var(--texto-suave); line-height:1.9; margin-bottom:20px; }
.destacado-fondo{ position:relative; padding:90px 6% 110px; border-radius:30px; overflow:hidden; isolation:isolate; }
.destacado-fondo::before{ content:""; position:absolute; inset:0; background:url("img/fondo vision.png") center/cover no-repeat; opacity:.5; z-index:-1; }
.destacado-nosotros{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:420px; }
.destacado-imagen{ height:420px; border-radius:25px; overflow:hidden; box-shadow:0 20px 45px rgba(11,59,118,.20); }
.destacado-imagen img{ width:100%; height:100%; object-fit:cover; }
.destacado-card{ background:var(--orange); border-radius:22px; box-shadow:0 25px 55px rgba(11,59,118,.18); padding:45px 40px; margin-left:-70px; position:relative; z-index:2; }
.destacado-tabs{ display:flex; gap:10px; margin-bottom:28px; border-bottom:2px solid rgba(255,255,255,.4); flex-wrap:wrap; }
.tab-btn{ background:none; border:none; font-family:inherit; font-size:16px; font-weight:700; color:var(--navy); padding:10px 6px 16px; cursor:pointer; position:relative; transition:.25s; }
.tab-btn::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:3px; background:var(--blue); transform:scaleX(0); transition:transform .25s ease; }
.tab-btn.active, .tab-btn:hover{ color:var(--blue-dark); }
.tab-btn.active::after{ transform:scaleX(1); }
.tab-panel{ display:none; animation:fadeIn .3s ease; }
.tab-panel.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.tab-panel p{ color:var(--texto-suave); font-size:17px; line-height:1.8; }
.tab-panel ul{ list-style:none; }
.tab-panel li{ padding:9px 0; padding-left:24px; position:relative; color:var(--texto-suave); font-size:17px; }
.tab-panel li::before{ content:""; width:8px; height:8px; background:var(--blue); border-radius:50%; position:absolute; left:0; top:18px; }
@media(max-width:900px){
  .destacado-fondo{ padding:60px 4% 80px; border-radius:20px; }
  .destacado-nosotros{ grid-template-columns:1fr; }
  .destacado-imagen{ height:280px; }
  .destacado-card{ margin-left:0; margin-top:-50px; width:92%; margin-inline:auto; }
}
.servicios{ padding:100px 8%; background:var(--paper); }
.titulo-servicios{ text-align:center; margin-bottom:70px; }
.titulo-servicios span{ display:inline-block; background:var(--yellow-light); color:#C58A00; padding:10px 25px; border-radius:30px; font-weight:bold; margin-bottom:20px; }
.titulo-servicios h2{ font-size:55px; color:var(--blue-deep); margin-bottom:20px; }
.titulo-servicios p{ font-size:22px; max-width:900px; margin:auto; color:var(--texto-claro); line-height:1.6; }
.servicios-carousel-wrap{ position:relative; display:flex; align-items:center; gap:16px; }
.servicios-carousel{ display:flex; gap:30px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding:10px 4px 30px; scrollbar-width:none; }
.servicios-carousel::-webkit-scrollbar{ display:none; }
.servicio-card{ flex:0 0 auto; width:520px; scroll-snap-align:start; background:var(--white); border-radius:25px; overflow:hidden; box-shadow:0 15px 35px rgba(0,0,0,.08); transition:.4s; }
.servicio-card:hover{ transform:translateY(-8px); }
.servicio-imagen{ position:relative; aspect-ratio: 520 / 230; overflow:hidden; }
.servicio-imagen img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.servicio-card:hover img{ transform:scale(1.08); }
.servicio-info{ padding:35px 32px 40px; }
.servicio-info h3{ font-size:28px; color:var(--blue-deep); margin-bottom:20px; }
.servicio-info ul{ list-style:none; }
.servicio-info li{ margin-bottom:15px; padding-left:28px; position:relative; line-height:1.6; color:var(--texto-suave); font-size:15px; }
.servicio-info li::before{ content:""; width:8px; height:8px; background:var(--orange); border-radius:50%; position:absolute; left:0; top:8px; }
.btn-servicio{ display:inline-block; margin-top:25px; background:var(--orange); color:var(--white); text-decoration:none; padding:14px 30px; border-radius:35px; font-weight:bold; transition:.3s; }
.btn-servicio:hover{ background:var(--orange-dark); transform:translateY(-2px); }
.carousel-arrow{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:none; background:var(--white); color:var(--navy); font-size:26px; line-height:1; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; transition:.25s; }
.carousel-arrow:hover{ background:var(--orange); color:var(--white); }
@media(max-width:768px){
  .carousel-arrow{ display:none; }
  .servicio-card{ width:300px; }
}
.cta-banner{ background:linear-gradient(120deg, var(--navy), var(--blue)); padding:72px 24px; text-align:center; color:var(--white); }
.cta-content{ max-width:640px; margin:0 auto; }
.cta-content h2{ font-size:2rem; line-height:1.25; margin-bottom:14px; }
.cta-content p{ font-size:1.05rem; color:rgba(255,255,255,.85); margin-bottom:32px; }
.btn-whatsapp{ display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:var(--white); font-weight:700; font-size:1rem; padding:16px 30px; border-radius:999px; text-decoration:none; box-shadow:0 14px 28px -12px rgba(255,106,26,.55); transition:background .2s ease, transform .2s ease; }
.btn-whatsapp:hover{ background:var(--orange-dark); transform:translateY(-2px); }
.contacto{ padding:96px 48px 110px; max-width:1180px; margin:0 auto; }
.contacto-head{ text-align:center; max-width:560px; margin:0 auto 56px; }
.eyebrow{ display:inline-block; color:var(--orange-dark); background:#FFE7D6; font-weight:800; letter-spacing:.08em; font-size:.78rem; padding:6px 14px; border-radius:999px; margin-bottom:18px; text-transform:uppercase; }
.contacto-head h2{ font-size:2.1rem; color:var(--navy); line-height:1.2; }
.contacto-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; background:var(--orange); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.contacto-form{ padding:44px; display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.85rem; font-weight:700; color:var(--navy); }
.field input, .field select, .field textarea{ border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:.95rem; font-family:inherit; color:var(--ink); background:var(--paper); outline:none; transition:border-color .2s ease, box-shadow .2s ease; width:100%; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,95,191,.15); background:var(--white); }
.field textarea{ resize:vertical; }
.btn-submit{ align-self:flex-start; margin-top:8px; background:var(--blue); color:var(--white); border:none; font-weight:700; font-size:.98rem; padding:14px 28px; border-radius:8px; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.btn-submit:hover{ background:var(--blue-dark); transform:translateY(-2px); }
.contacto-info{ background:linear-gradient(160deg, var(--navy), var(--blue-dark)); color:var(--white); padding:44px 36px; display:flex; flex-direction:column; gap:30px; justify-content:center; }
.info-item{ display:flex; gap:16px; align-items:flex-start; }
.info-item h4{ font-size:1rem; margin-bottom:4px; }
.info-item p{ margin:0; font-size:.9rem; color:rgba(255,255,255,.75); line-height:1.5; }
footer{ background:var(--blue); color:var(--white); text-align:center; padding:30px; }
@media(max-width:900px){
  .contenido-nosotros{ grid-template-columns:1fr; }
  .titulo-nosotros h2{ font-size:40px; }
}
@media(max-width:860px){
  .contacto{ padding:64px 24px 80px; }
  .contacto-grid{ grid-template-columns:1fr; }
  .contacto-info{ order:-1; }
  .cta-content h2{ font-size:1.6rem; }
}
@media(max-width:768px){
  nav{ display:flex; justify-content:space-between; align-items:center; padding:0 20px; height:80px; grid-template-columns:none; }
  .logo{ height:60px; }
  .boton-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .menu-centro{ position:fixed; top:80px; left:0; width:100%; height:0; overflow:hidden; background:var(--blue-dark); transition:height .35s ease; z-index:999; }
  .menu-centro.abierto{ height:calc(100vh - 80px); }
  .menu-centro ul{ flex-direction:column; align-items:center; gap:0; padding:30px 0; width:100%; }
  .menu-centro li{ width:100%; text-align:center; }
  .menu-centro a{ display:block; padding:18px 0; color:var(--white); font-size:20px; border-bottom:1px solid rgba(255,255,255,.1); }
  body{ padding-top:80px; }
  .hero h1{ font-size:32px; }
  .hero p{ font-size:18px; }
  .titulo-nosotros h2, .titulo-servicios h2{ font-size:32px; }
  .titulo-nosotros p, .titulo-servicios p{ font-size:17px; }
  .texto-nosotros h3{ font-size:26px; }
  .texto-nosotros p{ font-size:16px; }
  section{ padding:60px 6%; }
  .servicio-card{ width:min(300px, 85vw); }
  .destacado-tabs{ justify-content:center; }
  .contacto{ padding:50px 20px 70px; }
}
@media(max-width:480px){
  .destacado-card{
    padding:35px 22px;
  }
  .destacado-tabs{
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:4px;
  }
  .tab-btn{
    font-size:14px;
    padding:8px 2px 14px;
    flex:1;
    text-align:center;
  }
}
@media(max-width:400px){
  .hero h1{ font-size:26px; }
  .titulo-nosotros h2, .titulo-servicios h2{ font-size:26px; }
  .servicio-info h3{ font-size:24px; }
}
