.clubo-home-planes {
box-sizing: border-box;
margin: 48px 0;
padding: 56px 0;
background: #fbf7f3; box-shadow: 0 0 0 100vmax #fbf7f3;
clip-path: inset(0 -100vmax);
color: #1c1c1c;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.clubo-home-planes *,
.clubo-home-planes *::before,
.clubo-home-planes *::after { box-sizing: border-box; }
.clubo-home-planes-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 16px;
display: grid;
gap: 32px;
}
.clubo-home-planes-kicker {
margin: 0 0 8px;
color: var(--clubo-orange-text,#b5470b);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.clubo-home-planes h2 {
margin: 0 0 12px;
color: #1c1c1c;
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.15;
}
.clubo-home-planes-lead { margin: 0 0 20px; font-size: 17px; line-height: 1.55; }
.clubo-home-planes ul { list-style: none; margin: 0; padding: 0; }
.clubo-home-planes-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px !important; }
.clubo-home-planes-tags li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: #fff;
font-size: 14px;
font-weight: 700;
}
.clubo-home-planes-tags svg { color: var(--clubo-orange-text,#b5470b); flex: none; }
.clubo-home-planes-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 24px;
border-radius: 999px;
background: var(--clubo-orange,#f7772c);
color: var(--clubo-on-orange,#fff) !important;
font-weight: 800;
text-decoration: none !important;
}
.clubo-home-planes-button:hover,
.clubo-home-planes-button:focus-visible { background: var(--clubo-orange-hover,#e5661c); color: var(--clubo-on-orange,#fff) !important; }
.clubo-home-planes a:focus-visible { outline: 3px solid #333; outline-offset: 3px; } .clubo-home-planes-mosaic {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 150px;
gap: 14px;
}
.clubo-home-planes-tile.is-large { grid-column: span 2; grid-row: span 2; }
.clubo-home-planes-tile.is-wide { grid-column: span 2; }
.clubo-home-planes-tile a {
position: relative;
display: block;
height: 100%;
min-height: 44px;
overflow: hidden;
border-radius: 18px;
background: #1c1c1c;
color: #fff !important;
text-decoration: none !important;
}
.clubo-home-planes-tile img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform .4s ease;
}
.clubo-home-planes-tile a:hover img,
.clubo-home-planes-tile a:focus-visible img { transform: scale(1.05); }
.clubo-home-planes-tile a::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 60%);
}
.clubo-home-planes-tile span {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
z-index: 1;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
}
.clubo-home-planes-tile.is-large span { font-size: 24px; left: 20px; bottom: 18px; }
.clubo-home-planes-tile.is-more a {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 4px;
padding: 14px;
}
.clubo-home-planes-tile.is-more a::after { content: none; }
.clubo-home-planes-tile.is-more strong { color: #f7a36b; font-size: 32px; line-height: 1; }
.clubo-home-planes-tile.is-more span { position: static; font-size: 13px; font-weight: 700; } .clubo-home-planes-others { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 12px !important; }
.clubo-home-planes-others li:not(:last-child)::after { content: "·"; margin-left: 4px; color: #5f5853; }
.clubo-home-planes-others a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #1c1c1c !important;
font-size: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.clubo-home-planes-credits { margin: 8px 0 0; color: #5f5853; font-size: 12px; line-height: 1.5; }
.clubo-home-planes-credits a { color: inherit !important; font-weight: 400; text-decoration: underline; }
@media (min-width: 1024px) {
.clubo-home-planes-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
}
@media (max-width: 1023px) {
.clubo-home-planes { padding: 48px 0; }
}
@media (max-width: 767px) {
.clubo-home-planes { margin: 32px 0; padding: 40px 0; }
.clubo-home-planes-button { display: flex; width: 100%; } .clubo-home-planes-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 12px; }
.clubo-home-planes-tile.is-large { grid-column: 1 / -1; }
.clubo-home-planes-tile.is-wide { grid-column: span 1; }
.clubo-home-planes-tile.is-more { grid-column: 1 / -1; grid-row: span 1; }
.clubo-home-planes-tile.is-more a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; } .clubo-home-planes-others { gap: 8px; }
.clubo-home-planes-others li::after { content: none !important; }
.clubo-home-planes-others a {
padding: 0 14px;
border: 1px solid #e3d8ce;
border-radius: 999px;
background: #fff;
font-size: 14px;
text-decoration: none;
}
}
@media (prefers-reduced-motion: reduce) {
.clubo-home-planes-tile img { transition: none; }
.clubo-home-planes-tile a:hover img,
.clubo-home-planes-tile a:focus-visible img { transform: none; }
}