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

*{
--blue-bdo: #02A5E2;
--blue-dark: #0077B5;
--text-dark: #17202A;
--text-gray: #68737D;
--background: #F7FAFC;
--white: #FFFFFF;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Poppins', sans-serif;
color: var(--text-dark);
background: var(--white);
}

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

.banner {
min-height: 100vh;
width: 100%;
position: relative;
overflow: hidden;

background:
    radial-gradient(
        circle at 85% 20%,
        rgba(2, 165, 226, 0.10),
        transparent 35%
    ),
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbfd 100%
    );

}

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

.header {
width: 100%;
height: 88px;

padding: 0 7%;

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

position: relative;
z-index: 10;

background: rgba(255, 255, 255, 0.85);

border-bottom: 1px solid rgba(0, 0, 0, 0.04);

backdrop-filter: blur(12px);

}

.logo-link {
display: flex;
align-items: center;
}

.logo {
width: 125px;
height: auto;

transition: 0.3s ease;

}

.logo {
transform: scale(1.03);
}

/* =========================================
BOTÓN LOGIN HEADER
========================================= */

.button-inicio {
display: flex;
align-items: center;
gap: 10px;

padding: 11px 22px;

background: var(--blue-bdo);
color: white;

text-decoration: none;

border-radius: 30px;

font-size: 14px;
font-weight: 600;

box-shadow:
    0 8px 20px rgba(2, 165, 226, 0.20);

transition: all 0.3s ease;

}

.button-inicio span {
font-size: 18px;
transition: transform 0.3s ease;
}

.button-inicio {
background: var(--blue-dark);
transform: translateY(-2px);

box-shadow:
    0 12px 25px rgba(2, 165, 226, 0.30);

}

.button-inicio span {
transform: translateX(4px);
}

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

.contenedor {
width: 86%;
max-width: 1400px;

min-height: calc(100vh - 88px);

margin: auto;

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

align-items: center;

gap: 70px;

position: relative;
z-index: 2;

}

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

.textBx {
max-width: 650px;

animation: fadeUp 0.8s ease forwards;

}

.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;

margin-bottom: 20px;

color: var(--blue-bdo);

font-size: 13px;
font-weight: 600;

letter-spacing: 1.5px;
text-transform: uppercase;

}

.eyebrow::before {
content: "";

width: 28px;
height: 2px;

background: var(--blue-bdo);

}

.textBx h1 {
font-size: clamp(3rem, 5vw, 5.2rem);

line-height: 1.08;

font-weight: 700;

letter-spacing: -2px;

margin-bottom: 25px;

}

.textBx h1 span {
display: block;

color: var(--blue-bdo);

}

.textBx p {
max-width: 580px;

color: var(--text-gray);

font-size: 16px;

line-height: 1.9;

margin-bottom: 35px;

}

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

.hero-actions {
display: flex;
align-items: center;
gap: 18px;
}

.button-principal {
display: inline-flex;
align-items: center;
gap: 12px;

padding: 14px 25px;

border-radius: 30px;

background: var(--blue-bdo);
color: white;

text-decoration: none;

font-size: 14px;
font-weight: 600;

box-shadow:
    0 10px 25px rgba(2, 165, 226, 0.25);

transition: 0.3s ease;

}

.button-principal span {
font-size: 20px;

transition: 0.3s ease;

}

.button-principal {
background: var(--blue-dark);

transform: translateY(-3px);

}

.button-principal span {
transform: translateX(5px);
}

.button-secundario {
padding: 13px 24px;

border: 1px solid #DCE4E8;

border-radius: 30px;

color: var(--text-dark);

text-decoration: none;

font-size: 14px;
font-weight: 500;

transition: 0.3s ease;

}

.button-secundario {
border-color: var(--blue-bdo);

color: var(--blue-bdo);

background: rgba(2, 165, 226, 0.04);

}

/* =========================================
IMAGEN
========================================= */

.imgBx {
position: relative;

height: 600px;

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

animation: fadeIn 1s ease forwards;

}

