/* =====================================================================
   css/subpagina.css - Cabecera de las subpaginas de la portada
   (convocatorias, mercado, noticias, buscar-perfil).
   Mismo fondo que el hero de la portada (inicio.css .ix-hero-bg): verde
   oscuro con brillo dorado y rayas de cancha; logo grande al centro,
   titulo y "Volver" como boton. Se carga DESPUES del <style> de cada
   pagina, asi que manda sobre su .cabecera.
   ===================================================================== */

.sp-hero { position:relative; overflow:hidden; color:#fff; text-align:center;
  background:radial-gradient(900px 420px at 85% -10%, rgba(245,197,66,.22), transparent 60%),
             radial-gradient(760px 520px at -10% 115%, rgba(31,122,61,.65), transparent 60%),
             linear-gradient(180deg, #0b1d13, #08140d);
  padding:0 0 76px; }
.sp-hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%); }
/* medio circulo de cancha abajo */
.sp-hero::after { content:""; position:absolute; left:50%; bottom:-170px; width:340px; height:340px; transform:translateX(-50%);
  border:2px solid rgba(255,255,255,.07); border-radius:50%; pointer-events:none; }
.sp-hero > * { position:relative; z-index:1; }

/* Barra: solo el boton de volver, a la derecha */
.sp-hero .topbar { background:none; border:0; display:flex; justify-content:flex-end; padding:16px clamp(16px,4vw,40px) 0; }
.sp-hero .topbar .volver { display:inline-flex; align-items:center; gap:6px; color:#f5c542; font-size:13.5px; font-weight:700;
  padding:8px 14px; border-radius:99px; border:1px solid rgba(245,197,66,.45); background:rgba(8,20,13,.45);
  text-decoration:none; transition:background .2s, color .2s; }
.sp-hero .topbar .volver:hover { background:#f5c542; color:#241a03; }

/* Logo grande al centro, con halo dorado */
.sp-logo { display:inline-flex; flex-direction:column; align-items:center; gap:10px; margin-top:6px; color:#fff; text-decoration:none; }
.sp-logo-img { position:relative; display:grid; place-items:center; width:132px; height:132px; }
.sp-logo-img::before { content:""; position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,66,.35), rgba(245,197,66,0) 68%); }
.sp-logo-img img { position:relative; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); transition:transform .25s; }
.sp-logo:hover .sp-logo-img img { transform:scale(1.05) rotate(-2deg); }
.sp-logo-img .punto { position:relative; width:64px; height:64px; border-radius:50%; background:#f5c542; }
.sp-logo-txt { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:#f5c542; }
.sp-logo-txt span { color:rgba(255,255,255,.7); }

/* Titulo y texto */
.sp-hero .cabecera { max-width:820px; padding:18px clamp(16px,4vw,40px) 0; margin:0 auto; }
.sp-hero .cabecera h1 { color:#fff; font-size:clamp(34px,6vw,56px); line-height:1.02; letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.4); text-wrap:balance; }
.sp-hero .cabecera h1::after { content:""; display:block; width:64px; height:4px; margin:14px auto 0; border-radius:4px;
  background:linear-gradient(90deg,#f5c542,#e8a317); }
.sp-hero .cabecera p { color:rgba(255,255,255,.78); margin:14px auto 0; max-width:620px; font-size:16px; }
.sp-hero .cabecera .mercado-nuevo { color:#f5c542; }

/* Mercado: los dos modos como pastillas sobre lo oscuro */
.sp-hero .modo-toggle { margin:24px auto 0; }
.sp-hero .modo-toggle a { color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
.sp-hero .modo-toggle a:hover { background:rgba(255,255,255,.14); }
.sp-hero .modo-toggle a.activo { color:#241a03; background:linear-gradient(160deg,#f7e7ad,#f5c542 55%,#d9a514); border-color:transparent; }

/* Lo que sigue (filtros o lista) se monta un poco sobre la cabecera */
.sp-hero + .seccion { position:relative; z-index:2; margin-top:-48px; }
.sp-hero + .seccion > :first-child { margin-top:0; }

@media (max-width:600px) {
  .sp-hero { padding-bottom:64px; }
  .sp-logo-img { width:100px; height:100px; }
  .sp-logo-txt { font-size:13px; letter-spacing:.14em; }
  .sp-hero .cabecera p { font-size:15px; }
}