:root {
    --text-color: #1A1A1A;
    --accent-color: #FF5A36; /* Coral */
    --oliva-color: #A3A836; /* Verde Oliva del prode */
    --font-titulos: 'Archivo Black', sans-serif; /* Reemplazo de Bernoru */
    --font-textos: 'Raleway', sans-serif; /* Tipografía oficial */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    background-color: #111; 
    scroll-behavior: smooth; /* Acá agregamos el deslizamiento suave */
} 

body { 
    font-family: var(--font-textos); 
    color: var(--text-color); 
    background-color: #FAFAFA; 
    overflow-x: hidden; 
    max-width: 1920px; 
    margin: 0 auto; 
    position: relative; 
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    container-type: inline-size; 
}
/* OCULTAR BARRA DE SCROLL LATERAL */
html, body {
    -ms-overflow-style: none; /* Edge */
    scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
}
/* NAVEGACIÓN */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.3cqi 5%; /* Bajamos el margen vertical de 1.5 a 0.3 para hacerla bien angosta */
    background-color: rgba(255, 255, 255, 0.98);
    position: fixed; width: 100%; max-width: 1920px; 
    left: 0; right: 0; margin: 0 auto; top: 0; z-index: 1000;
}
.logo { 
    display: flex; 
    align-items: center; 
}

.logo img {
    max-height: 5.5cqi; /* Altura máxima para que quede prolijo en la barra */
    width: auto;
    object-fit: contain;
}
.nav-links { list-style: none; display: flex; gap: 2cqi; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text-color); font-weight: 700; font-size: 1cqi; }
.btn-nav { background-color: var(--accent-color); color: white !important; padding: 0.8cqi 1.5cqi; border-radius: 50px; }

/* MAQUETADO ESTRICTO PROPORCIÓN CANVA (16:9) */
.slide {
    width: 100%; aspect-ratio: 16 / 9; position: relative;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}

#portada { background-image: url('fondo-1.png'); margin-top: 5cqi; } 
#nosotros { background-image: url('fondo-2.png'); }
#servicios { background-image: url('fondo-3.png'); }
#prode { background-image: url('fondo-4.png'); }
#contacto { background-image: url('fondo-5.png'); }

/* UTILIDADES */
.txt-blanco { color: white !important; }
.txt-oliva { color: var(--oliva-color); font-weight: 700; }
strong { font-weight: 700; }
em { font-style: italic; }

/* =========================================================
   POSICIONES EXACTAS SEGÚN CAPTURAS DE CANVA
   ========================================================= */

