/*=========================
    GOOGLE FONT
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Outfit:wght@400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background-color:#10241b;
    background-image:
        linear-gradient(180deg, rgba(10,20,18,.65), rgba(10,20,18,.75)),
        url('./imagen/fondo-playa.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    background-repeat:no-repeat;
    color:#222;
}

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

.hero{

    width:100%;
    padding:130px 8% 100px;
    background:transparent;
    overflow:hidden;

}

.hero-content{
    display:flex;
    justify-content:center;
    min-height:auto;
}

.left{

    flex:1;
    max-width:780px;
    margin:0 auto;
    text-align:center;

}

.subtitle{

    font-family:'Outfit',sans-serif;
    color:#ffe9c7;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:14px;

}

.left h1{

    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:54px;
    line-height:1.2;
    margin:22px 0;
    color:#ffffff;
    text-shadow:0 4px 20px rgba(0,0,0,.45);

}

.left h1 strong{

    color:#ffe9c7;

}

.left p{

    font-family:'Outfit',sans-serif;
    color:#f0f0f0;
    font-size:18px;
    line-height:30px;
    margin:0 auto 38px;
    max-width:580px;
    text-shadow:0 2px 12px rgba(0,0,0,.4);

}

.hero-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}

.btn-primary{

    font-family:'Outfit',sans-serif;
    background:#198754;
    color:#fff;
    text-decoration:none;
    padding:16px 35px;
    border-radius:40px;
    transition:.4s;
    font-weight:600;

}

.btn-primary:hover{

    background:#146c43;
    transform:translateY(-5px);

}

.btn-hero-outline{

    font-family:'Outfit',sans-serif;
    border:2px solid #ffffff;
    color:#ffffff;
    text-decoration:none;
    padding:16px 35px;
    border-radius:40px;
    transition:.4s;
    font-weight:600;
    backdrop-filter:blur(4px);

}

.btn-hero-outline:hover{

    background:#ffffff;
    color:#146c43;

}

.hero-highlights{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-top:50px;

}

.highlight-item{

    font-family:'Outfit',sans-serif;
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:40px;
    padding:10px 20px;
    color:#fff;
    font-size:14px;
    font-weight:500;

}

.highlight-item i{

    color:#ffe9c7;
    font-size:16px;

}

/*=========================
     REDES SOCIALES
=========================*/

.social-bar{

    position:fixed;
    top:50%;
    left:25px;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:1000;

}

.social-bar a{

    width:55px;
    height:55px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#fff;
    color:#198754;
    text-decoration:none;
    font-size:22px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:.4s;

}

.social-bar a:hover{

    background:#198754;
    color:#fff;
    transform:translateX(8px);

}

.social-bar a img{
    width:26px;
    height:26px;
    object-fit:contain;
}

.social-bar a.fb:hover{ background:#1877F2; }
.social-bar a.wa:hover{ background:#25D366; }
.social-bar a.tt:hover{ background:#000000; }
.social-bar a.yt:hover{ background:#FF0000; }
.social-bar a.ig:hover{ background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); }

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

@media(max-width:991px){

.hero-buttons{

    justify-content:center;

}

.social-bar{

    display:none;

}

.left h1{

    font-size:42px;

}

}

@media(max-width:600px){

.hero{

    padding:100px 25px 70px;

}

.left h1{

    font-size:32px;

}

.left p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;
    align-items:center;

}

.highlight-item{

    font-size:13px;
    padding:8px 16px;

}

}
/*=========================
   HERO — logo flotante + destellos brillantes
   Nota sobre los colores: los destellos usan tonos dorados de tu
   marca (arena/dorado), ya que se ven mejor que blanco puro sobre
   el fondo oscuro del hero.
=========================*/

/* .hero ya tiene overflow:hidden; solo le agregamos position:relative
   para que los destellos (position:absolute) se ubiquen dentro de él. */
.hero{
    position: relative;
}

/* ---------- LOGO FLOTANTE ---------- */
.hero-logo-flotante{
    display: block;
    width: 420px;
    max-width: 60vw;
    height: auto;
    margin: 0 auto 22px;

    /* Aparece suave al cargar la página */
    opacity: 0;
    animation:
        heroLogoAparecer 1s ease-out forwards,
        heroLogoFlotar 4s ease-in-out 1s infinite;

    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

@keyframes heroLogoAparecer{
    from{ opacity: 0; transform: translateY(-16px) scale(0.92); }
    to  { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroLogoFlotar{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-10px); }
}

/* Respeta a quienes prefieren menos movimiento en pantalla */
@media (prefers-reduced-motion: reduce){
    .hero-logo-flotante{
        animation: heroLogoAparecer 0.6s ease-out forwards;
    }
}

/* ---------- DESTELLOS BRILLANTES ---------- */
.hero-particulas{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.destello{
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--size, 5px);
    height: var(--size, 5px);
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #E3C783 55%, transparent 75%);
    opacity: 0;
    animation: destelloParpadeo var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes destelloParpadeo{
    0%, 100%{ opacity: 0;   transform: scale(.3); }
    50%     { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
    .destello{ animation: none; opacity: .5; }
}

/* En móvil, logo un poco más chico para no dominar la pantalla */
@media (max-width: 576px){
    .hero-logo-flotante{
        width: 260px;
        max-width: 70vw;
        margin-bottom: 14px;
    }
}