/* ============================
       Variables globales (colores, alturas)
       ============================ */
    :root{
      --accent:#e7c52b; /* color destacado (no usado intensamente pero disponible) */
      --nav-height:72px; /* altura de la barra de navegación */
      
    }

    /* Reset y box-sizing */
    *{box-sizing:border-box;margin:0;padding:0}

    /* Estilos base del documento */
    body,html{
      height:100%;
      font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      color:#111; /* texto oscuro por defecto */
      background:transparent; /* quitar fondo negro */
    }
    /* evitar que el contenido quede oculto por la nav fija */
    body{padding-top:var(--nav-height)}

    /* ============================
       NAV - barra superior fija
       ============================ */
    .nav{
      position:fixed; /* mantiene la nav en la parte superior */
      top:0;
      left:0;
      right:0;
      height:var(--nav-height);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 28px;
      z-index:40; /* por encima del hero */
      background:#4e5052; /* fondo claro translúcido para la nav */
      color:#fffefe;
      border-bottom:1px solid rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(4px); /* desenfoque detrás de la nav */
    }
    .nav__left{display:flex;align-items:center;gap:14px}
    .logo{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:inherit;
      font-weight:700;
    }
    .logo img{height:36px}
    .logo span{font-family:"Montserrat",sans-serif;letter-spacing:0.6px}

    /* Menú principal - se oculta en móvil mediante media queries */
    .nav__menu{
      display:flex;
      gap:22px;
      align-items:center;
      list-style:none;
      font-size:15px;
      color:#ffffff; /* texto blanco para los items del menú */
    }
    .nav__menu a{color:#ffffff;text-decoration:none;opacity:0.95}
    .nav__menu a:hover{opacity:1}

    /* Opción activa del menú (escritorio) */
    .nav__menu a.active{
      color:var(--accent);
      font-weight:700;
      position:relative;
      opacity:1;
    }
    .nav__menu a.active::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-8px;
      height:3px;border-radius:3px;background:var(--accent);
      transform-origin:center;transform:scaleX(1);
    }

    /* Opción activa en el menú móvil */
    .mobile-panel a.active{
      color:var(--accent);
      font-weight:700;
      background:rgba(240,180,58,0.08);
      border-radius:6px;
      padding-left:6px;
    }

    .nav__actions{display:flex;align-items:center;gap:14px}

    /* Botón "hamburger" para móvil (oculto en escritorio) */
    .hamburger{
      display:none; /* se muestra en pantallas pequeñas */
      width:40px;height:40px;border-radius:6px;
      align-items:center;justify-content:center;
      background:transparent;border:1px solid rgba(0,0,0,0.06);
      cursor:pointer;
    }

    /* ============================
       HERO - sección principal a pantalla completa
       ============================ */
    .hero{
      /* ajustar altura para considerar la barra fija */
      height:auto;
      min-height:640px; /* mínimo para pantallas grandes */
      min-height:calc(100vh - var(--nav-height));
      display:grid;
      place-items:center; /* centra vertical y horizontalmente */
      position:relative;
      overflow:hidden;
    }

    /* Contenedor de la imagen de fondo del hero.
       Se usa `background-image` inline con fallback en el HTML. */
    .hero__bg{
      position:absolute;
      inset:0;
      background-image: url('imagenes/hero.jpg');
      background-size:cover;
      background-position:center center;
      transform:translateZ(0);
      z-index:0; /* detrás del contenido */
    }
    /* Overlay oscuro encima de la imagen para mejorar contraste */
    .hero__bg::after{
      content:"";
      position:absolute;inset:0;
      background:var(--overlay);
      z-index:1;
    }

    /* Contenido del hero (títulos, subtítulos, texto) */
    .hero__content{
      position:relative;
      z-index:10; /* por encima del overlay */
      text-align:center;
      max-width:920px;
      padding: 0 28px;
    }

    /* Título principal en mayúsculas */
    .hero h1{
      font-family:"Montserrat",sans-serif;
      font-weight:900;
      font-size:64px;
      line-height:1.03;
      letter-spacing:2px;
      text-transform:uppercase;
      margin-bottom:18px;
      color:#fff;
      text-shadow:none; /* eliminar sombra en títulos */
    }

    /* Símbolo & con estilo propio */
    .hero .amp{
      display:block;
      font-size:38px;
      margin:6px 0 10px;
      font-weight:900;
    }

    /* Segundo título (ASOCIADOS) */
    .hero h2{
      font-family:"Montserrat",sans-serif;
      font-weight:700;
      font-size:32px;
      margin-bottom:22px;
      letter-spacing:1px;
      color:#fff;
      opacity:0.98;
    }

    /* Texto descriptivo o lema */
    .hero p.lead{
      font-size:14px;
      max-width:820px;
      margin: 18px auto 0;
      color:#eee;
      opacity:0.9;
    }

    

    /* Nota/leyenda en la parte inferior del hero (centrada) */
    .hero .bottom-note{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:28px;
      font-size:13px;
      color:rgba(255,255,255,0.9);
      max-width:90%;
      text-align:center;
      z-index:11;
    }

    /* ============================
       Responsive: ajustes para pantallas pequeñas
       ============================ */
    @media (max-width:980px){
      .nav__menu{display:none} /* ocultar menú de escritorio */
      .hamburger{display:flex} /* mostrar hamburger */
      .hero h1{font-size:44px}
      .hero .amp{font-size:28px}
      .hero h2{font-size:22px}
/* ============================
   Footer y nav: usar color oscuro coherente
   ============================ */
/* Variables de color para footer/nav */
:root{
  --footer-bg:#0f1720; /* fondo oscuro del footer */
  --footer-text:#dbe7ef; /* texto claro del footer */
  --footer-sub:rgba(219,231,239,0.85); /* texto secundario */
}

.site-footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  border-top:1px solid rgba(255,255,255,0.03);
}
.site-footer a{color:var(--footer-text)}
.site-footer .footer-brand .brand-name{color:var(--footer-text)}
.site-footer .footer-desc, .site-footer .brand-sub{color:var(--footer-sub)}
.site-footer .social-btn{background:rgba(255,255,255,0.04);color:var(--footer-text)}

