/* ============================================================
   KONARTE — Artículo del blog (diseño 2026)
   Lectura cómoda, índice que acompaña al texto y cajas de llamada a la acción con la paleta.
   La paleta, la cabecera y el pie están en sitio.css (se carga antes).
   El texto de cada artículo viene de la base de datos y trae algunas clases de Bootstrap
   (btn, mt-4, text-center…): al final de esta hoja se les da estilo propio, sin cargar Bootstrap.
   ============================================================ */

/* ── Encabezado ── */
.encabezado-articulo { padding-top: 56px; padding-bottom: 36px; }
.encabezado-articulo .migas li:last-child a { color: var(--color-acento-texto); }
.encabezado-articulo h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.06; max-width: 980px; }
.datos-articulo { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 22px; font-size: 0.88rem; color: var(--color-texto-suave); }
.datos-articulo > * + *::before { content: "·"; color: var(--color-acento); margin: 0 12px; }

/* ── Imagen principal ── */
.portada-articulo { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--color-imagen-vacia); }
.portada-articulo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Cuerpo: índice + texto ── */
.cuerpo-articulo { display: grid; grid-template-columns: 280px minmax(0, 720px); justify-content: space-between; gap: 64px; padding-top: 56px; padding-bottom: 88px; }
.lateral-fijo { display: flex; flex-direction: column; gap: 22px; }
/* Índice y asesoría van juntos en un solo bloque fijo que nunca pasa del alto de la pantalla:
   si el índice es largo, su lista se desplaza por dentro (así no se encima nada en el iPad horizontal) */
@media (min-width: 992px) {
  .lateral-fijo { position: sticky; top: calc(var(--alto-cabecera) + 24px); max-height: calc(100vh - var(--alto-cabecera) - 48px); max-height: calc(100svh - var(--alto-cabecera) - 48px); }
  .indice { display: flex; flex-direction: column; min-height: 0; }
  .indice ol { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .indice summary { pointer-events: none; }
  .indice summary::after { display: none; }
  .asesoria { flex-shrink: 0; }
}
.indice { border-top: 1px solid var(--color-texto); padding-top: 18px; }
.indice summary { list-style: none; cursor: pointer; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.indice summary::-webkit-details-marker { display: none; }
.indice summary::after { content: "+"; font-size: 1.3rem; font-weight: 300; line-height: 1; color: var(--color-enlace); }
.indice[open] summary::after { content: "\2212"; }
.indice ol { list-style: none; margin: 14px 0 0; padding: 0 6px 0 0; counter-reset: indice; }
.indice li { border-bottom: 1px solid var(--color-linea); }
.indice a { display: block; padding: 10px 0; font-size: 0.9rem; line-height: 1.4; text-decoration: none; color: var(--color-texto-suave); transition: color 0.2s; }
.indice .indice-h2 > a { color: var(--color-texto); }
.indice .indice-h3 > a { padding-left: 16px; font-size: 0.85rem; }
.indice a:hover, .indice a[aria-current] { color: var(--color-enlace); }
.indice a[aria-current] { box-shadow: inset 2px 0 0 var(--color-acento); padding-left: 12px; }
.indice .indice-h3 > a[aria-current] { padding-left: 24px; }
.asesoria { background: var(--color-fondo-alterno); padding: 26px 24px; }
.asesoria-titulo { font-family: var(--fuente-titulos); font-size: 1.55rem; font-weight: 600; line-height: 1.15; margin-bottom: 8px; }
.asesoria p:not(.asesoria-titulo) { font-size: 0.88rem; color: var(--color-texto-suave); margin-bottom: 18px; }
.asesoria .boton { width: 100%; padding: 14px 12px; font-size: 0.72rem; letter-spacing: 0.1em; white-space: nowrap; }
@media (min-width: 992px) and (max-height: 820px) {
  /* Pantallas bajas (iPad horizontal): asesoría compacta para dejarle más espacio al índice */
  .asesoria { padding: 18px 20px; }
  .asesoria-titulo { font-size: 1.25rem; margin-bottom: 12px; }
  .asesoria p:not(.asesoria-titulo) { display: none; }
}

/* ── Texto del artículo ── */
.texto-articulo { font-size: 1.07rem; line-height: 1.8; color: var(--color-texto-lectura); min-width: 0; }
.texto-articulo > :first-child { margin-top: 0; }
.texto-articulo p { margin: 0 0 1.35em; }
.texto-articulo h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); color: var(--color-texto); margin: 2.4em 0 0.6em; line-height: 1.12; }
.texto-articulo h3 { font-size: 1.5rem; color: var(--color-texto); margin: 1.8em 0 0.45em; line-height: 1.2; }
.texto-articulo h4 { font-family: var(--fuente-texto); font-size: 1rem; font-weight: 600; margin: 1.6em 0 0.4em; }
.texto-articulo .blog-heading { scroll-margin-top: calc(var(--alto-cabecera) + 24px); }
.texto-articulo a { color: var(--color-enlace); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.texto-articulo a:hover { color: var(--color-texto); }
.texto-articulo a.enlace-producto { font-weight: 600; }
.texto-articulo strong { color: var(--color-texto); font-weight: 600; }
.texto-articulo ul, .texto-articulo ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.texto-articulo li { margin-bottom: 0.55em; padding-left: 0.2em; }
.texto-articulo li::marker { color: var(--color-acento-texto); }
.texto-articulo blockquote { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--color-acento); font-family: var(--fuente-titulos); font-size: 1.5rem; line-height: 1.35; color: var(--color-texto); }
.texto-articulo img { max-width: 100%; height: auto; }
.texto-articulo figure { margin: 2.4em 0; }
.texto-articulo figure img { width: 100%; max-height: 620px; object-fit: cover; }
.texto-articulo figcaption { font-size: 0.86rem; color: var(--color-texto-suave); margin-top: 12px; padding-left: 14px; border-left: 1px solid var(--color-acento); line-height: 1.5; }

