/* Aplicar estilos base a todos los elementos RECONOCIMIENTOS */
/* NOTA: Estas reglas suelen ir en un archivo base, no específico de la sección */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: var(--font-family-primary); /* Asumo que esta variable está definida en otro lugar */
}

/* --- ESTILOS GENERALES Y LAYOUT BASE --- */

/* Estilo general para el main (Asegura que el contenido siga al header) */
main.home-content {
    display: flex;
    flex-direction: column; /* Asegura que los elementos dentro fluyan verticalmente */
    align-items: center; /* Centra el contenido (section) horizontalmente */
    min-height: 100vh;
    width: 100%;
    /* Ajuste: Quitar align-items: center para que el contenido no se centre verticalmente de forma forzada */
    padding-top: 120px; /* Espacio para dejar visible el encabezado */
}

/* Contenedor principal de la sección (Añade padding lateral para respirar) */
.reconocimientos {
    width: 100%;
    padding: 20px 5%; /* Padding horizontal para que el contenido no toque los bordes */
    max-width: 1400px; /* Define el ancho máximo de tu contenido central */
}

/* Contenedor de las dos columnas: texto e imágenes */
.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinea arriba para evitar que el texto suba si las imágenes son más cortas */
    gap: 40px; /* Espaciado entre los bloques */
    width: 100%;
    max-width: 100%; /* El contenedor lo gestiona el .reconocimientos */
    margin-top: 30px;
}

/* --- ESTILOS DE TEXTO --- */

.text-container {
    flex-basis: 55%; /* Le da más espacio al texto en el layout de escritorio */
    margin-right: 0; /* Lo gestionamos con el 'gap' del .container */
}

h2 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600; /* Añadido para mejor legibilidad */
    text-align: left; /* Centrar títulos generales de la sección */
    padding: 0 0%;
}

/* Asegurar que los títulos h2 que se encuentran justo antes del .container se vean bien */
.reconocimientos h2:nth-of-type(3) {
    margin-bottom: 20px;
}

.content-box {
    margin-bottom: 30px; /* Espacio entre cada reconocimiento */
}

.text-container h3 {
    text-align: left;
    position: relative;
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    color: #303030;
    padding-left: 25px; /* Más espacio para el cuadradito y margen */
}

/* Cuadraditos al lado izquierdo del párrafo (OPTIMIZADO) */
.text-container h3::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 50%; /* Centrado vertical mejorado */
    transform: translateY(-50%);
    color: #545452;
    font-size: 14px;
}

.text-container p {
    margin-top: 3px; /* Espacio mínimo debajo del título */
    text-align: left;
    padding-left: 25px; /* Alinear con el texto del h3 */
    font-size: 18px;
    color: #545452; /* Color más sutil para el texto secundario */
}

/* --- ESTILOS DE IMÁGENES --- */

.image-container {
    flex-basis: 45%; /* Le da menos espacio a las imágenes */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    justify-items: center;
    align-items: center;
}

/* Regla genérica para las imágenes para evitar repetición */
.image-container img {
    width: 100%; /* Ocupa el 100% de su celda de grid */
    height: auto; /* Altura automática para mantener la proporción */
    max-width: 250px; /* Límite para que no crezcan demasiado */
    object-fit: contain;
    padding: 10px; /* Añade un padding si lo necesitas para el diseño */
}

/* Ajustes específicos de tamaño si es absolutamente necesario */
.img-2025 {
    max-width: 200px;
}
.img-paris {
    object-fit: cover; /* Mantener esta propiedad si es intencional */
}

/* ======= Botón flotante ======= */
.floating-button{
  position:fixed;bottom:20px;right:20px;z-index:1000;background:#bd6cb6;color:#e5e3e3;border-radius:50%;
  width:60px;height:60px;display:flex;justify-content:center;align-items:center;font-size:20px;
  box-shadow:0 4px 6px rgba(0,0,0,.2);cursor:pointer;transition:background-color .3s ease;
}
.floating-button:hover{background:#b2b2b2}

/* --- DISEÑO RESPONSIVO --- */

/* Pantallas grandes (1366px a 1919px) - AJUSTES DE ESCALA */
@media (min-width: 1366px) and (max-width: 1919px) {
    main.home-content {
        padding-top: 100px;
    }

    h2 {
        font-size: 20px;
    }

    .container {
        gap: 30px;
    }

    .text-container h3 {
        font-size: 18px;
    }

    .text-container h3::before {
        font-size: 13px;
    }

    .text-container p {
        font-size: 17px;
    }
}

/* Pantallas medianas (768px a 1365px) - AJUSTES DE ESCALA */
@media screen and (max-width: 1365px) and (min-width: 768px) {
    main.home-content {
        padding-top: 90px;
    }
    
    .reconocimientos {
        padding: 20px 3%;
    }

    h2 {
        font-size: 19px;
    }

    .container {
        gap: 20px;
    }
    
    .text-container h3 {
        font-size: 17px;
    }

    .text-container h3::before {
        font-size: 12.5px;
    }

    .text-container p {
        font-size: 16px;
    }
    
    .image-container img {
        max-width: 180px;
    }

    .img-2025 {
        max-width: 150px;
    }
}

/* Pantallas pequeñas (menor a 768px, típicamente celulares) - CAMBIO DE LAYOUT */
@media screen and (max-width: 767px) {
    /* El main ocupa toda la altura pero deja más espacio arriba si hay encabezado */
    main.home-content {
        padding-top: 100px;
        min-height: auto;
    }

    .reconocimientos {
        padding: 20px 5%;
    }
    
    h2 {
        font-size: 18px;
    }

    /* Contenedor en columna */
    .container {
        flex-direction: column; /* Coloca el texto encima de las imágenes */
        align-items: center;
        gap: 40px;
        margin-top: 30px;
    }

    /* Texto ocupa todo el ancho y sin margen lateral */
    .text-container {
        flex-basis: auto;
        max-width: 100%;
    }

    /* Elimina el padding de alineación ya que el cuadradito será ocultado */
    .text-container h3,
    .text-container p {
        text-align: center; /* Centrar el texto en móvil para mejor lectura */
        padding-left: 0;
    }

    .text-container h3::before {
        display: none; /* Quita el cuadradito en móvil */
    }

    /* Cuadrícula de imágenes: 2 por fila, pero centradas */
    .image-container {
        grid-template-columns: repeat(2, 1fr); /* Mantiene 2 columnas en móvil para ahorrar espacio */
        gap: 15px;
        width: 100%; /* Asegura que la cuadrícula use el espacio disponible */
    }

    /* Ajustar tamaño de las imágenes en cuadrícula (Serán más pequeñas para caber) */
    .image-container img {
        width: 100%;
        max-width: 150px; /* Límite para el tamaño en móvil */
    }
}