/* =========================
   RESET + VARIABLES
========================= */
:root{
  --topbar-h: 36px;
  --gap: 18px;

  --bg: #eef3f9;
  --panel: rgba(255,255,255,.92);
  --panel-solid: #ffffff;

  --text: #0f1b2d;
  --muted: #5b6b82;

  --border: rgba(15,27,45,.10);
  --shadow: 0 18px 45px rgba(15,27,45,.10);
  --shadow-soft: 0 10px 25px rgba(15,27,45,.08);

  --blue: #1f7ae0;
  --blue2: #2a90ff;
  --blue3: #195fb7;

  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(47,128,255,.12), transparent 60%),
    radial-gradient(800px 420px at 0% 30%, rgba(0,180,255,.10), transparent 60%),
    linear-gradient(180deg, #f9fbff 0%, var(--bg) 55%, #f9fbff 100%);
}

/* =========================
   TOPBAR
========================= */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  height: var(--topbar-h);
  background: linear-gradient(90deg, var(--blue3), var(--blue2));
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.topbar-inner{
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topbar-left{ color:#fff; font-weight:600; opacity:.95; }

.topbar-right{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
}

/* =========================
   LAYOUT (SIDEBAR + CONTENT)
========================= */
/* Sidebar */
.layout{
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}
.sidebar{
  position: sticky;
  top: calc(var(--topbar-h) + 18px);
  align-self:start;
}

.sidebox{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 12px;
  backdrop-filter: blur(10px);
}

.sidebox-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 4px 8px 10px;
  text-transform: uppercase;
}

.sideitem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  margin: 6px 6px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--text);
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.sideitem:hover{
  background: rgba(31,122,224,.08);
  border-color: rgba(31,122,224,.18);
  transform: translateY(-1px);
}

.sideitem.active{
  background: linear-gradient(90deg, rgba(31,122,224,.95), rgba(42,144,255,.92));
  color:#fff;
  box-shadow: 0 12px 28px rgba(31,122,224,.25);
}

/* Donación */
.donation{
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 12px;
  backdrop-filter: blur(10px);
}
.donation h3{
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing:.06em;
  text-transform: uppercase;
}
.donation .btn-donar{
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: #ff9900;
  color:#111;
  font-weight: 900;
  cursor:pointer;
}
.donation small{ display:block; margin-top: 8px; color: var(--muted); }

/* Content */
.content{
  width: 100%;
  max-width: 1200px;
}
/* =========================
   CARDS
========================= */
.card{
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  padding: 18px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 24px 55px rgba(0,0,0,.10);
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .2px;
}

.breadcrumbs{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(31,122,224,.08);
  border: 1px solid rgba(31,122,224,.15);
  padding: 6px 10px;
  border-radius: 999px;
}

.note{
  background: rgba(31,122,224,.06);
  border: 1px solid rgba(31,122,224,.12);
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--muted);
  font-weight: 700;
}

.muted{ color: var(--muted); }

/* =========================
   HERO FUTURISTA (LOGO NO SE TOCA)
   -> “más chato” SOLO por CSS
========================= */
.hero-futurista{
  width:100%;
  margin:0;
  padding:0;
}

.hero-futurista img{
  width:100%;
  max-width:none;   /* ← quitamos límite */
  display:block;
}
.content{
  padding-left:0 !important;
}

.container{
  max-width:100% !important;
}
.hero-futurista img{
  width: 100%;
  max-width: 1200px;

  height: auto;          /* mantiene proporción real */
  object-fit: initial;   /* nada de recortes raros */

  box-shadow: none;
  border: 0;
  display: block;
}
/* =========================
   BOTONES INICIO
========================= */
.botones-inicio{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}

.botones-inicio button{
  border: 1px solid rgba(31,122,224,.25);
  background: rgba(31,122,224,.06);
  color: var(--text);
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
}
.botones-inicio button:hover{
  background: rgba(31,122,224,.10);
}

/* =========================
   PROXIMAMENTE / GRID
========================= */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mini-card{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
}

.mini-title{ font-weight: 900; margin-bottom: 6px; }
.mini-text{ color: var(--muted); margin-bottom: 10px; }

.list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 700;
}

.countdown{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin: 10px 0 8px;
}
.cd-box{
  flex: 1 1 90px;
  background: rgba(31,122,224,.06);
  border: 1px solid rgba(31,122,224,.14);
  border-radius: 16px;
  padding: 10px;
  text-align:center;
}
.cd-num{ font-size: 26px; font-weight: 1000; }
.cd-lbl{ font-size: 11px; font-weight: 900; color: var(--muted); letter-spacing:.06em; }

/* =========================
   ENLACES
========================= */
.links-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.links-col h3{ margin: 8px 0 10px; }

.link-chip{
  display:inline-block;
  margin: 6px 8px 0 0;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  color: var(--text);
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.link-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}

/* =========================
   COLABORADORES
========================= */
.collab-block{ margin-top: 8px; }
.collab-title{
  font-weight: 1000;
  letter-spacing:.06em;
  color: var(--muted);
  margin-bottom: 10px;
}

.collab-link{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  text-decoration:none;
}
.collab-link.big{ margin-bottom: 14px; }

.collab-logo.banner,
.colab-banner{
  width:100%;
  height:auto;
  display:block;
}

.colab-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.colaborador-bloque img{
  border-radius:14px;
  box-shadow: 0 8px 25px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}

.colaborador-bloque img:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0,0,0,.6);
}
.colaborador-bloque h3{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 1000;
  color: var(--muted);
}

/* =========================
   DESCARGAS
========================= */
.downloads-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

.dl-card{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 18px;
  text-decoration:none;
  color: var(--text);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 25px rgba(0,0,0,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.dl-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 35px rgba(0,0,0,.10);
}
.dl-ico{ font-size: 22px; }
.dl-title{ font-weight: 1000; }
.dl-sub{ color: var(--muted); font-weight: 700; font-size: 12px; }
.dl-size{ margin-left:auto; color: var(--muted); font-weight: 900; }

/* =========================
   CAMBALACHE
========================= */
.estado-disponible{
  display:inline-block;
  margin: 6px 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  background: rgba(30,180,90,.10);
  border: 1px solid rgba(30,180,90,.25);
  color: #1b7a44;
}

.venta-card{
  display:grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.venta-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
}

.venta-info h3{ margin: 0 0 8px; }
.venta-info ul{ margin:0; padding-left: 18px; color: var(--muted); font-weight: 800; }
.venta-info .precio{ color: var(--text); font-weight: 1000; }

.btn-wsp{
  display:block;
  text-align:center;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration:none;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color:#062012;
  font-weight: 800;
  border: 0;
}
/* =========================
   CONTACTA
========================= */
#contacta{
  margin-bottom: 40px;
}

.contact-box{
  background: rgba(8,12,35,.92);
  border: 1px solid rgba(0,255,255,.16);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 0 18px rgba(0,255,255,.08);
}

.full-width{
  grid-column: 1 / -1;
}

.contact-link{
  font-weight: 800;
  text-decoration: none;
  color: #00f5d4;
}

.contact-link:hover{
  text-shadow: 0 0 10px rgba(0,245,212,.55);
}

.socials{
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.social{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid rgba(0,255,255,.16);
  background: rgba(0,255,255,.06);
  box-shadow: 0 0 10px rgba(0,255,255,.08);
  font-weight: 700;
  transition: .25s ease;
}

.social:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,255,255,.22);
  border-color: rgba(0,255,255,.35);
}
/* FOOTER BIEN ALINEADO */
.footer{
  width: 100%;
  margin-top: 18px;
}
.footer-inner{
  display: block;
}

.footer-visits{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 700;
}

.footer-visits #contador{
  font-family: monospace;
  letter-spacing: 3px;
  color: #00ffe1;
}
.footer-copy{
  text-align: center;
}
.footer-copy a{
  white-space: nowrap;
}

.vis-ico{
  display: inline-flex;
  align-items: center;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position: static; }
  .content{ max-width: 100%; }
  .hero-futurista img{ max-width: 100%; height: 260px; }
  .grid-2, .links-grid, .downloads-grid, .colab-grid{ grid-template-columns: 1fr; }
  .venta-card{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction: column; align-items:flex-start; }
}
/* ✅ HERO: más “chato” pero SIN recortar el logo */
.hero-futurista{
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero-futurista img{
  width: 100%;
  max-width: 1200px;

  /* 👇 hace el banner menos alto SIN cortar */
  height: auto !important;

  /* opcional: si te sale “borde/sombra rara”, quítalo aquí */
  box-shadow: none !important;
  border: 0 !important;
  display: block;
}
/* =========================================
   OCHENTERO / SYNTHWAVE (sin tocar el logo)
   Pegar AL FINAL del styles.css
========================================= */

/* 1) Paleta ochentera */
:root{
  --bg-80: #070716;
  --panel-80: rgba(16, 18, 46, .72);
  --panel-80-2: rgba(10, 12, 32, .62);

  --neon-pink: #ff2bd6;
  --neon-blue: #2f80ff;
  --neon-cyan: #00e5ff;
  --neon-purple: #7a3cff;
  --neon-yellow: #ffd34a;

  --txt-80: #eaf2ff;
  --muted-80: rgba(234,242,255,.72);

  --border-80: rgba(0,229,255,.22);
  --shadow-80: 0 18px 50px rgba(0,0,0,.45);
}

/* 2) Fondo synthwave */
body{
  color: var(--txt-80) !important;
  background:
    radial-gradient(900px 520px at 80% 0%, rgba(255,43,214,.18), transparent 60%),
    radial-gradient(850px 520px at 10% 25%, rgba(0,229,255,.14), transparent 60%),
    radial-gradient(700px 480px at 60% 110%, rgba(122,60,255,.18), transparent 60%),
    linear-gradient(180deg, #050512 0%, var(--bg-80) 55%, #050512 100%) !important;
}

/* 3) Topbar más neón */
.topbar{
  background: linear-gradient(90deg, #1629ff, #2f80ff, #00e5ff) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}
.topbar-right{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(0,229,255,.35) !important;
  box-shadow: 0 0 0 1px rgba(255,43,214,.20), 0 10px 25px rgba(0,0,0,.35) !important;
}

/* 4) Sidebar / menú tipo “neón” */
.sidebox{
  background: var(--panel-80) !important;
  border: 1px solid rgba(0,229,255,.22) !important;
  box-shadow: var(--shadow-80) !important;
  backdrop-filter: blur(12px);
}
.sidebox-title{
  color: rgba(255,211,74,.85) !important;
  text-shadow:
  0 0 6px rgba(0,255,255,.9),
  0 0 14px rgba(0,255,255,.6),
  0 0 28px rgba(255,0,255,.45);
}
.sideitem{
  background: linear-gradient(
  90deg,
  #00f5ff,
  #ff2df7
) !important;
}
.sideitem:hover{
  background: rgba(0,229,255,.10) !important;
  border-color: rgba(0,229,255,.22) !important;
  transform: translateY(-1px);
  box-shadow:
  0 0 8px rgba(0,245,255,.6),
  0 0 16px rgba(255,0,255,.4) !important;
}
.sideitem.active{
  background: linear-gradient(90deg, rgba(255,43,214,.92), rgba(122,60,255,.88), rgba(0,229,255,.70)) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(0,229,255,.30),
    0 18px 36px rgba(0,0,0,.45),
    0 0 22px rgba(255,43,214,.25) !important;
}

/* 5) Cards “glass” con borde neón */
.card{
  background: var(--panel-80-2) !important;
  border: 1px solid rgba(0,229,255,.18) !important;
  box-shadow: var(--shadow-80) !important;
  backdrop-filter: blur(12px);
}
.card:hover{
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,43,214,.16),
    0 0 28px rgba(0,229,255,.12) !important;
}

/* Títulos y texto */
.section-title{
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(0,229,255,.18);
}
.muted, .mini-text, .dl-sub{
  color: var(--muted-80) !important;
}

/* 6) Etiquetas tipo “badge” neón (los botoncitos de la derecha) */
.breadcrumbs{
  color: rgba(234,242,255,.9) !important;
  background: rgba(0,229,255,.10) !important;
  border: 1px solid rgba(0,229,255,.22) !important;
  box-shadow: 0 0 18px rgba(0,229,255,.10);
}

/* 7) Note / cajas informativas */
.note{
  background: rgba(255,43,214,.08) !important;
  border: 1px solid rgba(255,43,214,.20) !important;
  color: rgba(234,242,255,.82) !important;
}

/* 8) Chips de enlaces (QRZ, HamAlert, etc.) */
.link-chip{
  color: #ffffff !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(0,229,255,.20) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
}
.link-chip:hover{
  border-color: rgba(255,43,214,.30) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.45),
    0 0 18px rgba(255,43,214,.14) !important;
}

/* 9) Descargas más “arcade” */
.dl-card{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(0,229,255,.18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.40) !important;
}
.dl-title{ color:#fff !important; }
.dl-size{ color: rgba(234,242,255,.70) !important; }

/* 10) Cambalache (tarjeta) */
.venta-card{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,43,214,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
}
.estado-disponible{
  background: rgba(34,197,94,.12) !important;
  border: 1px solid rgba(34,197,94,.30) !important;
  color: rgba(160,255,198,.95) !important;
  text-shadow: 0 0 14px rgba(34,197,94,.18);
}

/* Botón WhatsApp más neón */
.btn-wsp{
  background: linear-gradient(90deg, #22c55e, #00e5ff) !important;
  color: #06111a !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 0 18px rgba(0,229,255,.18) !important;
}

/* 11) Contacta / socials */
.contact-box{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(0,229,255,.16) !important;
}
.social{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(0,229,255,.18) !important;
  color: #fff !important;
}
.social:hover{
  border-color: rgba(255,43,214,.28) !important;
  box-shadow: 0 0 16px rgba(255,43,214,.14);
}

/* 12) Footer */
.footer-inner{
  border-top: 1px solid rgba(0,229,255,.18) !important;
  color: rgba(234,242,255,.70) !important;
}
/* ===== AFINADO OCHENTERO (mejor legibilidad) ===== */

/* Baja un poco el negro del fondo y mete más glow suave */
body{
  background:
    radial-gradient(900px 520px at 80% 0%, rgba(255,43,214,.14), transparent 62%),
    radial-gradient(850px 520px at 10% 25%, rgba(0,229,255,.12), transparent 62%),
    radial-gradient(700px 480px at 60% 110%, rgba(122,60,255,.14), transparent 62%),
    linear-gradient(180deg, #07071a 0%, #050514 55%, #07071a 100%) !important;
}

/* Cards: un poco más claras + borde neon más visible */
.card{
  background: rgba(18, 20, 52, .78) !important;
  border: 1px solid rgba(0,229,255,.24) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 26px rgba(0,229,255,.10) !important;
}

/* Texto dentro de “note” más legible */
.note{
  color: rgba(234,242,255,.88) !important;
  background: rgba(255,43,214,.10) !important;
  border: 1px solid rgba(255,43,214,.26) !important;
}

/* Badges (los de la derecha): más contraste y glow */
.breadcrumbs{
  color: rgba(255,255,255,.95) !important;
  background: rgba(0,229,255,.12) !important;
  border: 1px solid rgba(0,229,255,.30) !important;
  box-shadow: 0 0 22px rgba(0,229,255,.14) !important;
}

/* Sidebar: que se lea mejor el título y menú */
.sidebox-title{
  color: rgba(255,211,74,.92) !important;
  text-shadow: 0 0 18px rgba(255,211,74,.22) !important;
}
.sideitem{
  color: rgba(234,242,255,.92) !important;
}

/* Chips de enlaces: un pelín más “arcade” */
.link-chip{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(0,229,255,.24) !important;
}
/* ===== TITULOS OCHENTEROS ===== */
.card h2,
.card h3 {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00e5ff, #ff2bd6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 12px rgba(0,229,255,.4),
    0 0 22px rgba(255,43,214,.3);
}
.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #00e5ff, #ff2bd6, #ffcc00);
  opacity: .6;
}
body{
  background:
    radial-gradient(circle at 20% 30%, rgba(0,229,255,.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,43,214,.18), transparent 40%),
    linear-gradient(180deg, #060617 0%, #0a0830 50%, #150025 100%);
}
.card{
  backdrop-filter: blur(6px);
  border-radius: 16px;
  border: 1px solid rgba(0,229,255,.25);
  box-shadow:
    0 0 25px rgba(0,229,255,.12),
    0 0 60px rgba(255,43,214,.08);
}
/* ===== HERO SIN FRANJA LATERAL ===== */

.hero-futurista{
  margin-left: -24px;   /* ajusta si hace falta */
  margin-right: -24px;
}
.content{
  width: 100%;
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}
/* =========================================
   QUITAR BLANCO DEL BANNER (sin tocar imagen)
   Pegar al FINAL del styles.css
========================================= */
.hero-futurista{
  background: #070018;     /* mismo rollo oscuro ochentero */
  border-radius: 26px;
  overflow: hidden;        /* clave para esconder bordes/huecos */
  padding: 0 !important;
}

/* Banner sin “huecos” */
.hero-futurista img{
  display: block;
  width: 100% !important;
  height: auto !important;

  /* si sale franja blanca, suele ser borde del propio PNG/JPG:
     recortamos 2px por la izquierda SIN tocar el archivo */
  clip-path: inset(0 0 0 2px);

  /* opcional: un pelín de zoom para comerse bordes finos */
  transform: scale(1.01);
}
/* ===== HERO LIMPIO SIN FRANJAS ===== */

.hero-futurista{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;      /* importante */
  border-radius: 26px;
  overflow: hidden;              /* clave */
}

.hero-futurista img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.hero-futurista img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.01);   /* se come 1px de borde */
}
.hero-futurista img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.01);   /* se come 1px de borde */
}
.hero-futurista img{
  clip-path: inset(0 0 0 2px);
}
/* Quitar efecto blanco en imágenes internas */
.card img{
  display:block;
  background:#070018;     /* mismo fondo oscuro */
  border-radius:18px;
}
.card img{
  display:block;
  border-radius:18px;
  background:#070018;
  mix-blend-mode: lighten;   /* integra blancos claros */
}
.card img{
  border-radius:18px;
  box-shadow:
    0 0 20px rgba(0,229,255,.15),
    0 0 40px rgba(255,43,214,.08);
}
/* ==========================================
   PARCHE OCHENTERO: PANEL NEON INTEGRADO
   (pegar al FINAL del styles.css)
========================================== */

/* 1) Cards más compactas y sin “cortes” entre ellas */
.card{
  margin-bottom: 12px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 255, 255, .18) !important;
  background: linear-gradient(180deg, rgba(10,10,35,.78), rgba(12, 6, 35, .66)) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.38),
    0 0 0 1px rgba(255, 0, 230, .08) inset !important;
  backdrop-filter: blur(10px);
}

/* 2) “Glow” fino (sin líneas que corten) */
.card::after{
  content:"";
  display:block;
  height: 1px;
  margin-top: 14px;
  opacity: .55;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,229,255,.25),
    rgba(255,43,214,.22),
    transparent);
  border-radius: 999px;
}

/* Si NO quieres ninguna línea, comenta el bloque .card::after completo */

/* 3) Títulos más ochenteros */
.section-title{
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  text-transform: none;
  text-shadow:
    0 0 10px rgba(0,229,255,.20),
    0 0 18px rgba(255,43,214,.14);
}

/* 4) La pastilla de la derecha (breadcrumbs) más neon */
.breadcrumbs{
  background: rgba(0,229,255,.10) !important;
  border: 1px solid rgba(0,229,255,.22) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: 0 0 18px rgba(0,229,255,.10);
}

/* 5) Las “notes” (cajitas dentro) más integradas */
.note{
  background: rgba(255, 0, 230, .08) !important;
  border: 1px solid rgba(255, 0, 230, .18) !important;
  color: rgba(255,255,255,.78) !important;
  border-radius: 16px !important;
}

/* 6) El bloque gris de "Próximamente" (si usa mini-card) -> modo dark */
.mini-card{
  background: rgba(8, 10, 30, .55) !important;
  border: 1px solid rgba(0,229,255,.16) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.25) !important;
}

/* 7) Chips (Enlaces) más synthwave */
.link-chip{
  background: rgba(0,229,255,.08) !important;
  border: 1px solid rgba(0,229,255,.20) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: 0 0 0 1px rgba(255,43,214,.08) inset;
}
.link-chip:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 22px rgba(0,229,255,.14);
}

/* 8) Ajuste móvil: menos aire todavía */
@media (max-width: 700px){
  .card{ padding: 14px !important; margin-bottom: 10px !important; }
  .section-title{ font-size: 18px !important; }
  .card::after{ margin-top: 12px; }
}
/* ==========================
   OCHENTERO: TITULOS + CARDS
========================== */

