@import 'variables.css';

/*margin: [vertical] [horizontal];*/
/*margin: top right bottom left;*/

.main-title {
    text-align: center;
    margin-top: clamp(15px, 3vw, 40px);
    color: var(--black-main);
    font-weight: bold;
}

.main-title h1 {
    font-size: clamp(25px, 4vw, 36px);
    text-transform: uppercase;
    margin: 0px clamp(33px, 4vw, 50px);
}

/*Link a los articulos*/
.link-articulos {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 2vw, 16px);

    padding: clamp(5px, 1vw, 10px);

    margin-top: clamp(10px, 2vw, 30px);
    margin-left: clamp(15px, 2vw, 25px);

    border: 1px solid var(--gray-icon-text);
    border-radius: 5px;
}

.link-articulos img {
    width: clamp(15px, 4vw, 24px);
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}


.link-articulos p {
    font-size: clamp(8px, 2vw, 12px);
    text-transform: uppercase;
    color: var(--gray-icon-text);
    margin: 0;
}





/* Imágenes y Descripciones */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto));
    gap: clamp(15px, 2vw, 40px);
    padding-left: clamp(25px, 4vw, 60px);
    padding-right: clamp(25px, 4vw, 60px);
    margin-top: clamp(66px, 4vw, 100px);
    margin-bottom: clamp(66px, 4vw, 100px);
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    justify-items: center;
}

.image-item {
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
    padding: clamp(7px, 1vw, 15px);
    background-color: var(--gray-background);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
    margin: 0;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
}

.image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: auto;
    max-height: 150px;
}

.image-title {
    margin: clamp(6px, 1vw, 10px) 0;
    color: var(--gray-icon-title);
    font-size: clamp(14px, 4vw, 22px);
    font-weight: bold;
}

.nota {
    margin-top: auto;
    margin-bottom: 0;
    color: var(--white-header);
    padding: 10px;
    font-size: clamp(42px, 12vw, 66px);
    font-weight: bold;
    background-color: var(--green-sobre);
    border-radius: 8px;
}

.image-description {
    margin-top: clamp(6px, 1vw, 10px);
    margin-bottom: clamp(26px, 4vw, 40px);
    color: var(--gray-icon-text);
    font-size: clamp(13px, 3vw, 19px);
    line-height: 1.4;
    width: 100%;
}

/* Icon */
.icon {
    position: absolute;
    bottom: clamp(6px, 3vw, 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 12%;
    height: auto;
}

/* About Section */
#about-section {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;        
    justify-content: flex-start;  
    gap: 80px;
    padding: 20px 40px;   /* deja margen lateral a toda la sección */
    background-color: var(--white-header);
    align-items: flex-start;  
}

/* Team */
.team {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 80%;
    gap: 50px;
}

/* Bloque principal */
/* Bloque principal */
.block-text-noimage {
    flex: 0 0 400px;      
    min-width: 300px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; 
    text-align: left;
    gap: 5px;
    margin-left: 10px;   /* pequeño espacio desde el borde */
}




/* Bloques imagen + texto */
.image-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 1 250px;
}

/* Imagen dentro del bloque */
.block-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block-image img {
    width: 60px;
    object-fit: cover;
}

/* Texto dentro del bloque */
.block-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
    gap: 2px;
    flex: unset;
}

/* Titulos y descripciones */
.block-title {
    font-size: clamp(14px, 3vw, 20px);
    font-weight: bold;
    color: var(--gray-icon-title);
    margin: 20px 0px;
}

.block-description-main {
    font-size: clamp(12px, 2.5vw, 16px);
    color: var(--gray-icon-text);
    line-height: 1.4;
    text-align: left;
    margin-left: auto;   /* centra dentro del bloque */
    margin-right: auto;  /* centra dentro del bloque */
    max-width: 600px;    /* evita que quede demasiado a la izquierda */
}

.block-contact {
    font-size: clamp(12px, 2.5vw, 16px);
    color: var(--gray-background);
    line-height: 1.4;
    text-align: center;
    margin-left: auto;   /* centra dentro del bloque */
    margin-right: auto;  /* centra dentro del bloque */
    max-width: 900px;    /* evita que quede demasiado a la izquierda */
}

