/* ============================
       Variables y base
    ============================ */
    :root {
      --bg: #f8faff; /*Fondo principal*/
      --bg-soft: #ebedf2; /*Fondo secundario, para usar en tarjetas o secciones*/
      --head: rgb(1,10,40,0.9);
      --head_2: #00497f;
      --ink: #f8faff; /* texto encabezado*/
      --ink-2: #ebedf2; /*Texto encabezado al posarse sobre este*/
      --sym :#abadb2;
      --body: #323333; /*Color para el texto principa, puede incluye titulos, y parrafo*/
      --muted: #4b4c4c; /*Color para textos secundarios*/
      --brand: #ffc72f; /*Texto para botones o elementos que buscan llamar la atención*/
      --brand-ink: #ffbb00; /*Color al posarse sobe los botones*/
      --border: #e5e7eb; /*Color para líneas dividoras y bordes*/
      --radius: 18px;
      --shadow: 0 6px 24px var(--head);
      --container: 1200px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body, p {
      font-family: 'Montserrat', system-ui, sans-serif;
      color: var(--body);
      background: var(--bg);
      line-height: 1.6;
    }
    
    /* Encabezado H2 con Poppins Bold }*/
    h1, h2 {
      font-family: 'Poppins',sans-serif;
      font-weight: 700; /* Bold */
    }
    
    /* Encabezado H3 con Poppins SemiBold */
    h3 {
      font-family: 'Poppins', sans-serif;
      font-weight: 600; /* SemiBold */
    }


    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding: 0 20px;
    }

    /* ============================
       Header
    ============================ */
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: var(--head);
      backdrop-filter: blur(8px) saturate(180%);
      border-bottom: 1px solid var(--border);
    }
    .header-inner {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 90px;
    }

    .brand {
      display: flex; align-items: center; gap: 12px;
      text-decoration: none; color: var(--ink);
    }
    .brand-logo { height: 60px; width: auto; }

    /* Menú */
    .nav-menu {
      display: flex; gap: 2rem; list-style: none; align-items: center;
    }
    .nav-menu a {
      text-decoration: none; color: var(--ink-2); font-weight: 500;
      transition: color .2s ease;
    }
    .nav-menu a:hover { color: var(--ink); }

    /* Botón hamburguesa */
    .nav-toggle {
      display: none;
      margin-left: auto;
      font-size: 26px; background: none; border: 0;
      color: var(--ink); cursor: pointer;
    }

    /* Botones generales */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 10px; padding: 10px 16px; border-radius: 999px;
      font-weight: 600; cursor: pointer; text-decoration: none;
      border: 1px solid var(--border);
      transition: transform .1s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
    .btn-primary { background: var(--brand); color: var(--head); border: none; }
    .btn-primary:hover { background: var(--brand-ink); }
    .btn-ghost { background: transparent; color: var(--ink); }
    .btn-ghost:hover { background: var(--bg-soft); }

    /* ============================
       Hero Slider, Banner quienes somos
    ============================ */
    .hero-slider { position: relative; height: 80vh; overflow: hidden; }
    .slide {
      position: absolute; inset: 0;
      background-size: cover; background-position: center; background-repeat: no-repeat; /*100 y 100 para bien hecho*/
      opacity: 0; transition: opacity .7s ease;
      display: flex; align-items: center;
    }
    .slide.active { opacity: 1; z-index: 1; }
    .overlay { position: absolute; inset: 0; background: rgba(10,37,64,0.55); }
    .hero-content { position: relative; color: #fff; z-index: 2; max-width: 700px; }
    .hero-content h1 { font-size: clamp(28px, 4vw, 48px); margin-bottom: 12px; line-height: 1.15; }
    .hero-content p { font-size: 18px; margin-bottom: 24px; color: var(--bg-soft); background: none;}
    .hero-content ul { font-size: 18px; margin-bottom: 24px; color: var(--bg-soft); background: none;}
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

    /* Controles */
    .nav_2 {
      position: absolute; top: 50%; transform: translateY(-50%);
      font-size: 20px; border: none; cursor: pointer;
      padding: 10px 16px; border-radius: 50%;
      background: rgba(0,0,0,0.4); color: #fff;
      z-index: 3; transition: background .2s;
    }
    .nav_2:hover { background: rgba(0,0,0,0.7); }
    .nav_2.prev { left: 20px; }
    .nav_2.next { right: 20px; }

    /* Indicadores */
    .indicators {
      position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 10px; z-index: 3;
    }
    .dot {
      width: 12px; height: 12px; border-radius: 50%;
      background: rgba(255,255,255,0.6); cursor: pointer;
      transition: background .3s;
    }
    .dot.active { background: #fff; }

     /* ============================
       Secciones de ejemplo index.html
    ============================ */
    /* === SECTIONS === */
      .section {
        padding: 72px 0;
        background: var(--bg);
      }
      .section-accent {
        background: var(--bg-soft);
      }
      .section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 28px;
        flex-wrap: wrap;
      }
      .section-head h2 {
        font-size: clamp(24px, 3vw, 34px);
        margin: 0;
      }
      .section-head p {
        margin: 0;
        color: var(--muted);
      }
      
      /* === CARDS GRID === */
      .cards {
        max-width: 80%;
        margin: 0 auto; /* esto lo centra */
        display: grid;
        gap: 22px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }
      .card {
        background: var(--ink-2);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform 0.12s ease, box-shadow 0.2s ease;
        display: flex;
        flex-direction: column;
      }
      .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(2, 12, 27, .12);        
        transform: scale(1);
      }
      .card img {
        display: block;
        width: 100%;
        height: 150px;
        object-fit:contain;
        background: var(--ink);
      }
      .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px;
      }
      .card h3 {
        margin: 0 0 6px;
        font-size: 20px;
      }
      .card p {
        margin: 0 0 10px;
        color: var(--muted);
        background: var(--ink-2);
      }
      
      /* === LINKS === */
      .link {
        color: var(--head);
        text-decoration: none;
        font-weight: 600;
        position: relative;
        transition: color 0.3s;
      }
      .link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 2px;
        background: var(--brand);
        transition: width 0.3s;
      }
      .link:hover {
        color: var(--brand);
      }
      .link:hover::after {
        width: 100%;
      }




    /* ============================
       Diversificación estratétiga
    ============================ */
    /* --- Sección --- */
    .diversificacion {
      padding: 40px 20px;
      background: #f9f9f9;
    }

    .contenedor {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Texto */
    .div-texto {
      flex: 1;
    }

    .div-texto h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: #000;
    }

    .div-texto p {
      margin-bottom: 15px;
      line-height: 1.6;
      color: var(--body);
    }

    /* Imagen */
    .div-imagen {
      flex: 1;
      display: flex;
      justify-content: center;
      max-width: 50%; /*usado para que el mapa se ajuste, puede ser modificado dependiendo de las pruebas*/
    }

    .div-imagen img {
      height: 400px;     /* altura fija */
      width: auto;       /* se ajusta ancho */
      max-width: 100%;   /* nunca mayor al contenedor */
      object-fit: cover; /* recorta si no encaja */
      border-radius: 10px;
    }

    /* ---------------------------------------------------------------
    ALCANCE
    -----------------------------------------------------------------*/
    object {
      margin: 0;
      transform: scale(.65);
    }

  .box_text {
    position: absolute;
    pointer-events: none;
    background: var(--body);
    color: var(--brand);
    padding: 1px 1px;
    border-radius: 6px;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  }
  .div-imagen {
    position: relative; /* Para que el tooltip se posicione respecto a este contenedor */
  }

  /*-------------------------------------------------------
    Slider de socios y partners
    -------------------------------------------------------*/
  .partners-slider {
    padding: 60px 20px;
    text-align: center;
    background: var(--bg-soft);
  }
  .partners-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
  }
  .partner-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .7s ease;
    display: flex; align-items: center; justify-content: center;
  }
  .partner-slide.active { opacity: 1; z-index: 1; }
  .partner-slide img {
    max-height: 120px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter .3s;
  }
  .partner-slide img:hover {
    filter: grayscale(0%);
  }

  /* Controles */
  .partner-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 20px; border: none; cursor: pointer;
    padding: 10px 16px; border-radius: 50%;
    background: rgba(0,0,0,0.4); color: #fff;
    z-index: 3;
  }
  .partner-nav.prev { left: 10px; }
  .partner-nav.next { right: 10px; }

  /* Indicadores */
  .partner-indicators {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 3;
  }
  .partner-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.6); cursor: pointer;
  }
  .partner-dot.active { background: #fff; }


    /*-------------------------------------------------------
    Cuadro de componentes de soluciones
    -------------------------------------------------------*/
    .cnt_list_comp {
      width: 100%;
      padding: 48px 0;
      display: flex;
      flex-wrap: wrap;
      gap: 24px 2%;
      justify-content: center;
      box-sizing: border-box;
    }

    .itm_list_comp {
      width: 23%;
      background: var(--bg);
      border-radius: 8px;
      overflow: hidden;
      transition: transform .3s, box-shadow .3s;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
    }

    .itm_list_comp:hover {
      transform: scale(1.02);
      box-shadow: 0 12px 18px var(--body);
    }

    #no-scale.itm_list_comp:hover {
      transform: scale(1.0); /* No escala */
      box-shadow: 0 10px 10px var(--body); /* Mantén el shadow si lo deseas */
    }

    .img_list_comp {
      width: 100%;
      height: 205px;
    }

    .img_list_comp img {
      width: 100%;
      height: 100%;
      object-fit:fill;
      display: block;
    }

    .h_list_comp {
      background: var(--brand);
      font-size: 20px;
      font-weight: 700;
      padding: 12px 16px;
      color: var(--body);
      min-height: 60px;
      display: flex;
      align-items: center;
    }

    .cont_inf_list_comp {
      padding: 16px 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .txt_list_comp {
      font-size: 16px;
      color: var(--body);
      margin-bottom: 12px;
      line-height: 1.4;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4; /* Máximo 4 líneas */
      text-align: justify;
      -webkit-box-orient: vertical;
    }

    .btn_mas_list_serv {
      font-size: 14px;
      font-weight: 600;
      color: var(--head);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color .3s;
    }

    .btn_mas_list_serv:hover {
      color: var(--head);
    }



    /*----------------------------------------------------------------
    Redes
    ----------------------------------------------------------------*/
    .redes {
      display: flex;
      gap: 20px; /* Espacio entre iconos */
      padding: 10px 20px;
    }

    .redes a {
      color: var(--head); /* O usa --brand si quieres color corporativo */
      font-size: 30px; /* Tamaño de los iconos */
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .redes a:hover {
      color: var(--brand); /* Cambia de color al pasar el mouse */
    }


    /* Footer */
    .site-footer{ border-top:1px solid var(--border); background:var(--bg-soft) }
    .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:24px; padding:40px 0; max-width: 1200px; margin-inline: auto; width: 100%; }
    .brand--footer .brand-mark{ width:24px; height:24px }
    .muted{ color:var(--muted); background: var(--bg-soft); padding-left: 30px;}
    .footer-nav{ display:grid; gap:10px }
    .footer-nav a{ text-decoration:none; color:var(--muted) }
    .footer-nav a:hover{ color:var(--head) }
    .newsletter label{ font-weight:600 }
    .input-group{ display:flex; gap:8px; margin-top:8px }
    .input-group input{ flex:1; border:1px solid var(--border); border-radius:999px; padding:10px 14px; font:inherit; }
    .legal{ border-top:1px solid var(--border); padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .legal a{ color:var(--muted); text-decoration:none }
    .legal a:hover{ color:var(--head) }

    /* ============================
       Responsive
    ============================ */
    @media (max-width: 800px) {
      .input-group{ flex-direction: column; }
      .footer-grid {grid-template-columns: 1fr 1fr; }
      .nav-toggle { display: block; }
      .nav-menu {
        display: none; flex-direction: column; gap: 1rem;
        position: absolute; top: 30px; right: 50px;
        background: var(--head); padding: 1rem;
        border-radius: var(--radius);
        min-width: 200px;
        box-shadow: var(--shadow);
        transition: transform .3s ease, opacity .3s ease;
      }
      .nav-menu.show { display: flex; }
      .nav-menu li a { color: #fff; }
      .hero-slider { height: 55vh; }
      .slide { background-size:contain }
      .contenedor {flex-direction: column;text-align: center;}
      .div-imagen img {max-width: 300px; height: auto;}

      .itm_list_comp {width: 90%;}
      .cards{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr}
      
  }

  @media (max-width: 900px) {
    object {
      margin: 0;
      transform: scale(.3);
      }
  }