/* Cards con borde neón y glow */
.card{
  position: relative;
  background: rgba(8, 10, 26, .72);
  border: 1px solid rgba(0,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg,
    rgba(0,255,255,.55),
    rgba(255,0,255,.45),
    rgba(255,180,0,.35)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* Unifica TODOS los h2/h3 dentro de cards (incluye “ENLACES”) */
.card h2, .card h3, .section-title{
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 950;
  color: #eaf7ff;
  text-shadow:
    0 0 10px rgba(0,255,255,.35),
    0 0 18px rgba(255,0,255,.25);
}

/* Línea neón debajo del título */
.card h2::after, .section-title::after{
  content:"";
  display:block;
  height: 3px;
  width: 140px;
  margin-top: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, #00f5ff, #ff2df7, #ffb200);
  box-shadow: 0 0 18px rgba(0,245,255,.25);
}

/* “Note” dentro de cards más ochentero */
.note{
  background: linear-gradient(90deg, rgba(255,0,255,.12), rgba(0,255,255,.10));
  border: 1px solid rgba(0,255,255,.14);
  color: rgba(235, 245, 255, .85);
}
/* ==================================
   TITULOS NEON UNIFICADOS (TODOS)
   Pegar al FINAL del styles.css
================================== */

/* 1) Asegura que los h2/h3 dentro de .card se ven IGUAL */
.card h2,
.card h3,
.section-title{
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 950 !important;
  color: #8ff7ff !important;   /* cian neón */
  text-shadow:
    0 0 10px rgba(0,255,255,.35),
    0 0 18px rgba(255,0,255,.22) !important;
}

/* 2) Subrayado neón igual para todos */
.card h2::after,
.card h3::after,
.section-title::after{
  content:"" !important;
  display:block !important;
  height: 3px !important;
  width: 160px !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #00f5ff, #ff2df7, #ffb200) !important;
  box-shadow: 0 0 18px rgba(0,245,255,.25) !important;
}

/* 3) Si tenías reglas raras SOLO para “ENLACES”, las neutralizamos */
.card .section-title,
.card h2,
.card h3{
  font-size: 16px !important;  /* si los quieres más grandes: 18px */
}

/* 4) En móvil que no se rompa el ancho del subrayado */
@media (max-width: 520px){
  .card h2::after,
  .card h3::after,
  .section-title::after{
    width: 120px !important;
  }
}
/* =====================================
   UNIFICAR TODOS LOS TITULOS PRINCIPALES
===================================== */

/* Títulos principales dentro de cards */
.card > h2,
.card > h3,
.card .section-title{
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
  font-size: 16px !important;

  color: #00f5ff !important; /* mismo azul neón que ENLACES */

  text-shadow:
    0 0 8px rgba(0,245,255,.6),
    0 0 18px rgba(255,0,255,.35) !important;
}

/* Subrayado neón EXACTO */
.card > h2::after,
.card > h3::after,
.card .section-title::after{
  content:"" !important;
  display:block !important;
  height: 3px !important;
  width: 160px !important;
  margin-top: 8px !important;
  border-radius: 99px !important;

  background: linear-gradient(90deg,
    #00f5ff,
    #ff2df7,
    #ffb200
  ) !important;

  box-shadow: 0 0 15px rgba(0,245,255,.35) !important;
}
/* ================================
   AFINADO TITULOS NEON (UNIFORME)
================================ */

/* ancho del subrayado igual en todos */
.card > h2::after,
.card > h3::after,
.card .section-title::after{
  width: 140px !important;     /* ajusta: 120 / 140 / 160 */
  margin-top: 10px !important; /* separación igual */
  opacity: .95 !important;
}

/* mismo tamaño y “peso” en todos */
.card > h2,
.card > h3,
.card .section-title{
  font-size: 15px !important;  /* ajusta: 14/15/16 */
  line-height: 1.15 !important;
}
/* subtítulos dentro de ENLACES (más pequeños, pero neón suave) */
.links-col h3{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  font-size: 12px;
  color: rgba(0,245,255,.9);
  text-shadow: 0 0 8px rgba(0,245,255,.35);
}
/* ================================
   MENÚ OCHENTERO EQUILIBRADO
================================ */

/* Botones normales */
.sideitem{
  background: rgba(0,0,30,.6);
  border: 1px solid rgba(0,255,255,.2);
  transition: all .25s ease;
}

/* Hover */
.sideitem:hover{
  background: linear-gradient(90deg,#00f5ff,#ff2df7);
  color:#000;
  box-shadow: 0 0 12px rgba(0,245,255,.5);
}

/* Activo */
.sideitem.active{
  background: linear-gradient(90deg,#00f5ff,#ff2df7);
  color:#000;
  box-shadow:
    0 0 14px rgba(0,245,255,.8),
    0 0 24px rgba(255,0,255,.6);
}
/* =====================================================
   MENÚ: solo el ACTIVO con degradado, el resto oscuro
   (a prueba de prioridades)
===================================================== */

/* Botón NORMAL */
.sidebar .sideitem{
  background: rgba(5,10,25,.55) !important;
  border: 1px solid rgba(0,255,255,.18) !important;
  color: rgba(230,245,255,.92) !important;
  box-shadow: none !important;
}

/* Hover: un toque, pero no “neón a saco” */
.sidebar .sideitem:hover{
  background: linear-gradient(90deg, rgba(0,245,255,.85), rgba(255,45,247,.85)) !important;
  color:#061018 !important;
  box-shadow: 0 0 10px rgba(0,245,255,.35) !important;
}

/* ACTIVO */
.sidebar .sideitem.active{
  background: linear-gradient(90deg, #00f5ff, #ff2df7) !important;
  color:#061018 !important;
  border-color: rgba(0,255,255,.55) !important;
  box-shadow:
    0 0 12px rgba(0,245,255,.55),
    0 0 22px rgba(255,45,247,.35) !important;
}
/* =========================
   MENU: brillo ochentero sutil (solo ACTIVO)
   ========================= */

.sidebar .sideitem{
  position: relative;
  overflow: hidden; /* para que el brillo no se salga */
}

/* brillo que cruza de izquierda a derecha */
.sidebar .sideitem.active::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-60%;
  width:50%;
  height:160%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.22) 40%,
    rgba(255,255,255,.08) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  filter: blur(.2px);
  animation: shinePass 3.2s ease-in-out infinite;
  pointer-events:none;
  opacity:.75;
}

/* un pelín de “glow” para que parezca neon */
.sidebar .sideitem.active{
  box-shadow:
    0 0 0 1px rgba(0, 220, 255, .22),
    0 10px 26px rgba(0, 220, 255, .12);
}

@keyframes shinePass{
  0%   { left:-70%; opacity:0; }
  12%  { opacity:.75; }
  45%  { left:130%; opacity:.55; }
  46%  { opacity:0; }
  100% { left:130%; opacity:0; }
}

/* Si alguien tiene "reducir movimiento", lo respetamos */
@media (prefers-reduced-motion: reduce){
  .sidebar .sideitem.active::after{ animation: none; opacity: 0; }
}
/* Colaboradores: grid y tarjetas iguales */
.colab-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.colaborador-bloque{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,255,255,.18);
  border-radius: 18px;
  padding: 14px;
}

/* Las imágenes dentro, mismo alto visual */
.colab-banner{
  width: 100%;
  height: 160px;          /* ajusta: 150-200 si quieres */
  object-fit: contain;    /* NO recorta, encaja */
  display:block;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  padding: 10px;
}

/* Responsive: en móvil una debajo de otra */
@media (max-width: 860px){
  .colab-grid{ grid-template-columns: 1fr; }
}
/* LOCURA DIGITAL más estrecho y centrado */
.collab-link.big{
  display:flex;
  justify-content:center;
}

.collab-logo.banner{
  width: 85%;       /* prueba 80–90 según lo quieras */
  max-width: 900px; /* evita que crezca demasiado */
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .25s ease;
}

.collab-logo.banner:hover{
  transform: translateY(-4px);
}
.collab-link.big{
  display:flex;
  justify-content:center;
}

.collab-logo.banner{
  width: 92%;
}
/* --- COLABORADORES: Locura Digital con el mismo ancho visual que el grid inferior --- */
.collab-link.big{
  display:flex;
  justify-content:center;
}

.collab-logo.banner{
  width: calc(100% - 24px);   /* mismo “aire” que las cards */
  max-width: 980px;           /* ajusta si lo quieres aún más estrecho */
  height: auto;
  border-radius: 18px;
  display:block;
}
/* Locura Digital alineado con las tarjetas inferiores */
.collab-link.big{
  display:flex;
  justify-content:center;
  padding: 0 18px;   /* mismo aire lateral que las cards */
}

.collab-logo.banner{
  width: 100%;
  border-radius: 16px;
}
.collab-link.big{
  padding: 0 40px;
}
/* Más estrecho (y centrado) */
.collab-link.big{
  display:flex;
  justify-content:center;
  padding: 0 60px;   /* prueba 40 / 60 / 80 */
}
.collab-logo.banner{
  border: 1px solid rgba(0,255,255,.22);
  box-shadow: 0 0 18px rgba(0,255,255,.10);
}
/* Ajuste real del banner Locura Digital */
.collab-link.big{
  display: block;
  max-width: 900px;   /* 👈 aquí controlas el ancho real */
  margin: 0 auto;     /* lo centra */
}

.collab-logo.banner{
  width: 100%;
  border-radius: 16px;
}
/* Forzar ancho real más estrecho */
.collab-link.big{
  display:flex;
  justify-content:center;
}

.collab-logo.banner{
  width: 75%;        /* 👈 AQUÍ está el cambio real */
  border-radius:16px;
}
.collab-logo.banner{ width: 65%; }
/* Hacer más ancha la imagen de Federación */
.colab-grid .colaborador-bloque:nth-child(2) img{
  width: 85%;   /* prueba 85% */
}
/* Federación más ancha */
.colab-grid .colaborador-bloque:nth-child(2) .colab-banner{
  width: 95%;
}
/* Zoom interno Federación */
.colab-grid .colaborador-bloque:nth-child(2) .colab-banner{
  transform: scale(1.15);
}
.colab-banner{
  width: 100%;
  border-radius: 14px;
}
.colaborador-bloque{
  transition: transform .2s ease, box-shadow .2s ease;
}

.colaborador-bloque:hover{
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(0,255,255,.15);
}
/* EMAIL CONTACTO MÁS VISIBLE */
.contacta-email a,
.contacta a[href^="mailto"]{
  font-size: 20px;              /* más grande */
  font-weight: 700;
  color: #00ffe1;               /* turquesa neón */
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: all .2s ease;
}

/* Hover elegante */
.contacta-email a:hover,
.contacta a[href^="mailto"]:hover{
  color: #ffffff;
  text-shadow: 0 0 10px #00ffe1;
}
/* EMAIL CONTACTO DESTACADO */
#contacta a[href^="mailto"]{
  font-size: 21px;          /* más grande */
  font-weight: 700;
  color: #00ffe5;           /* turquesa neón */
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all .25s ease;
}

/* Hover efecto glow */
#contacta a[href^="mailto"]:hover{
  color: #ffffff;
  text-shadow: 0 0 12px #00ffe5;
}
#contacta a[href^="mailto"]{
  background: rgba(0,255,229,0.08);
  padding: 6px 12px;
  border-radius: 8px;
}
.socials{
  display:flex;
  flex-direction:row;
  gap:15px;
  margin-top:12px;
}

/* Colores oficiales */
.facebook{ background:#1877f2; }
.instagram{ background:#e4405f; }
.youtube{ background:#ff0000; }
.x{ background:#000000; }
/* =========================
   DESCARGAS (NUEVO)
========================= */

.downloads .muted{ margin-top: 4px; }

.downloads-toolbar{
  display:flex;
  gap: 12px;
  align-items:center;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}

.dl-search{
  flex: 1 1 320px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,229,255,.22);
  background: rgba(0,0,0,.22);
  color: rgba(235,245,255,.92);
  outline: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.dl-search::placeholder{
  color: rgba(235,245,255,.55);
}

.dl-hints{
  color: rgba(235,245,255,.60);
  font-weight: 700;
  font-size: 12px;
}

.downloads-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dl2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 18px;
  text-decoration:none;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(0,229,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.40);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dl2:hover{
  transform: translateY(-2px);
  border-color: rgba(255,43,214,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 18px rgba(0,229,255,.12);
}

.dl2-left{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.dl2-ico{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(255,43,214,.14));
  border: 1px solid rgba(0,229,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  font-size: 20px;
}

.dl2-meta{ min-width: 0; }
.dl2-title{
  font-weight: 950;
  letter-spacing: .04em;
  color: rgba(235,245,255,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl2-sub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(235,245,255,.60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl2-right{ display:flex; gap: 10px; align-items:center; }
.dl2-tag{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(235,245,255,.88);
  background: rgba(0,229,255,.10);
  border: 1px solid rgba(0,229,255,.18);
}

.dl2-btn{
  font-weight: 950;
  padding: 8px 12px;
  border-radius: 12px;
  color: #061018;
  background: linear-gradient(90deg, #00f5ff, #ff2df7);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.dl2-footer{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,229,255,.20);
}
.dl2-tip{
  color: rgba(235,245,255,.62);
  font-weight: 700;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .downloads-grid2{ grid-template-columns: 1fr; }
}
/* =========================
   BIENVENIDA
========================= */

.bienvenida{
  margin:20px 0;
  padding:25px;
  border-radius:16px;

  background: linear-gradient(
    135deg,
    rgba(30,10,60,0.85),
    rgba(10,5,40,0.9)
  );

  border:1px solid rgba(0,200,255,0.25);

  box-shadow:
    0 0 20px rgba(0,180,255,0.15),
    inset 0 0 20px rgba(0,0,0,0.4);

  color:#e8f7ff;
}

/* Título */

.bienvenida h2{
  color:#00eaff;
  margin-bottom:15px;
  font-size:24px;
  letter-spacing:1px;
}

/* Texto */

.bienvenida p{
  margin-bottom:10px;
  line-height:1.6;
  color:#d6eaff;
}

/* Frase final */

.frecuencia{
  margin-top:15px;
  font-size:18px;
  color:#ffd86b;
}
/* =========================
   BANDAS DE EMISION
========================= */

.bandas{
display:flex;
gap:30px;
padding:10px 0;
}

.banda{
background:linear-gradient(135deg,#0b0b35,#1a0033);
padding:15px 25px;
border-radius:12px;
border:1px solid rgba(0,200,255,0.3);
box-shadow:0 0 15px rgba(0,200,255,0.2);
font-size:16px;
}

.banda strong{
color:#00eaff;
font-size:18px;
}

.banda span{
font-size:20px;
color:#ffd86b;
font-weight:bold;
}
/* =========================
   BIENVENIDA (PRO)
========================= */
.bienvenida{
  margin:20px 0;
  padding:22px 22px 18px;
  border-radius:18px;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(0,200,255,.18), transparent 55%),
    radial-gradient(900px 260px at 90% 0%, rgba(255,0,200,.14), transparent 55%),
    linear-gradient(135deg, rgba(14,10,40,.92), rgba(10,6,34,.95));
  border:1px solid rgba(0,200,255,.22);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 22px rgba(0,200,255,.10);
  color:#e8f7ff;
}

.bien-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}

.bien-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.bien-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: rgba(0,200,255,.10);
  border:1px solid rgba(0,200,255,.25);
  box-shadow: inset 0 0 18px rgba(0,200,255,.10);
  font-size:20px;
}

.bien-title h2{
  margin:0;
  font-size:22px;
  letter-spacing:.5px;
  color:#00eaff;
}

.bien-sub{
  margin:2px 0 0;
  font-size:13px;
  color: rgba(232,247,255,.75);
}

.bien-badge{
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  color:#c8f7ff;
  background: rgba(0,200,255,.10);
  border:1px solid rgba(0,200,255,.22);
  white-space:nowrap;
}

/* Texto en 2 columnas en pantallas grandes */
.bien-body{
  line-height:1.7;
  color: rgba(232,247,255,.88);
  font-size:15px;
}

.bien-body p{ margin: 0 0 10px; }

@media (min-width: 900px){
  .bien-body{
    columns: 2;
    column-gap: 26px;
  }
  .bien-body p{
    break-inside: avoid;
  }
}

.bien-footer{
  display:flex;
  justify-content:flex-start;
  padding-top:10px;
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,.08);
}

.bien-pill{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  color:#ffd86b;
  background: rgba(255,216,107,.08);
  border:1px solid rgba(255,216,107,.25);
  box-shadow: 0 0 16px rgba(255,216,107,.10);
}
/* DESCARGAS MEJORADAS */
.downloads-grid2{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.dl2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dl2:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
  border-color:rgba(42,144,255,.35);
}

.dl2-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.dl2-thumb{
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 64px;
  background:transparent;   /* 👈 CAMBIO */
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.dl2-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;  /* 👈 IMPORTANTE (mejor que cover) */
  display:block;
  filter: drop-shadow(0 0 6px #00eaff);
}

.dl2-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dl2-meta{
  min-width:0;
}

.dl2-title{
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  margin-bottom:4px;
}

.dl2-sub{
  font-size:.92rem;
  color:var(--muted);
  word-break:break-word;
}

.dl2-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.dl2-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  background:rgba(42,144,255,.12);
  border:1px solid rgba(42,144,255,.25);
}

.dl2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:.92rem;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
}

.downloads-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:14px 0 18px;
}

.dl-search{
  flex:1 1 280px;
  min-width:220px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}

.dl-search:focus{
  border-color:rgba(42,144,255,.45);
  box-shadow:0 0 0 3px rgba(42,144,255,.12);
}

.dl-hints{
  font-size:.92rem;
  color:var(--muted);
}

@media (max-width: 760px){
  .dl2{
    flex-direction:column;
    align-items:flex-start;
  }

  .dl2-right{
    width:100%;
    justify-content:flex-start;
  }
}
.footer{
  margin-top:20px;
  padding:18px 20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.12);
  color:#cfd8ff;
  font-size:14px;
}

.footer a{
  color:#3fd0ff;
  text-decoration:none;
  font-weight:500;
}

.footer a:hover{
  text-decoration:underline;
}
.footer-copy a{
  color:#22d3ee;
  text-decoration:none;
  font-weight:500;
}

.footer-copy a:hover{
  text-decoration:underline;
  color:#38bdf8;
}
.footer-copy{
  text-align:right;
  line-height:1.6;
}

.footer-copy a{
  color:#3fd0ff;
  text-decoration:none;
  font-weight:500;
}

.footer-copy a:hover{
  text-decoration:underline;
}
/* BANNER DE COOKIES */
.cookie-banner{
  position:fixed;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(63,208,255,.25);
  background:linear-gradient(135deg, rgba(6,10,35,.96), rgba(22,8,46,.96));
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
}

.cookie-banner[hidden]{
  display:none !important;
}

.cookie-banner__text{
  color:#dbeafe;
  font-size:.95rem;
  line-height:1.5;
}

.cookie-banner__text a{
  color:#22d3ee;
  text-decoration:none;
  font-weight:600;
}

.cookie-banner__text a:hover{
  text-decoration:underline;
}

.cookie-banner__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.cookie-btn{
  border:none;
  padding:10px 16px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg, #1f7ae0, #22d3ee);
  box-shadow:0 8px 20px rgba(34,211,238,.22);
}

.cookie-btn:hover{
  filter:brightness(1.06);
}

@media (max-width: 760px){
  .cookie-banner{
    flex-direction:column;
    align-items:flex-start;
  }

  .cookie-banner__actions{
    width:100%;
  }

  .cookie-btn{
    width:100%;
  }
}
/* =========================
   MAPA DE ACTIVACIONES
========================= */

.mapa-box{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(63,208,255,.16);
  box-shadow:var(--shadow-soft);
  background:rgba(255,255,255,.03);
}

.mapa-box iframe{
  width:100%;
  height:380px;
  border:0;
  display:block;
  border-radius:18px;
  filter:contrast(1.05) brightness(.95);
}

.mapa-nota{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}

.mapa-link{
  margin-top:10px;
}

.mapa-link a{
  display:inline-block;
  padding:8px 14px;
  border-radius:10px;
  text-decoration:none;
  font-size:.9rem;
  color:white;
  background:linear-gradient(135deg,#1f7ae0,#22d3ee);
  box-shadow:0 4px 14px rgba(34,211,238,.3);
  transition:.2s;
}

.mapa-link a:hover{
  transform:translateY(-2px);
  filter:brightness(1.1);
}
/* =========================
   ACTIVACIONES DEL CLUB
========================= */

.act-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:16px;
}

.act-card{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(63,208,255,.16);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-soft);
}

.act-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.act-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#1f7ae0,#22d3ee);
}

.act-badge.done{
  background:linear-gradient(135deg,#00b86b,#20e3b2);
}

.act-date{
  font-size:.82rem;
  color:var(--muted);
}

.act-title{
  margin:0 0 10px;
  font-size:1.05rem;
  color:#fff;
}

.act-meta{
  margin:0 0 6px;
  color:#cbd5e1;
  font-size:.92rem;
}

.act-text{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.5;
}
/* =========================
   QSL Y DIPLOMAS
========================= */
.qsl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;
  margin-top:18px;
  align-items:stretch;
}
.qsl-card{
overflow:hidden;
border-radius:20px;
border:1px solid rgba(63,208,255,.16);
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
box-shadow:var(--shadow-soft);
display:flex;
flex-direction:column;
}

.qsl-card:hover{
 transform:translateY(-4px);
 box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.qsl-thumb{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qsl-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}


.qsl-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.qsl-title{
  margin:0 0 10px;
  font-size:1.15rem;
  color:#19d7ff;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.qsl-text{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.97rem;
  line-height:1.6;
  flex:1;
}
.qsl-btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:12px;
  background:linear-gradient(90deg,#00c6ff,#0072ff);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:.3s ease;
}
.qsl-card{
  animation:fadeUp .8s ease both;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.qsl-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,180,255,.35);
}

/* =========================
   ACTIVACIONES DEL CLUB
========================= */

.act-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:16px;
}

.act-card{
  position:relative;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(63,208,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(14,22,65,.88), rgba(28,8,52,.88));
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
}

.act-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(34,211,238,.08), transparent 28%, transparent 72%, rgba(168,85,247,.08));
  pointer-events:none;
}

.act-card:hover{
  transform:translateY(-4px);
  border-color:rgba(63,208,255,.32);
  box-shadow:
    0 16px 38px rgba(0,0,0,.28),
    0 0 18px rgba(34,211,238,.10);
}

.act-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.act-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
  background:linear-gradient(135deg,#1f7ae0,#22d3ee);
  box-shadow:0 6px 18px rgba(34,211,238,.22);
}

.act-badge.done{
  background:linear-gradient(135deg,#00b86b,#20e3b2);
  box-shadow:0 6px 18px rgba(32,227,178,.20);
}

.act-badge.prep{
  background:linear-gradient(135deg,#ff8a00,#ffd166);
  color:#1b1030;
  box-shadow:0 6px 18px rgba(255,173,51,.20);
}

.act-date{
  font-size:.82rem;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}

.act-title{
  margin:0 0 10px;
  font-size:1.12rem;
  line-height:1.2;
  color:#ffffff;
  text-shadow:0 0 10px rgba(34,211,238,.08);
}

.act-meta{
  margin:0 0 7px;
  color:#dbe7ff;
  font-size:.93rem;
}

.act-text{
  margin:12px 0 0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.55;
}

/* línea decorativa bajo el título */
.act-title::after{
  content:"";
  display:block;
  width:86px;
  height:3px;
  margin-top:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#f59e0b);
  box-shadow:0 0 12px rgba(34,211,238,.22);
}

@media (max-width: 760px){
  .act-grid{
    grid-template-columns:1fr;
  }
}
/* =========================
   ICONO RADIO ACTIVACIONES
========================= */

.radio-icon{
  display:inline-block;
  margin-right:6px;
  animation:radioBlink 2s infinite;
}

@keyframes radioBlink{

  0%{
    opacity:1;
    transform:scale(1);
    text-shadow:0 0 4px #22d3ee;
  }

  50%{
    opacity:.6;
    transform:scale(1.15);
    text-shadow:0 0 12px #22d3ee;
  }

  100%{
    opacity:1;
    transform:scale(1);
    text-shadow:0 0 4px #22d3ee;
  }

}
/* icono radio animado */

.radio-icon{
  display:inline-block;
  margin-right:6px;
  animation:radioPulse 2s infinite;
}

@keyframes radioPulse{

  0%{
    transform:scale(1);
    text-shadow:0 0 4px #22d3ee;
  }

  50%{
    transform:scale(1.2);
    text-shadow:0 0 14px #22d3ee;
  }

  100%{
    transform:scale(1);
    text-shadow:0 0 4px #22d3ee;
  }

}
/* =========================
   ESTADÍSTICAS CLUB
========================= */

.stats-club{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:18px;
  margin-top:18px;
}

.stat-box{
  text-align:center;
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(63,208,255,.16);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-soft);
  transition:.25s;
}

.stat-box:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.stat-num{
  font-size:34px;
  font-weight:800;
  color:#22d3ee;
  text-shadow:0 0 12px rgba(34,211,238,.5);
}

.stat-label{
  margin-top:6px;
  font-size:.9rem;
  color:var(--muted);
}
.qsl-img{
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.qsl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;
  margin-top:18px;
  align-items:stretch;
}

.qsl-card{
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(63,208,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  min-height:460px;
}
.qsl-thumb{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(34,211,238,.10), transparent 60%),
    rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.qsl-thumb img{
  width:100%;
  height:auto;
  display:block;
}

.qsl-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.qsl-title{
  margin:0 0 10px;
  font-size:1.15rem;
  color:#19d7ff;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.qsl-text{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.97rem;
  line-height:1.6;
  flex:1;
}

.qsl-btn{
  display:inline-block;
  align-self:flex-start;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#1f7ae0,#22d3ee);
  box-shadow:0 6px 18px rgba(34,211,238,.22);
  transition:.2s;
}

.qsl-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
  margin-top:20px;
}

.stat-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(63,208,255,.16);
  border-radius:16px;
  padding:20px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.stat-number{
  font-size:2.2rem;
  font-weight:800;
  color:#22d3ee;
  margin-bottom:8px;
  text-shadow:0 0 8px rgba(34,211,238,.6);
}
.stat-label{
  font-size:.95rem;
  color:#b9e6ff;
  font-weight:500;
}
.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,.45);
}
.stat-number{
  font-size:26px;
  font-weight:700;
  color:#22d3ee;
}
.stat-label{
  font-size:14px;
  color:#cfefff;
}
.downloads-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:16px;
}
.downloads-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:14px;
}
.downloads-grid2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

@media (max-width:900px){
  .downloads-grid2{
    grid-template-columns:1fr;
  }
}
.dl2{
  transition:0.25s;
}

.dl2:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
/* ===== MEJORAS VISUALES ===== */

.qsl-card,
.stat-card,
.contact-box,
.dl2{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.qsl-card:hover,
.stat-card:hover,
.contact-box:hover,
.dl2:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  border-color: rgba(63,208,255,.28);
}

/* Botones */

.qsl-btn,
.dl2-btn{
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.qsl-btn:hover,
.dl2-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(34,211,238,.28);
}
/* =========================
   EFECTOS VISUALES FINALES
========================= */

/* Animación suave en tarjetas */
.card,
.qsl-card,
.stat-card,
.contact-box,
.dl2{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover,
.qsl-card:hover,
.stat-card:hover,
.contact-box:hover,
.dl2:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
  border-color: rgba(63,208,255,.35);
}

/* Botones */
.qsl-btn,
.dl2-btn,
button{
  transition: all .2s ease;
}

.qsl-btn:hover,
.dl2-btn:hover,
button:hover{
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 8px 20px rgba(34,211,238,.35);
}

/* Menú lateral efecto hover */
.sideitem{
  transition: all .2s ease;
}

.sideitem:hover{
  transform: translateX(4px);
  box-shadow: 0 0 10px rgba(0,255,255,.15);
}

/* Imágenes más limpias */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Scroll suave */
html{
  scroll-behavior:smooth;
}
/* =========================
   AJUSTES FINALES WEB
========================= */

/* Mejor separación entre secciones */
.card{
  margin-bottom:28px;
}

/* Tarjetas más suaves */
.card{
  border-radius:16px;
}

/* Imágenes dentro de tarjetas */
.card img{
  border-radius:12px;
}

/* Botones */
.qsl-btn,
.dl2-btn{
  border-radius:10px;
  font-weight:600;
}

/* Títulos de sección */
.section-title{
  letter-spacing:.5px;
  font-weight:600;
}

/* Menú lateral más suave */
.sidebar{
  backdrop-filter: blur(8px);
}

/* Scroll suave */
html{
  scroll-behavior:smooth;
}
.layout{
  max-width:1400px;
  margin:auto;
}
.hero img{
  transition: transform .4s ease;
}

.hero img:hover{
  transform: scale(1.02);
}
.sidebar{
  position:sticky;
  top:80px;
}
.card{
  margin-bottom:30px;
}
.section-title{
  letter-spacing:1px;
  font-weight:700;
}
.sidebar{
  position:sticky;
  top:70px;
}
.section-title{
  text-shadow:
  0 0 5px rgba(0,255,255,.5),
  0 0 10px rgba(0,255,255,.4),
  0 0 20px rgba(0,255,255,.3);
}
.hero img{
  transition: transform .5s ease;
}

.hero img:hover{
  transform: scale(1.03);
}
button,
.qsl-btn,
.dl2-btn{
  border-radius:12px;
  font-weight:600;
}

button:hover,
.qsl-btn:hover,
.dl2-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,255,255,.25);
}
html{
  scroll-behavior:smooth;
}
/* =========================
   MEJORAS VISUALES WEB
========================= */

/* Títulos con efecto neon */
.section-title{
  text-shadow:
  0 0 6px rgba(0,255,255,.6),
  0 0 12px rgba(0,255,255,.5),
  0 0 22px rgba(0,255,255,.4);
}

/* Animación banner principal */
.hero img{
  transition: transform .5s ease;
}

.hero img:hover{
  transform: scale(1.03);
}

/* Botones modernos */
button,
.qsl-btn,
.dl2-btn{
  border-radius:12px;
  font-weight:600;
  transition: all .25s ease;
}

button:hover,
.qsl-btn:hover,
.dl2-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,255,255,.25);
}

/* Scroll suave */
html{
  scroll-behavior:smooth;
}
section{
  margin-bottom:30px;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  transition:all .3s ease;
}
/* COMPACTAR ESPACIOS WEB */
main{
padding-top:10px;
}

