/* ==========================================================================
   CONFIGURACIÓN HEADER INTELIGENTE & BARRA VENTAS (iOON 2025)
   ========================================================================== */

/* 1. Reset de Body para evitar saltos */
body {
    margin: 0;
    padding-top: 100px; /* Espacio para Header (50px) + BarraVentas (~50px) */
    scroll-behavior: smooth;
    font-family: 'Raleway', sans-serif;
}

.header-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 10000;
    background: #000;
    transition: transform 0.3s ease-in-out; /* Animamos el movimiento */
}

#barraventas {
    position: fixed;
    top: 60px; /* Posición inicial: DEBAJO del header */
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.95);
    transition: top 0.3s ease-in-out; /* Animamos el TOP para que acompañe al header */
}



/* 5. Ajustes de Logo en Celu (Optimizado) */
@media (max-width: 768px) {
    #logo {
        width: 90px !important;
        margin: 4px auto !important;
    }
    #logo img {
        width: 90px !important;
        height: auto !important;
    }
    body {
        padding-top: 110px; /* Un poquito más en celu por el wrap de la barra */
    }
}



/*---Estilos generales---*/





@font-face {
    font-family: 'Kanit';
    src: local('Kanit'),
    		 url('../fuentes/Kanit-Regular.woff2') format('woff2'),
         url('../fuentes/Kanit-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: local('Kanit'), 
    		 url('../fuentes/Kanit-Bold.woff2') format('woff2'),
         url('../fuentes/Kanit-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: local('Kanit'),
    		 url('../fuentes/Kanit-Italic.woff2') format('woff2'),
         url('../fuentes/Kanit-Italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: local('Kanit'),
    		 url('../fuentes/Kanit-BoldItalic.woff2') format('woff2'),
         url('../fuentes/Kanit-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family: 'Raleway';
    src: url('../fuentes/Raleway-Regular.woff2') format('woff2'),
         url('../fuentes/Raleway-Regular.woff') format('woff');
    font-weight: 400; /* O el peso que corresponda a Regular */
    font-style: normal;
    font-display: swap;
}

/* 1. CONFIGURACIÓN GENERAL (PC y Base) */
.seccion-especialistas .banner-irregular-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 5%;
    background-color: #000;
    width: 95%;
    margin: 20px auto;
    
    /* TU AJUSTE DE PC CONSERVADO */
    clip-path: polygon(16% 20%, 85% 15%, 84% 87%, 14% 84%);
    
    animation: flashEntrada 0.8s ease-out forwards;
}

h2.texto-electrico {
    margin: 0;
    padding: 0;
    /* Mantenemos tu clamp y tu máximo de 3.5rem */
    font-size: clamp(1.4rem, 7vw, 3.5rem); 
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap; /* Fuerza un solo renglón */
    
    animation: fallaElectrica 3s linear infinite 0.5s;
}

/* 2. AJUSTE PARA CELULARES (Mobile) */
@media (max-width: 768px) {
    .seccion-especialistas .banner-irregular-dark {
        /* Polígono suavizado para que las letras respiren en el ancho del celu */
        clip-path: polygon(5% 15%, 99% 9%, 97% 90%, 3% 85%);
        padding: 12px 20px;
        width: 98%; /* Aprovechamos más el ancho de pantalla */
    }

    h2.texto-electrico {
        /* Ajustamos el tamaño para que sea lo más grande posible sin salirse */
        font-size: 7.9vw; 
    }
}

/* --- ANIMACIONES (Verificá que los nombres coincidan) --- */
@keyframes flashEntrada {
    0% { opacity: 0; transform: scaleX(0.5); background-color: #fff; filter: brightness(3); }
    70% { background-color: #fff; transform: scaleX(1.05); }
    100% { opacity: 1; transform: scaleX(1); background-color: #000; filter: brightness(1); }
}

@keyframes fallaElectrica {
    0%, 88% { opacity: 1; filter: none; }
    89% { opacity: 0.5; filter: brightness(2); }
    91% { opacity: 1; }
    93% { opacity: 0.2; }
    95% { opacity: 1; filter: drop-shadow(0 0 5px #fff); }
    100% { opacity: 1; }
}

/* --- SECCIÓN PRODUCTOS COMPLETA Y RESPONSIVA --- */

.contenedor-productos {
    max-width: 1000px; /* Ancho máximo en desktop */
    margin: 10px auto;
    padding: 15px;
    display: grid;
    /* 3 columnas en web, pero se ajustan si no hay espacio */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    background-color: #ffffff;
    box-sizing: border-box;
    justify-items: center; /* Centra las tarjetas en móvil */
}

.producto-card {
    background-color: #f5f5f7;
    width: 100%; /* Ocupa el ancho disponible del grid */
    width: 300px; /* Pero nunca más de 300px */
    height: 550px; /* Altura fija solicitada */
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #eeeeee;
}

/* Efecto Hover */
.producto-card:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.badge-recomendado {
    height:     auto;
    position:   absolute;
    background-color: #F52727;
    color: white;
    padding: 3px;
}

.producto-imagen {
    width: 189px;
    height: 250px;
    margin-top: 15px;
    object-fit: contain;
    background-color: #ffffff;
    border-radius: 8px;
    flex-shrink: 0;
}

.producto-info {
    width: 100%;
    flex-grow: 1; /* Ocupa el resto del espacio de la card */
    padding: 15px 20px 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    text-align: center;
}

.producto-datos {

	height: 500px;
}

.producto-info h4 {
    margin: 0 0 25px 0;
    font-size: 1.2rem;
    color: #1d1d1f;
    font-weight: 600;
    height: 20px;
}

.producto-caracteristicas {
    margin: 0;
    font-size: 1.0rem;
    color: #48484a;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    height: auto;
}

.producto-precio {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0px;
    height: auto;
}


/* Estilo para el link específico de Aging */
.link-aging {
    color: #06c; /* Azul inicial */
    text-decoration: none; /* Sin subrayado inicial */
    transition: color 0.3s ease;
    cursor: pointer;
}

.link-aging:hover {

    text-decoration: underline; /* Subrayado en hover */
}

/* Opcional: Desplazamiento suave al hacer clic */
html {
    scroll-behavior: smooth;
}



/* Nueva Sección Detalles del Producto */
.seccion-detalles {
    max-width: 980px;
    margin: 40px auto;
    padding: 0 20px;
}

.seccion-detalles h2 {
    border-bottom: 2px solid #f5f5f7;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tabla-especificaciones {
    width: 100%;
    border-collapse: collapse; /* Mantiene las celdas juntas para que el fondo sea continuo */
}

/* --- CAMBIO: EFECTO ZEBRA --- */
.tabla-especificaciones tr:nth-child(even) {
    background-color: #f9f9fb; /* Color gris suave para los renglones pares */
}

/* --- CAMBIO: AJUSTE DE BORDES --- */
/* Quitamos el borde de abajo para que los bloques de color se vean limpios */
.tabla-especificaciones tr {
    border-bottom: none; 
}

.tabla-especificaciones td {
    padding: 15px 10px; /* Aumenté un poco el padding lateral para que el texto no pegue al borde del color */
    font-size: 20px;
}

.espec-nombre {
    font-weight: 600;
    color: #1d1d1f;
    width: 30%;
}

.espec-valor {
    color: #48484a;
}

/* Opcional: Un pequeño hover para resaltar la fila donde está el mouse */
.tabla-especificaciones tr:hover {
    background-color: #f0f0f2;
}


/* Botón Ver Detalles */
.btn-detalles {
    display: inline-block;
    background-color: #0082ff;
    color: #ffffff;
    text-align: center;
    padding: 12px 0;
    width: 70%; /* Ocupa el ancho de la info */
    border-radius: 0px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    height: 50px;
    margin-top: 10px;
    border: 2px solid transparent; /* Para que el borde no mueva el diseño al aparecer */
    transition: all 0.3s ease;
}

.btn-detalles:hover {
    border-color: #00ffff; /* Cyan */
    background-color: #0073e6; /* Un azul apenas más oscuro */
}

/* Ajuste necesario en producto-info para que quepa el botón */
.producto-info {
    padding: 10px 20px 15px 20px;
    height: 195px; /* Aumentamos levemente el espacio de texto para el botón */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Ajuste para que el texto de la tarjeta no se vea azul por ser un link */
.contenedor-productos a {
    text-decoration: none;
    color: inherit;
}



/* --- AJUSTE ESPECÍFICO PARA MÓVIL --- */
@media (max-width: 600px) {
    .contenedor-productos {
        grid-template-columns: 1fr; /* Fuerza una sola--- */
        height: auto;
        margin: 20px auto;
    }


}

.producto-galeria-container {
    max-width: 1100px;
    margin: 50px auto;
    background: #fff;

    padding: 20px;
    box-sizing: border-box;
}



/* --- PAGINA DE PRODUCTO PUNTUAL --- */
.producto-detalle-container {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    display: flex;
    gap: 40px;
    padding: 20px;
    box-sizing: border-box;
}

.breadcrumb {
    font-size: 16px;
    margin: 30px 0 10px 50px;
    opacity: 0.7;
}

.breadcrumb a {
    text-decoration: none;
    color: blue;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Galería de Fotos */
.galeria-fotos {
    width: 420px;
    flex-shrink: 0;
    position: relative;
}

.foto-principal {
    width: 420px;
    height: 420px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: #f5f5f7;
}

.foto-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none; /* Se maneja por JS */
}

.foto-principal img.active {
    display: block;
}

/* Navegación Galería */
.nav-galeria {
    position: absolute;
    top: 50%;
    width: 110%;
    left: -5%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .nav-galeria {
            width: 100%;
            left: 0;
        }

     .nav-galeria button {   
            width: 50px !important;
    height: 50px !important;
        }
    }

.nav-galeria button {

    cursor: pointer;

    pointer-events: auto;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: rgba(107,107,107,0.3);
    backdrop-filter: blur(4px);
    color: #292929;
    font-size: 1.5rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    flex-shrink: 0;
    z-index: 500;
}


.nav-galeria button:hover {
    background: black !important;
    color: white !important;
    text-decoration: none !important;

    transform: scale(1.1);
}

.puntos-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.punto {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.punto.active {
    background: #0071e3;
}

/* Información del Producto (Derecha) */
.info-detalle {
    flex-grow: 1;
}

.info-detalle h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #1d1d1f;
    height: auto;
}

.desc-larga {
    font-size: 20px;
    line-height: 1.5;
    color: #48484a;
    height: auto; /* Aproximadamente 5 líneas */
    margin-bottom: 20px;
}

.precio-grande {
    font-size: 2.2rem;
    font-weight: 700;
    display: inline-block; /* Cambiado de block a inline-block para permitir elementos al lado */
    margin-bottom: 25px;   /* Mantiene el espacio hacia abajo del bloque completo */
}

.iva-grande {
    font-size: 1.2rem;
    font-weight: 700;
    display: inline;       /* Se mantiene en la misma línea que el precio */
    margin-left: 8px;      /* Espacio horizontal para que no se pegue al precio */
}

.producto-lista {
    font-size: 1.0rem;
    font-weight: 700;
    display: inline;       /* Se mantiene en la misma línea que el precio */
    
}


.btn-whatsapp {
    background-color: green;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.btn-whatsapp:hover {
    background-color: #128c7e;
}

/* Sección FAQ (Preguntas) */
.seccion-faq {
    max-width: 980px;
    margin: 60px auto;
    padding: 0 20px;
}

.faq-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 20px 0;
}

.faq-pregunta {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    background: none;
    border: none;
    text-align: left;
    color: #3B3B3B;
}

.faq-respuesta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    color: #666;
    padding-top: 0;
    font-size: 20px;
    line-height: 28px;
}

/* Estilo de la flecha tipo Google */
.flecha {
    width: 12px !important;
    height: 12px !important;
    box-sizing: border-box !important;
    border-right: 3px solid #292929; 
    border-bottom: 3px solid #292929;
    transform: rotate(45deg); 
    transition: transform 0.3s ease;
    display: inline-block;
    vertical-align: middle;

    /* ESTO CREA EL ESPACIO VISUAL */
    margin-left: 10px !important; 
    
    /* Mantenemos el margin-right si lo tenías para alejarlo del borde derecho */
    margin-right: 5px !important; 
}
/* Clase que aplicaremos con JS cuando se abra */
.faq-item.active .flecha {
    transform: rotate(-135deg); /* Rota hacia arriba */
    margin-bottom: -5px; /* Ajuste visual de posición */
}

/* Ajuste al botón para que no se pegue */
.faq-pregunta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    color: #202124; /* Color de texto Google */
    font-family: 'Google Sans', Arial, sans-serif;
}

/* RESPONSIVO */
@media (max-width: 850px) {
    .producto-detalle-container {
        flex-direction: column;
        align-items: center;
        margin: 0px auto;
    }
    .galeria-fotos, .foto-principal {
        width: 100%;
        max-width: 420px;
    }
}


body {
   			margin: 0px;
			scroll-behavior: smooth;
}

#cuerpo {
   			max-width: 100%;
            height: auto;
}




a{
	
	height: auto;
	text-decoration: none;
		
}
a:hover{text-decoration: none;}


html {

	height:100%;
scroll-behavior: smooth;}

body {
    height: auto;
}



*{
	margin:0;
	padding:0;
	text-decoration: none;

}

* img{
height: auto;
}



.toggle-menu{
	width: 40px;
	position: absolute;
	top: .7rem;
	right: 1rem;

}

.toggle-menu img{
	width: 65%;
	height: auto;
}

#navcontacto img{
	width: 10%;
	margin-top: 10px;
	height: auto;
}

.toggle-menu__checkbox{
	display:none ;
}

.animated-word {
    animation: changeWord 5s  infinite;
    
}

@font-face {
    font-family: 'ARDESTINE'; /* Nombre de la fuente */
    src: url('../fuentes/ARDESTINE.woff2') format('woff2'),  /* Formato WOFF2 */
         url('../fuentes/ARDESTINE.woff2') format('woff');    /* Formato WOFF */
    font-weight: normal; /* Define el peso de la fuente, si es necesario */
    font-style: normal;  /* Define el estilo de la fuente, si es necesario */
    font-display: swap;  /* Mejora la experiencia de usuario */
}

@keyframes changeWord {
    0%, 100% {
        color:red;
    }
    10%, 90% {
        
        color:blue;
    }
    20%, 80% {
       
        color:green;
    }
    30%, 70% {
        color:DarkRed;
    }
    40%, 60% {
      
        color:orange;
    }
    
    50%, {
        opacity: 0;
        color:green;
    }
  
}

.girar-ultima-letra {
  display: inline-block;
}

.girar-ultima-letra::after {
  content: attr(data-last-letter); /* Utiliza el valor del atributo data-last-letter como contenido */
  display: inline-block;
  transform: scaleX(-1); /* Gira verticalmente */
}


.gradient-text {
    font-weight: bold;
    background: linear-gradient(to right, #581845, #ff3ac8, #c70039, #ff5733, #262be9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.innovative {
    background: linear-gradient(270deg, #ff7e5f, #a302cb, #86a8e7, #7f7fd5);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientAnimation 5s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

        /* --- Estilos para el Recuadro de Hitos (Display Flex) --- */
        .hitos-recuadro {
            background-color: #e6f7ff; /* Un color de fondo claro para el recuadro */
            padding: 25px;
            border-radius: 8px;
            border: 1px solid #b3e0ff;
            text-align: center;
            margin-top: 30px;
            margin-bottom: 40px;
        }

        .hitos-recuadro h3 {
            color: #2980b9;
            margin-bottom: 25px;
            font-size: 1.8em;
        }

        .hitos-grid {
            display: flex; /* Habilitamos Flexbox */
            flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
            justify-content: space-around; /* Distribuye el espacio entre los ítems */
            gap: 20px; /* Espacio entre las columnas */
        }

        .hito-item {
            flex: 1; /* Hace que cada ítem intente ocupar el mismo espacio */
            min-width: 250px; /* Ancho mínimo para cada columna antes de envolverse */
            padding: 20px 15px;
            background-color: #ffffff;
            border-radius: 6px;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
            border: 1px solid #ddd;
            display: flex; /* Flexbox también dentro de cada item para centrar contenido */
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .hito-item .numero {
            font-size: 3.5em; /* Tamaño grande para los números */
            font-weight: bold;
            color: #0d6efd; /* Color vibrante para el número */
            margin-bottom: 40px;
            margin-top: 10px;
        }

        .hito-item .descripcion {
            font-size: 1.1em;
            color: #555;
            line-height: 1.4;
        }

        /* Media Query para Dispositivos Móviles (uno debajo del otro) */
        @media (max-width: 768px) {
            .hitos-grid {
                flex-direction: column; /* Apila los elementos en una sola columna */
                align-items: center; /* Centra los ítems apilados */
            }

            .hito-item {
                width: 90%; /* Ocupa casi todo el ancho disponible en móvil */
                max-width: 350px; /* Limita el ancho máximo en pantallas pequeñas */
            }

            .hitos-recuadro h3 {
                font-size: 1.5em;
            }

            .hito-item .numero {
                font-size: 2.0em;
                margin-bottom: 10px;
            }
        }

/* --- Contenedor Principal --- */
.ups-section {
    /* Centra la sección en la página */

    max-width: 1200px; /* Ancho máximo para pantallas grandes */
    margin: 40px auto;
    padding: 0 15px; /* Pequeño padding para móviles */
}



/* --- Renglón de Modelos (Flex Contenedor) --- */
.ups-row {
    display: flex;
    align-items: center; /* Centra verticalmente la imagen y el texto */
    margin-bottom: 60px; /* Espacio entre cada renglón */
    gap: 10px; /* Espacio entre la imagen y el texto */
}

/* --- Diseño Cruzado (Texto a la izquierda, Imagen a la derecha) --- */
/* Esta clase invierte el orden del Flexbox */
.row-reverse {
    flex-direction: row-reverse;
}

/* --- Contenedor de Imagen --- */
.ups-image {
    flex: 0 0 50%; /* La imagen ocupa el 40% del ancho */
    max-width: 40%; 
}

.ups-image img {
    width: 80%;
    height: auto;

    object-fit: contain; /* Asegura que la imagen se vea completa */
    border-radius: 8px; /* Opcional: para un toque moderno */
}

/* --- Contenedor de Texto --- */
.ups-content {
    flex: 0 0 60%; /* El texto ocupa el 60% del ancho */
    max-width: 60%; 
    padding: 0 0 35px 0;
}

.ups-content h4 {
    font-size: 1.8em;
    color: #004c99; /* Ejemplo de color corporativo */
    margin-bottom: 20px;
    text-align: center;
}

/* --- Responsive (Para Móviles y Tablets) --- */
@media (max-width: 768px) {
    .ups-section {
        width: 95%; /* Ocupa más ancho en dispositivos pequeños */
    }

    /* En móviles, apila todos los elementos (imagen arriba, texto abajo) */
    .ups-row,
    .row-reverse {
        flex-direction: column; /* Cambia a columna en móviles */
  
        margin-bottom: 50px;
    }

    /* En móviles, tanto la imagen como el texto ocupan todo el ancho */
    .ups-image,
    .ups-content {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .ups-image {
        margin-bottom: 15px; /* Espacio entre la imagen y el texto en móvil */
        text-align:center	;
    }
}

.soluciones-hub {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px !important;
    padding: 0px 20px !important;
}

/* Card */
.sol-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    display: block;
}

/* Imagen */
.sol-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

/* Overlay */
.sol-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);

    color: white;
}

.sol-card h3 {
    margin: 0;
    font-size: 1.5rem;
}

.sol-card p {
    margin: 5px 0 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Hover */
.sol-card:hover img {
    transform: scale(1.06);
}

/* MOBILE */
@media (max-width: 768px) {
    .soluciones-hub {
        grid-template-columns: 1fr;
    }
}

/* CONTENEDOR */
.soluciones-hub {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* CARD */
.sol-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;

    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* IMAGEN */
.sol-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;

    transition: transform 0.5s ease, filter 0.5s ease;
}

/* OVERLAY */
.sol-card .overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 24px;

    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1));

    color: white;
}

/* TAG */
.sol-card .tag {
    display: inline-block;
    margin-bottom: 10px;
    height: auto;
    font-size: 0.7rem;
    letter-spacing: 1px;
    font-weight: 600;

    padding: 4px 8px;
    border-radius: 4px;

    color: white;
    backdrop-filter: blur(4px);
}

/* COLORES POR TIPO */
.tag-empresas {
    background: rgba(0, 150, 255, 0.25);
}

.tag-industrial {
    background: rgba(255, 140, 0, 0.25);
}

.tag-tienda {
    background: rgba(255, 255, 255, 0.2);
}

/* TITULO */
.sol-card h3 {
    margin: 0 !important;
    font-size: 1.6rem !important;
    color: white !important;
}

/* TEXTO */
.sol-card p {
    margin: 6px 0 0 0;
    font-size: 1rem;

    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

/* HOVER */
.sol-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.2);
}

.sol-card:hover img {
    transform: scale(1.08);
    filter: brightness(0.7);
}

.sol-card:hover p {
    opacity: 1;
    transform: translateY(0);
}

/* MOBILE */
@media (max-width: 768px) {
    .soluciones-hub {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sol-card p {
        opacity: 1;
        transform: none;
    }
}

.descargas {
        position:   relative;   
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    text-align: center;
    margin: 0 auto;
    color: #06c;
    margin: 50px auto 0;
    overflow: hidden;
    height: auto;
}

@media (max-width: 768px) {
    .descargas {
        margin: 0 auto;
    }
}

#caso-exito {
                text-align:center;
                padding-top: 20px;
                font-family: 'kanit', sans-serif;
               

    }

#caso-exito h5{
                background-color: #48E5CD;
                width: 220px;
                font-size: 33px;
                margin: 50px auto 0 auto;
                padding: 5px;
    }



/* --- TU CÓDIGO ORIGINAL (MANTENIDO) --- */

.header-principal {
    width: 100%;
    background: #000;
    position: fixed; /* Siempre fijo para poder controlarlo */
    top: 0;
    left: 0;
    z-index: 9999;
    height: 60px !important;
    border-bottom: solid 2px red;
    transition: transform 0.3s ease-in-out; /* Animación suave */
}

/* Esta clase se activará con JS al bajar */
.header-oculto {
    transform: translateY(-100%);
}

/* Para que el contenido de abajo no se meta debajo del header fijo */
body {
    padding-top: 50px; 
}

#menu-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important;
    
    /* ESTO ES LO QUE SOLUCIONA EL PADDING */
    box-sizing: border-box !important; 
    padding: 0 20px !important;
    
    height: 100% !important;
    margin: 0 auto !important; /* Para que siempre esté centrado */
}


.icono-hamburguesa, .check-menu, .btn-cerrar-movil {
    display: none !important; 
}

.menu-lista {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
}

.menu-lista > li {
    position: relative;
    height: 70%;
    align-items: center;

}

.menu-lista > li > a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    padding: 0 35px;
    line-height: 50px;
    display: block;
    font-weight: bold;
}

.item-con-sub > a {
    color: white;
}

.item-con-sub:hover > a {
    color: black; 
    text-decoration: none;
    padding: 0 35px;
    line-height: 50px;
    display: block;
    font-weight: bold;
}

/* SUBMENÚS PC - FORZANDO NEGRO TOTAL NO TRANSPARENTE */
.sub-lista {
    display: none;
    height: auto;
    position: absolute;
    top: 45px;
    left: 0;
    background-color: #000000 !important; /* Negro sólido */
    min-width: 250px;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    z-index: 10000;
    border-radius: 0 !important;
    opacity: 1 !important; /* Asegura que no sea transparente */
}

.sub-lista li {
    background-color: #000000 !important;
    padding: 15px;
    border-radius: 0;
    text-align: left;
}

.sub-lista li a {
    color: #fff !important;
    padding: 15px 20px;
    display: block;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 !important;
    border-bottom: 4px solid transparent; 
    box-sizing: border-box;
    width: 100%;
}

.sub-lista li a:hover {
    background-color: #111111 !important;
    border-bottom: 4px solid #ff0000 !important; 
    color: #fff !important;
}

.item-con-sub:hover .sub-lista {
    display: block !important;
}

/* --- VERSION CELULAR --- */
@media (max-width: 768px) {
    #menu-container {
        justify-content: center !important;
    }

    .icono-hamburguesa {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        position: absolute;
        right: 20px;
        top:22px;
        cursor: pointer;
    }

    .linea {
        width: 100%;
        height: 3px;
        background-color: #fff;
        display: block;
    }

    .menu-lista {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: #000000;
        padding: 0;
        height: auto;
        z-index: 10001;
    }

    .check-menu:checked ~ .menu-lista {
        display: flex !important;
    }

    .menu-lista > li {
        width: 100%;
        text-align: left;
        height: auto;
        padding: 5px 0;

    }

    .menu-lista > li > a {
        line-height: 50px;
        padding-left: 20px;
    }

    .sub-lista {
        position: static;
        display: block;
        background: #000000 !important;
        padding:0px;
        border: none !important;
        box-shadow: none;
    }

    .btn-cerrar-movil {
        display: block !important;
        text-align: center;
        padding: 20px 0 10px 0;
    }

    .btn-cerrar-movil label {
        color: white;
        font-weight: bold;
        cursor: pointer;
        font-size: 18px;
        text-align: center;
        display: inline-block;
    }
}

