/* =========================================================
   BRAMEX PLUS — BLOG POST CONTENT STYLES
   Estilos específicos para entradas del blog
   Ámbito: solo elementos dentro de .bpx-blog-content
   Reutiliza las variables globales del sistema
   ========================================================= */

/* -----------------------------------------------------
   Contenedor base
----------------------------------------------------- */
.bpx-blog-content{
  font-family:"Inter", sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--bpx-grey);
  max-width:780px;
  margin:0 auto;
}

/* -----------------------------------------------------
   Párrafos y enlaces
----------------------------------------------------- */
.bpx-blog-content p{
  margin:0 0 1.4em;
}

.bpx-blog-content a{
  color:var(--bpx-navy);
  text-decoration:underline;
  text-decoration-color:var(--bpx-yellow);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:var(--bpx-transition);
}

.bpx-blog-content a:hover{
  color:var(--bpx-yellow);
  text-decoration-color:var(--bpx-navy);
}

.bpx-blog-content strong{
  color:var(--bpx-navy);
  font-weight:700;
}

.bpx-blog-content em{
  font-style:italic;
  color:var(--bpx-grey-2);
}

/* -----------------------------------------------------
   Encabezados H2 y H3
----------------------------------------------------- */
.bpx-blog-content h2{
  font-family:"Inter", sans-serif;
  font-size:30px;
  font-weight:700;
  line-height:1.25;
  color:var(--bpx-navy);
  margin:2.2em 0 0.8em;
  padding-bottom:0.4em;
  border-bottom:3px solid var(--bpx-yellow);
}

.bpx-blog-content h3{
  font-family:"Inter", sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1.3;
  color:var(--bpx-navy);
  margin:1.8em 0 0.6em;
}

/* -----------------------------------------------------
   Listas
----------------------------------------------------- */
.bpx-blog-content ul,
.bpx-blog-content ol{
  margin:0 0 1.6em;
  padding-left:0;
  list-style:none;
}

.bpx-blog-content ul li,
.bpx-blog-content ol li{
  position:relative;
  padding-left:32px;
  margin-bottom:0.7em;
  line-height:1.7;
}

/* Bullet personalizado para listas no ordenadas */
.bpx-blog-content ul li::before{
  content:"";
  position:absolute;
  left:8px;
  top:13px;
  width:8px;
  height:8px;
  background:var(--bpx-yellow);
  border-radius:50%;
}

/* Numeración personalizada para listas ordenadas */
.bpx-blog-content ol{
  counter-reset:bpx-counter;
}

.bpx-blog-content ol li{
  counter-increment:bpx-counter;
}

.bpx-blog-content ol li::before{
  content:counter(bpx-counter);
  position:absolute;
  left:0;
  top:2px;
  width:24px;
  height:24px;
  background:var(--bpx-navy);
  color:var(--bpx-white);
  border-radius:50%;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* -----------------------------------------------------
   Callouts amarillos
----------------------------------------------------- */
.bpx-blog-content .bpx-callout{
  background:var(--bpx-soft-yellow);
  border-left:4px solid var(--bpx-yellow);
  border-radius:var(--bpx-radius-sm);
  padding:24px 28px;
  margin:2em 0;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-blog-content .bpx-callout .bpx-callout-title{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--bpx-warning-text);
  margin-bottom:8px;
}

.bpx-blog-content .bpx-callout p{
  margin:0;
  color:var(--bpx-navy);
  font-size:16px;
  line-height:1.6;
}

.bpx-blog-content .bpx-callout p + p{
  margin-top:0.8em;
}

.bpx-blog-content .bpx-callout a{
  color:var(--bpx-navy);
  font-weight:600;
}

/* -----------------------------------------------------
   Tablas
----------------------------------------------------- */
.bpx-blog-content table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:2em 0;
  background:var(--bpx-white);
  border-radius:var(--bpx-radius-sm);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-sm);
  font-size:15px;
}

.bpx-blog-content table thead{
  background:var(--bpx-navy);
}

.bpx-blog-content table thead th{
  color:var(--bpx-white);
  font-weight:700;
  text-align:left;
  padding:14px 18px;
  font-size:14px;
  letter-spacing:0.3px;
}

.bpx-blog-content table tbody td{
  padding:14px 18px;
  border-bottom:1px solid var(--bpx-border);
  vertical-align:top;
  line-height:1.5;
}

.bpx-blog-content table tbody tr:last-child td{
  border-bottom:none;
}

.bpx-blog-content table tbody tr:nth-child(even){
  background:var(--bpx-soft-bg-2);
}

.bpx-blog-content table tbody td:first-child{
  font-weight:600;
  color:var(--bpx-navy);
}

/* -----------------------------------------------------
   Imágenes
----------------------------------------------------- */
.bpx-blog-content img{
  max-width:100%;
  height:auto;
  border-radius:var(--bpx-radius-md);
  margin:1.8em 0;
  box-shadow:var(--bpx-shadow-md);
  display:block;
}

/* -----------------------------------------------------
   Citas
----------------------------------------------------- */
.bpx-blog-content blockquote{
  border-left:4px solid var(--bpx-yellow);
  background:var(--bpx-soft-bg);
  padding:20px 28px;
  margin:2em 0;
  border-radius:0 var(--bpx-radius-sm) var(--bpx-radius-sm) 0;
  font-style:italic;
  color:var(--bpx-navy);
  font-size:18px;
  line-height:1.6;
}

/* -----------------------------------------------------
   Disclaimer / aclaración final
   (último <p><em>...</em></p> del artículo)
----------------------------------------------------- */
.bpx-blog-content > p:last-child em{
  display:block;
  background:var(--bpx-soft-bg);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-sm);
  padding:18px 24px;
  font-size:14px;
  line-height:1.6;
  color:var(--bpx-grey-2);
  font-style:normal;
  margin-top:2em;
}

/* -----------------------------------------------------
   Responsive
----------------------------------------------------- */
@media (max-width: 768px){
  .bpx-blog-content{
    font-size:16px;
  }

  .bpx-blog-content h2{
    font-size:26px;
  }

  .bpx-blog-content h3{
    font-size:20px;
  }

  .bpx-blog-content .bpx-callout{
    padding:20px 22px;
  }

  .bpx-blog-content table{
    font-size:14px;
  }

  .bpx-blog-content table thead th,
  .bpx-blog-content table tbody td{
    padding:12px 14px;
  }

  /* Las tablas en móvil pueden necesitar scroll horizontal */
  .bpx-blog-content table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}

@media (max-width: 480px){
  .bpx-blog-content{
    font-size:15px;
  }

  .bpx-blog-content h2{
    font-size:23px;
  }

  .bpx-blog-content h3{
    font-size:18px;
  }
}