/* Tablas comparativas (solo las de 4 o más columnas se deslizan en celular; las de 3 caben a lo ancho) */
.texto-articulo .tabla-blog { width: 100%; overflow-x: auto; margin: 2em 0; border-top: 1px solid var(--color-texto); }
.texto-articulo table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; }
.texto-articulo table:has(th:nth-child(4)) { min-width: 560px; }
.texto-articulo th, .texto-articulo td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--color-linea); text-align: left; vertical-align: top; }
.texto-articulo thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-texto-suave); }
.texto-articulo td:first-child { color: var(--color-texto); font-weight: 500; }

/* Cajas de llamada a la acción del texto */
.texto-articulo .premium-highlight-box {
  margin: 3em 0 0; padding: 44px 40px; text-align: center; background: var(--color-fondo-oscuro); color: var(--color-texto-claro-suave);
  border-top: 3px solid var(--color-acento);
}
.texto-articulo .premium-highlight-box h2, .texto-articulo .premium-highlight-box h3, .texto-articulo .premium-highlight-box h4 {
  font-family: var(--fuente-titulos); font-size: clamp(1.7rem, 3vw, 2.1rem); font-weight: 600; color: var(--color-texto-claro); margin: 0 0 12px; line-height: 1.15;
}
.texto-articulo .premium-highlight-box p { margin: 0 auto 26px; max-width: 520px; font-size: 1rem; }
.texto-articulo .premium-highlight-box strong { color: var(--color-texto-claro); }
.texto-articulo .premium-highlight-box a:not(.btn) { color: var(--color-texto-claro); }

/* Botones del texto (clases de Bootstrap de los artículos guardados): WhatsApp con su color, el resto en negro */
.texto-articulo .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border: 0; border-radius: 0;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; line-height: 1.3;
  background: var(--color-fondo-oscuro); color: var(--color-texto-claro); transition: background-color 0.25s, color 0.25s;
}
.texto-articulo .btn:hover { background: var(--color-enlace); color: var(--color-texto-claro); }
.texto-articulo .btn[href*="wa.me"], .texto-articulo .btn-success { background: var(--whatsapp); color: var(--konarte-negro); }
.texto-articulo .btn[href*="wa.me"]:hover, .texto-articulo .btn-success:hover { background: var(--color-texto-claro); color: var(--konarte-negro); }
.texto-articulo .btn .bi { color: inherit; font-size: 1.05rem; }

