/* NORMALIZACION */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Mantiene el ancho y el alto a pesar de padding y border */
    font-family: 'Roboto', sans-serif;
    list-style: none; /* Elimina los puntos de las listas */
    text-decoration: none; /* Elimina subrayados de los enlaces */

}

header{

    position: fixed; /* Fija la posicion del header en la parte superior*/
    right: 20px;
    top: 0px;
    left: 5px;
    z-index: 100; /* Asegura que el header este por encima de otros elementos */
    width: 100%; /* Hace que el header ocupe todo el ancho de la pantalla*/
    display: flex; /* Utiliza flexbox para alinear los elementos dentro del header */

    padding: 10px 2%; /* Espaciado interno del header */
    background-color: white;
    border-bottom: black 1px solid; /* Linea inferior del header */
    flex-direction: row;
}

.header-img-logo {

    display: flex;
    flex-direction: row;
    width: 50%;
    padding-left: 20px;
}

.header-img-logo a{
    display: flex;
    align-items: center;
    height: 100%;
}

.header-img-logo img{
    max-width: 50px;
    max-height: 50px;
    height: auto;
    display: block;
    align-items: center;
}


.logo{
    
    font-size: 20px; /* Tamaño de fuente del logo */
    font-weight: bold; /* Negrita para el logo */
    color: black;
    height: 100%;
    padding-left: 20px;
    justify-content: center;
}

body{

    max-width: 1700px;
    background: white;
    margin-left: 20px;
    padding-bottom: 50px;
    margin: auto;
    
}


.navbar{
    
    display: flex; /* Utiliza flexbox para alinear los elementos de la barra de navegacion */
    position: fixed;
    right: 50px;
    top: 30px;
    gap: 10px; /* Espacio entre los elementos de la barra de navegacion */
    z-index: 100;

}

.navbar a{
    
    margin-left: 60px; 
    font-size: 15px;
    transition: all 0,5s ease; /* Transicion suave para efectos hover */
    color: black;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-decoration: none;

}

.navbar a:hover{
     border-bottom: 1px solid transparent; /* Subrayado al pasar el mouse */
}

#menu-icon{
   
    color: black;
    font-size: 20px;
    cursor: pointer; /* Cambia el cursor al pasar sobre el icono */
}

#menu-toggle{
    display: none; /* Oculta el checkbox del menu por defecto */
}

.menu-icon-action{
    display: none; /* Oculta el icono del menu por defecto */
}


.hero{
    
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
    position: relative;
    padding: 15px;
    margin-top: 10vh;
    left: 30px;
    justify-content: space-around;
}

.hero-article{

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding: 20px;
    margin-top: 20px;
}

.hero article h3 {

    font-size: 35px;
    color: black;
    padding: 20px 10px;
    margin: 0px 20px 0px  ;
}

.hero article p{
    
    max-width: 500px; /* Ancho maximo para mejorar la legibilidad */
    min-width: 300px;
    font-size: 15px;
    line-height: 1.6; /* Espaciado entre lineas para mejorar la legibilidad */
    color: black;
    padding: 50px 20px; /* Espaciado interno horizontal*/
    margin: 10px 10px 10px  ;
}

.hero-text p{
    max-width: 600px;
    width: 100%;
    font-size: 15px;
    line-height: 1.8;
    color: black;
    text-align: justify;     /* o left, según prefieras */
    hyphens: none;           /* desactiva guiones automáticos */
    word-break: keep-all;    /* evita cortar palabras */
    overflow-wrap: normal;   /* palabras largas no se rompen */
    padding: 20px 0;
    margin: 10px 0;
}

.hero-img{
  display: flex;
  flex-direction: column;
  align-items: center;
}


.hero-img img{

    max-width: 400px;
    height: auto;
    transition: all 2s ease; /* Transicion suave para efectos hover */
}

.hero-img img:hover{
    transform: scale(1.08);
    max-width: 450px; /* Aumenta el tamaño al pasar el mouse */
    opacity: 0.8; /* Cambia la opacidad al pasar el mouse */
}


