/* Hero */
.cl-hero-grid { display:grid; grid-template-columns:20rem 1fr 22rem; min-height:17rem; }
.cl-hero-img  { transition:transform 0.7s; }
section:hover .cl-hero-img { transform:scale(1.04); }

/* Hero carousel slides + dots + arrows */
.cl-slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity 0.55s ease; z-index:1; }
.cl-slide-active { opacity:1; pointer-events:auto; z-index:2; }
.cl-dot {
  width:0.3rem; height:0.3rem; border-radius:2rem;
  background:rgba(255,255,255,0.35); border:none; padding:0;
  cursor:pointer; transition:width 0.3s ease, background 0.3s ease;
}
.cl-dot-active { width:1.5rem; background:var(--club-primary, #ef4444); }
.cl-dot:hover { background:rgba(255,255,255,0.6); }
.cl-dot-active:hover { background:#ef4444; }
.cl-nav-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:rgba(0,0,0,0.32); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.78);
  opacity:0; transition:opacity 0.25s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cl-hero-center:hover .cl-nav-arrow,
.cl-nav-arrow:focus-visible { opacity:0.85; }
.cl-nav-arrow:hover { background:rgba(0,0,0,0.55); color:#fff; opacity:1; }
.cl-nav-prev { left:0.4rem; }
.cl-nav-next { right:0.4rem; }
.cl-nav-prev:hover { transform:translateY(-50%) translateX(-1px); }
.cl-nav-next:hover { transform:translateY(-50%) translateX(1px); }

/* Layout */
.cl-main-grid { display:grid; grid-template-columns:1fr 19rem; gap:2.25rem; align-items:start; }
.cl-list      { display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }

/* Club card */
.cl-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-normal);
  border-radius: 0.65rem;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
  position: relative;
  overflow: hidden;
}
.cl-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: var(--club-primary, #ef4444);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transition: transform 0.22s;
  transform-origin: center;
}
.cl-card:hover {
  border-color: rgba(239,68,68,0.22);
  box-shadow: 0 6px 24px var(--shadow-card);
  transform: translateY(-1px);
}
.cl-card:hover::before {
  transform: scaleY(1);
}
.cl-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cl-card:hover .cl-card-img { transform: scale(1.08); }

/* Brand dropdown scrollbar */
#marca-menu { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
#marca-menu::-webkit-scrollbar { width:4px; }
#marca-menu::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:2px; }

/* Responsive */
@media (max-width:1280px) { .cl-hero-grid { grid-template-columns:17rem 1fr 19rem; } }
@media (max-width:1200px) { .cl-main-grid { grid-template-columns:1fr 17rem; } }
@media (max-width:1100px) {
  .cl-hero-left { padding:1.75rem 1.75rem 1.25rem !important; }
  .cl-hero-left h1 { font-size:2.2rem !important; }
}
@media (max-width:1024px) {
  .cl-hero-grid {
    grid-template-columns:1fr 19rem !important;
    grid-template-areas: "left right" "center center" !important;
    min-height:auto !important;
  }
  .cl-hero-left   { grid-area:left;   border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); padding:1.5rem 1.5rem 1.25rem !important; }
  .cl-hero-right  { grid-area:right;  border-left:none !important; border-bottom:1px solid var(--border-subtle); }
  .cl-hero-center { grid-area:center; min-height:18rem; }
  .cl-hero-left h1 { font-size:1.9rem !important; margin-bottom:0.4rem !important; }
  .cl-hero-left > p { font-size:0.78rem !important; max-width:none !important; margin-bottom:1rem !important; }
  .cl-hero-center h2 { font-size:1.5rem !important; max-width:none !important; }
  .cl-hero-center > div:last-child { padding:0 1.5rem 1.5rem !important; }
  .cl-main-grid { grid-template-columns:1fr; }
  aside { position:static !important; }
}
@media (max-width:760px) {
  .cl-hero-grid { grid-template-columns:1fr !important; grid-template-areas: "left" "right" "center" !important; }
  .cl-hero-left  { border-right:none !important; }
}
@media (max-width:640px) {
  .cl-hero-left { padding:1.25rem 1.25rem 1rem !important; }
  .cl-hero-left h1 { font-size:1.65rem !important; }
  .cl-hero-center { min-height:15rem; }
  .cl-hero-center h2 { font-size:1.25rem !important; margin-bottom:0.4rem !important; }
  .cl-hero-center .cl-slide > div:last-child { padding:0 1.25rem 1.25rem !important; }
  .cl-hero-right > div > div { padding:0.85rem 1rem !important; }
  .cl-hero-right > div > div > div:first-child { font-size:1.4rem !important; }
  .cl-nav-arrow { width:1.7rem; height:1.7rem; }
  .cl-nav-prev  { left:0.5rem; }
  .cl-nav-next  { right:0.5rem; }
}
@media (max-width:700px) { .cl-list { grid-template-columns:1fr; } }