/* =====================================================
   CONSULTORÍA 360° – THEME STYLESHEET
   Brutalism ✕ Biomorphic ✕ Analogous Palette
   Author: UI/UX Team 2024
   ===================================================== */

/* ------------------------------- */
/* 1. ROOT & GLOBAL RESET          */
/* ------------------------------- */
:root{
    /* Analogous palette (Blue–Cyan–Violet) */
    --clr-primary        : hsl(204, 100%, 53%); /* Blue */
    --clr-primary-dark   : hsl(204, 100%, 40%);
    --clr-secondary      : hsl(191, 100%, 45%); /* Cyan */
    --clr-secondary-dark : hsl(191, 100%, 32%);
    --clr-accent         : hsl(259, 100%, 60%); /* Violet */
    --clr-accent-dark    : hsl(259, 100%, 46%);
    --clr-bg             : #f9f9f9;
    --clr-bg-alt         : #efefef;
    --clr-text           : #222222;
    --clr-text-light     : #ffffff;
    --clr-gradient-hero  : linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.2));
    --radius-soft        : 20px;
    --transition-base    : 0.3s cubic-bezier(.4,0,.2,1);
    --shadow-card        : 0 10px 25px rgba(0,0,0,.08);
    --shadow-btn         : 0 6px 15px rgba(0,0,0,.15);
    --z-fixed            : 1000;
    --font-heading       : 'Oswald', sans-serif;
    --font-body          : 'Nunito', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* ------------------------------- */
/* 2. TYPOGRAPHY & BASE ELEMENTS   */
/* ------------------------------- */
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--clr-text);
    background:var(--clr-bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    margin:0 0 .5em;
    line-height:1.15;
    text-wrap:balance;
}
p{margin:0 0 1.25em}

/* Utility containers */
.container{width:min(90%,1200px);margin-inline:auto}
.text-center{text-align:center}

/* ------------------------------- */
/* 3. NAVIGATION (FIXED)           */
/* ------------------------------- */
.site-header{
    position:fixed;top:0;left:0;width:100%;
    background:var(--clr-bg);
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    z-index:var(--z-fixed);
    padding:.75rem 0;
}
.site-header .logo{font-family:var(--font-heading);font-weight:700;color:var(--clr-primary);font-size:1.5rem;text-decoration:none}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center}
.main-nav a{color:var(--clr-text);text-decoration:none;font-weight:600;transition:color var(--transition-base)}
.main-nav a:hover{color:var(--clr-accent)}

/* ------------------------------- */
/* 4. SECTION BASE                 */
/* ------------------------------- */
.brutal-section{padding:4rem 0;position:relative;background:#64646460;}
.brutal-section.alt-bg{background:var(--clr-bg-alt)}
.section-title{font-size:clamp(1.75rem,5vw,2.5rem);position:relative;padding-bottom:.5rem}
.section-title::after{
    content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:60px;height:4px;border-radius:2px;background:var(--clr-secondary);
}
.big-title{font-size:clamp(2rem,6vw,3.5rem)}

/* ------------------------------- */
/* 5. HERO SECTION                 */
/* ------------------------------- */
.hero-section{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    color:var(--clr-text-light);
    background-size:cover;background-repeat:no-repeat;
    background-position:center;
    background-blend-mode:overlay;
}
#hero-particles{
    position:absolute;inset:0;pointer-events:none;z-index:-1;
}
/* optional CSS particle shapes (fallback) */
#hero-particles .particle{
    position:absolute;width:8px;height:8px;
    background:var(--clr-secondary);border-radius:50%;
    opacity:.8;animation:float 12s infinite ease-in-out;
}
@keyframes float{
    0%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-100vh) scale(.6)}
    100%{transform:translateY(0) scale(1)}
}

/* ------------------------------- */
/* 6. BUTTONS (GLOBAL)             */
/* ------------------------------- */
.btn,
button,
input[type='submit']{
    font-family:var(--font-heading);
    cursor:pointer;
    display:inline-block;
    padding:.8rem 2rem;
    border-radius:var(--radius-soft);
    border:none;
    color:var(--clr-text-light);
    background:var(--clr-primary);
    box-shadow:var(--shadow-btn);
    text-decoration:none;
    font-size:1rem;
    transition:transform var(--transition-base),background var(--transition-base),box-shadow var(--transition-base);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-secondary);
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.2);
}
.primary-btn{background:var(--clr-primary)}
.secondary-btn{background:var(--clr-accent)}
.ghost-btn{
    background:transparent;color:var(--clr-primary);box-shadow:none;border:2px solid var(--clr-primary)
}
.ghost-btn:hover{background:var(--clr-primary);color:var(--clr-text-light)}