.mail-link {
    color: var(--gray-icon-text);       /* Cambia el color del texto */
    text-decoration: none; /* Quita el subrayado */
    font-weight: bold;    /* Opcional, para que destaque */
}

/* Opcional: efecto al pasar el ratón */
.mail-link:hover {
    color:var(--red-main);          /* Cambia color al hover */
    text-decoration: underline;
}

.block-description {
    font-size: clamp(12px, 2.5vw, 16px);
    color: var(--gray-icon-text);
    line-height: 1.4;
    text-align: center;
    margin: 0;
}

/* Search */
.search_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
    margin: 30px auto 0;
}

#searchBox, #sortOptions {
    padding: 10px;
    text-transform: uppercase;
    border-radius: 5px;
    border: 1px solid var(--black-main);
    color: var(--black-main);
    font-size: clamp(7px, 2vw, 11px);
    font-weight: bold;
}

#searchButton,#loadMoreButton {
    padding: 10px;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--black-main);
    font-size: clamp(7px, 2vw, 11px);
    font-weight: bold;
}

#searchButton:hover {
    background-color: var(--white-header);
}

@media (max-width: 768px) {
    /* Navbar: imágenes más grandes */
    .logo img {
        width: 50px;
        height: auto;
    }

    /* About Section centrado */
    #about-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;        /* ↓ Menos espacio entre texto y team */
        padding: 15px 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .block-text-noimage {
        max-width: 95%;      /* centrado y más ancho */
        margin: 0 auto;      /* centrado */
        padding: 0 10px;
        text-align: center;
        margin-bottom: 10px; /* ↓ Mucho menos espacio */
    }

    .block-title {
        font-size: clamp(18px, 5vw, 22px);
        margin: 5px 0 10px 0;   /* centrado, más compacto */
        text-align: center;     /* ✅ fuerza centrado del título */
    }

    .block-description-main {
        font-size: clamp(14px, 3.5vw, 17px);
        text-align: center;
        margin: 0 auto;
        padding: 0 5px;
        line-height: 1.45;
        max-width: 95%;
    }

    .block-contact {
        font-size: clamp(14px, 3.5vw, 17px);
        text-align: center;
        margin: 0 auto;
        padding: 0 5px;
        line-height: 1.45;
        max-width: 95%;
    }


    .block-description {
        font-size: clamp(14px, 3.5vw, 16px);
        text-align: center;
        margin: 0 auto;
        padding: 0 5px;
    }

    .team {
        flex-direction: column;
        align-items: center;
        gap: 15px;   /* ligeramente menor para armonizar */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .image-text-block {
        max-width: 90%;
        padding: 0;
        margin: 0 auto;
        gap: 10px;
    }

    .block-image img {
        width: 80px;
        height: auto;
    }

    .block-text {
        text-align: center;
    }
}

@media (max-width: 768px) {

    /* Forzar centrado de Quienes somos */
    .block-text-noimage {
        max-width: 95% !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        text-align: center !important;
        margin-bottom: 10px !important; /* menos espacio debajo */
    }

    .block-title {
        text-align: center !important;
        margin: 5px 0 10px 0 !important;
    }

    .block-description-main {
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 5px !important;
        max-width: 95% !important;
    }

    .block-contact {
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 5px !important;
        max-width: 95% !important;
    }

    /* Reducir distancia entre el bloque noimage y el team */
    #about-section {
        gap: 10px !important;  /* antes 20px o 80px en PC */
        padding: 10px 10px !important;
    }

    .team {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 15px !important;
    }
}

/* Centrar solo el título "¿Quiénes somos?" en móvil */
@media (max-width: 768px) {
    .block-text-noimage .block-title {
        text-align: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
#loader,#articulo-loader {
    width: 40px;          /* tamaño del círculo */
    height: 40px;
    margin: 20px auto;
}

#loader-circle,#articulo-loader-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;      /* recorta el GIF en forma circular */
}

#loader-circle img, #articulo-loader-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* llena todo el círculo */
    display: block;
     transform: scale(1.2);   /* <--- Aumenta la imagen un 20% */
}

@media (max-width: 768px) {
   #loader {
    width: 30px;          /* tamaño del círculo */
    height: 30px;
    margin: 20px auto;
}
}