/* ============================================================
   CÓDIGO ORIGINAL DEL DIRECTORIO (PRESERVADO)
   ============================================================ */
.fs-30px { font-size: 30px; }
.fs-16px { font-size: 16px; }
.fs-14px { font-size: 14px; }
.icon-color { color: #6C1CFF; }
.at-shadow-card.active { background-color: var(--themeColor); }
.line-1 { display: -webkit-box!important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.mh-category-content .in-title-18px{ text-transform: capitalize; }
.image-circle-58px img{ height: 58px; width: 58px; object-fit: cover; border-radius: 50%; }
.at-blog-card-image img { height: 280px; }
.close{ color: #e64949 !important; }
.bt-status-badge{ text-transform: capitalize; }
.bt-bgimg-card{ background-repeat: no-repeat; background-size: cover; background-position: center; }
.capitalize{ text-transform: capitalize; }

/* Beauty & Categories Styles */
.beauty-details-body .header-section { box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.1); }
.beauty-details-body .header-section .at-home-menu-wrap { padding: 6px 0; }
.beauty-details-body .filter-tab-switch .grid-list.active path, .beauty-details-body .filter-tab-switch .grid-list:hover path { fill: #FF736A; }
.beauty-details-body .switch-button .knobs span { background-image: url(../images/icons/location-purple_beauty.svg); }
.beauty-details-body .switch-button .switch-checkbox:checked ~ .layer { background-color: #ff746a2e; }
.beauty-details-body .noUi-connect { background: #FF736A; }
.activeColor svg path, .beautyColor path{ fill: #FF736A !important; }

/* Agent & Sidebar Styles */
.agentTitle{ padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #DCDEE5; }
.agentTitle h4{ font-family: Inter; font-size: 24px; font-weight: 600; color: var(--darkColor); }
.agentTitle a { padding: 12px 16px; background: var(--themeColor); color: #fff; border-radius: 5px; transition: .5s; }
.agentTitle .save-share { background-color: #d5d3d385; color: #000; }
.agentTitle .save-share:hover{ background-color: var(--themeColor); color: #fff; }
.figure{ height: 171px; width: 184px; margin-bottom: 0; }
.figure img{ width: 100%; height: 100%; object-fit: cover; }
.agentDescription{ display: flex; gap: 20px; }

/* Map & General UI */
.mapboxgl-popup-close-button { right: -6px !important; top: -9px !important; height: 20px; width: 20px; border: 1px solid var(--themeColor) !important; background-color: var(--themeColor) !important; border-radius: 50% !important; color: #fff; }
.hidden { display: none; }
.paginationColor .active > .page-link { color: var(--whiteColor); background-color: var(--themeColor); border-color: var(--themeColor); }

/* Pricing Section Styles (Original) */
.eShadow{ transition: .5s; }
.eShadow:hover li, .eShadow:hover h1, .eShadow:hover p, .eShadow:hover h4{ color: #fff; transition: .5s; }
.eShadow:hover{ background-color: var(--themeColor); color: #fff; }
.eShadow .theme-btn1{ transition: .5s; }
.eShadow:hover .theme-btn1{ background-color: #fff; color: var(--themeColor); }

/* (He omitido algunas clases repetitivas por espacio, pero en tu archivo mantendrás todo lo anterior) */

/* ============================================================
   REPARACIÓN DEFINITIVA: MONEDA MEX (Mex$)
   ============================================================ */

/* 1. Forzar el prefijo "Mex" antes del signo "$" */
.eShadow h1::before, 
.package-price span::before,
.price-value::before,
.amount::before {
    content: "Mex" !important;
    display: inline-block !important;
    font-weight: bold !important;
    margin-right: 2px !important;
}

/* 2. Reemplazar "Monthly" por "Mensual" de forma limpia */
/* Buscamos el párrafo que contiene la duración dentro de la tarjeta de precio */
.eShadow p {
    font-size: 0 !important; /* Ocultamos el texto original 'Monthly' */
}

.eShadow p::after {
    content: "Pago Mensual" !important; /* Insertamos el nuevo texto */
    font-size: 16px !important; /* Restauramos el tamaño de fuente */
    display: block !important;
    color: inherit !important;
}

/* 3. Asegurar que al pasar el mouse (hover) el texto siga siendo visible */
.eShadow:hover p::after {
    color: #fff !important;
}

/* 4. Ajuste para el botón de acción en los planes */
.eShadow .theme-btn1 {
    text-transform: uppercase;
    font-weight: 700;
}