section{
margin-bottom:20px;
}
.hero{
margin-bottom:10px;
}
.card{
padding:18px;
}
.card:hover{
transform:translateY(-3px);
transition:0.3s;
}
.hero{
margin-bottom:8px;
}
.card{
margin-top:10px;
}
.sidebar{
margin-top:10px;
}
.hero{
margin-top:5px;
margin-bottom:8px;
}
.hero img{
transition:transform .4s ease;
}

.hero img:hover{
transform:scale(1.02);
}
.hero{
margin-top:4px;
margin-bottom:6px;
}
.hero img{
box-shadow:0 10px 40px rgba(0,0,0,0.4);
}
.hero img{
transition:transform .4s ease;
}

.hero img:hover{
transform:scale(1.02);
}
/* ONDAS DE RADIO ANIMADAS */

.hero{
position:relative;
}

.hero::after{
content:"";
position:absolute;
top:35%;
left:50%;
width:40px;
height:40px;
border-radius:50%;
border:2px solid rgba(255,170,0,0.7);
transform:translate(-50%,-50%);
animation:ondas 2.5s infinite;
}

@keyframes ondas{

0%{
transform:translate(-50%,-50%) scale(0.5);
opacity:1;
}

100%{
transform:translate(-50%,-50%) scale(4);
opacity:0;
}

}
/* EFECTO TRANSMISIÓN */

.hero img{
animation:transmision 4s infinite alternate;
}

@keyframes transmision{

0%{
filter:brightness(1);
}

100%{
filter:brightness(1.15);
}

}
/* EFECTO NEÓN EN EL BANNER */

.hero img{
box-shadow:
0 0 10px rgba(0,180,255,0.4),
0 0 25px rgba(0,180,255,0.3),
0 0 50px rgba(0,180,255,0.2);

transition: all .4s ease;
}

.hero img:hover{

box-shadow:
0 0 20px rgba(0,200,255,0.8),
0 0 40px rgba(0,200,255,0.6),
0 0 80px rgba(0,200,255,0.4);

transform:scale(1.02);

}
/* EFECTO NEON BANNER */

.banner img,
.hero img,
.header-banner img{

box-shadow:
0 0 15px rgba(0,180,255,0.5),
0 0 30px rgba(0,180,255,0.3),
0 0 60px rgba(0,180,255,0.2);

transition: all .4s ease;

}

.banner img:hover,
.hero img:hover,
.header-banner img:hover{

box-shadow:
0 0 25px rgba(0,200,255,0.9),
0 0 50px rgba(0,200,255,0.7),
0 0 90px rgba(0,200,255,0.4);

transform: scale(1.02);

}
/* =========================
   ESTRELLAS ANIMADAS FONDO
========================= */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;

background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,0.7), transparent);

animation: estrellas 60s linear infinite;

opacity:.6;
z-index:-1;
}

@keyframes estrellas{

0%{
transform:translateY(0px);
}

100%{
transform:translateY(-1000px);
}
}
/* CONTADOR VISITAS RADIO */

.footer-visits{

font-family: monospace;
font-size:18px;
letter-spacing:3px;

color:#00eaff;

text-shadow:
0 0 6px rgba(0,200,255,.7),
0 0 12px rgba(0,200,255,.5);

}
.qso-box{
  max-width:400px;
  margin:auto;
  display:flex;
  gap:10px;
  margin-top:15px;
}

.qso-box input{
  flex:1;
  padding:10px;
  border-radius:8px;
  border:1px solid #444;
  background:#111;
  color:#fff;
}

.qso-box button{
  padding:10px 20px;
}
.qso-box{
  max-width:420px;
  margin:20px auto;
  display:flex;
  gap:10px;
  justify-content:center;
}
.qso-box button{
  background:linear-gradient(90deg,#00c6ff,#8a2be2);
  border:none;
  padding:10px 18px;
  border-radius:8px;
  color:white;
  cursor:pointer;
  font-weight:600;
}
.qso-box input{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #333;
  background:#0c0c14;
  color:#fff;
  font-size:14px;
}
.qso-box button:hover{
  transform:scale(1.05);
  transition:0.2s;
}
.btn-admin{
  display:inline-block;
  padding:14px 24px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:linear-gradient(90deg,#20d4ff,#8d4dff,#ff4fd8);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:.2s ease;
}

.btn-admin:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}
.btn-admin{
  display:inline-block;
  margin-top:15px;
  padding:12px 26px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  color:white;
  background:linear-gradient(90deg,#00c6ff,#ff00cc);
  box-shadow:0 0 15px rgba(0,198,255,0.5);
  transition:0.3s;
}

.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(255,0,204,0.6);
}
.btn-admin{
display:inline-block;
margin-top:15px;
padding:12px 26px;
border-radius:10px;
font-weight:600;
text-decoration:none;
color:white;
background:linear-gradient(90deg,#00c6ff,#ff00cc);
box-shadow:0 0 15px rgba(0,198,255,0.4);
transition:0.3s;
}

.btn-admin:hover{
transform:translateY(-2px);
box-shadow:0 0 20px rgba(255,0,204,0.6);
}
.logout-btn{
  display:inline-block;
  margin-top:14px;
  color:#79e5ff;
  text-decoration:none;
  font-weight:600;
}

.logout-btn:hover{
  text-decoration:underline;
}
.btn-admin{
  display:inline-block;
  margin-top:15px;
  padding:12px 26px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  color:white;
  background:linear-gradient(90deg,#00c6ff,#ff00cc);
  box-shadow:0 0 15px rgba(0,198,255,0.4);
  transition:0.3s;
}

.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(255,0,204,0.6);
}
.table-wrap{
  overflow-x:auto;
}

.tabla-radio{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
}

.tabla-radio td{
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.tabla-radio tr td:nth-child(1),
.tabla-radio tr td:nth-child(3){
  font-weight:700;
  color:#33d6ff;
  width:50px;
}

.tabla-radio tr td:nth-child(2),
.tabla-radio tr td:nth-child(4){
  color:#e8f3ff;
}
html{
  scroll-behavior: smooth;
}
html{
  scroll-behavior:smooth;
}

.table-wrap{
  overflow-x:auto;
}

.tabla-radio{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
}

.tabla-radio td{
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.tabla-radio tr td:nth-child(1),
.tabla-radio tr td:nth-child(3){
  font-weight:700;
  color:#33d6ff;
  width:50px;
}

.tabla-radio tr td:nth-child(2),
.tabla-radio tr td:nth-child(4){
  color:#e8f3ff;
}
#tabla-fonetico,
#tabla-bandas,
#tabla-codigo-q,
#procedimiento-radio,
#guia-cb{
  scroll-margin-top:120px;
}
html{
  scroll-behavior:smooth;
}
/* =========================
   GUIA DEL RADIOAFICIONADO
========================= */

.guia-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,220,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    radial-gradient(circle at top right, rgba(0,198,255,.07), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,0,204,.05), transparent 28%);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease;
}

.guia-card::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:2px;
  background:linear-gradient(90deg,#00e1ff,#ffb300,#ff3fd2);
  box-shadow:0 0 12px rgba(0,225,255,.35);
  opacity:.95;
}

.guia-card::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  transform:skewX(-20deg);
  transition:left .65s ease;
  pointer-events:none;
}

.guia-card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,225,255,.28);
  box-shadow:
    0 16px 30px rgba(0,0,0,.30),
    0 0 18px rgba(0,198,255,.16);
  filter:brightness(1.02);
}

.guia-card:hover::after{
  left:140%;
}

.guia-card .qsl-title{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:.6px;
}

.guia-card .qsl-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:78px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#00e1ff,#ffb300);
  box-shadow:0 0 10px rgba(0,225,255,.25);
}

.guia-card .qsl-text{
  margin-top:18px;
  color:#c8d4ea;
  line-height:1.55;
}

.guia-card .qsl-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:linear-gradient(90deg,#28cfff,#3f8cff);
  box-shadow:0 8px 20px rgba(40,207,255,.18);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.guia-card .qsl-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 24px rgba(40,207,255,.28);
  filter:brightness(1.05);
}

.guia-card .qsl-btn::before{
  content:"➜";
  font-size:.95rem;
  opacity:.9;
}

/* Entrada suave de las tarjetas */
.guia-card{
  animation:guiaFadeUp .55s ease both;
}

.guia-card:nth-child(1){ animation-delay:.03s; }
.guia-card:nth-child(2){ animation-delay:.07s; }
.guia-card:nth-child(3){ animation-delay:.11s; }
.guia-card:nth-child(4){ animation-delay:.15s; }
.guia-card:nth-child(5){ animation-delay:.19s; }
.guia-card:nth-child(6){ animation-delay:.23s; }

@keyframes guiaFadeUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Ajuste para que los saltos no queden pegados arriba */
#tabla-fonetico,
#tabla-bandas,
#tabla-codigo-q,
#procedimiento-radio,
#guia-cb{
  scroll-margin-top:120px;
}

html{
  scroll-behavior:smooth;
}
.guia-img-box{
  width:100%;
  height:140px;
  overflow:hidden;
  border-radius:14px 14px 0 0;
}

.guia-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.guia-card:hover .guia-img{
  transform:scale(1.08);
}
.guia-img-box{
  width:100%;
  height:140px;
  overflow:hidden;
  border-radius:14px 14px 0 0;
}

.guia-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.guia-card:hover .guia-img{
  transform:scale(1.08);
}
.guia-img-box{
height:140px;
overflow:hidden;
border-radius:14px 14px 0 0;
}

.guia-img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .4s;
}

.guia-card:hover .guia-img{
transform:scale(1.1);
}
#guia-radio{
width:100%;
}

#guia-radio .card{
width:100%;
}

#guia-radio .table-wrap{
width:100%;
}
#guia-radio{
margin-top:20px;
}
#guia-radio{
  margin-top: 18px;
}

#guia-radio .section-head{
  margin-bottom: 14px;
}

#guia-radio .muted{
  margin-bottom: 18px;
}
#guia-radio .card{
  padding: 16px;
}
.submenu-radio{
  margin: 6px 0 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subitem-radio{
  display: block;
  padding: 7px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  color: #b9c7de;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  transition: .2s ease;
}

.subitem-radio:hover{
  color: #fff;
  background: rgba(0,198,255,.10);
  border-color: rgba(0,198,255,.22);
  transform: translateX(4px);
}
.qsl-thumb{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
}

.qsl-img{
  width: 100%;
  height: auto;
  display: block;
}
.qsl-card{
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.qsl-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,180,255,.18);
  border-color: rgba(0,198,255,.35);
}
.qsl-thumb img{
  transition: transform .5s ease;
}

.qsl-card:hover .qsl-thumb img{
  transform: scale(1.05);
}
.qsl-card:hover{
  background:
    radial-gradient(circle at top, rgba(0,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.qsl-card{
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}

.qsl-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(120deg,#00eaff,#7a5cff,#ff2fd0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.35;
}

.qsl-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,200,255,.25);
}
.qsl-generator{
margin-top:20px;
padding:20px;
border-radius:16px;
background:rgba(255,255,255,0.03);
text-align:center;
max-width:420px;
}
.qsl-generator{
  margin-top: 20px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(10, 10, 35, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  text-align: center;
}

.qsl-generator h3{
  margin-bottom: 10px;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #20d4ff, #c86bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.qsl-generator p{
  color: #e8ecff;
  margin-bottom: 22px;
  font-size: 1rem;
}

.qsl-options{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.qsl-option-box{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px;
}

.qsl-option-box h4{
  margin: 0 0 10px;
  color: #4fdcff;
  font-size: 1.1rem;
}

.qsl-option-box p{
  margin-bottom: 15px;
  font-size: 0.95rem;
  color: #d8dcf5;
}

.qsl-form-line{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.qsl-form-line input{
  flex: 1 1 180px;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #8ea0ff;
  background: #ffffff;
  color: #111;
  font-size: 0.95rem;
}

.qsl-form-line button{
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #20d4ff, #b84dff);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qsl-form-line button:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(109, 85, 255, 0.35);
}
.qsl-generator{
  margin-top: 24px;
  padding: 22px;
  border-radius: 18px;
  background: rgba(10, 12, 35, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.qsl-generator h3{
  margin: 0 0 10px;
  color: #59d7ff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.qsl-generator p{
  margin: 0 0 18px;
  color: #d9ddf3;
}

.qsl-form-line{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.qsl-form-line input{
  width: 280px;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #fff;
  color: #111;
  font-size: 15px;
}

.qsl-form-line button{
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #1ec8ff, #c254ff);
}
.hero{
width:100%;
margin-bottom:20px;
}

.hero-img{
width:100%;
border-radius:12px;
}
.hero{
width:100%;
margin-bottom:20px;
}

.hero-img{
width:100%;
border-radius:14px;
box-shadow:0 0 25px rgba(0,0,0,0.5);
}
.hero{
  width:100%;
  margin-bottom:20px;
}

.hero-img{
  width:100%;
  border-radius:14px;
  box-shadow:0 0 25px rgba(0,0,0,0.5);
}
.dl2-thumb img{
  width:60px;
  height:60px;
  object-fit:contain;
}
#mapa{
  overflow: visible !important;
}

#mapa .section-head{
  overflow: visible !important;
}

#mapa .section-title{
  overflow: visible !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#mapa iframe{
  width: 100%;
  border: 0;
  border-radius: 18px;
  display: block;
}
#mapa{
  padding: 20px !important;
}
#mapa .section-head{
  padding-left: 0;
}

#mapa .section-title{
  margin-left: 0;
}
.card{
  padding: 20px;
}
#mapa{
  padding: 20px !important;
  margin-top: 20px;
}
/* HERO */
.hero{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: box-shadow .35s ease, transform .35s ease;
}

.hero-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}

/* efecto ambilight azul al pasar el ratón */
.hero:hover{
  box-shadow:
    0 0 18px rgba(0, 180, 255, .35),
    0 0 38px rgba(0, 180, 255, .28),
    0 0 70px rgba(0, 120, 255, .22);
}

.hero:hover .hero-img{
  transform: scale(1.01);
  filter: brightness(1.04);
  box-shadow:
    0 0 25px rgba(0, 200, 255, .30),
    0 0 60px rgba(0, 120, 255, .22);
}
.hero:hover{
  box-shadow:
    0 0 22px rgba(0, 220, 255, .45),
    0 0 55px rgba(0, 170, 255, .35),
    0 0 95px rgba(0, 110, 255, .25);
}
.hero{
  position: relative;
  overflow: visible !important;
  border-radius: 24px;
}

.hero-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
}

/* EFECTO AMBILIGHT */
.hero:hover .hero-img{
  transform: scale(1.01);
  filter: brightness(1.05);
  box-shadow:
    0 0 25px rgba(0, 200, 255, .45),
    0 0 60px rgba(0, 140, 255, .35),
    0 0 100px rgba(0, 120, 255, .25);
}
.hero::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:30px;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
  box-shadow:
    0 0 30px rgba(0, 200, 255, .5),
    0 0 80px rgba(0, 120, 255, .3);
}

.hero:hover::after{
  opacity:1;
}
/* HERO PORTADA */
.hero-card{
  position: relative;
  border-radius: 24px;
  overflow: visible !important;
  isolation: isolate;
  transition: transform .25s ease;
}

.hero-card .hero-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  position: relative;
  z-index: 2;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

/* halo exterior */
.hero-card::before{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 32px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  box-shadow:
    0 0 20px rgba(0, 210, 255, .45),
    0 0 50px rgba(0, 170, 255, .35),
    0 0 95px rgba(80, 0, 255, .20);
}

/* hover */
.hero-card:hover::before{
  opacity: 1;
}

.hero-card:hover .hero-img{
  transform: scale(1.01);
  filter: brightness(1.05) saturate(1.05);
  box-shadow:
    0 0 18px rgba(0, 220, 255, .35),
    0 0 40px rgba(0, 140, 255, .25);
}
.card.hero-card{
  overflow: visible !important;
}
/* HERO PORTADA - prueba directa */
#hero-portada{
  position: relative;
  overflow: visible !important;
  border-radius: 24px;
}

#hero-portada .hero-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

/* brillo fuerte y visible */
#hero-portada:hover .hero-img{
  transform: scale(1.01);
  filter: brightness(1.08);
  box-shadow:
    0 0 12px #27d8ff,
    0 0 28px rgba(39,216,255,.85),
    0 0 60px rgba(39,216,255,.60),
    0 0 100px rgba(0,110,255,.45) !important;
}
#hero-portada:hover{
  outline: 3px solid red !important;
}
#hero-portada{
  position: relative;
  overflow: visible !important;
  border-radius: 24px;
}

#hero-portada .hero-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition: transform .25s ease, filter .25s ease;
}

#hero-portada::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:32px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  box-shadow:
    0 0 18px rgba(0, 210, 255, .35),
    0 0 38px rgba(0, 180, 255, .25),
    0 0 70px rgba(70, 0, 255, .12);
}

#hero-portada:hover::after{
  opacity:1;
}

#hero-portada:hover .hero-img{
  transform: scale(1.01);
  filter: brightness(1.06);
}
.logo-preview{
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0,200,255,.4));
  transition: transform .25s ease, filter .25s ease;
}

.logo-preview:hover{
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(0,220,255,.6));
}
.logo-preview{
  filter:
    drop-shadow(0 0 6px rgba(0,200,255,.5))
    drop-shadow(0 0 12px rgba(0,120,255,.4));
}
.logo-preview{
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: transparent;
}
.logo-preview{
  width: 70px;
  height: 70px;
  object-fit: contain;

  filter:
    drop-shadow(0 0 6px rgba(0,200,255,.4))
    drop-shadow(0 0 12px rgba(0,120,255,.3));

  transition: transform .25s ease;
}

.logo-preview:hover{
  transform: scale(1.1);
}
.dl2{
  transition: all .3s ease;
}

.dl2:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,150,255,.25);
}

.dl2-thumb img{
  transition: all .3s ease;
}

.dl2:hover img{
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(0,180,255,.6));
}
.logo-img.blanco{
  filter: brightness(0) invert(1);
}
.logo-img.blanco{
  filter: brightness(0) invert(1);
  drop-shadow: 0 0 8px rgba(0,150,255,0.6);
}
.logo-icon{
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.logo-download:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.logo-img.blanco{
  filter: brightness(0) invert(1);
}
.logo-img.blanco{
  filter: brightness(0) invert(1);
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0,150,255,0.6));
}
.logo-img.blanco{
  filter: brightness(0) invert(1);
}
.logo-img.blanco{
  filter: brightness(0) invert(1);
}
.logo-img.blanco{
  filter: brightness(0) invert(1) !important;
}
.dl2-thumb{
  background: #000;
}
.logo-img.blanco{
  background: #000;
  border-radius: 10px;
  padding: 6px;
}
.logo-img.blanco{
  background: radial-gradient(circle, #000 40%, #020617 100%);
  padding: 8px;
  border-radius: 12px;
}
.dl2-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.dl2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(10,12,38,.88);
  border:1px solid rgba(40,140,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  text-decoration:none;
}

.dl2-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.dl2-thumb{
  width:58px;
  height:58px;
  border-radius:14px;
  background:rgba(3,8,25,.92);
  border:1px solid rgba(0,212,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 58px;
  overflow:hidden;
}

.dl2-thumb.thumb-dark{
  background:#000;
}

.logo-img{
  max-width:42px;
  max-height:42px;
  width:auto;
  height:auto;
  display:block;
}

.dl2-meta{
  min-width:0;
}

.dl2-title{
  font-weight:800;
  font-size:1.05rem;
  color:#f3f7ff;
  line-height:1.1;
}

.dl2-sub{
  margin-top:3px;
  color:#7f8aa3;
  font-weight:700;
  font-size:.95rem;
}

.dl2-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.dl2-tag{
  padding:8px 12px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:800;
  color:#d9e4ff;
  border:1px solid rgba(58,120,255,.45);
  background:rgba(22,32,84,.55);
}

.dl2-btn{
  padding:10px 16px;
  border-radius:14px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg,#1ea7ff,#398dff);
}

@media (max-width: 980px){
  .dl2-grid{
    grid-template-columns:1fr;
  }
}
.guia-material{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:14px;
  margin-top:15px;
}

.guia-box{
  padding:14px;
  border-radius:14px;
  background:rgba(10,12,38,.8);
  border:1px solid rgba(40,140,255,.2);
  color:#dfe9ff;
  transition:.2s;
}

.guia-box:hover{
  transform:translateY(-3px);
  border-color:#2aa0ff;
}
.guia-box{
  padding:14px;
  border-radius:14px;
  background:rgba(10,12,38,.8);
  border:1px solid rgba(40,140,255,.2);
  color:#dfe9ff;
  display:block;
}
.guia-box strong{
  display:block;
  margin-bottom:4px;
}
.guia-box{
  text-decoration:none;
}

.guia-box p{
  text-decoration:none;
}
.guia-box{
  min-height: 150px;
}
.guia-box{
  min-height: 150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.guia-box:hover{
  transform:translateY(-4px);
  border-color:#2aa0ff;
  box-shadow:0 10px 25px rgba(0,150,255,0.2);
}
.guia-material{
  align-items: start;
}
.guia-material{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:14px;
  align-items:start;
}
.guia-box{
  cursor:pointer;
  transition:0.3s;
}

.guia-box:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
.guia-box{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:all .25s ease;
}

.guia-box:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 0 15px rgba(0,200,255,.4);
  border-color:#00d4ff;
}
html{
  scroll-behavior:smooth;
}
.guia-box{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:16px;
  border-radius:12px;
  background:rgba(20,30,60,0.6);
  border:1px solid rgba(0,200,255,0.15);
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

.guia-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(0,200,255,.2), transparent);
  opacity:0;
  transition:.3s;
}

.guia-box:hover::before{
  opacity:1;
}

.guia-box:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 0 20px rgba(0,200,255,.35);
  border-color:#00d4ff;
}
.submenu-radio{
  margin: 8px 0 12px;
  padding-left: 10px;
}

.subitem-radio{
  display: block;
  padding: 8px 12px;
  margin: 6px 0 0 10px;
  border-radius: 10px;
  color: #b9c7e6;
  text-decoration: none;
  font-size: 13px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(80,140,255,0.10);
}

.subitem-radio:hover{
  color: #fff;
  background: rgba(80,140,255,0.12);
  border-color: rgba(80,140,255,0.25);
}
.bandas-pro-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:16px;
}

.banda-pro-card{
  position:relative;
  padding:18px;
  border-radius:20px;
  background:rgba(8,12,38,.88);
  border:1px solid rgba(60,140,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  overflow:hidden;
}

.banda-pro-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.04), transparent 40%);
}

.banda-pro-card.hf{
  border-color:rgba(255,170,0,.28);
}

.banda-pro-card.vhf{
  border-color:rgba(0,210,255,.28);
}

.banda-pro-card.uhf{
  border-color:rgba(210,120,255,.28);
}

.banda-pro-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.banda-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  background:linear-gradient(90deg,#00c8ff,#a94cff);
  box-shadow:0 0 10px rgba(0,200,255,.22);
}

.banda-rango{
  font-size:.88rem;
  font-weight:700;
  color:#91a4c9;
}

.banda-pro-title{
  margin:0 0 8px;
  font-size:1.08rem;
  font-weight:800;
  color:#f4f8ff;
}

.banda-pro-text{
  margin:0 0 14px;
  color:#b9c6df;
  line-height:1.45;
  font-size:.95rem;
}

.banda-pro-table{
  display:grid;
  gap:10px;
}

.banda-row{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.banda-label{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#57d9ff;
}

.banda-value{
  font-size:.93rem;
  color:#eef4ff;
  line-height:1.4;
}

@media (max-width: 980px){
  .bandas-pro-grid{
    grid-template-columns:1fr;
  }
}
.codigoq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

.codigoq-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(80,140,255,.12);
}

.codigoq-code{
  min-width:72px;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(90deg,#00c8ff,#a94cff);
  box-shadow:0 0 10px rgba(0,200,255,.2);
}

.codigoq-text{
  color:#e7efff;
  font-size:.98rem;
  line-height:1.35;
}

@media (max-width: 980px){
  .codigoq-grid{
    grid-template-columns:1fr;
  }
}
.codigoq-item{
  transition: all .25s ease;
}

.codigoq-item:hover{
  transform: translateY(-3px);
  border-color: rgba(0,200,255,.4);
  box-shadow: 0 0 12px rgba(0,200,255,.2);
}
.procedimiento-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

.proc-step{
  display:flex;
  gap:14px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(80,140,255,.12);
  transition: all .25s ease;
}

.proc-step:hover{
  transform: translateY(-3px);
  border-color: rgba(0,200,255,.4);
  box-shadow: 0 0 12px rgba(0,200,255,.2);
}

.proc-num{
  min-width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg,#00c8ff,#a94cff);
}

.proc-content{
  flex:1;
}

.proc-title{
  font-weight:800;
  color:#f2f6ff;
  margin-bottom:4px;
}

.proc-text{
  font-size:.95rem;
  color:#b9c6df;
  line-height:1.4;
}

@media (max-width: 980px){
  .procedimiento-grid{
    grid-template-columns:1fr;
  }
}
.proc-num{
  box-shadow: 0 0 10px rgba(0,200,255,.25);
}
.cb-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

.cb-card{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(80,140,255,.12);
  transition:all .25s ease;
}

.cb-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,200,255,.35);
  box-shadow:0 0 12px rgba(0,200,255,.18);
}

.cb-icon{
  font-size:1.4rem;
  margin-bottom:8px;
}

.cb-title{
  font-weight:800;
  font-size:1rem;
  color:#f2f6ff;
  margin-bottom:6px;
}

.cb-text{
  color:#b9c6df;
  font-size:.95rem;
  line-height:1.45;
}

@media (max-width: 1100px){
  .cb-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 700px){
  .cb-grid{
    grid-template-columns:1fr;
  }
}
.cb-card{
  padding:18px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(20,30,60,.6), rgba(10,15,40,.8));
  border:1px solid rgba(80,140,255,.15);
  position:relative;
  overflow:hidden;
}