.titulo-renglon {
    font-family: 'Kanit', sans-serif !important;
    color: #1d1d1f !important;
    font-weight: 800 !important;
    font-size: 2.4rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-align: center;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
    display: block;
}

/* En móviles bajamos un poco el tamaño para que no rompa en 3 líneas */
@media (max-width: 768px) {
    .titulo-renglon {
        text-align: center !important;
    }
}

/* Estilo para los h4 dentro de la sección de ventajas/pilares */
.pilar-titulo {
    font-family: 'Kanit', sans-serif !important;
    font-size: 1.5rem !important; /* Más pequeño que el de los renglones */
    font-weight: 700 !important;
    color: #1d1d1f !important; /* El azul de iOON para resaltar el concepto */
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
    margin:0px auto 5px auto !important;
    display: inline-block;
}

/* Para que el bloque ventajastableros respire mejor ahora que no hay fotos grandes */
.ventajastableros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 60px 20px;
    background-color: #f8f8f8; /* Un gris muy suave para separar del negro de arriba */
}

@media (max-width: 768px) {
    .ventajastableros {
        grid-template-columns: 1fr; /* En celu, uno debajo del otro */
        text-align: center;
    }
}

.pilar-titulo {
    font-family: 'Kanit', sans-serif !important;
    font-size: 1.2rem !important; /* Letra pequeña, tipo caption */
    font-weight: 500 !important;
    color: #86868b !important; /* Gris suave, no compite con el negro */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 !important;
    line-height: 1.2;
}

/* En mobile, achicamos el espacio para que el usuario 
vea los Renglones asomando apenas termina el carousel */
@media (max-width: 768px) {
    .ventajastableros {
        padding: 40px 10px 40px !important;
        gap: 10px;
    }
    .pilar-titulo {
        font-size: 0.7rem !important;
    }
}

.seccion-especialistas {
    padding: 0px 0;/* Bajamos el margen de la sección completa */
    text-align: center;
    background-color: #ffffff;
}

.seccion-especialistas h2{
            font-size: 3.5em !important;
        font-weight: 700;
        font-family: 'kanit', sans-serif !important;
        padding: 0 !important;
        color: black;
        margin-top: 7%;
        margin-bottom: 12%;
        height: auto;
}

.banner-irregular-dark {
    display: inline-block;
    background-color: #000000;
    padding: 10px 40px;
    
    /* CLIP-PATH: POLÍGONO (Punto 1, Punto 2, Punto 3, Punto 4)
       Cada punto es (X Y). 0% 0% es la esquina superior izquierda.
    */
    clip-path: polygon(
        5% 25%,    /* Esquina Superior Izquierda (X, Y) */
        97% 20%,  /* Esquina Superior Derecha (X, Y) -> 2% la baja un poquito */
        95% 80%, /* Esquina Inferior Derecha (X, Y) -> 92% la inclina hacia adentro */
        3% 80%    /* Esquina Inferior Izquierda (X, Y) -> 95% la sube un poquito */
    );
}

.texto-banner-white {
    font-family: 'Kanit', sans-serif;
    font-weight: 800;
    font-size: 3.7rem;
    font-style: oblique;
    color: #ffffff !important;
    text-transform: uppercase;
    display: block;
    /* Ya no necesitamos skew en el texto porque el contenedor no está 'skewed' */
}
/* Ajuste fino para móviles */
@media (max-width: 768px) {
    .banner-paralelogramo-dark {
        padding: 6px 20px;
        transform: skewX(-10deg);
    }
    .texto-banner-white {
        font-size: 2.0rem;
        transform: skewX(10deg);
    }
    .banner-irregular-dark {
    display: inline-block;
    background-color: #000000;
    padding: 10px 20px;
    
    /* CLIP-PATH: POLÍGONO (Punto 1, Punto 2, Punto 3, Punto 4)
       Cada punto es (X Y). 0% 0% es la esquina superior izquierda.
    */
    clip-path: polygon(
        5% 25%,    /* Esquina Superior Izquierda (X, Y) */
        97% 20%,  /* Esquina Superior Derecha (X, Y) -> 2% la baja un poquito */
        95% 80%, /* Esquina Inferior Derecha (X, Y) -> 92% la inclina hacia adentro */
        3% 80%    /* Esquina Inferior Izquierda (X, Y) -> 95% la sube un poquito */
    );
}
    .seccion-especialistas h2{
            font-size: 30px !important;
        font-weight: 700;
        font-family: 'kanit', sans-serif !important;
        padding: 0 !important;
        color: black;
        margin-top: 7%;
        margin-bottom: 12%;
        height: auto;
}
}

.seccion-hero-dark {
    background-color: black; /* Un negro elegante, no tan plano */
    color: #ffffff;
    padding: -150px auto 0px auto;

   
}

.seccion-hero-dark h1 {

    color: white;
    padding-bottom: 50px;
    margin-top: -20px; /* Para que pegue bien con el header si es necesario */
}

#lista-aplicaciones-industriales {
    padding-bottom: 50px;
    text-align: center !important;
}

/* Título */
#lista-aplicaciones-industriales h2 {
    color: white !important;
    margin-bottom: 25px !important;
    font-size: 3.8rem;
    text-align: center !important;
    padding-top: 40px !important;
}

/* Lista */
#lista-aplicaciones-industriales ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Items */
#lista-aplicaciones-industriales li {
    color: white;
    font-size: 27px;
    font-weight: 600;

    position: relative;
    padding-left: 26px; /* un poco menos, más fino */
}

/* Indicador técnico */
#lista-aplicaciones-industriales li::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 2px;

    color: white;
    font-size: 1.2rem;
    opacity: 0.9;
}

/* MOBILE */
@media (max-width: 768px) {
    #lista-aplicaciones-industriales ul {
        flex-direction: column;
        align-items: flex-start;
    }

    #lista-aplicaciones-industriales li {
        width: 80%;
        max-width: 400px;
        margin: 0 auto;
        font-size: 22px;
    }
    #lista-aplicaciones-industriales h2 {
    color: white !important;
    margin-bottom: 35px !important;
    font-size: 38px;
    text-align: center !important;

}
}

/* 1. CONTENEDOR Y TRACK */
.carousel-cards-wrapper {
    padding: 20px 0 50px 0;
    overflow: hidden; /* Evita scrolls no deseados */
}

.carousel-cards-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.cards-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    gap: 25px; 
    padding: 0 10%;
}

/* 2. LA CARTA (ITEM) - Con tus proporciones y efectos */
.card-item {
    flex: 0 0 100%;
    background: #fff;
    border-radius: 15px; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
    
    /* Relación de aspecto dinámica */
    aspect-ratio: 21 / 9; 
    
    /* Efectos de cartas laterales */
    opacity: 0.4;
    transform: scale(0.95);
    filter: blur(4px); 
    
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.card-item.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* 3. IMÁGENES Y VIDEOS */
.card-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.card-image img,
.card-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reglas de visibilidad para los videos duplicados */
.v-mo { display: none !important; }
.v-pc { display: block !important; }

/* 4. TUS MODIFICACIONES EN EL BADGE */
.card-badge {
    position: absolute;
    top: -150px;
    left: 20px;
    background: rgba(0, 191, 255, 0.9); /* Azul iOON */
    color: white;
    padding: 3px 5px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 2;
    
    /* Mantenemos tus valores específicos */
    height: 50px;
    margin-top: 25%;
    
    /* Centrado interno */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. CONTENIDO */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: white;
    z-index: 1;
}

.card-content h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff !important;
}

.card-content p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
    max-width: 90%;
}

/* 6. NAVEGACIÓN */
.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.prev { left: 15px; }
.next { right: 15px; }

/* 7. DOTS */
.cards-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px; 
    position: relative;
    z-index: 5;
}

.dot {
    width: 12px;
    height: 12px;
    background: #bbb; 
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.1); 
}

.dot.active {
    width: 35px; 
    background: black; 
    border-radius: 10px;
    border: none;
}

/* 8. RESPONSIVE */
@media (max-width: 1250px) {
    .prev { left: -10px; }
    .next { right: -10px; }
}

@media (max-width: 768px) {
    /* Invertimos visibilidad de videos */
    .v-pc { display: none !important; }
    .v-mo { display: block !important; }

    .card-item {
        /* Proporción vertical (más alta que ancha) */
        aspect-ratio: 3 / 4; 
    }
    
    .cards-track {
        padding: 0 8%; 
        gap: 15px;
    }

    .card-content {
        padding: 25px 20px;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    }
    
    .card-content h4 { 
        font-size: 1.3rem; 
        margin-bottom: 5px;
    }

    .card-content p { 
        font-size: 0.95rem; 
        line-height: 1.3;
        max-width: 100%;
    }
    
    .card-badge {
        margin-top: 100%; 
        height: 45px;
        font-size: 0.75rem;
        padding: 0 10px;
    }

    .carousel-cards-container .arrow-btn {
        display: none; /* Desaparecen en celular */
    }

    .cards-track {
        padding: 0 12%; /* Aumentamos un pelín el aire para que se vea más la carta de al lado */
    }
}

.cta-post-problema {
    margin-top: 30px;
}

.cta-texto {
    color: white;
    font-weight: 600;
    margin-bottom: 10px;
}

.cta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cta-links a {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;

    color: white;
    text-decoration: none;
    font-size: 0.9rem;

    transition: all 0.25s ease;
}

.cta-links a:hover {
    background: white;
    color: black;
}

.h1-empresas {
    height: auto;
    font-size: 2.8rem;
    width: 80%;
    margin: 30px auto 80px auto;
    line-height: 1.5;
}

.h2-empresas {
    height: auto;
    font-size: 2.5rem;
    width: 80%;
    margin: 0 auto;
    padding: 0 0 20px 0;
    line-height: 1.5;
}

.p-empresas {
    height: auto;
    font-size: 1.6rem;
    width: 100%;
    margin: 0 auto 30px auto;
    line-height: 1.5;

}

/* CONTENEDOR */
.cta-empresas {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* BOTONES */
.cta-btn {
    padding: 15px 25px;
    background: #fff;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 1.4rem;
    height: auto;
    transition: all 0.25s ease;
}

/* HOVER GENERAL */
.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* BOTÓN PRINCIPAL (WHATSAPP) */
.cta-principal {
    background: #f5f5f5;
    border: 2px solid black;
    color: black !important;
    font-weight: 600;
}

/* hover */
.cta-principal:hover {
    background: black;
    color: white !important;
}



/* MOBILE */
@media (max-width: 768px) {
    .h1-empresas {
        width: 100%;
        font-size: 2.3rem;
        margin: 0 auto 30px auto;
        line-height: 1.4;
    }
    .h2-empresas {
        width: 100%;
        font-size: 2.0rem;
    }
     .cta-btn {
        width: 100%;
        text-align: center;
    }
}

.intro-tienda {
    text-align: center;
    padding: 40px 20px;
    height: auto;
}

.intro-tienda h1 {
    font-size: 2.5rem;
    width: 75%;
    margin:10px auto 30px auto;
}

.intro-texto {
    color: #666;
    margin-bottom: 25px;
    font-size: 1.8rem;
}

.cta-tienda {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-principal {
    background: #f5f5f5;
    border: 2px solid black;
    padding: 12px 20px;
    text-decoration: none;
    color: black;
    font-weight: 600;
}

.cta-principal:hover {
    background: black;
    color: white;
}

.cta-secundario {
    background: white;
    border: 1px solid #ccc;
    padding: 12px 20px;
    text-decoration: none;
    color: black;
}

/*---CHICO---------------------------------------------*/
@media (max-width: 850px){


	body{
	background:#FFFFFF;
	font-family: 'Raleway', sans-serif;
	

	}

.header-index {

	margin-top: -60px;
	height: 60px !important;
	display: block;
	color:#fff;
	 position: fixed; 
	 background-color: rgba(0,0,0,0.9); 
	 z-index: 5000;
	 width: 100%;
     border-bottom: solid 3px red;
}

header a {
	display: block;
}

.main-menu--show {

	transform: translateY(0);
}


.main-menu{
	display:flex;
	flex-direction: column;
	font-family: 'Archivo Black', sans-serif;
	float: right;
	transform: translateY(-120%);
	margin-right: 125px;
	font-size:  1.12em;
	background: rgba(0,0,0,0.9);
	width: 100%;
	margin: 0px;
}

.toggle-menu__checkbox:checked + .main-menu{
	transform: translateY(0);
}

.toggle-menu__checkbox{
	display:none ;
}



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

	nav ul li a{
		padding: 20px;
		height: 40px;
		color: white;
			
	}


#barra-menu{
	height: auto;
}

	#barra-menu a {
	color: #fff;
	background: #000;
	font-family: 'Archivo Black', sans-serif;
	font-size:  0.99em;
	display: block;
	padding: 20px;
		display: none;
	}

	#barra-menu span{
		background: #000;
		float: right;
		font-size: 25px;
		display: none;
	}


#logo {
    width: 90px !important;
    margin: 4px auto 0px auto !important;
    height: auto !important;
    display: block !important; /* Asegura que el contenedor respete el ancho */
}

#logo img {
    width: 90px !important;
    height: auto !important;

    display: block !important;
    max-width: none !important; /* Evita que se achique en contenedores pequeños */
    min-width: 90px !important; /* Evita que colapse */
    box-sizing: content-box !important; /* Mantiene el tamaño del dibujo puro */
}

#navindex {
	height: auto;
}

#barraventas {
	display: flex;
	grid-column-gap: 8%;
	height: auto;
	width: 100%;
	background-color: rgba(0, 0, 0, .12);
	backdrop-filter: blur(10px);
	position: sticky;

	z-index: 3000;
	flex-wrap: wrap;
}	

#barraventas h1{
 text-shadow: 1px 1px white;   
	width: 100%;
	background-color: transparent;
	color: black;
 height: auto;
 font-family: 'Rubik', sans-serif;
 font-weight: 500;
 font-size: 1.2em;
 padding: 10px;
 text-align: left;
 margin: 0 auto;
 text-decoration: underline 2px solid deepskyblue;
 
 
   
}

.venta1{
width: 50%;


}

.venta2{
	width: 40%;
	margin: auto 0;
	padding-top: 5px;
	padding-bottom: 5px;

	
}

.venta3{
	width: 100%;
	margin: 0 auto;
	position: relative;
 bottom: 5px;
	
}

.ventahero{
	width: 100%;
	margin: 0 auto;
	position: absolute;
 bottom: 50px;
	
}

#contactoventa {

	background-color:green;
	position: relative;
	background-color: green;
	font-size: 1.0em;
	z-index: 50;
	border-radius: 10px;
	border:2px solid white;
	color: white;
	text-align: center;
	
}

#contactoventa2 {

	background-color:green;
	position: relative;
	width: 200px;
	height: 45px;
	font-size: 1.0em;
	z-index: 50;
	border-radius: 3px;
	border:2px solid darkgreen;
	color: white;
	text-align: center;
	margin: 0 25%;
	
}



#contactoventa p, #contactoventa2 p{

	color: white;
	text-align: center;
	letter-spacing: 1px;
	font-size: 16px;
	margin-top: 8px;
	padding: 4px ;

}


.fotoprincipal {
	width: 100%;
    overflow: hidden;


}

.container{
    margin-top: 5px;
	height: auto;
	width: 100%;

}

.container h1 {
    
	width: 60%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 1.3em;
 padding: 0;
 text-align: center;
 margin: 40px auto 0 auto;
 background-color: deepskyblue;
 color: white;
   
}

.container h2 {
 padding: 45px 15px 5px 15px;   
	width: 90%;
	height: auto;
	font-family: 'Raleway', sans-serif;
	font-size: 40px;
 font-weight: 700;
 line-height: 1.3;
	text-align: center;
	color: black;
}

#secciones p1{
		text-align: left;
		font-size: 0.7em;

	

}


.container h3 {
    
	width: 90%;
	height: auto;
	font-family: 'Raleway', sans-serif;
	font-size: 40px;
	margin: 40px auto 30px auto;
	text-align: left;
	color: black;
}


.container img{
	 width: 230%;
  margin-left: -55%

}


