:root {
    --color-brand-primary: #06aed5; 
    --color-whatsapp: #25D366;
}

.btn-light {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #06aed5;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif; 
    margin-top: 70px;
}
  
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
}

.site-header__wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Alinea verticalmente */
    max-width: 1200px;
    justify-content: space-between;
    margin: 0 auto;
}

.main-nav ul {
    display: flex;
    height: 100%; 
    list-style: none; /* Elimina los puntos de las listas */
    padding-left: 0; /* Elimina el padding por defecto */
    }
    @media (max-width: 570px) {
      .main-nav ul {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: block;
        height: initial;
        background: whitesmoke;
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        z-index: -1;
        visibility: hidden;
        transition: 0.3s ease-out; }
        .main-nav ul.is-active {
          visibility: visible;
          -webkit-transform: translateY(0);
                  transform: translateY(0); } }
  
.main-nav__item a {
    display: block;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none;  /* Evita subrayados */
    border-bottom: 2px solid transparent; 
    }
    @media (min-width: 1250px) {
      .main-nav__item a {
        padding: 20px 24px; } }
    @media (max-width: 570px) {
      .main-nav__item a {
        text-align: initial;
        border-bottom: 0;
        border-left: 3px solid transparent; } }
    .main-nav__item a:hover {
      border-bottom-color: var(--color-brand-primary);
      color: var(--color-brand-primary); }
.main-nav__item.is-active a {
    color: var(--color-brand-primary);
    border-bottom-color: currentColor;
    font-weight: 700; }
@media (max-width: 570px) {
    .main-nav__item.is-active a {
      border-left-color: var(--color-brand-primary); } }
