/* =============================================================
   ARTEMÓVIL — BLOG
   Sistema editorial: serif en cuerpo, paleta cromática por categoría,
   modelo magazine, drop cap, TOC, barra de progreso, callouts.
   Hereda variables y tokens de ../style.css
   ============================================================= */

/* Cargar serif solo en /blog/ — Fraunces (editorial moderna) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

:root {
  --blog-serif: 'Fraunces', 'Source Serif Pro', 'Georgia', serif;
  /* Acentos por categoría (4 vías paralelas del gradient corporativo) */
  --cat-blue:    #4F5BFF;
  --cat-violet:  #8B3FE0;
  --cat-magenta: #E14CB3;
  --cat-coral:   #FF7E91;
}

/* Mapeo categoría → acento (se aplica con clase data-cat-color="blue|violet|magenta|coral") */
.cat-blue    { --cat-accent: var(--cat-blue); }
.cat-violet  { --cat-accent: var(--cat-violet); }
.cat-magenta { --cat-accent: var(--cat-magenta); }
.cat-coral   { --cat-accent: var(--cat-coral); }

/* =============================================================
   PROGRESS BAR DE LECTURA
   ============================================================= */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--cat-blue), var(--cat-violet), var(--cat-magenta), var(--cat-coral));
  z-index: 9990;
  pointer-events: none;
  transition: width .12s linear;
  box-shadow: 0 0 12px rgba(225,76,179,.6);
}

/* =============================================================
   HERO DEL BLOG (listado)
   ============================================================= */
.blog-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 80px));
  padding-bottom: clamp(28px, 4vw, 60px);
  position: relative;
  text-align: center;
}
.blog-hero h1 {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 14px 0 16px;
  line-height: 1.1;
}
.blog-hero .lead {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255,255,255,.75);
  font-size: 1.1rem;
  line-height: 1.55;
}

/* =============================================================
   FILTROS DE CATEGORÍA (pills)
   ============================================================= */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 36px;
}
.blog-filter {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .25s, border-color .25s, color .25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-filter:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.30);
}
.blog-filter .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot-color, rgba(255,255,255,.4));
}
.blog-filter[data-cat="all"]      .dot { background: linear-gradient(135deg, #4F5BFF, #E14CB3); }
.blog-filter[data-cat="diseno-ux"]      { --dot-color: var(--cat-blue); }
.blog-filter[data-cat="estrategia"]     { --dot-color: var(--cat-violet); }
.blog-filter[data-cat="seo-contenidos"] { --dot-color: var(--cat-magenta); }
.blog-filter[data-cat="marketing"]      { --dot-color: var(--cat-coral); }
.blog-filter[data-cat="diseno-ux"] .dot,
.blog-filter[data-cat="estrategia"] .dot,
.blog-filter[data-cat="seo-contenidos"] .dot,
.blog-filter[data-cat="marketing"] .dot { background: var(--dot-color); }
.blog-filter.is-active {
  background: rgba(255,255,255,.10);
  border-color: rgba(225,76,179,.6);
  color: #FFFFFF;
}

/* =============================================================
   LISTADO MAGAZINE
   ============================================================= */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}

/* Card */
.post-card {
  position: relative;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 26px 28px 28px;
  transition: border-color .3s, background .3s, transform .3s;
  overflow: hidden;
  isolation: isolate;
}
.post-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--cat-accent, #4F5BFF);
  opacity: .85;
  border-radius: 18px 0 0 18px;
}
.post-card:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  transform: translateY(-2px);
}

.post-num {
  position: absolute;
  top: 18px; right: 28px;
  font-family: 'Sora', sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.10);
  letter-spacing: -.04em;
  pointer-events: none;
  z-index: 0;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: .82rem;
  color: rgba(255,255,255,.62);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.post-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cat-accent, rgba(255,255,255,.18));
  color: var(--ink);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.post-cat::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cat-accent, currentColor);
  box-shadow: 0 0 8px var(--cat-accent, currentColor);
}
.post-date::before { content: "·"; margin-right: 14px; color: rgba(255,255,255,.35); }
.post-time::before { content: "·"; margin-right: 14px; color: rgba(255,255,255,.35); }

.post-title {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}
.post-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color .25s;
  background-image: linear-gradient(90deg, var(--cat-accent, #fff), var(--cat-accent, #fff));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .35s;
}
.post-card:hover .post-title a { background-size: 100% 1px; }

.post-excerpt {
  color: rgba(255,255,255,.72);
  font-size: .98rem;
  line-height: 1.6;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}
.post-card .read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cat-accent, var(--ink));
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .005em;
  position: relative;
  z-index: 1;
}
.post-card .read-more svg { width: 14px; height: 14px; transition: transform .25s; }
.post-card:hover .read-more svg { transform: translateX(4px); }

/* Card destacada (modelo magazine) */
.post-card.is-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 36px 38px 40px;
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(225,76,179,.10) 0%, transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(79,91,255,.08) 0%, transparent 60%),
    rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.16);
}
.post-card.is-featured::before {
  width: 6px;
  background: linear-gradient(180deg, var(--cat-accent, #4F5BFF), transparent);
}
.post-card.is-featured .featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 8px;
}
.post-card.is-featured .post-title {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 700;
}
.post-card.is-featured .post-excerpt {
  font-size: 1.08rem;
  max-width: 720px;
}
.post-card.is-featured .post-num {
  font-size: 7rem;
  top: 16px;
  right: 32px;
  -webkit-text-stroke: 1.2px rgba(255,255,255,.10);
}
@media (min-width: 860px) {
  .post-card.is-featured {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 36px;
  }
  .post-card.is-featured .featured-body { grid-column: 1; }
  .post-card.is-featured .featured-side {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .post-card.is-featured .post-num {
    position: static;
    font-size: 9rem;
    line-height: 1;
    align-self: flex-end;
  }
}

/* Grid responsivo a partir de tablet */
@media (min-width: 720px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card.is-featured { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-card.is-featured { grid-column: 1 / -1; }
}

/* =============================================================
   DETALLE DEL ARTÍCULO
   ============================================================= */
.article-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 70px));
  padding-bottom: clamp(28px, 4vw, 56px);
  position: relative;
}
.article-hero .container { max-width: var(--maxw); }
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .9rem;
  margin-bottom: 24px;
  transition: color .25s;
}
.article-back:hover { color: var(--ink); }
.article-back svg { width: 14px; height: 14px; }
.article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cat-accent, rgba(255,255,255,.20));
  color: var(--ink);
  padding: 5px 14px;
  border-radius: 999px;
}
.article-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cat-accent, currentColor);
  box-shadow: 0 0 10px var(--cat-accent);
}
.article-title {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 18px 0 22px;
  color: var(--ink);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  margin: 16px 0 0;
}
.article-meta .author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.article-meta .author-iso {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.article-meta .author-iso img { width: 18px; height: 18px; display: block; }
.article-meta .sep { color: rgba(255,255,255,.30); }

/* Contenido del artículo */
.article-body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(255,255,255,.88);
  letter-spacing: 0;
}
.article-body > p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 4.2rem;
  line-height: .9;
  float: left;
  padding: 0.18em 0.14em 0 0;
  margin-top: 0.05em;
  background: linear-gradient(135deg, var(--cat-accent, #4F5BFF), var(--cat-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 24px rgba(225,76,179,.20);
}
.article-body h2 {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 2.6em 0 .6em;
  color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 30px);
}
.article-body h2::before {
  content: "";
  display: inline-block;
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--cat-accent, var(--cat-blue));
  margin: 0 12px 8px 0;
  vertical-align: middle;
}
.article-body h3 {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 1.9em 0 .4em;
  color: var(--ink);
}
.article-body h4 {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5em 0 .3em;
  color: rgba(255,255,255,.92);
}
.article-body p { margin: 1em 0; }
.article-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cat-accent, rgba(225,76,179,.55));
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color .25s;
}
.article-body a:hover { text-decoration-color: var(--ink); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body em { font-style: italic; color: rgba(255,255,255,.94); }
.article-body ul, .article-body ol {
  padding-left: 1.4em;
  margin: 1em 0;
}
.article-body ul li, .article-body ol li {
  margin: .55em 0;
  padding-left: .25em;
}
.article-body ul li::marker { color: var(--cat-accent, var(--cat-magenta)); }
.article-body ol li::marker { color: var(--cat-accent, var(--cat-magenta)); font-weight: 600; }
.article-body blockquote {
  border-left: 3px solid var(--cat-accent, var(--cat-magenta));
  margin: 2em 0;
  padding: .4em 0 .4em 1.4em;
  font-style: italic;
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
}
.article-body code {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: .9em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 1px 7px;
  border-radius: 6px;
  color: var(--ink);
}
.article-body pre {
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.55;
  margin: 1.6em 0;
}
.article-body pre code {
  background: transparent;
  border: none;
  padding: 0;
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 2em auto;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
}
.article-body hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 3em 0;
  position: relative;
}
.article-body hr::before {
  content: "·  ·  ·";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-0);
  padding: 0 14px;
  color: rgba(255,255,255,.35);
  letter-spacing: .3em;
  font-family: var(--blog-serif);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .94rem;
}
.article-body th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--cat-accent, rgba(255,255,255,.20));
  padding: 10px 12px;
}
.article-body td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
}

