/* ==========================================================================
   recursos.css
   Estilos propios de la página "Recursos y herramientas"
   Pantalla de referencia XD: 11
   Depende de: flexboxgrid.min.css, style-modern.css, barra.css
   ========================================================================== */

.recursos-page {
    width: 100%;
    margin: 0;
    padding: 40px clamp(24px, 4vw, 64px) 80px clamp(120px, 9vw, 160px);
    box-sizing: border-box;
    color: #FFFFFF;
}

/* Todo el contenido (título, texto, las 2 grillas) vive dentro de esta misma
   columna centrada de 1121px (ancho real del grid en el XD). Así, en
   pantallas anchas, el espacio sobrante se reparte en ambos lados en vez de
   quedar todo pegado a la derecha - responsive real sin deformar las
   proporciones del diseño. */
.recursos-content {
    max-width: 1121px;
    margin-left: auto;
    margin-right: auto;
}

.recursos-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.recursos-page-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 35px;
    color: #58BA5C;
    margin: 0 0 16px 0;
}

.recursos-page-logo {
    height: 60px;
    width: auto;
}

.recursos-page-description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
    /* Medido en el XD: el bloque de texto real mide 600px de ancho, no 1400
       (ese valor era heredado de otras páginas y aquí no corresponde). */
    max-width: 600px;
    margin-bottom: 40px;
}

.recursos-section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0 0 24px 0;
}

/* Separador entre "Proyectos afines" y "Herramientas Digitales" - mismo
   patrón que .proyectos-divider en proyectos.css (falta en el XD que
   recibí antes: se confirmó al comparar contra la captura del server). */
.recursos-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 32px;
}

/* Medidas tomadas directo del XD (pantalla 11): columnas de 239px, gap 55px,
   ancho total del grid 1121px - NO usar el max-width:1400 genérico de otras
   páginas, aquí sobredimensiona las tarjetas. */
.recursos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 55px;
    margin-bottom: 48px;
}

@media (max-width: 900px) {
    .recursos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .recursos-grid {
        grid-template-columns: 1fr;
    }
}

.recurso-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    text-decoration: none;
    color: inherit;
}

/* Sin padding: en el XD las tarjetas de "Herramientas Digitales" van
   borde a borde (la imagen llena la tarjeta completa, sin margen blanco
   interno). El padding de 12px que había antes generaba el recuadro
   blanco visible alrededor de cada ícono - era el bug reportado. */
.recurso-card-logo-wrapper {
    width: 100%;
    aspect-ratio: 239 / 132;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* "Proyectos afines" en el XD no lleva caja blanca: los logos (BanRep, UNAL)
   son blancos sobre transparente y deben verse directo sobre el fondo azul. */
#grid-proyectos-afines .recurso-card-logo-wrapper {
    background: transparent;
}

/* Por defecto la imagen llena la tarjeta completa borde a borde (Map Warper,
   Allmaps, etc. en Herramientas Digitales; David Rumsey y el sextante en
   Proyectos afines). */
.recurso-card-logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logos "icono" de Proyectos afines (BanRep, UNAL, IGAC, OldMaps, RCHD):
   en el XD son pequeños y centrados, NO llenan la tarjeta completa (a
   diferencia de David Rumsey y Razón Cartográfica, que sí son foto/ícono
   a tarjeta completa). Medidas reales en XD: BanRep 83x83, UNAL 168x71,
   IGAC 177x98, RCHD 143x109. */
.recurso-card-logo-wrapper img.logo-icon {
    width: auto;
    height: auto;
    max-height: 110px;
    max-width: 177px;
    object-fit: contain;
}

.recurso-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    text-align: left;
    color: #FFFFFF;
}

/* En "Herramientas Digitales" el título va en negrita y lleva descripción debajo */
#grid-herramientas-digitales .recurso-card-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.recurso-card-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    text-align: left;
    color: #FFFFFF;
}


/* ==========================================================================
   Responsive — 2026-09-02
   Esta página se había quedado sin la pasada de móvil que ya tenían Atlas,
   Proyectos y Créditos: conservaba el padding izquierdo de escritorio
   (120px), que en una pantalla de 390px se come un tercio del ancho y deja
   apenas 212px útiles. Se alinea con el mismo patrón de las otras páginas.
   ========================================================================== */

@media (max-width: 768px) {

    .recursos-page {
        padding-left: 76px;
        padding-right: 16px;
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .recursos-page-title {
        font-size: 26px;
    }

    .recursos-section-title {
        font-size: 20px;
    }

    .recursos-page-description {
        font-size: 15px;
        margin-bottom: 28px;
    }

    /* El gap de 55px del diseño de escritorio deja las tarjetas demasiado
       separadas y estrechas en móvil. */
    .recursos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 32px;
    }

    /* Los títulos largos ("Red Colombiana de Humanidades Digitales") no
       tienen dónde cortar en una columna angosta. */
    .recurso-card-title,
    .recurso-card-desc {
        overflow-wrap: anywhere;
    }

    /* área de toque cómoda (WCAG 2.5.8) sin cambiar la tipografía */
    .recurso-card {
        min-height: 44px;
    }
}

