/* ============================================================================
   contenido.css — skin de contenido compartido (Business Review primero).
   Estiliza la estructura EXISTENTE del artículo (no reescribe markup) para
   lograr el cuerpo de lectura claro y legible del diseño nuevo. Chrome oscuro
   lo pone chrome.php. Usa variables :root con fallbacks.
   Cargar DESPUÉS de estilos.css para ganar el cascade.
   ============================================================================ */

/* Marco general del contenido (bajo el header fijo) */
body.cnt-page{ background:#f4f2f6; font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#241f2b; padding-top:60px; }

/* --- Contenedor del artículo: columna de lectura centrada --- */
.card.card-nota-individual{
  max-width:1120px; margin:20px auto 0; background:transparent; border:0; box-shadow:none; border-radius:0; padding:0 24px;
}
/* Título */
.card-nota-individual .titulo{
  font-size:clamp(1.9rem,4.6vw,2.9rem); line-height:1.12; letter-spacing:-.02em; font-weight:800;
  color:#241f2b; text-wrap:balance; margin:0;
}
/* Byline */
.card-nota-individual .text-gray{ color:#6b6473 !important; font-weight:600; }
.card-nota-individual .text-gray a{ color:var(--violeta,#563454); text-decoration:none; }
/* Bajada (lead): el h2.card-text que es hijo directo de la card */
.card-nota-individual > .card-text{
  font-size:1.25rem !important; line-height:1.55; color:#443c50; font-weight:500;
  margin:24px 0 0 !important; padding:0 !important; text-align:left; max-width:820px;
}
/* Imagen de portada */
.card-nota-individual > .img-fluid{
  width:100%; height:auto; border-radius:16px; margin:30px 0 0; display:block;
}

/* --- Cuerpo del artículo (HTML crudo desde la DB dentro de .card-body) --- */
.card-nota-individual .card-body{ padding:0; max-width:820px; margin:0; }
@media(min-width:992px){
  .card-nota-individual .card-body p,
  .card-nota-individual .card-body li{ font-size:1.13rem; line-height:1.8; }
}
.card-nota-individual .card-body > .card-text{ margin:0; }
.card-nota-individual .card-body h2{
  font-size:1.5rem; line-height:1.3; font-weight:700; letter-spacing:-.01em;
  color:var(--violeta-dark,#3d2540); margin:42px 0 0;
}
.card-nota-individual .card-body h3{ font-size:1.2rem; font-weight:700; color:var(--violeta-dark,#3d2540); margin:32px 0 0; }
.card-nota-individual .card-body p{ font-size:1.075rem; line-height:1.75; margin:18px 0 0; color:#2c2733; }
.card-nota-individual .card-body ul,
.card-nota-individual .card-body ol{ margin:16px 0 0; padding-left:1.3em; }
.card-nota-individual .card-body li{ font-size:1.075rem; line-height:1.7; margin:8px 0 0; color:#2c2733; }
.card-nota-individual .card-body a{
  color:var(--violeta,#563454); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--lima,#dafb37); text-decoration-thickness:2px;
}
.card-nota-individual .card-body a:hover{ color:var(--violeta-dark,#3d2540); }
.card-nota-individual .card-body img{ max-width:100%; height:auto; border-radius:14px; margin:28px 0 0; display:block; }
.card-nota-individual .card-body blockquote{
  margin:34px 0 0; padding:6px 0 6px 24px; border-left:4px solid var(--lima,#dafb37);
  font-size:1.25rem; line-height:1.45; font-weight:600; color:var(--violeta-dark,#3d2540);
}

/* --- Eyebrow (categoría) que agregamos antes del título · linkea al índice --- */
.cnt-eyebrow{ display:inline-flex; gap:9px; align-items:center; font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--violeta,#563454); margin-bottom:16px; text-decoration:none; transition:color .15s; }
a.cnt-eyebrow:hover{ color:var(--violeta-dark,#3d2540); }
a.cnt-eyebrow:hover .dot{ transform:scale(1.35); }
.cnt-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--lima,#dafb37); transition:transform .15s; }

/* --- Índice de contenido (portada de la sección): estilo nueva web --- */
.cnt-page .idx-head h1{ font-size:clamp(2rem,4.5vw,2.9rem)!important; font-weight:800!important; color:#241f2b!important; letter-spacing:-.02em; margin:0 0 10px; }
.cnt-page .idx-head p{ color:#6b6473!important; font-size:1.1rem; }
.cnt-page .form-control-buscar{ border:1.5px solid #e6e2ec!important; padding:14px 22px!important; font-family:'Poppins',sans-serif; box-shadow:none!important; font-size:1rem; }
.cnt-page .input-group{ border-radius:999px!important; overflow:hidden; box-shadow:0 6px 24px rgba(60,40,70,.08)!important; }
.cnt-page .btn_lupa{ background:var(--violeta,#563454)!important; color:#fff!important; border:0!important; padding:0 22px!important; }
.cnt-page .btn_categoria{ border-radius:999px!important; border:1.5px solid #e6e2ec!important; background:#fff!important; color:#5B455B!important; font-weight:600!important; font-size:.85rem!important; padding:8px 16px!important; transition:.15s; }
.cnt-page .btn_categoria.active, .cnt-page .btn_categoria:hover{ background:var(--violeta,#563454)!important; color:#fff!important; border-color:var(--violeta,#563454)!important; }
.cnt-page .card.bg-nota .card-title, .cnt-page .card.bg-nota h5{ color:#241f2b; font-weight:700; }
.cnt-page .card.bg-nota .link-nota{ color:var(--violeta,#563454); }
.cnt-page .btn-outline-scalabl{ border-radius:999px!important; border:1.5px solid var(--violeta,#563454)!important; color:var(--violeta,#563454)!important; font-weight:700!important; font-size:.72rem!important; letter-spacing:.04em; padding:7px 16px!important; }
.cnt-page .btn-outline-scalabl:hover{ background:var(--violeta,#563454)!important; color:#fff!important; }

/* --- CTA fuerte al final → producto de la categoría --- */
.cnt-promo{ max-width:820px; margin:44px 0 0; background:var(--violeta-dark,#3d2540); border-radius:20px; padding:30px; display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cnt-promo .t small{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lima,#dafb37); margin-bottom:8px; }
.cnt-promo .t h4{ margin:0; color:#fff; font-size:1.32rem; line-height:1.25; font-weight:700; max-width:34ch; }
.cnt-promo .t p{ margin:8px 0 0; color:rgba(255,255,255,.7); font-size:.92rem; }
.cnt-promo a.btn{ background:var(--lima,#dafb37); color:var(--violeta-dark,#3d2540); font-weight:700; border-radius:999px; padding:13px 26px; text-decoration:none; font-size:.95rem; white-space:nowrap; }
.cnt-promo a.btn:hover{ filter:brightness(.96); }

/* --- Línea de autor compacta --- */
.cnt-author{ max-width:820px; margin:26px 0 0; padding:18px 0 0; border-top:1px solid #e6e2ec; font-size:.92rem; color:#6b6473; }
.cnt-author b{ color:#241f2b; }
.cnt-author a{ color:var(--violeta,#563454); text-decoration:none; font-weight:600; }

/* --- Relacionados por tema (reusa la grilla existente, la reviste) --- */
.bg-nota{ background:#fff !important; border:1px solid #e6e2ec !important; border-radius:16px !important; overflow:hidden; transition:transform .16s, box-shadow .16s; }
.bg-nota:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(60,40,70,.12); }

/* --- CTA intercalado en el índice (cada 10 notas, solo mobile · lo inserta funciones.js) --- */
.cnt-page .br-cta-col{ margin-top:4px; }
.cnt-page .br-cta-inline{ display:flex; flex-direction:column; gap:10px; background:var(--violeta-dark,#3d2540); border-radius:16px; padding:22px; text-decoration:none; }
.cnt-page .br-cta-inline .br-cta-t{ color:rgba(255,255,255,.82); font-size:.98rem; font-weight:600; line-height:1.35; }
.cnt-page .br-cta-inline .br-cta-b{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:var(--lima,#dafb37); color:var(--violeta-dark,#3d2540); font-weight:700; border-radius:999px; padding:11px 20px; font-size:.9rem; }

@media(max-width:760px){
  .card.card-nota-individual{ margin-top:36px; }
  /* categorías del índice más chicas en mobile (menos filas) */
  .cnt-page .btn_categoria{ font-size:.74rem!important; padding:6px 11px!important; }
  .cnt-page .idx-head h1{ font-size:1.8rem!important; }
}