/* =========================================================
   YANAPAY WASI
   ESTILOS GENERALES
========================================================= */

/* Google Fonts */


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

:root{

    /* Colores principales */
    --yw-violeta:#5B3A70;
    --yw-violeta-oscuro:#392447;
    --yw-violeta-suave:#EEE8F2;

    --yw-terracota:#D9785B;
    --yw-terracota-claro:#F3DDD6;

    /* Neutros */
    --yw-blanco:#FFFFFF;
    --yw-fondo:#F8F6F3;
    --yw-fondo-secundario:#F1EEEA;

    --yw-texto:#252229;
    --yw-texto-suave:#69636D;
    --yw-borde:#DDD7DF;

    /* Tipografías */
    --fuente-principal:'DM Sans', sans-serif;
    --fuente-titulos:'Manrope', sans-serif;

    /* Medidas */
    --ancho-maximo:1240px;

}


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:var(--fuente-principal);

    background:var(--yw-fondo);

    color:var(--yw-texto);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}


img{
    max-width:100%;
    display:block;
}


a{
    color:inherit;
    text-decoration:none;
}


button,
input,
select,
textarea{
    font:inherit;
}


button{
    cursor:pointer;
}


ul,
ol{
    list-style:none;
}


/* =========================================================
   TIPOGRAFÍA GENERAL
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--fuente-titulos);

    color:var(--yw-texto);

    line-height:1.15;

}


p{
    color:var(--yw-texto-suave);
}


/* =========================================================
   SELECCIÓN DE TEXTO
========================================================= */

::selection{

    background:var(--yw-violeta);

    color:var(--yw-blanco);

}

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

.site-header{

    width:100%;

    background:rgba(248,246,243,.96);

    border-bottom:1px solid var(--yw-borde);

    position:relative;

    z-index:100;

}


.header-container{

    max-width:var(--ancho-maximo);

    margin:0 auto;

    min-height:92px;

    padding:0 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:32px;

}


/* =========================================================
   MARCA
========================================================= */

.brand{

    display:flex;

    align-items:center;

    gap:13px;

    flex-shrink:0;

}


.brand-symbol{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--yw-violeta);

    color:var(--yw-blanco);

    font-family:var(--fuente-titulos);

    font-size:16px;

    font-weight:800;

    letter-spacing:-1px;

    border-radius:14px 14px 14px 4px;

}


.brand-text{

    display:flex;

    flex-direction:column;

    line-height:1.2;

}


.brand-name{

    font-family:var(--fuente-titulos);

    font-size:18px;

    font-weight:800;

    color:var(--yw-texto);

}


.brand-subtitle{

    margin-top:3px;

    font-size:11px;

    font-weight:600;

    color:var(--yw-texto-suave);

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.main-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

}


.main-nav a{

    position:relative;

    padding:34px 0;

    font-size:14px;

    font-weight:600;

    color:var(--yw-texto-suave);

    transition:
        color .25s ease;

}


.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:25px;

    width:0;

    height:2px;

    background:var(--yw-terracota);

    transition:width .25s ease;

}


.main-nav a:hover{

    color:var(--yw-violeta);

}


.main-nav a:hover::after{

    width:100%;

}


/* =========================================================
   BOTÓN DEL HEADER
========================================================= */

.header-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:46px;

    padding:0 20px;

    background:var(--yw-texto);

    color:var(--yw-blanco);

    border-radius:8px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

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

}


.header-button:hover{

    background:var(--yw-violeta);

    transform:translateY(-2px);

}

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

.hero{

    position:relative;

    padding:72px 28px 90px;

    background:
        linear-gradient(
            110deg,
            var(--yw-fondo) 0%,
            var(--yw-fondo) 58%,
            var(--yw-violeta-suave) 58%,
            var(--yw-violeta-suave) 100%
        );

    overflow:hidden;

}


.hero::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-190px;

    top:-190px;

    border:1px solid rgba(91,58,112,.18);

    border-radius:50%;

}


.hero-container{

    position:relative;

    z-index:2;

    max-width:var(--ancho-maximo);

    margin:0 auto;

    display:grid;

    grid-template-columns:minmax(380px, .85fr) minmax(0, 1.15fr);

    align-items:center;

    gap:90px;

}


/* =========================================================
   TARJETA DEL FORMULARIO
========================================================= */

.hero-form-wrapper{

    background:var(--yw-blanco);

    padding:38px;

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

    border-radius:4px 28px 4px 4px;

    box-shadow:
        0 24px 60px rgba(57,36,71,.10);

}


.form-heading{

    margin-bottom:28px;

}


.form-label{

    display:inline-block;

    margin-bottom:10px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.14em;

    color:var(--yw-terracota);

}


