/*==================================================
EN CLARO
style.css
Versión 1.0
==================================================*/

:root{

    --primary:#214336;
    --primary-dark:#183126;

    --accent:#d6b36b;

    --white:#ffffff;

    --bg:#f7f8f7;

    --text:#1e1e1e;

    --text-light:#666666;

    --border:#e9ecef;

    --shadow:0 18px 45px rgba(0,0,0,.06);

    --radius:16px;

    --transition:.35s;

    --max-width:1200px;

}

/*========================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

/*========================*/

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

/*==================================================
HEADER
==================================================*/

.header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    transition:.4s;

    background:rgba(0,0,0,.18);

    backdrop-filter:blur(14px);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:86px;

}

.logo{

    font-size:2rem;

    color:white;

    font-weight:300;

    letter-spacing:-1px;

}

.logo strong{

    font-weight:800;

}

nav ul{

    display:flex;

    gap:38px;

}

nav a{

    color:white;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:var(--accent);

}

/*==================================================
BOTONES
==================================================*/

.btn-primary{

    background:var(--primary);

    color:white;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

    display:inline-block;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.btn-secondary{

    border:2px solid white;

    color:white;

    padding:16px 34px;

    border-radius:999px;

    transition:.3s;

}

.btn-secondary:hover{

    background:white;

    color:#111;

    transform:translateY(-3px);

}

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

.hero{

    min-height:92vh;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:

        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),

        url("../assets/images/hero.jpg");

    background:

        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),

        image-set(
            url("../assets/images/hero.webp") type("image/webp"),
            url("../assets/images/hero.jpg") type("image/jpeg")
        );

    background-size:cover;

    background-position:center;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.48) 38%,
        rgba(0,0,0,.15) 65%,
        rgba(0,0,0,0) 100%
    );

}

.hero-content{

    position:relative;

    z-index:2;

    color:white;

    max-width:620px;

    padding-top:40px;

}

.eyebrow{

    display:inline-block;

    margin-bottom:22px;

    color:var(--accent);

    font-size:.9rem;

    font-weight:800;

    letter-spacing:3px;

}

.hero h1{

    font-size:4.3rem;

    line-height:1.05;

    margin-bottom:25px;

    letter-spacing:-2px;

    max-width:580px;

}

.hero p{

    font-size:1.2rem;

    line-height:1.8;

    max-width:520px;

    margin-bottom:40px;

    color:#f1f1f1;

}

.hero-buttons{

    display:flex;

    gap:18px;

}

.hero::after{

content:"";

position:absolute;

left:0;

right:0;

bottom:0;

height:180px;

background:linear-gradient(

transparent,

white

);

}

/*==================================================
SECCIONES
==================================================*/

section{

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--primary);

    font-weight:800;

    letter-spacing:2px;

    font-size:.8rem;

}

.section-title h2{

    margin-top:15px;

    font-size:3rem;

    max-width:820px;

    margin-inline:auto;

}

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

.cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.cards article{

    background:white;

    border-radius:var(--radius);

    padding:42px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);

    transition:transform .35s ease, box-shadow .35s ease;

}

.cards article:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.cards article:hover .icon{

    background:var(--primary);

    transform:rotate(-4deg);

}

.cards article:hover .icon svg{

    stroke:white;

}

.icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(33,67,54,.08);

    margin-bottom:24px;

    transition:.35s;

}

.icon svg{

    width:32px;

    height:32px;

    stroke:var(--primary);

    stroke-width:2;

}

.cards h3{

    margin-bottom:15px;

    font-size:1.5rem;

}

.cards p{

    color:var(--text-light);

}

/*==================================================
FRASE
==================================================*/

.statement{

    background:var(--primary);

    color:white;

}

.statement blockquote{

    max-width:900px;

    margin:auto;

    text-align:center;

    font-size:2.3rem;

    font-weight:700;

    line-height:1.4;

}

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

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

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

footer{

    background:#101010;

    color:white;

    padding:80px 0;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}

footer h3{

    font-size:2rem;

    margin-bottom:15px;

}

footer h4{

    margin-bottom:15px;

}

footer p{

    color:#bbbbbb;

    margin-bottom:10px;

}

/*==================================================
WHATSAPP
==================================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    z-index:999;

    transition:.3s;

}

.whatsapp-float:hover{

    transform:scale(1.08);

}

.whatsapp-float svg{

    width:32px;

    height:32px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1000px){

.cards{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:3.7rem;

}

.section-title h2{

font-size:2.3rem;

}

.statement blockquote{

font-size:1.7rem;

}

.buttons{

flex-direction:column;

}

}

@media(max-width:640px){

.hero{

text-align:center;

}

.hero-buttons{

flex-direction:column;

}

.hero h1{

font-size:3rem;

}

.hero p{

font-size:1.1rem;

}

.logo{

font-size:1.6rem;

}

section{

padding:80px 0;

}

}

/*==================================================
PARTE 5
==================================================*/

.process{

background:white;

}

.timeline{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:60px;

}

.step{

padding:35px;

border-radius:18px;

background:#fafafa;

transition:.35s;

}

.step:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.number{

font-size:3rem;

font-weight:800;

color:var(--primary);

margin-bottom:15px;

}

.step h3{

margin-bottom:15px;

}

.step p{

color:var(--text-light);

}

.decisions{

background:var(--bg);

}

.decision-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:60px;

}

.decision-grid article{

background:white;

padding:35px;

border-radius:16px;

box-shadow:var(--shadow);

transition:.35s;

}

.decision-grid article:hover{

transform:translateY(-8px);

}

.decision-grid h3{

margin-bottom:15px;

font-size:1.35rem;

}

.decision-grid p{

color:var(--text-light);

}

