/* =====================================================
   HERO
   OPTIMIZACIÓN CANARIAS V2
   DESIGN SYSTEM 1.0
===================================================== */


/* =====================================================
   SECCIÓN HERO
===================================================== */

#hero {

    padding: 190px 0 140px;

    background: var(--color-white);

    overflow: hidden;

}


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

.hero-container {

    max-width: 1380px;

    margin: 0 auto;

    padding-left: var(--container-padding);

    padding-right: var(--container-padding);

    display: grid;

    grid-template-columns: 55% 45%;

    gap: 70px;

    align-items: center;

}


/* =====================================================
   COLUMNA IZQUIERDA
===================================================== */

.hero-content {

    display: flex;

    flex-direction: column;

    max-width: 680px;

}


/* =====================================================
   BADGE
===================================================== */

.hero-badge {

    display: inline-flex;

    align-items: center;

    width: max-content;

    padding: 12px 22px;

    margin-bottom: 30px;

    background: var(--color-secondary-light);

    color: var(--color-secondary);

    border-radius: var(--radius-pill);

    font-size: var(--text-sm);

    font-weight: var(--font-bold);

}


/* =====================================================
   TÍTULO PRINCIPAL
===================================================== */

.hero-content h1 {

    margin-bottom: 35px;

    color: var(--color-primary);

    font-size: var(--text-4xl);

    line-height: 1.05;

    font-weight: var(--font-extrabold);

    letter-spacing: -2px;

}


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

.hero-text {

    max-width: 650px;

    margin-bottom: 20px;

    color: var(--color-text-light);

    font-size: var(--text-xl);

    line-height: 1.7;

}


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

.hero-highlight {

    margin-bottom: 45px;

    color: var(--color-primary);

    font-size: var(--text-2xl);

    line-height: 1.4;

    font-weight: var(--font-extrabold);

}


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

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 45px;

}


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

.hero-benefits {

    display: grid;

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

    gap: 18px;

}


.benefit-card {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px;

    background: var(--color-white);

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

    border-radius: var(--radius-lg);

    color: var(--color-primary);

    font-weight: var(--font-semibold);

    box-shadow: var(--shadow-md);

    transition: var(--transition-normal);

}


.benefit-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);

}


.check {

    color: var(--color-secondary);

    font-size: 20px;

    font-weight: var(--font-bold);

}


/* =====================================================
   COLUMNA DERECHA
===================================================== */

.hero-image{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


/* =====================================================
   CÍRCULO DECORATIVO
===================================================== */

.hero-circle {

    position: absolute;

    width: 560px;

    height: 560px;

    background: var(--color-secondary-light);

    border-radius: 50%;

    z-index: 1;

}


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

.hero-image img {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 520px;

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-image);

}

/*==================================
DECLARACIÓN DE ELENA
==================================*/

.hero-message{

    position:relative;

    z-index:4;

    width:100%;

    max-width:500px;

    margin:35px auto 0;

    padding:30px 35px;

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

    border-radius:20px;

    box-shadow:0 20px 50px rgba(16,24,40,.08);

    border:1px solid rgba(11,33,73,.05);

    text-align:left;

}


.hero-message h3{

    margin:0 0 15px;

    color:#0B2149;

    font-size:22px;

    line-height:1.3;

    font-weight:800;

}


.hero-message p{

    margin:0 0 15px;

    color:#667085;

    font-size:16px;

    line-height:1.7;

}


.hero-message-highlight{

    color:#0B2149 !important;

    font-weight:700;

}


.hero-signature{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #E9EDF2;

}


.hero-signature strong{

    color:#0B2149;

    font-size:17px;

    font-weight:800;

}


.hero-signature span{

    color:#7DAA3D;

    font-size:13px;

    font-weight:600;

}


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

.hero-content {

    animation: heroFadeUp 0.8s ease both;

}


.hero-image {

    animation: heroFadeUp 1s ease 0.15s both;

}


@keyframes heroFadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}