/* ================  ROOT & RESET  ================ */
:root{
    /* Analogous Palette: Bleu -> Cyan -> Teal */
    --color-primary:#0d6efd;           /* azul vivo */
    --color-secondary:#0dcaf0;         /* cyan brillante */
    --color-accent:#20c997;            /* verde azulado */
    --color-dark:#111827;
    --color-light:#f8f9fa;
    --color-muted:#6c757d;

    --gradient-primary:linear-gradient(45deg,var(--color-primary),var(--color-secondary));
    --gradient-secondary:linear-gradient(45deg,var(--color-secondary),var(--color-accent));
    --gradient-dark:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));

    --radius:0.5rem;
    --transition:all .35s ease;
}
*,
*::before,
*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
body{
    font-family:'Open Sans',sans-serif;
    color:var(--color-dark);
    background-color:var(--color-light);
    line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Raleway',sans-serif;
    font-weight:700;
    color:#222;
    margin-bottom:1rem;
}

/* ================  GLOBAL ELEMENTS  ================ */
img{max-width:100%;display:block;height:auto;}
a{text-decoration:none;color:var(--color-primary);transition:var(--transition);}
a:hover{color:var(--color-accent);text-decoration:underline;}
.section-title{text-align:center;margin-bottom:2rem;text-shadow:1px 1px 3px rgba(0,0,0,.5);}
.btn,
button,
input[type='submit']{
    display:inline-block;
    font-weight:600;
    padding:.75rem 1.5rem;
    border-radius:var(--radius);
    border:none;
    background-image:var(--gradient-primary);
    color:#fff!important;
    transition:var(--transition);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background-image:var(--gradient-secondary);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.btn:active,
button:active,
input[type='submit']:active{
    transform:translateY(0);
}

/* Leer más links  */
.read-more{
    font-weight:600;
    color:var(--color-secondary);
    position:relative;
    padding-right:1.5rem;
}
.read-more::after{
    content:'→';
    position:absolute;
    right:0;
    transition:var(--transition);
}
.read-more:hover::after{transform:translateX(4px);}

/* ================  NAVBAR  ================ */
.navbar{
    transition:background-color .4s ease;
    backdrop-filter:saturate(180%) blur(10px);
}
.navbar.scrolled{
    background-color:rgba(17,24,39,.9)!important;
}
.navbar .nav-link{color:#fff!important;margin-left:.75rem;}
.navbar .nav-link:hover{color:var(--color-secondary)!important;}

/* ================  HERO  ================ */
#hero{
    position:relative;
    overflow:hidden;
}
#hero .container{z-index:2;position:relative;}
#hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gradient-dark);
    z-index:1;
}
#heroParallax{
    background-image:url('../image/hero-noise-layer.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    opacity:.25;
    transform:translateZ(0);
}

/* ================  SECTION GENERICS  ================ */
section{
    position:relative;
    padding:4rem 0;
}
section[data-prompt]::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.25);
    z-index:0;
    pointer-events:none;
}
section>.container{position:relative;z-index:2;}

/* ================  OUR PROCESS – ACCORDION  ================ */
.accordion-button{
    font-weight:600;
    color:#fff;
    background-color:transparent;
}
.accordion-button::after{filter:invert(1);}
.accordion-item{border:none;}
.accordion-body{color:#e0e0e0;}

/* ================  GALLERY – SLIDER  ================ */
.carousel-item{
    height:60vh;
    min-height:400px;
}
.carousel-item img{
    object-fit:cover;
    height:100%;
    width:100%;
}

/* ================  CARD COMPONENTS  ================ */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    border:none;
    border-radius:var(--radius);
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    transition:var(--transition);
    text-align:center;
}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,.15);}
.card-image{
    width:100%;
    height:220px;
    overflow:hidden;
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    margin:0 auto;
}
.card-content{
    padding:1.5rem;
    flex:1;
}
.card-content h5{color:var(--color-primary);}

/* ================  CLIENTELE LOGOS  ================ */
#clientele img{
    filter:grayscale(100%) brightness(110%);
    opacity:.8;
    transition:var(--transition);
}
#clientele img:hover{
    filter:grayscale(0%) brightness(100%);
    opacity:1;
}

/* ================  CONTACT FORM  ================ */
#contact form{
    backdrop-filter:blur(10px);
    background-color:rgba(0,0,0,.6);
    border-radius:var(--radius);
}
#contact label{color:#fff;}
#contact .form-control{
    background-color:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
}
#contact .form-control::placeholder{color:#ddd;}
#contact .form-control:focus{
    box-shadow:none;
    border-color:var(--color-secondary);
}

/* ================  FOOTER  ================ */
footer{
    background:var(--color-dark);
    color:#ccc;
    font-size:.9rem;
}
footer a{color:var(--color-secondary);}
footer a:hover{color:#fff;text-decoration:underline;}
footer nav a{margin:.25rem .5rem;}
/* simple text social links hover */
footer a[target="_blank"]:hover{color:var(--color-accent);}

/* ================  COOKIES POPUP  ================ */
#cookiePopup{
    font-size:.875rem;
}
#cookiePopup a{color:var(--color-secondary);}
#cookiePopup button{padding:.5rem 1rem;font-size:.9rem;}

/* ================  PARALLAX UTILITY  ================ */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

/* ================  LEGAL PAGES  ================ */
.legal-page{padding-top:100px;}
.legal-page h1{margin-bottom:2rem;}

/* ================  SUCCESS PAGE  ================ */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    background-image:var(--gradient-secondary);
    color:#fff;
}
.success-page .btn{margin-top:2rem;}

/* ================  ANIMATIONS & AOS SUBSTITUTE  ================ */
[data-animate]{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease,transform .6s ease;
}
[data-animate].active{
    opacity:1;
    transform:translateY(0);
}

/* ================  MEDIA QUERIES  ================ */
@media (max-width:768px){
    h1{font-size:1.8rem;}
    .carousel-item{height:50vh;}
    .navbar .nav-link{margin-left:0;margin-right:0;}
}
.navbar-toggler{
    display: none;
}