.cb-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(0,200,255,.15), transparent);
  opacity:0;
  transition:opacity .3s ease;
}

.cb-card:hover::before{
  opacity:1;
}

.cb-card:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:#00d4ff;
  box-shadow:0 0 15px rgba(0,200,255,.35);
}
.cambalache-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:15px;
}

.c-item{
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,200,255,.2);
}

.c-img{
  width:90px;
  border-radius:10px;
}

.c-info h3{
  font-size:.9rem;
  color:#00d4ff;
}

.c-info p{
  font-size:.8rem;
  color:#aaa;
}

.c-btn{
  margin-left:auto;
  padding:8px 12px;
  border-radius:8px;
  background:#00d4ff;
  color:#000;
  text-decoration:none;
  font-size:.8rem;
}

.c-item.empty{
  justify-content:center;
  align-items:center;
  opacity:.6;
  border-style:dashed;
}

.c-empty{
  font-size:.9rem;
  color:#888;
}
.c-img{
  width:90px;
  height:60px;
  object-fit:cover;
  border-radius:10px;
}
.c-precio{
  margin-top:5px;
  font-size:1rem;
  font-weight:bold;
  color:#00ff9c;
}
.c-precio{
  margin-top:6px;
  display:inline-block;
  padding:4px 10px;
  border-radius:8px;
  background:#00ff9c;
  color:#000;
  font-size:.85rem;
  font-weight:bold;
}
.c-precio{
  margin-top:8px;
  display:inline-block;
  padding:4px 10px;
  border-radius:8px;
  background:#00ff9c;
  color:#000;
  font-size:.8rem;
  font-weight:bold;
}
.c-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,200,255,.2);
  transition:all .2s ease;
}
.whatsapp{
  background:#25D366;
  color:#000;
  padding:6px 10px;
  border-radius:8px;
  margin-left:8px;
  text-decoration:none;
  font-size:.85rem;
}

.whatsapp:hover{
  background:#1ebe5d;
}
.btn-admin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 26px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:linear-gradient(90deg,#25c8ff,#ff00b8);
  box-shadow:0 0 18px rgba(37,200,255,.25);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(255,0,184,.25);
}

.btn-admin:active{
  transform:translateY(0);
}
.mapa-con-robot{
  position: relative;
}

.robot-mapa{
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  max-width: 90%;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.6));
}
.btn-admin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 26px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:linear-gradient(90deg,#25c8ff,#ff00b8);
  box-shadow:0 0 18px rgba(37,200,255,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(255,0,184,.25);
}
.admin-link{
  background:linear-gradient(90deg,#25c8ff,#ff00b8);
  color:#fff;
  font-weight:700;
}
.admin-link{
  background: linear-gradient(90deg, #25c8ff, #ff00b8);
  color:#fff !important;
  font-weight:700;
  box-shadow:0 0 18px rgba(37,200,255,.22);
}

.admin-link:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(255,0,184,.25);
}
html {
  scroll-behavior: smooth;
}
.activacion-item{
  background:rgba(255,255,255,.04);
  padding:12px 14px;
  margin-bottom:10px;
  border-radius:12px;
  border:1px solid rgba(49,227,255,.12);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.activacion-texto{
  word-break:break-word;
  line-height:1.5;
}
.activacion-item{
  background:rgba(255,255,255,.04);
  padding:12px 14px;
  margin-bottom:10px;
  border-radius:12px;
  border:1px solid rgba(49,227,255,.12);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.activacion-texto{
  word-break:break-word;
  line-height:1.5;
}
.activacion-item{
  background:rgba(255,255,255,.04);
  padding:14px;
  margin-bottom:10px;
  border-radius:14px;
  border:1px solid rgba(49,227,255,.15);
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.activacion-texto{
  line-height:1.6;
}

.activacion-texto strong{
  color:#9adfff;
}

.btn-borrar{
  background:linear-gradient(90deg,#ff4d6d,#ff006e);
  border:none;
  color:white;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
.panel {
  display: none;
}

.panel.active {
  display: block;
}
.btn-volver {
  display: block;
  margin-top: 15px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.1);
  transition: 0.3s;
}

.btn-volver:hover {
  background: rgba(255,255,255,0.2);
}
.btn-volver {
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  margin-right: 10px;
  transition: 0.3s;
}

.btn-volver:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(0,198,255,0.6);
}
.topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.topbar-left{
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.btn-back-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all .25s ease;
}

.btn-back-top:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(0,198,255,.35);
}

.date{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  min-height: 40px;
  border-radius: 12px;
}
.btn-logout{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #ff4d6d, #ff2d55);
}
.btn-volver-login{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1ec8ff, #7b2cff);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 24px rgba(30,200,255,0.22);
  transition: all .25s ease;
}

.btn-volver-login:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 28px rgba(123,44,255,0.28);
}

.btn-volver-login:visited{
  color: #ffffff !important;
}

.btn-volver-login:active{
  color: #ffffff !important;
}
/* BOTÓN VOLVER LOGIN - FORZADO */
.btn-volver-login{
  display: flex !important;
  width: 100% !important;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #00c6ff, #7c3aed) !important;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 24px rgba(0,198,255,0.25);
}

/* Quitar estilo de enlace */
.btn-volver-login:visited,
.btn-volver-login:active,
.btn-volver-login:hover{
  color: #ffffff !important;
  text-decoration: none !important;
}
.login-box a.btn-volver-login,
.login-box a.btn-volver-login:link,
.login-box a.btn-volver-login:visited,
.login-box a.btn-volver-login:hover,
.login-box a.btn-volver-login:active {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 14px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #00c6ff, #7c3aed) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 10px 24px rgba(0,198,255,0.25) !important;
}
.sideitem i{
  margin-right: 8px;
  width: 18px;
  text-align: center;
}
.form-grid button{
  grid-column: span 2;
  margin-top: 10px;
}
.btn-socio{
  display:inline-block;
  padding:12px 25px;
  background:linear-gradient(90deg,#00e0ff,#a200ff);
  color:white;
  font-weight:bold;
  border-radius:8px;
  text-decoration:none;
  transition:0.3s;
}

.btn-socio:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #00e0ff;
}
.socio-boton-wrap{
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

.btn-socio{
  display: inline-block;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff !important;
  background: linear-gradient(90deg, #00d9ff, #8a2eff);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 14px rgba(0,217,255,0.35);
  transition: all 0.3s ease;
}

.btn-socio:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,217,255,0.55);
  color: #ffffff !important;
}

.btn-socio:visited{
  color: #ffffff !important;
}

.btn-socio:active{
  color: #ffffff !important;
}
a.btn-socio,
a.btn-socio:link,
a.btn-socio:visited,
a.btn-socio:hover,
a.btn-socio:active{
  display: inline-block;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff !important;
  background: linear-gradient(90deg, #00d9ff, #8a2eff) !important;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 14px rgba(0,217,255,0.35);
  transition: all 0.3s ease;
}
/* =========================
   BOTON HAZTE SOCIO
========================= */
.socio-boton-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 10px;
}

a.btn-socio,
a.btn-socio:link,
a.btn-socio:visited,
a.btn-socio:hover,
a.btn-socio:active{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 28px !important;
  min-height: 52px;

  background: linear-gradient(90deg, #00d9ff, #a020f0) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;

  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 16px rgba(0,217,255,0.30) !important;

  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

a.btn-socio:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 22px rgba(0,217,255,0.50) !important;
}
#hazte-socio a.btn-socio,
#hazte-socio a.btn-socio:link,
#hazte-socio a.btn-socio:visited,
#hazte-socio a.btn-socio:hover,
#hazte-socio a.btn-socio:active{
  color: #fff !important;
  background: linear-gradient(90deg, #00d9ff, #a020f0) !important;
  text-decoration: none !important;
}
/* BOTON HAZTE SOCIO */
.socio-boton-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0 8px;
}

a.btn-socio,
a.btn-socio:link,
a.btn-socio:visited,
a.btn-socio:hover,
a.btn-socio:active{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px !important;
  min-height: 52px;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(90deg, #00d9ff, #a020f0) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 18px rgba(0,217,255,0.35) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

a.btn-socio:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0,217,255,0.55) !important;
}
/* BOTON HAZTE SOCIO */
.socio-boton-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0 8px;
}

a.btn-socio,
a.btn-socio:link,
a.btn-socio:visited,
a.btn-socio:hover,
a.btn-socio:active{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px !important;
  min-height: 52px;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(90deg, #00d9ff, #a020f0) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 18px rgba(0,217,255,0.35) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

a.btn-socio:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0,217,255,0.55) !important;
}
/* ===== HAZTE SOCIO ===== */
#hazte-socio .socio-boton-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 0 10px;
}

#hazte-socio a.btn-socio,
#hazte-socio a.btn-socio:link,
#hazte-socio a.btn-socio:visited,
#hazte-socio a.btn-socio:hover,
#hazte-socio a.btn-socio:active{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 28px !important;
  min-height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, #00d9ff, #a020f0) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 18px rgba(0,217,255,0.35) !important;
  cursor: pointer !important;
}

#hazte-socio a.btn-socio:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 0 24px rgba(0,217,255,0.55) !important;
}
/* ENLACE HAZTE SOCIO VISUAL */
.link-socio{
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #00e0ff !important;
  text-decoration: none;
  transition: 0.3s;
}

.link-socio::before{
  content: "👉 ";
  margin-right: 6px;
}

.link-socio:hover{
  color: #ffffff !important;
  text-shadow: 0 0 10px #00e0ff;
}
/* LINK HAZTE SOCIO MEJORADO */
.link-socio{
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #00e0ff !important;
  text-decoration: none;
  position: relative;
  transition: 0.3s;
}

/* Subrayado animado */
.link-socio::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg,#00e0ff,#a020f0);
  transition: 0.3s;
}

.link-socio:hover::after{
  width: 100%;
}

.link-socio:hover{
  color: #ffffff !important;
  text-shadow: 0 0 8px #00e0ff;
}
.link-socio{
  text-decoration: none !important;
}
.link-socio{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-socio {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 12px;
  background: linear-gradient(90deg, #00e0ff, #7a5cff);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 15px rgba(0, 224, 255, 0.4);
  transition: all 0.3s ease;
}

.btn-socio:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 25px rgba(122, 92, 255, 0.7);
}
.socio-boton-wrap {
  text-align: center;
  margin-top: 20px;
}
/* =========================
   BOTON HAZTE SOCIO
========================= */
.socio-boton-wrap{
  text-align:center;
  margin-top:20px;
}

.btn-socio{
  display:inline-block;
  padding:14px 26px;
  border-radius:12px;
  background:linear-gradient(90deg, #00e0ff, #7a5cff);
  color:#ffffff !important;
  font-weight:600;
  text-decoration:none !important;
  box-shadow:0 0 15px rgba(0,224,255,0.40);
  transition:all .3s ease;
}

.btn-socio:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 0 25px rgba(122,92,255,0.70);
}

/* =========================
   POPUP SOCIO
========================= */
.popup-socio{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}.popup-anuncio-box{
  max-height: 85vh;
  overflow-y: auto;
}
.popup-socio.activo{
  display:flex;
}

.popup-socio-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(4px);
}
.popup-socio-box{
  position: relative !important;
  width: 95% !important;
  max-width: 1200px !important;
  height: 90vh !important;
  background: #0b0f2a !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  z-index: 2 !important;
  box-shadow: 0 0 30px rgba(0,224,255,0.20) !important;
}

.popup-socio-head{
  padding:16px 22px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(90deg, rgba(0,224,255,0.12), rgba(122,92,255,0.12));
}

.popup-socio-head h3{
  margin:0;
  color:#fff;
  font-size:20px;
}

.popup-socio-cerrar{
  position:absolute;
  top:10px;
  right:14px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:5;
}

.popup-socio-cerrar:hover{
  background:rgba(255,255,255,0.20);
}

.popup-socio iframe{
  display:block;
  width:100%;
  height:calc(100% - 58px);
  border:none;
  background:#fff;
}

/* MOVIL */
@media (max-width: 768px){
  .popup-socio{
    padding:10px;
  }

  .popup-socio-box{
    width:100%;
    height:92vh;
    border-radius:14px;
  }

  .popup-socio-head h3{
    font-size:17px;
    padding-right:40px;
  }
}
.popup-socio{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.popup-socio.activo{
  display: flex;
}

.popup-socio-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.80);
}

.popup-socio-box{
  position: relative;
  width: 90%;
  max-width: 1000px;
  height: 85vh;
  background: #0b0f2a;
  border-radius: 15px;
  overflow: hidden;
  z-index: 2;
}

.popup-socio-head{
  padding: 15px;
  color: #fff;
  background: #0b0f2a;
}

.popup-socio-cerrar{
  position: absolute;
  top: 10px;
  right: 15px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  z-index: 3;
}

.popup-socio iframe{
  width: 100%;
  height: calc(100% - 60px);
  border: none;
  background: #fff;
}
.popup-socio{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.popup-socio-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
}

.popup-socio-box{
  position: relative;
  width: 90%;
  max-width: 1000px;
  height: 85vh;
  background: #0b0f2a;
  border-radius: 15px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 30px rgba(0,224,255,0.20);
}

.popup-socio-head{
  padding: 15px 20px;
  color: #fff;
  background: #0b0f2a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.popup-socio-cerrar{
  position: absolute;
  top: 10px;
  right: 15px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  z-index: 3;
}

.popup-socio iframe{
  width: 100%;
  height: calc(100% - 60px);
  border: none;
  background: #fff;
}
.popup-socio{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 99999 !important;
  padding: 20px !important;
}

.popup-socio-overlay{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.82) !important;
}

.popup-socio-box{
  position: relative !important;
  width: 90% !important;
  max-width: 1000px !important;
  height: 85vh !important;
  background: #0b0f2a !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  z-index: 2 !important;
  box-shadow: 0 0 30px rgba(0,224,255,0.20) !important;
}

.popup-socio-head{
  padding: 15px 20px !important;
  color: #fff !important;
  background: #0b0f2a !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.popup-socio-cerrar{
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;
  width: 38px !important;
  height: 38px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 26px !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.popup-socio iframe{
  width: 100% !important;
  height: calc(100% - 60px) !important;
  border: none !important;
  background: #fff !important;
}
.popup-socio{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 99999 !important;
  padding: 20px !important;
}

.popup-socio-overlay{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.82) !important;
}

.popup-socio-box{
  position: relative !important;
  width: 90% !important;
  max-width: 1000px !important;
  height: 85vh !important;
  background: #0b0f2a !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  z-index: 2 !important;
  box-shadow: 0 0 30px rgba(0,224,255,0.20) !important;
}

.popup-socio-head{
  padding: 15px 20px !important;
  color: #fff !important;
  background: #0b0f2a !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.popup-socio-cerrar{
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;
  width: 38px !important;
  height: 38px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 26px !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.popup-socio iframe{
  width: 100% !important;
  height: calc(100% - 60px) !important;
  border: none !important;
  background: #fff !important;
}
.colaboradores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.colaborador-bloque {
  background: rgba(10, 18, 40, 0.85);
  border: 1px solid rgba(0, 255, 255, 0.18);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 0 18px rgba(0, 180, 255, 0.12);
  transition: all 0.3s ease;
}

.colaborador-bloque:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 22px rgba(0, 220, 255, 0.28);
}

.colaborador-bloque h3 {
  margin: 0 0 12px;
  font-size: 18px;
  color: #53e3ff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.colab-banner {
  width: 100%;
  max-width: 100%;
  height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.colab-texto {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #dfefff;
  text-align: center;
}

@media (max-width: 900px) {
  .colaboradores-grid {
    grid-template-columns: 1fr;
  }
}
/* COLABORADORES - IMÁGENES */
.colab-banner {
  display: block;
  margin: 20px auto;
  max-width: 260px;   /* tamaño ideal */
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.25);
  background: transparent;
}

/* OPCIONAL: efecto hover PRO */
.colab-banner:hover {
  transform: scale(1.05);
  transition: 0.3s ease;
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.6);
}
.colab-banner {
  display: block;
  margin: 18px auto;
  max-width: 320px;
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: transparent;
}

.colaborador-bloque:nth-child(4) .colab-banner {
  max-width: 170px;
  height: 170px;
}
.colaborador-bloque:nth-child(4) .colab-banner {
  max-width: 220px;   /* más grande */
  height: 220px;
  object-fit: contain;
  margin: 10px auto 20px;
}
.colaborador-bloque:nth-child(4) .colab-banner {
  max-width: 260px;
  height: 260px;
  object-fit: contain;
  margin: 10px auto 20px;
}
.colaborador-bloque:nth-child(4) .colab-banner {
  max-width: 260px;
  height: 260px;
  object-fit: contain;
  margin: 10px auto 20px;
  box-shadow: 0 0 20px rgba(0,200,255,0.4);
}
.colaborador-bloque:nth-child(4) .colab-banner {
  max-width: 300px;
  height: 300px;
  object-fit: contain;
  margin: 10px auto 20px;
}
.colaborador-bloque:nth-child(4) .colab-banner {
  max-width: 340px;
  height: 340px;
  object-fit: contain;
  margin: 10px auto 20px;
}
.colaborador-bloque:nth-child(4) .colab-banner {
  max-width: 320px;
  height: 320px;
  object-fit: contain;
  margin: 10px auto 20px;
  box-shadow: 0 0 25px rgba(0,200,255,0.5);
  border-radius: 16px;
}
/* BLOQUE PROTECCIÓN CIVIL */
#colaboradores .colaborador-bloque:last-child .colab-banner{
  width: 260px !important;
  max-width: 260px !important;
  height: 260px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 10px auto 20px !important;
}
#colaboradores .colaborador-bloque:last-child .colab-banner{
  width: 320px !important;
  max-width: 320px !important;
  height: 320px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 10px auto 20px !important;
}
/* ===== COLABORADORES PRO ===== */

.colaboradores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.colaborador-bloque {
  background: rgba(10, 20, 40, 0.7);
  border: 1px solid rgba(0, 200, 255, 0.2);
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  transition: 0.3s;
}

.colaborador-bloque:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
}

.colaborador-bloque h3 {
  color: #00e0ff;
  font-size: 14px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.colab-banner {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: 0.3s;
}

.colab-banner:hover {
  transform: scale(1.03);
}

.colab-text {
  font-size: 13px;
  color: #ccc;
  margin-top: 10px;
}
/* ===== MEJORAS FINALES COLABORADORES ===== */

/* Igualar tamaño logos */
.colab-banner {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: rgba(0,0,0,0.2);
  padding: 10px;
}

/* Efecto tarjeta */
.colaborador-bloque {
  position: relative;
  overflow: hidden;
}

/* Borde neón */
.colaborador-bloque::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 1px;
  background: linear-gradient(120deg,#00e0ff,#7a5cff,#ff00cc);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hacer todo clicable */
.colaborador-bloque a {
  display: block;
}
.colab-banner {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: rgba(0,0,0,0.2);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.colaborador-bloque:nth-child(4) .colab-banner {
  transform: scale(0.85);
}
.colaborador-bloque:nth-child(4) .colab-banner {
  transform: scale(0.8);
  margin-top: 5px;
}
.colaborador-bloque:nth-child(4) .colab-banner {
  transform: scale(0.78);
}
/* ===== LINEAS TITULOS COLABORADORES ===== */

.colaborador-bloque h3 {
  position: relative;
  padding-bottom: 10px;
}

/* línea decorativa */
.colaborador-bloque h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;   /* 👈 MISMO TAMAÑO PARA TODOS */
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #00e0ff, #ff00cc);
}
/* ===== ARREGLAR LINEAS DE TITULOS EN COLABORADORES ===== */

#colaboradores .colaborador-bloque h3{
  position: relative;
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 18px;
}

#colaboradores .colaborador-bloque h3::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00e0ff, #ff00cc, #ffb400);
  box-shadow: 0 0 10px rgba(0,224,255,.35);
}
/* ===== COLABORADORES SIEMPRE 2 Y 2 ===== */
#colaboradores .colaboradores-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}

/* En móvil, una columna */
@media (max-width: 900px){
  #colaboradores .colaboradores-grid{
    grid-template-columns: 1fr;
  }
}
#colaboradores .colaborador-bloque{
  height: 100%;
}
#colaboradores .colaborador-bloque{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#colaboradores .colab-banner{
  margin: 0 auto;
}
#colaboradores .colaborador-bloque{
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#colaboradores .colab-banner{
  margin: 0 auto;
  display: block;
}
#zona-socios,
#contacta-administracion,
#zona-consultas {
  margin-bottom: 20px;
}

.socio-boton-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}
.zona-usuarios-botones{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  padding: 28px 0 34px;
}

#zona-usuarios .btn-socio{
  min-width: 280px;
  text-align: center;
}
#zona-usuarios .btn-socio {
  transition: all 0.25s ease;
  position: relative;
}

#zona-usuarios .btn-socio:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.4),
              0 0 30px rgba(255, 0, 255, 0.3);
}
#zona-usuarios .btn-socio {
  transition: all 0.25s ease;
}

#zona-usuarios .btn-socio:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 25px rgba(0,255,255,0.5),
              0 0 40px rgba(255,0,255,0.3);
}
#zona-usuarios .btn-socio {
  transition: all 0.25s ease;
}

#zona-usuarios .btn-socio:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 25px rgba(0,255,255,0.5),
              0 0 40px rgba(255,0,255,0.3);
}
#zona-usuarios {
  margin-top: 10px;
}
#zona-usuarios .zona-usuarios-botones{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 26px 0 30px;
}

#zona-usuarios .btn-socio{
  min-width: 300px;
  text-align: center;
}
#zona-usuarios .btn-socio:first-child{
  box-shadow: 0 0 18px rgba(0,255,255,.35),
              0 0 28px rgba(255,0,255,.22);
}
.form-consulta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0;
}

.form-consulta input,
.form-consulta textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: #0b1220;
  color: #fff;
}

.form-consulta textarea {
  min-height: 120px;
  resize: none;
}
.zona-usuarios-botones{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  padding:26px 0 30px;
}

#zona-usuarios .btn-socio{
  min-width:300px;
  text-align:center;
  text-decoration:none !important;
  display:inline-block;
}

.popup-consultas-box{
  max-width: 900px;
  width: 92%;
  height: auto !important;
  min-height: auto !important;
  max-height: 85vh;
  overflow-y: auto;
  padding: 0 0 24px 0;
}

#popupConsultas .popup-socio-head{
  padding: 22px 22px 14px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#popupConsultas .form-consulta{
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 0;
}

#popupConsultas .form-consulta input,
#popupConsultas .form-consulta textarea{
  display: block !important;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 10px;
  background: #071327;
  color: #fff;
  padding: 14px 16px;
  font-size: 16px;
  box-sizing: border-box;
}

#popupConsultas .form-consulta textarea{
  min-height: 160px;
  resize: vertical;
}

#popupConsultas .form-consulta .btn-socio{
  width: 100%;
  margin-top: 6px;
  display: inline-block !important;
  text-align: center;
}

#popupConsultas .popup-socio-cerrar{
  z-index: 20;
}
#popupConsultas .form-consulta input,
#popupConsultas .form-consulta textarea{
  background: #0f1f3a;   /* antes era muy oscuro */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
#popupConsultas .form-consulta input:focus,
#popupConsultas .form-consulta textarea:focus{
  border: 1px solid rgba(0,255,255,0.6);
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
}
#popupConsultas .form-consulta input,
#popupConsultas .form-consulta textarea{
  transition: all .2s ease;
}

#popupConsultas .form-consulta .btn-socio:hover{
  transform: translateY(-2px);
}
#popupConsultas .popup-socio-cerrar{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
#contacta .contact-box{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#contacta .contact-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
  padding:10px 14px;
  border:1px solid rgba(0,255,255,.18);
  border-radius:18px;
  background:rgba(20,18,50,.55);
  box-sizing:border-box;
}

#contacta .contact-label{
  color:#ffffff;
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
}

#contacta .contact-email-link{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(0,255,255,.10);
  color:#19f5e6;
  font-weight:800;
  font-size:17px;
  line-height:1.2;
  text-decoration:none;
  word-break:break-word;
  max-width:100%;
}

#contacta .contact-email-link:hover{
  text-decoration:underline;
}

#contacta .btn-whatsapp{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  background:#39e75f;
  color:#001b08;
  font-weight:800;
  text-decoration:none;
}

#contacta .btn-whatsapp:hover{
  transform:translateY(-1px);
}

#contacta .contact-social{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  padding:10px 14px 14px;
  border:1px solid rgba(0,255,255,.18);
  border-radius:18px;
  background:rgba(20,18,50,.55);
  box-sizing:border-box;
}

#contacta .social-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

#contacta .social-links a{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(0,255,255,.16);
  color:#ffffff;
  text-decoration:none;
  font-size:24px;
}

#contacta .social-links a:hover{
  transform:translateY(-2px);
  box-shadow:0 0 14px rgba(0,255,255,.22);
}
#contacta .contact-line{
  position: relative;
  z-index: 1;
}

#contacta .contact-email-link{
  position: relative;
  z-index: 20;
  display: inline-block;
  pointer-events: auto !important;
  cursor: pointer;
  text-decoration: none;
}

#contacta .contact-email-link:hover{
  text-decoration: underline;
}
#contacta .social-links a{
  position: relative;
  z-index: 50;
  pointer-events: auto !important;
  cursor: pointer;
}
#contacta .social-links a{
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
  cursor: pointer;
}
/* 🔥 REDES PRO */
#contacta .social-links a{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(0,255,255,.15);
  color:#fff;
  font-size:22px;
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

/* ✨ HOVER GENERAL */
#contacta .social-links a:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 0 18px rgba(0,255,255,.25);
}