/* =============================================================
   CALLOUTS — Tip / Dato / Aviso
   Uso: <div class="callout callout-tip"><strong>Tip:</strong> ...</div>
   ============================================================= */
.callout {
  background: rgba(255,255,255,.04);
  border-left: 4px solid var(--cat-accent, var(--cat-violet));
  border-radius: 10px;
  padding: 16px 20px;
  margin: 1.6em 0;
  font-size: 1rem;
  line-height: 1.6;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: rgba(255,255,255,.86);
}
.callout strong { color: var(--ink); }
.callout-tip    { border-color: var(--cat-violet); }
.callout-data   { border-color: var(--cat-coral); background: rgba(255,126,145,.06); }
.callout-warn   { border-color: #F5B342; background: rgba(245,179,66,.06); }

/* =============================================================
   FOOTER DEL ARTÍCULO: relacionados + share
   ============================================================= */
.article-foot {
  max-width: var(--maxw);
  margin: 60px auto 0;
  padding: 0 clamp(20px, 5vw, 48px);
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 2em 0;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.share-row .lbl {
  font-size: .85rem;
  color: rgba(255,255,255,.60);
  margin-right: 4px;
}
.share-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .15s;
  text-decoration: none;
}
.share-btn:hover {
  background: rgba(225,76,179,.12);
  border-color: rgba(225,76,179,.55);
  transform: translateY(-1px);
}
.share-btn svg { width: 16px; height: 16px; }

.related {
  margin-top: 50px;
}
.related h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.related h3::before {
  content: "";
  width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--cat-blue), var(--cat-magenta));
  border-radius: 2px;
}
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.related-item {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.10);
  border-left: 3px solid var(--cat-accent, var(--cat-blue));
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  transition: background .25s, border-color .25s, transform .25s;
}
.related-item:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
  border-left-color: var(--cat-accent);
  transform: translateY(-2px);
}
.related-item .rel-cat {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cat-accent, var(--cat-blue));
  display: block;
  margin-bottom: 6px;
}
.related-item h4 {
  font-family: 'Sora', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}

/* Estado vacío */
.blog-empty {
  text-align: center;
  padding: 80px 20px;
  color: rgba(255,255,255,.55);
  font-family: var(--blog-serif);
  font-style: italic;
  font-size: 1.15rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .post-card, .related-item, .share-btn { transition: none; }
  .read-progress { transition: none; }
}

/* =============================================================
   NAVEGACIÓN POR TABS (propuesta C)
   ============================================================= */

/* ── Tabs de modo ──────────────────────────────────────────── */
.blog-tabs {
  display: inline-flex;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px;
  margin: 28px 0 0;
}
.blog-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.65);
  font: inherit;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.blog-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.blog-tab:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
}
.blog-tab.is-active {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 600;
}

/* ── Controles del grid (búsqueda + selectores) ────────────── */
.blog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 4px;
}
.blog-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 380px;
}
.blog-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: rgba(255,255,255,.45);
  pointer-events: none;
}
.blog-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 13px 9px 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  outline: none;
  transition: border-color .2s, background .2s;
}
.blog-search-input::placeholder { color: rgba(255,255,255,.38); }
.blog-search-input:focus {
  border-color: rgba(225,76,179,.5);
  background: rgba(255,255,255,.06);
}
.blog-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.blog-select {
  padding: 8px 32px 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  font: inherit;
  font-size: .85rem;
  outline: none;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.blog-select:focus { border-color: rgba(225,76,179,.5); }
.blog-select option { background: #0e0f1e; color: #fff; }

/* ── Filtros activos (badges) ──────────────────────────────── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.active-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(225,76,179,.12);
  border: 1px solid rgba(225,76,179,.35);
  color: #fff;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
}
.active-filter-badge > svg { width: 12px; height: 12px; color: rgba(225,76,179,.9); }
.clear-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}
.clear-filter svg { width: 9px; height: 9px; }
.clear-filter:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── Contador de resultados ────────────────────────────────── */
.blog-results-count {
  font-size: .84rem;
  color: rgba(255,255,255,.55);
  margin: 12px 0 0;
  letter-spacing: .01em;
}
.blog-results-count .results-n {
  font-weight: 700;
  color: rgba(255,255,255,.85);
}

/* ── Tags en tarjetas ──────────────────────────────────────── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.post-tag-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.65);
  font: inherit;
  font-size: .74rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.post-tag-pill:hover {
  background: rgba(225,76,179,.14);
  border-color: rgba(225,76,179,.45);
  color: #fff;
}

/* ── Botón reset ───────────────────────────────────────────── */
.reset-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
  margin-top: 12px;
  transition: background .2s, border-color .2s;
}
.reset-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }

/* =============================================================
   VISTA ARCHIVO CRONOLÓGICO
   ============================================================= */
.blog-archive-wrap { padding-top: 16px; }

.archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 860px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
}

.archive-month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 16px;
}
.archive-month-title {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: capitalize;
  margin: 0;
}
.archive-month-count {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.archive-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.archive-item:last-child { border-bottom: none; }

.archive-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cat-accent, rgba(255,255,255,.4));
  margin-top: 6px;
  box-shadow: 0 0 6px var(--cat-accent, transparent);
}
.archive-item-body { flex: 1; min-width: 0; }
.archive-item-title {
  display: block;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 5px;
  transition: color .2s;
}
.archive-item-title:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--cat-accent, rgba(225,76,179,.6));
}
.archive-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  color: rgba(255,255,255,.45);
}
.archive-item-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.archive-item-cat::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cat-accent, rgba(255,255,255,.4));
}
.archive-item-time::before { content: "·"; margin-right: 10px; color: rgba(255,255,255,.25); }

/* =============================================================
   VISTA TEMAS
   ============================================================= */
.blog-temas-wrap { padding-top: 16px; }
.temas-layout { display: flex; flex-direction: column; gap: 60px; }

.temas-section-h {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.temas-section-h::before {
  content: "";
  display: inline-block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cat-blue), var(--cat-magenta));
}

.temas-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 720px) {
  .temas-cats-grid { grid-template-columns: repeat(4, 1fr); }
}

.temas-cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 22px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.025);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .25s, border-color .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.temas-cat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cat-accent, rgba(255,255,255,.3));
  border-radius: 16px 0 0 16px;
}
.temas-cat-card:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-3px);
}
.temas-cat-count {
  font-family: 'Sora', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cat-accent, rgba(255,255,255,.85));
  letter-spacing: -.03em;
}
.temas-cat-label {
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  line-height: 1.3;
}
.temas-cat-arrow {
  width: 14px; height: 14px;
  color: var(--cat-accent, rgba(255,255,255,.4));
  margin-top: 4px;
  transition: transform .25s;
}
.temas-cat-card:hover .temas-cat-arrow { transform: translateX(4px); }

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.tag-cloud-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .35em .85em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  font: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  white-space: nowrap;
  line-height: 1.5;
}
.tag-cloud-pill:hover {
  background: rgba(225,76,179,.14);
  border-color: rgba(225,76,179,.45);
  color: #fff;
  transform: translateY(-1px);
}
.tag-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.7);
  font-size: .7em;
  font-weight: 600;
  padding: 0 5px;
}

