:root { --color-fondo-1: #f4ecd0;
--color-fondo-2: #e1d9c0;
--color-fondo-3: #374151;
--color-fondo-4: #9a634e; --color-txt-1: #f4ecd0;
--color-txt-2: #e1d9c0;
--color-txt-3: #374151;
--color-txt-4: #9a634e; --color-primary: var(--color-fondo-4);
--color-secondary: var(--color-fondo-3);
--color-background-base: var(--color-fondo-1);
--color-surface: #ffffff;
--surface: var(--color-surface);
--surface-low: var(--color-fondo-1);
--color-text-base: var(--color-txt-3);
--color-text-muted: #6b7280;  --font-family-base: 'Inter', sans-serif; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--border-radius-sm: 0.125rem; --border-radius-md: 0.375rem; --border-radius-lg: 0.5rem; --border-radius-xl: 0.75rem; --border-radius-2xl: 1rem; --border-radius-full: 9999px; --header-height-fixed: 4rem; --sidebar-width-fixed: 16rem;  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
} .art-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height-fixed);
background: var(--color-background-base);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .art-header__left {
display: flex;
align-items: center;
gap: 1.5rem;
flex: 1;
}
.art-header__menu-toggle {
display: none; background: transparent;
border: none;
font-size: 1.25rem;
cursor: pointer;
color: var(--color-text-base);
padding: 0.5rem;
border-radius: var(--border-radius-md);
transition: var(--transition-normal);
}
.art-header__menu-toggle:hover {
background: rgba(0, 0, 0, 0.05);
}
.art-header__menu-toggle:active {
transform: scale(0.9);
}
.art-header__menu-toggle i {
transition: var(--transition-normal);
}
.art-header__menu-toggle.is-active i {
transform: rotate(90deg);
}
.art-header__logo {
flex-shrink: 0;
}
.art-header__logo img {
height: 2rem;
width: auto;
object-fit: contain;
}
.art-header__logo-desktop {
display: none !important;
}
.art-header__logo-mobile {
display: block !important;
}
.art-header__search {
flex: 1;
max-width: 28rem;
min-width: 0;
} .art-header__actions {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
} .art-header__action-btn {
position: relative;
padding: 0.5rem;
color: var(--color-text-base);
background: transparent;
border-radius: var(--border-radius-lg);
border: none;
cursor: pointer;
transition: background-color var(--transition-fast) ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.art-header__action-btn:hover {
background-color: var(--color-fondo-2);
}
.art-header__action-btn--primary {
background-color: var(--color-primary);
color: var(--color-surface);
border-radius: var(--border-radius-full);
width: 2rem;
height: 2rem;
margin-bottom: -3px; }
.art-header__action-btn--primary:hover {
background-color: var(--color-primary);
opacity: 0.9;
} .art-header__user-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem 0.25rem 0.25rem;
border-radius: 2rem;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.05);
background: transparent;
transition: all var(--transition-fast);
}
.art-header__user-btn:hover {
background-color: var(--color-fondo-1);
border-color: rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
.art-header__user-name-pill {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-base);
display: block;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .art-header__avatar {
border-radius: var(--border-radius-full);
width: 2rem;
height: 2rem;
object-fit: cover;
} .art-header__badge-notification {
position: absolute;
top: -0.25rem;
right: -0.25rem;
background-color: #ef4444; color: var(--color-surface);
font-size: 0.75rem;
border-radius: var(--border-radius-full);
height: 1.25rem;
width: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
line-height: 1;
} .art-header__dropdown {
display: none;
position: absolute;
right: 0;
margin-top: 0.5rem;
background-color: var(--color-background-base);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
z-index: 40;
}
.art-header__dropdown.is-open {
display: block;
}
.art-header__dropdown--md {
width: 16rem;
}
.art-header__dropdown--lg {
width: 20rem;
} .art-header__dropdown-header {
padding: 0.5rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.art-header__dropdown-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-base);
margin: 0;
}
.art-header__dropdown-body {
padding: 0.5rem 0;
}
.art-header__dropdown-body--scrollable {
max-height: 16rem;
overflow-y: auto;
}
.art-header__dropdown-footer {
padding-top: 0.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
} .art-header__user-profile {
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.art-header__user-profile-meta {
display: flex;
align-items: center;
gap: 0.75rem;
}
.art-header__user-avatar {
flex-shrink: 0;
}
.art-header__user-details {
flex: 1;
}
.art-header__user-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-base);
margin: 0;
}
.art-header__user-role {
font-size: 0.75rem;
color: var(--color-text-muted);
margin: 0;
}
.art-header__user-stats {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
margin-top: 0.75rem;
}
.art-header__user-stat-value {
font-weight: 500;
} .art-header__dropdown-link {
display: flex;
align-items: center;
padding: 0.375rem 1rem;
font-size: 0.775rem;
color: var(--color-text-base);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.art-header__dropdown-link:hover {
background-color: var(--color-fondo-2);
}
.art-header__dropdown-link--danger {
color: #ef4444; }
.art-header__dropdown-link--danger:hover {
background-color: #fee2e2; }
.art-header__dropdown-link-icon {
width: 1rem;
margin-right: 0.75rem;
text-align: center;
} .art-header__actions-desktop {
display: none;
}
.art-header__actions-mobile {
display: flex;
align-items: center;
gap: 0.5rem;
} .art-header__quick-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
padding: 1rem;
}
.art-header__quick-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border-radius: var(--border-radius-lg);
transition: all var(--transition-normal);
text-decoration: none;
color: var(--color-surface);
font-weight: 500;
}
.art-header__quick-item:hover {
opacity: 1;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.art-header__quick-item i {
font-size: 1.1rem;
margin-right: 1.25rem;
opacity: 0.9;
}
.art-header__quick-item--primary {
background-color: var(--color-fondo-4);
border: 1px solid transparent;
}
.art-header__quick-item--secondary {
background-color: var(--color-fondo-3);
border: 1px solid transparent;
}
.art-header__quick-item--outline {
background-color: var(--color-fondo-2);
border: 1px solid rgba(0, 0, 0, 0.08);
color: var(--color-text-base);
}
.art-header__quick-item--outline:hover {
background-color: var(--color-fondo-1);
border-color: var(--color-primary);
} .art-header__auth-desktop {
display: none;
}
.art-header__auth-login-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-base);
text-decoration: none;
border-radius: var(--border-radius-md);
transition: all var(--transition-fast);
}
.art-header__auth-login-btn:hover {
background-color: rgba(0, 0, 0, 0.04);
color: var(--color-primary);
}
.art-header__auth-register-btn {
padding-left: 1.75rem;
padding-right: 1.75rem;
border-radius: 2rem; }
.art-header__action-btn--login {
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
background-color: transparent;
} @media (min-width: 768px) {
.art-header__logo-desktop {
display: block !important;
}
.art-header__logo-mobile {
display: none !important;
}
.art-header__menu-toggle {
display: none;
}
.art-header__actions-desktop {
display: flex;
align-items: center;
gap: 1rem;
}
.art-header__actions-mobile {
display: none;
}
.art-header__auth-mobile {
display: none;
}
.art-header__auth-desktop {
display: flex;
align-items: center;
gap: 0.75rem;
}
}
@media (min-width: 1024px) {
.art-header__left {
gap: 2rem;
}
.art-header__search {
max-width: 32rem;
}
} .art-notification-item {
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background-color var(--transition-fast) ease;
display: flex;
align-items: start;
gap: 0.75rem;
}
.art-notification-item:hover {
background-color: var(--color-fondo-2);
}
.art-notification-icon-wrapper {
flex-shrink: 0;
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin-top: 2px;
}
.art-notification-content {
flex: 1;
min-width: 0;
}
.art-notification-message {
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-text-base);
margin: 0;
}
.art-notification-message a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.art-notification-message a:hover {
text-decoration: underline;
}
.art-notification-snippet {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: 0.25rem;
margin-bottom: 0;
}
.art-notification-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.25rem;
}
.art-notification-date {
font-size: 0.75rem;
color: var(--color-text-muted);
opacity: 0.8;
}
.art-notification-action-link {
font-size: 0.75rem;
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.art-notification-action-link:hover {
text-decoration: underline;
} @media (max-width: 767px) { .art-header__actions-mobile .art-header__dropdown {
position: fixed !important;
top: var(--header-height-fixed) !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: calc(100vw - 20px) !important;
max-width: 360px !important;
margin-top: 0.5rem;
}
}
.art-sidebar {
background: linear-gradient(135deg, #f9f7f2 0%, #f5f1e8 100%);
position: fixed;
top: var(--header-height);
left: 0;
width: var(--sidebar-width);
height: calc(100vh - var(--header-height));
z-index: 900;
border-right: 1px solid rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, width 0.3s ease;
transform: translateX(-100%);
}
@media (min-width: 768px) {
.art-sidebar {
transform: translateX(0);
flex-shrink: 0;
}
}
.art-sidebar--open {
transform: translateX(0);
box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
}
.art-sidebar__toggle {
position: absolute;
right: -1rem;
top: 1.5rem;
background: var(--fondo-2, #e1d9c0);
border-radius: 50%;
width: 2rem;
height: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 0;
z-index: 10;
border: 1px solid var(--txt-4, #9a634e);
transition: all 0.2s;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media (min-width: 1024px) {
.art-sidebar__toggle {
display: flex;
}
}
.art-sidebar__toggle:hover {
background-color: var(--fondo-1, #f4ecd0);
transform: scale(1.05);
}
.art-sidebar__toggle-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--txt-4, #9a634e);
}
.art-sidebar__content {
padding: 15px 0 10px 0;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
background-color: var(--fondo-1, #f4ecd0);
}
.art-sidebar__nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.art-sidebar__link {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--txt-4, #9a634e);
border-radius: var(--border-radius-md, 0.5rem);
transition: background-color 0.2s;
position: relative;
text-decoration: none;
}
.art-sidebar__link:hover {
background-color: var(--fondo-1, #f4ecd0);
}
.art-sidebar__link-icon {
width: 1.25rem;
margin-right: 0.75rem;
font-size: 1.125rem;
color: var(--txt-4, #9a634e);
display: flex;
align-items: center;
justify-content: center;
}
.art-sidebar__quick-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.art-sidebar__quick-action {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: var(--border-radius-md, 0.5rem);
transition: opacity 0.2s;
color: white;
text-decoration: none;
}
.art-sidebar__quick-action:hover {
opacity: 0.8;
}
.art-sidebar__quick-action--bg-4 {
background-color: var(--fondo-4, #9a634e);
}
.art-sidebar__quick-action--bg-3 {
background-color: var(--fondo-3, #b8860b);
}
.art-sidebar__quick-action--bg-2 {
background-color: var(--fondo-2, #e1d9c0);
color: var(--txt-4, #9a634e);
}
.art-sidebar__quick-action--outline {
border: 1px solid var(--color-gray-300, #d1d5db);
color: var(--txt-4, #9a634e);
}
.art-sidebar__quick-action--outline:hover {
background-color: var(--fondo-1, #f4ecd0);
}
.art-sidebar__quick-action i {
font-size: 0.75rem;
margin-right: 0.25rem;
}
.art-sidebar__quick-action span {
font-size: 0.75rem;
font-weight: 500;
}
.art-sidebar__footer {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
} .art-sidebar__tooltip {
display: none;
position: absolute;
left: 100%;
margin-left: 0.5rem;
padding: 0.25rem 0.5rem;
background-color: #1f2937;
color: white;
font-size: 0.75rem;
border-radius: 0.25rem;
white-space: nowrap;
z-index: 50;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.art-sidebar__tooltip::before {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #1f2937 transparent transparent;
} .art-sidebar.is-collapsed {
width: 70px !important;
min-width: 70px !important;
}
.art-sidebar.is-collapsed .art-sidebar__content {
align-items: center;
overflow: visible !important;
}
.art-sidebar.is-collapsed .art-sidebar__content>div:not(:first-child) {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.art-sidebar.is-collapsed .art-sidebar__link {
justify-content: center;
padding: 0.625rem 0.5rem;
}
.art-sidebar.is-collapsed .art-sidebar__link-text {
display: none;
}
.art-sidebar.is-collapsed .art-sidebar__link-icon {
margin-right: 0;
}
.art-sidebar.is-collapsed .art-sidebar__footer {
display: none;
}
.art-sidebar.is-collapsed .badge {
display: none !important;
}
.art-sidebar.is-collapsed .art-sidebar__link:hover .art-sidebar__tooltip {
display: block;
}
.art-sidebar.is-collapsed .art-sidebar__quick-actions {
display: none;
}
.art-footer {
background: var(--fondo-1, #f4ecd0);
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 2rem 0;
position: relative;
z-index: 10;
margin-top: auto;
flex-shrink: 0;
transition: margin-left 0.3s ease, width 0.3s ease;
}
@media (min-width: 768px) {
.art-footer {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .art-footer {
margin-left: 70px;
width: calc(100% - 70px);
}
}
.art-footer__container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.art-footer__container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.art-footer__container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.art-footer__container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.art-footer__container {
max-width: 1280px;
}
}
.art-footer__grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 2rem;
}
@media (min-width: 768px) {
.art-footer__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.art-footer__logo {
width: 4rem;
height: auto;
margin-right: 1rem;
margin-bottom: 1rem;
}
@media (min-width: 1024px) {
.art-footer__logo {
width: 5rem;
}
}
.art-footer__title {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--txt-3, #5a3c2a);
}
.art-footer__text {
font-size: 0.875rem;
color: var(--txt-3, #5a3c2a);
}
.art-footer__list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.art-footer__link {
display: flex;
align-items: center;
color: var(--txt-3, #5a3c2a);
transition: color 0.3s;
text-decoration: none;
}
.art-footer__link:hover {
color: var(--txt-1, #2d1a10);
}
.art-footer__link i {
margin-right: 0.5rem;
} .btn-scroll-top {
position: fixed;
bottom: 6.5rem !important;
right: 1rem !important;
width: 1.75rem !important;
height: 1.75rem !important;
background-color: var(--color-gray-600, #4b5563);
color: white;
border-radius: 9999px;
display: none;
align-items: center;
justify-content: center;
transition: opacity 0.3s, background-color 0.3s;
opacity: 0;
z-index: 10000;
border: none;
cursor: pointer;
}
.btn-scroll-top i {
font-size: 0.75rem !important;
}
@media (min-width: 768px) {
.btn-scroll-top {
bottom: 1.25rem !important;
right: 1.25rem !important;
width: 3rem !important;
height: 3rem !important;
}
.btn-scroll-top i {
font-size: 1.25rem !important;
}
}
.btn-scroll-top:hover {
background-color: var(--color-gray-500, #6b7280);
}
.btn-scroll-top.is-visible {
display: flex;
opacity: 1;
} .art-whatsapp-btn {
position: fixed;
bottom: 9rem; right: 1rem;
width: 3.5rem;
height: 3.5rem;
background-color: var(--fondo-4, #9a634e);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
text-decoration: none;
border: none;
}
.art-whatsapp-btn:hover {
background-color: var(--txt-4, #7a4f3e);
transform: scale(1.05);
color: white;
}
.art-whatsapp-btn i {
font-size: 2rem;
}
@media (min-width: 768px) {
.art-whatsapp-btn {
bottom: 5rem; right: 1.25rem;
}
} .art-whatsapp-bubble {
position: fixed;
bottom: 13.5rem;
right: 1rem;
background-color: white;
padding: 1.25rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
width: 250px;
z-index: 9998;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
border: 1px solid var(--fondo-4, #9a634e);
}
.art-whatsapp-bubble.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (min-width: 768px) {
.art-whatsapp-bubble {
bottom: 9.5rem;
right: 1.25rem;
}
}
.art-whatsapp-bubble::after {
content: '';
position: absolute;
bottom: -8px;
right: 36px;
width: 14px;
height: 14px;
background-color: white;
border-bottom: 1px solid var(--fondo-4, #9a634e);
border-right: 1px solid var(--fondo-4, #9a634e);
transform: rotate(45deg);
}
.art-whatsapp-bubble h4 {
margin: 0 0 8px;
color: var(--txt-3, #5a3c2a);
font-size: 1rem;
font-weight: 700;
}
.art-whatsapp-bubble p {
margin: 0 0 12px;
color: #4b5563;
font-size: 0.875rem;
line-height: 1.4;
}
.art-whatsapp-bubble a {
display: block;
text-align: center;
background-color: #25D366;
color: white;
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: background-color 0.2s;
}
.art-whatsapp-bubble a:hover {
background-color: #1ebe57;
}
 .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
border-radius: var(--border-radius-md);
cursor: pointer;
text-decoration: none;
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.btn:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.btn:active {
transform: scale(0.98);
} .btn--pill {
border-radius: var(--border-radius-full);
padding-left: 1.5rem;
padding-right: 1.5rem;
} .btn--primary {
background: linear-gradient(135deg, var(--color-primary), #7a4f3e);
color: var(--color-surface);
box-shadow: 0 4px 12px rgba(154, 99, 78, 0.25);
border: none;
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(154, 99, 78, 0.35);
opacity: 1;
color: var(--color-surface);
} .btn--secondary {
background: linear-gradient(135deg, var(--color-secondary), #1f2937);
color: var(--color-surface);
box-shadow: 0 4px 12px rgba(55, 65, 81, 0.2);
border: none;
}
.btn--secondary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(55, 65, 81, 0.3);
opacity: 1;
color: var(--color-surface);
} .btn--outline {
background-color: var(--color-surface);
border: 1px solid rgba(0, 0, 0, 0.12);
color: var(--color-text-base);
box-shadow: var(--shadow-sm);
}
.btn--outline:hover {
background-color: var(--color-fondo-1);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: var(--color-text-base);
} .btn--ghost {
background-color: transparent;
color: var(--color-text-base);
}
.btn--ghost:hover {
background-color: rgba(0, 0, 0, 0.05);
} .btn--sm {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
} .btn--block {
display: flex;
width: 100%;
} .btn--lg {
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
gap: 0.75rem;
} .hidden {
display: none !important;
}
.opacity-0 {
opacity: 0 !important;
}
.opacity-100 {
opacity: 1 !important;
}
.scale-95 {
transform: scale(0.95);
}
.scale-100 {
transform: scale(1);
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
font-size: 0.75rem; font-weight: 700; line-height: 1;
padding: 0.25rem 0.5rem; white-space: nowrap;
}
.badge--danger {
background-color: #ef4444; color: white;
}
.badge--primary {
background-color: var(--color-primary);
color: var(--color-surface);
}
.badge--pulse {
animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes badge-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
.art-card {
display: flex;
flex-direction: column;
height: 100%;
background-color: transparent;
transition: transform 0.3s ease;
width: 100%;
}
.art-card__image-wrapper {
position: relative;
width: 100%;
height: 12rem;
margin-bottom: 1rem;
overflow: hidden;
border-radius: var(--border-radius-xl, 0.75rem);
}
.art-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.art-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--fondo-2, #e1d9c0);
color: var(--txt-4, #9a634e);
border-radius: var(--border-radius-xl, 0.75rem);
}
.art-card__placeholder svg {
width: 3rem;
height: 3rem;
}
.art-card__badge-wrapper {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 10;
}
.art-card__badge {
background-color: var(--fondo-4, #9a634e);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
backdrop-filter: blur(4px);
}
.art-card__badge svg {
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
}
.art-card__badge--success {
background-color: #10b981;
color: white;
}
.art-card__badge-dot {
width: 0.5rem;
height: 0.5rem;
background-color: white;
border-radius: 9999px;
margin-right: 0.25rem;
animation: art-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes art-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
.art-card__actions {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
gap: 0.25rem;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
.art-card:hover .art-card__actions,
.art-card__actions--visible {
opacity: 1;
}
.art-card__action-btn {
background-color: rgba(249, 247, 242, 0.9); color: var(--color-gray-700, #374151);
padding: 0.375rem;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.art-card__action-btn:hover {
background-color: rgba(249, 247, 242, 1);
}
.art-card__action-btn svg {
width: 0.75rem;
height: 0.75rem;
}
.art-card__content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.art-card__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--txt-4, #9a634e);
line-height: 1.25;
}
.art-card__title a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.art-card__title a:hover {
color: var(--color-gray-700, #374151);
}
.art-card__meta {
display: flex;
align-items: center;
color: var(--color-gray-500, #6b7280);
font-size: 0.875rem;
}
.art-card__meta svg {
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
flex-shrink: 0;
}
.art-card__meta-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.art-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.art-card__tag {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.art-card__tag--primary {
background-color: var(--fondo-3, #b8860b);
color: white;
}
.art-card__tag--secondary {
background-color: var(--color-gray-100, #f3f4f6);
color: var(--color-gray-600, #4b5563);
}
.art-card__date-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-gray-100, #f3f4f6);
}
.art-card__date {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-gray-600, #4b5563);
font-size: 0.8125rem;
}
.art-card__date svg {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
color: var(--fondo-4, #9a634e);
} .art-card__date-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 3.5rem;
height: 3.5rem;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.art-card__date-day {
font-size: 1.125rem;
font-weight: 700;
color: var(--txt-3, #9a634e);
line-height: 1;
}
.art-card__date-month {
font-size: 0.65rem;
font-weight: 600;
color: var(--color-gray-500, #6b7280);
text-transform: uppercase;
} .art-card--horizontal {
flex-direction: row;
min-height: 160px;
height: auto;
background-color: var(--color-fondo-2);
border-radius: var(--border-radius-xl, 0.75rem);
border: 1px solid rgba(0, 0, 0, 0.03);
overflow: hidden;
transition: all var(--transition-normal);
}
.art-card--horizontal:hover {
background-color: white;
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.art-card--horizontal .art-card__image-wrapper {
width: 33.333333%;
position: relative;
height: 100%;
margin-bottom: 0;
border-radius: var(--border-radius-xl, 0.75rem) 0 0 var(--border-radius-xl, 0.75rem);
}
.art-card--horizontal .art-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.art-card--horizontal .art-card__content {
flex: 1;
padding: 1.25rem;
justify-content: center;
}
@media (max-width: 767px) {
.art-card--horizontal {
flex-direction: column;
}
.art-card--horizontal .art-card__image-wrapper {
width: 100%;
position: relative;
height: 8rem;
border-radius: var(--border-radius-xl, 0.75rem) var(--border-radius-xl, 0.75rem) 0 0;
}
.art-card--horizontal .art-card__content {
width: 100%;
padding: 0.75rem;
}
} .art-card.is-highlighted { box-shadow: 0 10px 25px -5px rgba(154, 99, 78, 0.4);
border: 2px solid var(--fondo-4, #9a634e);
z-index: 10;
}
.art-carousel-section {
margin-top: 3rem;
}
.art-carousel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding: 0 20px;
}
.art-carousel__title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-gray-600, #4b5563);
}
.art-carousel__nav-wrapper {
display: flex;
gap: 0.5rem;
}
.art-carousel__nav-btn {
background-color: var(--fondo-2, #e1d9c0);
color: var(--color-gray-700, #374151);
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border: none;
cursor: pointer;
}
.art-carousel__nav-btn:hover {
background-color: var(--fondo-4, #9a634e);
color: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.art-carousel__nav-btn svg {
width: 1.25rem;
height: 1.25rem;
} .art-cinta {
position: relative;
width: 100%;
padding-top: 2rem;
padding-bottom: 2rem;
overflow: hidden;
}
.art-cinta__header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 1024px) {
.art-cinta__header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.art-cinta__title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-gray-600, #4b5563);
margin-bottom: 0.5rem;
}
.art-cinta__desc {
color: var(--color-gray-600, #4b5563);
font-size: 0.875rem;
}
@media (min-width: 1024px) {
.art-cinta__desc {
font-size: 1rem;
}
}
.art-cinta__actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.art-cinta__wrapper {
position: relative;
} .art-cinta__gradient-left,
.art-cinta__gradient-right {
position: absolute;
top: 0;
bottom: 0;
width: 6rem;
z-index: 10;
pointer-events: none;
}
.art-cinta__gradient-left {
left: 0;
background: linear-gradient(to right, var(--fondo-1, #f4ecd0) 0%, transparent 100%);
}
.art-cinta__gradient-right {
right: 0;
background: linear-gradient(to left, var(--fondo-1, #f4ecd0) 0%, transparent 100%);
} .art-cinta__track {
display: flex;
gap: 16px;
animation: scroll-cinta 90s linear infinite;
width: fit-content;
}
.art-cinta__track:hover {
animation-play-state: paused;
}
.art-cinta__group {
display: flex;
gap: 16px;
flex-shrink: 0;
} .art-cinta__item {
position: relative;
flex-shrink: 0;
width: 150px;
height: 150px;
border-radius: 0.5rem;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: block;
}
.art-cinta__item:hover {
transform: scale(1.05) translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.art-cinta__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.art-cinta__placeholder {
background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.art-cinta__placeholder svg {
width: 3rem;
height: 3rem;
color: var(--color-gray-400, #9ca3af);
}
.art-cinta__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0.5rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.art-cinta__item:hover .art-cinta__overlay {
opacity: 1;
}
.art-cinta__overlay-text {
color: white;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
padding: 0 0.5rem;
} @media (max-width: 768px) {
.art-cinta__track {
animation-duration: 120s;
gap: 12px;
}
.art-cinta__group {
gap: 12px;
}
.art-cinta__item {
width: 100px;
height: 100px;
}
}
@media (max-width: 480px) {
.art-cinta__track {
gap: 10px;
}
.art-cinta__group {
gap: 10px;
}
.art-cinta__item {
width: 90px;
height: 90px;
}
.art-cinta__overlay-text {
font-size: 0.625rem;
}
}
@keyframes scroll-cinta {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.art-stats {
padding-top: 3rem;
padding-bottom: 3rem;
background-color: transparent;
}
.art-stats__container {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
@media (min-width: 640px) {
.art-stats__container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media (min-width: 1024px) {
.art-stats__container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
.art-stats__grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.25rem;
}
@media (min-width: 640px) {
.art-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.art-stats__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.art-stats__grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.art-stats__item {
background-color: var(--fondo-2, #e1d9c0);
border-radius: 1rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.art-stats__item:hover {
transform: translateY(-0.25rem);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.art-stats__icon-wrapper {
width: 3rem;
height: 3rem;
border-radius: 50%;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.art-stats__icon-wrapper--3 {
background-color: var(--fondo-3, #b8860b);
color: white;
}
.art-stats__icon-wrapper--4 {
background-color: var(--fondo-4, #9a634e);
color: white;
}
.art-stats__icon {
font-size: 1.25rem;
}
.art-stats__number {
font-size: 2.25rem;
font-weight: 800;
color: var(--txt-4, #9a634e);
line-height: 1;
margin-bottom: 0.25rem;
}
.art-stats__label {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-600, #4b5563);
text-transform: uppercase;
letter-spacing: 0.05em;
} .art-cities {
margin-top: 3rem;
margin-bottom: 2rem;
}
.art-cities__header {
text-align: center;
margin-bottom: 2rem;
}
.art-cities__title {
font-size: 1.875rem;
color: var(--color-gray-600, #4b5563);
font-weight: 700;
margin-bottom: 0.5rem;
}
.art-cities__desc {
color: var(--color-gray-600, #4b5563);
}
.art-cities__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
padding: 0 1rem;
}
@media (min-width: 768px) {
.art-cities__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
}
@media (min-width: 1024px) {
.art-cities__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.art-cities__item {
position: relative;
display: block;
height: 12rem;
border-radius: 0.75rem;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.art-cities__item:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}
.art-cities__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.art-cities__item:hover .art-cities__image { opacity: 0.9;
}
.art-cities__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.25rem;
}
.art-cities__name {
color: white;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.art-cities__count {
color: var(--fondo-1, #f4ecd0);
font-size: 0.875rem;
opacity: 0.9;
} .art-map-wrapper {
margin: 4rem 0;
padding: 0 1rem;
}
.art-map-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-gray-600, #4b5563);
text-align: left;
margin-bottom: 0.5rem;
font-family: var(--font-family-base);
letter-spacing: -0.02em;
} .art-map-cluster {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
transition: transform 0.2s ease;
}
.art-map-cluster--small {
width: 40px;
height: 40px;
background-color: var(--color-fondo-4, #9a634e);
}
.art-map-cluster--medium {
width: 50px;
height: 50px;
background-color: var(--color-fondo-3, #374151);
}
.art-map-cluster--large {
width: 65px;
height: 65px;
background-color: var(--color-txt-3, #374151);
}
.art-map-marker {
width: 34px;
height: 34px;
border-radius: 50% 50% 50% 0;
background-color: var(--color-fondo-4, #9a634e);
border: 2px solid white;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transform: rotate(-45deg);
transition: all 0.2s ease;
}
.art-map-marker i {
transform: rotate(45deg);
font-size: 1rem;
}
.art-map-marker--museo {
background-color: var(--color-fondo-3, #374151);
}
.art-map-marker--teatro {
background-color: var(--color-txt-4, #9a634e);
}
.art-map-marker--galeria {
background-color: var(--color-fondo-4, #9a634e);
}
.art-map-marker:hover {
transform: rotate(-45deg) scale(1.2);
z-index: 1000 !important;
} .map-container {
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.map-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
z-index: 9;
transition: var(--transition-normal);
}
.map-overlay__btn {
background-color: var(--color-fondo-4);
color: white;
padding: 0.625rem 1.5rem;
border-radius: var(--border-radius-md);
font-weight: 600;
font-size: 0.9375rem;
border: none;
cursor: pointer;
box-shadow: var(--shadow-lg);
transition: var(--transition-fast);
}
.map-overlay__btn:hover {
background-color: #7d4d3b;
transform: translateY(-2px);
}
.map-disable__btn {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
z-index: 1000;
background-color: var(--color-fondo-3);
color: white;
padding: 0.4rem 0.8rem;
border-radius: var(--border-radius-md);
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
display: none;
transition: var(--transition-fast);
}
.map-disable__btn.is-active {
display: block;
}
.map-disable__btn:hover {
background-color: #1f2937;
}
.map-return__btn {
position: fixed;
bottom: 1.5rem;
left: 1.5rem;
z-index: 100;
background-color: var(--color-fondo-4);
color: white;
padding: 0.75rem 1rem;
border-radius: var(--border-radius-full);
font-weight: 600;
box-shadow: var(--shadow-xl);
border: none;
cursor: pointer;
display: none;
align-items: center;
gap: 0.5rem;
transition: var(--transition-normal);
}
.map-return__btn.is-active {
display: flex;
}
.map-return__btn:hover {
transform: translateY(-4px);
background-color: #7d4d3b;
} @keyframes fadeInEspacio {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutEspacio {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}
@keyframes shimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
} .filtros-barra {
position: relative;
backdrop-filter: blur(10px);
z-index: 100;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
padding: 1.5rem 0;
}
.filtro-capsula {
position: relative;
z-index: 10;
}
.capsula-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-full);
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
box-shadow: var(--shadow-sm);
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
white-space: nowrap;
user-select: none;
transition: var(--transition-fast);
}
.capsula-btn--primary {
background-color: var(--color-fondo-4);
color: white;
}
.capsula-btn--primary:hover {
background-color: #7d4d3b;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.capsula-btn--reset {
background-color: var(--color-fondo-3);
color: white;
}
.capsula-btn--reset:hover {
background-color: #1f2937;
}
.capsula-btn i {
font-size: 0.875rem;
}
.capsula-btn i.fa-chevron-down {
transition: var(--transition-normal);
font-size: 0.75rem;
margin-left: 0.5rem;
}
.capsula-btn.is-active i.fa-chevron-down {
transform: rotate(180deg);
} .dropdown-bubble {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
background-color: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
overflow: hidden;
z-index: 1000;
animation: dropdownFadeIn 0.2s ease-out;
transform-origin: top left;
display: none;
border: 1px solid rgba(0, 0, 0, 0.05);
min-width: 250px;
}
.dropdown-bubble.is-active {
display: block;
}
.dropdown-bubble__header {
padding: 1rem;
border-bottom: 1px solid #f3f4f6;
background-color: #f9fafb;
}
.dropdown-bubble__search-input {
width: 100%;
padding: 0.625rem 1rem;
border: 1px solid #e5e7eb;
border-radius: var(--border-radius-md);
font-size: 0.875rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.dropdown-bubble__search-input:focus {
border-color: var(--color-fondo-4);
box-shadow: 0 0 0 3px rgba(154, 99, 78, 0.1);
}
.dropdown-bubble__list,
.dropdown-bubble__list--tipos {
max-height: 300px;
overflow-y: auto;
} .dropdown-bubble ::-webkit-scrollbar {
width: 6px;
}
.dropdown-bubble ::-webkit-scrollbar-track {
background: #f3f4f6;
}
.dropdown-bubble ::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
.dropdown-bubble ::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
} .ciudad-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
border-bottom: 1px solid #f3f4f6;
}
.ciudad-item:last-child {
border-bottom: none;
}
.ciudad-item:hover {
background-color: #f9fafb;
}
.ciudad-imagen,
.ciudad-imagen-placeholder {
width: 44px;
height: 44px;
border-radius: var(--border-radius-md);
margin-right: 0.875rem;
flex-shrink: 0;
object-fit: cover;
}
.ciudad-imagen-placeholder {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-fondo-2);
color: var(--color-txt-4);
font-weight: 700;
font-size: 1.125rem;
}
.ciudad-info {
flex: 1;
}
.ciudad-nombre {
font-weight: 600;
color: var(--color-gray-800);
font-size: 0.9375rem;
margin-bottom: 0.125rem;
}
.ciudad-contador {
font-size: 0.75rem;
color: var(--color-gray-500);
}
.ciudad-chevron {
color: #9ca3af;
font-size: 0.75rem;
margin-left: auto;
} .ciudad-breadcrumb {
padding: 0.75rem 1rem;
background-color: #f9fafb;
border-bottom: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.ciudad-back-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--color-fondo-4);
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
background: none;
border: none;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.ciudad-back-btn:hover {
color: #7d4d3b;
}
.ciudad-breadcrumb-path {
font-size: 0.75rem;
color: var(--color-gray-500);
} .tipo-item {
display: flex;
align-items: center;
padding: 0.875rem 1rem;
cursor: pointer;
gap: 0.875rem;
border-bottom: 1px solid #f3f4f6;
transition: background-color 0.2s;
}
.tipo-item:last-child {
border-bottom: none;
}
.tipo-item:hover {
background-color: #f9fafb;
}
.tipo-item.active {
background-color: #fdfaf5;
}
.tipo-icon {
width: 34px;
height: 34px;
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
background-color: var(--color-fondo-4);
}
.tipo-info {
flex: 1;
}
.tipo-nombre {
font-weight: 600;
color: var(--color-gray-800);
font-size: 0.875rem;
}
.tipo-contador {
font-size: 0.75rem;
color: var(--color-gray-500);
}
.tipo-check {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.tipo-check.active {
background-color: var(--color-fondo-4);
border-color: var(--color-fondo-4);
}
.tipo-check i {
font-size: 0.625rem;
color: white;
opacity: 0;
transition: opacity 0.2s;
}
.tipo-check.active i {
opacity: 1;
} .skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 400% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: var(--border-radius-md);
}
.skeleton-text--short {
width: 60%;
} .art-map-results {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
padding: 2.5rem 0;
transition: opacity var(--transition-normal);
}
@media (min-width: 768px) {
.art-map-results {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (min-width: 1024px) {
.art-map-results {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
@media (min-width: 1280px) {
.art-map-results {
grid-template-columns: repeat(4, 1fr);
}
}
.art-map-results.is-hidden {
display: none;
} .espacio-fade-in {
animation: fadeInEspacio 0.4s ease-out forwards;
}
.espacio-fade-out {
animation: fadeOutEspacio 0.3s ease-out forwards;
} .art-home-hero {
padding: 2rem 1rem;
}
@media (min-width: 1024px) {
.art-home-hero {
padding: 3rem 2rem;
}
} .art-home-seo-section {
padding: 1rem 20px 1rem;
text-align: center;
max-width: 64rem;
margin: 0 auto;
}
.art-home-seo-title {
font-size: 1.75rem;
font-weight: 800;
color: var(--fondo-4, #9a634e);
line-height: 1.2;
margin-bottom: 1rem;
}
.art-home-seo-desc {
font-size: 1rem;
color: var(--color-gray-600, #4b5563);
}
@media (min-width: 768px) {
.art-home-seo-section {
padding: 1.5rem 20px 1rem;
}
.art-home-seo-title {
font-size: 2.5rem;
}
.art-home-seo-desc {
font-size: 1.125rem;
}
}
.art-home-hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 1024px) {
.art-home-hero__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.art-home-hero__content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.art-home-hero__header {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.art-home-hero__badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
transition: background-color 0.2s;
background-color: var(--fondo-2, #e1d9c0);
color: var(--txt-4, #9a634e);
width: fit-content;
}
.art-home-hero__badge i {
margin-right: 0.5rem;
}
.art-home-hero__title {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 700;
color: var(--txt-4, #9a634e);
}
@media (min-width: 640px) {
.art-home-hero__title {
font-size: 3rem;
line-height: 1;
}
}
.art-home-hero__title-sub {
display: block;
color: var(--color-gray-600, #4b5563);
}
.art-home-hero__text {
font-size: 1.125rem;
line-height: 1.75;
color: var(--color-gray-600, #4b5563);
}
.art-home-hero__actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 640px) {
.art-home-hero__actions {
flex-direction: row;
}
}
.art-home-hero__image-wrapper {
position: relative;
}
.art-home-hero__image-container {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.art-home-hero__image {
width: 100%;
height: 16rem;
object-fit: cover;
}
@media (min-width: 640px) {
.art-home-hero__image {
height: 20rem;
}
}
@media (min-width: 1024px) {
.art-home-hero__image {
height: 24rem;
}
}
.art-home-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.art-home-hero__deco-1 {
position: absolute;
top: -1rem;
right: -1rem;
width: 6rem;
height: 6rem;
border-radius: 9999px;
background-color: var(--fondo-4, #9a634e);
opacity: 0.1;
z-index: -1;
}
.art-home-hero__deco-2 {
position: absolute;
bottom: -1rem;
left: -1rem;
width: 8rem;
height: 8rem;
border-radius: 9999px;
background-color: var(--fondo-2, #e1d9c0);
opacity: 0.2;
z-index: -1;
} .art-home-main {
flex: 1;
padding: 1rem 0;
display: flex;
flex-direction: column;
gap: 3rem;
} .art-feature {
margin-bottom: 3rem;
padding: 0;
}
@media (min-width: 1024px) {
.art-feature {
margin-bottom: 3rem;
padding: 0;
}
}
.art-feature__container {
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 1024px) {
.art-feature__container {
padding: 0 20px;
}
}
.art-feature__grid {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
@media (min-width: 1024px) {
.art-feature__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
}
}
.art-feature__content {
margin-bottom: 2rem;
}
@media (min-width: 1024px) {
.art-feature__content {
margin-bottom: 0;
}
}
.art-feature__title {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
color: var(--color-gray-600, #4b5563);
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.art-feature__title {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.art-feature__text {
font-size: 1.125rem;
color: var(--color-gray-700, #374151);
margin-bottom: 1rem;
}
.art-feature__list {
list-style-type: disc;
list-style-position: inside;
font-size: 1.125rem;
color: var(--color-gray-700, #374151);
margin-bottom: 1rem;
}
.art-feature__list-item {
margin-bottom: 0.5rem;
}
.art-feature__image-col {
display: flex;
justify-content: center;
width: 100%;
}
.art-feature__image {
border-radius: 0.5rem;
width: 100%;
object-fit: cover;
}
@media (min-width: 1024px) {
.art-feature__image {
width: 75%;
}
} .art-feature--promo { }
.art-feature--about {
position: relative;
padding: 5rem 0;
overflow: hidden;
}
.art-feature__bg {
position: absolute;
inset: 0;
opacity: 0.3;
background-position: left;
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.5s;
}
.art-feature--about:hover .art-feature__bg {
transform: scale(1.05);
}
.art-feature__box-right {
position: relative;
text-align: right;
padding: 0.5rem;
border-radius: 0.5rem;
}
.art-feature--club {
background: linear-gradient(135deg, var(--color-fondo-4), #b57a65);
border-radius: var(--border-radius-2xl, 1rem);
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
padding: 2rem;
}
@media (min-width: 1024px) {
.art-feature--club {
padding: 3rem;
}
}
.art-feature--club .art-feature__title,
.art-feature--club .art-feature__text {
color: white;
}
.art-feature--cta {
text-align: center;
}
.art-feature--seo {
background: linear-gradient(135deg, var(--color-fondo-1), var(--color-fondo-2));
border-radius: var(--border-radius-2xl, 1rem);
border: 1px solid rgba(154, 99, 78, 0.1);
box-shadow: var(--shadow-md);
padding: 2rem;
}
@media (min-width: 1024px) {
.art-feature--seo {
padding: 3rem;
}
}
.art-feature--social {
background: linear-gradient(135deg, var(--color-fondo-4), #b57a65);
border-radius: var(--border-radius-2xl, 1rem);
box-shadow: var(--shadow-lg);
padding: 2rem;
}
@media (min-width: 1024px) {
.art-feature--social {
padding: 3rem;
}
}
.art-feature--social .art-feature__title,
.art-feature--social .art-feature__text {
color: white;
}
.art-feature--shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
} .art-home-shortcodes {
display: flex;
flex-direction: column;
gap: 2rem;
}
.art-single {
padding-top: 1rem;
padding-bottom: 2rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
@media (min-width: 768px) {
.art-single {
padding-left: 0;
padding-right: 0;
}
}
.art-single__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 768px) {
.art-single__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
}
.art-single__media {
border-radius: var(--border-radius-lg, 0.5rem);
margin-bottom: 0;
}
@media (max-width: 767px) {
.art-single__media {
border-radius: 0;
margin-bottom: 1rem;
}
}
.art-single__image {
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--border-radius-lg, 0.5rem);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
} @media (max-width: 1023px) {
.art-single__image {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
} @media (max-width: 767px) {
.art-single__image {
width: 100vw !important;
max-width: none !important;
height: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}
.art-single__info {
border-radius: var(--border-radius-lg, 0.5rem);
margin-bottom: 0.25rem;
}
.art-single__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.art-single__actions .btn {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.025em;
text-transform: none;
}
.art-single__title {
color: var(--txt-3, #5a3c2a);
font-size: 1.5rem;
line-height: 1.3;
font-weight: 700;
margin-bottom: 0.5rem;
}
.art-single__quote {
font-style: italic;
color: var(--txt-4, #9a634e);
margin-bottom: 0.75rem;
opacity: 0.85;
}
.art-single__quote p {
font-size: 0.65rem !important;
margin-bottom: 0 !important;
line-height: 1.4 !important;
}
@media (min-width: 768px) {
.art-single__quote {
margin-bottom: 1.25rem;
}
.art-single__quote p {
font-size: 0.8rem !important;
}
} .art-single__info.art-card {
padding: 0;
overflow: hidden;
background-color: var(--fondo-1, #f4ecd0);
border: 1px solid var(--fondo-2, #e1d9c0);
border-radius: 0.75rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.art-section {
padding: 0.75rem;
border-bottom: 1px solid var(--fondo-2, #e1d9c0);
}
.art-section:last-child {
border-bottom: none;
}
@media (min-width: 768px) {
.art-section {
padding: 1rem;
}
}
.art-section__title {
font-family: inherit;
font-size: 1.1rem;
font-weight: 700;
color: var(--txt-3, #5a3c2a);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.art-section__title i {
color: var(--txt-4, #9a634e);
font-size: 0.9rem;
}
.art-section__content {
color: var(--color-gray-700, #374151);
line-height: 1.6;
font-size: 0.9rem;
}
.art-section__content p {
margin-bottom: 1rem;
}
.art-section__footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--fondo-2, #e1d9c0);
} .art-section--points {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.art-section--points .art-section__title {
margin-bottom: 0;
}
.art-section--points .art-section__footer {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.art-single__alert-custom {
background-color: #fff5f5;
border: 1px solid #feb2b2;
color: #c53030;
padding: 0.75rem;
border-radius: 0.375rem;
margin-bottom: 1rem;
font-size: 0.8rem;
}
.art-card--points {
border-color: var(--fondo-2, #e1d9c0);
}
.art-card--gallery {
border-color: var(--fondo-2, #e1d9c0);
}
.art-card--gallery .gallery-icon-btn {
background-color: var(--fondo-2, #e1d9c0);
color: var(--txt-3, #5a3c2a);
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.art-card--gallery .gallery-icon-btn:hover {
background-color: var(--txt-4, #9a634e);
color: #fff;
}
.art-card--gallery .gallery-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--txt-4, #9a634e);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
} .art-single__info.art-card {
padding: 0;
overflow: hidden;
background-color: var(--fondo-1, #f4ecd0);
}
.art-section--compact {
padding: 0.75rem;
}
@media (min-width: 768px) {
.art-section--compact {
padding: 1rem;
}
}
.art-single__header-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.art-single__header-actions .btn {
flex: 1 1 auto;
justify-content: center;
font-size: 0.75rem;
padding: 0.5rem 0.75rem;
}
@media (min-width: 768px) {
.art-single__header-actions {
gap: 1rem;
margin-bottom: 1.5rem;
}
.art-single__header-actions .btn {
flex: 0 1 auto;
font-size: 0.8125rem;
padding: 0.6rem 1.25rem;
}
}
.art-single__edit-footer {
display: flex;
justify-content: flex-end;
}
.art-link-edit {
color: var(--txt-4, #9a634e);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.art-link-edit:hover {
color: var(--txt-3, #5a3c2a);
text-decoration: underline;
} .art-single__tags-footer {
margin-top: 2rem;
}
.art-single__tags-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--txt-4, #9a634e);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.art-single__tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.art-tag {
background-color: var(--fondo-2, #e1d9c0);
color: var(--txt-3, #5a3c2a);
font-size: 0.75rem;
font-weight: 600;
padding: 0.4rem 1rem;
border-radius: 50px;
text-decoration: none;
transition: all 0.2s;
}
.art-tag:hover {
background-color: var(--txt-4, #9a634e);
color: #fff;
} .art-single__purchase {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(154, 99, 78, 0.12);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
@media (min-width: 768px) {
.art-single__purchase {
margin-top: 1.25rem;
padding-top: 1.25rem;
}
}
.art-single__price {
display: flex;
align-items: center;
gap: 0.35rem;
}
.art-single__price .price-label {
font-size: 0.75rem;
color: var(--txt-4, #9a634e);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.art-single__price .price-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--txt-3, #5a3c2a);
line-height: 1;
}
.art-single__info .art-btn--buy {
width: auto !important;
min-width: 160px;
font-size: 0.875rem !important;
font-weight: 700 !important;
padding: 0.5rem 1rem !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out !important;
}
.art-single__info .art-btn--buy:hover {
transform: translateY(-2px);
}
.art-gallery-box {
display: flex;
align-items: center;
gap: 1.5rem;
}
.art-gallery-box__image img {
width: 4.5rem;
height: 4.5rem;
object-fit: cover;
border-radius: 0.75rem;
border: 1px solid var(--fondo-2, #e1d9c0);
}
.art-gallery-box__info {
flex: 1;
min-width: 0;
}
.art-single__meta-top {
margin-bottom: 0.75rem;
}
.art-visits-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
color: var(--txt-4, #9a634e);
opacity: 0.8;
}
.art-visits-badge i {
font-size: 0.8rem;
}
.art-gallery-box__name {
font-size: 1.1rem;
font-weight: 700;
color: var(--txt-3, #5a3c2a);
margin-bottom: 0.25rem;
margin-top: 0;
}
.art-gallery-box__meta {
font-size: 0.8125rem;
color: var(--color-gray-600, #4b5563);
display: flex;
align-items: center;
gap: 0.35rem;
} .art-points-user-status {
font-size: 0.8125rem;
color: var(--txt-4, #9a634e);
background-color: var(--fondo-2, #e1d9c0);
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 4px;
margin-bottom: 1rem;
}
.art-points-user-status .remaining-points {
font-weight: 700;
} .art-aside-card {
display: block;
margin-bottom: 1rem;
transition: opacity 0.3s;
}
.art-aside-card:hover {
opacity: 0.9;
}
.art-aside-card__inner {
display: flex;
gap: 0.75rem;
}
.art-aside-card__image-container {
flex-shrink: 0;
}
.art-aside-card__image {
width: 5rem;
height: 5rem;
object-fit: cover;
border-radius: var(--border-radius-md, 0.375rem);
}
.art-aside-card__content {
flex: 1;
min-width: 0;
}
.art-aside-card__label {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-bottom: 0.25rem;
}
.art-aside-card__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--txt-4, #9a634e);
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.art-aside-card__meta {
font-size: 0.75rem;
color: var(--color-gray-600, #4b5563);
margin-bottom: 0.25rem;
display: flex;
align-items: flex-start;
gap: 0.25rem;
}
.art-aside-card__meta-icon {
color: var(--color-gray-400, #9ca3af);
margin-top: 0.125rem;
font-size: 10px;
}
.art-aside-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-top: 0.25rem;
}
.art-aside-card__tag {
background-color: var(--fondo-2, #e1d9c0);
color: var(--txt-4, #9a634e);
padding: 0.125rem 0.375rem;
border-radius: 9999px;
font-size: 9px;
font-weight: 500;
}
.art-aside-card--empty {
color: var(--txt-3, #5a3c2a);
font-size: 0.875rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
} .art-single__tags {
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.art-single__tag {
padding: 0.25rem 0.75rem;
background-color: var(--color-gray-200, #e5e7eb);
color: var(--color-gray-900, #111827);
border-radius: 9999px;
font-size: 0.875rem;
text-decoration: none;
transition: background-color 0.2s;
}
.art-single__tag:hover {
background-color: var(--color-gray-300, #d1d5db);
}
.art-single__subtitle {
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 1rem;
}
.art-single__comments {
border-radius: var(--border-radius-lg, 0.5rem);
padding: 0.25rem;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.art-single__comments {
padding: 1.5rem;
}
} .art-author-hero {
background-color: var(--fondo-1, #f4ecd0);
border-radius: var(--border-radius-lg, 1rem);
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
margin-top: 1.5rem;
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
border: 1px solid var(--fondo-2, #e1d9c0);
}
@media (min-width: 768px) {
.art-author-hero {
flex-direction: row;
align-items: flex-start;
padding: 2rem;
gap: 2rem;
}
}
.art-author-hero__avatar-container {
flex-shrink: 0;
}
.art-author-hero__avatar-container img { width: 8rem;
height: 8rem;
border-radius: 50%;
object-fit: cover;
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
border: 4px solid #ffffff;
}
@media (min-width: 768px) {
.art-author-hero__avatar-container img {
width: 10rem;
height: 10rem;
}
}
.art-author-hero__content {
display: flex;
flex-direction: column;
flex: 1;
text-align: center;
width: 100%;
}
@media (min-width: 768px) {
.art-author-hero__content {
text-align: left;
}
}
.art-author-hero__title {
font-size: 1.875rem;
font-weight: 700;
color: var(--txt-3, #5a3c2a);
margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
.art-author-hero__title {
font-size: 2.25rem;
}
}
.art-author-hero__bio {
color: var(--color-gray-700, #374151);
font-size: 0.875rem;
line-height: 1.625;
max-width: 56rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.art-author-hero__bio {
margin-left: 0;
margin-right: 0;
}
}
.art-author-hero__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
@media (min-width: 640px) {
.art-author-hero__actions {
flex-direction: row;
justify-content: space-between;
}
}
.art-author-hero__socials {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
@media (min-width: 768px) {
.art-author-hero__socials {
justify-content: flex-start;
}
}
.art-author-hero__social-icon {
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffffff;
color: var(--color-gray-500, #6b7280);
transition: all 0.2s ease-in-out;
font-size: 0.875rem;
text-decoration: none;
}
.art-author-hero__social-icon:hover {
color: var(--txt-4, #9a634e);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
} .art-comment-form {
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
margin-top: 1rem;
}
.art-comment-form__textarea {
width: 100%;
background-color: var(--fondo-2, #e1d9c0);
border: 1px solid var(--fondo-2, #e1d9c0);
border-radius: 0.5rem;
padding: 0.75rem;
font-family: inherit;
font-size: 0.9rem;
color: var(--txt-3, #5a3c2a);
transition: all 0.2s;
min-height: 100px;
resize: vertical;
}
.art-comment-form__textarea:focus {
outline: none;
border-color: var(--txt-4, #9a634e);
background-color: #fff;
}
.art-comment-form__submit {
margin-top: 1rem;
border-radius: 50px !important;
padding: 0.5rem 1.5rem !important;
font-size: 0.85rem !important;
}
.art-comment-form .logged-in-as {
font-size: 0.8rem;
color: var(--txt-4, #9a634e);
margin-bottom: 0.75rem;
}
.art-comment-form .logged-in-as a {
color: var(--txt-3, #5a3c2a);
font-weight: 600;
text-decoration: none;
}
.art-comment-form .logged-in-as a:hover {
text-decoration: underline;
}
.art-comment-form__input {
width: 100%;
background-color: var(--fondo-2, #e1d9c0);
border: 1px solid var(--fondo-2, #e1d9c0);
border-radius: 0.5rem;
padding: 0.6rem 0.75rem;
font-family: inherit;
font-size: 0.85rem;
color: var(--txt-3, #5a3c2a);
margin-bottom: 0.75rem;
transition: all 0.2s;
}
.art-comment-form__input:focus {
outline: none;
border-color: var(--txt-4, #9a634e);
background-color: #fff;
}
.art-comment-form__notes {
font-size: 0.75rem;
color: var(--txt-4, #9a634e);
margin-bottom: 1rem;
opacity: 0.8;
}
.art-comment-form__login-prompt {
font-size: 0.9rem;
color: var(--txt-4, #9a634e);
border: 1px dashed var(--fondo-2, #e1d9c0);
padding: 1rem;
border-radius: 0.5rem;
text-align: center;
} .art-comments-list-wrapper {
margin-top: 2rem;
}
.art-comment-list {
list-style: none;
padding: 0;
margin: 1rem 0 0 0;
}
.art-comment-item {
margin-bottom: 1.5rem;
}
.art-comment-item__inner {
display: flex;
gap: 1rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--fondo-2, #e1d9c0);
}
.art-comment-item:last-child .art-comment-item__inner {
border-bottom: none;
}
.art-comment-item__avatar {
flex-shrink: 0;
}
.art-comment-item__avatar img {
width: 3rem;
height: 3rem;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--fondo-2, #e1d9c0);
}
.art-comment-item__content {
flex: 1;
min-width: 0;
}
.art-comment-item__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
gap: 0.5rem;
}
.art-comment-item__author-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.art-comment-item__author-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--txt-3, #5a3c2a);
text-decoration: none;
}
.art-comment-item__author-name:hover {
text-decoration: underline;
}
.art-comment-item__author-role {
font-size: 0.75rem;
color: var(--txt-4, #9a634e);
opacity: 0.8;
}
.art-comment-item__date {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
}
.art-comment-item__text {
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-gray-800, #1f2937);
margin-bottom: 1rem;
}
.art-comment-item__actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
.art-comment-item__action {
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.35rem;
transition: opacity 0.2s;
}
.art-comment-item__action:hover {
opacity: 0.7;
}
.art-comment-item__action--reply {
color: var(--txt-4, #9a634e);
}
.art-comment-item__action--edit {
color: #059669; }
.art-comment-item__action--delete {
color: #dc2626; }
.art-comment-item__moderation {
font-size: 0.8rem;
color: #d1d5db;
font-style: italic;
margin-bottom: 0.5rem;
} .art-comment-list .children {
list-style: none;
padding-left: 1rem;
margin-top: 1.25rem;
}
@media (min-width: 768px) {
.art-comment-list .children {
padding-left: 3rem;
}
} .art-notification {
padding: 0.75rem 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
font-size: 0.85rem;
font-weight: 600;
}
.art-notification--success {
background-color: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.art-notification--error {
background-color: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.art-comment-form__wait-message {
font-size: 0.8rem;
color: var(--txt-4, #9a634e);
margin-top: 0.5rem;
font-style: italic;
}
.art-comment-item__edit-actions {
display: flex;
gap: 0.75rem;
margin-top: 0.75rem;
align-items: center;
}
.art-comment-item__action--cancel {
color: var(--color-gray-500, #6b7280);
margin-top: 0.5rem;
display: block;
}
.art-comment-warning {
background-color: #fffbeb;
color: #92400e;
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid #fef3c7;
font-size: 0.85rem;
margin-bottom: 1rem;
}
.art-author-hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
}  .art-user-profile-row {
display: flex;
align-items: stretch;
gap: 0.5rem;
margin-bottom: 1rem;
} @media (max-width: 1023px) {
.art-user-profile-row--desktop {
display: none !important;
}
.art-user-profile-row--mobile {
display: flex !important;
margin-bottom: 1rem !important;
}
}
@media (min-width: 1024px) {
.art-user-profile-row--mobile {
display: none !important;
}
.art-user-profile-row--desktop {
display: flex !important;
}
}
.art-user-profile-card {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.6rem;
background-color: transparent;
border: 1px solid rgba(154, 99, 78, 0.2);
border-radius: 0.5rem;
}
.art-user-profile-card__avatar {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid var(--txt-4, #9a634e);
}
.art-user-profile-card__avatar img,
.art-user-profile-card__avatar .avatar {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.art-user-profile-card__info {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.art-user-profile-card__name {
font-family: inherit;
font-size: 0.8rem;
font-weight: 700;
margin: 0;
color: var(--txt-3, #5a3c2a);
line-height: 1.2;
}
.art-user-profile-card__name a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.art-user-profile-card__name a:hover {
color: var(--txt-4, #9a634e);
}
.art-user-profile-card__rank {
font-size: 0.575rem;
color: var(--txt-4, #9a634e);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.art-user-profile-card__more-btn {
display: inline-block;
background-color: var(--color-fondo-4, var(--art-brown));
color: white !important;
font-size: 0.55rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 3px;
text-decoration: none !important;
margin-top: 0.15rem;
transition: background-color 0.2s ease;
text-align: center;
width: fit-content;
line-height: 1.3;
}
.art-user-profile-card__more-btn:hover {
background-color: var(--txt-3, #5a3c2a);
}
.art-btn-contacto-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
border-radius: 0.5rem;
background-color: transparent;
border: 1px solid rgba(154, 99, 78, 0.2);
color: var(--color-fondo-4, var(--art-brown)) !important;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.art-btn-contacto-icon:hover {
background-color: rgba(154, 99, 78, 0.05);
border-color: rgba(154, 99, 78, 0.4);
color: var(--txt-3, #5a3c2a) !important;
}
.art-btn-contacto-icon i {
font-size: 0.9rem;
}
.art-btn-more-works-mobile {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background-color: var(--txt-4, #9a634e) !important;
color: #ffffff !important;
text-decoration: none !important;
font-size: 0.7rem;
font-weight: 700;
padding: 0 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--txt-4, #9a634e);
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.art-btn-more-works-mobile:hover {
background-color: var(--txt-3, #5a3c2a) !important;
border-color: var(--txt-3, #5a3c2a);
}
.art-btn-more-works-mobile i {
font-size: 0.8rem;
}
.art-espacio {
width: 100%;
} .art-espacio__hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: var(--border-radius-md, 0.375rem);
background-size: cover;
background-position: center;
min-height: 600px;
overflow: hidden;
}
.art-espacio__hero-overlay {
position: absolute;
inset: 0;
background-color: var(--color-black, #000);
opacity: 0.6;
border-radius: var(--border-radius-md, 0.375rem);
}
.art-espacio__hero-content {
position: relative;
z-index: 10;
width: 100%;
}
.art-espacio__hero-gradient {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
border-radius: var(--border-radius-md, 0.375rem);
padding: 2rem;
} .art-espacio__badge-container {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.art-espacio__badge-icon {
color: var(--color-surface, #fff);
margin-right: 0.5rem;
}
.art-espacio__badge-text {
color: var(--color-surface, #fff);
font-weight: 700;
} .art-espacio__socials {
display: flex;
gap: 1.5rem;
margin-bottom: 0.75rem;
}
.art-espacio__social-link {
color: var(--color-surface, #fff);
transition: color var(--transition-normal, 0.3s);
}
.art-espacio__social-link:hover {
color: var(--color-gray-300, #d1d5db);
} .art-espacio__title {
color: var(--color-surface, #fff);
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.art-espacio__title {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
@media (min-width: 768px) {
.art-espacio__title {
font-size: 3rem;
line-height: 1;
}
} .art-espacio__actions-hero {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.art-espacio__btn-glass {
background-color: rgba(31, 41, 55, 0.3); backdrop-filter: blur(4px);
color: var(--color-surface, #fff);
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
display: flex;
align-items: center;
transition: transform var(--transition-fast, 0.2s), background-color var(--transition-fast, 0.2s);
}
.art-espacio__btn-glass:hover {
background-color: rgba(31, 41, 55, 0.4);
transform: scale(1.05);
}
.art-espacio__btn-edit {
display: inline-block;
padding: 0.375rem 0.625rem;
background-color: var(--color-fondo-4);
color: var(--color-surface, #fff);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--border-radius-md, 0.375rem);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-fast, 0.2s);
margin-top: 1rem;
}
.art-espacio__btn-edit:hover {
background-color: var(--color-gray-600, #4b5563);
} .art-espacio__main-content {
margin-top: 2rem;
}
@media (max-width: 1023px) {
.art-espacio__main-content {
padding: 0 1.25rem;
}
}
@media (max-width: 767px) {
.art-espacio__main-content {
padding: 0 0.75rem;
}
} .art-espacio__box {
background-color: var(--color-fondo-1, #f4ecd0);
padding: 1.5rem;
border-radius: var(--border-radius-lg, 0.5rem);
border: 1px solid var(--color-fondo-4, #9a634e);
margin-bottom: 2rem;
}
.art-espacio__box--glass {
background-color: rgba(244, 236, 208, 0.3); backdrop-filter: blur(16px);
}
.art-espacio__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.art-espacio__tag {
background-color: var(--color-fondo-2);
color: var(--color-gray-800, #1f2937);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
}
.art-espacio__description {
color: var(--color-gray-700, #374151);
line-height: 1.625;
} .art-espacio__subtitle {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
color: var(--color-gray-800, #1f2937);
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.art-espacio__subtitle--white {
color: var(--color-surface, #fff);
}
.art-espacio__subtitle-icon {
margin-left: 0.5rem;
} .art-espacio__slider-item {
flex-shrink: 0;
width: 75%;
margin-right: 1rem;
}
@media (min-width: 640px) {
.art-espacio__slider-item {
width: 50%;
}
}
@media (min-width: 1024px) {
.art-espacio__slider-item {
width: 33.333333%;
}
}
@media (min-width: 1280px) {
.art-espacio__slider-item {
width: 30%;
}
}
@media (min-width: 1536px) {
.art-espacio__slider-item {
width: 25%;
}
}
.art-espacio__slider-img {
width: 100%;
height: 12rem;
object-fit: cover;
border-radius: var(--border-radius-lg, 0.5rem);
box-shadow: var(--shadow-md);
transition: transform var(--transition-normal, 0.3s);
}
.art-espacio__slider-img:hover {
transform: scale(1.05);
} .art-espacio__contact-section {
margin-bottom: 2rem;
}
.art-espacio__contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) {
.art-espacio__contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.art-espacio__contact-card {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
background-color: var(--color-fondo-1, #f4ecd0);
border-radius: var(--border-radius-lg, 0.5rem);
border: 1px solid var(--color-fondo-4, #9a634e);
}
.art-espacio__contact-card a {
color: var(--color-fondo-4, #9a634e);
text-decoration: none;
font-weight: 500;
}
.art-espacio__contact-card a:hover {
color: var(--color-gray-700, #374151);
text-decoration: underline;
}
.art-espacio__contact-icon {
color: var(--color-fondo-4, #9a634e);
font-size: 1.5rem;
margin-top: 0.25rem;
}
.art-espacio__contact-info {
color: var(--color-gray-700, #374151);
font-size: 0.875rem;
line-height: 1.25rem;
}
.art-espacio__contact-label {
display: block;
font-weight: 600;
color: var(--color-gray-800, #1f2937);
} .art-espacio__table {
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
.art-espacio__table th,
.art-espacio__table td {
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
text-align: left;
} .art-espacio__payment-methods {
display: flex;
gap: 1.5rem;
}
.art-espacio__payment-icon {
color: var(--color-gray-800, #1f2937);
} .art-espacio__location-section {
margin-top: 2rem;
}
.art-espacio__btn-map {
display: inline-block;
background-color: var(--color-gray-800, #1f2937);
color: var(--color-surface, #fff);
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: transform var(--transition-fast, 0.2s);
}
.art-espacio__btn-map:hover {
transform: scale(1.05);
}
.art-espacio__map-container {
width: 100%;
height: 24rem; margin-top: 1rem;
border-radius: var(--border-radius-lg, 0.5rem);
border: 1px solid var(--color-fondo-4, #9a634e);
z-index: 10;
}
.art-about__hero {
position: relative;
padding: 2.5rem 1.5rem 6rem;
}
@media (min-width: 640px) {
.art-about__hero {
padding-bottom: 8rem;
}
}
@media (min-width: 1024px) {
.art-about__hero {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 2rem;
padding: 0 2rem;
}
}
.art-about__hero-content {
margin: 0 auto;
max-width: 42rem;
}
@media (min-width: 1024px) {
.art-about__hero-content {
margin: 0;
grid-column: span 7 / span 7;
padding-top: 12rem;
padding-bottom: 14rem;
}
}
@media (min-width: 1280px) {
.art-about__hero-content {
grid-column: span 6 / span 6;
}
}
.art-about__title {
margin-top: 2rem;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 700;
letter-spacing: -0.025em;
color: #111827; }
@media (min-width: 640px) {
.art-about__title {
margin-top: 6rem;
font-size: 3.75rem;
line-height: 1;
}
}
.art-about__text {
margin-top: 1.5rem;
font-size: 1.125rem;
line-height: 2rem;
color: #4b5563; }
.art-about__actions {
margin-top: 2.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.art-about__btn-primary {
border-radius: 0.375rem;
background-color: var(--color-fondo-4, #4b5563);
padding: 0.375rem 0.625rem;
font-size: 0.875rem;
font-weight: 600;
color: #ffffff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition: background-color 0.2s;
}
.art-about__btn-primary:hover,
.art-about__btn-primary:focus-visible {
background-color: #4b5563; outline: 2px solid transparent;
outline-offset: 2px;
}
.art-about__btn-link {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.5rem;
color: #111827; }
.art-about__hero-image-wrapper {
position: relative;
margin-top: 2rem;
}
@media (min-width: 1024px) {
.art-about__hero-image-wrapper {
margin-top: 0;
grid-column: span 5 / span 5;
margin-right: -2rem;
}
}
@media (min-width: 1280px) {
.art-about__hero-image-wrapper {
position: absolute;
inset: 0;
left: 50%;
margin-right: 0;
}
}
.art-about__hero-image {
aspect-ratio: 3 / 2;
width: 100%;
background-color: #f9fafb; object-fit: cover;
border-radius: 0.5rem;
}
@media (min-width: 1024px) {
.art-about__hero-image {
position: absolute;
inset: 0;
aspect-ratio: auto;
height: 100%;
border-radius: 0;
}
} .art-about__section {
padding: 4rem 1.5rem;
}
@media (min-width: 1024px) {
.art-about__section {
padding-left: 2rem;
padding-right: 2rem;
}
}
.art-about__section-header {
margin-bottom: 3rem;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.art-about__section-title {
margin-top: 0.5rem;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
letter-spacing: -0.025em;
color: #111827; margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.art-about__section-title {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.art-about__section-text {
font-size: 1rem;
line-height: 1.5rem;
color: #4b5563; }
.art-about__grid-4 {
display: grid;
gap: 2rem;
}
@media (min-width: 640px) {
.art-about__grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.art-about__grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.art-about__feature-card {
background-color: var(--color-cream, #FDFBF7);
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.art-about__feature-card:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: translateY(-5px);
}
.art-about__feature-title {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
color: #374151; margin-bottom: 0.5rem;
}
.art-about__feature-text {
font-size: 0.875rem;
line-height: 1.25rem;
color: #4b5563; } .art-about__goals-section {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--color-fondo-2, #f3f4f6);
padding: 6rem 1.5rem;
}
@media (min-width: 640px) {
.art-about__goals-section {
padding-top: 8rem;
padding-bottom: 8rem;
}
}
@media (min-width: 1024px) {
.art-about__goals-section {
padding-left: 2rem;
padding-right: 2rem;
}
}
.art-about__goals-header {
margin: 0 auto;
max-width: 42rem;
}
@media (min-width: 1024px) {
.art-about__goals-header {
margin: 0;
}
}
.art-about__goals-title {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 700;
letter-spacing: -0.025em;
color: #000000;
}
@media (min-width: 640px) {
.art-about__goals-title {
font-size: 3.75rem;
line-height: 1;
}
}
.art-about__goals-text {
margin-top: 1.5rem;
font-size: 1.125rem;
line-height: 2rem;
color: #1f2937; }
.art-about__grid-3 {
margin: 4rem auto 0;
display: grid;
max-width: 42rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 640px) {
.art-about__grid-3 {
margin-top: 5rem;
}
}
@media (min-width: 1024px) {
.art-about__grid-3 {
margin-left: 0;
margin-right: 0;
max-width: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
}
.art-about__goal-card {
display: flex;
gap: 1rem;
border-radius: 0.75rem;
background-color: var(--color-fondo-1, #ffffff);
padding: 1.5rem;
}
.art-about__goal-icon {
height: 1.75rem;
width: 1.25rem;
flex: none;
color: var(--color-txt-4, #3b82f6);
font-size: 1.5rem;
}
.art-about__goal-content {
font-size: 1rem;
line-height: 1.75rem;
}
.art-about__goal-title {
font-weight: 600;
color: #000000;
}
.art-about__goal-text {
margin-top: 0.5rem;
color: #1f2937; } .art-about__stats-section {
padding: 6rem 1.5rem;
}
@media (min-width: 640px) {
.art-about__stats-section {
padding-top: 8rem;
padding-bottom: 8rem;
}
}
@media (min-width: 1024px) {
.art-about__stats-section {
padding-left: 2rem;
padding-right: 2rem;
}
}
.art-about__stats-grid {
margin: 0 auto;
display: grid;
max-width: 42rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
align-items: flex-start;
column-gap: 2rem;
row-gap: 4rem;
}
@media (min-width: 640px) {
.art-about__stats-grid {
row-gap: 6rem;
}
}
@media (min-width: 1024px) {
.art-about__stats-grid {
margin: 0;
max-width: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.art-about__testimonial-col {
padding-right: 1rem;
}
}
.art-about__testimonial {
position: relative;
overflow: hidden;
border-radius: 1.5rem;
background-color: #111827; padding: 16rem 1.5rem 2.25rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@media (min-width: 640px) {
.art-about__testimonial {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media (min-width: 1024px) {
.art-about__testimonial {
max-width: 32rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
}
}
@media (min-width: 1280px) {
.art-about__testimonial {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-bottom: 2.5rem;
}
}
.art-about__testimonial-img {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(1.25) saturate(0);
}
.art-about__testimonial-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(17, 24, 39, 0.8), transparent); }
.art-about__testimonial-content {
position: relative;
isolation: isolate;
}
.art-about__testimonial-text {
margin-top: 1.5rem;
font-size: 1.25rem;
line-height: 2rem;
font-weight: 600;
color: #ffffff;
}
.art-about__testimonial-author {
margin-top: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
color: #d1d5db; }
.art-about__testimonial-author strong {
font-weight: 600;
color: #ffffff;
}
.art-about__stats-content {
font-size: 1rem;
line-height: 1.75rem;
color: #374151; }
@media (min-width: 1024px) {
.art-about__stats-content {
max-width: 32rem;
}
}
.art-about__stats-label {
font-size: 1rem;
font-weight: 600;
line-height: 1.75rem;
color: var(--color-txt-4, #3b82f6);
}
.art-about__stats-title {
margin-top: 0.5rem;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
letter-spacing: -0.025em;
color: #111827; }
@media (min-width: 640px) {
.art-about__stats-title {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.art-about__stats-text-wrapper {
max-width: 36rem;
}
.art-about__stats-text {
margin-top: 1.5rem;
}
.art-about__stats-text+.art-about__stats-text {
margin-top: 2rem;
}
.art-contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem; margin-top: 1rem; margin-bottom: 2rem; align-items: start;
}
@media (min-width: 992px) {
.art-contact__grid {
grid-template-columns: 1fr 1.15fr;
gap: 2rem;
}
} .art-contact__info-col {
display: flex;
flex-direction: column;
gap: 2rem;
}
.art-contact__info-title {
font-size: 1.85rem;
font-weight: 700;
color: var(--color-txt-3, #374151);
margin: 0;
position: relative;
padding-bottom: 0.5rem;
}
.art-contact__info-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 3rem;
height: 3px;
background-color: var(--color-primary, #9a634e);
border-radius: 9999px;
}
.art-contact__info-text {
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-txt-3, #374151);
margin: 0;
} .art-contact__details {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.art-contact__details-item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem;
background-color: var(--color-fondo-2, #e1d9c0);
border-radius: var(--border-radius-lg, 0.5rem);
border: 1px solid rgba(0, 0, 0, 0.02);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.art-contact__details-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.art-contact__details-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background-color: var(--color-primary, #9a634e);
color: #ffffff;
border-radius: 50%;
font-size: 1.15rem;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(154, 99, 78, 0.2);
}
.art-contact__details-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.art-contact__details-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted, #6b7280);
font-weight: 600;
}
.art-contact__details-value {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-txt-3, #374151);
text-decoration: none;
transition: color 0.2s ease;
}
a.art-contact__details-value:hover {
color: var(--color-primary, #9a634e);
} .art-contact__doubts-card {
padding: 1.75rem;
background-color: var(--color-fondo-2, #e1d9c0);
border-radius: var(--border-radius-xl, 0.75rem);
border-left: 4px solid var(--color-primary, #9a634e);
box-shadow: var(--shadow-sm);
}
.art-contact__doubts-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-txt-3, #374151);
margin: 0 0 0.75rem 0;
}
.art-contact__doubts-text {
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-txt-3, #374151);
margin: 0;
} .art-contact__form-col {
width: 100%;
}
.art-contact__form-wrapper {
background-color: var(--color-fondo-2, #e1d9c0);
border-radius: var(--border-radius-xl, 0.75rem);
border: 1px solid rgba(0, 0, 0, 0.02);
padding: 1.25rem 1rem; box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
.art-contact__form-wrapper {
padding: 2rem; }
}
.art-contact__form-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-txt-3, #374151);
margin-bottom: 0.5rem;
text-align: center;
}
.art-contact__form-text {
font-size: 0.95rem;
color: var(--color-text-muted, #6b7280);
margin-bottom: 1.5rem; text-align: center;
max-width: 450px;
margin-left: auto;
margin-right: auto;
} .art-contact__form {
max-width: 600px;
margin: 0 auto;
}
.art-contact__form-group {
margin-bottom: 1.25rem;
}
.art-contact__form-input-label {
display: block;
}
.art-contact__form-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-txt-3, #374151);
margin-bottom: 0.5rem;
}
.art-contact__required {
color: var(--color-primary, #9a634e);
font-weight: bold;
} .art-contact__radio-group {
display: flex;
flex-wrap: wrap;
gap: 0.4rem; margin-top: 0.5rem;
}
.art-contact__radio-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background-color: var(--color-fondo-1, #f4ecd0);
padding: 0.45rem 0.85rem;
border-radius: 9999px; border: 1px solid rgba(154, 99, 78, 0.15); cursor: pointer;
font-weight: 600;
font-size: 0.825rem;
color: var(--color-txt-3, #374151);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
.art-contact__radio-label:hover {
border-color: var(--color-primary, #9a634e);
background-color: rgba(154, 99, 78, 0.05);
} .art-contact__radio-label:has(.art-contact__radio-input:checked) {
background-color: var(--color-primary, #9a634e);
color: #ffffff;
border-color: var(--color-primary, #9a634e);
box-shadow: 0 3px 8px rgba(154, 99, 78, 0.25);
} .art-contact__radio-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.art-contact__form-input,
.art-contact__form-textarea {
width: 100%;
padding: 0.75rem 1rem; border: 1px solid rgba(154, 99, 78, 0.18); border-radius: var(--border-radius-md, 0.375rem);
background-color: var(--color-fondo-1, #f4ecd0);
color: var(--color-txt-3, #374151);
font-family: var(--font-family-base, inherit);
font-size: 0.9rem;
transition: all 0.2s ease;
box-sizing: border-box;
}
.art-contact__form-input:focus,
.art-contact__form-textarea:focus {
outline: none;
border-color: var(--color-primary, #9a634e);
background-color: var(--color-fondo-1, #f4ecd0);
box-shadow: 0 0 0 3px rgba(154, 99, 78, 0.15);
}
.art-contact__form-textarea {
min-height: 120px;
resize: vertical;
} .art-contact__checkbox-wrapper {
margin-bottom: 1.25rem;
}
.art-contact__checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
}
.art-contact__checkbox-input {
margin-top: 0.2rem !important;
cursor: pointer;
accent-color: var(--color-primary, #9a634e);
}
.art-contact__checkbox-text {
font-size: 0.75rem;
color: var(--color-text-muted, #6b7280);
line-height: 1.4;
} .art-contact__submit-btn {
width: 100%;
padding: 1rem;
background-color: var(--color-primary, #9a634e);
color: #ffffff !important;
border: none;
border-radius: var(--border-radius-md, 0.375rem);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
display: block;
text-align: center;
box-sizing: border-box;
}
.art-contact__submit-btn:hover {
background-color: #7a4f3e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(154, 99, 78, 0.3);
}
.art-contact__submit-btn:active {
transform: translateY(0);
}
.art-contact__submit-btn:disabled {
background-color: #c4a79c;
cursor: not-allowed;
transform: none;
box-shadow: none;
} .art-contact__alert {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-radius: var(--border-radius-md, 0.375rem);
font-size: 0.9rem;
font-weight: 500;
text-align: center;
border: 1px solid transparent;
}
.art-contact__alert--success {
background-color: #f0fdf4;
border-color: #dcfce7;
color: #166534;
}
.art-contact__alert--error {
background-color: #fef2f2;
border-color: #fee2e2;
color: #991b1b;
} .art-contact__faq-container {
background-color: var(--color-fondo-2, #e1d9c0);
border-radius: var(--border-radius-xl, 0.75rem);
border: 1px solid rgba(0, 0, 0, 0.02);
padding: 1.5rem 1.25rem; box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.art-contact__faq-container {
padding: 2rem; }
}
.art-contact__faq-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-txt-3, #374151);
margin-bottom: 2rem;
text-align: center;
}
.art-contact__faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.art-contact__faq-item {
background-color: var(--color-fondo-1, #f4ecd0); border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--border-radius-lg, 0.5rem);
overflow: hidden;
transition: all 0.3s ease;
}
.art-contact__faq-item:hover {
border-color: var(--color-primary, #9a634e);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.art-contact__faq-header {
width: 100%;
padding: 1.25rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
text-align: left;
cursor: pointer;
font-family: var(--font-family-base, inherit);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-txt-3, #374151);
transition: color 0.2s ease;
}
.art-contact__faq-header:focus-visible {
outline: 2px solid var(--color-primary, #9a634e);
}
.art-contact__faq-icon {
font-size: 0.9rem;
color: var(--color-primary, #9a634e);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.art-contact__faq-item.is-active .art-contact__faq-icon {
transform: rotate(45deg); } .art-contact__faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
padding: 0 1.5rem;
font-size: 0.925rem;
line-height: 1.6;
color: var(--color-txt-3, #374151);
}
.art-contact__faq-content p {
margin: 0;
}
.art-contact__faq-item.is-active .art-contact__faq-content {
padding-bottom: 1.25rem;
} .g-recaptcha-wrapper {
margin: 0 !important;
display: flex;
justify-content: center;
}
.g-recaptcha-wrapper .g-recaptcha {
margin: 0 !important;
} .art-contact__additional-content {
margin-top: 2rem;
color: var(--color-txt-3, #374151);
font-size: 0.95rem;
line-height: 1.6;
}
.art-contact__error-message {
text-align: center;
color: #ef4444;
font-weight: 500;
margin: 2rem 0;
}
.art-espacios-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 420px;
border-radius: var(--border-radius-2xl, 1rem);
overflow: hidden;
background-size: cover;
background-position: center;
margin-bottom: 2.5rem;
}
.art-espacios-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(30, 28, 17, 0.92) 0%,
rgba(30, 28, 17, 0.45) 50%,
rgba(30, 28, 17, 0.15) 100%
);
border-radius: var(--border-radius-2xl, 1rem);
}
.art-espacios-hero__content {
position: relative;
z-index: 2;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 720px;
}
.art-espacios-hero__badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background-color: rgba(154, 99, 78, 0.85);
color: #fff;
padding: 0.3rem 0.85rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
backdrop-filter: blur(4px);
letter-spacing: 0.02em;
}
.art-espacios-hero__title {
font-family: var(--font-family-display, 'Manrope', sans-serif);
font-size: 2.25rem;
font-weight: 800;
color: #ffffff;
line-height: 1.15;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.art-espacios-hero__desc {
font-family: var(--font-family-base, 'Inter', sans-serif);
font-size: 1.1rem;
color: #f4ecd0;
line-height: 1.6;
margin: 0 0 1.5rem;
max-width: 580px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
} .art-espacios-hero__stats {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.art-espacios-hero__stat {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--border-radius-xl, 0.75rem);
padding: 0.75rem 1.25rem;
min-width: 90px;
transition: transform var(--transition-fast, 0.15s),
background var(--transition-fast, 0.15s);
}
.art-espacios-hero__stat:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.18);
}
.art-espacios-hero__stat-number {
font-size: 1.75rem;
font-weight: 800;
color: #ffffff;
line-height: 1;
}
.art-espacios-hero__stat-label {
font-size: 0.75rem;
color: rgba(244, 236, 208, 0.85);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0.25rem;
font-weight: 600;
} .art-espacios-hero__actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
@media (min-width: 640px) {
.art-espacios-hero__title {
font-size: 2.75rem;
}
}
@media (min-width: 768px) {
.art-espacios-hero {
min-height: 480px;
}
.art-espacios-hero__content {
padding: 3rem 2.5rem;
}
.art-espacios-hero__title {
font-size: 3.25rem;
}
} .art-espacios-hero-row {
display: flex;
flex-direction: row;
gap: 1.5rem;
margin-bottom: 2.5rem;
align-items: stretch;
}
.art-espacios-hero--split-card {
flex: 0 0 65%;
max-width: 65%;
margin-bottom: 0;
min-height: 420px;
}
.art-espacios-hero-map-card {
flex: 0 0 calc(35% - 1.5rem);
max-width: calc(35% - 1.5rem);
border-radius: var(--border-radius-2xl, 1rem);
overflow: hidden;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
background: #fdfcf7; display: flex;
flex-direction: column;
}
.art-espacios-hero__map-inner {
width: 100%;
height: 100%;
min-height: 280px;
flex-grow: 1;
} .art-espacios-hero__map-inner .leaflet-container {
width: 100% !important;
height: 100% !important;
}
@media (min-width: 768px) {
.art-espacios-hero--split-card {
min-height: 440px;
}
}
@media (max-width: 991px) {
.art-espacios-hero-row {
flex-direction: column;
gap: 1.5rem;
}
.art-espacios-hero--split-card,
.art-espacios-hero-map-card {
flex: 1 1 auto;
max-width: 100%;
}
.art-espacios-hero-map-card {
min-height: 300px;
}
} .art-espacios-section {
margin-bottom: 2.5rem;
}
.art-espacios-section__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.art-espacios-section__title {
font-family: var(--font-family-display, 'Manrope', sans-serif);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-txt-3, #374151);
line-height: 1.2;
margin: 0;
}
.art-espacios-section__subtitle {
font-size: 1rem;
color: var(--color-text-muted, #6b7280);
margin: 0.25rem 0 0;
line-height: 1.5;
}
.art-espacios-section__link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary, #9a634e);
text-decoration: none;
transition: gap var(--transition-fast, 0.15s);
}
.art-espacios-section__link:hover {
gap: 0.6rem;
} .art-city-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 640px) {
.art-city-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.art-city-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
}
}
@media (min-width: 1280px) {
.art-city-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.art-city-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 200px;
border-radius: var(--border-radius-xl, 0.75rem);
overflow: hidden;
text-decoration: none;
color: #fff;
transition: transform var(--transition-normal, 0.3s),
box-shadow var(--transition-normal, 0.3s);
}
.art-city-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.art-city-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.art-city-card:hover .art-city-card__image {
transform: scale(1.08);
}
.art-city-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(30, 28, 17, 0.88) 0%,
rgba(30, 28, 17, 0.2) 60%,
transparent 100%
);
transition: background var(--transition-normal, 0.3s);
}
.art-city-card:hover .art-city-card__overlay {
background: linear-gradient(
to top,
rgba(154, 99, 78, 0.9) 0%,
rgba(154, 99, 78, 0.25) 60%,
transparent 100%
);
}
.art-city-card__content {
position: relative;
z-index: 2;
padding: 1rem 1.15rem;
}
.art-city-card__name {
font-family: var(--font-family-display, 'Manrope', sans-serif);
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 0.2rem;
line-height: 1.2;
}
.art-city-card__count {
font-size: 0.8rem;
color: rgba(244, 236, 208, 0.85);
font-weight: 500;
}
.art-city-card__arrow {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px);
border-radius: 50%;
color: #fff;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition-fast, 0.15s),
transform var(--transition-fast, 0.15s);
}
.art-city-card:hover .art-city-card__arrow {
opacity: 1;
transform: translateX(0);
}
.art-city-card__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-fondo-2, #e1d9c0), var(--color-fondo-4, #9a634e));
}
.art-city-card__placeholder i {
font-size: 2rem;
color: rgba(255, 255, 255, 0.5);
}  .art-ciudades-filters-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: var(--color-fondo-2, #e1d9c0);
border: 1px solid rgba(154, 99, 78, 0.3);
border-radius: 1rem;
padding: 0.75rem 1rem;
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
margin-bottom: 2rem;
}
.art-ciudades-filters {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
margin-bottom: 0;
}
.art-ciudades-filter {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
border-radius: 8px;
border: 1px solid rgba(154, 99, 78, 0.4);
background: var(--color-fondo-1, #f4ecd0);
color: #374151;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.art-ciudades-filter:hover {
background: #e8dec0;
border-color: rgba(154, 99, 78, 0.5);
}
.art-ciudades-filter--active {
background: var(--color-fondo-4, #9a634e) !important;
border-color: var(--color-fondo-4, #9a634e) !important;
color: #ffffff !important;
}
.art-ciudades-filter__count {
background: rgba(154, 99, 78, 0.08);
color: #9a634e;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
margin-left: 0.15rem;
transition: all 0.2s ease;
}
.art-ciudades-filter--active .art-ciudades-filter__count {
background: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
@media (max-width: 768px) {
.art-ciudades-filters-row {
flex-direction: column;
align-items: stretch;
border-radius: 1rem;
padding: 0.75rem;
gap: 0.5rem;
}
.art-ciudades-filters {
width: 100%;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 0.25rem;
}
.art-ciudades-filters::-webkit-scrollbar {
display: none;
}
.art-map-popup-btn {
width: 100%;
justify-content: center;
}
} .art-spaces-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.25rem;
}
@media (min-width: 640px) {
.art-spaces-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.art-spaces-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.art-spaces-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} .art-card__type-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.55rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
z-index: 10;
}
.art-card__type-badge--galeria {
background-color: var(--color-fondo-4, #9a634e);
color: #fff;
}
.art-card__type-badge--museo {
background-color: var(--color-fondo-3, #374151);
color: #fff;
}
.art-card__type-badge--teatro {
background-color: #b45309; color: #fff;
} .art-other-cities {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.art-other-cities__link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 1rem;
border-radius: 9999px;
font-size: 0.85rem;
font-weight: 600;
background: var(--color-fondo-1, #f4ecd0);
color: var(--color-txt-3, #374151);
text-decoration: none;
border: 1px solid transparent;
transition: all var(--transition-fast, 0.15s);
}
.art-other-cities__link:hover {
background: var(--color-fondo-4, #9a634e);
color: #fff;
border-color: var(--color-fondo-4, #9a634e);
transform: translateY(-1px);
}
.art-other-cities__link--active {
background: var(--color-fondo-4, #9a634e);
color: #fff;
border-color: var(--color-fondo-4, #9a634e);
} .art-map-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.85rem 1.5rem;
border: 2px solid var(--color-fondo-2, #e1d9c0);
border-radius: var(--border-radius-xl, 0.75rem);
background: var(--color-fondo-1, #f4ecd0);
color: var(--color-txt-3, #374151);
font-family: var(--font-family-base, 'Inter', sans-serif);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal, 0.3s);
margin-bottom: 1rem;
}
.art-map-toggle:hover {
background: var(--color-fondo-4, #9a634e);
border-color: var(--color-fondo-4, #9a634e);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.art-map-toggle i {
font-size: 1.1rem;
transition: transform var(--transition-fast, 0.15s);
}
.art-map-toggle--active {
background: var(--color-fondo-4, #9a634e);
border-color: var(--color-fondo-4, #9a634e);
color: #fff;
}
.art-map-toggle--active i.fa-chevron-down {
transform: rotate(180deg);
}
.art-map-collapsible {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.4s ease;
opacity: 0;
margin-bottom: 1rem;
}
.art-map-collapsible--open {
max-height: 800px;
opacity: 1;
} .art-map-modal,
.art-map-modal-ciudad {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(30, 28, 17, 0.7);
backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.art-map-modal.is-active,
.art-map-modal-ciudad.is-active {
opacity: 1;
pointer-events: auto;
}
.art-map-modal__content,
.art-map-modal-ciudad__content {
width: 95%;
max-width: 1300px;
height: 85vh;
background: #fdfcf7;
border-radius: 1.25rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
flex-direction: column;
}
.art-map-modal.is-active .art-map-modal__content,
.art-map-modal-ciudad.is-active .art-map-modal-ciudad__content {
transform: scale(1);
} .art-map-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: #fbf9f1;
gap: 1.5rem;
flex-wrap: wrap;
}
.art-map-modal__header-title {
font-family: var(--font-family-display, 'Manrope', sans-serif);
font-size: 1.15rem;
font-weight: 700;
color: #374151;
margin: 0;
}
.art-map-modal__close-btn,
.art-map-modal-ciudad__close {
background: #fdfcf7;
color: #9a634e;
border: 1px solid rgba(154, 99, 78, 0.15);
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
flex-shrink: 0;
}
.art-map-modal__close-btn:hover,
.art-map-modal-ciudad__close:hover {
background: #f3f4f6;
transform: scale(1.1);
} .art-map-modal__body {
display: flex;
flex: 1;
flex-direction: row;
overflow: hidden;
width: 100%;
}
.art-map-modal__map-side {
flex: 1.2;
height: 100%;
position: relative;
}
.art-map-modal__map,
.art-map-modal-ciudad .mapa-container {
width: 100%;
height: 100% !important;
}
.art-map-modal__list-side {
flex: 0.8;
height: 100%;
background: #fdfcf7;
border-left: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
padding: 1.5rem;
overflow: hidden;
}
.art-map-modal__list-title {
font-family: var(--font-family-display, 'Manrope', sans-serif);
font-size: 1.2rem;
font-weight: 700;
color: #374151;
margin-bottom: 1rem;
border-bottom: 2px solid var(--color-fondo-2, #e1d9c0);
padding-bottom: 0.5rem;
}
.art-map-modal__list-container {
overflow-y: auto;
flex: 1;
padding-right: 0.25rem;
} .art-map-modal-mini-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
} .art-mini-card {
background: #fbf9f1;
border: 1px solid rgba(154, 99, 78, 0.15);
border-radius: 0.75rem;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.2s ease;
text-decoration: none !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.art-mini-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(154, 99, 78, 0.12);
border-color: var(--color-fondo-4, #9a634e);
}
.art-mini-card__img-wrapper {
width: 100%;
height: 90px;
overflow: hidden;
position: relative;
}
.art-mini-card__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.art-mini-card__badge {
position: absolute;
bottom: 0.25rem;
left: 0.25rem;
background: rgba(55, 65, 81, 0.95);
color: #ffffff;
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
border-radius: 4px;
text-transform: capitalize;
}
.art-mini-card__content {
padding: 0.5rem 0.75rem;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.art-mini-card__title {
font-size: 0.8rem;
font-weight: 700;
color: #374151;
line-height: 1.25;
margin-bottom: 0.35rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.art-mini-card__btn {
align-self: flex-end;
font-size: 0.65rem;
color: var(--color-fondo-4, #9a634e);
font-weight: 700;
} .art-map-trigger-wrapper {
margin: 1.5rem 0;
display: flex;
justify-content: center;
}
.art-map-trigger-btn {
background-color: var(--color-fondo-4, #9a634e);
color: #ffffff;
font-family: var(--font-family-base, 'Inter', sans-serif);
font-weight: 700;
font-size: 0.95rem;
padding: 0.8rem 1.8rem;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 0.6rem;
border: none;
cursor: pointer;
box-shadow: 0 10px 15px -3px rgba(154, 99, 78, 0.3);
transition: all 0.3s ease;
}
.art-map-trigger-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 20px -3px rgba(154, 99, 78, 0.4);
background-color: #83523f;
} .art-map-modal .leaflet-popup-content-wrapper,
.art-map-modal .leaflet-popup-tip,
.art-map-modal-ciudad .leaflet-popup-content-wrapper,
.art-map-modal-ciudad .leaflet-popup-tip {
background-color: #fdfcf7 !important;
color: #374151 !important;
box-shadow: 0 10px 25px -5px rgba(30, 28, 17, 0.25) !important;
border: 1px solid rgba(154, 99, 78, 0.15) !important;
}
.art-map-modal .leaflet-popup-content h3,
.art-map-modal-ciudad .leaflet-popup-content h3 {
color: #374151 !important;
}
.art-map-modal .leaflet-popup-close-button,
.art-map-modal-ciudad .leaflet-popup-close-button {
color: #9a634e !important;
} @media (max-width: 900px) {
.art-map-modal__content,
.art-map-modal-ciudad__content {
height: 90vh;
}
.art-map-modal__body {
flex-direction: column;
}
.art-map-modal__map-side,
.art-map-modal-ciudad .mapa-container {
height: 45% !important;
}
.art-map-modal__list-side {
height: 55%;
border-left: none;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.art-map-modal-mini-grid {
grid-template-columns: repeat(2, 1fr);
}
.art-map-modal__header {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
.art-map-modal__close-btn,
.art-map-modal-ciudad__close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 2rem;
height: 2rem;
z-index: 10010;
}
}
@media (max-width: 640px) {
.art-map-modal-mini-grid {
grid-template-columns: 1fr;
}
} .btn-tipo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
border-radius: 8px;
border: 1px solid rgba(154, 99, 78, 0.4);
background: var(--color-fondo-1, #f4ecd0);
color: #374151;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-tipo:hover {
background: #e8dec0;
}
.btn-tipo.active {
background: var(--color-fondo-4, #9a634e) !important;
border-color: var(--color-fondo-4, #9a634e) !important;
color: #ffffff !important;
}
.btn-tipo.active .contador {
background: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
.btn-tipo .contador {
background: rgba(154, 99, 78, 0.08);
color: #9a634e;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
transition: all 0.2s ease;
margin-left: 0.15rem;
} .art-filter-search-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: var(--color-fondo-2, #e1d9c0);
border: 1px solid rgba(154, 99, 78, 0.3);
border-radius: 1rem;
padding: 0.75rem 1rem;
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}
.art-filter-search-bar__left {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
overflow: hidden;
}
.art-filter-search-bar__label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(55, 65, 81, 0.7);
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.35rem;
}
.art-filter-search-bar__pills {
display: flex;
align-items: center;
gap: 0.4rem;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-right: 0.5rem;
}
.art-filter-search-bar__pills::-webkit-scrollbar {
display: none;
}
.art-filter-search-bar__right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
} .art-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.art-search-input-icon {
position: absolute;
left: 0.75rem;
color: rgba(55, 65, 81, 0.6);
font-size: 0.75rem;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.art-search-input {
width: 140px;
padding: 0.45rem 0.75rem 0.45rem 1.75rem;
border: 1px solid rgba(154, 99, 78, 0.4);
border-radius: 8px;
background: var(--color-fondo-1, #f4ecd0);
color: #374151;
font-size: 0.75rem;
font-weight: 600;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.art-search-input:focus {
width: 180px;
outline: none;
border-color: var(--color-fondo-4, #9a634e);
background: #fdfcf7;
box-shadow: 0 0 0 3px rgba(154, 99, 78, 0.1);
} .art-map-popup-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 1rem;
border-radius: 8px;
background: var(--color-fondo-3, #374151);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
white-space: nowrap;
}
.art-map-popup-btn:hover {
background: var(--color-fondo-4, #9a634e);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(154, 99, 78, 0.2);
}
.art-map-popup-btn i {
font-size: 0.75rem;
} .art-clear-filters-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.45rem 0.5rem;
color: #ef4444;
font-size: 0.75rem;
font-weight: 600;
border: none;
background: transparent;
cursor: pointer;
transition: color 0.2s ease;
white-space: nowrap;
}
.art-clear-filters-btn:hover {
color: #b91c1c;
}
.art-clear-filters-btn i {
font-size: 0.75rem;
} @media (max-width: 991px) {
.art-filter-search-bar {
flex-direction: column;
align-items: stretch;
border-radius: 1rem;
padding: 0.75rem;
gap: 0.5rem;
}
.art-filter-search-bar__left {
width: 100%;
overflow: visible;
}
.art-filter-search-bar__pills {
width: 100%;
padding-bottom: 0.25rem;
}
.art-filter-search-bar__right {
width: 100%;
justify-content: flex-start;
gap: 0.4rem;
}
.art-search-input-wrapper {
flex: 1;
}
.art-search-input {
width: 100% !important;
}
}
.art-bp-header__settings-btn {
position: absolute;
bottom: 5px;
right: 5px;
background: var(--fondo-4, #9a634e);
border-radius: 50%;
padding: 6px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.2s;
z-index: 10;
}
.art-bp-header__settings-btn:hover {
transform: scale(1.1);
}
.art-bp-header__settings-icon {
width: 16px;
height: 16px;
filter: brightness(0) invert(1);
flex-shrink: 0;
object-fit: contain;
} .art-bp-card {
background-color: white;
padding: 1rem;
border-radius: var(--border-radius-lg, 0.5rem);
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.art-bp-card {
padding: 1.5rem;
}
} .art-bp-title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-gray-900, #111827);
}
.art-bp-subtitle {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--color-gray-800, #1f2937);
} .art-bp-home-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.art-bp-home-grid {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 1.5rem;
}
}
.art-bp-main-col {
width: 100%;
min-width: 0;
max-width: 100%;
}
@media (min-width: 768px) {
.art-bp-main-col {
grid-column: span 6 / span 6;
}
}
.art-bp-sidebar-col {
background-color: var(--fondo-2, #e1d9c0);
grid-column: span 1 / span 1;
padding: 0 !important; }
@media (min-width: 768px) {
.art-bp-sidebar-col {
grid-column: span 4 / span 4;
margin-top: 1.5rem; }
}
.art-bp-sidebar-content {
padding: 1rem;
} .art-bp-sidebar-col .flex.flex-wrap img.rounded-full {
width: 2.5rem !important;
height: 2.5rem !important;
} .art-bp-header-main {
width: 100%;
} .art-nav-bar {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1.5rem;
scrollbar-width: none;
border-bottom: 1px solid rgba(154, 99, 78, 0.12);
}
.art-nav-bar::-webkit-scrollbar {
display: none;
}
.art-nav-bar__inner {
display: flex;
gap: 0;
min-width: max-content;
}
.art-nav-pill {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: transparent;
color: #6b7280;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
transition: all 0.2s ease;
flex-shrink: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
position: relative;
}
.art-nav-pill:hover {
background: rgba(154, 99, 78, 0.06);
color: #374151;
} .art-nav-pill.is-active {
color: #9a634e;
border-bottom-color: #9a634e;
font-weight: 600;
} .art-nav-pill__icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
object-fit: contain;
filter: brightness(0) saturate(100%);
opacity: 0.55;
transition: all 0.2s ease;
}
.art-nav-pill:hover .art-nav-pill__icon {
opacity: 0.8;
}
.art-nav-pill.is-active .art-nav-pill__icon {
filter: brightness(0) saturate(100%);
opacity: 0.85;
}
.art-nav-pill__label {
font-size: 0.85rem;
line-height: 1.2;
}
.art-nav-pill__count {
background: #fef3c7;
color: #92400e;
border-radius: 9999px;
padding: 0.1rem 0.5rem;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.3;
}
.art-nav-pill.is-active .art-nav-pill__count {
background: #9a634e;
color: #ffffff;
}  .art-nav-bar--global {
display: none;
}
@media (max-width: 768px) {
.art-nav-bar {
margin-bottom: 0;
border-bottom: none;
border-top: 1px solid rgba(154, 99, 78, 0.15);
background: rgba(250, 246, 232, 0.82);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
box-shadow: 0 -4px 16px rgba(154, 99, 78, 0.08);
}
.art-nav-bar--global {
display: block;
}
.art-nav-bar__inner {
gap: 0;
justify-content: space-around;
}
.art-nav-pill {
flex-direction: column;
gap: 0.1rem;
padding: 0.4rem 0.4rem;
font-size: 0.65rem;
border-bottom: none;
border-top: 2px solid transparent;
margin-bottom: 0;
margin-top: -1px;
flex: 1;
justify-content: center;
text-align: center;
min-width: 0;
}
.art-nav-pill.is-active {
border-bottom: none;
border-top-color: #9a634e;
}
.art-nav-pill__icon {
width: 1.2rem;
height: 1.2rem;
}
.art-nav-pill__label {
font-size: 0.6rem;
line-height: 1.1;
}
.art-nav-pill__count {
font-size: 0.6rem;
padding: 0.05rem 0.35rem;
} .art-bp-main-col {
padding-bottom: 4rem;
}
}
@media (max-width: 360px) {
.art-nav-pill {
padding: 0.6rem 0.35rem;
font-size: 0.65rem;
gap: 0.2rem;
}
.art-nav-pill__icon {
width: 0.9rem;
height: 0.9rem;
}
.art-nav-pill__label {
font-size: 0.6rem;
}
}
.art-bp-flex-row {
display: flex;
align-items: center;
} .art-bp-activity-tabs {
background-color: var(--bg-cream, #fffcf0);
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: var(--border-radius, 0.375rem);
margin-bottom: 1rem;
}
.art-bp-activity-filter {
margin-bottom: 0.75rem;
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
.art-bp-filter-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-gray-700, #374151);
background-color: var(--color-gray-200, #e5e7eb);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
display: inline-block;
}
.art-bp-filter-select {
width: auto;
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
}
.art-bp-activity-list {
margin-top: 0.5rem !important;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-radius: var(--border-radius-md, 0.375rem);
} #buddypress #item-body form#whats-new-form.art-bp-post-form {
padding: 0.75rem;
margin-top: 0 !important;
margin-bottom: 1.25rem !important;
background: #e2d3b7;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.art-bp-post-layout {
display: flex;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
}
.art-bp-post-form-avatar {
flex-shrink: 0;
margin-top: 0.25rem;
}
.art-bp-post-form-avatar a {
display: block;
}
.art-bp-post-form-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.art-bp-post-layout .art-bp-whats-new-wrapper {
flex-grow: 1;
min-width: 0;
} .art-bp-whats-new-wrapper {
border: 1px solid var(--txt-4, #9a634e);
border-radius: 12px;
background-color: #fff;
overflow: hidden;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.art-bp-whats-new-wrapper:focus-within {
border-color: #7a4f3e;
box-shadow: 0 0 0 3px rgba(154, 99, 78, 0.15);
}
.art-bp-textarea-container {
position: relative;
width: 100%;
}
#buddypress form#whats-new-form .art-bp-form-textarea {
width: 100%;
padding: 0.85rem 1rem 1.25rem;
border: none;
background-color: transparent !important;
min-height: 58px;
font-size: 0.9375rem;
font-family: inherit;
line-height: 1.6;
resize: none;
overflow: hidden;
color: var(--txt-3, #374151);
}
#buddypress form#whats-new-form .art-bp-form-textarea:focus {
outline: none;
box-shadow: none;
}
#buddypress form#whats-new-form .art-bp-form-textarea::placeholder {
color: #a0a0a0;
font-style: italic;
font-size: 0.8125rem;
} #buddypress div.activity-comments form .ac-textarea {
border: 1px solid var(--txt-4, #9a634e);
border-radius: 12px;
background-color: #fff;
overflow: hidden;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
margin-bottom: 0.75rem;
}
#buddypress div.activity-comments form .ac-textarea:focus-within {
border-color: #7a4f3e;
box-shadow: 0 0 0 3px rgba(154, 99, 78, 0.15);
}
#buddypress div.activity-comments form .ac-textarea textarea {
width: 100%;
padding: 0.85rem 1rem;
border: none !important;
background-color: transparent !important;
min-height: 80px;
font-size: 0.9375rem;
font-family: inherit;
line-height: 1.6;
resize: vertical;
box-shadow: none !important;
color: var(--txt-3, #374151);
}
#buddypress div.activity-comments form .ac-textarea textarea:focus {
outline: none;
box-shadow: none;
}
.art-bp-post-form-options-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background-color: transparent;
}
@media (max-width: 640px) {
#buddypress #item-body form#whats-new-form.art-bp-post-form {
padding: 0.5rem;
}
.art-bp-post-layout {
gap: 0.5rem;
}
.art-bp-post-form-avatar img {
width: 32px;
height: 32px;
}
.art-bp-post-form-options-inner {
padding: 0.5rem 0.75rem;
}
.art-bp-textarea-container {
margin-bottom: 0.35rem;
}
.art-bp-post-in select {
font-size: 0.625rem;
padding: 0.2rem 1.25rem 0.2rem 0.5rem;
max-width: 90px;
}
}
.art-bp-post-form-left {
display: flex;
align-items: center;
gap: 0.5rem;
}
.art-bp-post-form-right {
display: flex;
align-items: center;
}
.art-bp-btn-round {
width: 2.25rem;
height: 2.25rem;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--fondo-4, #9a634e);
color: white;
border: none;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.art-bp-btn-round:hover {
background-color: #7a4f3e;
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(154, 99, 78, 0.3);
}
.art-bp-post-form-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.art-bp-btn-icon {
position: relative;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: transparent;
color: var(--txt-4, #9a634e);
border: none;
cursor: pointer;
font-size: 0.6875rem;
transition: var(--transition-smooth, all 0.2s);
text-decoration: none;
margin-top: 1px;
}
.art-bp-btn-icon:hover {
color: #5a3c2a;
}
.art-bp-btn-icon[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 0;
background-color: #1f2937;
color: white;
padding: 5px 10px;
border-radius: 6px;
font-size: 11px;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
font-family: var(--font-primary, sans-serif);
font-weight: 500;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 9999;
pointer-events: none;
line-height: 1.3;
white-space: normal;
text-align: left;
max-width: 180px;
width: max-content;
}
.art-bp-btn-icon[data-tooltip]::after {
content: '';
position: absolute;
bottom: calc(100% + 4px);
left: 0.75rem;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1f2937;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
pointer-events: none;
}
.art-bp-btn-icon[data-tooltip]:hover::before,
.art-bp-btn-icon[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
.art-bp-post-in {
display: flex;
align-items: center;
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.art-bp-post-in--absolute {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
}
.art-bp-post-in select {
appearance: none;
background-color: transparent;
border: 1px solid var(--txt-4, #9a634e);
border-radius: 9999px;
padding: 0.25rem 1.5rem 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--txt-4, #9a634e);
cursor: pointer;
margin-top: 0 !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a634e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 0.75rem;
transition: all 0.2s;
min-width: 0;
max-width: 120px;
}
.art-bp-post-in select:hover {
background-color: rgba(154, 99, 78, 0.08);
}
.art-bp-post-in select:focus {
outline: none;
border-color: var(--txt-3, #5a3c2a);
} .item-list-tabs.activity-type-tabs {
display: none;
margin-bottom: 2rem;
} .art-bp-entry,
#buddypress ul.activity-list li.art-bp-entry,
#buddypress ul.activity-list li.activity,
#buddypress ul.activity-list li.activity_update,
#buddypress ul.activity-list li.activity-item {
list-style: none;
margin-top: 0 !important;
margin-bottom: 0.35rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.art-activity-card {
background: var(--bg-cream, #fffcf0);
border: 1px solid var(--color-gray-200, #e5e7eb);
border-radius: 13px;
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.art-activity-card:hover {
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}
.art-activity-card__body {
padding: 1.25rem;
}
.art-activity-card__header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.art-activity-card__avatar {
flex-shrink: 0;
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
}
.art-activity-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.art-activity-card__content {
flex: 1;
min-width: 0;
}
.art-activity-card__action {
font-size: 0.875rem;
color: var(--txt-3, #374151);
line-height: 1.4;
}
.art-activity-card__action a:first-child {
font-weight: 600;
color: var(--txt-3, #374151);
text-decoration: none;
}
.art-activity-card__action a:first-child:hover {
color: var(--txt-4, #9a634e);
}
.art-activity-card__date {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-top: 0.15rem;
}
.art-activity-card__text {
font-size: 0.8125rem;
color: var(--color-gray-600, #4b5563);
margin-top: 0.75rem;
line-height: 1.5;
position: relative;
max-height: 200px;
overflow: hidden;
}
.art-activity-card__text.is-expanded {
max-height: none !important;
overflow: visible !important;
}
.art-activity-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-gray-200, #e5e7eb);
}
.art-activity-card__link {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
text-decoration: none;
transition: color 0.15s ease;
}
.art-activity-card__link:hover {
color: var(--txt-4, #9a634e);
}
.art-activity-card__link--comment::before {
content: '\f075';
font-family: 'Font Awesome 5 Free';
font-weight: 400;
margin-right: 0.25rem;
}
.art-activity-card__link--fav::before {
content: '\f005';
font-family: 'Font Awesome 5 Free';
font-weight: 400;
margin-right: 0.25rem;
}
.art-activity-card__link--fav:hover {
color: #d97706;
}
.art-activity-card__link--unfav {
color: #d97706;
}
.art-activity-card__link--unfav:hover {
color: #b45309;
}
.art-activity-card__link--delete:hover {
color: #dc2626;
} .art-activity-like-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: all 0.2s ease;
}
.art-activity-like-btn i {
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}
.art-activity-like-btn:hover i {
transform: scale(1.1);
}
.art-activity-like-btn.is-liked {
color: #9a634e; font-weight: 600;
}
.art-activity-like-btn.is-liked i {
color: #9a634e;
}
.art-activity-like-btn.is-loading {
opacity: 0.5;
pointer-events: none;
}
.art-activity-card__type {
margin-left: auto;
display: inline-flex;
align-items: center;
padding: 0.1rem 0.5rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 500;
background: var(--fondo-2, #e1d9c0);
color: var(--txt-3, #374151);
}
.art-activity-card__comments {
border-top: 1px solid var(--color-gray-200, #e5e7eb);
background: #fafaf8;
padding-left: 0.5rem;
} .art-activity-comments ul {
margin: 0;
padding: 0;
list-style: none;
}
.art-activity-comments li {
margin: 0;
list-style: none;
}
.art-activity-comments .art-comment-item {
padding: 0 0.75rem 0 1.25rem;
transition: background 0.15s ease;
}
.art-activity-comments .art-comment-item:hover {
background: rgba(154, 99, 78, 0.03);
} .art-activity-comments ul ul {
padding-left: 1.5rem;
}
.art-activity-comments ul ul .art-comment-item {
position: relative;
padding-left: 0.75rem;
}
.art-activity-comments ul ul .art-comment-item::before {
content: '';
position: absolute;
left: -1.5rem;
top: 0;
bottom: 0;
width: 2px;
background: rgba(154, 99, 78, 0.15);
}
.art-activity-comments ul ul .art-comment-item:last-child::before {
height: 1.25rem;
bottom: auto;
}
.art-activity-comments ul ul .art-comment-item::after {
content: '';
position: absolute;
left: -1.5rem;
top: 1.25rem;
width: 0.75rem;
height: 2px;
background: rgba(154, 99, 78, 0.15);
} .art-comment-item.art-comment--hidden {
display: none;
}
.art-comments-toggle {
display: block;
padding: 0.6rem 0.75rem;
font-size: 0.8125rem;
color: var(--txt-4, #9a634e);
text-decoration: none;
font-weight: 600;
cursor: pointer;
border: none;
background: transparent;
width: 100%;
text-align: left;
transition: background 0.15s ease;
}
.art-comments-toggle:hover {
background: rgba(154, 99, 78, 0.05);
color: #7a4f3e;
} .art-comment {
display: flex;
gap: 0.625rem;
padding: 0.75rem 0.5rem;
}
.art-comment__avatar {
flex-shrink: 0;
}
.art-comment__avatar img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.art-comment__body {
flex: 1;
min-width: 0;
}
.art-comment__header {
display: flex;
align-items: baseline;
gap: 0.375rem;
flex-wrap: wrap;
line-height: 1.3;
}
.art-comment__author {
font-weight: 600;
font-size: 0.8125rem;
color: var(--txt-3, #374151);
text-decoration: none;
}
.art-comment__author:hover {
color: var(--txt-4, #9a634e);
}
.art-comment__time {
font-size: 0.6875rem;
color: #a0a0a0;
}
.art-comment__time a {
color: inherit;
text-decoration: none;
}
.art-comment__time a:hover {
color: var(--txt-4, #9a634e);
}
.art-comment__reply-to {
font-size: 0.8125rem;
color: var(--txt-4, #9a634e);
text-decoration: none;
font-weight: 500;
margin-right: 0.25rem;
}
.art-comment__reply-to:hover {
text-decoration: underline;
}
.art-comment__content {
font-size: 0.8125rem;
color: var(--txt-3, #374151);
line-height: 1.5;
margin-top: 0.125rem;
word-wrap: break-word;
}
.art-comment__actions {
display: flex;
gap: 0.75rem;
margin-top: 0.35rem;
opacity: 0;
transition: opacity 0.15s ease;
}
.art-comment-item:hover .art-comment__actions,
.art-comment__actions:focus-within {
opacity: 1;
}
.art-comment__actions a {
font-size: 0.6875rem;
color: #a0a0a0;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
transition: color 0.15s ease;
}
.art-comment__actions a:hover {
color: var(--txt-4, #9a634e);
}
.art-comment__actions .delete {
color: #ef4444;
}
.art-comment__actions .delete:hover {
color: #dc2626;
} .art-activity-comment-form {
border-top: 1px solid var(--color-gray-200, #e5e7eb);
background: #fff;
padding: 0.75rem 1rem;
}
.art-activity-comment-form--reply {
border-top: none;
border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.art-activity-comment-form__inner {
display: flex;
gap: 0.625rem;
}
.art-activity-comment-form__avatar {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
}
.art-activity-comment-form__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.art-activity-comment-form__input {
flex: 1;
}
.art-activity-comment-form__input textarea {
width: 100%;
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: 10px;
padding: 0.6rem 0.75rem;
font-size: 0.8125rem;
resize: none;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
font-family: inherit;
line-height: 1.5;
}
.art-activity-comment-form__input textarea:focus {
outline: none;
border-color: var(--txt-4, #9a634e);
box-shadow: 0 0 0 2px rgba(154, 99, 78, 0.12);
}
.art-activity-comment-form__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
}
.art-activity-comment-form__submit {
padding: 0.4rem 1rem;
background: var(--fondo-4, #9a634e);
color: white;
border: none;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.art-activity-comment-form__submit:hover {
background: #7a4f3e;
transform: translateY(-1px);
}
.art-activity-comment-form__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.art-activity-comment-form__cancel {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
text-decoration: none;
font-weight: 500;
transition: color 0.15s ease;
}
.art-activity-comment-form__cancel:hover {
color: var(--txt-3, #374151);
}
.art-activity-comment-form__cancel:hover {
color: var(--txt-3, #374151);
}
.art-bp-flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.art-bp-grid {
display: grid;
gap: 1rem;
} .art-bp-form-group {
margin-bottom: 1rem;
}
.art-bp-form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--color-gray-700, #374151);
}
.art-bp-form-input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-gray-300, #d1d5db);
border-radius: var(--border-radius, 0.375rem);
background-color: white;
}
.art-bp-form-input:focus {
outline: none;
border-color: var(--fondo-4, #9a634e);
box-shadow: 0 0 0 3px rgba(154, 99, 78, 0.1);
} .art-bp-activity-hero {
background: linear-gradient(135deg, var(--bg-cream, #fffcf0) 0%, #fef3c7 100%);
border: 1px solid var(--color-gray-200, #e5e7eb);
border-radius: var(--border-radius-xl, 0.75rem);
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}
.art-bp-activity-hero__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
@media (min-width: 768px) {
.art-bp-activity-hero__inner {
flex-direction: row;
text-align: left;
align-items: flex-start;
gap: 1.5rem;
}
}
.art-bp-activity-hero__icon-wrap {
flex-shrink: 0;
width: 3.5rem;
height: 3.5rem;
background-color: var(--fondo-4, #9a634e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgba(154, 99, 78, 0.3);
}
@media (min-width: 768px) {
.art-bp-activity-hero__icon-wrap {
width: 4rem;
height: 4rem;
}
}
.art-bp-activity-hero__icon {
font-size: 1.5rem;
color: white;
}
@media (min-width: 768px) {
.art-bp-activity-hero__icon {
font-size: 1.75rem;
}
}
.art-bp-activity-hero__content {
flex: 1;
}
.art-bp-activity-hero__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark, #1f2937);
margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
.art-bp-activity-hero__title {
font-size: 1.5rem;
}
}
.art-bp-activity-hero__text {
font-size: 0.875rem;
color: var(--text-muted, #4b5563);
line-height: 1.5;
margin: 0;
}
@media (min-width: 768px) {
.art-bp-activity-hero__text {
font-size: 1rem;
}
} .art-bp-card,
.art-bp-form-input {
background-color: transparent !important;
} .profile-bio-container {
margin-top: 8px;
position: relative;
}
.profile-description {
font-size: 0.875rem;
line-height: 1.5;
color: #374151;
}
.profile-description.bio-collapsed {
max-height: 60px;
overflow: hidden;
}
.profile-description.bio-expanded {
max-height: none;
overflow: visible;
}
.bio-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(to bottom, transparent, #f4ecd0);
pointer-events: none;
}
.bio-toggle-btn {
color: #663d2e;
margin-top: 4px;
cursor: pointer;
background: none;
border: none;
padding: 2px 0;
font-weight: 500;
font-size: 0.75rem;
display: inline-block;
}
.bio-toggle-btn:hover {
text-decoration: underline;
} @media (max-width: 480px) {
.art-bp-sidebar-col {
margin-top: 0.5rem;
}
.art-bp-sidebar-content {
padding: 0.75rem;
}
} .art-bp-profile-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.4rem;
padding: 0.5rem 0;
list-style: none !important;
margin: 0;
}
.art-bp-profile-actions .generic-button {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.art-bp-profile-actions .generic-button a,
.art-bp-profile-actions .generic-button button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
padding: 0 !important;
margin: 0 !important;
background-color: var(--fondo-4, #9a634e) !important;
border: none !important;
color: white !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
transition: transform 0.2s, background-color 0.2s !important;
position: relative !important;
font-size: 0 !important;
text-indent: -9999px !important;
outline: none !important;
text-decoration: none !important;
overflow: visible !important;
}
.art-bp-profile-actions .generic-button a:hover,
.art-bp-profile-actions .generic-button button:hover {
transform: scale(1.12) !important;
background-color: #7a4f3e !important;
box-shadow: 0 4px 12px rgba(154, 99, 78, 0.3) !important;
} .art-bp-profile-actions .generic-button a::after,
.art-bp-profile-actions .generic-button button::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-indent: 0 !important;
font-size: 14px !important;
color: white !important;
display: block !important;
} .art-bp-profile-actions .generic-button a::before,
.art-bp-profile-actions .generic-button button::before {
content: attr(data-tooltip) !important;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background-color: #1f2937;
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px !important;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
text-indent: 0 !important;
font-family: var(--font-primary, sans-serif) !important;
font-weight: 500 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 100;
pointer-events: none;
}
.art-bp-profile-actions .generic-button a:hover::before,
.art-bp-profile-actions .generic-button button:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.art-bp-profile-actions .generic-button a[data-tooltip=""]::before,
.art-bp-profile-actions .generic-button button[data-tooltip=""]::before,
.art-bp-profile-actions .generic-button a:not([data-tooltip])::before,
.art-bp-profile-actions .generic-button button:not([data-tooltip])::before {
display: none !important;
}  .art-bp-profile-actions .generic-button a.friend::after,
.art-bp-profile-actions .generic-button a.not_friends::after,
.art-bp-profile-actions .generic-button a.add::after,
.art-bp-profile-actions .generic-button button.friend::after,
.art-bp-profile-actions .generic-button button.not_friends::after,
.art-bp-profile-actions .generic-button button.add::after {
content: "\f234" !important;
} .art-bp-profile-actions .generic-button a.remove::after,
.art-bp-profile-actions .generic-button a.is-friend::after,
.art-bp-profile-actions .generic-button a.is_friend::after,
.art-bp-profile-actions .generic-button a.pending_friend::after,
.art-bp-profile-actions .generic-button a.requested::after,
.art-bp-profile-actions .generic-button button.remove::after,
.art-bp-profile-actions .generic-button button.is-friend::after,
.art-bp-profile-actions .generic-button button.is_friend::after,
.art-bp-profile-actions .generic-button button.pending_friend::after,
.art-bp-profile-actions .generic-button button.requested::after {
content: "\f235" !important;
} .art-bp-profile-actions .generic-button a.message::after,
.art-bp-profile-actions .generic-button a.send-message::after,
.art-bp-profile-actions .generic-button a.bp-send-message-button::after,
.art-bp-profile-actions .generic-button button.message::after,
.art-bp-profile-actions .generic-button button.send-message::after,
.art-bp-profile-actions .generic-button button.bp-send-message-button::after {
content: "\f0e0" !important;
} .art-bp-profile-actions .generic-button a:not([class*="friend"]):not([class*="message"]):not([class*="send"]):not([class*="mention"]):not([class*="public"]):not([class*="awsm"]):not([class*="follow"]):not([class*="unfollow"])::after,
.art-bp-profile-actions .generic-button button:not([class*="friend"]):not([class*="message"]):not([class*="send"]):not([class*="mention"]):not([class*="public"]):not([class*="awsm"]):not([class*="follow"]):not([class*="unfollow"])::after {
content: "\f0e0" !important;
} .art-bp-sidebar-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.art-bp-sidebar-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.art-bp-sidebar-thumb {
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: var(--border-radius, 0.25rem);
background-color: var(--color-gray-100, #f3f4f6);
overflow: hidden;
display: block;
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
transition: opacity 0.2s;
}
.art-bp-sidebar-thumb--round {
border-radius: 50%;
border: 1px solid var(--color-gray-200, #e5e7eb);
}
.art-bp-sidebar-thumb:hover {
opacity: 0.8;
}
.art-bp-sidebar-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.art-bp-sidebar-thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-400, #9ca3af);
font-size: 1rem;
}
.art-bp-sidebar-info {
display: flex;
flex-direction: column;
width: 100%;
padding-right: 0.5rem;
}
.art-bp-sidebar-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--txt-3, #5a3c2a);
transition: color 0.2s;
line-height: 1.25; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.art-bp-sidebar-title:hover {
color: var(--txt-4, #9a634e);
}
.art-bp-sidebar-meta {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-top: 0.25rem;
}
.art-bp-sidebar-meta--tag {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
color: var(--color-gray-400, #9ca3af);
}
.art-bp-sidebar-empty {
font-size: 0.75rem;
color: var(--color-gray-500, #6b7280);
margin-bottom: 1.5rem;
} .art-bp-profile-actions .generic-button a.mention::after,
.art-bp-profile-actions .generic-button a.public-message::after,
.art-bp-profile-actions .generic-button a.awsm-pm-button::after,
.art-bp-profile-actions .generic-button button.mention::after,
.art-bp-profile-actions .generic-button button.public-message::after,
.art-bp-profile-actions .generic-button button.awsm-pm-button::after {
content: "@" !important;
font-family: var(--font-primary, sans-serif) !important;
font-weight: bold !important;
font-size: 16px !important;
} @media (max-width: 480px) {
.art-bp-profile-actions {
gap: 0.3rem;
padding: 0.4rem 0;
}
.art-bp-profile-actions .generic-button a,
.art-bp-profile-actions .generic-button button {
width: 32px !important;
height: 32px !important;
}
.art-bp-profile-actions .generic-button a::after,
.art-bp-profile-actions .generic-button button::after {
font-size: 12px !important;
}
.art-bp-profile-actions .generic-button a::before,
.art-bp-profile-actions .generic-button button::before {
font-size: 10px !important;
padding: 3px 7px;
}
} @media (max-width: 768px) {
body.logged-in {
padding-bottom: 4.5rem !important;
}
} .art-notifications-section {
padding-top: 2rem;
padding-bottom: 2rem;
background-color: #f4ecd0; }
.art-notifications-container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.art-notifications-feed {
max-width: 896px;
margin-left: auto;
margin-right: auto;
}
.art-activity-card__type--comment {
background-color: var(--fondo-2, #e1d9c0) !important;
color: var(--txt-4, #9a634e) !important;
}
.art-activity-card__type--bp,
.art-activity-card__type--custom {
background-color: var(--fondo-3, #374151) !important;
color: #fff !important;
}
.art-activity-card__type--bp-activity {
background-color: var(--fondo-4, #9a634e) !important;
color: #fff !important;
}
.art-activity-card__date {
font-size: 0.75rem;
color: var(--txt-3, #774e3f);
opacity: 0.8;
}
.art-auth-section {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 1rem;
min-height: calc(100vh - 120px);
background-color: var(--color-fondo-1, #f4ecd0);
} .art-auth-card {
max-width: 1100px;
width: 100%;
background-color: #ffffff;
border-radius: var(--border-radius-2xl, 1rem);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow-xl);
margin: 2rem auto;
}
@media (min-width: 768px) {
.art-auth-card {
flex-direction: row;
}
} .art-auth-form-side {
flex: 0 0 35%; padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fffdf5;
}
@media (min-width: 768px) {
.art-auth-form-side {
padding: 3rem 2rem;
}
}
.art-auth-form-inner {
max-width: 400px;
width: 100%;
}
.art-auth-logo {
display: block;
max-width: 200px;
margin: 0 auto 2.5rem;
} .art-auth-visual-side {
display: none;
flex: 1;
position: relative;
background-size: cover;
background-position: center;
}
@media (min-width: 768px) {
.art-auth-visual-side {
display: flex;
}
}
.art-auth-visual-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.art-auth-visual-info {
background: rgba(255, 252, 240, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 3rem;
border-radius: 1.5rem;
color: white;
width: 90%;
max-width: 600px; text-align: left;
}
.art-auth-visual-info h2 {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: white;
letter-spacing: -0.02em;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0.75rem;
}
.art-auth-visual-info ul {
list-style: none;
padding: 0;
margin: 0;
}
.art-auth-visual-info li {
margin-bottom: 1rem;
font-size: 0.9375rem;
position: relative;
padding-left: 2rem;
line-height: 1.6;
}
.art-auth-visual-info li::before {
content: '✓';
position: absolute;
left: 0;
top: 0.2rem;
color: var(--color-primary, #9a634e);
font-weight: bold;
background: white;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.art-auth-visual-info li strong {
color: var(--color-fondo-2, #e1d9c0);
} .art-auth-divider {
position: relative;
text-align: center;
margin: 2rem 0;
border-bottom: 1px solid #e5e7eb;
}
.art-auth-divider span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fffdf5;
padding: 0 1rem;
font-size: 0.8125rem;
color: var(--color-text-muted, #6b7280);
white-space: nowrap;
}
.art-auth-group {
margin-bottom: 1.25rem;
}
.art-auth-input {
width: 100%;
padding: 1rem 1.25rem;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
background-color: #f9fafb;
color: var(--color-txt-3, #374151);
font-size: 0.875rem;
transition: all 0.2s;
}
.art-auth-input:focus {
outline: none;
background-color: #ffffff;
border-color: var(--color-primary, #9a634e);
box-shadow: 0 0 0 3px rgba(154, 99, 78, 0.1);
}
.art-auth-submit {
width: 100%;
padding: 1rem;
background-color: var(--color-primary, #9a634e);
color: white;
border: none;
border-radius: 0.75rem;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
}
.art-auth-submit:hover {
background-color: #7a4f3e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(154, 99, 78, 0.3);
}
.art-auth-submit svg {
width: 1.25rem;
height: 1.25rem;
}
.art-auth-footer-link {
display: block;
text-align: center;
margin-top: 1.5rem;
font-size: 0.8125rem;
color: var(--color-text-muted, #6b7280);
text-decoration: none;
transition: color 0.2s;
}
.art-auth-footer-link:hover {
color: var(--color-primary, #9a634e);
text-decoration: underline;
} .art-auth-hint {
font-size: 0.75rem;
color: var(--color-text-muted, #6b7280);
margin-top: 0.5rem;
line-height: 1.4;
} .art-auth-error {
background-color: #fee2e2;
border: 1px solid #fecaca;
color: #b91c1c;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.art-auth-success {
text-align: center;
padding: 2rem;
}
.art-auth-success img {
max-width: 100%;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
}
.art-auth-success h1 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
} .g-recaptcha {
display: flex;
justify-content: center;
margin: 1.5rem 0;
} .art-recaptcha-wrap {
display: flex;
justify-content: center;
overflow: hidden;
margin: 1.5rem 0;
}
@media (max-width: 360px) {
.art-recaptcha-wrap {
transform: scale(0.78);
transform-origin: center center;
margin: 0.5rem 0;
}
.art-recaptcha-wrap > div {
margin: 0 auto;
}
} @media (max-width: 480px) {
.art-auth-form-side {
padding: 1.5rem 1rem;
}
.art-auth-section {
padding: 0.5rem;
min-height: calc(100vh - 80px);
}
.art-auth-logo {
max-width: 140px;
margin-bottom: 1.5rem;
}
.art-auth-visual-info {
padding: 1.5rem;
}
} @media (max-width: 350px) {
.g-recaptcha {
transform: scale(0.75);
transform-origin: center center;
}
} :root {
--header-height: 4rem;
--sidebar-width: 16rem;
--border-radius: 0.5rem;
--shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--bg-cream: #fffcf0;
} * {
box-sizing: border-box;
}
html {
box-sizing: border-box;
}
body {
overflow-x: hidden;
max-width: 100vw;
} .art-app {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--fondo-1, #f4ecd0);
}
.bg-cream {
background-color: var(--bg-cream) !important;
}
.blur-text {
filter: blur(5px);
user-select: none;
pointer-events: none;
}
.blur-container {
position: relative;
overflow: hidden;
}
.blur-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end; padding-right: 1rem;
background: rgba(255, 252, 240, 0.4);
z-index: 10;
}
@media (min-width: 768px) {
.blur-overlay {
justify-content: flex-end; padding-right: 1rem;
}
}
.blur-btn {
background: var(--fondo-4, #9a634e);
color: white !important;
padding: 4px 12px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none !important;
transition: var(--transition-smooth);
}
.blur-btn:hover {
transform: scale(1.05);
opacity: 0.9;
} .art-layout {
display: block;
margin-top: var(--header-height);
min-height: calc(100vh - var(--header-height));
} .art-main {
flex: 1;
width: 100%;
max-width: 100%;
background: var(--fondo-1, #f4ecd0);
transition: var(--transition-smooth);
display: flex;
flex-direction: column;
}
.art-main__container {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
}
.art-main__content {
flex: 1;
background: var(--fondo-1, #f4ecd0);
border-radius: var(--border-radius);
width: 100%;
max-width: 100%;
} .art-page-container {
max-width: 100%;
margin: 0;
padding: 0;
width: 100%;
} .art-single-container {
margin: 0 auto;
padding: 2rem 1rem;
width: 100%;
} .art-taxonomy-container {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 1rem;
width: 100%;
} .art-hero-section {
position: relative;
background-size: cover;
background-position: center;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: var(--border-radius);
overflow: hidden;
margin-bottom: 2rem;
} .art-grid-2col {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 2rem;
} .art-content-section {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-light);
margin-bottom: 1.5rem;
} .art-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 800;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.art-overlay--active {
opacity: 1;
visibility: visible;
}  @media (min-width: 768px) {
.art-header__menu-toggle {
display: none;
}
.art-sidebar {
position: fixed;
transform: translateX(0);
flex-shrink: 0;
}
.art-main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .art-main {
margin-left: 70px;
width: calc(100% - 70px);
}
.art-layout {
display: block;
width: 100%;
max-width: 100%;
}
} @media (min-width: 1024px) {
.art-header__left {
gap: 2rem;
}
.art-header__search {
max-width: 32rem;
}
.art-layout {
display: block;
width: 100%;
max-width: 100%;
margin-top: var(--header-height);
min-height: calc(100vh - var(--header-height));
}
.art-sidebar {
position: fixed;
transform: translateX(0);
flex-shrink: 0;
}
.art-main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .art-main {
margin-left: 70px;
width: calc(100% - 70px);
}
.art-main__container {
padding: 0rem 0.5rem;
min-height: 100%;
display: flex;
flex-direction: column;
}
.art-main__content {
flex: 1;
padding: 0;
} .art-page-container {
padding: 0;
}
.art-single-container {
padding: 10px 10px;
}
.art-taxonomy-container {
padding: 2rem;
} .art-grid-2col {
grid-template-columns: 1fr 1fr;
}
} @media (min-width: 768px) and (max-width: 1023px) {
.art-page-container {
padding: 1.5rem 1.5rem 2.5rem 1.5rem !important;
} .art-header__search {
flex: 1;
max-width: 18rem;
}
#buscador-container {
padding-bottom: 0.35rem !important;
}
#buscador-container i.fa-search {
font-size: 1rem !important;
margin-right: 0.5rem !important;
}
#placeholder-dinamico,
#buscador-input-max {
font-size: 0.8125rem !important;
} #panel-sugerencias {
max-width: 600px !important;
}
} @media (max-width: 767px) {
.art-header__menu-toggle {
display: flex !important;
align-items: center;
justify-content: center;
} .art-header__search {
display: block;
flex: 1;
max-width: none;
min-width: 0;
margin-right: 0.25rem;
} #buscador-en-tiempo-real-max {
width: 100%;
}
#buscador-container {
padding-bottom: 0.25rem !important;
border-bottom-width: 1px !important;
}
#buscador-container i.fa-search {
font-size: 0.875rem !important;
margin-right: 0.5rem !important;
}
#placeholder-dinamico,
#buscador-input-max {
font-size: 0.75rem !important;
} #panel-sugerencias {
max-width: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
border-radius: 0 0 1rem 1rem !important;
margin: 0 !important;
}
#panel-sugerencias .p-6 {
padding: 1rem !important;
}
#panel-sugerencias .grid {
grid-template-columns: 1fr !important;
gap: 0.5rem !important;
}
#panel-sugerencias h3 {
font-size: 0.875rem !important;
margin-bottom: 0.5rem !important;
}
#panel-sugerencias a {
padding: 0.5rem !important;
}
#panel-sugerencias a i {
font-size: 0.875rem !important;
margin-right: 0.5rem !important;
}
#panel-sugerencias a span {
font-size: 0.75rem !important;
} #panel-sugerencias .flex-wrap a {
font-size: 0.625rem !important;
padding: 0.25rem 0.5rem !important;
}
.art-layout {
display: block;
margin: 45px 0px;
margin-top: var(--header-height-fixed, 4rem) !important;
overflow-x: hidden;
max-width: 100vw;
}
.art-page-container {
padding: 1rem 0.75rem 2rem 0.75rem !important;
}
.art-main {
width: 100%;
margin-left: 0;
overflow-x: hidden;
max-width: 100vw;
}
.art-main__container {
padding: 0rem;
overflow-x: hidden;
max-width: 100%;
}
.art-main__content {
overflow-x: hidden;
max-width: 100%;
}
.art-single-container {
overflow-x: hidden;
max-width: 100%;
padding: 1rem 0.75rem;
}
.art-hero-section {
max-width: 100%;
overflow: hidden;
} .art-single-container>div {
max-width: 100%;
overflow-x: hidden;
} .art-single-container>div[style*="min-height: 600px"] {
min-height: 400px !important;
} .art-single-container .px-8 {
padding-left: 1rem !important;
padding-right: 1rem !important;
} .swiper-container {
max-width: 100%;
overflow: hidden;
}
.swiper-wrapper {
max-width: 100%;
} .art-header__actions .md\\:hidden {
display: flex !important;
align-items: center;
gap: 0.5rem;
} .art-header__actions .hidden.md\\:flex {
display: none !important;
} .art-header__actions {
gap: 0.5rem;
padding-right: 0.75rem;
} .art-header__actions button {
min-height: 30px;
min-width: 30px;
} .art-header__left {
gap: 0.5rem;
} .art-header__menu-toggle {
padding: 0.25rem;
margin-left: 0.25rem;
} .art-header__logo {
margin-left: 0;
} .art-sidebar {
width: 280px;
border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.art-sidebar--open {
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
} .art-sidebar--open .art-sidebar__content nav a {
animation: slideInLeft 0.3s ease forwards;
opacity: 0;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(1) {
animation-delay: 0.05s;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(2) {
animation-delay: 0.08s;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(3) {
animation-delay: 0.11s;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(4) {
animation-delay: 0.14s;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(5) {
animation-delay: 0.17s;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(6) {
animation-delay: 0.20s;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(7) {
animation-delay: 0.23s;
}
.art-sidebar--open .art-sidebar__content nav a:nth-child(8) {
animation-delay: 0.26s;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
} .art-sidebar {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}
.art-sidebar::-webkit-scrollbar {
width: 6px;
}
.art-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.art-sidebar::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
.art-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.5);
} @media (hover: none) and (pointer: coarse) {
.art-header__menu-toggle {
min-height: 44px;
min-width: 44px;
}
} @media print {
.art-header,
.art-sidebar {
display: none;
}
.art-main {
margin-left: 0;
margin-top: 0;
}
}   .art-quick-actions-wrapper {
display: none !important;
}  .art-mobile-quick-actions {
display: block;
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 50;
} .art-add-space-btn {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
border-radius: 0.5rem;
background-color: var(--fondo-4, #9a634e);
color: white !important;
transition: all 0.3s ease;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.art-add-space-btn:hover {
opacity: 0.9;
text-decoration: none;
background-color: var(--fondo-4, #9a634e);
} .art-quick-actions-container {
position: relative;
z-index: 50;
} .art-quick-actions-btn {
display: flex !important;
align-items: center;
justify-content: center;
width: 2rem !important;
height: 2rem !important;
border-radius: 9999px !important;
background-color: #f3f4f6 !important;
color: #4b5563 !important;
transition: all 0.3s ease;
border: none;
cursor: pointer;
padding: 0 !important;
}
.art-quick-actions-btn:hover {
background-color: #e5e7eb !important;
transform: scale(1.05);
}
.art-activity-entry {
display: flex;
align-items: flex-start;
padding-top: 5px;
}
.art-activity-image-col {
flex-shrink: 0;
width: 80px;
margin-right: 15px;
}
@media (min-width: 640px) {
.art-activity-image-col {
width: 100px;
}
}
.art-activity-image-col img {
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
width: 100%;
height: auto;
display: block;
}
.art-activity-content-col {
flex: 1;
min-width: 0;
}
.art-activity-description {
font-size: 11px;
font-style: italic;
color: #4b5563;
margin-bottom: 4px;
line-height: 1.4;
}
.art-activity-points-wrap {
margin-bottom: 4px;
}
.art-activity-points {
display: inline-flex;
align-items: center;
color: #a16207;
font-size: 8px;
font-weight: 700;
}
.art-activity-points i {
color: #eab308;
margin-right: 3px;
}
.art-activity-styles-wrap {
display: flex;
flex-wrap: wrap;
margin-top: 2px;
margin-bottom: 8px;
}
.art-activity-style-tag {
display: inline-block;
background-color: #d7d7d7;
padding: 2px 8px;
border-radius: 4px;
font-size: 8px;
font-weight: 500;
color: #4b5563;
margin-right: 5px;
margin-bottom: 4px;
line-height: 1.2;
}
.art-activity-button-wrap {
margin-top: 4px;
} .art-activity-btn {
display: inline-block;
padding: 4px 10px;
font-size: 10px;
font-weight: 500;
color: #fff;
border-radius: 6px;
text-decoration: none;
transition: all 0.2s ease;
}
.art-activity-btn:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
.art-activity-comment-form {
display: none;
}
.art-activity-comment-form.is-active {
display: block;
} .art-activity-card__text.has-overflow::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to bottom, transparent, var(--bg-cream, #fffcf0));
pointer-events: none;
z-index: 1;
}
.art-activity-card__text.is-expanded::after {
display: none;
}
.art-expand-btn {
display: block;
font-weight: 600;
font-size: 0.8125rem;
color: var(--txt-4, #9a634e);
text-decoration: none;
margin-top: 4px;
position: relative;
z-index: 2;
}
.art-expand-btn:hover {
color: #7a4f3e;
text-decoration: underline;
}
.blog-header,
.archive-header {
background: linear-gradient(135deg, var(--color-fondo-3) 0%, #1e293b 100%);
border-radius: var(--border-radius-2xl, 1rem);
padding: 3rem 2rem;
margin-bottom: 2.5rem;
text-align: center;
color: #ffffff;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.blog-header::after,
.archive-header::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 30%, rgba(154, 99, 78, 0.15) 0%, transparent 50%);
pointer-events: none;
}
.blog-header__title,
.archive-header__title {
font-family: var(--font-family-base);
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
color: #ffffff;
}
.blog-header__desc,
.archive-header__desc {
font-size: 1.1rem;
color: var(--color-fondo-1);
max-width: 600px;
margin: 0 auto;
opacity: 0.9;
} .blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.blog-grid {
grid-template-columns: repeat(3, 1fr);
}
} .blog-card--featured {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
background: var(--color-fondo-1, #f4ecd0);
border-radius: var(--border-radius-2xl, 1rem);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-fondo-2);
}
@media (min-width: 1024px) {
.blog-card--featured {
flex-direction: row;
min-height: 400px;
}
.blog-card--featured .blog-card__media {
width: 55%;
height: auto;
}
.blog-card--featured .blog-card__content {
width: 45%;
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.blog-card {
background: var(--color-fondo-1, #f4ecd0);
border-radius: var(--border-radius-xl, 0.75rem);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
border: 1px solid var(--color-fondo-2);
display: flex;
flex-direction: column;
height: 100%;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.blog-card__media {
position: relative;
padding-bottom: 56.25%; overflow: hidden;
background-color: var(--color-fondo-2);
}
.blog-card__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.blog-card:hover .blog-card__img {
transform: scale(1.05);
}
.blog-card__badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--color-primary);
color: #ffffff;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius-full);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 10;
box-shadow: var(--shadow-sm);
}
.blog-card__content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-card__meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.8rem;
color: var(--color-text-muted);
margin-bottom: 0.75rem;
}
.blog-card__meta-item {
display: flex;
align-items: center;
gap: 0.35rem;
}
.blog-card__title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 0.75rem;
color: var(--color-txt-3);
transition: color var(--transition-fast);
}
.blog-card__title a {
color: inherit;
text-decoration: none;
}
.blog-card__title a:hover {
color: var(--color-primary);
}
.blog-card--featured .blog-card__title {
font-size: 2rem;
}
.blog-card__excerpt {
font-size: 0.925rem;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card--featured .blog-card__excerpt {
-webkit-line-clamp: 4;
line-clamp: 4;
}
.blog-card__footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.blog-card__author {
display: flex;
align-items: center;
gap: 0.5rem;
}
.blog-card__author-img {
width: 2rem;
height: 2rem;
border-radius: var(--border-radius-full);
object-fit: cover;
}
.blog-card__author-name {
font-size: 0.85rem;
font-weight: 500;
color: var(--color-txt-3);
}
.blog-card__link {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: color var(--transition-fast);
}
.blog-card__link:hover {
color: var(--color-secondary);
} .blog-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-top: 3rem;
}
.blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.5rem;
border-radius: var(--border-radius-md, 0.375rem);
border: 1px solid var(--color-fondo-2);
background: var(--color-fondo-1, #f4ecd0);
color: var(--color-txt-3);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: all var(--transition-fast);
}
.blog-pagination .page-numbers:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.blog-pagination .page-numbers.current {
background: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
} .single-post {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 1024px) {
.single-post {
grid-template-columns: 7fr 3fr;
}
}
.single-post__main {
background: var(--color-fondo-1, #f4ecd0);
border-radius: var(--border-radius-2xl, 1rem);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-fondo-2);
}
@media (min-width: 768px) {
.single-post__main {
padding: 2.5rem;
}
}
.single-post__hero {
margin-bottom: 2rem;
}
.single-post__badge {
display: inline-block;
background: var(--color-fondo-2);
color: var(--color-primary);
padding: 0.35rem 1rem;
border-radius: var(--border-radius-full);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.single-post__title {
font-size: 2rem;
font-weight: 800;
line-height: 1.25;
color: var(--color-txt-3);
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
.single-post__title {
font-size: 2.75rem;
}
}
.single-post__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-muted);
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-fondo-2);
margin-bottom: 2rem;
}
.single-post__meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.single-post__meta-item img {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--border-radius-full);
}
.single-post__meta-item-name {
font-weight: 600;
color: var(--color-txt-3);
}
.single-post__featured-media {
margin-bottom: 2rem;
border-radius: var(--border-radius-xl, 0.75rem);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.single-post__featured-media img {
width: 100%;
height: auto;
display: block;
}
.single-post__content {
font-size: 1.05rem;
line-height: 1.8;
color: #374151; font-family: var(--font-family-base);
}
.single-post__content p {
margin-bottom: 1.5rem;
}
.single-post__content h2 {
font-size: 1.75rem;
font-weight: 700;
margin-top: 2.5rem;
margin-bottom: 1.25rem;
color: var(--color-txt-3);
line-height: 1.3;
}
.single-post__content h3 {
font-size: 1.4rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--color-txt-3);
line-height: 1.3;
}
.single-post__content blockquote {
border-left: 4px solid var(--color-primary);
padding: 1rem 1.5rem;
margin: 2rem 0;
background: var(--color-fondo-1);
font-style: italic;
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
font-size: 1.15rem;
color: var(--color-txt-4);
}
.single-post__content ul,
.single-post__content ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.single-post__content li {
margin-bottom: 0.5rem;
}
.single-post__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-fondo-2);
}
.single-post__tag {
display: inline-block;
background: var(--color-fondo-1);
color: var(--color-txt-4);
padding: 0.35rem 0.85rem;
border-radius: var(--border-radius-md);
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
transition: all var(--transition-fast);
}
.single-post__tag:hover {
background: var(--color-primary);
color: #ffffff;
} .blog-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.blog-widget {
background: var(--color-fondo-1, #f4ecd0);
border-radius: var(--border-radius-xl, 0.75rem);
padding: 1.75rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-fondo-2);
}
.blog-widget__title {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-txt-3);
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--color-fondo-2);
position: relative;
}
.blog-widget__title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 2.5rem;
height: 2px;
background-color: var(--color-primary);
} .widget-author {
text-align: center;
}
.widget-author__avatar {
width: 5.5rem;
height: 5.5rem;
border-radius: var(--border-radius-full);
object-fit: cover;
margin: 0 auto 1rem;
border: 3px solid var(--color-fondo-2);
}
.widget-author__name {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-txt-3);
margin-bottom: 0.5rem;
}
.widget-author__bio {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.6;
} .widget-recent-posts {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.widget-recent-post-item {
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
}
.widget-recent-post-item__media {
width: 4rem;
height: 4rem;
border-radius: var(--border-radius-md);
overflow: hidden;
flex-shrink: 0;
background-color: var(--color-fondo-2);
}
.widget-recent-post-item__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.widget-recent-post-item__content {
min-width: 0;
}
.widget-recent-post-item__title {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-txt-3);
line-height: 1.3;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.widget-recent-post-item:hover .widget-recent-post-item__title {
color: var(--color-primary);
}
.widget-recent-post-item__date {
font-size: 0.75rem;
color: var(--color-text-muted);
} .widget-categories-list {
list-style: none;
padding: 0;
margin: 0;
}
.widget-categories-item {
margin-bottom: 0.75rem;
}
.widget-categories-item:last-child {
margin-bottom: 0;
}
.widget-categories-link {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--color-txt-3);
text-decoration: none;
padding: 0.35rem 0;
transition: color var(--transition-fast);
}
.widget-categories-link:hover {
color: var(--color-primary);
}
.widget-categories-count {
background: var(--color-fondo-1);
color: var(--color-txt-4);
font-size: 0.75rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: var(--border-radius-full);
}