:root{
    --vet-azul-oscuro: #0b2a63;
    --vet-azul: #0d5cb6;
    --vet-azul-hover: #0a4a96;
    --vet-fondo: #dce9f7;
    --vet-fondo-claro: #eaf2fb;
    --vet-texto: #10244d;
}

*{box-sizing: border-box;}

body{
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--vet-texto);
    background: #fff;
}

/*-------------------------------------------------------HEADER / NAVBAR*/
.encabezado{
    background: #fff;
    position: relative;
    z-index: 10;
}
.encabezado .navbar{padding: 1rem 0;}

.logo-icono{font-size: 3rem; color: var(--vet-azul);}

.logo-texto{
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    color: var(--vet-azul);
}
.logo-texto strong{font-size: 2rem; font-weight: 800; letter-spacing: -.5px;}
.logo-texto small{font-size: .95rem; font-weight: 500; color: var(--vet-azul-oscuro);}

.navbar .nav-link{
    color: var(--vet-texto);
    font-weight: 500;
    font-size: 1.05rem;
    position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{color: var(--vet-azul);}

/*???????????????????????????????????????????*/
.navbar .nav-link.nav-link.active::after{
    content: "";
    position: absolute;
    left: 50%; bottom: -6px;
    width: 6px; height: 6px;
    background: var(--vet-azul);
    border-radius: 50%;
    transform: translateX(-50%);
}
.navbar-toggler{border: 0; box-shadow: none !important;}

/*----BOTONES---*/
.boton-vet{
    background: var(--vet-azul);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    box-shadow: 0 8px 20px rgba(13, 92, 182, .25);
    transition: background .2s, transform .2s;
}
.boton-vet:hover{background: var(--vet-azul-hover); color: #fff; transform: translateY(-2px);}

.boton-vet-peq{padding: .85rem 1.6rem; font-size: 1.05rem;}
.boton-vet-grand{padding: 1.1rem 2.6rem; font-size: 1.35rem;}

/*--------------------HERO------------------*/
.portada{
    background: linear-gradient(180deg, var(--vet-fondo) 0%, var(--vet-fondo-claro) 100%);
    padding: 2rem 0 8rem;
    position: relative;
    overflow: hidden;
}
.portada::after{
    content: "";
    position: absolute;
    left: -10%; right: -10%; bottom: -1px;
    height: 110px;
    background: #fff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.portada-titulo{
    font-weight: 800;
    font-size: clamp(2.4rem, 5.2vw, 4.4rem);
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--vet-azul-oscuro);
    margin-bottom: 1.8rem;
}
.portada-titulo .acento{color: var(--vet-azul); display: inline-block;}

.corazon-decorativo{
    font-size: .6em;
    vertical-align: top;
    margin-left: .15em;
}
.portada-texto{
    font-size: clamp(1.05rem, 1.7vw, 1.5rem);
    line-height: 1.45;
    max-width: 520px;
    margin-bottom: 2.2rem;
}

/*La 4 caracteristicas*/
.caracteristicas{
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 1.6rem;
    margin-bottom: 2.6rem;
}
.caracteristicas li{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 125px;
}
.caracteristica-icono{
    width: 84px; height: 84px;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--vet-azul);
    font-size: 2rem;
    margin-bottom: .6rem;
    box-shadow: 0 6px 16px rgba(13, 92, 182, .08);
}
.caracteristica-texto{font-size: 1rem; line-height: 1.25;}

/*Imagen de portada*/
.portada-imagen-caja{position: relative;}
.portada-imagen{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 90px 0 0 40% / 60px 0 0 30%;
    box-shadow: 0 20px 50px rgba(13, 42, 99, .15);
}


/*------------------RESPONSIVO------------------------*/
@media(max-width: 991.98px){
    .encabezado .navbar{padding: 1rem 0;}
    .logo-icono{font-size: 2.4rem;}
    .logo-texto strong{font-size: 1.6rem;}
    .navbar-collapse{padding-top: 1rem;}
    .navbar .nav-link.active::after{display: none;}

    .portada{padding: 3rem 0 6rem; text-align: center;}
    .portada-texto{margin-left: auto; margin-right: auto;}
    .caracteristicas{justify-content: center;}
    .portada-imagen{border-radius: 40px;}
}
@media(max-width: 575.98px){
    .encabezado .container,
    .portada .container{padding-left: 1.5rem; padding-right: 1.5rem;}

    .portada{padding: 3rem 0 6.5rem;}

    .caracteristicas{
        display: grid; 
        grid-template-columns: repeat(2,1fr); 
        gap: 1.4rem 1rem;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .caracteristicas li{width: 100%;}
    .boton-vet-grande{width: 100%; justify-content: center; font-size: 1.2rem;}
    .portada::after{height: 70px;}
}