.imgBx img {
width: 100%;
max-width: 600px;

max-height: 570px;

object-fit: contain;

position: relative;
z-index: 2;

filter:
    drop-shadow(0 25px 35px rgba(0, 0, 0, 0.12));

animation: floating 5s ease-in-out infinite;

}

/* =========================================
FONDO IMAGEN
========================================= */

.image-background {
width: 430px;
height: 430px;

position: absolute;

background:
    linear-gradient(
        135deg,
        rgba(2, 165, 226, 0.16),
        rgba(2, 165, 226, 0.03)
    );

border-radius: 50%;

z-index: 1;

box-shadow:
    0 0 80px rgba(2, 165, 226, 0.08);

}

.image-background::before {
content: "";

position: absolute;

width: 100px;
height: 100px;

border-radius: 50%;

border: 1px solid rgba(2, 165, 226, 0.25);

top: -25px;
right: -25px;

}

/* =========================================
DECORACIONES
========================================= */

.decoration {
position: absolute;

border-radius: 50%;

pointer-events: none;

}

.decoration-one {
width: 220px;
height: 220px;

background: rgba(2, 165, 226, 0.035);

top: 18%;
left: -100px;

}

.decoration-two {
width: 140px;
height: 140px;

border: 1px solid rgba(2, 165, 226, 0.12);

right: 8%;
bottom: 8%;

}

/* =========================================
SECCIÓN INFORMACIÓN
========================================= */

.info-section {
padding: 110px 7%;

background: var(--background);

text-align: center;

}

.info-container {
max-width: 850px;

margin: auto;

}

.info-section h2 {
font-size: clamp(2rem, 4vw, 3.2rem);

line-height: 1.2;

margin-bottom: 25px;

}

.info-section h2 span {
color: var(--blue-bdo);
}

.info-section p {
color: var(--text-gray);

line-height: 1.9;

font-size: 16px;

}

/* =========================================
ANIMACIONES
========================================= */

@keyframes fadeUp {

from {
    opacity: 0;
    transform: translateY(30px);
}

to {
    opacity: 1;
    transform: translateY(0);
}

}

@keyframes fadeIn {

from {
    opacity: 0;
    transform: translateX(30px);
}

to {
    opacity: 1;
    transform: translateX(0);
}

}

@keyframes floating {

0%,
100% {
    transform: translateY(0);
}

50% {
    transform: translateY(-12px);
}

}

/* =========================================
TABLET
========================================= */

@media (max-width: 991px) {

.header {
    height: 78px;

    padding: 0 5%;
}


.logo {
    width: 110px;
}


.contenedor {
    width: 90%;

    grid-template-columns: 1fr;

    min-height: auto;

    padding: 70px 0 80px;

    gap: 20px;

    text-align: center;
}


.textBx {
    max-width: 700px;

    margin: auto;

    order: 2;
}


.textBx h1 span {
    display: inline;
}


.textBx p {
    margin-left: auto;
    margin-right: auto;
}


.eyebrow {
    justify-content: center;
}


.hero-actions {
    justify-content: center;
}


.imgBx {
    order: 1;

    height: 380px;
}


.imgBx img {
    max-width: 420px;
    max-height: 380px;
}


.image-background {
    width: 300px;
    height: 300px;
}

}

/* =========================================
CELULAR
========================================= */

@media (max-width: 600px) {

.header {
    padding: 0 20px;
}


.logo {
    width: 100px;
}


.button-inicio {
    padding: 9px 17px;

    font-size: 12px;
}


.contenedor {
    width: 90%;

    padding-top: 50px;
}


.textBx h1 {
    font-size: 2.8rem;

    letter-spacing: -1.5px;
}


.textBx p {
    font-size: 14px;

    line-height: 1.8;
}


.hero-actions {
    flex-direction: column;

    width: 100%;
}


.button-principal,
.button-secundario {
    width: 100%;

    justify-content: center;
}


.imgBx {
    height: 280px;
}


.imgBx img {
    max-width: 300px;
    max-height: 280px;
}


.image-background {
    width: 220px;
    height: 220px;
}


.info-section {
    padding: 80px 25px;
}

}