/* --- CONFIG & RESET --- */
:root { --simple-gris: #343434; --simple-dark-bg: #2F3C44; --simple-celeste: #0097D6; --simple-light: #ffffff; --header-bg: var(--simple-gris); --header-text: #ffffff; --header-text-soft: rgba(255,255,255,0.85); --header-text-soft2: var(--simple-celeste); }
html, body { height: 100%; margin: 0; padding: 0!important; overflow-x: hidden; font-family: 'Inter', sans-serif; font-size: 14px; color: #333; display: flex; flex-direction: column; background-color: var(--simple-light); }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; font-size: 0.85rem; padding: 2rem 0; color: rgba(0,0,0,.5); text-align: center; background-color: #f8f9fa; border-top: 1px solid rgba(0,0,0,0.05); }

/* --- HEADER & NAV --- */
.site-header { position: sticky; top: 0; z-index: 1030; background-color: var(--header-bg); padding: 0.15rem 0; transition: all 0.3s ease; }
.site-header .container { display: flex!important; align-items: center!important; justify-content: space-between!important; flex-wrap: wrap; }
.navbar-brand { display: flex!important; align-items: center!important; margin: 0!important; }
.custom-logo-wrapper img { max-width: 180px; max-height: 50px; width: auto; height: auto; display: block; }
.header-title { font-size: 1.2rem!important; font-weight: 900; color: var(--header-text)!important; margin: 0; letter-spacing: -1px; line-height: 1; }
.header-subtitle { font-size: 0.7rem; text-transform: uppercase; color: var(--header-text-soft2)!important; opacity: 0.75; }
.navbar-toggler { border: 0!important; padding: 0; box-shadow: none!important; }
.navbar-nav .nav-link { color: var(--header-text)!important; font-weight: 500; padding: 0.6rem 1rem!important; transition: 0.2s; }
.navbar-nav .nav-link:hover { background: rgba(255,255,255,0.12); border-radius: 6px; }
.navbar-nav .nav-link.active, .navbar-nav .current-menu-item > .nav-link { color: var(--simple-celeste)!important; background: rgba(255,255,255,0.05); border-radius: 6px; }
.nav-link.d-flex { gap:2px; line-height: 1; }
.nav-link i.bi { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; }
.nav-link span { display: inline-block; padding-top: 1px; }

/* --- SINGLE CONTENT & EXPAND --- */
.entry-title-custom { font-size: 1.8rem; font-weight: 900; letter-spacing: -1.2px; color: var(--simple-gris); margin-bottom: 1.5rem; }
.entry-content-custom { font-size: 14px; line-height: 1.4; color: #4a4a4a; }
.entry-content-custom p, .entry-content-custom li, .justify-text { text-align: justify; text-justify: inter-word; margin-bottom: 1rem; }
.entry-content-custom .has-text-align-center { text-align: center!important; }
.entry-content-custom .has-text-align-right { text-align: right!important; }
.entry-content-custom .has-text-align-left { text-align: left!important; }
.content-single-centered { max-width: 600px; margin: 1rem auto; }
.rounded-image { border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); display: block; width: 100%; }
.mobile-expand-wrapper.image-collapsed { max-height: 30vh; overflow: hidden; position: relative; cursor: pointer; transition: max-height 0.6s ease-in-out; }
.mobile-expand-wrapper.image-expanded { max-height: 1000px; }
.image-collapsed .expand-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: linear-gradient(transparent, rgba(0,0,0,0.5)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; color: white; font-weight: bold; }
.image-expanded .expand-overlay { display: none; }

/* --- CARDS & TORNEOS --- */
.ratio-9-16 { aspect-ratio: 9/16; }
.story-card { position: relative; background: #000; border-radius: 12px; overflow: hidden; transition: 0.4s; cursor: pointer; border: 1px solid transparent; }
.story-img-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: 0.6s; background-color: #f0f0f0; opacity: 0; }
.story-img-bg.loaded { opacity: 1; }

/* Ajuste de tamaño en mobile */
.story-content-wrapper { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%); transition: 0.4s; pointer-events: none; }
.story-text-data { width: 100%; }
.story-text-data h2 { font-size: 1.4rem!important; line-height: 1.2; }
/* En escritorio volvemos a un tamaño más sutil si lo prefieres */
@media (min-width: 768px) { 
    .story-content-wrapper { padding: .8rem; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 70%); } 
    .story-text-data h2 { font-size: 1rem!important; }
	.pulse-badge { font-size: 0.7rem; }
}
.story-card:hover { border-color: #D4AF37; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3); }
.stretched-link::after { position: absolute; inset: 0; z-index: 10; content: ""; }
.pulse-badge { background: linear-gradient(135deg, #D4AF37, #F9E498, #B8860B)!important; color: #000!important; font-size: 0.9rem; animation: pulse-gold 2s infinite; border: none; padding: 4px 1.2em; display: inline-block; }

/* --- SKELETONS & ANIMATIONS --- */
.skeleton-card { background-color: #e9ecef; border-radius: 12px; overflow: hidden; position: relative; border: none; }
.skeleton-card::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: shimmer 1.5s infinite ease-in-out; }
.skeleton-line { background: rgba(0,0,0,0.05); border-radius: 4px; position: relative; z-index: 2; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } }

/* --- BUTTONS --- */
.btn-whatsapp { background-color: #25d366!important; }
.btn-whatsapp::before { content: "\F618"; font-family: "bootstrap-icons"; margin-right: 8px; font-weight: normal; }
.btn-whatsapp:hover { background-color: var(--simple-dark-bg)!important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* --- RESPONSIVE --- */
@media (min-width: 992px) { .site-header .container { flex-wrap: nowrap; } .navbar-collapse { width: auto!important; display: flex!important; } .navbar-nav { margin-left: auto!important; } }
@media (max-width: 991.98px) { .navbar-brand { max-width: 70%!important; order: 1; } .navbar-toggler { order: 2; } .navbar-collapse { order: 3; width: 100%; background-color: var(--header-bg); filter: brightness(95%); padding: 0.5rem; margin-top: 0.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); } .custom-logo-wrapper img { max-width: 140px; max-height: 40px; } }
@media (min-width: 768px) { .sticky-md-top { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; } }