/* ----------------------------------------------------------------- */
/* 1. Estilos Base (Aplicados por defecto a todas las pantallas,      */
/* funcionando como el estilo para PX < 900)                          */
/* ----------------------------------------------------------------- */

@font-face {
    font-family: 'Aileron';
    src: url('/assets/fonts/Aileron-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Aileron';
    src: url('/assets/fonts/Aileron-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Aileron';
    src: url('/assets/fonts/Aileron-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Aileron';
    src: url('/assets/fonts/Aileron-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Aileron';
    src: url('/assets/fonts/Aileron-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

* {
    font-family: 'Aileron', sans-serif;
}

body, html {
    margin: 0; 
    padding: 0;
    width: 100%;
    /* Asegura que el body tenga al menos el alto de la ventana */
    min-height: 100vh; 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
    /* Color de fondo por defecto para pantallas pequeñas (negro) */
    background-color: #000; 
}

/* Contenedor Principal de Sección (Default: background-size: cover) */
.full-screen-section {
    min-height: 100vh; 
    width: 100%;
    
    background-attachment: scroll; 
    background-repeat: no-repeat;
    
    /* ¡CLAVE para < 900px! Mantiene la proporción y cubre el contenedor. */
    background-size: cover; 
    
    /* Centra la imagen */
    background-position: center center;

    /* Estilos para el contenido que va encima */
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Difuminado sutil en la parte inferior de cada sección */
.full-screen-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px; /* Ajusta entre 6px y 20px según tu necesidad */
    pointer-events: none;
    
    /* Degradado extremadamente suave para disimular cortes */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 100%
    );

    /* Simulación de blur muy ligero (opcional) */
    filter: blur(2px); /* Ajusta entre 1px y 3px */
    z-index: 2;
}
.full-screen-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    pointer-events: none;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.15) 100%
    );

    filter: blur(2px);
    z-index: 2;
}



/* Estilos para el contenido dentro de la sección */
.content {
    padding: 20px 40px;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente para el texto */
    color: white;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 10; 
    max-width: 90%;
    transition: all 0.3s ease-in-out; /* Transición para el efecto de sombra en desktop */
}

.content h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.content p {
    font-size: 1rem;
}

/* ----------------------------------------------------------------- */
/* 2. Asignación de Imágenes de Fondo (Sin cambios)                   */
/* ----------------------------------------------------------------- */

#inicio {
    background-image: url('/assets/wb-site/1_INICIO/FONDO_INICIO.jpg');
}

#sobre-nosotros {
    background-image: url('/assets/wb-site/2_INTRODUCCION/FONDO_INTRO.jpg');
}

#nuestra-historia {
    background-image: url('/assets/wb-site/3_ NUESTRA_HISTORIA/FONDO_HISTORIA.jpg');
}

#nuestros-servicios {
    background-image: url('/assets/wb-site/4_SERVICIOS/FONDO_SERVICIOS.jpg');
}

#inet {
    background-image: url('/assets/wb-site/5_INET/FONDO_INET.jpg');
}

#storetech {
    background-image: url('/assets/wb-site/6_STORE/FONDO_STORE.jpg');
}

#inproyet {
    background-image: url('/assets/wb-site/7_INPROYET/FONDO_INPROYET.jpg');
}


/* ----------------------------------------------------------------- */
/* 3. Media Query para pantallas de 900px a 1750px                   */
/* (background-size: 100% 100% para llenar y posiblemente distorsionar)*/
/* ----------------------------------------------------------------- */
/*
@media (min-width: 900px) and (max-width: 1750px) {
    .full-screen-section {
        background-size: 100% 100%; 
    }

    .content h1 {
        font-size: 3rem;
    }
    .content p {
        font-size: 1.25rem;
    }
}
*/

/* ----------------------------------------------------------------- */
/* 4. Media Query para pantallas a partir de 1751px y más            */
/* (Fondo espacial en el BODY, separación entre secciones y margen reducido) */
/* ----------------------------------------------------------------- */

