/* ===================================
   RYC LANDING PAGE V1.0
   STYLE.CSS
=================================== */


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}


body{

    font-family:'Poppins', sans-serif;
    color:#2E2E2E;
    background:#ffffff;

}


.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}



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


.header{

    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:1000;
    background:white;
    box-shadow:0 3px 15px rgba(0,0,0,.08);

}


.nav{

    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;

}



.logo{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1;
    text-decoration:none;

    font-family:'Poppins', sans-serif;
    font-size:30px;
    font-weight:800;
    font-style:italic;
    letter-spacing:-1px;
    text-transform:uppercase;

    background:linear-gradient(160deg, #8f0000 0%, #ED1C24 45%, #ff6a5c 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

}

.logo span{

    margin-top:2px;
    font-family:'Poppins', sans-serif;
    font-size:12px;
    font-weight:600;
    font-style:normal;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#555;
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;

}



nav{

    display:flex;
    gap:30px;

}


nav a{

    text-decoration:none;
    color:#333;
    font-weight:500;

}


nav a:hover{

    color:#ED1C24;

}



.btn-whatsapp{

    background:#25D366;
    color:white;
    padding:12px 25px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;

}


.btn-registrate{

    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;

    background:linear-gradient(135deg, #ED1C24, #B5121B);
    color:white;
    padding:9px 16px;
    max-width:120px;
    border-radius:16px;
    text-decoration:none;
    font-weight:600;
    font-size:12.5px;
    line-height:1.25;
    text-align:center;
    letter-spacing:.2px;

    box-shadow:0 6px 16px rgba(237,28,36,.35);

    transition:transform .22s ease, box-shadow .22s ease, background .22s ease;

}


.btn-registrate svg{

    flex-shrink:0;

}


.btn-registrate:hover{

    transform:translateY(-2px);
    background:linear-gradient(135deg, #F5323A, #ED1C24);
    box-shadow:0 10px 22px rgba(237,28,36,.45);

}




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


.hero{

    height:100vh;
    background:

    url("../img/Hero.jpg")

    center/cover no-repeat;

    position:relative;

    display:flex;
    align-items:center;

}



.hero-overlay{

    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(10,15,20,.15) 0%, rgba(10,15,20,.35) 55%, rgba(10,15,20,.55) 100%);

}



.hero-content{

    position:relative;
    color:white;
    max-width:750px;

}



.hero h1{

    font-size:55px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:25px;

}



.hero p{

    font-size:20px;
    margin-bottom:35px;

}




.hero-buttons{

    display:flex;
    gap:20px;

}



.btn-primary,
.btn-secondary{

    padding:15px 35px;
    border-radius:35px;
    text-decoration:none;
    font-weight:600;

}



.btn-primary{

    background:#ED1C24;
    color:white;

}



.btn-secondary{

    border:2px solid white;
    color:white;

}




/* ===============================
 INTRO
================================ */


.intro{

    padding:50px 0 60px;
    text-align:center;
    background:linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%);

}


.intro h2{

    font-size:36px;
    margin-bottom:20px;

}


.intro p{

    max-width:800px;
    margin:auto;
    font-size:18px;

}




/* ===============================
 porque-ryc
================================ */
#porque-ryc{
    scroll-margin-top:90px;
}

#proyectos,
#beneficios,
#faq,
#proceso,
#contacto,
#formulario{
    scroll-margin-top:90px;
}

