/* ============================================================
1. NETEJA ABSOLUTA DE CASSIOPEIA
============================================================ */
/* Eliminem logos duplicats, sitenames i espais de la plantilla */
header.header, .header.container-header, .navbar-brand, .container-nav,
.site-description, .sitename, .header-brand, .burger-icon {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Evitem que el contingut quedi tapat pel menú fix */
.site-grid {
margin-top: 20px !important;
max-width: 1300px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* HEADER PRINCIPAL */
/* --- TOP BAR BLINDADA --- */
.top-bar-apple {
background: #f5f5f7 !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
border-bottom: 1px solid #d2d2d7 !important;
overflow: hidden !important; /* Evita que res surti del quadrat */
}
/* L'ARREGLAMENT DE LA CREU GEGANT */
.top-left {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.top-left img {
height: 20px !important; /* AIXÒ ÉS EL QUE EVITA EL DRAMA */
width: auto !important;
display: block !important;
object-fit: contain !important;
}
.top-left span {
font-size: 11px !important;
color: #86868b !important;
font-weight: 500 !important;
}
/* --- RESCAT DEL MENÚ (PERQUÈ NO SURTI VERTICAL) --- */
.n-nav-container ul {
display: flex !important;
flex-direction: row !important; /* Força línia horitzontal */
gap: 25px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* --- CUIDEM LES XARXES --- */
.top-right {
display: flex !important;
gap: 15px !important;
}
.social-link {
font-size: 11px !important;
font-weight: 700 !important;
color: #86868b !important;
text-decoration: none !important;
}
/* ============================================================
4. CORRECCIÓ DE SUBMENÚS (SOLAPAMENT)
============================================================ */
.n-nav li {
position: relative !important;
}
.n-nav li ul {
position: absolute !important;
/* Empenyem el submenú cap avall perquè no trepitgi el menú principal */
/* Ajusta aquest 'top' si el vols més amunt o més avall */
top: 50px !important;
left: 0 !important;
background: #ffffff !important;
display: none !important;
flex-direction: column !important;
min-width: 220px !important;
box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
border-top: 3px solid #9B1F2E !important;
padding: 10px 0 !important;
z-index: 10001 !important;
}
/* Quan passem el ratolí, es mostra sense solapar */
.n-nav li:hover > ul {
display: flex !important;
}
/* Espaiat intern dels links del submenú */
.n-nav li ul li a {
text-transform: none !important;
padding: 10px 20px !important;
border-bottom: 1px solid #eee !important;
width: 100% !important;
display: block !important;
}
.n-nav li ul li:last-child a {
border-bottom: none !important;
}
/* Efecte hover per saber on estem pitjant */
.n-nav li ul li a:hover {
background-color: #f8f8f8 !important;
color: #9B1F2E !important;
}
/* ============================================================
3. BLOG I EVENTS (ESTILS DE TARGETA)
============================================================ */
.com-content-category-blog__items { display: flex; flex-direction: column; gap: 30px; margin: 40px 0; }
.com-content-category-blog__item {
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
display: flex;
overflow: hidden;
border: 1px solid #eee;
}
.com-content-category-blog__item figure { flex: 0 0 35%; margin: 0; }
.com-content-category-blog__item figure img { width: 100%; height: 100%; object-fit: cover; }
.com-content-category-blog__item .item-content { padding: 25px; flex: 1; }
/* RSEvents Grid */
.rs_events_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
list-style: none;
padding: 0;
}
.rs_event_detail { background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); overflow: hidden; border: 1px solid #eee; }
/* ============================================================
4. FOOTER (NEGRE TOTAL I SUPORT INSTITUCIONAL)
============================================================ */
/* ============================================================
FOOTER LLUÏSOS D'HORTA - 100% DES DE ZERO
============================================================ */
/* 1. ESTRUCTURA I FONS */
.footer {
background-color: #f5f5f7 !important; /* Gris Apple clar */
padding: 60px 0 0 0 !important;
border-top: 1px solid #d2d2d7 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.footer-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px 60px 20px !important;
display: grid !important;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important; /* Distribució neta */
gap: 40px !important;
}
/* 2. IDENTITAT (COLUMNA 1) */
.f-brand-title {
font-size: 26px !important;
font-weight: 700 !important;
color: #9B1F2E !important; /* Vermell Lluïsos */
margin-bottom: 10px !important;
letter-spacing: -0.5px !important;
}
.f-badge {
display: inline-block !important;
background: #ffffff !important;
color: #9B1F2E !important;
border: 1.5px solid #9B1F2E !important;
padding: 4px 14px !important;
border-radius: 50px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
margin-bottom: 20px !important;
}
.f-description {
font-size: 14px !important;
line-height: 1.6 !important;
color: #6e6e73 !important; /* Gris text Apple */
}
/* 3. TÍTOLS I ENLLAÇOS (COLUMNA 2 i 3) */
.footer-col h4 {
font-size: 14px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
margin-bottom: 20px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.f-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.f-list li {
margin-bottom: 12px !important;
}
.f-list li a {
text-decoration: none !important;
color: #6e6e73 !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
}
.f-list li a:hover {
color: #9B1F2E !important;
padding-left: 5px !important; /* Petit efecte de moviment */
}
/* 4. CONTACTE (COLUMNA 4) */
.f-contact-info {
font-size: 14px !important;
line-height: 2 !important;
color: #6e6e73 !important;
}
/* 5. ZONA DE PARTNERS (SUAVITZADA) */
.footer-partners {
background: #ffffff !important;
padding: 40px 20px !important;
text-align: center !important;
border-top: 1px solid #d2d2d7 !important;
}
.partner-title {
font-size: 12px !important;
font-weight: 600 !important;
color: #86868b !important;
text-transform: uppercase !important;
margin-bottom: 25px !important;
display: block !important;
}
.partner-grid {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 40px !important;
flex-wrap: wrap !important;
}
.partner-name {
font-size: 14px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
background: #f5f5f7 !important;
padding: 10px 20px !important;
border-radius: 12px !important;
border: 1px solid #e5e5e7 !important;
}
/* 6. BARRA FINAL (DARK ACCENT) */
.f-bottom-bar {
background-color: #1d1d1f !important; /* Negre mat per tancar la web */
color: #86868b !important;
padding: 25px 0 !important;
}
.f-bottom-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px !important;
display: flex !important;
justify-content: space-between !important;
font-size: 12px !important;
}
/* 7. RESPONSIVE MÒBIL */
@media (max-width: 900px) {
.footer-inner {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 600px) {
.footer-inner {
grid-template-columns: 1fr !important;
text-align: center !important;
}
.f-bottom-inner {
flex-direction: column !important;
gap: 15px !important;
text-align: center !important;
}
}
/* ============================================================
5. RESPONSIVE MÒBIL
============================================================ */
@media (max-width: 992px) {
.n-container { flex-direction: column !important; text-align: center; gap: 20px; padding: 20px; }
.n-nav ul { flex-wrap: wrap; justify-content: center; gap: 10px !important; }
.n-actions { flex-direction: column; width: 100%; }
}
/* ============================================================
1. NETEJA DE LOGOS I FLETXES DE CASSIOPEIA
============================================================ */
/* Amaguem el logo trencat de l'esquerra i elements de la plantilla */
.header-brand, .navbar-brand, .sitename, .site-description {
display: none !important;
}
/* Eliminem les fletxes que Cassiopeia posa automàticament per evitar duplicats */
.n-nav a::after,
.dropdown-toggle::after,
.mm-toggler::after {
display: none !important;
content: none !important;
}
/* --- HEADER GLASSMORPHISM (ESTIL APPLE) --- */
.n-header {
background: rgba(255, 255, 255, 0.8) !important; /* Semitransparent */
backdrop-filter: blur(20px) !important; /* El secret d'Apple */
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* Línia quasi invisible */
height: 80px !important;
position: sticky;
top: 0;
z-index: 10000;
display: flex;
align-items: center;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
}
.n-container {
max-width: 1300px;
margin: 0 auto;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
}
/* LOGO INTEGRAT */
.n-logo img {
height: 55px !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.n-logo img:hover { transform: scale(1.05); }
/* MENÚ NET I LLEGIBLE */
.n-nav ul {
display: flex;
gap: 25px;
list-style: none;
margin: 0;
padding: 0;
}
.n-nav a {
color: #1d1d1f !important; /* Negre Apple */
font-weight: 500 !important;
font-size: 14px !important;
text-transform: none !important; /* Menys agressiu que les majúscules */
letter-spacing: -0.2px;
transition: opacity 0.2s;
}
.n-nav a:hover { opacity: 0.6; }
/* CERCA NOMÉS ICONA */
.n-search-trigger-apple {
background: none;
border: none;
cursor: pointer;
color: #1d1d1f;
padding: 8px;
transition: transform 0.2s;
}
.n-search-trigger-apple svg { width: 20px; height: 20px; }
.n-search-trigger-apple:hover { transform: scale(1.1); }
/* BOTÓ PILL (ESTIL LOVABLE) */
.n-btn-apple {
background: #9B1F2E !important;
color: #fff !important;
padding: 10px 22px !important;
border-radius: 50px !important; /* Càpsula */
font-weight: 600 !important;
font-size: 13px !important;
text-decoration: none !important;
box-shadow: 0 4px 15px rgba(155, 31, 46, 0.2) !important;
transition: all 0.3s ease !important;
}
.n-btn-apple:hover {
background: #7a1824 !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(155, 31, 46, 0.3) !important;
}
/* BANDA SUPERIOR SOBRIA */
.csj-premium-bar {
background: #f5f5f7 !important;
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
}
.csj-tag { font-size: 9px; font-weight: 700; color: #9B1F2E; letter-spacing: 1px; }
/* ============================================================
3. FOOTER: ELIMINACIÓ DE LA FRANJA SOBRANT (image_7e8868.png)
============================================================ */
/* Eliminem l'espai buit que deixa el grid de Cassiopeia a sobre del footer */
.footer {
background: #000000 !important;
margin-top: 0 !important;
padding-top: 0 !important;
border: none !important;
}
/* Forcem que el contenidor negre ocupi tot el fons sense talls */
footer.footer {
background-color: #000000 !important;
display: block !important;
}
.footer-top-line {
height: 5px;
background: #9B1F2E;
width: 100%;
margin-bottom: 0; /* Enganxem la línia al fons negre */
}
/* ============================================================
4. SECCIÓ SUPORT (AJUNTAMENT / GENERALITAT)
============================================================ */
.footer-partners {
background: #000000 !important;
padding: 30px 20px;
text-align: center;
}
.partner-grid {
display: flex;
justify-content: center;
gap: 40px;
align-items: center;
color: #ffffff;
}
.partner-name {
font-weight: 800;
text-transform: uppercase;
font-size: 13px;
border: 1px solid #333;
padding: 8px 15px;
}
/* ============================================================
5. RECUPERACIÓ D'ESTILS DE BLOG I EVENTS
============================================================ */
.com-content-category-blog__item {
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
display: flex;
overflow: hidden;
margin-bottom: 30px;
}
/* ============================================================
5. CORRECCIÓ DE SUB-SUBMENÚS (3r NIVELL)
============================================================ */
/* Segon nivell de submenú (el que surt del lateral) */
.n-nav li ul li ul {
position: absolute !important;
top: 0 !important; /* Alineat amb la part superior de l'ítem pare */
left: 100% !important; /* Desplaçat totalment a la dreta */
margin-top: -10px !important; /* Ajust per quadrar amb el border-top */
display: none !important;
}
/* Mostrem el tercer nivell només quan fem hover al seu pare directe */
.n-nav li ul li:hover > ul {
display: flex !important;
}
/* Afegim una fletxeta lateral als ítems que tenen més contingut a dins */
.n-nav li ul li.parent > a::after {
content: " ▶" !important; /* Fletxa cap a la dreta */
float: right;
font-size: 8px !important;
margin-left: 10px;
color: #9B1F2E !important;
}
/* ============================================================
6. MILLORES DE DISSENY I LLEGIBILITAT
============================================================ */
/* Millora del Menú: Més espai i elegància */
.n-nav a {
font-size: 14px !important; /* Una mica més gran */
letter-spacing: 0.8px !important; /* Lletres més separades */
transition: color 0.3s ease !important; /* Transició suau */
position: relative;
}
/* Línia vermella que apareix sota el menú en fer hover */
.n-nav a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #9B1F2E;
transition: width 0.3s ease;
}
.n-nav a:hover::before {
width: 100%;
}
.n-nav a:hover {
color: #9B1F2E !important;
}
/* Botó "Fes-te Soci" més modern (estil píndola) */
.n-btn {
border-radius: 50px !important; /* Totalment rodó als costats */
padding: 10px 25px !important;
box-shadow: 0 4px 6px rgba(155, 31, 46, 0.2) !important;
transition: transform 0.2s ease, background 0.3s ease !important;
}
.n-btn:hover {
background: #7a1824 !important; /* Vermell més fosc al passar el ratolí */
transform: translateY(-2px); /* Puja una miqueta, efecte "click" */
}
/* Unificar els títols de tota la web amb el color corporatiu */
h1, h2, h3, .content-heading h2 {
color: #9B1F2E !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: -0.5px;
}
/* Ajust del Cercador per fer-lo més fi */
.n-search input {
border: 1.5px solid #eee !important;
background: #f9f9f9 !important;
transition: all 0.3s ease !important;
}
.n-search input:focus {
border-color: #9B1F2E !important;
background: #fff !important;
outline: none;
width: 160px !important; /* S'eixampla en clicar */
}
/* ============================================================
7. AUTOMATITZACIÓ RS-EVENTS (AGENDA MODERNA)
============================================================ */
/* Contenidor de l'esdeveniment */
.rseventspro-list-item, .event-item {
display: flex !important;
background: #fff;
border-radius: 12px !important;
margin-bottom: 20px !important;
padding: 15px !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
border-left: 5px solid #9B1F2E !important;
transition: transform 0.3s ease;
}
.rseventspro-list-item:hover {
transform: translateX(10px); /* Es mou a la dreta en passar el ratolí */
}
/* La data com un "Badge" destacat */
.rseventspro-date-block {
background: #9B1F2E !important;
color: #fff !important;
padding: 10px !important;
border-radius: 8px !important;
text-align: center;
min-width: 70px;
font-weight: 800;
text-transform: uppercase;
margin-right: 20px;
}
/* ============================================================
8. GRID AUTOMÀTIC DE NOTÍCIES
============================================================ */
.blog-items {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 30px !important;
}
.com-content-category-blog__item {
background: #fff !important;
border-radius: 15px !important;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
display: flex;
flex-direction: column;
}
.com-content-category-blog__item img {
width: 100% !important;
height: 200px !important;
object-fit: cover !important; /* Retalla la foto automàticament perquè totes siguin iguals */
}
/* --- ESTILS PREMIUM LLUÏSOS --- */
:root {
--vermell-lluisos: #9B1F2E;
--blanc: #ffffff;
}
/* --- DISSENY ULTRA PREMIUM LLUÏSOS --- */
:root {
--roig: #9B1F2E;
--roig-hover: #7d1925;
--blanc: #ffffff;
}
/* HERO SECTION */
.ultra-hero {
position: relative;
min-height: 90vh;
background: url('https://www.lluisoshorta.cat/images/lluisos/espais/Sala-EscenariButaques.jpg') center/cover no-repeat;
display: flex; align-items: center; justify-content: center;
color: var(--blanc); text-align: center; padding: 60px 20px;
}
.ultra-overlay {
position: absolute; inset: 0;
background: linear-gradient(rgba(155, 31, 46, 0.88), rgba(0, 0, 0, 0.75));
z-index: 1;
}
.ultra-container { position: relative; z-index: 2; max-width: 1000px; }
.ultra-badge {
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4);
padding: 10px 25px; border-radius: 50px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 1.5px;
}
.ultra-title {
font-size: clamp(3.2rem, 12vw, 6.5rem) !important; font-weight: 900 !important;
line-height: 0.95 !important; margin: 35px 0 25px !important; color: var(--blanc) !important;
}
.ultra-lead { font-size: 1.4rem; max-width: 750px; margin: 0 auto 45px; opacity: 0.95; line-height: 1.5; font-weight: 300; }
/* BOTONS AMB HOVER CORREGIT */
.ultra-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.u-btn {
padding: 18px 40px; border-radius: 50px; font-weight: 800; text-transform: uppercase;
text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 15px;
}
.u-btn-white { background: var(--blanc); color: var(--roig) !important; }
.u-btn-white:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); background: #f0f0f0; }
.u-btn-outline { background: transparent; border: 2px solid var(--blanc); color: var(--blanc) !important; }
.u-btn-outline:hover { background: var(--blanc) !important; color: var(--roig) !important; transform: translateY(-4px); }
/* STATS */
.ultra-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.2);
}
.u-num { display: block; font-size: 3.5rem; font-weight: 900; line-height: 1; margin-bottom: 5px; }
.u-label { font-size: 0.85rem; text-transform: uppercase; font-weight: 600; opacity: 0.8; letter-spacing: 1px; }
/* ABOUT SECTION */
.ultra-about { padding: 100px 20px; background: #ffffff; }
.u-wrapper { max-width: 1250px; margin: 0 auto; }
.u-about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.u-subtitle { color: var(--roig); font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 3px; }
.u-h2 { font-size: 3rem !important; color: #111 !important; margin: 15px 0 30px !important; line-height: 1.1 !important; }
.u-text-link { color: var(--roig); font-weight: 800; text-decoration: none; font-size: 1.2rem; display: inline-block; margin-top: 20px; }
.u-cards-side { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.u-card {
background: #fcfcfc; padding: 35px; border-radius: 20px; border: 1px solid #f0f0f0;
transition: 0.4s; position: relative; overflow: hidden;
}
.u-card:hover { transform: translateY(-8px); border-color: var(--roig); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.u-card-icon { font-size: 2.5rem; display: block; margin-bottom: 20px; }
.u-card h3 { font-size: 1.3rem !important; margin-bottom: 12px !important; color: #222 !important; font-weight: 800 !important; }
/* MOBILE RESPONSIVE (TOT FUNCIONAL) */
@media (max-width: 992px) {
.u-about-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; }
.ultra-stats { grid-template-columns: 1fr; gap: 40px; }
.u-cards-side { grid-template-columns: 1fr; }
.ultra-title { font-size: 3.5rem !important; }
.ultra-hero { min-height: 100vh; padding-top: 100px; }
}
/* ============================================================
RESCAT DE L'ESTRUCTURA VISUAL
============================================================ */
/* Fem que el contenidor central es comporti com el d'abans */
.container-mid {
max-width: 1320px !important; /* Mida estàndard de Cassiopeia */
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Arreglem els mòduls perquè no ocupin tot l'ample si n'hi ha més d'un */
.section-spacer {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px !important;
}
/* Si hi ha targetes (cards) de notícies, que tinguin la seva mida */
.section-spacer > div {
flex: 1;
min-width: 300px;
}
/* El component principal (on surten els articles) ha de respirar */
.content-area {
padding-top: 20px;
background: #ffffff;
}
/* El fons de la web sol ser una mica gris per destacar el blanc */
body.site {
background-color: #f8f9fa !important;
}
/* ============================================================
13. TIPOGRAFIA INTER I SECCIONS MODERNES
============================================================ */
/* Importem la font Inter si no la tens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
/* Títol de la Secció */
.section-header {
text-align: left;
margin-bottom: 40px;
padding-left: 10px;
}
.section-header .subtitle {
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
}
.section-header h2 {
color: #9B1F2E !important;
font-family: 'Inter', sans-serif !important;
font-weight: 800 !important;
font-size: 2.5rem !important;
text-transform: none !important; /* Forcem que NO sigui tot majúscules */
margin: 10px 0 !important;
}
.header-line {
width: 60px;
height: 4px;
background: #9B1F2E;
border-radius: 2px;
}
/* Millora de càrrega de fotos i aspecte de les cards */
.com-content-category-blog__item img, .item img {
aspect-ratio: 16 / 9; /* Força la proporció per evitar salts visuals al carregar */
background: #eee; /* Color de fons mentre la foto no arriba */
content-visibility: auto; /* Millora el rendiment del navegador */
transition: opacity 0.5s ease-in-out;
}
/* Els títols dels articles (H1 o H2 dins del blog) */
h1, h2, .content-heading h2, .blog-items h2 a {
font-family: 'Inter', sans-serif !important;
color: #9B1F2E !important;
text-transform: none !important; /* Ni majúscules ni res forçat */
font-weight: 700 !important;
}
/* ============================================================
SECCIÓ ACTUALITAT: TÍTOL MODERN I BLINDAT
============================================================ */
/* Contenidor de seguretat per al títol */
.section-header {
display: block;
width: 100%;
max-width: 1320px; /* Aliniat amb el contingut de la web */
margin: 60px auto 40px auto !important; /* Marge gran a dalt i sota */
padding: 0 40px !important; /* MARGE DE SEGURETAT: Mai tocarà l'extrem */
box-sizing: border-box;
}
/* El subtítol "Actualitat" */
.section-header .subtitle {
display: block;
font-family: 'Inter', sans-serif !important;
color: #666;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 5px;
}
/* El títol "Notícies i Activitats" */
.section-header h2 {
font-family: 'Inter', sans-serif !important;
color: #9B1F2E !important;
font-weight: 900 !important;
font-size: clamp(2rem, 5vw, 3rem) !important; /* Mida fluida segons pantalla */
text-transform: none !important; /* Ni majúscules ni res forçat */
line-height: 1.1 !important;
margin: 0 !important;
letter-spacing: -1px;
}
/* La línia decorativa vermella sota el títol */
.header-line {
display: block;
width: 80px;
height: 5px;
background: #9B1F2E;
margin-top: 15px;
border-radius: 50px;
}
/* Ajust per a mòbils: reduïm una mica el padding lateral */
@media (max-width: 768px) {
.section-header {
padding: 0 25px !important;
margin-top: 40px !important;
}
}
/* BANDA CREU DE SANT JORDI PREMIUM */
.csj-premium-bar {
background: #ffffff !important; /* Fons blanc pur per no carregar */
border-bottom: 1px solid #eee;
padding: 15px 0;
position: relative;
overflow: hidden;
}
.csj-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
gap: 25px;
}
/* El logo ara és més petit i elegant */
.csj-badge img {
height: 45px;
width: auto;
filter: grayscale(0.2); /* Una mica més sobri */
transition: filter 0.3s ease;
}
.csj-premium-bar:hover .csj-badge img {
filter: grayscale(0);
}
.csj-content {
display: flex;
flex-direction: column;
}
/* Etiqueta vermella petita a sobre */
.csj-tag {
font-family: 'Inter', sans-serif;
color: #9B1F2E;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 4px;
}
.csj-content p {
font-family: 'Inter', sans-serif;
color: #444 !important;
margin: 0 !important;
font-size: 0.9rem !important;
line-height: 1.2;
}
.csj-content strong {
color: #000;
font-weight: 700;
}
/* Línia decorativa subtil */
.csj-decorative-line {
flex-grow: 1;
height: 1px;
background: linear-gradient(90deg, #eee, transparent);
margin-left: 20px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.csj-container {
flex-direction: row; /* Mantinguem l'horitzontal en mòbil perquè és petit */
padding: 0 20px;
gap: 15px;
}
.csj-tag { font-size: 9px; }
.csj-content p { font-size: 0.8rem !important; }
.csj-decorative-line { display: none; }
}
/* HEADER MÉS ALT I DESTACAT */
.n-header {
background: #ffffff !important;
border-bottom: 3px solid #9B1F2E !important;
position: sticky;
top: 0;
z-index: 10000;
width: 100% !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Ombra una mica més profunda */
/* MODIFICACIÓ: Pugem de 90px a 110px o 120px */
height: 110px !important;
display: flex;
align-items: center;
transition: all 0.3s ease; /* Transició suau */
}
.n-logo img {
/* MODIFICACIÓ: Pugem l'alçada del logo per omplir el nou espai */
height: 95px !important;
width: auto !important;
object-fit: contain;
margin-top: 0; /* Centrat verticalment */
}
/* Ajustem la posició dels submenús perquè no quedin "volant" */
.n-nav li ul {
top: 65px !important; /* Ajustat perquè surti just sota el text del menú */
}
/* Accions (Cerca i Botó) */
.n-actions {
display: flex;
align-items: center;
gap: 20px;
}
/* HEADER MÉS ALT I DESTACAT */
.n-header {
background: #ffffff !important;
border-bottom: 3px solid #9B1F2E !important;
position: sticky;
top: 0;
z-index: 10000;
width: 100% !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Ombra una mica més profunda */
/* MODIFICACIÓ: Pugem de 90px a 110px o 120px */
height: 110px !important;
display: flex;
align-items: center;
transition: all 0.3s ease; /* Transició suau */
}
.n-logo img {
/* MODIFICACIÓ: Pugem l'alçada del logo per omplir el nou espai */
height: 95px !important;
width: auto !important;
object-fit: contain;
margin-top: 0; /* Centrat verticalment */
}
/* Ajustem la posició dels submenús perquè no quedin "volant" */
.n-nav li ul {
top: 65px !important; /* Ajustat perquè surti just sota el text del menú */
}
/* Accions (Cerca i Botó) */
.n-actions {
display: flex;
align-items: center;
gap: 20px;
}
/* ============================================================
VISTA DE NOTÍCIES (CATEGORY BLOG) MODERNA
============================================================ */
/* Contenidor principal de les notícies */
.com-content-category-blog__items {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
gap: 30px !important;
padding: 20px 0 !important;
}
/* Cada targeta de notícia */
.com-content-category-blog__item {
background: #ffffff !important;
border-radius: 12px !important;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
border: 1px solid #eee !important;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.com-content-category-blog__item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
/* Imatge de la notícia */
.com-content-category-blog__item .item-image {
margin: 0 !important;
width: 100% !important;
height: 220px !important;
overflow: hidden;
}
.com-content-category-blog__item .item-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Contingut de la notícia (Text) */
.blog-item-content {
padding: 25px !important;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Títol de la notícia */
.com-content-category-blog__item h2,
.com-content-category-blog__item h2 a {
font-size: 1.25rem !important;
font-weight: 800 !important;
color: #222 !important;
line-height: 1.3 !important;
margin-bottom: 15px !important;
text-decoration: none !important;
}
/* Text d'introducció */
.com-content-category-blog__item .article-introtext {
font-size: 0.95rem !important;
color: #555 !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
}
/* Botó "Llegir més" */
.readmore a.btn {
background: #f8f9fa !important;
color: #9B1F2E !important;
border: 1px solid #9B1F2E !important;
font-weight: 700 !important;
padding: 8px 20px !important;
border-radius: 6px !important;
text-transform: uppercase;
font-size: 0.85rem !important;
transition: all 0.3s;
}
.readmore a.btn:hover {
background: #9B1F2E !important;
color: #ffffff !important;
}.targeta-especial {
border: 2px dashed #9B1F2E !important;
background: #fff9f9 !important;
}
/* ============================================================
TRANSFORMACIÓ DE L'AGENDA (RSEvents!Pro) A GRID MODERN
============================================================ */
/* Contenidor principal: el convertim en graella */
ul.rs_events_container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
gap: 25px !important;
padding: 0 !important;
list-style: none !important;
}
/* Cada targeta d'esdeveniment */
li.rs_event_detail {
background: #ffffff !important;
border: 1px solid #eee !important;
border-radius: 15px !important;
padding: 0 !important; /* Treiem el padding interior per la imatge */
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
}
li.rs_event_detail:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
border-color: #9B1F2E !important;
}
/* Bloc de detalls (Text) */
.rs_event_details {
padding: 20px !important;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* Títol de l'activitat */
.rsepro-title-block a {
font-size: 1.25rem !important;
font-weight: 800 !important;
color: #9B1F2E !important;
text-decoration: none !important;
line-height: 1.3;
}
/* Data destacada */
.rsepro-date-block {
background: #fdf2f4 !important;
padding: 8px 12px !important;
border-radius: 8px !important;
margin: 10px 0 !important;
font-size: 0.9rem !important;
color: #444 !important;
border-left: 3px solid #9B1F2E;
}
/* Descripció curta */
.rsepro-small-description-block {
font-size: 0.9rem !important;
color: #666 !important;
line-height: 1.5 !important;
margin-top: 10px !important;
}
/* Categories i Etiquetes (més discretes) */
.rsepro-event-taxonomies-block {
font-size: 0.75rem !important;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
margin-top: auto; /* Les empeny al final de la targeta */
padding-top: 15px;
}
.rsepro-event-taxonomies-block a {
color: #9B1F2E !important;
font-weight: 600;
}
/* Amagar elements innecessaris en el grid */
.rs_options, .rsepro-event-location-block span[itemprop="address"] {
display: none !important;
}
/* Ajust per a mòbils */
@media (max-width: 480px) {
ul.rs_events_container {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
AGENDA PREMIUM - LLUÏSOS D'HORTA
============================================================ */
/* 1. GRID I TARGETES */
ul.rs_events_container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
gap: 30px !important;
padding: 0 !important;
}
li.rs_event_detail {
background: #ffffff !important;
border-radius: 20px !important;
border: 1px solid rgba(0,0,0,0.05) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
li.rs_event_detail:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(155, 31, 46, 0.15) !important;
border-color: #9B1F2E !important;
}
/* 2. ICONES PER CATEGORIES (Utilitzant Emojis o caràcters segons el text) */
.rsepro-title-block::before {
display: inline-block;
margin-right: 10px;
font-size: 1.4rem;
vertical-align: middle;
}
/* Identificadors per categories */
li:has(a[href*="teatre"]) .rsepro-title-block::before { content: "🎭"; }
li:has(a[href*="jazz"]) .rsepro-title-block::before { content: "🎷"; }
li:has(a[href*="cinema"]) .rsepro-title-block::before { content: "🎬"; }
li:has(a[href*="comedia"]) .rsepro-title-block::before { content: "🎤"; }
li:has(a[href*="dansa"]) .rsepro-title-block::before { content: "💃"; }
/* 4. CONTINGUT ALINEAT */
.rs_event_details {
padding: 25px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.rsepro-title-block {
min-height: 3.5rem;
display: flex;
align-items: center;
}
.rsepro-title-block a {
color: #1a1a1a !important;
font-size: 1.3rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-decoration: none !important;
}
/* 5. DATA ESTIL "BADGE" PREMIUM */
.rsepro-date-block {
order: -1; /* Posa la data a sobre de tot */
background: #f8f9fa !important;
color: #9B1F2E !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
padding: 6px 15px !important;
border-radius: 50px !important;
display: inline-block !important;
width: fit-content;
margin-bottom: 15px !important;
border: 1px solid rgba(155, 31, 46, 0.1) !important;
}
li.rs_event_detail:hover .rs_event_details::after {
background: #7a1823;
}
/* 7. NETEJA DE TAXONOMIES */
.rsepro-event-taxonomies-block {
border-top: 1px solid #eee;
margin-top: 20px !important;
padding-top: 15px !important;
font-size: 0.8rem !important;
color: #888 !important;
}
/* ============================================================
SOLUCIÓ DEFINITIVA CLIC EN TOTA LA CARD I BOTÓ
============================================================ */
/* 1. Assegurem que la card té posició relativa */
li.rs_event_detail {
position: relative !important;
}
/* 2. L'enllaç del títol o de la imatge el fem "gegant" */
/* Busquem l'enllaç principal de l'esdeveniment i el fem ocupar tota la card */
li.rs_event_detail .rs_event_link {
position: static !important;
}
li.rs_event_detail .rs_event_link::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important; /* Capa per sobre de tot */
cursor: pointer !important;
}
/* 4. Efecte visual quan l'usuari passa per sobre (hover) */
li.rs_event_detail:hover .rs_event_details::after {
background: #000000 !important;
transform: translateY(-2px) !important;
}
/* 5. Altres enllaços (com categories o tags) han d'estar PER SOBRE del clic general
per si algú vol clicar la categoria específica */
.rsepro-event-categories-block a,
.rsepro-event-tags-block a,
.rsepro-event-location-block a {
position: relative !important;
z-index: 20 !important;
}
/* ============================================================
CARTELLS GRANS I IMPONENTS (SENCERS)
============================================================ */
.rs_event_image {
width: 100% !important;
height: auto !important; /* Deixem que l'alçada sigui natural */
max-height: 450px !important; /* Però posem un límit perquè no sigui infinit */
background: #fdf2f4 !important;
display: block !important;
overflow: hidden;
position: relative;
border-bottom: 1px solid #eee;
}
.rs_event_image img {
width: 100% !important;
height: auto !important; /* L'alçada s'adapta a l'amplada */
display: block !important;
object-fit: cover !important; /* Fem que ocupi tot l'ample */
/* Si vols que es vegi exactament el que hi ha a dalt del cartell
(on sol anar el títol important), usem top: */
object-position: top !important;
transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Quan passem el ratolí, fem un zoom molt suau per donar vida */
li.rs_event_detail:hover .rs_event_image img {
transform: scale(1.08);
}
/* Ajustem el contingut de sota perquè no "balli" */
.rs_event_details {
padding: 20px !important;
background: white;
z-index: 5;
}
/* Truc perquè tota la imatge gran sigui clicable */
.rs_event_link.thumbnail {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* ============================================================
PÀGINA DETALL ESDEVENIMENT - PREMIUM
============================================================ */
.rs_event_wrapper {
max-width: 1000px;
margin: 40px auto;
font-family: 'Inter', sans-serif;
display: grid;
grid-template-columns: 350px 1fr; /* Columna imatge | Columna contingut */
gap: 40px;
}
}
/* 2. TÍTOL I META (Dreta) */
.rs_event_title {
grid-column: 2; /* Forcem que el títol vagi a la dreta */
font-size: 2.5rem !important;
font-weight: 900 !important;
color: #1a1a1a;
line-height: 1.1;
margin-bottom: 20px !important;
}
.rs_event_meta {
grid-column: 2;
list-style: none;
padding: 20px !important;
background: #f8f9fa;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 30px !important;
}
.rs_event_meta li {
font-size: 0.95rem;
color: #444;
}
.rs_event_meta li i {
color: #9B1F2E; /* Color vermell per les icones */
width: 25px;
}
/* 3. DESCRIPCIÓ */
.rs_event_description {
grid-column: 2;
font-size: 1.05rem;
line-height: 1.7;
color: #333;
}
/* 4. BOTÓ DE COMPRA (El fem brillar) */
.rs_event_description .btn-info {
background: #9B1F2E !important;
border: none !important;
padding: 18px 30px !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 1.1rem !important;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 20px rgba(155, 31, 46, 0.3) !important;
transition: all 0.3s ease;
margin: 40px auto !important;
}
.rs_event_description .btn-info:hover {
transform: scale(1.03);
background: #000 !important;
}
/* 5. PATROCINADORS I SHARE */
.rs_event_sponsors, .rs_event_share {
grid-column: 1 / span 2; /* Ocupen tota l'amplada a sota */
padding-top: 40px;
border-top: 1px solid #eee;
margin-top: 40px;
}
.rs_event_sponsors {
display: flex;
gap: 30px;
align-items: center;
}
.rs_sponsor_img {
height: 60px;
filter: grayscale(1);
opacity: 0.6;
transition: all 0.3s;
}
.rs_sponsor_img:hover {
filter: grayscale(0);
opacity: 1;
}
/* RESPONSIVE: En mòbil, tot en una columna */
@media (max-width: 768px) {
.rs_event_wrapper {
grid-template-columns: 1fr;
}
.rs_event_wrapper .rs_event_image {
position: static;
margin-bottom: 20px;
}
.rs_event_title, .rs_event_meta, .rs_event_description {
grid-column: 1;
}
}
/* ============================================================
PÀGINA DETALL ESDEVENIMENT - SENSE SOLAPAMENTS
============================================================ */
.rs_event_wrapper {
max-width: 1100px;
margin: 40px auto;
font-family: 'Inter', sans-serif;
display: grid;
/* Creem dues columnes: esquerra per foto, dreta per text */
grid-template-columns: 380px 1fr;
gap: 50px;
align-items: start; /* Important: cada columna mesura el que mesura el seu contingut */
}
/* 2. BLOC DE TEXT (TÍTOL, META I DESCRIPCIÓ) */
.rs_event_title {
grid-column: 2;
font-size: 2.8rem !important;
font-weight: 900 !important;
line-height: 1.1;
margin: 0 0 20px 0 !important;
}
.rs_event_meta {
grid-column: 2;
list-style: none;
padding: 20px !important;
background: #fdf2f4; /* Rosa suau corporatiu */
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 30px !important;
}
.rs_event_description {
grid-column: 2;
font-size: 1.05rem;
line-height: 1.8;
}
/* 3. BLOCS INFERIORS (PATROCINADORS I SHARE) */
/* Forcem que aquests blocs comencin a sota de tot el grid anterior */
.rs_event_sponsors,
.rs_event_share {
grid-column: 1 / span 2;
clear: both;
padding-top: 40px;
border-top: 1px solid #eee;
margin-top: 40px;
position: relative;
z-index: 20; /* Per sobre de qualsevol possible resta d'sticky */
background: white; /* Per assegurar que no es veu res per sota */
}
/* 4. BOTÓ DE COMPRA DINÀMIC */
.rs_event_description .btn-info {
background: #9B1F2E !important;
border: none !important;
padding: 20px !important;
border-radius: 12px !important;
font-weight: 800 !important;
display: block !important;
width: 100% !important;
max-width: 400px;
margin: 40px 0 !important;
text-align: center;
color: white !important;
box-shadow: 0 10px 25px rgba(155, 31, 46, 0.2) !important;
}
/* AJUST MÒBIL */
@media (max-width: 850px) {
.rs_event_wrapper {
grid-template-columns: 1fr;
padding: 0 20px;
}
.rs_event_image {
position: static; /* Treiem l'sticky en mòbil */
max-width: 400px;
margin: 0 auto 30px;
}
.rs_event_title, .rs_event_meta, .rs_event_description {
grid-column: 1;
}
}
/* Ajust específic per al mòdul en posició top-a */
.tp-top-a .rs_events_module,
.pos-top-a .rs_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 25px !important;
padding: 40px 0 !important; /* Donem aire per dalt i per baix */
max-width: 1200px;
margin: 0 auto !important;
}
/* Estil de les targetes del mòdul */
.rs_events_module li {
background: #ffffff;
border-radius: 15px;
border: 1px solid #eee;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.rs_events_module li:hover {
transform: translateY(-5px);
border-color: #9B1F2E;
box-shadow: 0 12px 30px rgba(155, 31, 46, 0.1);
}
/* ============================================================
AGENDA HOME: CARTELLERA PREMIUM (TOP-A)
============================================================ */
/* 1. CONTENIDOR PRINCIPAL */
.top-a.card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 40px 0 !important;
}
/* Títol de la secció: Gran i amb caràcter */
.top-a.card .card-header {
background: transparent !important;
border: none !important;
text-align: center;
font-size: 2.2rem !important;
font-weight: 900 !important;
color: #1a1a1a !important;
text-transform: uppercase;
letter-spacing: -1px;
margin-bottom: 40px !important;
}
/* 2. EL GRID DE TARGETES */
ul.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 25px !important;
padding: 0 !important;
list-style: none !important;
}
/* 3. LA TARGETA (CARD) */
ul.rsepro_events_module li {
background: #ffffff !important;
border-radius: 24px !important;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,0.05) !important;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
ul.rsepro_events_module li:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 50px rgba(155, 31, 46, 0.2) !important;
border-color: #9B1F2E !important;
}
/* 4. LA IMATGE (EL CARTELL) */
.rsepro-image {
width: 100% !important;
height: 380px !important; /* Alçada potent per veure el cartell */
overflow: hidden;
background: #f0f0f0;
}
.rsepro-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* El cartell omple tot l'espai */
transition: transform 0.8s ease;
}
ul.rsepro_events_module li:hover .rsepro-image img {
transform: scale(1.1);
}
/* 5. EL TEXT I INFO */
/* Fem que el text surti sobre una capa degradada a la part inferior de la imatge */
ul.rsepro_events_module li a {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
padding: 0 20px !important;
color: #ffffff !important;
font-size: 1.2rem !important;
font-weight: 800 !important;
line-height: 1.2;
text-shadow: 0 2px 10px rgba(0,0,0,0.8);
z-index: 3;
text-decoration: none !important;
}
/* La data estilitzada */
ul.rsepro_events_module li small {
position: absolute;
bottom: 20px;
left: 20px;
background: #9B1F2E; /* Vermell Lluïsos */
color: white !important;
padding: 4px 12px;
border-radius: 50px;
font-weight: 700;
font-size: 0.75rem !important;
z-index: 3;
}
/* 6. GRADIENT DE PROTECCIÓ (Perquè el text blanc es llegeixi sempre) */
ul.rsepro_events_module li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
z-index: 2;
}
/* Eliminem el
que sobra */
ul.rsepro_events_module li br {
display: none;
}
/* ============================================================
BLOG MODERN I DINÀMIC - LLUÏSOS D'HORTA
============================================================ */
/* 1. CONTENIDOR PRINCIPAL: Grid modern */
.blog-items {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
gap: 30px !important;
padding: 20px 0 !important;
}
/* 2. NOTÍCIA DESTACADA (La primera notícia ocupa el doble) */
.blog-items .blog-item:first-child {
grid-column: 1 / span 2; /* Ocupa dues columnes */
display: flex;
flex-direction: row;
background: #fdf2f4 !important; /* Color suau per destacar */
}
@media (max-width: 900px) {
.blog-items .blog-item:first-child {
grid-column: 1;
flex-direction: column;
}
}
/* 3. LA TARGETA DE NOTÍCIA (BLOG ITEM) */
.blog-item {
background: #ffffff !important;
border-radius: 20px !important;
overflow: hidden;
border: 1px solid #eee !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.blog-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(155, 31, 46, 0.1) !important;
border-color: #9B1F2E !important;
}
/* 5. CONTINGUT DE LA NOTÍCIA */
.item-content {
padding: 25px !important;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-items .blog-item:first-child .item-content {
width: 50%;
justify-content: center;
}
/* Títols potents */
.item-title {
font-size: 1.4rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin-bottom: 15px !important;
}
.item-title a {
color: #1a1a1a !important;
text-decoration: none !important;
}
/* 6. BOTÓ "LLEGIR MÉS" MINIMALISTA */
.readmore {
margin-top: auto !important;
padding-top: 15px;
}
.readmore .btn-secondary {
background: transparent !important;
border: 2px solid #9B1F2E !important;
color: #9B1F2E !important;
border-radius: 50px !important;
padding: 8px 20px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
text-transform: uppercase;
transition: all 0.3s !important;
}
.readmore .btn-secondary:hover {
background: #9B1F2E !important;
color: #fff !important;
}
/* 7. NETEJA DE CODIGOS INLINE (Eliminem els estils lletjos que venen del text) */
.item-content section,
.item-content div,
.item-content p {
padding: 0 !important;
margin: 0 0 10px 0 !important;
max-width: 100% !important;
font-family: inherit !important;
text-align: left !important;
}
/* Amaguem intros massa llargues per mantenir l'alçada neta */
.item-content p:not(.readmore) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #666;
font-size: 0.95rem;
}
/* ============================================================
BLOG MODERN I DINÀMIC - LLUÏSOS D'HORTA
============================================================ */
/* 1. CONTENIDOR PRINCIPAL: Grid modern */
.blog-items {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
gap: 30px !important;
padding: 20px 0 !important;
}
/* 2. NOTÍCIA DESTACADA (La primera notícia ocupa el doble) */
.blog-items .blog-item:first-child {
grid-column: 1 / span 2; /* Ocupa dues columnes */
display: flex;
flex-direction: row;
background: #fdf2f4 !important; /* Color suau per destacar */
}
@media (max-width: 900px) {
.blog-items .blog-item:first-child {
grid-column: 1;
flex-direction: column;
}
}
/* 3. LA TARGETA DE NOTÍCIA (BLOG ITEM) */
.blog-item {
background: #ffffff !important;
border-radius: 20px !important;
overflow: hidden;
border: 1px solid #eee !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.blog-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(155, 31, 46, 0.1) !important;
border-color: #9B1F2E !important;
}
/* 4. IMATGES: Rectificació de les mides ràncies */
.blog-item .item-image {
margin: 0 !important;
float: none !important; /* Eliminem el float antic */
width: 100% !important;
height: 250px;
overflow: hidden;
}
.blog-items .blog-item:first-child .item-image {
height: auto;
width: 50% !important;
}
.blog-item .item-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.6s ease;
}
.blog-item:hover .item-image img {
transform: scale(1.05);
}
/* 5. CONTINGUT DE LA NOTÍCIA */
.item-content {
padding: 25px !important;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-items .blog-item:first-child .item-content {
width: 50%;
justify-content: center;
}
/* Títols potents */
.item-title {
font-size: 1.4rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin-bottom: 15px !important;
}
.item-title a {
color: #1a1a1a !important;
text-decoration: none !important;
}
/* 6. BOTÓ "LLEGIR MÉS" MINIMALISTA */
.readmore {
margin-top: auto !important;
padding-top: 15px;
}
.readmore .btn-secondary {
background: transparent !important;
border: 2px solid #9B1F2E !important;
color: #9B1F2E !important;
border-radius: 50px !important;
padding: 8px 20px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
text-transform: uppercase;
transition: all 0.3s !important;
}
.readmore .btn-secondary:hover {
background: #9B1F2E !important;
color: #fff !important;
}
/* 7. NETEJA DE CODIGOS INLINE (Eliminem els estils lletjos que venen del text) */
.item-content section,
.item-content div,
.item-content p {
padding: 0 !important;
margin: 0 0 10px 0 !important;
max-width: 100% !important;
font-family: inherit !important;
text-align: left !important;
}
/* Amaguem intros massa llargues per mantenir l'alçada neta */
.item-content p:not(.readmore) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #666;
font-size: 0.95rem;
}
/* ============================================================
HERO SECTION: FOTO PROTAGONISTA I ESTIL NET
============================================================ */
.hero-section {
position: relative;
min-height: 70vh; /* Una mica més baix perquè es vegi l'agenda a sota */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
/* LA FOTO: Posa aquí la teva millor imatge */
background-image: url('/images/lluisos/2023.12.17-Pastorets%201.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed; /* Efecte parallax: la foto es queda fixa en fer scroll */
color: #ffffff;
}
/* Capa de protecció: fa que la foto es vegi bé però el text sigui llegible */
.hero-section::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4); /* Filtre fosc suau */
z-index: 1;
}
.hero-content {
position: relative;
z-index: 10;
max-width: 800px;
}
/* TÍTOL: Més net i professional */
.hero-content h1 {
font-size: 4rem !important;
font-weight: 800 !important;
color: #ffffff !important;
text-transform: none; /* No tot en majúscules si prefereixes un look més humà */
letter-spacing: -1px;
margin-bottom: 10px !important;
text-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}
/* SUBTÍTOL: Net i clar */
.hero-content p {
font-size: 1.4rem !important;
font-weight: 400 !important;
color: #ffffff !important;
opacity: 1;
margin-bottom: 35px !important;
text-shadow: 1px 1px 8px rgba(0,0,0,0.5);
}
/* BOTONS: Més arrodonits i moderns */
.n-btn {
display: inline-block;
padding: 15px 35px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
border-radius: 8px !important; /* Més quadrat-arrodonit, estil modern */
text-decoration: none !important;
transition: all 0.3s ease !important;
border: none !important;
}
/* Botó Agenda (Vermell Lluïsos) */
.n-btn:not(.btn-alt) {
background: #9B1F2E !important;
color: white !important;
margin-right: 15px;
}
/* Botó Soci (Blanc/Transparent) */
.btn-alt {
background: white !important;
color: #1a1a1a !important;
}
.n-btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* ============================================================
PÀGINA DE SOCIS: DISSENY ELEGANT I COMPARATIU
============================================================ */
/* Contenidors de secció */
.socis-section {
padding: 60px 0;
border-bottom: 1px solid #eee;
}
/* Taula comparativa moderna */
.taula-preus {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
margin: 30px 0;
}
.taula-preus th {
background: #9B1F2E;
color: white;
padding: 20px;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
}
.taula-preus td {
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
background: white;
}
.taula-preus tr:last-child td { border: none; }
.taula-preus .preu-soci {
font-weight: 800;
color: #9B1F2E;
background: #fffcfc; /* Un toc de color per destacar la columna soci */
}
/* Caixes d'avantatges fiscals (Glassmorphism suau) */
.fiscal-box {
background: #f8f9fa;
border-left: 5px solid #9B1F2E;
padding: 30px;
border-radius: 0 15px 15px 0;
margin: 20px 0;
}
/* Grid de convenis */
.conveni-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.conveni-card {
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid #eee;
transition: all 0.3s ease;
}
.conveni-card:hover {
border-color: #9B1F2E;
transform: translateY(-5px);
}
/* EFECTE BRILLANT PER A LA CALCULADORA DE SOCIS */
div[style*="background: #1a1a1a"] {
position: relative;
border: 1px solid rgba(255,255,255,0.1);
}
div[style*="background: #1a1a1a"]::after {
content: '';
position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: radial-gradient(circle, rgba(155,31,46,0.15) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
}
/* Animació de les files de descompte */
div[style*="display: flex; justify-content: space-between"]:hover {
background-color: #fdfdfd;
padding-left: 35px !important;
transition: all 0.3s ease;
}
/* AMAGAR MÒDULS DE LA HOME A LA PÀGINA DE SOCIS */
/* Suposem que l'ID de l'item de menú de socis és el que hagis creat */
body.itemid-XXX .mod-custom,
body.itemid-XXX .rseventspro-module {
display: none !important;
}
/* Si no saps l'ID, podem usar la classe de l'article */
.socis-wrapper {
margin-top: 0 !important;
padding-top: 20px !important;
}
/* Això elimina espais en blanc que puguin quedar a dalt */
#t3-mainbody, .main-content {
padding-top: 0 !important;
}
/* Unifiquem top-a i top-b perquè no facin columnes */
.grid-child.container-top-a,
.grid-child.container-top-b {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
}
/* Fem que cada mòdul ocupi tot l'ample */
.grid-child.container-top-a > *,
.grid-child.container-top-b > * {
width: 100% !important;
margin-bottom: 40px !important;
}
.seccions-header {
text-align: left !important; /* Canvi de center a left */
max-width: 100% !important;
margin: 0 0 40px 0 !important;
padding: 0 !important;
}
.seccions-header h2 {
font-size: 3rem !important; /* Mida més semblant a Notícies */
letter-spacing: -1px !important;
color: #9B1F2E !important; /* El teu color granat */
}
.header-line {
width: 80px;
height: 5px;
background: #9B1F2E;
margin-top: 15px;
border-radius: 50px;
}
/* Això busca la classe que hem posat al camp "Classe de capçalera" */
.section-header {
text-align: left !important;
color: #9B1F2E !important;
font-weight: 900 !important;
font-family: 'Inter', sans-serif !important;
text-transform: none !important;
margin-bottom: 15px !important;
display: block !important;
}
/* Afegim la línia vermella automàticament sota el títol del mòdul */
.section-header::after {
content: "";
display: block;
width: 80px;
height: 5px;
background: #9B1F2E;
margin-top: 10px;
border-radius: 50px;
}
/* --- SECCIÓ FINAL UNIFICADA PREMIUM --- */
.premium-final-experience { background: #ffffff; padding-top: 100px; font-family: 'Inter', sans-serif; }
/* SPONSORS: ART GALLERY STYLE */
.gallery-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: center; }
.premium-header-center { margin-bottom: 60px; }
.p-badge { color: #9B1F2E; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 4px; }
.p-h2 { font-size: 3.2rem !important; color: #111 !important; margin-top: 20px !important; font-weight: 900 !important; line-height: 1.1 !important; }
.p-divider-elegant { width: 80px; height: 4px; background: #9B1F2E; margin: 30px auto 0; border-radius: 10px; }
.p-spacer-light { width: 200px; height: 1px; background: #eee; margin: 60px auto; }
.gallery-grid-main { display: flex; justify-content: center; gap: 80px; margin-bottom: 30px; align-items: center; }
.gallery-item-large img { height: 90px; filter: grayscale(1); opacity: 0.5; transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.gallery-item-large:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
.gallery-grid-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; opacity: 0.6; padding-bottom: 80px; }
.gallery-mini-box img { max-height: 50px; width: auto; filter: grayscale(1); transition: 0.4s; }
.gallery-mini-box:hover img { filter: grayscale(0); transform: translateY(-8px); opacity: 1; }
/* MAPA IMMERSIU I CARD DE VIDRE */
.immersive-contact {
position: relative; height: 750px; display: flex; align-items: center; justify-content: flex-end;
overflow: hidden; border-top: 1px solid #eee;
}
.map-full-bg { position: absolute; inset: 0; z-index: 1; filter: grayscale(0.2) contrast(1.05); }
.map-full-bg iframe { width: 100%; height: 100%; border: 0; pointer-events: auto; }
.contact-glass-card {
position: relative; z-index: 2; background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
width: 480px; padding: 70px; margin-right: 8%; border-radius: 40px;
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255,255,255,0.5);
}
.glass-badge { color: #9B1F2E; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 3px; }
.glass-title { font-size: 2.8rem !important; color: #111 !important; margin: 20px 0 40px !important; font-weight: 900 !important; }
.g-row { display: flex; align-items: center; gap: 25px; margin-bottom: 30px; }
.g-icon { font-size: 1.6rem; background: #fff; width: 55px; height: 55px; border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.04); }
.g-row p { color: #333; font-size: 1.15rem; font-weight: 500; margin: 0; text-align: left; }
.glass-btn {
display: block; width: 100%; padding: 25px; background: #9B1F2E; color: #fff !important;
text-align: center; text-decoration: none !important; border-radius: 20px;
font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
transition: all 0.5s ease; margin-top: 30px;
}
.glass-btn:hover { background: #111; transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
/* RESPONSIVE */
@media (max-width: 992px) {
.immersive-contact { height: auto; flex-direction: column; }
.map-full-bg { position: relative; height: 400px; order: 2; width: 100%; }
.contact-glass-card { width: 100%; margin: 0; border-radius: 0; padding: 50px 25px; order: 1; background: #fff; }
.gallery-grid-main { gap: 40px; flex-direction: column; }
.p-h2 { font-size: 2.2rem !important; }
}
/* 1. Botó del header (Més polit) */
.n-search-trigger {
background: #f4f4f4; /* Un gris molt clar per destacar-lo una mica */
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: 800;
font-size: 12px;
color: #111;
margin-right: 20px;
padding: 8px 18px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.n-search-trigger:hover {
background: #9B1F2E;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(155, 31, 46, 0.3);
}
/* 2. Overlay de cerca (EL CANVI RADICAL: VERMELL) */
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #9B1F2E; /* Vermell corporatiu */
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.search-overlay.active {
opacity: 1;
visibility: visible;
}
/* 3. Contingut del buscador */
.search-overlay-content {
width: 90%;
max-width: 900px;
text-align: center;
transform: scale(0.9);
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.search-overlay.active .search-overlay-content {
transform: scale(1);
}
/* 4. Estil del input (Lletra blanca i gran) */
.search-overlay-content input[type="search"],
.search-overlay-content input[type="text"] {
width: 100%;
border: none;
border-bottom: 4px solid rgba(255, 255, 255, 0.3);
background: transparent;
font-size: 60px; /* Molt més gran i impactant */
font-weight: 900;
padding: 20px;
outline: none;
text-align: center;
color: #ffffff; /* Text blanc */
transition: border-color 0.3s;
}
.search-overlay-content input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.search-overlay-content input:focus {
border-bottom-color: #ffffff;
}
.search-hint {
margin-top: 30px;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 4px;
font-size: 14px;
font-weight: 600;
}
/* 5. Botó de tancar (Modern i blanc) */
.close-search {
position: absolute;
top: 50px;
right: 50px;
font-size: 40px;
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.close-search:hover {
background: #ffffff;
color: #9B1F2E;
transform: rotate(90deg);
}
/* --- NAVEGACIÓ CORREGIDA --- */
.n-nav ul {
display: flex !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 25px !important;
}
.n-nav li {
position: relative !important;
/* Reduïm l'espai per evitar el salt del cursor */
padding-bottom: 10px;
margin-bottom: -10px;
}
.n-nav a {
color: #111 !important;
text-transform: uppercase;
font-weight: 800;
font-size: 13px;
text-decoration: none !important;
padding: 10px 0;
display: block;
}
/* --- SUBMENÚS AMB "PONT INVISIBLE" --- */
.n-nav li ul {
display: none !important;
position: absolute !important;
/* El top ha d'estar a prop del text per no perdre el contacte */
top: 100% !important;
left: 0 !important;
background: #fff !important;
min-width: 250px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
z-index: 9999 !important;
padding: 10px 0 !important;
flex-direction: column !important;
border-top: 3px solid #9B1F2E !important;
/* EL TRUC: Un pseudo-element que omple el buit per dalt */
margin-top: 0px;
}
/* Creem una zona invisible a sobre del submenú perquè el cursor mai perdi el focus */
.n-nav li ul::before {
content: "";
position: absolute;
top: -15px; /* Crea un pont de 15px cap amunt */
left: 0;
width: 100%;
height: 15px;
background: transparent;
}
.n-nav li:hover > ul {
display: flex !important;
}
.n-nav li ul a {
padding: 12px 20px !important;
font-size: 12px !important;
text-transform: none !important;
border-bottom: 1px solid #f9f9f9 !important;
font-weight: 600 !important;
}
.n-nav li ul a:hover {
background: #fdfdfd;
color: #9B1F2E !important;
}
/* --- ESTILS SUBHEADER (TOP BAR) --- */
.n-top-bar {
background: #111; /* Negre elegant */
color: rgba(255,255,255,0.8);
padding: 8px 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.n-top-bar .n-container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Esquerra: Creu de Sant Jordi */
.creu-icon { color: #9B1F2E; margin-right: 5px; font-size: 14px; }
.highlight { color: #fff; }
/* Dreta: Social + Login */
.n-top-right { display: flex; align-items: center; gap: 15px; }
.n-social { display: flex; gap: 12px; }
.n-social a {
color: rgba(255,255,255,0.6) !important;
text-decoration: none !important;
transition: color 0.3s;
}
.n-social a:hover { color: #fff !important; }
.top-sep { color: rgba(255,255,255,0.2); }
/* Botó Àrea Socis */
.n-top-login {
color: #fff !important;
text-decoration: none !important;
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.1);
padding: 4px 10px;
border-radius: 3px;
transition: background 0.3s;
}
.n-top-login:hover {
background: #9B1F2E; /* Es torna vermell en passar el ratolí */
}
.user-icon { font-size: 12px; }
/* Ajust del Header per sota del Subheader */
.n-header {
background: #fff;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 1000;
}
/* --- ESTIL CORPORATIU LLUÏSOS D'HORTA --- */
.com-contact.contact {
max-width: 1200px;
margin: 40px auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
/* Títol Principal */
.page-header h1 {
color: #1a1a1a;
font-weight: 800;
font-size: 2.8rem;
border-bottom: 4px solid #9b1f2e;
padding-bottom: 15px;
margin-bottom: 40px;
}
/* Contenidor de 2 columnes */
.com-contact__container {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
/* Columna Esquerra: La nostra Informació */
.com-contact__info {
flex: 1;
min-width: 320px;
background: #fdfdfd;
padding: 30px;
border-radius: 12px;
border: 1px solid #eee;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.com-contact__info h3 {
color: #9b1f2e;
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 25px;
font-weight: 700;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.contact-address dt {
color: #666;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1px;
margin-top: 15px;
}
.contact-address dd {
font-size: 1.1rem;
margin-left: 0;
margin-bottom: 5px;
font-weight: 500;
}
/* Columna Dreta: Formulari */
.contact-form {
flex: 1.5;
min-width: 350px;
background: #fff;
padding: 35px;
border-radius: 12px;
border-top: 5px solid #9b1f2e; /* Franja corporativa superior */
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.contact-form legend {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 30px;
border: none;
}
/* Millora dels camps del formulari */
.contact-form .form-control {
border: 1px solid #ccc;
border-radius: 6px;
padding: 12px;
font-size: 1rem;
background-color: #fcfcfc;
transition: all 0.2s;
}
.contact-form .form-control:focus {
border-color: #9b1f2e;
box-shadow: 0 0 0 3px rgba(155, 31, 46, 0.1);
background-color: #fff;
}
/* El Botó Vermell Lluïsos */
.contact-form .btn-primary {
background-color: #9b1f2e !important;
border: none !important;
padding: 15px 35px !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
text-transform: uppercase;
border-radius: 6px !important;
cursor: pointer;
transition: background 0.3s;
}
.contact-form .btn-primary:hover {
background-color: #7a1824 !important;
}
/* Mapa i Info General */
.com-contact__miscinfo {
width: 100%;
margin-top: 50px;
border-top: 1px solid #eee;
padding-top: 40px;
}
.com-contact__miscinfo h3 {
font-weight: 700;
margin-bottom: 20px;
}
.com-contact__miscinfo iframe {
width: 100% !important;
border-radius: 12px;
border: 1px solid #eee;
}
/* Ajustos per a mòbils */
@media (max-width: 768px) {
.com-contact__container {
flex-direction: column;
}
.page-header h1 {
font-size: 2rem;
}
}
/* TRANSFORMACIÓ BREADCRUMBS PREMIUM - LLUÏSOS D'HORTA */
/* Contenidor principal */
.mod-breadcrumbs.breadcrumb {
background-color: #ffffff !important; /* Fons blanc pur */
border-radius: 15px !important;
padding: 12px 25px !important;
margin: 20px 0 30px 0 !important;
box-shadow: 0 4px 15px rgba(153, 0, 73, 0.05) !important; /* Ombra molt suau granat */
border: 1px solid #f0f0f0 !important;
display: flex !important;
align-items: center !important;
list-style: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.9rem !important;
}
/* Text "Estàs aquí" */
.mod-breadcrumbs__here {
font-weight: 700 !important;
color: #999 !important;
text-transform: uppercase !important;
font-size: 0.75rem !important;
letter-spacing: 1px !important;
margin-right: 15px !important;
border-right: 2px solid #eee !important;
padding-right: 15px !important;
}
/* Items de la llista */
.mod-breadcrumbs__item.breadcrumb-item {
display: flex !important;
align-items: center !important;
color: #666 !important;
}
/* Enllaços (Inici, Seccions, etc.) */
.mod-breadcrumbs__item a.pathway {
color: #990049 !important; /* Vermell Lluïsos */
text-decoration: none !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.mod-breadcrumbs__item a.pathway:hover {
color: #5b121b !important; /* Vermell més fosc al passar el ratolí */
transform: translateY(-1px) !important;
}
/* Separador (la barra / o la fletxa) */
.breadcrumb-item + .breadcrumb-item::before {
content: "\f105" !important; /* Icona de fletxa FontAwesome */
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: #ccc !important;
padding: 0 12px !important;
}
/* Item actiu (on ets ara) */
.mod-breadcrumbs__item.active {
color: #333 !important;
font-weight: 700 !important;
}
/* Eliminar estils antics de float */
.float-start {
float: none !important;
}
/* Adaptació mòbil */
@media (max-width: 768px) {
.mod-breadcrumbs.breadcrumb {
padding: 10px 15px !important;
overflow-x: auto !important; /* Permet scroll lateral si és molt llarg */
white-space: nowrap !important;
}
.mod-breadcrumbs__here {
display: none !important; /* Amaguem "Estàs aquí" en mòbil per estalviar espai */
}
}
/* ============================================================
LLUÏSOS D'HORTA: SOLUCIÓ FINAL ANTI-CAOS
============================================================ */
/* 1. FIX DE LA LUPA GEGANT I CERCA */
.search-wrapper {
position: relative !important;
display: flex !important;
align-items: center !important;
background: #f5f5f7 !important;
padding: 8px 16px !important;
border-radius: 50px !important;
max-height: 40px !important;
width: 200px !important;
}
.search-input-modern {
border: none !important;
background: transparent !important;
width: 100% !important;
font-size: 14px !important;
padding: 0 !important;
outline: none !important;
}
/* Forcem la mida de la icona perquè no torni a créixer */
.search-icon-svg {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
stroke: #666 !important;
margin-right: 8px !important;
}
/* 2. SUBMENÚS: FI AL SOLAPAMENT (image_102f04.png) */
.n-nav-container ul li.parent > ul {
display: none !important; /* Per defecte amagat */
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
position: absolute !important;
top: 60px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 700px !important;
background: #ffffff !important;
padding: 25px !important;
border-radius: 20px !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
border: 1px solid #ddd !important;
z-index: 999999 !important;
}
/* Només mostrem EL submenú sobre el qual estem, no tots a la vegada */
.n-nav-container ul li.parent:hover > ul {
display: grid !important;
}
/* Estil dels botons interns */
.n-nav-container ul li.parent ul li a {
background: #f8f8f9 !important;
padding: 12px !important;
border-radius: 12px !important;
font-size: 13px !important;
text-align: center !important;
color: #333 !important;
font-weight: 600 !important;
border: 1px solid transparent !important;
transition: all 0.2s !important;
}
.n-nav-container ul li.parent ul li a:hover {
background: #fff !important;
border-color: #9B1F2E !important;
color: #9B1F2E !important;
}
/* 3. OVERLAY DE CERCA (PANTALLA COMPLETA) */
.search-overlay {
position: fixed !important;
top: 0; left: 0;
width: 100vw !important;
height: 100vh !important;
background: rgba(155, 31, 46, 0.98) !important;
z-index: 1000000 !important;
display: none; /* Es canvia amb JS */
align-items: center;
justify-content: center;
}
/* 4. AJUSTOS DE LA TOP BAR I LOGO */
.top-left img {
height: 20px !important;
width: auto !important;
}
.n-header-apple {
height: 90px !important;
display: flex !important;
align-items: center !important;
}
/* Això forçarà que només es vegi el que realment tens a sobre */
.n-nav-container ul li:not(:hover) > ul {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* RESET I ALTURES */
.n-header-apple {
height: 90px !important;
background: #fff !important;
border-bottom: 1px solid #f0f0f0 !important;
display: flex !important;
align-items: center !important;
position: sticky !important;
top: 0; z-index: 10000;
}
.n-container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* MENÚ PRINCIPAL */
.n-nav-container ul {
display: flex !important;
gap: 32px;
list-style: none !important;
margin: 0 !important; padding: 0 !important;
}
.n-nav-container ul li a {
font-size: 14px;
font-weight: 600;
color: #1d1d1f !important;
text-decoration: none;
transition: 0.2s;
}
/* EL SUBMENÚ (Targeta neta com la de la Junta) */
.n-nav-container ul li.parent { position: relative; padding: 35px 0; }
.n-nav-container ul li.parent > ul {
position: absolute !important;
top: 85px !important;
left: 50% !important;
transform: translateX(-50%) translateY(10px) !important;
width: 600px !important; /* Mida fixa per evitar que marxi de pantalla */
background: #fff !important;
border-radius: 20px !important;
padding: 24px !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* 2 columnes netes */
gap: 12px !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
border: 1px solid #eee !important;
opacity: 0; visibility: hidden;
transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.n-nav-container ul li.parent:hover > ul {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0) !important;
}
/* BOTONS DEL SUBMENÚ */
.n-nav-container ul li.parent ul li a {
background: #f5f5f7 !important;
padding: 16px !important;
border-radius: 12px !important;
text-align: left !important;
font-weight: 500 !important;
display: block !important;
}
.n-nav-container ul li.parent ul li a:hover {
background: #9B1F2E !important;
color: #fff !important;
}
/* CERCA (TRIGGER) */
.search-trigger {
background: #f5f5f7;
padding: 10px 18px;
border-radius: 100px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: #86868b;
transition: 0.2s;
}
.search-trigger:hover { background: #e8e8ed; }
.search-trigger svg { width: 18px; height: 18px; stroke: currentColor; }
/* OVERLAY PANTALLA COMPLETA */
.search-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(155, 31, 46, 0.98);
display: none; align-items: center; justify-content: center;
z-index: 20000;
}
.search-overlay-content { width: 90%; max-width: 800px; text-align: center; }
.search-overlay-content input {
width: 100%;
background: transparent; border: none;
border-bottom: 3px solid #fff;
font-size: 48px; color: #fff; padding: 20px; outline: none;
}
.close-search {
position: absolute; top: 40px; right: 40px;
background: none; border: none; color: #fff; font-size: 50px; cursor: pointer;
}
.btn-apple-premium {
background: #9B1F2E !important;
color: #fff !important;
padding: 12px 24px;
border-radius: 100px;
font-weight: 700;
text-decoration: none;
}
/* ============================================================
RESCAT LLUÏSOS: FIX TOTAL D'ESPAIS I SOLAPAMENTS
============================================================ */
/* 1. FIX DE LA LUPA I EL BOTÓ (Estil Junta) */
.n-actions-premium {
display: flex !important;
align-items: center !important;
gap: 15px !important; /* Ajunta els elements */
}
.search-trigger {
all: unset !important; /* Mateu qualsevol estil previ de Joomla */
display: flex !important;
align-items: center !important;
background: #f5f5f7 !important;
padding: 8px 15px !important;
border-radius: 50px !important;
cursor: pointer !important;
height: 35px !important;
}
.search-trigger svg {
width: 16px !important; /* Força la mida de la lupa perquè no sigui gegant */
height: 16px !important;
min-width: 16px !important;
stroke: #86868b !important;
}
.search-trigger span {
font-size: 13px !important;
color: #86868b !important;
margin-left: 8px !important;
}
/* 2. SUBMENÚS: ELIMINEM ELS ESPAIS TERRORÍFICS */
.n-nav-container ul li.parent > ul {
display: none !important; /* Amaguem per defecte per evitar el caos de la image_103e2a.png */
grid-template-columns: repeat(3, 1fr) !important; /* 3 columnes netes */
gap: 10px !important;
position: absolute !important;
top: 60px !important; /* Més a prop del menú */
left: 50% !important;
transform: translateX(-50%) !important;
width: 650px !important;
background: #ffffff !important;
padding: 20px !important; /* Espai interior controlat */
border-radius: 18px !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
border: 1px solid #eee !important;
z-index: 999999 !important;
}
/* Només mostrem el que toca */
.n-nav-container ul li.parent:hover > ul {
display: grid !important;
}
/* Eliminar espais buits gegants dins dels submenús */
.n-nav-container ul li.parent ul li {
padding: 0 !important;
margin: 0 !important;
height: auto !important;
}
.n-nav-container ul li.parent ul li a {
background: #f9f9fb !important;
padding: 12px 15px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #333 !important;
display: block !important;
text-align: center !important;
border: 1px solid transparent !important;
transition: all 0.2s !important;
}
.n-nav-container ul li.parent ul li a:hover {
background: #fff !important;
border-color: #9B1F2E !important;
color: #9B1F2E !important;
transform: translateY(-2px) !important;
}
/* 3. FIX DE LA PANTALLA COMPLETA (CERCA) */
.search-overlay {
background: rgba(155, 31, 46, 0.98) !important;
}
.search-overlay-content input {
font-size: 32px !important; /* Un pèl més petit per mòbil */
border-bottom: 2px solid #fff !important;
}
/* ============================================================
FIX DE SEGURETAT: EL "PONT INVISIBLE"
============================================================ */
.n-nav-container ul li.parent {
/* Augmentem la zona sensible del botó pare cap avall */
padding-bottom: 25px !important;
margin-bottom: -25px !important;
}
.n-nav-container ul li.parent > ul {
/* El pugem una mica perquè la distància sigui mínima */
top: 75px !important;
}
/* El "Pont": Creem un element invisible que ompli el buit */
.n-nav-container ul li.parent > ul::before {
content: "" !important;
position: absolute !important;
top: -25px !important; /* Cobreix l'espai buit cap amunt */
left: 0 !important;
right: 0 !important;
height: 30px !important;
background: transparent !important;
display: block !important;
}
/* Afegim un petit retard (delay) al tancar-se perquè no sigui brusc */
.n-nav-container ul li.parent > ul {
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
transition-delay: 0.1s !important; /* Et dóna 0.1 segons extres de reacció */
}
.n-nav-container ul li.parent ul {
gap: 8px !important; /* Redueix l'espai entre botons interns */
padding: 15px !important; /* Redueix l'aire intern del panell */
}
/* ============================================================
RESETS DRÀSTICS PER A LA LIGHT VERSION
============================================================ */
/* FORCEM EL FONS CLAR A TOT EL BLOC */
footer,
.footer,
.custom-footer {
background-color: #f5f5f7 !important; /* Gris clar */
background: #f5f5f7 !important; /* Doble seguretat */
color: #1d1d1f !important; /* Text fosc */
border: none !important;
}
/* ELIMINEM LES LÍNIES VERMELLES DE LES CAPÇALERES */
.footer h4,
.footer-col h4 {
color: #1d1d1f !important;
border-bottom: 1px solid #d2d2d7 !important; /* Línia gris fina */
text-transform: uppercase !important;
font-size: 13px !important;
letter-spacing: 1px !important;
padding-bottom: 10px !important;
}
/* AJUSTEM ELS ENLLAÇOS PERQUÈ NO SIGUIN BLANCS */
.footer a,
.f-list li a {
color: #6e6e73 !important;
text-decoration: none !important;
}
.footer a:hover {
color: #9B1F2E !important;
}
/* EL BADGE DE LA CREU DE SANT JORDI (Com a la imatge però light) */
.f-badge {
background: #ffffff !important;
color: #9B1F2E !important;
border: 1px solid #9B1F2E !important;
padding: 5px 15px !important;
border-radius: 50px !important;
font-weight: 700 !important;
display: inline-block !important;
}
/* ELS LOGOS DELS PARTNERS (Blanc sobre gris) */
.partner-name,
.partner-grid span,
.footer-partners a {
background: #ffffff !important;
color: #1d1d1f !important;
border: 1px solid #d2d2d7 !important;
padding: 10px 20px !important;
border-radius: 10px !important;
font-weight: 600 !important;
}
/* LA BARRETA DE COPYRIGHT FINAL (Més clara també) */
.f-bottom-bar,
.f-bottom-inner {
background: #e8e8ed !important;
color: #86868b !important;
border-top: 1px solid #d2d2d7 !important;
}
/* ============================================================
REMAKIN FOOTER: PURE JUNTA DIRECTIVA STYLE
============================================================ */
/* 1. RESET DE TIPOGRAFIA I COLORS BASE */
.footer, .footer-inner, .custom-footer {
font-family: 'Inter', -apple-system, sans-serif !important;
background-color: #ffffff !important; /* Passem al blanc pur per a màxima netedat */
color: #1d1d1f !important;
padding-left: 5% !important; /* Respectem marges laterals */
padding-right: 5% !important;
}
/* 2. ELIMINAR LA FRANJA NEGRA DELS LOGOS (image_11a1e8.png) */
.footer-partners {
background-color: #ffffff !important; /* Forcem blanc */
border-top: 1px solid #f2f2f2 !important;
border-bottom: 1px solid #f2f2f2 !important;
padding: 60px 0 !important;
margin: 40px 0 !important;
}
.partner-title {
color: #86868b !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
margin-bottom: 30px !important;
}
/* 3. TRANSFORMAR ELS BOTONS DELS LOGOS */
.partner-grid span,
.partner-name,
#ajuntament-logo, #generalitat-logo { /* Ajusta si tenen IDs específics */
background: #f5f5f7 !important; /* Gris molt suau, no blanc pur */
color: #1d1d1f !important;
border: none !important;
box-shadow: none !important;
padding: 15px 30px !important;
border-radius: 12px !important; /* Corba Lovable */
font-size: 12px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
transition: all 0.2s ease !important;
}
.partner-grid span:hover {
background: #e8e8ed !important;
transform: translateY(-2px) !important;
}
/* 4. AJUST DE MARGES I TEXTOS DEL FOOTER */
.footer-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding-top: 80px !important;
padding-bottom: 80px !important;
display: grid !important;
gap: 60px !important; /* Més aire entre columnes */
}
.footer-col h4 {
font-size: 13px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
border: none !important; /* Fora línies */
margin-bottom: 25px !important;
}
.f-list li a {
font-size: 14px !important;
color: #6e6e73 !important;
font-weight: 400 !important;
}
/* 5. BARRA INFERIOR (Més discreta) */
.f-bottom-bar {
background: #ffffff !important;
border-top: 1px solid #f2f2f2 !important;
padding: 40px 0 !important;
}
.f-bottom-inner {
color: #b5b5b5 !important;
font-size: 11px !important;
justify-content: center !important; /* Centrat estil minimal */
gap: 20px !important;
}
/* ============================================================
FOOTER TOTAL WIDTH & CC LICENSE FIX
============================================================ */
/* 1. FORCEM AMPLE TOTAL A TOTS ELS NIVELLS */
.footer,
.custom-footer,
.f-bottom-bar {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2. CONTENIDOR INTERN PER RESPIRAR (Marges de seguretat) */
.footer-inner,
.footer-partners,
.f-bottom-inner {
max-width: 1400px !important; /* Ocupa gairebé tot però amb aire */
margin: 0 auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
/* 3. FIX DE LA ZONA CREATIVE COMMONS (Barra gris image_11a2df.png) */
.f-bottom-bar {
background-color: #f5f5f7 !important; /* Mateix gris que el fons o blanc */
border-top: 1px solid #e5e5e7 !important;
padding: 30px 0 !important;
}
.f-bottom-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #86868b !important;
font-size: 12px !important;
}
/* Transformem el text de CC en una cosa neta */
.f-bottom-inner div {
flex: 1;
}
.f-bottom-inner div:last-child {
text-align: right !important;
font-style: italic !important;
opacity: 0.8;
}
/* 4. LOGOS PARTNERS SENSE CAIXES ESTRANYES */
.footer-partners {
border-top: 1px solid #f2f2f2 !important;
padding: 50px 40px !important;
}
.partner-grid {
display: flex !important;
justify-content: center !important;
gap: 50px !important;
}
.partner-name {
background: transparent !important; /* Fora grisos si vols màxima netedat */
border: none !important;
font-weight: 700 !important;
color: #d2d2d7 !important; /* Estil marca d'aigua elegant */
transition: color 0.3s !important;
}
.partner-name:hover {
color: #1d1d1f !important;
}
/* ============================================================
REDISSENY MODERN DE LA BARRA DE LICÈNCIA (CC)
============================================================ */
.f-bottom-bar {
background-color: #ffffff !important; /* Blanc pur per màxima netedat */
border-top: 1px solid #f2f2f2 !important;
padding: 40px 0 !important;
}
.f-bottom-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 40px !important;
/* Tipografia de sistema molt fina */
font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
letter-spacing: -0.2px !important;
}
/* El Copyright (Esquerra) */
.f-bottom-inner div:first-child {
color: #1d1d1f !important; /* Negre Apple */
font-weight: 600 !important;
font-size: 13px !important;
}
/* La Llicència (Dreta) - Transformada en "etiqueta" */
.f-bottom-inner div:last-child {
color: #86868b !important; /* Gris suau */
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
background: #f5f5f7 !important; /* Píndola de fons */
padding: 6px 16px !important;
border-radius: 100px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
cursor: default !important;
}
.f-bottom-inner div:last-child:hover {
background: #e8e8ed !important;
color: #1d1d1f !important;
}
/* 📱 RESPONSIVE: En mòbil ho centrem tot */
@media (max-width: 768px) {
.f-bottom-inner {
flex-direction: column !important;
gap: 20px !important;
text-align: center !important;
}
}
/* ============================================================
ELIMINACIÓ DE LA FRANJA ENFONSADA - NETEJA TOTAL
============================================================ */
/* 1. UNIFICAR EL FONS AL BLANC (Mata qualsevol gris residual) */
footer,
.footer,
.custom-footer,
.f-bottom-bar {
background: #ffffff !important;
background-color: #ffffff !important;
box-shadow: none !important; /* Elimina ombres que fan efecte "enfonsat" */
border: none !important;
}
/* 2. REESTRUCTURAR LA BARRA CC (Sense blocs de color) */
.f-bottom-bar {
padding: 60px 0 !important; /* Donem molt més aire per estil Junta */
border-top: 1px solid #f2f2f2 !important; /* Només una línia finíssima */
}
.f-bottom-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #b5b5b5 !important; /* Gris molt suau per a tot el text */
}
/* 3. MODERNITZAR EL TEXT DE LICÈNCIA SENSE PÍNDOLES */
/* Ara la llicència CC serà text net a la dreta, estil minimalista Apple */
.f-bottom-inner div:last-child {
background: transparent !important; /* Fora píndoles grises */
padding: 0 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #d2d2d7 !important; /* Text molt discret */
font-weight: 500 !important;
}
/* 4. EL COPYRIGHT MÉS FINET */
.f-bottom-inner div:first-child {
font-size: 11px !important;
font-weight: 400 !important;
color: #b5b5b5 !important;
}
/* ============================================================
MORT A LA FRANJA GRIS (image_11f8df.png)
============================================================ */
/* 1. ELIMINEM EL CONTENIDOR GRIS ESTRANY */
.f-bottom-bar {
background: transparent !important; /* Fem que el fons sigui invisible */
background-color: transparent !important;
border: none !important;
padding: 0 !important; /* Traiem el padding que crea la caixa */
width: 100% !important;
}
/* 2. FEM QUE EL TEXT FLOTI SOBRE EL BLANC DEL FOOTER */
.f-bottom-inner {
background: #ffffff !important; /* Forcem el blanc pur del fons general */
padding: 60px 5% !important; /* Donem molt d'aire (estil Apple) */
border-top: 1px solid #f2f2f2 !important; /* Línia de separació finíssima */
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
max-width: 100% !important;
}
/* 3. MODERNITZEM EL TEXT (ESTIL JUNTA) */
/* Copyright a l'esquerra */
.f-bottom-inner div:first-child {
color: #86868b !important; /* Gris de text secundari d'Apple */
font-size: 12px !important;
font-weight: 400 !important;
}
/* Llicència a la dreta */
.f-bottom-inner div:last-child {
color: #d2d2d7 !important; /* Molt discret, gairebé marca d'aigua */
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
font-weight: 600 !important;
font-style: normal !important; /* Fora cursives antigues */
}
/* 4. NETEJA DE POSSIBLES "SHADOWS" O "GRADIENTS" */
.f-bottom-bar, .f-bottom-inner, .custom-footer {
box-shadow: none !important;
text-shadow: none !important;
}
/* ============================================================
AGENDA DEFINITIVA: CARTELL SENCER I TEXT NET
============================================================ */
/* 1. GRID ESPAIÓS */
.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 35px !important;
padding: 20px 0 !important;
list-style: none !important;
}
/* 2. LA TARGETA */
.rsepro_events_module li {
position: relative !important;
background: #ffffff !important;
border-radius: 20px !important;
border: 1px solid #f2f2f2 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important; /* Força ordre vertical: Foto dalt, Text baix */
height: 100% !important;
text-align: center !important;
transition: all 0.3s ease !important;
}
.rsepro_events_module li:hover {
transform: translateY(-8px) !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}
/* 3. EL CARTELL (Sense retalls i nítid) */
.rsepro-image {
width: 100% !important;
height: 380px !important; /* Alçada fixa per al cartell */
background: #fbfbfd !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.rsepro-image img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* Cartell sencer A4 sempre */
padding: 10px !important;
}
/* 4. BLOC DE TEXT (Centrat i sense solapaments) */
.rsepro_events_module li a {
display: block !important;
padding: 20px 15px 10px 15px !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
text-decoration: none !important;
line-height: 1.3 !important;
min-height: 65px !important; /* Manté els botons alineats */
}
/* 5. LA DATA (Vermell, centrada i amb "a les") */
.rsepro_events_module li small {
display: table !important; /* Per poder-lo centrar amb margin auto */
margin: 0 auto 25px auto !important;
padding: 8px 18px !important;
background: #9b1f2e !important;
color: #ffffff !important;
border-radius: 50px !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
/* 6. CATEGORIA (Dalt a la dreta, neta) */
.rsepro_events_module li::before {
content: "ACTIVITAT" !important;
position: absolute !important;
top: 15px !important;
right: 15px !important;
background: rgba(255,255,255,0.95) !important;
color: #1d1d1f !important;
padding: 5px 10px !important;
border-radius: 8px !important;
font-size: 10px !important;
font-weight: 800 !important;
z-index: 10 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
border: 1px solid #eee !important;
}
/* 7. CLICKABLE TOTAL */
.rsepro_events_module li a::after {
content: "" !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: 5 !important;
}
/* ============================================================
FILTRES RSEVENTS: ESTIL APP MODERNA
============================================================ */
/* 1. ICONES RSS I ICAL (Dalt a la dreta, discrets) */
.rs_rss {
display: flex !important;
justify-content: flex-end !important;
gap: 15px !important;
margin-bottom: 20px !important;
}
.rs_rss a {
color: #86868b !important;
font-size: 18px !important;
transition: color 0.3s ease !important;
text-decoration: none !important;
}
.rs_rss a:hover {
color: #9B1F2E !important;
}
/* 2. CONTENIDOR PRINCIPAL DE LA BARRA */
.rsepro-navbar-responsive-collapse {
background: #ffffff !important;
padding: 15px 25px !important;
border-radius: 16px !important;
border: 1px solid #e5e5e7 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
margin-bottom: 40px !important;
}
.rsepro-navbar-responsive-collapse ul {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 15px !important;
border: none !important;
}
/* 3. DROPDOWNS (Selectors de Nom, És, etc.) */
.rsepro-navbar-responsive-collapse .nav-item.dropdown {
background: #f5f5f7 !important;
border-radius: 10px !important;
padding: 5px 15px !important;
transition: background 0.2s ease !important;
}
.rsepro-navbar-responsive-collapse .nav-item.dropdown:hover {
background: #e8e8ed !important;
}
.rsepro-navbar-responsive-collapse .dropdown-toggle {
color: #1d1d1f !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
}
.rsepro-navbar-responsive-collapse .dropdown-toggle .caret {
margin-left: 8px !important;
border-top-color: #9B1F2E !important;
}
/* 4. EL INPUT DE CERCA (El protagonista) */
#rsepro-filter {
border: 1px solid #d2d2d7 !important;
background: #ffffff !important;
border-radius: 10px !important;
padding: 10px 20px !important;
font-size: 14px !important;
color: #1d1d1f !important;
min-width: 250px !important;
transition: all 0.3s ease !important;
box-shadow: none !important;
}
#rsepro-filter:focus {
border-color: #9B1F2E !important;
box-shadow: 0 0 0 4px rgba(155, 31, 46, 0.1) !important;
width: 300px !important;
}
/* 5. BOTONS D'ACCIÓ (Add Filter / Netejar) */
#rsepro-filter-btn {
background: #9B1F2E !important;
border: none !important;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all 0.2s ease !important;
}
#rsepro-filter-btn:hover {
background: #7a1824 !important;
transform: translateY(-1px) !important;
}
#rsepro-clear-btn {
background: transparent !important;
border: 1px solid #d2d2d7 !important;
color: #86868b !important;
padding: 10px 20px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
}
#rsepro-clear-btn:hover {
background: #f5f5f7 !important;
color: #1d1d1f !important;
border-color: #1d1d1f !important;
}
/* 6. NETEJA DE DIVIDERS I DISPLAYS */
.divider-vertical {
display: none !important;
}
/* Dropdown Menu (la llista que s'obre) */
.dropdown-menu {
border-radius: 12px !important;
border: 1px solid #e5e5e7 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
padding: 8px !important;
margin-top: 10px !important;
}
.dropdown-item {
border-radius: 6px !important;
padding: 8px 15px !important;
font-size: 14px !important;
color: #424245 !important;
}
.dropdown-item:hover {
background: #f5f5f7 !important;
color: #9B1F2E !important;
}
/* Estils Base i Containers */
.n-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* 1. ESTRUCTURA GENERAL I LOGO */
.n-header-apple .n-container {
display: flex !important;
flex-wrap: wrap !important; /* Permet que el menú baixi a sota en mòbil */
align-items: center !important;
justify-content: space-between !important;
padding: 10px 15px !important;
}
.n-logo img {
height: 40px !important; /* Mida controlada */
width: auto !important;
}
/* 2. EL MENÚ (Responsive) */
.n-nav-container {
order: 3 !important; /* En mòbil, el posem al final */
width: 100% !important; /* Que ocupi tota l'amplada a sota */
margin: 15px 0 0 0 !important;
overflow-x: auto !important; /* Si els ítems no caben, que es pugui fer scroll lateral */
-webkit-overflow-scrolling: touch;
}
.n-nav-container ul {
display: flex !important;
gap: 15px !important;
padding: 10px 0 !important;
margin: 0 !important;
list-style: none !important;
justify-content: flex-start !important; /* Aliniat a l'esquerra per l'scroll */
border-top: 1px solid #f0f0f0;
}
.n-nav-container li a {
white-space: nowrap !important; /* Que els textos no se solapin */
font-size: 14px !important;
font-weight: 600 !important;
color: #1d1d1f !important;
text-decoration: none !important;
}
/* 3. BARRA SUPERIOR (Creu de Sant Jordi) */
.top-bar-apple .n-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 5px 15px !important;
}
.top-left img {
height: 18px !important;
width: auto !important;
}
.top-left span {
font-size: 11px !important; /* Molt petit en mòbil per que quedi en una línia */
margin-left: 8px !important;
}
/* 4. ACTIONS (Cerca i Botó) */
.n-actions-premium {
display: flex !important;
align-items: center !important;
gap: 12px !important;
order: 2 !important; /* Es manté a la dreta del logo */
}
.btn-apple-premium {
background: #9b1f2e !important;
color: white !important;
padding: 8px 14px !important;
border-radius: 100px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
/* 5. AJUSTOS PER ESCRIPTORI (Desktop) */
@media (min-width: 992px) {
.n-header-apple .n-container {
flex-wrap: nowrap !important; /* Tot en una sola línia */
}
.n-nav-container {
order: 2 !important; /* El menú al mig */
width: auto !important;
margin: 0 40px !important;
}
.n-nav-container ul {
border-top: none !important;
justify-content: center !important;
}
.n-actions-premium {
order: 3 !important; /* Accions a la dreta */
}
}
/* FIX PER A LA CREU DE SANT JORDI EN MÒBILS MOLT PETITS */
@media (max-width: 480px) {
.top-left span {
display: none !important; /* Si el mòbil és molt estret, amaguem el text per seguretat */
}
}
/* 5. AJUSTOS PER ESCRIPTORI (Desktop) */
@media (min-width: 992px) {
.n-header-apple .n-container {
flex-wrap: nowrap !important;
display: grid !important; /* Canviem a Grid per tenir control total de les 3 columnes */
grid-template-columns: auto 1fr auto; /* Esquerra auto, Centre expandit, Dreta auto */
align-items: center !important;
gap: 20px !important;
width: 100% !important;
max-width: 1200px !important; /* O l'amplada màxima de la teva web */
margin: 0 auto !important;
}
.n-logo {
grid-column: 1;
display: flex !important;
}
.n-nav-container {
grid-column: 2; /* Força el menú al centre exacte */
order: unset !important;
width: 100% !important;
margin: 0 !important;
overflow: visible !important;
}
.n-nav-container ul {
border-top: none !important;
justify-content: center !important; /* Centra els ítems dins de la columna central */
gap: 25px !important; /* Més espai entre enllaços per que no es vegi petit */
padding: 0 !important;
}
.n-nav-container li a {
font-size: 15px !important; /* Una mica més gran al PC */
transition: color 0.3s ease;
}
.n-actions-premium {
grid-column: 3;
order: unset !important;
justify-content: flex-end !important;
min-width: max-content !important; /* Evita que el botó s'encapsuli */
}
}
/* 1. CONTENIDOR I RESPIRACIÓ GENERAL */
#rs_event_show.rs_event_wrapper {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
background: transparent !important;
font-family: 'Inter', sans-serif !important;
}
/* 2. IMATGE SENSE FONS I CENTRADA */
.rs_event_image {
float: none !important;
width: 100% !important;
text-align: center !important;
margin: 0 0 50px 0 !important;
background: transparent !important;
border: none !important;
display: flex !important;
justify-content: center !important;
}
.rs_event_image img {
max-width: 500px !important;
width: 100% !important;
height: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
/* Ombra subtil per donar relleu al cartell */
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.12)) !important;
}
/* 3. TÍTOL CORPORATIU */
.rs_event_title {
text-align: center !important;
font-size: clamp(32px, 6vw, 52px) !important;
font-weight: 900 !important;
letter-spacing: -2px !important;
color: #1a1a1a !important;
margin: 20px 0 40px 0 !important;
line-height: 1.1 !important;
}
/* 4. CATEGORIES HORITZONTALS (BOTONS MODERNS) */
.rs_event_meta {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 auto 60px auto !important;
list-style: none !important;
border: none !important;
}
.rs_event_meta li {
background: #f1f1f3 !important; /* Gris neutre clar */
padding: 10px 20px !important;
border-radius: 50px !important; /* Estil píndola */
font-size: 14px !important;
font-weight: 600 !important;
color: #444 !important;
display: flex !important;
align-items: center !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: 1px solid transparent !important;
}
/* Efecte Hover Corporatiu */
.rs_event_meta li:hover {
background: #ffffff !important;
border-color: #9b1f2e !important;
color: #9b1f2e !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 20px rgba(155, 31, 46, 0.1) !important;
}
.rs_event_meta li i {
color: #9b1f2e !important; /* Icones en granat vi */
margin-right: 10px !important;
font-size: 16px !important;
}
.rs_event_meta li a {
color: inherit !important;
text-decoration: none !important;
}
/* 5. NETEJA DE LA DESCRIPCIÓ */
.rs_event_description {
width: 100% !important;
clear: both !important;
padding: 0 !important;
border: none !important;
}
/* 6. RESPONSIVE */
@media (max-width: 768px) {
#rs_event_show {
padding: 20px 15px !important;
}
.rs_event_meta {
gap: 8px !important;
margin-bottom: 40px !important;
}
.rs_event_meta li {
font-size: 13px !important;
padding: 8px 16px !important;
}
.rs_event_title {
margin-bottom: 25px !important;
}
}
/* AMAGAR EL COMPTADOR D'ULLS PER A MÉS NETEJA */
.rs_event_meta li:has(.fa-eye),
.rs_event_meta li i.fa-eye {
display: none !important;
}
/* 1. TRENCAR COLUMNES I FORÇAR FLUIX VERTICAL */
#rs_event_show,
#rs_event_show.rs_event_wrapper,
.rs_event_image,
.rs_event_description {
display: block !important;
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2. IMATGE: CENTRADA, SENSE FONS I AMB AIRE */
.rs_event_image {
text-align: center !important;
margin: 40px auto !important;
background: transparent !important;
border: none !important;
}
.rs_event_image img {
max-width: 500px !important; /* Mida ideal del cartell */
width: 100% !important;
height: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12)) !important;
}
/* 3. TÍTOL: CENTRAT I IMPACTANT */
.rs_event_title {
display: block !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(32px, 6vw, 52px) !important;
color: #1a1a1a !important;
letter-spacing: -2px !important;
margin: 20px 0 40px 0 !important;
}
/* 4. METADADES: HORITZONTALS (BOTONS MODERNES) */
.rs_event_meta {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 auto 50px auto !important;
border: none !important;
}
.rs_event_meta li {
background: #f1f1f3 !important;
padding: 10px 20px !important;
border-radius: 50px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #444 !important;
display: flex !important;
align-items: center !important;
transition: all 0.3s ease !important;
}
.rs_event_meta li:hover {
background: #ffffff !important;
box-shadow: 0 8px 20px rgba(155, 31, 46, 0.15) !important;
color: #9b1f2e !important;
}
.rs_event_meta li i {
color: #9b1f2e !important;
margin-right: 10px !important;
}
/* 5. DESCRIPCIÓ: QUE OCUPI TOT L'AMPLA */
.rs_event_description {
margin-top: 40px !important;
}
/* 6. RESPONSIVE PER A MÒBILS */
@media (max-width: 768px) {
.rs_event_meta {
flex-direction: column !important; /* En mòbil, les píndoles es posen una sobre l'altra si no caben */
align-items: center !important;
}
.rs_event_meta li {
width: fit-content !important;
}
}
/* NETEJA D'ELEMENTS SOBRANTS */
.rs_event_meta li:has(.fa-eye) { display: none !important; }
/* 1. RESET DE CONTENIDORS PARE */
#rs_event_show,
.rs_event_wrapper,
.rs_event_image,
.rs_event_description {
display: block !important;
width: 100% !important;
float: none !important;
clear: both !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* 2. IMATGE: FORÇAR QUE NO TINGUI RES ALS COSTATS */
.rs_event_image {
text-align: center !important;
padding: 20px 0 !important;
background: transparent !important;
}
.rs_event_image a,
.rs_event_image img {
display: inline-block !important;
float: none !important;
margin: 0 auto !important;
max-width: 450px !important; /* Mida controlada perquè no es pixel·li */
width: 90% !important;
}
/* 3. CATEGORIES: DE LLISTA VERTICAL A FILA HORITZONTAL MODERNA */
.rs_event_meta {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
list-style: none !important;
padding: 20px !important;
margin: 0 0 30px 0 !important;
border-top: 1px solid #f0f0f0 !important;
border-bottom: 1px solid #f0f0f0 !important;
}
.rs_event_meta li {
background: #fdf2f2 !important; /* Color granat molt suau de fons */
color: #9b1f2e !important;
padding: 8px 16px !important;
border-radius: 50px !important;
font-size: 13px !important;
font-weight: 600 !important;
white-space: nowrap !important; /* Que no es treguin en dues línies */
}
.rs_event_meta li i {
margin-right: 6px !important;
color: #9b1f2e !important;
}
.rs_event_meta li a {
color: #9b1f2e !important;
text-decoration: none !important;
}
/* 4. TÍTOL: CENTRAT I NET */
.rs_event_title {
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-weight: 900 !important;
color: #1a1a1a !important;
margin: 30px 0 !important;
width: 100% !important;
}
/* 5. AMAGAR EL COMPTADOR DE VISTES (EL "2" QUE SURT AL FINAL) */
.rs_event_meta li:last-child {
display: none !important;
}
/* 6. AJUST PER A MÒBILS */
@media (max-width: 768px) {
.rs_event_meta {
gap: 5px !important;
}
.rs_event_meta li {
font-size: 11px !important;
padding: 5px 12px !important;
}
}
/* 1. RESET DEL CONTENIDOR PRINCIPAL */
#rs_event_show.rs_event_wrapper {
display: flex !important;
flex-direction: column !important; /* Tot un sota de l'altre */
align-items: center !important; /* Tot centrat horitzontalment */
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
}
/* 2. FORÇAR LA FOTO AL 100% I CENTRADA */
.rs_event_image {
display: block !important;
width: 100% !important;
text-align: center !important;
float: none !important; /* Elimina el desplaçament lateral */
clear: both !important;
margin: 0 0 30px 0 !important;
background: transparent !important;
}
.rs_event_image a,
.rs_event_image img {
display: block !important;
margin: 0 auto !important;
width: auto !important;
max-width: 100% !important; /* No surt de la pantalla */
height: auto !important; /* Manté la proporció */
max-height: 80vh !important; /* Limita l'alçada perquè es vegi el text a sota */
float: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
/* 3. LES CATEGORIES (FILA HORITZONTAL MODERNA) */
.rs_event_meta {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 20px 0 !important;
margin: 0 0 40px 0 !important;
list-style: none !important;
border-top: 1px solid #eee !important;
border-bottom: 1px solid #eee !important;
}
.rs_event_meta li {
background: #fdf2f2 !important; /* Color corporatiu suau */
color: #9b1f2e !important; /* Granat vi */
padding: 10px 20px !important;
border-radius: 100px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
}
.rs_event_meta li i {
margin-right: 8px !important;
}
.rs_event_meta li a {
color: inherit !important;
text-decoration: none !important;
}
/* 4. NETEJA DEL TÍTOL I DESCRIPCIÓ */
.rs_event_title,
.rs_event_description {
width: 100% !important;
display: block !important;
float: none !important;
clear: both !important;
text-align: center !important;
}
/* AMAGAR EL COMPTADOR DE VISTES */
.rs_event_meta li:has(.fa-eye),
.rs_event_meta li:last-child {
display: none !important;
}
/* 1. FORÇAR BLOC ÚNIC PER A LA IMATGE */
.rs_event_image {
display: block !important;
width: 100% !important;
float: none !important; /* Elimina el desplaçament lateral */
clear: both !important; /* No deixa que pugi el text de sota */
text-align: center !important;
margin: 0 0 30px 0 !important;
padding: 0 !important;
background: transparent !important; /* Elimina fons grisos/blancs */
}
/* 2. PROPIETATS DE LA FOTO AL 100% */
.rs_event_image img {
display: block !important;
margin: 0 auto !important;
width: auto !important;
max-width: 100% !important; /* Ample total de la columna */
height: auto !important; /* Manté la proporció vertical (100% alt real) */
max-height: none !important; /* Anul·la qualsevol restricció d'alçada */
float: none !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* 3. ASSEGURAR QUE EL TÍTOL I LA DESCRIPCIÓ VAN A SOTA */
.rs_event_title,
.rs_event_description {
display: block !important;
width: 100% !important;
clear: both !important; /* Força que comencin sota la foto */
float: none !important;
}
/* 4. NETEJA DEL CONTENIDOR PARE SI ÉS FLEX */
.rs_event_wrapper {
display: block !important; /* Desactivem el flex que causa el desplaçament */
}
/* ============================================================
LLUÏSOS D'HORTA 2024 - DISSENY FINAL (LOGO FIX)
Color Corporatiu: #990049
============================================================ */
/* 1. CONFIGURACIÓ ESCRIPTORI */
.mobile-menu-toggle, .n-nav-mobile, .menu-overlay { display: none !important; }
.n-header-apple {
background: #ffffff !important;
height: 90px !important; /* Una mica més alt per al logo */
border-bottom: 1px solid #eee !important;
display: flex !important;
align-items: center !important;
position: sticky !important;
top: 0 !important;
z-index: 10000 !important;
}
.n-container {
max-width: 1400px !important;
margin: 0 auto !important;
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0 40px !important;
}
/* LOGO ESCRIPTORI: MIDA CORRECTA */
.n-logo img {
height: 65px !important; /* Augmentat per a escriptori */
width: auto !important;
display: block !important;
}
.n-nav-container { flex-grow: 1; display: flex; justify-content: center; }
.n-nav-container ul { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; }
.n-nav-container ul li { position: relative; padding: 25px 0; }
.n-nav-container ul li a { color: #1d1d1f !important; font-weight: 600; font-size: 15px; text-decoration: none; padding: 10px 18px; border-radius: 50px; transition: 0.2s; }
.n-nav-container ul li:hover > a { background: #f5f5f7 !important; color: #990049 !important; }
/* Submenús Escriptori */
.n-nav-container ul li ul {
position: absolute !important; top: 100% !important; left: 0 !important;
background: #ffffff !important; min-width: 250px !important; border-radius: 14px !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important; padding: 10px !important;
display: none !important; flex-direction: column !important; z-index: 10001 !important;
border: 1px solid rgba(0,0,0,0.05) !important; margin: 0 !important;
}
.n-nav-container ul li:hover > ul { display: flex !important; }
.n-nav-container ul li ul li ul { left: 100% !important; top: -10px !important; margin-left: -2px !important; }
.n-nav-container ul li ul li:hover > ul { display: flex !important; }
.n-nav-container ul li ul li a:hover { background: #990049 !important; color: #ffffff !important; }
/* 2. CONFIGURACIÓ MÒBIL (BREAKPOINT 1100px) */
@media (max-width: 1100px) {
.n-nav-container, .n-actions-premium { display: none !important; }
.n-header-apple { height: 70px !important; }
.n-container { padding: 0 20px !important; }
/* LOGO MÒBIL: MIDA AJUSTADA */
.n-logo img { height: 45px !important; }
.mobile-menu-toggle {
display: block !important;
background: #f5f5f7 !important;
border: none !important;
padding: 10px !important;
border-radius: 10px !important;
cursor: pointer !important;
z-index: 10001 !important;
}
.mobile-menu-toggle span { display: block; width: 22px; height: 2px; background: #1d1d1f; margin: 5px 0; }
.n-nav-mobile {
display: block !important; position: fixed !important; top: 0 !important; right: -100% !important;
width: 100% !important; height: 100vh !important; background: #ffffff !important;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; padding: 100px 25px 40px 25px !important;
z-index: 9999 !important; overflow-y: auto !important;
}
.n-nav-mobile.active { right: 0 !important; }
.n-nav-mobile ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.n-nav-mobile ul li { margin-bottom: 5px !important; width: 100% !important; }
.n-nav-mobile ul li a {
display: block !important; padding: 16px 20px !important; font-size: 18px !important;
font-weight: 700 !important; color: #1d1d1f !important; text-decoration: none !important;
border-radius: 12px !important; background: #f9f9f9 !important;
}
.n-nav-mobile ul li a:active { background: #990049 !important; color: #ffffff !important; }
.n-nav-mobile ul li ul {
display: block !important; position: static !important; box-shadow: none !important;
padding: 5px 0 15px 20px !important; background: transparent !important; border: none !important;
}
.n-nav-mobile ul li ul li a {
font-size: 16px !important; font-weight: 500 !important; background: transparent !important;
border-bottom: 1px solid #eee !important; border-radius: 0 !important; padding: 12px 10px !important; color: #666 !important;
}
.menu-overlay.active {
display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
background: rgba(0,0,0,0.5); z-index: 9998;
}
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -5px); }
}
/* --- ESTIL CORPORATIU TAGS / BOTONS --- */
/* Contenidor de la llista de tags */
.list-inline-item.tag-list0 {
margin-right: 8px !important;
margin-bottom: 8px;
}
/* El botó del tag (Sobreescrivint btn-info) */
.list-inline-item.tag-list0 a.btn-info {
background-color: #9b1f2e !important; /* El teu vermell corporatiu */
border: none !important;
border-radius: 8px !important; /* Més quadrat/modern, o 100px si el vols rodó */
color: #ffffff !important;
font-family: 'Geist', 'Inter', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 14px !important;
font-size: 0.75rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 2px 4px rgba(155, 31, 46, 0.1);
}
/* Efecte Hover (L'animació que demanaves) */
.list-inline-item.tag-list0 a.btn-info:hover {
background-color: #000000 !important; /* Canvia a negre al passar el ratolí */
transform: translateY(-2px); /* S'eleva una mica */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #ffffff !important;
}
/* Treure la icona o l'estil per defecte de Joomla si cal */
.list-inline-item.tag-list0 a.btn-info::before {
display: none !important;
}
/* ============================================================
REBRANDING TOTAL RSEVENTS - LLUÏSOS D'HORTA
Aquest CSS elimina el solapament i crea targetes verticals netes.
============================================================ */
:root {
--rse-accent: #990049; /* El teu color preferit */
--rse-text-main: #1d1d1f;
--rse-text-muted: #6e6e73;
--rse-bg-card: #ffffff;
--rse-radius: 18px;
--rse-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
/* 1. CONTENIDOR PRINCIPAL (GRAELLA) */
ul.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
gap: 30px !important;
list-style: none !important;
padding: 20px !important;
margin: 0 !important;
background: transparent !important;
}
/* 2. LA TARGETA (CARD) */
ul.rsepro_events_module li {
position: relative !important;
display: flex !important;
flex-direction: column !important; /* Estructura vertical: Imatge a dalt, text a baix */
background: var(--rse-bg-card) !important;
border-radius: var(--rse-radius) !important;
overflow: hidden !important;
box-shadow: var(--rse-shadow) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: 1px solid rgba(0,0,0,0.05) !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
ul.rsepro_events_module li:hover {
transform: translateY(-10px) !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
}
/* 3. EL CARTELL (IMATGE) */
ul.rsepro_events_module li .rsepro-image {
width: 100% !important;
height: 400px !important; /* Alçada generosa per al cartell */
background: #f5f5f7 !important; /* Fons neutre per si el cartell no omple tot */
overflow: hidden !important;
position: relative !important;
margin: 0 !important;
}
ul.rsepro_events_module li .rsepro-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* CARTELL SENCER: No es talla res */
transition: transform 0.6s ease !important;
display: block !important;
}
ul.rsepro_events_module li:hover .rsepro-image img {
transform: scale(1.03) !important;
}
/* 4. BLOC DE TEXT (SOTA LA IMATGE) */
/* Eliminem el position absolute que feia que el text estigués a sobre */
ul.rsepro_events_module li a {
position: relative !important;
bottom: auto !important;
left: auto !important;
padding: 20px 20px 10px 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
color: var(--rse-text-main) !important;
text-shadow: none !important; /* Fora ombres lletges */
z-index: 5 !important;
display: block !important;
line-height: 1.3 !important;
text-decoration: none !important;
background: none !important;
}
ul.rsepro_events_module li a:hover {
color: var(--rse-accent) !important;
}
/* 5. DATA I METADADES */
ul.rsepro_events_module li small {
position: relative !important;
bottom: auto !important;
left: auto !important;
display: block !important;
padding: 0 20px 15px 20px !important;
color: var(--rse-text-muted) !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
z-index: 5 !important;
background: none !important;
}
ul.rsepro_events_module li:hover::after {
background: #1d1d1f !important;
transform: scale(1.05) !important;
}
/* 7. NETEJA DE BASURA (IMPORTANT) */
/* Eliminem el degradat negre que tapava la imatge */
ul.rsepro_events_module li::before {
display: none !important;
content: none !important;
}
/* Eliminem el badge d'"ACTIVITAT" si molesta, o el fem més discret */
/* Si el vols mantenir, aquí tens una versió neta: */
/*
ul.rsepro_events_module li .rsepro-image::after {
content: "ACTIVITAT";
position: absolute;
top: 15px;
right: 15px;
background: rgba(255,255,255,0.9);
padding: 5px 12px;
border-radius: 50px;
font-size: 10px;
font-weight: 800;
color: var(--rse-accent);
}
*/
/* 8. RESPONSIVE */
@media (max-width: 768px) {
ul.rsepro_events_module {
grid-template-columns: 1fr !important;
padding: 10px !important;
}
ul.rsepro_events_module li .rsepro-image {
height: 350px !important;
}
}
/* ============================================================
1. NETEJA ABSOLUTA DE CASSIOPEIA
============================================================ */
/* Eliminem logos duplicats, sitenames i espais de la plantilla */
header.header, .header.container-header, .navbar-brand, .container-nav,
.site-description, .sitename, .header-brand, .burger-icon {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Evitem que el contingut quedi tapat pel menú fix */
.site-grid {
margin-top: 20px !important;
max-width: 1300px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* HEADER PRINCIPAL */
/* --- TOP BAR BLINDADA --- */
.top-bar-apple {
background: #f5f5f7 !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
border-bottom: 1px solid #d2d2d7 !important;
overflow: hidden !important; /* Evita que res surti del quadrat */
}
/* L'ARREGLAMENT DE LA CREU GEGANT */
.top-left {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.top-left img {
height: 20px !important; /* AIXÒ ÉS EL QUE EVITA EL DRAMA */
width: auto !important;
display: block !important;
object-fit: contain !important;
}
.top-left span {
font-size: 11px !important;
color: #86868b !important;
font-weight: 500 !important;
}
/* --- RESCAT DEL MENÚ (PERQUÈ NO SURTI VERTICAL) --- */
.n-nav-container ul {
display: flex !important;
flex-direction: row !important; /* Força línia horitzontal */
gap: 25px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* --- CUIDEM LES XARXES --- */
.top-right {
display: flex !important;
gap: 15px !important;
}
.social-link {
font-size: 11px !important;
font-weight: 700 !important;
color: #86868b !important;
text-decoration: none !important;
}
/* ============================================================
4. CORRECCIÓ DE SUBMENÚS (SOLAPAMENT)
============================================================ */
.n-nav li {
position: relative !important;
}
.n-nav li ul {
position: absolute !important;
/* Empenyem el submenú cap avall perquè no trepitgi el menú principal */
/* Ajusta aquest 'top' si el vols més amunt o més avall */
top: 50px !important;
left: 0 !important;
background: #ffffff !important;
display: none !important;
flex-direction: column !important;
min-width: 220px !important;
box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
border-top: 3px solid #9B1F2E !important;
padding: 10px 0 !important;
z-index: 10001 !important;
}
/* Quan passem el ratolí, es mostra sense solapar */
.n-nav li:hover > ul {
display: flex !important;
}
/* Espaiat intern dels links del submenú */
.n-nav li ul li a {
text-transform: none !important;
padding: 10px 20px !important;
border-bottom: 1px solid #eee !important;
width: 100% !important;
display: block !important;
}
.n-nav li ul li:last-child a {
border-bottom: none !important;
}
/* Efecte hover per saber on estem pitjant */
.n-nav li ul li a:hover {
background-color: #f8f8f8 !important;
color: #9B1F2E !important;
}
/* ============================================================
3. BLOG I EVENTS (ESTILS DE TARGETA)
============================================================ */
.com-content-category-blog__items { display: flex; flex-direction: column; gap: 30px; margin: 40px 0; }
.com-content-category-blog__item {
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
display: flex;
overflow: hidden;
border: 1px solid #eee;
}
.com-content-category-blog__item figure { flex: 0 0 35%; margin: 0; }
.com-content-category-blog__item figure img { width: 100%; height: 100%; object-fit: cover; }
.com-content-category-blog__item .item-content { padding: 25px; flex: 1; }
/* RSEvents Grid */
.rs_events_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
list-style: none;
padding: 0;
}
.rs_event_detail { background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); overflow: hidden; border: 1px solid #eee; }
/* ============================================================
4. FOOTER (NEGRE TOTAL I SUPORT INSTITUCIONAL)
============================================================ */
/* ============================================================
FOOTER LLUÏSOS D'HORTA - 100% DES DE ZERO
============================================================ */
/* 1. ESTRUCTURA I FONS */
.footer {
background-color: #f5f5f7 !important; /* Gris Apple clar */
padding: 60px 0 0 0 !important;
border-top: 1px solid #d2d2d7 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.footer-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px 60px 20px !important;
display: grid !important;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important; /* Distribució neta */
gap: 40px !important;
}
/* 2. IDENTITAT (COLUMNA 1) */
.f-brand-title {
font-size: 26px !important;
font-weight: 700 !important;
color: #9B1F2E !important; /* Vermell Lluïsos */
margin-bottom: 10px !important;
letter-spacing: -0.5px !important;
}
.f-badge {
display: inline-block !important;
background: #ffffff !important;
color: #9B1F2E !important;
border: 1.5px solid #9B1F2E !important;
padding: 4px 14px !important;
border-radius: 50px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
margin-bottom: 20px !important;
}
.f-description {
font-size: 14px !important;
line-height: 1.6 !important;
color: #6e6e73 !important; /* Gris text Apple */
}
/* 3. TÍTOLS I ENLLAÇOS (COLUMNA 2 i 3) */
.footer-col h4 {
font-size: 14px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
margin-bottom: 20px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.f-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.f-list li {
margin-bottom: 12px !important;
}
.f-list li a {
text-decoration: none !important;
color: #6e6e73 !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
}
.f-list li a:hover {
color: #9B1F2E !important;
padding-left: 5px !important; /* Petit efecte de moviment */
}
/* 4. CONTACTE (COLUMNA 4) */
.f-contact-info {
font-size: 14px !important;
line-height: 2 !important;
color: #6e6e73 !important;
}
/* 5. ZONA DE PARTNERS (SUAVITZADA) */
.footer-partners {
background: #ffffff !important;
padding: 40px 20px !important;
text-align: center !important;
border-top: 1px solid #d2d2d7 !important;
}
.partner-title {
font-size: 12px !important;
font-weight: 600 !important;
color: #86868b !important;
text-transform: uppercase !important;
margin-bottom: 25px !important;
display: block !important;
}
.partner-grid {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 40px !important;
flex-wrap: wrap !important;
}
.partner-name {
font-size: 14px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
background: #f5f5f7 !important;
padding: 10px 20px !important;
border-radius: 12px !important;
border: 1px solid #e5e5e7 !important;
}
/* 6. BARRA FINAL (DARK ACCENT) */
.f-bottom-bar {
background-color: #1d1d1f !important; /* Negre mat per tancar la web */
color: #86868b !important;
padding: 25px 0 !important;
}
.f-bottom-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px !important;
display: flex !important;
justify-content: space-between !important;
font-size: 12px !important;
}
/* 7. RESPONSIVE MÒBIL */
@media (max-width: 900px) {
.footer-inner {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 600px) {
.footer-inner {
grid-template-columns: 1fr !important;
text-align: center !important;
}
.f-bottom-inner {
flex-direction: column !important;
gap: 15px !important;
text-align: center !important;
}
}
/* ============================================================
5. RESPONSIVE MÒBIL
============================================================ */
@media (max-width: 992px) {
.n-container { flex-direction: column !important; text-align: center; gap: 20px; padding: 20px; }
.n-nav ul { flex-wrap: wrap; justify-content: center; gap: 10px !important; }
.n-actions { flex-direction: column; width: 100%; }
}
/* ============================================================
1. NETEJA DE LOGOS I FLETXES DE CASSIOPEIA
============================================================ */
/* Amaguem el logo trencat de l'esquerra i elements de la plantilla */
.header-brand, .navbar-brand, .sitename, .site-description {
display: none !important;
}
/* Eliminem les fletxes que Cassiopeia posa automàticament per evitar duplicats */
.n-nav a::after,
.dropdown-toggle::after,
.mm-toggler::after {
display: none !important;
content: none !important;
}
/* --- HEADER GLASSMORPHISM (ESTIL APPLE) --- */
.n-header {
background: rgba(255, 255, 255, 0.8) !important; /* Semitransparent */
backdrop-filter: blur(20px) !important; /* El secret d'Apple */
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* Línia quasi invisible */
height: 80px !important;
position: sticky;
top: 0;
z-index: 10000;
display: flex;
align-items: center;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
}
.n-container {
max-width: 1300px;
margin: 0 auto;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
}
/* LOGO INTEGRAT */
.n-logo img {
height: 55px !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.n-logo img:hover { transform: scale(1.05); }
/* MENÚ NET I LLEGIBLE */
.n-nav ul {
display: flex;
gap: 25px;
list-style: none;
margin: 0;
padding: 0;
}
.n-nav a {
color: #1d1d1f !important; /* Negre Apple */
font-weight: 500 !important;
font-size: 14px !important;
text-transform: none !important; /* Menys agressiu que les majúscules */
letter-spacing: -0.2px;
transition: opacity 0.2s;
}
.n-nav a:hover { opacity: 0.6; }
/* CERCA NOMÉS ICONA */
.n-search-trigger-apple {
background: none;
border: none;
cursor: pointer;
color: #1d1d1f;
padding: 8px;
transition: transform 0.2s;
}
.n-search-trigger-apple svg { width: 20px; height: 20px; }
.n-search-trigger-apple:hover { transform: scale(1.1); }
/* BOTÓ PILL (ESTIL LOVABLE) */
.n-btn-apple {
background: #9B1F2E !important;
color: #fff !important;
padding: 10px 22px !important;
border-radius: 50px !important; /* Càpsula */
font-weight: 600 !important;
font-size: 13px !important;
text-decoration: none !important;
box-shadow: 0 4px 15px rgba(155, 31, 46, 0.2) !important;
transition: all 0.3s ease !important;
}
.n-btn-apple:hover {
background: #7a1824 !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(155, 31, 46, 0.3) !important;
}
/* BANDA SUPERIOR SOBRIA */
.csj-premium-bar {
background: #f5f5f7 !important;
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
}
.csj-tag { font-size: 9px; font-weight: 700; color: #9B1F2E; letter-spacing: 1px; }
/* ============================================================
3. FOOTER: ELIMINACIÓ DE LA FRANJA SOBRANT (image_7e8868.png)
============================================================ */
/* Eliminem l'espai buit que deixa el grid de Cassiopeia a sobre del footer */
.footer {
background: #000000 !important;
margin-top: 0 !important;
padding-top: 0 !important;
border: none !important;
}
/* Forcem que el contenidor negre ocupi tot el fons sense talls */
footer.footer {
background-color: #000000 !important;
display: block !important;
}
.footer-top-line {
height: 5px;
background: #9B1F2E;
width: 100%;
margin-bottom: 0; /* Enganxem la línia al fons negre */
}
/* ============================================================
4. SECCIÓ SUPORT (AJUNTAMENT / GENERALITAT)
============================================================ */
.footer-partners {
background: #000000 !important;
padding: 30px 20px;
text-align: center;
}
.partner-grid {
display: flex;
justify-content: center;
gap: 40px;
align-items: center;
color: #ffffff;
}
.partner-name {
font-weight: 800;
text-transform: uppercase;
font-size: 13px;
border: 1px solid #333;
padding: 8px 15px;
}
/* ============================================================
5. RECUPERACIÓ D'ESTILS DE BLOG I EVENTS
============================================================ */
.com-content-category-blog__item {
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
display: flex;
overflow: hidden;
margin-bottom: 30px;
}
/* ============================================================
5. CORRECCIÓ DE SUB-SUBMENÚS (3r NIVELL)
============================================================ */
/* Segon nivell de submenú (el que surt del lateral) */
.n-nav li ul li ul {
position: absolute !important;
top: 0 !important; /* Alineat amb la part superior de l'ítem pare */
left: 100% !important; /* Desplaçat totalment a la dreta */
margin-top: -10px !important; /* Ajust per quadrar amb el border-top */
display: none !important;
}
/* Mostrem el tercer nivell només quan fem hover al seu pare directe */
.n-nav li ul li:hover > ul {
display: flex !important;
}
/* Afegim una fletxeta lateral als ítems que tenen més contingut a dins */
.n-nav li ul li.parent > a::after {
content: " ▶" !important; /* Fletxa cap a la dreta */
float: right;
font-size: 8px !important;
margin-left: 10px;
color: #9B1F2E !important;
}
/* ============================================================
6. MILLORES DE DISSENY I LLEGIBILITAT
============================================================ */
/* Millora del Menú: Més espai i elegància */
.n-nav a {
font-size: 14px !important; /* Una mica més gran */
letter-spacing: 0.8px !important; /* Lletres més separades */
transition: color 0.3s ease !important; /* Transició suau */
position: relative;
}
/* Línia vermella que apareix sota el menú en fer hover */
.n-nav a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #9B1F2E;
transition: width 0.3s ease;
}
.n-nav a:hover::before {
width: 100%;
}
.n-nav a:hover {
color: #9B1F2E !important;
}
/* Botó "Fes-te Soci" més modern (estil píndola) */
.n-btn {
border-radius: 50px !important; /* Totalment rodó als costats */
padding: 10px 25px !important;
box-shadow: 0 4px 6px rgba(155, 31, 46, 0.2) !important;
transition: transform 0.2s ease, background 0.3s ease !important;
}
.n-btn:hover {
background: #7a1824 !important; /* Vermell més fosc al passar el ratolí */
transform: translateY(-2px); /* Puja una miqueta, efecte "click" */
}
/* Unificar els títols de tota la web amb el color corporatiu */
h1, h2, h3, .content-heading h2 {
color: #9B1F2E !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: -0.5px;
}
/* Ajust del Cercador per fer-lo més fi */
.n-search input {
border: 1.5px solid #eee !important;
background: #f9f9f9 !important;
transition: all 0.3s ease !important;
}
.n-search input:focus {
border-color: #9B1F2E !important;
background: #fff !important;
outline: none;
width: 160px !important; /* S'eixampla en clicar */
}
/* ============================================================
7. AUTOMATITZACIÓ RS-EVENTS (AGENDA MODERNA)
============================================================ */
/* Contenidor de l'esdeveniment */
.rseventspro-list-item, .event-item {
display: flex !important;
background: #fff;
border-radius: 12px !important;
margin-bottom: 20px !important;
padding: 15px !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
border-left: 5px solid #9B1F2E !important;
transition: transform 0.3s ease;
}
.rseventspro-list-item:hover {
transform: translateX(10px); /* Es mou a la dreta en passar el ratolí */
}
/* La data com un "Badge" destacat */
.rseventspro-date-block {
background: #9B1F2E !important;
color: #fff !important;
padding: 10px !important;
border-radius: 8px !important;
text-align: center;
min-width: 70px;
font-weight: 800;
text-transform: uppercase;
margin-right: 20px;
}
/* ============================================================
8. GRID AUTOMÀTIC DE NOTÍCIES
============================================================ */
.blog-items {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 30px !important;
}
.com-content-category-blog__item {
background: #fff !important;
border-radius: 15px !important;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
display: flex;
flex-direction: column;
}
.com-content-category-blog__item img {
width: 100% !important;
height: 200px !important;
object-fit: cover !important; /* Retalla la foto automàticament perquè totes siguin iguals */
}
/* --- ESTILS PREMIUM LLUÏSOS --- */
:root {
--vermell-lluisos: #9B1F2E;
--blanc: #ffffff;
}
/* --- DISSENY ULTRA PREMIUM LLUÏSOS --- */
:root {
--roig: #9B1F2E;
--roig-hover: #7d1925;
--blanc: #ffffff;
}
/* HERO SECTION */
.ultra-hero {
position: relative;
min-height: 90vh;
background: url('https://www.lluisoshorta.cat/images/lluisos/espais/Sala-EscenariButaques.jpg') center/cover no-repeat;
display: flex; align-items: center; justify-content: center;
color: var(--blanc); text-align: center; padding: 60px 20px;
}
.ultra-overlay {
position: absolute; inset: 0;
background: linear-gradient(rgba(155, 31, 46, 0.88), rgba(0, 0, 0, 0.75));
z-index: 1;
}
.ultra-container { position: relative; z-index: 2; max-width: 1000px; }
.ultra-badge {
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4);
padding: 10px 25px; border-radius: 50px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 1.5px;
}
.ultra-title {
font-size: clamp(3.2rem, 12vw, 6.5rem) !important; font-weight: 900 !important;
line-height: 0.95 !important; margin: 35px 0 25px !important; color: var(--blanc) !important;
}
.ultra-lead { font-size: 1.4rem; max-width: 750px; margin: 0 auto 45px; opacity: 0.95; line-height: 1.5; font-weight: 300; }
/* BOTONS AMB HOVER CORREGIT */
.ultra-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.u-btn {
padding: 18px 40px; border-radius: 50px; font-weight: 800; text-transform: uppercase;
text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 15px;
}
.u-btn-white { background: var(--blanc); color: var(--roig) !important; }
.u-btn-white:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); background: #f0f0f0; }
.u-btn-outline { background: transparent; border: 2px solid var(--blanc); color: var(--blanc) !important; }
.u-btn-outline:hover { background: var(--blanc) !important; color: var(--roig) !important; transform: translateY(-4px); }
/* STATS */
.ultra-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.2);
}
.u-num { display: block; font-size: 3.5rem; font-weight: 900; line-height: 1; margin-bottom: 5px; }
.u-label { font-size: 0.85rem; text-transform: uppercase; font-weight: 600; opacity: 0.8; letter-spacing: 1px; }
/* ABOUT SECTION */
.ultra-about { padding: 100px 20px; background: #ffffff; }
.u-wrapper { max-width: 1250px; margin: 0 auto; }
.u-about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.u-subtitle { color: var(--roig); font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 3px; }
.u-h2 { font-size: 3rem !important; color: #111 !important; margin: 15px 0 30px !important; line-height: 1.1 !important; }
.u-text-link { color: var(--roig); font-weight: 800; text-decoration: none; font-size: 1.2rem; display: inline-block; margin-top: 20px; }
.u-cards-side { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.u-card {
background: #fcfcfc; padding: 35px; border-radius: 20px; border: 1px solid #f0f0f0;
transition: 0.4s; position: relative; overflow: hidden;
}
.u-card:hover { transform: translateY(-8px); border-color: var(--roig); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.u-card-icon { font-size: 2.5rem; display: block; margin-bottom: 20px; }
.u-card h3 { font-size: 1.3rem !important; margin-bottom: 12px !important; color: #222 !important; font-weight: 800 !important; }
/* MOBILE RESPONSIVE (TOT FUNCIONAL) */
@media (max-width: 992px) {
.u-about-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; }
.ultra-stats { grid-template-columns: 1fr; gap: 40px; }
.u-cards-side { grid-template-columns: 1fr; }
.ultra-title { font-size: 3.5rem !important; }
.ultra-hero { min-height: 100vh; padding-top: 100px; }
}
/* ============================================================
RESCAT DE L'ESTRUCTURA VISUAL
============================================================ */
/* Fem que el contenidor central es comporti com el d'abans */
.container-mid {
max-width: 1320px !important; /* Mida estàndard de Cassiopeia */
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Arreglem els mòduls perquè no ocupin tot l'ample si n'hi ha més d'un */
.section-spacer {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px !important;
}
/* Si hi ha targetes (cards) de notícies, que tinguin la seva mida */
.section-spacer > div {
flex: 1;
min-width: 300px;
}
/* El component principal (on surten els articles) ha de respirar */
.content-area {
padding-top: 20px;
background: #ffffff;
}
/* El fons de la web sol ser una mica gris per destacar el blanc */
body.site {
background-color: #f8f9fa !important;
}
/* ============================================================
13. TIPOGRAFIA INTER I SECCIONS MODERNES
============================================================ */
/* Importem la font Inter si no la tens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
/* Títol de la Secció */
.section-header {
text-align: left;
margin-bottom: 40px;
padding-left: 10px;
}
.section-header .subtitle {
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
}
.section-header h2 {
color: #9B1F2E !important;
font-family: 'Inter', sans-serif !important;
font-weight: 800 !important;
font-size: 2.5rem !important;
text-transform: none !important; /* Forcem que NO sigui tot majúscules */
margin: 10px 0 !important;
}
.header-line {
width: 60px;
height: 4px;
background: #9B1F2E;
border-radius: 2px;
}
/* Millora de càrrega de fotos i aspecte de les cards */
.com-content-category-blog__item img, .item img {
aspect-ratio: 16 / 9; /* Força la proporció per evitar salts visuals al carregar */
background: #eee; /* Color de fons mentre la foto no arriba */
content-visibility: auto; /* Millora el rendiment del navegador */
transition: opacity 0.5s ease-in-out;
}
/* Els títols dels articles (H1 o H2 dins del blog) */
h1, h2, .content-heading h2, .blog-items h2 a {
font-family: 'Inter', sans-serif !important;
color: #9B1F2E !important;
text-transform: none !important; /* Ni majúscules ni res forçat */
font-weight: 700 !important;
}
/* ============================================================
SECCIÓ ACTUALITAT: TÍTOL MODERN I BLINDAT
============================================================ */
/* Contenidor de seguretat per al títol */
.section-header {
display: block;
width: 100%;
max-width: 1320px; /* Aliniat amb el contingut de la web */
margin: 60px auto 40px auto !important; /* Marge gran a dalt i sota */
padding: 0 40px !important; /* MARGE DE SEGURETAT: Mai tocarà l'extrem */
box-sizing: border-box;
}
/* El subtítol "Actualitat" */
.section-header .subtitle {
display: block;
font-family: 'Inter', sans-serif !important;
color: #666;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 5px;
}
/* El títol "Notícies i Activitats" */
.section-header h2 {
font-family: 'Inter', sans-serif !important;
color: #9B1F2E !important;
font-weight: 900 !important;
font-size: clamp(2rem, 5vw, 3rem) !important; /* Mida fluida segons pantalla */
text-transform: none !important; /* Ni majúscules ni res forçat */
line-height: 1.1 !important;
margin: 0 !important;
letter-spacing: -1px;
}
/* La línia decorativa vermella sota el títol */
.header-line {
display: block;
width: 80px;
height: 5px;
background: #9B1F2E;
margin-top: 15px;
border-radius: 50px;
}
/* Ajust per a mòbils: reduïm una mica el padding lateral */
@media (max-width: 768px) {
.section-header {
padding: 0 25px !important;
margin-top: 40px !important;
}
}
/* BANDA CREU DE SANT JORDI PREMIUM */
.csj-premium-bar {
background: #ffffff !important; /* Fons blanc pur per no carregar */
border-bottom: 1px solid #eee;
padding: 15px 0;
position: relative;
overflow: hidden;
}
.csj-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
gap: 25px;
}
/* El logo ara és més petit i elegant */
.csj-badge img {
height: 45px;
width: auto;
filter: grayscale(0.2); /* Una mica més sobri */
transition: filter 0.3s ease;
}
.csj-premium-bar:hover .csj-badge img {
filter: grayscale(0);
}
.csj-content {
display: flex;
flex-direction: column;
}
/* Etiqueta vermella petita a sobre */
.csj-tag {
font-family: 'Inter', sans-serif;
color: #9B1F2E;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 4px;
}
.csj-content p {
font-family: 'Inter', sans-serif;
color: #444 !important;
margin: 0 !important;
font-size: 0.9rem !important;
line-height: 1.2;
}
.csj-content strong {
color: #000;
font-weight: 700;
}
/* Línia decorativa subtil */
.csj-decorative-line {
flex-grow: 1;
height: 1px;
background: linear-gradient(90deg, #eee, transparent);
margin-left: 20px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.csj-container {
flex-direction: row; /* Mantinguem l'horitzontal en mòbil perquè és petit */
padding: 0 20px;
gap: 15px;
}
.csj-tag { font-size: 9px; }
.csj-content p { font-size: 0.8rem !important; }
.csj-decorative-line { display: none; }
}
/* HEADER MÉS ALT I DESTACAT */
.n-header {
background: #ffffff !important;
border-bottom: 3px solid #9B1F2E !important;
position: sticky;
top: 0;
z-index: 10000;
width: 100% !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Ombra una mica més profunda */
/* MODIFICACIÓ: Pugem de 90px a 110px o 120px */
height: 110px !important;
display: flex;
align-items: center;
transition: all 0.3s ease; /* Transició suau */
}
.n-logo img {
/* MODIFICACIÓ: Pugem l'alçada del logo per omplir el nou espai */
height: 95px !important;
width: auto !important;
object-fit: contain;
margin-top: 0; /* Centrat verticalment */
}
/* Ajustem la posició dels submenús perquè no quedin "volant" */
.n-nav li ul {
top: 65px !important; /* Ajustat perquè surti just sota el text del menú */
}
/* Accions (Cerca i Botó) */
.n-actions {
display: flex;
align-items: center;
gap: 20px;
}
/* HEADER MÉS ALT I DESTACAT */
.n-header {
background: #ffffff !important;
border-bottom: 3px solid #9B1F2E !important;
position: sticky;
top: 0;
z-index: 10000;
width: 100% !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Ombra una mica més profunda */
/* MODIFICACIÓ: Pugem de 90px a 110px o 120px */
height: 110px !important;
display: flex;
align-items: center;
transition: all 0.3s ease; /* Transició suau */
}
.n-logo img {
/* MODIFICACIÓ: Pugem l'alçada del logo per omplir el nou espai */
height: 95px !important;
width: auto !important;
object-fit: contain;
margin-top: 0; /* Centrat verticalment */
}
/* Ajustem la posició dels submenús perquè no quedin "volant" */
.n-nav li ul {
top: 65px !important; /* Ajustat perquè surti just sota el text del menú */
}
/* Accions (Cerca i Botó) */
.n-actions {
display: flex;
align-items: center;
gap: 20px;
}
/* ============================================================
VISTA DE NOTÍCIES (CATEGORY BLOG) MODERNA
============================================================ */
/* Contenidor principal de les notícies */
.com-content-category-blog__items {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
gap: 30px !important;
padding: 20px 0 !important;
}
/* Cada targeta de notícia */
.com-content-category-blog__item {
background: #ffffff !important;
border-radius: 12px !important;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
border: 1px solid #eee !important;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.com-content-category-blog__item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
/* Imatge de la notícia */
.com-content-category-blog__item .item-image {
margin: 0 !important;
width: 100% !important;
height: 220px !important;
overflow: hidden;
}
.com-content-category-blog__item .item-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Contingut de la notícia (Text) */
.blog-item-content {
padding: 25px !important;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Títol de la notícia */
.com-content-category-blog__item h2,
.com-content-category-blog__item h2 a {
font-size: 1.25rem !important;
font-weight: 800 !important;
color: #222 !important;
line-height: 1.3 !important;
margin-bottom: 15px !important;
text-decoration: none !important;
}
/* Text d'introducció */
.com-content-category-blog__item .article-introtext {
font-size: 0.95rem !important;
color: #555 !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
}
/* Botó "Llegir més" */
.readmore a.btn {
background: #f8f9fa !important;
color: #9B1F2E !important;
border: 1px solid #9B1F2E !important;
font-weight: 700 !important;
padding: 8px 20px !important;
border-radius: 6px !important;
text-transform: uppercase;
font-size: 0.85rem !important;
transition: all 0.3s;
}
.readmore a.btn:hover {
background: #9B1F2E !important;
color: #ffffff !important;
}.targeta-especial {
border: 2px dashed #9B1F2E !important;
background: #fff9f9 !important;
}
/* ============================================================
TRANSFORMACIÓ DE L'AGENDA (RSEvents!Pro) A GRID MODERN
============================================================ */
/* Contenidor principal: el convertim en graella */
ul.rs_events_container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
gap: 25px !important;
padding: 0 !important;
list-style: none !important;
}
/* Cada targeta d'esdeveniment */
li.rs_event_detail {
background: #ffffff !important;
border: 1px solid #eee !important;
border-radius: 15px !important;
padding: 0 !important; /* Treiem el padding interior per la imatge */
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
}
li.rs_event_detail:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
border-color: #9B1F2E !important;
}
/* Bloc de detalls (Text) */
.rs_event_details {
padding: 20px !important;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* Títol de l'activitat */
.rsepro-title-block a {
font-size: 1.25rem !important;
font-weight: 800 !important;
color: #9B1F2E !important;
text-decoration: none !important;
line-height: 1.3;
}
/* Data destacada */
.rsepro-date-block {
background: #fdf2f4 !important;
padding: 8px 12px !important;
border-radius: 8px !important;
margin: 10px 0 !important;
font-size: 0.9rem !important;
color: #444 !important;
border-left: 3px solid #9B1F2E;
}
/* Descripció curta */
.rsepro-small-description-block {
font-size: 0.9rem !important;
color: #666 !important;
line-height: 1.5 !important;
margin-top: 10px !important;
}
/* Categories i Etiquetes (més discretes) */
.rsepro-event-taxonomies-block {
font-size: 0.75rem !important;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
margin-top: auto; /* Les empeny al final de la targeta */
padding-top: 15px;
}
.rsepro-event-taxonomies-block a {
color: #9B1F2E !important;
font-weight: 600;
}
/* Amagar elements innecessaris en el grid */
.rs_options, .rsepro-event-location-block span[itemprop="address"] {
display: none !important;
}
/* Ajust per a mòbils */
@media (max-width: 480px) {
ul.rs_events_container {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
AGENDA PREMIUM - LLUÏSOS D'HORTA
============================================================ */
/* 1. GRID I TARGETES */
ul.rs_events_container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
gap: 30px !important;
padding: 0 !important;
}
li.rs_event_detail {
background: #ffffff !important;
border-radius: 20px !important;
border: 1px solid rgba(0,0,0,0.05) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
li.rs_event_detail:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(155, 31, 46, 0.15) !important;
border-color: #9B1F2E !important;
}
/* 2. ICONES PER CATEGORIES (Utilitzant Emojis o caràcters segons el text) */
.rsepro-title-block::before {
display: inline-block;
margin-right: 10px;
font-size: 1.4rem;
vertical-align: middle;
}
/* Identificadors per categories */
li:has(a[href*="teatre"]) .rsepro-title-block::before { content: "🎭"; }
li:has(a[href*="jazz"]) .rsepro-title-block::before { content: "🎷"; }
li:has(a[href*="cinema"]) .rsepro-title-block::before { content: "🎬"; }
li:has(a[href*="comedia"]) .rsepro-title-block::before { content: "🎤"; }
li:has(a[href*="dansa"]) .rsepro-title-block::before { content: "💃"; }
/* 4. CONTINGUT ALINEAT */
.rs_event_details {
padding: 25px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.rsepro-title-block {
min-height: 3.5rem;
display: flex;
align-items: center;
}
.rsepro-title-block a {
color: #1a1a1a !important;
font-size: 1.3rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-decoration: none !important;
}
/* 5. DATA ESTIL "BADGE" PREMIUM */
.rsepro-date-block {
order: -1; /* Posa la data a sobre de tot */
background: #f8f9fa !important;
color: #9B1F2E !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
padding: 6px 15px !important;
border-radius: 50px !important;
display: inline-block !important;
width: fit-content;
margin-bottom: 15px !important;
border: 1px solid rgba(155, 31, 46, 0.1) !important;
}
}
li.rs_event_detail:hover .rs_event_details::after {
background: #7a1823;
}
/* 7. NETEJA DE TAXONOMIES */
.rsepro-event-taxonomies-block {
border-top: 1px solid #eee;
margin-top: 20px !important;
padding-top: 15px !important;
font-size: 0.8rem !important;
color: #888 !important;
}
/* ============================================================
SOLUCIÓ DEFINITIVA CLIC EN TOTA LA CARD I BOTÓ
============================================================ */
/* 1. Assegurem que la card té posició relativa */
li.rs_event_detail {
position: relative !important;
}
/* 2. L'enllaç del títol o de la imatge el fem "gegant" */
/* Busquem l'enllaç principal de l'esdeveniment i el fem ocupar tota la card */
li.rs_event_detail .rs_event_link {
position: static !important;
}
li.rs_event_detail .rs_event_link::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important; /* Capa per sobre de tot */
cursor: pointer !important;
}
/* 4. Efecte visual quan l'usuari passa per sobre (hover) */
li.rs_event_detail:hover .rs_event_details::after {
background: #000000 !important;
transform: translateY(-2px) !important;
}
/* 5. Altres enllaços (com categories o tags) han d'estar PER SOBRE del clic general
per si algú vol clicar la categoria específica */
.rsepro-event-categories-block a,
.rsepro-event-tags-block a,
.rsepro-event-location-block a {
position: relative !important;
z-index: 20 !important;
}
/* ============================================================
CARTELLS GRANS I IMPONENTS (SENCERS)
============================================================ */
.rs_event_image {
width: 100% !important;
height: auto !important; /* Deixem que l'alçada sigui natural */
max-height: 450px !important; /* Però posem un límit perquè no sigui infinit */
background: #fdf2f4 !important;
display: block !important;
overflow: hidden;
position: relative;
border-bottom: 1px solid #eee;
}
.rs_event_image img {
width: 100% !important;
height: auto !important; /* L'alçada s'adapta a l'amplada */
display: block !important;
object-fit: cover !important; /* Fem que ocupi tot l'ample */
/* Si vols que es vegi exactament el que hi ha a dalt del cartell
(on sol anar el títol important), usem top: */
object-position: top !important;
transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Quan passem el ratolí, fem un zoom molt suau per donar vida */
li.rs_event_detail:hover .rs_event_image img {
transform: scale(1.08);
}
/* Ajustem el contingut de sota perquè no "balli" */
.rs_event_details {
padding: 20px !important;
background: white;
z-index: 5;
}
/* Truc perquè tota la imatge gran sigui clicable */
.rs_event_link.thumbnail {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* ============================================================
PÀGINA DETALL ESDEVENIMENT - PREMIUM
============================================================ */
.rs_event_wrapper {
max-width: 1000px;
margin: 40px auto;
font-family: 'Inter', sans-serif;
display: grid;
grid-template-columns: 350px 1fr; /* Columna imatge | Columna contingut */
gap: 40px;
}
}
/* 2. TÍTOL I META (Dreta) */
.rs_event_title {
grid-column: 2; /* Forcem que el títol vagi a la dreta */
font-size: 2.5rem !important;
font-weight: 900 !important;
color: #1a1a1a;
line-height: 1.1;
margin-bottom: 20px !important;
}
.rs_event_meta {
grid-column: 2;
list-style: none;
padding: 20px !important;
background: #f8f9fa;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 30px !important;
}
.rs_event_meta li {
font-size: 0.95rem;
color: #444;
}
.rs_event_meta li i {
color: #9B1F2E; /* Color vermell per les icones */
width: 25px;
}
/* 3. DESCRIPCIÓ */
.rs_event_description {
grid-column: 2;
font-size: 1.05rem;
line-height: 1.7;
color: #333;
}
/* 4. BOTÓ DE COMPRA (El fem brillar) */
.rs_event_description .btn-info {
background: #9B1F2E !important;
border: none !important;
padding: 18px 30px !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 1.1rem !important;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 20px rgba(155, 31, 46, 0.3) !important;
transition: all 0.3s ease;
margin: 40px auto !important;
}
.rs_event_description .btn-info:hover {
transform: scale(1.03);
background: #000 !important;
}
/* 5. PATROCINADORS I SHARE */
.rs_event_sponsors, .rs_event_share {
grid-column: 1 / span 2; /* Ocupen tota l'amplada a sota */
padding-top: 40px;
border-top: 1px solid #eee;
margin-top: 40px;
}
.rs_event_sponsors {
display: flex;
gap: 30px;
align-items: center;
}
.rs_sponsor_img {
height: 60px;
filter: grayscale(1);
opacity: 0.6;
transition: all 0.3s;
}
.rs_sponsor_img:hover {
filter: grayscale(0);
opacity: 1;
}
/* RESPONSIVE: En mòbil, tot en una columna */
@media (max-width: 768px) {
.rs_event_wrapper {
grid-template-columns: 1fr;
}
.rs_event_wrapper .rs_event_image {
position: static;
margin-bottom: 20px;
}
.rs_event_title, .rs_event_meta, .rs_event_description {
grid-column: 1;
}
}
/* ============================================================
PÀGINA DETALL ESDEVENIMENT - SENSE SOLAPAMENTS
============================================================ */
.rs_event_wrapper {
max-width: 1100px;
margin: 40px auto;
font-family: 'Inter', sans-serif;
display: grid;
/* Creem dues columnes: esquerra per foto, dreta per text */
grid-template-columns: 380px 1fr;
gap: 50px;
align-items: start; /* Important: cada columna mesura el que mesura el seu contingut */
}
/* 2. BLOC DE TEXT (TÍTOL, META I DESCRIPCIÓ) */
.rs_event_title {
grid-column: 2;
font-size: 2.8rem !important;
font-weight: 900 !important;
line-height: 1.1;
margin: 0 0 20px 0 !important;
}
.rs_event_meta {
grid-column: 2;
list-style: none;
padding: 20px !important;
background: #fdf2f4; /* Rosa suau corporatiu */
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 30px !important;
}
.rs_event_description {
grid-column: 2;
font-size: 1.05rem;
line-height: 1.8;
}
/* 3. BLOCS INFERIORS (PATROCINADORS I SHARE) */
/* Forcem que aquests blocs comencin a sota de tot el grid anterior */
.rs_event_sponsors,
.rs_event_share {
grid-column: 1 / span 2;
clear: both;
padding-top: 40px;
border-top: 1px solid #eee;
margin-top: 40px;
position: relative;
z-index: 20; /* Per sobre de qualsevol possible resta d'sticky */
background: white; /* Per assegurar que no es veu res per sota */
}
/* 4. BOTÓ DE COMPRA DINÀMIC */
.rs_event_description .btn-info {
background: #9B1F2E !important;
border: none !important;
padding: 20px !important;
border-radius: 12px !important;
font-weight: 800 !important;
display: block !important;
width: 100% !important;
max-width: 400px;
margin: 40px 0 !important;
text-align: center;
color: white !important;
box-shadow: 0 10px 25px rgba(155, 31, 46, 0.2) !important;
}
/* AJUST MÒBIL */
@media (max-width: 850px) {
.rs_event_wrapper {
grid-template-columns: 1fr;
padding: 0 20px;
}
.rs_event_image {
position: static; /* Treiem l'sticky en mòbil */
max-width: 400px;
margin: 0 auto 30px;
}
.rs_event_title, .rs_event_meta, .rs_event_description {
grid-column: 1;
}
}
/* Ajust específic per al mòdul en posició top-a */
.tp-top-a .rs_events_module,
.pos-top-a .rs_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 25px !important;
padding: 40px 0 !important; /* Donem aire per dalt i per baix */
max-width: 1200px;
margin: 0 auto !important;
}
/* Estil de les targetes del mòdul */
.rs_events_module li {
background: #ffffff;
border-radius: 15px;
border: 1px solid #eee;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.rs_events_module li:hover {
transform: translateY(-5px);
border-color: #9B1F2E;
box-shadow: 0 12px 30px rgba(155, 31, 46, 0.1);
}
/* ============================================================
AGENDA HOME: CARTELLERA PREMIUM (TOP-A)
============================================================ */
/* 1. CONTENIDOR PRINCIPAL */
.top-a.card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 40px 0 !important;
}
/* Títol de la secció: Gran i amb caràcter */
.top-a.card .card-header {
background: transparent !important;
border: none !important;
text-align: center;
font-size: 2.2rem !important;
font-weight: 900 !important;
color: #1a1a1a !important;
text-transform: uppercase;
letter-spacing: -1px;
margin-bottom: 40px !important;
}
/* 2. EL GRID DE TARGETES */
ul.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 25px !important;
padding: 0 !important;
list-style: none !important;
}
/* 3. LA TARGETA (CARD) */
ul.rsepro_events_module li {
background: #ffffff !important;
border-radius: 24px !important;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,0.05) !important;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
ul.rsepro_events_module li:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 50px rgba(155, 31, 46, 0.2) !important;
border-color: #9B1F2E !important;
}
/* 4. LA IMATGE (EL CARTELL) */
.rsepro-image {
width: 100% !important;
height: 380px !important; /* Alçada potent per veure el cartell */
overflow: hidden;
background: #f0f0f0;
}
.rsepro-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* El cartell omple tot l'espai */
transition: transform 0.8s ease;
}
ul.rsepro_events_module li:hover .rsepro-image img {
transform: scale(1.1);
}
/* 5. EL TEXT I INFO */
/* Fem que el text surti sobre una capa degradada a la part inferior de la imatge */
ul.rsepro_events_module li a {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
padding: 0 20px !important;
color: #ffffff !important;
font-size: 1.2rem !important;
font-weight: 800 !important;
line-height: 1.2;
text-shadow: 0 2px 10px rgba(0,0,0,0.8);
z-index: 3;
text-decoration: none !important;
}
/* La data estilitzada */
ul.rsepro_events_module li small {
position: absolute;
bottom: 20px;
left: 20px;
background: #9B1F2E; /* Vermell Lluïsos */
color: white !important;
padding: 4px 12px;
border-radius: 50px;
font-weight: 700;
font-size: 0.75rem !important;
z-index: 3;
}
/* 6. GRADIENT DE PROTECCIÓ (Perquè el text blanc es llegeixi sempre) */
ul.rsepro_events_module li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
z-index: 2;
}
/* Eliminem el
que sobra */
ul.rsepro_events_module li br {
display: none;
}
/* ============================================================
BLOG MODERN I DINÀMIC - LLUÏSOS D'HORTA
============================================================ */
/* 1. CONTENIDOR PRINCIPAL: Grid modern */
.blog-items {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
gap: 30px !important;
padding: 20px 0 !important;
}
/* 2. NOTÍCIA DESTACADA (La primera notícia ocupa el doble) */
.blog-items .blog-item:first-child {
grid-column: 1 / span 2; /* Ocupa dues columnes */
display: flex;
flex-direction: row;
background: #fdf2f4 !important; /* Color suau per destacar */
}
@media (max-width: 900px) {
.blog-items .blog-item:first-child {
grid-column: 1;
flex-direction: column;
}
}
/* 3. LA TARGETA DE NOTÍCIA (BLOG ITEM) */
.blog-item {
background: #ffffff !important;
border-radius: 20px !important;
overflow: hidden;
border: 1px solid #eee !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.blog-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(155, 31, 46, 0.1) !important;
border-color: #9B1F2E !important;
}
/* 5. CONTINGUT DE LA NOTÍCIA */
.item-content {
padding: 25px !important;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-items .blog-item:first-child .item-content {
width: 50%;
justify-content: center;
}
/* Títols potents */
.item-title {
font-size: 1.4rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin-bottom: 15px !important;
}
.item-title a {
color: #1a1a1a !important;
text-decoration: none !important;
}
/* 6. BOTÓ "LLEGIR MÉS" MINIMALISTA */
.readmore {
margin-top: auto !important;
padding-top: 15px;
}
.readmore .btn-secondary {
background: transparent !important;
border: 2px solid #9B1F2E !important;
color: #9B1F2E !important;
border-radius: 50px !important;
padding: 8px 20px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
text-transform: uppercase;
transition: all 0.3s !important;
}
.readmore .btn-secondary:hover {
background: #9B1F2E !important;
color: #fff !important;
}
/* 7. NETEJA DE CODIGOS INLINE (Eliminem els estils lletjos que venen del text) */
.item-content section,
.item-content div,
.item-content p {
padding: 0 !important;
margin: 0 0 10px 0 !important;
max-width: 100% !important;
font-family: inherit !important;
text-align: left !important;
}
/* Amaguem intros massa llargues per mantenir l'alçada neta */
.item-content p:not(.readmore) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #666;
font-size: 0.95rem;
}
/* ============================================================
BLOG MODERN I DINÀMIC - LLUÏSOS D'HORTA
============================================================ */
/* 1. CONTENIDOR PRINCIPAL: Grid modern */
.blog-items {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
gap: 30px !important;
padding: 20px 0 !important;
}
/* 2. NOTÍCIA DESTACADA (La primera notícia ocupa el doble) */
.blog-items .blog-item:first-child {
grid-column: 1 / span 2; /* Ocupa dues columnes */
display: flex;
flex-direction: row;
background: #fdf2f4 !important; /* Color suau per destacar */
}
@media (max-width: 900px) {
.blog-items .blog-item:first-child {
grid-column: 1;
flex-direction: column;
}
}
/* 3. LA TARGETA DE NOTÍCIA (BLOG ITEM) */
.blog-item {
background: #ffffff !important;
border-radius: 20px !important;
overflow: hidden;
border: 1px solid #eee !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.blog-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(155, 31, 46, 0.1) !important;
border-color: #9B1F2E !important;
}
/* 4. IMATGES: Rectificació de les mides ràncies */
.blog-item .item-image {
margin: 0 !important;
float: none !important; /* Eliminem el float antic */
width: 100% !important;
height: 250px;
overflow: hidden;
}
.blog-items .blog-item:first-child .item-image {
height: auto;
width: 50% !important;
}
.blog-item .item-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.6s ease;
}
.blog-item:hover .item-image img {
transform: scale(1.05);
}
/* 5. CONTINGUT DE LA NOTÍCIA */
.item-content {
padding: 25px !important;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-items .blog-item:first-child .item-content {
width: 50%;
justify-content: center;
}
/* Títols potents */
.item-title {
font-size: 1.4rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin-bottom: 15px !important;
}
.item-title a {
color: #1a1a1a !important;
text-decoration: none !important;
}
/* 6. BOTÓ "LLEGIR MÉS" MINIMALISTA */
.readmore {
margin-top: auto !important;
padding-top: 15px;
}
.readmore .btn-secondary {
background: transparent !important;
border: 2px solid #9B1F2E !important;
color: #9B1F2E !important;
border-radius: 50px !important;
padding: 8px 20px !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
text-transform: uppercase;
transition: all 0.3s !important;
}
.readmore .btn-secondary:hover {
background: #9B1F2E !important;
color: #fff !important;
}
/* 7. NETEJA DE CODIGOS INLINE (Eliminem els estils lletjos que venen del text) */
.item-content section,
.item-content div,
.item-content p {
padding: 0 !important;
margin: 0 0 10px 0 !important;
max-width: 100% !important;
font-family: inherit !important;
text-align: left !important;
}
/* Amaguem intros massa llargues per mantenir l'alçada neta */
.item-content p:not(.readmore) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #666;
font-size: 0.95rem;
}
/* ============================================================
HERO SECTION: FOTO PROTAGONISTA I ESTIL NET
============================================================ */
.hero-section {
position: relative;
min-height: 70vh; /* Una mica més baix perquè es vegi l'agenda a sota */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
/* LA FOTO: Posa aquí la teva millor imatge */
background-image: url('/images/lluisos/2023.12.17-Pastorets%201.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed; /* Efecte parallax: la foto es queda fixa en fer scroll */
color: #ffffff;
}
/* Capa de protecció: fa que la foto es vegi bé però el text sigui llegible */
.hero-section::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4); /* Filtre fosc suau */
z-index: 1;
}
.hero-content {
position: relative;
z-index: 10;
max-width: 800px;
}
/* TÍTOL: Més net i professional */
.hero-content h1 {
font-size: 4rem !important;
font-weight: 800 !important;
color: #ffffff !important;
text-transform: none; /* No tot en majúscules si prefereixes un look més humà */
letter-spacing: -1px;
margin-bottom: 10px !important;
text-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}
/* SUBTÍTOL: Net i clar */
.hero-content p {
font-size: 1.4rem !important;
font-weight: 400 !important;
color: #ffffff !important;
opacity: 1;
margin-bottom: 35px !important;
text-shadow: 1px 1px 8px rgba(0,0,0,0.5);
}
/* BOTONS: Més arrodonits i moderns */
.n-btn {
display: inline-block;
padding: 15px 35px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
border-radius: 8px !important; /* Més quadrat-arrodonit, estil modern */
text-decoration: none !important;
transition: all 0.3s ease !important;
border: none !important;
}
/* Botó Agenda (Vermell Lluïsos) */
.n-btn:not(.btn-alt) {
background: #9B1F2E !important;
color: white !important;
margin-right: 15px;
}
/* Botó Soci (Blanc/Transparent) */
.btn-alt {
background: white !important;
color: #1a1a1a !important;
}
.n-btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* ============================================================
PÀGINA DE SOCIS: DISSENY ELEGANT I COMPARATIU
============================================================ */
/* Contenidors de secció */
.socis-section {
padding: 60px 0;
border-bottom: 1px solid #eee;
}
/* Taula comparativa moderna */
.taula-preus {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
margin: 30px 0;
}
.taula-preus th {
background: #9B1F2E;
color: white;
padding: 20px;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
}
.taula-preus td {
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
background: white;
}
.taula-preus tr:last-child td { border: none; }
.taula-preus .preu-soci {
font-weight: 800;
color: #9B1F2E;
background: #fffcfc; /* Un toc de color per destacar la columna soci */
}
/* Caixes d'avantatges fiscals (Glassmorphism suau) */
.fiscal-box {
background: #f8f9fa;
border-left: 5px solid #9B1F2E;
padding: 30px;
border-radius: 0 15px 15px 0;
margin: 20px 0;
}
/* Grid de convenis */
.conveni-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.conveni-card {
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid #eee;
transition: all 0.3s ease;
}
.conveni-card:hover {
border-color: #9B1F2E;
transform: translateY(-5px);
}
/* EFECTE BRILLANT PER A LA CALCULADORA DE SOCIS */
div[style*="background: #1a1a1a"] {
position: relative;
border: 1px solid rgba(255,255,255,0.1);
}
div[style*="background: #1a1a1a"]::after {
content: '';
position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: radial-gradient(circle, rgba(155,31,46,0.15) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
}
/* Animació de les files de descompte */
div[style*="display: flex; justify-content: space-between"]:hover {
background-color: #fdfdfd;
padding-left: 35px !important;
transition: all 0.3s ease;
}
/* AMAGAR MÒDULS DE LA HOME A LA PÀGINA DE SOCIS */
/* Suposem que l'ID de l'item de menú de socis és el que hagis creat */
body.itemid-XXX .mod-custom,
body.itemid-XXX .rseventspro-module {
display: none !important;
}
/* Si no saps l'ID, podem usar la classe de l'article */
.socis-wrapper {
margin-top: 0 !important;
padding-top: 20px !important;
}
/* Això elimina espais en blanc que puguin quedar a dalt */
#t3-mainbody, .main-content {
padding-top: 0 !important;
}
/* Unifiquem top-a i top-b perquè no facin columnes */
.grid-child.container-top-a,
.grid-child.container-top-b {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
}
/* Fem que cada mòdul ocupi tot l'ample */
.grid-child.container-top-a > *,
.grid-child.container-top-b > * {
width: 100% !important;
margin-bottom: 40px !important;
}
.seccions-header {
text-align: left !important; /* Canvi de center a left */
max-width: 100% !important;
margin: 0 0 40px 0 !important;
padding: 0 !important;
}
.seccions-header h2 {
font-size: 3rem !important; /* Mida més semblant a Notícies */
letter-spacing: -1px !important;
color: #9B1F2E !important; /* El teu color granat */
}
.header-line {
width: 80px;
height: 5px;
background: #9B1F2E;
margin-top: 15px;
border-radius: 50px;
}
/* Això busca la classe que hem posat al camp "Classe de capçalera" */
.section-header {
text-align: left !important;
color: #9B1F2E !important;
font-weight: 900 !important;
font-family: 'Inter', sans-serif !important;
text-transform: none !important;
margin-bottom: 15px !important;
display: block !important;
}
/* Afegim la línia vermella automàticament sota el títol del mòdul */
.section-header::after {
content: "";
display: block;
width: 80px;
height: 5px;
background: #9B1F2E;
margin-top: 10px;
border-radius: 50px;
}
/* --- SECCIÓ FINAL UNIFICADA PREMIUM --- */
.premium-final-experience { background: #ffffff; padding-top: 100px; font-family: 'Inter', sans-serif; }
/* SPONSORS: ART GALLERY STYLE */
.gallery-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: center; }
.premium-header-center { margin-bottom: 60px; }
.p-badge { color: #9B1F2E; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 4px; }
.p-h2 { font-size: 3.2rem !important; color: #111 !important; margin-top: 20px !important; font-weight: 900 !important; line-height: 1.1 !important; }
.p-divider-elegant { width: 80px; height: 4px; background: #9B1F2E; margin: 30px auto 0; border-radius: 10px; }
.p-spacer-light { width: 200px; height: 1px; background: #eee; margin: 60px auto; }
.gallery-grid-main { display: flex; justify-content: center; gap: 80px; margin-bottom: 30px; align-items: center; }
.gallery-item-large img { height: 90px; filter: grayscale(1); opacity: 0.5; transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.gallery-item-large:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
.gallery-grid-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; opacity: 0.6; padding-bottom: 80px; }
.gallery-mini-box img { max-height: 50px; width: auto; filter: grayscale(1); transition: 0.4s; }
.gallery-mini-box:hover img { filter: grayscale(0); transform: translateY(-8px); opacity: 1; }
/* MAPA IMMERSIU I CARD DE VIDRE */
.immersive-contact {
position: relative; height: 750px; display: flex; align-items: center; justify-content: flex-end;
overflow: hidden; border-top: 1px solid #eee;
}
.map-full-bg { position: absolute; inset: 0; z-index: 1; filter: grayscale(0.2) contrast(1.05); }
.map-full-bg iframe { width: 100%; height: 100%; border: 0; pointer-events: auto; }
.contact-glass-card {
position: relative; z-index: 2; background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
width: 480px; padding: 70px; margin-right: 8%; border-radius: 40px;
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255,255,255,0.5);
}
.glass-badge { color: #9B1F2E; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 3px; }
.glass-title { font-size: 2.8rem !important; color: #111 !important; margin: 20px 0 40px !important; font-weight: 900 !important; }
.g-row { display: flex; align-items: center; gap: 25px; margin-bottom: 30px; }
.g-icon { font-size: 1.6rem; background: #fff; width: 55px; height: 55px; border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.04); }
.g-row p { color: #333; font-size: 1.15rem; font-weight: 500; margin: 0; text-align: left; }
.glass-btn {
display: block; width: 100%; padding: 25px; background: #9B1F2E; color: #fff !important;
text-align: center; text-decoration: none !important; border-radius: 20px;
font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
transition: all 0.5s ease; margin-top: 30px;
}
.glass-btn:hover { background: #111; transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
/* RESPONSIVE */
@media (max-width: 992px) {
.immersive-contact { height: auto; flex-direction: column; }
.map-full-bg { position: relative; height: 400px; order: 2; width: 100%; }
.contact-glass-card { width: 100%; margin: 0; border-radius: 0; padding: 50px 25px; order: 1; background: #fff; }
.gallery-grid-main { gap: 40px; flex-direction: column; }
.p-h2 { font-size: 2.2rem !important; }
}
/* 1. Botó del header (Més polit) */
.n-search-trigger {
background: #f4f4f4; /* Un gris molt clar per destacar-lo una mica */
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: 800;
font-size: 12px;
color: #111;
margin-right: 20px;
padding: 8px 18px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.n-search-trigger:hover {
background: #9B1F2E;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(155, 31, 46, 0.3);
}
/* 2. Overlay de cerca (EL CANVI RADICAL: VERMELL) */
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #9B1F2E; /* Vermell corporatiu */
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.search-overlay.active {
opacity: 1;
visibility: visible;
}
/* 3. Contingut del buscador */
.search-overlay-content {
width: 90%;
max-width: 900px;
text-align: center;
transform: scale(0.9);
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.search-overlay.active .search-overlay-content {
transform: scale(1);
}
/* 4. Estil del input (Lletra blanca i gran) */
.search-overlay-content input[type="search"],
.search-overlay-content input[type="text"] {
width: 100%;
border: none;
border-bottom: 4px solid rgba(255, 255, 255, 0.3);
background: transparent;
font-size: 60px; /* Molt més gran i impactant */
font-weight: 900;
padding: 20px;
outline: none;
text-align: center;
color: #ffffff; /* Text blanc */
transition: border-color 0.3s;
}
.search-overlay-content input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.search-overlay-content input:focus {
border-bottom-color: #ffffff;
}
.search-hint {
margin-top: 30px;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 4px;
font-size: 14px;
font-weight: 600;
}
/* 5. Botó de tancar (Modern i blanc) */
.close-search {
position: absolute;
top: 50px;
right: 50px;
font-size: 40px;
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
border: none;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.close-search:hover {
background: #ffffff;
color: #9B1F2E;
transform: rotate(90deg);
}
/* --- NAVEGACIÓ CORREGIDA --- */
.n-nav ul {
display: flex !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 25px !important;
}
.n-nav li {
position: relative !important;
/* Reduïm l'espai per evitar el salt del cursor */
padding-bottom: 10px;
margin-bottom: -10px;
}
.n-nav a {
color: #111 !important;
text-transform: uppercase;
font-weight: 800;
font-size: 13px;
text-decoration: none !important;
padding: 10px 0;
display: block;
}
/* --- SUBMENÚS AMB "PONT INVISIBLE" --- */
.n-nav li ul {
display: none !important;
position: absolute !important;
/* El top ha d'estar a prop del text per no perdre el contacte */
top: 100% !important;
left: 0 !important;
background: #fff !important;
min-width: 250px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
z-index: 9999 !important;
padding: 10px 0 !important;
flex-direction: column !important;
border-top: 3px solid #9B1F2E !important;
/* EL TRUC: Un pseudo-element que omple el buit per dalt */
margin-top: 0px;
}
/* Creem una zona invisible a sobre del submenú perquè el cursor mai perdi el focus */
.n-nav li ul::before {
content: "";
position: absolute;
top: -15px; /* Crea un pont de 15px cap amunt */
left: 0;
width: 100%;
height: 15px;
background: transparent;
}
.n-nav li:hover > ul {
display: flex !important;
}
.n-nav li ul a {
padding: 12px 20px !important;
font-size: 12px !important;
text-transform: none !important;
border-bottom: 1px solid #f9f9f9 !important;
font-weight: 600 !important;
}
.n-nav li ul a:hover {
background: #fdfdfd;
color: #9B1F2E !important;
}
/* --- ESTILS SUBHEADER (TOP BAR) --- */
.n-top-bar {
background: #111; /* Negre elegant */
color: rgba(255,255,255,0.8);
padding: 8px 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.n-top-bar .n-container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Esquerra: Creu de Sant Jordi */
.creu-icon { color: #9B1F2E; margin-right: 5px; font-size: 14px; }
.highlight { color: #fff; }
/* Dreta: Social + Login */
.n-top-right { display: flex; align-items: center; gap: 15px; }
.n-social { display: flex; gap: 12px; }
.n-social a {
color: rgba(255,255,255,0.6) !important;
text-decoration: none !important;
transition: color 0.3s;
}
.n-social a:hover { color: #fff !important; }
.top-sep { color: rgba(255,255,255,0.2); }
/* Botó Àrea Socis */
.n-top-login {
color: #fff !important;
text-decoration: none !important;
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.1);
padding: 4px 10px;
border-radius: 3px;
transition: background 0.3s;
}
.n-top-login:hover {
background: #9B1F2E; /* Es torna vermell en passar el ratolí */
}
.user-icon { font-size: 12px; }
/* Ajust del Header per sota del Subheader */
.n-header {
background: #fff;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 1000;
}
/* --- ESTIL CORPORATIU LLUÏSOS D'HORTA --- */
.com-contact.contact {
max-width: 1200px;
margin: 40px auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
/* Títol Principal */
.page-header h1 {
color: #1a1a1a;
font-weight: 800;
font-size: 2.8rem;
border-bottom: 4px solid #9b1f2e;
padding-bottom: 15px;
margin-bottom: 40px;
}
/* Contenidor de 2 columnes */
.com-contact__container {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
/* Columna Esquerra: La nostra Informació */
.com-contact__info {
flex: 1;
min-width: 320px;
background: #fdfdfd;
padding: 30px;
border-radius: 12px;
border: 1px solid #eee;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.com-contact__info h3 {
color: #9b1f2e;
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 25px;
font-weight: 700;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.contact-address dt {
color: #666;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1px;
margin-top: 15px;
}
.contact-address dd {
font-size: 1.1rem;
margin-left: 0;
margin-bottom: 5px;
font-weight: 500;
}
/* Columna Dreta: Formulari */
.contact-form {
flex: 1.5;
min-width: 350px;
background: #fff;
padding: 35px;
border-radius: 12px;
border-top: 5px solid #9b1f2e; /* Franja corporativa superior */
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.contact-form legend {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 30px;
border: none;
}
/* Millora dels camps del formulari */
.contact-form .form-control {
border: 1px solid #ccc;
border-radius: 6px;
padding: 12px;
font-size: 1rem;
background-color: #fcfcfc;
transition: all 0.2s;
}
.contact-form .form-control:focus {
border-color: #9b1f2e;
box-shadow: 0 0 0 3px rgba(155, 31, 46, 0.1);
background-color: #fff;
}
/* El Botó Vermell Lluïsos */
.contact-form .btn-primary {
background-color: #9b1f2e !important;
border: none !important;
padding: 15px 35px !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
text-transform: uppercase;
border-radius: 6px !important;
cursor: pointer;
transition: background 0.3s;
}
.contact-form .btn-primary:hover {
background-color: #7a1824 !important;
}
/* Mapa i Info General */
.com-contact__miscinfo {
width: 100%;
margin-top: 50px;
border-top: 1px solid #eee;
padding-top: 40px;
}
.com-contact__miscinfo h3 {
font-weight: 700;
margin-bottom: 20px;
}
.com-contact__miscinfo iframe {
width: 100% !important;
border-radius: 12px;
border: 1px solid #eee;
}
/* Ajustos per a mòbils */
@media (max-width: 768px) {
.com-contact__container {
flex-direction: column;
}
.page-header h1 {
font-size: 2rem;
}
}
/* TRANSFORMACIÓ BREADCRUMBS PREMIUM - LLUÏSOS D'HORTA */
/* Contenidor principal */
.mod-breadcrumbs.breadcrumb {
background-color: #ffffff !important; /* Fons blanc pur */
border-radius: 15px !important;
padding: 12px 25px !important;
margin: 20px 0 30px 0 !important;
box-shadow: 0 4px 15px rgba(153, 0, 73, 0.05) !important; /* Ombra molt suau granat */
border: 1px solid #f0f0f0 !important;
display: flex !important;
align-items: center !important;
list-style: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.9rem !important;
}
/* Text "Estàs aquí" */
.mod-breadcrumbs__here {
font-weight: 700 !important;
color: #999 !important;
text-transform: uppercase !important;
font-size: 0.75rem !important;
letter-spacing: 1px !important;
margin-right: 15px !important;
border-right: 2px solid #eee !important;
padding-right: 15px !important;
}
/* Items de la llista */
.mod-breadcrumbs__item.breadcrumb-item {
display: flex !important;
align-items: center !important;
color: #666 !important;
}
/* Enllaços (Inici, Seccions, etc.) */
.mod-breadcrumbs__item a.pathway {
color: #990049 !important; /* Vermell Lluïsos */
text-decoration: none !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.mod-breadcrumbs__item a.pathway:hover {
color: #5b121b !important; /* Vermell més fosc al passar el ratolí */
transform: translateY(-1px) !important;
}
/* Separador (la barra / o la fletxa) */
.breadcrumb-item + .breadcrumb-item::before {
content: "\f105" !important; /* Icona de fletxa FontAwesome */
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
color: #ccc !important;
padding: 0 12px !important;
}
/* Item actiu (on ets ara) */
.mod-breadcrumbs__item.active {
color: #333 !important;
font-weight: 700 !important;
}
/* Eliminar estils antics de float */
.float-start {
float: none !important;
}
/* Adaptació mòbil */
@media (max-width: 768px) {
.mod-breadcrumbs.breadcrumb {
padding: 10px 15px !important;
overflow-x: auto !important; /* Permet scroll lateral si és molt llarg */
white-space: nowrap !important;
}
.mod-breadcrumbs__here {
display: none !important; /* Amaguem "Estàs aquí" en mòbil per estalviar espai */
}
}
/* ============================================================
LLUÏSOS D'HORTA: SOLUCIÓ FINAL ANTI-CAOS
============================================================ */
/* 1. FIX DE LA LUPA GEGANT I CERCA */
.search-wrapper {
position: relative !important;
display: flex !important;
align-items: center !important;
background: #f5f5f7 !important;
padding: 8px 16px !important;
border-radius: 50px !important;
max-height: 40px !important;
width: 200px !important;
}
.search-input-modern {
border: none !important;
background: transparent !important;
width: 100% !important;
font-size: 14px !important;
padding: 0 !important;
outline: none !important;
}
/* Forcem la mida de la icona perquè no torni a créixer */
.search-icon-svg {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
stroke: #666 !important;
margin-right: 8px !important;
}
/* 2. SUBMENÚS: FI AL SOLAPAMENT (image_102f04.png) */
.n-nav-container ul li.parent > ul {
display: none !important; /* Per defecte amagat */
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
position: absolute !important;
top: 60px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 700px !important;
background: #ffffff !important;
padding: 25px !important;
border-radius: 20px !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
border: 1px solid #ddd !important;
z-index: 999999 !important;
}
/* Només mostrem EL submenú sobre el qual estem, no tots a la vegada */
.n-nav-container ul li.parent:hover > ul {
display: grid !important;
}
/* Estil dels botons interns */
.n-nav-container ul li.parent ul li a {
background: #f8f8f9 !important;
padding: 12px !important;
border-radius: 12px !important;
font-size: 13px !important;
text-align: center !important;
color: #333 !important;
font-weight: 600 !important;
border: 1px solid transparent !important;
transition: all 0.2s !important;
}
.n-nav-container ul li.parent ul li a:hover {
background: #fff !important;
border-color: #9B1F2E !important;
color: #9B1F2E !important;
}
/* 3. OVERLAY DE CERCA (PANTALLA COMPLETA) */
.search-overlay {
position: fixed !important;
top: 0; left: 0;
width: 100vw !important;
height: 100vh !important;
background: rgba(155, 31, 46, 0.98) !important;
z-index: 1000000 !important;
display: none; /* Es canvia amb JS */
align-items: center;
justify-content: center;
}
/* 4. AJUSTOS DE LA TOP BAR I LOGO */
.top-left img {
height: 20px !important;
width: auto !important;
}
.n-header-apple {
height: 90px !important;
display: flex !important;
align-items: center !important;
}
/* Això forçarà que només es vegi el que realment tens a sobre */
.n-nav-container ul li:not(:hover) > ul {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* RESET I ALTURES */
.n-header-apple {
height: 90px !important;
background: #fff !important;
border-bottom: 1px solid #f0f0f0 !important;
display: flex !important;
align-items: center !important;
position: sticky !important;
top: 0; z-index: 10000;
}
.n-container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* MENÚ PRINCIPAL */
.n-nav-container ul {
display: flex !important;
gap: 32px;
list-style: none !important;
margin: 0 !important; padding: 0 !important;
}
.n-nav-container ul li a {
font-size: 14px;
font-weight: 600;
color: #1d1d1f !important;
text-decoration: none;
transition: 0.2s;
}
/* EL SUBMENÚ (Targeta neta com la de la Junta) */
.n-nav-container ul li.parent { position: relative; padding: 35px 0; }
.n-nav-container ul li.parent > ul {
position: absolute !important;
top: 85px !important;
left: 50% !important;
transform: translateX(-50%) translateY(10px) !important;
width: 600px !important; /* Mida fixa per evitar que marxi de pantalla */
background: #fff !important;
border-radius: 20px !important;
padding: 24px !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* 2 columnes netes */
gap: 12px !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
border: 1px solid #eee !important;
opacity: 0; visibility: hidden;
transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.n-nav-container ul li.parent:hover > ul {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0) !important;
}
/* BOTONS DEL SUBMENÚ */
.n-nav-container ul li.parent ul li a {
background: #f5f5f7 !important;
padding: 16px !important;
border-radius: 12px !important;
text-align: left !important;
font-weight: 500 !important;
display: block !important;
}
.n-nav-container ul li.parent ul li a:hover {
background: #9B1F2E !important;
color: #fff !important;
}
/* CERCA (TRIGGER) */
.search-trigger {
background: #f5f5f7;
padding: 10px 18px;
border-radius: 100px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: #86868b;
transition: 0.2s;
}
.search-trigger:hover { background: #e8e8ed; }
.search-trigger svg { width: 18px; height: 18px; stroke: currentColor; }
/* OVERLAY PANTALLA COMPLETA */
.search-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(155, 31, 46, 0.98);
display: none; align-items: center; justify-content: center;
z-index: 20000;
}
.search-overlay-content { width: 90%; max-width: 800px; text-align: center; }
.search-overlay-content input {
width: 100%;
background: transparent; border: none;
border-bottom: 3px solid #fff;
font-size: 48px; color: #fff; padding: 20px; outline: none;
}
.close-search {
position: absolute; top: 40px; right: 40px;
background: none; border: none; color: #fff; font-size: 50px; cursor: pointer;
}
.btn-apple-premium {
background: #9B1F2E !important;
color: #fff !important;
padding: 12px 24px;
border-radius: 100px;
font-weight: 700;
text-decoration: none;
}
/* ============================================================
RESCAT LLUÏSOS: FIX TOTAL D'ESPAIS I SOLAPAMENTS
============================================================ */
/* 1. FIX DE LA LUPA I EL BOTÓ (Estil Junta) */
.n-actions-premium {
display: flex !important;
align-items: center !important;
gap: 15px !important; /* Ajunta els elements */
}
.search-trigger {
all: unset !important; /* Mateu qualsevol estil previ de Joomla */
display: flex !important;
align-items: center !important;
background: #f5f5f7 !important;
padding: 8px 15px !important;
border-radius: 50px !important;
cursor: pointer !important;
height: 35px !important;
}
.search-trigger svg {
width: 16px !important; /* Força la mida de la lupa perquè no sigui gegant */
height: 16px !important;
min-width: 16px !important;
stroke: #86868b !important;
}
.search-trigger span {
font-size: 13px !important;
color: #86868b !important;
margin-left: 8px !important;
}
/* 2. SUBMENÚS: ELIMINEM ELS ESPAIS TERRORÍFICS */
.n-nav-container ul li.parent > ul {
display: none !important; /* Amaguem per defecte per evitar el caos de la image_103e2a.png */
grid-template-columns: repeat(3, 1fr) !important; /* 3 columnes netes */
gap: 10px !important;
position: absolute !important;
top: 60px !important; /* Més a prop del menú */
left: 50% !important;
transform: translateX(-50%) !important;
width: 650px !important;
background: #ffffff !important;
padding: 20px !important; /* Espai interior controlat */
border-radius: 18px !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
border: 1px solid #eee !important;
z-index: 999999 !important;
}
/* Només mostrem el que toca */
.n-nav-container ul li.parent:hover > ul {
display: grid !important;
}
/* Eliminar espais buits gegants dins dels submenús */
.n-nav-container ul li.parent ul li {
padding: 0 !important;
margin: 0 !important;
height: auto !important;
}
.n-nav-container ul li.parent ul li a {
background: #f9f9fb !important;
padding: 12px 15px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #333 !important;
display: block !important;
text-align: center !important;
border: 1px solid transparent !important;
transition: all 0.2s !important;
}
.n-nav-container ul li.parent ul li a:hover {
background: #fff !important;
border-color: #9B1F2E !important;
color: #9B1F2E !important;
transform: translateY(-2px) !important;
}
/* 3. FIX DE LA PANTALLA COMPLETA (CERCA) */
.search-overlay {
background: rgba(155, 31, 46, 0.98) !important;
}
.search-overlay-content input {
font-size: 32px !important; /* Un pèl més petit per mòbil */
border-bottom: 2px solid #fff !important;
}
/* ============================================================
FIX DE SEGURETAT: EL "PONT INVISIBLE"
============================================================ */
.n-nav-container ul li.parent {
/* Augmentem la zona sensible del botó pare cap avall */
padding-bottom: 25px !important;
margin-bottom: -25px !important;
}
.n-nav-container ul li.parent > ul {
/* El pugem una mica perquè la distància sigui mínima */
top: 75px !important;
}
/* El "Pont": Creem un element invisible que ompli el buit */
.n-nav-container ul li.parent > ul::before {
content: "" !important;
position: absolute !important;
top: -25px !important; /* Cobreix l'espai buit cap amunt */
left: 0 !important;
right: 0 !important;
height: 30px !important;
background: transparent !important;
display: block !important;
}
/* Afegim un petit retard (delay) al tancar-se perquè no sigui brusc */
.n-nav-container ul li.parent > ul {
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
transition-delay: 0.1s !important; /* Et dóna 0.1 segons extres de reacció */
}
.n-nav-container ul li.parent ul {
gap: 8px !important; /* Redueix l'espai entre botons interns */
padding: 15px !important; /* Redueix l'aire intern del panell */
}
/* ============================================================
RESETS DRÀSTICS PER A LA LIGHT VERSION
============================================================ */
/* FORCEM EL FONS CLAR A TOT EL BLOC */
footer,
.footer,
.custom-footer {
background-color: #f5f5f7 !important; /* Gris clar */
background: #f5f5f7 !important; /* Doble seguretat */
color: #1d1d1f !important; /* Text fosc */
border: none !important;
}
/* ELIMINEM LES LÍNIES VERMELLES DE LES CAPÇALERES */
.footer h4,
.footer-col h4 {
color: #1d1d1f !important;
border-bottom: 1px solid #d2d2d7 !important; /* Línia gris fina */
text-transform: uppercase !important;
font-size: 13px !important;
letter-spacing: 1px !important;
padding-bottom: 10px !important;
}
/* AJUSTEM ELS ENLLAÇOS PERQUÈ NO SIGUIN BLANCS */
.footer a,
.f-list li a {
color: #6e6e73 !important;
text-decoration: none !important;
}
.footer a:hover {
color: #9B1F2E !important;
}
/* EL BADGE DE LA CREU DE SANT JORDI (Com a la imatge però light) */
.f-badge {
background: #ffffff !important;
color: #9B1F2E !important;
border: 1px solid #9B1F2E !important;
padding: 5px 15px !important;
border-radius: 50px !important;
font-weight: 700 !important;
display: inline-block !important;
}
/* ELS LOGOS DELS PARTNERS (Blanc sobre gris) */
.partner-name,
.partner-grid span,
.footer-partners a {
background: #ffffff !important;
color: #1d1d1f !important;
border: 1px solid #d2d2d7 !important;
padding: 10px 20px !important;
border-radius: 10px !important;
font-weight: 600 !important;
}
/* LA BARRETA DE COPYRIGHT FINAL (Més clara també) */
.f-bottom-bar,
.f-bottom-inner {
background: #e8e8ed !important;
color: #86868b !important;
border-top: 1px solid #d2d2d7 !important;
}
/* ============================================================
REMAKIN FOOTER: PURE JUNTA DIRECTIVA STYLE
============================================================ */
/* 1. RESET DE TIPOGRAFIA I COLORS BASE */
.footer, .footer-inner, .custom-footer {
font-family: 'Inter', -apple-system, sans-serif !important;
background-color: #ffffff !important; /* Passem al blanc pur per a màxima netedat */
color: #1d1d1f !important;
padding-left: 5% !important; /* Respectem marges laterals */
padding-right: 5% !important;
}
/* 2. ELIMINAR LA FRANJA NEGRA DELS LOGOS (image_11a1e8.png) */
.footer-partners {
background-color: #ffffff !important; /* Forcem blanc */
border-top: 1px solid #f2f2f2 !important;
border-bottom: 1px solid #f2f2f2 !important;
padding: 60px 0 !important;
margin: 40px 0 !important;
}
.partner-title {
color: #86868b !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
margin-bottom: 30px !important;
}
/* 3. TRANSFORMAR ELS BOTONS DELS LOGOS */
.partner-grid span,
.partner-name,
#ajuntament-logo, #generalitat-logo { /* Ajusta si tenen IDs específics */
background: #f5f5f7 !important; /* Gris molt suau, no blanc pur */
color: #1d1d1f !important;
border: none !important;
box-shadow: none !important;
padding: 15px 30px !important;
border-radius: 12px !important; /* Corba Lovable */
font-size: 12px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
transition: all 0.2s ease !important;
}
.partner-grid span:hover {
background: #e8e8ed !important;
transform: translateY(-2px) !important;
}
/* 4. AJUST DE MARGES I TEXTOS DEL FOOTER */
.footer-inner {
max-width: 1200px !important;
margin: 0 auto !important;
padding-top: 80px !important;
padding-bottom: 80px !important;
display: grid !important;
gap: 60px !important; /* Més aire entre columnes */
}
.footer-col h4 {
font-size: 13px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
border: none !important; /* Fora línies */
margin-bottom: 25px !important;
}
.f-list li a {
font-size: 14px !important;
color: #6e6e73 !important;
font-weight: 400 !important;
}
/* 5. BARRA INFERIOR (Més discreta) */
.f-bottom-bar {
background: #ffffff !important;
border-top: 1px solid #f2f2f2 !important;
padding: 40px 0 !important;
}
.f-bottom-inner {
color: #b5b5b5 !important;
font-size: 11px !important;
justify-content: center !important; /* Centrat estil minimal */
gap: 20px !important;
}
/* ============================================================
FOOTER TOTAL WIDTH & CC LICENSE FIX
============================================================ */
/* 1. FORCEM AMPLE TOTAL A TOTS ELS NIVELLS */
.footer,
.custom-footer,
.f-bottom-bar {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2. CONTENIDOR INTERN PER RESPIRAR (Marges de seguretat) */
.footer-inner,
.footer-partners,
.f-bottom-inner {
max-width: 1400px !important; /* Ocupa gairebé tot però amb aire */
margin: 0 auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
/* 3. FIX DE LA ZONA CREATIVE COMMONS (Barra gris image_11a2df.png) */
.f-bottom-bar {
background-color: #f5f5f7 !important; /* Mateix gris que el fons o blanc */
border-top: 1px solid #e5e5e7 !important;
padding: 30px 0 !important;
}
.f-bottom-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #86868b !important;
font-size: 12px !important;
}
/* Transformem el text de CC en una cosa neta */
.f-bottom-inner div {
flex: 1;
}
.f-bottom-inner div:last-child {
text-align: right !important;
font-style: italic !important;
opacity: 0.8;
}
/* 4. LOGOS PARTNERS SENSE CAIXES ESTRANYES */
.footer-partners {
border-top: 1px solid #f2f2f2 !important;
padding: 50px 40px !important;
}
.partner-grid {
display: flex !important;
justify-content: center !important;
gap: 50px !important;
}
.partner-name {
background: transparent !important; /* Fora grisos si vols màxima netedat */
border: none !important;
font-weight: 700 !important;
color: #d2d2d7 !important; /* Estil marca d'aigua elegant */
transition: color 0.3s !important;
}
.partner-name:hover {
color: #1d1d1f !important;
}
/* ============================================================
REDISSENY MODERN DE LA BARRA DE LICÈNCIA (CC)
============================================================ */
.f-bottom-bar {
background-color: #ffffff !important; /* Blanc pur per màxima netedat */
border-top: 1px solid #f2f2f2 !important;
padding: 40px 0 !important;
}
.f-bottom-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 40px !important;
/* Tipografia de sistema molt fina */
font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
letter-spacing: -0.2px !important;
}
/* El Copyright (Esquerra) */
.f-bottom-inner div:first-child {
color: #1d1d1f !important; /* Negre Apple */
font-weight: 600 !important;
font-size: 13px !important;
}
/* La Llicència (Dreta) - Transformada en "etiqueta" */
.f-bottom-inner div:last-child {
color: #86868b !important; /* Gris suau */
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
background: #f5f5f7 !important; /* Píndola de fons */
padding: 6px 16px !important;
border-radius: 100px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
cursor: default !important;
}
.f-bottom-inner div:last-child:hover {
background: #e8e8ed !important;
color: #1d1d1f !important;
}
/* 📱 RESPONSIVE: En mòbil ho centrem tot */
@media (max-width: 768px) {
.f-bottom-inner {
flex-direction: column !important;
gap: 20px !important;
text-align: center !important;
}
}
/* ============================================================
ELIMINACIÓ DE LA FRANJA ENFONSADA - NETEJA TOTAL
============================================================ */
/* 1. UNIFICAR EL FONS AL BLANC (Mata qualsevol gris residual) */
footer,
.footer,
.custom-footer,
.f-bottom-bar {
background: #ffffff !important;
background-color: #ffffff !important;
box-shadow: none !important; /* Elimina ombres que fan efecte "enfonsat" */
border: none !important;
}
/* 2. REESTRUCTURAR LA BARRA CC (Sense blocs de color) */
.f-bottom-bar {
padding: 60px 0 !important; /* Donem molt més aire per estil Junta */
border-top: 1px solid #f2f2f2 !important; /* Només una línia finíssima */
}
.f-bottom-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #b5b5b5 !important; /* Gris molt suau per a tot el text */
}
/* 3. MODERNITZAR EL TEXT DE LICÈNCIA SENSE PÍNDOLES */
/* Ara la llicència CC serà text net a la dreta, estil minimalista Apple */
.f-bottom-inner div:last-child {
background: transparent !important; /* Fora píndoles grises */
padding: 0 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #d2d2d7 !important; /* Text molt discret */
font-weight: 500 !important;
}
/* 4. EL COPYRIGHT MÉS FINET */
.f-bottom-inner div:first-child {
font-size: 11px !important;
font-weight: 400 !important;
color: #b5b5b5 !important;
}
/* ============================================================
MORT A LA FRANJA GRIS (image_11f8df.png)
============================================================ */
/* 1. ELIMINEM EL CONTENIDOR GRIS ESTRANY */
.f-bottom-bar {
background: transparent !important; /* Fem que el fons sigui invisible */
background-color: transparent !important;
border: none !important;
padding: 0 !important; /* Traiem el padding que crea la caixa */
width: 100% !important;
}
/* 2. FEM QUE EL TEXT FLOTI SOBRE EL BLANC DEL FOOTER */
.f-bottom-inner {
background: #ffffff !important; /* Forcem el blanc pur del fons general */
padding: 60px 5% !important; /* Donem molt d'aire (estil Apple) */
border-top: 1px solid #f2f2f2 !important; /* Línia de separació finíssima */
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
max-width: 100% !important;
}
/* 3. MODERNITZEM EL TEXT (ESTIL JUNTA) */
/* Copyright a l'esquerra */
.f-bottom-inner div:first-child {
color: #86868b !important; /* Gris de text secundari d'Apple */
font-size: 12px !important;
font-weight: 400 !important;
}
/* Llicència a la dreta */
.f-bottom-inner div:last-child {
color: #d2d2d7 !important; /* Molt discret, gairebé marca d'aigua */
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
font-weight: 600 !important;
font-style: normal !important; /* Fora cursives antigues */
}
/* 4. NETEJA DE POSSIBLES "SHADOWS" O "GRADIENTS" */
.f-bottom-bar, .f-bottom-inner, .custom-footer {
box-shadow: none !important;
text-shadow: none !important;
}
/* ============================================================
AGENDA DEFINITIVA: CARTELL SENCER I TEXT NET
============================================================ */
/* 1. GRID ESPAIÓS */
.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 35px !important;
padding: 20px 0 !important;
list-style: none !important;
}
/* 2. LA TARGETA */
.rsepro_events_module li {
position: relative !important;
background: #ffffff !important;
border-radius: 20px !important;
border: 1px solid #f2f2f2 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important; /* Força ordre vertical: Foto dalt, Text baix */
height: 100% !important;
text-align: center !important;
transition: all 0.3s ease !important;
}
.rsepro_events_module li:hover {
transform: translateY(-8px) !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}
/* 3. EL CARTELL (Sense retalls i nítid) */
.rsepro-image {
width: 100% !important;
height: 380px !important; /* Alçada fixa per al cartell */
background: #fbfbfd !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.rsepro-image img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* Cartell sencer A4 sempre */
padding: 10px !important;
}
/* 4. BLOC DE TEXT (Centrat i sense solapaments) */
.rsepro_events_module li a {
display: block !important;
padding: 20px 15px 10px 15px !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #1d1d1f !important;
text-decoration: none !important;
line-height: 1.3 !important;
min-height: 65px !important; /* Manté els botons alineats */
}
/* 5. LA DATA (Vermell, centrada i amb "a les") */
.rsepro_events_module li small {
display: table !important; /* Per poder-lo centrar amb margin auto */
margin: 0 auto 25px auto !important;
padding: 8px 18px !important;
background: #9b1f2e !important;
color: #ffffff !important;
border-radius: 50px !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
/* 6. CATEGORIA (Dalt a la dreta, neta) */
.rsepro_events_module li::before {
content: "ACTIVITAT" !important;
position: absolute !important;
top: 15px !important;
right: 15px !important;
background: rgba(255,255,255,0.95) !important;
color: #1d1d1f !important;
padding: 5px 10px !important;
border-radius: 8px !important;
font-size: 10px !important;
font-weight: 800 !important;
z-index: 10 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
border: 1px solid #eee !important;
}
/* 7. CLICKABLE TOTAL */
.rsepro_events_module li a::after {
content: "" !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: 5 !important;
}
/* ============================================================
FILTRES RSEVENTS: ESTIL APP MODERNA
============================================================ */
/* 1. ICONES RSS I ICAL (Dalt a la dreta, discrets) */
.rs_rss {
display: flex !important;
justify-content: flex-end !important;
gap: 15px !important;
margin-bottom: 20px !important;
}
.rs_rss a {
color: #86868b !important;
font-size: 18px !important;
transition: color 0.3s ease !important;
text-decoration: none !important;
}
.rs_rss a:hover {
color: #9B1F2E !important;
}
/* 2. CONTENIDOR PRINCIPAL DE LA BARRA */
.rsepro-navbar-responsive-collapse {
background: #ffffff !important;
padding: 15px 25px !important;
border-radius: 16px !important;
border: 1px solid #e5e5e7 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
margin-bottom: 40px !important;
}
.rsepro-navbar-responsive-collapse ul {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 15px !important;
border: none !important;
}
/* 3. DROPDOWNS (Selectors de Nom, És, etc.) */
.rsepro-navbar-responsive-collapse .nav-item.dropdown {
background: #f5f5f7 !important;
border-radius: 10px !important;
padding: 5px 15px !important;
transition: background 0.2s ease !important;
}
.rsepro-navbar-responsive-collapse .nav-item.dropdown:hover {
background: #e8e8ed !important;
}
.rsepro-navbar-responsive-collapse .dropdown-toggle {
color: #1d1d1f !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
}
.rsepro-navbar-responsive-collapse .dropdown-toggle .caret {
margin-left: 8px !important;
border-top-color: #9B1F2E !important;
}
/* 4. EL INPUT DE CERCA (El protagonista) */
#rsepro-filter {
border: 1px solid #d2d2d7 !important;
background: #ffffff !important;
border-radius: 10px !important;
padding: 10px 20px !important;
font-size: 14px !important;
color: #1d1d1f !important;
min-width: 250px !important;
transition: all 0.3s ease !important;
box-shadow: none !important;
}
#rsepro-filter:focus {
border-color: #9B1F2E !important;
box-shadow: 0 0 0 4px rgba(155, 31, 46, 0.1) !important;
width: 300px !important;
}
/* 5. BOTONS D'ACCIÓ (Add Filter / Netejar) */
#rsepro-filter-btn {
background: #9B1F2E !important;
border: none !important;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all 0.2s ease !important;
}
#rsepro-filter-btn:hover {
background: #7a1824 !important;
transform: translateY(-1px) !important;
}
#rsepro-clear-btn {
background: transparent !important;
border: 1px solid #d2d2d7 !important;
color: #86868b !important;
padding: 10px 20px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
}
#rsepro-clear-btn:hover {
background: #f5f5f7 !important;
color: #1d1d1f !important;
border-color: #1d1d1f !important;
}
/* 6. NETEJA DE DIVIDERS I DISPLAYS */
.divider-vertical {
display: none !important;
}
/* Dropdown Menu (la llista que s'obre) */
.dropdown-menu {
border-radius: 12px !important;
border: 1px solid #e5e5e7 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
padding: 8px !important;
margin-top: 10px !important;
}
.dropdown-item {
border-radius: 6px !important;
padding: 8px 15px !important;
font-size: 14px !important;
color: #424245 !important;
}
.dropdown-item:hover {
background: #f5f5f7 !important;
color: #9B1F2E !important;
}
/* Estils Base i Containers */
.n-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* 1. ESTRUCTURA GENERAL I LOGO */
.n-header-apple .n-container {
display: flex !important;
flex-wrap: wrap !important; /* Permet que el menú baixi a sota en mòbil */
align-items: center !important;
justify-content: space-between !important;
padding: 10px 15px !important;
}
.n-logo img {
height: 40px !important; /* Mida controlada */
width: auto !important;
}
/* 2. EL MENÚ (Responsive) */
.n-nav-container {
order: 3 !important; /* En mòbil, el posem al final */
width: 100% !important; /* Que ocupi tota l'amplada a sota */
margin: 15px 0 0 0 !important;
overflow-x: auto !important; /* Si els ítems no caben, que es pugui fer scroll lateral */
-webkit-overflow-scrolling: touch;
}
.n-nav-container ul {
display: flex !important;
gap: 15px !important;
padding: 10px 0 !important;
margin: 0 !important;
list-style: none !important;
justify-content: flex-start !important; /* Aliniat a l'esquerra per l'scroll */
border-top: 1px solid #f0f0f0;
}
.n-nav-container li a {
white-space: nowrap !important; /* Que els textos no se solapin */
font-size: 14px !important;
font-weight: 600 !important;
color: #1d1d1f !important;
text-decoration: none !important;
}
/* 3. BARRA SUPERIOR (Creu de Sant Jordi) */
.top-bar-apple .n-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 5px 15px !important;
}
.top-left img {
height: 18px !important;
width: auto !important;
}
.top-left span {
font-size: 11px !important; /* Molt petit en mòbil per que quedi en una línia */
margin-left: 8px !important;
}
/* 4. ACTIONS (Cerca i Botó) */
.n-actions-premium {
display: flex !important;
align-items: center !important;
gap: 12px !important;
order: 2 !important; /* Es manté a la dreta del logo */
}
.btn-apple-premium {
background: #9b1f2e !important;
color: white !important;
padding: 8px 14px !important;
border-radius: 100px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
/* 5. AJUSTOS PER ESCRIPTORI (Desktop) */
@media (min-width: 992px) {
.n-header-apple .n-container {
flex-wrap: nowrap !important; /* Tot en una sola línia */
}
.n-nav-container {
order: 2 !important; /* El menú al mig */
width: auto !important;
margin: 0 40px !important;
}
.n-nav-container ul {
border-top: none !important;
justify-content: center !important;
}
.n-actions-premium {
order: 3 !important; /* Accions a la dreta */
}
}
/* FIX PER A LA CREU DE SANT JORDI EN MÒBILS MOLT PETITS */
@media (max-width: 480px) {
.top-left span {
display: none !important; /* Si el mòbil és molt estret, amaguem el text per seguretat */
}
}
/* 5. AJUSTOS PER ESCRIPTORI (Desktop) */
@media (min-width: 992px) {
.n-header-apple .n-container {
flex-wrap: nowrap !important;
display: grid !important; /* Canviem a Grid per tenir control total de les 3 columnes */
grid-template-columns: auto 1fr auto; /* Esquerra auto, Centre expandit, Dreta auto */
align-items: center !important;
gap: 20px !important;
width: 100% !important;
max-width: 1200px !important; /* O l'amplada màxima de la teva web */
margin: 0 auto !important;
}
.n-logo {
grid-column: 1;
display: flex !important;
}
.n-nav-container {
grid-column: 2; /* Força el menú al centre exacte */
order: unset !important;
width: 100% !important;
margin: 0 !important;
overflow: visible !important;
}
.n-nav-container ul {
border-top: none !important;
justify-content: center !important; /* Centra els ítems dins de la columna central */
gap: 25px !important; /* Més espai entre enllaços per que no es vegi petit */
padding: 0 !important;
}
.n-nav-container li a {
font-size: 15px !important; /* Una mica més gran al PC */
transition: color 0.3s ease;
}
.n-actions-premium {
grid-column: 3;
order: unset !important;
justify-content: flex-end !important;
min-width: max-content !important; /* Evita que el botó s'encapsuli */
}
}
/* 1. CONTENIDOR I RESPIRACIÓ GENERAL */
#rs_event_show.rs_event_wrapper {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
background: transparent !important;
font-family: 'Inter', sans-serif !important;
}
/* 2. IMATGE SENSE FONS I CENTRADA */
.rs_event_image {
float: none !important;
width: 100% !important;
text-align: center !important;
margin: 0 0 50px 0 !important;
background: transparent !important;
border: none !important;
display: flex !important;
justify-content: center !important;
}
.rs_event_image img {
max-width: 500px !important;
width: 100% !important;
height: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
/* Ombra subtil per donar relleu al cartell */
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.12)) !important;
}
/* 3. TÍTOL CORPORATIU */
.rs_event_title {
text-align: center !important;
font-size: clamp(32px, 6vw, 52px) !important;
font-weight: 900 !important;
letter-spacing: -2px !important;
color: #1a1a1a !important;
margin: 20px 0 40px 0 !important;
line-height: 1.1 !important;
}
/* 4. CATEGORIES HORITZONTALS (BOTONS MODERNS) */
.rs_event_meta {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 auto 60px auto !important;
list-style: none !important;
border: none !important;
}
.rs_event_meta li {
background: #f1f1f3 !important; /* Gris neutre clar */
padding: 10px 20px !important;
border-radius: 50px !important; /* Estil píndola */
font-size: 14px !important;
font-weight: 600 !important;
color: #444 !important;
display: flex !important;
align-items: center !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: 1px solid transparent !important;
}
/* Efecte Hover Corporatiu */
.rs_event_meta li:hover {
background: #ffffff !important;
border-color: #9b1f2e !important;
color: #9b1f2e !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 20px rgba(155, 31, 46, 0.1) !important;
}
.rs_event_meta li i {
color: #9b1f2e !important; /* Icones en granat vi */
margin-right: 10px !important;
font-size: 16px !important;
}
.rs_event_meta li a {
color: inherit !important;
text-decoration: none !important;
}
/* 5. NETEJA DE LA DESCRIPCIÓ */
.rs_event_description {
width: 100% !important;
clear: both !important;
padding: 0 !important;
border: none !important;
}
/* 6. RESPONSIVE */
@media (max-width: 768px) {
#rs_event_show {
padding: 20px 15px !important;
}
.rs_event_meta {
gap: 8px !important;
margin-bottom: 40px !important;
}
.rs_event_meta li {
font-size: 13px !important;
padding: 8px 16px !important;
}
.rs_event_title {
margin-bottom: 25px !important;
}
}
/* AMAGAR EL COMPTADOR D'ULLS PER A MÉS NETEJA */
.rs_event_meta li:has(.fa-eye),
.rs_event_meta li i.fa-eye {
display: none !important;
}
/* 1. TRENCAR COLUMNES I FORÇAR FLUIX VERTICAL */
#rs_event_show,
#rs_event_show.rs_event_wrapper,
.rs_event_image,
.rs_event_description {
display: block !important;
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2. IMATGE: CENTRADA, SENSE FONS I AMB AIRE */
.rs_event_image {
text-align: center !important;
margin: 40px auto !important;
background: transparent !important;
border: none !important;
}
.rs_event_image img {
max-width: 500px !important; /* Mida ideal del cartell */
width: 100% !important;
height: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12)) !important;
}
/* 3. TÍTOL: CENTRAT I IMPACTANT */
.rs_event_title {
display: block !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(32px, 6vw, 52px) !important;
color: #1a1a1a !important;
letter-spacing: -2px !important;
margin: 20px 0 40px 0 !important;
}
/* 4. METADADES: HORITZONTALS (BOTONS MODERNES) */
.rs_event_meta {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 auto 50px auto !important;
border: none !important;
}
.rs_event_meta li {
background: #f1f1f3 !important;
padding: 10px 20px !important;
border-radius: 50px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #444 !important;
display: flex !important;
align-items: center !important;
transition: all 0.3s ease !important;
}
.rs_event_meta li:hover {
background: #ffffff !important;
box-shadow: 0 8px 20px rgba(155, 31, 46, 0.15) !important;
color: #9b1f2e !important;
}
.rs_event_meta li i {
color: #9b1f2e !important;
margin-right: 10px !important;
}
/* 5. DESCRIPCIÓ: QUE OCUPI TOT L'AMPLA */
.rs_event_description {
margin-top: 40px !important;
}
/* 6. RESPONSIVE PER A MÒBILS */
@media (max-width: 768px) {
.rs_event_meta {
flex-direction: column !important; /* En mòbil, les píndoles es posen una sobre l'altra si no caben */
align-items: center !important;
}
.rs_event_meta li {
width: fit-content !important;
}
}
/* NETEJA D'ELEMENTS SOBRANTS */
.rs_event_meta li:has(.fa-eye) { display: none !important; }
/* 1. RESET DE CONTENIDORS PARE */
#rs_event_show,
.rs_event_wrapper,
.rs_event_image,
.rs_event_description {
display: block !important;
width: 100% !important;
float: none !important;
clear: both !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* 2. IMATGE: FORÇAR QUE NO TINGUI RES ALS COSTATS */
.rs_event_image {
text-align: center !important;
padding: 20px 0 !important;
background: transparent !important;
}
.rs_event_image a,
.rs_event_image img {
display: inline-block !important;
float: none !important;
margin: 0 auto !important;
max-width: 450px !important; /* Mida controlada perquè no es pixel·li */
width: 90% !important;
}
/* 3. CATEGORIES: DE LLISTA VERTICAL A FILA HORITZONTAL MODERNA */
.rs_event_meta {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
list-style: none !important;
padding: 20px !important;
margin: 0 0 30px 0 !important;
border-top: 1px solid #f0f0f0 !important;
border-bottom: 1px solid #f0f0f0 !important;
}
.rs_event_meta li {
background: #fdf2f2 !important; /* Color granat molt suau de fons */
color: #9b1f2e !important;
padding: 8px 16px !important;
border-radius: 50px !important;
font-size: 13px !important;
font-weight: 600 !important;
white-space: nowrap !important; /* Que no es treguin en dues línies */
}
.rs_event_meta li i {
margin-right: 6px !important;
color: #9b1f2e !important;
}
.rs_event_meta li a {
color: #9b1f2e !important;
text-decoration: none !important;
}
/* 4. TÍTOL: CENTRAT I NET */
.rs_event_title {
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-weight: 900 !important;
color: #1a1a1a !important;
margin: 30px 0 !important;
width: 100% !important;
}
/* 5. AMAGAR EL COMPTADOR DE VISTES (EL "2" QUE SURT AL FINAL) */
.rs_event_meta li:last-child {
display: none !important;
}
/* 6. AJUST PER A MÒBILS */
@media (max-width: 768px) {
.rs_event_meta {
gap: 5px !important;
}
.rs_event_meta li {
font-size: 11px !important;
padding: 5px 12px !important;
}
}
/* 1. RESET DEL CONTENIDOR PRINCIPAL */
#rs_event_show.rs_event_wrapper {
display: flex !important;
flex-direction: column !important; /* Tot un sota de l'altre */
align-items: center !important; /* Tot centrat horitzontalment */
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
}
/* 2. FORÇAR LA FOTO AL 100% I CENTRADA */
.rs_event_image {
display: block !important;
width: 100% !important;
text-align: center !important;
float: none !important; /* Elimina el desplaçament lateral */
clear: both !important;
margin: 0 0 30px 0 !important;
background: transparent !important;
}
.rs_event_image a,
.rs_event_image img {
display: block !important;
margin: 0 auto !important;
width: auto !important;
max-width: 100% !important; /* No surt de la pantalla */
height: auto !important; /* Manté la proporció */
max-height: 80vh !important; /* Limita l'alçada perquè es vegi el text a sota */
float: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
/* 3. LES CATEGORIES (FILA HORITZONTAL MODERNA) */
.rs_event_meta {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 20px 0 !important;
margin: 0 0 40px 0 !important;
list-style: none !important;
border-top: 1px solid #eee !important;
border-bottom: 1px solid #eee !important;
}
.rs_event_meta li {
background: #fdf2f2 !important; /* Color corporatiu suau */
color: #9b1f2e !important; /* Granat vi */
padding: 10px 20px !important;
border-radius: 100px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
}
.rs_event_meta li i {
margin-right: 8px !important;
}
.rs_event_meta li a {
color: inherit !important;
text-decoration: none !important;
}
/* 4. NETEJA DEL TÍTOL I DESCRIPCIÓ */
.rs_event_title,
.rs_event_description {
width: 100% !important;
display: block !important;
float: none !important;
clear: both !important;
text-align: center !important;
}
/* AMAGAR EL COMPTADOR DE VISTES */
.rs_event_meta li:has(.fa-eye),
.rs_event_meta li:last-child {
display: none !important;
}
/* 1. FORÇAR BLOC ÚNIC PER A LA IMATGE */
.rs_event_image {
display: block !important;
width: 100% !important;
float: none !important; /* Elimina el desplaçament lateral */
clear: both !important; /* No deixa que pugi el text de sota */
text-align: center !important;
margin: 0 0 30px 0 !important;
padding: 0 !important;
background: transparent !important; /* Elimina fons grisos/blancs */
}
/* 2. PROPIETATS DE LA FOTO AL 100% */
.rs_event_image img {
display: block !important;
margin: 0 auto !important;
width: auto !important;
max-width: 100% !important; /* Ample total de la columna */
height: auto !important; /* Manté la proporció vertical (100% alt real) */
max-height: none !important; /* Anul·la qualsevol restricció d'alçada */
float: none !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* 3. ASSEGURAR QUE EL TÍTOL I LA DESCRIPCIÓ VAN A SOTA */
.rs_event_title,
.rs_event_description {
display: block !important;
width: 100% !important;
clear: both !important; /* Força que comencin sota la foto */
float: none !important;
}
/* 4. NETEJA DEL CONTENIDOR PARE SI ÉS FLEX */
.rs_event_wrapper {
display: block !important; /* Desactivem el flex que causa el desplaçament */
}
/* ============================================================
LLUÏSOS D'HORTA 2024 - DISSENY FINAL (LOGO FIX)
Color Corporatiu: #990049
============================================================ */
/* 1. CONFIGURACIÓ ESCRIPTORI */
.mobile-menu-toggle, .n-nav-mobile, .menu-overlay { display: none !important; }
.n-header-apple {
background: #ffffff !important;
height: 90px !important; /* Una mica més alt per al logo */
border-bottom: 1px solid #eee !important;
display: flex !important;
align-items: center !important;
position: sticky !important;
top: 0 !important;
z-index: 10000 !important;
}
.n-container {
max-width: 1400px !important;
margin: 0 auto !important;
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0 40px !important;
}
/* LOGO ESCRIPTORI: MIDA CORRECTA */
.n-logo img {
height: 65px !important; /* Augmentat per a escriptori */
width: auto !important;
display: block !important;
}
.n-nav-container { flex-grow: 1; display: flex; justify-content: center; }
.n-nav-container ul { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; }
.n-nav-container ul li { position: relative; padding: 25px 0; }
.n-nav-container ul li a { color: #1d1d1f !important; font-weight: 600; font-size: 15px; text-decoration: none; padding: 10px 18px; border-radius: 50px; transition: 0.2s; }
.n-nav-container ul li:hover > a { background: #f5f5f7 !important; color: #990049 !important; }
/* Submenús Escriptori */
.n-nav-container ul li ul {
position: absolute !important; top: 100% !important; left: 0 !important;
background: #ffffff !important; min-width: 250px !important; border-radius: 14px !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important; padding: 10px !important;
display: none !important; flex-direction: column !important; z-index: 10001 !important;
border: 1px solid rgba(0,0,0,0.05) !important; margin: 0 !important;
}
.n-nav-container ul li:hover > ul { display: flex !important; }
.n-nav-container ul li ul li ul { left: 100% !important; top: -10px !important; margin-left: -2px !important; }
.n-nav-container ul li ul li:hover > ul { display: flex !important; }
.n-nav-container ul li ul li a:hover { background: #990049 !important; color: #ffffff !important; }
/* 2. CONFIGURACIÓ MÒBIL (BREAKPOINT 1100px) */
@media (max-width: 1100px) {
.n-nav-container, .n-actions-premium { display: none !important; }
.n-header-apple { height: 70px !important; }
.n-container { padding: 0 20px !important; }
/* LOGO MÒBIL: MIDA AJUSTADA */
.n-logo img { height: 45px !important; }
.mobile-menu-toggle {
display: block !important;
background: #f5f5f7 !important;
border: none !important;
padding: 10px !important;
border-radius: 10px !important;
cursor: pointer !important;
z-index: 10001 !important;
}
.mobile-menu-toggle span { display: block; width: 22px; height: 2px; background: #1d1d1f; margin: 5px 0; }
.n-nav-mobile {
display: block !important; position: fixed !important; top: 0 !important; right: -100% !important;
width: 100% !important; height: 100vh !important; background: #ffffff !important;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; padding: 100px 25px 40px 25px !important;
z-index: 9999 !important; overflow-y: auto !important;
}
.n-nav-mobile.active { right: 0 !important; }
.n-nav-mobile ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.n-nav-mobile ul li { margin-bottom: 5px !important; width: 100% !important; }
.n-nav-mobile ul li a {
display: block !important; padding: 16px 20px !important; font-size: 18px !important;
font-weight: 700 !important; color: #1d1d1f !important; text-decoration: none !important;
border-radius: 12px !important; background: #f9f9f9 !important;
}
.n-nav-mobile ul li a:active { background: #990049 !important; color: #ffffff !important; }
.n-nav-mobile ul li ul {
display: block !important; position: static !important; box-shadow: none !important;
padding: 5px 0 15px 20px !important; background: transparent !important; border: none !important;
}
.n-nav-mobile ul li ul li a {
font-size: 16px !important; font-weight: 500 !important; background: transparent !important;
border-bottom: 1px solid #eee !important; border-radius: 0 !important; padding: 12px 10px !important; color: #666 !important;
}
.menu-overlay.active {
display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
background: rgba(0,0,0,0.5); z-index: 9998;
}
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -5px); }
}
/* --- ESTIL CORPORATIU TAGS / BOTONS --- */
/* Contenidor de la llista de tags */
.list-inline-item.tag-list0 {
margin-right: 8px !important;
margin-bottom: 8px;
}
/* El botó del tag (Sobreescrivint btn-info) */
.list-inline-item.tag-list0 a.btn-info {
background-color: #9b1f2e !important; /* El teu vermell corporatiu */
border: none !important;
border-radius: 8px !important; /* Més quadrat/modern, o 100px si el vols rodó */
color: #ffffff !important;
font-family: 'Geist', 'Inter', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 14px !important;
font-size: 0.75rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 2px 4px rgba(155, 31, 46, 0.1);
}
/* Efecte Hover (L'animació que demanaves) */
.list-inline-item.tag-list0 a.btn-info:hover {
background-color: #000000 !important; /* Canvia a negre al passar el ratolí */
transform: translateY(-2px); /* S'eleva una mica */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #ffffff !important;
}
/* Treure la icona o l'estil per defecte de Joomla si cal */
.list-inline-item.tag-list0 a.btn-info::before {
display: none !important;
}
/* ============================================================
FIX FINAL RSEVENTS - BOTÓ CENTRAT I ENLLAÇ TOTAL
============================================================ */
:root {
--rse-accent: #990049;
--rse-radius: 18px;
}
/* 1. LA TARGETA */
ul.rsepro_events_module li {
position: relative !important;
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border-radius: var(--rse-radius) !important;
overflow: hidden !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
transition: all 0.3s ease !important;
border: 1px solid rgba(0,0,0,0.05) !important;
margin-bottom: 20px !important;
padding-bottom: 80px !important; /* Espai per al botó centrat a baix */
}
/* 2. L'ENLLAÇ TOTAL (Això fa que el botó també sigui clicable) */
ul.rsepro_events_module li a {
color: #1d1d1f !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
padding: 20px 20px 5px 20px !important;
display: block !important;
}
/* Truc: L'enllaç s'expandeix per tota la targeta */
ul.rsepro_events_module li a::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 10 !important; /* Per sobre de tot, inclòs el botó visual */
}
/* 3. LA IMATGE */
ul.rsepro_events_module li .rsepro-image {
width: 100% !important;
height: 300px !important;
overflow: hidden !important;
}
ul.rsepro_events_module li .rsepro-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* 4. DATA I HORA */
ul.rsepro_events_module li small {
display: block !important;
padding: 0 20px !important;
color: #86868b !important;
font-size: 0.9rem !important;
}
ul.rsepro_events_module li:hover::after {
background: #1d1d1f !important;
transform: translateX(-50%) scale(1.05) !important;
}
/* 6. NETEJA */
ul.rsepro_events_module li br,
ul.rsepro_events_module li::before {
display: none !important;
}
/* ============================================================
SECCIÓ ASIMÈTRICA: VIU ELS LLUÏSOS (ESTIL ULTRA-MODERN)
============================================================ */
.modern-section-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 60px !important;
padding: 80px 20px !important;
max-width: 1200px !important;
margin: 0 auto !important;
align-items: center !important;
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif !important;
}
/* COLUMNA ESQUERRA: TEXT */
.modern-text-col {
flex: 1 !important;
min-width: 300px !important;
text-align: left !important;
}
.modern-text-col .overline {
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
color: #990049 !important;
text-transform: uppercase !important;
margin-bottom: 15px !important;
display: block !important;
}
.modern-text-col h2 {
font-size: 48px !important;
font-weight: 800 !important;
color: #990049 !important;
line-height: 1.1 !important;
margin-bottom: 30px !important;
letter-spacing: -1.5px !important;
}
.modern-text-col p {
font-size: 18px !important;
line-height: 1.6 !important;
color: #424245 !important;
margin-bottom: 40px !important;
}
.modern-link {
font-size: 16px !important;
font-weight: 800 !important;
color: #990049 !important;
text-decoration: none !important;
text-transform: uppercase !important;
border-bottom: 2px solid #990049 !important;
padding-bottom: 5px !important;
transition: all 0.3s ease !important;
display: inline-flex !important;
align-items: center !important;
}
.modern-link:hover {
color: #1d1d1f !important;
border-bottom-color: #1d1d1f !important;
padding-left: 10px !important;
}
/* COLUMNA DRETA: GRAELLA DE BLOCS */
.modern-grid-col {
flex: 1 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
min-width: 320px !important;
}
.grid-block {
aspect-ratio: 1 / 1 !important;
padding: 30px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
text-align: left !important;
border: 1px solid #1d1d1f !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
.grid-block.solid {
background: #990049 !important;
border-color: #990049 !important;
color: #ffffff !important;
}
.grid-block.solid h3,
.grid-block.solid p {
color: #ffffff !important;
}
.grid-block.white {
background: #ffffff !important;
color: #1d1d1f !important;
}
.grid-block:hover {
transform: scale(1.02) !important;
box-shadow: 10px 10px 0px #1d1d1f !important;
}
.grid-block.solid:hover {
box-shadow: 10px 10px 0px rgba(153, 0, 73, 0.3) !important;
}
.block-icon {
font-size: 32px !important;
margin-bottom: 20px !important;
}
.grid-block h3 {
font-size: 16px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
margin: 0 0 10px 0 !important;
letter-spacing: 0.5px !important;
}
.grid-block p {
font-size: 13px !important;
line-height: 1.4 !important;
margin: 0 !important;
opacity: 0.9 !important;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.modern-section-container { flex-direction: column !important; text-align: center !important; }
.modern-text-col { text-align: center !important; }
.modern-text-col h2 { font-size: 36px !important; }
}
/* ============================================================
PREMIUM FINAL EXPERIENCE - LLUÏSOS D'HORTA
Sponsors + Contacte Immersiu (Glassmorphism)
============================================================ */
.premium-final-experience {
font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
background: #ffffff !important;
}
/* 1. GALLERY SPONSORS */
.gallery-sponsors {
padding: 100px 20px !important;
background: #fbfbfd !important;
}
.gallery-container {
max-width: 1200px !important;
margin: 0 auto !important;
}
.premium-header-center {
text-align: center !important;
margin-bottom: 60px !important;
}
.p-badge {
display: inline-block !important;
background: rgba(153, 0, 73, 0.1) !important;
color: #990049 !important;
padding: 6px 16px !important;
border-radius: 50px !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 15px !important;
}
.p-h2 {
font-size: 42px !important;
font-weight: 800 !important;
color: #1d1d1f !important;
margin: 0 !important;
letter-spacing: -1px !important;
}
.p-divider-elegant {
width: 60px !important;
height: 4px !important;
background: #990049 !important;
margin: 25px auto 0 auto !important;
border-radius: 2px !important;
}
/* Grids de Logos */
.gallery-grid-main {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 30px !important;
margin-bottom: 40px !important;
}
.gallery-item-large {
background: #ffffff !important;
padding: 40px !important;
border-radius: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(0,0,0,0.05) !important;
transition: all 0.4s ease !important;
}
.gallery-item-large img {
max-width: 100% !important;
max-height: 80px !important;
object-fit: contain !important;
filter: grayscale(1) !important;
opacity: 0.7 !important;
transition: all 0.4s ease !important;
}
.gallery-item-large:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
border-color: #990049 !important;
}
.gallery-item-large:hover img {
filter: grayscale(0) !important;
opacity: 1 !important;
}
.gallery-grid-mini {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 20px !important;
}
.gallery-mini-box {
background: #ffffff !important;
padding: 20px !important;
border-radius: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(0,0,0,0.03) !important;
transition: all 0.3s ease !important;
}
.gallery-mini-box img {
max-width: 100% !important;
max-height: 50px !important;
filter: grayscale(1) !important;
opacity: 0.5 !important;
transition: all 0.3s ease !important;
}
.gallery-mini-box:hover {
transform: scale(1.05) !important;
border-color: #990049 !important;
}
.gallery-mini-box:hover img {
filter: grayscale(0) !important;
opacity: 1 !important;
}
/* 2. IMMERSIVE CONTACT */
.immersive-contact {
position: relative !important;
height: 700px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding-right: 10% !important;
overflow: hidden !important;
}
.map-full-bg {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
background: #eee !important; /* Placeholder per al mapa */
}
/* Targeta de Vidre (Glassmorphism) */
.contact-glass-card {
position: relative !important;
z-index: 10 !important;
width: 450px !important;
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
padding: 60px !important;
border-radius: 40px !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
}
.glass-badge {
font-size: 12px !important;
font-weight: 800 !important;
color: #990049 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 10px !important;
display: block !important;
}
.glass-title {
font-size: 36px !important;
font-weight: 800 !important;
color: #1d1d1f !important;
margin-bottom: 35px !important;
}
.glass-info {
margin-bottom: 40px !important;
}
.g-row {
display: flex !important;
align-items: center !important;
gap: 15px !important;
margin-bottom: 20px !important;
}
.g-icon {
font-size: 20px !important;
}
.g-row p {
font-size: 16px !important;
color: #424245 !important;
margin: 0 !important;
font-weight: 500 !important;
}
.glass-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
background: #990049 !important;
color: #ffffff !important;
padding: 18px 30px !important;
border-radius: 50px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 25px rgba(153, 0, 73, 0.2) !important;
}
.glass-btn:hover {
background: #1d1d1f !important;
transform: scale(1.05) !important;
}
.glass-btn .arrow {
transition: transform 0.3s ease !important;
}
.glass-btn:hover .arrow {
transform: translateX(5px) !important;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.immersive-contact {
height: auto !important;
padding: 40px 20px !important;
justify-content: center !important;
}
.contact-glass-card {
width: 100% !important;
padding: 40px !important;
}
.gallery-grid-main {
grid-template-columns: 1fr !important;
}
}
/*
SOLUCIÓ CSS PER AL HEADER (SENSE TOCAR L'HTML)
Copia aixo al teu fitxer .css principal
*/
:root {
--primary-color: #990049;
--glass-bg: rgba(255, 255, 255, 0.85);
}
/* --- 1. ARREGLAR TOP BAR (Mòbil) --- */
@media (max-width: 768px) {
.top-bar-apple {
display: none !important; /* Massa informació per a pantalles petites */
}
}
/* --- 2. HEADER MODERN (Glassmorphism) --- */
.n-header-apple {
position: sticky;
top: 0;
z-index: 1000;
background: var(--glass-bg) !important;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(0,0,0,0.08);
height: 70px;
display: flex;
align-items: center;
}
.n-header-apple .n-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 20px;
}
/* --- 3. LOGO --- */
.n-logo img {
height: 45px !important;
width: auto;
}
/* --- 4. ACCIONS I BOTONS (Mòbil) --- */
@media (max-width: 768px) {
/* Amaguem el text de cerca i el botó gran per no col·lapsar el header */
.n-actions-premium .search-trigger span,
.n-actions-premium .btn-apple-premium {
display: none !important;
}
/* Fem que la icona de cerca sigui més neta */
.search-trigger {
background: rgba(0,0,0,0.05);
padding: 10px;
border-radius: 50%;
}
}
/* --- 5. HAMBURGUESA MODERNA --- */
.mobile-menu-toggle {
border: none;
background: none;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px;
}
.mobile-menu-toggle span {
display: block;
width: 25px;
height: 2px;
background: #333;
border-radius: 2px;
transition: 0.3s;
}
/* Animació quan s'obre (si afegeixes la classe .open amb JS) */
.mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- 6. MENÚ MÒBIL (OVERLAY) --- */
.n-nav-mobile {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
background: white;
box-shadow: -5px 0 25px rgba(0,0,0,0.1);
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1100;
padding: 80px 25px;
}
.n-nav-mobile.active {
right: 0;
}
/* Estils per a la llista de Joomla dins del mòbil */
.n-nav-mobile ul {
list-style: none;
padding: 0;
}
.n-nav-mobile ul li {
margin-bottom: 15px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
}
.n-nav-mobile ul li a {
font-size: 18px;
color: #333;
text-decoration: none;
font-weight: 600;
}
/* Botó dins del menú mòbil */
.n-nav-mobile .mobile-actions {
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 15px;
}
.n-nav-mobile .btn-apple-premium {
display: block !important;
background: var(--primary-color);
color: white;
text-align: center;
padding: 12px;
border-radius: 12px;
font-weight: bold;
}
/* --- 7. CERCADOR FULL SCREEN --- */
.search-overlay {
background: rgba(255,255,255,0.98) !important;
backdrop-filter: blur(10px);
}
.search-container-inner input {
border: none !important;
border-bottom: 2px solid var(--primary-color) !important;
font-size: 24px !important;
padding: 10px 0 !important;
width: 100%;
}
/* Forçar mida del logo per sobre de qualsevol altra regla */
header.n-header-apple .n-logo img {
height: 100px !important; /* Ajusta aquest valor (80px, 100px, 120px...) */
width: auto !important; /* Manté la proporció sense deformar */
max-height: none !important; /* Elimina possibles restriccions de la plantilla */
min-height: 80px !important; /* Assegura un mínim */
}
/* Opcional: Si el logo "toca" els marges, donem aire al header */
header.n-header-apple {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
/* Centrat vertical de tots els elements del header */
header.n-header-apple .n-container {
display: flex !important;
align-items: center !important; /* Centra verticalment logo, menú i botons */
justify-content: space-between !important; /* Manté l'espai repartit */
height: auto !important;
min-height: 120px !important; /* Ha de ser igual o una mica més que l'altura del logo */
}
/* Assegurem que la llista del menú també estigui centrada */
header.n-header-apple .n-nav-container ul {
display: flex !important;
align-items: center !important;
margin-bottom: 0 !important; /* Treu marges que poden desquadrar */
}
/* Una mica d'aire entre els links del menú si els veus massa junts */
header.n-header-apple .n-nav-container ul li {
padding: 0 15px !important;
}
/* ═══════════════════════════════════════════════════════════
PRÒXIMES ACTIVITATS — RSEvents Pro Module
Transforma .rsepro_events_module en un grid de cards modern
Afegeix aquest CSS al Custom CSS del template de Joomla
o a un fitxer CSS personalitzat
═══════════════════════════════════════════════════════════ */
/* Variables (adapta si el template ja en té) */
:root {
--lh-red: #9B1F2E;
--lh-red-dark: #7a1624;
--lh-red-light: rgba(155, 31, 46, 0.07);
--lh-text: #1a1a1a;
--lh-body: #3a3a3c;
--lh-muted: #6e6e73;
--lh-border: #e5e5ea;
--lh-bg: #f7f7f8;
--lh-card: #ffffff;
--lh-radius: 16px;
--lh-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ── CONTENIDOR de la llista ── */
ul.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--lh-font) !important;
}
/* ── CADA ÍTEM = card ── */
ul.rsepro_events_module > li {
background: var(--lh-card) !important;
border: 1px solid var(--lh-border) !important;
border-radius: var(--lh-radius) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
transition: transform 0.22s ease, box-shadow 0.22s ease !important;
font-family: var(--lh-font) !important;
-webkit-font-smoothing: antialiased !important;
}
ul.rsepro_events_module > li:hover {
transform: translateY(-5px) !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10) !important;
}
/* ── IMATGE: ocupa tota l'amplada, altura fixa ── */
ul.rsepro_events_module .rsepro-image {
width: 100% !important;
height: 220px !important;
overflow: hidden !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: #111 !important;
flex-shrink: 0 !important;
}
ul.rsepro_events_module .rsepro-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
transition: transform 0.4s ease !important;
/* Sobreescriu el width="70" inline */
max-width: none !important;
}
ul.rsepro_events_module > li:hover .rsepro-image img {
transform: scale(1.05) !important;
}
/* ── COS DE LA CARD (títol + data + botó) ── */
ul.rsepro_events_module > li > a,
ul.rsepro_events_module > li > br,
ul.rsepro_events_module > li > small {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
/* Àrea de text interior — usem un truc per agrupar-ho */
ul.rsepro_events_module > li > a {
font-family: var(--lh-font) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--lh-text) !important;
text-decoration: none !important;
line-height: 1.35 !important;
padding: 18px 18px 6px !important;
transition: color 0.18s !important;
}
ul.rsepro_events_module > li > a:hover {
color: var(--lh-red) !important;
text-decoration: none !important;
}
ul.rsepro_events_module > li > br {
display: none !important; /* eliminem el
visual */
}
ul.rsepro_events_module > li > small {
font-family: var(--lh-font) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--lh-muted) !important;
padding: 0 18px 16px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
/* Icona de calendari davant de la data (pseudo) */
ul.rsepro_events_module > li > small::before {
content: '' !important;
display: inline-block !important;
width: 13px !important;
height: 13px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
flex-shrink: 0 !important;
opacity: 0.7 !important;
}
/* Separador abans del "botó" */
ul.rsepro_events_module > li > small {
border-bottom: 1px solid var(--lh-border) !important;
padding-bottom: 14px !important;
margin-bottom: 14px !important;
}
/* L'enllaç principal actua de botó a la part inferior */
ul.rsepro_events_module > li {
position: relative !important;
cursor: pointer !important;
}
/* Fem que l'anchor cobreixi tota la card */
ul.rsepro_events_module > li > a::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
}
ul.rsepro_events_module > li:hover::after {
background: var(--lh-red-dark) !important;
}
/* ── TÍTOL DE SECCIÓ (si el mòdul en té) ── */
/* Adapta el selector al que usa el teu template */
.moduletable h3.module-title,
.moduletable .module-title {
font-family: var(--lh-font) !important;
font-size: 26px !important;
font-weight: 700 !important;
color: var(--lh-text) !important;
margin-bottom: 28px !important;
position: relative !important;
display: inline-block !important;
padding-bottom: 10px !important;
text-transform: none !important;
letter-spacing: -0.02em !important;
}
.moduletable h3.module-title::after,
.moduletable .module-title::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 40px !important;
height: 3px !important;
background: var(--lh-red) !important;
border-radius: 2px !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
ul.rsepro_events_module {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 560px) {
ul.rsepro_events_module {
grid-template-columns: 1fr !important;
}
ul.rsepro_events_module .rsepro-image {
height: 200px !important;
}
}
/* ═══════════════════════════════════════════════════════════
PRÒXIMES ACTIVITATS — RSEvents Pro Module (VERSIÓ SENSE BOTÓ)
Afegeix al Custom CSS del template de Joomla
═══════════════════════════════════════════════════════════ */
:root {
--lh-red: #9B1F2E;
--lh-red-dark: #7a1624;
--lh-text: #1a1a1a;
--lh-muted: #e0e0e0;
--lh-border: rgba(255,255,255,0.15);
--lh-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ── GRID ── */
ul.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: 16px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--lh-font) !important;
}
/* ── CARD: imatge de fons, alçada fixa ── */
ul.rsepro_events_module > li {
position: relative !important;
height: 320px !important; /* alçada FIXA igual per a tothom */
border-radius: 16px !important;
overflow: hidden !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
display: block !important; /* no flex, la imatge és background */
background: #111 !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
font-family: var(--lh-font) !important;
-webkit-font-smoothing: antialiased !important;
}
ul.rsepro_events_module > li:hover {
transform: translateY(-5px) scale(1.01) !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.25) !important;
}
/* ── IMATGE: cobreix tota la card ── */
ul.rsepro_events_module .rsepro-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: hidden !important;
}
ul.rsepro_events_module .rsepro-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important; /* sobreescriu width="70" inline */
object-fit: cover !important;
object-position: center top !important;
display: block !important;
transition: transform 0.4s ease !important;
}
ul.rsepro_events_module > li:hover .rsepro-image img {
transform: scale(1.06) !important;
}
/* ── GRADIENT fosc a la part inferior ── */
ul.rsepro_events_module > li::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to bottom,
transparent 30%,
rgba(0,0,0,0.75) 75%,
rgba(0,0,0,0.92) 100%
) !important;
z-index: 1 !important;
pointer-events: none !important;
border-radius: 0 !important;
transition: opacity 0.25s !important;
}
/* ── TITOL: posicionat a la part inferior ── */
ul.rsepro_events_module > li > a {
position: absolute !important;
bottom: 36px !important; /* espai per a la data a sota */
left: 0 !important;
right: 0 !important;
z-index: 2 !important;
padding: 0 16px 6px !important;
font-family: var(--lh-font) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #ffffff !important;
text-decoration: none !important;
line-height: 1.3 !important;
display: block !important;
/* Cobre tota la card per fer-la clicable */
text-indent: 0 !important;
}
/* Overlay clicable sobre tota la card */
ul.rsepro_events_module > li > a::after {
content: '' !important;
position: absolute !important;
inset: -500px -20px -60px !important; /* s'estén per cobrir tota la card */
z-index: 0 !important;
display: block !important;
}
ul.rsepro_events_module > li > a span,
ul.rsepro_events_module > li > a {
position: relative !important;
z-index: 2 !important;
}
/* ── BR: amaga el salt de línia ── */
ul.rsepro_events_module > li > br {
display: none !important;
}
/* ── DATA: a la part més inferior ── */
ul.rsepro_events_module > li > small {
position: absolute !important;
bottom: 14px !important;
left: 16px !important;
right: 16px !important;
z-index: 2 !important;
font-family: var(--lh-font) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
color: var(--lh-muted) !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
ul.rsepro_events_module > li > small::before {
content: '' !important;
display: inline-block !important;
width: 12px !important;
height: 12px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
flex-shrink: 0 !important;
opacity: 0.8 !important;
}
/* ── TÍTOL DE SECCIÓ ── */
.moduletable h3.module-title,
.moduletable .module-title,
.mod-custom h3 {
font-family: var(--lh-font) !important;
font-size: 26px !important;
font-weight: 700 !important;
color: var(--lh-text) !important;
margin-bottom: 24px !important;
position: relative !important;
display: inline-block !important;
padding-bottom: 10px !important;
text-transform: none !important;
letter-spacing: -0.02em !important;
}
.moduletable h3.module-title::after,
.moduletable .module-title::after,
.mod-custom h3::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 36px !important;
height: 3px !important;
background: var(--lh-red) !important;
border-radius: 2px !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
ul.rsepro_events_module {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 640px) {
ul.rsepro_events_module {
grid-template-columns: repeat(2, 1fr) !important;
}
ul.rsepro_events_module > li {
height: 260px !important;
}
}
@media (max-width: 400px) {
ul.rsepro_events_module {
grid-template-columns: 1fr !important;
}
}
/* ═══════════════════════════════════════════════════════════
PRÒXIMES ACTIVITATS — RSEvents Pro · Versió 10/10
Màxim 4 columnes · Títols sempre visibles · Cards premium
═══════════════════════════════════════════════════════════ */
ul.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* sempre 4 */
gap: 18px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* ── CARD ── */
ul.rsepro_events_module > li {
position: relative !important;
height: 340px !important;
border-radius: 18px !important;
overflow: hidden !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
background: #1a1a1a !important;
transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.28s cubic-bezier(0.4,0,0.2,1) !important;
-webkit-font-smoothing: antialiased !important;
/* Vora subtil */
box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}
ul.rsepro_events_module > li:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 56px rgba(0,0,0,0.28),
inset 0 0 0 1px rgba(255,255,255,0.1) !important;
}
/* ── IMATGE ── */
ul.rsepro_events_module .rsepro-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: hidden !important;
}
ul.rsepro_events_module .rsepro-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important; /* anul·la width="70" inline */
object-fit: cover !important;
object-position: center top !important;
display: block !important;
transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
/* Lleu borrós per fer el gradient més efectiu */
filter: brightness(0.85) !important;
}
ul.rsepro_events_module > li:hover .rsepro-image img {
transform: scale(1.08) !important;
filter: brightness(0.75) !important;
}
/* ── GRADIENT: negre intens des del 40% fins al fons ── */
ul.rsepro_events_module > li::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(
to bottom,
transparent 0%,
transparent 35%,
rgba(0,0,0,0.55) 58%,
rgba(0,0,0,0.88) 80%,
rgba(0,0,0,0.96) 100%
) !important;
z-index: 2 !important;
pointer-events: none !important;
border-radius: inherit !important;
}
/* ── ANCHOR: cobreix TOTA la card (clicable) ── */
ul.rsepro_events_module > li > a {
position: absolute !important;
inset: 0 !important; /* ocupa tota la card */
z-index: 4 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding: 0 16px 38px !important; /* deixa espai per la data */
text-decoration: none !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
/* Ombra de text per llegibilitat extra */
text-shadow: 0 1px 8px rgba(0,0,0,0.6) !important;
}
ul.rsepro_events_module > li > a:hover {
color: #fff !important;
text-decoration: none !important;
}
/* ── BR: amaga el salt ── */
ul.rsepro_events_module > li > br {
display: none !important;
}
/* ── DATA: fixa al peu de la card ── */
ul.rsepro_events_module > li > small {
position: absolute !important;
bottom: 14px !important;
left: 16px !important;
right: 16px !important;
z-index: 5 !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.65) !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
pointer-events: none !important;
letter-spacing: 0.01em !important;
}
/* Icona calendari */
ul.rsepro_events_module > li > small::before {
content: '' !important;
display: inline-block !important;
width: 11px !important;
height: 11px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
flex-shrink: 0 !important;
}
/* ── SEPARADOR entre títol i data (línia fina) ── */
ul.rsepro_events_module > li > a::after {
content: '' !important;
display: block !important;
width: 100% !important;
height: 1px !important;
background: rgba(255,255,255,0.15) !important;
margin-top: 8px !important;
border-radius: 1px !important;
position: static !important; /* reset del ::after anterior */
}
/* ── TÍTOL SECCIÓ ── */
.moduletable h3.module-title,
.moduletable .module-title {
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 26px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin-bottom: 24px !important;
position: relative !important;
display: inline-block !important;
padding-bottom: 10px !important;
text-transform: none !important;
letter-spacing: -0.02em !important;
}
.moduletable h3.module-title::after,
.moduletable .module-title::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 36px !important;
height: 3px !important;
background: #9B1F2E !important;
border-radius: 2px !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
ul.rsepro_events_module {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 740px) {
ul.rsepro_events_module {
grid-template-columns: repeat(2, 1fr) !important;
}
ul.rsepro_events_module > li {
height: 280px !important;
}
}
@media (max-width: 440px) {
ul.rsepro_events_module {
grid-template-columns: 1fr !important;
}
ul.rsepro_events_module > li {
height: 260px !important;
}
}
/* ═══════════════════════════════════════════════════════════
PRÒXIMES ACTIVITATS — RSEvents Pro · FINAL
═══════════════════════════════════════════════════════════ */
/* GRID: sempre 4 columnes */
ul.rsepro_events_module {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* CARD */
ul.rsepro_events_module > li {
position: relative !important;
border-radius: 14px !important;
overflow: hidden !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
height: 360px !important;
background: #000 !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}
ul.rsepro_events_module > li:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 48px rgba(0,0,0,0.3) !important;
}
/* IMATGE: background absolut */
ul.rsepro_events_module .rsepro-image {
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
display: block !important;
z-index: 1 !important;
}
ul.rsepro_events_module .rsepro-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
transition: transform 0.5s ease !important;
/* SEN cap filtre addicional — la imatge es veu neta */
filter: none !important;
}
ul.rsepro_events_module > li:hover .rsepro-image img {
transform: scale(1.07) !important;
}
/* GRADIENT: únic pseudo-element, sense hover */
ul.rsepro_events_module .rsepro-image::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to bottom,
transparent 40%,
rgba(0,0,0,0.95) 100%
) !important;
z-index: 2 !important;
display: block !important;
}
/* ANCHOR: capa per sobre, invisible, fa clicable tota la card */
ul.rsepro_events_module > li > a {
position: absolute !important;
inset: 0 !important;
z-index: 10 !important;
display: block !important;
/* El text del títol el posicionem amb padding */
padding: 200px 16px 44px !important;
text-decoration: none !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
/* Ombra de text per llegibilitat */
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9) !important;
/* Vertical align baix */
display: flex !important;
align-items: flex-end !important;
padding-bottom: 44px !important;
}
ul.rsepro_events_module > li > a:hover {
color: #fff !important;
text-decoration: none !important;
}
/* BR: elimina */
ul.rsepro_events_module > li > br {
display: none !important;
}
/* DATA: al peu de la card */
ul.rsepro_events_module > li > small {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 11 !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.7) !important;
padding: 10px 16px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
pointer-events: none !important;
background: rgba(0,0,0,0.35) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border-top: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 0 0 14px 14px !important;
}
ul.rsepro_events_module > li > small::before {
content: '' !important;
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
display: inline-block !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
ul.rsepro_events_module {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 700px) {
ul.rsepro_events_module {
grid-template-columns: repeat(2, 1fr) !important;
}
ul.rsepro_events_module > li {
height: 280px !important;
}
}
@media (max-width: 440px) {
ul.rsepro_events_module {
grid-template-columns: 1fr !important;
}
}
/* ═══════════════════════════════════════════════════════════
PATROCINADORS + COMPARTEIX — RSEvents Pro
Afegeix al Custom CSS del template
═══════════════════════════════════════════════════════════ */
/* ── BLOC PATROCINADORS ── */
.rs_event_sponsors {
margin: 40px 0 !important;
padding: 32px 0 !important;
border-top: 1px solid #e5e5ea !important;
border-bottom: 1px solid #e5e5ea !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 20px !important;
}
/* Títol "Patrocinadors" — si ve del template */
.rs_event_sponsors::before {
content: 'Patrocinadors' !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #6e6e73 !important;
display: block !important;
}
/* Fila de logos */
.rs_event_sponsors .rs_sponsor_cards,
.rs_event_sponsors > div:not(.rs_sponsor_card) {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: center !important;
}
/* Cada targeta de patrocinador */
.rs_sponsor_card {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff !important;
border: 1px solid #e5e5ea !important;
border-radius: 10px !important;
padding: 14px 22px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.rs_sponsor_card:hover {
border-color: #c0c0c8 !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important;
}
.rs_sponsor_card a {
display: flex !important;
align-items: center !important;
background: none !important;
border: none !important;
padding: 0 !important;
text-decoration: none !important;
}
.rs_sponsor_card a:hover {
background: none !important;
background-color: transparent !important;
}
.rs_sponsor_img,
.rs_sponsor_card img {
height: 36px !important;
width: auto !important;
max-width: 140px !important;
object-fit: contain !important;
display: block !important;
filter: grayscale(1) !important;
opacity: 0.65 !important;
transition: filter 0.2s ease, opacity 0.2s ease !important;
}
.rs_sponsor_card:hover .rs_sponsor_img,
.rs_sponsor_card:hover img {
filter: grayscale(0) !important;
opacity: 1 !important;
}
/* ── BLOC COMPARTEIX ── */
.rs_event_share {
margin: 40px 0 !important;
padding: 28px 32px !important;
background: #f7f7f8 !important;
border-radius: 16px !important;
border: 1px solid #e5e5ea !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
flex-wrap: wrap !important;
}
.rs_event_share h3 {
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
.rs_event_share .share-buttons {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 !important;
}
/* Reset complet dels botons */
.rs_event_share .btn {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 9px 16px !important;
border-radius: 10px !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
border: 1px solid transparent !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
white-space: nowrap !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: none !important;
outline: none !important;
}
.rs_event_share .btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
text-decoration: none !important;
opacity: 0.92 !important;
}
.rs_event_share .btn i,
.rs_event_share .btn .fa {
font-size: 13px !important;
line-height: 1 !important;
}
/* Facebook */
.rs_event_share .btn-facebook {
background: #1877F2 !important;
color: #fff !important;
border-color: #1877F2 !important;
}
/* X / Twitter */
.rs_event_share .btn-x {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
/* Instagram */
.rs_event_share .btn-instagram {
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Email */
.rs_event_share .btn-mail {
background: #fff !important;
color: #1a1a1a !important;
border-color: #d0d0d8 !important;
}
.rs_event_share .btn-mail:hover {
background: #f7f7f8 !important;
color: #1a1a1a !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 600px) {
.rs_event_share {
flex-direction: column !important;
align-items: flex-start !important;
padding: 20px !important;
}
.rs_event_share .share-buttons {
width: 100% !important;
}
.rs_event_share .btn {
flex: 1 !important;
justify-content: center !important;
min-width: calc(50% - 4px) !important;
}
}
/* ═══════════════════════════════════════════════════════════
LLISTA D'ARTICLES + PAGINACIÓ — Joomla Blog Layout
Afegeix al Custom CSS del template
═══════════════════════════════════════════════════════════ */
/* ── LLISTA D'ARTICLES ── */
ol.com-content-blog__links {
list-style: none !important;
margin: 0 0 32px !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
ol.com-content-blog__links .com-content-blog__link {
margin: 0 !important;
padding: 0 !important;
}
ol.com-content-blog__links .com-content-blog__link a {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 20px !important;
background: #fff !important;
border: 1px solid #e5e5ea !important;
border-radius: 12px !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
color: #1a1a1a !important;
text-decoration: none !important;
line-height: 1.45 !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
background-color: #fff !important;
background-image: none !important;
}
/* Fletxa esquerra com a decoració */
ol.com-content-blog__links .com-content-blog__link a::before {
content: '' !important;
width: 6px !important;
height: 6px !important;
min-width: 6px !important;
border-radius: 50% !important;
background: #9B1F2E !important;
opacity: 0.5 !important;
transition: opacity 0.2s ease, transform 0.2s ease !important;
display: block !important;
}
/* Fletxa dreta */
ol.com-content-blog__links .com-content-blog__link a::after {
content: '→' !important;
margin-left: auto !important;
flex-shrink: 0 !important;
font-size: 16px !important;
color: #c0c0c8 !important;
transition: color 0.2s ease, transform 0.2s ease !important;
transform: translateX(0) !important;
background: none !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
position: static !important;
}
ol.com-content-blog__links .com-content-blog__link a:hover {
border-color: #9B1F2E !important;
box-shadow: 0 4px 16px rgba(155,31,46,0.08) !important;
color: #9B1F2E !important;
background-color: #fff !important;
text-decoration: none !important;
}
ol.com-content-blog__links .com-content-blog__link a:hover::before {
opacity: 1 !important;
transform: scale(1.3) !important;
}
ol.com-content-blog__links .com-content-blog__link a:hover::after {
color: #9B1F2E !important;
transform: translateX(3px) !important;
}
/* ── BLOC PAGINACIÓ ── */
.com-content-category-blog__navigation {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
padding: 24px 0 0 !important;
border-top: 1px solid #e5e5ea !important;
margin-top: 8px !important;
}
/* Comptador "Pàgina X de Y" */
.com-content-category-blog__counter {
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #6e6e73 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
order: 2 !important;
}
.com-content-category-blog__pagination {
order: 1 !important;
}
/* PAGINACIÓ */
.pagination__wrapper { margin: 0 !important; }
ul.pagination {
display: flex !important;
align-items: center !important;
gap: 4px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
flex-wrap: wrap !important;
}
ul.pagination .page-item { margin: 0 !important; }
/* Tots els links i spans */
ul.pagination .page-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
height: 36px !important;
padding: 0 10px !important;
border-radius: 9px !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: #3a3a3c !important;
background: #fff !important;
border: 1px solid #e5e5ea !important;
text-decoration: none !important;
transition: all 0.18s ease !important;
line-height: 1 !important;
box-shadow: none !important;
cursor: pointer !important;
}
ul.pagination .page-link:hover {
background: #f7f7f8 !important;
border-color: #9B1F2E !important;
color: #9B1F2E !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* Pàgina activa */
ul.pagination .active .page-link,
ul.pagination .active > a.page-link {
background: #9B1F2E !important;
border-color: #9B1F2E !important;
color: #fff !important;
cursor: default !important;
box-shadow: 0 4px 12px rgba(155,31,46,0.25) !important;
}
ul.pagination .active .page-link:hover {
background: #9B1F2E !important;
color: #fff !important;
}
/* Desactivats (primers/últims quan estàs al principi/final) */
ul.pagination .disabled .page-link {
color: #c0c0c8 !important;
background: #f7f7f8 !important;
border-color: #e5e5ea !important;
cursor: not-allowed !important;
opacity: 0.5 !important;
pointer-events: none !important;
}
/* Icones de navegació (<<, <, >, >>) */
ul.pagination .page-link .icon-angle-left::before { content: '‹' !important; font-style: normal !important; }
ul.pagination .page-link .icon-angle-right::before { content: '›' !important; font-style: normal !important; }
ul.pagination .page-link .icon-angle-double-left::before { content: '«' !important; font-style: normal !important; }
ul.pagination .page-link .icon-angle-double-right::before{ content: '»' !important; font-style: normal !important; }
ul.pagination .page-link [class*="icon-angle"] {
font-size: 16px !important;
line-height: 1 !important;
font-family: Georgia, serif !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 600px) {
.com-content-category-blog__navigation {
flex-direction: column !important;
align-items: flex-start !important;
}
ul.pagination .page-link {
min-width: 32px !important;
height: 32px !important;
font-size: 13px !important;
}
}
/* ═══════════════════════════════════════════════════════════
BLOG / NOTÍCIES — Joomla com_content category blog
Modernitza .com-content-category-blog__item
═══════════════════════════════════════════════════════════ */
/* ── CARD CONTENIDOR ── */
.com-content-category-blog__item.blog-item {
background: #fff !important;
border: 1px solid #e5e5ea !important;
border-radius: 16px !important;
overflow: hidden !important;
display: grid !important;
grid-template-columns: 280px 1fr !important;
gap: 0 !important;
margin-bottom: 20px !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
-webkit-font-smoothing: antialiased !important;
}
.com-content-category-blog__item.blog-item:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
}
/* ── IMATGE ── */
.com-content-category-blog__item .item-image {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
height: 100% !important;
min-height: 240px !important;
display: block !important;
flex-shrink: 0 !important;
}
.com-content-category-blog__item .item-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
transition: transform 0.45s ease !important;
border-radius: 0 !important;
}
.com-content-category-blog__item:hover .item-image img {
transform: scale(1.05) !important;
}
/* ── CONTINGUT ── */
.com-content-category-blog__item .item-content {
padding: 28px 32px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 16px !important;
}
/* ── TÍTOL ── */
.com-content-category-blog__item .page-header {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.com-content-category-blog__item .page-header h2 {
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
letter-spacing: -0.02em !important;
border: none !important;
background: none !important;
text-transform: none !important;
}
.com-content-category-blog__item .page-header h2 a {
color: #1a1a1a !important;
text-decoration: none !important;
background: none !important;
border: none !important;
transition: color 0.18s !important;
}
.com-content-category-blog__item .page-header h2 a:hover {
color: #9B1F2E !important;
text-decoration: none !important;
background: none !important;
}
/* ── OCULTA elements soroll de Joomla ── */
.com-content-category-blog__item .article-info-term, /* "Anunci guardat amb èxit" */
.com-content-category-blog__item .hits, /* Vist: 171 */
.com-content-category-blog__item [style*="font-size: 1pt"] /* text invisible inline */ {
display: none !important;
}
/* ── META (categoria + data) ── */
.com-content-category-blog__item .article-info {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
list-style: none !important;
}
.com-content-category-blog__item .article-info dt {
display: none !important;
}
.com-content-category-blog__item .article-info dd {
margin: 0 !important;
padding: 0 !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #6e6e73 !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
}
.com-content-category-blog__item .article-info .category-name a {
color: #9B1F2E !important;
text-decoration: none !important;
font-weight: 600 !important;
background: rgba(155,31,46,0.07) !important;
padding: 3px 10px !important;
border-radius: 50px !important;
font-size: 11px !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
border: none !important;
}
.com-content-category-blog__item .article-info .category-name a:hover {
background: rgba(155,31,46,0.14) !important;
color: #9B1F2E !important;
text-decoration: none !important;
}
/* Icones de Joomla (fa/icon) — les amaguem, usem gap */
.com-content-category-blog__item .article-info .icon-folder-open,
.com-content-category-blog__item .article-info .icon-calendar,
.com-content-category-blog__item .article-info .icon-eye {
display: none !important;
}
/* ── TAGS ── */
.com-content-category-blog__item .tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.com-content-category-blog__item .tags .list-inline-item {
margin: 0 !important;
padding: 0 !important;
}
.com-content-category-blog__item .tags .btn.btn-info {
background: #f0f0f3 !important;
color: #3a3a3c !important;
border: none !important;
border-radius: 6px !important;
font-size: 11px !important;
font-weight: 600 !important;
padding: 4px 10px !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
text-transform: lowercase !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background 0.18s !important;
box-shadow: none !important;
}
.com-content-category-blog__item .tags .btn.btn-info:hover {
background: #e0e0e8 !important;
color: #1a1a1a !important;
}
/* ── BOTÓ "Seguir llegint" ── */
.com-content-category-blog__item .readmore {
margin: 0 !important;
padding: 0 !important;
}
.com-content-category-blog__item .readmore .btn.btn-secondary {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: #9B1F2E !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 20px !important;
font-size: 13px !important;
font-weight: 600 !important;
font-family: 'DM Sans', -apple-system, sans-serif !important;
text-decoration: none !important;
transition: background 0.18s ease, transform 0.18s ease !important;
box-shadow: 0 2px 8px rgba(155,31,46,0.2) !important;
/* Oculta el text llarg, mostra text curt */
overflow: hidden !important;
max-width: 160px !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
/* Substituïm el text llarg per un curt via clip + label curt */
.com-content-category-blog__item .readmore .btn.btn-secondary::before {
content: 'Llegir més' !important;
display: block !important;
flex-shrink: 0 !important;
}
/* Amaguem el text original i la icona de Joomla */
.com-content-category-blog__item .readmore .btn.btn-secondary .icon-chevron-right {
display: none !important;
}
/* Text original invisible però accessible */
.com-content-category-blog__item .readmore .btn.btn-secondary {
font-size: 0 !important; /* amaga el text llarg */
}
.com-content-category-blog__item .readmore .btn.btn-secondary::before {
font-size: 13px !important; /* però el ::before es veu */
}
.com-content-category-blog__item .readmore .btn.btn-secondary:hover {
background: #7a1624 !important;
transform: translateY(-1px) !important;
color: #fff !important;
text-decoration: none !important;
box-shadow: 0 6px 18px rgba(155,31,46,0.3) !important;
}
/* TÍTOL */
.rsepro_events_module li a,
.rsepro_events_module .rsepro-title,
.rsepro_events_module .event-title {
display: block !important;
width: 100% !important;
text-align: left !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin-top: 10px !important;
margin-bottom: 6px !important;
}
/* DATA */
.rsepro_events_module li small,
.rsepro_events_module .rsepro-date,
.rsepro_events_module .event-date {
display: block !important;
width: 100% !important;
text-align: left !important;
font-size: 16px !important;
font-weight: 500 !important;
opacity: 0.9 !important;
}
/* Si algun contenidor pare els centra */
.rsepro_events_module li,
.rsepro_events_module .rsepro-event {
text-align: left !important;
}
@media (min-width: 992px) {
.n-nav-container {
min-width: 0 !important;
}
.n-nav-container ul {
gap: 4px !important; /* abans 25-32px */
flex-wrap: nowrap !important;
}
.n-nav-container ul li a {
padding: 10px 10px !important; /* abans 18px als costats */
font-size: 12.5px !important; /* una mica més petit */
letter-spacing: 0 !important; /* treu l'espaiat extra entre lletres */
white-space: nowrap !important;
}
}