/* 🎨 COLORES POR RED */
#contacta .social-links a:nth-child(1):hover{ /* Facebook */
  color:#1877f2;
  box-shadow:0 0 20px rgba(24,119,242,.6);
}

#contacta .social-links a:nth-child(2):hover{ /* Instagram */
  color:#e1306c;
  box-shadow:0 0 20px rgba(225,48,108,.6);
}

#contacta .social-links a:nth-child(3):hover{ /* YouTube */
  color:#ff0000;
  box-shadow:0 0 20px rgba(255,0,0,.6);
}

#contacta .social-links a:nth-child(4):hover{ /* X */
  color:#ffffff;
  box-shadow:0 0 20px rgba(255,255,255,.4);
}

#contacta .social-links a:nth-child(5):hover{ /* TikTok */
  color:#00f2ea;
  box-shadow:0 0 20px rgba(0,242,234,.6);
}

#contacta .social-links a:nth-child(6):hover{ /* Web */
  color:#00f5d4;
  box-shadow:0 0 20px rgba(0,245,212,.6);
}
#contacta .social-links a::before{
  content:"";
  position:absolute;
  width:120%;
  height:120%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.2), transparent);
  transform:rotate(25deg);
  left:-120%;
  transition:.5s;
}

#contacta .social-links a:hover::before{
  left:120%;
}
#contacta .contact-email-link{
  font-size:18px;
  letter-spacing:0.5px;
  box-shadow:0 0 12px rgba(0,255,255,.2);
}

#contacta .contact-email-link:hover{
  box-shadow:0 0 18px rgba(0,255,255,.4);
}
.footer-visits-bottom{
  margin-top: 14px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer-visits-bottom span{
  font-family: monospace;
  letter-spacing: 3px;
  color: #00ffe1;
}
.footer{
  text-align: center;
}

.footer-copy{
  margin-bottom: 10px;
}

.footer-visits-bottom{
  margin-top: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer-visits-bottom span{
  font-family: monospace;
  letter-spacing: 3px;
  color: #00ffe1;
}
/* FOOTER CENTRADO */
.footer{
  width: 100%;
  text-align: center;
  margin-top: 18px;
}

.footer-copy{
  text-align: center !important;
  line-height: 1.7;
}

.footer-visits-bottom{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.footer-visits-bottom #contador{
  font-family: monospace;
  letter-spacing: 3px;
  color: #00ffe1;
}

.vis-ico{
  display: inline-flex;
  align-items: center;
}
.footer-visits{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
/* ===============================
   FOOTER NUEVO ABAJO DEL TODO
=============================== */
.footer-rco{
  width: 100%;
  margin-top: 40px;
  padding: 24px 18px 30px;
  text-align: center;
  font-size: 13px;
  color: #d7d7d7;
  border-top: 1px solid rgba(255,255,255,.08);
  clear: both;
}
.footer-rco{
  width:100%;
  margin-top:60px;
  padding:30px 20px 40px;
  text-align:center;
  font-size:13px;
  color:#cfcfcf;

  border-top:1px solid rgba(0,255,255,.15);
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,255,255,.03));
}

.footer-rco a{
  color:#00f5d4;
  text-decoration:none;
  font-weight:600;
}

.footer-rco a:hover{
  text-shadow:0 0 8px #00f5d4;
}

.footer-links{
  margin:10px 0;
}

.footer-visitas{
  margin-top:14px;
  color:#00f5d4;
  font-weight:700;
  letter-spacing:3px;
  font-family:monospace;
}
.footer-rco{
  width: 100%;
  margin-top: 60px;
  padding: 30px 20px 40px;
  text-align: center;
  font-size: 13px;
  color: #cfcfcf;
  border-top: 1px solid rgba(0,255,255,.15);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,255,255,.03));
  box-shadow: 0 -10px 40px rgba(0,255,255,.05);
}

.footer-rco a{
  color: #00f5d4;
  text-decoration: none;
  font-weight: 600;
}

.footer-rco a:hover{
  text-shadow: 0 0 8px #00f5d4;
}

.footer-links{
  margin: 10px 0;
}

.footer-visitas{
  margin-top: 14px;
  color: #00f5d4;
  font-weight: 700;
  letter-spacing: 3px;
  font-family: monospace;
}
#contacta{
  margin-bottom: 60px;
}

.footer-rco{
  width: 100%;
  margin-top: 70px;
  padding: 34px 20px 42px;
  text-align: center;
  font-size: 13px;
  color: #cfcfcf;
  border-top: 1px solid rgba(0,255,255,.15);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,255,255,.03));
  box-shadow: 0 -10px 40px rgba(0,255,255,.05);
}

.footer-rco p{
  margin: 8px 0;
}

.footer-rco a{
  color: #00f5d4;
  text-decoration: none;
  font-weight: 600;
}

.footer-rco a:hover{
  text-shadow: 0 0 8px #00f5d4;
}

.footer-links{
  margin: 12px 0;
}

.footer-visitas{
  margin-top: 16px;
  color: #00f5d4;
  font-weight: 700;
  letter-spacing: 3px;
  font-family: monospace;
}
.footer-visitas{
  margin-top: 16px;
  color: #00f5d4;
  font-weight: 700;
  letter-spacing: 4px;
  font-family: monospace;
  text-shadow: 0 0 8px rgba(0,255,255,.6);
}
.footer-rco{
  position: relative;
  overflow: hidden;
}

.footer-rco::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 400px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #00f5d4, transparent);
  opacity: .6;
}
/* SUBIR MENÚ LATERAL */
.sidebar{
  margin-top: -20px;
}
.sidebar{
  margin-top: -10px;  /* poco */
  /* margin-top: -20px; medio */
  /* margin-top: -30px; más arriba */
}
/* AJUSTE FINO MENÚ LATERAL */
.sidebar{
  margin-top: -12px;
}
.sidebar{
  margin-top: -8px;
}
/* =========================
   CONTACTA - EMAIL PRO
========================= */
#contacta .contact-line{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:18px 20px;
  border:1px solid rgba(0,255,255,.22);
  border-radius:22px;
  background:rgba(7,12,35,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

#contacta .contact-label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:130px;
  font-size:18px;
  font-weight:800;
  color:#ffffff;
  white-space:nowrap;
}

#contacta .btn-email{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:14px;
  background:linear-gradient(90deg, #12d8ff 0%, #7b61ff 55%, #ff2bd6 100%);
  color:#ffffff !important;
  font-size:16px;
  font-weight:800;
  text-decoration:none !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 14px rgba(18,216,255,.22),
    0 0 24px rgba(255,43,214,.14);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#contacta .btn-email i{
  font-size:15px;
}

#contacta .btn-email:hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 18px rgba(18,216,255,.32),
    0 0 32px rgba(255,43,214,.22);
}

#contacta .btn-email:active{
  transform:scale(.98);
}

/* móvil */
@media (max-width: 700px){
  #contacta .contact-line{
    align-items:flex-start;
  }

  #contacta .btn-email{
    width:100%;
    justify-content:center;
  }
}
.btn-socio:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.4);
}
.btn-socio{
  cursor: pointer;
}
.btn-socio{
  transition: all 0.3s ease;
}
/* =========================
   ZONA USUARIOS
========================= */
#zona-usuarios .zona-usuarios-botones{
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:18px;
  margin-top:20px;
}

#zona-usuarios .zona-usuarios-ayuda{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(0,255,255,.05);
  border:1px solid rgba(0,255,255,.14);
  color:#cfd8ff;
  line-height:1.6;
  box-shadow:0 0 18px rgba(0,255,255,.06) inset;
}

#zona-usuarios .btn-socio{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  font-size:18px;
  border-radius:18px;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

#zona-usuarios .btn-socio:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 20px rgba(0,255,255,.28);
  filter:brightness(1.04);
}

#zona-usuarios .btn-soporte{
  background:linear-gradient(90deg, #12d8ff 0%, #6f8cff 50%, #d92bff 100%);
  color:#fff;
}

@media (max-width: 900px){
  #zona-usuarios .zona-usuarios-botones{
    grid-template-columns:1fr;
  }
}
#zona-admin .zona-usuarios-botones{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:18px;
  margin-top:20px;
}

#zona-admin .btn-admin{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 22px;
  border-radius:18px;
  font-weight:800;
  font-size:18px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(90deg,#18d7ff 0%, #6f8cff 50%, #e029ff 100%);
  box-shadow:0 0 18px rgba(0,255,255,.18);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

#zona-admin .btn-admin:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 24px rgba(0,255,255,.30);
  filter:brightness(1.05);
}

#zona-admin .zona-usuarios-ayuda{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(0,255,255,.05);
  border:1px solid rgba(0,255,255,.14);
  color:#cfd8ff;
  line-height:1.6;
}

@media (max-width: 980px){
  #zona-admin .zona-usuarios-botones{
    grid-template-columns:1fr;
  }
}
#zona-admin .zona-usuarios-botones{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.final-mail{
  justify-content:center;
  margin-top:25px;
}

.btn-mail{
  background: linear-gradient(90deg,#00f5d4,#00bbf9);
  color:#001;
  font-weight:700;
}

.btn-mail:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #00f5d4;
}
.final-mail{
  justify-content:center;
  margin-top:20px;
}

.btn-mail{
  background: linear-gradient(90deg,#00f5d4,#00bbf9);
  color:#001;
  font-weight:700;
}

.btn-mail:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #00f5d4;
}
.zona-usuarios-botones{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.final-mail{
  justify-content:center;
  margin-top:20px;
}

.btn-mail{
  background: linear-gradient(90deg,#00f5d4,#00bbf9);
  color:#001;
  font-weight:700;
}

.btn-mail:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #00f5d4;
}
.contact-social{
  text-align:center;
  margin-top:20px;
}

.social-links{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:8px;
}

.social-links a{
  font-size:20px;
  color:#00f5d4;
  transition:.3s;
}

.social-links a:hover{
  transform:scale(1.2);
  color:#fff;
}
.contact-social{
  text-align:center;
  padding:18px 10px;
}

.contact-social .contact-label{
  margin-bottom:8px;
  font-weight:600;
  opacity:.8;
}

.social-links{
  display:flex;
  justify-content:center;
  gap:16px;
}

.social-links a{
  font-size:22px;
  color:#00f5d4;
  transition:.3s;
}

.social-links a:hover{
  transform:scale(1.25);
  color:#fff;
}
#zona-usuarios{
  margin-top: 0 !important;
}

#zona-usuarios .section-head{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#zona-usuarios .section-title{
  margin-top: 0 !important;
}
#zona-usuarios.card{
  padding-top: 18px !important;
}
#listaAnuncios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

#listaAnuncios .c-item{
  min-height:140px;
}
.cambalache-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
  margin-top:20px;
}
.anuncio-card{
  background: linear-gradient(145deg,#071327,#0b1d3a);
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(0,255,255,.12);
  box-shadow: 0 0 12px rgba(0,255,255,.15);
  transition:.25s;
  position: relative;
  overflow: hidden;
}

.anuncio-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(0,255,255,.08),transparent);
  opacity:0;
  transition:.3s;
}

.anuncio-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 25px rgba(0,255,255,.35);
}

.anuncio-card:hover::before{
  opacity:1;
}

.precio{
  margin-top:10px;
  font-size:18px;
  color:#00f5d4;
  font-weight:bold;
}

.publicar-box{
  margin-top:20px;
  padding:20px;
  text-align:center;
  border:1px dashed rgba(255,255,255,.2);
  border-radius:12px;
  cursor:pointer;
}
/* ===============================
   FORZAR CAMPOS POPUP ANUNCIO
=============================== */
#popupAnuncio .popup-anuncio-body input,
#popupAnuncio .popup-anuncio-body textarea{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(0,255,255,.28) !important;
  border-radius: 14px !important;
  background: #12264a !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-shadow: inset 0 0 8px rgba(0,0,0,.55) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#popupAnuncio .popup-anuncio-body textarea{
  min-height: 130px !important;
  resize: vertical !important;
}

#popupAnuncio .popup-anuncio-body input::placeholder,
#popupAnuncio .popup-anuncio-body textarea::placeholder{
  color: rgba(255,255,255,.72) !important;
  opacity: 1 !important;
}

#popupAnuncio .popup-anuncio-body input:focus,
#popupAnuncio .popup-anuncio-body textarea:focus{
  background: #17305c !important;
  border-color: #00f5d4 !important;
  box-shadow: 0 0 12px rgba(0,255,255,.45) !important;
}
#popupAnuncio .popup-anuncio-body{
  padding: 22px 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
#popupAnuncio{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(6px) !important;
}

#popupAnuncio .popup-anuncio-box{
  width: min(92vw, 760px) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: 0 !important;
  background: #071327 !important;
  border: 1px solid rgba(0,255,255,.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 30px rgba(0,255,255,.18) !important;
}

#popupAnuncio .popup-anuncio-head{
  padding: 22px 24px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

#popupAnuncio .popup-anuncio-body{
  padding: 22px 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
/* ===============================
   POPUP ANUNCIO LIMPIO
=============================== */
#popupAnuncio{
  position: fixed !important;
  inset: 0 !important;
  display: none;
  z-index: 999999 !important;
}

#popupAnuncio[style*="block"],
#popupAnuncio[style*="flex"]{
  display: block !important;
}

#popupAnuncio .popup-anuncio-overlay{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.80) !important;
  backdrop-filter: blur(6px) !important;
}

#popupAnuncio .popup-anuncio-box{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;

  width: min(92vw, 700px) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: 0 !important;

  background: #071327 !important;
  border: 1px solid rgba(0,255,255,.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 30px rgba(0,255,255,.2) !important;
}

#popupAnuncio .popup-anuncio-head{
  padding: 22px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

#popupAnuncio .popup-anuncio-head h3{
  margin: 0 !important;
  font-size: 26px !important;
  color: #fff !important;
}

#popupAnuncio .popup-anuncio-body{
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#popupAnuncio .popup-anuncio-body input,
#popupAnuncio .popup-anuncio-body textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,255,255,.25) !important;
  background: #12264a !important;
  color: #fff !important;
  font-size: 16px !important;
  outline: none !important;
}

#popupAnuncio .popup-anuncio-body textarea{
  min-height: 140px !important;
  resize: vertical !important;
}

#popupAnuncio .popup-anuncio-cerrar{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 22px !important;
  cursor: pointer !important;
}
/* BOTÓN SUBIR IMAGEN */
.upload-img{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(0,255,255,.35);
  background: #12264a;
  color: #00f5d4;
  cursor: pointer;
  transition: .25s;
  font-size: 15px;
}

.upload-img:hover{
  background: #17305c;
  box-shadow: 0 0 12px rgba(0,255,255,.35);
}

/* ocultar input real */
.upload-img input{
  display: none;
}

/* PREVIEW */
#previewImagen{
  display: none;
  width: 100%;
  border-radius: 14px;
  margin-top: 10px;
  max-height: 200px;
  object-fit: cover;
  border: 1px solid rgba(0,255,255,.2);
}
.upload-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #12264a;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,255,255,.35);
}

.upload-btn{
  padding: 10px 16px;
  background: linear-gradient(90deg,#00f5d4,#8a2be2);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: .25s;
}

.upload-btn:hover{
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,255,255,.4);
}

#nombreArchivo{
  font-size: 13px;
  color: #ccc;
}

/* ocultar input real */
#imagenAnuncio{
  display: none;
}
.c-empty {
  text-align: center;
  font-size: 18px;
  opacity: 0.8;
}

.c-empty span {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}
.c-item.empty{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  cursor: pointer;
}

.c-empty{
  text-align: center;
  color: rgba(255,255,255,.75);
}

.c-empty span{
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
  color: #00f5d4;
}

.c-empty p{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.c-item.empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  cursor:pointer;
  border:1px dashed rgba(0,255,255,.2);
  border-radius:18px;
  transition:.25s;
  background:rgba(0,255,255,.03);
}

.c-item.empty:hover{
  border:1px solid #00f5d4;
  box-shadow:0 0 18px rgba(0,255,255,.25);
  transform:scale(1.02);
}

.c-empty{
  text-align:center;
}

.c-empty span{
  display:block;
  font-size:42px;
  color:#00f5d4;
  margin-bottom:10px;
}

.c-empty p{
  font-size:18px;
  font-weight:600;
  color:#fff;
  opacity:.9;
}
.c-empty p{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:#00f5d4; /* 🔥 antes era blanco */
  text-shadow:0 0 8px rgba(0,255,255,.4);
}
.c-empty span{
  display:block;
  font-size:42px;
  color:#00f5d4;
  margin-bottom:10px;
  text-shadow:0 0 12px rgba(0,255,255,.6);
}
.c-empty span{
  animation: brillo 2s infinite alternate;
}

@keyframes brillo{
  from{ opacity:.6; }
  to{ opacity:1; }
}
.cambalache-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
.c-item.empty:hover{
  transform:scale(1.03);
  box-shadow:0 0 25px rgba(0,255,255,.35);
  background:rgba(0,255,255,.05);
}
/* ===============================
   POPUP ANUNCIO
=============================== */
.popup-anuncio{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.popup-anuncio-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
}

/* CAJA */
.popup-anuncio-box{
  position: relative;
  max-width: 520px;
  margin: 8% auto;
  background: linear-gradient(180deg,#071327,#04101f);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 0 25px rgba(0,255,255,.15);
  border: 1px solid rgba(0,255,255,.2);
}

/* BOTÓN CERRAR */
.popup-anuncio-cerrar{
  position: absolute;
  right: 14px;
  top: 14px;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
}

/* TÍTULO */
.popup-anuncio-head h3{
  margin: 0 0 16px;
  color: #fff;
}

/* BODY */
.popup-anuncio-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* INPUTS */
.popup-anuncio-body input,
.popup-anuncio-body textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,255,.2);
  background: #0a1f3d;
  color: #fff;
  outline: none;
  font-size: 14px;
}

.popup-anuncio-body textarea{
  min-height: 90px;
  resize: vertical;
}

/* INPUT FILE */
#imagenAnuncio{
  background: #071327;
  padding: 10px;
  border-radius: 10px;
  color: #aaa;
  cursor: pointer;
}

/* PREVIEW */
.preview-box{
  font-size: 12px;
  color: #aaa;
}

.preview-box img{
  margin-top: 10px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,255,255,.25);
}

/* BOTÓN PUBLICAR */
.btn-publicar-anuncio{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(90deg,#00f5d4,#9b5cff);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

.btn-publicar-anuncio:hover{
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(0,255,255,.4);
}

/* ===============================
   TARJETAS CAMBALACHE
=============================== */
.c-item{
  background: #071327;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,255,255,.1);
  transition: .2s;
}

.c-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 0 15px rgba(0,255,255,.2);
}

/* IMAGEN */
.c-img{
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* INFO */
.c-info{
  padding: 14px;
}

.c-info h3{
  margin: 0 0 6px;
  color: #fff;
}

.c-info p{
  font-size: 13px;
  color: #aaa;
}

.c-precio{
  margin-top: 8px;
  font-weight: 700;
  color: #00f5d4;
}

/* BOTÓN VACÍO */
.c-item.empty{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  cursor: pointer;
  border: 2px dashed rgba(0,255,255,.2);
}

.c-empty{
  text-align: center;
  color: #00f5d4;
}

.c-empty span{
  font-size: 28px;
  display: block;
}
#imagenAnuncio{
  display:none;
}
.btn-file{
  display: block;
  padding: 12px;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(90deg,#00f5d4,#00bbf9);
  color: #001;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

.btn-file:hover{
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(0,255,255,.4);
}
#zona-admin .muted{
  font-size:16px;
  line-height:1.6;
  color:#cfe8ff;
  margin:14px 0 20px;
}

.zona-usuarios-botones{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:10px;
}

.btn-admin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:210px;
  padding:14px 20px;
  border-radius:14px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(90deg, #0ea5e9, #d946ef);
  box-shadow:0 0 14px rgba(0,255,255,.15);
  transition:all .25s ease;
}

.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(0,255,255,.28);
}

#zona-admin .section-title{
  font-size:28px;
  font-weight:800;
}

#zona-admin .breadcrumbs{
  font-size:14px;
  color:#9fdcff;
}
#zona-admin{
  padding: 22px !important;
}

#zona-admin .section-title{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1px;
}

#zona-admin .breadcrumbs{
  font-size: 14px;
}

.admin-intro{
  color: #d7e9ff;
  font-size: 17px;
  line-height: 1.7;
  margin: 16px 0 24px;
}

.admin-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.admin-card-link{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 22px;
  border-radius: 20px;
  text-decoration: none;
  border: 1px solid rgba(0,255,255,.22);
  background:
    linear-gradient(135deg, rgba(0,195,255,.16), rgba(255,0,200,.14)),
    rgba(255,255,255,.03);
  box-shadow: 0 0 18px rgba(0,255,255,.10);
  transition: .25s ease;
  cursor: pointer;
  color: #fff;
}

.admin-card-link:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 26px rgba(0,255,255,.20);
  border-color: rgba(0,255,255,.38);
}

.admin-card-icon{
  font-size: 32px;
  margin-bottom: 12px;
}

.admin-card-title{
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #ffffff;
}

.admin-card-text{
  font-size: 15px;
  line-height: 1.5;
  color: #cfe6ff;
}

button.admin-card-link{
  font-family: inherit;
  text-align: left;
}

@media (max-width: 900px){
  .admin-grid{
    grid-template-columns: 1fr;
  }
}
.admin-card-link{
  position: relative;
  overflow: hidden;
}

.admin-card-link::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(0,255,255,.2), transparent);
  opacity: 0;
  transition: .4s;
}

.admin-card-link:hover::before{
  opacity: 1;
}

.admin-card-link:hover{
  transform: translateY(-6px) scale(1.02);
}
.admin-card-icon{
  font-size: 32px;
}
.admin-card-icon{
  font-size: 42px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 6px rgba(0,255,255,.6));
}
#zona-admin{
  border: 1px solid rgba(0,255,255,.2);
  box-shadow: 0 0 30px rgba(0,255,255,.08);
}
.admin-card-link{
  position: relative;
  overflow: hidden;
  transition: .28s ease;
}

.admin-card-link::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(0,255,255,.16), transparent);
  opacity: 0;
  transition: .35s ease;
  pointer-events: none;
}

.admin-card-link:hover::before{
  opacity: 1;
}

.admin-card-link:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 28px rgba(0,255,255,.18);
}

.admin-card-icon{
  font-size: 42px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 6px rgba(0,255,255,.55));
}

#zona-admin{
  border: 1px solid rgba(0,255,255,.20);
  box-shadow: 0 0 30px rgba(0,255,255,.08);
}
.admin-card-link{
  position: relative;
  overflow: hidden;
}
.admin-card-link::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 140px at var(--light-pos-x, 50%) var(--light-pos-y, 50%),
    rgba(0,255,255,.18) 0%,
    rgba(0,255,255,.10) 28%,
    rgba(0,255,255,.04) 45%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.admin-card-link:hover::after{
  opacity: 1;
}
.admin-card-link:hover::after{
  opacity: 1;
}
.admin-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.admin-card-link{
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.admin-card-title{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

.admin-card-text{
  font-size: 14px;
  color: #bfe6ff;
}
.admin-card-link:hover{
  transform: translateY(-5px);
  border-color: rgba(0,255,255,.4);
}
.admin-card-link{
  backdrop-filter: blur(6px);
}
/* ===============================
   GRID ADMIN
=============================== */
.admin-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(240px, 1fr));
  gap:18px;
  margin-top:18px;
}

/* ===============================
   TARJETAS ADMIN
=============================== */
.admin-card-link{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:160px;
  padding:22px;
  border-radius:20px;
  text-decoration:none;
  color:#fff;
  position:relative;
  overflow:hidden;

  border:1px solid rgba(0,255,255,.25);

  background:
    linear-gradient(135deg, rgba(0,195,255,.18), rgba(255,0,200,.15)),
    rgba(255,255,255,.04);

  box-shadow:
    0 0 18px rgba(0,255,255,.12),
    inset 0 0 10px rgba(0,255,255,.05);

  transition:.28s ease;
  backdrop-filter:blur(6px);
}

/* ===============================
   HOVER PRO
=============================== */
.admin-card-link:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(0,255,255,.5);
  box-shadow:
    0 0 25px rgba(0,255,255,.25),
    0 0 50px rgba(255,0,200,.15);
}

/* ===============================
   ICONO
=============================== */
.admin-card-icon{
  font-size:42px;
  margin-bottom:14px;
  filter:drop-shadow(0 0 8px rgba(0,255,255,.6));
}

/* ===============================
   TITULO
=============================== */
.admin-card-title{
  font-size:22px;
  font-weight:800;
  margin-bottom:6px;
}

/* ===============================
   TEXTO
=============================== */
.admin-card-text{
  font-size:14px;
  color:#bfe6ff;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 900px){
  .admin-grid{
    grid-template-columns:1fr;
  }
}
.btn-borrar-anuncio{
  margin-top:10px;
  background:#ff0055;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}

.btn-borrar-anuncio:hover{
  background:#ff2a6d;
}

.c-img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px 12px 0 0;
  display:block;
}
.c-acciones{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.btn-editar-anuncio,
.btn-borrar-anuncio{
  border:none;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}

.btn-editar-anuncio{
  background:#00cfff;
  color:#001b2b;
}

.btn-editar-anuncio:hover{
  background:#3edcff;
}

.btn-borrar-anuncio{
  background:#ff0055;
  color:#fff;
}

.btn-borrar-anuncio:hover{
  background:#ff2a6d;
}

.c-img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px 12px 0 0;
  display:block;
}
.cambalache-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.c-item{
  background:#071327;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 0 12px rgba(0,255,255,.08);
  transition:.3s;
  position:relative;
}

