/* ================================================
   ATLAS ARTICLE — ADD-ON CSS
   Prefijo: "aa-"  (atlas article)
   Añadir DESPUÉS de styles_atlas.css
   ================================================ */

/* ------------------------------------------------
   FIX GLOBAL: evita overflow horizontal
   IMPORTANTE: NO poner overflow en html/body/main-content
   porque rompe position:sticky del aside.
   El overflow se contiene solo en aa-page hacia adentro.
   ------------------------------------------------ */

/* ------------------------------------------------
   LAYOUT DEL ARTÍCULO
   Nota: el aa-page vive DENTRO de .fp-layout (1fr 300px)
   Por eso aa-layout NO usa grid propio — hereda la columna
   ------------------------------------------------ */
.aa-page {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary, #001f3d);
  line-height: 1.7;
  min-width: 0;   /* clave: permite que el grid padre comprima */
  width: 100%;
}

/* aa-layout solo existe si se usa fuera de fp-layout */
.aa-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  column-gap: 40px;
  align-items: start;
}

/* ------------------------------------------------
   FIX STICKY DEL ASIDE EN DESKTOP
   Para que position:sticky funcione en la columna
   derecha de un grid, el padre DEBE tener
   align-items: start (no stretch, que es el default).
   Con stretch, la celda del grid se estira al 100%
   de la altura del grid y sticky no tiene espacio
   para "deslizarse" — se queda fijo al inicio.
   ------------------------------------------------ */
.fp-layout {
  align-items: start;
}

/* Refuerzo sticky del aside incluido via {% include %} */
.fp-aside {
  position: sticky;
  top: calc(var(--topnav-height, 64px) + 24px);
}

/* ------------------------------------------------
   HEADER DEL ARTÍCULO
   ------------------------------------------------ */
.aa-header {
  margin-bottom: 32px;
  min-width: 0;
}

.aa-header__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fuzzy-aqua, #00b76c);
  margin: 0 0 10px;
}

.aa-header__h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  line-height: 1.25;
  margin: 0 0 14px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.aa-header__subtitle {
  font-size: 16px;
  color: var(--text-secondary, #5a6c7d);
  margin: 0 0 14px;
  line-height: 1.5;
}

.aa-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.aa-header__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #5a6c7d);
  flex-shrink: 0;
}

.aa-header__meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ------------------------------------------------
   CONTENIDO PRINCIPAL
   ------------------------------------------------ */
.aa-body {
  min-width: 0;
  width: 100%;
}