.portada1 {
	position: relative;
	width: 100%;
	height: 75%;
	margin: 50px auto 0px auto;
	overflow: hidden;
	background-color: #EED6B5;
	  background-image: url(../imagenes/servicios/1/Fondo-mesa-madera-vertical.avif) ;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  background-image: fixed;
	 -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

.portada2 {
	
	height: 80%;
	position: relative;
	margin: 5px auto;
	overflow: hidden;
	background-color: #fff3e3;
	background-image: url(../imagenes/servicios/1/Fondo-mesa-madera-vertical2.avif) ;
  
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  	 -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

.container-index {

width: 95%;
height: auto;
  overflow: hidden;

  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.container-index h2{
		font-size: 2.5rem;
		font-weight: 700;
		font-family: 'Kanit', sans-serif;
		font-style: italic;
		text-align: center;
		margin: 0 auto;
		padding: 0;
		height: auto;
		color: #25345c;
		text-shadow: 2px 2px white;

}

.container-index h3{
		font-size: 1.5rem;
		font-weight: 500;
		font-family: 'Kanit', sans-serif;
		color: black;
		z-index: 1500;
		height: auto;
		margin: 0 auto;
		text-align: center;
		

}


.item {
  
  overflow: visible;
  height: auto;
  text-align: center;

  
}

.item img{
  
height: auto;
filter: drop-shadow(5px 5px 3px grey);

  
}

.item-1{
  display: none;
  
}



.item-2{

  display: none;
  
}



.item-3{

 width: 70%;
 height: 100px;
 position: absolute;


}

.item-3 img{
		margin-top: 2%;
  margin-left: 60%;
  width: 230px;
  height: 96px;
  transform: rotate(-2deg)
  

}

.item-4{
position: absolute;
 width: 140px;
 height: 292px;
 bottom: 0%;
  

}

.item-4 img{


 width: 146px;
 height: 292px;

  

}

.item-5{
	position: absolute;
		flex-shrink: 0;
		width: 100%;
		height: auto;
		flex-grow: 1;
		
		z-index: 1500;
		margin: 30% auto 0 auto;
}

.item-6{
	
  width: 15%;
  margin-top: -80px; 


}

.item-6 img{
	width: 100%;
	
}

.item-7{

position: absolute;
 width: 70px;
 height: 53px;
 bottom: 40%;
 right: 5%;


}

.item-7 img{

  
  width: 70px;
  height: 53px;
 
 

}

.item-8{

  width: 38%;
  height: 220px;



}

.item-8 img{

  margin-top: 90px;
  margin-left: -140px;
  width: 214px;
  height: 50px;
  transform: rotate(-65deg)
  

}

.item-9{

position: absolute;
 width: 180px;
 height: 120px;
 bottom: 5%;
 right: 15%;

}

.item-9 img{

  
  width: 184px;
  height: 120px;


}



.container-index2 {

width: 100%;
height: auto;
  margin: 10px auto;
  
  overflow: hidden;
  

  display: flex;
  flex-wrap: wrap;
 
  gap: 1em;
}

.container-index2 h2{
		font-size: 2.5rem;
		color: #25345c;
		text-shadow: 2px 2px #00ff00;
		font-weight: 700;
		font-family: 'Kanit', sans-serif;
		font-style: italic;
		text-align: center;
		margin: 0 auto	;
		padding: 0;
		height: auto;

}

.container-index2 h3{
		font-size: 1.5rem;
		font-weight: 500;
		font-family: 'Kanit', sans-serif;
		color: black;
		z-index: 1500;
		margin: 0px auto;
		height: auto;
		text-align: center;
		

}



.item-21{
  
  width: 215px;
  height: 101px;
  
  
}

.item-21 img{
  transform: rotate(15deg);
  width: 261px;
  height: 61px;
  margin: 40px 0 0 150px;

}

.item-22{

  width: 20%;
 
 

}

.item-22 img{

  margin: 120px auto auto 120px;
  width: 63px;
  height: 75px;

}

.item-23{

 width: 25%;
 
 position: absolute;
 bottom: 20%;

}

.item-23 img{

 
  width: 60px;
  
  

}

.item-24{

  width: 250px;
  height: 434px;
  right: -2%;
 
 position: absolute;
 bottom: -25%;
  

}


.item-24 img{

 
  width: 220px;
  height: 414px;
  
  

}

.item-25{
		flex-shrink: 0;
		width: 100%;
		height: auto;
		flex-grow: 1;
		position: absolute;
		z-index: 1500;
		margin: 40% auto 0 auto;
}

.item-26{
	
  width: 15%;

}

.item-26 img{

  
  width: 100%;
  
 

}

.item-27{
position: absolute;
 width: 88px;
 height: 200px;
 transform: rotate(5deg);
 left: 3%;
  

}

.item-27 img{


 width: 80px;
 height: 180px;
 transform: rotate(5deg);

  

}


.item-28{

  width: 38%;
  height: 5%;
  margin-top: -350px;


}

.item-28 img{
	display: none; 

}

.item-29{
	position: absolute;
		height: 150px;
  width: 230px;
   bottom: -10%;
   left: -15%;



}

.item-29 img{

  transform: rotate(-60deg);
  width: 228px;


}


.vermas{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	background-color: #f5f5f7;
	border-top: 0.5rem solid #8b008b;
}

.vermas h3{
color: black;
text-align: left;
font-size: 2.5rem;
padding-bottom: 25px;
width: 	100%;

}

.vermas p{
color: #3374D8;
text-align: left;
font-size: 1.7rem;
padding-bottom: 25px;
width: 	100%;

}




.item-10{
	width: 90%;
	margin: 0 auto;


}

.item-11 {
width: 100%;

	
}

.item-11 img{

width: 100%;
margin: 0 auto;
}

#hero {
	margin-top: 60px;

	overflow: hidden;
}

.portada0 {

	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	
}



.container-index0 {

		width: 100%;
  
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 
  
}

.container-index0 h1{
		font-size: 2.0em;
		font-weight: 700;
		font-family: 'Kanit', sans-serif;
		color: white !important;

		text-shadow: 3px 3px black;
		height: auto;
        width: 100% !important;

}

.container-index0 h2{
	width: 90%;
		font-size: 2.8em;
		font-weight: 700;
		line-height: 0.99;
		font-family: 'kanit', sans-serif !important;
		font-style: italic;
		text-shadow: 2px 2px white;
		color: black;
		margin: 25% auto 0px auto;
		height: auto;

}

.container-index0 h3{
	width: 180px;
	font-size: 20px;
		font-weight: 500;
		font-family: 'Rubik', sans-serif;
		background-color: #aa02cb;
		height: auto;
		margin: 20% auto 0 10%; 
		color: white;
		padding: 5px 3px;
		

}

.item0 {
  
  overflow: visible;
  margin: 0 auto;
  text-align: center;

  
}

.item-08{
	
overflow: hidden;
 width: 100%;
 height: 55%;
 position: absolute;
 top: 50px ;
 z-index: -2;

}

.item-08 img{

height: 85%;
object-fit: cover;
overflow: visible;
top:70%;

}

.item-09{
	width: 100%;
	position: relative;


}


#pilares {
	margin: 20px auto 0 auto;
	height: auto;
}


.nuestros-pilares {
	font-family: 'Raleway', sans-serif;
	width: 95%;
	height: auto;
	margin: 0 auto 30px auto;
	display: flex;
	flex-wrap: wrap;
 align-items: baseline;
 justify-content: flex-end;
	font-size: 1.5em;
	font-weight: 500;
	
	flex-direction: column;
	
}

.nuestros-pilares a{
		color: black;
}

.item04 {
  width: 90%;
  height: auto;
  overflow: visible;
  padding: 0em;
  margin: 60px auto 5px auto;
  text-align: left;
  font-size: 22px;
  font-weight: 400;

  
}

.item-44, .item-45, .item-46 {
	margin: 0 auto;
}

#problema {
	width: 100%;
	height: auto;
	position: relative;
	padding-bottom: 35px;
	 background: linear-gradient(90deg, black , #041f23,#041f23, black);

}



#pilares h2, #problema h2{
		font-size: 40px;
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		width: 	90%;
		color: black;
		text-align: center;
		margin: 10px auto;
		padding: 30px auto;
		height: auto;

}

#pilares h3, #validacion h3{
	 width: 99%;
		font-size: 2.0em;
		font-weight: 800;
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black;
		text-align: center;
		margin: 15px auto 0 auto;
		height: auto;
		line-height: 1.2; 

}

#problema h3 {
 font-size: min(10vw, 30px); /* Ajusta el valor "5vw" según tus preferencias */
  white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
  	 width: 99%;
		font-weight: 800;
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black;
		text-align: center;
		margin: 15px auto 0 auto;
		height: auto;
		line-height: 1.2; 


}


#pilares h4 {
			font-size: 40px;
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		font-style: normal;
		z-index: 5;
		color: black;
		line-height: 1.2;
		margin: 20px auto;
		height: auto;
        width: 90%;
        text-align: left;

}

 #problema h4,#validacion h4{
	 
		font-size: 27px;
		
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black	;
		text-align: center;
		margin: 20px auto 0 auto;
		height: auto;
		line-height: 1.4;
}

#validacion h5{
	 
		font-size: 20px;
		text-align: 	left	;
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black;
		
		margin: 20px auto 0 auto;
		height: auto;

}

 #problema p ,#validacion p{
	 width: 100%;
		font-size: 20px;
		line-height: 1.4;
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black	;
		text-align: left;
		margin: 20px auto 0 auto;
		height: auto;

}



#titulopilares{
	height: auto;
	width: 95%;
	margin: 0 auto;

}

#titulopilares h2{
	font-size: 55px;
	margin: 15px auto;
		width:auto;
		height: auto; 
		padding:15px; 
		line-height: 1.2;
		-webkit-background-clip: text; 
		color:transparent;
		text-align: left;

  
}

#titulopilares span{
	    position: relative;
    display: inline-block;
    color: #1A0DD8; /* Color de la electricidad (azul) */
    animation: electricidad-pausa 4.5s linear infinite; /* 0.5 segundos de animación, 10 segundos de pausa */
}


#tituloquehacemos  {
    height: auto;
    width: 95%;
    margin: 0 auto;

}

#tituloquehacemos h2{
    font-size: 55px;
    margin: 15px auto;
        width:95%;
        height: auto; 
        padding:45px 0 25px 0; 
        line-height: 1.2;
        -webkit-background-clip: text; 
        color:transparent;
        text-align: left;

  
}

#tituloquehacemos h4 {
            font-size: 30px;
        font-weight: 700;
        font-family: 'Raleway', sans-serif;
        font-style: normal;
        z-index: 5;
        color: black;
        line-height: 1.2;
        margin: 20px auto;
        height: auto;
        width: 95%;
        text-align: left;

}

#tituloquehacemos span{
        position: relative;
    display: inline-block;
    color: #1A0DD8; /* Color de la electricidad (azul) */
    animation: electricidad-pausa 4.5s linear infinite; /* 0.5 segundos de animación, 10 segundos de pausa */
}


@keyframes electricidad-pausa {
    0%,6%,8% {
        text-shadow: 0 0 10px #0019FF, 0 0 20px #10DCF9, 0 0 30px #11F6FB, 0 0 50px #02FFEE; /* Aplica la sombra durante 0.5 segundos */
        color: white;
    }
    5%,7%,9%,
    100% {
        text-shadow: none; /* Sin sombra durante el resto del tiempo */
        color: #1A0DD8;
    }
}




#titulopilares h4{
	width: 90%;
    font-size: 30px;
	font-weight: 500;
	text-align: left;
}

.titulosubrayado {
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  height: auto; /* Ajusta la altura al 100% del viewport */
}

.subrayado {
  position: relative;
  display: inline-block;
  text-decoration: none; /* Elimina el subrayado predeterminado del texto */
  color: #333; /* Color del texto */
  z-index: 2;
}

.subrayado::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Inicialmente sin longitud */
  height: 8px;
  background-color: #00ff41; /* Color de la línea subrayada */
  animation: subrayado 5s ease forwards;
  z-index: -1;
}

@keyframes subrayado {
  to {
    width: 100%; /* Extiende la línea subrayada al 100% del ancho */
  }
}

.planteoproblema {
	          display: flex;
           flex-wrap: wrap;
           flex-direction: column;
           height: auto;
           justify-content: space-around;
           align-items: center;
           color: white;
           width: 90%;
           margin: 0 auto;
           font-size: 1.4vw;
           text-align: left;
           z-index: 900;
           position: relative;
           column-gap: 20px;      
       
}

.item001{
	width: 70%;
	margin: 30px auto 10px auto;
}

.item001 img{
width: 100%;
}


.item002{
	width: 90%;
}


.item01 img{
		display: none;
}

.columnaquehacemos {
			          display: flex;
           flex-wrap: wrap;
           flex-direction: column;
           min-height: 500px;
           justify-content: space-around;
           align-items: center;
           color: white;
           grid-row-gap: 2px;
           width: 99%;
           font-size: 1.4vw;
           text-align: left;
           margin: 40px auto 50px auto;
           row-gap: 40px;
           z-index: 900;
           position: relative;
           column-gap: 20px;      
}

.renglon {
	min-height: 550px;
	display:flex;
	flex-direction: column;
	width: 95%;
	text-align: center;
}

.renglon a {
	height: 50px;
	font-size: 20px;
}

.renglon p {
	height: auto;
	font-size: 25px;
	line-height: 1.5;
    text-align: left;
}

.renglon a:hover{
	text-decoration: underline;
}


.renglon h5 {
	width: 60%;
	height: 40px;
	margin: 10px auto 20px auto;
	font-size: 25px;
	padding: 5px;
	background-color: #06c;
	color: white;
}

.item-41, .item-42, .item-43{
	height: auto;
}

#validacion {
	width: 90%;
	margin: 50px auto 10px auto;
}

#validacion h4{

}

#validacion a:hover{
	text-decoration: underline;
}


.validacion {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		width: 90%;
		margin: 40px auto;
		height: auto;
		grid-column-gap: 20px;

}

.cliente {
	width: 95%;
	background-color: white;
	height: auto;
	margin: 20px auto;
	border: 3px solid #B41593;
	border-radius: 20px;
}


.cliente h4 {
	 padding:5px; 
	 line-height: 2.0; 
}


.nosotros {
	 display: flex;
	 flex-wrap: wrap;
	 width: 85%;
	 height: auto;
	 margin: 50px auto 0px auto;
	 column-gap: 20px;
}

.columnanosotros {
		 display: flex;
	 flex-wrap: wrap;
	 width: 95%;
	 height: 200px;
	 margin: 0 auto;
	 flex-direction: column;
}

.columnanosotros img {
	width: 85%; 
	height: auto; 
	margin: 0 auto;
}


.contactanos {

		width: 100%;
		height: auto;
  margin: 50px auto;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  text-align: center;
  background-color: #f5f5f7;
  padding-bottom: 40px;
  
}

.contactanos h2{
		width: 100%;
		
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		color: black;
		margin: 50px auto 0 auto;
		text-align: left;
		height: auto;

}

.contactanos h3{
		font-size: 2.2rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		text-align: left;
		margin: 50px auto;
		height: auto;
		

}

.contactanos p{
		font-size: 1.8rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		text-align: left;
		margin: 20px 0 20px 15px;
		width: 90%;
		height: auto;
	
}

.datosdecontacto p{
		font-size: 1.8rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		text-align: center;
		margin: 20px 0 20px 15px;
		width: 90%;
		height: auto;
	
}

.item-30 {
	width: 100%;
		background-color: #f5f5f7;
		text-align: left;


	
}


.item-31 {

	display: none;

}

.item-31 img{
		width: 200%;
		margin: 0 auto;
		margin-left: -50%;
	
}


.datosdecontacto {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	font-size: 2.0em;
	font-weight: 600;
	order: 0;
	text-align: center;
	
}

.datosdecontacto a{
		color: black;
}

.envio {
	width: 90%;
	margin: 30px auto;
	display: flex;
	flex-flow: row;
	align-items: center;
	font-size: 2.0em;
	font-weight: 600;
	column-gap: 10%;
	text-align: center;
	
}

.cajita {
	width: 30%;
}

.cajita img {
	width: 100%;
}


.textoenvio {
	width: 60%;
	font-size: 40px;
}

.textoenvio h3{
			font-size: 2.1rem;
		font-weight: 500;
		font-family: 'Rubik', sans-serif;
		color: black;
		text-align: left;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		height: auto;
}


.item-32 {

		width: 100%;
		background-color: white;
		padding-top: 20px;

}

.item-32 img{
		width: 80px;
		height: auto;
		margin: 0 auto;
	
}

.item-32 a{

		width: 80px;
		margin: 0 auto;

}



.item-33 {
order: 1;
		width: 100%;
		background-color: white;
		margin-top: 30px;
		padding-top: 20px;


}


.item-33 img{
		width: 70px;
		height: auto;
		margin: 0 auto;
	
}

.item-33 a{

		width: 70px;
		margin: 0 auto;

}


.item-34 {
order: 0;
		width: 100%;
		background-color: white;
		padding-bottom: 20px;

}



.item-35 {
order: 1;
		width: 100%;
			background-color: white;
			padding-bottom: 20px;


}


.item-36 {

display: none;

}




.item-37 {

display: none;
}


.ventajastableros {

	margin: auto;
	display: flex;
	flex-flow: column;
	font-size: 2.0em;
	font-weight: 600;
	text-align: center;
	
}

.ventajastableros a{
		color: black;
}

.ventajastableros p{
    
	font-family: 'Raleway', sans-serif;

	text-align: left;
	margin: 0 auto;
	color: 	black;
	font-size: 24px;
	height: auto;
	line-height: 1.5em;
}

.item4 {
  width: 100%;
  overflow: visible;
  padding-top: 1em;
  margin: 0 auto;
  text-align: center;
  font-size: 0.99em;
  font-weight: 500;

  
}

.item4 p{
	margin-top: -20px;
}

.item-41 {

text-align: center;
order:0;
  
}

.item-42 {

text-align: center;
order: 2;
  
}

.item-43 {

text-align: center;
order: 5;
  
}

.item-44 {

text-align: left;
order:1;
  
}

.item-45 {

text-align: left;
order: 3;
  
}

.item-46 {

text-align: left;
order: 6;
  
}


.item-41 img{

 width: 100px; 
 height: auto;
  
}

.item-42 img{
  
 width: 100px; 
 height: auto;
  
}

.item-43 img{
  
 width: 90px; 
 height: auto;
  
}





.modelos {
	width: 100%;
	margin: 110px auto 50px auto;
	display: flex;
	flex-wrap: wrap;
 align-items: baseline;
 justify-content: flex-end;
	font-size: 1.5em;
	font-weight: 600;
	background: linear-gradient(10deg,grey,10%,black);
	min-height: 500px;
	padding-top: 60px;
	padding-bottom: 50px;
	
}

.modelos h3{
	color: white;
}

.modelos h4{
	font-size: 35px;
	padding-bottom: 10px;
	color: white;
	line-height: 50px;
}

.ventajastableros a{
		color: black;
}

.item5 {
  width: 90%;
  height: auto;
  overflow: visible;
  padding: 0;
  margin: 50px auto;
  text-align: center;
  font-size: 0.79em;
  font-weight: 500;

  
}

.item-61 {

margin: 0 auto;  
background-color: white;
border-radius: 20px;
padding-top: 50px;
order: 2;
min-height: 500px;
}

.item-62 {

background-color: white;
border-radius: 20px;
margin: 0 auto;
order: 4;
min-height: 500px;
padding-top: 20px;
  
}

.item-63 {

margin: 0 auto;  
background-color: white;
border-radius: 20px;
padding-top: 20px;
order: 6;
min-height: 500px;
  
}

.item-64 {

margin: 0 auto;  
order: 1;
padding-top: 50px;
}


.item-65 {
margin: 50px auto 0 auto;
order: 3;
}


.item-66 {

margin: 0 3% 0 0;  
order: 5;
padding-top: 50px;
  
}

.item-61 img{

margin: 0 auto;
  
}

.item-62 img{
  
margin: 0 auto;
  
}

.item-63 img{

margin: 0 auto;
  
}


#fotoseccionlateral{

	width: 100%;
	margin: 30px auto;
	display: flex;
	flex-flow: column;
	font-size: 2.0em;
	font-weight: 600;
	text-align: center;
}

#item-52 video{
width: 120%;
margin: 0 auto 0 -5%;
}


.item-53{
    width: 90%;
    margin: 0 auto;
    height: auto;
}

.item-53 video{
	width: 100%;
margin: 0 auto;
}



#fondogris{
	
background-color:#f5f5f7;
	height: auto;
	padding: 20px;

}