/* --- Fondo Estelar para el BODY (MUCHO MÁS DENSO) --- *//*
@media (min-width: 1751px) {
    
    body, html {
        background-color: #0A1931; 
        background-image:             
            radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1px),            
            radial-gradient(circle, rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px),            
            radial-gradient(circle, #E0FFFF 2px, transparent 2px),            
            radial-gradient(circle, rgba(255, 255, 255, 0.6) 0.8px, transparent 0.8px),            
            radial-gradient(circle, rgba(255, 255, 255, 0.4) 0.5px, transparent 0.5px),            
            radial-gradient(circle, rgba(255, 255, 255, 0.2) 0.3px, transparent 0.3px);            
        
        background-size: 
            150px 150px, 
            250px 250px, 
            400px 400px, 
            100px 100px, 
            70px 70px,  
            50px 50px;   

        background-position: 
            0 0, 
            60px 80px, 
            120px 30px,
            20px 50px, 
            90px 10px,
            40px 110px;
    }

    
    .full-screen-section {
        background-size: cover; 
        
        width: 90%; 
        max-width: 1800px; 
        margin-left: auto;
        margin-right: auto;
        
        margin-bottom: 60px; 

        border-radius: 16px;
        overflow: hidden; 
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    #inicio {
        margin-top: 60px;
    }

    .content {
        padding: 50px 70px;
        max-width: 60%;
        background-color: rgba(0, 0, 0, 0.75); 
        
  
        .content h1 {
            font-size: 3.5rem;
        }
        .content p {
            font-size: 1.3rem;
        }
    }
}
*/


/* STYLE ULTIMATE */

/* Imagen fondo Barra Navegacion */
.rd-navbar-classic {
    background-color: #1a002e !important; /* Reemplaza la imagen por el color */
}

/* Mantiene el color cuando la barra de navegación está "pegada" o "fija" */
.rd-navbar-sticked .rd-navbar-classic,
.rd-navbar-fixed .rd-navbar-classic {
    background-color: #1a002e !important; /* Mantiene el color sólido */
}


.rd-nav-link {
    color: #8ad8e1 !important;
}

/* Color del texto de Barra Navegacion */
.rd-nav-item.active .rd-nav-link,
.rd-nav-link:hover {
    color: #5bb3c7 !important;
}

@media (max-width: 768px) {
  .rd-navbar-brand {
    padding-top: 6px; /* ajusta según lo que necesites */
  }
}







/* ADICIONALES PIE DE PAGINA */
/* =========================
   ========================= */


        /* Estilos básicos de utilidad */
        .text-center { text-align: center !important; }
        .list-inline { padding-left: 0; list-style: none; margin: 0; display: flex; justify-content: center; } 
        
        /* 1. COMPORTAMIENTO PREDETERMINADO (MÓVIL) */
        
        /* El list-inline general se configura para envolver (wrap) */
        .list-inline { 
            flex-wrap: wrap; /* Permitir el salto de línea en móvil */
        }
        
        /* Estilo de los ítems de navegación superiores en móvil (se apilan verticalmente) */
        .footer-list-category-2.list-inline > li { 
            display: block; /* Ocupa todo el ancho */
            padding: 5px 5px; 
            white-space: normal;
            width: 100%; /* Cada elemento ocupa su propia línea */
            text-align: center;
        }

        /* Estilos específicos para las Redes Sociales en móvil */
        .footer-social-list-2 {
             flex-wrap: wrap; 
             padding: 0 10px;
        }
        .footer-social-list-2 > li {
            /* En móvil, cada link social toma 50% de ancho para que quepan dos por fila */
            width: 50%; 
            display: inline-block;
            padding: 5px 0;
            text-align: center;
        }

        /* 2. COMPORTAMIENTO PARA DESKTOP/TABLET (A PARTIR DE 576px) */
        @media (min-width: 576px) {
            
            /* Restablece la lista de navegación superior a una sola línea */
            .footer-list-category-2.list-inline {
                flex-wrap: nowrap;
            }
            .footer-list-category-2.list-inline > li { 
                display: inline-block; 
                padding: 0 15px; /* Más espacio en desktop */
                width: auto;
            }

            /* Restablece la lista de redes sociales a una sola línea */
            .footer-social-list-2 {
                flex-wrap: nowrap;
            }
            .footer-social-list-2 > li {
                width: auto; /* Ancho automático */
                padding: 0 10px; /* Separación horizontal */
            }
        }
        
        /* Estilos que NO necesitan media query (permanecen igual) */
        
        /* CLAVE: Usa Flexbox para centrar las dos columnas (copyright y redes) dentro del panel inferior */
        .footer-minimal-bottom-panel .row-10 {
            display: flex;
            flex-direction: column; /* Coloca los ítems en columna, uno debajo del otro */
            justify-content: center; 
            align-items: center; /* Centra horizontalmente */
            margin: 0; 
        }
        
        /* Ajustar ancho de las columnas para que no tomen todo el espacio y se centren */
        .footer-minimal-bottom-panel .col-sm-6,
        .footer-minimal-bottom-panel .col-md-4 {
            width: auto; 
            max-width: 100%; 
            padding: 5px 10px; 
            text-align: center; 
        }

        /* Fuerza el orden para que el copyright siempre esté debajo de las redes sociales */
        .footer-minimal-bottom-panel .col-sm-6:nth-child(1) { 
            order: 1; 
        }
        .footer-minimal-bottom-panel .col-sm-6:nth-child(2) { 
            order: 2; 
        }
        
        /* Estilos de link y el ícono */
        .footer-list-category-2 li a, .footer-social-list-2 li a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
            display: inline-flex;
            align-items: center;
        }
        .footer-social-list-2 li a .icon {
            margin-right: 5px; 
        }
        .footer-list-category-2 li a:hover, .footer-social-list-2 li a:hover {
            color: #fff;
        }

        /* Estilo para el span del año */
        .copyright-year {
            white-space: nowrap;
        }

    








