@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

:root{
  --bg:#ececec;
  --surf:#ffffff;
  --surf2:#f7f7f7;
  --bd:rgba(0,0,0,.10);
  --txt:#111111; /* texto principal */
  --mut:rgba(68,68,68,1); /* texto muted más oscuro */
  --cyn:#ffd42a;
  --blu:#c40000;
  --red:#c40000;
  --navy:#000000;
  --yellow:#ffd42a;
  --black:#000000;
  --white:#ececec;
  --r:12px;
  --shadow:0 10px 30px rgba(0,0,0,.14);
}

body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: linear-gradient(135deg, var(--red) 0%, var(--black) 100%);
  color: var(--txt) !important;
}

main.site-surface{
  background: var(--bg); 
  border-radius: var(--r); 
  box-shadow: var(--shadow);
  color: var(--txt) !important;
  /* Más aire visual dentro del contenedor principal */
  padding: 18px;
}

/* --- Espaciado / orden visual (mejor separación entre recuadros) --- */
/* Separación consistente entre tarjetas (home, comunidad, directorio, etc.) */
.card{margin-bottom: 1.15rem;}
.card-body{padding: 1.15rem;}
.card-header{padding: .9rem 1.15rem;}

/* Feed: deja más aire entre tarjetas y mejora lectura */
.feed-card{margin-bottom: 1.25rem !important;}
.feed-card .card-body{padding: 1.2rem;}

/* Secciones/headers */
.tech-hero{margin-bottom: 1.75rem !important;}
h1,h2,h3,h4,h5{letter-spacing: .2px;}

/* Grids: un poco más de gap cuando se usa bootstrap g-3 */
.row.g-3{--bs-gutter-x: 1.3rem; --bs-gutter-y: 1.3rem;}

/* Formularios: más separación entre campos */
.mb-2{margin-bottom: .75rem !important;}
.mb-3{margin-bottom: 1.05rem !important;}

/* Admin: evita que se vea amontonado en tablas */
.table td, .table th{padding: .65rem .55rem;}