/* --- FONDO 2: NOSOTROS --- */
.f2-titulo {
    position: absolute; top: 15%; left: 3%; width: 40%;
}
.f2-titulo h1 {
    font-family: var(--font-titulos); font-size: 8.5cqi; color: white;
    line-height: 0.95; letter-spacing: -0.1cqi;
}
.f2-texto {
    position: absolute; top: 14%; left: 50.5%; width: 44%;
    display: flex; flex-direction: column; gap: 1.8cqi; color: #555;
}
.f2-texto p { font-size: 1.25cqi; line-height: 1.4; font-weight: 500; }
/* --- FONDO 3: SERVICIOS --- */
.f3-caja { position: absolute; }
.f3-caja h3 { font-size: 1.6cqi; font-weight: 700; line-height: 1.2; color: #222; }
.f3-caja .fw-normal { font-weight: 500; }
.f3-caja .txt-chico { font-size: 1.3cqi; font-weight: 500; display: block; margin-top: 0.8cqi; line-height: 1.2; }
.txt-center { text-align: center; }
.txt-left { text-align: left; }

/* Coordenadas precisas para cada tarjeta */
.gris-izq-top { top: 23%; left: 7.5%; width: 17%; display: flex; justify-content: center; }
.oliva-top { top: 36.5%; left: 31%; width: 16%; }
.gris-der-top { top: 30.5%; left: 53%; width: 16%; }
.negra-der { top: 26.5%; left: 75%; width: 16%; }
.coral-izq-bot { top: 64.5%; left: 9%; width: 16%; }
.gris-cen-bot { top: 76.5%; left: 31%; width: 16%; }
.rosa-cen-bot { top: 76.5%; left: 53%; width: 16%; }

/* --- FONDO 4: PRODE --- */
.f4-texto {
    position: absolute; top: 22%; left: 64%; width: 34%;
    color: #EFEFEF;
}
.f4-texto p { font-size: 1.4cqi; margin-bottom: 2cqi; line-height: 1.45; font-weight: 400; }
.f4-texto strong { color: white; font-weight: 700; }


/* --- FONDO 5: CONTACTO --- */
.f5-formulario {
    position: absolute; 
    top: 23%; /* Lo bajamos del 16% al 23% para darle ese espacio arriba */
    left: 8%; 
    width: 40%;
}
.f5-formulario h2 { 
    font-family: var(--font-titulos); 
    font-size: 3.5cqi; /* Achicamos la letra */
    color: #F7F5F0; 
    line-height: 1.2; /* Le damos más aire entre los renglones */
    margin-bottom: 2.5cqi; /* Separamos más el título de los campos de texto */
}

/* Estilo de inputs integrados al diseño */
.input-group { margin-bottom: 0.8cqi; display: flex; flex-direction: column; }
.input-group label { margin-bottom: 0.1cqi; font-weight: 700; font-size: 1.2cqi; color: #111; }
.input-group input, .input-group textarea {
    padding: 0.4cqi 0; background: transparent; color: #111;
    border: none; border-bottom: 1.5px solid rgba(0,0,0,0.15); /* Línea mucho más sutil */
    font-family: var(--font-textos); font-size: 1.1cqi; font-weight: 500;
    resize: none;
}
.input-group input:focus, .input-group textarea:focus {
    outline: none; border-bottom-color: #111;
}
.btn-submit { 
    background-color: #111; color: white; border: none; 
    padding: 0.8cqi 2cqi; font-size: 1cqi; font-weight: 700; border-radius: 8px; 
    cursor: pointer; width: 40%; margin-top: 0.5cqi; text-transform: uppercase;
}
.btn-submit:hover { background-color: var(--accent-color); }

/* =========================================================
   ANIMACIONES MODERNAS (TIEMPOS CORREGIDOS)
   ========================================================= */
.animable { 
    opacity: 0; 
}

/* FONDO 1: Corregido el nombre de la clase para que funcione al refrescar */
#portada.slide-up {
    transform: translateY(4cqi);
    transition: all 1.5s ease-out;
}

/* FONDO 2 y 5: Bajamos el tiempo a 1.2s para que no te duermas esperando */
#nosotros .slide-up, #contacto .slide-up {
    transform: translateY(8cqi);
    transition: all 1.6s ease-out;
}

/* FONDO 3: Ahora sí respeta el tiempo. Te lo dejé en 1.5s porque 4.5s es excesivo, pero podés cambiar ese número si querés */
.drop-down {
    transform: translateY(-8cqi);
    transition: all 1.5s ease-out;
}

/* FONDO 4: Texto entra desde la derecha */
.slide-left {
    transform: translateX(8cqi);
    transition: all 1.2s ease-out;
}

/* Vuelve los elementos a su posición original al verse en pantalla */
.animable.visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* Tiempos de espera (Delays) más ágiles para que la cascada no demore tanto */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }

.delay-prode { transition-delay: 0.3s; }

/* Efecto hover: lo aislamos para que no le gane a la velocidad de caída inicial */
.f3-caja:hover { 
    transform: translateY(-0.8cqi) scale(1.02) !important; 
    transition: transform 0.2s ease !important; 
}
/* =========================================================
   FOOTER
   ========================================================= */
