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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#ffffff;
    color:#333333;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    overflow-x:hidden;

}

/* ==========================================
   VARIABLES
========================================== */
:root{

    --primary:#0F3B68;     /* Azul corporativo */

    --accent:#f7c600;      /* Naranja logo */

    --black:#ffffff;

    --dark:#f8f9fa;

    --card:#ffffff;

    --border:#e5e7eb;

    --text:#444444;

    --transition:0.3s;

}


/* ==========================================
   CONTAINER GLOBAL
========================================== */

.container{

    width:100%;

    max-width:1400px;

    margin:auto;


}

/* ==========================================
   TITULOS GENERALES
========================================== */

.section-title{

    margin-bottom:70px;

}

.section-title.center{

    text-align:center;

}

.section-title span{

    color:var(--primary);

    letter-spacing:4px;

    font-size:13px;

    font-weight:700;

}

.section-title h2{

    font-size:52px;

    margin-top:15px;

    line-height:1.1;

}

.section-description{

    max-width:700px;

    margin:25px auto 0 auto;

    color:var(--text);

    line-height:1.8;

}

/* ==========================================
   SECTIONS
========================================== */

section{

    padding:120px 8%;

}

/* ==========================================
   NAVBAR
========================================== */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:#0F3B68;

    backdrop-filter:blur(12px);

 

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 40px;

}

.logo-container{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo{

    width:60px;

    height:60px;

    object-fit:contain;

}

.logo-text h2{

    font-size:18px;
    color: white;

}

.logo-text span{

    color:var(--accent);

    font-size:12px;

    letter-spacing:3px;

}

nav{

    display:flex;

    align-items:center;

    gap:35px;

}

nav a{

    text-decoration:none;

    color:white;

    font-size:14px;

    transition:var(--transition);

}

nav a:hover{

    color:var(--accent);

}

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


.hero-content{

    max-width:850px;

}

.hero-tag{

    color:white;

    letter-spacing:4px;

    font-size:13px;

    font-weight:700;

}

.hero-content h1{

    font-size:82px;

    line-height:0.95;

    margin-top:25px;

    margin-bottom:35px;

    font-weight:800;

    letter-spacing:-3px;

    color: white;

}

.hero-content p{

    max-width:760px;

    color:var(--text);

    line-height:1.9;

    font-size:19px;

    margin-bottom:45px;

    color:rgba(255,255,255,0.9);

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    background:var(--accent);

    color:white;

    text-decoration:none;

    padding:18px 42px;

    border-radius:4px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    border:
    1px solid rgba(255,255,255,0.12);

    color:#0F3B68;  

    text-decoration:none;

    padding:18px 42px;

    border-radius:4px;

    transition:var(--transition);

}

.btn-secondary:hover{

    color:var(--accent);

    border-color:var(--primary);

}

/* ==========================================
   STATS
========================================== */

.stats-section{

    background:#ffffff;

    position:relative;

    padding-top:180px;

}

.stats-grid{

    display:grid;

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

    gap:30px;

    position:relative;

    margin-top:-120px;

    z-index:20;

}
.stat-card{

    background:white;

    border:1px solid #e5e7eb;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);





    border-radius:20px;

    padding:40px;

    backdrop-filter:blur(10px);

    transition:.3s;

}


.stat-card:hover{

    transform:translateY(-5px);

    border-color:
    rgba(244,137,3,0.25);

}

.stat-card h3{

    color:var(--primary);

    font-size:54px;

    margin-bottom:15px;

}

.stat-card p{

    color:#666;

    line-height:1.7;

}

/* ==========================================
   EMPRESA
========================================== */

.about-section{

    background:white;

}

.about-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.image-placeholder{

    width:450px;

    height:450px;

    overflow:hidden;

    border-radius:8px;

    border:1px solid rgba(255,255,255,0.08);

    background:#111111;

}

.image-placeholder img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}







.about-content p{

    color:var(--text);

    line-height:2;

    margin-bottom:30px;

    font-size:16px;

}

.about-features{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.feature-item{

    background: white;

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

    padding:18px 22px;

    border-radius:4px;

    transition:var(--transition);

}

.feature-item:hover{

    border-color:
    rgba(244,137,3,0.25);

    transform:
    translateY(-3px);

}

/* ==========================================
   PLANTAS
========================================== */

.plants-section{

    background:#f8f9fa;

}

/* ==========================================
   GRILLA GENERAL DE TARJETAS
========================================== */

.cards-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:25px;

}

/* ==========================================
   TARJETA BASE
========================================== */

.info-card,
.service-card{

    background:var(--card);

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

    padding:40px;

    transition:var(--transition);

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.info-card:hover,
.service-card:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(244,137,3,0.25);

}

/* ==========================================
   PLANTAS
========================================== */

.info-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:24px;

}

.info-card p{

    color:#555555;

    margin-bottom:10px;

    font-size:16px;

}

.info-card span{

    color:#666666;

    font-size:15px;

}

/* ==========================================
   SERVICIOS
========================================== */

.services-section{

    background:white;

}

.service-card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:24px;

}

.service-card p{

    color:var(--text);

    line-height:1.9;

}

/* ==========================================
   EFECTO DE TRANSICIÓN ENTRE BLOQUES
========================================== */

.about-section,
.plants-section,
.services-section{

    position:relative;

}

/* ==========================================
   AJUSTES VISUALES
========================================== */

.about-section .section-title,
.plants-section .section-title,
.services-section .section-title{

    max-width:900px;

}