/* NUESTRA HISTORIA */
/* =========================
   ========================= */

/* CONTENEDOR GENERAL */
#nuestra-historia .history-slide {
  min-height: 100vh;
  display: flex;
  flex-direction: column;      /* Apila título arriba */
  justify-content: flex-start;
  align-items: center;
  padding-top: 60px;           /* Espacio para el título */
}

/* TÍTULO CENTRADO ARRIBA */
#nuestra-historia .history-title {
  text-align: center;
  margin-bottom: 50px;
}

#nuestra-historia .history-over-title {
  display: block;
  font-size: 1.5vw;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  opacity: 0.8;
}

#nuestra-historia .history-title h2 {
  font-size: 2.7vw;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* CONTENEDOR INTERNO PARA IMAGEN + TEXTO */
#nuestra-historia .history-inner {
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 40px 60px;
}

/* Columna izquierda */
#nuestra-historia .history-image {
  flex: 0 0 60%;
  display: flex;
  justify-content: center;
}

#nuestra-historia .history-image img {
  width: 100%;
  max-width: 1400px;
}

/* Columna derecha */
#nuestra-historia .history-content {
  flex: 0 0 50%;
  color: #ffffff;
}

#nuestra-historia .history-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#nuestra-historia .history-year {
  font-size: 1.2vw;
  font-weight: 700;
  margin-bottom: 8px;
  color: #9ef4ff !important;
}

#nuestra-historia .history-item p {
  font-size: 1vw;
  line-height: 1.2;
  opacity: 0.9;
  font-family: 'Aileron', sans-serif;
  font-weight: 300;
}

@media (max-width: 1024px) {
  #nuestra-historia .history-slide {
    padding-top: 40px;
  }

  #nuestra-historia .history-title h2 {
    font-size: 6vw;
  }

  #nuestra-historia .history-over-title {
    font-size: 2.5vw;
  }

  #nuestra-historia .history-inner {
    flex-direction: column;
    padding: 20px;
    gap: 30px;
  }

  #nuestra-historia .history-year {
    font-size: 3vw;
  }

  #nuestra-historia .history-item p {
    font-size: 2.6vw;
  }
}
/* Permite que el flex-item reduzca su ancho y el texto haga wrap */
#nuestra-historia .history-content,
#nuestra-historia .history-item {
  min-width: 600px;
}

/* Limita el ancho del bloque de texto */
#nuestra-historia .history-timeline {
  max-width: 480px;   /* mismo límite visual que buscas */
  width: 100%;
}

/* Fuerza el salto de línea normal y evita desbordes raros */
#nuestra-historia .history-item p {
  display: block;
  width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word; /* respaldo para palabras largas */
}












/* SERVICIOS */
/* =========================
   ========================= */

/* Slide base */
#nuestros-servicios .services-slide {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenedor interno */
#nuestros-servicios .services-inner {
  width: 100%;
  max-width: 1400px;
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  color: #9ef4ff; /* texto general */
}

/* Encabezado */
#nuestros-servicios .services-header {
  text-align: center;
  max-width: 980px;     /* más ancho que antes */
  width: 100%;
  padding: 0 10px;      /* evita que se pegue a bordes */
}

#nuestros-servicios .services-over-title {
  display: block;
  font-size: 1.5vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
  color: #9ef4ff;
}

