/* ==========================================================================
   base.css — Sistema de plantillas SEO · Invitaciones infantiles de cumpleaños
   --------------------------------------------------------------------------
   - Hoja única compartida por las 5 plantillas (T1–T5) y sus variantes A/B/C.
   - Mobile-first: el tráfico llega de Pinterest y WhatsApp (mayoría móvil).
   - Estética cálida de baja saturación: fondos crema, mucho aire, sin
     degradados azul-morado ni fondos muy saturados.
   - Sin dependencias externas: system fonts, sin CDNs.
   - Paleta por clúster: el build inyecta un bloque <style> con :root{...}
     (placeholder {{cluster_palette}}) que sobrescribe estas variables:
       --c-bg       → palette[0] (fondo crema del clúster)
       --c-primary  → palette[1] (color dominante: títulos, énfasis)
       --c-accent   → palette[2] (acento: bordes, detalles, destacados)
       --c-text     → neutro cálido oscuro derivado por el build
   ========================================================================== */

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, details, summary {
  margin: 0;
  padding: 0;
}
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------- Variables de tema (valores por defecto; el build los sobrescribe) ---------- */
:root {
  --c-bg: #F7F3EC;              /* fondo crema */
  --c-primary: #7A9B76;         /* dominante del clúster */
  --c-accent: #E8A87C;          /* acento cálido */
  --c-text: #3B372F;            /* texto neutro cálido oscuro */

  --c-surface: #FFFFFF;                       /* tarjetas */
  --c-surface-soft: rgba(255, 255, 255, .55); /* superficie suave sobre crema */
  --c-line: rgba(59, 55, 47, .14);            /* bordes sutiles */
  --c-text-muted: rgba(59, 55, 47, .72);

  --wa-green: #25D366;          /* verde WhatsApp (CTA universal) */
  --wa-green-dark: #1DA851;

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 46rem;                /* columna de lectura */
  --space-block: clamp(2.25rem, 6vw, 3.5rem); /* aire entre bloques */
  --shadow-soft: 0 2px 10px rgba(59, 55, 47, .07);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces", Georgia, serif;
}

/* ---------- Base tipográfica ---------- */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.22;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(1.65rem, 5.4vw, 2.35rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 4.2vw, 1.65rem); margin-bottom: .9rem; }
h3 { font-size: 1.15rem; }

p + p { margin-top: .85em; }
a { color: var(--c-primary); text-underline-offset: .18em; }
a:hover { color: var(--c-text); }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: .4em; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Contenedor y flujo de bloques ----------
   .page-flow es flex-column para que las variantes A/B/C puedan reordenar
   bloques con `order` sin duplicar HTML. Cada bloque lleva clase `.blk`
   más una clase semántica `.blk-*` con un orden por defecto (ver abajo). */
.container {
  width: min(100% - 2rem, var(--maxw));
  margin-inline: auto;
}
.page-flow { display: flex; flex-direction: column; }
.blk { margin-block: calc(var(--space-block) / 2); }

/* Orden por defecto (equivale al wireframe / variante A) */
.blk-breadcrumb { order: 5; }
.blk-hero       { order: 10; }
.blk-cta-1      { order: 20; }
.blk-index      { order: 25; }   /* índice de clúster (T1) */
.blk-gallery    { order: 30; }
.blk-cta-2      { order: 40; }
.blk-video      { order: 50; }
.blk-sections   { order: 55; }   /* secciones H2 (T1), consejos (T4), cómo elegir (T5) */
.blk-items      { order: 56; }   /* ítems del listicle (T5) */
.blk-copyable   { order: 60; }
.blk-ideas      { order: 70; }
.blk-howto      { order: 80; }
.blk-offer      { order: 85; }
.blk-faqs       { order: 90; }
.blk-cta-3      { order: 100; }
.blk-related    { order: 110; }
.blk-intro-extra { order: 82; }  /* intro corta (T3) */

/* Órdenes por defecto específicos por plantilla (variante A = wireframe) */
.tpl-t1 .blk-video  { order: 58; }  /* vídeo tras las secciones H2 */
.tpl-t1 .blk-cta-2  { order: 95; }  /* CTAs #2 y #3 tras las FAQs */
.tpl-t3 .blk-offer  { order: 35; }  /* galería → oferta → CTA gigante */
.tpl-t3 .blk-cta-1  { order: 40; }
.tpl-t3 .blk-cta-2  { order: 95; }  /* CTA #2 tras las FAQs */
.tpl-t4 .blk-sections { order: 65; } /* consejos de uso tras el listado numerado */
.tpl-t4 .blk-cta-2  { order: 70; }
.tpl-t5 .blk-items  { order: 30; }  /* ítems tras el CTA #1 */
.tpl-t5 .blk-cta-2  { order: 95; }  /* CTAs #2 y #3 tras las FAQs */

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .85rem; color: var(--c-text-muted); }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: .15em .35em;
  list-style: none; padding: 0;
}
.breadcrumb li { display: flex; align-items: center; margin: 0; }
.breadcrumb li + li::before {
  content: "›";
  margin-right: .35em;
  color: var(--c-accent);
  font-weight: 700;
}
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 600; }

