@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400,600&display=swap');

/* Variables CSS */
:root {
    --primary-color: #35CB67;
    --secondary-color: #181A1D;
    --text-color: white;
    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-tertiary: 'Open Sans', sans-serif;
}

/* Estilos Globales */
body {
    font-family: var(--font-secondary);
}

/* Hero Section */
.hero {
    background-image: url(../imagenes/imagen1.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--text-color);
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero h1 {
    font-size: 3rem;
    line-height: 1.5;
    font-family: var(--font-primary);
    display: inline-block;
    padding: 10px 20px;
    margin: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hero h1 span {
    background: var(--secondary-color);
    color: var(--text-color);
    padding: 5px 30px 0;
}

/* Hero Section */
.hero2 {
    background-image: url(../imagenes/intro_ecofila.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--text-color);
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero2 h1 {
    font-size: 3rem;
    line-height: 1.5;
    font-family: var(--font-primary);
    display: inline-block;
    padding: 10px 20px;
    margin: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hero2 h1 span {
    background: var(--secondary-color);
    color: var(--text-color);
    padding: 5px 30px 0;
}


/* Servicios Section */
.services .card img {
    height: 200px;
    object-fit: cover;
}

.services p {
    margin-top: 30px;
}

/* Navbar */
.navbar-nav .nav-item {
    margin: 0 60px;
}

.navbar-nav .nav-link {
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 700;
}

/* Custom Paragraphs */
.custom-p {
    font-family: var(--font-tertiary);
    font-size: 1.5rem;
}

.custom-p2 {
    font-family: var(--font-tertiary);
    font-size: 1.3rem;
}

/* Section Styles */
.filamento-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-color);
    color: var(--text-color);
    height: auto;
}

.filamento-home .text-container {
    flex: 1;
    padding: 2rem 2rem 2rem 12rem; /* Aumenta el margen izquierdo en escritorio */
    text-align: left;
    font-family: var(--font-primary);
    font-size: 2rem;
}

.filamento-home .text-container h1 {
    font-family: var(--font-primary);
    font-size: 4.5rem;
    padding-bottom: 2%;
}

.filamento-home .text-container h2 {
    font-family: 'Inter', sans-serif; /* Aplica la fuente Inter al párrafo */
    font-size: 2.5rem;
    padding-bottom: 1%;
}

.filamento-home .text-container p {
    font-family: 'Inter', sans-serif; /* Aplica la fuente Inter al párrafo */
}

.filamento-home .image-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
}

/* Media Queries */
@media (max-width: 913px) {
    .filamento-home {
        flex-direction: column;
        padding: 0;
    }

    .filamento-home .text-container {
        padding: 10px 60px 10px 40px; /* Márgenes izquierdo y derecho de 40px para el texto */
        text-align: left;
        width: 100%;
    }

    .filamento-home .text-container h1 {
        font-size: 3rem; /* Reduce el tamaño del h1 */
    }

    .filamento-home .text-container h2 {
        font-size: 1.8rem; /* Reduce el tamaño del h2 */
    }

    .filamento-home .text-container p {
        font-size: 1.2rem; /* Reduce el tamaño del párrafo */
    }

    .filamento-home .image-container {
        width: 100%;
        height: 50vh;
        padding: 0;
    }

    .filamento-home .image-container img {
        width: 100%;
        height: auto;
    }

    .filamento-home .section img {
        height: 100%;
        width: auto;
    }

    .filamento-home .text-container p {
        display: block;
    }
}


.cards{

    background-color: #F1F1F1;
    padding-top: 30px;
    padding-bottom: 5%;

}

.cards .card-body{

    text-align: left;

}


@media (max-width: 767.98px) {
    .text-md-left {
        text-align: center;
    }
    
    .imgSec4 {
        margin-bottom: 15px;
    }

    .col-6 {
        max-width: 50%;
    }

    .map-section {
        padding: 0 15px;
    }

    .custom {
        text-align: center;
        font-size: 3rem;
    }

    .custom-p {
        text-align: center;
        font-size: 1.5rem;
    }
}

/* Footer */
.footer-section {
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 30px 0;
    text-align: center;
}

.footer-logo-img {
    width: 90px;
    height: auto;
    margin-bottom: 1px;
}

/* Map Section */
.map-section {
    background-color: var(--primary-color); /* Usa la variable CSS para el color verde */
    color: var(--text-color); /* Color del texto blanco */
    padding: 0; /* Elimina el padding vertical */
    text-align: center; /* Centra el texto */
    height: 100%; /* Ocupa todo el espacio vertical disponible */
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 0; /* Elimina el padding inferior */
    position: relative;
    height: 100%; /* Ocupa todo el espacio disponible */
    min-height: 70vh;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%; /* Asegura que el iframe ocupe todo el alto */
    width: 100%; /* Asegura que el iframe ocupe todo el ancho */
    position: absolute;
    border: 0; /* Elimina el borde del iframe */
}

.map-section h1, .map-section h2 {
    margin: 0; /* Elimina márgenes */
    padding: 0 0 1rem 0; /* Solo añade padding inferior si es necesario */
}


/* Expansion Section */
.expansion-section {
    padding: 100px 0;
    text-align: center; /* Centra el contenido */
}

.expansion-section .text-column {
    font-size: 1.2rem;
    font-family: inter;
}

/* Botón estilizado */
.expansion-button {
    background: linear-gradient(135deg, #08f47e, #12a610); /* Degradado */
    color: #fff; /* Color del texto */
    padding: 12px 24px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 25px; /* Bordes redondeados */
    font-size: 1rem; /* Tamaño de fuente */
    font-family: inter;
    font-weight: bold; /* Texto en negrita */
    cursor: pointer; /* Cambia el cursor al pasar */
    transition: background 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Sombra */
}

/* Efecto hover */
.expansion-button:hover {
    background: linear-gradient(135deg, green, #35CB67); /* Cambia el degradado en hover */
    transform: translateY(-3px); /* Efecto de elevación */
}

/* Efecto de clic */
.expansion-button:active {
    transform: translateY(1px); /* Se reduce un poco en clic */
}



/* Carousel */
.carousel-item {
    flex: 0 0 100%;  /* Cada tarjeta ocupa el 100% del ancho del contenedor */
}

.card {
    min-height: 250px;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

/* Miscellaneous */
.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.container h2 {
    margin-bottom: 3rem;
}

.btn-custom {
    margin-top: 20px;
}
/* Ajustes generales */
.ecofila-video h2 {
    font-size: 2rem;
    font-weight: bold;
}

.ecofila-video p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.ecofila-video .btn-primary {
    background-color: #0066cc;
    border-color: #0066cc;
}

.ecofila-video img {
    max-width: 100%;
    height: auto;
}

/* Estilos para pantallas medianas y grandes */
@media (min-width: 768px) {
    .ecofila-video .ecofila-video-texto {
        padding-right: 5rem; /* Ajuste a 5rem para pantallas medianas */
    }

    .ecofila-video .ecofila-video-texto h2 {
        font-size: 3rem;
        font-family: space grotesk;
    }

    .ecofila-video .ecofila-video-texto p {
        font-size: 1.3rem;
        font-family: inter;
    }
    .video-container iframe {
        margin-top: 20px;
    }
}

/* Estilos para pantallas pequeñas */
@media (max-width: 767px) {
    .ecofila-video .ecofila-video-texto {
        padding-right: 1rem; /* Reduce el padding en pantallas pequeñas */
    }

    .ecofila-video .ecofila-video-texto h2 {
        font-size: 2rem;
        font-family: space grotesk;
    }

    .ecofila-video .ecofila-video-texto p {
        font-size: 1rem;
        font-family: inter;
    }

    /* Centra el texto y ajusta el espaciado */
    .ecofila-video .ecofila-video-media {
        margin-top: 1.5rem;
    }

    /* Ajusta el tamaño del logo para pantallas pequeñas */
    .ecofila-video-media img {
        max-width: 100px;
    }

    /* Ajusta el video para adaptarse a pantallas pequeñas */
    .video-container iframe {
        width: 100%;
        height: 200px;
    }
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 20px;
}

.ecofila-3-cards {
    margin-top: 100px; /* Ajusta este valor según el espacio que necesites */
    margin-bottom: 20px; /* Margen inferior para separar las cards entre sí en todas las pantallas */
    background-color: #F1F1F1; /* Color de fondo clarito */
    padding: 20px; /* Añadir padding para que no quede pegado a los bordes */
    border-radius: 10px; /* Bordes redondeados para un aspecto más suave */
}


.ecofila-3-cards .card-img-top {
    width: 100%;
    height: 250px; /* Ajusta este valor según el tamaño que quieras */
    object-fit: cover; /* Recorta la imagen si es necesario para ajustarse */
}

.ecofila-3-cards .card-logo {
    width: 35%; /* El logo ocupará el 40% del ancho de la card */
    height: auto; /* Mantendrá sus proporciones naturales */
    margin: 10px auto; /* Centra el logo horizontalmente */
    display: block; /* Asegura que se comporta como un bloque para permitir el centrado */
}

.ecofila-3-cards .card-body {
    padding-top: 20px; /* Añade espacio entre el logo y el contenido de la card */
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .ecofila-3-cards .col-md-4 {
        margin-bottom: 40px; /* Añadir margen inferior entre las cards */
    }

    .ecofila-3-cards .card {
        margin: 0 10px; /* Margen a los lados para pantallas pequeñas */
    }
}

  
.ecofila-instructions .icon {
    width: 40px;
    height: 40px;
  }
  
  .ecofila-instructions ul {
    padding-left: 0;
  }
  
  .ecofila-instructions li {
    font-size: 1.1rem;
    line-height: 1.6;
  }
  
  .ecofila-instructions img.img-fluid {
    max-width: 100%;
    height: auto;
  }
  /* Ocultar la columna de las instrucciones en pantallas pequeñas */
@media (max-width: 768px) {
    .ecofila-instructions .col-md-7 {
      display: none;
    }
  }
  
  .gamas-de-colores {
    text-align: center; /* Centrar el título */
    padding: 20px;
}

.gamas-de-colores h2 {
    font-size: 24px; /* Tamaño del título */
    margin-bottom: 20px; /* Espacio debajo del título */
}

.gamas-de-colores .image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas en pantallas grandes */
    gap: 10px; /* Espacio entre imágenes */
}

.gamas-de-colores .image-grid img {
    width: 100%;
    height: 200px; /* Fijar la altura para que todas las imágenes tengan el mismo tamaño */
    object-fit: cover; /* Ajustar imágenes para cubrir el contenedor */
    border-radius: 8px; /* Bordes redondeados */
}

@media (max-width: 768px) {
    .gamas-de-colores .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas pequeñas */
    }
}

/* Estilo para la imagen grande más pequeña */
.gamas-de-colores .imagen-grande {
    width: 50%; /* Cambia el ancho a 50% para hacerla más chica */
    height: auto;
    margin: 0 auto 20px; /* Centrar la imagen y dar margen inferior */
    display: block; /* Asegura que sea tratada como un bloque */
    margin: 80px auto 20px; /* Añadir margen superior para crear espacio entre la imagen grande y las otras imágenes */
}

/* Ocultar la imagen grande en pantallas pequeñas */
@media (max-width: 768px) {
    .gamas-de-colores .imagen-grande {
        display: none; /* La imagen desaparece en pantallas pequeñas */
    }
}