#nuestros-servicios .services-title {
  font-size: 2.6vw;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 6px;
  margin-bottom: 14px;
  color: #9ef4ff;       /* título color solicitado */
  text-align: center;
}

/* Texto debajo del título: centrado y sin desbordes */
#nuestros-servicios .services-intro {
  font-size: 1vw;
  line-height: 1.55;
  opacity: 0.95;
  color: #9ef4ff;
  text-align: center;

  /* evita que se salga como en tu imagen 2 */
  max-width: 900px;
  margin: 0 auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Grid de tarjetas */
#nuestros-servicios .services-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  padding-top: 10px;
}

/* Tarjeta */
#nuestros-servicios .service-card {
  position: relative;
  flex: 1 1 0;
  max-width: 380px;

  /* tonalidad aproximada a #1f1e61 pero transparente */
  background: rgba(31, 30, 97, 0.72);

  border-radius: 20px;
  padding: 90px 26px 34px; /* más espacio para nube más arriba */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);

  /* Mantener contenido dentro */
  overflow: hidden;
  color: #9ef4ff; /* texto dentro de la tarjeta */
}

/* Nube superior (logos) */
#nuestros-servicios .service-cloud {
  position: absolute;
  top: -55px;            /* ANTES -40px -> sube más */
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  background: transparent !important;
  border-radius: 40px;
  padding: 10px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: none !important;
}

/* flecha de nube oculta */
#nuestros-servicios .service-cloud::after {
  display: none !important;
}

/* Logo dentro de nube */
#nuestros-servicios .service-logo {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}

/* Contenido de tarjeta */
#nuestros-servicios .service-body {
  text-align: left;
  min-width: 0; /* importante para que el texto haga wrap en flex */
}

#nuestros-servicios .service-name {
  font-size: 1.05vw;
  font-weight: 700;
  margin-bottom: 12px;
  color: #9ef4ff;
}

/* Texto */
#nuestros-servicios .service-body p {
  font-size: 0.99vw;
  line-height: 1.2;
  color: #9ef4ff;
  font-family: 'Aileron', sans-serif;
  font-weight: 300;

  /* wrapping seguro */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1024px) {
  #nuestros-servicios .services-inner {
    padding: 40px 20px;
    gap: 35px;
  }

  #nuestros-servicios .services-grid {
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }

  #nuestros-servicios .service-card {
    max-width: 440px;
    padding: 85px 22px 30px;
  }

  #nuestros-servicios .service-cloud {
    top: -50px;
    width: 90%;
  }

  #nuestros-servicios .services-title {
    font-size: 6vw;
  }

  #nuestros-servicios .services-over-title {
    font-size: 2.4vw;
  }

  #nuestros-servicios .services-intro {
    font-size: 2.6vw;
    max-width: 92%;
  }

  #nuestros-servicios .service-name {
    font-size: 3.4vw;
  }

  #nuestros-servicios .service-body p {
    font-size: 2.6vw;
  }
}
/* 1) Permitir que la nube/logo sobresalga sin recortarse */
#nuestros-servicios .service-card{
  overflow: visible;            /* ANTES: hidden */
  padding-top: 105px;           /* más espacio para nube arriba */
}

/* 2) Asegurar que la nube quede por encima */
#nuestros-servicios .service-cloud{
  top: -65px;                   /* súbela un poco más */
  z-index: 5;                   /* por encima de la tarjeta */
  pointer-events: none;
}

/* 3) Que el logo no se corte dentro de la nube */
#nuestros-servicios .service-logo{
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 4) Centrar textos dentro de las tarjetas */
#nuestros-servicios .service-body{
  text-align: center;           /* ANTES: left */
}

/* 5) Centrar también el título si lo usas */
#nuestros-servicios .service-name{
  text-align: center;
}

/* 6) Interlineado centrado/uniforme en párrafos */
#nuestros-servicios .service-body p{
  text-align: center;           /* centra párrafos */
  line-height: 1.5;             /* interlineado más aireado */
  margin: 0 auto;               /* bloque centrado */
}






/* INET */
/* =========================
   ========================= */
/* ===========================
   INET SECTION (CSS COMPLETO)
   Usa tu base:
   <section id="inet" class="full-screen-section">...</section>
   =========================== */

/* Contenedor interno */
#inet .inet-inner {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

