/* =====================================================
   L&S — CONSTRUCCIONES E INVERSIONES
   Estilos principales del sitio web
===================================================== */

:root{
    --orange:#f58220;
    --orange-2:#fb923c;
    --dark:#020617;
    --dark-2:#0f172a;
    --dark-3:#111827;
    --line:#1e293b;
    --line-soft:#334155;
    --white:#f8fafc;
    --gray:#94a3b8;
    --gray-2:#cbd5e1;
    --success:#22c55e;

    --max-width:1200px;
    --header-height:70px;

    --trans:.3s ease;

    --shadow-sm:0 4px 12px rgba(0,0,0,.15);
    --shadow-md:0 10px 30px rgba(0,0,0,.25);
    --shadow-lg:0 20px 50px rgba(0,0,0,.4);
    --shadow-orange:0 10px 30px rgba(245,130,32,.35);

    --font:"Segoe UI", "Inter", Arial, sans-serif;
}

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:var(--header-height);
}

body{
    font-family:var(--font);
    color:var(--white);
    background:var(--dark);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; transition:color var(--trans); }

button{
    font-family:inherit;
    cursor:pointer;
    border:0;
    background:none;
    color:inherit;
}

/* ===== UTILIDADES ===== */

.contenedor{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 25px;
}

.seccion{
    padding:100px 0;
    background:var(--dark);
    position:relative;
}

.seccion-oscura{ background:var(--dark-2); }

.encabezado-seccion{
    text-align:center;
    max-width:780px;
    margin:0 auto 60px;
}

.subtitulo{
    display:inline-block;
    color:var(--orange);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.subtitulo::before,
.subtitulo::after{
    content:"";
    display:inline-block;
    width:30px;
    height:2px;
    background:var(--orange);
    vertical-align:middle;
    margin:0 12px;
}

.encabezado-seccion h2{
    font-size:clamp(28px, 4vw, 44px);
    font-weight:900;
    letter-spacing:1px;
    line-height:1.15;
    margin-bottom:20px;
    color:var(--white);
}

.descripcion{
    color:var(--gray-2);
    font-size:clamp(15px, 1.5vw, 17px);
    line-height:1.7;
}

.descripcion strong{ color:var(--orange); }

/* ===== BOTONES ===== */

.btn-primary,
.btn-secundario,
.btn-nav{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 32px;
    border-radius:50px;
    font-weight:700;
    letter-spacing:1px;
    font-size:14px;
    text-transform:uppercase;
    transition:all var(--trans);
    cursor:pointer;
    white-space:nowrap;
    border:0;
}

.btn-primary{
    background:linear-gradient(90deg, var(--orange), var(--orange-2));
    color:white;
    box-shadow:var(--shadow-orange);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 40px rgba(245,130,32,.5);
}

.btn-secundario{
    background:transparent;
    color:white;
    border:2px solid rgba(255,255,255,.6);
}

.btn-secundario:hover{
    background:white;
    color:var(--dark);
    border-color:white;
}

.btn-full{ width:100%; }

/* ===== HEADER ===== */

#header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(2,6,23,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(51,65,85,.4);
    transition:background var(--trans);
}

#header.scrolled{
    background:rgba(2,6,23,.98);
    box-shadow:var(--shadow-md);
}

.contenedor-header{
    max-width:var(--max-width);
    margin:0 auto;
    padding:8px 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:var(--header-height);
}

/* 🔽 LOGO DEL HEADER (PEQUEÑO Y CONTROLADO) 🔽 */
.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo img{
    height:40px;
    width:auto;
    max-height:40px;
    max-width:180px;
    object-fit:contain;
    transition:height var(--trans);
}

#header.scrolled .logo img{
    height:34px;
    max-height:34px;
}

/* NAV */
#menu{
    display:flex;
    align-items:center;
    gap:5px;
}

#menu a{
    padding:10px 14px;
    font-size:14px;
    font-weight:600;
    color:var(--gray-2);
    border-radius:8px;
    transition:color var(--trans), background var(--trans);
}

#menu a:hover{
    color:var(--orange);
    background:rgba(245,130,32,.08);
}

#menu a.btn-nav{
    background:linear-gradient(90deg, var(--orange), var(--orange-2));
    color:white;
    padding:10px 22px;
    margin-left:8px;
    box-shadow:0 8px 20px rgba(245,130,32,.35);
}

#menu a.btn-nav:hover{
    transform:translateY(-2px);
    color:white;
}

/* HAMBURGUESA */
.hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;
    height:44px;
    border-radius:10px;
    background:rgba(245,130,32,.1);
    transition:background var(--trans);
}

.hamburger:hover{ background:rgba(245,130,32,.2); }

.hamburger span{
    display:block;
    width:24px;
    height:2.5px;
    background:var(--white);
    border-radius:3px;
    transition:transform var(--trans), opacity var(--trans);
}

