/* Estilos personalizados para aplicar las fuentes importadas */

body{
     font-family: 'Montserrat', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: #f0f4f8; /* Un gris azulado muy claro para el fondo */
     /*font-family: 'Inter', sans-serif;*/
}
.font-playfair {
            font-family: 'Playfair Display', serif;
        }

.card-wrap{
    position:relative;
    overflow:hidden;
    width:100%;
    max-width:400px;
    border-radius:32px;
    background:#3B3664;
    /*backdrop-filter:blur(16px);
    box-shadow:0 25px 60px rgba(0,0,0,.45);*/
    border:1px solid rgba(255,255,255,.08)
}


.profile-box{
    position:relative;
    display:flex;

    justify-content:center;
    margin-top:-56px
}

.avatar{
    width:112px;
    height:112px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid rgba(255,255,255,.9);
    box-shadow:0 10px 25px rgba(0,0,0,.35)
}


 /* Mascara imagen onda */
.wave-clip {
clip-path: url(#wave-shape);
}

.status-dot{
    position:
    absolute;right:calc(50% - 48px);
    bottom:6px;
    width:18px;
    height:18px;
    background:#22c55e;
    border:3px solid white;
    border-radius:50%
}

.content{
    padding:24px;
    text-align:center;
    color:white
}
.tag{
    display:inline-block;
    background:rgba(255,255,255,.08);
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    letter-spacing:.08em
}
h1{
    font-size:2rem;
    font-weight:800;
    margin-top:12px
}
p{
    color:#cbd5e1;
    margin-top:8px;
    line-height:1.6
}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}

.icon-link {
            background-color: rgba(255, 255, 255, 0.2);
            /* backdrop-filter: blur(5px); */ /* Eliminado para mejorar rendimiento en scroll */
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease-in-out;
}

.icon-link:hover {
            background-color: rgba(255, 255, 255, 0.4);
            transform: translateY(-5px);
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* Estilo para el efecto de vidrio esmerilado (Glassmorphism) */
        .glassmorphism {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        /* Estilos para los popups (modales) */
        .modal {
            display: none; /* Oculto por defecto */
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            /* border: 1px solid #888; */
            width: 90%;
            max-width: 350px;
            border-radius: 1.5rem;
            text-align: center;
            animation: fadeIn 0.3s;
            position: relative;
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

/* Estilos para el modal de Servicios */
        .services-modal-content {
            background-color: #f9fafb; /* Un blanco un poco más suave */
            max-width: 380px;
            border-radius: 1.5rem;
            padding: 0;
            overflow: hidden;
            text-align: left;
            border: 2px solid #FF7420; /* Borde con color de la paleta */
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Sombra para profundidad */
            .bg-\[\#8c524e\] {
            --tw-bg-opacity: 1;
            background-color: #128C7E;
        }
        .text-\[\#6a3f3c\] {
        --tw-text-opacity: 1;
        color: #F26E22;
    
        }
       @keyframes fadeIn {
            from {opacity: 0; transform: scale(0.9);}
            to {opacity: 1; transform: scale(1);}
        }
        .close-button {
            color: #6b7280; /* Gris más oscuro */
            position: absolute;
            top: 10px;
            right: 10px;
            width: 32px;
            height: 32px;
            border-radius: 9999px;
            background-color: #e5e7eb; /* Fondo circular */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10;
            transition: all 0.2s ease-in-out;
        }
        .close-button:hover,
        .close-button:focus {
            background-color: #d1d5db; /* Fondo más oscuro al pasar el ratón */
            color: black;
            transform: rotate(90deg); /* Efecto de rotación */
        }
        .text-shadow {
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
        }

        .mobile-scroll {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain; /* Mejora la experiencia de scroll */
        }
.banner-clip {
            clip-path: ellipse(100% 60% at 50% 40%);
        }