.hero .hero-frase{
  margin-top: 15px;
  color: black;
  font-weight: 700;
  max-width: 400px;
  text-align: center;
}


.hero .hero-frase .line{
  display: block;
  margin: 2px 0;
}


.hero-frase-phone-context h4{
    display: none;
}

.hero-contact {
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
    position: relative;
    padding: 15px;
    margin-top: 2vh;
    left: 30px;
    justify-content: space-around;
}

.hero-contact-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 0 auto;
    padding: 20px;
    height: 400px;
}

.hero-contact-content .contact-left {
    display: flex;
    align-items: left;
   
}

.contact-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex: 1;
    gap: 16px;
}

.contact-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.hero-contact img {
    max-width: 120px; /* Mantiene el ancho máximo */
    max-height: 120px; /* Establece un alto máximo para evitar la desproporción */
    height: auto; /* Permite que la altura se ajuste automáticamente */
    width: auto; /* Permite que el ancho se ajuste automáticamente */
    transition: all 2s ease; /* Transición suave */
}

.hero-contact img:hover {
    max-width: 180px; /* Cambia el ancho máximo al pasar el mouse */
    max-height: 180px; /* Cambia la altura máxima al pasar el mouse */
    opacity: 0.8; /* Cambia la opacidad al pasar el mouse */
}

.hero-contact .contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-contact .contact-row img{
    max-width: 50px;
    height: auto;
}

.hero-contact .contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 1.5s ease, opacity .2s ease;
}

.hero-contact .contact-row:hover {
  transform: translateX(15px);
  opacity: .95;
} 

.hero-contact .contact-row i {
  font-size: 20px;
  color: inherit;
}

.hero-contact .contact-row span {
  margin: 0;
}

.hero-contact p{
    font-size: 15px;
    color: black;
    margin-left: 10px;
    transition: all 2s ease;
}

.hero-contact p:hover{
    font-size: 15px;
    color: gray;
    transform: translate(20px);
}

.hero-contact .hero-frase {
    position: absolute;
    right: 18%;
    color: black;
    font-weight: bold;
    font-size: 15px;
    width: 250px;
    text-align: center;
}

/* Reset general de enlaces */
a {
  color: inherit;
  text-decoration: none;
}
a:visited { color: inherit; }
a:hover { text-decoration: underline; }

/* Específico para el footer/contacto */
.hero-contact a {
  color: inherit;      /* hereda negro del contenedor */
  text-decoration: none;
}
.hero-contact a:hover {
  color: gray;
  text-decoration: underline;
}

/* Botón Quiero Contribuir */
.contact-right .contribuir-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.btn-contribuir {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-contribuir:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  text-decoration: none !important;
  color: white !important;
}

.btn-contribuir:active {
  transform: translateY(0);
}



@media (min-width: 993px) {
    .hero-contact-content {
        display: flex;
        flex-direction: row; /* Horizontal: izquierda y derecha */
        justify-content: space-between; /* Separa completamente los elementos */
        align-items: center;
        max-width: 1200px;
        margin: 0px;
        width: 100%;
        padding: 0 20px;
    }
    
    .contact-left {
        flex: 1; /* 50% izquierdo */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start; /* Alineado completamente a la izquierda */
        gap: 16px;
        margin-left: 0; /* Sin margen adicional */
    }
    
    .contact-right {
        flex: 1; /* 50% derecho */
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Alineado completamente a la derecha */
        justify-content: center;
        margin: 0;
    }
}




/* Media query para pantallas grandes - evita que el botón se vaya muy a la derecha */