/* Read-more link */
.read-more{
    font-weight:700;
    color:var(--clr-accent);
    position:relative;
    transition:color var(--transition-base)
}
.read-more::after{
    content:'→';
    margin-left:.25rem;
    transition:transform var(--transition-base)
}
.read-more:hover{color:var(--clr-secondary)}
.read-more:hover::after{transform:translateX(4px)}

/* ------------------------------- */
/* 7. CARDS / FLEX-CENTERED BLOCKS */
/* ------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;flex-direction:column;align-items:center;
    background:#fff;
    border-radius:var(--radius-soft);
    box-shadow:var(--shadow-card);
    overflow:hidden;
    text-align:center;
    transition:transform var(--transition-base),box-shadow var(--transition-base)
}
.card:hover{transform:translateY(-6px);box-shadow:0 15px 30px rgba(0,0,0,.15)}
.card-image,
.image-container{
    width:100%;
    height:280px;
    overflow:hidden;
    border-bottom:4px solid var(--clr-primary);
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
.card-content{padding:1.5rem}

/* ------------------------------- */
/* 8. STATS / PROGRESS BARS        */
/* ------------------------------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem;margin-top:2rem}
.stat-widget{display:flex;flex-direction:column;align-items:center}
.stat-number{font-family:var(--font-heading);font-size:2.5rem;color:var(--clr-primary);margin-bottom:.25rem}

.progress-wrapper{margin-top:2rem}
.progress-label{font-weight:700;margin:.5rem 0}
.progress-bar{width:100%;height:10px;background:#d8d8d8;border-radius:5px;overflow:hidden}
.progress-bar span{display:block;height:100%;background:var(--clr-secondary);animation:grow 2s ease-out forwards}
@keyframes grow{from{width:0}to{width:var(--value,100%)}}

/* ------------------------------- */
/* 9. CONTACT FORM                 */
/* ------------------------------- */
.styled-form{display:grid;gap:1rem}
.form-group{display:flex;flex-direction:column}
.styled-form input,
.styled-form textarea{
    padding:.75rem 1rem;border:2px solid #ccc;border-radius:var(--radius-soft);
    font-family:var(--font-body);font-size:1rem;transition:border-color var(--transition-base)
}
.styled-form input:focus,
.styled-form textarea:focus{outline:none;border-color:var(--clr-primary)}
.contact-section.alt-bg .styled-form input,
.contact-section.alt-bg .styled-form textarea{background:#fff}

/* ------------------------------- */
/* 10. FOOTER                      */
/* ------------------------------- */
.site-footer{
    background:#111;
    color:#bbb;
    padding:3rem 0 2rem;
    font-size:.9rem;
}
.footer-cols{display:flex;flex-wrap:wrap;gap:2rem}
.footer-col{flex:1 1 200px}
.footer-col h3{color:var(--clr-text-light);margin-bottom:1rem;font-size:1.1rem}
.footer-col a{color:#bbb;text-decoration:none;transition:color var(--transition-base)}
.footer-col a:hover{color:var(--clr-secondary)}
.social-link{display:inline-block;margin-right:.75rem;font-weight:700}

/* ------------------------------- */
/* 11. PAGE-SPECIFIC RULES         */
/* ------------------------------- */
/* Success page */
.success-page,
.success-wrapper{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    text-align:center;padding:2rem;
}
/* Privacy & Terms pages */
.legal-page{padding-top:100px}

/* Hero text always white */
.hero-section h1,
.hero-section p,
.hero-section .btn{color:var(--clr-text-light)}

/* Parallax helper */
.parallax{background-attachment:fixed}

/* Glassmorphism helper */
.glass{
    backdrop-filter:blur(12px) saturate(150%);
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.3);
}

/* ------------------------------- */
/* 12. ANIMATED BIOMORPHIC BLOBS   */
/* ------------------------------- */
.blob{
    position:absolute;
    width:220px;height:220px;
    background:var(--clr-accent);
    border-radius:50% 60% 40% 70%/60% 40% 60% 40%;
    opacity:.15;
    animation:blob-move 25s infinite;
}
@keyframes blob-move{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(60px,-80px) scale(1.3)}
}

/* ------------------------------- */
/* 13. MEDIA QUERIES               */
/* ------------------------------- */
@media (max-width:768px){
    .main-nav ul{flex-direction:column;gap:.5rem}
    .site-header{padding:1rem}
    .footer-cols{flex-direction:column;gap:1.5rem}
}

/* ------------------------------- */
/* 14. ACCESSIBILITY & MISC        */
/* ------------------------------- */
:focus-visible{outline:3px dashed var(--clr-accent);outline-offset:3px}
img{max-width:100%;height:auto}
a.skip-link{
    position:absolute;top:-40px;left:0;
    background:#000;color:#fff;padding:.5rem 1rem;
    z-index:var(--z-fixed);transition:top var(--transition-base)
}
a.skip-link:focus{top:0}