/* ===== Setup global ===== */
*{ margin:0; padding:0; box-sizing:border-box; font-family:sans-serif; }
html,body{ height:100%; scroll-behavior:smooth; }
:root{ --header-h:90px; }
@media (max-width:768px){ :root{ --header-h:64px; } }  
body{ padding-top:var(--header-h); }
.no-scroll{ overflow:hidden; }

/* ===== Header ===== */
header{
  position:fixed; top:0; left:0; right:0;
  padding:12px 20px;
  z-index:1000;
  background-color:rgba(97,123,208,.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:background-color .25s ease, padding .25s ease;
}
header.scrolled{
  background-color:rgba(97,123,208,.92);
  padding:8px 20px;
}

.nav-container{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 24px; max-width:1200px; margin:0 auto;
}
/* ===== NAV DESKTOP (>=769px) ===== */
.navbar .nav-links{
  list-style: none;
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.navbar .nav-links li{ margin: 0; }
.navbar .nav-links a{
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
}
.navbar .nav-links a:hover,
.navbar .nav-links a:focus-visible{
  background: rgba(255,255,255,.10);
  outline: none;
}

.menu-toggle{
  display:none; /* solo en móvil */
  font-size: 1.8rem;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
}

.header-logo{ height: 90px; width:auto; object-fit:contain; }
@media (max-width: 768px) {
  .menu-toggle {
    display: inline-block;
    z-index: 1301; /* por encima del overlay */
    position: relative;
  }

  .nav-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  /* ===== Overlay móvil ===== */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1300;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;

    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
  }

  .nav-links.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links a {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 0;
    width: 100%;
    display: block;
    border-radius: 6px;
  }

  .nav-links a:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Header compacto */
  header {
    padding: 10px 16px;
  }

  header.scrolled {
    padding: 8px 16px;
  }

  .header-logo {
    height: 50px;
  }
}


/* ===== Hero ===== */
.hero{
  height:100vh; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; position:relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.hero-content{ color:#fff; text-align:center; padding:20px 40px; border-radius:10px; }
.hero-content h1{ font-size:2.5rem; font-weight:bold; }
@media (max-width:768px){ .hero-content h1{ font-size:2rem; } }

/* ===== About us ===== */
.aboutus{
  max-width:900px; margin:0 auto; padding:80px 30px; color:#111;
  line-height:1.7; font-size:18px; text-align:center;
}
.aboutus h1{
  font-size:2.5rem; font-weight:700; margin-bottom:40px; color:#000; position:relative;
}
.aboutus h1::after{
  content:""; width:80px; height:4px; background:#617bd0; display:block; margin:12px auto 0; border-radius:5px;
}

/* ===== Banner ===== */
.banner-fijo{
  height:500px; background-image:url('photos/img4.jpg'); background-size:cover;
  background-position:center; background-attachment:fixed;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:768px){ .banner-fijo{ background-attachment:scroll; } } /* mejor soporte móvil */
.banner-texto h1{
  color:#fff; font-size:2rem; text-align:center; font-weight:bold; padding:20px 30px; border-radius:10px;
}

/* ===== Visión y Misión ===== */
.vision-mision{ padding:60px 20px; background:#fff; text-align:center; }
.vision-mision h2{
  font-size:2.5rem; margin-bottom:50px; color:#000; position:relative;
}
.vision-mision h2::after{
  content:""; width:80px; height:4px; background:#617bd0; display:block; margin:12px auto 0; border-radius:5px;
}
.contenedor-vision-mision{
  display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:60px; max-width:1000px; margin:0 auto;
}
.vision-mision .item{
  background:#f9f9f9; border-radius:15px; padding:30px 20px; box-shadow:0 4px 10px rgba(0,0,0,.1);
  flex:1; min-width:280px; max-width:420px; transition:transform .3s ease;
}
.vision-mision .item:hover{ transform:translateY(-5px); }
.vision-mision .item h3{ font-size:1.5rem; color:#333; margin-bottom:15px; }
.vision-mision .item p{ font-size:.95rem; line-height:1.6; color:#555; text-align:justify; }

/* ===== Servicios ===== */
.servicios{ padding:80px 20px; background:#f9fafc; text-align:center; }
.servicios h2{
  font-size:2.6rem; margin-bottom:60px; color:#000; position:relative;
}
.servicios h2::after{
  content:""; width:80px; height:4px; background:#617bd0; display:block; margin:12px auto 0; border-radius:5px;
}
.bloque-servicio{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:40px;
  background:#fff; border-radius:16px; padding:40px; margin-bottom:60px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.bloque-servicio:hover{ transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,.12); }
.bloque-servicio .texto{ flex:1; min-width:300px; text-align:left; }
.bloque-servicio .texto h3{ font-size:1.5rem; font-weight:700; margin-bottom:16px; color:#222; }
.bloque-servicio .texto ul{ list-style:disc; padding-left:24px; line-height:1.6; font-size:.95rem; color:#444; }
.bloque-servicio .imagen{ flex:0 0 250px; display:flex; justify-content:center; align-items:center; }
.bloque-servicio .imagen img{
  width:200px; height:200px; object-fit:cover; border-radius:50%; border:4px solid #617bd0; transition:transform .3s ease;
}
.bloque-servicio:hover .imagen img{ transform:scale(1.05); }
.bloque-servicio:nth-child(even){ flex-direction:row-reverse; background:#f5f7fb; }
@media (max-width:900px){
  .bloque-servicio{ flex-direction:column; text-align:center; padding:30px; }
  .bloque-servicio .texto{ text-align:center; }
  .bloque-servicio .imagen img{ width:160px; height:160px; margin-bottom:20px; }
}

/* ===== Clientes ===== */
.clientes{
  position:relative;
  background-image:url('https://i.pinimg.com/736x/8e/14/57/8e1457dfdd311cf2d01062d0e5363416.jpg');
  background-size:cover; background-position:center; background-attachment:fixed;
  padding:80px 24px; color:#fff; text-align:center; overflow:hidden;
}
.clientes::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 100%);
  z-index:0;
}
.clientes > *{ position:relative; z-index:1; }
.clientes h2{ font-size:2.6rem; margin-bottom:10px; }
.clientes p{ font-size:1rem; margin-bottom:36px; line-height:1.6; opacity:.95; }

.logos-clientes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:22px; justify-items:center; align-items:stretch; max-width:1100px; margin:0 auto;
}
.cliente{
  width:100%; background:rgba(255,255,255,.96); border-radius:16px; padding:18px 20px;
  box-shadow:0 10px 25px rgba(0,0,0,.15); display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:150px; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; backdrop-filter:blur(2px);
}
.cliente:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.25); }
.cliente img{
  max-width:130px; max-height:64px; width:auto; height:auto; object-fit:contain; margin-bottom:10px;
  filter:grayscale(100%) contrast(1.05) opacity(.9); transition:filter .25s ease, transform .25s ease;
}
.cliente:hover img{ filter:grayscale(0%) contrast(1) opacity(1); transform:scale(1.04); }
.cliente span{ font-size:.9rem; font-weight:600; color:#2b2b2b; opacity:.9; }

@media (max-width:768px){
  .clientes{ padding:60px 18px; }
  .clientes h2{ font-size:2.2rem; }
  .logos-clientes{ gap:18px; }
  .cliente{ min-height:130px; padding:16px; }
  .cliente img{ max-width:120px; max-height:56px; }
}

/* ===== Contacto ===== */
.contacto{ padding:60px 24px; max-width:1200px; margin:0 auto; }
.contacto-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:start; }
.formulario{
  background:#fff; border-radius:16px; padding:32px; box-shadow:0 8px 24px rgba(0,0,0,.08); min-width:300px;
}
.formulario h2{ font-size:2rem; margin-bottom:8px; }
.formulario p{ font-size:1rem; margin-bottom:20px; color:#333; }

.contacto-cta{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:18px; }
.btn{
  display:inline-block; text-align:center; padding:14px 18px; border-radius:10px; font-weight:700; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; width:100%;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:#111; color:#fff; border:1px solid #111; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.btn-primary:hover{ background:#000; border-color:#000; box-shadow:0 10px 26px rgba(0,0,0,.18); }
.btn-outline{ background:#fff; color:#111; border:1px solid #111; }
.btn-outline:hover{ background:#111; color:#fff; }

.mini-lista{ list-style:disc; padding-left:20px; margin-top:8px; color:#444; font-size:.95rem; }

.info-contacto.card{
  background:#f9f9f9; border-radius:16px; padding:28px; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.info-contacto img{ max-width:180px; margin-bottom:12px; }
.info-contacto h3{ font-weight:800; font-size:1.35rem; margin-bottom:14px; }
.info-contacto p, .info-contacto a{ font-size:.95rem; color:#111; }
.info-contacto a{ text-decoration:none; border-bottom:1px solid transparent; }
.info-contacto a:hover{ border-bottom-color:#111; }

.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.info-grid strong{ display:block; font-size:.9rem; color:#333; margin-bottom:6px; }

@media (max-width:992px){ .contacto-grid{ grid-template-columns:1fr; } }
@media (max-width:600px){
  .formulario, .info-contacto.card{ padding:22px; }
  .info-grid{ grid-template-columns:1fr; }
}

/* ===== Footer ===== */
.footer{ background:#1f1f1f; color:#fff; padding:48px 20px 20px; }
.footer-container{
  display:grid; grid-template-columns:1fr; gap:28px; max-width:1200px; margin:0 auto 12px;
}
.footer-title{ margin-bottom:10px; }
.footer-section{ min-width:230px; }
.footer-section h2, .footer-section h3{ margin-bottom:10px; color:#f2f2f2; }
.footer-section p, .footer-section a, .footer-section li{ color:#ccc; font-size:.95rem; text-decoration:none; }

.footer-bottom{
  border-top:1px solid #333; max-width:1200px; margin:0 auto; padding-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer-legal{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-legal p{ margin:0; color:#aaa; font-size:.9rem; }

.back-to-top{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:#2a2a2a; color:#fff; text-decoration:none; font-size:18px;
  border:1px solid #444; transition:transform .2s ease, background .2s ease;
}
.back-to-top:hover{ transform:translateY(-2px); background:#000; }

/* ===== Proyectos ===== */
.filtros{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin:10px auto 24px; max-width:1100px;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid #cfd6ff;
  background:#fff; color:#1a1a1a; cursor:pointer; font-weight:700;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pill img{ height:18px; width:auto; object-fit:contain; filter:grayscale(100%); }
.pill:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.pill.active{ background:#617bd0; color:#fff; border-color:#617bd0; }
.pill.active img{ filter:none; }

.proyectos-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px; max-width:1100px; margin:0 auto;
}
.card-proyecto{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.card-proyecto:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.14); }
.card-proyecto img{ width:100%; height:170px; object-fit:cover; }
.card-proyecto .card-body{ padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.card-proyecto h3{ font-size:1.05rem; line-height:1.35; }
.card-proyecto .meta{ font-size:.9rem; color:#666; }
.card-proyecto .desc{ font-size:.92rem; color:#333; }
.card-proyecto .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.card-proyecto .tags span{
  font-size:.78rem; padding:6px 8px; background:#f1f3ff; color:#2a2f6b; border-radius:999px; border:1px solid #dfe4ff;
}