#fondogris p1{
    width: 95%;
    height: auto;
    font-family: 'Kanit', sans-serif;
    font-size: 45px;
    margin: 35px auto 25px auto;
    text-align: left;
   
}



.contenedor10 {

	margin: 30px auto;
	display: flex;
	flex-flow: column;
	font-size: 2.0em;
	font-weight: 600;
	text-align: center;
}


.contenedor11 {

	margin: 80px auto 30px auto;
	display: flex;
	flex-flow: column;
	font-size: 2.0em;
	font-weight: 600;
	text-align: center;
}

#modelos h3{
		width: 95%;
	height: auto;
	font-family: 'Kanit', sans-serif;
	font-size: 4.0em;
	margin: 55px auto 25px auto;
	text-align: left;
	color: black;

}


.contenedor10 p{
    
	font-family: 'Raleway', sans-serif;
	width: 90%;
	text-align: left;
	margin: 20px auto;
	color: white;
	font-size: 22px;
	font-weight: 400;
	height: auto;
	line-height: 1.5em;
}

.contenedor10 p1{
    
	font-family: 'Raleway', sans-serif;
	width: 90%;
	text-align: left;
	margin: 20px auto;
	color: white;
	font-size: 22px;
	font-weight: 600;
	height: auto;
	line-height: 1.5em;
	text-decoration: underline 5px solid #00ff00;
}

.contenedor11 p{
    
	font-family: 'Raleway', sans-serif;
	width: 90%;
	text-align: left;
	margin: 20px auto;
	color: 	white;
	font-size: 22px;
	font-weight: 400;
	height: auto;
	line-height: 1.5em;
}

.contenedor11 p1{
    
	font-family: 'Raleway', sans-serif;
	width: 90%;
	text-align: left;
	margin: 20px auto;
	color: white;
	font-size: 22px;
	font-weight: 600;
	height: auto;
	line-height: 1.5em;
	text-decoration: underline 5px solid #00ff00;
}

.unocelda10{
order: 0;
background-image: url(../imagenes/servicios/1/Mp1v.avif);
background-size: contain;
background-position: center center; /* Center the image */
background-repeat: no-repeat;
height: 700px;
width: 90%;
margin: 0 auto;
 }


.doscelda10{
order: 1;
background-color: blue;
font-size: 65px;
font-family: 'kanit', sans-serif;
line-height: 60px;
color: white;
margin: 20px auto;

}

.trescelda10{
order: 5;
background-color: blue;
color: white;
font-size: 65px;
font-family: 'kanit', sans-serif;
line-height: 60px;
}

.cuatrocelda10{
order: 2;
margin-top: 30px;
background-image: url(../imagenes/servicios/1/Mp2v.avif);
background-size: contain;
 background-position: center center; /* Center the image */
 background-repeat: no-repeat;
height: 1100px;
width: 90%;
margin: 0 auto;
}


.unocelda11{
order: 0;
background-image: url(../imagenes/servicios/1/Tp1v.avif);
background-size: contain;
background-position: center center; /* Center the image */
background-repeat: no-repeat;
height: 850px;
width: 90%;
margin: 0 auto;
 }


.doscelda11 {
order: 1;
background-color: red;
font-size: 65px;
font-family: 'kanit', sans-serif;
line-height: 60px;
color: white;
margin: 20px auto;

}

.trescelda11 {
order: 5;
background-color: red;
color: white;
font-size: 65px;
font-family: 'kanit', sans-serif;
line-height: 60px;
}

.cuatrocelda11{
order: 2;
background-image: url(../imagenes/servicios/1/Tp2v.avif);
background-size: contain;
background-position: center center; /* Center the image */
background-repeat: no-repeat;
height: 1250px;
width: 90%;
margin: 30px auto;
}

.item-54{
	order: -1;
}


.portada3{
 position: relative;
	height: 80%;
 margin: 5px auto;
 overflow: hidden;
  background-color: #f5f5f7;


}


.container-index3 {

	width: 100%;
	height: auto;
 
 overflow: hidden;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 align-items: center;



}


.container-index3 h2{
		font-size: 1.8rem;
		font-weight: 700;
		font-family: 'Kanit', sans-serif;
		font-style: italic;
		text-align: center;
		color: black;
		margin: 0 auto	;
		padding: 0;
		height: auto;

}

.container-index3 h3{
		font-size: 1.2rem;
		font-weight: 500;
		font-family: 'Kanit', sans-serif;
		color: black;
		z-index: 1500;
		margin: -5px auto 5px auto;
		height: auto;
		text-align: center;
		

}


.item-38{
position: absolute;
	order: 1;
  width: 55%;
  height: 345px;
  bottom: 0%;
  flex-grow: 1;
  

}

.item-38 img{
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  
}

.item-39{

	margin: 20px auto 0 auto;
 height: 250px;
 width: 70%;
}



#videoyoutube {

width: 350px;
height: auto;
margin: 0 auto 30px auto;

}

#videoyoutube2 {

width: 100%;
height: auto;
margin: 30px auto;

}

iframe {

width: 100%;
height: 500px;

}


.tituloblog h1 {
 color: black;   
width: 65%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 3.2em;
 margin: 50px auto 0 auto;
 padding-top: 20px;
 text-align: center;
 background-color: white;
   
}


.tituloproductos h1 {
 color: black;   
    width: 65%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 40px;
 padding: 0;
 text-align: center;
 margin: 50px auto 0 auto;
   
}

.tituloproductos h2 {
 color: black;   
    width: 90%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 30px;
 padding: 0;
 text-align: left;
 margin: 40px auto 0 auto;

   
}




#secciones {
	height: auto;
	margin:0 auto;
	max-width: 100%;
}

#secciones-blog {
	height: auto;
	margin: 50px auto 0 auto;
	max-width: 100%;
}

#entrada{
	width: 100%;
	height: 95%;
	margin-top: 40px;
	overflow: hidden;
	background-color: #019add;
	
	background-image: url("../imagenes/servicios/1/entrada2.png");
	background-size: cover;
	

}

#entrada img {
	position: relative;

}

#fondoentrada img {

	display: none;
}

#entrada h1{
		background-color: #019add;
		position: relative;
		text-align: center;
		margin: 150px auto 0px auto;
		color: white;
		z-index: 0;
		width: 95%;
		font-size: 1.6em;
		font-family: 'Kanit', sans-serif;
		letter-spacing: 4px;

}

#galeria3 {
text-align: center;

height: auto;

}

#galeria3 h2{
margin: 50px auto 0px auto;
}

#cajaleermas {

text-align: center;

}

#leermas {
	background-color:#06c;
	width: 170px;
	height: 40px;
	position: relative;
	margin: 20px auto;
	z-index: 50;
	border-radius: 10px;
		display: flex;
	align-items: center;
	justify-content: center;
	
}


#leermas a{
	color: white;
	
	letter-spacing: 1px;
	font-size: 1.3em;


}

#leermas p{
	color: white;
	text-align: center;
	letter-spacing: 1px;
	font-size: 1.1em;
	padding-top: 10px;

}

	#formulariocontacto{
	width: 90%;
	margin: 35px auto 0 auto;
	
    }

    .titulocontacto{
    	margin: 30px auto;
		font-family: 'Raleway', sans-serif;
		font-size:  0.3667em;
		text-align: center;

    }




	h1{
	color:black;
	font-family: 'Kanit', sans-serif;
	width: 98%;
	height: auto;
	margin: 5px auto;
	font-size: 2.0em;
	text-align: center;
	}

	h2{
	max-width: 98%;
	height: auto;
	font-family: 'Raleway', sans-serif;
	font-size: 2.2em;
	padding: 30px 0px 5px 0px;
	text-align: center;
	}
	
	h3{
	height: auto;
	font-family: 'Raleway', sans-serif;
	font-size: 1.3em;
	margin-top: 15px;
	text-align: left;
	color: white;
	}
	


.contenedor6 {
           display: grid;
           margin: 10px auto 30px auto;
           grid-gap: 20px;
           width: 350px;
                    

       }
       .celda6 {
          
       }
       .uno6 {
           grid-column: 1;
           grid-row: 1;
           width: 70px;
          
       }

       .uno6 img{
           width: 50px;
          
		}

       .dos6 {
           grid-column: 2;
           grid-row: 1;
           width: 70px;
       }

       .dos6 img{
           width: 50px;
         
		}

       .tres6 {
           grid-column: 3;
           grid-row: 1;
           width: 70px;
       }

       .tres6 img{
           width: 50px;
           
		}

       .cuatro6 {
           grid-column: 4;
           grid-row: 1;
           width: 70px;
       }

       .cuatro6 img{
           width: 50px;
          
		}



.contenedor6 img{
	max-height: 85px;
	max-width: 6.3rem;
	display: grid;
	margin:5px auto;




}



#subtitulopresentacion2{
	font-family: 'Raleway', sans-serif;
	font-size: 1.3em;
	text-align: center;
	margin: 10px auto;
	color: 	black;
	width: 90%;
	height: auto
	

}

#subtitulopresentacion3{
	font-family: 'Raleway', sans-serif;
	font-size: 1.4em;
	text-align: left;
	margin: 10px auto;
	color: 	black;
	width: 90%;
	height: auto
	

}

#servicio {
	width: 100%;
	height: auto;

	

}

#servicio img{
	width: 100%;
	

}



#trabajo{
	overflow: hidden;	
	width: 100%;
	padding-top: 15px;

}

#trabajo h2{
		position: relative;
		text-align: center;
		font-size: 2.8em;
		z-index: 100;
		background: linear-gradient(135deg, #8538c2,70% ,#04bcf9 );
		color: white;
		padding-top: 20px;
		padding-bottom: 20px;
		width: 100%;
		margin: 0px auto;
		font-family: 'Kanit', sans-serif;
		letter-spacing: 4;
		height: auto
	
	}

#fondotrabajo img{
	display: none;
}

.contenedor4 {
display: inline-grid;
}


.contenedor4 h4{
	text-align: center;
	font-size: 1.5em;
	padding: 5px;
	height: auto
}


       .unocelda4 {
           grid-column: 1;
           grid-row: 1;
           
           margin: 15px auto 5px auto;  
           
       }
       .doscelda4 {
           grid-column: 1;
           grid-row: 3;
           
           margin: 15px auto 5px auto;  
          
       }
       .trescelda4 {
           grid-column: 1;
           grid-row: 2;
           width: 90%;
           margin: 15px auto 5px auto;        

           
       }

       .cuatrocelda4 {
        grid-column: 1;
        grid-row: 4;
        width: 90%;
        margin: 5px auto; 
        
       }

       .cincocelda4 {
       	 grid-column: 1;
        grid-row: 5;
        margin: 15px auto 5px auto;  
      
       }


        .seiscelda4 {
       	grid-column: 1;
        grid-row: 7;
        margin: 15px auto 5px auto;  
      
       }


        .sietecelda4 {
       	grid-column: 1;
        grid-row: 6;
        width: 90%;
        margin: 5px auto; 

      
       }


        .ochocelda4 {
       	grid-column: 1;
        grid-row: 8;
        width: 90%;
        margin: 5px auto; 
      
       }


  .contenedor9 {
           display: inline-grid;
           
           color: white;
           background-color: #3374db;
           width: 100%;
           font-size: 1.4vw;
           text-align: center;
           margin: 0 auto;
           z-index: 900;
           position: relative;
           border: thin solid white;

         
          
          }


.contenedor9 img {
	 width: 90%;
}


.unocelda9 {
	grid-column: 1;
	grid-row:2;

}

.unocelda9 img{
	width: 90%;
	margin: 0 auto;
	padding: 15px;
	overflow: hidden;

}

.doscelda9 {
	grid-column: 1;
	grid-row:1;
	font-size: 3.2em;
	padding: 10px;
}

.trescelda9 {
	grid-column: 1;
	grid-row:3;
	font-size: 3.2em;
	padding: 10px;
}

.cuatrocelda9 {
	grid-column: 1;
	grid-row:4;
}

.cuatrocelda9 img{
	width: 90%;
	margin: 0 auto;
	padding: 15px;
	overflow: hidden;

}

.contenedor12 {
           display: inline-grid;
           
           color: black;
           background-color: #f5f5f7;
           width: 100%;
           font-size: 1.4vw;
           text-align: center;
           margin: 0 auto;
           z-index: 900;
           position: relative;
           border: thin solid white;

         
          
          }


.contenedor12 img {

}


.unocelda12 {
	grid-column: 1;
	grid-row:2;
	padding-block-end: 20px;

}

.unocelda12 img{
		 width: 40%;
	 height: auto;
 background-color: white;
	margin: 0 auto;
	padding: 15px;
	overflow: hidden;

}

.doscelda12 {
	grid-column: 1;
	grid-row:1;
	font-size: 3.2em;
	padding: 10px;
}

.doscelda12 h4{
    font-size: 28px !important;
    padding: 12px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
}


.lista {
	display: flex;
	width: 95%;
	height: auto;
	margin: 50px auto;
	flex-direction: row;
	justify-content: space-around;
 align-items: center;
	flex-wrap: wrap;


}

.lista h4 {
font-size: 15px;

}

.titulolista{
	width: 30%;
	margin-bottom: 15px;



}

.fotolista{

	width: 30%;
	margin-bottom: 15px;
}

.fotolista img{
	width: 100%;
	padding-bottom: 10px;
}


.descripcionlista{
	width: 30%;
	margin-bottom: 15px;


}


	#titulocontacto h2 {

	margin: 30px auto;
	width: 85%;
	text-align: center;


	}

#subtitulocontacto {

	font-family: 'Raleway', sans-serif;
	font-size: 1.3em;
	text-align: center;


	}

	#cuerpo_titulo{
	
	position: absolute;
	text-align: left;
	top: 40%;
	padding: 15px;
	font-size: 1.0em;
	left: 140px;
	background: #000;
	color:#fff;
	left: 3%;
	width: 40%;
	

}



#proyecto{
	margin-top:100px;
	max-height: 488px;
	overflow: hidden;
}



#proyecto h2{
		width: 	85%;
		bottom: 390px;
		left: 3%;
		position: relative;
		text-align: center;
		font-size: 2.0em;
		background-color:  rgba(0,0,0,0.3); 

}


#cuerpo_proyecto{
	
	position: relative;
	text-align: center;
	bottom: 360px;
	padding: 15px;
	font-size: 1.5em;
	left: 3%;
	background-color:  rgba(0,0,0,0.7); 
	color:#fff;
	width: 85%;
	
}



#presentacion{
	position: relative;
	top: 40px;

	
	
}

#presentacion h3{
	width: 90%;
	height: auto;
	left: 3%;
	text-align: center;
	position: relative;
	font-size: 1.9em;
	color:#fff;
	text-transform: uppercase;
	font-family: 'Archivo Black', sans-serif;
	background-color: #41afe0;
	padding: 9px;

}

#subtitulopresentacion{
	font-family: 'Raleway', sans-serif;
	height: auto;
	font-size: 1.3em;
	text-align: center;
	margin: 25px auto;

}

#clientes {

}

#clientes img{
	height: auto;
}

#clientes h2{
	width: 90%;
	
	text-align: center;
	position: relative;
	font-size: 1.9em;
	margin-top: 15px;
	height: auto
}

.contenedor {
           display: grid;
           grid-template-columns: repeat(2, 10rem);
           grid-template-rows: repeat(5, 50px);
           grid-gap: 2rem;
           grid-auto-rows: 80px;
           width: 95%;
           height: auto;
           margin: 20px auto;
           grid-template-columns: 1fr 1fr;
       }
       .celda {
           background-color: white;
       }
       .uno {
           grid-column: 1;
           grid-row: 1;
       }
       .dos {
           grid-column: 2;
           grid-row: 1;
       }
       .tres {
           grid-column: 1;
           grid-row: 2;
       }
       .cuatro {
           grid-column: 2;
           grid-row: 2;
       }

       .cinco {
           grid-column: 1;
           grid-row: 3;
       }
       .seis {
           grid-column: 2;
           grid-row: 3;
       }
       .siete {
           grid-column: 1;
           grid-row: 4;
       }
       .ocho {
           grid-column: 2;
           grid-row: 4;
       }
       .nueve {
           grid-column: 1;
           grid-row: 5;
       }

.contenedor img{
max-height: 55px;
max-width: 6rem;
display: grid;
margin:5px auto;
}

#secciones h2{
	max-width: 95%;
	text-align: left;

		font-weight: bold;
		height: auto;
		font-family: 'Raleway', sans-serif;
		line-height: 1.1;
		color: black;
		margin: 0 auto;
		padding-top: 50px;
}

#secciones h2#titulo-principal{
    max-width: 95%;
    text-align: left;
    font-weight: bold;
    height: auto;
    font-family: 'Raleway', sans-serif;
    line-height: 1.1;
    color: black;
    margin: 40px auto;
    opacity: 0;
    transform: translateY(10px);
    animation: aparecerGlow 1.2s ease-out forwards;
    padding: 0 !important;

}

@keyframes aparecerGlow {
    0% {
        opacity: 0;
        transform: translateY(10px);
        text-shadow: 0 0 0px rgba(255,255,255,0);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: 0 0 12px rgba(255,255,255,0.8);
    }

    100% {
        opacity: 1;
        
    }
}



#secciones-blog h1{
	width: 80%;
	text-align: center;
		font-size: 50px;
		font-weight: 600;
		height: auto;
		font-family: 'Rubik', sans-serif;

		color: black;
		margin: 20px auto;
		padding-top: 50px;
}


#secciones-blog h2{
	max-width: 95%;
	text-align: left;
		font-size: 30px;
		font-weight: bold;
		height: auto;
		font-family: 'Raleway', sans-serif;
		line-height: 1.1;
		color: black;
		margin: 30px auto 0 auto;
		padding-top: 20px;
}


#subtitulopresentacion4{
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
	text-align: left;
	margin: 20px auto;
	color: 	black;
	width: 90%;
	height: auto;
	line-height: 1.5em;
	
}

#subtitulopresentacion4 h4{
    font-family: 'Raleway', sans-serif;
    font-size: 38px;
    text-align: left;
    margin: 20px auto 30px auto;
    color:  black;
    width: 100%;
    height: auto;
    line-height: 1.0;
    
}



#subtitulopresentacion4 h6{
	font-family: 'Raleway', sans-serif;
	font-size: 1.3em;
	text-align: left;
	margin: 20px auto 0 auto;
	color: 	black;
	width: 90%;
	line-height: 1.5em;
	height: auto;
	
}

.slider {
    width: 85%;
    height: auto;
    margin: 50px auto;
    overflow: hidden;
}

.slider .slide-track {
    display: flex;
    animation: scroll 20s linear infinite;
    -webkit-animation: scroll 20s linear infinite;
    width: calc(200px * 14);
    position: relative;
    height: auto;
}

.slider .slide {
    width: 200px;
}

.slider .slide img {
    width: 200px;
    margin: 0;
}

.marcas {
	position: absolute;
	height: auto;

	width: 100%;
}

#subtitulopresentacion6{
	position: 	relative;	
	font-family: 'Raleway', sans-serif;
	font-size: 28px;
	text-align: center;
	margin: 80px auto 30px auto;
	width: 80%;
	overflow: hidden;
font-weight: 600;
	
	color: #333333;
	z-index: 110;
	height: auto;

}

#subtitulopresentacion7{
    position:   relative;   
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    text-align: left;
    margin: 20px auto 30px auto;
    width: 90%;
    overflow: hidden;
font-weight: 600;
    line-height: 1.5;
    color: #333333;
    z-index: 110;
    height: auto;

}

#subtitulopresentacion7 a{
    position:   relative;   
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    text-align: center;
    margin: 20px auto;

    width: 75%;
    overflow: hidden;

    
height: auto;

}



/* Estilos CSS para la galería */
        .carousel-container {
            width: 100%; /* Ancho del carrusel */
            margin: 20px auto;
            overflow: hidden; /* Oculta las imágenes que no están en la vista */
        }

        .carousel {
            display: flex; /* Muestra las imágenes en línea */
            transition: transform 0.5s ease; /* Agrega una transición suave al cambiar las imágenes */
            margin: 5px auto;

            
        }

        .carousel img {
            width: 100%; /* Ajusta el ancho de las imágenes al contenedor */
            height: auto; /* Ajusta la altura automáticamente */
            margin: 0 auto;
        }

        .carousel-btn {
            position: relative;
            font-size: 30px;
            background-color: DeepSkyBlue;
            color: white;
            border: none;
            padding: 15px 30px;
            cursor: pointer;
            z-index: 1;
            
        }

        .prev-btn {
            
            top: 50%;
        }

        .next-btn {
        	
            
            
        }

  /* Estilos generales del carrusel2 */
        .custom-slider-container {
            display: flex;
            overflow: hidden;
            width: 90%;
            margin: 0 auto;
        }
        
        /* Estilos de las imágenes en el carrusel */
        .custom-slider-item {
            flex: 0 0 120%; /* 2 imágenes en el carrusel */
            width: 100%;
            transition: transform 0.5s ease;
        }
        
        .carousel-btn2 {
            position: relative;
            font-size: 30px;
            background-color: DeepSkyBlue;
            color: white;
            border: none;
            padding: 15px 30px;
            cursor: pointer;
            z-index: 1;
            left: 5%;
            
        }

        .prev-btn2 {
            
            top: 50%;
        }

        .next-btn2 {
        	
            
            
        }
       
