:root{
  --primary-color: #ff6600;
  --primary-hover: #cc5200;
  --bg: #fafafa;
  --text: #333;
  --muted: #666;
}

*{box-sizing:border-box}
body{
  font-family: "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header (compatible con tu header original) */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  background:var(--primary-color);
  color:#fff;
  position:relative;
}
.navbar .logo img{ height:48px; display:block; }
.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:28px;
  color:#fff;
  cursor:pointer;
}
.menu{
  display:flex;
  gap:18px;
  align-items:center;
}
.menu ul{ display:flex; gap:18px; margin:0; padding:0; list-style:none; align-items:center; }
.menu ul li a{ color:#fff; font-weight:600; text-decoration:none; padding:6px 0; display:inline-block; }
@media(max-width:768px){
  .menu{ display:none; position:absolute; top:60px; right:10px; background:var(--primary-color); width:230px; border-radius:6px; padding:12px; flex-direction:column; z-index:1000; }
  .menu ul{ flex-direction:column; gap:12px; }
  .menu-toggle{ display:block; }
}

/* Botones */
.btn.borde{
  background-color:var(--primary-color);
  border:none;
  color:#fff;
  padding:8px 14px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
  display:inline-block;
  text-decoration:none;
}
.btn.borde:hover{ background-color:var(--primary-hover); transform:translateY(-1px); }

/* Page container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

/* Título con línea (igual al estilo que usas) */
.line{
    text-align:left;
    ;
    
}

.line div{
  display:inline-block;
  background:#fff;
  padding:8px 18px;
  font-size:20px;
  font-weight:800;
  color:var(--text);
  position:relative;
  z-index:2;
  letter-spacing: .6px;
}
.line:before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:2px;
  background:#eee;
  transform:translateY(-50%);
  z-index:1;
}

/* Article card */
.article{
  background:#fff;
  border-radius:10px;
  padding:14px;
  margin-bottom:18px;
  box-shadow:0 6px 20px rgba(8,15,25,0.06);
}
.article .inner{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.article figure{ flex:0 0 200px; margin:0; }
.article figure img{ width:100%; height:200px; object-fit:cover; border-radius:6px; display:block; }
.article .padding{ flex:1; }
.article .detail .time{ color:var(--muted); font-weight:700; }
.article .detail .category{ color:var(--muted); font-style:italic; margin-top:4px; }

/* Article title and text */
.article h2{ margin:6px 0 8px; font-size:20px; }
.article p{ margin:0 0 10px; color:#444; line-height:1.5; }

/* Layout: main + aside */
.row{ display:flex; gap:24px; align-items:flex-start; }
.col-md-8{ flex: 0 0 66.666%; max-width:66.666%; }
.col-md-4{ flex: 0 0 33.333%; max-width:33.333%; }
@media(max-width:992px){
  .row{ flex-direction:column; }
  .col-md-8, .col-md-4{ max-width:100%; flex:1; }
}

/* Sidebar */
.sidebar{ position:relative; }
.aside-title{ font-size:18px; font-weight:800; margin-bottom:10px; color:var(--text); }
.article-mini{ background:#fff; padding:12px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.04); }
.article-mini .inner{ display:flex; gap:50px; align-items:center; }
.article-mini figure img{ width:60px ; height:60px; object-fit:cover; border-radius:6px; }

/* Estilo para el aside */
.sidebar .aside-title {
  font-size: 18px;   /* título del aside */
  font-weight: bold;
  margin-bottom: 15px;
}

.sidebar .aside-body a {
  font-size: 14px;   /* enlaces más pequeños */
  color: #333;
  display: block;
  margin-bottom: 8px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sidebar .aside-body a:hover {
  color: #ff6600;   /* color al pasar el mouse */
}
/* Ajustar aside moderno */
.sidebar .article-mini figure {
  width: 350px;        /* tamaño más grande */
  height: 100px;       /* cuadrado */
  margin: 0;
  overflow: hidden;
  border-radius: 6px; /* bordes redondeados */
}

.sidebar .article-mini figure img {
  width: 80%;
  height: 80%;
  object-fit: cover;  /* recorta manteniendo proporción */
}

.sidebar .article-mini .padding h4 {
  font-size: 60px;   /* título más pequeño */
  line-height: 1.3;
  margin: 0;
}
/* Contenedor del aside */
.sidebar .article-mini .inner {
  display: flex;
  align-items: center;
  gap: 6px;   /* antes 10px → ahora más pegado */
}

/* Imagen un poco más pequeña */
.sidebar .article-mini figure {
  width: 80px;   /* antes 80px */
  height: 70px;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  flex-shrink: 0;
}

.sidebar .article-mini figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto */
.sidebar .article-mini .padding {
  flex: 1;
}

.sidebar .article-mini .padding h4 {
  font-size: 13px;   /* más pequeño */
  line-height: 1.3;  /* más junto */
  margin: 0;
}



/* Comentarios FB */
.comentarios{ margin-top:22px; background:#fff; padding:12px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.04); }

/* Footer (igual al tuyo) */
.footer{ background:#f6f6f6; padding:18px 0; margin-top:24px; color:#666; text-align:center; }

/* Small helpers */
a{ color:var(--primary-color); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Switch primary color via JS (applies to header bg too) */
/* Header (navbar) con fondo blanco */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  background:#fff !important;  /* fondo blanco */
  color:var(--text);
  position:relative;
  border-bottom:1px solid #eee; /* línea separadora opcional */
}

.menu ul li a{
  color:var(--text);  /* texto oscuro en fondo blanco */
  font-weight:600;
  text-decoration:none;
  padding:6px 0;
  display:inline-block;
}

.menu ul li a:hover{
  color:var(--primary-color); /* cambio a naranja al pasar el mouse */
}


/* Responsive tweaks */
@media(max-width:480px){
  .article figure{ flex:0 0 110px; }
  .article figure img{ height:140px; }
}