.c-item:hover{
  transform:translateY(-5px) scale(1.01);
  box-shadow:0 0 25px rgba(0,255,255,.25);
}

.c-img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.c-info{
  padding:14px;
}

.c-info h3{
  font-size:16px;
  margin-bottom:6px;
  color:#00f5d4;
}

.c-info p{
  font-size:13px;
  opacity:.8;
  margin-bottom:10px;
}

.c-precio{
  font-size:18px;
  font-weight:700;
  color:#00ff88;
  margin-bottom:10px;
}

.c-acciones{
  display:flex;
  gap:8px;
}

.btn-editar-anuncio,
.btn-borrar-anuncio{
  flex:1;
  border:none;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}

.btn-editar-anuncio{
  background:#00cfff;
  color:#002233;
}

.btn-borrar-anuncio{
  background:#ff0055;
  color:#fff;
}

.c-item.empty{
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed rgba(0,255,255,.2);
  cursor:pointer;
  min-height:160px;
}

.c-empty{
  text-align:center;
  opacity:.7;
}
#listaAnuncios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
  align-items:stretch;
}

.c-item{
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(0,255,255,.15);
}

.c-item.empty{
  min-height:160px;
}

.c-info{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.c-info h3{
  margin:0;
  font-size:30px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.c-info p{
  margin:0;
  line-height:1.5;
}

.c-precio{
  display:inline-block;
  width:max-content;
  padding:8px 14px;
  border-radius:10px;
  background:#00ff9d;
  color:#002b1e;
  font-size:18px;
  font-weight:800;
  box-shadow:0 0 14px rgba(0,255,157,.25);
}

.c-item.empty .c-empty span{
  font-size:42px;
  display:block;
  margin-bottom:8px;
}

.c-item.empty .c-empty p{
  margin:0;
  font-size:26px;
  font-weight:700;
}
.c-img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid rgba(0,255,255,.1);
}
.btn-borrar-anuncio{
  background:#ff0055;
  color:#fff;
  border:none;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  width:100%;
  transition:.2s;
}

.btn-borrar-anuncio:hover{
  background:#ff2a6d;
  transform:scale(1.03);
}
.c-img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.btn-borrar-anuncio{
  margin-top:10px;
  background:#ff0055;
  color:#fff;
  border:none;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
.btn-borrar-anuncio{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:10px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:#ff4d6d;
  color:#fff;
  font-weight:700;
}
/* AMIGOS POR LA RADIO */
#amigos-radio .amigos-radio-lista{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

#amigos-radio .amigo-radio-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(0,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition:.25s ease;
}

#amigos-radio .amigo-radio-item:hover{
  transform:translateY(-2px);
  background:rgba(0,255,255,.12);
  box-shadow:0 0 14px rgba(0,255,255,.15);
}

#amigos-radio .amigo-radio-logo{
  width:64px;
  height:64px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:12px;
  background:#fff;
  padding:4px;
}

#amigos-radio .amigo-radio-texto{
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
}

@media (max-width: 640px){
  #amigos-radio .amigo-radio-item{
    gap:10px;
    padding:10px 12px;
  }

  #amigos-radio .amigo-radio-logo{
    width:54px;
    height:54px;
  }

  #amigos-radio .amigo-radio-texto{
    font-size:15px;
  }
}
/* AMIGOS POR LA RADIO */
#amigos-radio .amigos-radio-lista{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

#amigos-radio .amigo-radio-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(0,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition:.25s ease;
}

#amigos-radio .amigo-radio-item:hover{
  transform:translateY(-2px);
  background:rgba(0,255,255,.12);
  box-shadow:0 0 14px rgba(0,255,255,.15);
}

#amigos-radio .amigo-radio-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:12px;
  background:#fff;
  padding:4px;
}

#amigos-radio .amigo-radio-texto{
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
}

#amigos-radio small{
  font-weight:400;
  opacity:.7;
  font-size:13px;
}

/* MÓVIL */
@media (max-width: 640px){
  #amigos-radio .amigo-radio-logo{
    width:46px;
    height:46px;
  }

  #amigos-radio .amigo-radio-texto{
    font-size:14px;
  }
}
/* LISTA */
#amigos-radio .amigos-radio-lista{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

/* ITEM */
.amigo-radio-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:16px;
  background:rgba(0,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:.25s;
  cursor:pointer;
}

.amigo-radio-item:hover{
  transform:translateY(-2px);
  background:rgba(0,255,255,.12);
}

/* LOGO */
.amigo-radio-logo{
  width:50px;
  height:50px;
  object-fit:contain;
  background:#fff;
  border-radius:10px;
  padding:4px;
}

/* TEXTO */
.amigo-radio-texto{
  color:#fff;
  font-weight:700;
}

/* BOTÓN + */
.amigo-add{
  text-align:center;
  padding:16px;
  border-radius:16px;
  border:2px dashed rgba(0,255,255,.3);
  cursor:pointer;
  color:#00f5d4;
}

.amigo-add:hover{
  background:rgba(0,255,255,.1);
}
.amigo-radio-item{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.amigo-radio-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:16px;
  background:rgba(0,255,255,.06);
}

.amigo-radio-qr{
  width:60px;
  height:60px;
  margin-left:auto;
  border-radius:8px;
}
.amigo-radio-qr{
  width:60px;
  height:60px;
  margin-left:auto;
  border-radius:8px;
  background:#fff;
  padding:4px;
}
.amigo-radio-qr{
  width:60px;
  height:60px;
  margin-left:auto;
  border-radius:8px;
  background:#fff;
  padding:4px;
}
/* ===============================
   AMIGOS POR LA RADIO
=============================== */
.amigos-radio-lista{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
}

.amigo-radio-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(90deg, rgba(0,30,70,.55), rgba(0,10,40,.45));
  border:1px solid rgba(0,255,255,.12);
}

.amigo-radio-logo{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:14px;
  flex-shrink:0;
  background:#fff;
}

.amigo-radio-texto{
  flex:1;
  color:#fff;
  font-weight:700;
  line-height:1.25;
}

.amigo-radio-qr{
  width:84px;
  height:84px;
  object-fit:contain;
  background:#fff;
  padding:6px;
  border-radius:14px;
  flex-shrink:0;
}

.btn-add-amigo{
  width:100%;
  margin-top:16px;
  padding:14px 18px;
  border-radius:16px;
  border:1px dashed rgba(0,255,255,.4);
  background:rgba(0,20,50,.25);
  color:#00f5d4;
  font-weight:700;
  font-size:22px;
  cursor:pointer;
  transition:.25s;
}

.btn-add-amigo:hover{
  background:rgba(0,255,255,.08);
  box-shadow:0 0 16px rgba(0,255,255,.18);
}

/* ===============================
   POPUP AMIGO
=============================== */
#popupAmigo{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}

#popupAmigo .popup-socio-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

#popupAmigo .popup-socio-box{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(92%, 520px);
  max-width:520px;
  background:#08142a;
  border:1px solid rgba(0,255,255,.18);
  border-radius:18px;
  box-shadow:0 0 30px rgba(0,0,0,.45);
  z-index:10000;
}

#popupAmigo .popup-socio-cerrar{
  position:absolute;
  top:10px;
  right:12px;
  background:none;
  border:none;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

#popupAmigo .popup-socio-head{
  padding:22px 22px 12px;
}

#popupAmigo .form-consulta{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 22px 22px;
}

#popupAmigo .form-consulta input,
#popupAmigo .form-consulta button{
  width:100%;
  box-sizing:border-box;
}
/* 🔥 FORZAR QR VISIBLE */
.amigo-radio-qr{
  width:90px !important;
  height:90px !important;
  min-width:90px;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  object-fit:contain;
  background:#fff;
  padding:6px;
  border-radius:12px;
}

/* 🔥 ASEGURAR LAYOUT */
.amigo-radio-item{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* 🔥 TEXTO NO SE COMA EL QR */
.amigo-radio-texto{
  flex:1;
  min-width:0;
}
.qr-wrap{
  width:90px;
  height:90px;
  flex-shrink:0;
}

.qr-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.qr-wrap{
  width:90px;
  height:90px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  padding:6px;
}

.qr-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.amigos-radio-lista{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
}

.amigo-radio-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(90deg, rgba(0,30,70,.55), rgba(0,10,40,.45));
  border:1px solid rgba(0,255,255,.12);
}

.amigo-radio-logo{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:14px;
  background:#fff;
  flex-shrink:0;
}

.amigo-radio-texto{
  flex:1;
  color:#fff;
  font-weight:700;
  line-height:1.25;
}

.qr-wrap{
  width:90px;
  height:90px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  padding:6px;
}

.qr-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.btn-add-amigo{
  width:100%;
  margin-top:16px;
  padding:14px 18px;
  border-radius:16px;
  border:1px dashed rgba(0,255,255,.4);
  background:rgba(0,20,50,.25);
  color:#00f5d4;
  font-weight:700;
  font-size:22px;
  cursor:pointer;
}

#popupAmigo{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}

#popupAmigo .popup-socio-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

#popupAmigo .popup-socio-box{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(92%, 520px);
  background:#08142a;
  border:1px solid rgba(0,255,255,.18);
  border-radius:18px;
  z-index:10000;
}
.qr-wrap{
  width:90px;
  height:90px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  padding:6px;
  overflow:hidden;
}

.amigo-radio-qr{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#fff;
}
.qr-wrap{
  width:110px;
  height:110px;
}
.qr-wrap{
  width:110px;
  height:110px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  padding:6px;
  overflow:hidden;
}

.amigo-radio-qr{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.btn-amigo{
  padding:10px 16px;
  border-radius:12px;
  background:linear-gradient(135deg,#00f5d4,#00bbff);
  color:#001;
  font-weight:700;
  text-decoration:none;
  font-size:14px;
  transition:.2s;
}

.btn-amigo:hover{
  transform:scale(1.05);
  box-shadow:0 0 12px rgba(0,255,255,.6);
}
.amigo-radio-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.btn-amigo{
  flex-shrink:0;
  width:auto !important;
  padding:8px 14px;
  border-radius:10px;
}
.amigo-radio-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(0,255,255,0.04);
  border:1px solid rgba(0,255,255,0.15);
  margin-bottom:10px;
}

/* LOGO */
.amigo-radio-logo{
  width:50px;
  height:50px;
  object-fit:cover;
  border-radius:50%;
}

/* TEXTO */
.amigo-radio-texto{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* BOTÓN */
.btn-amigo{
  width:auto !important;
  padding:8px 16px;
  border-radius:10px;
  background:linear-gradient(90deg,#00f5d4,#00bbf9);
  color:#000;
  font-weight:600;
  text-decoration:none;
  transition:.2s;
}

.btn-amigo:hover{
  transform:scale(1.05);
  box-shadow:0 0 12px #00f5d4;
}
/* ===== AMIGOS POR LA RADIO: ARREGLO FINAL ===== */
#listaAmigosRadio .amigo-radio-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(0,255,255,.04);
  border:1px solid rgba(0,255,255,.14);
  margin-bottom:12px;
}

#listaAmigosRadio .amigo-radio-logo{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:50%;
  flex-shrink:0;
}

#listaAmigosRadio .amigo-radio-texto{
  flex:1;
  min-width:0;
}

#listaAmigosRadio .btn-amigo{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:90px;
  max-width:max-content;
  flex-shrink:0;
  padding:10px 16px !important;
  border-radius:10px;
  background:linear-gradient(90deg,#00f5d4,#19c2ff);
  color:#00131f !important;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:none;
}

#listaAmigosRadio .btn-amigo:hover{
  transform:translateY(-1px);
  box-shadow:0 0 12px rgba(0,245,212,.45);
}

#amigos-radio .amigo-add{
  margin-top:14px;
}
#listaAmigosRadio .amigo-radio-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#listaAmigosRadio .amigo-radio-logo{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

#listaAmigosRadio .amigo-radio-texto{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

#listaAmigosRadio .btn-amigo{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:72px;
  padding:8px 14px !important;
  flex-shrink:0;
}
#listaAmigosRadio .amigo-radio-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(0,255,255,.04);
  border:1px solid rgba(0,255,255,.14);
  margin-bottom:12px;
}

#listaAmigosRadio .amigo-radio-logo{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

#listaAmigosRadio .amigo-radio-texto{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#listaAmigosRadio .btn-amigo{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:78px;
  padding:8px 14px !important;
  border-radius:10px;
  flex-shrink:0;
  white-space:nowrap;
}
/* ===============================
   ACTIVACIONES
=============================== */
.activaciones-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:18px;
}

.activacion-card,
.activacion-qsl{
  background:rgba(0,255,255,.04);
  border:1px solid rgba(0,255,255,.14);
  border-radius:18px;
  padding:16px;
}

.activacion-img{
  width:100%;
  border-radius:14px;
  margin-bottom:10px;
}

/* ===============================
   ACTIVIDADES DE CAMPO
=============================== */
.campo-grid{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.campo-item{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:18px;
  align-items:center;
  padding:16px;
  border-radius:18px;
  background:rgba(0,255,255,.04);
  border:1px solid rgba(0,255,255,.14);
}

.campo-img{
  width:100%;
  max-width:320px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 0 20px rgba(0,0,0,.4);
}

.campo-info h3{
  margin:0 0 10px;
  font-size:24px;
}

.campo-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.btn-campo{
  display:inline-flex;
  padding:10px 16px;
  border-radius:12px;
  background:linear-gradient(90deg,#00f5d4,#19c2ff);
  color:#00131f;
  font-weight:700;
  text-decoration:none;
}

@media (max-width:900px){
  .activaciones-grid{
    grid-template-columns:1fr;
  }

  .campo-item{
    grid-template-columns:1fr;
  }
}
.campo-img{
  width:100%;
  max-width:420px;   /* 👈 tamaño máximo */
  height:auto;
  border-radius:16px;
  object-fit:cover;
  display:block;
}
.campo-item{
  display:grid;
  grid-template-columns:280px 1fr; /* 👈 más pequeño */
  gap:16px;
  align-items:center;
}
.campo-img{
  max-width:300px;
}
/* ===============================
   ACTIVIDADES DE CAMPO
================================ */

.campo-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.campo-item{
  display: flex;
  gap: 16px;
  background: rgba(0,255,255,.05);
  border-radius: 14px;
  padding: 14px;
  align-items: center;
}

/* 🔥 CLAVE → controla el tamaño */
.campo-img{
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

/* TEXTO */
.campo-info h3{
  margin: 0 0 6px;
  color: #00f5d4;
}

.campo-info p{
  margin: 0;
  font-size: 14px;
  opacity: .9;
}
@media(max-width:768px){
  .campo-item{
    flex-direction: column;
    align-items: flex-start;
  }

  .campo-img{
    width: 100%;
    height: 180px;
  }
}
/* ACTIVIDADES DE CAMPO - RETOQUE FINAL */
#actividades-campo .campo-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(0,255,255,.05);
  border:1px solid rgba(0,255,255,.14);
}

#actividades-campo .campo-img{
  width:140px;
  height:90px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
}

#actividades-campo .campo-info{
  flex:1;
}

#actividades-campo .campo-info h3{
  margin:0 0 8px;
  font-size:24px;
  letter-spacing:.5px;
}

#actividades-campo .campo-info p{
  margin:0;
  opacity:.9;
  line-height:1.45;
}
/* ACTIVIDADES DE CAMPO - RETOQUE FINAL */
#actividades-campo .campo-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(0,255,255,.05);
  border:1px solid rgba(0,255,255,.14);
}

#actividades-campo .campo-img{
  width:140px;
  height:90px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
}

#actividades-campo .campo-info{
  flex:1;
}

#actividades-campo .campo-info h3{
  margin:0 0 8px;
  font-size:24px;
  letter-spacing:.5px;
}

#actividades-campo .campo-info p{
  margin:0;
  opacity:.9;
  line-height:1.45;
}
/* META INFO EVENTO */
.campo-meta{
  margin:0;
  font-size:14px;
  opacity:.9;
  line-height:1.5;
}

/* EFECTO HOVER (queda brutal) */
.campo-item{
  transition:.25s;
}

.campo-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,255,255,.15);
}
.campo-meta a{
  color:#00f5d4;
  text-decoration:none;
  margin-left:6px;
}

.campo-meta a:hover{
  text-decoration:underline;
}
.cambalache-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:16px;
}

.c-item.empty{
  min-height:110px;
  border:1px dashed rgba(0,255,255,.35);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:rgba(0,255,255,.03);
}

.c-empty{
  text-align:center;
}

.c-empty span{
  display:block;
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
  color:#00f5d4;
}

.c-empty p{
  margin:0;
  color:#00f5d4;
  font-weight:700;
}
input[type="file"]{
  display:none;
}
.cambalache-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

.c-item{
  background:rgba(0,10,30,.55);
  border:1px solid rgba(0,255,255,.18);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 14px rgba(0,255,255,.08);
}

.c-img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid rgba(0,255,255,.12);
}

.c-info{
  padding:16px;
}

.c-precio{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  background:#00ffc6;
  color:#001b22;
  margin:10px 0 12px;
}
.c-item.empty{
  min-height: 430px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed rgba(0,255,255,.18);
  cursor:pointer;
}
.c-img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid rgba(0,255,255,.12);
}
.c-acciones{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.c-item{
  background:rgba(0,10,30,.55);
  border:1px solid rgba(0,255,255,.18);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 14px rgba(0,255,255,.08);
  display:flex;
  flex-direction:column;
  height:100%;
}
.c-info{
  padding:16px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}

.c-acciones{
  margin-top:auto;
  display:flex;
  gap:10px;
}
.c-item{
  transition:all .25s ease;
}

.c-item:hover{
  transform:translateY(-6px);
  box-shadow:0 0 25px rgba(0,255,255,.25);
}
.c-item.empty{
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed rgba(0,255,255,.25);
  cursor:pointer;
  transition:.25s;
}

.c-item.empty:hover{
  border-color:#00ffc6;
  background:rgba(0,255,255,.05);
}
.cambalache-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}
.c-item{
  display:flex;
  flex-direction:column;
  height:100%;
}
.c-info{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}

.c-precio{
  margin-top:10px;
}

.c-acciones{
  margin-top:auto;
  display:flex;
  gap:10px;
}
.c-info h3{
  min-height:40px;
}

.c-info p{
  min-height:50px;
}
.c-item{
  min-height:420px;
}
.c-item.empty{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.c-info h3{
  min-height:42px;
}

.c-info p{
  min-height:60px;
}
.cambalache-grid{
  align-items:stretch;
}

.c-item{
  height:100%;
  min-height:440px;
}

.c-item.empty{
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.c-info h3{
  min-height:44px;
}

.c-info p{
  min-height:65px;
}
.cambalache-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  align-items:stretch;
}

.c-item{
  min-height:440px;
  height:100%;
  display:flex;
  flex-direction:column;
}

.c-item.empty{
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.c-empty{
  width:100%;
  text-align:center;
}
.c-item.empty{
  min-height:220px;
}
.colaboradores-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.colaborador-bloque.full{
  grid-column:1 / -1;
}
.colaboradores-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.colaborador-bloque.full{
  grid-column:1 / -1;
}
.colaborador-bloque.full img{
  max-width: 400px;
  margin: 0 auto;
  display: block;
}
.colaborador-bloque.full{
  padding-top: 18px;
  padding-bottom: 18px;
}

.colaborador-bloque.full .colab-banner{
  max-width: 420px;
  margin: 0 auto;
  display: block;
}
/* ===============================
   HOVER NEON COLABORADORES
================================= */

.colaborador-bloque{
  transition: all .3s ease;
  position: relative;
}

/* efecto al pasar el ratón */
.colaborador-bloque:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 0 10px rgba(0,255,255,.3),
    0 0 20px rgba(0,255,255,.2),
    0 0 30px rgba(255,0,255,.2);
}

/* brillo interno */
.colaborador-bloque:hover .colab-banner{
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(0,255,255,.5));
}

/* línea del título más viva */
.colaborador-bloque:hover h3{
  color:#00f5d4;
  text-shadow:0 0 6px rgba(0,255,255,.7);
}
#popupContacto{
  position:fixed;
  inset:0;
  z-index:9999;
}

#popupContacto .popup-socio-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

#popupContacto .popup-socio-box{
  position:relative;
  z-index:2;
  width:min(920px,92vw);
  height:min(85vh,760px);
  margin:4vh auto 0;
  background:#071327;
  border:1px solid rgba(0,255,255,.18);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 30px rgba(0,255,255,.18);
}

#popupContacto iframe{
  width:100%;
  height:calc(100% - 70px);
  border:none;
  display:block;
}
.contacta-box{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:18px 0 20px;
}

.btn-contacta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:220px;
  padding:14px 26px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-size:16px;
  font-weight:800;
  color:#06131f;
  background:linear-gradient(90deg,#19d7ff 0%, #a43cff 100%);
  box-shadow:0 0 18px rgba(0,255,255,.28);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-contacta:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 24px rgba(0,255,255,.45);
  filter:brightness(1.05);
}

.btn-contacta:active{
  transform:scale(.98);
}

#contacta .social-links{
  margin-top:18px;
}
.btn-soporte,
.btn-mail{
  display:none !important;
}
.colab-card{
  display:block;
  padding:22px;
  border-radius:22px;
  text-decoration:none;
  color:#fff;
  background:rgba(4, 10, 35, 0.92);
  border:1px solid rgba(0, 200, 255, 0.45);
  box-shadow:0 0 18px rgba(0, 170, 255, 0.18);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.colab-card:hover{
  transform:translateY(-3px);
  box-shadow:0 0 24px rgba(255, 0, 200, 0.22);
  border-color:rgba(255, 0, 200, 0.45);
}

.colab-logo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  margin:0 auto 16px;
  padding:16px;
  border-radius:18px;
  background:rgba(0, 8, 25, 0.95);
  box-shadow:0 0 18px rgba(0, 180, 255, .25);
}

.colab-logo-box img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
  max-height:90px;
  object-fit:contain;
}

.colab-card h3{
  margin:10px 0 12px;
  font-size:1.9rem;
  color:#fff;
}

.colab-card p{
  margin:0 0 14px;
  line-height:1.5;
  color:#d7def7;
}

