/*  ==========================================================
    style.css  |  InvertirAR – Inversiones Financieras
    ==========================================================
    Diseño:  Neomorfo + Neo-brutalista   |   Esquema neutro
    Tipografías:  Inter (headings)  ·  IBM Plex Sans (body)
    Framework base: Bootstrap 5
    ========================================================== */

/*  ----------  Variables de Tema  ---------- */
:root{
    /* Neutros */
    --color-bg: #e5e7eb;          /* gris claro */
    --color-surface: #f5f7fa;     /* superficie tarjetas */
    --color-text: #222222;        /* texto principal */
    --color-text-light: #ffffff;  /* texto claro */

    /* Marca / acentos */
    --color-primary: #2563eb;     /* azul vibrante */
    --color-primary-dark: #1e4fcc;
    --color-accent: #10b981;      /* verde acento */

    /* Sombra neomorfa */
    --shadow-light: -8px -8px 16px rgba(255,255,255,0.6);
    --shadow-dark:  8px  8px 16px rgba(0,0,0,0.15);

    /* Brutalismo */
    --border-brutal: 3px solid #000000;

    /* Tipos */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;

    /* Velocidades */
    --transition-fast: .25s ease;
}

/*  ----------  Reset básico + Bootstrap override  ---------- */
html{scroll-behavior:smooth;}
body{
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-body);
    line-height:1.65;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--color-text);
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
    font-weight:700;
}
section{padding:4rem 0;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast);}
a:hover{color:var(--color-primary-dark);}

/*  ----------  Navegación  ---------- */
header .navbar{
    backdrop-filter:saturate(180%) blur(14px);
    background:rgba(255,255,255,0.8);
    box-shadow:var(--shadow-dark);
}
.navbar-brand{font-weight:700;}
.nav-link{font-weight:600;padding:.75rem 1rem;}

/*  ----------  Hero  ---------- */
#hero{
    position:relative;
    text-align:center;
}
#hero h1,
#hero p{color:#FFFFFF;}
#hero .btn{
    transform:translateZ(0);
    transition:transform var(--transition-fast);
}
#hero .btn:hover{transform:translateY(-3px) scale(1.02);}

/*  ----------  Botones globales  ---------- */
.btn,
button,
input[type='submit']{
    position:relative;
    font-weight:600;
    border:none;
    border-radius:12px;
    padding:.75rem 1.75rem;
    background:linear-gradient(145deg,var(--color-primary),var(--color-primary-dark));
    color:var(--color-text-light);
    box-shadow:var(--shadow-dark),var(--shadow-light);
    transition:all var(--transition-fast);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    box-shadow:var(--shadow-light),var(--shadow-dark);
    transform:translateY(-3px);
}
.btn:active{
    box-shadow:inset 2px 2px 6px rgba(0,0,0,0.2),inset -2px -2px 6px rgba(255,255,255,0.6);
}

/*  ----------  Tarjetas (cards)  ---------- */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--color-surface);
    border-radius:20px;
    box-shadow:var(--shadow-dark),var(--shadow-light);
    transition:transform var(--transition-fast);
    text-align:center;
}
.card:hover{transform:translateY(-6px);}
.card-image{width:100%;height:220px;overflow:hidden;border-radius:20px 20px 0 0;}
.card-image img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center;
}
.card-content{flex:1;padding:1.5rem;}

/*  ----------  Sección Estadísticas  ---------- */
#stats .card{min-height:180px;}
#stats h3{font-size:2rem;margin-bottom:.25rem;}

/*  ----------  Carruseles  ---------- */
.carousel-item{padding:1rem 0;}
.carousel-control-prev-icon,
.carousel-control-next-icon{filter:invert(1);}

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

/*  ----------  Recursos Externos  ---------- */
#resources .list-group-item{
    background:var(--color-surface);
    border:var(--border-brutal);
    transition:background var(--transition-fast);
}
#resources .list-group-item:hover{background:#ffffff;}

/*  ----------  Proceso (list-group numerada)  ---------- */
#process .list-group-item{
    background:var(--color-surface);
    border:none;
    margin:.5rem 0;
    border-radius:12px;
    box-shadow:var(--shadow-dark),var(--shadow-light);
}

/*  ----------  Galería  ---------- */
#gallery img{
    border-radius:16px;
    box-shadow:var(--shadow-dark),var(--shadow-light);
    transition:transform var(--transition-fast);
}
#gallery img:hover{transform:scale(1.05);}

/*  ----------  Testimonios  ---------- */
blockquote{
    font-style:italic;
    position:relative;
    padding-left:1.25rem;
}
blockquote:before{
    content:"“";
    font-size:3rem;
    position:absolute;
    left:0;top:-10px;
    color:var(--color-accent);
}

/*  ----------  Contacto  ---------- */
#contact form{
    border-radius:20px;
    background:var(--color-surface);
    box-shadow:var(--shadow-dark),var(--shadow-light);
}
#contact .form-control{
    background:var(--color-bg);
    border:none;
    border-radius:12px;
    padding:.75rem 1rem;
    box-shadow:inset var(--shadow-dark),inset var(--shadow-light);
}
#contact .form-control:focus{box-shadow:inset 2px 2px 6px rgba(0,0,0,0.15);}

/*  ----------  Footer  ---------- */
footer{
    background:#111111;
    color:#f1f1f1;
    font-size:.9rem;
}
footer a{color:#f1f1f1;font-weight:600;}
footer a:hover{text-decoration:underline;}
footer p{margin-bottom:.5rem;}

/*  ----------  Social Links (texto)  ---------- */
footer a::after{
    content:' ↗';
    font-size:.75rem;
    opacity:.7;
    transition:opacity var(--transition-fast);
}
footer a:hover::after{opacity:1;}

/*  ----------  Enlaces “Leer más”  ---------- */
.read-more{
    display:inline-block;
    margin-top:.5rem;
    font-weight:600;
    color:var(--color-accent);
    position:relative;
}
.read-more::after{
    content:'';
    position:absolute;
    left:0;bottom:-2px;
    width:100%;height:2px;
    background:var(--color-accent);
    transition:transform var(--transition-fast);
    transform:scaleX(0);
    transform-origin:left;
}
.read-more:hover::after{transform:scaleX(1);}

/*  ----------  Éxito (success.html)  ---------- */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*  ----------  Privacy & Terms  ---------- */
.legal-page{padding-top:100px;}

/*  ----------  AOS overrides (3D efecto)  ---------- */
[data-aos]{transform-style:preserve-3d;}
[data-aos][data-aos^="fade"]{transition-property:opacity,transform;}

/*  ----------  Utils  ---------- */
.shadow-neu{box-shadow:var(--shadow-dark),var(--shadow-light);}
.text-shadow-dark{text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
.bg-gradient-dark{
    background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
}
.navbar-toggler{
    display: none;
}