.form-heading h1{

    max-width:400px;

    margin-bottom:10px;

    font-size:32px;

    letter-spacing:-.035em;

}


.form-heading p{

    max-width:440px;

    font-size:14px;

    line-height:1.65;

}


/* =========================================================
   CAMPOS DEL FORMULARIO
========================================================= */

.credit-form{

    display:flex;

    flex-direction:column;

    gap:17px;

}


.form-group{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.form-group label{

    font-size:12px;

    font-weight:700;

    color:var(--yw-texto);

}


.form-group input,
.form-group select{

    width:100%;

    height:48px;

    padding:0 14px;

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

    border-radius:6px;

    outline:none;

    background:var(--yw-blanco);

    color:var(--yw-texto);

    font-size:14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.form-group input:focus,
.form-group select:focus{

    border-color:var(--yw-violeta);

    box-shadow:
        0 0 0 3px rgba(91,58,112,.08);

}


.form-group input::placeholder{

    color:#AAA3AD;

}


/* =========================================================
   CAMPO MONTO
========================================================= */

.input-money{

    position:relative;

}


.input-money span{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:var(--yw-violeta);

    font-size:14px;

    font-weight:700;

    z-index:2;

}


.input-money input{

    padding-left:32px;

}


/* =========================================================
   CONSENTIMIENTO
========================================================= */

.form-consent{

    display:grid;

    grid-template-columns:18px 1fr;

    gap:9px;

    align-items:start;

    margin-top:3px;

}


.form-consent input{

    width:16px;

    height:16px;

    margin-top:3px;

    accent-color:var(--yw-violeta);

}


.form-consent label{

    font-size:11px;

    line-height:1.55;

    color:var(--yw-texto-suave);

}


.form-consent a{

    color:var(--yw-violeta);

    font-weight:700;

    text-decoration:underline;

    text-underline-offset:2px;

}


/* =========================================================
   BOTÓN DEL FORMULARIO
========================================================= */

.form-submit{

    width:100%;

    min-height:52px;

    margin-top:3px;

    border:0;

    border-radius:6px;

    background:var(--yw-violeta);

    color:var(--yw-blanco);

    font-size:14px;

    font-weight:700;

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

}


.form-submit:hover{

    background:var(--yw-violeta-oscuro);

    transform:translateY(-2px);

}


.form-disclaimer{

    font-size:10px;

    line-height:1.5;

    text-align:center;

    color:#8A838C;

}


/* =========================================================
   CONTENIDO DERECHO DEL HERO
========================================================= */

.hero-content{

    max-width:650px;

}


.hero-eyebrow{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    font-size:11px;

    font-weight:800;

    letter-spacing:.16em;

    color:var(--yw-terracota);

}


.hero-eyebrow::before{

    content:"";

    width:38px;

    height:2px;

    background:var(--yw-terracota);

}


.hero-content h2{

    max-width:620px;

    margin-bottom:22px;

    font-size:52px;

    letter-spacing:-.045em;

}


.hero-description{

    max-width:590px;

    margin-bottom:38px;

    font-size:16px;

    line-height:1.8;

}


/* =========================================================
   BENEFICIOS DEL HERO
========================================================= */

.hero-features{

    border-top:1px solid rgba(91,58,112,.18);

}


.hero-feature{

    display:grid;

    grid-template-columns:48px 1fr;

    gap:16px;

    padding:19px 0;

    border-bottom:1px solid rgba(91,58,112,.18);

}


.feature-number{

    padding-top:2px;

    font-family:var(--fuente-titulos);

    font-size:12px;

    font-weight:800;

    color:var(--yw-terracota);

}


.hero-feature strong{

    display:block;

    margin-bottom:3px;

    font-family:var(--fuente-titulos);

    font-size:15px;

    color:var(--yw-texto);

}


.hero-feature p{

    font-size:13px;

    line-height:1.55;

}


/* =========================================================
   ENLACE INFERIOR
========================================================= */

.hero-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:27px;

    font-size:13px;

    font-weight:800;

    color:var(--yw-violeta);

}


.hero-link span{

    font-size:20px;

    transition:transform .2s ease;

}


.hero-link:hover span{

    transform:translateX(5px);

}

/* =========================================================
   SECCIÓN SOLUCIONES
========================================================= */

.intro-section{

    position:relative;

    padding:110px 28px;

    background:var(--yw-blanco);

}


.intro-container{

    max-width:var(--ancho-maximo);

    margin:0 auto;

}


/* =========================================================
   ENCABEZADO DE SECCIÓN
========================================================= */

.section-heading{

    display:grid;

    grid-template-columns:.75fr 1.25fr;

    gap:70px;

    align-items:start;

    margin-bottom:65px;

}


.section-tag{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:11px;

    font-weight:800;

    letter-spacing:.16em;

    color:var(--yw-terracota);

}


.section-tag::before{

    content:"";

    width:34px;

    height:2px;

    background:var(--yw-terracota);

}


.section-heading h2{

    max-width:700px;

    font-size:43px;

    letter-spacing:-.04em;

}


/* =========================================================
   TARJETAS DE SOLUCIONES
========================================================= */

.solutions-grid{

    display:grid;

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

    border-top:1px solid var(--yw-borde);

    border-bottom:1px solid var(--yw-borde);

}


.solution-card{

    position:relative;

    min-height:300px;

    padding:42px 36px;

    border-right:1px solid var(--yw-borde);

    transition:
        background .3s ease,
        transform .3s ease;

}


.solution-card:last-child{

    border-right:0;

}


.solution-index{

    display:block;

    margin-bottom:70px;

    font-family:var(--fuente-titulos);

    font-size:12px;

    font-weight:800;

    color:var(--yw-terracota);

}


.solution-card h3{

    margin-bottom:14px;

    font-size:23px;

    letter-spacing:-.025em;

}


.solution-card p{

    max-width:300px;

    font-size:14px;

    line-height:1.7;

}


.solution-card::after{

    content:"→";

    position:absolute;

    right:34px;

    top:38px;

    font-size:22px;

    color:var(--yw-violeta);

    opacity:0;

    transform:translateX(-8px);

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.solution-card:hover{

    background:var(--yw-violeta-suave);

    transform:translateY(-6px);

}


.solution-card:hover::after{

    opacity:1;

    transform:translateX(0);

}

/* =========================================================
   SECCIÓN CÓMO FUNCIONA
========================================================= */

.process-section{

    padding:110px 28px;

    background:var(--yw-fondo-secundario);

}


.process-container{

    max-width:var(--ancho-maximo);

    margin:0 auto;

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:90px;

    align-items:start;

}


/* =========================================================
   TEXTO IZQUIERDO
========================================================= */

.process-heading{

    position:sticky;

    top:40px;

}


.process-heading .section-tag{

    margin-bottom:22px;

}


.process-heading h2{

    max-width:480px;

    margin-bottom:20px;

    font-size:44px;

    letter-spacing:-.04em;

}


.process-heading p{

    max-width:440px;

    font-size:15px;

    line-height:1.8;

}


/* =========================================================
   LISTA DEL PROCESO
========================================================= */

.process-list{

    border-top:1px solid var(--yw-borde);

}


.process-item{

    display:grid;

    grid-template-columns:70px 1fr;

    gap:20px;

    padding:30px 0;

    border-bottom:1px solid var(--yw-borde);

}


.process-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

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

    border-radius:50%;

    font-family:var(--fuente-titulos);

    font-size:13px;

    font-weight:800;

    color:var(--yw-violeta);

}


.process-content h3{

    margin-bottom:7px;

    font-size:20px;

    letter-spacing:-.02em;

}


.process-content p{

    max-width:550px;

    font-size:14px;

    line-height:1.7;

}


/* =========================================================
   EFECTO SUAVE
========================================================= */

.process-item{

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

}


.process-item:hover{

    padding-left:14px;

}


.process-item:hover .process-number{

    background:var(--yw-violeta);

    color:var(--yw-blanco);

}

/* =========================================================
   SECCIÓN TRANSPARENCIA / INFORMACIÓN IMPORTANTE
========================================================= */

.transparency-section{

    padding:100px 28px;

    background:var(--yw-violeta-oscuro);

    color:var(--yw-blanco);

}


.transparency-container{

    max-width:var(--ancho-maximo);

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}


/* =========================================================
   TEXTO PRINCIPAL
========================================================= */

.transparency-content .section-tag{

    margin-bottom:22px;

    color:var(--yw-terracota);

}


.transparency-content .section-tag::before{

    background:var(--yw-terracota);

}


.transparency-content h2{

    max-width:570px;

    margin-bottom:22px;

    color:var(--yw-blanco);

    font-size:43px;

    letter-spacing:-.04em;

}


.transparency-content > p{

    max-width:580px;

    color:rgba(255,255,255,.72);

    font-size:15px;

    line-height:1.8;

}


/* =========================================================
   PUNTOS DE TRANSPARENCIA
========================================================= */

.transparency-points{

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

}


.transparency-item{

    display:grid;

    grid-template-columns:42px 1fr;

    gap:16px;

    align-items:start;

    padding:25px 0;

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

}


.transparency-item span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    border-radius:50%;

    background:var(--yw-terracota);

    color:var(--yw-blanco);

    font-size:14px;

    font-weight:800;

}