/* LOGO ARRIBA */
#inet .inet-logo {
  width: 100%;
  display: flex;
  justify-content: center;
}

#inet .inet-logo img {
  width: 110%;
  max-width: 2500px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* NIÑO CENTRADO */
#inet .inet-hero {
  width: 100%;
  display: flex;
  justify-content: center;
}

#inet .inet-hero img {
  width: 85%;
  max-width: 1500px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  padding-left: 160px;
}

/* TEXTO PRINCIPAL */
#inet .inet-text {
  max-width: 880px;
  font-size: 1.05vw;
  line-height: 1.3;
  opacity: 0.92;
}

#inet .inet-text p {
  margin: 0 0 18px 0;

  /* wrapping seguro */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* PLANES (IMÁGENES) */
#inet .inet-planes {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 36px;
  margin-top: 10px;
  flex-wrap: wrap; /* por si en pantallas pequeñas no caben */
}

#inet .inet-planes img {
  width: 200px;          /* ajusta según tu imagen */
  max-width: 200px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* SUBTÍTULO DE PLANES */
#inet .inet-subtitle {
  font-size: 1.2vw;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin-top: 6px;
  text-transform: uppercase;
  color: #ffffff;
}

/* BOTÓN */
#inet .inet-btn {
  margin-top: 6px;
}

#inet .inet-btn a {
  display: inline-block;
  background: #9ef4ff;
  color: #0a0e2b;
  padding: 12px 44px;
  font-size: 1.05vw;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#inet .inet-btn a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
  #inet.full-screen-section {
    padding: 60px 16px;
  }

  #inet .inet-text {
    font-size: 2.8vw;
    max-width: 92%;
  }

  #inet .inet-planes {
    gap: 22px;
  }

  #inet .inet-planes img {
    width: 150px;
  }

  #inet .inet-subtitle {
    font-size: 3.4vw;
  }

  #inet .inet-btn a {
    font-size: 3.2vw;
    padding: 12px 36px;
  }
}

@media (max-width: 480px) {
  #inet .inet-planes img {
    width: 135px;
  }
}





/* ==================================
   STORETECH SECTION
   Basado en tu full-screen-section
   (con flechas laterales e inferiores como SVG)
   ================================== */

#storetech.storetech-section{
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  overflow: hidden; /* recorta laterales fuera de sección */
}

/* Contenedor interno */
#storetech .storetech-inner{
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  position: relative;
  z-index: 2; /* encima de flechas laterales */
}

/* =========================
   FLECHAS LATERALES (SVG)
   ========================= */
#storetech .storetech-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 75vh;   /* tamaño como referencia */
  width: auto;
  z-index: 1;     /* detrás del contenido, encima del fondo */
  pointer-events: none;
  opacity: 50%;
}

/* =========================
   FLECHAS LATERALES (SVG)
   ========================= */
#storetech .storetech-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 75vh;   /* tamaño como referencia */
  width: auto;
  z-index: 1;     /* detrás del contenido, encima del fondo */
  pointer-events: none;
  opacity: 1;
}

#storetech .storetech-arrow.left{
  left: 0;
}

#storetech .storetech-arrow.right{
  right: 0;
}
#storetech .storetech-arrow.left{
  left: 0;
}

#storetech .storetech-arrow.right{
  right: 0;
}

/* =========================
   LOGO ARRIBA
   ========================= */
#storetech .storetech-logo img{
  width: 110%;
  max-width: 1400px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Texto bajo logo */
#storetech .storetech-intro{
  max-width: 900px;
  font-size: 1.05vw;
  line-height: 1.6;
  opacity: 0.95;
}

/* Grid central: izquierda | centro | derecha */
#storetech .storetech-feature-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 8px;
}

/* Columnas de iconos */
#storetech .storetech-icons{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

/* Item icono */
#storetech .icon-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

#storetech .icon-item img{
  width: 100px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

#storetech .icon-item span{
  font-size: 0.7vw;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0.95;
}

/* Centro (mano) */
#storetech .storetech-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

#storetech .storetech-center img{
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
}

/* Texto inferior */
#storetech .storetech-footer-text{
  max-width: 700px;
  font-size: 0.95vw;
  line-height: 1.6;
  opacity: 0.9;
  margin-top: 4px;
}

/* Botón */
#storetech .storetech-btn a{
  display: inline-block;
  background: #ff2d2d;
  color: #ffffff;
  padding: 10px 34px;
  font-size: 0.95vw;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .03em;
  box-shadow: 0 10px 24px rgba(255,45,45,.35);
  transition: opacity .25s ease, transform .25s ease;
}