/* ── Responsive adicional ──────────────────────────────────── */
@media (max-width: 480px) {
  .blog-tabs { display: flex; flex-wrap: wrap; border-radius: 14px; }
  .blog-tab  { flex: 1; justify-content: center; font-size: .8rem; padding: 8px 10px; }
  .blog-controls { flex-direction: column; align-items: stretch; }
  .blog-search-wrap { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-tab, .temas-cat-card, .tag-cloud-pill,
  .archive-item-title, .post-tag-pill, .reset-btn { transition: none; }
}


/* Migas de pan — ago-2026. Sustituyen al enlace suelto "Volver al blog":
   misma escala visual, pero con la jerarquía real (Inicio / Blog / artículo)
   y correspondencia exacta con el BreadcrumbList de datos estructurados. */
.article-hero .breadcrumb,
.blog-hero .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  font-size: .9rem;
  color: rgba(255,255,255,.65);
}
.article-hero .breadcrumb a,
.blog-hero .breadcrumb a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .25s; }
.article-hero .breadcrumb a:hover,
.blog-hero .breadcrumb a:hover { color: var(--ink, #fff); }
.article-hero .breadcrumb .sep,
.blog-hero .breadcrumb .sep { opacity: .45; }
.article-hero .breadcrumb [aria-current="page"],
.blog-hero .breadcrumb [aria-current="page"] { color: rgba(255,255,255,.9); }


/* Bloque de llamada a la acción dentro del artículo — ago-2026.
   La clase ya se usaba en seo-sem-aeo-geo-visibilidad-digital.html sin estilos
   propios; aquí se le da forma y se reutiliza en los artículos nuevos. */
.article-body .article-cta {
  margin: 44px 0 8px;
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.article-body .article-cta h2 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  scroll-margin-top: 0;
}
.article-body .article-cta h2::before { content: none; }
.article-body .article-cta p { margin: 0 0 18px; }
.article-body .article-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 480px) {
  .article-body .article-cta .cta-actions .btn { width: 100%; justify-content: center; }
}


/* =============================================================
   COMPONENTES EDITORIALES DEL ARTÍCULO — ago-2026
   Rompen el bloque de texto plano sin cambiar la identidad:
   rejilla de comprobación, pasos numerados, tarjetas y figuras.
   Reutilizan --cat-accent, así que cada artículo los tiñe con
   el color de su categoría.
   ============================================================= */

/* --- Rejilla de comprobación: sustituye a las listas largas y planas --- */
.article-body .a-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 22px;
  margin: 1.8em 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .97rem;
}
.article-body .a-checklist li {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 38px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.028);
  color: rgba(255,255,255,.84);
  line-height: 1.5;
  transition: border-color .25s, background .25s, transform .25s;
}
.article-body .a-checklist li:hover {
  border-color: color-mix(in srgb, var(--cat-accent, #E14CB3) 45%, transparent);
  background: rgba(255,255,255,.05);
}
.article-body .a-checklist li::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 15px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--cat-accent, var(--cat-magenta));
  border-bottom: 2px solid var(--cat-accent, var(--cat-magenta));
  transform: rotate(-45deg);
  opacity: .9;
}
.article-body .a-checklist li::marker { content: none; }

/* --- Pasos numerados: para los procesos (antes eran <ol> corridos) --- */
.article-body .a-steps {
  list-style: none;
  counter-reset: paso;
  margin: 1.9em 0;
  padding: 0 0 0 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.article-body .a-steps li {
  counter-increment: paso;
  position: relative;
  margin: 0;
  padding: 4px 0 22px 52px;
  color: rgba(255,255,255,.84);
  line-height: 1.62;
}
.article-body .a-steps li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cat-accent, #E14CB3) 55%, transparent);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.article-body .a-steps li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cat-accent, #E14CB3) 40%, transparent),
    rgba(255,255,255,.05));
}
.article-body .a-steps li:last-child { padding-bottom: 4px; }
.article-body .a-steps li:last-child::after { content: none; }
.article-body .a-steps li::marker { content: none; }

/* --- Tarjetas: para bloques h3 + descripción que se leen en paralelo --- */
.article-body .a-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 1.9em 0;
}
.article-body .a-card {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: border-color .3s, transform .3s;
}
.article-body .a-card:hover {
  border-color: color-mix(in srgb, var(--cat-accent, #E14CB3) 50%, transparent);
  transform: translateY(-2px);
}
.article-body .a-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.01em;
}
.article-body .a-card h3::before { content: none; }
.article-body .a-card p { margin: 0 0 8px; font-size: .95rem; }
.article-body .a-card ul { margin: 8px 0 0; padding-left: 1.15em; font-size: .93rem; }
.article-body .a-card li { margin: .3em 0; }

/* --- Figura intermedia con pie --- */
.article-body .a-figure {
  margin: 2.4em 0;
}
.article-body .a-figure img {
  margin: 0;
  width: 100%;
  border-radius: 16px;
}
.article-body .a-figure figcaption {
  margin-top: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .86rem;
  color: rgba(255,255,255,.58);
  line-height: 1.55;
  text-align: center;
}

/* --- Idea clave: cierra una sección con la conclusión práctica --- */
.article-body .a-key {
  position: relative;
  margin: 2.2em 0;
  padding: 22px 24px 22px 62px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--cat-accent, #E14CB3) 9%, transparent),
    rgba(255,255,255,.02));
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(255,255,255,.9);
}
.article-body .a-key::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 22px;
  height: 22px;
  background: var(--cat-accent, var(--cat-magenta));
  -webkit-mask: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
  mask: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
.article-body .a-key strong { color: var(--ink); }
.article-body .a-key p { margin: 0; font-family: inherit; font-size: inherit; }
.article-body .a-key p + p { margin-top: .6em; }

@media (max-width: 560px) {
  .article-body .a-key { padding: 20px 18px 20px 18px; }
  .article-body .a-key::before { position: static; display: block; margin-bottom: 10px; }
}

/* =============================================================
   REVELADO AL HACER SCROLL — ago-2026
   Entrada suave de cada bloque del artículo. No afecta a los
   títulos letra a letra (eso sigue reservado a la cabecera).
   Sin JS o con prefers-reduced-motion, todo queda visible.
   ============================================================= */