.btn-colab{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(90deg,#00d9ff,#ff3bd4);
  color:#08111f;
  font-weight:700;
}
.actividades-grid {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.actividad-mini {
  display: flex;
  gap: 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #00eaff22;
  border-radius: 10px;
  padding: 10px;
  align-items: center;
}

.actividad-icono {
  font-size: 22px;
}

.actividad-mini-info h4 {
  margin: 0;
  color: #00eaff;
}

.actividad-mini-info span {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}
.actividad-img-full {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.actividad-img-full img {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  box-shadow: 0 0 15px #00eaff33;
  transition: 0.3s;
}

.actividad-img-full img:hover {
  transform: scale(1.02);
}
.popup-socio-box{
  width: 90%;
  max-width: 900px;
  height: 90vh;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.popup-socio-box iframe{
  flex: 1;
  width: 100%;
  border: none;
}
.popup-socio{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  padding: 20px;
}

.popup-socio-box{
  width: min(1100px, 96vw);
  height: 94vh;
  background: #0b1230;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,255,255,.25);
  position: relative;
}

.popup-socio-head{
  padding: 16px 20px;
  flex-shrink: 0;
}

.popup-socio-box iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  flex: 1;
}

.popup-socio-cerrar{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.contacto-directo{
  padding: 30px;
  text-align: center;
  color: #fff;
}

.btn-contacto-directo{
  display: inline-block;
  margin-top: 18px;
  padding: 14px 26px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  color: #08111f;
  background: linear-gradient(90deg, #00e5ff, #c44dff);
  box-shadow: 0 0 18px rgba(0,229,255,.25);
}
.popup-socio-box{
  width: min(760px, 92vw);
  min-height: 260px;
  height: auto;
  background: #0b1230;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,255,255,.25);
  position: relative;
}

.contacto-directo{
  padding: 36px 30px 42px;
  text-align: center;
  color: #fff;
}
.popup-socio{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  padding: 20px;
}
.zona-usuarios-botones{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.btn-admin{
  display: inline-block;
  padding: 14px 26px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ff7a18, #ff3cac);
  box-shadow: 0 0 18px rgba(255,60,172,.25);
}

.contacto-directo{
  padding: 36px 30px 42px;
  text-align: center;
  color: #fff;
}

.btn-contacto-directo{
  display: inline-block;
  margin-top: 18px;
  padding: 14px 26px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  color: #08111f;
  background: linear-gradient(90deg, #00e5ff, #c44dff);
  box-shadow: 0 0 18px rgba(0,229,255,.25);
}
.zona-usuarios-botones a{
  flex: 1;
  text-align: center;
}
.btn-socio:hover,
.btn-admin:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(0,255,255,.35);
}
.zona-usuarios-botones a{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn-socio:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(0,229,255,.4);
}

.btn-admin:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(255,60,172,.4);
}
.btn-socio,
.btn-admin{
  gap: 8px;
}
.link-chip-large{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: rgba(14, 28, 68, 0.9);
  border: 1px solid rgba(0, 229, 255, 0.22);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.link-chip-large:hover{
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.22);
}
#enlaces-radio{
  margin-top: 24px;
}
.links-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.link-chip-large{
  min-width: 260px;
  text-align: center;
}
.link-chip-large:hover{
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(0,255,255,0.3);
}
.section-title{
  background: linear-gradient(90deg, #00f0ff, #7a5cff, #ff00cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 1px;
}
.section-title{
  background: linear-gradient(90deg, #00f0ff, #7a5cff, #ff00cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(0,255,255,0.3);
}
.section-title{
  color: #00e5ff;
  font-weight: 700;
}
.btn-enlace{
  display:inline-block;
  padding:12px 18px;
  border-radius:10px;
  background:linear-gradient(135deg,#0ff,#0077ff);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 0 10px rgba(0,255,255,0.4);
  transition:0.3s;
}

.btn-enlace:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(0,255,255,0.8);
}
.colab-banner{
  background:#fff;
  padding:8px;
  border-radius:10px;
}
.colab-banner{
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}
.colab-capatres{
  max-height: 125px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
}
.colab-capatres{
  background:#fff;
  padding:6px 12px;
  border-radius:8px;
}
.colab-banner{
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.colab-text{
  font-size: 13px;
  color: #ccc;
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}

.colab-text a{
  color: #00eaff;
  text-decoration: none;
}

.colab-text a:hover{
  text-decoration: underline;
}
/* LIBRO DE GUARDIA PRO */
.dl-libro-guardia {
  border: 1px solid rgba(255, 102, 0, 0.55);
  background:
    linear-gradient(135deg, rgba(255, 102, 0, 0.16), rgba(20, 20, 45, 0.95)),
    rgba(8, 10, 35, 0.95);
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.18);
}

.dl-libro-guardia:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(255, 102, 0, 0.35);
}

.dl-libro-guardia .dl-left img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #ff6600;
  background: #fff;
  padding: 3px;
}

.dl-libro-guardia .dl-title {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.dl-libro-guardia .dl-sub {
  color: #b9bfd6;
}

.dl-libro-guardia .tag {
  background: rgba(255, 102, 0, 0.18);
  border: 1px solid rgba(255, 102, 0, 0.65);
  color: #ffffff;
}

.dl-libro-guardia .btn-download {
  background: linear-gradient(135deg, #ff6600, #ff9d00);
  color: #fff;
  font-weight: 900;
  border-radius: 14px;
  box-shadow: 0 0 14px rgba(255, 102, 0, 0.45);
}

.dl-libro-guardia .btn-download:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
}
/* BADGE NUEVO */
.badge-nuevo {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff6600;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255,102,0,0.7);
}

/* EFECTO HOVER PRO */
.dl-libro-guardia {
  position: relative;
  transition: all 0.3s ease;
}

.dl-libro-guardia:hover {
  transform: translateY(-4px) scale(1.01);
}

/* ZOOM IMAGEN */
.dl-libro-guardia .dl-left img {
  transition: transform 0.3s ease;
}

.dl-libro-guardia:hover .dl-left img {
  transform: scale(1.08);
}

/* BOTÓN ANIMADO */
.dl-libro-guardia .btn-download {
  position: relative;
  overflow: hidden;
}

.dl-libro-guardia .btn-download::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.5s;
}

.dl-libro-guardia .btn-download:hover::after {
  left: 100%;
}

/* CONTADOR */
.contador-descargas {
  margin-top: 6px;
  font-size: 12px;
  color: #aaa;
}
.dl-libro-guardia .dl2-thumb img {
  object-fit: contain;
  background: #fff;
  padding: 4px;
}
.dl-libro-guardia {
  border: 1px solid rgba(255,102,0,0.6);
  box-shadow: 0 0 15px rgba(255,102,0,0.25);
}
.dl2-thumb img {
  object-fit: contain;
  background: #fff;
  padding: 3px;
}
.dl-libro-guardia .dl2-thumb img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  object-position: left top;
  border-radius: 8px;
}
/* ARREGLO ICONO LIBRO */
.dl-libro-guardia .dl2-thumb {
  width: 46px;
  height: 46px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dl-libro-guardia .dl2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mini-libro {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 8px !important;
}
.pdf-thumb {
  background: linear-gradient(135deg, #ff6600, #ff9d00);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdf-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff6600, #ff9d00);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.6);
}
.btn-mapa{
  display:inline-block;
  margin-top:14px;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,#00d9ff,#b94cff);
  box-shadow:0 0 18px rgba(0,217,255,.35);
}

.mapa-buscador{
  margin-top:28px;
  padding:18px;
  border:1px solid rgba(0,217,255,.25);
  border-radius:18px;
  background:rgba(3,8,30,.55);
}

.mapa-buscador h3{
  margin:0 0 12px;
  color:#38d9ff;
  text-transform:uppercase;
  letter-spacing:1px;
}

.mapa-linea{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.mapa-linea input{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:0;
}

.mapa-linea button{
  border:0;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  color:white;
  font-weight:800;
  background:linear-gradient(135deg,#00cfff,#c94cff);
}
.act-info{
  margin-top:14px;
  display:grid;
  gap:8px;
}

.act-info span{
  background:rgba(0,216,255,.08);
  border:1px solid rgba(0,216,255,.25);
  color:#dff8ff;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}

.act-info .qsl-ok{
  border-color:rgba(0,255,150,.45);
  color:#9fffd0;
}

.btn-maps{
  display:inline-block;
  margin-top:10px;
  padding:10px 14px;
  background:linear-gradient(90deg,#00d8ff,#7a5cff);
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-size:13px;
  transition:.2s;
}

.btn-maps:hover{
  transform:scale(1.05);
  box-shadow:0 0 10px rgba(0,216,255,.5);
}
.layout{
  max-width: 1450px !important;
  margin: 0 auto;
  grid-template-columns: 260px 1fr !important;
  gap: 30px !important;
}

.content{
  width: 100% !important;
  max-width: 1200px !important;
}

.card{
  width: 100% !important;
}
.layout{
  max-width: 1450px;
  margin: 0 auto;   /* 🔥 esto es lo importante */
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
}
.layout{
  max-width: 1450px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 35px !important;
}
.content{
  max-width: 1250px !important;
}
.qsl-img{
  max-height: 380px;
  object-fit: cover;
  border-radius: 14px;
}
.qsl-img{
  width:100%;
  max-height:380px;
  object-fit:contain;
  object-position:center;
  border-radius:14px;
}
.qsl-img{
  width:100%;
  height:360px;
  object-fit:cover;
  object-position:center top;
  border-radius:14px;
}
.qsl-thumb{
  display:flex;
  justify-content:center;
}

.qsl-img{
  width:100%;
  max-width:700px;
  height:auto;
  border-radius:14px;
}
.qsl-thumb{
  padding: 10px;
}
.act-info span{
  background: rgba(0,216,255,.06);
  border: 1px solid rgba(0,216,255,.25);
  color: #dff8ff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: .2s;
}

.act-info span:hover{
  background: rgba(0,216,255,.12);
  transform: translateX(4px);
}
.act-info .qsl-ok{
  border-color: rgba(0,255,150,.6);
  color: #9fffd0;
  background: rgba(0,255,150,.08);
}
.qsl-card{
  border: 1px solid rgba(0,216,255,.25);
  box-shadow: 0 0 20px rgba(0,216,255,.1);
}
.qsl-title{
  font-size: 16px;
  letter-spacing: 1px;
  color: #00d8ff;
}
.btn-maps{
  position: relative;
  overflow: hidden;
}

.btn-maps::after{
  content: "";
  position: absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition: .4s;
}

.btn-maps:hover::after{
  left:100%;
}
.act-info span{
  padding: 8px 12px;
  font-size: 13px;
}
.btn-maps{
  font-weight: 600;
  letter-spacing: .5px;
}
.qsl-thumb{
  background: linear-gradient(180deg, rgba(0,216,255,.08), transparent);
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,216,255,.2);
}
.act-info span{
  display:flex;
  align-items:center;
  gap:10px;
}
.act-info span::before{
  content:"●";
  color:#00d8ff;
  font-size:10px;
}
.act-sub{
  font-size:13px;
  color:#00d8ff;
  margin-bottom:8px;
  opacity:.8;
}
.act-sub{
  font-size:13px;
  color:#00d8ff;
  margin:14px 0 8px;
  opacity:.85;
}
.act-sub{
  font-size:13px;
  color:#00d8ff;
  margin:16px 0 10px;
  opacity:.9;
  letter-spacing:.5px;
}
.qsl-img{
  border-radius:12px;
  box-shadow: 0 0 25px rgba(0,216,255,.15);
}
.amigos-radio-lista{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.amigo-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(0,216,255,.05);
  border:1px solid rgba(0,216,255,.18);
}

.amigo-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.amigo-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:50%;
}

.amigo-info strong{
  display:block;
  color:#fff;
  font-size:15px;
}

.amigo-info span{
  display:block;
  margin-top:6px;
  color:#b9c6d8;
  font-size:13px;
}

.btn-amigo{
  background:linear-gradient(90deg,#00d8ff,#7a5cff);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
}

.btn-borrar-amigo{
  background:#ff3b3b;
  border:none;
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.amigo-item:hover{
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(0,216,255,.25);
}
.btn-amigo{
  transition:.2s;
}

.btn-amigo:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(0,216,255,.5);
}
.amigo-logo{
  box-shadow:0 0 12px rgba(0,216,255,.3);
}
.amigo-item:hover{
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(0,216,255,.25);
}

.btn-amigo{
  transition:.2s;
}

.btn-amigo:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(0,216,255,.5);
}

.amigo-logo{
  box-shadow:0 0 12px rgba(0,216,255,.3);
}
.bloque-amigos{
  margin-top:18px;
}

.bloque-titulo{
  font-size:13px;
  color:#00d8ff;
  letter-spacing:.08em;
  margin:0 0 10px;
  text-transform:uppercase;
}

.amigos-grid{
  display:grid;
  gap:10px;
}
.popup-socio{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}

.popup-socio-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
}

.popup-socio-box{
  position:relative;
  z-index:2;
  width:min(900px,92vw);
  max-height:90vh;
  background:#071225;
  border:1px solid rgba(0,216,255,.35);
  border-radius:18px;
  padding:18px;
  box-shadow:0 0 30px rgba(0,216,255,.25);
}

.popup-socio iframe{
  width:100%;
  height:70vh;
  border:0;
  border-radius:12px;
}

.popup-socio-cerrar{
  position:absolute;
  top:10px;
  right:12px;
  border:0;
  background:#ff3b7a;
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
}

.contacto-directo{
  padding:25px;
  text-align:center;
}

.btn-contacto-directo{
  display:inline-block;
  margin-top:15px;
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(90deg,#00d8ff,#7a5cff);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.popup-socio{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:none;
  align-items:center;
  justify-content:center;
}

.popup-socio-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
}

.popup-socio-box{
  position:relative;
  z-index:2;
  width:min(900px,92vw);
  max-height:90vh;
  background:#071225;
  border:1px solid rgba(0,216,255,.35);
  border-radius:18px;
  padding:18px;
  box-shadow:0 0 35px rgba(0,216,255,.25);
  overflow:auto;
}

.popup-socio-head h3{
  color:#00d8ff;
  margin:0 0 12px;
}

.popup-socio iframe{
  width:100%;
  height:70vh;
  border:0;
  border-radius:12px;
  background:#fff;
}

.popup-socio-cerrar{
  position:absolute;
  top:10px;
  right:12px;
  z-index:3;
  border:0;
  background:#ff3b7a;
  color:#fff;
  width:34px;
  height:34px;
  border-radius:50%;
  cursor:pointer;
  font-size:22px;
  line-height:34px;
}

.contacto-directo{
  padding:28px;
  text-align:center;
  color:#dff8ff;
}

.btn-contacto-directo{
  display:inline-block;
  margin-top:15px;
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(90deg,#00d8ff,#7a5cff);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
/* ===== POPUPS ===== */

.popup-socio{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-socio-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.popup-socio-box{
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  background: #0a1224;
  border-radius: 16px;
  padding: 20px;
  overflow: auto;
  box-shadow: 0 0 30px rgba(0,216,255,0.3);
}

.popup-socio-head h3{
  color: #00d8ff;
  margin-bottom: 15px;
}

.popup-socio iframe{
  width: 100%;
  height: 70vh;
  border: none;
  border-radius: 10px;
  background: #fff;
}

.popup-socio-cerrar{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #ff3b7a;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.contacto-directo{
  text-align: center;
  padding: 20px;
}

.btn-contacto-directo{
  display: inline-block;
  margin-top: 15px;
  padding: 12px 20px;
  border-radius: 10px;
  background: linear-gradient(90deg,#00d8ff,#7a5cff);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.popup-socio{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

.popup-socio-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1;
}

.popup-socio-box{
  position: relative;
  z-index: 2;
  width: min(420px, 90%);
  background: #0b1025;
  border: 1px solid #20d7ff;
  border-radius: 18px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 0 35px rgba(0,255,255,.35);
}

.popup-socio-cerrar{
  position: absolute;
  top: 10px;
  right: 12px;
  background: #ff3b6b;
  color: white;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.btn-contacto-directo{
  display: inline-block;
  margin-top: 15px;
  padding: 14px 28px;
  border-radius: 12px;
  background: linear-gradient(90deg,#20d7ff,#a832ff);
  color: #001;
  font-weight: 900;
  text-decoration: none;
}
.popup-socio{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

.popup-socio-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1;
}

.popup-socio-box{
  position: relative;
  z-index: 2;
}
/* FIX POPUP CONTACTO */
#popupContacto{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none;
  align-items: center;
  justify-content: center;
}

#popupContacto .popup-socio-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.78) !important;
  z-index: 1 !important;
}

#popupContacto .popup-socio-box{
  position: relative !important;
  z-index: 2 !important;
  width: min(430px, 92%) !important;
  background: #080b22 !important;
  border: 1px solid #18d7ff !important;
  border-radius: 20px !important;
  padding: 28px !important;
  text-align: center !important;
  box-shadow: 0 0 35px rgba(0,255,255,.35) !important;
}
.btn-contacta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(45deg, #00e0ff, #a855f7);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
  transition: all 0.3s ease;
}

.btn-contacta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
}
.btn-qsl{
  display:block;
  margin-top:14px;
  padding:12px 18px;
  border-radius:12px;
  text-align:center;
  background:linear-gradient(90deg,#00d9ff,#8b35ff);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 0 14px rgba(0,217,255,.35);
}

.btn-qsl:hover{
  transform:scale(1.03);
  box-shadow:0 0 22px rgba(139,53,255,.65);
}
.btn-qsl{
  margin:16px 0 10px 0;
}
.btn-qsl{
  margin-top:16px;
}

.btn-maps{
  margin-top:10px;
}
.qsl-note{
  font-size:12px;
  opacity:.7;
  margin-top:10px;
}
/* ANCHO REAL DE LA WEB */
.layout{
  width: 100% !important;
  max-width: 100% !important;
  margin: 18px 0 40px !important;
  padding: 0 24px !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
}

.content{
  width: 100% !important;
  max-width: none !important;
}

.card,
.hero-card{
  width: 100% !important;
  max-width: none !important;
}
/* CONTENEDOR PRINCIPAL MÁS ANCHO */
.main-content {
  width: calc(100% - 260px); /* ancho sidebar */
  max-width: 1400px;
  margin: 0 auto;
}

/* QUE LAS CARDS NO SE QUEDEN ENCAJONADAS */
.card {
  width: 100%;
  max-width: 100%;
}

/* IMAGEN HERO MÁS GRANDE */
.qsl-thumb img,
.qsl-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* DATOS ACTIVACIÓN MÁS LIMPIOS */
.act-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* EN MÓVIL UNA COLUMNA */
@media (max-width: 768px) {
  .act-info {
    grid-template-columns: 1fr;
  }
}
.hero-card img,
.hero-card .hero-img,
#hero-portada img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 22px;
}
#hero-portada {
  padding: 14px;
  border-radius: 24px;
}
.guia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.guia-grid .card,
.guia-grid > div {
  transition: all 0.25s ease;
}

.guia-grid .card:hover,
.guia-grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
}
.bandas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.qsl-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}

.qsl-thumb img {
  width: min(100%, 760px);
  height: auto;
  border-radius: 16px;
}
#actividades-campo {
  padding-top: 18px;
}

#actividades-campo img {
  margin-top: 10px;
}
.btn-borrar-anuncio {
  width: auto;
  min-width: 120px;
  padding: 10px 18px;
}
#hero-portada {
  margin-top: 10px;
  margin-bottom: 20px;
}
.btn,
.act-btn,
a.btn {
  transition: all 0.25s ease;
}

.btn:hover,
.act-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
}
.card {
  transition: all 0.25s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(0, 180, 255, 0.15);
}
footer {
  opacity: 0.9;
  border-top: 1px solid rgba(0, 200, 255, 0.2);
}
.section-head {
  border-bottom: 1px solid rgba(0, 200, 255, 0.2);
  padding-bottom: 10px;
}
#hero-portada img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center 60%;
  border-radius: 20px;
}
.en-frecuencia {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 20px;
}
.section-title {
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
}
#hero-portada img {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  background: #000; /* relleno elegante */
  border-radius: 20px;
}
#hero-portada {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

#hero-portada img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}
#hero-portada {
  background: linear-gradient(90deg, #020617, #0a1f3d, #020617);
}
#hero-portada {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#hero-portada img {
  width: 100%;
  max-width: 1100px; /* 🔥 CLAVE */
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}
#hero-portada {
  display: flex;
  justify-content: center;
  padding: 20px;
}

#hero-portada img {
  width: 90%;
  max-width: 1000px;
  height: auto;
}
#hero-portada img {
  width: 100%;
  max-width: 1300px; /* 🔥 aquí está la clave */
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}
#hero-portada {
  display: flex;
  justify-content: center;
  padding: 10px 20px;
}
#hero-portada img {
  width: 100%;
  max-width: 1500px; /* 🔥 más ancho */
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}
#hero-portada {
  display: flex;
  justify-content: center;
  padding: 10px 10px; /* menos margen lateral */
}
#hero-portada img {
  width: 100%;
  max-width: 1600px; /* 🔥 un poco más */
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}
#hero-portada {
  display: flex;
  justify-content: center;
  padding: 8px 5px; /* menos margen */
}
#hero-portada {
  display: flex;
  justify-content: center;
  padding: 10px;
  max-width: 1700px; /* 🔥 controla el bloque */
  margin: 0 auto;
}
#hero-portada img {
  width: 100%;
  max-width: 1600px;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}
/* HERO LIMPIO Y EQUILIBRADO */
#hero-portada {
  width: 100%;
  padding: 14px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(4, 12, 30, 0.65);
  border-radius: 22px;
  overflow: hidden;
}

#hero-portada img {
  width: 100%;
  max-width: 1450px;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 0 22px rgba(0, 220, 255, 0.35);
}
#hero-portada {
  padding: 6px; /* 🔥 antes era grande */
}
#hero-portada {
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0, 220, 255, 0.4); /* más sutil */
}
#hero-portada {
  padding: 5px;
  background: linear-gradient(90deg, #00eaff, #8a2be2);
}
#hero-portada img {
  border-radius: 16px;
}
#hero-portada {
  padding: 6px;
}
#hero-portada {
  padding: 4px; /* 🔥 más pegado */
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 220, 255, 0.35); /* 🔥 mucho más fino */
}
#hero-portada img {
  border-radius: 16px;
}
#hero-portada {
  padding: 4px;
  border-radius: 20px;
  background: linear-gradient(90deg, #00eaff, #8a2be2);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.25);
}
#hero-portada {
  padding: 3px; /* 🔥 mínimo */
  border-radius: 18px;
  background: linear-gradient(90deg, #00eaff, #8a2be2);
  box-shadow: 0 0 8px rgba(0, 220, 255, 0.25);
}
#hero-portada img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover; /* 🔥 esto es lo importante */
}
#hero-portada {
  padding: 2px;
  border-radius: 18px;
  overflow: hidden; /* 🔥 elimina cualquier borde raro */
}
#hero-portada {
  padding: 3px;
  border: 1px solid rgba(0, 220, 255, 0.45);
  background: rgba(0, 15, 35, 0.65);
  box-shadow: 0 0 10px rgba(0, 220, 255, 0.22);
  border-radius: 18px;
  overflow: hidden;
}

#hero-portada img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: none;
}
#hero-portada {
  padding: 3px;
  border-radius: 18px;

  /* ❌ elimina rojo */
  border: none !important;
  outline: none !important;

  /* ✅ aro azul limpio */
  box-shadow: 0 0 0 1px rgba(0, 220, 255, 0.35),
              0 0 12px rgba(0, 220, 255, 0.25);

  background: rgba(0, 15, 35, 0.6);
  overflow: hidden;
}
#hero-portada {
  animation: glowPulse 3s infinite alternate;
}

@keyframes glowPulse {
  from {
    box-shadow: 0 0 6px rgba(0,220,255,0.2);
  }
  to {
    box-shadow: 0 0 18px rgba(0,220,255,0.5);
  }
}
.card {
  border: 1px solid rgba(0, 220, 255, 0.15);
  box-shadow: 0 0 10px rgba(0, 220, 255, 0.08);
}
.card,
#hero-portada,
.card * {
  box-shadow: none !important;
  outline: none !important;
}
* {
  box-shadow: none !important;
}
#hero-portada {
  box-shadow: 0 0 0 1px rgba(0, 220, 255, 0.35),
              0 0 12px rgba(0, 220, 255, 0.25);
}
/* QUITAR BORDE ROJO EXTERIOR DEL HERO */
#hero-portada,
#hero-portada.card,
.hero-card,
.hero-card.card {
  border: 1px solid rgba(0, 220, 255, 0.25) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ARO AZUL FINO SOLO EN LA IMAGEN */
#hero-portada img {
  border: 1px solid rgba(0, 220, 255, 0.35) !important;
  box-shadow: 0 0 18px rgba(0, 220, 255, 0.35) !important;
}
#hero-portada img {
  border: none !important;
}
#hero-portada {
  padding: 2px;
  border-radius: 18px;
  overflow: hidden;

  box-shadow: 
    0 0 0 1px rgba(0, 220, 255, 0.35),
    0 0 14px rgba(0, 220, 255, 0.25);
}
#hero-portada img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
#hero-portada {
  background: radial-gradient(circle at center, rgba(0,40,80,0.4), transparent);
}
#hero-portada {
  padding: 2px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 220, 255, 0.35) !important;
  box-shadow: 0 0 6px rgba(0, 220, 255, 0.22) !important;
}

#hero-portada img {
  border: none !important;
  box-shadow: none !important;
  border-radius: 15px;
  display: block;
  width: 100%;
  height: auto;
}
#hero-portada {
  padding: 2px;
  border-radius: 18px;
  overflow: hidden;

  border: 1px solid rgba(0, 220, 255, 0.35);

  /* 🔥 AQUÍ está el cambio */
  box-shadow: 0 0 4px rgba(0, 220, 255, 0.25);
}
#hero-portada {
  box-shadow: 
    0 0 2px rgba(0,220,255,0.3),
    0 0 6px rgba(0,220,255,0.2);
}
#hero-portada {
  padding: 2px;
  border-radius: 18px;
  overflow: hidden;

  /* línea fina */
  border: 1px solid rgba(0, 220, 255, 0.35);

  /* 🔥 glow uniforme (no lateral gordo) */
  box-shadow:
    0 0 3px rgba(0,220,255,0.25),
    0 0 8px rgba(0,220,255,0.15);
}
#hero-portada {
  background: rgba(0, 20, 40, 0.5);
}
/* ============================= */
/* SOCIOS Y SOPORTE */
/* ============================= */

.zona-usuarios-botones{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:25px;
}

/* BOTONES */
.btn-socio,
.btn-admin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  transition:.25s;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

/* BOTÓN SOCIO */
.btn-socio{
  background:linear-gradient(135deg,#0d6efd,#00bfff);
}

.btn-socio:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,191,255,.45);
}

/* BOTÓN ADMIN */
.btn-admin{
  background:linear-gradient(135deg,#444,#222);
}

.btn-admin:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(255,255,255,.15);
}

/* ============================= */
/* PROTECCIÓN DE DATOS */
/* ============================= */

.proteccion-datos-box{
  margin-top:30px;
  padding:22px;
  border-radius:16px;
  background:#f5f5f5;
  border:1px solid #dcdcdc;
}

.proteccion-datos-box h3{
  margin-bottom:18px;
  font-size:20px;
  color:#111;
}

.proteccion-datos-box p{
  line-height:1.8;
  margin-bottom:18px;
  color:#333;
}

.check-proteccion{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-weight:600;
  line-height:1.6;
  margin-bottom:18px;
}

.check-proteccion input{
  margin-top:4px;
  transform:scale(1.2);
}

.link-proteccion a{
  color:#005bbb;
  font-weight:700;
  text-decoration:none;
}

.link-proteccion a:hover{
  text-decoration:underline;
}

/* RESPONSIVE */
@media (max-width:700px){

  .zona-usuarios-botones{
    flex-direction:column;
  }

  .btn-socio,
  .btn-admin{
    width:100%;
  }

}
/* ============================= */
/* AVISO PRIVACIDAD */
/* ============================= */

.aviso-privacidad{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:20px;
  margin-bottom:28px;
  padding:18px 22px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,191,255,.25);
  box-shadow:0 0 20px rgba(0,191,255,.08);
}

.privacidad-icono{
  font-size:32px;
  flex-shrink:0;
}

.privacidad-texto{
  flex:1;
  color:#ddd;
  line-height:1.7;
}

.privacidad-texto strong{
  color:#fff;
  font-size:15px;
}

.btn-privacidad{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#ff9800,#ff5722);
  transition:.25s;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(255,87,34,.35);
}

.btn-privacidad:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(255,87,34,.55);
}

/* MÓVIL */

@media (max-width:800px){

  .aviso-privacidad{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn-privacidad{
    width:100%;
  }

}
/* TARJETA WHATSAPP */
.whatsapp-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg,#07152f,#08101f);
  border:1px solid #123a73;
  text-decoration:none;
  transition:.25s;
}

.whatsapp-card:hover{
  transform:translateY(-3px);
  border-color:#00c3ff;
  box-shadow:0 0 20px rgba(0,195,255,.25);
}

.whatsapp-card img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:14px;
  background:#000;
}

.amigo-info{
  display:flex;
  flex-direction:column;
}

.amigo-info strong{
  color:#fff;
  font-size:1.05rem;
}