.titulo-animado {
    font-size: 20px;
    position: relative;
}

.titulo-animado span2{
    font-size: 29px;
    padding-bottom: 5px;
}

.titulo-animado.desplazado {
    animation: desplazar 0.9s ease;
}

.bounce {
	animation: bounce 1.5s ease;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-35px); /* Puedes ajustar la distancia del desplazamiento aquí */
    }
    100% {
        transform: translateY(0);
    }
}


@keyframes desplazar {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-55px); /* Puedes ajustar la distancia del desplazamiento aquí */
    }
    100% {
        transform: translateY(0);
    }
}







@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-200px * 7));
        transform: translateX(calc(-200px * 7));
    }
}



#secciones h1{
	text-align: center;
	font-size: 2.5em;
	padding: 20px;
	color: black;
	height: auto;
	width: 90%;
	margin: 0 auto;
}

#secciones h3{
	text-align: left;
	font-size: 45px;
	line-height: 1.2;
	padding: 25px 0 25px 0;
	width: 90%;
	color: black;
	height: auto;
	margin: 0 auto;
	font-family: 'Raleway', sans-serif;
}

#fotoseccion{
	 
    overflow: hidden;
	background-color: #17202A;
	width: 90%;
	color: white;
	margin: 20px auto;
	height: auto;
	

}


#fotoseccion p{
	font-size: 20px; 
	width: 90%;
	margin: 0 auto;
	height: auto;

}

#fotosecciontitan{
	 
	background-color: white;
	width: 90%;
	margin: 20px auto;
	height: auto;

}


#fotoseccionzoom p{
	 
	width: 90%;
	margin: 0 auto;
	height: auto;

}

#fotoseccionzoom img{
	 
	width: 300%;
	margin-left: -120%;

}

#fotoseccionzoom{
	 

	background-color: #17202A;
	width: 100%;
	color: white;
	margin: 20px auto;
	height: auto;
    overflow: hidden;
	

}

#fotoseccionbypass{
	 
	margin:0 auto;
	height: auto;
	background-color: white;
	width: 90%;
	height: auto;

}


#casoexito{
	
	
	margin-top: 10px;
	color: white;
	padding: 5px;
	height: auto;

}

#casoexito h2{
		letter-spacing: 4px;
		position: relative;
		text-align: center;
		z-index: 0;
		background-color: inherit;
		padding: 15px;
		text-shadow: 2px 2px 2px black;
		color:white;
		margin: 0 auto;
		font-family: 'Kanit', sans-serif;
		height: auto;
	
}

#casoexito p{
	 
	width: 90%;
	margin: 0 auto;
	line-height: 1.5em;
	height: auto;

}


.contenedor8 {
           
           border-radius: 25px;
           background-color: white;
           color: black;
           width: 95%;
           height: auto;
           margin: 20px auto;           
           text-align: center;

                     
          
          }



#fondocontacto img{
	display: none;
}

#contacto {
	background: #1B2631;

	height: auto;

}

#contacto img{
	width: 100%;
	
}

#contacto h2{
	padding-top: 60px;
	color: white;
	width: 90%;
	margin-top: -100px;
	margin: 0px auto;
	text-align: center;

}

#cajaconfianza2{
	margin-top: 40px;
}

.contenedor5 {
	display: inline-grid;
	color: white;
	margin: 40px auto;
	text-align: center;
	width: 100%;
	font-size: 1.4em;
	line-height: 1.4;

}


.contenedor5 h3{
	
	height: auto;
	font-family: 'Raleway', sans-serif;
	font-size: 1.3em;
	margin: 15px auto 5px auto;
	text-align: center;
	color: white;


}

.contenedor5 img{
	
	
}

.unocelda5{
	grid-column: 1;
    grid-row: 1;
}

.unocelda5 a{
		width: 110px;
		margin: 0 auto;
}

.doscelda5{
	grid-column: 1;
    grid-row: 3;
    padding-top: 40px;
}

.doscelda5 a{
		width: 110px;
		margin: 0 auto;
}

.trescelda5{
	grid-column: 1;
    grid-row: 2;
 
}

.trescelda5 a{
    color: white;
}



.cuatrocelda5{
	grid-column: 1;
    grid-row: 4;
}

.cuatrocelda5 a{
    color: white;
}


.contenedor7 {
	display: inline-grid;
	color: white;
	margin: 40px auto;
	text-align: center;
	width: 100%;
	font-size: 1.2em;
	line-height: 1.4;
	}

.contenedor7 h5{

	font-size: 1.1em;
	}

.contenedor7 a{
	color: white;
	height: auto;
	padding-bottom: 25px;
	}

.doscelda3 {

	font-size: 0.9em;
}


.trescelda3{
margin:40px auto 20px auto;
}


.cuatrocelda3 {

}

#textofooter h3{
	color: white;
	text-align: center;
	padding-bottom: 15px;
	font-size: 1.5em;
}


#textofooter p{
	color: white;
	text-align: center;
	padding-bottom: 15px;
}


#gracias h2{
	
	
	width: 90%;
	top: 20px;
	margin: 5px auto;
	position: relative;
}

button {
    padding: 5px;
    font-size: 25px;
    font-weight: 500;
    cursor: pointer;
    color: #06c;
    background-color: white;
    border-color: white;
    box-shadow: white;
    border: none;
}

button:hover {
    text-decoration: underline;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 5px;
    
}

.closeBtn {
    color: white;
    float: left;
    font-size: 80px;
    font-weight: bold;
    height: auto;
    margin: 100px auto 0 auto;
}

.closeBtn:hover,
.closeBtn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


.container-pack {

    align-items: center;
    justify-content: space-around;
        flex-direction: row;
        align-items: center;
        width: 95%;
     background-color: white;

    margin: 0px auto 50px auto;
   
    }

     /* Estilo de la imagen */
.imagen-container-pack{
    padding: 0px;
   
}


/* Estilo del text */
.titulo-video-pack {
	margin: 40px auto 20px auto;

	color: black; 
}

    /* Estilo del video */
.video-container-pack video{
    padding: 0px;
    margin: 40px auto 0 auto;
    width: 100%;
   
}



.container-baterias {
  	display: flex;
    align-items: center;
    justify-content: space-between;
        flex-direction: column;
        align-items: center;
        width: 90%;
     background-color: white;

    margin: 50px auto;
    border-radius: 18px;
    border: 5px solid transparent; /* Espacio para el borde */
    border-image: linear-gradient(45deg, red, blue) 1; /* Degradado de verde a rosa */

    }

    /* Estilo del video */
.video-container-baterias{
    padding: 10px;
   
}

    /* Estilo del video */
.video-container-baterias video {
    width: 100%;
    max-width: 500px;
   
}

/* Estilo del text */
.text-container-baterias {
	margin: 0;
	padding: 20px 0;
    width: 90%;
    max-width: 500px;
    
}



}

}
}

/*---GRANDE---------
---------------------------------------------------
------------------------------------*/



/*--@media (max-width: 1149px) and (min-width: 851px)----*/{

	

	


}

/*------BIEN GRANDE!!!-----------------
----------------------------------------
--------------------------------------------------
---------------------------------------------------------
*/


@media (min-width: 851px){

	body{
	background:#FFFFFF;
	font-family: 'Raleway', sans-serif;
	height: 100%;
	
	}

	html {
  scroll-behavior: smooth;
}




 

	/*------NUEVO INDEX!!!-----------------
----------------------------------------
--------------------------------------------------
---------------------------------------------------------
*/

#barraventas {
	display: flex;
	height: auto;
	width: 100%;
	background-color: rgba(0, 0, 0, .12);
	backdrop-filter: blur(10px);
	position: sticky;
	bottom: 0;
	z-index: 3000;
	flex-wrap: wrap;
    align-items: center;
}	

#barraventas h1{
    
	text-shadow: 1px 1px white;
 height: auto;
 font-family: 'Rubik', sans-serif;
 font-weight: 600;
 font-size: 25px;
 padding: 10px;
 text-align: left;
 margin: 0 auto;
 text-decoration: underline 4px solid deepskyblue;
 
   
}

.venta1{
	width: 45%;
	text-align: left;
	margin-left: 5%;

}

.venta2{
	width: 40%;
	height: auto;
	float: right;
	margin-left: 7%;
	
}

#contactoventa {


	width: 270px;
	height: 35px;
	position: relative;
	margin: 10px auto;
	background-color: green;
	z-index: 50;
	border-radius: 10px;
	border:2px solid white;
	color: white;
	text-align: center;
	transition: background-color 0.3s ease;
	
}

#contactoventa:hover {

	background-color: #0082FF;

	
}

#contactoventa2 p:hover {

	color:white;
	background-color: green;

	
}

#contactoventa2 {


	width: 200px;
	height: 40px;
	position: absolute;
	bottom: 10%;
	left: 18%;
	z-index: 50;
	border-radius: 10px;
	border:2px solid white;
	color: white;
	text-align: center;
	transition: background-color 0.3s ease;

	
}



#contactoventa2 p {
    display: inline-block;
    height: 50px;
    font-size: 17px;
    padding: 12px 25px;
    color: BLACK;
 
    text-decoration: none;
    border: 3px solid green;
    font-weight: 500;
    transition: background-color 0.3s ease;

}

#contactoventa p {

	color: white;
	text-align: center;
	letter-spacing: 1px;
	font-size: 1.1em;
		margin-top: 5px;


}

.fotoprincipal {
	width: 100%;
	min-height: 450px;
}

.container {
	height: auto;
	margin: 0px auto 60px auto;
}

.container h1 {
    
	width: 80%;
 height: auto;
 font-family: 'Rubik', sans-serif;
 font-weight: 500;
 font-size: 2.5em;
 padding: 40px 0 0 0;
 text-align: center;
 margin: 0 auto;
 text-decoration: underline 7px solid deepskyblue;
   
}

.container h2 {
    
	width: 75%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 4.0em;
 padding: 40px 0 30px 0;
 text-align: center;
 margin: 0 auto;
   
}


.container h3 {
    
	width: 75%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 4.3em;
 padding: 20px 0 20px 0;
 text-align: left;
 margin: 20px auto 0 auto;
 color: #1d1d1f;
   
}


.container img{
	width: 100%;
	margin-top: -50px;
}

.portada0 {
	height: 90%;
	
	margin: 0 auto;
	overflow: hidden;
	
}
	
.portada1 {
	height: 85%;
	margin: 0px auto;
	overflow: hidden;
	background-color: #EED6B5;
}

.portada2 {
	height: 90%;
	max-height: 700px;
	margin: 20px auto;
	overflow: hidden;
	background-color: #fff3e3;
}

.portada3 {
	height: auto;
	margin: 20px auto;
	overflow: hidden;
	background-color: #f5f5f7;
}


.container-index0 {

		width: 100%;

height: auto;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 
  
}

.container-index0 h1{
		font-size: 2.2em;
		font-weight: 700;
		font-family: 'kanit', sans-serif;
		
		color: black;
		margin-top: 7%;
		margin-bottom: 12%;
		height: auto;

}

.container-index0 p{
        font-size: 1.5em;
        font-weight: 700;
        font-family: 'Rubik', sans-serif;
        color: black;

        height: auto;

}

.container-index0 h2{
	width: 95%;
		font-size: 2.8em;
		font-weight: 700;
		line-height: 0.99;
		font-family: 'kanit', sans-serif;
		font-style: italic;
		text-shadow: 2px 2px cyan;
		color: black;
		margin: 40px auto 0px auto;
		height: auto;
		margin-top: 8%;

}

.marcas h2{
    width: 95%;
        font-size: 1.8em !important;
        font-weight: 700;
        line-height: 0.99;
        font-family: 'kanit', sans-serif;
        font-style: italic;
        text-shadow: 2px 2px cyan;
        color: black;
        margin: 40px auto 0px auto;
        height: auto;
        margin-top: 8%;

}

.container-index0 h3{

	color: #312F2F;
	width: 80%;
	margin: 0 auto 0 auto;
		font-size: 1.5em;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		height: auto;
		

}

.item0 {
  
  overflow: visible;
  margin: 0 auto;
  text-align: center;

  
}

.item-08{

	
 width: 55%;

 padding: 0;
 margin-right: 0;

}

.item-08 img{
  width: 73%;
  height: auto; 

}

.item-09{
	width: 45%;
	margin-left: 0;
	


}

#pilares {
	margin:  0 auto;
	height: auto;
}


.nuestros-pilares {
	width: 90%;
	height: auto;
	margin: 60px auto;
	display: flex;
	flex-wrap: wrap;
 align-items: baseline;
 justify-content: flex-end;
	font-size: 1.5em;
	font-weight: 600;
	gap: 20px;
	
}

.nuestros-pilares a{
		color: black;
}

.item04 {
  width: 30%;
  height: auto;
  overflow: visible;
  padding: 0em;
  margin: 0 auto;
  text-align: left;
  font-size: 20px;
  font-weight: 500;

  
}

#problema {
	width: 100%;
	height: auto;
	padding: 50px 0px;
	 background: linear-gradient(90deg, black , #041f23,#041f23, black);

}



#pilares h2, #problema h2{
		font-size: 70px;
		font-weight: 600;
		font-family: 'Raleway', sans-serif;
		width: 	70%;
		color: white;
		text-align: center;
		margin: 10px auto;
		padding: 30px auto;
		height: auto;

}

#pilares h3, #problema h3 {
	 width: 80%;
		font-size: 50px;
		font-weight: 800;
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black;
		text-align: center;
		margin: 20px auto 0 auto;
		height: auto;

}

#validacion h3{
	 width: 90%;
		font-size: 60px;
		line-height: 1.2;
		font-weight: 800;
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black;
		text-align: center;
		margin: 20px auto 20px auto;
		height: auto;

}

#pilares h4 {
			font-size: 30px;
		
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black;
		
		margin: 20px auto;
		height: auto;

}

#tituloquehacemos h4 {
            font-size: 30px;
        
        font-family: 'Raleway', sans-serif;
        z-index: 5;
        color: black;
        text-align:center   ;
        margin: 20px auto;
        height: auto;

}
 #problema h4,#validacion h4{
	 
		font-size: 35px;
		
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black	;
		text-align: center;
		margin: 20px auto 20px auto;
		height: auto;

}

#validacion h5{
	 
		font-size: 20px;
		text-align: 	left	;
		font-family: 'Raleway', sans-serif;
		z-index: 5;
		color: black;
		margin: 20px auto 0 10px;
		height: auto;

}



#titulopilares{
	height: auto;
	width: 70%;
	margin: 0 auto;

}

#titulopilares h2{
		width:auto;
		height: auto; 
		padding:30px 0 20px 0; 
		line-height: 1.0;
		-webkit-background-clip: text; 
		color:transparent;
  
}

#titulopilares span{
	    position: relative;
    display: inline-block;
    color: #1A0DD8; /* Color de la electricidad (azul) */
    animation: electricidad-pausa 4.5s linear infinite; /* 0.5 segundos de animación, 10 segundos de pausa */
}

#tituloquehacemos{
    height: auto;
    width: 70%;
    margin: 50px auto 70px;

}

#tituloquehacemos h2{
        width:auto;
        height: auto; 
        padding:30px 0 20px 0; 
        line-height: 1.0;
        -webkit-background-clip: text; 
        color:transparent;
  
}

#tituloquehacemos span{
        position: relative;
    display: inline-block;
    color: #1A0DD8; /* Color de la electricidad (azul) */
    animation: electricidad-pausa 4.5s linear infinite; /* 0.5 segundos de animación, 10 segundos de pausa */
}



@keyframes electricidad-pausa {
    0%,6%,8% {
        text-shadow: 0 0 10px #0019FF, 0 0 20px #10DCF9, 0 0 30px #11F6FB, 0 0 50px #02FFEE; /* Aplica la sombra durante 0.5 segundos */
        color: white;
    }
    5%,7%,9%,
    100% {
        text-shadow: none; /* Sin sombra durante el resto del tiempo */
        color: #1A0DD8;
    }
}




#titulopilares h4{
		font-weight: 500;
		text-align: center;
}

.titulosubrayado {
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  height: auto; /* Ajusta la altura al 100% del viewport */
}

.subrayado {
  position: relative;
  display: inline-block;
  text-decoration: none; /* Elimina el subrayado predeterminado del texto */
  color: #333; /* Color del texto */
  z-index: 2;
}

.subrayado::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 0; /* Inicialmente sin longitud */
  height: 8px;
  background-color: #00ff41; /* Color de la línea subrayada */
  animation: subrayado 5s ease forwards;
  z-index: -1;
}

@keyframes subrayado {
  to {
    width: 100%; /* Extiende la línea subrayada al 100% del ancho */
  }
}

.planteoproblema {
	          display: flex;
           flex-wrap: wrap;
           flex-direction: row;
           
           justify-content: space-around;

           align-items: center;
           color: white;
           width: 90%;
          	height: 	auto;
           font-size: 1.4vw;
           text-align: left;
           margin: 40px auto 50px auto;
           z-index: 900;
           position: relative;
           column-gap: 20px;      
       
}

.columnaquehacemos {
			          display: flex;
           flex-wrap: wrap;
           flex-direction: grid;
           min-height: 500px;
           justify-content: space-around;
           align-items: center;
           color: white;
           grid-row-gap: 2px;
           width: 90%;
           font-size: 1.4vw;
           text-align: left;
           margin: 40px auto 50px auto;
           row-gap: 50px;
           z-index: 900;
           position: relative;
}



.renglon {
	height: 550px;
	display:flex;
	flex-direction: column;
	width: 45%;
	text-align: center;
    border-radius: 20px;
}

.renglon:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}




.renglon h5{
	height: auto; 
	color: #06c;
	padding:15px;
}

.renglon a {
	height: auto;
	font-size: 25px;
}

.renglon p {
	height: auto;
	font-size: 25px;
}

.renglon a:hover{
	text-decoration: underline;
}

#validacion {
	width: 80%;
	margin: 0 auto;
}

#validacion h4{

}

#validacion a:hover{
	text-decoration: underline;
}


.validacion {
		display: flex;
		width: 90%;
		margin: 0 auto;
		height: auto;
		grid-column-gap: 40px;

}

.item001{
	width: 50%;
	text-align: center;
	height: auto;
}

.item001 img{
	width:70%; 
	height:auto; 
	margin: 0 auto;
}

.item002{
	width: 40%; 
	color: white; 
	
	height: auto;
}

.cliente {
	width: 50%;
	background-color: white;
	height: auto;
	margin: 0 auto;
	border: 3px solid #B41593;
	border-radius: 20px;
}

.cliente h4 {
	 padding:40px; 
	 line-height: 2.0; 
}

.nosotros {
	 display: flex;
	 flex-wrap: wrap;
	 width: 75%;
	 height: auto;
	 margin: 0 auto;
	 column-gap: 20px;
}

.columnanosotros {
		 display: flex;
	 flex-wrap: wrap;
	 width: 45%;
	 height: auto;
	 margin: 0 auto;
	 flex-direction: row;
}


.item01 {
	width: 30%;
	height: auto;
}

.item02 {
	width: 60%;
	font-size: 25px;
	line-height: 1.3;
}

.container-index {
	width: 100%;
 
 overflow: hidden;
 background-image: url(../imagenes/servicios/1/Fondo-mesa-madera.avif) ;
 background-position: center; /* Center the image */
 background-repeat: no-repeat; /* Do not repeat the image */
 background-size: cover;
 display: flex;
 flex-wrap: wrap;
 gap: 1em;
}

.container-index h2{
		font-size: 3.3rem;
		font-weight: 700;
		font-family: 'kanit', sans-serif;
		font-style: italic;
		margin: 0 auto;
		height: auto;
		color: #25345c;
		text-shadow: 2px 2px white;


}

.container-index h3{
		font-size: 2.3rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		height: auto;
		

}

.item {
  
 height: 15%;
  overflow: visible;
  padding: 1em;

  text-align: center;

  
}

