@media (max-width: 720px) {
    /* Reset Básico y Tipografía Base */
    /* Resetea márgenes y paddings para un lienzo limpio en todos los elementos principales. */
    body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        font-size: 16px; /* Define la base para REMs, clave para una tipografía escalable. */
    }

    /* Estructura General de Secciones */
    /* Asegura que cada sección ocupe el ancho completo y sea al menos tan alta como la vista. */
    section {
        width: 100%;
        min-height: 100vh; /* Permite que la sección crezca si su contenido es grande. */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Encabezado */
    /* Centra el contenido del header. */
    header {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Elementos Visibles Solo en Desktop */
    .square-large {
        display: none; /* Oculta elementos que no son relevantes para móviles. */
    }

    /* Sección de Inicio (HOME) */
    /* Centra el contenido principal de la landing page. */
    .home {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .stripContent_Showing {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Navegación */
    .nav-bar {
        display: none; /* La navegación principal se esconde, esperando un menú tipo hamburguesa. */
    }

    /* Logo y Logotipo */
    /* Ajusta el logo para que se vea bien en pantallas pequeñas sin distorsionarse. */
    .logo {
        width: 100%;
        height: auto;
        max-width: 150px; /* Limita el tamaño del logo para que no sea excesivo. */
    }
    .logotype {
        position: absolute;
        z-index: -2; /* Mantiene el logotipo en el fondo. */
        width: 400px; /* Asegúrate que este tamaño no cause desbordamiento en tu diseño específico. */
        height: auto;
        opacity: 0.3;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* Sección "Acerca de" (ABOUT) */
    /* Organiza la información en una columna para una lectura fácil. */
    .about-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    .par-Info {
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 0.95rem;
        line-height: 1.5; /* Mejora la legibilidad del texto en bloques. */
        height: auto;
        margin-bottom: 15px; /* Espacio antes de la sección de "cualidades". */
    }
    .pars__informat {
        width: 100%;
        font-size: 0.95rem;
        margin-bottom: 10px; /* Espacio entre párrafos. */
    }
    .q-cont {
        width: 100%;
        height: auto;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-around; /* Distribuye los elementos de "cualidad" uniformemente. */
        align-items: center;
    }
    .quality {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0; /* Evita que los iconos se reduzcan. */
    }
    .quality i {
        font-size: 24px; /* Aumenta el tamaño de los iconos para mejor toque. */
    }
    .spam-info {
        margin-top: 5px;
        font-size: 0.85rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        flex-grow: 1;
        margin-left: 10px;
    }

    /* Slider / Carrusel */
    /* Habilita el desplazamiento horizontal con 'snap' para una navegación táctil intuitiva. */
    .carousel-display {
        display: flex;
        flex-direction: row;
        padding: 0 10px;
        margin: 0;
        gap: 15px;
        width: 100%;
        height: 500px; /* Ajusta según el contenido de tus tarjetas. */
        overflow-x: scroll;
        scroll-snap-type: x mandatory; /* El scroll se ajusta automáticamente a las tarjetas. */
        -webkit-overflow-scrolling: touch; /* Mejora el rendimiento en iOS. */
    }
    .card {
        width: 85%;
        min-width: 85%; /* Las tarjetas deben mantener un ancho mínimo para ser legibles. */
        height: 70%;
        padding: 15px;
        scroll-snap-align: center; /* Centra la tarjeta activa en la vista. */
        flex-shrink: 0;
        box-sizing: border-box; /* Incluye padding y borde en el tamaño total. */
        font-size: 1rem;
    }
    .active-card {
        width: 90%;
        min-width: 90%;
        height: 75%;
        padding: 15px;
        scroll-snap-align: center;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 1rem;
    }
    .card p {
        text-shadow: none;
        font-size: 10px;
        padding: 0 5px 15px;
        text-align: justify;
    }
    #about-card p {
        font-size: 10px;
    }
    .card h2 {
        text-shadow: none;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    /* Paginación (Dots) */
    .dots-container {
        display: none; /* A menudo, el scroll-snap hace que los puntos sean redundantes en móvil. */
    }

    /* Sección de Socios */
    /* Carrusel de logos y una cuadrícula adaptable para las categorías. */
    .prt--slider-container {
        width: 95%;
        height: 120px;
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        align-items: center;
        gap: 20px;
    }
    .prtnr-contet {
        height: 100%;
        padding: 5px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        scroll-snap-align: start; /* Los logos se ajustan al inicio. */
    }
    .prt-img {
        height: 90%;
        width: 80%;
        max-width: 100px;
        object-fit: contain; /* Ajusta la imagen dentro de su contenedor sin recortarla. */
    }
    #fuller img{
        width: 300px;
        height: 300px;
    }
    .partners-categories {
        height: auto; /* La altura se adapta al contenido de las categorías. */
        width: 90%;
        padding: 15px;
        box-sizing: border-box;
    }
    .categories-grid {
        height: auto;
        display: grid;
        /* Crea columnas flexibles que se ajustan automáticamente al ancho disponible. */
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 15px;
        justify-items: center;
        align-items: center;
    }
}