/* =====================================================
AVASOFT LANDING PAGE
Archivo: assets/css/style.css
Autor: Humberto
Descripción:
Landing corporativa para Avasoft
Responsive Desktop / Tablet / Mobile
===================================================== */

/* =====================================================
VARIABLES GLOBALES
===================================================== */

:root {

--primary: #1e3a8a;
--primary-dark: #172f73;

--success: #10b981;
--success-dark: #059669;

--background: #f8fafc;
--surface: #ffffff;

--text: #1f2937;
--text-light: #64748b;

--border: #e2e8f0;

--shadow-sm: 0 2px 8px rgba(15,23,42,.05);

--shadow-md: 0 8px 24px rgba(15,23,42,.08);

--shadow-lg: 0 16px 40px rgba(15,23,42,.10);

--radius: 12px;

--container: 1280px;

}

/* =====================================================
RESET
===================================================== */

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

html{
scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;
    background:var(--background);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    }

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

a{
text-decoration:none;
}

ul{
list-style:none;
}

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

.container{


width:100%;
max-width:var(--container);

margin:auto;

padding-left:24px;
padding-right:24px;


}

.section{


padding:90px 0;


}

.section-light{


background:#ffffff;


}

.section-title{


text-align:center;

margin-bottom:60px;


}

.section-title h2{


font-size:2.3rem;
font-weight:700;

margin-bottom:15px;


}

.section-title p{


color:var(--text-light);

max-width:700px;

margin:auto;


}

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

.header{


position:sticky;

top:0;

z-index:999;

background:rgba(255,255,255,.95);

backdrop-filter:blur(12px);

border-bottom:1px solid var(--border);


}

.header .container{


display:flex;

align-items:center;

justify-content:space-between;

min-height:80px;


}

.logo {

    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo span{

    font-size:1.4rem;
    font-weight:800;
    color:var(--primary);

}

.logo img{

    height:43px;
    width:auto;
    display:block;

}

.nav{


display:flex;
gap:30px;


}

.nav a{


color:var(--text);

font-weight:500;

transition:.3s;


}

.nav a:hover{


color:var(--primary);


}

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

.hero{


padding:120px 0;

background:
linear-gradient(
180deg,
#f8fafc 0%,
#ffffff 100%);


}

.hero-grid{


display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;


}

.badge{


display:inline-block;

padding:10px 18px;

border-radius:999px;

background:#dbeafe;

color:var(--primary);

font-size:.85rem;

font-weight:600;

margin-bottom:25px;


}

.hero-content h1{


font-size:4rem;

line-height:1.1;

margin-bottom:25px;

font-weight:800;


}

.hero-content p{


color:var(--text-light);

font-size:1.1rem;

margin-bottom:35px;


}

.hero-buttons{


display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:35px;


}

.hero-features{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    font-weight:600;

}

.hero-image img{

    border-radius:18px;
    box-shadow:
        0 25px 60px rgba(30,58,138,.15);
    transform:perspective(1000px)
              rotateY(-6deg);
    transition:.4s;
}

.hero-image img:hover{

    transform:perspective(1000px)
              rotateY(0deg);
}

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

.btn{


display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 26px;

border-radius:12px;

font-weight:600;

transition:.3s;


}

.btn-primary{


background:var(--success);

color:#fff;


}

.btn-primary:hover{


background:var(--success-dark);

transform:translateY(-2px);


}

.btn-secondary{


border:1px solid var(--border);

background:#fff;

color:var(--primary);


}

.btn-secondary:hover{


box-shadow:var(--shadow-sm);


}

.btn-full{

    width:100%;
    border: none;
    font-weight: 600;
    font-family: 'Montserrat';
    font-size: 17px;

}

.btn-success{

    background:#25D366;
    color:#fff;

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

    box-shadow:
        0 10px 25px rgba(37,211,102,.25);

}

.btn-success:hover{

    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(37,211,102,.35);

}

#sending-message{

    display:none;

    margin-top:20px;

    text-align:center;

    color:#1e3a8a;

    font-weight:600;

}

/* =====================================================
BENEFICIOS
===================================================== */

.cards-grid{


display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;


}

.card{


background:#fff;

border:1px solid var(--border);

border-radius:16px;

padding:30px;

box-shadow:var(--shadow-sm);

transition:.3s;


}

.card:hover{


transform:translateY(-6px);

box-shadow:var(--shadow-md);


}

.card h3{


margin-bottom:15px;

color:var(--primary);


}

/* =====================================================
MODULOS
===================================================== */

.modules-grid{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}

.module-card{


background:#fff;

border:1px solid var(--border);

border-radius:16px;

padding:30px;


}

.module-card h3{


color:var(--primary);

margin-bottom:15px;


}

.module-card li{


margin-bottom:10px;

color:var(--text-light);


}

/* =====================================================
GALERIA CARRUSEL
===================================================== */

.carousel {

    position:relative;
    max-width:1000px;
    margin:auto;
}

.slide  {
    
    display:none;
    position:relative;
}

.slide.active{

    display:block;
    animation:fadeSlide .8s ease;
}

.slide img{

    width:100%;
    /* height:auto; */
    max-height:650px;
    object-fit:contain;
    border-radius:16px;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
    background:#fff;
    padding:12px;
    transform:
        perspective(1200px)
        rotateY(-4deg);

    transition:.4s ease;
}

.slide img:hover{

    transform:
        perspective(1200px)
        rotateY(0deg);

}

@keyframes fadeSlide{

    from {
        opacity:0;
        transform:translateY(10px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }
}

/* .slide::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:20px;

    background:
        linear-gradient(
            rgba(0,35,111,.10),
            rgba(0,35,111,.35)
        );

    pointer-events:none;
} */

.image-overlay{

    position:absolute;

    inset:0;

    border-radius:20px;

    background:
        linear-gradient(
            rgba(15,23,42,.10),
            rgba(15,23,42,.35)
        );

    pointer-events:none;
}

/* =====================================================
CTA
===================================================== */

.cta{


background:var(--primary);

color:#fff;

text-align:center;


}

.cta h2{


font-size:2.5rem;

margin-bottom:20px;


}

.cta p{


max-width:700px;

margin:auto auto 35px;


}

/* =====================================================
FORMULARIO
===================================================== */

.contact-form{


max-width:900px;

margin:auto;

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow-md);

border:1px solid var(--border);


}

.form-grid{


display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-bottom:20px;


}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:15px;
    font-size:1rem;
    transition:.3s;
    background:#fff;
    color:var(--text);
    font-family:'Montserrat',sans-serif;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(30,58,138,.10);

}