@media (max-width: 570px) {
    .main-nav__item:not(:last-child) {
      border-bottom: 1px solid #e1e0e0; } }

.logo {
    display: flex;
    align-items: center;
    margin-left: 15px;
    margin-right: 45px;
    margin-bottom: 0px;
    padding-top: 10px; /* Usa padding en lugar de margin */
}

.logo img {
    width: 100px; /* Ajusta este valor según el tamaño que desees */
    height: auto; /* Mantiene la proporción de la imagen */
    position: relative;
    top: -3px; /* Si es necesario, ajusta la posición de la imagen */
}

.pill {    
    display: inline-flex;   /* !!! Asegura que el botón sea del tamaño de su contenido !!! */
    color: #fff;
    background: var(--color-whatsapp); /* Color verde claro de WhatsApp */
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 20px;
    font-weight: 700;
    padding: 6px 12px;      /* Aumenta ligeramente el padding para mayor claridad */
    align-items: center;    /* Alinea verticalmente el icono y el texto */
    text-decoration: none;  /* Evita subrayados */
    margin-left: auto;      /* Asegura que esté alineado a la derecha */
    margin-right: 25px;     /* Añade espacio a la derecha */    
}

.pill i {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
    font-size: 16px; /* Tamaño del icono */
}

.hero {
    /* min-height: calc(200px + 9vmax); */
    background: 
        linear-gradient(
        rgba(4, 110, 129, 0.666),
        rgba(3, 61, 71, 0.651)
        ),
        url('images/hero.webp'), 
        #069AE1;                /* fondo secundario, si no hay imagen */
    background-size: cover;
    height: 900px;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-no-bg {
    /* min-height: calc(200px + 9vmax); */
    background: 
        linear-gradient(
            #000000
            #a5ccf2,
        );
    background-size: cover;
    /* height: 600px; */
    margin-top: 5%;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-no-bg img {
    /* Make the image fit the height of the section */
    max-height: 90%; /* Limita la altura de la imagen al 100% de su contenedor */
    width: auto; /* Mantiene la proporción de la imagen */
}

/* Estilos por defecto, que se aplican en pantallas verticales */
.hero-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centra los logos y el texto horizontalmente */
    /* margin-top: 6rem;
    margin-bottom: 6rem; */
    width: 100%;
}

.hero-text {
    max-width: 55%;
    text-align: center; /* Centrar el texto */
    color: white;
    margin-bottom: 2rem; /* Espacio entre el texto y los logos */
}

.hero-text-dark {
    max-width: 55%;
    margin: 1%;
    text-align: center; /* Centrar el texto */
    color: black;
    margin-bottom: 2rem; /* Espacio entre el texto y los logos */
}

.hero h1, .hero h2, .hero-no-bg h1, .hero-no-bg h2 {
    margin-right: 0; /* Elimina margen derecho ya que ahora está centrado */
}

.hero h1, .hero-no-bg h1{
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 3px;
}

.hero h2{
    font-size: 24px;
    font-weight: 400;
}

.hero-no-bg h2{
    font-size: 36px;
    font-weight: 550;
}

.hero p, .hero-no-bg p{
    text-align: justify;
}

.logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Espacio entre logos */
    flex-wrap: wrap;
}

.logos .logo-campagnola{
    width: 200px; /* Aumenta el tamaño del logo de La Campagnola */
    height: auto;
    align-self: center; /* Asegura que se centre verticalmente */
}

.logos img {
    height: auto;
}

.contact {
    width: 100%;
    background-color: #f5f5f5; /* Fondo claro */
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-wrapper {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

.contact-info {
    width: 100%;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 20px;
}

.contact-info h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 16px;
    margin: 10px 0;
}

.map {
    width: 100%;
    height: 300px; /* Altura del mapa en dispositivos móviles */
    margin-top: 20px;
}

.text-hero {
    background: linear-gradient(
        var(--color-brand-primary),
        white
        );
    padding: 3%;
    /* padding-top: 3%;
    margin-bottom: 3%; */
    height: auto;
}

/* Centra el título principal */
.title-centered {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2em;
    font-weight: bold;
}

/* Contenedor que organiza los text-section lado a lado */
.text-sections-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Define el estilo de cada sección de texto */
.text-section {
    flex: 1;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    /* background-color: #f9f9f9; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Asegura que el título esté encima del texto en cada sección */
.text-section h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
    font-weight: bold;
}


/* Estilo responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .hero-wrapper {
        flex-direction: column;
    }

    .hero-text {
        max-width: 100%;
        margin-left: 20px;
        margin-right: 20px;
    }

    .logos {
        gap: 15px;
    }

    .logos img {
        width: 100px; /* Ajuste de tamaño para pantallas más pequeñas */
    }

    .hero h1 {
        font-size: 32px;
        font-weight: 500;
        margin-bottom: 3px;
    }
    
    .hero h2 {
        font-size: 18px;
        font-weight: 300;
    }
    
}

/* Estilos para pantallas horizontales (orientación landscape) */
@media (orientation: landscape) and (min-width: 768px) {
    .hero-wrapper {
        flex-direction: row; /* Cambia a una disposición en fila */
        justify-content: space-between; /* Separa el texto de los logos */
        align-items: center;
        padding-left: 5%; /* Margen interno a la izquierda */
        padding-right: 5%; /* Margen interno a la derecha */
    }

    .hero-text {
        text-align: left; /* Alinea el texto a la izquierda */
        max-width: 55%; /* Asegura que ocupe el 55% de la pantalla */
        margin-bottom: 0; /* Elimina el margen inferior en landscape */
    }

    .logos {
        flex-direction: column; /* Coloca los logos en columna vertical */
        gap: 55px; /* Espacio entre los logos en columna */
        padding-right: 10%;
    }

    .logos .logo-campagnola {
        width: 230px;
    }

    .logos img {
        width: 160px; /* Tamaño de los logos */
    }

    .logo img {
        width: 120px;
    }
    
}

/* Responsive: asegura que las secciones se apilen en pantallas pequeñas */
@media (max-width: 768px) {
    .text-sections-container {
        flex-direction: column;
    }
}

/* Estilos para pantallas grandes (horizontal landscape) */
@media (min-width: 768px) {
    .contact-wrapper {
        flex-direction: row;
        justify-content: space-between;
    }

    .contact-info {
        width: 35%; /* Ocupa 1/3 del espacio */
        text-align: left;
        margin-bottom: 0;
    }

    .map {
        width: 66.66%; /* Ocupa 2/3 del espacio */
        height: 400px; /* Altura del mapa en pantallas grandes */
    }
}


/*  

TODO: Recorda que si eliminas estas 2 mediaquerys que estan debajo, se ve MUCHO mas lindo el hero principal
Hacelo de manera que se mantenga ESE estilo!

*/


/* Ajustes generales para pantallas móviles */
@media (max-width: 768px) {
    .hero-no-bg img {
        display: none; /* Oculta la imagen en dispositivos móviles */
    }

    .logo img {
        width: 80px; /* Ajusta el logo a un tamaño más pequeño */
    }

    .pill {
        margin: 10px 0; /* Mueve el botón de WhatsApp debajo del logo y menú */
    }

    /* Text-Hero: Asegurarse de que las secciones se apilen */
    .text-sections-container {
        flex-direction: column;
        gap: 15px;
    }

    .text-section {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Para mejorar la legibilidad en pantallas pequeñas */
    .text-section h3 {
        font-size: 1.2em;
    }

    .text-section p {
        font-size: 14px;
    }

    /* Hero sin fondo: Asegurar que el texto y la imagen se apilen bien */
    .hero-no-bg {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    .hero-no-bg img {
        max-width: 80%; /* Reduce el tamaño de la imagen */
        margin-top: 20px;
    }

    /* Misión y visión textos */
    .hero-text-dark {
        max-width: 90%;
        text-align: justify;
        padding: 10px;
    }

    /* Contact Section: Mover el mapa debajo de la información de contacto */
    .contact-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .contact-info {
        width: 100%;
        margin-bottom: 20px;
    }

    .map {
        width: 100%;
        height: 300px;
    }
}

/* Para pantallas aún más pequeñas, como smartphones en modo vertical */
@media (max-width: 576px) {

    /* Ajuste extra para el tamaño de las imágenes */
    .logos img {
        width: 60px; /* Reduce aún más el tamaño de los logos */
    }

    /* Ajuste de márgenes y paddings */
    .hero-text,
    .hero-text-dark {
        padding: 5%;
    }

    /* En la sección de contacto, ajustar tamaño del texto */
    .contact-info p {
        font-size: 14px;
    }
}