.about-section .section-title h2,
.plants-section .section-title h2,
.services-section .section-title h2{

    max-width:700px;

}

/* ==========================================
   SEPARACIÓN VISUAL
========================================== */

.plants-section{

    border-top:
    1px solid
    rgba(255,255,255,0.03);

    border-bottom:
    1px solid
    rgba(255,255,255,0.03);

}

/* ==========================================
   HOVER PREMIUM
========================================== */

.info-card,
.service-card,
.feature-item{

    box-shadow:
    0 0 0
    rgba(0,0,0,0);

}

.section-title h2{

    color:#222222;

}
.info-card:hover,
.service-card:hover,
.feature-item:hover{

    box-shadow:
    0 10px 30px
    rgba(0,0,0,0.25);

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

.contact-section{

    background:#f8f9fa;

    border-top:
    1px solid rgba(255,255,255,0.03);

}

.contact-grid{

    display:grid;

    grid-template-columns:
    380px 1fr;

    gap:35px;

    align-items:stretch;

}

/* ==========================================
   TARJETA INFORMACIÓN
========================================== */

.contact-card{

    background:white;

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

    padding:40px;

    height:100%;

}

.contact-card h3{

    font-size:30px;

    margin-bottom:20px;

}

.contact-card p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:35px;

}

.contact-item{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:18px 0;

    border-bottom:
    1px solid rgba(255,255,255,0.06);

}

.contact-label{

    color:var(--primary);

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

}

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

.contact-form{

    background:#ffffff;

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

    padding:40px;

}

.form-row{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:20px;

}

.form-group{

    margin-bottom:20px;

}

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

    width:100%;

    background:white;

    border:
    1px solid #dcdcdc;

    color:#333333;

    padding:18px 20px;

    border-radius:4px;

    outline:none;

    font-size:15px;

    transition:var(--transition);

}

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

    border-color:var(--primary);

}

.contact-form textarea{

    resize:none;

}

.contact-button{

    width:100%;

    border:none;

    cursor:pointer;

    font-size:15px;

}

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

.cta-section{

    background:
    linear-gradient(
        135deg,
        #0F3B68,
        #1F5A99
    );

    text-align:center;

    padding:100px 8%;

}

.cta-content{

    max-width:900px;

    margin:auto;

}

.cta-content span{

    display:block;

    color:white;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:20px;

}

.cta-content h2{

    color: white;

    font-size:56px;

    line-height:1.1;

    margin-bottom:25px;

}

.cta-content p{

    color:
    rgba(255,255,255,0.85);


    max-width:700px;

    margin:0 auto 35px auto;

    line-height:1.8;

    font-size:18px;

}

.cta-section .btn-primary{

    background:var(--accent);

    color:black;

}

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

footer{

    background:#0F3B68;

    border-top:
    1px solid rgba(255,255,255,0.05);

}

.footer-container{

    padding:70px 8%;

    display:flex;

    justify-content:space-between;

    gap:40px;

}

.footer-brand{

    max-width:500px;

}

.footer-brand h3{

    margin-bottom:15px;
    color: white;

}

.footer-brand p{

    color:rgba(255,255,255,0.85);

    line-height:1.8;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-links a{

    text-decoration:none;

    color:white;

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--primary);

}

.footer-bottom{

    text-align:center;

    padding:25px;

    border-top:
    1px solid rgba(255,255,255,0.05);

    color:rgba(255,255,255,0.75);

    font-size:14px;

}

/* ==========================================
   RESPONSIVE TABLET
========================================== */
@media(max-width:1000px){

    .contact-grid{

        grid-template-columns:1fr;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .image-placeholder{

        width:100%;

        max-width:350px;

        height:350px;

        margin:auto;

    }

    .hero-content h1{

        font-size:62px;

    }

}

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

@media(max-width:768px){

    nav{

        display:none;

    }

    section{

        padding:90px 6%;

    }

    .hero{

        padding-top:150px;

    }

    .hero-content h1{

        font-size:44px;

        letter-spacing:-1px;

    }

    .hero-content p{

        font-size:16px;

    }

    .section-title h2{

        font-size:36px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:25px;

    }

    .contact-card{

        padding:25px;

    }

    .cta-content h2{

        font-size:34px;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   RESPONSIVE EXTRA SMALL
========================================== */

@media(max-width:480px){

    .hero-content h1{

        font-size:36px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        text-align:center;

    }

    .hero-buttons{

        flex-direction:column;

    }

}




.logo-text h2{
    font-size:18px;
    white-space:nowrap;
    color: white;
}

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

.hero{

    position:relative;

    overflow:visible;

    background:none;

}

.hero-video{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter: brightness(85%)



}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.45)
    );

    z-index:1;

}

.hero .container{

    position:relative;

    z-index:2;

}



@keyframes slowZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }

}

.hero::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    height:320px;

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0.85) 60%,
        white 100%
    );

    z-index:1;

}






html,
body{
    overflow-x:hidden;
    width:100%;
}

@media (max-width:768px){

    .about-grid{
        grid-template-columns: 1fr;
    }

}

.about-image img{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
}

@media (max-width: 768px){

    .about-grid{
        grid-template-columns: 1fr;
        gap:40px;
    }

    .image-placeholder{
        width:100%;
        max-width:350px;
        height:auto;
    }

    .image-placeholder img{
        width:100%;
        height:auto;
        display:block;
    }

    .about-features{
        grid-template-columns:1fr;
    }

}