.article-body [data-reveal],
.article-foot [data-reveal] {
  opacity: 1;
  transform: none;
}
html.js-reveal .article-body [data-reveal],
html.js-reveal .article-foot [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.js-reveal .article-body [data-reveal].is-in,
html.js-reveal .article-foot [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .article-body [data-reveal],
  html.js-reveal .article-foot [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .article-body .a-card:hover,
  .article-body .a-checklist li:hover { transform: none; }
}

/* Dentro de una tarjeta la lista va limpia: evita la caja dentro de la caja */
.article-body .a-card .a-checklist {
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 10px 0 0;
}
.article-body .a-card .a-checklist li {
  border: none;
  background: none;
  padding: 5px 0 5px 26px;
  font-size: .93rem;
}
.article-body .a-card .a-checklist li::before { left: 2px; top: 11px; width: 11px; height: 6px; }
.article-body .a-card .a-checklist li:hover { background: none; }

/* Pasos más compactos cuando el texto es de una sola línea */
.article-body .a-steps li { padding-bottom: 16px; }

/* Imagen destacada ancha: para infografías, donde 680 px deja el texto ilegible.
   La especificidad de la doble clase gana al <style> en línea de la plantilla. */
.article-feat-img.is-wide {
  max-width: 1080px;
}
.article-feat-img .feat-caption {
  margin: 14px auto 0;
  max-width: 720px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
  text-align: center;
}

/* =========================================================================
   KIT DE COMPONENTES DE ARTÍCULO — ampliación de agosto de 2026
   -------------------------------------------------------------------------
   Todo CSS puro salvo el contador, que usa el módulo [data-contador] de
   script.js. Reglas comunes a todos los bloques de esta sección:

   · Heredan --cat-accent, así que se tiñen con el color de la categoría.
   · El estado por defecto es el FINAL (visible y completo). Las animaciones
     de entrada solo existen bajo html.js-reveal, que script.js añade cuando
     hay IntersectionObserver y el usuario no ha pedido reducir el movimiento.
     Sin JavaScript o con prefers-reduced-motion todo se lee igual.
   · Los ciclos de las animaciones continuas son primos entre sí para que los
     elementos decorativos no laten al unísono.
   · Ningún bloque usa translateX a ancho completo: en móvil siempre se
     convierte en desplazamiento vertical para no provocar desbordamiento.
   ========================================================================= */

/* -------------------------------------------------------------------------
   .ficha — rejilla de datos del proyecto
   Promovida desde el <style> en línea de rediseno-web-palets-guadiana.html
   (ago-2026): era el cuarto artículo que duplicaba estas reglas.
   Sin gap: las separaciones se dibujan con box-shadow inset, porque el hueco
   de una rejilla auto-fit incompleta dejaba ver el fondo de la página.
   ------------------------------------------------------------------------- */
.article-body .ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  margin: 2.2em 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  background: #070a20;
}
.article-body .ficha__i {
  padding: 17px 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  transition: background .3s;
}
.article-body .ficha__i:hover { background: #0b0f2c; }
.article-body .ficha dt {
  margin: 0 0 5px;
  font-family: 'Sora', sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 80%, #fff);
}
.article-body .ficha dd {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .96rem;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}

/* -------------------------------------------------------------------------
   .faq-nat — preguntas frecuentes con <details>/<summary> nativos
   Promovida desde el <style> en línea (ago-2026). Cero JavaScript: funciona
   con el navegador apagado, es accesible de origen y Ctrl+F despliega el
   contenido en los navegadores que lo soportan.
   ------------------------------------------------------------------------- */
.article-body .faq-nat { margin: 1.9em 0; display: grid; gap: 10px; }
.article-body .faq-nat details {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: border-color .28s;
}
.article-body .faq-nat details[open] { border-color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 45%, transparent); }
.article-body .faq-nat summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink, #fff);
  line-height: 1.42;
}
.article-body .faq-nat summary::-webkit-details-marker { display: none; }
.article-body .faq-nat summary::after {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 3px 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask: no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 85%, #fff);
  transition: transform .3s cubic-bezier(.25,.6,.3,1);
}
.article-body .faq-nat details[open] summary::after { transform: rotate(180deg); }
.article-body .faq-nat summary:focus-visible { outline: 2px solid var(--cat-accent, #4F5BFF); outline-offset: 2px; border-radius: 14px; }
.article-body .faq-nat .faq-nat__b { padding: 0 20px 18px; }
.article-body .faq-nat .faq-nat__b p {
  margin: 0 0 .7em;
  font-size: .97rem;
  line-height: 1.68;
  color: rgba(255,255,255,.74);
}
.article-body .faq-nat .faq-nat__b p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   .tl — LÍNEA DE TIEMPO
   Horizontal en escritorio, vertical por debajo de 860 px. El raíl se dibuja
   al entrar en pantalla (scaleX/scaleY desde 0) y los hitos entran
   escalonados con --i como índice. Sin JS propio.
   ------------------------------------------------------------------------- */
.article-body .tl {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  margin: 2.6em 0;
  padding: clamp(26px, 3vw, 34px) clamp(18px, 2.6vw, 28px) clamp(20px, 2.6vw, 26px);
  list-style: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(130% 110% at 50% 0%, color-mix(in srgb, var(--cat-accent, #4F5BFF) 11%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  counter-reset: none;
}
.article-body .tl::before {                 /* raíl */
  content: "";
  position: absolute;
  left: clamp(18px, 2.6vw, 28px);
  right: clamp(18px, 2.6vw, 28px);
  top: calc(clamp(26px, 3vw, 34px) + 13px);
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--cat-accent, #4F5BFF) 70%, transparent),
    rgba(255,255,255,.16) 62%,
    rgba(255,255,255,.05));
  transform-origin: left center;
}
.article-body .tl__i {
  position: relative;
  padding: 34px 0 0;
  margin: 0;
}
.article-body .tl__i::marker { content: none; }
.article-body .tl__i::before {              /* nodo */
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cat-accent, #4F5BFF);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-accent, #4F5BFF) 20%, transparent),
              0 0 14px color-mix(in srgb, var(--cat-accent, #4F5BFF) 70%, transparent);
}
.article-body .tl__i:last-child::before {   /* el hito actual late despacio */
  animation: tlLatido 4.7s ease-in-out infinite;
}
@keyframes tlLatido {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-accent, #4F5BFF) 20%, transparent), 0 0 14px color-mix(in srgb, var(--cat-accent, #4F5BFF) 70%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cat-accent, #4F5BFF) 8%, transparent),  0 0 22px color-mix(in srgb, var(--cat-accent, #4F5BFF) 90%, transparent); }
}
.article-body .tl__y {
  display: block;
  margin-bottom: 7px;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink, #fff);
}
.article-body .tl__t {
  display: block;
  margin-bottom: 6px;
  font-family: 'Sora', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 82%, #fff);
}
.article-body .tl__d {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .93rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}
/* Entrada: solo con JS y sin reducción de movimiento */
html.js-reveal .article-body .tl[data-reveal]::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.25,.6,.3,1) .1s; }
html.js-reveal .article-body .tl[data-reveal].is-in::before { transform: scaleX(1); }
html.js-reveal .article-body .tl[data-reveal] .tl__i { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.25,.6,.3,1); transition-delay: calc(.22s + var(--i, 0) * .16s); }
html.js-reveal .article-body .tl[data-reveal].is-in .tl__i { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .article-body .tl { grid-auto-flow: row; grid-auto-columns: auto; gap: clamp(18px, 3vw, 26px); padding-left: clamp(34px, 7vw, 46px); }
  .article-body .tl::before {
    left: clamp(19px, 4vw, 25px);
    right: auto;
    top: clamp(26px, 3vw, 34px);
    bottom: clamp(20px, 2.6vw, 26px);
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cat-accent, #4F5BFF) 70%, transparent), rgba(255,255,255,.16) 62%, rgba(255,255,255,.05));
    transform-origin: center top;
  }
  .article-body .tl__i { padding-top: 0; padding-left: 0; }
  .article-body .tl__i::before { left: calc(clamp(34px, 7vw, 46px) * -1 + clamp(13px, 4vw, 19px)); top: 9px; }
  html.js-reveal .article-body .tl[data-reveal]::before { transform: scaleY(0); }
  html.js-reveal .article-body .tl[data-reveal].is-in::before { transform: scaleY(1); }
}

/* -------------------------------------------------------------------------
   .cifras — cifras clave del proyecto
   El número final está escrito en el HTML: el módulo [data-contador] de
   script.js solo lo anima desde 0 cuando procede. Sin JS se lee igual.
   ------------------------------------------------------------------------- */
.article-body .cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0;
  margin: 2.4em 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  overflow: hidden;
  background: #070a20;
}
.article-body .cifra {
  position: relative;
  padding: clamp(20px, 2.6vw, 26px) clamp(16px, 2vw, 22px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  overflow: hidden;
}
.article-body .cifra::after {               /* filete de acento inferior */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cat-accent, #4F5BFF), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.25,.6,.3,1);
  transition-delay: calc(.2s + var(--i, 0) * .12s);
}
.article-body .cifra__n {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.85rem, 4.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink, #fff);
  font-variant-numeric: tabular-nums;
}
.article-body .cifra__n small {
  font-size: .46em;
  font-weight: 600;
  letter-spacing: -.01em;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 85%, #fff);
  margin-left: .18em;
}
.article-body .cifra__l {
  display: block;
  margin-top: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .87rem;
  line-height: 1.45;
  color: rgba(255,255,255,.62);
}
html.js-reveal .article-body .cifras[data-reveal] .cifra { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s cubic-bezier(.25,.6,.3,1); transition-delay: calc(var(--i, 0) * .1s); }
html.js-reveal .article-body .cifras[data-reveal].is-in .cifra { opacity: 1; transform: none; }
html.js-reveal .article-body .cifras[data-reveal].is-in .cifra::after { transform: scaleX(1); }
html:not(.js-reveal) .article-body .cifra::after { transform: scaleX(1); transition: none; }

/* -------------------------------------------------------------------------
   .orb — BLOQUE ORBITAL
   Núcleo con halo cónico giratorio y satélites en órbita, rodeado por dos
   columnas de servicios. Método heredado de la portada de Ortiz Lavado,
   adaptado al fondo oscuro del blog. CSS puro; el trazo de conexión de cada
   ficha se dibuja al entrar en pantalla.
   ------------------------------------------------------------------------- */
.article-body .orb {
  --hub: clamp(150px, 17vw, 230px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hub) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  margin: 2.8em 0;
  padding: clamp(22px, 3.2vw, 38px) clamp(16px, 2.4vw, 30px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  isolation: isolate;
  background:
    radial-gradient(90% 80% at 50% 50%, color-mix(in srgb, var(--cat-accent, #4F5BFF) 13%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.article-body .orb__col { display: grid; gap: clamp(12px, 1.8vw, 20px); }
.article-body .orb__col--l { text-align: right; }
.article-body .orb__i {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.article-body .orb__col--l .orb__i { flex-direction: row-reverse; }

/* Ficha enlazable: el bloque orbital admite <a class="orb__i"> además de <div>.
   Hay que neutralizar el subrayado de .article-body a y devolver el foco de
   teclado, que el reset del enlace se lleva por delante. */
.article-body a.orb__i {
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  padding: 6px;
  margin: -6px;
  transition: background .3s;
}
.article-body a.orb__i:hover { background: rgba(255,255,255,.045); }
.article-body a.orb__i:focus-visible {
  outline: 2px solid var(--cat-accent, #4F5BFF);
  outline-offset: 2px;
}
.article-body a.orb__i .orb__c b {
  background-image: linear-gradient(90deg, var(--cat-accent, #4F5BFF), var(--cat-accent, #4F5BFF));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .35s cubic-bezier(.25,.6,.3,1);
}
.article-body a.orb__i:hover .orb__c b,
.article-body a.orb__i:focus-visible .orb__c b { background-size: 100% 1px; }
.article-body .orb__col--l a.orb__i .orb__c b { background-position: 100% 100%; }
.article-body a.orb__i .orb__ext {          /* flechita de enlace externo */
  display: inline-block;
  margin-left: .35em;
  opacity: .5;
  font-size: .8em;
  transition: opacity .3s, transform .3s;
}
.article-body a.orb__i:hover .orb__ext { opacity: 1; transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .article-body a.orb__i,
  .article-body a.orb__i .orb__c b,
  .article-body a.orb__i .orb__ext { transition: none; }
}

/* -------------------------------------------------------------------------
   Fichas y figuras enlazadas — ago-2026
   Sirven tanto al bloque .orb de blog.css como al .orbit en línea del caso
   del grupo agrícola de Almendralejo, que es la variante anterior del mismo
   componente. Se prefijan con .article-body para ganar al <style> del artículo.
   ------------------------------------------------------------------------- */
.article-body a.orbit__item {
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  padding: 6px;
  margin: -6px;
  transition: background .3s;
}
.article-body a.orbit__item:hover { background: rgba(255,255,255,.045); }
.article-body a.orbit__item:focus-visible {
  outline: 2px solid var(--cat-accent, #4F5BFF);
  outline-offset: 2px;
}
.article-body a.orbit__item .orbit__txt b {
  background-image: linear-gradient(90deg, var(--cat-accent, #4F5BFF), var(--cat-accent, #4F5BFF));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .35s cubic-bezier(.25,.6,.3,1);
}
.article-body a.orbit__item:hover .orbit__txt b,
.article-body a.orbit__item:focus-visible .orbit__txt b { background-size: 100% 1px; }
.article-body .orbit__col--l a.orbit__item .orbit__txt b { background-position: 100% 100%; }
.article-body a.orbit__item .orb__ext {
  display: inline-block;
  margin-left: .35em;
  opacity: .5;
  font-size: .8em;
  transition: opacity .3s, transform .3s;
}
.article-body a.orbit__item:hover .orb__ext { opacity: 1; transform: translate(2px, -2px); }

/* Figura enlazada: la imagen abre la web del cliente y el pie repite el enlace
   de forma visible. El enlace de la imagen queda fuera del orden de tabulación
   y oculto al lector de pantalla para no duplicar la parada: el del pie ya la
   cubre, y con texto mucho más descriptivo. */
.article-body a.fig-link {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.article-body a.fig-link img { margin: 0; border-radius: 16px; }
.article-body a.fig-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-accent, #4F5BFF) 0%, transparent);
  transition: box-shadow .4s ease;
  pointer-events: none;
}
.article-body a.fig-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.article-body a.fig-link:hover::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-accent, #4F5BFF) 70%, transparent);
}
.article-body .a-figure figcaption a.fig-cta {
  display: inline-block;
  margin-left: .4em;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 85%, #fff);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.article-body .a-figure figcaption a.fig-cta:hover { border-bottom-color: currentColor; }
.article-body .a-figure figcaption a.fig-cta:focus-visible {
  outline: 2px solid var(--cat-accent, #4F5BFF);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .article-body a.orbit__item,
  .article-body a.orbit__item .orbit__txt b,
  .article-body a.orbit__item .orb__ext,
  .article-body a.fig-link,
  .article-body a.fig-link::after { transition: none; }
  .article-body a.fig-link:hover { transform: none; }
}
.article-body .orb__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(34px, 3.4vw, 42px);
  height: clamp(34px, 3.4vw, 42px);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cat-accent, #4F5BFF) 40%, transparent);
  background: rgba(255,255,255,.04);
  font-family: 'Sora', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 88%, #fff);
  transition: background .3s, border-color .3s, transform .3s;
}
.article-body .orb__n::before {             /* anillo discontinuo, ya girando */
  content: "";
  position: absolute;
  inset: -5px;
  width: calc(clamp(34px, 3.4vw, 42px) + 10px);
  height: calc(clamp(34px, 3.4vw, 42px) + 10px);
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--cat-accent, #4F5BFF) 45%, transparent);
  opacity: 0;
  transition: opacity .3s;
  animation: orbGiro 9s linear infinite;
  pointer-events: none;
}
.article-body .orb__col--l .orb__i .orb__n::before { right: -5px; left: auto; }
.article-body .orb__i:hover .orb__n { background: color-mix(in srgb, var(--cat-accent, #4F5BFF) 22%, transparent); border-color: var(--cat-accent, #4F5BFF); transform: translateY(-2px); }
.article-body .orb__i:hover .orb__n::before { opacity: 1; }
.article-body .orb__c b {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: .99rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--ink, #fff);
}
.article-body .orb__c span {
  display: block;
  margin-top: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
}
.article-body .orb__i::after {              /* trazo hacia el núcleo */
  content: "";
  position: absolute;
  top: clamp(17px, 1.7vw, 21px);
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--cat-accent, #4F5BFF), transparent);
  transition: width .7s cubic-bezier(.25,.6,.3,1) .15s;
  pointer-events: none;
}
.article-body .orb__col--l .orb__i::after { left: 100%; }
.article-body .orb__col--r .orb__i::after { right: 100%; transform: scaleX(-1); }
.article-body .orb__i { --trazo: clamp(.7rem, 2.4vw, 2.4rem); }
html:not(.js-reveal) .article-body .orb__i::after { width: var(--trazo); transition: none; }
html.js-reveal .article-body .orb[data-reveal].is-in .orb__i::after { width: var(--trazo); }
/* Núcleo */
.article-body .orb__hub {
  position: relative;
  width: var(--hub);
  height: var(--hub);
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #070a20;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 50px rgba(0,0,0,.5);
}
.article-body .orb__halo {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg 160deg,
    color-mix(in srgb, var(--cat-accent, #4F5BFF) 22%, transparent) 244deg,
    var(--cat-accent, #4F5BFF) 318deg,
    color-mix(in srgb, var(--cat-accent, #4F5BFF) 40%, transparent) 340deg,
    transparent 358deg);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cat-accent, #4F5BFF) 45%, transparent));
  -webkit-mask: radial-gradient(circle, transparent 0 63%, #000 65%, #000 78%, transparent 80%);
  mask: radial-gradient(circle, transparent 0 63%, #000 65%, #000 78%, transparent 80%);
  animation: orbGiro 7.5s linear infinite;
}
.article-body .orb__sat {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: orbGiro 19s linear infinite;
  pointer-events: none;
}
.article-body .orb__sat i {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--cat-accent, #4F5BFF);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-accent, #4F5BFF) 18%, transparent),
              0 0 12px var(--cat-accent, #4F5BFF);
}
.article-body .orb__sat--b { animation-duration: 29s; animation-direction: reverse; inset: 9%; }
.article-body .orb__sat--c { animation-duration: 41s; inset: -8%; }
.article-body .orb__sat--b i { width: 6px; height: 6px; margin-left: -3px; top: -3px; }
.article-body .orb__sat--c i { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; opacity: .75; }
@keyframes orbGiro { to { transform: rotate(360deg); } }
.article-body .orb__hub-c { text-align: center; padding: 0 12px; }
.article-body .orb__hub-n {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink, #fff);
}
.article-body .orb__hub-l {
  display: block;
  margin-top: 6px;
  font-family: 'Sora', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 85%, #fff);
}
@media (max-width: 1000px) {
  .article-body .orb { grid-template-columns: 1fr; justify-items: center; gap: clamp(22px, 4vw, 32px); }
  .article-body .orb__hub { order: -1; }
  .article-body .orb__col { width: 100%; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
  .article-body .orb__col--l { text-align: left; }
  .article-body .orb__col--l .orb__i { flex-direction: row; }
  .article-body .orb__i::after { display: none; }   /* sin núcleo al lado, el trazo no significa nada */
}
@media (max-width: 620px) {
  .article-body .orb__col { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   .ba — COMPARADOR ANTES / DESPUÉS
   Dos pestañas de radio con fundido cruzado. Controles <input type="radio">
   reales: teclado y lector de pantalla funcionan, y sin JavaScript se ve el
   panel marcado por defecto. Versión generalizada de la que estrenó
   rediseno-web-palets-guadiana.html: aquí el CSS no depende de ningún id,
   así que el mismo bloque sirve en cualquier artículo.
   ------------------------------------------------------------------------- */
.article-body .ba {
  position: relative;
  margin: 2.6em 0;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--cat-accent, #4F5BFF) 12%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.article-body .ba__r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.article-body .ba__tabs { display: flex; gap: 8px; margin: 0 0 clamp(14px, 2vw, 18px); flex-wrap: wrap; }
.article-body .ba__tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: rgba(255,255,255,.68);
  cursor: pointer;
  user-select: none;
  transition: color .26s, border-color .26s, background .26s, transform .26s;
}
.article-body .ba__tab i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  font-family: 'Sora', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.62);
  transition: background .26s, color .26s;
}
.article-body .ba__tab:hover { color: var(--ink, #fff); border-color: rgba(255,255,255,.26); }
.article-body .ba__r:nth-of-type(1):checked ~ .ba__tabs .ba__tab:nth-of-type(1),
.article-body .ba__r:nth-of-type(2):checked ~ .ba__tabs .ba__tab:nth-of-type(2) {
  color: var(--ink, #fff);
  border-color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 62%, transparent);
  background: color-mix(in srgb, var(--cat-accent, #4F5BFF) 16%, transparent);
  transform: translateY(-1px);
}
.article-body .ba__r:nth-of-type(1):checked ~ .ba__tabs .ba__tab:nth-of-type(1) i,
.article-body .ba__r:nth-of-type(2):checked ~ .ba__tabs .ba__tab:nth-of-type(2) i {
  background: var(--cat-accent, #4F5BFF);
  color: #fff;
}
.article-body .ba__r:nth-of-type(1):focus-visible ~ .ba__tabs .ba__tab:nth-of-type(1),
.article-body .ba__r:nth-of-type(2):focus-visible ~ .ba__tabs .ba__tab:nth-of-type(2) {
  outline: 2px solid var(--cat-accent, #4F5BFF);
  outline-offset: 3px;
}
.article-body .ba__stage {
  /* Pila en rejilla: las dos fichas ocupan la misma celda, así que el alto
     del escenario lo marca la más alta y no salta al cambiar de pestaña. */
  display: grid;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: #05071A;
  overflow: hidden;
}
.article-body .ba__f {
  margin: 0;
  padding: clamp(18px, 2.6vw, 26px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .42s cubic-bezier(.25,.6,.3,1), transform .55s cubic-bezier(.25,.6,.3,1), visibility 0s linear .42s;
}
.article-body .ba__f { grid-area: 1 / 1; }
.article-body .ba__r:nth-of-type(1):checked ~ .ba__stage .ba__f:nth-of-type(1),
.article-body .ba__r:nth-of-type(2):checked ~ .ba__stage .ba__f:nth-of-type(2) {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.article-body .ba__h {
  margin: 0 0 12px;
  font-family: 'Sora', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 85%, #fff);
}
.article-body .ba__f ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.article-body .ba__f ul li {
  position: relative;
  padding-left: 26px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}
.article-body .ba__f ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 11px;
  height: 1px;
  background: rgba(255,255,255,.34);
}
.article-body .ba__f:nth-of-type(2) ul li::before {
  top: 7px;
  width: 12px;
  height: 6px;
  background: none;
  border-left: 2px solid var(--cat-accent, #4F5BFF);
  border-bottom: 2px solid var(--cat-accent, #4F5BFF);
  transform: rotate(-45deg);
}
.article-body .ba__pie {
  margin: clamp(13px, 1.8vw, 17px) 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
}

/* -------------------------------------------------------------------------
   Reducción de movimiento: se anulan las animaciones continuas y se fija el
   estado FINAL de cada una, no el inicial. Un halo cónico a rotate(0) es
   correcto; un trazo sin dibujar sería un bloque roto.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .article-body .tl__i:last-child::before,
  .article-body .orb__halo,
  .article-body .orb__sat,
  .article-body .orb__n::before { animation: none; }
  .article-body .tl::before { transform: none; }
  .article-body .tl__i,
  .article-body .cifra { opacity: 1; transform: none; }
  .article-body .cifra::after { transform: scaleX(1); transition: none; }
  .article-body .orb__i::after { width: var(--trazo); transition: none; }
  .article-body .ba__tab,
  .article-body .ba__f,
  .article-body .ficha__i,
  .article-body .faq-nat details,
  .article-body .faq-nat summary::after,
  .article-body .orb__n { transition: none; }
  .article-body .ba__f { transform: none; }
}

/* -------------------------------------------------------------------------
   .qr-live — el QR y lo que el cliente ve al escanearlo
   Añadido el 9 de agosto de 2026 para el caso de Café-Bar Agustín.
   Revisado el mismo día: el trío estaba descentrado (justify-self end/start
   empujaba las piezas a los bordes de su columna) y la animación se quedaba
   en una línea de barrido. Ahora el bloque se centra como una unidad y el
   ciclo cuenta la historia completa: se escanea, el dato viaja y la carta
   se enciende sección a sección.
   Todo es decorativo y continuo; el estado por defecto ya es el final, así
   que sin JavaScript el bloque se lee entero. Con prefers-reduced-motion se
   apagan los ciclos y se fija el estado final: una línea de escaneo detenida
   a mitad del código parecería un defecto, así que desaparece.
   ------------------------------------------------------------------------- */
.article-body .qr-live { margin: 2.6em 0; padding: 0; }
.article-body .qr-live__stage {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.6vw, 34px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--cat-accent, #4F5BFF) 13%, transparent), transparent 62%),
    #070A20;
  overflow: hidden;
}

/* ── Código impreso ───────────────────────────────────────────────────── */
.article-body .qr-live__code {
  position: relative;
  flex: 0 1 264px;
  max-width: 264px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #EFE7E0;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  animation: qrLatido 6.2s ease-in-out infinite;
}
.article-body .qr-live__code img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Destello de captura: el instante en que el móvil «coge» el código */
.article-body .qr-live__code::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: qrFlash 6.2s ease-out infinite;
}
@keyframes qrLatido {
  0%, 44%, 100% { transform: scale(1); }
  50%           { transform: scale(1.028); }
  58%           { transform: scale(1); }
}
@keyframes qrFlash {
  0%, 44% { opacity: 0; }
  48%     { opacity: .5; }
  60%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* Línea de barrido */
.article-body .qr-live__scan {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cat-accent, #4F5BFF), transparent);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--cat-accent, #4F5BFF) 60%, transparent);
  animation: qrScan 6.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes qrScan {
  0%       { transform: translateY(10%); opacity: 0; }
  6%       { opacity: 1; }
  40%      { transform: translateY(90%); opacity: 1; }
  46%      { transform: translateY(90%); opacity: 0; }
  100%     { transform: translateY(10%); opacity: 0; }
}

/* Escuadras de encuadre, como el visor de una cámara: se cierran sobre el
   código justo antes del destello */
.article-body .qr-live__code::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid color-mix(in srgb, var(--cat-accent, #4F5BFF) 80%, #fff);
  border-radius: 8px;
  opacity: .9;
  -webkit-mask:
    linear-gradient(#000 0 0) top left    / 30% 30% no-repeat,
    linear-gradient(#000 0 0) bottom right/ 30% 30% no-repeat;
          mask:
    linear-gradient(#000 0 0) top left    / 30% 30% no-repeat,
    linear-gradient(#000 0 0) bottom right/ 30% 30% no-repeat;
  animation: qrVisor 6.2s ease-in-out infinite;
}
@keyframes qrVisor {
  0%, 100% { inset: 9px;  opacity: .55; }
  36%      { inset: 9px;  opacity: .55; }
  46%      { inset: 15px; opacity: 1; }
  62%      { inset: 9px;  opacity: .55; }
}

/* ── Transmisión: tres puntos que viajan del código a la pantalla ─────── */
.article-body .qr-live__link {
  position: relative;
  flex: 0 0 auto;
  width: clamp(30px, 5vw, 58px);
  height: 10px;
  overflow: hidden;
}
.article-body .qr-live__dot {
  position: absolute;
  top: 2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat-accent, #4F5BFF) 88%, #fff);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--cat-accent, #4F5BFF) 45%, transparent);
  animation: qrViaje 6.2s cubic-bezier(.4,0,.6,1) infinite;
  animation-delay: calc(var(--i, 0) * .16s);
}
@keyframes qrViaje {
  0%, 46%   { transform: translateX(-10px); opacity: 0; }
  52%       { opacity: 1; }
  70%       { transform: translateX(calc(clamp(30px, 5vw, 58px) + 4px)); opacity: 1; }
  74%, 100% { transform: translateX(calc(clamp(30px, 5vw, 58px) + 4px)); opacity: 0; }
}

/* ── Pantalla que devuelve ────────────────────────────────────────────── */
.article-body .qr-live__phone {
  position: relative;
  flex: 0 1 230px;
  max-width: 230px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
.article-body .qr-live__notch {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.22);
}
.article-body .qr-live__screen {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: clamp(13px, 1.7vw, 17px) clamp(12px, 1.6vw, 15px);
  background: #05071A;
  border: 1px solid rgba(255,255,255,.07);
}
/* Barrido de carga: la carta «llega» justo después de los puntos */
.article-body .qr-live__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cat-accent, #4F5BFF) 22%, transparent), transparent);
  transform: translateY(-100%);
  animation: qrCarga 6.2s ease-out infinite;
}
@keyframes qrCarga {
  0%, 58%   { transform: translateY(-100%); }
  78%       { transform: translateY(100%); }
  100%      { transform: translateY(100%); }
}
.article-body .qr-live__brand {
  margin: 0 0 2px;
  font-family: 'Sora', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 82%, #fff);
}
.article-body .qr-live__h {
  margin: 0 0 11px;
  font-family: 'Sora', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.article-body .qr-live__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.article-body .qr-live__rows li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  line-height: 1.3;
  color: rgba(255,255,255,.82);
  /* El repaso recorre las seis secciones una tras otra, en bucle */
  animation: qrFila 6.2s ease-in-out infinite;
  animation-delay: calc(1.05s + var(--i, 0) * .13s);
}
.article-body .qr-live__rows li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 15px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cat-accent, #4F5BFF) 70%, transparent);
}
@keyframes qrFila {
  0%, 100% { background: rgba(255,255,255,.045); transform: none; }
  8%       { background: color-mix(in srgb, var(--cat-accent, #4F5BFF) 22%, rgba(255,255,255,.045)); transform: translateX(3px); }
  20%      { background: rgba(255,255,255,.045); transform: none; }
}
.article-body .qr-live__foot {
  margin: 11px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .68rem;
  line-height: 1.4;
  color: rgba(255,255,255,.48);
}
.article-body .qr-live__pie {
  margin: clamp(12px, 1.7vw, 16px) 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
}

/* Entrada: solo con JS y sin reducción de movimiento */
html.js-reveal .article-body .qr-live[data-reveal] .qr-live__rows li {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.25,.6,.3,1);
  transition-delay: calc(.3s + var(--i, 0) * .1s);
}
html.js-reveal .article-body .qr-live[data-reveal].is-in .qr-live__rows li {
  opacity: 1;
  transform: none;
}

/* En columna estrecha el trío pasa a vertical: el QR arriba, la pantalla
   debajo y los puntos viajando hacia abajo. Nunca hay desbordamiento. */
@media (max-width: 720px) {
  .article-body .qr-live__stage {
    flex-direction: column;
    gap: clamp(10px, 3vw, 16px);
  }
  .article-body .qr-live__code { flex: 0 0 auto; width: min(100%, 226px); max-width: 226px; }
  .article-body .qr-live__phone { flex: 0 0 auto; width: min(100%, 226px); max-width: 226px; }
  .article-body .qr-live__link { width: 10px; height: clamp(26px, 8vw, 44px); }
  .article-body .qr-live__dot { top: 0; left: 2px; animation-name: qrViajeV; }
  @keyframes qrViajeV {
    0%, 46%   { transform: translateY(-10px); opacity: 0; }
    52%       { opacity: 1; }
    70%       { transform: translateY(calc(clamp(26px, 8vw, 44px) + 4px)); opacity: 1; }
    74%, 100% { transform: translateY(calc(clamp(26px, 8vw, 44px) + 4px)); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-body .qr-live__code,
  .article-body .qr-live__code::before,
  .article-body .qr-live__code::after,
  .article-body .qr-live__scan,
  .article-body .qr-live__screen::after,
  .article-body .qr-live__dot,
  .article-body .qr-live__rows li { animation: none; }
  .article-body .qr-live__scan,
  .article-body .qr-live__screen::after { display: none; }
  .article-body .qr-live__code { transform: none; }
  .article-body .qr-live__code::after { opacity: 0; }
  .article-body .qr-live__code::before { inset: 9px; opacity: .7; }
  .article-body .qr-live__dot { position: static; opacity: .85; transform: none; }
  .article-body .qr-live__link { display: flex; align-items: center; gap: 6px; width: auto; height: auto; overflow: visible; }
  .article-body .qr-live__rows li { transition: none; }
}

/* -------------------------------------------------------------------------
   .toldo — el gesto del producto: una lona que se despliega
   Añadido el 9 de agosto de 2026 para el caso de Toldos Cele.
   Escena en CSS puro, sin imágenes: sol con rayos que giran despacio, fachada
   con ventanas, brazo articulado, lona a rayas que sale y entra en bucle y una
   sombra que crece con ella.
   El despliegue usa clip-path, no scaleX: con scaleX las rayas se estiran y se
   comprimen, y el toldo deja de parecer un toldo. El borde delantero es un
   elemento aparte que viaja en el mismo compás.
   Estado por defecto = lona EXTENDIDA. Sin JavaScript, o con
   prefers-reduced-motion, el bloque se ve completo y quieto, que es justo lo
   que tiene que enseñar.
   ------------------------------------------------------------------------- */
.article-body .toldo { margin: 2.6em 0; padding: 0; }
.article-body .toldo__scene {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(70% 110% at 88% -6%, rgba(255,190,90,.20), transparent 55%),
    linear-gradient(180deg, #0A0F28 0%, #05071A 100%);
  aspect-ratio: 16 / 7;
  min-height: 210px;
}

/* Sol */
.article-body .toldo__sol {
  position: absolute;
  top: 13%;
  right: 9%;
  width: clamp(34px, 3.6vw, 50px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #FFDC96 0%, #FFB44D 60%, rgba(255,180,77,0) 74%);
  box-shadow: 0 0 40px 10px rgba(255,180,77,.24);
}
.article-body .toldo__sol::before {
  content: "";
  position: absolute;
  inset: -52%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,199,110,.40) 0deg 5deg, transparent 5deg 30deg,
    rgba(255,199,110,.40) 30deg 35deg, transparent 35deg 60deg,
    rgba(255,199,110,.40) 60deg 65deg, transparent 65deg 90deg,
    rgba(255,199,110,.40) 90deg 95deg, transparent 95deg 120deg,
    rgba(255,199,110,.40) 120deg 125deg, transparent 125deg 150deg,
    rgba(255,199,110,.40) 150deg 155deg, transparent 155deg 180deg,
    rgba(255,199,110,.40) 180deg 185deg, transparent 185deg 210deg,
    rgba(255,199,110,.40) 210deg 215deg, transparent 215deg 240deg,
    rgba(255,199,110,.40) 240deg 245deg, transparent 245deg 270deg,
    rgba(255,199,110,.40) 270deg 275deg, transparent 275deg 300deg,
    rgba(255,199,110,.40) 300deg 305deg, transparent 305deg 330deg,
    rgba(255,199,110,.40) 330deg 335deg, transparent 335deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 48%, #000 52%, #000 68%, transparent 72%);
          mask: radial-gradient(circle, transparent 48%, #000 52%, #000 68%, transparent 72%);
  animation: toldoRayos 31s linear infinite;
}
@keyframes toldoRayos { to { transform: rotate(360deg); } }

/* Fachada */
.article-body .toldo__fachada {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22%;
  min-width: 84px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  border-right: 1px solid rgba(255,255,255,.16);
}
.article-body .toldo__ventana {
  position: absolute;
  left: 20%;
  width: 46%;
  height: 15%;
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.article-body .toldo__ventana:nth-of-type(1) { top: 14%; }
.article-body .toldo__ventana:nth-of-type(2) { top: 62%; }

/* Lona: se despliega recortando por la derecha, así las rayas no se deforman */
.article-body .toldo__lona {
  position: absolute;
  left: 22%;
  top: 24%;
  width: 60%;
  height: 15%;
  min-height: 26px;
  border-radius: 0 5px 5px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.16)),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--cat-accent, #4F5BFF) 62%, #0B1030) 0 30px,
      color-mix(in srgb, #F3EFE6 88%, var(--cat-accent, #4F5BFF)) 30px 60px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  clip-path: inset(0 0 0 0);
  animation: toldoAbre 11s cubic-bezier(.5,.02,.4,1) infinite;
}
@keyframes toldoAbre {
  0%, 5%    { clip-path: inset(0 96% 0 0); }
  34%, 66%  { clip-path: inset(0 0 0 0); }
  95%, 100% { clip-path: inset(0 96% 0 0); }
}

/* Borde delantero: viaja en el mismo compás que el recorte */
.article-body .toldo__borde {
  position: absolute;
  left: 22%;
  top: 24%;
  height: 15%;
  min-height: 26px;
  width: 7px;
  margin-left: -7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cat-accent, #4F5BFF) 40%, #0B1030);
  box-shadow: -2px 0 12px rgba(0,0,0,.5);
  transform: translateX(60cqw);
  animation: toldoBorde 11s cubic-bezier(.5,.02,.4,1) infinite;
}
.article-body .toldo__scene { container-type: inline-size; }
@keyframes toldoBorde {
  0%, 5%    { transform: translateX(2.4cqw); }
  34%, 66%  { transform: translateX(60cqw); }
  95%, 100% { transform: translateX(2.4cqw); }
}

/* Brazo articulado, apenas insinuado */
.article-body .toldo__brazo {
  position: absolute;
  left: 22%;
  top: 39%;
  width: 21%;
  height: 3px;
  border-radius: 3px;
  transform-origin: left center;
  transform: rotate(11deg);
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.20));
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  animation: toldoBrazo 11s cubic-bezier(.5,.02,.4,1) infinite;
}
@keyframes toldoBrazo {
  0%, 5%    { transform: rotate(76deg) scaleX(.16); opacity: .35; }
  34%, 66%  { transform: rotate(11deg) scaleX(1);   opacity: 1; }
  95%, 100% { transform: rotate(76deg) scaleX(.16); opacity: .35; }
}

/* Sombra proyectada */
.article-body .toldo__sombra {
  position: absolute;
  left: 22%;
  top: 39%;
  width: 60%;
  height: 44%;
  transform-origin: left top;
  background: linear-gradient(165deg, rgba(2,4,14,.78), rgba(2,4,14,.22) 74%, transparent);
  -webkit-mask: linear-gradient(196deg, #000 58%, transparent);
          mask: linear-gradient(196deg, #000 58%, transparent);
  animation: toldoSombra 11s cubic-bezier(.5,.02,.4,1) infinite;
}
@keyframes toldoSombra {
  0%, 5%    { transform: scaleX(.04); opacity: .22; }
  34%, 66%  { transform: scaleX(1);   opacity: 1; }
  95%, 100% { transform: scaleX(.04); opacity: .22; }
}

/* Suelo */
.article-body .toldo__scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.05));
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Dato sobreimpreso */
.article-body .toldo__datos {
  position: absolute;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 24px);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(5,7,26,.78);
  backdrop-filter: blur(6px);
}
.article-body .toldo__datos b {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--cat-accent, #4F5BFF) 58%, #fff);
}
.article-body .toldo__datos span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem;
  line-height: 1.32;
  color: rgba(255,255,255,.74);
}
.article-body .toldo__pie {
  margin: clamp(12px, 1.7vw, 16px) 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
}

@media (max-width: 620px) {
  .article-body .toldo__scene { aspect-ratio: 5 / 4; }
  .article-body .toldo__datos { left: clamp(12px, 3vw, 18px); right: auto; }
  .article-body .toldo__datos span { font-size: .74rem; }
  .article-body .toldo__lona,
  .article-body .toldo__borde { height: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  .article-body .toldo__sol::before,
  .article-body .toldo__lona,
  .article-body .toldo__borde,
  .article-body .toldo__brazo,
  .article-body .toldo__sombra { animation: none; }
  .article-body .toldo__lona { clip-path: inset(0 0 0 0); }
  .article-body .toldo__borde { transform: translateX(60cqw); }
  .article-body .toldo__brazo { transform: rotate(11deg); opacity: 1; }
  .article-body .toldo__sombra { transform: none; opacity: 1; }
}