.footer-latte {
    background-color: #111; 
    color: #F7F5F0;
    padding: 2cqi 6%;
    display: flex;
    flex-direction: row; /* Fuerza la horizontalidad de toda la barra */
    justify-content: space-between; /* Manda los links a la izq y el copyright a la der */
    align-items: center;
    font-family: var(--font-textos);
    font-size: 1.1cqi;
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    width: 100%;
}

.footer-links {
    display: flex;
    flex-direction: row; /* Obliga a que los links estén uno al lado del otro */
    gap: 4cqi; /* Espacio amplio entre cada red social */
    align-items: center;
}

.footer-links a {
    color: #F7F5F0;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05cqi;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: row; /* Mantiene el ícono al lado de la palabra */
    align-items: center;
    gap: 0.6cqi; 
}

.footer-links a:hover {
    color: var(--accent-color); 
}

.footer-links a svg {
    width: 1.3cqi;
    height: 1.3cqi;
}

.footer-copy p {
    font-weight: 500;
    opacity: 0.7;
    margin: 0;
}
/* =========================================================
   DISEÑO RESPONSIVE (CELULARES) - RÉPLICA EXACTA CANVA
   ========================================================= */
@media screen and (max-width: 768px) {
    
  /* --- 1. NAVEGACIÓN --- */
    .navbar { 
        padding: 8px 5% !important; /* Le sacamos un poco de aire arriba y abajo a la barra */
        flex-direction: column !important; 
        height: auto !important; 
        align-items: center !important; 
    }
    .logo {
        margin: 0 auto !important; 
    }
    .logo img { 
        height: 47px !important; /* ACÁ LE DAS EL TAMAÑO QUE QUIERAS */
        max-height: none !important; /* LA CLAVE: Rompemos el tope de la compu */
        margin-bottom: 5px !important; 
        width: auto !important; 
    }
    /* --- NAVEGACIÓN SIN SCROLL --- */
    .nav-links { 
        display: flex !important; 
        width: 100% !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        gap: 0px !important; 
        padding-bottom: 5px !important; 
        overflow-x: hidden !important; 
    }
    .nav-links li a { 
        font-size: 3.4vw !important; 
        letter-spacing: -0.3px !important;
        padding: 0 !important;
    }
    .btn-nav { 
        font-size: 3.4vw !important; 
        padding: 1.5vw 2.5vw !important; 
    }

    /* --- 2. ACTIVAR FONDOS MÓVILES EXACTOS --- */
    .slide { aspect-ratio: unset !important; min-height: 100dvh !important; background-size: cover !important; background-position: center top !important; }
    #portada { background-image: url('fondo-1-movil.png') !important; }
    #nosotros { background-image: url('fondo-2-movil.png') !important; }
    #servicios { background-image: url('fondo-3-movil.png') !important; }
    #prode { background-image: url('fondo-4-movil.png') !important; }
    #contacto { background-image: url('fondo-5-movil.png') !important; }

    /* --- 3. RESETEO PARA POSICIONAMIENTO ABSOLUTO --- */
    #nosotros > div, #servicios > div, #prode > div, #contacto > div, .f3-caja { 
        inset: auto !important; transform: none !important; position: absolute !important; margin: 0 !important; 
    }

    /* --- 4. COORDENADAS MILIMÉTRICAS SEGÚN REFERENCIAS --- */
  

