/* ── MASCOTAS ── */
.mascot-section {
    position: relative;
    overflow: hidden;
    padding: 90px 20px;
    background: var(--navy);
    text-align: center;
}

/* TITULO */
.mascot-section h3 {
    font-family: var(--serif);
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 45px;
    background: linear-gradient(
        90deg,
        var(--gold) 0%,
        #ffffff 45%,
        var(--gold) 55%,
        var(--gold) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: digitalScan 4s linear infinite;
}

@keyframes digitalScan {
    to { background-position: 200% 0; }
}

/* CONTENEDOR — centra todo */
.mascot-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* HALO DORADO */
.mascot-glow {
    position: absolute;
    width: clamp(200px, 28vw, 320px);
    height: clamp(200px, 28vw, 320px);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,215,0,.18) 0%,
        rgba(255,215,0,.08) 40%,
        transparent 70%
    );
    filter: blur(35px);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* IMAGEN — un solo tamaño fluido, sin media queries */
.mascot-img {
    position: relative;
    z-index: 2;
    width: clamp(170px, 22vw, 280px);
    height: 250px;
    object-fit: contain;
    animation: floatMascot 5s ease-in-out infinite;
    transition: filter .35s;
    filter:
        drop-shadow(0 10px 35px rgba(0,0,0,.35))
        drop-shadow(0 0 18px rgba(255,215,0,.18));
}

.mascot-img:hover {
    filter:
        drop-shadow(0 15px 45px rgba(0,0,0,.45))
        drop-shadow(0 0 35px rgba(255,215,0,.30));
}

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

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: .8; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* Solo ajustamos el padding vertical de la sección en mobile */
@media (max-width: 768px) {
    .mascot-section { padding: 70px 10px; }
}

@media (max-width: 480px) {
    .mascot-section { padding: 60px 5px; }
}



/* BOTONES CTA */

.btn-wa-modern,
.btn-mail-modern{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-width:290px;
    padding:17px 30px;

    border-radius:18px;
    font-weight:700;
    font-size:1rem;
    text-decoration:none;

    transition:.35s;
    cursor:pointer;
}

/* Whatsapp */

.btn-wa-modern{
    color:#fff;
    background:linear-gradient(135deg,#25D366,#179848);
    border:none;
    box-shadow:0 12px 30px rgba(37,211,102,.28);
}

.btn-wa-modern i{
    font-size:1.45rem;
}

.btn-wa-modern:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(37,211,102,.45);
    color:#fff;
}

/* Email */

.btn-mail-modern{
    background:rgba(255,255,255,.06);
    color:#fff;

    border:2px solid rgba(255,215,0,.45);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.btn-mail-modern i{
    color:var(--gold);
    font-size:1.2rem;
}

.btn-mail-modern:hover{
    transform:translateY(-5px);
    background:linear-gradient(135deg,var(--gold),#f7cf45);
    color:#08111d;
    border-color:var(--gold);
    box-shadow:0 18px 35px rgba(255,215,0,.35);
}

.btn-mail-modern:hover i{
    color:#08111d;
}

@media(max-width:768px){

    .btn-wa-modern,
    .btn-mail-modern{
        width:100%;
        min-width:unset;
        font-size:.95rem;
        padding:16px 22px;
    }

}