*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{--atl-blue:var(--accent);--paper:#ffffff;--ink:#111827;--muted:#5f6675;--line:rgba(17,24,39,.10)}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f5f8;color:var(--ink);line-height:1.55}
.container{width:min(1120px,calc(100% - 32px));margin:0 auto}
a{color:inherit}img{max-width:100%;display:block}
.top-stripe{height:6px;background:linear-gradient(90deg,var(--atl-blue) 0 18%,#fff 18% 34%,var(--primary) 34% 52%,#fff 52% 68%,var(--primary) 68% 100%)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid rgba(39,51,107,.15)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand strong{display:block;font-size:1rem;line-height:1.1;color:#0f173d}
.brand small{display:block;color:#596071;font-size:.8rem}
.brand-mark{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#ad1024);color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 8px 18px rgba(177,16,36,.22);border:2px solid #fff;outline:2px solid rgba(39,51,107,.16)}
.brand-logo{width:48px;height:48px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid rgba(39,51,107,.14)}
.main-nav{display:flex;align-items:center;gap:6px}.main-nav a{text-decoration:none;padding:9px 12px;border-radius:8px;color:#263044;font-weight:700;font-size:.92rem}.main-nav a:hover,.main-nav a.is-active{background:rgba(215,25,32,.10);color:var(--primary)}
.nav-toggle{display:none;border:1px solid rgba(39,51,107,.15);background:#fff;border-radius:8px;padding:9px;box-shadow:0 4px 14px rgba(39,51,107,.12)}.nav-toggle span{display:block;width:22px;height:2px;background:#17215a;margin:4px 0}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#202b68 0%,#1d255b 52%,#c9152a 100%);color:#fff;border-bottom:8px solid #fff}
.hero:after{content:"";position:absolute;top:-30%;right:-16%;width:44%;height:160%;background:linear-gradient(90deg,rgba(255,255,255,.18) 0 18%,transparent 18% 31%,rgba(215,25,32,.42) 31% 53%,transparent 53% 66%,rgba(255,255,255,.18) 66% 78%,transparent 78%);transform:skewX(-13deg);pointer-events:none;opacity:.95}
.hero.has-image{background-size:cover;background-position:center}.hero.has-image:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,28,72,.82),rgba(20,28,72,.58),rgba(201,21,42,.34));z-index:0}.hero.has-image:after{z-index:0;opacity:.55}
.hero-content{position:relative;z-index:1;padding:84px 0 74px;width:min(760px,100%)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:7px 12px;font-weight:850;font-size:.85rem;text-transform:uppercase;letter-spacing:.02em}.badge{display:inline-flex;align-items:center;border-radius:6px;padding:6px 10px;font-weight:850;font-size:.82rem}.badge-celebrated{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff}.badge-upcoming{background:#fff;color:var(--primary)}.badge-draft,.badge-archived{background:#eee;color:#333}
.hero h1{font-size:clamp(2.25rem,6vw,4.8rem);line-height:.98;margin:18px 0 14px;letter-spacing:-.05em;text-shadow:0 2px 0 rgba(0,0,0,.12)}.hero .subtitle{font-size:clamp(1.1rem,2.3vw,1.55rem);margin:0 0 18px;color:rgba(255,255,255,.94);font-weight:700}.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.meta-pill{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:10px 13px;color:#fff}
.hero-actions,.section-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:12px 18px;font-weight:850;text-decoration:none;cursor:pointer;transition:.15s transform,.15s box-shadow}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 20px rgba(215,25,32,.22)}.btn-light{background:#fff;color:#121a3f}.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.50);color:#fff}.btn-secondary{background:var(--atl-blue);color:#fff}
.section{padding:58px 0}.section-tight{padding:38px 0}.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-title h2{font-size:clamp(1.55rem,3vw,2.25rem);letter-spacing:-.03em;line-height:1.05;margin:0;color:#10183c}.section-title p{margin:8px 0 0;color:var(--muted);max-width:620px}.card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(31,42,104,.06)}.summary-card{padding:28px;border-top:4px solid var(--primary)}.summary-card p:first-child{margin-top:0}.summary-card p:last-child{margin-bottom:0}.grid{display:grid;gap:18px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.highlight-card{padding:22px;position:relative;overflow:hidden}.highlight-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--primary),var(--atl-blue))}.highlight-icon{width:42px;height:42px;border-radius:8px;background:rgba(215,25,32,.10);color:var(--primary);display:grid;place-items:center;font-weight:900;margin-bottom:12px}.highlight-card h3{margin:0 0 8px;color:#10183c}.highlight-card p{margin:0;color:var(--muted)}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.photo-card{position:relative;overflow:hidden;border-radius:8px;background:#ddd;aspect-ratio:1/1;box-shadow:0 8px 18px rgba(31,42,104,.08);border:1px solid rgba(39,51,107,.10)}.photo-card.large{grid-column:span 2;grid-row:span 2}.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.photo-card:hover img{transform:scale(1.04)}.photo-caption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(20,28,72,.82));font-weight:750}.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.partner-card{padding:20px;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-top:4px solid var(--atl-blue)}.partner-logo{max-height:72px;object-fit:contain;margin:auto}.partner-card h3{font-size:1rem;margin:0;color:#10183c}.partner-card p{font-size:.9rem;color:var(--muted);margin:0}.empty-state{padding:28px;border-radius:8px;background:#fff;border:1px dashed rgba(39,51,107,.25);color:var(--muted)}.timeline{display:grid;gap:12px}.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:18px}.timeline-time{font-weight:900;color:var(--primary)}
.form{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field label{display:block;font-weight:800;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;border:1px solid rgba(39,51,107,.18);border-radius:8px;padding:12px 14px;font:inherit;background:#fff}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid rgba(215,25,32,.18);border-color:rgba(215,25,32,.5)}.field textarea{min-height:140px;resize:vertical}.flash{margin-top:18px;padding:14px 16px;border-radius:8px;font-weight:750}.flash-success{background:#e8f8ee;color:#17683b}.flash-error{background:#fff0f0;color:#9d1c1c}.page-header{padding:52px 0 24px;border-bottom:1px solid rgba(39,51,107,.08);background:linear-gradient(180deg,#fff,#f4f5f8)}.page-header h1{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em;line-height:1;margin:0 0 12px;color:#10183c}.page-header p{margin:0;color:var(--muted);max-width:720px}.content-page{padding:28px}.content-page h2,.content-page h3{letter-spacing:-.02em}.events-list{display:grid;gap:16px}.event-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:20px;border-left:4px solid var(--primary)}.event-row h2{margin:0 0 6px;color:#10183c}.event-row p{margin:0;color:var(--muted)}.site-footer{background:#121a3f;color:#ddd;margin-top:60px;padding:34px 0;border-top:6px solid var(--primary)}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.site-footer a{color:#fff}.site-footer p{margin:.35rem 0;color:#d9deef}.admin-link{opacity:.45;font-size:.85rem}.credits-strip{background:#fff;border-top:1px solid rgba(39,51,107,.12);padding:12px 0;color:#667085;font-size:.9rem}
@media(max-width:900px){.nav-toggle{display:block}.main-nav{display:none;position:absolute;left:16px;right:16px;top:76px;background:#fff;border:1px solid rgba(39,51,107,.12);border-radius:10px;padding:10px;box-shadow:0 18px 40px rgba(31,42,104,.14);flex-direction:column;align-items:stretch}.main-nav.is-open{display:flex}.main-nav a{border-radius:7px}.hero-content{padding:62px 0}.hero:after{right:-30%;width:62%;opacity:.55}.grid-3,.grid-4{grid-template-columns:1fr 1fr}.partner-grid{grid-template-columns:1fr 1fr}.photo-grid{grid-template-columns:repeat(2,1fr)}.photo-card.large{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}.footer-grid{grid-template-columns:1fr}.event-row{grid-template-columns:1fr}.timeline-item{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
@media(max-width:560px){.container{width:min(100% - 24px,1120px)}.brand small{display:none}.grid-3,.grid-4,.partner-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:1fr}.photo-card,.photo-card.large{grid-column:auto;grid-row:auto;aspect-ratio:4/3}.hero-actions .btn,.section-actions .btn{width:100%}.section{padding:42px 0}.section-title{display:block}.header-inner{padding:12px 0}.hero h1{letter-spacing:-.04em}}
.mls-cta-banner {
background: linear-gradient(135deg, #27336b 0%, #1c244d 55%, #d71920 100%);
color: #ffffff;
padding: 48px 20px;
margin-top: 56px;
border-top: 4px solid #d71920;
}
.mls-cta-banner__inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.mls-cta-banner__content {
flex: 1 1 540px;
}
.mls-cta-banner__eyebrow {
display: inline-block;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(255,255,255,0.14);
color: #ffffff;
padding: 6px 10px;
border: 1px solid rgba(255,255,255,0.18);
margin-bottom: 14px;
}
.mls-cta-banner__content h2 {
margin: 0 0 12px;
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
line-height: 1.15;
color: #ffffff;
}
.mls-cta-banner__content p {
margin: 0;
font-size: 1rem;
line-height: 1.65;
color: rgba(255,255,255,0.9);
max-width: 760px;
}
.mls-cta-banner__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.mls-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
text-decoration: none;
font-weight: 700;
border: 1px solid transparent;
transition: all 0.2s ease;
}
.mls-cta-btn--primary {
background: #ffffff;
color: #27336b;
border-color: #ffffff;
}
.mls-cta-btn--primary:hover {
background: #f2f2f2;
color: #1c244d;
}
.mls-cta-btn--secondary {
background: transparent;
color: #ffffff;
border-color: rgba(255,255,255,0.45);
}
.mls-cta-btn--secondary:hover {
background: rgba(255,255,255,0.08);
border-color: #ffffff;
}
@media (max-width: 768px) {
.mls-cta-banner {
padding: 36px 18px;
}
.mls-cta-banner__inner {
gap: 24px;
}
.mls-cta-banner__actions {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.mls-cta-btn {
width: 100%;
}
}
/* V7 - Página inicial configurable */
.home-hero .hero-content{width:min(860px,100%)}
.home-hero-summary{max-width:780px;font-size:1.02rem;color:rgba(255,255,255,.96)}
.home-hero-summary p{margin:.5rem 0}
.home-partners-band{background:#fff;border-bottom:1px solid rgba(39,51,107,.10);border-top:1px solid rgba(39,51,107,.08)}
.compact-title{margin-bottom:18px}
.partner-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.partner-strip-card{background:#fff;border:1px solid rgba(39,51,107,.14);border-top:4px solid var(--primary);min-height:118px;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;box-shadow:0 8px 20px rgba(31,42,104,.05)}
.partner-strip-card img{max-width:120px;max-height:62px;object-fit:contain}.partner-strip-card strong{font-size:.92rem;color:#10183c}.home-description-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:22px;align-items:stretch}.home-main-text{min-height:100%}.home-image-panel{position:relative;min-height:330px;background:#fff;border:1px solid rgba(39,51,107,.12);box-shadow:0 10px 24px rgba(31,42,104,.06);overflow:hidden}.home-image-panel img{width:100%;height:100%;object-fit:cover}.home-image-placeholder{height:100%;min-height:330px;display:grid;place-items:center;text-align:center;color:#657087;background:linear-gradient(135deg,#eef2ff,#fff)}.home-image-placeholder strong{display:block;font-size:1.25rem;color:#10183c}.home-image-placeholder span{display:block;margin-top:6px}.home-carousel{position:relative;background:#fff;border:1px solid rgba(39,51,107,.12);box-shadow:0 10px 24px rgba(31,42,104,.06);overflow:hidden}.home-carousel-track{position:relative;min-height:420px}.home-carousel-slide{display:none;position:absolute;inset:0;text-decoration:none;color:#fff;background:#11183f}.home-carousel-slide.is-active{display:block}.home-carousel-slide img{width:100%;height:100%;object-fit:cover}.home-carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:58px 28px 24px;background:linear-gradient(transparent,rgba(15,23,61,.88));display:grid;gap:6px}.home-carousel-caption strong{font-size:clamp(1.25rem,2.3vw,2rem);line-height:1.08}.home-carousel-caption small{font-size:1rem;color:rgba(255,255,255,.9)}.home-carousel-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:8px;justify-content:center;z-index:5}.home-carousel-dots button{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.35);cursor:pointer}.home-carousel-dots button.is-active{background:#fff;transform:scale(1.25)}.home-event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.home-event-card{overflow:hidden;display:flex;flex-direction:column}.home-event-image{display:block;aspect-ratio:16/9;background:#d9deef;overflow:hidden}.home-event-image img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.home-event-card:hover .home-event-image img{transform:scale(1.035)}.home-event-body{padding:20px;display:grid;gap:8px;flex:1}.home-event-body h3{margin:0;font-size:1.25rem;line-height:1.15;color:#10183c}.home-event-body h3 a{text-decoration:none}.home-event-body p{margin:0;color:var(--muted)}.home-event-status{display:inline-flex;width:max-content;border:1px solid rgba(39,51,107,.15);background:#eef2ff;color:#172052;padding:5px 8px;font-size:.78rem;font-weight:850}.home-event-status.badge-celebrated{background:rgba(215,25,32,.09);color:var(--primary)}.text-link{color:var(--primary);font-weight:850;text-decoration:none}.text-link:hover{text-decoration:underline}
@media(max-width:900px){.partner-strip{grid-template-columns:repeat(2,1fr)}.home-description-grid{grid-template-columns:1fr}.home-image-panel{min-height:280px}.home-event-grid{grid-template-columns:1fr 1fr}.home-carousel-track{min-height:340px}}
@media(max-width:560px){.partner-strip,.home-event-grid{grid-template-columns:1fr}.home-carousel-track{min-height:280px}.home-carousel-caption{padding:46px 18px 22px}.home-partners-band .section-title .btn,.home-events-section .section-title .btn{margin-top:14px;width:100%}}
/* V8 - Home de evento social + carrusel de carteles verticales */
.home-hero-main {
min-height: 560px;
display: flex;
align-items: center;
background-position: center;
background-size: cover;
border-bottom: 6px solid #ffffff;
}
.home-hero-main.has-image::before {
background:
linear-gradient(90deg, rgba(39,51,107,.88) 0%, rgba(39,51,107,.82) 42%, rgba(215,25,32,.58) 100%),
linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
}
.home-hero-main::after {
content: "";
position: absolute;
inset: 0 0 0 auto;
width: min(34vw, 420px);
background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.12) 28%, rgba(215,25,32,.22) 100%);
transform: skewX(-12deg);
transform-origin: bottom right;
pointer-events: none;
}
.home-hero-main .hero-content {
position: relative;
z-index: 2;
width: min(820px, 100%);
}
.home-hero-main h1 {
max-width: 780px;
}
.eyebrow-blue {
background: rgba(39,51,107,.08);
border-color: rgba(39,51,107,.18);
color: #172052;
}
.home-partners-band {
position: relative;
z-index: 4;
background: #ffffff;
border-top: 4px solid #d71920;
border-bottom: 1px solid rgba(39,51,107,.10);
}
.partner-strip-card {
border-radius: 6px;
}
.home-description-grid--balanced {
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 430px);
}
.home-main-text,
.home-image-panel,
.home-carousel,
.home-event-card,
.card {
border-radius: 8px;
}
.home-image-panel--contain {
background: #ffffff;
min-height: 360px;
}
.home-image-panel--contain img {
object-fit: contain;
padding: 12px;
background: #ffffff;
}
.home-posters-section {
background: linear-gradient(180deg, #f6f7fb 0%, #ffffff 100%);
border-top: 1px solid rgba(39,51,107,.08);
border-bottom: 1px solid rgba(39,51,107,.08);
padding-top: 52px;
padding-bottom: 56px;
}
.home-posters-layout {
display: grid;
grid-template-columns: minmax(260px, 0.78fr) minmax(320px, 1.22fr);
gap: 34px;
align-items: center;
}
.home-posters-copy h2 {
margin: 12px 0 14px;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.04;
color: #10183c;
letter-spacing: -0.045em;
}
.home-posters-copy p {
color: #46516a;
line-height: 1.72;
font-size: 1.02rem;
}
.home-posters-copy .small {
padding-left: 14px;
border-left: 4px solid #d71920;
color: #5f687d;
}
.home-posters-frame {
display: flex;
justify-content: center;
}
.home-poster-carousel {
width: min(620px, 100%);
background: linear-gradient(135deg, #27336b, #11183f 55%, #d71920);
border: 1px solid rgba(39,51,107,.22);
border-radius: 8px;
box-shadow: 0 22px 48px rgba(17,24,63,.16);
padding: clamp(14px, 2.2vw, 22px);
overflow: visible;
}
.home-poster-track {
position: relative;
min-height: clamp(520px, 62vw, 720px);
overflow: hidden;
border-radius: 6px;
}
.home-poster-slide {
position: absolute;
inset: 0;
display: none;
grid-template-rows: 1fr auto;
gap: 12px;
color: #10183c;
background: #ffffff;
padding: clamp(10px, 2vw, 18px);
text-decoration: none;
border: 1px solid rgba(255,255,255,.44);
}
.home-poster-slide.is-active {
display: grid;
}
.home-poster-art {
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(90deg, rgba(39,51,107,.05), transparent 22%, transparent 78%, rgba(215,25,32,.05)),
#ffffff;
border: 1px solid rgba(39,51,107,.10);
border-radius: 4px;
overflow: hidden;
}
.home-poster-art img,
.home-poster-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #ffffff;
}
.home-poster-caption {
position: static;
display: grid;
gap: 4px;
padding: 12px 12px 4px;
color: #10183c;
background: transparent;
}
.home-poster-caption strong {
color: #10183c;
font-size: clamp(1.1rem, 2vw, 1.45rem);
line-height: 1.15;
}
.home-poster-caption small {
color: #546078;
font-size: .96rem;
line-height: 1.45;
}
.home-carousel-arrow {
position: absolute;
top: 50%;
z-index: 8;
transform: translateY(-50%);
width: 42px;
height: 48px;
border: 0;
background: rgba(255,255,255,.94);
color: #172052;
box-shadow: 0 10px 28px rgba(17,24,63,.22);
font-size: 2rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
}
.home-carousel-arrow:hover {
background: #d71920;
color: #ffffff;
}
.home-carousel-arrow--prev { left: -18px; }
.home-carousel-arrow--next { right: -18px; }
.home-poster-dots {
position: static;
padding: 14px 0 0;
}
.home-poster-dots button {
width: 12px;
height: 12px;
border-radius: 999px;
border-color: rgba(255,255,255,.92);
background: rgba(255,255,255,.36);
}
.home-poster-dots button.is-active {
background: #ffffff;
}
.home-poster-empty {
width: min(520px, 100%);
min-height: 560px;
display: grid;
place-items: center;
align-content: center;
gap: 10px;
text-align: center;
padding: 28px;
color: #172052;
background: #ffffff;
border: 2px dashed rgba(39,51,107,.28);
border-radius: 8px;
}
.home-poster-empty strong {
font-size: 1.35rem;
}
.home-event-card {
border-top: 4px solid #27336b;
}
.home-event-card:nth-child(even) {
border-top-color: #d71920;
}
@media(max-width: 980px) {
.home-hero-main { min-height: 470px; }
.home-posters-layout { grid-template-columns: 1fr; }
.home-posters-copy { max-width: 760px; }
.home-poster-carousel { width: min(560px, 100%); }
.home-poster-track { min-height: clamp(500px, 100vw, 680px); }
}
@media(max-width: 640px) {
.home-hero-main { min-height: 420px; }
.home-hero-main::after { display: none; }
.home-posters-section { padding-top: 36px; padding-bottom: 42px; }
.home-posters-layout { gap: 22px; }
.home-poster-carousel { padding: 10px; }
.home-poster-track { min-height: 520px; }
.home-carousel-arrow { width: 36px; height: 42px; font-size: 1.7rem; }
.home-carousel-arrow--prev { left: -8px; }
.home-carousel-arrow--next { right: -8px; }
}
/* V10 - Eventos: carrusel destacado, galería masiva y lightbox */
.event-carousel-section {
background: linear-gradient(180deg, #ffffff 0%, #f4f5f8 100%);
border-top: 1px solid rgba(39,51,107,.08);
border-bottom: 1px solid rgba(39,51,107,.08);
}
.event-photo-carousel {
position: relative;
background: linear-gradient(135deg, #27336b, #11183f 62%, #d71920);
border: 1px solid rgba(39,51,107,.22);
box-shadow: 0 18px 42px rgba(17,24,63,.16);
padding: clamp(12px, 2vw, 18px);
overflow: visible;
}
.event-photo-carousel-track {
position: relative;
min-height: clamp(420px, 55vw, 620px);
background: #ffffff;
overflow: hidden;
border: 1px solid rgba(255,255,255,.44);
}
.event-photo-slide {
position: absolute;
inset: 0;
display: none;
margin: 0;
background: #ffffff;
}
.event-photo-slide.is-active { display: block; }
.event-photo-slide img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #ffffff;
}
.event-photo-slide figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: grid;
gap: 3px;
padding: 48px 20px 18px;
color: #ffffff;
background: linear-gradient(transparent, rgba(15,23,61,.86));
}
.event-photo-slide figcaption strong { font-size: 1.25rem; line-height: 1.1; }
.event-photo-slide figcaption span { color: rgba(255,255,255,.9); }
.event-carousel-arrow {
position: absolute;
top: 50%;
z-index: 8;
transform: translateY(-50%);
width: 42px;
height: 48px;
border: 0;
background: rgba(255,255,255,.94);
color: #172052;
box-shadow: 0 10px 28px rgba(17,24,63,.22);
font-size: 2rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
}
.event-carousel-arrow:hover { background: #d71920; color: #ffffff; }
.event-carousel-arrow--prev { left: -14px; }
.event-carousel-arrow--next { right: -14px; }
.event-carousel-dots {
display: flex;
gap: 8px;
justify-content: center;
padding-top: 14px;
}
.event-carousel-dots button {
width: 12px;
height: 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.92);
background: rgba(255,255,255,.36);
cursor: pointer;
}
.event-carousel-dots button.is-active { background: #ffffff; transform: scale(1.2); }
.photo-event-filter { margin-bottom: 22px; }
.photo-grid-lightbox .photo-card {
border: 0;
cursor: zoom-in;
appearance: none;
padding: 0;
text-align: left;
}
.photo-grid-lightbox .photo-card:focus-visible {
outline: 3px solid rgba(215,25,32,.45);
outline-offset: 3px;
}
.photo-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 28px;
background: rgba(5,10,30,.92);
}
.photo-lightbox.is-open { display: flex; }
.photo-lightbox__figure {
margin: 0;
width: min(1120px, 100%);
max-height: calc(100vh - 56px);
display: grid;
gap: 12px;
place-items: center;
}
.photo-lightbox__image {
max-width: 100%;
max-height: calc(100vh - 130px);
object-fit: contain;
background: #ffffff;
box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.photo-lightbox__caption {
color: rgba(255,255,255,.92);
text-align: center;
min-height: 24px;
font-weight: 700;
}
.photo-lightbox__button {
position: absolute;
border: 1px solid rgba(255,255,255,.35);
background: rgba(255,255,255,.12);
color: #ffffff;
cursor: pointer;
font-weight: 900;
}
.photo-lightbox__button:hover { background: #d71920; border-color: #d71920; }
.photo-lightbox__close {
top: 18px;
right: 18px;
width: 44px;
height: 44px;
font-size: 1.45rem;
}
.photo-lightbox__prev,
.photo-lightbox__next {
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 62px;
font-size: 2.3rem;
}
.photo-lightbox__prev { left: 18px; }
.photo-lightbox__next { right: 18px; }
@media(max-width: 700px) {
.event-photo-carousel-track { min-height: 360px; }
.event-carousel-arrow { width: 36px; height: 42px; font-size: 1.7rem; }
.event-carousel-arrow--prev { left: -8px; }
.event-carousel-arrow--next { right: -8px; }
.photo-lightbox { padding: 14px; }
.photo-lightbox__prev,
.photo-lightbox__next { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; font-size: 2rem; }
.photo-lightbox__prev { left: 18px; }
.photo-lightbox__next { right: 18px; }
.photo-lightbox__image { max-height: calc(100vh - 160px); }
}
/* V19 - Limpieza definitiva de estilos para /eventos y /evento */
.events-landing {
position: relative;
overflow: hidden;
color: #ffffff;
background:
linear-gradient(90deg, rgba(18,26,63,.94), rgba(39,51,107,.88) 54%, rgba(215,25,32,.82)),
repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 70px, transparent 70px 140px);
border-bottom: 6px solid #ffffff;
}
.events-landing::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0 58%, rgba(255,255,255,.18) 58% 70%, transparent 70%);
transform: skewX(-10deg);
transform-origin: center;
pointer-events: none;
}
.events-landing__inner {
position: relative;
z-index: 1;
padding: clamp(46px, 6vw, 82px) 0 clamp(34px, 5vw, 64px);
}
.events-landing__eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: 16px;
padding: 7px 12px;
color: #ffffff;
font-size: .82rem;
font-weight: 950;
letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,.36);
background: rgba(255,255,255,.12);
border-radius: 4px;
}
.events-landing h1 {
margin: 0 0 12px;
color: #ffffff;
font-size: clamp(2.3rem, 6vw, 4.7rem);
line-height: .96;
letter-spacing: -.055em;
}
.events-landing p {
max-width: 720px;
margin: 0;
color: rgba(255,255,255,.92);
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 650;
}
.events-page-section {
background: linear-gradient(180deg, #f3f5fa, #ffffff 64%);
}
.events-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.event-list-card {
display: grid;
grid-template-columns: minmax(220px, .82fr) minmax(0, 1.18fr);
min-height: 260px;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(39,51,107,.14);
border-top: 5px solid var(--primary, #d71920);
border-radius: 8px;
box-shadow: 0 18px 42px rgba(17,24,63,.10);
}
.event-list-card:nth-child(even) {
border-top-color: var(--atl-blue, #27336b);
}
.event-list-card__image {
position: relative;
display: block;
min-height: 100%;
overflow: hidden;
background: linear-gradient(135deg, #27336b, #d71920);
text-decoration: none;
}
.event-list-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 56%, rgba(14,20,51,.58));
pointer-events: none;
}
.event-list-card__image img {
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
transition: transform .25s ease;
}
.event-list-card:hover .event-list-card__image img {
transform: scale(1.035);
}
.event-list-card__placeholder {
min-height: 260px;
display: grid;
place-items: center;
padding: 24px;
color: #ffffff;
font-weight: 950;
text-align: center;
text-transform: uppercase;
letter-spacing: .04em;
}
.event-list-card__body {
display: flex;
flex-direction: column;
padding: 24px;
}
.event-list-card__topline {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 13px;
}
.event-list-card__status,
.event-list-card__type {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
font-size: .78rem;
font-weight: 950;
line-height: 1;
text-transform: uppercase;
border-radius: 4px;
}
.event-list-card__status {
color: #ffffff;
background: var(--primary, #d71920);
border: 1px solid var(--primary, #d71920);
}
.event-list-card__status.badge-upcoming {
color: #ffffff;
background: var(--atl-blue, #27336b);
border-color: var(--atl-blue, #27336b);
}
.event-list-card__type {
color: var(--atl-blue, #27336b);
background: #eef1f7;
border: 1px solid #cbd5e1;
}
.event-list-card h2 {
margin: 0 0 8px;
color: #10183c;
font-size: clamp(1.35rem, 2vw, 1.85rem);
line-height: 1.07;
letter-spacing: -.035em;
}
.event-list-card h2 a {
color: inherit;
text-decoration: none;
}
.event-list-card h2 a:hover {
color: var(--primary, #d71920);
}
.event-list-card__subtitle {
margin: 0 0 12px;
color: #111827;
font-weight: 750;
}
.event-list-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
.event-list-card__meta span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 10px;
color: #27336b;
font-size: .88rem;
font-weight: 850;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 4px;
}
.event-list-card__summary {
margin: 0;
color: #4b5567;
line-height: 1.65;
}
.event-list-card__actions {
margin-top: auto;
padding-top: 18px;
}
.event-detail-head-v19 {
background: linear-gradient(180deg, #f3f5fa, #edf1f8);
padding: clamp(22px, 3vw, 38px) 0 12px;
}
.event-title-card-v19 {
width: min(1120px, 100%);
margin: 0 auto;
padding: clamp(22px, 3vw, 34px);
background: #ffffff;
color: #10183c;
border: 1px solid rgba(39,51,107,.14);
border-left: 6px solid var(--primary, #d71920);
border-radius: 8px;
box-shadow: 0 16px 38px rgba(17,24,63,.10);
}
.event-org-v19 {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
margin-bottom: 15px;
padding: 8px 12px;
color: #ffffff;
background: var(--atl-blue, #27336b);
border-left: 5px solid var(--primary, #d71920);
border-radius: 4px;
font-size: .82rem;
font-weight: 950;
letter-spacing: .04em;
line-height: 1.12;
text-transform: uppercase;
}
.event-title-card-v19 h1 {
margin: 0 0 10px;
color: #10183c;
font-size: clamp(2.1rem, 5vw, 4.4rem);
line-height: .98;
letter-spacing: -.055em;
}
.event-subtitle-v19 {
margin: 0;
color: #111827;
font-size: clamp(1.05rem, 1.45vw, 1.28rem);
font-weight: 800;
}
.event-meta-v19 {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.event-meta-pill-v19 {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 14px;
color: var(--atl-blue, #27336b) !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 5px;
box-shadow: 0 8px 18px rgba(17,24,63,.07);
font-weight: 900;
text-shadow: none !important;
opacity: 1 !important;
}
.event-status-pill-v19 {
color: #ffffff !important;
background: var(--primary, #d71920) !important;
border-color: var(--primary, #d71920) !important;
}
.event-actions-v19 {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.event-actions-v19 .btn {
min-height: 46px;
border-radius: 6px;
font-weight: 950;
}
.event-actions-v19 .btn-light {
color: var(--atl-blue, #27336b);
background: #ffffff;
border: 1px solid #cbd5e1;
box-shadow: 0 8px 18px rgba(17,24,63,.06);
}
.event-cover-banner-section-v19 {
background: #edf1f8;
padding: 14px 0 0;
}
.event-cover-banner-v19 {
width: min(1120px, 100%);
margin: 0 auto;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(39,51,107,.14);
border-top: 5px solid var(--primary, #d71920);
border-radius: 8px;
box-shadow: 0 16px 36px rgba(17,24,63,.10);
}
.event-cover-banner-v19 img {
width: 100%;
height: clamp(230px, 30vw, 360px);
object-fit: cover;
object-position: center center;
}
.event-about-section-v19 {
background: #edf1f8;
padding-top: 22px;
padding-bottom: clamp(38px, 5vw, 62px);
border-bottom: 1px solid rgba(39,51,107,.10);
}
.event-about-card-v19 {
width: min(1120px, 100%);
margin: 0 auto;
padding: clamp(22px, 3vw, 34px);
color: #111827;
background: #ffffff;
border: 1px solid rgba(39,51,107,.14);
border-left: 6px solid var(--atl-blue, #27336b);
border-radius: 8px;
box-shadow: 0 14px 32px rgba(17,24,63,.08);
}
.event-about-card-v19 h2 {
margin: 0 0 16px;
color: #10183c;
font-size: clamp(1.35rem, 2.2vw, 1.9rem);
line-height: 1.1;
letter-spacing: -.03em;
}
.event-about-text-v19 {
max-width: 980px;
color: #111827;
font-size: clamp(1rem, 1.05vw, 1.08rem);
line-height: 1.85;
overflow-wrap: break-word;
}
.event-about-text-v19 p {
margin: 0 0 1rem;
}
.event-about-text-v19 p:last-child {
margin-bottom: 0;
}
.event-about-text-v19 p:first-child {
font-weight: 800;
color: #10183c;
}
.event-carousel-section-v19 {
padding-top: clamp(44px, 5vw, 68px);
}
.event-gallery-section-v19 {
background: #ffffff;
}
.event-gallery-grid-v19 {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 14px !important;
}
.event-gallery-grid-v19 .photo-card {
appearance: none;
-webkit-appearance: none;
position: relative;
display: block;
width: 100%;
padding: 0;
cursor: zoom-in;
overflow: hidden;
aspect-ratio: 1 / 1;
background: #ffffff;
border: 1px solid rgba(39,51,107,.14);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(31,42,104,.10);
}
.event-gallery-grid-v19 .photo-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .22s ease;
}
.event-gallery-grid-v19 .photo-card:hover img {
transform: scale(1.04);
}
.event-gallery-grid-v19 .photo-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 28px 12px 10px;
color: #ffffff;
background: linear-gradient(transparent, rgba(20,28,72,.88));
font-size: .88rem;
font-weight: 850;
text-align: left;
}
.gallery-pagination-v19 {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
padding: 18px;
background: #ffffff;
border: 1px solid rgba(39,51,107,.14);
border-top: 5px solid var(--primary, #d71920);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(31,42,104,.08);
}
.gallery-page-current-v19,
.gallery-page-link-v19,
.gallery-page-number-v19,
.gallery-page-ellipsis-v19 {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 13px;
border-radius: 6px;
font-weight: 900;
line-height: 1;
text-decoration: none;
}
.gallery-page-current-v19 {
color: var(--atl-blue, #27336b);
background: #f4f6fb;
border: 1px solid #cbd5e1;
}
.gallery-page-link-v19 {
color: #ffffff;
background: var(--atl-blue, #27336b);
border: 1px solid var(--atl-blue, #27336b);
}
.gallery-page-link-v19:hover {
color: #ffffff;
background: #1f2859;
}
.gallery-page-numbers-v19 {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.gallery-page-number-v19 {
min-width: 40px;
color: var(--atl-blue, #27336b);
background: #ffffff;
border: 1px solid #cbd5e1;
}
.gallery-page-number-v19.is-active {
color: #ffffff;
background: var(--primary, #d71920);
border-color: var(--primary, #d71920);
}
.gallery-page-ellipsis-v19 {
color: #667085;
padding: 0 4px;
}
.event-partners-section-v19 {
background: linear-gradient(180deg, #ffffff, #f4f6fb);
}
@media (max-width: 980px) {
.events-card-grid {
grid-template-columns: 1fr;
}
.event-list-card {
grid-template-columns: minmax(190px, .75fr) minmax(0, 1.25fr);
}
.event-gallery-grid-v19 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 700px) {
.events-landing__inner {
padding-top: 36px;
}
.event-list-card {
grid-template-columns: 1fr;
}
.event-list-card__image img,
.event-list-card__placeholder {
min-height: 210px;
}
.event-list-card__body {
padding: 20px;
}
.event-title-card-v19,
.event-about-card-v19,
.event-cover-banner-v19,
.gallery-pagination-v19 {
border-radius: 6px;
}
.event-meta-v19 > span,
.event-actions-v19 .btn,
.gallery-page-link-v19,
.gallery-page-current-v19 {
width: 100%;
justify-content: center;
}
.event-cover-banner-v19 img {
height: clamp(190px, 54vw, 280px);
}
.event-gallery-grid-v19 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.gallery-page-numbers-v19 {
width: 100%;
}
}
/* V20 - Plantilla reutilizable: colores 100% desde BBDD */
:root {
--atl-blue: var(--accent);
--paper: var(--surface, #ffffff);
--ink: var(--text, #111827);
--muted: var(--muted, #5f6675);
--line: var(--border, #e2e5ef);
}
body { background: var(--bg, #f4f5f8); color: var(--text, #111827); }
.site-header { background: color-mix(in srgb, var(--header-bg, #ffffff) 96%, transparent); border-bottom-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.top-stripe { background: linear-gradient(90deg, var(--accent) 0 18%, var(--secondary) 18% 34%, var(--primary) 34% 52%, var(--secondary) 52% 68%, var(--primary) 68% 100%); }
.brand strong,
.section-title h2,
.highlight-card h3,
.partner-card h3,
.page-header h1,
.event-row h2,
.home-event-body h3,
.event-detail-title,
.event-card-title { color: var(--text, #111827); }
.brand small,
.section-title p,
.highlight-card p,
.partner-card p,
.page-header p,
.event-row p,
.home-event-body p,
.event-detail-subtitle,
.event-card-summary { color: var(--muted, #5f6675); }
.brand-mark { background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--button-text, #ffffff); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 22%, transparent); }
.brand-logo,
.card,
.summary-card,
.partner-card,
.empty-state,
.content-page,
.home-image-panel,
.home-carousel,
.home-event-card,
.event-card,
.event-detail-card,
.event-detail-summary,
.event-cover-banner,
.event-gallery-card,
.event-pagination a,
.event-pagination span,
.photo-lightbox__image { background: var(--surface, #ffffff); border-color: var(--border, #e2e5ef); border-radius: var(--radius-card, 10px); }
.main-nav a { color: var(--text, #111827); border-radius: var(--radius-button, 8px); }
.main-nav a:hover,
.main-nav a.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.nav-toggle { background: var(--surface, #ffffff); border-color: var(--border, #e2e5ef); border-radius: var(--radius-button, 8px); }
.nav-toggle span { background: var(--accent); }
.hero,
.event-hero-panel,
.page-header-accent { background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000000) 55%, var(--primary) 100%); color: var(--button-text, #ffffff); border-bottom-color: var(--secondary); }
.hero.has-image:before { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 82%, transparent), color-mix(in srgb, var(--accent) 58%, transparent), color-mix(in srgb, var(--primary) 34%, transparent)); }
.eyebrow,
.meta-pill,
.event-meta-pill { border-radius: var(--radius-button, 8px); }
.badge,
.home-event-status { border-radius: var(--radius-button, 8px); }
.btn { border-radius: var(--radius-button, 8px); }
.btn-primary { background: var(--primary); color: var(--button-text, #ffffff); box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 24%, transparent); }
.btn-secondary { background: var(--accent); color: var(--button-text, #ffffff); }
.btn-light { background: var(--surface, #ffffff); color: var(--accent); border: 1px solid var(--border, #e2e5ef); }
.btn-outline { border-color: color-mix(in srgb, var(--button-text, #ffffff) 50%, transparent); color: var(--button-text, #ffffff); }
.card,
.photo-card,
.partner-strip-card,
.home-image-panel,
.home-carousel,
.home-event-card,
.event-card,
.event-detail-card,
.event-cover-banner,
.event-gallery-card { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 8%, transparent); }
.photo-card,
.partner-card,
.partner-strip-card,
.summary-card,
.event-row,
.highlight-card:before { border-color: var(--border, #e2e5ef); }
.summary-card,
.partner-strip-card { border-top-color: var(--primary); }
.partner-card { border-top-color: var(--accent); }
.highlight-icon { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.highlight-card:before { background: linear-gradient(var(--primary), var(--accent)); }
.field input,
.field textarea,
.field select { background: var(--surface, #ffffff); color: var(--text, #111827); border-color: var(--border, #e2e5ef); border-radius: var(--radius-button, 8px); }
.field input:focus,
.field textarea:focus,
.field select:focus { outline-color: color-mix(in srgb, var(--primary) 20%, transparent); border-color: var(--primary); }
.page-header { background: linear-gradient(180deg, var(--surface, #ffffff), var(--bg, #f4f5f8)); border-bottom-color: var(--border, #e2e5ef); }
.site-footer { background: var(--footer-bg, #121a3f); border-top-color: var(--primary); }
.site-footer p { color: color-mix(in srgb, var(--secondary) 82%, var(--muted, #5f6675)); }
.credits-strip { background: var(--surface, #ffffff); border-top-color: var(--border, #e2e5ef); color: var(--muted, #5f6675); }
.mls-cta-banner { background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #000000) 55%, var(--primary) 100%); border-top-color: var(--primary); color: var(--button-text, #ffffff); }
.mls-cta-btn--primary { background: var(--surface, #ffffff); color: var(--accent); border-color: var(--surface, #ffffff); }
.mls-cta-btn--secondary { color: var(--button-text, #ffffff); border-color: color-mix(in srgb, var(--button-text, #ffffff) 45%, transparent); }
.event-pagination a,
.event-pagination span { color: var(--text, #111827); }
.event-pagination .is-active,
.event-pagination a:hover { background: var(--primary); color: var(--button-text, #ffffff); border-color: var(--primary); }
.photo-lightbox__button:hover { background: var(--primary); border-color: var(--primary); }
@media(max-width:900px){
.main-nav { background: var(--surface, #ffffff); border-color: var(--border, #e2e5ef); border-radius: var(--radius-card, 10px); }
}
/* V21 - Ajustes responsive de la página inicial para móvil */
@media (max-width: 700px) {
body {
overflow-x: hidden;
}
.home-hero-main {
min-height: auto;
border-bottom: 5px solid var(--primary);
background-position: center top;
}
.home-hero-main.has-image::before {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent) 76%, transparent) 0%,
color-mix(in srgb, var(--accent) 58%, transparent) 48%,
color-mix(in srgb, var(--primary) 46%, transparent) 100%),
linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.08));
}
.home-hero-main::after {
display: none;
}
.home-hero-main .hero-content {
width: 100%;
padding: 44px 0 38px;
}
.home-hero-main .eyebrow {
max-width: 100%;
white-space: normal;
font-size: .78rem;
line-height: 1.2;
padding: 7px 10px;
}
.home-hero-main h1 {
max-width: 100%;
font-size: clamp(2.35rem, 12vw, 3.2rem);
line-height: .98;
margin: 14px 0 8px;
letter-spacing: -.055em;
}
.home-hero-main .subtitle {
font-size: clamp(1.08rem, 5.5vw, 1.42rem);
line-height: 1.25;
margin-bottom: 18px;
}
.home-hero-main .hero-actions {
gap: 10px;
margin-top: 18px;
}
.home-hero-main .hero-actions .btn {
width: 100%;
min-height: 52px;
font-size: 1.03rem;
padding: 13px 16px;
}
.home-partners-band {
padding: 28px 0 30px;
}
.home-partners-band .section-title {
margin-bottom: 16px;
}
.home-partners-band .section-title h2 {
font-size: clamp(1.75rem, 8vw, 2.15rem);
}
.home-partners-band .section-title p {
font-size: 1rem;
line-height: 1.55;
}
.partner-strip {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px;
}
.partner-strip-card {
min-height: 92px;
padding: 12px 8px;
gap: 8px;
flex-direction: column;
}
.partner-strip-card img {
max-width: 100%;
max-height: 52px;
}
.partner-strip-card strong {
font-size: .78rem;
line-height: 1.15;
}
.home-description-block {
padding: 32px 0 38px;
}
.home-description-grid,
.home-description-grid--balanced {
display: grid;
grid-template-columns: 1fr !important;
gap: 16px;
align-items: start;
}
.home-main-text {
order: 1;
padding: 20px;
min-height: auto;
}
.home-main-text .section-title {
margin-bottom: 12px;
}
.home-main-text .section-title h2 {
font-size: clamp(1.55rem, 7vw, 1.9rem);
line-height: 1.1;
}
.home-main-text .section-title p {
font-size: .95rem;
}
.home-main-text p {
font-size: 1rem;
line-height: 1.65;
overflow-wrap: anywhere;
}
.home-image-panel,
.home-image-panel--contain {
order: 2;
min-height: 0 !important;
height: auto;
aspect-ratio: 16 / 10;
border-radius: var(--radius-card, 8px);
}
.home-image-panel img,
.home-image-panel--contain img {
width: 100%;
height: 100%;
padding: 0;
object-fit: cover;
object-position: center;
}
.home-posters-section {
padding-top: 34px;
padding-bottom: 38px;
}
.home-posters-layout {
grid-template-columns: 1fr !important;
gap: 18px;
align-items: start;
}
.home-posters-copy {
max-width: 100%;
order: 1;
}
.home-posters-copy h2 {
font-size: clamp(1.75rem, 8vw, 2.25rem);
margin: 8px 0 12px;
}
.home-posters-copy p {
font-size: 1rem;
line-height: 1.6;
}
.home-posters-copy .small {
font-size: .92rem;
line-height: 1.55;
}
.home-posters-frame {
order: 2;
width: 100%;
}
.home-poster-carousel {
width: min(360px, 100%);
padding: 8px;
border-radius: var(--radius-card, 8px);
}
.home-poster-track {
min-height: 0 !important;
height: auto;
aspect-ratio: 9 / 16;
max-height: 680px;
}
.home-poster-slide {
padding: 8px;
gap: 8px;
}
.home-poster-caption {
padding: 8px 4px 2px;
}
.home-carousel-arrow {
display: none;
}
.home-events-section {
padding-top: 38px;
}
.home-event-grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
.home-event-body {
padding: 18px;
}
}
@media (max-width: 380px) {
.container {
width: min(100% - 20px, 1120px);
}
.brand-logo {
width: 42px;
height: 42px;
}
.brand strong {
font-size: 1.05rem;
}
.home-hero-main h1 {
font-size: 2.28rem;
}
}
@media (max-width: 340px) {
.partner-strip {
grid-template-columns: 1fr !important;
}
}
/* V22 - Home móvil: botones del hero más compactos para no tapar la foto */
@media (max-width: 700px) {
.home-hero-main .hero-content {
padding: 34px 0 30px;
}
.home-hero-main .hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
}
.home-hero-main .hero-actions .btn,
.hero-actions .btn {
width: auto !important;
min-height: 36px !important;
padding: 8px 11px !important;
font-size: .86rem !important;
line-height: 1.05 !important;
border-radius: var(--radius-button, 8px) !important;
box-shadow: 0 6px 14px rgba(17,24,63,.16);
}
.home-hero-main .hero-actions .btn-light {
background: rgba(255,255,255,.92);
color: var(--accent, #27336b);
}
.home-hero-main .hero-actions .btn-outline {
background: rgba(17,24,63,.32);
border-color: rgba(255,255,255,.55);
color: #ffffff;
}
.home-hero-main .hero-actions .btn-primary {
background: var(--primary, #d71920);
color: var(--button-text, #ffffff);
}
}
@media (max-width: 380px) {
.home-hero-main .hero-actions {
gap: 7px;
}
.home-hero-main .hero-actions .btn,
.hero-actions .btn {
padding: 7px 9px !important;
font-size: .8rem !important;
min-height: 34px !important;
}
}
/* V24 - Home móvil: botones debajo de la foto para no tapar caras */
@media (max-width: 700px) {
.home-hero-main {
min-height: 300px;
overflow: visible;
margin-bottom: 66px;
background-position: center top;
border-bottom: 5px solid var(--primary, #d71920);
}
.home-hero-main.has-image::before {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent, #27336b) 64%, transparent) 0%,
color-mix(in srgb, var(--accent, #27336b) 42%, transparent) 42%,
color-mix(in srgb, var(--primary, #d71920) 26%, transparent) 100%),
linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.05));
}
.home-hero-main .hero-content {
min-height: 300px;
padding: 20px 0 14px;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
}
.home-hero-main .eyebrow {
width: max-content;
max-width: 92%;
font-size: .66rem;
line-height: 1.15;
padding: 5px 7px;
margin-bottom: 8px;
}
.home-hero-main h1 {
font-size: clamp(1.65rem, 8.2vw, 2.15rem);
line-height: 1.02;
margin: 0 0 5px;
max-width: 92%;
letter-spacing: -.045em;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.home-hero-main .subtitle {
font-size: clamp(.86rem, 4.1vw, 1.04rem);
line-height: 1.18;
margin: 0;
max-width: 94%;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.home-hero-main .hero-actions {
position: absolute;
left: 0;
right: 0;
bottom: -51px;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0;
padding: 8px 7px;
background: color-mix(in srgb, var(--surface, #ffffff) 94%, transparent);
border: 1px solid var(--border, #e2e5ef);
border-radius: var(--radius-card, 10px);
box-shadow: 0 10px 24px rgba(17,24,63,.14);
}
.home-hero-main .hero-actions .btn,
.hero-actions .btn {
width: auto !important;
min-height: 34px !important;
padding: 7px 9px !important;
font-size: .78rem !important;
line-height: 1 !important;
box-shadow: none !important;
}
.home-hero-main .hero-actions .btn-light {
background: #ffffff;
color: var(--accent, #27336b);
border: 1px solid var(--border, #e2e5ef);
}
.home-hero-main .hero-actions .btn-outline {
background: var(--accent, #27336b);
border-color: var(--accent, #27336b);
color: var(--button-text, #ffffff);
}
.home-hero-main .hero-actions .btn-primary {
background: var(--primary, #d71920);
color: var(--button-text, #ffffff);
}
}
@media (max-width: 380px) {
.home-hero-main {
min-height: 280px;
margin-bottom: 72px;
}
.home-hero-main .hero-content {
min-height: 280px;
padding-top: 18px;
}
.home-hero-main .hero-actions {
bottom: -58px;
gap: 6px;
padding: 7px 6px;
}
.home-hero-main .hero-actions .btn,
.hero-actions .btn {
padding: 7px 8px !important;
font-size: .74rem !important;
min-height: 32px !important;
}
}
/* V25 - Home: botones fuera de la foto también en PC */
.home-hero-main .hero-actions {
display: none !important;
}
.home-hero-cta-strip {
background: var(--surface, #ffffff);
border-top: 5px solid var(--primary, #d71920);
border-bottom: 1px solid var(--border, #e2e5ef);
padding: 18px 0;
box-shadow: 0 8px 22px rgba(17,24,63,.05);
}
.home-hero-cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
}
.home-hero-cta-actions .btn {
min-height: 46px;
padding: 12px 20px;
font-size: .98rem;
box-shadow: 0 8px 18px rgba(17,24,63,.10);
}
.home-hero-cta-actions .btn-light {
background: #ffffff;
color: var(--accent, #27336b);
border: 1px solid var(--border, #e2e5ef);
}
.home-hero-cta-actions .btn-secondary {
background: var(--accent, #27336b);
color: var(--button-text, #ffffff);
}
.home-hero-cta-actions .btn-primary {
background: var(--primary, #d71920);
color: var(--button-text, #ffffff);
}
@media (min-width: 701px) {
.home-hero-main {
margin-bottom: 0 !important;
}
.home-hero-main .hero-content {
padding-bottom: 84px;
}
}
@media (max-width: 700px) {
.home-hero-main {
margin-bottom: 0 !important;
min-height: 315px;
border-bottom: 0;
}
.home-hero-main .hero-content {
min-height: 315px;
padding: 20px 0 18px;
}
.home-hero-cta-strip {
padding: 10px 0 12px;
border-top: 5px solid var(--primary, #d71920);
}
.home-hero-cta-actions {
gap: 7px;
}
.home-hero-cta-actions .btn {
width: auto !important;
min-height: 34px !important;
padding: 8px 10px !important;
font-size: .78rem !important;
line-height: 1 !important;
border-radius: var(--radius-button, 8px) !important;
box-shadow: none !important;
}
}
@media (max-width: 360px) {
.home-hero-cta-actions .btn {
padding: 7px 8px !important;
font-size: .73rem !important;
}
}
/* V27 - Home PC: texto arriba a la izquierda y más pequeño para dejar ver la foto */
@media (min-width: 701px) {
.home-hero-main {
align-items: flex-start !important;
min-height: 500px;
background-position: center center;
}
.home-hero-main .hero-content {
width: min(680px, 100%) !important;
padding-top: 58px !important;
padding-bottom: 0 !important;
margin-left: 0 !important;
text-align: left;
}
.home-hero-main .eyebrow {
font-size: .82rem;
line-height: 1.15;
padding: 7px 11px;
margin-bottom: 14px;
}
.home-hero-main h1 {
max-width: 620px;
font-size: clamp(2.45rem, 4.25vw, 3.9rem) !important;
line-height: 1;
margin: 0 0 12px;
letter-spacing: -.052em;
}
.home-hero-main .subtitle {
max-width: 640px;
font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
line-height: 1.22;
margin: 0;
}
}
@media (min-width: 1200px) {
.home-hero-main .hero-content {
padding-top: 66px !important;
}
}
/* V28 - Home PC: texto pegado arriba a la izquierda con margen lateral */
@media (min-width: 701px) {
.home-hero-main {
align-items: flex-start !important;
min-height: 500px;
background-position: center center;
}
.home-hero-main .hero-content {
width: min(660px, calc(100% - 48px)) !important;
padding-top: 18px !important;
padding-bottom: 0 !important;
margin-left: 28px !important;
text-align: left;
}
.home-hero-main .eyebrow {
font-size: .78rem !important;
line-height: 1.1;
padding: 6px 10px !important;
margin-bottom: 12px !important;
}
.home-hero-main h1 {
max-width: 620px;
font-size: clamp(2.3rem, 4vw, 3.65rem) !important;
line-height: .98;
margin: 0 0 10px !important;
letter-spacing: -.052em;
}
.home-hero-main .subtitle {
max-width: 640px;
font-size: clamp(1rem, 1.65vw, 1.25rem) !important;
line-height: 1.18;
margin: 0 !important;
}
}
@media (min-width: 1200px) {
.home-hero-main .hero-content {
padding-top: 20px !important;
margin-left: 34px !important;
}
}
/* =========================================================
Presets de plantilla reutilizable Mi Liga Social Eventos
========================================================= */
body.theme-elegante {
--template-shadow-soft: 0 18px 48px rgba(17, 24, 39, .10);
}
body.theme-infantil {
--template-shadow-soft: 0 16px 36px rgba(17, 24, 39, .08);
}
body.theme-social {
--template-shadow-soft: 0 14px 34px rgba(17, 24, 39, .11);
}
body.theme-viaje {
--template-shadow-soft: 0 16px 40px rgba(15, 23, 42, .12);
}
body.theme-corporativo {
--template-shadow-soft: 0 10px 28px rgba(15, 23, 42, .10);
}
body.theme-clasico {
--template-shadow-soft: 0 12px 32px rgba(17, 24, 39, .09);
}
body.theme-elegante .card,
body.theme-elegante .event-title-card-v19,
body.theme-infantil .card,
body.theme-social .card,
body.theme-viaje .card,
body.theme-corporativo .card {
box-shadow: var(--template-shadow-soft);
}
body.theme-corporativo .top-stripe,
body.theme-corporativo .btn-primary,
body.theme-corporativo .event-meta-pill-v19 {
letter-spacing: .01em;
}
body.theme-infantil .brand-mark,
body.theme-infantil .btn,
body.theme-infantil .card {
border-radius: calc(var(--radius-card) + 8px);
}
body.tone-elegante h1,
body.tone-elegante h2,
body.tone-emotivo h1,
body.tone-emotivo h2 {
letter-spacing: -.035em;
}
body.tone-corporativo h1,
body.tone-corporativo h2,
body.tone-corporativo h3 {
letter-spacing: -.015em;
}
body.hero-layout-sobrio .event-cover-banner-section-v19,
body.hero-layout-sobrio .home-hero-photo {
max-height: 420px;
}
body.hero-layout-cartel .event-cover-banner-section-v19 img,
body.hero-layout-cartel .home-hero-photo img {
object-fit: contain;
background: var(--surface);
}
body.hero-layout-mosaico .home-carousel,
body.hero-layout-mosaico .photo-grid,
body.hero-layout-mosaico .gallery-grid {
gap: .7rem;
}
/* V29 - Radios públicos equilibrados para plantilla social
Evita formularios y tarjetas excesivamente redondeados aunque el preset sea elegante o infantil. */
.card,
.summary-card,
.content-page,
.event-row,
.highlight-card,
.partner-card,
.photo-card,
.empty-state,
.event-title-card-v19,
.event-info-card-v19,
.home-event-card,
.home-carousel-card {
border-radius: min(var(--radius-card, 10px), 14px) !important;
}
.btn,
.main-nav a,
.nav-toggle,
.badge,
.meta-pill,
.event-meta-pill,
.event-meta-pill-v19,
.home-event-status {
border-radius: min(var(--radius-button, 8px), 10px) !important;
}
.field input,
.field textarea,
.field select {
border-radius: 8px !important;
}
.field textarea {
min-height: 130px;
}
/* MLS-EVENTOS-FIX-LOGO-COLORES-INICIO
Estos overrides eliminan colores heredados azul/rojo de la plantilla original
y fuerzan que cabecera, logo, navegación, hero y tarjetas usen la configuración
de cada sitio/evento. */
body {
background: var(--bg, #f4f5f8) !important;
color: var(--text, #111827) !important;
}
.top-stripe {
height: 4px !important;
background: linear-gradient(90deg, var(--primary, #8b5cf6), var(--accent, #3f2a56)) !important;
}
.site-header {
background: color-mix(in srgb, var(--header-bg, #ffffff) 96%, transparent) !important;
border-bottom-color: color-mix(in srgb, var(--border, #eadcf8) 80%, transparent) !important;
}
.brand strong,
.page-header h1,
.section-title h2,
.event-row h2,
.home-event-body h3,
.highlight-card h3,
.partner-card h3 {
color: var(--text, #1f172a) !important;
}
.brand small,
.page-header p,
.section-title p,
.event-row p,
.home-event-body p,
.partner-card p,
.empty-state {
color: var(--muted, #6b5f76) !important;
}
.brand-mark {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
border-radius: 10px !important;
background: linear-gradient(135deg, var(--primary, #8b5cf6), var(--accent, #3f2a56)) !important;
color: var(--button-text, #ffffff) !important;
font-size: .95rem !important;
letter-spacing: -.03em !important;
box-shadow: 0 8px 18px color-mix(in srgb, var(--primary, #8b5cf6) 26%, transparent) !important;
outline: 2px solid color-mix(in srgb, var(--primary, #8b5cf6) 18%, transparent) !important;
}
.brand-logo {
border-color: color-mix(in srgb, var(--border, #eadcf8) 80%, transparent) !important;
}
.main-nav a {
color: var(--text, #1f172a) !important;
}
.main-nav a:hover,
.main-nav a.is-active {
background: color-mix(in srgb, var(--primary, #8b5cf6) 13%, transparent) !important;
color: var(--primary, #8b5cf6) !important;
}
.nav-toggle {
border-color: color-mix(in srgb, var(--border, #eadcf8) 80%, transparent) !important;
}
.nav-toggle span {
background: var(--text, #1f172a) !important;
}
.hero {
background:
radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--secondary, #fff7ed) 20%, transparent) 0 18%, transparent 36%),
linear-gradient(135deg,
var(--accent, #3f2a56) 0%,
color-mix(in srgb, var(--accent, #3f2a56) 76%, var(--primary, #8b5cf6)) 54%,
var(--primary, #8b5cf6) 100%) !important;
border-bottom-color: var(--surface, #ffffff) !important;
}
.hero:after {
background: linear-gradient(90deg,
color-mix(in srgb, #ffffff 18%, transparent) 0 20%,
transparent 20% 35%,
color-mix(in srgb, var(--secondary, #fff7ed) 18%, transparent) 35% 56%,
transparent 56% 70%,
color-mix(in srgb, var(--primary, #8b5cf6) 20%, transparent) 70% 82%,
transparent 82%) !important;
}
.hero.has-image:before {
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent, #3f2a56) 78%, transparent),
color-mix(in srgb, var(--accent, #3f2a56) 46%, transparent),
color-mix(in srgb, var(--primary, #8b5cf6) 30%, transparent)) !important;
}
.page-header {
background: linear-gradient(180deg,
var(--surface, #ffffff),
color-mix(in srgb, var(--bg, #fbf7ff) 82%, var(--surface, #ffffff))) !important;
border-bottom-color: color-mix(in srgb, var(--border, #eadcf8) 70%, transparent) !important;
}
.card,
.content-page,
.event-row,
.highlight-card,
.partner-card,
.home-event-card,
.summary-card,
.empty-state,
.photo-card {
background: var(--surface, #ffffff) !important;
border-color: color-mix(in srgb, var(--border, #eadcf8) 82%, transparent) !important;
}
.btn-primary,
.badge-upcoming,
.home-event-status.badge-celebrated {
background: var(--primary, #8b5cf6) !important;
color: var(--button-text, #ffffff) !important;
box-shadow: 0 10px 20px color-mix(in srgb, var(--primary, #8b5cf6) 22%, transparent) !important;
}
.btn-secondary,
.highlight-card:before,
.partner-card {
border-color: var(--accent, #3f2a56) !important;
}
.btn-secondary {
background: var(--accent, #3f2a56) !important;
color: var(--button-text, #ffffff) !important;
}
.btn-light {
color: var(--accent, #3f2a56) !important;
}
.summary-card,
.event-row {
border-left-color: var(--primary, #8b5cf6) !important;
}
.summary-card,
.partner-card,
.home-event-card,
.event-title-card-v19,
.event-info-card-v19 {
border-top-color: var(--primary, #8b5cf6) !important;
}
.highlight-icon {
background: color-mix(in srgb, var(--primary, #8b5cf6) 12%, transparent) !important;
color: var(--primary, #8b5cf6) !important;
}
.photo-caption,
.home-carousel-caption {
background: linear-gradient(transparent, color-mix(in srgb, var(--accent, #3f2a56) 88%, transparent)) !important;
}
.site-footer {
background: var(--footer-bg, var(--accent, #3f2a56)) !important;
border-top-color: var(--primary, #8b5cf6) !important;
}
.field input,
.field textarea,
.field select {
border-color: color-mix(in srgb, var(--border, #eadcf8) 86%, transparent) !important;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
outline-color: color-mix(in srgb, var(--primary, #8b5cf6) 22%, transparent) !important;
border-color: color-mix(in srgb, var(--primary, #8b5cf6) 58%, var(--border, #eadcf8)) !important;
}
.mls-cta-banner {
background: linear-gradient(135deg,
var(--accent, #3f2a56) 0%,
color-mix(in srgb, var(--accent, #3f2a56) 76%, #000000) 55%,
var(--primary, #8b5cf6) 100%) !important;
border-top-color: var(--primary, #8b5cf6) !important;
}
/* Ficheros CSS antiguos de detalle de evento tenían gradientes fijos. Estos overrides los neutralizan. */
.event-hero-v19,
.event-cover-hero,
.event-cover-banner-section-v19 {
background: linear-gradient(135deg,
var(--accent, #3f2a56),
color-mix(in srgb, var(--accent, #3f2a56) 68%, var(--primary, #8b5cf6))) !important;
}
.event-meta-pill,
.event-meta-pill-v19,
.meta-pill {
border-color: color-mix(in srgb, var(--secondary, #fff7ed) 36%, transparent) !important;
}
/* MLS-EVENTOS-FIX-LOGO-COLORES-FIN */
/* MLS-EVENTOS-FIX-BANNER-COLORES-INICIO
Fuerza los banners interiores a usar los colores configurados en BBDD.
Evita restos azul/rojo heredados de la plantilla original.
*/
.page-hero,
.events-hero,
.eventos-hero,
.hero-page,
.hero-internal,
.inner-hero,
.public-hero,
.event-list-hero,
.section-hero,
body:not(.home) .hero,
body:not(.home) .page-header,
body:not(.home) .events-header {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 92%, #000 8%) 0%,
color-mix(in srgb, var(--primary) 72%, var(--accent) 28%) 58%,
color-mix(in srgb, var(--secondary) 74%, var(--primary) 26%) 100%
) !important;
color: var(--button-text, #fff) !important;
border-bottom: 1px solid var(--border, rgba(0,0,0,.08)) !important;
}
/* Por si el diseño antiguo usaba pseudo-elementos inclinados de color fijo */
.page-hero::before,
.page-hero::after,
.events-hero::before,
.events-hero::after,
.eventos-hero::before,
.eventos-hero::after,
.hero-page::before,
.hero-page::after,
.hero-internal::before,
.hero-internal::after,
.inner-hero::before,
.inner-hero::after,
.public-hero::before,
.public-hero::after,
.event-list-hero::before,
.event-list-hero::after,
.section-hero::before,
.section-hero::after,
body:not(.home) .hero::before,
body:not(.home) .hero::after,
body:not(.home) .page-header::before,
body:not(.home) .page-header::after,
body:not(.home) .events-header::before,
body:not(.home) .events-header::after {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 45%, transparent),
color-mix(in srgb, var(--secondary) 55%, transparent)
) !important;
opacity: .32 !important;
}
/* Textos del banner */
.page-hero h1,
.events-hero h1,
.eventos-hero h1,
.hero-page h1,
.hero-internal h1,
.inner-hero h1,
.public-hero h1,
.event-list-hero h1,
.section-hero h1,
body:not(.home) .hero h1,
body:not(.home) .page-header h1,
body:not(.home) .events-header h1 {
color: #fff !important;
}
.page-hero p,
.events-hero p,
.eventos-hero p,
.hero-page p,
.hero-internal p,
.inner-hero p,
.public-hero p,
.event-list-hero p,
.section-hero p,
body:not(.home) .hero p,
body:not(.home) .page-header p,
body:not(.home) .events-header p {
color: rgba(255,255,255,.92) !important;
}
/* Etiqueta superior del banner */
.page-hero .eyebrow,
.events-hero .eyebrow,
.eventos-hero .eyebrow,
.hero-page .eyebrow,
.hero-internal .eyebrow,
.inner-hero .eyebrow,
.public-hero .eyebrow,
.event-list-hero .eyebrow,
.section-hero .eyebrow,
body:not(.home) .hero .eyebrow,
body:not(.home) .page-header .eyebrow,
body:not(.home) .events-header .eyebrow {
color: #fff !important;
border-color: rgba(255,255,255,.42) !important;
background: rgba(255,255,255,.08) !important;
}
/* MLS-EVENTOS-FIX-BANNER-COLORES-FIN */
/* MLS-FIX-EVENTS-LANDING-INICIO
Banner de la página /eventos.
Esta clase venía con colores fijos heredados; debe usar los colores configurados
para cada demo/cliente desde site_settings.
*/
.events-landing {
position: relative;
overflow: hidden;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 88%, #000 12%) 0%,
color-mix(in srgb, var(--primary) 74%, var(--accent) 26%) 58%,
color-mix(in srgb, var(--secondary) 78%, var(--primary) 22%) 100%
) !important;
color: #ffffff !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent) !important;
}
.events-landing::before,
.events-landing::after {
content: "" !important;
position: absolute !important;
top: -20% !important;
bottom: -20% !important;
width: 18vw !important;
min-width: 180px !important;
transform: skewX(-10deg) !important;
pointer-events: none !important;
background: rgba(255,255,255,.18) !important;
opacity: .45 !important;
}
.events-landing::before {
right: 23vw !important;
}
.events-landing::after {
right: 7vw !important;
background: color-mix(in srgb, var(--secondary) 34%, transparent) !important;
opacity: .32 !important;
}
.events-landing__inner {
position: relative !important;
z-index: 2 !important;
}
.events-landing__eyebrow {
color: #ffffff !important;
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.42) !important;
}
.events-landing h1 {
color: #ffffff !important;
}
.events-landing p {
color: rgba(255,255,255,.92) !important;
}
/* MLS-FIX-EVENTS-LANDING-FIN */
/* MLS-FIX-EVENTS-LANDING-INICIO
Banner de /eventos usando colores configurables por site_settings.
Mantener en la plantilla para que los futuros despliegues no hereden azul/rojo fijo.
*/
.events-landing {
position: relative;
overflow: hidden;
background:
linear-gradient(
135deg,
var(--accent) 0%,
var(--primary) 58%,
var(--secondary) 100%
) !important;
color: #ffffff !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent) !important;
}
.events-landing::before,
.events-landing::after {
content: "" !important;
position: absolute !important;
top: -20% !important;
bottom: -20% !important;
width: 18vw !important;
min-width: 180px !important;
transform: skewX(-10deg) !important;
pointer-events: none !important;
background: rgba(255,255,255,.18) !important;
opacity: .38 !important;
}
.events-landing::before {
right: 23vw !important;
}
.events-landing::after {
right: 7vw !important;
background: color-mix(in srgb, var(--secondary) 38%, transparent) !important;
opacity: .28 !important;
}
.events-landing__inner {
position: relative !important;
z-index: 2 !important;
}
.events-landing__eyebrow {
color: #ffffff !important;
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.42) !important;
}
.events-landing h1 {
color: #ffffff !important;
}
.events-landing p {
color: rgba(255,255,255,.92) !important;
}
/* Marcador textual automático cuando no hay logo subido */
.brand-mark {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 92%, #000 8%),
color-mix(in srgb, var(--accent) 82%, var(--primary) 18%)
) !important;
color: var(--button-text, #fff) !important;
border-color: color-mix(in srgb, var(--primary) 35%, #ffffff 65%) !important;
letter-spacing: -.04em;
font-size: .86rem;
text-align: center;
}
/* MLS-FIX-EVENTS-LANDING-FIN */
/* MLS-FIX-HOME-SECTIONS-BODA-INICIO
Corrección de restos visuales heredados en la home:
- elimina líneas rojas fijas entre secciones;
- hace que CTA, partners y carteles usen colores configurables;
- limpia el bloque small de carteles.
*/
.home-hero-cta-strip,
.home-partners-band,
.home-description-block,
.home-posters-section,
.home-events-section,
.section-tight {
border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
.home-hero-cta-strip {
border-top: 3px solid var(--primary) !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--secondary) 72%, #ffffff 28%),
var(--surface)
) !important;
}
.home-partners-band {
border-top: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, transparent) !important;
background:
linear-gradient(
180deg,
var(--surface),
color-mix(in srgb, var(--secondary) 38%, #ffffff 62%)
) !important;
}
.home-description-block,
.home-posters-section,
.home-events-section {
border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent) !important;
background: var(--bg) !important;
}
.home-posters-copy .small,
.home-posters-copy p.small {
position: relative;
margin-top: 14px !important;
padding: 12px 14px 12px 42px !important;
border-left: 4px solid var(--primary) !important;
border-radius: 10px !important;
background: color-mix(in srgb, var(--secondary) 36%, #ffffff 64%) !important;
color: var(--muted) !important;
font-size: .94rem !important;
line-height: 1.45 !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.home-posters-copy .small::before,
.home-posters-copy p.small::before {
content: "i";
position: absolute;
left: 14px;
top: 12px;
width: 18px;
height: 18px;
border-radius: 999px;
display: inline-grid;
place-items: center;
font-size: .78rem;
font-weight: 900;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--button-text, #fff);
background: var(--primary);
}
.home-posters-copy .small strong,
.home-posters-copy p.small strong {
color: var(--accent) !important;
font-weight: 800 !important;
}
/* Botones de la franja CTA sin rojo heredado */
.home-hero-cta-strip .btn,
.home-hero-cta-strip a {
border-color: color-mix(in srgb, var(--primary) 24%, transparent) !important;
}
.home-hero-cta-strip .btn-primary,
.home-hero-cta-strip a.btn-primary {
background: var(--primary) !important;
color: var(--button-text, #fff) !important;
}
.home-hero-cta-strip .btn-secondary,
.home-hero-cta-strip a.btn-secondary {
background: var(--accent) !important;
color: var(--button-text, #fff) !important;
}
/* Evita cualquier línea roja antigua en hijos directos */
.home-hero-cta-strip::before,
.home-hero-cta-strip::after,
.home-partners-band::before,
.home-partners-band::after,
.home-posters-section::before,
.home-posters-section::after {
border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
background-color: transparent !important;
}
/* MLS-FIX-HOME-SECTIONS-BODA-FIN */
/* MLS-FIX-HOME-HERO-IMAGE-INICIO
La foto principal de Inicio se carga desde home_page.hero_image_path.
No debe ser sustituida por degradados genéricos de otros banners.
*/
.home-hero-main.has-image {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: var(--accent, #3f2a56) !important;
}
@media (max-width: 700px) {
.home-hero-main.has-image {
min-height: 360px !important;
background-size: cover !important;
background-position: center center !important;
}
.home-hero-main.has-image .hero-content {
min-height: 360px !important;
}
.home-hero-main.has-image::before {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--accent, #3f2a56) 68%, transparent) 0%,
color-mix(in srgb, var(--accent, #3f2a56) 42%, transparent) 42%,
color-mix(in srgb, var(--primary, #8b5cf6) 18%, transparent) 100%
) !important;
opacity: 1 !important;
}
.home-hero-main.has-image::after {
display: none !important;
}
}
@media (min-width: 701px) {
.home-hero-main.has-image {
background-size: cover !important;
background-position: center center !important;
}
}
/* MLS-FIX-HOME-HERO-IMAGE-FIN */