@media (max-width: 992px) {

    body{
        margin-bottom: 100px;
    }

    .hero-article{
        justify-content: space-between; /* Distribuye espacio entre texto e imagen */
        align-items: center; /* Centra verticalmente */
        gap: 20px;
    }

    .hero-img{
        flex: 1; /* Ocupa proporcionalmente el espacio izquierdo */
        align-items: center; /* Centra imagen y frases horizontalmente */
        justify-content: center; /* Centra verticalmente dentro del contenedor */
    }

    .hero-text{
        flex: 1; /* Ocupa proporcionalmente el espacio derecho */
    }

    .hero-article .hero-img img{
        max-width: 100%; /* Se adapta al ancho del contenedor */
        width: 300px; /* Tamaño fijo para 992px */
    }

    .hero-img img:hover{
        transform: scale(1.15); /* Evita cambiar layout al hover */
        opacity: 0.8;
    }

    .navbar{
        gap: 0px;
    }
    
    .navbar a{
        margin-left: 20px;
    }

    /* Hero-contact: 50% info contacto - 50% botones */
    .hero-contact-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 20px;
    }

    .contact-left {
        flex: 1; /* 50% del espacio - Info de contacto */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .contact-right {
        flex: 1; /* 50% del espacio - Botones */
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Alineado a la derecha */
        justify-content: center;
        margin: 0;
    }

}
    



@media (max-width: 768px) {

    .navbar{
   position: absolute;
   top: -300%;
   width: 160px;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px 10px;
   transition: all 1s ease;
   opacity: .9;
}

.navbar a{
    display: block;
    margin: 15px 0;
}
    .menu-icon-action {
        display: block; /* Muestra el ícono hamburguesa */
        position: fixed;
        right: 60px;    
        top: 15px;
        z-index: 101;
        cursor: pointer;
    }

    #menu-icon{
        font-size: 50px;
    }

    #menu-toggle:checked + label.menu-icon-action + div .navbar {
        top: 100%;
        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }


    body{
        margin-left: 0;
        padding: 0 10px;
    }
    header {
        left: 0;
        right: 0; /* Ajusta header a todo el ancho */
        padding: 10px 15px;
    }

    .hero {
        left: 0; /* Elimina desplazamiento izquierdo */
        padding: 15px 10px;
    }

   

 .hero-article{
    flex-direction: column;
    align-items: center;
    text-align: center;

 }

 .hero-img{
    margin-top: 20px;
    order: 1;
 }

 .hero-text{
    order: 2;
 }

 .hero-frase{
    display: none;
 }
 

 .hero-frase-phone-context h4{
    display: block;
    order: 3;
    text-align: center;
    max-width: 300px;
    margin-top: 10px;
    font-weight: bold;
    color: black;
    width: 100%;
 }

 /* Hero-contact responsive */
 .hero-contact {
    left: 0;
    padding: 15px 10px;
    display: flex;
    flex-direction: column-reverse;

 }

 /* Hero-contact móvil: Botones arriba, contacto abajo */
 .hero-contact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 20px;
 }

 .contact-right {
    order: 1; /* Botones aparecen arriba */
    width: 100%;
    margin: 30px 10px;
    align-items: center;
 }

 .contact-left {
    order: 2; /* Info de contacto aparece abajo */
    width: 100%;
 }

 /* .hero-contact .hero-frase {
    display: none;
} */

}

/* ESTILOS PARA BOTÓN COMPARTIR */

/* Contenedor de botones */
.botones-accion {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Botón compartir verde - Mismo tamaño que btn-contribuir */
.btn-compartir {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white !important;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.btn-compartir:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

/* Contenedor del menú compartir */
.share-container {
    position: relative;
    display: inline-block;
}

/* Menú desplegable */
.share-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 10px 0;
    margin-top: 8px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid #e9ecef;
}

.share-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

.share-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.share-menu a:hover {
    background: #f8f9fa;
    color: #28a745;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .botones-accion {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-compartir, .btn-contribuir {
        width: 100%;
        text-align: center;
    }
    
    .share-menu {
        left: 0;
        right: 0;
        transform: none;
        margin: 8px 0;
    }
    
    .share-menu.show {
        transform: translateY(5px);
    }
}