/* Footer: alinear labels y enlaces de contacto */
.footer-contact p{display:flex;align-items:center;gap:10px;margin:6px 0;color:var(--footer-text)}
.footer-contact .fc-label{min-width:88px;font-weight:700;color:var(--footer-sub);display:inline-block}
.footer-contact .fc-link{color:var(--footer-text);text-decoration:none}
.footer-contact .fc-link:hover{text-decoration:underline}

/* Hacer que la cabecera y el menú móvil compartan el mismo esquema */
.nav, .nav__menu{
  background:var(--footer-bg);
  color:var(--footer-text);
}
.nav__menu a{color:var(--footer-text)}
.mobile-panel{background:var(--footer-bg); color:var(--footer-text)}
.mobile-panel a{color:var(--footer-text)}
.mobile-panel > .mobile-menu{background:var(--footer-bg); color:var(--footer-text)}

/* Ajustes para el botón hamburger y el SVG */
.hamburger{border-color:rgba(255,255,255,0.06);background:transparent}
.nav svg rect{fill:var(--footer-text)}

      .hero{min-height:540px}
    }

    @media (max-width:520px){
      .hero h1{font-size:28px}
      .hero .amp{display:block;font-size:20px}
      .hero h2{font-size:18px}
      .nav{padding:0 12px}
    }

    /* Panel del menú móvil (aparece cuando se pulsa el hamburger) */
    .mobile-panel{
      position:fixed;top:var(--nav-height);right:16px;
      background:var(--footer-bg);color:var(--footer-text);border-radius:8px;padding:12px 16px;
      box-shadow:0 12px 28px rgba(0,0,0,0.18);
      display:none;z-index:60;
    }
    .mobile-panel a{display:block;color:var(--footer-text);padding:8px 0;text-decoration:none}

    /* Estilos del carrusel (inserta en <head> preferible, pero va aquí si no quieres tocar files externos) */

    /* Posicionamiento básico de carrusel dentro del hero */
    .hero{position:relative;overflow:hidden}

    /* Variante corta del hero para páginas internas (menos espacio vertical
       y evitar solapamiento con la barra fija) */
    .hero.hero--short{
      height:auto;
      min-height:0;
      padding: calc(var(--nav-height) + 8px) 0 12px;
      display:block;
    }

    /* Secciones internas (.about) más compactas y texto legible */
    .about{
      padding:12px 20px;
      max-width:1100px;
      margin:8px auto;
      color: #111; /* texto principal oscuro sobre fondo claro */
    }
    .about h1, .about .page-title{margin:0 0 8px;font-size:28px;line-height:1.1;text-align:center}
    .about p{margin:0 0 12px;line-height:1.6;word-break:break-word}

    /* Estilos para la sección 'Nuestros valores' */
    .values{padding:18px 12px}
    .values-title{display:block;text-align:center}
    .values-inner{max-width:1100px;margin:0 auto;text-align:center}
    .values-row{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .value{flex:1 1 5%;min-width:30px;text-align:center;display:flex;flex-direction:column;align-items:center}
    .value-label{font-weight:600;text-align:center;margin-top:8px}

    @media (max-width:880px){
      .values-row{gap:19px}
      .value{flex:1 1 40%;min-width:160px;margin-bottom:12px}
    }
    @media (max-width:480px){
      .value{flex:1 1 100%;min-width:100%;}
    }
    
    /* ============================
       Sección: Nuestros servicios
       ============================ */
    .services{background:transparent;padding:22px 12px}
    .services h1{margin:0 0 8px;font-size:40px;letter-spacing:1px}
    .services p{color:rgba(0,0,0,0.75);margin:0 auto 18px;max-width:920px}
    .services-grid{display:flex;gap:28px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
    .service-col{flex:1 1 22%;min-width:200px}
    .service-col h3{font-size:18px;margin:0 0 10px}
    .service-col ul{margin:0;padding-left:18px;color:rgba(0,0,0,0.85);line-height:1.7}

    /* Imagenes en las páginas */
    img{max-width:100%;height:auto;display:block;border:0;outline:none}
    img:focus{outline:0}
    figure{margin:0}

    @media (max-width:980px){
      .service-col{flex:1 1 45%;min-width:220px}
    }
    @media (max-width:640px){
      .service-col{flex:1 1 100%;min-width:100%}
      .services h1{font-size:28px}
      .services p{padding:0 8px}
    }
    .carousel{position:absolute;inset:0;z-index:0;overflow:hidden}
    .slide{
      position:absolute;inset:0;
      background-size:cover;background-position:center center;
      opacity:0;transform:scale(1.02);
      transition:opacity .8s ease, transform .8s ease;
    }
    .slide.active{opacity:1;transform:scale(1)}
    /* Overlay desactivado por defecto para mostrar solo la imagen */
    .carousel-overlay{display:none;position:absolute;inset:0;background:transparent;z-index:1}

    /* Contenido del hero por encima del overlay */
    .hero__content{position:relative;z-index:10;text-align:center;max-width:920px;padding:0 28px}
    .bottom-note{position:absolute;left:50%;transform:translateX(-50%);bottom:28px;font-size:13px;color:rgba(255,255,255,0.9);z-index:11}

    /* Controles */
    .carousel-control{
      position:absolute;top:50%;transform:translateY(-50%);
      background:rgba(0,0,0,0.45);color:#fff;border:0;width:44px;height:44px;border-radius:8px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;font-size:24px;z-index:12;
      transition:background .15s;
    }
    .carousel-control:hover{background:rgba(0,0,0,0.6)}
    .carousel-control.prev{left:18px}
    .carousel-control.next{right:18px}

    /* Indicadores */
    .carousel-indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:8px;z-index:13}
    .indicator{
      width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.4);border:0;cursor:pointer;
    }
    .indicator.active{background:var(--accent, #f0b43a)}

    /* Responsive: esconder controles en móvil pequeño si se desea */
    @media (max-width:520px){
      .carousel-control{width:36px;height:36px;font-size:20px}
    }
    
    /* ============================
       Estilos para sección de tarjetas de Ingenierías
       ============================ */
    .eng-cards{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
    .eng-card{flex:1 1 30%;min-width:220px;text-align:center}
    .eng-thumb{height:180px;border:0;background:#ffffff;display:flex;align-items:center;justify-content:center;border-radius:6px;position:relative;padding:14px}
    .eng-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:4px;display:block;background:transparent;border:0;outline:none}
    .eng-thumb:focus, .eng-thumb img:focus{outline:0}
    .add-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:0;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,0.08);font-size:28px;display:inline-flex;align-items:center;justify-content:center;color:#333;cursor:pointer}
    .eng-card h3{margin:12px 0 8px;color:#0f1720;font-weight:700;font-family:Montserrat, sans-serif}
    .eng-card p{color:#ffffff;margin:0}

    @media (max-width:880px){
      .eng-card{flex:1 1 45%}
    }
    @media (max-width:520px){
      .eng-card{flex:1 1 100%}
      .eng-thumb{height:160px}
      .add-btn{width:48px;height:48px;font-size:24px}
    }
    
    /* ============================
       Estilos para Proyectos (tarjetas con detalles)
       ============================ */
    .projects-grid{display:flex;gap:32px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
    .project-card{flex:1 1 30%;min-width:240px;text-align:left}
    .project-thumb{height:260px;border:0;background:#ffffff;border-radius:6px;overflow:hidden;display:block}
    .project-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:transparent;border:0;outline:none}
    .project-thumb:focus, .project-thumb img:focus{outline:0}
    .project-card h3{margin:0 0 6px;color:#0f1720;font-family:Montserrat, sans-serif;font-size:22px}
    .project-card .subtitle{margin:0 0 12px;font-style:italic;color:#333}
    .project-card .details{list-style:none;padding:0;margin:0;color:#222}
    .project-card .details li{margin:8px 0;color:#333}
    .project-card .details strong{color:#111}

    @media (max-width:880px){
      .project-card{flex:1 1 45%}
    }
    @media (max-width:520px){
      .project-card{flex:1 1 100%}
      .project-thumb{height:200px}
    }