/* ============================================================================
   marinauta — Plantilla de artículo (entradas), estilo Recap con identidad DS.
   Se encola SOLO en is_singular('post') (angi-marinauta-articulo.php).
   Usa las CSS vars del child (marca.css); fallbacks hex por si no cargara.
   Nomenclatura .mn-art*. Rollback = quitar el mu-plugin (no toca marca.css).
   ==========================================================================*/

:root { --mn-art-headroom: 96px; } /* alto del header sticky + aire (offset anclas/sticky) */

/* Ancla bajo el header sticky (sin JS) para #id de H2/H3 y «Lo esencial». */
.brxe-post-content :is(h2, h3)[id] { scroll-margin-top: var(--mn-art-headroom); }

/* --- Migas de pan ------------------------------------------------------- */
.mn-art-bc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-body, 'Inter', sans-serif); font-size: .875rem;
  color: var(--text-muted, #6E7580); margin: 0 0 var(--space-4, 1rem);
}
.mn-art-bc a { color: var(--text-muted, #6E7580); text-decoration: none; }
.mn-art-bc a:hover { color: var(--link, #1E6BE0); }
.mn-art-bc__sep { color: var(--border-strong, #C9D6E8); }
.mn-art-bc__current { color: var(--azul-marino, #0B2A5B); font-weight: 600; }

/* --- Hero 2 columnas ---------------------------------------------------- */
.mn-art-herogrid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-7, 3rem); align-items: center;
}
.mn-art-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-hover, #12A0BD); text-decoration: none;
}
.mn-art-eyebrow svg { width: 18px; height: 18px; color: var(--cian-espuma, #17B6D6); }
.mn-art-eyebrow:hover { color: var(--cian-espuma, #17B6D6); }

.mn-art-hero .brxe-heading, .mn-art-hero h1 { margin: 0; }

/* Imagen destacada del hero: base = placeholder de marca; encima, capa dinámica
   {featured_image} (div a2fi). Sin destacada → la capa emite bg:none y se ve el
   placeholder (mismo patrón auto-reemplazo que el resto de la cartera). */
.mn-art-hero-media {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-lg, 20px);
  overflow: hidden; box-shadow: var(--shadow-md, 0 6px 20px rgba(11,42,91,.08));
  background: var(--cian-claro, #8FE3F2) url('https://marinauta.com/wp-content/uploads/2026/07/marinauta-placeholder-mar.webp') center / cover no-repeat;
}

.mn-art-lead {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.1875rem; line-height: 1.55; color: var(--text-muted, #6E7580);
}
.mn-art-lead__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 4px; color: var(--cian-espuma, #17B6D6); }

/* Infobar */
.mn-art-infobar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4, 1rem); margin-top: var(--space-2, .5rem);
  padding-top: var(--space-4, 1rem); border-top: 1px solid var(--border, #E3E9F2);
}
.mn-art-infobar__who { display: flex; align-items: center; gap: 12px; }
.mn-art-avatar {
  width: 40px; height: 40px; border-radius: 999px; overflow: hidden; flex: 0 0 auto;
  background: var(--cian-claro, #8FE3F2); display: inline-flex; align-items: center; justify-content: center;
}
.mn-art-avatar img { width: 30px; height: 30px; display: block; }
.mn-art-infobar__lines { display: flex; flex-direction: column; line-height: 1.25; }
.mn-art-infobar__author { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .9375rem; color: var(--azul-marino, #0B2A5B); }
.mn-art-infobar__date { font-size: .8125rem; color: var(--text-muted, #6E7580); }

/* Compartir (infobar + pie) */
.mn-art-share { display: flex; align-items: center; gap: 10px; }
.mn-art-share__label { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .8125rem; color: var(--text-muted, #6E7580); }
.mn-art-share__btns { display: flex; align-items: center; gap: 8px; }
.mn-art-share__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--border, #E3E9F2); color: var(--azul-marino, #0B2A5B);
  text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .06s ease;
}
.mn-art-share__btn:hover { background: var(--azul-marino, #0B2A5B); color: #fff; border-color: var(--azul-marino, #0B2A5B); }
.mn-art-share__btn:active { transform: translateY(1px); }
.mn-art-share__btn svg { width: 17px; height: 17px; }
.mn-art-copy .mn-art-icon-check, .mn-art-copy svg:nth-of-type(2) { display: none; }
.mn-art-copy__ok {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--azul-marino, #0B2A5B); color: #fff; font-family: var(--font-heading, 'Poppins', sans-serif);
  font-size: .75rem; font-weight: 600; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.mn-art-copy.is-copied { background: var(--cian-espuma, #17B6D6); border-color: var(--cian-espuma, #17B6D6); color: #fff; }
.mn-art-copy.is-copied svg:first-of-type { display: none; }
.mn-art-copy.is-copied svg:nth-of-type(2) { display: inline; }
.mn-art-copy.is-copied .mn-art-copy__ok { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- «Lo esencial» ------------------------------------------------------ */
.mn-art-ke {
  background: #fff; border: 1px solid var(--border, #E3E9F2); border-radius: var(--radius-lg, 20px);
  padding: var(--space-6, 2rem); box-shadow: var(--shadow-sm, 0 1px 2px rgba(11,42,91,.06));
}
.mn-art-ke__head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-4, 1rem);
  font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: 1.375rem;
  color: var(--azul-marino, #0B2A5B); letter-spacing: -0.01em;
}
.mn-art-ke__headicon { width: 22px; height: 22px; color: var(--cian-espuma, #17B6D6); flex: 0 0 auto; }
.mn-art-ke__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mn-art-ke__item > a {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md, 12px);
  text-decoration: none; color: inherit; transition: background-color .18s ease;
}
.mn-art-ke__item > a:hover { background: var(--surface-box-tint, #EAF9FD); }
.mn-art-ke__num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  background: var(--azul-marino, #0B2A5B); color: #fff;
  font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .8125rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.mn-art-ke__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-art-ke__title { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--azul-marino, #0B2A5B); }
.mn-art-ke__desc { font-family: var(--font-body, 'Inter', sans-serif); font-size: .9375rem; line-height: 1.5; color: var(--text-muted, #6E7580); }
.mn-art-ke__arrow { flex: 0 0 auto; width: 18px; height: 18px; color: var(--border-strong, #C9D6E8); transition: color .18s ease, transform .18s ease; }
.mn-art-ke__item > a:hover .mn-art-ke__arrow { color: var(--cian-espuma, #17B6D6); transform: translateX(3px); }

/* --- Cuerpo: rail sticky + columna de lectura --------------------------- */
.mn-art-bodygrid {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-7, 3rem); align-items: start;
}
.mn-art-bodygrid .mn-art-col { min-width: 0; }
.mn-art-bodygrid .mn-art-col > .brxe-post-content { margin-inline: 0; }

/* Sticky con recorrido: la CELDA del rail (y sus envoltorios Bricks intermedios)
   deben medir toda la columna; si la celda mide lo que el rail, el sticky no
   tiene dónde viajar (fallo real detectado por Miguel: el rail se quedaba arriba).
   La celda es un brxe-block (flex columna) con un brxe-shortcode dentro. */
.mn-art-bodygrid > *:first-child {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: stretch;
}
.mn-art-bodygrid > *:first-child > .brxe-shortcode { flex: 1 0 auto; }

.mn-art-rail {
  position: sticky; top: var(--mn-art-headroom);
  display: flex; flex-direction: column; gap: var(--space-5, 1.5rem);
  /* El rail puede ser más alto que la pantalla (TOC largo): se acota al viewport
     con scroll interno sutil para que progreso+índice queden SIEMPRE visibles. */
  max-height: calc(100vh - var(--mn-art-headroom) - 24px);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong, #C9D6E8) transparent;
  padding-right: 4px;
}

.mn-art-progress__row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.mn-art-progress__clock { width: 16px; height: 16px; color: var(--cian-espuma, #17B6D6); }
.mn-art-progress__label { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .8125rem; color: var(--azul-marino, #0B2A5B); }
.mn-art-progress__track { height: 6px; border-radius: 999px; background: var(--border, #E3E9F2); overflow: hidden; }
.mn-art-progress__fill {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-mar, #1E6BE0), var(--cian-espuma, #17B6D6));
  transition: width .1s linear;
}

.mn-art-toc__label {
  display: block; font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 700;
  font-size: .6875rem; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted, #6E7580);
  margin-bottom: 10px;
}
.mn-art-toc__list, .mn-art-toc__sub { list-style: none; margin: 0; padding: 0; }
.mn-art-toc__list > li { margin-bottom: 4px; }
.mn-art-toc__sub { margin: 2px 0 4px; padding-left: 12px; border-left: 1px solid var(--border, #E3E9F2); }
.mn-art-toc__link {
  display: block; padding: 5px 0 5px 12px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--font-body, 'Inter', sans-serif); font-size: .9375rem; line-height: 1.35;
  color: var(--text-muted, #6E7580); text-decoration: none;
  transition: color .18s ease, border-color .18s ease, transform .18s ease, font-weight .18s ease;
}
.mn-art-toc__link--sub { font-size: .875rem; }
.mn-art-toc__link:hover { color: var(--azul-marino, #0B2A5B); }
.mn-art-toc__link.is-active {
  color: var(--accent-hover, #12A0BD); font-weight: 600;
  border-left-color: var(--cian-espuma, #17B6D6); transform: translateX(2px);
}
.mn-art-toc__link.is-read { color: var(--azul-marino, #0B2A5B); }

/* --- «Lee también» inline ----------------------------------------------- */
.mn-art-alsoread {
  clear: both; margin: var(--space-7, 3rem) 0; max-width: var(--width-read, 720px);
  margin-inline: auto;
}
.mn-art-alsoread__label {
  display: block; font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 700;
  font-size: .6875rem; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-hover, #12A0BD);
  margin-bottom: 10px;
}
.mn-art-alsoread__card {
  display: flex; gap: var(--space-4, 1rem); align-items: center;
  background: var(--surface-card, #F5F8FC); border: 1px solid var(--border, #E3E9F2);
  border-radius: var(--radius-md, 12px); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(11,42,91,.06));
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.mn-art-alsoread__card:hover { box-shadow: var(--shadow-md, 0 6px 20px rgba(11,42,91,.08)); transform: translateY(-2px); border-color: var(--border-strong, #C9D6E8); }
.mn-art-alsoread__media { flex: 0 0 auto; width: 150px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cian-claro, #8FE3F2); }
.mn-art-alsoread__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-art-alsoread__body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4, 1rem) var(--space-5, 1.5rem) var(--space-4, 1rem) 0; }
.mn-art-alsoread__eyebrow { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2, #17B6D6); }
.mn-art-alsoread__title { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--azul-marino, #0B2A5B); }
.mn-art-alsoread__card:hover .mn-art-alsoread__title { color: var(--azul-mar, #1E6BE0); }

/* --- Pie del artículo --------------------------------------------------- */
.mn-art-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4, 1rem);
  margin-top: var(--space-6, 2rem); padding-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--border, #E3E9F2);
}
.mn-art-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
  background: rgba(30,107,224,.08); border: 1px solid rgba(30,107,224,.18);
  font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .8125rem;
  color: var(--azul-mar, #1E6BE0); text-decoration: none;
}
.mn-art-chip svg { width: 15px; height: 15px; }
.mn-art-chip:hover { background: rgba(30,107,224,.14); }
.mn-art-updated { font-family: var(--font-body, 'Inter', sans-serif); font-size: .875rem; color: var(--text-muted, #6E7580); }
.mn-art-footer .mn-art-share { margin-left: auto; }

/* --- Anterior / Siguiente ----------------------------------------------- */
.mn-art-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4, 1rem); margin: var(--space-7, 3rem) 0; }
.mn-art-pn__card {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  background: var(--surface-card, #F5F8FC); border: 1px solid var(--border, #E3E9F2);
  border-radius: var(--radius-md, 12px); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(11,42,91,.06));
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.mn-art-pn__card:hover { box-shadow: var(--shadow-md, 0 6px 20px rgba(11,42,91,.08)); transform: translateY(-2px); border-color: var(--border-strong, #C9D6E8); }
.mn-art-pn__card--next { flex-direction: row-reverse; text-align: right; }
.mn-art-pn__media { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--radius-sm, 6px); overflow: hidden; background: var(--cian-claro, #8FE3F2); }
.mn-art-pn__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-art-pn__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mn-art-pn__dir { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2, #17B6D6); }
.mn-art-pn__card--next .mn-art-pn__dir { justify-content: flex-end; }
.mn-art-pn__dir svg { width: 15px; height: 15px; }
.mn-art-pn__title { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--azul-marino, #0B2A5B); }
.mn-art-pn__card:hover .mn-art-pn__title { color: var(--azul-mar, #1E6BE0); }
.mn-art-pn__spacer { display: block; }

/* --- «Sigue navegando» -------------------------------------------------- */
.mn-art-readnext { margin-top: var(--space-4, 1rem); }
.mn-art-readnext__head { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: 1.5rem; color: var(--azul-marino, #0B2A5B); margin: 0 0 var(--space-5, 1.5rem); }
.mn-art-readnext .mn-gcard-list { grid-template-columns: repeat(3, 1fr); }

/* --- Tablas anchas del contenido: scroll horizontal propio -------------- */
.mn-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5em 0; max-width: 100%; }
.mn-tablewrap > table { margin: 0; }

/* --- Barra de progreso móvil (fija arriba) ------------------------------ */
.mn-art-mprogress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; background: transparent; display: none; }
.mn-art-mprogress > span { display: block; height: 100%; width: 0%; background: var(--cian-espuma, #17B6D6); }

/* --- Tarjeta flotante «A continuación» ---------------------------------- */
.mn-art-upnext {
  position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 320px; max-width: calc(100vw - 44px);
  display: flex; align-items: stretch; gap: 0;
  background: #fff; border: 1px solid var(--border, #E3E9F2); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg, 0 18px 44px rgba(11,42,91,.12)); overflow: hidden;
  opacity: 0; transform: translateY(12px); transition: opacity .28s ease, transform .28s ease;
}
.mn-art-upnext.is-visible { opacity: 1; transform: translateY(0); }
.mn-art-upnext__link { display: flex; align-items: center; gap: 12px; padding: 10px; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.mn-art-upnext__media { flex: 0 0 auto; width: 78px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm, 6px); overflow: hidden; background: var(--cian-claro, #8FE3F2); }
.mn-art-upnext__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-art-upnext__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-art-upnext__label { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 700; font-size: .625rem; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-2, #17B6D6); }
.mn-art-upnext__title { font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 600; font-size: .9375rem; line-height: 1.25; color: var(--azul-marino, #0B2A5B); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-art-upnext__close {
  flex: 0 0 auto; width: 34px; border: 0; border-left: 1px solid var(--border, #E3E9F2); background: #fff;
  color: var(--text-muted, #6E7580); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .18s ease, color .18s ease;
}
.mn-art-upnext__close:hover { background: var(--surface-alt, #F5F8FC); color: var(--azul-marino, #0B2A5B); }
.mn-art-upnext__close svg { width: 16px; height: 16px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================*/
@media (max-width: 1099px) {
  .mn-art-bodygrid { grid-template-columns: 1fr; gap: var(--space-5, 1.5rem); }
  .mn-art-rail { display: none; }            /* rail fuera: queda «Lo esencial» arriba */
  .mn-art-mprogress { display: block; }        /* barra fina arriba en su lugar */
}
@media (max-width: 860px) {
  /* Al apilar, el orden manda (hallazgo UX Miguel 2026-07-14, patrón Recap):
     eyebrow → TÍTULO → entradilla → imagen → infobar. Se disuelve el wrapper
     de texto con display:contents para poder intercalar la imagen. */
  .mn-art-herogrid { display: flex; flex-direction: column; gap: var(--space-4, 1rem); }
  .mn-art-hero-text { display: contents; }
  .mn-art-hero-text > *:nth-child(1) { order: 1; } /* eyebrow */
  .mn-art-hero-text > *:nth-child(2) { order: 2; } /* h1 */
  .mn-art-hero-text > *:nth-child(3) { order: 3; } /* entradilla */
  .mn-art-hero-media { order: 4; }                 /* imagen tras el texto */
  .mn-art-hero-text > *:nth-child(4) { order: 5; } /* infobar al final */
  .mn-art-readnext .mn-gcard-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .mn-art-upnext { display: none; }             /* fuera en móvil (<768) */
  .mn-art-pn { grid-template-columns: 1fr; }
  .mn-art-readnext .mn-gcard-list { grid-template-columns: 1fr; }
  .mn-art-alsoread__media { width: 116px; }

  /* --- Compactación vertical (auditoría UX móvil 2026-07-14): en 812px de
     alto, cada hueco cuenta. Secciones de la plantilla 149 por id estable. --- */
  #brxe-a2sec1 { padding-top: 14px; padding-bottom: 10px; }
  #brxe-a2sec2 { padding-top: 4px; padding-bottom: 8px; }
  #brxe-a2sec3 { padding-top: 8px; }
  #brxe-a2con1 { row-gap: 12px; }
  /* Migas en UNA línea con elipsis (antes: 3 líneas, 79px). Solo la página
     actual se encoge; los enlaces del rastro no se parten. */
  .mn-art-bc { margin-bottom: 0; flex-wrap: nowrap; }
  .mn-art-bc a, .mn-art-bc__sep { flex: 0 0 auto; white-space: nowrap; }
  .mn-art-bc__current { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* «Lo esencial» compacto (antes 768px de alto) */
  .mn-art-ke { padding: var(--space-4, 1rem); }
  .mn-art-ke__head { margin-bottom: 10px; font-size: 1.25rem; }
  .mn-art-ke__item > a { padding: 10px 8px; gap: 10px; }
  .mn-art-ke__desc { font-size: .875rem; }
  .mn-art-infobar { margin-top: 0; padding-top: 12px; }
  .mn-art-infobar { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-art-progress__fill, .mn-art-toc__link, .mn-art-ke__arrow,
  .mn-art-upnext, .mn-art-share__btn, .mn-art-copy__ok { transition: none !important; }
}