/* Links (no romper legibilidad en fondos claros) */
a{color: var(--red) !important;}
a:hover{color: #7a0000 !important;}

/* Muted text */
.text-muted{color: #444 !important;}

/* Cards */
.card{
  background:var(--surf);
  border:1px solid var(--bd);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  color: var(--txt) !important;
}

/* Forms */
.form-control, .form-select, textarea{
  background:var(--surf);
  border:1px solid var(--bd);
  color: var(--txt) !important;
  border-radius:14px;
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color:rgba(47,63,255,.35);
  box-shadow:0 0 0 .25rem rgba(47,63,255,.12);
}
.form-control::placeholder, textarea::placeholder{color:rgba(11,18,32,.45)!important}

/* Buttons */
.btn.btn-primary{
  background:linear-gradient(135deg, var(--blu) 0%, var(--cyn) 100%);
  border:0;
  box-shadow:0 10px 22px rgba(47,63,255,.18);
  color: #111 !important;
}
.btn.btn-outline-primary{
  border-color:rgba(47,63,255,.35);
  color:var(--blu) !important;
}
.btn.btn-outline-primary:hover{
  background:rgba(47,63,255,.08);
  color:var(--navy) !important;
}

/* Badges */
.badge.bg-danger{background:var(--red)!important; color: #fff !important;}
.badge.bg-primary-subtle{background:rgba(47,63,255,.10)!important; color: #111 !important;}

/* Navbar */
.navbar.arco-nav{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bd);
  color: #111 !important;
}
.navbar .navbar-toggler{border-color:rgba(10,20,50,.18)}
.navbar .navbar-toggler-icon{filter:invert(0)}
.navbar .nav-link{color:#111 !important;}
.navbar .nav-link:hover{color:var(--red) !important;}
.navbar .navbar-brand{color:#111 !important;}

/* Topbar ticker — versión legible y con scroll */
.arco-topbar{
  background:#c40000 !important;
  border-bottom:1px solid rgba(255,255,255,.25) !important;
  padding:6px 0 !important;
  overflow:hidden !important;
}

.arco-topbar-label{
  font-size:.75rem !important;
  letter-spacing:.12em !important;
  font-weight:800 !important;
  color:#fff !important;
  padding:.35rem .55rem !important;
  border:1px solid rgba(255,255,255,.35) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.15) !important;
  white-space:nowrap !important;
}

.arco-topbar-track{
  overflow:hidden !important;
  flex:1 !important;
  min-width:120px !important;
}

.arco-topbar-marquee{
  display:inline-flex !important;
  align-items:center !important;
  gap:2rem !important;
  white-space:nowrap !important;
  animation:arco-scroll 22s linear infinite !important;
}

.arco-topbar-item{
  color:#fff !important;
  text-decoration:none !important;
  font-size:.9rem !important;
}

.arco-topbar-item:hover{
  text-decoration:underline !important;
}

.arco-topbar-sep{
  color:rgba(255,255,255,.55) !important;
}

@keyframes arco-scroll{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}

/* Social icons */
.arco-social-link{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  border:1px solid rgba(10,20,50,.14);
  background:rgba(255,255,255,.8);
  color:#111 !important;
  text-decoration:none;
}
.arco-social-link:hover{
  color:var(--blu) !important;
  border-color:rgba(47,63,255,.28);
  background:rgba(47,63,255,.06);
}

/* Sections */
.arco-section{color: #111 !important;}

/* Newsletter */
.arco-newsletter{border:1px solid rgba(47,63,255,.14); color: #111 !important;}
.arco-kicker{font-size:.8rem;color: #111 !important;letter-spacing:.08em;text-transform:uppercase}
.arco-news-img{
  width:100%;
  height:180px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(10,20,50,.10);
}
.arco-news-img--placeholder{
  background:linear-gradient(135deg, rgba(47,63,255,.08), rgba(255,30,45,.06));
}
.arco-thumb{
  width:100%;
  height:120px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(10,20,50,.10);
}
.arco-thumb--placeholder{background:linear-gradient(135deg, rgba(25,199,255,.12), rgba(47,63,255,.08))}

/* Pagination */
.pagination .page-link{
  border-color:rgba(10,20,50,.12);
  color:#111 !important;
}
.pagination .page-item.active .page-link{
  background:rgba(47,63,255,.12);
  border-color:rgba(47,63,255,.20);
  color:#000 !important;
}

/* Footer + live */
.arco-footer{margin-top:32px;padding:22px 0; color:#111 !important;}
.arco-footer-bottom{color:#111 !important;}
.arco-live .card-body{padding:14px; color:#111 !important;}
.arco-live-dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--red);
  box-shadow:0 0 0 6px rgba(255,30,45,.12);
}
.arco-live-title{letter-spacing:.08em; color:#111 !important;}
.arco-live-frame{border-radius:14px;overflow:hidden;border:1px solid rgba(10,20,50,.12);}
.arco-counterbar .card-body{padding:14px; color:#111 !important;}
.arco-counter-label{color:#111 !important;}
.arco-counter-num{font-size:1.25rem;font-weight:800;letter-spacing:.06em; color:#000 !important;}

/* Preformatted message blocks */
.arco-pre{
  white-space:pre-wrap;
  background:rgba(47,63,255,.05);
  border:1px solid rgba(47,63,255,.10);
  border-radius:14px;
  padding:12px;
  color:#111 !important;
}

/* Admin list group readability on light */
.list-group-item{
  border-color:rgba(10,20,50,.12);
  color:#111 !important;
}

/* Ecosistema tech-red additions */
.pill-sponsored{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:var(--yellow);color:#111 !important;font-weight:700;font-size:.75rem;}
.feed-card{border-left:4px solid rgba(0,0,0,.12); color:#111 !important;}
.feed-card.article{border-left-color:rgba(0,0,0,.28);}
.feed-card.community{border-left-color:rgba(0,0,0,.20);}
.feed-card.business{border-left-color:var(--red);}
.feed-card.promo{border-left-color:var(--red);box-shadow:0 8px 24px rgba(196,0,0,.22)!important; color:#111 !important;}

/* Visual hierarchy: type badge + subtle tints */
.feed-badge{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;border-radius:999px;padding:.28rem .55rem;border:1px solid rgba(0,0,0,.10);background:#fff;color:#111;}
.feed-badge i{opacity:.85}
.feed-badge--news{border-color:rgba(0,0,0,.18);}
.feed-badge--community{border-color:rgba(0,0,0,.12);}
.feed-badge--business{border-color:rgba(196,0,0,.28);}

.feed-card.article{background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));}
.feed-card.community{background:linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,0));}
.feed-card.business{background:linear-gradient(180deg, rgba(196,0,0,.03), rgba(0,0,0,0));}

/* Avatar */
.avatar{width:38px;height:38px;border-radius:999px;object-fit:cover;border:2px solid rgba(0,0,0,.08);background:#f5f5f5;}
.avatar-sm{width:30px;height:30px;}
.meta-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;}
.meta-actions{margin-left:auto;display:flex;gap:.4rem;}
.btn-link-danger{color:var(--red) !important;}
.btn-link-danger:hover{color:#9b0000 !important;}

/* Visual hierarchy badges */
.badge-pill{border-radius:999px;padding:.35rem .6rem;font-weight:700;letter-spacing:.2px;}
.badge-article{background:rgba(0,0,0,.08);color:#111;}
.badge-community{background:rgba(255,212,42,.20);color:#111;border:1px solid rgba(255,212,42,.45);}
.badge-business{background:rgba(196,0,0,.10);color:var(--red);border:1px solid rgba(196,0,0,.35);}

/* Avatars */
.avatar{width:36px;height:36px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.12);background:#fff;}
.avatar.sm{width:28px;height:28px;}
.btn.btn-warning{background:var(--yellow);border-color:var(--yellow);color:#111 !important;font-weight:700;}
.btn.btn-primary{background:var(--red);border-color:var(--red); color:#fff !important;} 
.btn.btn-primary:hover{filter:brightness(.92);} 
.arco-topbar-label{background:var(--yellow)!important;color:#111 !important;}
.tech-hero{background:linear-gradient(135deg,var(--red) 0%, var(--black) 100%);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10); color:var(--white) !important;}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  color:#000 !important;
}

/* Párrafos y texto secundario */
p, span, li {
  color:#222 !important;
}
/* No sobreescribir hover del navbar (se mantiene rojo para legibilidad) */

.arco-logo {
  height: 38px !important; /* Ajusta el tamaño aquí */
  width: auto !important;
}
  /* NAVBAR NEGRA */
.navbar.arco-nav {
  background: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* Logo dentro del navbar */
.arco-logo {
  height: 48px !important;
  width: auto !important;
}

/* Links del menú */
.navbar .nav-link {
  color: #fff !important;
  font-weight: 600;
}

.navbar .nav-link:hover {
  color: #c40000 !important; /* rojo de tu marca */
}

/* Íconos sociales */
.arco-social-link {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

.arco-social-link:hover {
  background: rgba(255,255,255,.25) !important;
  color: #c40000 !important;
}

/* Botón hamburguesa */
.navbar .navbar-toggler {
  border-color: rgba(255,255,255,.5) !important;
}

.navbar .navbar-toggler-icon {
  filter: invert(1) !important; /* blanco */
}

/* Menú móvil */
.navbar-collapse {
  background: #000 !important;
  padding: 1rem;
}
}
/* ESPACIADO DE BOTONES EN MENÚ MÓVIL */
@media (max-width: 768px) {

  /* Separación entre las opciones del menú y los botones */
  .navbar.arco-nav .navbar-collapse .btn-login,
  .navbar.arco-nav .navbar-collapse .btn-warning {
    display: block !important;
    width: 100% !important;
    margin-top: 18px !important; /* espacio arriba */
    margin-bottom: 6px !important; /* espacio entre botones */
  }

  /* Más aire debajo del menú */
  .navbar.arco-nav .navbar-collapse {
    padding-bottom: 1.5rem !important;
  }

  /* Separación visual entre links y botones */
  .navbar.arco-nav .navbar-nav {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.25) !important;
  }
}

/* ESPACIADO REAL PARA BOTONES EN MENÚ MÓVIL */
@media (max-width: 768px) {

  /* Separación entre el menú y los botones */
  .navbar.arco-nav .navbar-collapse .nav-item:last-child {
    margin-bottom: 18px !important;
  }

  /* Botones Ingresar y Crear cuenta */
  .navbar.arco-nav .navbar-collapse .btn-login,
  .navbar.arco-nav .navbar-collapse .btn-warning {
    display: block !important;
    width: 100% !important;
    margin-top: 18px !important;
    margin-bottom: 10px !important;
  }

  /* Separación visual entre links y botones */
  .navbar.arco-nav .navbar-collapse .navbar-nav {
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.25) !important;
  }
}

/* ESPACIADO REAL PARA BOTONES EN MENÚ MÓVIL */
@media (max-width: 768px) {

  /* Separación entre las opciones del menú y los botones */
  .navbar.arco-nav .navbar-collapse > .d-flex {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(255,255,255,.25) !important;
  }

  /* Botones Ingresar y Crear cuenta */
  .navbar.arco-nav .navbar-collapse .btn-login,
  .navbar.arco-nav .navbar-collapse .btn-warning {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
}

/* Botón Comunidad rojo */
.nav-comunidad {
  background: #c40000 !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.nav-comunidad:hover {
  background: #a30000 !important;
  color: #fff !important;
}

/* Botón Comunidad rojo */
.btn-comunidad {
  background: #c40000 !important;
  border-color: #c40000 !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
}

.btn-comunidad:hover {
  background: #a30000 !important;
  border-color: #a30000 !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .btn-comunidad {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
}

/* Igualar tamaño de DIRECTORIO y COMUNIDAD en móvil */
@media (max-width: 768px) {
  .tech-hero .d-flex.gap-2 .btn {
    padding: 8px 14px !important; /* mismo alto para ambos */
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
}
/* Separar DIRECTORIO y COMUNIDAD solo en móvil */
@media (max-width: 768px) {
  .tech-hero .d-flex.gap-2 {
    gap: 14px !important; /* más espacio entre botones */
  }

  .tech-hero .d-flex.gap-2 .btn {
    flex: 1 1 auto !important; /* evita que uno se haga más grande */
    
  }
}


/* Reducir tamaño del botón DIRECTORIO solo en móvil */
@media (max-width: 768px) {
  .tech-hero .btn-warning[href="/directorio.php"] {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;

  }
}
/* Botones DIRECTORIO y COMUNIDAD centrados en móvil */
@media (max-width: 768px) {
  .tech-hero .d-flex.gap-2 {
    flex-direction: column !important;   /* uno debajo del otro */
    align-items: center !important;      /* centrados */
    gap: 12px !important;                /* espacio entre ellos */
  }

  .tech-hero .d-flex.gap-2 .btn {
    width: auto !important;              /* tamaño natural */
    min-width: 160px !important;         /* evita que uno sea más chico */
    text-align: center !important;
  }
}
/* Separación en la cabecera de las publicaciones de Comunidad (vista móvil) */
.feed-card.community .d-flex.align-items-center.gap-2 {
    gap: 4px !important;
}

@media (max-width: 576px) {
    .feed-card.community .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        gap: 6px !important;
    }
}