.item img{
 margin-top: -50px; 
 height: auto;
 filter: drop-shadow(8px 8px 4px #312F2F);

  
}

.item-1{
  width: 30%;
  height: 141px;
}

.item-1 img{
  
  width: 415px;
  transform: rotate(7deg);
  margin-top: 30px;

}

.item-2{

  width: 30%;
 height: 15%;

}

.item-2 img{

  margin-top: 20px;
  width: 380px;
 

}

.item-3{

 width: 29%;
 height: 15%;


}

.item-3 img{

  margin-top: 10px;
  width: 350px;
  transform: rotate(-3deg);
  

}

.item-4{

  width: 20%;
  height: 70px;
  
}

.item-5{
		position: absolute;
		margin-top: 12%;
		margin-left: 25%;
		flex-shrink: 0;
		height: auto;
		z-index: 500;
		width: 50%;
}

.item-6{

  width: 50%;
  height: 220px;

}



.item-7{


  width: 20%;
  height: 80px;
  

}

.item-7 img{

  margin-top: 20px;
  width: 100px;
  

}

.item-8{

  width: 30%;
  margin-left: 30%;

}

.item-8 img{

  
  width: 100%;
  transform: rotate(5deg)
  

}

.item-9{

  width: 30%;

}

.item-9 img{

  
  width: 350px;
  margin-top: -120px;

}


.vermas {

	width: 1000px;
	height: 250px;
	margin: 50px auto;
	display: flex;
 flex-wrap: wrap;
 align-items: stretch;
 text-align: left;
 border-left: 1rem solid #8b008b;
 background-color: #f5f5f7;
}

.vermas h3{

	width: 70%;
	height: auto;
	text-align: left;
		font-size: 2.0rem;
		font-weight: 500;
		font-family: 'Rubik', sans-serif;
		color: black;
		margin: 0px auto 25px 20px;
		padding-top: 5px;
}

.vermas p{

	
	text-align: left;
		font-size: 1.2rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: #06c;
		margin: 30px auto auto 20px;
	
}

.vermas img{
width: 100%;
height: 250px;
margin: 0 auto;
}

.item-10 {
		background-color: #f5f5f7;
		width: 30%;
		height: 250px;
}


.item-11 {

		width: 70%;

}


.container-index2 {

		width: 100%;
  height: auto;
  
  
  overflow: hidden;
  background-image: url(../imagenes/servicios/1/Fondo-mesa-madera2.avif) ;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.container-index2 h2{
		font-size: 3.5rem;
		font-weight: 700;
		color: #25345c;
		text-shadow: 2px 2px #00ff00;
		font-family: 'kanit', sans-serif;
		font-style: italic;
		margin: 0 auto;
		height: auto;

}

.container-index2 h3{
		font-size: 2.3rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		height: auto;
		

}


.item-21{
  width: 40%;
  height: 100px;
  
  
}

.item-21 img{
  
  width: 410px;
  height: auto;
  margin-top: 30px;
  transform: rotate(-5deg);

}

.item-22{

  width: 8%;
  height: 150px;
 

}

.item-22 img{
 
  width: 100px;
  height: auto;
   margin-top: 20px;
  transform: rotate(-5deg);

}

.item-23 {

 width: 9%;
 margin-left: 400px;
 
 

}

.item-23 img{

   margin-top: 30px;
  width: 95px;
  height: auto;
  transform: rotate(4deg);
  

}

.item-24{

  width: 20%;
  height: 50px;


}

.item-24 img{

  margin-top: -20px;
  width: 280px;
  height: auto;
  

}

.item-25{
	position: absolute;
		margin-top: 10%;
		margin-left: 25%;
		flex-shrink: 0;
		z-index: 500;
		width: 50%;
		height: auto;
}

.item-26{

  width:50%;
  height: 200px;

}



.item-27{


  width: 10%;
  height: 80px;


}

.item-27 img{

  margin-top: 20px;
  width: 135px;
  transform: rotate(7deg);
  

}

.item-28{

  width: 30%;
		
}


.item-29{
 margin-top: -50px;
  width: 30%;
  

}

.item-29 img{
	
  transform: rotate(-7deg);
  width: 420px;
  height: auto;
 

}


.contactanos {

	
		height: auto;
  margin: 0 auto;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  text-align: center;
  background-color: #f5f5f7;
  padding-top: 70px;
  padding-bottom: 50px;
}

.contactanos h2{
		width: 75%;
		font-size: 3.5rem;
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		color: black;
		margin: 0 auto;
		text-align: center;
		height: auto;

}

.contactanos h3{
	width: 100%;
		font-size: 2.6rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		text-align: center;
		margin: 50px auto;
		padding: 0;
		height: auto;
		

}

.contactanos p{
		font-size: 1.8rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		height: auto;
		margin: 20px auto;
		width: 60%;
	
}

.item-30 {
	width: 90%;
	height: auto;

		background-color: #f5f5f7;

	
}


.item-31 {
height: auto;
		width: 100%;

}

.item-31 img{
		width: 50%;
		height: auto;
		margin: 0 auto;
	
}


.datosdecontacto{
	width: 650px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
grid-column-gap: 150px;
	font-size: 1.5em;
	font-weight: 600;
	
}

.datosdecontacto a{
		color: black;
}

.datosdecontacto a:hover{
		color: #287ed4;
		text-decoration: underline;
}


.envio{
	display: flex;
	flex-direction: row;
	align-items: 	center;
	width: 60%;
		height: auto;
		margin: 70px auto;
}

.cajita {
			width: 40%;
			height: auto;
}

.cajita img{
			width: 140px;
			height: auto;
			margin: auto 0 auto 50px;
}

.textoenvio{
	height: auto;
	width: 60%;
}

.textoenvio h3{
			font-size: 2.7rem;
		font-weight: 500;
		font-family: 'Rubik', sans-serif;
		color: black;
		text-align: left;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		height: auto;
}

.item30 {
width: 250px;
flex-grow: 1;
	flex-basis: 0;
	margin: 0 auto;
}

.item30 p{
width: 100%;
		font-size: 1.2rem;
		font-weight: 500;
		font-family: 'Rubik', sans-serif;
		color: black;
		height: auto;
		margin: 10px auto 0 auto;
		
		
}


.item-32 {
		height: 430px;
		background-color: white;
		padding-top: 20px;
		
		

}

.item-32 img{
		width: 130px;
		height: auto;
		margin: 0 auto;
		
	
}


.item-33 {

	height: 430px;
		background-color: white;
		margin-left: 20px;
		padding-top: 20px;
	


}


.item-33 img{
		width: 115px;
		height: auto;
		margin: 0 auto;
		

	
}


.item-34 {

		width: 48%;
		background-color: white;
		margin-top: -300px;

}



.item-35 {

		width: 48%;
			background-color: white;
		margin-left: 20px;
		padding-bottom: 45px;
		margin-top: -300px;

}


.item-36 {

		width: 48%;
		background-color: white;
		margin-top: -190px;
	
}

.item-36 img{
		width: 150px;
		height: auto;
		margin: 0 auto;
	
}


.item-37 {

		width: 48%;
		background-color: white;
		margin-top: -190px;
		margin-left: 20px;
		
}

.item-37 img{
		width: 150px;
		height: auto;
		margin: 0 auto;
	
}

.item3 {
  
  overflow: visible;
  padding: 1em;
  margin: 0 auto;
  text-align: center;

  
}

.item3 img{
  
 height: auto;
  
}

.ventajastableros {
	width: 75%;
	margin: 60px auto 50px auto;
	display: flex;
	flex-wrap: wrap;
 align-items: baseline;
 justify-content: flex-end;
	font-size: 1.5em;
	font-weight: 600;
	
}

.ventajastableros a{
		color: black;
}

.item4 {
  width: 26%;
  height: auto;
  overflow: visible;
  padding-top: 1em;
  margin: 0 auto;
  text-align: left;
  font-size: 0.99em;
  font-weight: 500;

  
}

.item-41 {

text-align: center;
  
}

.item-42 {

text-align: center;
  
}

.item-43 {

text-align: center;
  
}


.item-41 img{

 width: 120px; 
 height: auto;
  
}

.item-42 img{
  
 width: 120px; 
 height: auto;
  
}

.item-43 img{
  
 width: 140px; 
 height: auto;
  
}

.item6 {
  width: 26%;
  height: auto;
  overflow: visible;
  padding-top: 1em;
  margin: 0 auto;

  
}

.item6 h4{

  font-size: 1.19em;
  font-weight: 600;
  text-align: center;
  
}

.item6 p{
  text-align: left;
  font-size: 0.99em;
  font-weight: 500;

  
}


.modelos {
	width: 100%;
	margin: 110px auto 50px auto;
	display: flex;
	flex-wrap: wrap;
 align-items: baseline;
 justify-content: flex-end;
	font-size: 1.5em;
	font-weight: 600;
	background: linear-gradient(10deg,grey,10%,black);
	min-height: 1400px;

	padding-bottom: 50px;
	
}

.modelos h3{
	color: white;
}

.modelos h4{
	font-size: 35px;
	padding-bottom: 50px;
	color: white;
	line-height: 50px;
}

.ventajastableros a{
		color: black;
}

.item5 {
  width: 30%;
  height: auto;
  overflow: visible;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  font-size: 0.99em;
  font-weight: 500;

  
}

.item5 p{text-align: left;

}

.item-61 {
min-height: 600px;
margin: 0 0 0 3%;  
background-color: white;
border-radius: 20px;
padding-top: 50px;
}

.item-62 {
min-height: 600px;
background-color: white;
border-radius: 20px;
padding-top: 50px;
  
}

.item-63 {
min-height: 600px;
margin: 0 3% 0 0;  
background-color: white;
border-radius: 20px;
padding-top: 50px;
  
}

.item-64 {

margin: 0 0 0 3%;  

padding-top: 50px;
}


.item-65 {


}


.item-66 {

margin: 0 3% 0 0;  

padding-top: 50px;
  
}

.item-61 img{

	
 height: auto;
  
}

.item-62 img{
  

 height: auto;
  
}

.item-63 img{
  

 height: auto;
  
}


#hero {
	height: 75%;
    margin-top: 50px;
}

.container-index3 {

		width: 100%;
  height: 90%;
 min-height: 	530px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 
  background-color: #f5f5f7;
}

.container-index3 h2{
		font-size: 3.0rem;
		font-weight: 700;
		font-family: 'kanit', sans-serif;
		font-style: italic;
		color: black;
		margin: 0 auto;
		height: auto;

}

.container-index3 h3{
		font-size: 2.2rem;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		color: black;
		height: auto;
		

}


.item-38{

	
 width: 30%;
 height: auto;
 padding: 0;
 margin-right: 0;

}

.item-38 img{
  width: 340px;
  height: auto; 

}

.item-39{
	width: 40%;
	margin-left: 0;


}

#videoyoutube {

width: 650px;
height: 650px;
margin: 60px auto;

}

#videoyoutube2 {

width: 100%;
height: auto;
margin: 30px auto;

}

iframe {

width: 80%;
height: 600px;
margin: 30px auto;


}



.tituloblog h1 {
    
 width: 25%;
 height: auto;
 font-family: 'Rubik', sans-serif;
 font-weight: 500;
 font-size: 4.9em;
 padding: 60px 0 0 0;
 text-align: center;
 margin: 0px auto;

 border-bottom: none;

   
}


.tituloproductos h1 {
    
    width: 75%;
 height: auto;
 font-family: 'Rubik', sans-serif;
 font-weight: 500;
 font-size: 3.9em;

 text-align: left;
 margin: 0 auto;
 border-bottom: none;

   
}

.tituloproductos h2 {
    
    width: 85%;
 height: auto;
 font-family: 'Rubik', sans-serif;
 font-size: 1.9em;
 padding: 40px 0 0 0;
 text-align: left;
 margin: 0 auto;
 border-bottom: none;
 height: auto;

   
}




#formulariocontacto{
	width: 70%;
	
	
	margin: 35px auto 0 auto;
	
    }

.toggle-menu{
	display: none;
}

 nav ul li{
	display:flex;
	border-radius: 10px;
	text-align: center;
	color: #fff;
	}

	#barra-menu {
	display: none;
	}


#logo {
    width: 120px !important;

    height: auto !important;
    display: flex !important;      /* Cambiado a flex para controlar el aire arriba/abajo */
    align-items: center !important;
    justify-content: center !important;
    float: none !important;        /* Evita que flote y pierda márgenes */
    margin-left: 50px;
}

#logo img {
    width: 110px !important;
    height: auto !important;

    display: block !important;     /* Evita que se comporte como texto */
    max-width: none !important;
    min-width: 90px !important;
    
    /* Esto soluciona que ignore el padding/margin en algunas páginas */
    vertical-align: middle !important; 
    position: relative !important;
    top: 0 !important;
}




	#titulocontacto {

	margin: auto;
	width: 500px;
	text-align: center;
	position: relative;



	}

#subtitulocontacto {

	font-family: 'Raleway', sans-serif;
	font-size: 1.1em;
	text-align: left;
	margin-left: 20%;
	

	}

#cuerpogracias{
	height: 50%;
}

#cuerpo_titulo{
	
	position: absolute;
	text-align: left;
	bottom: 30%;
	padding: 15px;
	font-size: 2.0em;
	left: 140px;
	background: #000;
	color:#fff;
	

}

#entrada{
	width: auto;
	height: 95%;
	min-height: 600px;
	margin-top: 60px;
	overflow: hidden;
	background: linear-gradient(120deg,#019add,70%,#76D7C4);
	max-height: 900px;

}

#entrada img {
	position: relative;
	width: 100%;
	
	
}

#entrada h2{
	
		position: absolute;
		text-align: left;
		font-size: 3.3em;
		color: white;
		z-index: 0;
		background-color: inherit;
		margin-left: 1.7em;
		margin-top: 70px;
		font-family: 'Kanit', sans-serif;
		letter-spacing: 4px;

}

#galeria3 {

	width: 100%;
	
	margin: 60px auto;
	
}

#servicio h2{
		width: 60%;
		margin: 180px auto 0 auto;
		position: relative;
		text-align: center;
		font-size: 3.7em;
		z-index: 110;
		font-weight: bolder;
		color: black;
		/*text-shadow: 3px 3px 3px white;*/
		font-weight: 700;
		font-family: 'kanit', sans-serif;
		

}

 
#subtitulopresentacion2{
	position: 	relative;	
	font-family: 'Raleway', sans-serif;
	font-size: 2.0em;
	text-align: center;
	margin: 130px auto 20px auto;
	width: 65%;
	overflow: hidden;
	line-height: 45px;
	font-weight: 500;
	color: #fff;
	text-shadow: 3px 3px 3px black;
	background-color: #ba35f280;	

	z-index: 110;
	

}

#subtitulopresentacion3{
	position: 	relative;	
	font-family: 'Raleway', sans-serif;
	font-size: 1.7em;
	text-align: center;
	margin: 0 auto 20px auto;
	width: 65%;
	overflow: hidden;
	line-height: 35px;
	font-weight: 500;
	color: black;
	z-index: 110;
	

}



#servicio {
	
	overflow: hidden;	
	width: 100%;
	margin: 0px auto 65px auto;
}

#servicio img {
	position: absolute;
	overflow: hidden;
	width: 100%;
	max-height: 90%;
	margin-top: 0px;
	

	
}

#cajaleermas {
margin: 0 auto;
width: 60%;
align-items: center;
text-align: center;

}

#leermas {

	background-color:#06c;
	width: 170px;
	height: 40px;
	position: relative;
	margin: 50px auto;
	z-index: 50;
	border-radius: 10px;
	border:2px solid white;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;

	
}

#leermas:hover {
	background-color: #019add;
	

	
}

#leermas a{

	color: white;
	
	letter-spacing: 1px;
	font-size: 1.1em;

}

#leermas a:hover {
	text-decoration: underline;
}

#leermas p{

	color: white;
	
	letter-spacing: 1px;
	font-size: 1.1em;
	
	padding-top: 10px ;

}

#leermas p:hover {
	text-decoration: underline;
}





#confianza{
	width: 100%;
	height: 100%;
	margin-top: 45px;
	overflow: hidden;

}



#confianza img{
	
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 514px;


}

#confianza h2{
		
		position: relative;
		text-align: center;
		font-size: 3.1em;
		background-color: rgba(0,0,0,0.1);  
		z-index: 0;
		font-family: 'Kanit', sans-serif;
		
}

#cajaconfianza{
	margin-top: -40%;
	overflow: hidden;
	height: auto;
	z-index: 100;
}

#cuerpo_confianza{
	
	position: relative;
	text-align: center;
	margin-top: 20px;
	padding: 15px;
	font-size: 2.1em;
	
	background-color:  rgba(0,0,0,0.6); 
	color:#fff;
	width: 100%;
	
}

#trabajo{
	/*background: linear-gradient(135deg
,#8538c2,70% ,#04bcf9 );*/
	background-color: #8538c2;
	height: 850px;
	background-image: url(../imagenes/servicios/1/nosotros.png);
	overflow: hidden;	
	background-size: cover;
}

#trabajo h2{
		position: relative;
		text-align: center;
		font-size: 2.8em;
		z-index: 100;
		background-color: inherit;
		height: auto;
		color: white;
		padding: 55px;
		font-family: 'Kanit', sans-serif;
	
	}

#trabajo img{
	
	overflow: hidden;
	z-index: 0;
	height: auto;
	position: relative;

}

.contenedor4 {
           display: grid;
           max-height: 97%;
           border-radius: 25px;
           background-color: white;
           width: 75%;
           font-size: 1.4vw;
           text-align: center;
           margin: -30px auto 0 auto;
           z-index: 900;
           position: relative;
          


          }


       .celda4 {
           width: 50px;
           background: black;

       }
       .unocelda4 {
           grid-column: 1;
           grid-row: 1;
           padding: 20px; 
           
       }
       .doscelda4 {
           grid-column: 2;
           grid-row: 1;
           padding: 20px; 
          
       }


         .doscelda4 h4{
          height: auto;
          
       }

    
       .trescelda4 {
           grid-column: 1;
           grid-row: 2;

           
       }

       .cuatrocelda4 {
        grid-column: 2;
        grid-row: 2;
        
       }

       .cincocelda4 {
       	 grid-column: 1;
        grid-row: 3;
      
       }


        .seiscelda4 {
       	grid-column: 2;
        grid-row: 3;
      
       }


        .sietecelda4 {
       	grid-column: 1;
        grid-row: 4;
      
       }


        .ochocelda4 {
       	grid-column: 2;
        grid-row: 4;
      
       }


.contenedor4 h4{
	font-size: 1.7em;
	color: #333333;
	height: auto;
}

.contenedor4 img{
	width: auto;
	height: auto;
}

.contenedor4 p{
	
	padding: 5px 40px 15px 40px;
	line-height: 30px;
	text-align: left;
	font-weight: 500;
	color: #333333;
	height: auto;
}


.contenedor9 {
           display: flex;
           flex-wrap: wrap;
           flex-direction: row;
          height: auto;
           justify-content: space-around;
           align-items: center;
           color: white;
           background-color: #3374db;
           width: 75%;
           font-size: 1.4vw;
           text-align: center;
           margin: 40px auto 0 auto;
           z-index: 900;
           position: relative;
           border: thin solid white;

         
          


          }

 .celda9 {
           width: 50px;
           background: black;


       }
       .unocelda9 {
           grid-column: 1;
           grid-row: 1;
           padding: 30px;
           flex-grow: 3;
         flex-basis: 60%;
         border-bottom: thin solid white;

        }

        .unocelda9 img{
        	width: 90%;
        	margin: 0 auto;
      
           
        }


        .doscelda9 {
      
         }
  
          

       .doscelda9 h4{
          
           padding: 15px;
          
           
          
       }


	


       .trescelda9 {
           grid-column: 2;
           grid-row: 1;

           
       }

       .trescelda9 h4{
          padding: 15px;

           
       }

       .cuatrocelda9 {
          padding: 30px;
           flex-grow: 3;
         flex-basis: 60%;

          }

       .cuatrocelda9 img{
        width: 90%;
     
        
       }

       .cincocelda9 {
       	 grid-column: 1;
        grid-row: 3;
      
       }


        .seiscelda9 {
       	grid-column: 2;
        grid-row: 3;
      
       }


        .sietecelda9 {
       	grid-column: 1;
        grid-row: 4;
      
       }


        .ochocelda9 {
       	grid-column: 2;
        grid-row: 4;
      
       }


.contenedor10 {
           display: flex;
           flex-wrap: wrap;
           flex-direction: row;
          height: auto;
           justify-content: center;
           align-items: center;
           color: white;
           border: 1px black;
           width: 75%;
           font-size: 1.4vw;
           text-align: left;
           margin: 40px auto 0 auto;
           z-index: 900;
           position: relative;
           grid-row-gap: 40px;
           border: thin solid white;
          


          }