/* Caja "Persianas de este artículo" */
.caja-productos { margin-top: 3em; border-top: 1px solid var(--color-texto); padding-top: 22px; }
.caja-productos-etiqueta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-acento-texto); margin: 0 0 8px; }
.caja-productos-lista { display: grid; }
.caja-producto { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--color-linea); text-decoration: none !important; color: var(--color-texto) !important; }
.caja-producto img { width: 104px; height: 78px; object-fit: cover; flex-shrink: 0; background: var(--color-imagen-vacia); transition: opacity 0.3s; }
.caja-producto:hover img { opacity: 0.85; }
.caja-producto span { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.caja-producto strong { font-family: var(--fuente-titulos); font-size: 1.35rem; font-weight: 600; }
.caja-producto small { color: var(--color-texto-suave); font-size: 0.88rem; }
.caja-producto em { font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-enlace); margin-top: 4px; }
.caja-producto:hover strong { color: var(--color-enlace); }

/* ── Relacionados y navegación inferior ── */
.relacionados .cabecera-seccion h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.navegacion-articulo { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 48px; padding-bottom: 64px; }

/* ── Clases de Bootstrap que traen los artículos guardados (sin cargar Bootstrap) ── */
.texto-articulo .text-center { text-align: center; }
.texto-articulo .text-muted { color: var(--color-texto-suave) !important; }
.texto-articulo .text-white { color: var(--color-texto-claro); }
.texto-articulo .fw-bold { font-weight: 600; }
.texto-articulo .lead { font-size: 1.2rem; line-height: 1.65; color: var(--color-texto); }
.texto-articulo .h4, .texto-articulo .h5 { font-family: var(--fuente-titulos); font-weight: 600; }
.texto-articulo .mb-3 { margin-bottom: 1rem; }
.texto-articulo .mb-4 { margin-bottom: 1.5rem; }
.texto-articulo .mt-2 { margin-top: 0.5rem; }
.texto-articulo .mt-4 { margin-top: 1.5rem; }
.texto-articulo .mt-5 { margin-top: 3rem; }
.texto-articulo .me-2 { margin-right: 0; } /* el botón ya separa ícono y texto */

/* ── Tableta ── */
@media (max-width: 991.98px) {
  .cuerpo-articulo { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; max-width: 800px; }
  .lateral-articulo .asesoria { display: none; } /* en celular y tableta la asesoría está al final del texto y en el botón de WhatsApp */
  .indice { border: 1px solid var(--color-linea); padding: 16px 18px; }
  .indice[open] { padding-bottom: 8px; }
  .indice li:last-child { border-bottom: 0; }
}

/* ── Celular ── */
@media (max-width: 640px) {
  .encabezado-articulo { padding-top: 32px; padding-bottom: 26px; }
  .migas { margin-bottom: 16px; font-size: 0.66rem; }
  .datos-articulo { font-size: 0.8rem; margin-top: 16px; }
  .datos-articulo > span:first-child { display: none; }
  .datos-articulo > span:first-child + *::before { display: none; }
  .portada-articulo { aspect-ratio: 3 / 2; margin: 0 calc(-1 * var(--margen-lateral)); }
  .texto-articulo { font-size: 1.02rem; line-height: 1.75; }
  .texto-articulo h2 { font-size: 1.85rem; }
  .texto-articulo h3 { font-size: 1.35rem; }
  .texto-articulo th, .texto-articulo td { padding: 11px 12px 11px 0; font-size: 0.88rem; }
  .texto-articulo .premium-highlight-box { padding: 36px 22px; margin-left: calc(-1 * var(--margen-lateral)); margin-right: calc(-1 * var(--margen-lateral)); }
  .texto-articulo .btn { width: 100%; padding: 16px 18px; }
  .caja-producto img { width: 88px; height: 66px; }
  .caja-producto strong { font-size: 1.2rem; }
  .navegacion-articulo { flex-direction: column; align-items: flex-start; gap: 22px; }
}