/* ============================================================
   AJUSTES PARA CELULAR (compartido)
   Se carga DESPUÉS del CSS de cada página en "Quiénes somos" y
   en las páginas de proyectos. Solo actúa en pantallas de
   768px o menos; en computadora no cambia nada.
   ============================================================ */

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    /* ---------- ENCABEZADO ---------- */
    header,
    header.scrolled {
        height: auto;
        padding: 10px 16px;
        background-color: rgba(255, 255, 255, 0.96);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    }

    .logo img {
        height: 54px;
    }

    .hamburger {
        display: flex;
        padding: 10px;
        margin-right: -10px;
    }

    .hamburger span,
    header.scrolled .hamburger span {
        width: 28px;
        height: 3px;
        background: #0b2440;
        border-radius: 2px;
    }

    /* ---------- MENÚ (panel a lo ancho debajo del encabezado) ---------- */
    .menu {
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 100px);
        overflow-y: auto !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        background: #ffffff;
        border-radius: 12px;
        border-top: 3px solid #cf9b3f;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    }

    .menu a,
    header.scrolled .menu a {
        display: block;
        font-size: 1.05rem;
        padding: 14px 20px;
        color: #0b2440;
    }

    .menu a.btn-vende {
        margin: 8px 20px 12px;
        text-align: center;
        background: #cf9b3f;
        border-radius: 8px;
    }

    #btn-proyectos::after {
        content: "▾";
        margin-left: 6px;
    }

    .dropdown-menu,
    .dropdown.active .dropdown-menu {
        position: static;
        transform: none;
        width: auto;
        min-width: 0;
        max-height: none;
        margin: 0 12px 6px;
        padding: 0 0 6px;
        background: #f8f6f1;
        border-top: none;
        box-shadow: none;
    }

    .dropdown-menu::before {
        padding: 12px 16px 6px;
    }

    .dropdown-menu a {
        display: flex;
        font-size: 0.95rem !important;
        padding: 11px 16px !important;
    }

    /* ---------- BOTÓN ATRÁS ---------- */
    .btn-atras {
        z-index: 900; /* debajo del encabezado para no tapar el menú */
        top: 86px;
        left: 12px;
        padding: 7px 14px;
        font-size: 0.85rem;
    }

    /* ---------- BANNER DEL PROYECTO ---------- */
    .banner-proyecto {
        height: 460px;
    }

    .banner-overlay {
        padding: 0 20px 92px;
    }

    .banner-overlay h1 {
        font-size: 1.7rem;
        line-height: 1.2;
        padding-top: 0;
    }

    .banner-overlay p {
        font-size: 1rem;
    }

    .btn-cotiza {
        left: 20px;
        right: auto;
        bottom: 26px;
        padding: 13px 26px;
        font-size: 0.95rem;
    }

    /* ---------- DESCRIPCIÓN Y FORMULARIO ---------- */
    .fila-descripcion {
        margin: 24px 0;
    }

    .fila-descripcion .franja-texto {
        margin: 0 16px;
        padding: 8px 4px;
        gap: 28px;
    }

    .descripcion-col,
    .form-col {
        min-width: 0;
    }

    .descripcion-proyecto,
    .descripcion-col .descripcion-proyecto {
        height: auto;
        padding: 0 4px;
        overflow: visible;
        text-align: left;
        font-size: 1rem;
        line-height: 1.65;
    }

    /* ---------- PIE DE PÁGINA ---------- */
    .footer-contenido {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 20px;
    }

    .footer-columna br {
        display: none;
    }

    .footer-columna p {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: 4px 0;
    }

    .footer-columna iframe {
        width: 100%;
        height: 200px;
        min-height: 0;
    }

    .redes {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 22px;
        padding: 0;
    }

    .redes a {
        width: 44px;
        height: 44px;
    }

    .footer-derechos {
        font-size: 0.75rem;
        padding: 10px 16px;
    }

    /* ---------- QUIÉNES SOMOS ---------- */
    .bio-titulo h2,
    .titulo-quienes,
    .bloque-titulo h2 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .bio-titulo h2 {
        margin-top: 16px;
    }

    .bio-contenido,
    .quienes-contenido {
        padding: 0 16px;
    }

    .bio-card,
    .quienes-card {
        padding: 14px;
    }

    .bio-img,
    .quienes-img {
        height: 420px;
    }

    .bloque-img {
        height: 300px;
    }

    .bio-texto,
    .quienes-texto,
    .bloque-texto {
        box-sizing: border-box;
        padding: 4px 6px 10px;
    }

    .bio-texto p,
    .quienes-texto p,
    .bloque-texto p,
    .mv-col p {
        font-size: 1rem;
        line-height: 1.7;
        text-align: left;
    }

    .mv-todo {
        padding: 16px;
    }

    .mv-col h2 {
        font-size: 1.6rem;
    }

    .mv-imagen img {
        height: 240px;
    }

    /* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- */
    .whatsapp-float {
        width: 58px;
        height: 58px;
        bottom: 16px;
        right: 16px;
    }
}