@media(max-width:1000px){

.timeline{

grid-template-columns:1fr;

}

.decision-grid{

grid-template-columns:1fr;

}

}

/*==================================================
PARTE 6
==================================================*/
.adn{

background:#1b1b1b;

color:white;

text-align:center;

}

.adn blockquote{

font-size:3rem;

font-weight:300;

line-height:1.3;

margin:60px auto 30px;

max-width:900px;

}

.adn strong{

color:var(--accent);

}

.adn p{

max-width:760px;

margin:auto;

color:#d0d0d0;

font-size:1.15rem;

}

.values{

background:white;

}

.values-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:24px;

margin-top:60px;

}

.values-grid article{

padding:30px;

border:1px solid #ececec;

border-radius:16px;

transition:.35s;

}

.values-grid article:hover{

background:var(--primary);

color:white;

transform:translateY(-8px);

}

.values-grid article:hover p{

color:#ececec;

}

.values-grid p{

margin-top:10px;

color:var(--text-light);

}

@media(max-width:1000px){

.values-grid{

grid-template-columns:1fr;

}

.adn blockquote{

font-size:2rem;

}

}

/*==================================================
PARTE 7
==================================================*/

.moments{

background:var(--bg);

}

.moments-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.moments-grid article{

background:white;

padding:45px;

border-radius:18px;

box-shadow:var(--shadow);

font-size:1.4rem;

font-weight:700;

line-height:1.5;

text-align:center;

transition:.35s;

}

.moments-grid article:hover{

transform:translateY(-8px);

}

@media(max-width:1000px){

.moments-grid{

grid-template-columns:1fr;

}

}

.faq{

background:
radial-gradient(
rgba(214,179,107,.06) 1px,
transparent 1px
),
white;

background-size:28px 28px;

}	
.faq-list{

max-width:900px;

margin:60px auto 0;

}

details{

background:#fafafa;

margin-bottom:20px;

padding:25px 30px;

border-radius:16px;

cursor:pointer;

transition:.3s;

}

details:hover{

box-shadow:var(--shadow);

}

summary{

font-size:1.15rem;

font-weight:700;

list-style:none;

}

summary::-webkit-details-marker{

display:none;

}

details p{

margin-top:20px;

color:var(--text-light);

}

.final-cta{

background:linear-gradient(135deg,#214336,#183126);

color:white;

text-align:center;

}

.final-cta h2{

font-size:3.4rem;

margin-bottom:10px;

}

.final-cta h3{

font-size:2rem;

font-weight:400;

margin-bottom:30px;

color:#d8d8d8;

}

.final-cta p{

max-width:760px;

margin:auto auto 45px;

font-size:1.15rem;

color:#ececec;

}

@media(max-width:1000px){

.final-cta h2{

font-size:2.5rem;

}

.final-cta h3{

font-size:1.4rem;

}

}

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

.navbar{

position:relative;

width:min(92%,1250px);

margin:22px auto;

height:76px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 28px;

border-radius:18px;

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

backdrop-filter:blur(20px);

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

}

.nav-links{

display:flex;

align-items:center;

gap:40px;

}

.menu{

display:flex;

gap:40px;

}

.menu-toggle{

display:none;

flex-direction:column;

justify-content:space-between;

width:26px;

height:18px;

background:none;

border:none;

padding:0;

cursor:pointer;

z-index:1000;

}

.menu-toggle span{

display:block;

width:100%;

height:2px;

background:white;

border-radius:2px;

transition:.3s;

}

.header-scrolled .menu-toggle span{

background:#1e1e1e;

}

.menu-toggle.active span:nth-child(1){

transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:translateY(-8px) rotate(-45deg);

}

@media(max-width:1000px){

.menu-toggle{

display:flex;

}

.nav-links{

position:absolute;

top:calc(100% + 12px);

left:0;

right:0;

display:none;

flex-direction:column;

align-items:center;

gap:24px;

padding:30px;

background:white;

border-radius:18px;

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.nav-links.open{

display:flex;

}

.menu{

flex-direction:column;

align-items:center;

gap:20px;

}

.menu a{

color:#1e1e1e;

}

.btn-nav{

width:100%;

text-align:center;

}

}

.menu a{

font-weight:600;

font-size:.95rem;

color:white;

transition:.3s;

}

.menu a:hover{

color:#D7B36A;

}

.btn-nav{

padding:14px 24px;

background:white;

color:#214336;

border-radius:999px;

font-weight:700;

transition:.3s;

}

.btn-nav:hover{

transform:translateY(-3px);

}

.header{

background:none;

backdrop-filter:none;

box-shadow:none;

}

/*======================================
ÁREA PRIVADA (login)
======================================*/

.gate-body{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#214336,#183126);

    padding:20px;

}

.gate-card{

    width:100%;

    max-width:400px;

    background:white;

    border-radius:20px;

    padding:50px 40px;

    box-shadow:var(--shadow);

    text-align:center;

}

.gate-card .logo{

    color:var(--primary);

    display:inline-block;

    margin-bottom:30px;

}

.gate-card h1{

    font-size:1.8rem;

    margin-bottom:12px;

}

.gate-card p{

    color:var(--text-light);

    margin-bottom:25px;

}

.gate-card form{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.gate-card input[type="password"]{

    padding:14px 18px;

    border:1px solid var(--border);

    border-radius:12px;

    font-family:inherit;

    font-size:1rem;

}

.gate-card input[type="password"]:focus{

    outline:2px solid var(--primary);

    outline-offset:2px;

}

.gate-card .btn-primary{

    border:none;

    cursor:pointer;

    font-family:inherit;

    font-size:1rem;

    width:100%;

}

.gate-error{

    color:#c0392b;

    font-size:.9rem;

    margin-top:15px;

}