.contact-form textarea{


resize:vertical;

margin-bottom:20px;

}

input,
select,
textarea{

    font-family:'Montserrat',sans-serif;
}

input::placeholder,
textarea::placeholder{

    font-family:'Montserrat',sans-serif;
}

.contact-form select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%2300236f' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%2300236f' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;
    background-size:16px;
    padding-right:45px;
}

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

.footer{


background:#fff;

border-top:1px solid var(--border);

padding:35px 0;

text-align:center;


}

.success-message{

    background:#ecfdf5;

    border:1px solid #10b981;

    border-radius:16px;

    padding:30px;

    text-align:center;

    margin-bottom:25px;

    animation:fadeIn .5s ease;
}

.success-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#10b981;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:2rem;

    font-weight:700;
}

.desktop-shot{

    display:block;
}

.mobile-shot{

    display:none;
}

/* =====================================================
TABLET
===================================================== */

@media (max-width:1024px){


.hero-grid{

    grid-template-columns:1fr;
}

.cards-grid{

    grid-template-columns:repeat(2,1fr);
}

.modules-grid{

    grid-template-columns:repeat(2,1fr);
}

.back-to-top{

    position:fixed;
    right:20px;
    bottom:20px;
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1e3a8a;
    color:#fff;
    text-decoration:none;
    font-size:22px;
    z-index:999;
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.back-to-top.show{

    opacity:1;
    visibility:visible;
}

.back-to-top:hover{

    transform:translateY(-4px);

}
}

/* =====================================================
MOBILE
===================================================== */

@media (max-width:768px){


.nav{
    
    display:none;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#ffffff;
    flex-direction:column;
    padding:25px;
    border-bottom:1px solid #e5e7eb;
    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

.nav a {

    padding:12px 0;
    font-size:1rem;
}

.hero{

    padding:80px 0;
}

.hero-content h1{

    font-size:2.5rem;
}

.hero-features{

    grid-template-columns:1fr;
}

.cards-grid{

    grid-template-columns:1fr;
}

.modules-grid{

    grid-template-columns:1fr;
}

.gallery{

    grid-template-columns:1fr;
}

.form-grid{

    grid-template-columns:1fr;
}

.section{

    padding:70px 0;
}

.menu-toggle{

    display:block !important;
}

.nav.active{

    display:flex;
}

 .desktop-shot{

        display:none;
    }

    .mobile-shot{

        display:block;
    }

       /* .slide img{

        transform:none;
    } */


}

/* =====================================================
MOBILE PEQUEÑO
===================================================== */

@media (max-width:480px){


.container{

    padding-left:16px;
    padding-right:16px;
}

.hero-content h1{

    font-size:2rem;
}

.section-title h2{

    font-size:1.8rem;
}

.cta h2{

    font-size:1.9rem;
}

.menu-toggle{

    display:block !important;
}

.nav{
    
    display:none;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#ffffff;
    flex-direction:column;
    padding:25px;
    border-bottom:1px solid #e5e7eb;
    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

.nav a {

    padding:12px 0;
    font-size:1rem;
}

.nav.active{

    display:flex;
}

   /* .slide img{

        transform:none;
    } */

}

/* ===========================
   SCROLL ANIMATION
=========================== */

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.visible{

    opacity:1;

    transform:none;
}

.menu-toggle{

    display:none;
    border:none;
    background:none;
    font-size:2rem;
    color:#1e3a8a;
    cursor:pointer;
}