/* ===========================================================
   Proyecto : Método IPOV
   Archivo  : style.css
   Versión  : 0.1
   Autor    : OpenAI + Pablo Gustavo Díaz
   =========================================================== */

/* ===========================================================
   VARIABLES
=========================================================== */

:root{

    --green:#1FAF6C;
    --green-light:#42D98C;
    --green-dark:#118552;

    --dark:#06110C;
    --dark-2:#0C1D16;

    --white:#FFFFFF;

    --gray:#BFC5C3;
    --gray2:#7E8D87;

    --transition:.35s ease;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Manrope',sans-serif;

    background:var(--dark);

    color:white;

    overflow-x:hidden;

}

/* ===========================================================
   LINKS
=========================================================== */

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

}

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

.navbar{

    background:rgba(5,18,12,.82);

    backdrop-filter:blur(15px);

    transition:.3s;

    padding:18px 0;

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

}

.navbar-brand img{

    height:52px;

}

.nav-link{

    color:white;

    font-weight:600;

    margin-left:20px;

}

.nav-link:hover{

    color:var(--green-light);

}

.btn-header{

    border-radius:40px;

    padding:12px 28px;

    font-weight:700;

}

/* ---------- TOGGLER (menú mobile) ---------- */

.navbar-toggler{

    border-color:rgba(255,255,255,.25);

    padding:6px 10px;

}

.navbar-toggler:focus{

    box-shadow:0 0 0 .2rem rgba(66,217,140,.35);

}

.navbar-toggler-icon{

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

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

#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(66,217,140,.18),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(31,175,108,.12),
    transparent 30%),

    linear-gradient(
    160deg,
    #06110C,
    #0B2118 60%,
    #07120D);

}

/* ===========================================================
   GRID BACKGROUND
=========================================================== */

#hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size:45px 45px;

    opacity:.30;

}

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

.hero-tag{

    display:inline-block;

    background:rgba(31,175,108,.15);

    border:1px solid rgba(66,217,140,.35);

    color:var(--green-light);

    padding:10px 18px;

    border-radius:40px;

    letter-spacing:2px;

    font-size:.80rem;

    font-weight:800;

    margin-bottom:25px;

}

#hero h1{

    font-size:4rem;

    line-height:1.08;

    font-weight:800;

    margin-bottom:20px;

}

#hero h2{

    color:var(--green-light);

    font-size:2rem;

    font-weight:700;

    margin-bottom:30px;

}

#hero p{

    color:var(--gray);

    font-size:1.20rem;

    line-height:1.9;

    max-width:620px;

}

/* ===========================================================
   BUTTONS
=========================================================== */

.hero-buttons{

    margin-top:45px;

}

.hero-buttons .btn{

    margin-right:20px;

    margin-bottom:15px;

    border-radius:45px;

    padding:15px 34px;

    font-weight:700;

    transition:.3s;

}

.btn-success{

    background:var(--green);

    border:none;

}

.btn-success:hover{

    background:var(--green-light);

    transform:translateY(-3px);

}

.btn-outline-light:hover{

    color:var(--dark);

}

/* ===========================================================
   LIBRO
=========================================================== */

.hero-book{

    width:520px;

    filter:

    drop-shadow(0px 35px 45px rgba(0,0,0,.55));

    transition:.5s;

}

.hero-book:hover{

    transform:

    rotate(-2deg)

    scale(1.02);

}

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

section{

    padding:120px 0;

    position:relative;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:3rem;

    font-weight:800;

}

.section-title p{

    color:var(--gray);

    font-size:1.15rem;

}

/* ===========================================================
   CARDS
=========================================================== */

.card-ipov{

    background:#102118;

    border:1px solid rgba(255,255,255,.05);

    border-radius:24px;

    padding:35px;

    transition:.35s;

}

.card-ipov:hover{

    transform:translateY(-10px);

    border-color:rgba(66,217,140,.35);

    box-shadow:

    0 25px 45px rgba(0,0,0,.35);

}

/* ===========================================================
   FORMULA
=========================================================== */

.formula-box{

    background:#0F2118;

    border:2px solid var(--green);

    border-radius:20px;

    padding:45px;

    text-align:center;

}

.formula{

    font-size:3rem;

    font-weight:800;

    color:var(--green-light);

}

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

footer{

    background:#040907;

    padding:70px 0;

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

}

footer p{

    color:var(--gray2);

    margin:0;

}

/* ===========================================================
   UTILIDADES
=========================================================== */

.text-green{

    color:var(--green-light);

}

.bg-green{

    background:var(--green);

}

.mt-80{

    margin-top:80px;

}

.mb-80{

    margin-bottom:80px;

}