.hamburger.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ===== HERO / SLIDER ===== */

.hero{
    position:relative;
    height:100vh;
    min-height:600px;
    overflow:hidden;
    background:var(--dark);
    margin-top:var(--header-height);
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity 1s ease, visibility 1s ease;
}

.slide.active{
    opacity:1;
    visibility:visible;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        rgba(2,6,23,.92) 0%,
        rgba(2,6,23,.7) 45%,
        rgba(2,6,23,.4) 100%
    );
}

.texto{
    position:absolute;
    inset:0;
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 25px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:white;
    z-index:2;
}

.tag{
    display:inline-block;
    width:max-content;
    padding:8px 18px;
    background:rgba(245,130,32,.15);
    border:1px solid rgba(245,130,32,.5);
    color:var(--orange);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    border-radius:50px;
    margin-bottom:25px;
    opacity:0;
    animation:fadeUp .8s ease .3s forwards;
}

.texto h1{
    font-size:clamp(34px, 6vw, 72px);
    font-weight:900;
    line-height:1.05;
    letter-spacing:1px;
    margin-bottom:25px;
    max-width:900px;
    opacity:0;
    animation:fadeUp .8s ease .5s forwards;
}

.texto p{
    font-size:clamp(15px, 1.6vw, 19px);
    color:var(--gray-2);
    max-width:600px;
    margin-bottom:35px;
    opacity:0;
    animation:fadeUp .8s ease .7s forwards;
}

.botones-hero{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    opacity:0;
    animation:fadeUp .8s ease .9s forwards;
}

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(30px); }
    to{ opacity:1; transform:translateY(0); }
}

.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    color:white;
    font-size:30px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    transition:background var(--trans), transform var(--trans);
    border:1px solid rgba(255,255,255,.15);
}

.slider-arrow:hover{
    background:var(--orange);
    transform:translateY(-50%) scale(1.1);
}

.slider-arrow.prev{ left:25px; }
.slider-arrow.next{ right:25px; }

.slider-dots{
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:5;
}

.slider-dots button{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    transition:all var(--trans);
    border:0;
}

.slider-dots button.active{
    background:var(--orange);
    width:35px;
    border-radius:6px;
}

/* ===== CARDS ===== */

.cards{ display:grid; gap:28px; }
.cards-2{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.cards-3{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }

.card{
    background:linear-gradient(180deg, var(--dark-3), var(--dark-2));
    border:1px solid var(--line-soft);
    border-radius:20px;
    padding:40px 30px;
    position:relative;
    overflow:hidden;
    transition:transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg, var(--orange), var(--orange-2));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s ease;
}

.card:hover{
    transform:translateY(-8px);
    border-color:var(--orange);
    box-shadow:var(--shadow-lg);
}

.card:hover::before{ transform:scaleX(1); }