.amigo-info span{
  color:#b8c7e0;
  margin-top:4px;
  font-size:.92rem;
}
.amigo-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  padding:18px;
  margin-top:14px;

  border-radius:18px;

  background:
  linear-gradient(90deg,
  rgba(0,180,255,.10),
  rgba(140,0,255,.08));

  border:1px solid rgba(0,255,255,.18);

  transition:.25s;
}

.amigo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 0 25px rgba(0,255,255,.18);
}

.amigo-left{
  display:flex;
  align-items:center;
  gap:16px;
}

.amigo-left img{
  width:64px;
  height:64px;
  object-fit:cover;

  border-radius:14px;

  background:#081120;
  padding:6px;

  border:1px solid rgba(255,255,255,.12);
}

.amigo-left h3{
  margin:0;
  color:#fff;
  font-size:1.05rem;
}

.amigo-left p{
  margin-top:4px;
  color:#9fb3d9;
  font-size:.92rem;
}

.btn-amigo{
  padding:12px 22px;
  border-radius:14px;

  background:linear-gradient(90deg,#00e5ff,#00bfff);

  color:#001018;
  font-weight:700;
  text-decoration:none;

  transition:.2s;
}

.btn-amigo:hover{
  transform:scale(1.05);
}
.amigo-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  padding:18px;
  margin-top:14px;

  border-radius:18px;

  background:
  linear-gradient(
    90deg,
    rgba(0,180,255,.08),
    rgba(140,0,255,.05)
  );

  border:1px solid rgba(0,255,255,.18);

  transition:.25s;
}

.amigo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 0 25px rgba(0,255,255,.18);
}

.amigo-left{
  display:flex;
  align-items:center;
  gap:16px;
}

.amigo-left img{
  width:58px;
  height:58px;
  object-fit:cover;

  border-radius:14px;

  background:#081120;
  padding:6px;

  border:1px solid rgba(255,255,255,.12);
}

.amigo-left h3{
  margin:0;
  color:#fff;

  font-size:1.05rem;
  letter-spacing:.5px;
}

.amigo-left p{
  margin-top:5px;
  color:#9fb3d9;
  font-size:.92rem;
}

.btn-amigo{
  padding:12px 22px;

  border-radius:14px;

  background:
  linear-gradient(
    90deg,
    #00e5ff,
    #00bfff
  );

  color:#001018;
  font-weight:700;
  text-decoration:none;

  transition:.2s;
}

.btn-amigo:hover{
  transform:scale(1.05);
}
.amigo-left img{
  width:58px;
  height:58px;
  object-fit:contain;
}
.amigo-card{
  min-height:92px;
}
.amigo-left img{
  width:58px;
  height:58px;
  object-fit:contain;
  background:#111827;
}
.amigo-left img{
  width:64px;
  height:64px;

  object-fit:contain;

  padding:8px;

  border-radius:16px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02)
  );

  border:1px solid rgba(255,255,255,.08);
}
.amigo-card{
  backdrop-filter:blur(8px);
}
.bloque-titulo{
  letter-spacing:2px;
}
.amigo-card{
  padding:20px 24px;
}
.amigo-left h3{
  font-size:1.08rem;
  font-weight:800;
}
.amigo-card:hover{
  transform:translateY(-4px);
  border-color:#00e5ff;
}
.act-info span{
  backdrop-filter:blur(6px);
}
.btn-qsl{
  font-size:1.05rem;
  letter-spacing:.5px;
  font-weight:800;
}
.btn-qsl:hover{
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(0,255,255,.25);
}
.qsl-img{
  transition:.35s;
}

.qsl-img:hover{
  transform:scale(1.01);
  box-shadow:0 0 35px rgba(0,255,255,.18);
}
.qsl-body,
.qsl-generator,
.qsl-form,
.qsl-form input,
.qsl-form button{
  position:relative;
  z-index:10;
}

.qsl-card::before,
.qsl-card::after,
.qsl-thumb::before,
.qsl-thumb::after{
  pointer-events:none;
}

.qsl-form input{
  width:260px;
  max-width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,229,255,.45);
  background:#071426;
  color:#fff;
  font-weight:700;
}

.qsl-form input::placeholder{
  color:#9fb3d9;
}

.qsl-form input:focus{
  outline:none;
  border-color:#00e5ff;
  box-shadow:0 0 18px rgba(0,229,255,.25);
}
.qsl-body,
.qsl-generator,
.qsl-form,
.qsl-form input,
.qsl-form button{
  position:relative;
  z-index:10;
}

.qsl-card::before,
.qsl-card::after,
.qsl-thumb::before,
.qsl-thumb::after{
  pointer-events:none;
}

.qsl-form input{
  width:260px;
  max-width:100%;

  padding:12px 14px;

  border-radius:12px;

  border:1px solid rgba(0,229,255,.45);

  background:#071426;

  color:#fff;

  font-weight:700;
}

.qsl-form input::placeholder{
  color:#9fb3d9;
}

.qsl-form input:focus{
  outline:none;

  border-color:#00e5ff;

  box-shadow:
  0 0 18px rgba(0,229,255,.25);
}
/* ===== TARJETAS ENLACES ===== */

.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-top:30px;
}

.tool-box{
  background:linear-gradient(
    180deg,
    rgba(5,10,35,.96),
    rgba(15,0,40,.96)
  );

  border:1px solid rgba(0,217,255,.22);

  border-radius:24px;

  overflow:hidden;

  box-shadow:
    0 0 22px rgba(0,217,255,.10);

  backdrop-filter:none !important;
}

/* TITULOS */
.tool-box h3{

  margin:0;

  padding:22px 24px 20px;

  color:#22e6ff !important;

  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;

  background:none !important;

  border-bottom:none !important;

  text-shadow:0 0 10px rgba(34,230,255,.35);

  position:relative;
  z-index:5;

  opacity:1 !important;
  filter:none !important;
}

/* LINEA COLOR */
.tool-box h3::after{
  content:"";

  display:block;

  width:180px;
  height:4px;

  margin-top:12px;

  border-radius:20px;

  background:linear-gradient(
    90deg,
    #00eaff,
    #d946ef,
    #ffb703
  );
}

/* ENLACES */
.tool-box a{
  display:flex !important;

  justify-content:space-between;
  align-items:center;

  padding:18px 24px;

  color:#eef3ff !important;

  text-decoration:none !important;

  font-weight:700;

  border-bottom:1px solid rgba(255,255,255,.07);

  transition:.25s ease;
}

.tool-box a::after{
  content:"↗";
  opacity:.7;
}

.tool-box a:hover{
  background:rgba(0,217,255,.08);

  color:#22e6ff !important;

  padding-left:30px;
}

.tool-box a:last-child{
  border-bottom:none;
}
.tool-title{
  padding:22px 24px 20px;
  color:#22e6ff !important;
  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(34,230,255,.35);
}

.tool-title::after{
  content:"";
  display:block;
  width:180px;
  height:4px;
  margin-top:12px;
  border-radius:20px;
  background:linear-gradient(90deg,#00eaff,#d946ef,#ffb703);
}
.tool-box{
  transition:.25s ease;
}

.tool-box:hover{
  transform:translateY(-4px);

  box-shadow:
    0 0 30px rgba(0,217,255,.18);
}
.tool-box a:hover::after{
  transform:translateX(3px);
}
.tools-grid{
  gap:30px;
}
.colab-banner{
  width: 260px;
  height: auto;
  display:block;
  margin:auto;
  object-fit: contain;
}
.colaborador-bloque img{
  image-rendering:auto;
}
.colaborador-bloque img{
  max-width: 240px;
  transition: 0.3s;
}

.colaborador-bloque img:hover{
  transform: scale(1.05);
}
.pc-logo{
  max-width: 140px;
}
.colaborador-bloque{
   min-height: 400px;
}
.colaborador-bloque:hover{
  transform: translateY(-5px);
  box-shadow:
    0 0 15px #00d9ff,
    0 0 30px #ff00ff55;
}
.pc-logo{
   width: 220px;
}
.colaborador-bloque{
   transition: 0.3s;
}

.colaborador-bloque:hover{
   transform: translateY(-5px);
   box-shadow:
      0 0 12px #00d9ff,
      0 0 25px rgba(255,0,255,.35);
}
.pc-logo{
  width: 220px;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 12px;
  transition: 0.3s;
}

.pc-logo:hover{
  transform: scale(1.05);
}
.pc-logo{
  width: 200px;
}
.colaborador-bloque:hover{
  transform: translateY(-6px);
  box-shadow:
    0 0 15px #00d9ff,
    0 0 30px rgba(255,0,255,.35);
}
.colaborador-bloque{
   transition: all .3s ease;
}

.colaborador-bloque:hover{
   transform: translateY(-6px);
   box-shadow:
      0 0 15px #00d9ff,
      0 0 30px rgba(255,0,255,.35);
}
.colab-text{
   line-height: 1.6;
}
.bandas{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.banda{
    min-width:150px;
    text-align:center;
    cursor:pointer;
}
.redes-digitales-img{
  margin-top:25px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,255,255,.35);
  box-shadow:0 0 25px rgba(0,255,255,.18);
}

.redes-digitales-img img{
  width:100%;
  max-height:420px;
  object-fit:cover;
  display:block;
}
.redes-digitales-img{
  position:relative;
  margin-top:25px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,255,255,.35);
  box-shadow:0 0 25px rgba(0,255,255,.18);
}

.redes-digitales-img img{
  width:100%;
  display:block;
}

.redes-texto{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(0,255,255,.45);
  border-radius:14px;
  padding:14px 18px;
  color:white;
  backdrop-filter:blur(6px);
}

.redes-texto strong{
  display:block;
  color:#00e5ff;
  margin-bottom:5px;
}

.redes-texto span{
  color:#ffe66d;
}
.redes-digitales-img{
    position:relative;
    margin-top:25px;
    border-radius:15px;
    overflow:hidden;
    border:1px solid #00d4ff;
    box-shadow:0 0 20px rgba(0,212,255,.25);
}
.redes-digitales-img img{
    width:100%;
    height:260px;
    object-fit:cover;
    object-position:center;
    display:block;
}


.redes-texto{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
    background:rgba(0,0,0,.75);
    padding:12px 16px;
    border-radius:12px;
    border:1px solid #00d4ff;
}

.redes-texto strong{
    display:block;
    color:#00e5ff;
    margin-bottom:5px;
}

.redes-texto span{
    color:#ffd54a;
}
.redes-digitales-img{
    position:relative;
    margin-top:25px;
    border-radius:15px;
    overflow:hidden;
    border:1px solid #00d4ff;
    box-shadow:0 0 20px rgba(0,212,255,.25);
}

.redes-digitales-img img{
    width:100%;
    height:280px;
    object-fit:cover;
    object-position:center 38%;
    display:block;
}

.redes-texto{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
    background:rgba(0,0,0,.75);
    padding:12px 16px;
    border-radius:12px;
    border:1px solid #00d4ff;
    backdrop-filter:blur(6px);
}

.redes-texto strong{
    display:block;
    color:#00e5ff;
    margin-bottom:5px;
}

.redes-texto span{
    color:#ffd54a;
}
.redes-digitales-img img{
    width:100%;
    height:300px;
    object-fit:cover;
    object-position:center top;
    display:block;
}
.banda{
  text-decoration:none;
  color:inherit;
}
.red-digital-card{
    margin-top:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:25px;
    border-radius:18px;
    border:1px solid rgba(0,255,255,.35);
    background:rgba(0,0,0,.20);
}

.red-digital-info{
    flex:1;
}

.red-digital-info h3{
    color:#00e5ff;
    margin-bottom:10px;
}

.red-digital-info p{
    color:#d9d9d9;
    margin-bottom:15px;
}

.red-digital-links{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.red-digital-links a{
    text-decoration:none;
    padding:10px 16px;
    border-radius:10px;
    border:1px solid #00d4ff;
    color:white;
    transition:.3s;
}

.red-digital-links a:hover{
    background:#00d4ff;
    color:#000;
}

.red-digital-card img{
    width:120px;
    height:auto;
    filter:drop-shadow(0 0 12px rgba(0,255,255,.35));
}
/* ==========================================
   ACTIVIDADES DE CAMPO
========================================== */

#actividades-campo{
    margin-top:20px;
}

.actividad-centro{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:25px;
}

.actividad-img{
    width:100%;
    max-width:420px;
    border-radius:18px;
    border:2px solid rgba(0,255,255,.20);
    box-shadow:0 0 25px rgba(0,255,255,.18);
    transition:.35s;
}

.actividad-img:hover{
    transform:scale(1.03);
    box-shadow:0 0 35px rgba(0,255,255,.35);
}

.actividad-centro h3{
    margin:20px 0 10px;
    font-size:28px;
    color:#ffd54f;
    text-shadow:0 0 10px rgba(255,213,79,.45);
}

.actividad-centro p{
    max-width:800px;
    font-size:16px;
    line-height:1.7;
    color:#d7d7d7;
}

.actividad-centro strong{
    color:#00e5ff;
}

@media (max-width:768px){

    .actividad-img{
        max-width:100%;
    }

    .actividad-centro h3{
        font-size:22px;
    }

    .actividad-centro p{
        font-size:15px;
    }

}
.btn-qsl-gen{
    display:inline-block;
    background:#67b52d;
    color:#ffffff !important;
    text-decoration:none !important;
    font-size:22px;
    font-weight:700;
    padding:18px 40px;
    border-radius:12px;
    border:none;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 0 18px rgba(103,181,45,.35);
}

.btn-qsl-gen:hover{
    background:#4f9622;
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 0 25px rgba(103,181,45,.55);
}

.btn-qsl-gen:visited{
    color:#ffffff !important;
}

.btn-qsl-gen:link{
    color:#ffffff !important;
}
.bandas{
    display:block;
}

.qsl-generator{
    width:100%;
    max-width:100%;
    margin:0 auto;
}
.bandas{
    display:grid;
    grid-template-columns:1fr;
}
.qsl-generator{
    width:100%;
}
.qsl-image{
    text-align:center;
    margin:25px 0;
}

.qsl-preview{
    display:block;
    width:100%;
    max-width:900px;
    height:auto;
    margin:0 auto;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.35);
}
/* CORRECCIÓN IMAGEN QSL */

.qsl-generator .qsl-image{
    display:block;
    width:100%;
    max-width:1000px;
    margin:28px auto;
    padding:0;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden;
    text-align:center;
}

.qsl-generator .qsl-preview{
    display:block;
    width:100% !important;
    max-width:1000px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    margin:0 auto !important;
    padding:0 !important;
    border:0;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.35);
}
.qsl-btn{
    text-align:center;
    margin-top:30px;
}

.btn-qsl-gen{
    display:inline-block;
    padding:18px 40px;
    background:#67c11f;
    color:#fff;
    text-decoration:none;
    font-size:1.3rem;
    font-weight:700;
    border-radius:15px;
    border:4px solid #26b7e9;
    transition:.3s;
}

.btn-qsl-gen:hover{
    background:#5aac1b;
    transform:translateY(-2px);
}
.sidebox-title{
    text-align:center;
    font-size:1.9rem;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#ffd34d;
    margin-bottom:25px;
    position:relative;
}

.sidebox-title::after{
    content:"";
    display:block;
    width:120px;
    height:4px;
    margin:12px auto 0;
    border-radius:50px;
    background:linear-gradient(90deg,#00d9ff,#8b5cff,#ff2bd6);
    box-shadow:0 0 12px rgba(0,220,255,.6);
}
/* ==================================
   ACTIVADORES EN FRECUENCIA
=================================== */

.activadores-panel {
  margin: 28px 0;
  padding: 28px 24px;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 24px;
  background: rgba(8, 10, 35, 0.92);
  box-shadow:
    0 0 20px rgba(0, 210, 255, 0.08),
    inset 0 0 20px rgba(125, 70, 255, 0.04);
}

.activadores-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.25);
}

.activadores-titulo {
  margin: 0;
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 2px;
}

.estado-general {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
}

.activadores-texto {
  margin: 20px 0 24px;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.6;
}

.activadores-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.activador-card {
  min-height: 210px;
  padding: 20px 14px;
  border: 1px solid rgba(255, 45, 65, 0.75);
  border-radius: 16px;
  background: rgba(12, 14, 38, 0.95);
  text-align: center;
  box-shadow:
    0 0 12px rgba(255, 45, 65, 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.02);
}

.activador-indicativo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
}

.punto-estado {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
}

.punto-rojo {
  background: #ff304f;
  box-shadow:
    0 0 6px rgba(255, 48, 79, 0.9),
    0 0 14px rgba(255, 48, 79, 0.45);
}

.activador-banda {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
}

.activador-frecuencia {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
}

.activador-modo {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
}

.activador-estado {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
}

/* TABLET */

@media (max-width: 1100px) {
  .activadores-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MÓVIL */

@media (max-width: 650px) {
  .activadores-panel {
    padding: 22px 14px;
  }

  .activadores-cabecera {
    flex-direction: column;
    align-items: flex-start;
  }

  .estado-general {
    text-align: left;
  }

  .activadores-grid {
    grid-template-columns: 1fr;
  }

  .activadores-titulo {
    font-size: 1.25rem;
  }
}
.punto-rojo {
  background: #ff304f;
  box-shadow:
    0 0 6px rgba(255, 48, 79, 0.9),
    0 0 14px rgba(255, 48, 79, 0.45);
}

.punto-verde {
  background: #32e875;
  box-shadow:
    0 0 6px rgba(50, 232, 117, 0.9),
    0 0 14px rgba(50, 232, 117, 0.45);
}
/* ==================================
   ACTIVADORES: PARTE PÚBLICA
=================================== */

.activadores-panel {
  margin: 30px 0;
  padding: 28px 24px;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 24px;
  background: rgba(8, 10, 35, 0.94);
  box-shadow:
    0 0 20px rgba(0, 210, 255, 0.08),
    inset 0 0 20px rgba(125, 70, 255, 0.04);
}

.activadores-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.25);
}

.activadores-titulo {
  margin: 0;
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 2px;
}

.estado-general {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
}

.activadores-texto {
  margin: 20px 0 24px;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.6;
}

.activadores-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.activador-card {
  min-height: 210px;
  padding: 20px 14px;
  border: 1px solid rgba(255, 48, 79, 0.75);
  border-radius: 16px;
  background: rgba(12, 14, 38, 0.96);
  text-align: center;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.activador-card:hover {
  transform: translateY(-3px);
}

.activador-inactivo {
  border-color: rgba(255, 48, 79, 0.75);
  box-shadow:
    0 0 12px rgba(255, 48, 79, 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.02);
}

.activador-activo {
  border-color: rgba(50, 232, 117, 0.95);
  box-shadow:
    0 0 18px rgba(50, 232, 117, 0.28),
    inset 0 0 14px rgba(50, 232, 117, 0.04);
}

.activador-indicativo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
}

.activador-banda {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
}

.activador-frecuencia {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1.18rem;
  font-weight: 800;
}

.activador-modo {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
}

.activador-estado {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
}

.punto-estado {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
}

.punto-rojo {
  background: #ff304f;
  box-shadow:
    0 0 6px rgba(255, 48, 79, 0.95),
    0 0 14px rgba(255, 48, 79, 0.45);
}

.punto-verde {
  background: #32e875;
  box-shadow:
    0 0 6px rgba(50, 232, 117, 0.95),
    0 0 14px rgba(50, 232, 117, 0.50);
  animation: pulsoActivador 1.6s infinite;
}

@keyframes pulsoActivador {
  0% {
    box-shadow:
      0 0 5px rgba(50, 232, 117, 0.8),
      0 0 10px rgba(50, 232, 117, 0.35);
  }

  50% {
    box-shadow:
      0 0 9px rgba(50, 232, 117, 1),
      0 0 22px rgba(50, 232, 117, 0.75);
  }

  100% {
    box-shadow:
      0 0 5px rgba(50, 232, 117, 0.8),
      0 0 10px rgba(50, 232, 117, 0.35);
  }
}

/* ==================================
   ADMINISTRACIÓN DE ACTIVADORES
=================================== */

.admin-activadores-panel {
  margin: 25px 0;
  padding: 25px;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 20px;
  background: rgba(8, 10, 35, 0.96);
}

.admin-activadores-titulo {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 1.5rem;
  text-align: center;
}

.admin-activadores-texto {
  margin: 0 0 24px;
  color: #ffffff;
  line-height: 1.6;
  text-align: center;
}

.admin-activador-fila {
  display: grid;
  grid-template-columns:
    70px
    minmax(130px, 1.4fr)
    minmax(100px, 1fr)
    minmax(140px, 1.3fr)
    minmax(100px, 1fr)
    minmax(125px, 1fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-numero-puesto {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  color: #ffffff;
  font-weight: 800;
}

.admin-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.admin-campo label {
  color: #ffffff;
  font-size: 0.83rem;
  font-weight: 700;
}

.admin-campo input,
.admin-campo select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 210, 255, 0.40);
  border-radius: 9px;
  outline: none;
  background: rgba(4, 8, 28, 0.96);
  color: #ffffff;
  font-size: 0.95rem;
}

.admin-campo input:focus,
.admin-campo select:focus {
  border-color: #00d2ff;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.22);
}

.admin-campo select option {
  background: #080a23;
  color: #ffffff;
}

.admin-estado-select.activo {
  border-color: #32e875;
}

.admin-estado-select.inactivo {
  border-color: #ff304f;
}

.admin-activadores-botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.btn-guardar-activadores,
.btn-desactivar-todos,
.btn-restablecer-activadores {
  padding: 14px 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.btn-guardar-activadores {
  background: linear-gradient(135deg, #00a8d6, #006ea8);
}

.btn-desactivar-todos {
  background: linear-gradient(135deg, #ff304f, #a80024);
}

.btn-restablecer-activadores {
  background: linear-gradient(135deg, #7652d9, #49328e);
}

.btn-guardar-activadores:hover,
.btn-desactivar-todos:hover,
.btn-restablecer-activadores:hover {
  filter: brightness(1.13);
}

.mensaje-activadores {
  min-height: 24px;
  margin-top: 18px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

/* TABLET */

@media (max-width: 1150px) {

  .activadores-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-activador-fila {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-numero-puesto {
    grid-column: 1 / -1;
  }
}

/* MÓVIL */

@media (max-width: 650px) {

  .activadores-panel,
  .admin-activadores-panel {
    padding: 21px 14px;
  }

  .activadores-cabecera {
    flex-direction: column;
    align-items: flex-start;
  }

  .estado-general {
    text-align: left;
  }

  .activadores-grid,
  .admin-activador-fila {
    grid-template-columns: 1fr;
  }

  .activadores-titulo {
    font-size: 1.2rem;
  }

  .admin-numero-puesto {
    grid-column: auto;
  }

  .admin-activadores-botones {
    flex-direction: column;
  }

  .btn-guardar-activadores,
  .btn-desactivar-todos,
  .btn-restablecer-activadores {
    width: 100%;
  }
}
/*====================================
   ESTADÍSTICAS RADIO CLUB OCHENTERO
====================================*/

.estadisticas-radio{
    width:100%;
    margin:40px auto;
    padding:25px;
    background:linear-gradient(180deg,#09091f,#070718);
    border:1px solid #00b7ff;
    border-radius:28px;
}

.estadisticas-titulo{
    color:#fff;
    font-size:42px;
    font-weight:900;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:30px;
    text-shadow:0 2px 8px rgba(255,255,255,.15);
}

.estadisticas-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.estadistica-card{
    background:#10102c;
    border:2px solid #ff2d5f;
    border-radius:22px;
    padding:22px 18px;
    text-align:center;
    transition:all .30s ease;
}

.estadistica-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 0 30px rgba(255,45,95,.40);
    border-color:#ff4c73;
}

.estadistica-icono{
    font-size:46px;
    margin-bottom:8px;
}

.estadistica-numero{
    font-size:82px;
    font-weight:900;
    color:#ffffff;
    line-height:1;
    margin:6px 0;
    text-shadow:0 0 12px rgba(255,255,255,.25);
}

.estadistica-texto{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.18);
    color:#ffffff;
    font-size:25px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

@media(max-width:900px){

.estadisticas-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.estadisticas-grid{
grid-template-columns:1fr;
}

.estadisticas-titulo{
font-size:28px;
}

.estadistica-card{
padding:18px 12px;
}

.estadistica-icono{
font-size:38px;
}

.estadistica-numero{
font-size:60px;
}

.estadistica-texto{
font-size:20px;
}

}
/*====================================
   TOTAL QSL Y DIPLOMAS
====================================*/

.totales-radio{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin:40px 0;
}

.total-card{
    background:#10102c;
    border:2px solid #ff2d5f;
    border-radius:22px;
    padding:30px;
    text-align:center;
    transition:.3s;
}

.total-card:hover{
    transform:translateY(-5px);
    box-shadow:0 0 25px rgba(255,45,95,.35);
}

.total-icono{
    font-size:55px;
    margin-bottom:15px;
}

.total-titulo{
    color:#fff;
    font-size:30px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:20px;
}

.total-numero{
    color:#fff;
    font-size:90px;
    font-weight:900;
    line-height:1;
}

@media(max-width:800px){

.totales-radio{
grid-template-columns:1fr;
}

.total-numero{
font-size:70px;
}

.total-titulo{
font-size:24px;
}

}
.vacaciones-img{
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 25px auto 20px;
  border-radius: 20px;
}

.titulo-vacaciones{
  text-align: center;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;

  background: linear-gradient(90deg,#12d8f4,#8b63ff,#ff35d3,#ffb000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  margin-top: 20px;
}

#actividades-campo .actividad-centro p{
  text-align: center;
}
.vacaciones-img{
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 30px auto 25px;
  border-radius: 18px;
}

.actividad-centro{
  text-align: center;
}