/*==========================================================
LIBRO
==========================================================*/

#libro{

    background:#08130F;

}

#libro h2{

    font-weight:800;

}

#libro p{

    color:var(--gray);

    line-height:1.9;

}

#libro .card-ipov{

    min-height:230px;

}

#libro i{

    color:var(--green-light);

}

/*==========================================================
MÉTODO
==========================================================*/

#metodo{

    background:linear-gradient(
        180deg,
        #08130F 0%,
        #0B1D16 100%);

    position:relative;

}

#metodo::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(
            rgba(66,217,140,.06) 1px,
            transparent 1px);

    background-size:26px 26px;

    opacity:.45;

}

#metodo .container{

    position:relative;

    z-index:2;

}

#metodo h2{

    font-weight:800;

    line-height:1.15;

}

#metodo h3{

    font-weight:700;

}

#metodo p{

    color:var(--gray);

    max-width:900px;

    margin:auto;

    line-height:2;

}

#metodo .card-ipov{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(66,217,140,.08);

    backdrop-filter:blur(8px);

}

#metodo .card-ipov:hover{

    transform:translateY(-12px) scale(1.03);

}

#metodo h6{

    margin-top:12px;

    font-weight:700;

}

/*==========================================================
FÓRMULA IPOV
==========================================================*/

#formula{

    position:relative;

    background:
        linear-gradient(
            135deg,
            #07120D 0%,
            #103221 100%);

    overflow:hidden;

}

#formula::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        url("../img/backgrounds/mapa-dashboard.png");

    background-size:cover;

    background-position:center;

    opacity:.08;

    pointer-events:none;

}

#formula .container{

    position:relative;

    z-index:2;

}

.formula-title{

    color:var(--green-light);

    font-size:.9rem;

    font-weight:800;

    letter-spacing:4px;

    margin-bottom:25px;

}

.formula-box{

    background:

        rgba(7,18,13,.72);

    border:2px solid rgba(66,217,140,.35);

    border-radius:26px;

    padding:70px 40px;

    backdrop-filter:blur(16px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.45);

}

.formula{

    font-size:4.2rem;

    font-weight:800;

    color:white;

    letter-spacing:2px;

}

.formula sub{

    font-size:.35em;

    bottom:-0.15em;

}

.formula-text{

    max-width:720px;

    margin:auto;

    color:var(--gray);

    font-size:1.15rem;

    line-height:2;

}

/*==========================================================
PANEL360
==========================================================*/

#panel360{

    background:#08130F;

}

#panel360 h2{

    line-height:1.2;

}

#panel360 p{

    color:var(--gray);

    line-height:1.9;

}

.dashboard-img{

    width:100%;

    max-width:640px;

    border-radius:20px;

    box-shadow:
        0 40px 80px rgba(0,0,0,.45);

    transition:.45s;

}

.dashboard-img:hover{

    transform:translateY(-8px);

}

#panel360 .card-ipov{

    min-height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/*==========================================================
CREDENCIALES
==========================================================*/

#credenciales{

    background:linear-gradient(
        180deg,
        #07120D,
        #0D241A);

}

#credenciales p{

    color:var(--gray);

    line-height:1.9;

}

.numero-ipov{

    font-size:4rem;

    font-weight:900;

    color:var(--green-light);

    margin-bottom:15px;

    line-height:1;

}

#credenciales .card-ipov{

    padding:45px 30px;

    height:100%;

}

#credenciales h5{

    margin-bottom:18px;

    font-weight:700;

}

/*==========================================================
AUTOR
==========================================================*/

#autor{

    background:#08130F;

}

.autor-foto{

    max-width:340px;

    border-radius:24px;

    box-shadow:

        0 35px 70px rgba(0,0,0,.45);

}

#autor p{

    color:var(--gray);

    line-height:1.9;

}

.ipov-quote{

    margin-top:40px;

    padding:30px;

    border-left:5px solid var(--green);

    background:rgba(255,255,255,.03);

    border-radius:12px;

    font-size:1.15rem;

    font-style:italic;

    color:white;

}

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

#comprar{

    position:relative;

    background:linear-gradient(
        160deg,
        #103221 0%,
        #08130F 100%);

    overflow:hidden;

}

#comprar::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at center,
        rgba(66,217,140,.12),
        transparent 60%);

    pointer-events:none;

}

#comprar .container{

    position:relative;

    z-index:2;

}

#comprar h2{

    line-height:1.15;

}

#comprar p{

    color:var(--gray);

    max-width:760px;

    margin:auto;

    line-height:2;

}

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

footer{

    background:#040907;

}

footer a{

    color:var(--green-light);

    font-weight:700;

}

footer a:hover{

    color:white;

}