/* ---------- Hero / intro ---------- */
.hero h1 { margin-bottom: .6rem; }
.hero h1 .kw, .hero .lead strong { color: var(--c-primary); }
.hero .lead, .blk-intro-extra .lead { font-size: 1.075rem; color: var(--c-text-muted); max-width: 62ch; }
.hero .lead a { font-weight: 600; }

/* ---------- CTA wa.me (3 variantes de presentación) ---------- */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
  background: var(--wa-green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: .8em 1.5em;
  line-height: 1.2;
  box-shadow: 0 3px 12px rgba(37, 211, 102, .35);
  transition: background .15s ease, transform .15s ease;
}
.btn-wa::before {           /* burbuja de chat (data-URI, sin assets externos) */
  content: "";
  width: 1.15em; height: 1.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.6-6.1c-.3-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.4-3c-.3-.4 0-.5.1-.7l.5-.6c.1-.2.1-.4 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 2.9 2.9 0 0 0-.9 2.1 5 5 0 0 0 1.1 2.7 11.3 11.3 0 0 0 4.4 3.9c1.6.7 2.2.7 3 .6a2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .1-1.2c0-.2-.2-.3-.4-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.6-6.1c-.3-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.4-3c-.3-.4 0-.5.1-.7l.5-.6c.1-.2.1-.4 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 2.9 2.9 0 0 0-.9 2.1 5 5 0 0 0 1.1 2.7 11.3 11.3 0 0 0 4.4 3.9c1.6.7 2.2.7 3 .6a2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .1-1.2c0-.2-.2-.3-.4-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-wa:hover { background: var(--wa-green-dark); color: #fff; transform: translateY(-1px); }
.btn-wa:active { transform: translateY(0); }

/* Variante banner: bloque a todo lo ancho de la columna, verde sólido */
.cta--banner {
  background: var(--wa-green);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.cta--banner .cta__text { font-weight: 700; font-size: 1.05rem; margin-bottom: .8rem; }
.cta--banner .btn-wa { background: #fff; color: var(--wa-green-dark); box-shadow: none; }
.cta--banner .btn-wa:hover { background: rgba(255, 255, 255, .88); }

/* Variante tarjeta: tarjeta clara con botón verde */
.cta--card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 5px solid var(--wa-green);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}
.cta--card .cta__text { font-weight: 600; margin-bottom: .9rem; }
.cta--card .cta__note { font-size: .85rem; color: var(--c-text-muted); margin-top: .7rem; }

/* Variante inline: botón integrado en el flujo de lectura */
.cta--inline { text-align: center; }
.cta--inline .cta__text { margin-bottom: .7rem; font-weight: 600; }

/* CTA gigante (T3): botón grande, ancho completo en móvil */
.cta--giant .btn-wa {
  width: 100%;
  font-size: 1.15rem;
  padding: 1em 1.5em;
}
@media (min-width: 40rem) {
  .cta--giant .btn-wa { width: auto; min-width: 22rem; }
}
.cta--giant { text-align: center; }
.cta--giant .cta__note { font-size: .85rem; color: var(--c-text-muted); margin-top: .7rem; }

/* ---------- Índice de clúster (T1) ---------- */
.cluster-index {
  background: var(--c-surface-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.cluster-index ul {
  list-style: none; padding: 0;
  display: grid; gap: .35rem;
}
@media (min-width: 40rem) { .cluster-index ul { grid-template-columns: 1fr 1fr; gap: .35rem 1.5rem; } }
.cluster-index a { font-weight: 600; text-decoration: none; }
.cluster-index a::before { content: "→ "; color: var(--c-accent); }
.cluster-index a:hover { text-decoration: underline; }

/* ---------- Galería 9:16 ----------
   Móvil: 2×2 (o rejilla de 2 columnas para N imágenes).
   Desktop (≥48rem): 4 columnas. Las imágenes llevan loading="lazy" en HTML. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.gallery__item { margin: 0; }
.gallery__item img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-line);
}
.gallery__item figcaption {
  font-size: .8rem;
  color: var(--c-text-muted);
  padding-top: .35rem;
}
/* Galería a tamaño grande (T3): 2 columnas también en desktop */
.gallery--large { gap: .9rem; }
@media (min-width: 48rem) {
  .gallery--large { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* ---------- Vídeo ---------- */
.video__frame {
  width: min(100%, 20rem);       /* 9:16 vertical, centrado */
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
  background: var(--c-surface-soft);
}
.video__frame video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.video__caption {
  text-align: center;
  font-size: .85rem;
  color: var(--c-text-muted);
  margin-top: .5rem;
}

/* ---------- Secciones editoriales (H2×N) ---------- */
.sections .section { margin-block: calc(var(--space-block) / 1.6); }
.section h2 { color: var(--c-primary); }
.section .section__link { font-weight: 600; }

/* ---------- Textos copiables ---------- */
.copyable-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.copy-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding: 1rem 1rem 3.1rem;      /* hueco para el botón copiar */
  box-shadow: var(--shadow-soft);
}
.copy-card .copy-text { white-space: pre-line; }
.copy-card__format {   /* etiqueta de formato en T4 (corto / largo / divertido) */
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-primary);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: .15em .7em;
  margin-bottom: .45rem;
}
.copy-btn {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  background: transparent;
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  border-radius: 999px;
  padding: .35em 1em;
  font-size: .85rem;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.copy-btn:hover { background: var(--c-primary); color: #fff; }
.copy-btn[data-copied="true"] { background: var(--c-primary); color: #fff; border-style: solid; }

/* Listado numerado (T4): numeración visible delante de cada tarjeta */
.copyable-list--numbered { counter-reset: copyitem; }
.copyable-list--numbered .copy-card { padding-left: 3.1rem; }
.copyable-list--numbered .copy-card::before {
  counter-increment: copyitem;
  content: counter(copyitem);
  position: absolute;
  left: .95rem; top: 1rem;
  width: 1.55rem; height: 1.55rem;
  display: grid; place-items: center;
  background: var(--c-accent);
  color: #fff;
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 700;
}

/* ---------- Ideas de fiesta (T2) ---------- */
.ideas-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 40rem) { .ideas-list { grid-template-columns: 1fr 1fr; } }
.idea-card {
  background: var(--c-surface-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.idea-card h3 { color: var(--c-primary); margin-bottom: .35rem; }

/* ---------- Cómo funciona (bloque común, 3 pasos) ---------- */
.howto {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-soft);
}
.howto h2 { text-align: center; }
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.steps li {
  position: relative;
  padding-left: 3rem;
  margin: 0;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: .05rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--c-primary);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}
.steps li strong { display: block; margin-bottom: .15rem; }

/* ---------- Oferta (bloque común) ---------- */
.offer {
  background: var(--c-surface);
  border: 2px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.offer__imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  list-style: none;
  padding: 0;
  max-width: 26rem;
  margin: 0 auto 1rem;
}
.offer__imgs img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
}
.offer__price {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 800;
  color: var(--c-primary);
}
.offer__line { font-weight: 600; }
.offer__note { font-size: .85rem; color: var(--c-text-muted); margin-top: .4rem; }
.offer--featured { border-width: 3px; }   /* oferta destacada (T3) */

/* ---------- FAQs (details/summary accesibles) ---------- */
.faqs details {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
}
.faqs details + details { margin-top: .6rem; }
.faqs summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after {
  content: "+";
  flex: none;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  transition: transform .15s ease;
}
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs details p { margin-top: .7rem; color: var(--c-text-muted); }

/* ---------- Ítems del listicle (T5) ---------- */
.listicle-item {
  display: grid;
  gap: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-soft);
}
.listicle-item + .listicle-item { margin-top: 1.25rem; }
@media (min-width: 40rem) {
  .listicle-item { grid-template-columns: minmax(9rem, 12rem) 1fr; align-items: start; }
}
.listicle-item img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
}
.listicle-item h3 { color: var(--c-primary); margin-bottom: .4rem; }
.listicle-item .listicle-item__link { font-weight: 600; white-space: nowrap; }

/* ---------- Relacionados ---------- */
.related {
  border-top: 1px solid var(--c-line);
  padding-top: calc(var(--space-block) / 2);
}
.related h2 { font-size: 1.2rem; }
.related ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .7rem;
}
@media (min-width: 40rem) { .related ul { grid-template-columns: repeat(3, 1fr); } }
.related a {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.related a small {
  display: block;
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: .78rem;
  margin-top: .2rem;
}
.related a::after { content: " →"; color: var(--c-accent); }
.related a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ---------- Volver al spoke (T3) ---------- */
.back-link { border-top: 1px solid var(--c-line); padding-top: calc(var(--space-block) / 2); }
.back-link__a { font-weight: 700; text-decoration: none; }
.back-link__a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-block);
  border-top: 1px solid var(--c-line);
  padding: 1.5rem 0 2.5rem;
  font-size: .85rem;
  color: var(--c-text-muted);
}
.site-footer nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.2em;
  margin-bottom: .8rem;
}
.site-footer a { color: var(--c-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-primary); text-decoration: underline; }

/* ==========================================================================
   VARIANTES A/B/C — recomposición por CSS (clase en <body>)
   La variante A es el orden por defecto (wireframe). B y C solo sobrescriben
   `order` de los bloques afectados o ajustan disposiciones. Detalle completo
   en templates/variants.yaml. Las reglas se agrupan por plantilla mediante la
   clase .tpl-t1 … .tpl-t5 que también lleva <body>.
   ========================================================================== */

/* ----- T1 (pilar) ----- */
/* B: galería destacada sube tras el CTA #1; el índice pasa después. */
.tpl-t1.variant-b .blk-gallery { order: 22; }
.tpl-t1.variant-b .blk-index   { order: 32; }
/* C: contenido primero — las secciones H2 van antes de la galería. */
.tpl-t1.variant-c .blk-sections { order: 28; }
.tpl-t1.variant-c .blk-gallery  { order: 58; }

/* ----- T2 (temática) ----- */
/* B: la galería se mueve tras los textos copiables e ideas. */
.tpl-t2.variant-b .blk-copyable { order: 31; }
.tpl-t2.variant-b .blk-ideas    { order: 32; }
.tpl-t2.variant-b .blk-gallery  { order: 33; }
.tpl-t2.variant-b .blk-cta-2    { order: 34; }
/* C: el vídeo va antes de la galería. */
.tpl-t2.variant-c .blk-video   { order: 29; }
.tpl-t2.variant-c .blk-gallery { order: 31; }

/* ----- T3 (colección) ----- */
/* B: oferta destacada + CTA gigante por encima de la galería (conversión directa). */
.tpl-t3.variant-b .blk-offer  { order: 15; }
.tpl-t3.variant-b .blk-cta-1  { order: 16; }
.tpl-t3.variant-b .blk-gallery { order: 21; }
/* C: intro corta y FAQs justo tras la galería; cómo funciona al final. */
.tpl-t3.variant-c .blk-intro-extra { order: 31; }
.tpl-t3.variant-c .blk-faqs        { order: 32; }
.tpl-t3.variant-c .blk-howto       { order: 96; }

/* ----- T4 (editorial) ----- */
/* B: consejos de uso antes del listado numerado. */
.tpl-t4.variant-b .blk-sections { order: 59; }
/* C: textos copiables en rejilla de 2 columnas en desktop + CTA inline tras intro. */
@media (min-width: 48rem) {
  .tpl-t4.variant-c .copyable-list { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ----- T5 (listicle) ----- */
/* B: ítems en rejilla de 2 columnas en desktop (imagen arriba). */
@media (min-width: 48rem) {
  .tpl-t5.variant-b .listicle { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .tpl-t5.variant-b .listicle-item { grid-template-columns: 1fr; margin: 0; }
  .tpl-t5.variant-b .listicle-item + .listicle-item { margin-top: 0; }
  .tpl-t5.variant-b .listicle-item img { max-width: 14rem; margin-inline: auto; }
}
/* C: "cómo elegir" antes de los ítems + imágenes alternadas a la derecha en desktop. */
.tpl-t5.variant-c .blk-sections { order: 21; }
.tpl-t5.variant-c .blk-items    { order: 22; }
@media (min-width: 40rem) {
  .tpl-t5.variant-c .listicle-item:nth-child(even) img { order: 2; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}


/* ==========================================================================
   CAPA DE MARCA — DearYou ("premiere cálida")
   Guía de estilo oficial: morado profundo + dorado alfombra roja + coral.
   Fraunces (titulares) · Inter (cuerpo). Radio 18px · maxw 1120px.
   ========================================================================== */
:root {
  --plum-900: #1A0F24;
  --plum-800: #241432;
  --plum-700: #33203F;
  --gold: #F0C969;
  --gold-soft: #E8B94F;
  --coral: #FF5E87;
  --coral-deep: #E8456F;
  --cream: #F8F1E7;
  --muted: #BCA8C9;

  --c-bg: var(--plum-900);
  --c-primary: var(--coral);        /* títulos de bloque, énfasis, números */
  --c-accent: var(--gold);          /* acentos VIP, eyebrows */
  --c-text: var(--cream);
  --c-surface: var(--plum-800);
  --c-surface-soft: rgba(248, 241, 231, .06);
  --c-line: rgba(248, 241, 231, .12);
  --c-text-muted: var(--muted);
  --r: 18px;
}

body {
  background: radial-gradient(120% 80% at 50% -10%, #2C1740 0%, var(--plum-900) 55%) fixed;
  color: var(--c-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  color: var(--cream);
  letter-spacing: -0.01em;
}
h2 { font-weight: 600; }

/* Eyebrows / etiquetas pequeñas en dorado */
.breadcrumb, .cluster-label, .eyebrow, small {
  color: var(--gold);
  letter-spacing: .08em;
}

/* Enlaces y acentos de texto */
a { color: var(--coral); }
a:hover { color: var(--coral-deep); }

/* Botón principal de marca: coral con texto morado oscuro (estilo DearYou) */
.btn-wa {
  background: var(--wa-green);   /* el CTA de WhatsApp mantiene su verde reconocible */
  color: #0B1F12;
}
.btn-brand, .cta--card .btn-wa:hover { background: var(--coral-deep); }

/* Botón copiar: pill coral suave sobre plum */
.copy-btn {
  background: transparent;
  color: var(--coral);
  border: 1px solid var(--coral);
  border-radius: 999px;
}
.copy-btn:hover { background: var(--coral); color: var(--plum-900); }

/* Tarjetas y superficies en plum-800 con borde fino */
.copy-card, .offer, .howto, .faqs details, .related li, .idea-card, .item-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
}

/* Oferta: precio en coral, etiqueta en dorado */
.offer .price, .offer strong { color: var(--coral); }
.offer .tag { color: var(--gold); }

/* Pasos: números en coral */
.howto .step-num, .steps li::marker { color: var(--coral); }

/* FAQs */
.faqs summary { color: var(--cream); }

/* Footer */
.site-footer { border-top: 1px solid var(--c-line); color: var(--muted); }


/* ---- Parches demo/marca ---- */
html { background: var(--plum-900); }
body { background-color: var(--plum-900); background-repeat: no-repeat; }
.gallery, .offer__imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery__item, .offer__imgs li, .listicle-item, figure { min-width: 0; }
@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .offer__imgs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* CTA de marca: coral (guía DearYou), texto morado oscuro */
.btn-wa { background: linear-gradient(180deg, var(--coral) 0%, var(--coral-deep) 100%);
  color: var(--plum-900); font-weight: 700; }
.btn-wa:hover { background: var(--coral-deep); color: var(--plum-900); }
.cta--banner { background: var(--plum-800); border: 1px solid var(--c-line); }
.cta--banner .btn-wa { background: linear-gradient(180deg, var(--coral), var(--coral-deep)); color: var(--plum-900); box-shadow: none; }
.cta--banner .btn-wa:hover { background: var(--coral-deep); }

/* evitar ensanche fantasma en móvil */
html, body { overflow-x: clip; }

/* contenedor a ancho de marca y CTA con acento dorado */
:root { --maxw: 1120px; }
.cta--card { border-left-color: var(--gold); }
@media (min-width: 64rem) {
  main, .wrap, .container { max-width: var(--maxw); }
}


/* ==========================================================================
   CAPA CLARA — versión crema (feedback piloto)
   Fondo crema, textos morado oscuro/negro, acentos de marca intactos.
   ========================================================================== */
:root {
  --gold-ink: #A67C00;           /* dorado legible sobre crema */
  --c-bg: var(--cream);
  --c-text: var(--plum-900);
  --c-text-muted: #6E5A7E;       /* malva oscuro, contraste sobre crema */
  --c-surface: #FFFFFF;
  --c-surface-soft: #F3EAD9;
  --c-line: rgba(26, 15, 36, .14);
}

html, body {
  background: radial-gradient(120% 60% at 50% -10%, #FDF8EE 0%, var(--cream) 55%) no-repeat var(--cream);
  color: var(--c-text);
}

h1, h2, h3, h4 { color: var(--plum-900); }

/* Eyebrows y etiquetas: dorado oscuro legible */
.breadcrumb, .cluster-label, .eyebrow, small { color: var(--gold-ink); }
.breadcrumb a { color: var(--gold-ink); }

/* Enlaces y énfasis: coral profundo para contraste sobre crema */
a { color: var(--coral-deep); }
a:hover { color: #C73659; }
strong { color: var(--coral-deep); }

/* Botón principal: coral con texto blanco (contraste máximo) */
.btn-wa { color: #FFFFFF; }
.btn-wa:hover { color: #FFFFFF; }
.cta--banner .btn-wa { color: #FFFFFF; }

/* Tarjetas: blanco con borde fino */
.copy-card, .offer, .howto, .faqs details, .related li, .idea-card, .item-card,
.cta--banner, .cta--card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.cta--card { border-left-color: var(--gold-ink); }

/* Botón copiar */
.copy-btn { color: var(--coral-deep); border-color: var(--coral-deep); }
.copy-btn:hover { background: var(--coral-deep); color: #FFFFFF; }

/* Oferta y pasos */
.offer .price, .offer strong { color: var(--coral-deep); }
.offer .tag { color: var(--gold-ink); }
.howto .step-num, .steps li::marker { color: var(--coral-deep); }
.faqs summary { color: var(--plum-900); }

/* Footer */
.site-footer { color: var(--c-text-muted); border-top: 1px solid var(--c-line); }

/* Galería: en móvil UNA imagen por fila (grande, formato historia) */
.gallery { grid-template-columns: minmax(0, 1fr); }
.gallery__item img { max-width: 22rem; margin-inline: auto; }
/* Tira de oferta (2 imágenes extra, más abajo): mismas reglas que la galería */
.offer__imgs { grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; }
.offer__imgs img { max-width: 22rem; margin-inline: auto; }
@media (min-width: 48rem) {
  .offer__imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 36rem; margin-inline: auto; }
  .offer__imgs img { max-width: none; }
}
@media (min-width: 48rem) {
  /* Escritorio: 2 columnas × 2 filas (reja 2×2, no 4 en fila — menos pesado visualmente) */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 36rem; margin-inline: auto; }
  .gallery__item img { max-width: none; }
}


/* ==========================================================================
   CAPA HÍBRIDA — chrome ciruela + tarjeta-artículo crema (diseño aprobado)
   Nav/cabecera/footer en plum #1A0F24; el artículo se lee sobre papel crema.
   ========================================================================== */
html, body {
  background: radial-gradient(120% 60% at 50% -10%, #2C1740 0%, var(--plum-900) 55%) no-repeat var(--plum-900);
}

/* ---------- Cabecera de sitio (plum) ---------- */
.site-header {
  max-width: var(--maxw); margin: 0 auto; padding: .9rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.brand {
  font-family: "Fraunces", Georgia, serif; font-weight: 900; font-size: 1.3rem;
  color: var(--cream); text-decoration: none; letter-spacing: -0.01em;
}
.brand-dot { color: var(--gold); }
.site-nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.site-nav a:hover { color: var(--cream); }
.site-header .btn-header {
  margin-left: auto; font-size: .85rem; padding: .55em 1.1em; color: #fff;
}

/* ---------- Tarjeta-artículo (crema) ---------- */
.container.page-flow {
  background: radial-gradient(120% 40% at 50% 0%, #FCF7EF 0%, var(--cream) 60%);
  color: var(--plum-900);
  max-width: 46rem;                       /* columna de lectura ~68ch */
  margin: .5rem auto 2.5rem;
  border-radius: var(--r);
  padding: 1.75rem 1.4rem 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
@media (min-width: 48rem) {
  .container.page-flow { padding: 2.75rem 3rem 0; margin-top: 1.5rem; }
}
.container.page-flow h1,
.container.page-flow h2,
.container.page-flow h3,
.container.page-flow h4 { color: var(--plum-900); }

/* Eyebrow del artículo: dorado oscuro, versales, tracking amplio */
.eyebrow-article {
  color: var(--gold-ink); text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 600; margin: 0 0 .4rem;
}

/* Meta-line: avatar coral + autor, tiempo de lectura, fecha */
.meta-line {
  display: flex; align-items: center; gap: .5rem;
  color: var(--c-text-muted); font-size: .9rem; margin: .4rem 0 1.25rem;
}
.meta-line .avatar {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  flex: none;
}

/* Breadcrumb discreto sobre la tarjeta */
.container.page-flow .breadcrumb { font-size: .85rem; }

/* Pull quote con filete dorado */
.pull-quote, .container.page-flow blockquote {
  border-left: 3px solid var(--gold); margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem;
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 1.15rem; line-height: 1.45; color: var(--plum-800);
}

/* Chips de etiquetas al final del artículo */
.tag-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; }
.chip {
  border: 1px solid var(--gold); color: var(--gold-ink);
  border-radius: 999px; padding: .3em .9em;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Footer de sitio (plum, "abraza" la tarjeta por abajo) ---------- */
.container.page-flow .site-footer {
  background: var(--plum-900); color: var(--muted);
  margin: 2.5rem -1.4rem 0; padding: 2rem 1.4rem;
  border-radius: 0 0 var(--r) var(--r);
  border-top: none;
}
@media (min-width: 48rem) {
  .container.page-flow .site-footer { margin-inline: -3rem; padding-inline: 3rem; }
}
.container.page-flow .site-footer a { color: var(--cream); }
.container.page-flow .site-footer a:hover { color: var(--gold); }

/* breadcrumb en línea, separadores dorados */
.container.page-flow .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.container.page-flow .breadcrumb li { display: inline-flex; align-items: center; }
.container.page-flow .breadcrumb li + li::before { content: "›"; margin-right: .45rem; color: var(--gold-ink); }
.container.page-flow .breadcrumb span[aria-current] { color: var(--c-text-muted); }

/* ============================================================================
   CAPA CABECERA — réplica exacta de la de dearyou.ai
   Medidas tomadas del DOM en producción (2026-08-06): wrap 1120px, badge dorado
   al 12% sobre borde al 40%, botón oro #F0C969 con texto #2A1C06, sticky + blur.
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  max-width: none; margin: 0; padding: 0; display: block;
  background: rgba(26,15,36,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.site-header .nav-in{
  max-width: 1120px; margin-inline: auto; padding: .8rem 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand{ font-size: 1.35rem; letter-spacing: -.02em; }
.brand b{ color: var(--coral); font-weight: 900; }
.brand-dot{ color: var(--coral); }

.launch-badge{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 15px; border-radius: 999px;
  background: rgba(240,201,105,.12);
  border: 1px solid rgba(240,201,105,.4);
  color: var(--gold);
  font-size: .69rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
}
.lb-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.lb-price{ color: #fff; font-weight: 800; font-size: .78rem; }

.site-header .btn-header{
  margin-left: 0;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gold); color: #2A1C06;
  padding: 11px 20px; border-radius: 999px;
  font-weight: 700; font-size: .9rem; box-shadow: none;
  white-space: nowrap;
}
.site-header .btn-header:hover{ background: #F7D687; color: #2A1C06; transform: translateY(-1px); }
.site-header .btn-header .arr{ font-weight: 700; }

/* El CTA ya no abre WhatsApp: fuera el icono de la burbuja, que prometía otro canal. */
.btn-wa::before{ content: none !important; }

@media (max-width: 52rem){
  .launch-badge{ display: none; }          /* en móvil solo marca y botón */
  .site-header .nav-in{ padding: .7rem 1rem; }
}

/* ============================================================================
   ANCHO DE LECTURA EN PANTALLAS GRANDES
   La medida de línea se mide en CARACTERES, no en píxeles: por encima de ~75
   caracteres el ojo pierde el renglón al saltar. Por eso no ensanchamos la
   caja a lo bruto; subimos el tamaño de raíz y la caja crece con él. Misma
   cantidad de caracteres por línea, más píxeles en pantalla y texto más
   legible a la distancia a la que se mira un monitor de 32".
   ========================================================================== */
   El ancho de la caja se queda FIJO en rem a propósito. Si subiéramos a la vez el tamaño
   de raíz y los rem del ancho, los caracteres por línea crecerían el doble y acabaríamos
   en ~90 por renglón. Subiendo solo la raíz, la caja crece en píxeles y la línea mantiene
   los mismos caracteres. */
.container.page-flow{ max-width: 48rem; }

@media (min-width: 100rem){            /* ~1600px */
  :root{ font-size: 20px; }
  .site-header .nav-in{ max-width: 1280px; }
}
@media (min-width: 125rem){            /* ~2000px, monitores de 32" */
  :root{ font-size: 22px; }
  .site-header .nav-in{ max-width: 1440px; }
}

/* ============================================================================
   IMÁGENES DE PRODUCTO SIN RECORTE
   Las invitaciones llevan la fecha y el lugar impresos en la parte baja: son el
   producto, no una foto decorativa. Forzar 9/16 con `cover` recortaba justo esa
   franja. Se respeta la proporción nativa del archivo.
   El hueco previo a la carga ya lo reserva el navegador con los atributos
   width/height reales que escribe el build, así que no hay salto de maquetación.
   ========================================================================== */
.gallery__item img,
.offer__imgs img,
.listicle-item img{
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
}

/* Tira de 2 imágenes: ilustra el cuerpo editorial en vez de acompañar al precio. */
.blk-showcase { order: 57; }
.blk-showcase .offer__imgs { list-style: none; padding: 0; }
.showcase-inline { margin: 1.5rem 0; }
.showcase-inline ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; max-width: 36rem; margin-inline: auto; }
@media (max-width: 48rem){ .showcase-inline ul { grid-template-columns: minmax(0,1fr); } }

/* Chips y footer viven DENTRO de la tarjeta crema (CLAUDE.md: footer sangrado a sus
   bordes). El .container interno del footer sobra ahí: ya lo acota la tarjeta. */
.container.page-flow .tag-chips { margin: 2rem 0 0; }
.container.page-flow .site-footer .container { width: auto; max-width: none; margin-inline: 0; }

/* CTA de arriba: informa antes de pedir el clic. Va sobre la tarjeta crema, así que
   el texto es ciruela — el blanco venía de cuando este bloque iba sobre fondo oscuro. */
.cta--inline { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; }
.cta--inline .cta__text { color: var(--plum-900); font-weight: 600; font-size: 1.02rem; margin: 0; }

/* El precio sin botón al lado es una vía muerta: se enseña el coste y no hay dónde pulsar. */
.blk-offer .btn-wa { margin-top: 1rem; }

/* ============================================================================
   BLOQUE DE OFERTA — oscuro, con la paleta de marca
   "Para vender: oscuro. Para leer: claro" (CLAUDE.md). El precio es el momento
   de venta dentro de un artículo claro: se separa del texto con el ciruela de
   marca, y así deja de parecer un párrafo más.
   ========================================================================== */
.container.page-flow .blk-offer{
  background: var(--plum-900);
  color: var(--cream);
  border: 1px solid rgba(240,201,105,.28);
  border-radius: var(--r);
  padding: 2rem 1.5rem;
  text-align: center;
}
.container.page-flow .blk-offer .offer__line{ color: var(--cream); font-weight: 600; }
.container.page-flow .blk-offer .offer__price{
  color: var(--gold);                 /* dorado sobre ciruela: el par de marca */
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.1;
  margin: .6rem 0 .3rem;
}
.container.page-flow .blk-offer .offer__note{ color: rgba(248,241,231,.72); font-size: .92rem; }

/* Todo el cuerpo en Inter, también la cabecera (precio y botón). */
body, .site-header, .launch-badge, .lb-price, .btn-wa, .btn-header, .chip,
.offer__line, .offer__note, .cta__text, .cta__note{
  font-family: var(--font-body);
}

/* Tarjetas de "También te puede gustar": una sola caja, no dos.
   El <li> y el <a> llevaban cada uno fondo, borde y radio distintos (18px y 9px),
   separados por 1px. En las esquinas las dos curvas no encajaban y la interior
   asomaba. La tarjeta es el enlace — es la superficie que se pulsa. */
.related li{
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.related a{
  border-radius: var(--r);
  height: 100%;
}

/* Chips y footer al final de la tarjeta.
   .container.page-flow es flex-column y ordena por `order`. Los bloques .blk-* van
   del 5 al 110; estos dos no llevaban ninguno, así que tomaban el 0 por defecto y
   se colocaban por delante del breadcrumb. */
.container.page-flow > .tag-chips  { order: 200; }
.container.page-flow > .site-footer { order: 210; }

/* 2 imágenes pegadas a la intro, antes del primer CTA. */
.blk-hero-imgs { order: 15; }
.blk-hero-imgs ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; max-width: 34rem; margin-inline: auto; }
@media (max-width: 40rem){ .blk-hero-imgs ul { grid-template-columns: minmax(0,1fr); } }

/* ============================================================================
   AIRE DE LOS SUBTÍTULOS
   El reset pone todos los márgenes a 0 y solo se devuelve el de párrafo a párrafo
   (`p + p`). Los H3 se quedaron pegados al texto anterior, con 0px de separación.
   Regla tipográfica: un título pertenece a lo que viene DESPUÉS, así que lleva
   bastante más aire arriba que abajo. Si no, el ojo lo asocia al párrafo anterior.
   ========================================================================== */
.container.page-flow .section h3,
.container.page-flow .section h4{
  margin-top: 1.9em;
  margin-bottom: .45em;
}
.container.page-flow .section h3:first-child,
.container.page-flow .section h4:first-child{ margin-top: 0; }

/* El H2 abre sección: aún más aire, y una separación clara de la anterior. */
.container.page-flow .section + .section{ margin-top: 2.4rem; }
.container.page-flow .section h2{ margin-bottom: .7rem; }

/* Los títulos de las tarjetas de relacionados salen de la keyword del destino, que va
   en minúscula. En prosa es correcto (van dentro de una frase), pero como titular de
   tarjeta pide mayúscula. Se hace con ::first-letter para no tocar el texto del enlace,
   que se reutiliza tal cual en los enlaces contextuales del cuerpo. */
.related a::first-letter { text-transform: uppercase; }

/* ============================================================================
   PASOS EN FILAS, NO EN COLUMNAS
   En 3 columnas dentro de la tarjeta cada renglón cabía a 3 palabras y el paso 1
   quedaba al doble de alto que el 3. En horizontal cada paso se lee de corrido y
   los tres ocupan lo que necesitan.
   ========================================================================== */
.container.page-flow .steps{
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
}
.container.page-flow .steps li{ padding-left: 3.1rem; }
.container.page-flow .steps li strong{
  font-size: 1.06rem;
  color: var(--coral-deep);
  margin-bottom: .3rem;
}
.container.page-flow .howto h2{ text-align: left; }

/* La tarjeta de CTA llevaba un acento de 5px a la izquierda, pero una regla de tarjeta
   posterior redefinía `border` entero y lo dejaba en 1px: a ese grosor no se lee como
   acento, se lee como un borde mal puesto. Se restaura el ancho previsto. */
.container.page-flow .cta--card{
  border-left: 5px solid var(--gold-ink);
}

/* El botón conservaba el halo verde de WhatsApp de cuando el CTA abría WhatsApp.
   Ahora es coral y el resplandor verdoso desentonaba con todo. */
.btn-wa{ box-shadow: 0 3px 14px rgba(232, 69, 111, .3); }
.btn-wa:hover{ box-shadow: 0 5px 18px rgba(232, 69, 111, .38); }
.site-header .btn-header{ box-shadow: none; }

/* ============================================================================
   PORTADA DEL BLOG
   Las tarjetas van a 2 columnas. Con `auto-fit` una tarjeta sola ocupa el ancho
   completo en vez de quedarse en un tercio con hueco a la derecha, que es como
   se veía con la reja de 3 del bloque de relacionados.
   ========================================================================== */
.tpl-indice .related ul{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.tpl-indice .related{ border-top: 1px solid var(--c-line); padding-top: 1.4rem; }
.tpl-indice .related h2{ margin-bottom: .9rem; }
.tpl-indice .related a{ height: 100%; }
.tpl-indice .related a small{ display: block; margin-top: .4rem; line-height: 1.45; }

@media (min-width: 44rem){
  .tpl-indice .related ul{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* El resumen de la tarjeta hereda el espaciado de los chips y se lee ancho. */
.tpl-indice .related a small{ letter-spacing: normal; font-size: .88rem; color: var(--c-text-muted); }

/* En una reja, el margen de `li + li` del reset desplaza cada tarjeta dentro de su
   celda y las deja desalineadas por unos píxeles. La separación ya la da el `gap`. */
.related li, .gallery__item, .offer__imgs li, .copyable-list li, .ideas-list li{ margin-top: 0; }