#storetech .storetech-btn a:hover{
  opacity: .85;
  transform: translateY(-1px);
}

/* =========================
   FLECHAS INFERIORES (SVG)
   ========================= */
#storetech .storetech-bottom-arrows{
  display: block;
  width: 95%;        /* casi todo el ancho */
  max-width: 1400px;
  height: auto;
  margin: 25px auto 0;
  pointer-events: none;
}

/* ==================================
   RESPONSIVE
   ================================== */
@media (max-width: 1024px){
  #storetech .storetech-intro{
    font-size: 2.8vw;
    max-width: 92%;
  }

  #storetech .storetech-feature-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  #storetech .storetech-icons{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  #storetech .icon-item span{
    font-size: 2.4vw;
  }

  #storetech .storetech-footer-text{
    font-size: 2.6vw;
    max-width: 92%;
  }

  #storetech .storetech-btn a{
    font-size: 3vw;
  }

  #storetech .storetech-arrow{
    height: 45vh;   /* laterales más pequeños en móvil */
  }

  #storetech .storetech-bottom-arrows{
    width: 98%;
  }
}




/* ==================================
   INPROYET SECTION
   Similar a INET y STORETECH
   ================================== */

#inproyet.inproyet-section{
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  overflow: hidden;
}

#inproyet .inproyet-inner{
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  position: relative;
  z-index: 2;
}

/* Logo arriba */
#inproyet .inproyet-logo img{
  width: 110%;
  max-width: 1400px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Texto intro */
#inproyet .inproyet-intro{
  max-width: 900px;
  font-size: 1.05vw;
  line-height: 1.6;
  opacity: 0.95;
}

/* CIUDAD SEGURA */
#inproyet .inproyet-title{
  margin-top: 6px;
  line-height: 1.05;
  text-transform: uppercase;
  color: #ffffff;
}

#inproyet .inproyet-title-small{
  display: block;
  font-size: 1.6vw;
  letter-spacing: .12em;
  font-weight: 500;
  opacity: 0.95;
}

#inproyet .inproyet-title-big{
  display: block;
  font-size: 3.2vw;   /* más grande */
  font-weight: 800;   /* negrita */
  letter-spacing: .08em;
}

/* Iconos 7 */
#inproyet .inproyet-icons{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  align-items: start;
  justify-items: center;
  margin-top: 6px;
}

#inproyet .icon-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

#inproyet .icon-item img{
  width: 100px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* Tamaño Radiocomunicaciones */
#inproyet .icon-item img[alt="Radiocomunicación"] {
  width: 110px;
}
#inproyet .icon-item img[alt="Telecomunicaciones"] {
  width: 112px;
}



#inproyet .icon-item span{
  font-size: 0.6vw;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0.95;
  max-width: 120px;
}

/* Ilustración grande */
#inproyet .inproyet-hero{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

#inproyet .inproyet-hero img{
  width: 180%;
  max-width: 1500px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

/* Botón */
#inproyet .inproyet-btn a{
  display: inline-block;
  background: #9ef4ff;
  color: #0a0e2b;
  padding: 12px 44px;
  font-size: 1.05vw;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 10px 24px rgba(158,244,255,.35);
  margin-bottom: 20px;
}

#inproyet .inproyet-btn a:hover{
  opacity: .85;
  transform: translateY(-1px);
}

/* ==================================
   RESPONSIVE
   ================================== */
@media (max-width: 1024px){
  #inproyet .inproyet-intro{
    font-size: 2.8vw;
    max-width: 92%;
  }

  #inproyet .inproyet-title-small{
    font-size: 3.4vw;
  }

  #inproyet .inproyet-title-big{
    font-size: 6vw;
  }

  #inproyet .inproyet-icons{
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 12px;
    padding: 0 10px;
  }

  #inproyet .icon-item img{
    width: 70px;
  }

  #inproyet .icon-item span{
    font-size: 2.2vw;
    max-width: 140px;
  }

  #inproyet .inproyet-hero img{
    max-width: 92%;
  }

  #inproyet .inproyet-btn a{
    font-size: 3.2vw;
    padding: 12px 36px;
  }
}

@media (max-width: 480px){
  #inproyet .inproyet-icons{
    grid-template-columns: repeat(2, 1fr);
  }
}