.transparency-item p{

    padding-top:3px;

    color:rgba(255,255,255,.82);

    font-size:14px;

    line-height:1.7;

}

/* =========================================================
   SECCIÓN NOSOTROS
========================================================= */

.about-section{

    padding:110px 28px;

    background:var(--yw-blanco);

}


.about-container{

    max-width:var(--ancho-maximo);

    margin:0 auto;

    display:grid;

    grid-template-columns:.7fr 1.3fr;

    gap:90px;

    align-items:center;

}


/* =========================================================
   ELEMENTO GRÁFICO YW
========================================================= */

.about-number{

    position:relative;

    width:100%;

    min-height:330px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:var(--yw-violeta-suave);

    border-radius:4px 60px 4px 4px;

    font-family:var(--fuente-titulos);

    font-size:100px;

    font-weight:800;

    letter-spacing:-.08em;

    color:var(--yw-violeta);

}


.about-number::before{

    content:"";

    position:absolute;

    width:210px;

    height:210px;

    left:-85px;

    bottom:-85px;

    border:1px solid rgba(91,58,112,.25);

    border-radius:50%;

}


.about-number::after{

    content:"";

    position:absolute;

    width:95px;

    height:95px;

    right:28px;

    top:28px;

    background:var(--yw-terracota-claro);

    border-radius:50%;

}