/* =========================================================
       FONDO 2: NOSOTROS (MÓVIL DEFINITIVO)
       ========================================================= */
    #nosotros {
        background-image: url('fondo-2-movil.png') !important;
        background-size: cover !important;
        background-position: center top !important;
        height: 100vh !important;
        min-height: 100vh !important;
        position: relative !important;
        display: block !important;
        padding: 0 !important;
    }


    /* 1. TÍTULO BLANCO */
   #nosotros .f2-titulo {
        position: absolute !important;
        top: 8% !important; /* Lo subimos para que quede centrado en el espacio coral */
        left: 8% !important;
        width: 84% !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
    }
    
    #nosotros .f2-titulo h1 {
        color: #F7F5F0 !important;
        font-size: 16vw !important; /* Achicamos un poco para que no quede tan apretado */
        line-height: 0.9 !important;
        text-align: left !important;
    }

    /* 2. TEXTO GRIS */
    #nosotros .f2-texto {
        position: absolute !important;
        top: 48% !important; 
        left: 8% !important;
        width: 84% !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #nosotros .f2-texto p {
        color: #555555 !important;
        font-size: 3.6vw !important; /* Redujimos la letra de 4.5 a 3.6 para que entre en el cuadro */
        line-height: 1.4 !important;
        margin-bottom: 3.5vw !important; /* Juntamos los párrafos para que no empujen hacia abajo */
        text-align: left !important;
    }
    
    #nosotros .f2-texto strong {
        color: #333333 !important;
    }

 /* =========================================================
       FONDO 3: SERVICIOS (MÓVIL DEFINITIVO - COORDENADAS PURAS)
       ========================================================= */
    #servicios {
        background-image: url('fondo-3-movil.png') !important;
        background-size: cover !important;
        background-position: center top !important;
        height: 100vh !important;
        min-height: 100vh !important;
        position: relative !important;
        display: block !important;
        padding: 0 !important;
    }


    /* 0. Reseteo total: rompemos las cajas automáticas */
    #servicios .f3-caja {
        position: absolute !important;
        margin: 0 !important;
        padding: 0 !important;
        inset: auto !important;
        display: block !important; /* Cero Flexbox */
    }
    
    #servicios .f3-caja h3 {
        font-family: var(--font-textos) !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        letter-spacing: -0.3px !important;
        width: 100% !important;
    }
    #servicios .f3-caja .fw-normal { font-weight: 500 !important; }
    #servicios .f3-caja .txt-chico {
        font-size: 3.2vw !important; line-height: 1.2 !important; display: block !important;
        margin-top: 1vw !important; font-weight: 500 !important;
    }

    /* --- POSICIONES MILIMÉTRICAS CALCULADAS --- */

    /* 1. Creatividad (Gris Arriba Izq) -> Lo bajamos para no pisar el ícono */
    #servicios .gris-izq-top { top: 11.5% !important; left: 1% !important; width: 44% !important; }
    #servicios .gris-izq-top h3 { text-align: center !important; color: #111 !important; font-size: 4vw !important; font-weight: 800 !important; }

    /* 2. Branding (Oliva Arriba Der) -> Centrado exacto en su espacio inferior */
    #servicios .oliva-top { top: 23% !important; left: 56% !important; width: 40% !important; }
    #servicios .oliva-top h3 { text-align: left !important; color: white !important; font-size: 4.5vw !important; font-weight: 800 !important; }

    /* 3. Gestión Redes (Coral Medio Izq) */
    #servicios .coral-izq-bot { top: 32% !important; left: 4% !important; width: 38% !important; }
    #servicios .coral-izq-bot h3 { text-align: left !important; color: white !important; font-size: 4.8vw !important; font-weight: 800 !important; }

    /* 4. Comunicación (Gris Medio Der) */
    #servicios .gris-cen-bot { top: 49% !important; left: 56% !important; width: 40% !important; }
    #servicios .gris-cen-bot h3 { text-align: left !important; color: #111 !important; font-size: 4.2vw !important; font-weight: 800 !important; }

    /* 5. Experiencias (Gris Abajo Izq) */
    #servicios .gris-der-top { top: 64% !important; left: 4% !important; width: 38% !important; }
    #servicios .gris-der-top h3 { text-align: left !important; color: #111 !important; font-size: 4.2vw !important; font-weight: 800 !important; }

    /* 6. PR Pauta (Negra Abajo Der) */
    #servicios .negra-der { top: 74% !important; left: 57% !important; width: 40% !important; }
    #servicios .negra-der h3 { text-align: left !important; color: white !important; font-size: 4.2vw !important; font-weight: 800 !important; }

    /* 7. Soluciones (Rosa Abajo Izq) */
    #servicios .rosa-cen-bot { top: 85% !important; left: 4% !important; width: 38% !important; }
    #servicios .rosa-cen-bot h3 { text-align: left !important; color: white !important; font-size: 4.2vw !important; font-weight: 800 !important; }
   
   /* =========================================================
       FONDO 4: PRODE (MÓVIL DEFINITIVO - CORREGIDO)
       ========================================================= */
    #prode {
        background-image: url('fondo-4-movil.png') !important;
        background-size: cover !important;
        /* VOLVEMOS A ANCLAR A LA IZQUIERDA para que el logo de Latte Prode no se corte */
        background-position: left top !important; 
        height: 100vh !important;
        min-height: 100vh !important;
        position: relative !important;
        display: block !important;
        padding: 0 !important;
    }


    /* Apagamos los saltos de línea del HTML */
    #prode .f4-texto br {
        display: none !important; 
    }

    #prode .f4-texto {
        position: absolute !important;
        top: 25% !important; 
        left: 6% !important;
        /* ACHICAMOS EL ANCHO AL 52%: Frena mucho antes de tocar la pelota */
        width: 52% !important; 
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        text-align: left !important;
    }

    #prode .f4-texto p {
        font-family: var(--font-textos) !important;
        font-size: 3.8vw !important; 
        line-height: 1.45 !important;
        margin-bottom: 4vw !important; 
        color: #EFEFEF !important;
        font-weight: 400 !important;
    }

    #prode .f4-texto strong { color: white !important; font-weight: 700 !important; }
    #prode .f4-texto .txt-oliva { color: var(--oliva-color) !important; font-weight: 700 !important; }

   /* =========================================================
       FONDO 5: CONTACTO (MÓVIL DEFINITIVO - AJUSTE FINAL)
       ========================================================= */
    #contacto {
        background-image: url('fondo-5-movil.png') !important; 
        background-size: cover !important;
        background-position: center top !important;
        height: 100vh !important;
        min-height: 100vh !important;
        position: relative !important;
        display: block !important;
        padding: 0 !important;
    }

    #contacto .f5-formulario {
        position: absolute !important;
        top: 9% !important; 
        left: 10% !important; 
        width: 80% !important; 
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 3.5vw 0 0 0 !important; /* Despega el título del borde superior */
    }

    #contacto .f5-formulario h2 {
        font-family: var(--font-titulos) !important;
        color: #F7F5F0 !important; 
        font-size: 9.5vw !important; 
        line-height: 0.95 !important;
        text-align: left !important;
        margin-bottom: 3.5vw !important; 
        letter-spacing: -0.5px !important;
    }

    #contacto .formulario {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #contacto .input-group {
        margin-bottom: 2vw !important; /* Ajustado para que el botón no se caiga */
        display: flex !important;
        flex-direction: column !important;
    }

    #contacto .input-group label {
        color: #111 !important;
        font-size: 3.5vw !important; 
        font-weight: 800 !important;
        margin-bottom: 0.5vw !important;
    }

    #contacto .input-group input, 
    #contacto .input-group textarea {
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid #111 !important; 
        border-radius: 0 !important;
        color: #111 !important;
        font-size: 3.5vw !important;
        padding: 1vw 0 !important; 
        font-family: var(--font-textos) !important;
    }

    #contacto .input-group input:focus, 
    #contacto .input-group textarea:focus {
        outline: none !important;
        border-bottom: 2px solid #fff !important; 
    }

    #contacto .btn-submit {
        background-color: #111 !important;
        color: white !important;
        font-family: var(--font-textos) !important;
        font-weight: 800 !important;
        font-size: 3.5vw !important;
        padding: 3vw !important;
        border-radius: 50px !important;
        width: 40% !important; 
        margin-top: 1vw !important;
        text-transform: uppercase !important;
        border: none !important;
    }}