.contenedor10 h4{
          
           padding: 0;
           margin: 0 10px;
           height: auto;
           	text-align: left;
											font-size: 2.9em;
											font-weight: 600;
											font-family: 'kanit', sans-serif;

           }

       .contenedor10 p{
          
           padding: 0;
           margin: 0 10px;
           height: auto;
           line-height: 1.3em;
                  
        }

           .contenedor10 p1{
          
           padding: 0;
           margin: 0 10px;
           height: auto;
           text-decoration: underline 5px solid #00ff00;
                  
        }



  .contenedor11 {
           display: flex;
           flex-wrap: wrap;
           flex-direction: row;
          height: auto;
           justify-content: space-around;
           align-items: center;
           color: white;
           grid-row-gap: 40px;
           width: 75%;
           font-size: 1.4vw;
           text-align: left;
           margin: 40px auto 0 auto;
           z-index: 900;
           position: relative;
           border: thin solid white;     


          }

       .contenedor11 h4{
          
           padding: 0;
           margin: 0 10px;
           height: auto;
           	text-align: left;
											font-size: 2.9em;
											font-weight: 600;
											font-family: 'kanit', sans-serif;

           }


       .contenedor11 p{
          
           padding: 0;
           margin: 0 10px;
           height: auto;
           line-height: 1.3em;
                  
          
       }


        .contenedor11 p1{
          
           padding: 0;
           margin: 0 10px;
           height: auto;
           text-decoration: underline 5px solid #00ff00;
                  
        }




       .unocelda10 {
          
           padding: 30px;
          
         flex-basis: 60%;
  
         height: 300px;
         background-image: url(../imagenes/servicios/1/Mp1.avif);
background-size: contain;
 background-position: center center; /* Center the image */
 background-repeat: no-repeat;

        }




        .doscelda10 {
      background-color: #3374db;
      width: 25%;
      height: 380px;
         }
  
          

	


       .trescelda10 {
           grid-column: 2;
           grid-row: 1;
           height: 450px;
           width: 25%;
           background-color: #3374db;

           
       }


       .cuatrocelda10 {
				padding: 30px;
          
         flex-basis: 60%;
         
         height: 370px;
         background-image: url(../imagenes/servicios/1/Mp2.avif);
background-size: contain;
 background-position: center; /* Center the image */
 background-repeat: no-repeat;

          }


       .unocelda11 {
           padding: 30px;
          
         flex-basis: 60%;
  
         height: 320px;
         background-image: url(../imagenes/servicios/1/Tp1.avif);
background-size: contain;
 background-position: center center; /* Center the image */
 background-repeat: no-repeat;

        }



        .doscelda11 {
      background-color: #ff0000;
      height: 420px;
      width: 25%;
         }
  
          

	


       .trescelda11 {
           grid-column: 2;
           grid-row: 1;
           background-color: #ff0000;
           height: 570px;
           width: 25%;

           
       }


       .cuatrocelda11 {
				padding: 30px;
          
         flex-basis: 60%;
         
         height: 470px;
         background-image: url(../imagenes/servicios/1/Tp2.avif);
				background-size: contain;
 			background-position: center; /* Center the image */
 			background-repeat: no-repeat;

          }


.contenedor12 {
           display: flex;
           flex-wrap: wrap;
           flex-direction: row;
          height: 300px;
           justify-content: center;
           align-items: center;
           color: black;
           background-color: #f5f5f7;
           width: 100%;
           font-size: 25px;
           text-align: left;
           margin: 40px auto 0 auto;
           z-index: 900;
           position: relative;
           height: auto;
          

         
          


          }



 .celda12 {
           width: 50px;
           background: black;


       }
       .unocelda12 {
       	margin: 15px;
       		width: 230px;
       		height: 230px;
         border-bottom: thin solid white;
         background-color: white;
         border-radius: 25px;

        }

        .unocelda12 img{
        	width: 200px;
        	height: 200px;
        	margin: 15px;
      
           
        }


        .doscelda12 {
      margin: 25px;
      height: auto;
      width: 40%;
         }
  
          

       .doscelda12 h4{
         font-size: 30px !important;
         line-height: 1.3;
          
       }






#galeria{
	 width: 100%;
	 margin: 90 auto;
	 overflow: hidden;
	 padding: 0;
	 position: relative;
	 height: auto;
}

#galeria ul{
	padding: 0;
	position: relative;
	width: 400%;
	margin: 75 auto;
	height: auto;

}



#galeria li{
	float: left;
	width: 25%;
	height: 100%;
}


#galeria li img{
	width: 100%;
	
	}

#galeria li .caption{
	position: relative;
	width: 100%;
	top: -450px;
	text-align: center;
	

	}


#galeria ul li h3{

	color:#fff;
	text-transform: uppercase;
	font-family: 'Archivo Black', sans-serif;
	background: #41afe0;
	padding: 9px;
	font-size: 3.5em;
	text-align: center;
	
	
}

#galeria ul li p{

	font-size: 2.2em;
	padding: 11px;
	background-color:  rgba(0,0,0,0.9); 
	color:#fff;
	
	text-align: center;
	
}

.contenedor2 {
           display: grid;
          
           grid-template-rows: repeat(1, 120px);
           grid-gap: 2rem;
           grid-auto-rows: 80px;
           width: 70%;
           margin: 0 auto;
           

          }


       .celda2 {
           
       }
       .uno2 {
           grid-column: 1;
           grid-row: 1;
       }
       .dos2 {
           grid-column: 2;
           grid-row: 1;
          
       }
       .tres2 {
           grid-column: 3;
           grid-row: 1;
       }


.contenedor3 {
           display: grid;
          
           grid-template-rows: repeat(1, 120px);
           grid-gap: 2rem;
           grid-auto-rows: 80px;
           width: 70%;
           margin: 0 auto;
           padding-top: 70px;
           

       }

       .cuatro2 {
           grid-column: 1;
           grid-row: 2;
       }

       .cinco2 {
           grid-column: 2;
           grid-row: 2;

       }
       .seis2 {
           grid-column: 3;
           grid-row: 2;
       }

#left{
	position: absolute;
	top: 55%;
	left: 2%;
	font-size: 4em;
	cursor: pointer;
	z-index: 1;
	padding: 15px;
	border-radius: 0 3px 3px 0;
	background: rgba(0,0,0,0.8);
	color: #fff;

}


#right {
	position: absolute;
	top: 55%;
	right: 2%;
	font-size: 4em;
	cursor: pointer;
	z-index: 1;
	padding: 15px;
	border-radius: 0 3px 3px 0;
	background: rgba(0,0,0,0.8);
	color: #fff;

}

#right:hover,#left:hover{
	background: #fff;
	color: rgba(0,0,0,0.8);
}




.contenedor2 p{


	font-family: 'Raleway', sans-serif;
	font-size: 2.0em;
	text-align: center;
	margin-top: 50px;

}

.contenedor6 {
           display: grid;
           text-align: left;	
           grid-template-rows: repeat(1, 60px);
           grid-gap: 30px;
           
           width: 350px;
           
           margin: 20px auto;


       }
       .celda6 {
          
       }
       .uno6 {
           grid-column: 1;
           grid-row: 1;
           width:60px;
       }
       .dos6 {
           grid-column: 2;
           grid-row: 1;
           width:60px;
       }
       .tres6 {
           grid-column: 3;
           grid-row: 1;
           width:60px;
       }
       .cuatro6 {
           grid-column: 4;
           grid-row: 1;
           width: 64px;
       }



.contenedor6 img{
	
	width: 5rem;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;


}

.contenedor6 h3{
	
	width: 5rem;
	margin-left: auto;
	margin-right: auto;



}

#proyecto{
	
	height: 488px;
	overflow: hidden;

}

#proyecto img{
	
	position: relative;
	width: 100%;

}


#cajaproyecto{
	
	overflow: hidden;
	margin-top: -27%;
}


#proyecto h2{
		
		
	
		position: relative;
		text-align: center;
		font-size: 3.1em;
		background-color: rgba(0,0,0,0.1);
		font-family: 'Kanit', sans-serif;
}


#cuerpo_proyecto{
	
	position: relative;
	text-align: center;
	margin-top: 20px;
	padding: 15px;
	font-size: 2.1em;
	
	background-color:  rgba(0,0,0,0.6); 
	color:#fff;
	width: 100%;
	
}



#presentacion{
	
	top:100px;
	background-color: #fafafa;
	margin-bottom: 50;
	height: 510;
	
	
}

#presentacion h1{
	width: 45%;
	left: 27%;
	text-align: center;
	position: relative;
	font-size: 2.7em;
}




#clientes{
	max-width: 100%;
	overflow: hidden;
	height: auto;
	margin-bottom: 50px;
}

#clientes h2{
		position: relative;
		text-align: center;
		font-size: 3.3em;
		z-index: 0;
		padding-top: 35px;
		background-color: inherit;
		margin: 0 auto;
		font-weight: 800;
		color: #333333;
		font-family: 'Kanit', sans-serif;
		height: auto;
}

.contenedor {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           grid-template-rows: repeat(3, 80px);
           grid-gap: 1rem;
           grid-auto-rows: 80px;
           width: 90%;
           margin: 0 auto;
           padding-top: 10px;

       }

.contenedor img{
	
	width: 9rem;
	margin:auto;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;


}
       .celda {
           
       }
       .uno {
           grid-column: 1;
           grid-row: 1;
       }
       .dos {
           grid-column: 2;
           grid-row: 1;
       }
       .tres {
           grid-column: 3;
           grid-row: 1;
       }
       .cuatro {
           grid-column: 1;
           grid-row: 2;
       }

       .cinco {
           grid-column: 2;
           grid-row: 2;
       }
       .seis {
           grid-column: 3;
           grid-row: 2;
       }
       .siete {
           grid-column: 1;
           grid-row: 3;
       }
       .ocho {
           grid-column: 2;
           grid-row: 3;
       }
       .nueve {
           grid-column: 3;
           grid-row: 3;
       }




/*------SECCIONES!!!-----------------
----------------------------------------
--------------------------------------------------
---------------------------------------------------------
*/

#secciones {
 height: auto;
}



#secciones h1{
	width: 80%;
	text-align: center;
		font-size: 4.4rem;
		font-weight: 600;
		height: auto;
		font-family: 'Rubik', sans-serif;

		color: black;
		margin: 20px auto;
		padding-top: 20px;
}





#secciones h2{
	width: 75%;
	text-align: left;

		font-weight: bold;
		height: auto;
		font-family: 'Raleway', sans-serif;
		line-height: 1.1;
		color: black;
		margin: 30px auto 0 auto;
		padding-top: 20px;
}

#secciones p1{
		text-align: left;
		font-size: 40px;

}

#secciones p2{
	width: 80%;
		text-align: left;
		font-size: 50px;

}


#secciones-blog {
 height: auto;
}



#secciones-blog h1{
	width: 80%;
	text-align: center;
		font-size: 4.4rem;
		font-weight: 600;
		height: auto;
		font-family: 'Rubik', sans-serif;

		color: black;
		margin: 20px auto;
		padding-top: 20px;
}

#secciones-blog h2{
	width: 75%;
	text-align: left;
		font-size: 40px;
		font-weight: bold;
		height: auto;
		font-family: 'Raleway', sans-serif;
		line-height: 1.1;
		color: black;
		margin: 30px auto 0 auto;
		padding-top: 20px;
}

#secciones h2#titulo-principal{
    width: 75%;
    text-align: center;

        font-weight: bold;
        height: auto;
        font-family: 'Raleway', sans-serif;
        line-height: 1.1;
        color: black;
        margin: 20px auto 0 auto;
        padding-top: 20px;
        opacity: 0;
        transform: translateY(10px);
        animation: aparecerGlow 1.2s ease-out forwards;

}

@keyframes aparecerGlow {
    0% {
        opacity: 0;
        transform: translateY(10px);
        text-shadow: 0 0 0px rgba(255,255,255,0);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: 0 0 12px rgba(255,255,255,0.8);
    }

    100% {
        opacity: 1;
        
    }
}


.titulo-animado {
    font-size: 5vw;
    position: relative;
}

.titulo-animado span2{
    font-size: 40px;
 
}


.titulo-animado h3{
	width:auto;
	height:  auto; 
	padding:40px;
}

.titulo-animado.desplazado {
    animation: desplazar 0.9s ease;
}

.bounce {
	animation: bounce 1.5s ease;
}


.title-animation {
    text-align: center;
}



@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-35px); /* Puedes ajustar la distancia del desplazamiento aquí */
    }
    100% {
        transform: translateY(0);
    }
}


@keyframes desplazar {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-55px); /* Puedes ajustar la distancia del desplazamiento aquí */
    }
    100% {
        transform: translateY(0);
    }
}


#secciones h3{
		position: relative;
		text-align: center;
		height: auto;
		font-size: 60px;
       line-height:1.3 ;
		z-index: 0;
		padding-top: 65px;
		background-color: inherit;
		width: 80%;

		margin:0px auto 40px auto;
		
		color: #333333;
		font-family: 'Raleway', sans-serif;
}

#secciones h6{
		position: relative;
		text-align: left;
		width: 75%;
		font-size: 1.2em;
		z-index: 0;
		height: auto;
		background-color: inherit;
		margin-top: 40px;
		
		font-weight: 800;
		color: black;
		font-family: 'Raleway', sans-serif;
}


#subtitulopresentacion4{
	position: 	relative;	
	font-family: 'Raleway', sans-serif;
	font-size: 1.5em;
	text-align: left;
	margin: 20px auto;
	width: 75%;
	overflow: hidden;
	line-height: 35px;
	font-weight: 500;
	color: black;
	z-index: 110;
	height: auto;

}

#subtitulopresentacion4 a{
	display: inline;
	height: auto;

}

#subtitulopresentacion4 h2{

	width: 80%;
	text-align: center;
		font-size: 65px;
		
		height: auto;
		font-family: 'Raleway', sans-serif;
		line-height: 1.35;
		color: black;
		margin: 30px auto 0 auto;
		padding-top: 20px;

}

#subtitulopresentacion4 h4{

    font-size: 40px;
    padding: 30px 0;

}

.tituloblog h2{

	width: 80%;
	text-align: left;
		font-size: 40px;
		
		height: auto;
		font-family: 'Raleway', sans-serif;
		line-height: 1.35;
		color: black;
		margin: 30px auto 0 auto;
		padding-top: 20px;

}

#subtitulopresentacion6{
	position: 	relative;	
	font-family: 'Raleway', sans-serif;
	font-size: 30px;
    line-height: 1.4;
	text-align: center;
	margin: 80px auto 0 auto;
	width: 70%;
	overflow: hidden;
    font-weight: 600;

	color: #333333;
	z-index: 110;
	height: auto;

}

#subtitulopresentacion7{
    position:   relative;   
    font-family: 'Raleway', sans-serif;
    font-size: 27px;
    text-align: center;
    margin: 20px auto 30px auto;
    width: 75%;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.5;
    color: #333333;
    z-index: 110;
    height: auto;

}


#subtitulopresentacion7 a{
    position:   relative;   
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    text-align: center;
    margin: 20px auto;
    color: #06c;
    width: 75%;
    overflow: hidden;

    
height: auto;

}


button {
    padding: 5px;
    font-size: 25px;
    font-weight: 500;
    cursor: pointer;
    color: #06c;
    background-color: white;
    border-color: white;
    box-shadow: white;
    border: none;
}

button:hover {
    text-decoration: underline;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    width: 40%;
    max-width: 700px;
}

.closeBtn {
    color: white;
    float: right;
    font-size: 128px;
    font-weight: bold;
}

.closeBtn:hover,
.closeBtn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}



.marcas {
	
	height: auto;

	bottom: 28%;
	width: 45%;
	overflow: hidden;
	margin: 0px auto 30px;
}

.slider {
    width: 75%;
    height: auto;
    margin: 50px auto;
    overflow: hidden;
}

.slider .slide-track {
    display: flex;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(250px * 14);
}

.slider .slide {
    width: 250px;
}

.slider .slide img {
    width: 200px;
    margin: 0 auto;
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-250px * 7));
        transform: translateX(calc(-250px * 7));
    }
}





#items {
	margin-left: 10%;
}

#fotoseccion{
	 
	margin:40px auto;
	height: auto;
	background-color: #17202A;
	width: 75%;
	color: white;
	height: auto;

}

#fotoseccionzoom {
	overflow: hidden; 
	margin:40px auto;
	height: auto;
	background-color: #17202A;
	width: 75%;
	color: white;
	height: auto;

}

#fotoseccionbypass{
	 
	margin:0 auto;
	height: auto;
	background-color: white;
	width: 70%;
	height: auto;

}

#fotosecciontitan{
	 
	margin:40px auto;
	height: auto;
	background-color: white;
	width: 55%;
	color: white;
	height: auto;

}

#fotoseccion img{
	 
margin: 0px auto;

}

#fotosecciontitan img{
	 
margin: 0px auto;

}

#fotoseccionlateral {
	display: flex; 
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin:70px auto 40px auto;
	height: 500px;
	text-align: right;
	justify-content: center;
	align-content: center;
	width: 75%;
	color: white;
	height: auto;
	
}


.item-51 h3 {
 color: black;   
	width: 100%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 4.5em;
padding: 0;
margin: 0 auto;
 text-align: left;

   
}



.item-51{
	width: 50%;
	height: auto;

}

.item-52{
	width: 50%;
	height: 650px;
}

.item-52 img{
	float: right;
	width: 100%;
	margin: 0 auto;
}

.item-53{
	width: auto;
height: 500px;

}

.item-53 img{
	float: right;
	height: 500px;
	width: auto;
	margin: 0 auto;
}


.item-54{
	width: 50%;
	
}

.item-54 h3 {
 color: black;   
	width: 100%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 4.5em;
padding: 0;
margin: 0 auto 0 20px;
 text-align: left;

   
}



.container-pack {
		display: flex;
    align-items: center;
    justify-content: space-around;
        flex-direction: colum;
        align-items: center;
        width: 95%;
     background-color: white;

    margin: 50px auto;
   
    }

     /* Estilo de la imagen */
.imagen-container-pack{
    padding: 10px;
   
}

    /* Estilo de la imagen */
.imagen-container-pack img {
    width: 100%;
    max-width: 500px;
   
}

/* Estilo del text */
.text-container-pack {
	margin: 0;

	color: black;

    max-width: 600px;
    
}


/* Estilo del video */
.video-container-pack video {
    width: 100%;
    max-width: 500px;
   
}


.container-baterias {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    max-width: 1200px;
    background-color: white;
    padding:20px 40px;
    margin: 0 auto;
    border-radius: 18px;
    border: 5px solid transparent; /* Espacio para el borde */
    border-image: linear-gradient(45deg, red, blue) 1; /* Degradado de verde a rosa */

}

/* Estilo del video */
.video-container-baterias video {
    width: 100%;
    max-width: 500px;
   
}

/* Estilo del text */
.text-container-baterias {
	margin: 0;
	padding: 20px 0;
    width: 50%;
    max-width: 500px;
    
}




/* Estilos CSS para la galería */
        .carousel-container {
            width: 70%; /* Ancho del carrusel */
            margin: 0 auto;
            overflow: hidden; /* Oculta las imágenes que no están en la vista */
        }

        .carousel {
            display: flex; /* Muestra las imágenes en línea */
            transition: transform 0.5s ease; /* Agrega una transición suave al cambiar las imágenes */
            
        }

        .carousel img {
            width: 100%; /* Ajusta el ancho de las imágenes al contenedor */
            height: auto; /* Ajusta la altura automáticamente */

        }

        .carousel-btn {
            
           
            background-color: DeepSkyBlue;
            color: white;
            border: none;
            padding: 15px 30px;
            cursor: pointer;
            z-index: 1;
            font-size: 25px;
            font-weight: 32px;
            position: 	relative;
            top: 50%; /* Alinea los botones a media altura vertical */
            transform: translateY(-600%);
                     
            cursor: pointer;
        }

        .prev-btn {
            
             left: 0;
        }

        .next-btn {
            position: 	static;
            float: 	right	;
            
        }


  /* Estilos generales del carrusel */
        .custom-slider-container {
            display: flex;
            overflow: hidden;
            width: 70%;
            margin: 0 auto;
        }
        
        /* Estilos de las imágenes en el carrusel */
        .custom-slider-item {
            flex: 0 0 100%; /* 2 imágenes en el carrusel */
            width: 100%;
            transition: transform 0.5s ease;
        }
        
         .carousel-btn2 {            
           
            background-color: DeepSkyBlue;
            color: white;
            border: none;
            padding: 15px 30px;
            cursor: pointer;
            z-index: 1;
            font-size: 25px;
            font-weight: 32px;
            position: 	relative;
            top: 50%; /* Alinea los botones a media altura vertical */
            transform: translateY(-600%);
                     
            cursor: pointer;
        }

        .prev-btn2 {
            
             left: 15%;
        }

        .next-btn2 {
        position: 	static;
        float: 	right	;
        margin: 	auto 15% auto auto;
            
        }