@media (max-width: 480px) {

    .recursos-page {
        padding-left: 68px;
        padding-right: 12px;
    }

    .recurso-card-logo-wrapper img.logo-icon {
        max-height: 78px;
        max-width: 100%;
    }
}

/* ==========================================================================
   Ajustes matriz BNC — hoja «AJUSTES finales» (2026-09-10)
   ========================================================================== */

/* Fila 16 — El título de la página toma el verde de la paleta del sitio. */
.recursos-page-title {
    color: #58BA5C;
}

/* Fila 13 — Títulos y encabezados alineados a la izquierda. */
.recursos-page-title,
.recursos-section-title {
    text-align: left;
}

/* Fila 14 — Entradilla a la izquierda; el ancho de 600px ya estaba medido
   contra el XD más arriba en este mismo archivo. */
.recursos-page-description {
    text-align: left;
}

/* ==========================================================================
   Verificación 1:1 contra Adobe XD — pantalla «Vínculos y herramientas»
   (screen 00cbee76-3aa2-450f-a9f5-9bf535830064), 2026-09-10
   Valores tomados del panel Design Specs, no estimados.
   --------------------------------------------------------------------------
   Estilos de carácter declarados en esa pantalla:
     Montserrat Bold      35px  #58BA5C  interlineado 43  -> título de página
     Montserrat Medium    25px  #FFFFFF  interlineado 30  -> títulos de sección
     Montserrat Regular   16px  #FFFFFF  interlineado 19  -> entradilla
     Montserrat Bold      15px  #FFFFFF  interlineado 19  -> nombre de tarjeta
     Montserrat Regular   15px  #FFFFFF  interlineado 19  -> texto de tarjeta
   Retícula: 4 columnas de 239px con separación horizontal de 16px
   (ancho total del bloque de contenido = 1004px, no 1121px).
   ========================================================================== */

.recursos-content {
    max-width: 1004px;
}

.recursos-page-title {
    line-height: 43px;
}

/* La separación de 55px que había era la VERTICAL entre filas; la horizontal
   en el XD es de 16px. Se separan los dos ejes. */
.recursos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 55px 16px;
}

#grid-herramientas-digitales {
    row-gap: 48px;
}

/* En el XD las cajas de imagen no tienen esquinas redondeadas y el nombre
   arranca 14px por debajo de la imagen. */
.recurso-card-logo-wrapper {
    border-radius: 0;
    margin-bottom: 14px;
}

/* Nombre de tarjeta en Herramientas Digitales: Bold 15px / 19px. */
#grid-herramientas-digitales .recurso-card-title {
    font-weight: 700;
    line-height: 19px;
    margin-bottom: 6px;
}

/* Separación real entre la última fila de tarjetas, la línea divisoria y el
   siguiente encabezado de sección. */
.recursos-grid {
    margin-bottom: 24px;
}

.recursos-divider {
    margin: 0 0 56px;
}

@media (max-width: 900px) {
    .recursos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .recursos-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Se reponen los ajustes de móvil: las reglas base de arriba son posteriores
   al bloque @media de 768px y lo estaban pisando. */
@media (max-width: 768px) {

    .recursos-grid,
    #grid-herramientas-digitales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        row-gap: 24px;
        margin-bottom: 24px;
    }

    .recursos-divider {
        margin: 0 0 32px;
    }
}

@media (max-width: 480px) {

    .recursos-grid,
    #grid-herramientas-digitales {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Corrección 2026-09-10 (2.ª pasada): la retícula quedaba anclada a la
   izquierda y no ocupaba la página. En el XD llega casi al borde derecho del
   lienzo, así que se deja crecer con el ancho disponible en lugar de fijarla
   en los 1004px del lienzo de 1280. */
.recursos-content {
    max-width: 1400px;
}

/* Logos de «Proyectos afines»: mismo criterio que en Créditos — todos dentro
   de una caja del mismo alto y acotados también en ancho, para que ninguno
   se vea desproporcionado frente a los demás. */
.recurso-card-logo-wrapper img.logo-icon {
    max-height: 96px;
    max-width: 175px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    /* El interlineado de 43px del XD es para el título a 35px; en móvil el
       título baja a 26px y ese valor lo dejaba muy separado. */
    .recursos-page-title {
        line-height: 32px;
    }

    .recursos-grid,
    #grid-herramientas-digitales {
        gap: 24px 16px;
    }
}

@media (max-width: 900px) and (min-width: 769px) {
    .recursos-grid,
    #grid-herramientas-digitales {
        gap: 32px 16px;
    }
}