.projects{

    padding:50px 0 60px;
    background:linear-gradient(180deg, #f7f4ef 0%, #f2eee6 100%);

}


.projects h2,
.benefits h2,
.contact h2{

    text-align:center;
    font-size:36px;
    margin-bottom:50px;

}

.projects h2{

    font-size:32px;
    margin-bottom:40px;

}



.cards{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px 28px;

}



.card{

    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border-top:4px solid #ED1C24;

    transition:.3s;

}



.card:hover{

    transform:translateY(-10px);

}



.card img{

    width:100%;
    height:150px;
    object-fit:cover;

}



.card h3,
.card p{

    padding:0 20px;
    text-align:center;

}


.card h3{

    margin-top:18px;
    font-size:17px;

}



.card p{

    margin-top:8px;
    font-size:13px;

}



.card-button{

    display:inline-block;
    margin:18px;
    background:#ED1C24;
    color:white;
    padding:10px 20px;
    border-radius:30px;
    font-size:13px;
    text-decoration:none;
    text-align:center;

}

.card-button:hover{

    background:#c81119;

}






/* ===============================
 BENEFITS
================================ */


.benefits{

    padding:35px 0 60px;
    background:linear-gradient(180deg, #fff4e0 0%, #ffffff 100%);

}


.benefit-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;

}



.benefit-grid div{

    text-align:center;
    padding:28px 14px;
    border-radius:15px;
    background:#ffffff;
    box-shadow:0 8px 22px rgba(0,0,0,.06);

}


.benefit-grid h3{

    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin:0 auto 14px;
    border-radius:50%;
    font-size:28px;
    background:linear-gradient(135deg, #ED1C24, #D4A017);

}


.benefit-grid p{

    font-weight:600;
    color:#2E2E2E;

}




/* ===============================
 FAQ
================================ */

.faq{

    padding:80px 0;
    background:linear-gradient(160deg, #fff4e0 0%, #fdeee2 45%, #fbe6e6 100%);
    position:relative;
    overflow:hidden;

}

.faq::before{

    content:'';
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(237,28,36,.12), transparent 70%);

}

.faq::after{

    content:'';
    position:absolute;
    bottom:-140px;
    left:-140px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(212,160,23,.16), transparent 70%);

}

.faq .container{

    position:relative;
    z-index:1;

}

.faq h2{

    text-align:center;
    font-size:34px;
    margin-bottom:10px;

}

.faq > .container::before{

    content:'';
    display:block;
    width:70px;
    height:4px;
    margin:0 auto 30px;
    border-radius:4px;
    background:linear-gradient(90deg, #ED1C24, #D4A017);

}

.faq-list{

    max-width:800px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:16px;

}

.faq-list details{

    background:white;
    border-radius:14px;
    padding:20px 25px;
    border-left:5px solid #ED1C24;
    box-shadow:0 6px 22px rgba(0,0,0,.07);
    transition:transform .25s ease, box-shadow .25s ease;

}

.faq-list details:hover{

    transform:translateX(4px);
    box-shadow:0 10px 28px rgba(0,0,0,.12);

}

.faq-list details:nth-child(2){ border-left-color:#D4A017; }
.faq-list details:nth-child(3){ border-left-color:#2E2E2E; }
.faq-list details:nth-child(4){ border-left-color:#D4A017; }
.faq-list details:nth-child(5){ border-left-color:#ED1C24; }

.faq-list summary{

    cursor:pointer;
    font-weight:600;
    font-size:17px;
    list-style:none;

    display:flex;
    align-items:center;
    gap:14px;

}

.faq-icon{

    flex-shrink:0;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg, #ED1C24, #D4A017);
    font-size:17px;

}

.faq-list summary::-webkit-details-marker{

    display:none;

}

.faq-list summary::after{

    content:"+";
    margin-left:auto;
    flex-shrink:0;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fdeee2;
    font-size:18px;
    color:#ED1C24;
    font-weight:700;
    transition:transform .25s ease, background .25s ease;

}

.faq-list details[open] summary::after{

    content:"–";
    background:#ED1C24;
    color:white;
    transform:rotate(180deg);

}

.faq-list p{

    margin-top:14px;
    margin-left:52px;
    color:#555;
    line-height:1.5;

}


/* ===============================
 CONTACT
================================ */


.contact{

    background:#ED1C24;
    color:white;
    text-align:center;
    padding:80px 0 180px;

}



.contact .btn-primary{

    display:inline-block;
    margin-top:30px;
    background:white;
    color:#ED1C24;

}



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


footer{

    background:#222;
    color:white;
    text-align:center;
    padding:60px 30px;

}




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



.whatsapp-float {
  position: fixed;
  bottom: 55px;
  right: 20px;
  width: 58px;
  height: 58px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(29,168,81,.4);
  z-index: 1000;
  transition: transform .25s ease, box-shadow .25s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 10px 24px rgba(29,168,81,.5);
}

.whatsapp-float img {
  width: 52px;
  height: 52px;
}

.notification-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: linear-gradient(135deg, #ED1C24, #B5121B);
  color: white;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
  animation: blink 2.4s ease-in-out infinite;
}

@keyframes blink {
  0%, 80%, 100% { transform: scale(1); }
  90%  { transform: scale(1.18); }
}



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



@media(max-width:900px){


nav{

display:none;

}



.hero h1{

font-size:38px;

}


.cards{

grid-template-columns:1fr 1fr;

}


.benefit-grid{

grid-template-columns:1fr 1fr;

}


}

@media(max-width:600px){

.cards{

grid-template-columns:1fr;
gap:22px;

}

.faq-list p{

margin-left:0;

}

.faq-list summary{

font-size:15px;

}

}



@media(max-width:500px){


.hero p{

font-size:16px;

}


.hero-buttons{

flex-direction:column;

}


.benefit-grid{

grid-template-columns:1fr;

}


.logo{

font-size:22px;

}


}

/* Animaciones scroll */

.hidden{

    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;

}


.show{

    opacity:1;
    transform:translateY(0);

}


.hero p{

    transition:opacity .3s ease;

}

/* ===============================
 FINANCIAMIENTO
================================ */


.financing{

padding:55px 0 35px;
background:linear-gradient(180deg, #fffaf0 0%, #fff4e0 100%);
text-align:center;

}

.financing h2{

font-size:32px;
margin-bottom:35px;

}


.finance-content{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;

}


.finance-box{

padding:22px;
border-radius:16px;
background:#ffffff;
text-align:center;
border-top:3px solid #D4A017;

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

}


.finance-box h3{

color:#ED1C24;
font-size:17px;
margin-bottom:8px;

}



/* ===============================
 PROCESO
================================ */


.process{

padding:70px 0;
background:linear-gradient(180deg, #2E2E2E 0%, #262626 100%);
color:white;
text-align:center;

}

.process h2{

font-size:32px;
margin-bottom:50px;

}


.steps{

display:flex;
justify-content:space-between;
gap:8px;
position:relative;

}



.steps div{

flex:1;
text-align:center;
position:relative;
padding-top:4px;

}


.steps div:not(:last-child)::after{

content:'';
position:absolute;
top:34px;
left:calc(50% + 30px);
width:calc(100% - 60px);
height:2px;

background:linear-gradient(90deg, rgba(237,28,36,.65), rgba(237,28,36,.15));

z-index:0;

}


.steps span{

display:flex;
width:56px;
height:56px;
margin:auto;
align-items:center;
justify-content:center;

background:linear-gradient(135deg, #ED1C24, #D4A017);
box-shadow:0 0 0 6px rgba(237,28,36,.15);

border-radius:50%;

font-size:22px;
font-weight:700;

margin-bottom:18px;

position:relative;
z-index:1;

}



.steps h3{

font-size:16px;
margin-bottom:8px;

}


.steps p{

font-size:13px;
opacity:.85;
padding:0 6px;

}




@media(max-width:900px){


.finance-content{

grid-template-columns:1fr;

}


.steps{

flex-direction:column;
gap:36px;

}

.steps div:not(:last-child)::after{

top:60px;
left:50%;
transform:translateX(-50%);
width:2px;
height:36px;

background:linear-gradient(180deg, rgba(237,28,36,.65), rgba(237,28,36,.15));

}


}



@media(max-width:500px){


.steps span{

width:50px;
height:50px;
font-size:19px;

}

.steps div:not(:last-child)::after{

top:54px;

}


}

/* ===============================
 ASESOR
================================ */


.advisor{

padding:80px 0 40px;

}


.advisor-content{

display:grid;
grid-template-columns:350px 1fr;
gap:50px;
align-items:center;

}


.advisor-image img{

width:100%;
border-radius:20px;

}



.advisor-text h3{

color:#ED1C24;
margin:15px 0;

}



.advisor-text li{

list-style:none;
margin:10px 0;

}



/* ===============================
 CONTADORES
================================ */


.numbers{
    background:#ED1C24;
    padding:35px 0;
    margin:-30px 0 60px;
}


.number-grid{

    display:grid;

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

    gap:25px;

}

.number-grid div{

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

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

    border-radius:15px;

    padding:25px 15px;

    text-align:center;

    transition:.3s;

    backdrop-filter:blur(4px);

}

.number-grid div:hover{

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

    transform:translateY(-5px);

}

.number-grid h3{

    color:#FFFFFF;

    font-size:42px;

    margin-bottom:10px;

    font-weight:800;

}

.number-grid h3{

font-size:45px;

}
.number-grid p{

    color:#FFFFFF;

    font-size:17px;

    line-height:1.4;

    margin:0;

}

/* ===============================
 FORMULARIO
================================ */

.lead-form{

max-width:600px;
margin:40px auto 0;

display:flex;
flex-direction:column;
gap:15px;

}



.lead-form input,
.lead-form select,
.lead-form textarea{

padding:15px;
border:none;
border-radius:10px;
font-family:inherit;

}

.lead-form textarea{

height:120px;

}

.lead-form button{

background:#222;
color:white;
border:none;
padding:15px;
border-radius:30px;
font-size:16px;
cursor:pointer;

}

@media(max-width:900px){

.advisor-content{

grid-template-columns:1fr;

}


.number-grid{

grid-template-columns:1fr 1fr;

}


}

/*==================================================
    FRANJA PROMOCIONAL FIESTAS PATRIAS
===================================================*/


.promo-bar{

    position:absolute;

    left:0;

    top:80px;

    width:100%;

    overflow:hidden;

    background:linear-gradient(90deg,#B5121B,#ED1C24,#B5121B);

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

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

    box-shadow:0 4px 14px rgba(0,0,0,.2);

    z-index:5;

}

/* Texto desplazándose */

.promo-track{

    display:flex;

    width:max-content;

    white-space:nowrap;

    animation:moverPromo 26s linear infinite;

}

/* Texto */

.promo-track span{

    display:flex;

    align-items:center;

    padding:9px 55px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1.5px;

    text-shadow:0 1px 3px rgba(0,0,0,.25);

}

/* Banderas de Perú al inicio y final del texto */

.promo-flag{

    width:22px;
    height:15px;
    object-fit:cover;
    border-radius:2px;
    box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.3);
    margin:0 14px;

}

/* Movimiento continuo */

@keyframes moverPromo{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* Pausa al pasar el mouse */

.promo-bar:hover .promo-track{

    animation-play-state:paused;

}

/* Celular */

@media(max-width:768px){

    .promo-track span{

        font-size:12px;

        padding:8px 35px;

    }

    .promo-flag{

        width:18px;
        height:12px;
        margin:0 10px;

    }

}

/* ===============================
 POPUP DE LANZAMIENTO
================================ */

.promo-modal-overlay{

    position:fixed;
    inset:0;
    background:rgba(10,20,30,.75);
    backdrop-filter:blur(3px);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;

    padding:20px;

    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;

}

.promo-modal-overlay.show{

    opacity:1;
    visibility:visible;

}

.promo-modal{

    position:relative;
    max-width:420px;
    width:100%;

    transform:scale(.9);
    transition:transform .35s ease;

}

.promo-modal-overlay.show .promo-modal{

    transform:scale(1);

}

.promo-modal img{

    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.promo-modal-close{

    position:absolute;
    top:-14px;
    right:-14px;

    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#ffffff;
    color:#2E2E2E;

    border:none;
    border-radius:50%;

    font-size:18px;
    font-weight:700;
    line-height:1;
    cursor:pointer;

    box-shadow:0 4px 14px rgba(0,0,0,.3);
    transition:transform .2s ease, background .2s ease;

}

.promo-modal-close:hover{

    background:#ED1C24;
    color:#ffffff;
    transform:scale(1.08);

}

@media(max-width:500px){

    .promo-modal-close{

        top:-12px;
        right:0;

    }

}




/* ===============================
 PESTAÑA "NO LO SÉ, RYC"
================================ */

.doubt-tab{

    position:fixed;
    top:50%;
    right:0;
    transform:translateY(-50%);

    writing-mode:vertical-rl;
    text-orientation:mixed;

    display:flex;
    align-items:center;
    gap:8px;

    background:linear-gradient(135deg, #D4A017, #B8860B);
    color:#2E2E2E;

    padding:20px 10px;
    border-radius:10px 0 0 10px;

    font-weight:700;
    font-size:14px;
    letter-spacing:.3px;
    text-decoration:none;

    box-shadow:-4px 0 18px rgba(0,0,0,.25);

    z-index:997;

    transition:padding .25s ease, background .25s ease;

}

.doubt-emoji{

    writing-mode:horizontal-tb;
    flex-shrink:0;

}

.doubt-tab:hover{

    padding:20px 16px;
    background:linear-gradient(135deg, #B8860B, #8a6508);
    color:white;

}

@media(max-width:600px){

    .doubt-tab{

        padding:14px 8px;
        font-size:12px;

    }

    .doubt-emoji{

        width:32px;
        height:32px;

    }

    .doubt-tab:hover{

        padding:14px 8px;

    }

}


/* Separación entre la lista de checks y el botón de contactar asesor */

.advisor-cta{

    display:inline-block;
    margin-top:28px;

}