/* ============================================================
   style.css  |  FinAr Invest
   Modern Neutral Neumorphic Theme + Parallax
   ============================================================ */

/* ----------  CSS  Variables  ---------- */
:root{
    /* Neutrals */
    --bg:#f0f0f3;
    --surface:#e0e0e0;
    --shadow-light:#ffffff;
    --shadow-dark:#bebebe;
    /* Typography */
    --text-dark:#222222;
    --text-light:#ffffff;
    /* Brand Colors */
    --primary:#2563eb;
    --primary-dark:#1e4fc4;
    --accent:#ff8e3c;
    --accent-dark:#e27a2d;
    /* Shadows */
    --neu-outer:8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
    --neu-inner: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    /* Transitions */
    --fast:.25s ease;
}

/* ----------  Global Resets & Helpers  ---------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
    font-family:'Lato', sans-serif;
    background:var(--bg);
    color:var(--text-dark);
    line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Roboto', sans-serif;
    color:var(--text-dark);
    margin-bottom:.75rem;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
}

.section{padding:4rem 1.5rem;}
.section:nth-of-type(even){background:var(--surface);}

/* ----------  Navbar  ---------- */
.navbar{
    background:var(--surface)!important;
    box-shadow:var(--neu-outer);
}
.navbar-burger span{background:var(--text-dark);}

/* ----------  Neumorphism Container  ---------- */
.neu{
    background:var(--surface);
    border-radius:18px;
    box-shadow:var(--neu-outer);
}

/* ----------  Cards  ---------- */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--surface);
    border-radius:18px;
    box-shadow:var(--neu-outer);
    transition:transform var(--fast), box-shadow var(--fast);
}
.card:hover{transform:translateY(-6px); box-shadow:0 15px 25px rgba(0,0,0,.1), var(--neu-outer);}

.card-image,
.image-container{
    width:100%;
    height:220px;
    overflow:hidden;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ----------  Hero  ---------- */
#hero{
    position:relative;
    color:var(--text-light);
    text-align:center;
}
#hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.35));
}
#hero .hero-body{position:relative; z-index:2;}
#hero .title,
#hero .subtitle{color:var(--text-light);}

/* ----------  Parallax  ---------- */
.parallax{
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    will-change:background-position;
}

/* ----------  Buttons  ---------- */
.btn,
.button,
input[type='submit'],
button{
    font-family:'Roboto', sans-serif;
    padding:.75rem 1.5rem;
    border:none;
    border-radius:12px;
    cursor:pointer;
    background:var(--primary);
    color:var(--text-light);
    box-shadow:var(--neu-outer);
    transition:background var(--fast), box-shadow var(--fast), transform var(--fast);
}
.btn:hover,
.button:hover,
input[type='submit']:hover,
button:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}
.btn:active,
.button:active,
input[type='submit']:active,
button:active{
    box-shadow:var(--neu-inner);
    transform:translateY(1px);
}

/* Accent style */
.is-accent{background:var(--accent);}
.is-accent:hover{background:var(--accent-dark);}

/* ----------  Accordions (Metodología)  ---------- */
.message-header{
    background:var(--surface);
    cursor:pointer;
}
.message-body{
    background:var(--surface);
    display:none;
    border-radius:0 0 12px 12px;
}
.message.active .message-body{display:block;}

/* ----------  Switch / Toggle  ---------- */
.switch{
    display:inline-block;
    position:relative;
    width:60px;
    height:30px;
    margin:0 1rem;
}
.switch input{display:none;}
.switch .check{
    position:absolute;
    inset:0;
    background:var(--surface);
    border-radius:30px;
    box-shadow:var(--neu-inner);
}
.switch .check::after{
    content:'';
    position:absolute;
    top:4px; left:4px;
    width:22px; height:22px;
    background:var(--primary);
    border-radius:50%;
    transition:transform var(--fast);
    box-shadow:var(--neu-outer);
}
.switch input:checked + .check::after{
    transform:translateX(30px);
}

/* ----------  Table (Calendario)  ---------- */
.table{
    background:var(--surface);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--neu-outer);
}
.table th,
.table td{color:var(--text-dark);}

/* ----------  Carousel (Webinars)  ---------- */
.carousel{
    position:relative;
    overflow:hidden;
}
.carousel-item{
    padding:2rem;
    min-height:200px;
    animation:slide 18s infinite;
}
@keyframes slide{
    0%,20%{transform:translateX(0);}
    25%,45%{transform:translateX(-100%);}
    50%,70%{transform:translateX(-200%);}
    75%,95%{transform:translateX(-300%);}
}

/* ----------  Pricing Toggle Labels ---------- */
#planLabel{font-weight:600;}

/* ----------  Contact Form ---------- */
#contactForm .input,
#contactForm .textarea{
    background:var(--surface);
    border:none;
    border-radius:12px;
    box-shadow:var(--neu-inner);
    padding:.75rem;
    transition:box-shadow var(--fast);
}
#contactForm .input:focus,
#contactForm .textarea:focus{
    outline:none;
    box-shadow:0 0 0 3px var(--primary);
}

/* ----------  Footer ---------- */
footer{
    padding:2rem 1rem;
    color:var(--text-dark);
    text-align:center;
}
footer a{
    color:var(--primary);
    font-weight:600;
    transition:color var(--fast);
}
footer a:hover{color:var(--primary-dark);}
footer p{margin:.5rem 0;}

/* ----------  Social Links (textual) ---------- */
footer a[href*="facebook"],
footer a[href*="x.com"],
footer a[href*="instagram"]{
    position:relative;
    padding-left:1.5rem;
}
footer a[href*="facebook"]::before,
footer a[href*="x.com"]::before,
footer a[href*="instagram"]::before{
    content:'#';
    position:absolute;
    left:0;
    color:var(--accent);
}

/* ----------  Utility Classes ---------- */
.text-center{text-align:center;}
.mt-2{margin-top:1rem;}
.mb-2{margin-bottom:1rem;}
.hidden{display:none!important;}

/* ----------  Read More Links ---------- */
.read-more{
    color:var(--accent);
    font-weight:600;
    transition:color var(--fast);
}
.read-more:hover{color:var(--accent-dark); text-decoration:underline;}

/* ----------  Pages Specific ---------- */
.success-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.legal-page{padding-top:100px;} /* privacy & terms */

/* ----------  Background Helpers ---------- */
.bg-cover{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

/* ----------  Media Queries ---------- */
@media (max-width:768px){
    .navbar-menu{background:var(--surface);}
    .carousel-item{padding:1rem;}
    .section{padding:3rem 1rem;}
}