/* =========================================================
   CONTENIDO NOSOTROS
========================================================= */

.about-content .section-tag{

    margin-bottom:22px;

}


.about-content h2{

    max-width:700px;

    margin-bottom:25px;

    font-size:43px;

    letter-spacing:-.04em;

}


.about-content > p{

    max-width:680px;

    margin-bottom:17px;

    font-size:15px;

    line-height:1.85;

}


.about-content > p:last-child{

    margin-bottom:0;

}

/* =========================================================
   SECCIÓN CONTACTO
========================================================= */

.contact-section{

    padding:95px 28px;

    background:var(--yw-fondo);

    border-top:1px solid var(--yw-borde);

}


.contact-container{

    max-width:var(--ancho-maximo);

    margin:0 auto;

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:90px;

    align-items:start;

}


/* =========================================================
   ENCABEZADO CONTACTO
========================================================= */

.contact-heading .section-tag{

    margin-bottom:20px;

}


.contact-heading h2{

    max-width:520px;

    margin-bottom:18px;

    font-size:42px;

    letter-spacing:-.04em;

}


.contact-heading p{

    max-width:500px;

    font-size:15px;

    line-height:1.8;

}


/* =========================================================
   DATOS DE CONTACTO
========================================================= */

.contact-data{

    border-top:1px solid var(--yw-borde);

}


.contact-item{

    display:grid;

    grid-template-columns:150px 1fr;

    gap:25px;

    padding:24px 0;

    border-bottom:1px solid var(--yw-borde);

}


.contact-label{

    font-size:11px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--yw-terracota);

}


.contact-item a,
.contact-item p{

    font-size:15px;

    font-weight:600;

    color:var(--yw-texto);

}


.contact-item a{

    transition:color .2s ease;

}


.contact-item a:hover{

    color:var(--yw-violeta);

}

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

.site-footer{

    background:var(--yw-texto);

    color:var(--yw-blanco);

    padding:70px 28px 0;

}


.footer-container{

    max-width:var(--ancho-maximo);

    margin:0 auto;

    display:grid;

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

    gap:70px;

    padding-bottom:55px;

}


/* =========================================================
   MARCA DEL FOOTER
========================================================= */

.footer-brand{

    display:flex;

    align-items:flex-start;

    gap:14px;

}


.footer-symbol{

    flex-shrink:0;

    background:var(--yw-terracota);

}


.footer-brand strong{

    display:block;

    margin-bottom:5px;

    font-family:var(--fuente-titulos);

    font-size:18px;

    color:var(--yw-blanco);

}


.footer-brand p{

    font-size:12px;

    color:rgba(255,255,255,.58);

}


/* =========================================================
   ENLACES DEL FOOTER
========================================================= */

.footer-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.footer-links > span{

    margin-bottom:8px;

    font-size:10px;

    font-weight:800;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--yw-terracota);

}


.footer-links a{

    width:max-content;

    max-width:100%;

    font-size:13px;

    color:rgba(255,255,255,.72);

    transition:
        color .2s ease,
        transform .2s ease;

}


.footer-links a:hover{

    color:var(--yw-blanco);

    transform:translateX(4px);

}


/* =========================================================
   PARTE INFERIOR DEL FOOTER
========================================================= */

.footer-bottom{

    max-width:var(--ancho-maximo);

    margin:0 auto;

    padding:22px 0;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


.footer-bottom p{

    font-size:11px;

    color:rgba(255,255,255,.48);

}