/* ---- Multipage additions ---- */
.crumb-bar{background:var(--navy);padding:.85rem 0}
.crumb-bar .wrap{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:rgba(255,255,255,.65);flex-wrap:wrap}
.crumb-bar a{display:inline-flex;align-items:center;gap:.35rem;color:#fff;font-weight:600;font-family:'Sora'}
.crumb-bar a:hover{color:var(--yellow)}
.crumb-bar a .material-icons-round{font-size:1.05rem}
.crumb-bar .sep{opacity:.4}
.crumb-bar .strong{color:var(--yellow);font-weight:600;font-family:'Sora'}

.sportsmed{background:#fff}
.area-page{background:#fff;padding-top:3rem}
.area-hero{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.area-hero-ic{width:76px;height:76px;border-radius:20px;background:linear-gradient(135deg,var(--navy),var(--teal));display:grid;place-items:center;flex-shrink:0}
.area-hero-ic .material-icons-round{font-size:2.3rem;color:var(--yellow)}
.area-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--navy);margin:.8rem 0 .7rem}
.area-hero p{color:var(--muted);font-size:1.03rem;max-width:46rem}

/* area cards on the sports index */
.area-card.clickable{display:flex;flex-direction:column;color:inherit;cursor:pointer;position:relative}
.area-card.clickable p{flex-grow:1}
.area-count{display:inline-block;align-self:flex-start;margin-top:.7rem;font-family:'Sora';font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-d);background:var(--orange-soft);padding:.2rem .55rem;border-radius:100px}
.area-count.equip{color:var(--teal);background:#e3f4f5}
.area-go{display:inline-flex;align-items:center;gap:.3rem;margin-top:.9rem;font-family:'Sora';font-weight:600;font-size:.8rem;color:var(--navy)}
.area-go .material-icons-round{font-size:1rem;transition:.2s}
.area-card.clickable:hover .area-go{color:var(--orange-d)}
.area-card.clickable:hover .area-go .material-icons-round{transform:translateX(3px)}

/* mini area nav at the bottom of each area page */
.mini-areas{display:flex;flex-wrap:wrap;gap:.55rem}
.mini-area{display:inline-flex;align-items:center;gap:.4rem;background:var(--mist);border:1px solid var(--line);border-radius:100px;padding:.5rem .9rem;font-size:.83rem;font-weight:500;color:var(--ink);transition:.2s}
.mini-area:hover{border-color:var(--orange);color:var(--orange-d);background:#fff}
.mini-area .material-icons-round{font-size:1.05rem;color:var(--teal)}
.mini-area.current{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}
.mini-area.current .material-icons-round{color:var(--yellow)}

/* empty state for areas without published catalogue */
/* dropdown menu for Líneas */
.has-drop{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:.2rem}
.drop-toggle .caret{font-size:1.1rem;transition:.2s}
.has-drop:hover .caret{transform:rotate(180deg)}
.drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:238px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.5rem;list-style:none;display:grid;gap:.15rem;opacity:0;visibility:hidden;transition:.2s;z-index:120}
.has-drop:hover .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.drop-menu li{margin:0}
.drop-menu a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink);opacity:1;transition:.18s}
.drop-menu a:hover{background:var(--mist);color:var(--navy)}
.drop-menu a img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.drop-menu a .ext{font-size:.9rem;color:var(--muted);margin-left:auto}

@media(max-width:920px){
  .has-drop .caret{display:none}
  .drop-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:.4rem 0 0 .6rem;min-width:0;border-left:2px solid var(--line);margin-top:.5rem}
  .has-drop:hover .drop-menu{transform:none}
  .drop-menu a{padding:.5rem .4rem}
}

/* ---- Página de capacitación ---- */
.cap-hero{text-align:center;max-width:44rem;margin:0 auto 3rem}
.edu-logo-lg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.6rem;box-shadow:var(--shadow-sm);margin-bottom:1.4rem}
.edu-logo-lg img{height:52px;width:auto;display:block}
.cap-hero h1{font-size:clamp(1.9rem,4vw,2.6rem);color:var(--navy);margin-bottom:.8rem}
.cap-hero p{color:var(--muted);font-size:1.05rem}
.cap-hint{color:var(--muted);font-size:.88rem;margin:-.5rem 0 1.2rem}
.tema-grupo{margin-bottom:1.6rem}
.tema-titulo{display:flex;align-items:center;gap:.5rem;font-family:'Sora';font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:2px solid var(--orange-soft)}
.tema-titulo .material-icons-round{color:var(--orange);font-size:1.25rem}
.cap-alt{display:flex;align-items:center;gap:1.2rem;max-width:880px;margin:2rem auto 0;background:#fff;border:1px solid var(--line);border-left:5px solid #25d366;border-radius:14px;padding:1.4rem 1.7rem;box-shadow:var(--shadow-sm);flex-wrap:wrap}
.cap-alt > .material-icons-round{font-size:2rem;color:#25d366;flex-shrink:0}
.cap-alt div{flex-grow:1}
.cap-alt strong{font-family:'Sora';color:var(--navy);font-size:1rem}
.cap-alt p{color:var(--muted);font-size:.88rem;margin-top:.15rem}

/* back navigation bar */
.back-bar{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.back-bar .material-icons-round{font-size:1.1rem}

.empty-state{text-align:center;background:var(--mist);border:1px dashed var(--line);border-radius:var(--radius);padding:3rem 2rem;margin-bottom:3rem}
.empty-state .material-icons-round{font-size:2.6rem;color:var(--teal);margin-bottom:.8rem}
.empty-state h3{color:var(--navy);font-size:1.25rem;margin-bottom:.5rem}
.empty-state p{color:var(--muted);font-size:.94rem;max-width:34rem;margin:0 auto 1.4rem}