/* ================================ */
/* MEDIA QUERY: Dispositivos <= 768px (Tablets y móviles grandes) */
/* ================================ */
@media (max-width: 768px) {

    /* ===== Ajustes Navbar ===== */
    .navbar__content {
        padding: 0 calc(var(--spacing)*0.75); /* Reduce padding horizontal */
    }

    .navbar__logo img {
        height: 35px; /* Logo más pequeño */
    }

    .navbar__launch-text {
        display: none; /* Oculta el texto "Lanzamiento Próximo" */
    }

    .navbar__countdown {
        gap: calc(var(--spacing)*0.4); /* Menor espacio entre bloques */
    }

    .navbar__countdown-item {
        padding: calc(var(--spacing)*0.2) calc(var(--spacing)*0.4); /* Menos padding interno */
        min-width: 42px; /* Ancho más compacto */
    }

    .navbar__countdown-item span {
        font-size: 1rem; /* Número más pequeño */
    }

    .navbar__countdown-item small {
        font-size: 0.55rem; /* Texto de unidad más pequeño */
    }

    /* ===== Ajustes Hero ===== */
    .hero {
        padding: calc(var(--spacing)*3) 0; /* Menor espaciado vertical */
    }

    .hero__title {
        font-size: 2rem; /* Título más pequeño */
    }

    .hero__description {
        margin-top: calc(var(--spacing) * 2); /* Más espacio sobre la descripción */
    }

    /* ===== Ajustes Info Section ===== */
    .info-details {
        gap: var(--spacing);               /* Reduce el espacio entre ítems */
        flex-direction: column;            /* Apila verticalmente los detalles */
    }

    .countdown {
        flex-direction: column;            /* Apila los contadores */
        gap: calc(var(--spacing)*0.5);     /* Espacio entre bloques */
    }

    .countdown div {
        padding: calc(var(--spacing)*0.8) var(--spacing); /* Ajuste de tamaño */
        min-width: 65px;                   /* Ancho mínimo ligeramente menor */
    }

    .countdown span {
        font-size: 1.5rem;                 /* Número del contador reducido */
    }

    /* ===== Ajustes Features ===== */
    .features-grid {
        grid-template-columns: 1fr;        /* Una sola columna (vertical) */
        gap: var(--spacing);               /* Espaciado entre tarjetas */
    }

    /* ===== Ajustes Speaker ===== */
    .speaker__content {
        flex-direction: column;            /* Ordena texto e imagen en bloque */
        align-items: center;               /* Centra el contenido */
        gap: var(--spacing);               /* Espaciado entre los elementos */
    }

    .speaker__text {
        padding-right: 0;                  /* Elimina padding derecho */
        padding-bottom: var(--spacing);    /* Añade separación debajo del texto */
        text-align: center;                /* Centra el texto */
    }

    .speaker__image {
        margin-top: var(--spacing);        /* Separación superior para la imagen */
    }

    /* ===== Ajustes Footer ===== */
    .footer {
        padding: var(--spacing) 0;         /* Menor padding vertical */
        line-height: 1.5;                  /* Aumenta legibilidad del texto */
    }
}

/* ================================ */
/* MEDIA QUERY: Dispositivos <= 576px (Teléfonos pequeños) */
/* ================================ */
@media (max-width: 576px) {

    /* ===== Ajustes Navbar ===== */
    .navbar__content {
        flex-direction: column;                        /* Apila elementos verticalmente */
        padding: calc(var(--spacing)*0.5) 0;           /* Menor padding */
    }

    .navbar__logo {
        margin-bottom: calc(var(--spacing)*0.5);       /* Espacio debajo del logo */
    }

    .navbar__launch-area {
        flex-direction: column;                        /* Apila texto y contador */
        gap: calc(var(--spacing)*0.5);                 /* Espaciado entre elementos */
        margin-top: calc(var(--spacing)*0.5);          /* Espacio superior */
    }

    .navbar__launch-text {
        display: block;                                /* Vuelve a mostrar el texto */
        text-align: center;                            /* Centrado */
        font-size: 0.8rem;                             /* Tamaño reducido */
        white-space: normal;                           /* Permite saltos de línea */
    }

    .navbar__countdown {
        gap: calc(var(--spacing)*0.4);                 /* Espacio entre bloques */
    }

    .navbar__countdown-item {
        min-width: 40px;                               /* Aún más compacto */
        padding: calc(var(--spacing)*0.2) calc(var(--spacing)*0.3); /* Padding ajustado */
    }

    .navbar__countdown-item span {
        font-size: 0.9rem;                             /* Tamaño del número reducido */
    }

    .navbar__countdown-item small {
        font-size: 0.5rem;                             /* Texto de unidad más pequeño aún */
    }

    /* Nota: No se requiere ajuste adicional para .features-grid aquí; ya hereda columna única del query anterior */
}