.card-icono{
    width:65px;
    height:65px;
    border-radius:15px;
    background:rgba(245,130,32,.12);
    border:1px solid rgba(245,130,32,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    color:var(--orange);
    transition:background var(--trans), transform var(--trans), color var(--trans);
}

.card:hover .card-icono{
    background:var(--orange);
    color:white;
    transform:scale(1.08) rotate(-5deg);
}

.card-icono svg{ width:32px; height:32px; }

.card h3{
    color:var(--white);
    font-size:20px;
    font-weight:700;
    margin-bottom:14px;
    letter-spacing:.5px;
}

.card p{
    color:var(--gray-2);
    font-size:15px;
    line-height:1.7;
}

.card-proyecto .ubicacion{
    display:inline-block;
    margin-top:15px;
    padding:6px 14px;
    background:rgba(245,130,32,.1);
    border:1px solid rgba(245,130,32,.3);
    color:var(--orange);
    font-size:13px;
    border-radius:50px;
    font-weight:600;
}

.card-dato h3{
    color:var(--orange);
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.card-dato p{
    color:var(--white);
    font-size:17px;
    font-weight:600;
    line-height:1.5;
}

/* ===== CONTACTO ===== */

.contacto-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:50px;
    align-items:start;
}

.contacto-info{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.info-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
    padding:25px;
    background:linear-gradient(180deg, var(--dark-3), var(--dark-2));
    border:1px solid var(--line-soft);
    border-radius:16px;
    transition:border-color var(--trans), transform var(--trans);
}

.info-item:hover{
    border-color:var(--orange);
    transform:translateX(5px);
}

.info-item .card-icono{
    margin-bottom:0;
    flex-shrink:0;
    width:55px;
    height:55px;
}

.info-item .card-icono svg{ width:26px; height:26px; }

.info-item h4{
    color:var(--orange);
    font-size:14px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:6px;
}

.info-item p{
    color:var(--gray-2);
    font-size:15px;
    line-height:1.6;
}

.contacto-form{
    background:linear-gradient(180deg, var(--dark-3), var(--dark-2));
    border:1px solid var(--line-soft);
    border-radius:20px;
    padding:40px;
}

.form-group{ margin-bottom:20px; }

.form-group label{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray-2);
    margin-bottom:8px;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:14px 16px;
    background:var(--dark);
    border:1px solid var(--line-soft);
    border-radius:10px;
    color:var(--white);
    font-size:15px;
    font-family:inherit;
    outline:none;
    transition:border-color var(--trans), box-shadow var(--trans);
    resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(245,130,32,.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder{ color:#64748b; }

.respuesta-form{
    margin-top:20px;
    padding:14px;
    border-radius:10px;
    text-align:center;
    font-size:14px;
    font-weight:600;
    display:none;
}

.respuesta-form.exito{
    display:block;
    background:rgba(34,197,94,.1);
    color:var(--success);
    border:1px solid rgba(34,197,94,.3);
}

.respuesta-form.error{
    display:block;
    background:rgba(239,68,68,.1);
    color:#ef4444;
    border:1px solid rgba(239,68,68,.3);
}

/* ===== FOOTER ===== */

footer{
    background:#000;
    border-top:1px solid var(--line-soft);
    padding:70px 0 0;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid var(--line-soft);
}

/* 🔽 LOGO DEL FOOTER (PEQUEÑO) 🔽 */
.footer-logo{
    height:45px;
    width:auto;
    max-height:45px;
    max-width:160px;
    object-fit:contain;
    margin-bottom:15px;
}

.footer-col p{
    color:var(--gray);
    font-size:14px;
    line-height:1.7;
    margin-bottom:10px;
}

.footer-col h4{
    color:var(--orange);
    font-size:15px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.footer-col a{
    display:block;
    color:var(--gray);
    font-size:14px;
    padding:6px 0;
    transition:color var(--trans), padding-left var(--trans);
}

.footer-col a:hover{
    color:var(--orange);
    padding-left:6px;
}

.footer-bottom{
    padding:25px 0;
    text-align:center;
    color:var(--gray);
    font-size:13px;
}

/* ===== WHATSAPP FLOTANTE ===== */

.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(37,211,102,.5);
    z-index:999;
    transition:transform var(--trans), box-shadow var(--trans);
    animation:pulse-wa 2.5s infinite;
}

.whatsapp-float:hover{
    transform:scale(1.1);
    box-shadow:0 15px 35px rgba(37,211,102,.7);
}

.whatsapp-float svg{ width:32px; height:32px; }

@keyframes pulse-wa{
    0%,100%{ box-shadow:0 10px 25px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.7); }
    50%{ box-shadow:0 10px 25px rgba(37,211,102,.5), 0 0 0 15px rgba(37,211,102,0); }
}

/* ===== ANIMACIONES SCROLL ===== */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

/* ===== RESPONSIVE ===== */

@media(max-width:1024px){
    .contacto-grid{ grid-template-columns:1fr; gap:35px; }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:35px; }
}

@media(max-width:900px){

    .hamburger{ display:flex; }

    #menu{
        position:fixed;
        top:0;
        right:-100%;
        width:80%;
        max-width:320px;
        height:100vh;
        background:var(--dark-2);
        border-left:1px solid var(--line-soft);
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        padding:100px 25px 40px;
        gap:5px;
        transition:right .4s ease;
        box-shadow:-20px 0 40px rgba(0,0,0,.5);
        z-index:999;
    }

    #menu.open{ right:0; }

    #menu a{
        padding:15px 20px;
        font-size:16px;
        border-radius:12px;
    }

    #menu a.btn-nav{
        margin-left:0;
        margin-top:15px;
        text-align:center;
    }

    .seccion{ padding:70px 0; }

    .slider-arrow{
        width:44px;
        height:44px;
        font-size:24px;
    }

    .slider-arrow.prev{ left:12px; }
    .slider-arrow.next{ right:12px; }
}

@media(max-width:600px){

    .contenedor{ padding:0 18px; }
    .contenedor-header{ padding:8px 18px; }
    .logo img{ height:34px; max-height:34px; }
    .footer-logo{ height:38px; max-height:38px; }

    .hero{ min-height:550px; margin-top:70px; }
    .texto{ padding:0 18px; }

    .botones-hero{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .btn-primary,
    .btn-secundario{ width:100%; }

    .card{ padding:32px 24px; }
    .contacto-form{ padding:28px 22px; }

    .footer-grid{ grid-template-columns:1fr; gap:30px; }

    .whatsapp-float{
        width:54px;
        height:54px;
        bottom:18px;
        right:18px;
    }

    .whatsapp-float svg{ width:28px; height:28px; }

    .encabezado-seccion{ margin-bottom:40px; }

    .subtitulo::before,
    .subtitulo::after{ width:18px; margin:0 8px; }
}