.aa-body p {
  font-size: 15px;
  color: var(--text-primary, #001f3d);
  margin-bottom: 16px;
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: break-word;
}

.aa-body p:last-child { margin-bottom: 0; }

/* ---- TL;DR BOX ---- */
.aa-tldr {
  background: linear-gradient(135deg, #e8f6fb 0%, #e3f9f0 100%);
  border-left: 4px solid var(--fuzzy-ocean, #006a87);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin-bottom: 40px;
}

.aa-tldr__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fuzzy-ocean, #006a87);
  margin: 0 0 12px;
}

.aa-tldr__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aa-tldr__list li {
  font-size: 14px;
  color: var(--fuzzy-night, #001f3d);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}

.aa-tldr__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--fuzzy-aqua, #00b76c);
  font-weight: 700;
}

/* ---- KEYWORDS ---- */
.aa-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.aa-keyword-tag {
  background: var(--fuzzy-ocean-light, rgba(0,106,135,0.1));
  color: var(--fuzzy-ocean, #006a87);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,106,135,0.2);
  white-space: nowrap;
}

.aa-keyword-tag--primary {
  background: var(--fuzzy-ocean, #006a87);
  color: #fff;
  border-color: transparent;
}

/* ---- SECCIONES H2 ---- */
.aa-section {
  margin-bottom: 52px;
}

.aa-section__h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  line-height: 1.3;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color, #e1e8ed);
  word-break: break-word;
}

.aa-section__h2 span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fuzzy-aqua, #00b76c);
  margin-bottom: 4px;
}

/* ---- SUBSECCIONES H3 ---- */
.aa-subsection {
  margin-bottom: 36px;
  min-width: 0;
}

.aa-subsection__h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  word-break: break-word;
  line-height: 1.4;
}

.aa-subsection__h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  min-width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--fuzzy-cyan, #32ecfd), var(--fuzzy-ocean, #006a87));
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ---- CALLOUT ---- */
.aa-callout {
  background: var(--bg-secondary, #f8fafb);
  border: 1px solid var(--border-color, #e1e8ed);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 14px;
  color: var(--text-secondary, #5a6c7d);
  font-style: italic;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
}

.aa-callout--ocean {
  background: var(--fuzzy-ocean-light, rgba(0,106,135,0.08));
  border-color: rgba(0,106,135,0.2);
  color: var(--fuzzy-night, #001f3d);
  font-style: normal;
}

.aa-callout--tip::before       { content: '💡 '; }
.aa-callout--important::before { content: '👉 '; }

/* ---- LISTAS ---- */
.aa-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aa-list li {
  font-size: 14px;
  color: var(--text-primary, #001f3d);
  padding-left: 22px;
  position: relative;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.aa-list li::before {
  content: '•';
  position: absolute;
  left: 6px;
  color: var(--fuzzy-aqua, #00b76c);
  font-weight: 700;
}

.aa-list--numbered { counter-reset: aa-counter; }

.aa-list--numbered li {
  padding-left: 28px;
  counter-increment: aa-counter;
}

.aa-list--numbered li::before {
  content: counter(aa-counter) '.';
  font-weight: 700;
  color: var(--fuzzy-ocean, #006a87);
  font-size: 13px;
  left: 0;
}

/* ---- QUERY BOX ---- */
.aa-query-box {
  background: var(--fuzzy-night, #001f3d);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 20px 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: var(--fuzzy-cyan, #32ecfd);
  line-height: 1.8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.aa-query-box__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(50,236,253,0.5);
  margin-bottom: 8px;
  display: block;
}

/* ------------------------------------------------
   TABLA
   ------------------------------------------------ */
.aa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 28px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e1e8ed);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.aa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 500px;
}

.aa-table thead {
  background: var(--fuzzy-night, #001f3d);
  color: #fff;
}

.aa-table thead th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.aa-table thead th:first-child { border-radius: 10px 0 0 0; }
.aa-table thead th:last-child  { border-radius: 0 10px 0 0; }

.aa-table tbody tr {
  border-bottom: 1px solid var(--border-color, #e1e8ed);
  transition: background 0.15s ease;
}

.aa-table tbody tr:last-child { border-bottom: none; }
.aa-table tbody tr:hover      { background: var(--fuzzy-ocean-light, rgba(0,106,135,0.06)); }

.aa-table tbody td {
  padding: 12px 14px;
  color: var(--text-primary, #001f3d);
  vertical-align: top;
  line-height: 1.5;
}

.aa-table tbody td strong { color: var(--fuzzy-ocean, #006a87); font-weight: 600; }

.aa-table .aa-gap-badge {
  background: rgba(0,183,108,0.1);
  color: var(--fuzzy-aqua, #00b76c);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1.5;
}

/* ------------------------------------------------
   PASOS
   ------------------------------------------------ */
.aa-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 20px 0 28px;
  position: relative;
}

.aa-steps::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--border-color, #e1e8ed);
}

.aa-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 0;
  position: relative;
}

.aa-step__num {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--fuzzy-ocean, #006a87);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--bg-secondary, #f8fafb);
}

.aa-step__content {
  padding-top: 10px;
  flex: 1;
  min-width: 0;
}

.aa-step__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  margin: 0 0 6px;
}

.aa-step__desc {
  font-size: 14px;
  color: var(--text-secondary, #5a6c7d);
  margin: 0;
  line-height: 1.7;
}

/* ---- Method steps ---- */
.aa-method-step {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e1e8ed);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: box-shadow 0.2s;
  min-width: 0;
  overflow: hidden;
}

.aa-method-step:hover { box-shadow: 0 4px 16px rgba(0,106,135,0.1); }

.aa-method-step__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.aa-method-step__num {
  background: linear-gradient(135deg, var(--fuzzy-cyan, #32ecfd), var(--fuzzy-ocean, #006a87));
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.aa-method-step__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

.aa-method-step p {
  font-size: 14px;
  color: var(--text-secondary, #5a6c7d);
  margin: 0 0 8px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.aa-method-step p:last-child { margin-bottom: 0; }
.aa-method-step .aa-list     { margin-bottom: 0; }

/* ---- Ejemplo mal/bien ---- */
.aa-example-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.aa-example {
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  min-width: 0;
  overflow-wrap: break-word;
}

.aa-example--bad {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220,38,38,0.2);
}

.aa-example--good {
  background: rgba(0, 183, 108, 0.07);
  border: 1px solid rgba(0,183,108,0.25);
}

.aa-example__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.aa-example--bad  .aa-example__label { color: #dc2626; }
.aa-example--good .aa-example__label { color: var(--fuzzy-aqua, #00b76c); }

.aa-example__text { color: var(--text-primary, #001f3d); margin: 0; }

/* ---- Checklist ---- */
.aa-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aa-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary, #001f3d);
  line-height: 1.7;
  overflow-wrap: break-word;
  min-width: 0;
}

.aa-checklist li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: rgba(0,183,108,0.12);
  border: 1.5px solid var(--fuzzy-aqua, #00b76c);
  border-radius: 4px;
  color: var(--fuzzy-aqua, #00b76c);
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---- Método QCP ---- */
.aa-qcp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 28px;
}

.aa-qcp-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e1e8ed);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  min-width: 0;
}

.aa-qcp-card__icon   { font-size: 22px; margin-bottom: 8px; line-height: 1; }

.aa-qcp-card__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fuzzy-ocean, #006a87);
  margin-bottom: 6px;
}

.aa-qcp-card__text {
  font-size: 13px;
  color: var(--text-secondary, #5a6c7d);
  line-height: 1.5;
  margin: 0;
}

/* ---- Ideas grid ---- */
.aa-ideas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.aa-idea-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e1e8ed);
  border-radius: 12px;
  padding: 18px 20px;
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 0;
  overflow: hidden;
}

.aa-idea-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,106,135,0.12);
}

.aa-idea-card__sector {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fuzzy-aqua, #00b76c);
  margin-bottom: 6px;
}

.aa-idea-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  margin: 0 0 8px;
  line-height: 1.4;
  word-break: break-word;
}

.aa-idea-card__desc {
  font-size: 13px;
  color: var(--text-secondary, #5a6c7d);
  line-height: 1.65;
  margin: 0 0 12px;
}

.aa-idea-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fuzzy-ocean, #006a87);
  text-decoration: none;
  transition: color 0.2s;
  word-break: break-all;
}

.aa-idea-card__link:hover   { color: var(--fuzzy-aqua, #00b76c); }
.aa-idea-card__link::after  { content: '↗'; font-size: 11px; }

/* ---- Sector tabs ---- */
.aa-sector-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.aa-sector-tab {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border-color, #e1e8ed);
  background: var(--bg-primary, #fff);
  color: var(--text-secondary, #5a6c7d);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.aa-sector-tab:hover,
.aa-sector-tab.active {
  background: var(--fuzzy-ocean, #006a87);
  border-color: transparent;
  color: #fff;
}

/* ---- Bitácora tip ---- */
.aa-bitacora-tip {
  background: var(--fuzzy-night, #001f3d);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 20px 0;
  color: #fff;
  overflow: hidden;
}

.aa-bitacora-tip__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fuzzy-cyan, #32ecfd);
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.aa-bitacora-tip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aa-bitacora-tip__list li {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  padding-left: 22px;
  position: relative;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.aa-bitacora-tip__list li::before {
  content: '📌';
  position: absolute;
  left: 0;
  font-size: 12px;
}

/* ---- Refs guide ---- */
.aa-refs-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 24px;
}

.aa-refs-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e1e8ed);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.aa-refs-card__level {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fuzzy-ocean, #006a87);
  margin-bottom: 6px;
}

.aa-refs-card__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  line-height: 1;
  margin-bottom: 4px;
}

.aa-refs-card__label { font-size: 11px; color: var(--text-secondary, #5a6c7d); }

/* ---- Reading focus ---- */
.aa-reading-focus {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 24px;
}

.aa-reading-item {
  background: var(--fuzzy-ocean-light, rgba(0,106,135,0.08));
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}

.aa-reading-item__icon  { font-size: 20px; margin-bottom: 6px; display: block; }
.aa-reading-item__label { font-size: 12px; font-weight: 700; color: var(--fuzzy-ocean, #006a87); }

/* ---- Divider ---- */
.aa-divider {
  border: none;
  border-top: 2px dashed var(--border-color, #e1e8ed);
  margin: 40px 0;
  opacity: 0.5;
}

/* ------------------------------------------------
   ASIDE
   ------------------------------------------------ */
.aa-aside {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--topnav-height, 64px) + 24px);
  min-width: 0;
}

.aa-aside-card {
  background: var(--bg-primary, #fff);
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--border-color, #e1e8ed);
  box-shadow: 0 1px 4px rgba(0,31,61,0.07);
}

.aa-aside-card__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fuzzy-night, #001f3d);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color, #e1e8ed);
}

.aa-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aa-toc li a {
  display: block;
  text-decoration: none;
  font-size: 13px;
  color: var(--text-secondary, #5a6c7d);
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.4;
  transition: all 0.2s;
  border-left: 2px solid transparent;
}

.aa-toc li a:hover {
  color: var(--fuzzy-ocean, #006a87);
  background: var(--fuzzy-ocean-light, rgba(0,106,135,0.07));
  border-left-color: var(--fuzzy-ocean, #006a87);
  padding-left: 14px;
}

.aa-toc li a.active {
  color: var(--fuzzy-ocean, #006a87);
  font-weight: 600;
  background: var(--fuzzy-ocean-light, rgba(0,106,135,0.07));
  border-left-color: var(--fuzzy-cyan, #32ecfd);
}

.aa-toc li.aa-toc--sub a { padding-left: 20px; font-size: 12px; }
.aa-toc li.aa-toc--sub a:hover { padding-left: 26px; }

.aa-progress-bar {
  height: 3px;
  background: var(--border-color, #e1e8ed);
  border-radius: 2px;
  margin-bottom: 14px;
  overflow: hidden;
}

.aa-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--fuzzy-cyan, #32ecfd), var(--fuzzy-aqua, #00b76c));
  border-radius: 2px;
  width: 0%;
  transition: width 0.2s ease;
}

.aa-resource-list { display: flex; flex-direction: column; gap: 10px; }

.aa-resource-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary, #f8fafb);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}

.aa-resource-item:hover { background: var(--fuzzy-ocean-light, rgba(0,106,135,0.08)); }
.aa-resource-item__icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.aa-resource-item__info { flex: 1; min-width: 0; }

.aa-resource-item__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fuzzy-ocean, #006a87);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aa-resource-item__source { font-size: 11px; color: var(--text-secondary, #5a6c7d); }

/* ================================================
   TABLET (≤ 1024px)
   ================================================ */
@media (max-width: 1024px) {
  .aa-layout {
    grid-template-columns: 1fr 240px;
    column-gap: 28px;
  }

  .aa-header__h1      { font-size: 26px; }
  .aa-qcp             { grid-template-columns: repeat(3, 1fr); }
  .aa-reading-focus   { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================
   MOBILE (≤ 768px)
   ================================================

   CAUSA RAÍZ del desbordamiento:
   .fp-layout usa grid 2 columnas y .aa-page es la col 1.
   Sin min-width:0 en la celda del grid, el contenido
   interno puede forzar un ancho mayor al disponible.
   La solución es:
   1) Forzar display:block en fp-layout en mobile
   2) Garantizar overflow-x:hidden en la cadena completa
   3) min-width:0 en todos los elementos flex/grid hijos
   ================================================ */
@media (max-width: 768px) {

  /* Colapsa ambos grids contenedores */
  .fp-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* En mobile el aside ya no es sticky — fluye normalmente */
  .fp-aside {
    position: static;
    top: auto;
    width: 100%;
    grid-row: auto;
    grid-column: auto;
  }

  .aa-layout {
    display: block;
    width: 100%;
  }

  /* aa-page y aa-body: 100% del ancho, sin overflow en ancestros */
  .aa-page,
  .aa-body,
  .aa-section,
  .aa-subsection,
  .aa-header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Aside: debajo del contenido */
  .aa-aside {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
    width: 100%;
  }

  .aa-aside-card--toc { display: none; }

  /* ---- Tipografía ---- */
  .aa-header__h1     { font-size: 21px; line-height: 1.3; }
  .aa-header__subtitle { font-size: 14px; }
  .aa-header__eyebrow  { font-size: 10px; }
  .aa-header__meta     { gap: 8px; }
  .aa-header__meta-item { font-size: 11px; }

  .aa-section__h2    { font-size: 18px; }
  .aa-subsection__h3 { font-size: 15px; }
  .aa-body p         { font-size: 14px; line-height: 1.8; }

  /* ---- Secciones ---- */
  .aa-section    { margin-bottom: 36px; }
  .aa-subsection { margin-bottom: 24px; }
  .aa-divider    { margin: 24px 0; }

  /* ---- TL;DR ---- */
  .aa-tldr { padding: 14px 16px; margin-bottom: 24px; }
  .aa-tldr__list li { font-size: 13px; }

  /* ---- Keywords ---- */
  .aa-keywords    { gap: 6px; margin-bottom: 24px; }
  .aa-keyword-tag { font-size: 11px; padding: 3px 10px; }

  /* ---- Callout ---- */
  .aa-callout { font-size: 13px; padding: 12px 14px; }

  /* ---- Listas ---- */
  .aa-list li      { font-size: 13px; }
  .aa-checklist li { font-size: 13px; }

  /* ---- Grids → 1 columna ---- */
  .aa-ideas-grid  { grid-template-columns: 1fr; gap: 12px; }
  .aa-example-pair { grid-template-columns: 1fr; gap: 10px; }

  .aa-qcp {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .aa-qcp-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
  }

  .aa-qcp-card__icon { font-size: 22px; margin-bottom: 0; flex-shrink: 0; }

  .aa-reading-focus { grid-template-columns: repeat(2, 1fr); }
  .aa-refs-guide    { grid-template-columns: repeat(3, 1fr); }

  /* ---- Steps ---- */
  .aa-steps::before { left: 18px; }
  .aa-step__desc    { font-size: 13px; }
  .aa-step__title   { font-size: 14px; }

  /* ---- Method steps ---- */
  .aa-method-step         { padding: 14px 16px; overflow: hidden; }
  .aa-method-step__title  { font-size: 14px; }
  .aa-method-step p       { font-size: 13px; }

  /* ---- Bitácora ---- */
  .aa-bitacora-tip          { padding: 14px 16px; }
  .aa-bitacora-tip__list li { font-size: 13px; }

  /* ---- Query box ---- */
  .aa-query-box { font-size: 12px; padding: 12px 14px; }

  /* ---- Tabla ---- */
  .aa-table          { font-size: 12px; min-width: 420px; }
  .aa-table thead th,
  .aa-table tbody td { padding: 8px 10px; }

  /* ---- Sector tabs → scroll horizontal ---- */
  .aa-sector-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 6px;
  }

  .aa-sector-tabs::-webkit-scrollbar { display: none; }
  .aa-sector-tab { font-size: 12px; padding: 6px 12px; flex-shrink: 0; }

  /* ---- Idea cards ---- */
  .aa-idea-card        { padding: 14px 16px; }
  .aa-idea-card__title { font-size: 13px; }
  .aa-idea-card__desc  { font-size: 12px; }

  /* ---- Refs ---- */
  .aa-refs-card__num { font-size: 24px; }

  /* ---- Ejemplo ---- */
  .aa-example { padding: 12px 14px; }
}

/* ================================================
   MOBILE PEQUEÑO (≤ 480px)
   ================================================ */
@media (max-width: 480px) {

  .aa-header__h1     { font-size: 18px; }
  .aa-section__h2    { font-size: 16px; }
  .aa-subsection__h3 { font-size: 14px; }
  .aa-body p         { font-size: 13px; }

  .aa-refs-guide    { grid-template-columns: 1fr; gap: 8px; }
  .aa-reading-focus { grid-template-columns: repeat(2, 1fr); }

  .aa-sector-tab  { font-size: 11px; padding: 5px 11px; }

  .aa-tldr         { padding: 12px 14px; }
  .aa-method-step  { padding: 12px 14px; }
  .aa-bitacora-tip { padding: 12px 14px; }
  .aa-query-box    { font-size: 11px; padding: 10px 12px; }

  .aa-idea-card    { padding: 12px 14px; }

  .aa-step__title  { font-size: 13px; }
  .aa-step__desc   { font-size: 12px; }
}