/* Componentes agregados en la segunda ronda de revisión */

/* Ticker en dos filas, más lento, resaltado al pasar el mouse */
.ticker-track { flex-direction: column; align-items: stretch; }
.ticker-list { animation-duration: 95s; }
.ticker-list.fila2 { animation-duration: 113s; animation-direction: reverse; border-top: 1px solid rgba(255,255,255,.1); }
.ticker:hover .ticker-list { animation-play-state: running; }
.ticker-list li { transition: background .2s, transform .2s; padding: .38rem 1.2rem; }
.ticker-list li:hover { background: rgba(167,243,244,.18); transform: scale(1.04); }
.ticker-list li.vivo .hora { color: #ff8a80; }
.ticker-label { align-self: stretch; }

/* Carrusel de novedades */
.layout-23 > * { min-width: 0; }
.carrusel { min-width: 0; width: 100%; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 0; overflow: hidden; box-shadow: var(--sombra); }
.carrusel .pista { display: flex; width: 100%; transition: transform .5s ease; }
.carrusel .slide { flex: 0 0 100%; width: 100%; min-width: 0; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 340px; }
.carrusel .slide .img { background: var(--navy) url("../img/background-header.b748b0bb5861.jpg") center/cover; min-height: 220px; }
.carrusel .slide.genero .img { background: var(--purple) url("../img/banderin-diversidad.86ac39889217.svg") center/contain no-repeat; background-size: auto 85%; }
.carrusel .slide .body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.carrusel .slide h3 { font-size: 1.5rem; }
.carrusel .slide h3 a { color: var(--head); text-decoration: none; }
.carrusel .slide .vermas { margin-top: auto; align-self: flex-start; }
.carrusel .ctrl { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(19,41,66,.75); color: #fff; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.carrusel .ctrl.prev { left: .6rem; }
.carrusel .ctrl.next { right: .6rem; }
.carrusel .ctrl:hover { background: var(--teal); }
.carrusel .puntos { position: absolute; left: 0; right: 0; bottom: .7rem; display: flex; justify-content: center; gap: .45rem; z-index: 2; }
.carrusel .puntos button { width: 26px; height: 6px; border-radius: 0; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.carrusel .puntos button.activo { background: var(--cyan); width: 40px; }
.carrusel .progreso { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--teal); width: 0; z-index: 2; transition: width .2s linear; }
.mas-novedades { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.mas-novedades a { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: .6rem .8rem; text-decoration: none; color: var(--ink); font-size: .85rem; display: flex; flex-direction: column; gap: .2rem; }
.mas-novedades a:hover { border-color: var(--teal); }
.mas-novedades .fecha { font-family: var(--fa); font-weight: 700; font-size: .62rem; letter-spacing: .1em; color: var(--link); text-transform: uppercase; }
@media (max-width: 860px) { .carrusel .slide { grid-template-columns: 1fr; } }

/* Listas laterales con "ver todos" */
.scroll-y { max-height: 720px; }
.ver-todos { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem; border: 1px dashed var(--line); border-radius: 0; text-decoration: none; color: var(--link); font-family: var(--fd); text-transform: uppercase; letter-spacing: .05em; }
.ver-todos:hover { border-color: var(--teal); background: var(--surface-3); }

/* Partido en vivo */
.partido.envivo { border-color: #ff8a80; box-shadow: 0 0 0 2px rgba(255,138,128,.25); }
.badge.vivo { background: #ff3b30; color: #fff; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .badge.vivo { animation: none; } }

/* Panel de redes desplegable */
.redes-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.redes-panel summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; }
.redes-panel summary::-webkit-details-marker { display: none; }
.redes-panel summary h2 { flex: 1; font-size: 1.3rem; }
.redes-panel summary .iconos { display: flex; gap: .5rem; }
.redes-panel summary .iconos svg { width: 22px; height: 22px; fill: var(--muted); }
.redes-panel summary .flecha { color: var(--muted); transition: transform .2s; }
.redes-panel[open] summary .flecha { transform: rotate(180deg); }
.redes-panel[open] summary { border-bottom: 1px solid var(--line); }
.redes-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; padding: 1.1rem; }
.red-col h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: 1rem; }
.red-col h3 svg { width: 20px; height: 20px; fill: var(--head); }
.red-col h3 a { margin-left: auto; font-family: var(--fb); text-transform: none; font-size: .8rem; font-weight: 400; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.ig-grid a { aspect-ratio: 1; border-radius: 0; display: flex; align-items: flex-end; padding: .35rem; color: #fff; font-size: .62rem; font-family: var(--fa); font-weight: 700; text-decoration: none; background: var(--navy); position: relative; overflow: hidden; }
.ig-grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.55)); }
.ig-grid a span { position: relative; z-index: 1; }
.ig-grid .t1 { background: linear-gradient(135deg, #132942, #096bce); }
.ig-grid .t2 { background: linear-gradient(135deg, #35b4b6, #a7f3f4); }
.ig-grid .t3 { background: url("../img/background-header.b748b0bb5861.jpg") center/cover; }
.ig-grid .t4 { background: linear-gradient(135deg, #8c74d1, #132942); }
.ig-grid .t5 { background: url("../img/banderin-diversidad.86ac39889217.svg") center/cover; }
.ig-grid .t6 { background: linear-gradient(135deg, #096bce, #35b4b6); }
.fb-post { border: 1px solid var(--line); border-radius: 0; padding: .7rem .8rem; margin-bottom: .5rem; font-size: .85rem; }
.fb-post .cab { display: flex; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.fb-post .cab b { font-size: .8rem; }
.fb-post .cab span { font-size: .7rem; color: var(--muted); }
.yt-list { display: grid; gap: .5rem; }
.yt-list a { display: grid; grid-template-columns: 110px 1fr; gap: .6rem; align-items: center; text-decoration: none; color: var(--ink); font-size: .85rem; }
.yt-list .thumb { aspect-ratio: 16/9; border-radius: 0; background: var(--navy) url("../img/background-header.b748b0bb5861.jpg") center/cover; position: relative; }
.yt-list .thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; transform: translate(-40%, -50%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.yt-list .dur { font-size: .7rem; color: var(--muted); }

/* Género */
.genero .banda { background: var(--purple); }
.genero .banda img { max-width: 220px; max-height: 260px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }

/* Gestión (backoffice simple) */
.gestion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.gestion-card { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: .4rem; border-top: 4px solid var(--teal); }
.gestion-card:hover { border-color: var(--teal); }
.gestion-card h3 { font-size: 1.1rem; }
.gestion-card .n { font-family: var(--fd); font-size: 1.8rem; color: var(--head); line-height: 1; }
.form .campo { margin-bottom: .2rem; }
.form .ayuda-campo { font-size: .78rem; color: var(--muted); margin: .2rem 0 0; }
.form input[type=datetime-local], .form input[type=date], .form input[type=url] { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 0; font: inherit; background: var(--surface); color: var(--ink); }
.form textarea { min-height: 110px; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* Marcador en vivo */
.vivo-panel { background: var(--navy); color: #fff; border-radius: 0; padding: 1.4rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; text-align: center; }
.vivo-panel .eq { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.vivo-panel .eq b { font-family: var(--fd); text-transform: uppercase; font-size: 1.2rem; font-weight: 500; }
.vivo-panel .goles { font-family: var(--fd); font-size: 5rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cyan); }
.vivo-panel .btns { display: flex; gap: .5rem; }
.vivo-panel .btn-gol { font-family: var(--fd); font-size: 1.6rem; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; background: var(--teal); color: #fff; box-shadow: 0 4px 0 var(--teal-dark); }
.vivo-panel .btn-gol.menos { background: transparent; border: 2px solid rgba(255,255,255,.4); box-shadow: none; font-size: 1.2rem; width: 44px; height: 44px; align-self: center; }
.vivo-panel .btn-gol:active { transform: translateY(3px); box-shadow: none; }
.vivo-panel .centro { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 140px; }
.vivo-panel .crono { font-family: var(--fd); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.vivo-panel .estado { font-family: var(--fa); font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.vivo-panel .ctrl { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.vivo-panel .ctrl button { font-family: var(--fd); text-transform: uppercase; letter-spacing: .05em; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; padding: .35rem .7rem; border-radius: 0; cursor: pointer; font-size: .85rem; }
.vivo-panel .ctrl button.fin { background: #ff3b30; border-color: #ff3b30; }
.vivo-log { margin-top: 1rem; font-size: .85rem; }
.vivo-log li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.guardado { font-size: .75rem; color: var(--muted); }
@media (max-width: 640px) { .vivo-panel { grid-template-columns: 1fr; } .vivo-panel .goles { font-size: 3.6rem; } }

/* Solapas de tablas en el home */
.solapas .pills { margin-bottom: .8rem; }
.solapas button.pill { cursor: pointer; font: inherit; font-size: .82rem; }
.solapas .tabla { font-size: .88rem; }
.solapas .tabla td, .solapas .tabla th { padding: .42rem .6rem; }
.solapas .eq svg, .card .eq svg { width: 18px; height: 18px; }
.card .eyebrow svg { width: 16px; height: 16px; fill: var(--teal); }

/* Ronda 3: logo grande, marca de agua, banners laterales, panel alternante, newsletter compacta, fichas de plantel */
.nav .wrap { min-height: 84px; }
.nav-logo img { width: 132px; margin-bottom: -46px; margin-top: -30px; position: relative; z-index: 4; }
@media (max-width: 720px) { .nav-logo img { width: 92px; margin-bottom: -28px; margin-top: -16px; } }
main { position: relative; }
.marca-agua { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: url("../img/logo-fpp.fb1cdfa853fc.png") center 55% / min(70vw, 720px) no-repeat; opacity: .045; }
:root[data-theme="dark"] .marca-agua { opacity: .06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca-agua { opacity: .06; } }
body > *:not(.marca-agua):not(.banner-lateral):not(.nav) { position: relative; z-index: 1; }
.ticker-label { padding: .45rem .8rem; }
.ticker-label svg { width: 18px; height: 18px; }

.banner-lateral { display: none; position: fixed !important; top: 170px; z-index: 2; }
.banner-lateral.izq { left: max(8px, calc(50vw - 560px - 140px)); }
.banner-lateral.der { right: max(8px, calc(50vw - 560px - 140px)); }
.banner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 120px; height: 600px; border-radius: 0; text-decoration: none; text-align: center; color: #fff; background: linear-gradient(180deg, var(--navy), var(--blue)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.banner.alt { background: linear-gradient(180deg, var(--teal-dark), var(--teal)); }
.banner .eyebrow { color: var(--cyan); }
.banner b { font-family: var(--fd); text-transform: uppercase; font-weight: 500; font-size: 1.4rem; line-height: 1.05; }
.banner .small { opacity: .7; }
@media (min-width: 1420px) { .banner-lateral { display: block; } }

.alterna { background: var(--surface); border: 1px solid var(--line); border-radius: 0; overflow: hidden; margin-bottom: 1.2rem; box-shadow: var(--sombra); }
.alterna-cab { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem .5rem; position: relative; }
.alterna-cab button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--fd); text-transform: uppercase; font-size: .98rem; white-space: nowrap; color: var(--muted); letter-spacing: .01em; }
.alterna-cab button.activa { color: var(--head); border-bottom: 3px solid var(--blue); }
.alterna-cab .sep { color: var(--line); font-family: var(--fd); font-size: 1.2rem; }
.alterna-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.alterna-progreso span { display: block; height: 100%; width: 0; background: var(--teal); }
.alterna-panel { padding: .7rem .7rem .7rem; }
.alterna .partidos { gap: .5rem; }
.scroll-y.scroll-alto { max-height: 1010px; }

.newsletter { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1rem 1.1rem; }
.newsletter .ic-news { width: 38px; height: 38px; fill: var(--teal); }
.newsletter h3 { font-size: 1.15rem; }
.newsletter p { margin: .2rem 0 .6rem; }
.form-news { display: grid; grid-template-columns: 1fr auto; gap: .4rem; }
.form-news input { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 0; font: inherit; background: var(--surface); color: var(--ink); }
.form-news .btn { font-size: .8rem; padding: .45rem .7rem; }

.solapa-cab { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.solapa-cab svg { width: 16px; height: 16px; fill: var(--teal); }
.solapa-cab b { color: var(--head); }
.solapas .pill svg { width: 14px; height: 14px; fill: var(--teal); }
.solapas .pill .rama { font-family: var(--fa); font-weight: 700; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.solapas { position: relative; padding-bottom: .4rem; }
.progreso-solapas { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); border-radius: 0; }
.progreso-solapas span { display: block; height: 100%; width: 0; background: var(--teal); }
.boletin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; }
.section { margin-bottom: 3rem; }

.plantel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; padding: .8rem; border-top: 1px solid var(--line); }
.jugador { background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: .8rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.jugador .foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 1.5rem; font-weight: 500; position: relative; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--c1, var(--teal)); }
.jugador .dorsal { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--fd); font-size: .85rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.jugador b { font-family: var(--fd); text-transform: uppercase; font-weight: 500; font-size: .95rem; line-height: 1.1; }
.jugador .pos { font-family: var(--fa); font-weight: 700; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.jugador .bio { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.jugador.tecnico .foto { box-shadow: 0 0 0 2px var(--purple); }

/* Ronda 4 */
/* Ticker: una sola fila, alta, debajo del menú, sin cortes de texto */
.ticker { border-top: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.ticker-track { flex-direction: row; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-list { animation-duration: 160s; }
.ticker-list li { padding: 0 1.3rem; height: 64px; border-right: 1px solid rgba(255,255,255,.12); transition: background .2s; }
.ticker-list li:hover { background: rgba(167,243,244,.14); transform: none; }
.ticker-list li a { gap: 1rem; align-items: center; height: 100%; }
.ticker-list .cuando { display: flex; flex-direction: column; line-height: 1.15; min-width: 120px; }
.ticker-list .cuando .hora { font-size: 1.15rem; }
.ticker-list .cuando .cat { font-size: .62rem; letter-spacing: .05em; }
.ticker-list .quien { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 500; }
.ticker-list .quien svg { width: 22px; height: 22px; fill: var(--cyan); }
.ticker-list .cat-final { font-size: .66rem; border-left: 1px solid rgba(255,255,255,.2); padding-left: .9rem; }
.ticker-list li.vivo .cuando .hora { color: #ff8a80; }
.ticker-list li.prueba .quien { color: var(--cyan); }
.ticker-label { padding: 0 .9rem; display: flex; align-items: center; }
.ticker-label svg { width: 20px; height: 20px; }
.nav-logo img { margin-bottom: -40px; }

/* Banners laterales: visibles desde 1280 px; el contenido se angosta lo justo para dejarles lugar */
@media (min-width: 1280px) {
  .wrap { max-width: min(1120px, 100vw - 300px); }
  .banner-lateral { display: block; top: 150px; }
  .banner-lateral.izq { left: max(8px, calc((100vw - min(1120px, 100vw - 300px)) / 2 - 136px)); }
  .banner-lateral.der { right: max(8px, calc((100vw - min(1120px, 100vw - 300px)) / 2 - 136px)); }
}
@media (min-width: 1420px) { .banner-lateral { display: block; } }
.banner { padding: 1rem .7rem; gap: .6rem; justify-content: flex-start; }
.banner.fpp { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 60%, var(--blue) 100%); }
.banner.fpp img { width: 88px; height: auto; margin-top: .4rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.banner.fpp b { margin-top: .6rem; }
.banner .txt { font-size: .74rem; line-height: 1.3; opacity: .85; padding: 0 .2rem; }
.banner .btn { font-size: .7rem; padding: .4rem .6rem; margin-top: .3rem; }
.banner .pie { margin-top: auto; font-family: var(--fa); font-weight: 700; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.banner.marca { background: linear-gradient(180deg, #f2a900, #c8102e); }
.banner.marca b { font-size: 1.7rem; margin-top: 2rem; }

/* Solapas de tablas: categoría grande, rama y disciplina debajo */
.solapas .pills { gap: .5rem; }
.solapas button.pill { flex-direction: column; align-items: flex-start; gap: .1rem; border-radius: 0; padding: .5rem .8rem; min-width: 128px; text-align: left; }
.solapas button.pill .cat-grande { font-family: var(--fd); text-transform: uppercase; font-size: 1.05rem; line-height: 1; color: var(--head); display: flex; align-items: center; gap: .35rem; }
.solapas button.pill .rama { font-size: .58rem; color: var(--muted); }
.solapas button.pill.activa { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.solapas button.pill.activa .rama { color: var(--teal); }
.solapas .progreso-solapas { position: static; height: 3px; border-radius: 0; margin: .3rem 0 0; }
.solapas .solapa .tblwrap { border-top-left-radius: 0; border-top-right-radius: 0; }
.solapas { padding-bottom: 0; }

/* Transición suave al cambiar de panel o solapa */
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.alterna-panel:not([hidden]), .solapa:not([hidden]) { animation: aparecer .35s ease; }
@media (prefers-reduced-motion: reduce) { .alterna-panel, .solapa { animation: none !important; } }

/* Ronda 5 */
@media (min-width: 1280px) { .banner-lateral { top: 220px; } }
.banner-h { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; width: 100%; max-width: 600px; height: 240px; margin: 1.6rem auto 0; padding: 1.4rem 1.6rem; border-radius: 0; text-decoration: none; color: #fff; background: linear-gradient(120deg, var(--navy), var(--blue) 70%, var(--teal)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 10px 30px rgba(0,0,0,.15); position: relative; overflow: hidden; }
.banner-h::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: rgba(167,243,244,.12); }
.banner-h .eyebrow { color: var(--cyan); }
.banner-h b { font-family: var(--fd); text-transform: uppercase; font-weight: 500; font-size: 2rem; line-height: 1; display: block; margin: .3rem 0 .5rem; }
.banner-h .txt { font-size: .9rem; opacity: .85; max-width: 34ch; }
.banner-h img { width: 120px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.banner-h .pie { position: absolute; right: .9rem; bottom: .6rem; font-family: var(--fa); font-weight: 700; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.banner-h.marca { background: linear-gradient(120deg, #f2a900, #c8102e); }
.boletin-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.boletin-row .fecha-b { font-weight: 500; color: var(--head); }
.boletin-row .n { min-width: 92px; }
@media (max-width: 500px) { .boletin-grid { grid-template-columns: 1fr; } }
.section-head .vermas-cnt { font-family: var(--fa); font-weight: 700; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }

/* El lateral acompaña el scroll: nunca queda un hueco debajo aunque la columna principal sea más larga */
@media (min-width: 861px) { .layout-23 aside { position: sticky; top: 12px; } }

/* Ronda 6 */
/* Banners laterales 240 x 600 (160 de ancho entre 1280 y 1559 px para que sigan entrando) */
@media (min-width: 1280px) {
  .wrap { max-width: min(1120px, 100vw - 380px); }
  .banner { width: 160px; }
  .banner-lateral.izq { left: max(8px, calc((100vw - min(1120px, 100vw - 380px)) / 2 - 176px)); }
  .banner-lateral.der { right: max(8px, calc((100vw - min(1120px, 100vw - 380px)) / 2 - 176px)); }
}
@media (min-width: 1560px) {
  .wrap { max-width: min(1120px, 100vw - 540px); }
  .banner { width: 240px; padding: 1.4rem 1rem; }
  .banner-lateral.izq { left: max(8px, calc((100vw - min(1120px, 100vw - 540px)) / 2 - 256px)); }
  .banner-lateral.der { right: max(8px, calc((100vw - min(1120px, 100vw - 540px)) / 2 - 256px)); }
  .banner.fpp img { width: 120px; }
  .banner b { font-size: 1.7rem; }
  .banner.marca b { font-size: 2.2rem; }
  .banner .txt { font-size: .85rem; }
}
/* Franja horizontal de ancho completo entre secciones */
.banner-h.franja { max-width: none; height: 160px; margin: 0 0 3rem; grid-template-columns: auto 1fr; padding: 1rem 1.6rem; }
.banner-h.franja img { width: 96px; }
.banner-h.franja b { font-size: 1.7rem; margin: .2rem 0 .3rem; }
.banner-h.franja .txt { max-width: 60ch; }
@media (max-width: 600px) { .banner-h.franja { height: auto; grid-template-columns: 1fr; text-align: center; } .banner-h.franja img { margin: 0 auto; } }
/* Recuadro "Ver históricas" */
.card-historica { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; border-top: 4px solid #f2a900; }
.card-historica:hover { border-color: var(--teal); }
.card-historica .eyebrow { display: flex; align-items: center; gap: .4rem; color: #f2a900; }
.card-historica .eyebrow svg { width: 16px; height: 16px; fill: #f2a900; }
.card-historica .lista { margin-bottom: .6rem; }

/* Ronda 7: banners laterales vuelven a 120 x 600 (formato estándar) en todos los anchos desde 1280 px */
@media (min-width: 1280px) {
  .wrap { max-width: min(1120px, 100vw - 300px); }
  .banner, .banner.fpp, .banner.marca { width: 120px; padding: 1rem .7rem; }
  .banner-lateral.izq { left: max(8px, calc((100vw - min(1120px, 100vw - 300px)) / 2 - 136px)); }
  .banner-lateral.der { right: max(8px, calc((100vw - min(1120px, 100vw - 300px)) / 2 - 136px)); }
  .banner.fpp img { width: 88px; }
  .banner b { font-size: 1.4rem; }
  .banner.marca b { font-size: 1.7rem; }
  .banner .txt { font-size: .74rem; }
}

/* Deportes en solapas horizontales */
.pill svg, .disc-nav a svg { width: 16px; height: 16px; }
.disc-nav { top: 0; }
.disc-nav a.activa { background: var(--navy); color: #fff; border-color: var(--navy); }
.disc-nav a.activa svg { fill: var(--cyan); }
.disc-sec { border-top: 0; padding-top: .6rem; }
@keyframes desdeDer { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes desdeIzq { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
.disc-sec.desde-der { animation: desdeDer .4s ease; }
.disc-sec.desde-izq { animation: desdeIzq .4s ease; }
@media (prefers-reduced-motion: reduce) { .disc-sec { animation: none !important; } }
.lider { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface-3); border: 1px solid var(--line); border-radius: 0; padding: .15rem .6rem .15rem .25rem; font-size: .78rem; color: var(--head); white-space: nowrap; }
.lider b { font-weight: 500; }
.lider .pts { font-family: var(--fd); color: var(--teal); margin-left: .2rem; }
.layout-23.clubes-regl { margin-top: 1.4rem; }
.clubes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.clubes-lista a { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: .4rem .6rem; text-decoration: none; color: var(--ink); font-size: .85rem; }
.clubes-lista a:hover { border-color: var(--teal); }
/* Agenda: días plegables */
.dia { background: var(--surface); border: 1px solid var(--line); border-radius: 0; margin-bottom: .7rem; overflow: hidden; }
.dia summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; }
.dia summary::-webkit-details-marker { display: none; }
.dia summary h2 { font-size: 1.25rem; flex: 1; }
.dia summary .flecha { color: var(--muted); transition: transform .2s; }
.dia[open] summary .flecha { transform: rotate(180deg); }
.dia[open] summary { border-bottom: 1px solid var(--line); background: var(--surface-3); }
.dia .cuerpo { padding: .8rem; }
.dia .badge.hoy { background: var(--teal); color: #fff; }
.filtros .pills .pill { gap: .35rem; }

/* Agenda: pruebas como evento, anclas por mes, filtro por club */
.prueba-card { border-left: 4px solid var(--teal); }
.prueba-card .eq svg { width: 26px; height: 26px; fill: var(--teal); }
.prueba-card .nombre-prueba { font-family: var(--fd); text-transform: uppercase; font-weight: 500; font-size: 1rem; line-height: 1.1; }
.mes-ancla { scroll-margin-top: 12px; margin: 1.4rem 0 .5rem; padding-bottom: .3rem; border-bottom: 2px solid var(--line); }
.mes-ancla .eyebrow { font-size: .8rem; }
.filtro-club select { padding: .45rem .6rem; }

.fila-cat { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; }
.fila-cat-lab { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--fa); font-weight: 700; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); min-width: 150px; }
.fila-cat-lab svg { width: 14px; height: 14px; fill: var(--teal); }

/* Ficha de club */
.club-cab { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.club-stats { display: grid; grid-template-columns: repeat(4, auto); gap: .6rem; }
.club-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: .5rem .8rem; text-align: center; min-width: 78px; }
.club-stats b { display: block; font-family: var(--fd); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--head); }
.club-stats span { font-size: .66rem; color: var(--muted); font-family: var(--fa); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.disc-bloque { margin-bottom: 1.2rem; }
.disc-titulo { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 .5rem; font-size: 1rem; }
.disc-titulo svg { width: 18px; height: 18px; fill: var(--teal); }
.plantel summary .rama-lbl { font-family: var(--fa); font-weight: 700; font-size: .6rem; letter-spacing: .1em; color: var(--muted); margin-left: .3rem; }
#filtro-rama button.pill { cursor: pointer; font: inherit; font-size: .82rem; }
.club-card .badges { margin: .2rem 0; }

/* Boletines */
.boletin-destacado { display: flex; gap: 1rem; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; border-left: 5px solid var(--teal); margin-bottom: 1.4rem; }
.boletin-destacado h2 { font-size: 1.6rem; }
.boletin-row .etiquetas { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.boletin-list .mes-ancla { margin: 1rem 0 .3rem; }
.boletin-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.boletin-doc { max-width: none; }
.indice { position: sticky; top: 12px; }
.indice .lista li a { text-decoration: none; font-family: var(--fd); text-transform: uppercase; letter-spacing: .03em; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem 1.4rem; }
.res-lista { list-style: none; padding: 0; margin: .2rem 0 0; }
.res-lista li { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; padding: .25rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.res-lista li b { font-family: var(--fd); font-size: 1.05rem; color: var(--head); }
@media print {
  .demo-bar, .ticker, .nav, footer, .banner-lateral, .marca-agua, .no-print, .theme-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; }
  .layout-23 { display: block; }
  .doc { break-inside: avoid; border-bottom: 1px solid #999; }
  .doc .gen { border: 1px solid #999; background: #fff; }
  .doc h3 { color: #000; }
  .eyebrow { color: #444; }
  a { color: #000; text-decoration: none; }
  .tblwrap { border: 1px solid #999; }
  .tabla th { background: #eee; color: #000; }
  mark { background: none; font-weight: 700; }
}

/* Banners laterales dentro de main: acompañan el scroll y frenan antes del pie */
.banner-lateral { position: absolute !important; top: 2rem; bottom: 3rem; z-index: 2; pointer-events: none; }
.banner-lateral .banner { position: sticky; top: 24px; pointer-events: auto; }
.app-franja { grid-template-columns: auto 1fr auto; }
.app-franja .btn { font-size: .85rem; }

/* Demo app móvil */
.app-sec { padding: .6rem 0 2rem; }
.app-sec.desde-der { animation: desdeDer .4s ease; } .app-sec.desde-izq { animation: desdeIzq .4s ease; }
.app-intro { max-width: 70ch; margin-bottom: 1.2rem; }
.telefonos { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.telefono { width: 330px; background: #0b1220; border-radius: 40px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 0 0 2px #2a3a55; position: relative; color: #182534; }
.telefono .notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 26px; background: #0b1220; border-radius: 0 0 16px 16px; z-index: 3; }
.telefono .pantalla { background: #f2f5f8; border-radius: 28px 28px 0 0; height: 560px; overflow-y: auto; padding: 38px 12px 12px; scrollbar-width: thin; font-size: .8rem; }
.telefono .pantalla.marcador { background: #132942; color: #fff; }
.telefono .pantalla.lock { background: linear-gradient(180deg, #1b3757, #0b1220); color: #fff; padding-top: 30px; }
.telefono .tabbar { background: #fff; border-radius: 0 0 28px 28px; display: flex; justify-content: space-around; padding: .55rem .4rem .8rem; font-size: .58rem; font-family: var(--fa); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8896a8; }
.telefono .tabbar span { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.telefono .tabbar span svg { width: 18px; height: 18px; fill: currentColor; }
.telefono .tabbar .on { color: #096bce; }
.telefono .tabbar.oscuro { background: #0f2036; color: #6f84a0; }
.telefono .tabbar.oscuro .on { color: #a7f3f4; }
.telefono .rotulo { text-align: center; font-family: var(--fa); font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; }
.app-cab { display: flex; align-items: center; gap: .5rem; font-family: var(--fd); font-size: 1rem; text-transform: uppercase; color: #132942; margin-bottom: .6rem; }
.app-cab img { width: 30px; }
.app-cab .campana { margin-left: auto; position: relative; color: #096bce; }
.app-cab .campana svg { width: 20px; height: 20px; fill: currentColor; }
.app-cab .campana i { position: absolute; top: -6px; right: -8px; background: #ff3b30; color: #fff; font: 700 .55rem var(--fa); border-radius: 0; padding: 1px 5px; }
.app-cab.simple { justify-content: space-between; font-size: .95rem; }
.app-cab.simple.oscuro { color: #fff; }
.app-subtitulo { font-size: .7rem; color: #5b6b7c; margin: -.4rem 0 .6rem; }
.app-alerta { background: #fff; border-left: 4px solid #096bce; border-radius: 0; padding: .5rem .7rem; margin-bottom: .6rem; display: flex; flex-direction: column; }
.app-alerta.warn { border-color: #b7541a; }
.app-alerta b { font-family: var(--fd); text-transform: uppercase; font-weight: 500; }
.app-alerta span { font-size: .72rem; color: #5b6b7c; }
.app-titulo { font-family: var(--fa); font-weight: 700; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #35b4b6; margin: .8rem 0 .4rem; display: flex; align-items: center; gap: .3rem; }
.app-titulo.claro { color: #a7f3f4; }
.app-partido { background: #fff; border-radius: 0; padding: .5rem .6rem; margin-bottom: .45rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: .2rem .4rem; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.app-partido .eq { display: flex; align-items: center; gap: .3rem; font-weight: 500; font-size: .74rem; min-width: 0; }
.app-partido .eq.der { justify-content: flex-end; text-align: right; }
.app-partido .centro { text-align: center; }
.app-partido .centro b { font-family: var(--fd); font-size: 1.05rem; display: block; line-height: 1; color: #132942; }
.app-partido .centro b.vivo { color: #ff3b30; }
.app-partido .centro small { font-size: .55rem; font-family: var(--fa); font-weight: 700; letter-spacing: .06em; color: #8896a8; text-transform: uppercase; }
.app-partido .cat { grid-column: 1 / -1; font-size: .6rem; color: #8896a8; text-align: center; border-top: 1px dashed #e2e8f0; padding-top: .3rem; }
.app-partido .cat svg { width: 10px; height: 10px; fill: currentColor; }
.app-partido.grande .centro b { font-size: 1.5rem; }
.app-botones { grid-column: 1 / -1; display: flex; gap: .4rem; justify-content: center; margin-top: .3rem; }
.app-botones.grande { margin: .8rem 0; }
.app-botones .b { display: inline-block; border: 1px solid #cfd8e2; border-radius: 0; padding: .4rem .8rem; font-family: var(--fd); text-transform: uppercase; font-size: .78rem; background: #fff; color: #132942; }
.app-botones .b.ok { background: #35b4b6; color: #fff; border-color: #35b4b6; }
.app-botones .b.fin { background: #ff3b30; color: #fff; border-color: #ff3b30; }
.app-botones.grande .b { padding: .7rem 1.2rem; font-size: .95rem; width: 100%; text-align: center; }
.app-nota { font-size: .66rem; color: #5b6b7c; background: #e6ecf2; border-radius: 0; padding: .45rem .6rem; margin-top: .6rem; display: flex; gap: .3rem; align-items: flex-start; }
.app-nota.claro { background: rgba(255,255,255,.1); color: #c9d6e6; }
.app-nota svg { width: 12px; height: 12px; fill: currentColor; flex: none; margin-top: 2px; }
.app-solapas { display: flex; gap: .3rem; margin-bottom: .5rem; }
.app-solapas span { flex: 1; text-align: center; padding: .35rem; border-radius: 0; font-family: var(--fd); text-transform: uppercase; font-size: .78rem; background: #e6ecf2; color: #5b6b7c; }
.app-solapas .on { background: #132942; color: #fff; }
.app-tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0; overflow: hidden; font-size: .72rem; }
.app-tabla th { font-family: var(--fa); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: #8896a8; padding: .4rem .4rem; text-align: left; background: #e6ecf2; }
.app-tabla td { padding: .35rem .4rem; border-top: 1px solid #edf1f5; }
.app-tabla td:nth-child(2) { display: flex; align-items: center; gap: .3rem; }
.app-tabla tr.mio td { background: #e7f7f7; font-weight: 700; }
.app-perfil { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem 0; }
.app-perfil.claro { color: #fff; }
.app-perfil .avatar { width: 62px; height: 62px; border-radius: 50%; background: #0b3d91; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 1.4rem; }
.app-perfil b { font-family: var(--fd); text-transform: uppercase; font-weight: 500; font-size: 1rem; }
.credencial { background: linear-gradient(120deg, #132942, #096bce); color: #fff; border-radius: 12px; padding: .7rem .8rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
.credencial b { display: block; font-family: var(--fd); font-size: 1rem; }
.credencial .eyebrow { color: #a7f3f4; }
.credencial .qr { width: 56px; height: 56px; background: repeating-conic-gradient(#fff 0 25%, #132942 0 50%) 0 0 / 8px 8px; border: 3px solid #fff; border-radius: 4px; }
.app-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.app-chips span { border: 1px solid #cfd8e2; border-radius: 0; padding: .25rem .6rem; font-size: .68rem; background: #fff; color: #132942; display: inline-flex; align-items: center; gap: .3rem; }
.app-chips .on { background: #132942; color: #fff; border-color: #132942; }
.app-chips .on.warn { background: #b7541a; border-color: #b7541a; }
.marcador .app-chips span { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.app-switch { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 8px; padding: .45rem .6rem; margin-bottom: .3rem; font-size: .74rem; }
.app-switch i { width: 34px; height: 20px; border-radius: 10px; background: #cfd8e2; position: relative; }
.app-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.app-switch i.on { background: #35b4b6; } .app-switch i.on::after { left: 16px; }
.crono-app { text-align: center; padding: .4rem 0 .6rem; }
.crono-app .estado { display: block; font-family: var(--fa); font-weight: 700; font-size: .58rem; letter-spacing: .12em; color: #a7f3f4; }
.crono-app b { display: block; font-family: var(--fd); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.crono-app .ctrl { display: flex; gap: .3rem; justify-content: center; margin-top: .4rem; }
.crono-app .ctrl i { font-style: normal; border: 1px solid rgba(255,255,255,.4); border-radius: 0; padding: .25rem .6rem; font-size: .7rem; font-family: var(--fd); text-transform: uppercase; }
.crono-app.claro { color: #132942; } .crono-app.claro .estado { color: #35b4b6; } .crono-app.claro .ctrl i { border-color: #cfd8e2; background: #fff; }
.crono-app .ctrl i.ok { background: #35b4b6; color: #fff; border-color: #35b4b6; } .crono-app .ctrl i.fin { background: #ff3b30; color: #fff; border-color: #ff3b30; }
.tanteador { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tanteador .lado { background: rgba(255,255,255,.08); border-radius: 0; padding: .6rem .4rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.tanteador .lado b { font-family: var(--fd); text-transform: uppercase; font-weight: 500; font-size: .85rem; }
.tanteador .goles { font-family: var(--fd); font-size: 3.4rem; line-height: 1; color: #a7f3f4; }
.tanteador .gol { background: #35b4b6; color: #fff; font-family: var(--fd); font-size: 1.05rem; padding: .6rem 0; border-radius: 0; width: 100%; text-align: center; box-shadow: 0 4px 0 #225050; }
.tanteador .menos { border: 1px solid rgba(255,255,255,.4); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--fd); }
.app-log { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; font-size: .7rem; color: #c9d6e6; }
.app-log span { border-left: 2px solid #35b4b6; padding-left: .5rem; }
.app-campo { margin-bottom: .6rem; }
.app-campo label { display: block; font-family: var(--fa); font-weight: 700; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #8896a8; margin-bottom: .2rem; }
.app-campo .input, .app-campo .textarea { background: #fff; border: 1px solid #cfd8e2; border-radius: 0; padding: .45rem .6rem; font-size: .76rem; }
.app-campo .textarea { min-height: 54px; }
.app-campo .foto-placeholder { border: 2px dashed #cfd8e2; border-radius: 0; padding: 1.2rem; text-align: center; color: #8896a8; font-size: .74rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.app-campo .foto-placeholder svg { width: 22px; height: 22px; fill: currentColor; }
.app-campo .firmas { display: flex; gap: .4rem; } .app-campo .firmas span { flex: 1; background: #dcf1e8; color: #1f7a5a; border-radius: 0; padding: .4rem; text-align: center; font-size: .74rem; font-weight: 700; }
.app-fila { display: grid; grid-template-columns: 26px 1fr auto; gap: .5rem; align-items: center; background: #fff; border-radius: 0; padding: .4rem .5rem; margin-bottom: .3rem; font-size: .76rem; }
.app-fila .num { width: 24px; height: 24px; border-radius: 50%; background: #e6ecf2; display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: .8rem; }
.app-fila .num.ok { background: #dcf1e8; color: #1f7a5a; } .app-fila .num.bad { background: #f9dedc; color: #b3261e; }
.app-fila .nombre { display: flex; align-items: center; gap: .3rem; }
.app-fila .estado b { font-family: var(--fd); color: #132942; } .app-fila .estado i { color: #b7541a; font-style: normal; font-size: .66rem; font-family: var(--fa); font-weight: 700; text-transform: uppercase; }
.app-fila.actual { outline: 2px solid #35b4b6; }
.puntaje-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem; }
.puntaje-grid div { background: rgba(255,255,255,.08); border-radius: 0; padding: .5rem; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; align-items: center; }
.puntaje-grid span { grid-column: 1 / -1; font-family: var(--fa); font-weight: 700; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: #a7f3f4; }
.puntaje-grid b { grid-column: 1 / -1; font-family: var(--fd); font-size: 1.8rem; line-height: 1; text-align: center; }
.puntaje-grid i { font-style: normal; text-align: center; border: 1px solid rgba(255,255,255,.35); border-radius: 0; padding: .2rem; font-family: var(--fd); }
.total-app { display: flex; justify-content: space-between; align-items: center; background: #35b4b6; color: #fff; border-radius: 0; padding: .5rem .8rem; margin-top: .6rem; }
.total-app b { font-family: var(--fd); font-size: 1.6rem; }
.app-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.app-kpis div { background: #fff; border-radius: 0; padding: .4rem; text-align: center; }
.app-kpis b { display: block; font-family: var(--fd); font-size: 1.3rem; line-height: 1; color: #132942; }
.app-kpis span { font-size: .55rem; color: #8896a8; font-family: var(--fa); font-weight: 700; text-transform: uppercase; }
.app-accion { display: flex; gap: .6rem; align-items: center; background: #fff; border-radius: 0; padding: .55rem .6rem; margin-bottom: .35rem; }
.app-accion svg { width: 22px; height: 22px; fill: #35b4b6; flex: none; }
.app-accion b { display: block; font-size: .78rem; } .app-accion small { color: #8896a8; font-size: .64rem; }
.hora-lock { text-align: center; margin-bottom: 1rem; }
.hora-lock b { display: block; font-family: var(--fd); font-size: 3rem; line-height: 1; }
.hora-lock span { font-size: .72rem; opacity: .8; }
.push { background: rgba(255,255,255,.92); color: #182534; border-radius: 0; padding: .55rem .7rem; margin-bottom: .45rem; }
.push .cab { display: flex; align-items: center; gap: .4rem; font-size: .62rem; color: #5b6b7c; margin-bottom: .2rem; }
.push .cab img { width: 16px; } .push .cab .cuando { margin-left: auto; }
.push b { display: block; font-size: .78rem; } .push span { font-size: .7rem; }
.push.arbitro { background: rgba(167,243,244,.95); }
.mail-demo { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.mail-cab { padding: .8rem 1rem; border-bottom: 1px solid var(--line); display: grid; gap: .15rem; font-size: .8rem; }
.mail-cab .para { color: var(--muted); font-size: .72rem; } .mail-cab .asunto { font-weight: 700; font-size: .95rem; margin-top: .3rem; }
.mail-cuerpo { padding: 1rem 1.2rem; background: #fff; color: #182534; font-size: .88rem; }
.mail-banda { display: flex; align-items: center; gap: .6rem; background: #132942; color: #fff; border-radius: 0; padding: .6rem .8rem; margin-bottom: .8rem; font-family: var(--fd); text-transform: uppercase; }
.mail-banda img { width: 34px; } .mail-banda small { font-family: var(--fb); text-transform: none; opacity: .8; }
.mail-cuerpo h3 { color: #132942; margin-bottom: .4rem; }
.mail-bloque { border-left: 4px solid #35b4b6; background: #f2f5f8; padding: .5rem .8rem; margin: .6rem 0; border-radius: 0; }
.mail-bloque b { font-family: var(--fd); text-transform: uppercase; font-weight: 500; color: #132942; }
.mail-bloque ul { margin: .3rem 0 0; padding-left: 1.1rem; } .mail-bloque p { margin: .2rem 0 0; }
.mail-btn { display: inline-block; background: #35b4b6; color: #fff; font-family: var(--fd); text-transform: uppercase; padding: .6rem 1.2rem; border-radius: 0; }
.mail-pie { font-size: .7rem; color: #8896a8; text-align: center; margin: 0; }
.mail-demo .rotulo { text-align: center; font-family: var(--fa); font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .8rem; background: var(--surface); }

/* Bajadas */
.docs { display: grid; gap: .5rem; }
.doc-fila { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: .6rem .9rem; text-decoration: none; color: var(--ink); }
.doc-fila:hover { border-color: var(--teal); }
.doc-ico { width: 44px; height: 44px; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); }
.doc-ico svg { width: 18px; height: 18px; fill: currentColor; }
.doc-ico small { font-family: var(--fa); font-weight: 700; font-size: .5rem; letter-spacing: .06em; }
.doc-ico.pdf { background: var(--bad-soft); color: var(--bad); }
.doc-ico.link { background: var(--blue-soft); color: var(--link); }
.doc-txt b { display: block; color: var(--head); }
/* Contacto */
.como-llegar { display: flex; flex-direction: column; gap: .2rem; margin-top: .4rem; font-size: .85rem; }
.como-llegar small { font-family: var(--fa); font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.como-llegar span { display: inline-flex; align-items: center; gap: .3rem; }
.como-llegar svg { fill: var(--teal); }

/* Contacto: fondo de respaldo detrás del mapa; Bajadas: filtros en dos filas cuando falta ancho */
.contacto-hero { background: var(--surface) linear-gradient(135deg, var(--navy), var(--blue)); }
.contacto-hero iframe { background: transparent; }
.contacto-hero .datos { background: var(--surface); }
@media (max-width: 1000px) { .filtros .form-inline { grid-template-columns: 1fr 1fr; } .filtros .form-inline > div:first-child { grid-column: 1 / -1; } }

/* Deportes: los torneos por rama en 2 x 2, con lugar para el líder */
.torneos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 640px) { .torneos-grid { grid-template-columns: 1fr; } }
.torneos-grid .lista li > span:last-child { white-space: nowrap; }
.torneos-grid .lista li > span:first-child { min-width: 0; }

/* Escudos con sigla: siempre dentro del círculo */
.escudo-sigla { overflow: hidden; letter-spacing: 0; line-height: 1; padding: 0; box-sizing: border-box; text-align: center; }

/* ---- Estilo "filoso": sin esquinas redondeadas salvo escudos, fotos y avatares (referencia FCP / FGP) ---- */
.theme-btn, .carrusel .ctrl, .disc-sec .cab svg, .organo summary .ic-org, .ayuda summary, .vivo-panel .btn-gol, .tanteador .menos, .app-fila .num { border-radius: 0; }
.banner-h::after { border-radius: 0; transform: rotate(35deg); }
.card, .partido, .tblwrap, .club-card, .plantel, .organo, .news article, .boletin-row, .red, .genero, .filtros { box-shadow: none; }
.card-navy { border-left: 4px solid var(--cyan); }
.btn-teal { box-shadow: none; }
.btn { letter-spacing: .08em; }
.section-title { border-bottom-width: 4px; }

/* ---- Auspiciantes / instituciones (idea FGP: tira de logos bajo el hero) ---- */
.auspiciantes { background: var(--surface); border-top: 1px solid var(--line); padding: 1.1rem 0; }
.auspiciantes .wrap { display: flex; align-items: center; gap: 1.5rem; }
.auspiciantes .eyebrow { flex: none; }
.auspiciantes ul { display: flex; gap: 1rem 2rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; flex: 1; min-width: 0; justify-content: space-between; align-items: center; }
@media (max-width: 700px) { .auspiciantes .wrap { flex-wrap: wrap; } }
.logo-txt { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--muted); filter: grayscale(1); opacity: .8; transition: opacity .2s, filter .2s; }
.logo-txt b { font-family: var(--fd); font-weight: 600; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: var(--head); line-height: 1; }
.logo-txt small { font-size: .68rem; letter-spacing: .04em; }
.logo-txt:hover { opacity: 1; filter: none; }
.logo-txt.marca { border: 1px dashed var(--line); padding: .35rem .7rem; }
.logo-txt.marca b { color: var(--teal); }

/* ---- Footer: badges de tiendas ---- */
.tiendas { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.tienda { display: inline-flex; flex-direction: column; background: #000; color: #fff !important; border: 1px solid rgba(255,255,255,.35); padding: .35rem .8rem; line-height: 1.1; text-decoration: none; min-width: 128px; }
.tienda small { font-size: .6rem; letter-spacing: .04em; opacity: .8; }
.tienda b { font-family: var(--fa); font-size: .9rem; }

/* ---- Tribunal: resoluciones por semana ---- */
.semana { margin-bottom: 1.6rem; }
.semana-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .6rem; border-bottom: 3px solid var(--navy); padding-bottom: .3rem; }
.semana-head h2, .semana-head h3 { font-size: 1.2rem; }
.expediente { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--bad); padding: .8rem 1rem; margin-bottom: .6rem; }
.exp-cab { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.exp-cod { font-family: var(--fa); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); padding: .2rem .5rem; }
.exp-club { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); }
.exp-sanciones { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .3rem; }
.exp-res { margin: .3rem 0 .4rem; font-size: .92rem; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.blue { background: var(--blue-soft); color: var(--link); }

/* ---- Árbitros: designaciones ---- */
.desig-dia { margin-bottom: 1.4rem; }
.desig-dia .semana-head { border-bottom-width: 2px; }
.desig { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
svg.ic.ok { color: var(--ok); }
td.nowrap { white-space: nowrap; }

/* ---- Formación: cursos ---- */
.cursos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.curso { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--teal); padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.curso-cab { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }
.curso h3 { font-size: 1.15rem; }
.curso-datos { list-style: none; margin: 0 0 .7rem; padding: 0; font-size: .85rem; display: grid; gap: .25rem; }
.curso-datos li { display: flex; gap: .45rem; align-items: center; }
.curso-datos svg.ic { color: var(--teal); }
.cupo { margin-bottom: .7rem; }
.cupo-bar { height: 6px; background: var(--surface-2); margin-bottom: .25rem; }
.cupo-bar i { display: block; height: 100%; background: var(--teal); }
.curso-pie { margin-top: auto; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .7rem; }
.curso-precio { font-family: var(--fd); font-size: 1.3rem; color: var(--head); }
.curso-pie .btn { margin-left: auto; }

/* ---- FAQ y pasos (OAC, denuncias, formación) ---- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: .55rem 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::after { content: "+"; font-family: var(--fd); color: var(--teal); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "-"; }
.faq p { margin: 0 0 .7rem; font-size: .9rem; color: var(--muted); }
.pasos { list-style: none; margin: .5rem 0 0; padding: 0; counter-reset: paso; display: grid; gap: .6rem; }
.pasos li { display: grid; grid-template-columns: 28px 1fr; gap: .15rem .6rem; align-items: start; }
.pasos li::before { counter-increment: paso; content: counter(paso); grid-row: span 2; width: 28px; height: 28px; background: var(--navy); color: #fff; font-family: var(--fd); display: flex; align-items: center; justify-content: center; }
.card-navy .pasos li::before { background: var(--cyan); color: var(--navy); }
.tramites { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.tramite { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: .8rem .9rem; text-decoration: none; color: var(--ink); }
.tramite svg.ic { grid-row: span 2; width: 1.6em; height: 1.6em; color: var(--teal); }
.tramite:hover { border-color: var(--teal); }
label.check { display: flex; gap: .5rem; align-items: center; font-size: .9rem; }

/* ---- Agenda: calendario compacto (idea FCP) ---- */
.mini-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.mini-cal .mes { background: var(--surface); border: 1px solid var(--line); padding: .7rem .8rem; }
.mini-cal .mes-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.mini-cal .mes-cab a { font-family: var(--fd); text-transform: uppercase; text-decoration: none; color: var(--head); font-size: 1.05rem; }
.mini-cal .dias-sem, .mini-cal .sem { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-cal .dias-sem span { font-family: var(--fa); font-weight: 700; font-size: .6rem; text-align: center; color: var(--muted); padding: .15rem 0; }
.mini-cal .d { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; font-size: .78rem; color: var(--muted); text-decoration: none; }
.mini-cal .d.pasado { opacity: .35; }
.mini-cal .d.con { background: var(--blue-soft); color: var(--head); font-weight: 700; }
.mini-cal .d.con:hover { background: var(--teal); color: #fff; }
.mini-cal .d.hoy { outline: 2px solid var(--teal); outline-offset: -2px; }
.mini-cal .d i { position: absolute; right: 1px; top: 0; font-style: normal; font-size: .55rem; line-height: 1; color: var(--link); }
.mini-cal .d.con:hover i { color: #fff; }

.ic-disc { display: inline-flex; vertical-align: -.15em; }
.ic-disc svg { width: 1em; height: 1em; fill: currentColor; }

/* ---- Selector de temporadas (idea FGP) ---- */
.temporada-sel { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.temporada-sel label { font-family: var(--fa); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.temporada-sel select { font: inherit; font-family: var(--fd); font-size: 1.05rem; text-transform: uppercase; padding: .45rem .7rem; border: 2px solid var(--navy); background: var(--surface); color: var(--head); cursor: pointer; }
:root[data-theme="dark"] .temporada-sel select { border-color: var(--cyan); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .temporada-sel select { border-color: var(--cyan); } }
.temporada-aviso { margin-bottom: 1.2rem; border-left-color: var(--warn); }
.lider.campeon { background: var(--ok-soft); border-color: var(--ok); }
.lider.campeon svg.ic { color: var(--ok); }

/* ---- Submenús del menú principal (Institucional, Deportes, Bajadas, Contacto) ---- */
.nav-links > li { position: relative; }
.nav-links > li.con-sub > a { padding-right: 1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a7f3f4' stroke-width='1.6'/%3E%3C/svg%3E") right center / 9px no-repeat; }
.nav-links .sub { position: absolute; left: -.9rem; top: 100%; min-width: 230px; background: var(--navy); border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--cyan); list-style: none; margin: 0; padding: .35rem 0; z-index: 40; display: none; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.nav-links > li:hover > .sub, .nav-links > li:focus-within > .sub { display: block; }
.nav-links .sub li.sep { border-top: 1px solid rgba(255,255,255,.12); margin-top: .3rem; padding-top: .3rem; }
.nav-links .sub a { display: block; padding: .5rem .9rem; font-size: .82rem; letter-spacing: .06em; border-bottom: 0; border-left: 3px solid transparent; white-space: nowrap; }
.nav-links .sub a:hover { border-left-color: var(--cyan); background: rgba(255,255,255,.06); }
.nav-links > li.con-sub > a::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
@media (max-width: 900px) { .nav-links .sub { display: none !important; } .nav-links > li.con-sub > a { padding-right: 0; background: none; } }
.denuncia-card svg.ic { color: var(--purple); }
.denuncia-card:hover { border-color: var(--purple); }

.nav { position: relative; z-index: 60; }
.nav-links .sub { z-index: 70; }
.ticker { position: relative; z-index: 5; }


/* ---- En vivo: transmisión y reborde rojo en el ticker ---- */
.ver-vivo { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-family: var(--fa); font-weight: 700; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #d32f2f; padding: .25rem .55rem; text-decoration: none; }
.ver-vivo svg.ic { width: 1.2em; height: 1.2em; }
.ver-vivo:hover { background: #b71c1c; }
.ticker-list li.vivo { box-shadow: inset 0 0 0 3px #ff5252; background: rgba(255,82,82,.14); animation: latido-borde 1.6s ease-in-out infinite; }
.ticker-list li.vivo .cuando .hora { display: flex; align-items: center; gap: .4rem; color: #ff8a80; }
.ticker-list li.vivo .cuando .hora svg.ic { width: 1.1em; height: 1.1em; color: #fff; }
.ticker-list li.vivo .badge.vivo { font-size: .6rem; }
@keyframes latido-borde { 0%, 100% { box-shadow: inset 0 0 0 3px #ff5252; } 50% { box-shadow: inset 0 0 0 3px rgba(255,82,82,.45); } }
.otra-tabla { cursor: pointer; padding-right: .5rem; }
.otra-tabla select { font: inherit; font-size: .78rem; border: 0; background: transparent; color: var(--head); max-width: 190px; cursor: pointer; }
.otra-tabla select:focus { outline: 2px solid var(--teal); }

/* ---- Home: novedades a ancho completo ---- */
.novedades-hero .carrusel .slide { min-height: 420px; grid-template-columns: 1.25fr 1fr; }
.novedades-hero .carrusel .slide .body { padding: 2rem 2.4rem 2.6rem; }
.novedades-hero .carrusel .slide h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.novedades-hero .carrusel .slide p { font-size: 1.05rem; }
@media (max-width: 760px) { .novedades-hero .carrusel .slide { grid-template-columns: 1fr; min-height: 0; } }
.alerta { position: relative; padding-right: 2.6rem; }
.alerta .cerrar { position: absolute; top: .35rem; right: .45rem; width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; font-family: var(--fd); }
.alerta .cerrar:hover { color: var(--head); background: var(--surface-2); }

/* ---- Selector de tablas: panel propio con burbujas (claro y oscuro) ---- */
.otra-tabla { position: relative; }
.otra-tabla summary { list-style: none; cursor: pointer; display: inline-flex; flex-direction: column; }
.otra-tabla summary::-webkit-details-marker { display: none; }
.otra-tabla[open] summary { border-color: var(--teal); background: var(--surface-3); }
.otra-tabla summary .txt::after { content: ""; display: inline-block; width: .42em; height: .42em; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(45deg); margin-left: .45em; vertical-align: .2em; }
.otra-tabla[open] summary .txt::after { transform: rotate(225deg); vertical-align: -.1em; }
.otra-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(720px, calc(100vw - 2.5rem)); max-height: min(520px, 70vh); overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--teal); box-shadow: 0 16px 40px rgba(0,0,0,.28); padding: .9rem 1rem 1rem; display: grid; gap: .9rem; }
.otra-grupo { display: grid; gap: .5rem; }
.otra-titulo { display: flex; align-items: center; gap: .45rem; font-family: var(--fd); text-transform: uppercase; font-size: 1.05rem; color: var(--head); border-bottom: 2px solid var(--navy); padding-bottom: .25rem; }
:root[data-theme="dark"] .otra-titulo { border-color: var(--cyan); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .otra-titulo { border-color: var(--cyan); } }
.otra-titulo .ic-disc svg { width: 1.1em; height: 1.1em; fill: var(--teal); }
.otra-torneo { display: grid; gap: .35rem; }
.otra-torneo .eyebrow { font-size: .62rem; }
.burbujas { display: flex; flex-wrap: wrap; gap: .4rem; }
.burbuja { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem .35rem .5rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; line-height: 1.1; text-align: left; }
.burbuja .ic-disc { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--teal); }
.burbuja .ic-disc svg { width: 13px; height: 13px; fill: currentColor; }
.burbuja b { font-family: var(--fd); font-weight: 500; text-transform: uppercase; font-size: .88rem; letter-spacing: .02em; }
.burbuja small { font-family: var(--fa); font-weight: 700; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.burbuja.rama-F .ic-disc { color: var(--purple); }
.burbuja.rama-M .ic-disc { color: var(--link); }
.burbuja.rama-X .ic-disc { color: var(--ok); }
.burbuja:hover, .burbuja:focus-visible { border-color: var(--teal); background: var(--surface-3); }
.burbuja.activa { background: var(--navy); color: #fff; border-color: var(--navy); }
.burbuja.activa small { color: var(--cyan); }
.burbuja.activa .ic-disc { background: rgba(255,255,255,.15); color: #fff; }
@media (max-width: 640px) { .otra-panel { position: fixed; left: 1rem; right: 1rem; top: 12vh; width: auto; max-height: 76vh; } }

/* ---- Menú en celular: hamburguesa + listado con acordeón ---- */
.menu-btn, .sub-btn { display: none; }
@media (max-width: 900px) {
  .nav .wrap { flex-wrap: wrap; gap: .6rem 1rem; padding-bottom: 0; min-height: 68px; }
  .nav-cta { margin-left: auto; gap: .5rem; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0 10px; border: 2px solid rgba(255,255,255,.35); background: transparent; cursor: pointer; }
  .menu-btn span { display: block; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }
  .nav.abierto .menu-btn { border-color: var(--cyan); }
  .nav.abierto .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.abierto .menu-btn span:nth-child(2) { opacity: 0; }
  .nav.abierto .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links { display: none; order: 3; flex-direction: column; gap: 0; width: calc(100% + 2.5rem); margin: .3rem -1.25rem 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 1rem; }
  .nav.abierto .nav-links { display: flex; }
  .nav-links > li { position: static; display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-links > li > a { flex: 1; display: flex; align-items: center; min-height: 50px; padding: .6rem 1.25rem; font-size: 1.05rem; border-bottom: 0; border-left: 4px solid transparent; }
  .nav-links > li > a:hover, .nav-links > li > a.activa { border-color: transparent; border-left-color: var(--cyan); background: rgba(255,255,255,.05); }
  .nav-links > li.con-sub > a { padding-right: .5rem; background-image: none; }
  .nav-links > li.con-sub > a::after { display: none; }
  .sub-btn { display: flex; align-items: center; justify-content: center; width: 54px; border: 0; border-left: 1px solid rgba(255,255,255,.12); background: transparent; cursor: pointer; padding: 0; }
  .sub-btn::before { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); transition: transform .2s; }
  .nav-links > li.con-sub.abierto > .sub-btn::before { transform: rotate(45deg); }
  .nav-links > li.con-sub.abierto > .sub-btn { background: rgba(255,255,255,.06); }
  .nav-links > li.con-sub:not(.abierto) > .sub { display: none !important; }
  .nav-links > li.con-sub.abierto > .sub { display: block !important; }
  .nav-links .sub { position: static; width: 100%; min-width: 0; margin: 0; padding: .2rem 0 .5rem; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.22); box-shadow: none; }
  .nav-links .sub a { padding: .6rem 1.25rem .6rem 2.4rem; font-size: .92rem; white-space: normal; border-left: 3px solid transparent; }
  .nav-links .sub li.sep { border-top: 1px solid rgba(255,255,255,.1); margin-top: .25rem; padding-top: .25rem; }
}