#fotoseccion p{
height: auto;	 
font-size: 1.0em;
line-height: normal;
	

}

#fondogris{
	width: 100%;
background-color:#f5f5f7;
	height: auto;
	padding-bottom: 50px;
}


#casoexito{
	
	height: auto;
	


}

#casoexito h2{
		letter-spacing: 4px;
		position: relative;
		text-align: center;
		font-size: 3.5em;
		z-index: 0;
		background-color: inherit;
		padding-top: 35px;
		text-shadow: 2px 2px 2px black;
		color:white;
		font-family: 'Kanit', sans-serif;

	
}

#subtitulopresentacion5{
	position: 	relative;	
	font-family: 'Raleway', sans-serif;
	font-size: 1.5em;
	text-align: left;
	margin: 20px auto 0 auto;
	width: 75%;
	overflow: hidden;
	line-height: 35px;
	font-weight: 500;
	color: white;
	z-index: 110;
	
}

.contenedor8 {
           display: grid;
           max-height: 97%;
           border-radius: 25px;
           background-color: white;
           color: black;
           width: 75%;
           font-size: 1.4vw;
           text-align: left;
           margin: 30px auto;
           z-index: 900;
           position: relative;
          
          }



.lista {
	display: flex;
	width: 60%;
	height: auto;
	margin: 50px auto;
	flex-direction: row;

 align-items: center;
	flex-wrap: wrap;


}

.lista img{
	margin: 0 auto;
	height: auto;
}

.titulolista{
	width: 40%;
	margin-bottom: 25px;



}

.fotolista{

	width: 20%;
	margin-bottom: 25px;
}

.fotolista img{
	width: 100%;
	padding-bottom: 10px;
}


.descripcionlista{
	width: 30%;
	margin-bottom: 25px;
	margin-left: 10px;


}



#contacto{
	background: #1B2631;
	height: auto;

	
}

#contacto h2{
	
		letter-spacing: 4px;
		position: relative;
		text-align: center;
		font-size: 3.5em;
		z-index: 0;
		background-color: inherit;
		padding-top: 35px;
		text-shadow: 2px 2px 2px black;
		color:white;
		font-family: 'Kanit', sans-serif;
}

#contacto img{
	
	width: 100%;

}
	


#gracias{
	min-height: 60%;
}

#gracias h2{
	
	
	width: 35%;
	top: 30px;
	margin: 45 auto;
	position: relative;
	font-family: 'Kanit', sans-serif;
}




/*---Navs-------------------------------------------------*/


.main-menu{
	display:flex;
	flex-direction: row;
	align-items: center;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	float: right;
	height: 30px;
	margin-top: -40px;		
	margin-right: 5%;
	font-size:  15px;
}



nav ul li {
	
	
	color: white;

}


nav ul li a{
	padding: 0px 25px;
    color: white;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;


	
}


nav ul li:hover {
	background: #fff;
	
	color: #000;

}

nav ul li a:hover {
	color: #000;
	
	
}

#navcontactohome {
	display: none;
}






/*---Header---------------------------------------------*/
.header-index, .header-principal, #barraventas {
    box-sizing: border-box;
}


.barrafija{
	position: fixed;
}

.header-index {
	margin-top: -50px;
	border-bottom: solid 3px red;
	height: 60px !important;
	display: block;
	color:#fff;
	background-color: rgba(0,0,0,0.9); 
	z-index: 9999;
	width: 100%;
    position: fixed;
}

#menufijo {
	position: fixed;
		margin: 0px;
	font-weight: 600;
	height: 60px;
	display: block;
	color:#fff;
	background-color: rgba(0,0,0,0.9); 
	z-index: 1000;
	width: 100%;
}


#navcontacto img{
	display: none;
	}


/*---Contacto------------------------------------------------*/

#formulariocontacto{
	
	
	margin: 35px auto 0 auto;
	
}

.contenedor5 {
           display: grid;
           grid-template-columns:repeat(2, 45%);
           border-radius: 25px;
           grid-gap: 10px 50px;
           color: white;
           width: 70%;
           font-size: 2.0em;
           height: auto;
           text-align: center;
           margin: 60px auto 0 auto;
           line-height: 40px;
          
          }


.contenedor5 h2 {
    
	width: 75%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 4.2em;
 padding: 40px 0 30px 0;
 text-align: center;
 margin: 0 auto;
   
}


.contenedor5 h3 {
    
	width: 75%;
 height: auto;
 font-family: 'Raleway', sans-serif;
 font-weight: 600;
 font-size: 1.2em;
 padding: 0;
 text-align: center;
 margin: 10px auto;
   
}

.unocelda5 a{
		width: 110px;
		margin: 0 auto;
}
.doscelda5 a{
		width: 110px;
		margin: 0 auto;
}

.contenedor5 img{

	width: 90px;
}

.contenedor5 a {

	color:#fff;
	
}

.contenedor5 a:hover {

	text-decoration-line: underline;
	
	color: #fff;
	
}

.contenedor5 p {

	font-size: 0.7em;
	
}


.unocelda5{
	grid-column: 1;
    grid-row: 1;
    padding-top: 40px;
}

.unocelda5 a{
		width: 110px;
		margin: 0 auto;
}

.doscelda5{
	grid-column: 2;
    grid-row: 1;
    padding-top: 40px;

}

.doscelda5 a{
		width: 110px;
		margin: 0 auto;
}

.trescelda5{
	grid-column: 1;
    grid-row: 2;
 
}

.trescelda5 a{
    color: white;
}



.cuatrocelda5{
	grid-column: 2;
    grid-row: 2;
}

.cuatrocelda5 a{
    color: white;
}

.contenedor7 {
           display: grid;
           grid-template-columns:repeat(4, 24%);
           padding-top: 20px;
           line-height: 25px;
           color: white;
           width: 70%;
           font-size: 1.2em;
           height: auto;
           text-align: left;
           margin: 0 auto;
	
}

.unocelda3 {

text-align: center	;
}	

.contenedor7 a{
	color: white;
	height: auto;
}

.contenedor7 a:hover{
	text-decoration-line: underline;
	color: #fff;
}

.unocelda3 a{
width: 60px;
}

.doscelda3 a{
width: 160px;
}

}


/* --- BLOG-----------------------



--- */


/* Contenedor principal de la grilla del Blog */
.blog-grid-container {
    display: grid;
    gap: 25px; /* Espacio entre tarjetas */
    padding: 60px;
    max-width: 1400px; /* Ancho máximo para PC */
    margin: 0 auto; /* Centra la grilla */
    /* Escritorio: 4 columnas exactas */
    grid-template-columns: repeat(4, 1fr);
}

/* Tarjeta individual del artículo */
.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px; /* Bordes suaves */
    overflow: hidden; /* Importante para que el recorte de la imagen funcione */
    text-decoration: none; /* Quita el subrayado del enlace */
    border: 1px solid #eee; /* Borde sutil */
    transition: all 0.3s ease; /* Transición suave para el efecto hover */
    height: 100%; /* Asegura que todas las tarjetas tengan el mismo alto */
}

/* Efecto al pasar el mouse */
.blog-card:hover {
    transform: translateY(-5px); /* Eleva la tarjeta */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Añade sombra */
}

/* --- FOTO VERTICAL 4:5 - AQUÍ ESTÁ LA MAGIA --- */
.blog-card-media {
    width: 100%; /* Ocupa todo el ancho de la tarjeta */
    aspect-ratio: 4 / 5; /* FORZA la proporción vertical 4:5 de forma estricta */
    overflow: hidden; /* Recorta cualquier parte de la imagen que sobresalga */
    position: relative; /* Necesario para object-fit */
}

.blog-card-media img {
    width: 100%; /* Se adapta al ancho del contenedor */
    height: 100%; /* Se adapta al alto del contenedor */
    object-fit: cover; /* ESCALA Y RECORTA automáticamente la imagen para llenar el 4:5 sin deformarla */
    display: block; /* Evita espacios extraños */
}

/* Contenedor de textos */
.blog-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el contenido crezca para llenar la tarjeta */
    height: auto;
}

.blog-card-title {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    color: #222; /* Título oscuro y legible */
    height: auto;
}

.blog-card-excerpt {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555; /* Texto descriptivo más suave */
    /* Corta el texto automáticamente a 3 líneas con puntos suspensivos */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto;
}

/* --- RESPONSIVE - AJUSTES PARA CELULAR --- */

/* Celular y pantallas pequeñas (menos de 800px) */
@media (max-width: 800px) {
    .blog-grid-container {
        grid-template-columns: repeat(2, 1fr); /* Celular: 2 columnas exactas */
        gap: 12px; /* Espacio más ajustado */
        padding: 10px;
    }

    .blog-card-title {
        font-size: 0.9rem; /* Título más pequeño en móvil */
    }

    .blog-card-excerpt {
        display: none; /* Oculta la descripción en móvil para simplificar la vista en 2 columnas */
    }
}


/*---Contacto------------------------------------------------*/

/* --- SECCIÓN TESTIMONIOS PREMIUM --- */
.testimonios-premium {
    background: #fdfdfd;
    padding: 80px 20px 50px;
    overflow: hidden;
}

.testimonio-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    padding-bottom: 20px;
    padding-top: 5px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.testimonio-wrapper::-webkit-scrollbar {
    display: none;
}

.testimonio-container {
    display: flex;
    gap: 30px;
}

.testimonio-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border-top: 4px solid #f80c32;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.3s ease;
    height: auto;
}

.testimonio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
}

/* Icono de Comilla */
.comilla-icon {
    font-family: 'Georgia', serif;
    font-size: 5rem;
    color: #f80c32;
    opacity: 0.15;
    position: absolute;
    top: 10px;
    left: 20px;
    line-height: 1;
}

.testimonio-card .cita {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #222;
    font-style: italic;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    height: auto;
}

.testimonio-card strong {
    color: #f80c32;
    font-weight: 700;
}

.autor-info {
    border-top: 1px solid #eee;
    padding-top: 20px;
    height: auto;
}

.autor-info .nombre {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
}

.autor-info .cargo {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

/* --- INDICADORES (DOTS) --- */
.testimonios-dots {
    display: none; /* Oculto en PC */
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #ddd;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    width: 24px;
    background-color: darkgray;
    border-radius: 10px;
}

/* --- AJUSTES MÓVIL (Menos de 900px) --- */
@media (max-width: 900px) {
    .testimonios-dots {
        display: flex;
    }
    
    .testimonio-wrapper {
        scroll-snap-type: x mandatory;
    }
    
    .testimonio-card {
        flex: 0 0 85%; /* Muestra el 85% de la card para dejar ver la siguiente */
        min-width: 280px;
        scroll-snap-align: center;
    }

    .testimonio-card .cita {
        font-size: 1.1rem;
    }

    .testimonios-premium {
        padding: 60px 15px;
    }
}

/* --- AJUSTES PC (Más de 900px) --- */
@media (min-width: 901px) {
    .testimonio-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 40px;
    }
    
    .testimonio-card {
        flex: none;
        width: auto;
    }
}

/* --- NUEVA SECCIÓN MARCAS (10 LOGOS) --- */
.seccion-marcas-validadoras {
    background: #fcfcfc; /* Un gris casi blanco para dar contraste */
    padding: 60px 20px;
    text-align: center;
    border-top: 1px solid #eee;
}

.seccion-marcas-validadoras p {
    font-family: 'Kanit', sans-serif;
    font-size: 1.2rem;
    color: #121212;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 15px;
    font-weight: 600;
}

.linea-roja-ioon {
    width: 40px;
    height: 3px;
    background: #f80c32;
    margin: 0 auto 45px;
}

.marcas-grid-static {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    /* En PC: 5 columnas exactas para repartir los 10 logos en 2 filas */
    grid-template-columns: repeat(5, 1fr); 
    gap: 50px 30px; 
    align-items: center;
}

.marca-item img {
    width: 100%;
    height: 45px; /* Tamaño ideal para que 10 logos no saturen */
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s ease;
}

.marca-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* --- AJUSTE CELULAR (EL "MURO" DE LOGOS) --- */
/* --- AJUSTE CELULAR (10, 15 o más LOGOS) --- */
@media (max-width: 768px) {
    .seccion-marcas-validadoras {
        padding: 0px 15px;
    }

    .marcas-grid-static {
        /* 3 columnas exactas */
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px 15px;
    }

    .marca-item img {
        height: 35px; /* Ajuste de altura para que no sature */
    }

    /* ELIMINAMOS EL SPAN 3 */
    /* Ahora, como 15 es múltiplo de 3, se acomodarán 
       automáticamente en 5 filas de 3 logos cada una. */
    .marca-item:last-child {
        grid-column: auto; 
        display: block;
    }
    
    .marca-item:last-child img {
        width: 100%; 
    }
}
/* --- 3. SECCIÓN CONTACTO POTENTE (Reemplaza a .contactanos-modern) --- */

.seccion-contacto-noindex {
    width: 80%;
    margin: 0 auto;
    height: auto;
}


.seccion-contacto-full {
    background: #fcfcfc; /* Un gris casi imperceptible para separar */
    padding: 80px 20px;
    border-top: 1px solid #eee;
    height: auto !important;
}

.contacto-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 60px;
    align-items: center;
}

.contacto-perfil {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.foto-contacto {
    width: 100%;
    max-width: 480px;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.contacto-texto h2 {
    font-size: 2.4rem;
    color: #121212;
    margin-bottom: 10px;
    line-height: 1.1;
    height: auto;
}

.contacto-canales {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.canal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: 0.3s ease;
}

.canal-item:hover {
    border-color: #f80c32;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.canal-info a {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: #333;
}

.icon-social {
    width: 45px;
    height: auto;
}

.texto-btn strong { display: block; font-size: 1rem; color: #f80c32; text-transform: uppercase; }
.texto-btn span { font-size: 1.3rem; font-weight: 700; color: #111; }
.texto-btn small { display: block; color: #999; margin-top: 4px; }

/* El QR: Estilo Profesional */
.canal-qr img {
    width: 85px;
    height: 85px;
    border: 1px solid #eee;

    background: #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .contacto-container {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .contacto-perfil { align-items: center; }
    .pc-only { display: none !important; } /* Escondemos QR en móviles */
    .canal-item { justify-content: center; }
    .texto-btn { text-align: left; }
    .contacto-texto h2 { font-size: 2rem; }
    .marcas-grid-mini { gap: 30px; }
}


/* RESET RADICAL PARA EL ID ESPECÍFICO */
#footer-ioon {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background-color: #121212 !important;
    color: #ffffff !important;
    padding: 60px 0 20px 0 !important;
    font-family: 'Kanit', sans-serif !important;
    border-top: 3px solid #f80c32 !important; /* Rojo iOON en el borde superior */
    box-sizing: border-box !important;
}

#footer-ioon .footer-container {
    max-width: 1200px;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 20px !important;
}

#footer-ioon .footer-column {
    display: flex !important;
    flex-direction: column !important;
}

.footer-horario {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    opacity: 0.8;
}

#footer-ioon .footer-column h5 {
    color: white;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    margin: 0 0 20px 0 !important;
    font-weight: 700 !important;
    height: auto;
}

#footer-ioon .footer-column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#footer-ioon .footer-column ul li {
    margin-bottom: 12px !important;
    height: auto;
}

#footer-ioon .footer-column a {
    color: #d1d1d1 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

#footer-ioon .footer-column a:hover {
    color: #ffffff !important;
    transform: translateX(5px);
}

/* --- ESTILO UNIFICADO DEL LOGO iOON (PC y Footer) --- */
.logo-ioon {
    font-family: 'ARDESTINE', sans-serif !important;
    font-style: oblique !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    display: block !important;
    margin-bottom: 15px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: 1px !important;
    height: auto;
}

/* Ajuste de la "i" para alineación vertical perfecta */
.logo-ioon .letra-i {
    font-size: 2.2em !important;
    vertical-align: baseline !important;
    display: inline-block !important;
}

.logo-ioon .letras-oon {
    font-size: 2.5em !important;
    display: inline-block !important;
}

/* Redes Sociales */
#footer-ioon .social-icons-footer {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

#footer-ioon .social-icons-footer a {
    background: #252525 !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    transition: 0.3s ease !important;
}

#footer-ioon .social-icons-footer a:hover {
    background: #f80c32 !important;
    border-color: #f80c32 !important;
    transform: translateY(-3px) !important; /* Efecto sutil hacia arriba */
}

#footer-ioon .footer-bottom {
    margin-top: 50px !important;
    padding: 20px !important;
    border-top: 1px solid #252525 !important;
    text-align: center !important;
}

#footer-ioon .footer-bottom p {
    color: #666 !important;
    font-size: 0.8rem !important;
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    #footer-ioon .footer-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    #footer-ioon .footer-column {
        align-items: center !important;
        margin-bottom: 40px !important;
    }

    #footer-ioon .social-icons-footer {
        justify-content: center !important;
    }

    /* Reducción proporcional del logo para que no desborde en móvil */
    .logo-ioon .letra-i {
        font-size: 1.6em !important;
    }
    
    .logo-ioon .letras-oon {
        font-size: 1.8em !important;
    }

    #footer-ioon .footer-column a:hover {
        transform: none !important;
    }
}

/* Estilos Botón WhatsApp Flotante (Tus medidas conservadas) */
.wsp-flotante {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 45px;
    right: 45px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: flotarSutil 3s ease-in-out infinite;
}

.wsp-flotante img {
    width: 45px; 
    height: auto;
}

.wsp-flotante:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    animation-play-state: paused;
}

/* El globo de diálogo - Adaptado a tus 70px */
.wsp-dialogo {
    position: absolute;
    height: auto;
    right: 85px; /* Un poco más de espacio por el tamaño del botón */
    background-color: white;
    color: #333;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* Flechita del globo */
.wsp-dialogo::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

/* Animación de flotado sutil */
@keyframes flotarSutil {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Optimización para móviles (Tus medidas conservadas) */
@media (max-width: 768px) {
    .wsp-flotante {
        width: 55px;
        height: 55px;
        bottom: 25px;
        right: 25px;
    }
    .wsp-flotante img { width: 35px; }
    
    /* En móviles ocultamos el texto para no tapar el contenido */
    .wsp-dialogo { display: none; }
}

.wsp-dialogo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Texto principal */
.wsp-main {
    font-weight: 600;
}

/* Horario */
.wsp-horario {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.75;
    margin-top: 2px;
}

#tienda-reco-dinamico {
    overflow-x: auto;
    display: flex;
    scroll-behavior: auto;
}

/* ===============================
   FIX SCROLL RECO (OBLIGATORIO)
   =============================== */


.tienda-reco-carousel {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: auto;
    width: 100%;
}

.tienda-reco-card {
    flex: 0 0 280px;
}

.puntos-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    position: relative;
    z-index: 20;
}

.punto {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.punto.active {
    width: 22px;
    height: 8px;
    background: #555; /* gris oscuro */
    border-radius: 10px;
}

.bloque-ats {   width: 80%;
  margin: 40px auto 0; }
.frase-clave { font-weight: bold; margin: 15px 0; }
.faq-item { margin-bottom: 15px; }

.bloque-ats h2 {   padding:25px 0px; }

.tabla-comparacion {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.tabla-comparacion th,
.tabla-comparacion td {
  border: 1px solid #ddd;
  padding: 10px;
}

.tabla-comparacion th {
  background: #f5f5f5;
}

.bloque-pdu {
  width: 80%;
  margin: 40px auto 0;
}

.frase-clave {
  font-weight: bold;
  margin: 15px 0;
}

/* GRID BENEFICIOS */
.pdu-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.beneficio {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 10px;
  background: #fafafa;
}

.beneficio h4 {
  margin-bottom: 8px;
  font-size: 15px;
}

/* TABLA */
.tabla-comparacion {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.tabla-comparacion th,
.tabla-comparacion td {
  border: 1px solid #ddd;
  padding: 10px;
}

.tabla-comparacion th {
  background: #f5f5f5;
}

#breadcrumbProducto {
  position: relative;
  top: 40px;
  left: 35px;
  font-size: 17px;
  color: #666;
}

@media (max-width: 768px) {
    #breadcrumbProducto {
  position: relative;
  top: 5px;
  left: 5px;
  font-size: 11px;
  color: #666;
}
}

#breadcrumbProducto a {
  color: #666;
  text-decoration: none;
}

#breadcrumbProducto a:hover {
  text-decoration: underline;
}

#breadcrumbProducto span {
  color: #000;
  font-weight: 500;
}

.share {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.share a {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 14px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}

.share a:hover {
  opacity: 0.8;
}

.copy-link {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 14px;
  background: #444;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}

.copy-link:hover {
  background: #222;
}