/* =========================================================
   CSS MÓVIL — aDiature
   Todo lo de este archivo se aplica solo en pantallas
   angostas (celulares y tablets pequeñas). El resto del
   diseño (escritorio) vive en styles.css y no se toca aquí.
   ========================================================= */

/* =========================================================
   BASE — evita scroll horizontal por elementos que se salen
   ========================================================= */
@media (max-width: 900px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* =========================================================
   ESCENA INICIAL (botón de encendido)
   ========================================================= */
@media (max-width: 650px) {
    .boton-encendido {
        width: 120px;
        height: 120px;
    }

    .mensaje {
        margin-top: 28px;
        padding: 0 8%;
        font-size: 19px;
        text-align: center;
    }

    .instruccion {
        font-size: 12px;
    }
}

/* =========================================================
   FLOR Y NOMBRE (identidad que sube tras encender)
   ========================================================= */
@media (max-width: 650px) {
    .flor-principal {
        width: 220px;
    }

    .nombre-final {
        font-size: 34px;
    }

    .nombre-final.nombre-subir {
        top: 16px !important;
        left: 50% !important;
        transform: translate(-50%, 0) !important;
        font-size: 22px !important;
    }

    .flor-principal.flor-subir {
        top: 10px !important;
        left: 20px !important;
        width: 42px !important;
        transform: translate(0, 0) !important;
    }
}

/* =========================================================
   MENÚ / HEADER FIJO
   ========================================================= */
@media (max-width: 650px) {
    .header-digital {
        padding: 14px 4%;
    }

    .raiz-menu {
        gap: 4px;
        padding-top: 26px;
    }

    .raiz-menu a {
        min-width: 0;
        flex: 1 1 0;
        font-size: 9px;
        padding-top: 2px;
    }

    .hoja {
        top: -30px;
        left: calc(50% - 8px);
        width: 18px;
        height: 24px;
    }

    .hoja-halo {
        top: -32px;
        left: calc(50% - 12px);
        width: 24px;
        height: 24px;
    }

    .icono-menu {
        width: 22px;
        height: 22px;
        font-size: 10px;
        margin-top: 4px;
    }

    .texto-menu {
        margin-top: 5px;
        font-size: 9px;
        letter-spacing: 0.3px;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .texto-menu {
        display: none;
    }
}

/* =========================================================
   SECCIÓN DE INICIO (frase + ilustración)
   ========================================================= */
@media (max-width: 900px) {
    .contenido-inicio {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 30px;
        padding: 150px 6% 40px;
        overflow-y: auto;
        text-align: center;
    }

    .inicio-texto {
        align-items: center;
    }

    .frase-inicio {
        font-size: 34px;
    }

    .frase-crecimiento {
        font-size: 16px;
    }

    .mensaje-crecimiento p {
        font-size: 15px;
    }

    .inicio-visual {
        width: 100%;
        max-width: 380px;
    }

    .inicio-visual svg {
        height: auto;
        max-height: 320px;
    }
}

/* =========================================================
   SECCIÓN SOLUCIONES
   ========================================================= */
@media (max-width: 768px) {
    .seccion-soluciones {
        padding: 120px 6% 90px;
    }

    .soluciones-encabezado h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .soluciones-encabezado p {
        font-size: 15px;
    }

    .soluciones-caminos {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .solucion-camino {
        min-height: auto;
        padding: 34px 28px;
    }
}

/* =========================================================
   SECCIÓN SERVICIOS
   (complementa las reglas que ya existían para esta sección)
   ========================================================= */
@media (max-width: 650px) {
    .seccion-servicios {
        padding: 120px 6% 80px;
    }

    .servicios-encabezado h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .servicios-encabezado p {
        font-size: 15px;
    }

    .servicios-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .servicio-card {
        min-height: auto;
    }

    .servicio-horizontal {
        grid-column: auto;
        display: block;
    }

    .servicio-horizontal .servicio-visual {
        height: 190px;
        min-height: 0;
    }

    .servicio-horizontal .servicio-contenido {
        padding: 25px 22px 28px;
    }

    .servicio-visual {
        height: 180px;
    }

    .servicio-contenido {
        padding: 22px;
    }

    .servicio-contenido h3 {
        font-size: 21px;
    }

    .servicio-contenido p {
        font-size: 14px;
    }
}
/* =========================================================
   PAQUETES DE SERVICIOS - MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    .paquetes-servicios {
        margin-top: 100px;
    }

    .paquetes-encabezado {
        margin-bottom: 50px;
    }

    .paquetes-encabezado h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .paquetes-encabezado p {
        font-size: 15px;
    }

    .paquetes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .paquete {
        padding: 32px 25px 30px;
    }

    .paquete h3 {
        font-size: 27px;
    }

    .paquete-descripcion {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .paquete-precio strong {
        font-size: 27px;
    }

    .paquete-detalles summary {
        font-size: 11px;
    }

}

/* =========================================================
   SECCIÓN PROYECTOS
   ========================================================= */
@media (max-width: 900px) {
    .seccion-proyectos {
        padding: 120px 6% 90px;
    }

    .proyectos-encabezado {
        margin-bottom: 60px;
    }

    .proyectos-encabezado h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .proyectos-encabezado p {
        font-size: 15px;
    }

    /* Las 3 tarjetas de proyecto pasan de 2 columnas a 1 */
    .proyecto-contenido,
    .proyecto-viajero-contenido,
    .servibox-contenido {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .proyecto-informacion,
    .proyecto-viajero-texto,
    .servibox-texto {
        padding: 40px 0;
    }

    .proyecto-informacion h3,
    .proyecto-viajero-texto h3,
    .servibox-texto h3 {
        font-size: 34px;
    }

    .proyecto-informacion p,
    .proyecto-viajero-texto p,
    .servibox-texto p {
        font-size: 15px;
        max-width: 100%;
    }

    /* Las visualizaciones necesitan una altura propia
       porque ya no la reciben de la fila de la grilla */
    .proyecto-visual,
    .proyecto-viajero-visual,
    .servibox-visual {
        min-height: 300px;
        order: -1;
    }
}

@media (max-width: 480px) {
    .proyecto-nodo span {
        font-size: 12px;
    }

    .proyecto-nodo small {
        font-size: 9px;
    }
}

/* =========================================================
   SECCIÓN NOSOTROS
   ========================================================= */
@media (max-width: 768px) {
    .seccion-nosotros {
        padding: 120px 6% 90px;
    }

    .nosotros-encabezado h2 {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .nosotros-encabezado p {
        font-size: 15px;
    }

    .nosotros-pilares {
        grid-template-columns: 1fr;
    }

    .nosotros-pilar {
        padding: 35px 6px;
    }

    .nosotros-pilar + .nosotros-pilar {
        border-left: none;
        border-top: 1px solid rgba(34, 34, 34, 0.12);
    }

    .nosotros-pilar h3 {
        font-size: 24px;
    }
}

/* =========================================================
   SECCIÓN CONTACTO
   ========================================================= */
@media (max-width: 768px) {
    .seccion-contacto {
        padding: 120px 6% 90px;
    }

    .contacto-encabezado h2 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .contacto-encabezado p {
        font-size: 15px;
    }

    .contacto-caminos {
        grid-template-columns: 1fr;
    }

    .contacto-camino {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        min-height: auto;
        padding: 30px 6px;
    }

    .contacto-formulario {
        padding: 45px 0 10px;
    }

    .contacto-formulario-encabezado h3 {
        font-size: 24px;
    }

    .contacto-enlaces {
        flex-direction: column;
        gap: 14px;
    }
}