/* ==========================================================================
   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; }
/* Los «3 sencillos pasos» van pegados debajo de las FAQs de la portada (Issac,
   2026-09-09): ahí es donde el visitante ya ha resuelto sus dudas y toca contarle
   qué tiene que hacer. */
.blk-faqs-home  { order: 86; }
.blk-howto      { order: 88; }
.blk-offer      { order: 85; }
/* .blk-faqs (las FAQs propias de cada página) ya no se pinta: se retiró de las cinco
   plantillas el 2026-09-09. La regla se queda por si vuelve. */
.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-catalogue { order: 15; }  /* las 6 juntas, igual que en T3 */
.tpl-t1 .blk-offer  { order: 18; }  /* precio y botón pegados al catálogo */
.tpl-t1 .blk-cta-1  { order: 60; }  /* la llamada suelta baja al cuerpo: pegada a la
                                       oferta eran dos botones apilados */
.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-1  { order: 92; }  /* la banda cierra la página */
.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 {
  /* Se probó la paleta del sistema de diseño (artefacto 80bcb3e6) el 2026-08-26 y se
     descartó: #14091E / #E0B85F / #FF6FA5 / #FBF3E4 / #8B7A9E más una familia lila.
     Estos son los valores buenos. No volver a cambiarlos sin verlos montados antes. */
  --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; }

/* ==========================================================================
   PIE DE FOTO — "Temática: X" bajo cada invitación  (2026-08-26)
   El pie ya existía en la galería principal; las otras dos tiras de imágenes
   (las 2 del hero y las 2 de oferta) llevaban <img> suelta, sin <figure>.
   Ahora las tres usan la misma marca y comparten este estilo.
   ========================================================================== */
.offer__imgs figure { margin: 0; }
.offer__imgs figcaption,
.gallery__item figcaption {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--c-text-muted);
  padding-top: .4rem;
  text-align: center;
}

/* =========================================================================
   T3 · CATÁLOGO                                        (hallmark redesign)

   Hallmark · genre: editorial · macrostructure: Catalogue
   design-system: design.md · designed-as-app · tone: inventario
   anchor hue: ciruela/coral (heredado, sin cambios)
   pre-emit critique: P5 H5 E4 S5 R5 V5

   La reja `.catalogue` la comparten T3 y T1 desde el 2026-09-08: el hub y su colección se
   veían distintos y no había motivo. El resto del bloque sigue dentro de `.tpl-t3`, así
   que T2, T4 y T5 no cambian ni un píxel.

   EL PROBLEMA QUE ARREGLA. T3 tenía el mismo ritmo que T1 (doce bloques contra once, en el
   mismo orden) y sus seis invitaciones iban partidas en tres tiras separadas, con texto y
   botones en medio. T1 es un artículo y ese reparto tiene sentido. T3 no: recibe a alguien
   que viene de ver UNA foto en Pinterest, y lo primero que necesita es ver las otras cinco.

   EL CAMBIO. Macroestructura Catalogue: el inventario ES la página. Cabecera corta, las
   seis seguidas en una reja, y el texto debajo para quien siga bajando.
   ========================================================================= */

/* El orden lo manda el DOM, no el CSS. Las reglas .blk-* de arriba ordenan las plantillas
   que son artículos; en T3 el orden de la plantilla YA es el bueno, y dejar las dos capas
   peleando es la clase de bug que solo aparece cuando alguien añade un bloque. */
.tpl-t3 .blk { order: 0; }

/* ---------- Cabecera de inventario ---------- */
/* No es el titular de un artículo: es la etiqueta de una colección. Va un escalón por
   debajo del H1 de T1 en tamaño y no lleva ni eyebrow ni minutos de lectura. */
.tpl-t3 .collection-head { margin-bottom: calc(var(--space-block) / 2); }
.tpl-t3 .collection-head h1 {
  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  line-height: 1.15;
  margin: 0;
}
.tpl-t3 .collection-head__meta {
  margin: .55rem 0 0;
  font-size: .95rem;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.tpl-t3 .collection-head__meta b {
  color: var(--coral-deep, var(--c-text));
  font-weight: 700;
}

/* ---------- El catálogo ---------- */
.catalogue { margin-block: 0 var(--space-block); }
.catalogue__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0, 1fr) y no 1fr: con imágenes dentro, `1fr` se niega a bajar del tamaño
     intrínseco y desborda en móvil. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  /* Cada ficha ocupa su alto real. Sin esto, `stretch` iguala las dos de una fila y una
     invitación de proporción distinta saldría estirada. */
  align-items: start;
}
@media (min-width: 48rem) {
  .catalogue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.25rem; }
}
.catalogue__item { margin: 0; min-width: 0; }
.catalogue__item figure { margin: 0; }
.catalogue__item img {
  display: block;
  width: 100%;
  /* La proporción la manda el fichero, no el CSS. Las invitaciones son 980×1880 (0,521),
     no 9/16 (0,5625): forzar la caja con `cover` les comía un 7,3 % del alto, la mitad
     por abajo, que es donde va el sitio de la fiesta. Es el mismo fallo que ya estaba
     arreglado más arriba para .gallery/.offer/.listicle, y que este bloque —escrito
     después— volvía a introducir. El hueco lo reserva el navegador con los width/height
     reales que escribe el build, así que no hay salto de maquetación. */
  height: auto;
  border-radius: var(--radius-sm);
  /* SIN fondo propio. Las invitaciones traen las esquinas redondeadas en transparente,
     así que lo que se ve por ellas tiene que ser la tarjeta crema. Con un color aquí
     —aunque sea otro crema— se marca un halo alrededor de cada foto. */
  /* Filete propio, más marcado que --c-line (.14). La invitación es casi blanca y el
     artículo es crema: con el filete general las seis se fundían con el fondo y no se
     veía dónde acaba una y empieza la siguiente. .26 sigue siendo un pelo de gris —no
     dibuja un marco— pero ya separa. No se toca --c-line porque lo comparten chips,
     FAQs y tarjetas de todas las plantillas, vivas. */
  border: 1px solid rgba(59, 55, 47, .26);
}
/* Filete bajo cada pie: es el lenguaje de separación de Catalogue (reglas finas entre
   filas), y de paso ata el pie a su imagen en vez de dejarlo flotando. */
.catalogue__item figcaption {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--c-text-muted);
  padding: .45rem 0 .6rem;
  border-bottom: 1px solid var(--c-line);
}

/* ---------- Oferta, en barra ---------- */
/* Catalogue no lleva CTA global porque cada ficha enlaza a su detalle. Aquí las seis
   fichas son el mismo producto y la página existe para convertir: una llamada, no
   ninguna. Desviación deliberada, anotada también en la plantilla. */
/* Fondo y borde NO se tocan: `design.md` dice «para vender: oscuro», y el bloque .offer
   ya viene en ciruela. Intenté pintarlo en crema y la regla vieja ganó por especificidad,
   así que salía bien por accidente. Aquí solo se ajusta la tipografía y el aire. */
.tpl-t3 .offer--rail { text-align: center; }
.tpl-t3 .offer--rail .offer__line { margin: 0; font-weight: 600; }
.tpl-t3 .offer--rail .offer__price {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 7vw, 2.9rem);
  line-height: 1;
  margin: .35rem 0 .2rem;
  font-variant-numeric: tabular-nums;
}
.tpl-t3 .offer--rail .offer__note { margin: 0 0 1rem; color: var(--c-text-muted); font-size: .92rem; }
.tpl-t3 .offer--rail .offer__privacy {
  margin: .8rem 0 0;
  font-size: .84rem;
  color: var(--c-text-muted);
}
@media (min-width: 40rem) {
  .tpl-t3 .offer--rail .btn-wa { min-width: 18rem; }
}

/* NO poner margen negativo aquí. Lo probé para pegar la intro a la oferta y lo que hace
   es meter el texto DENTRO de la tarjeta ciruela: prosa malva sobre fondo oscuro,
   ilegible. El bloque .offer es una tarjeta con fondo propio, no una sección de flujo. */
.tpl-t3 .blk-intro-extra .lead { max-width: 62ch; }

/* =========================================================================
   FAQs DE LA HOME — panel oscuro con acordeón
   Réplica del bloque que ya existe en dearyou.ai: filete + eyebrow dorado,
   titular Fraunces en crema, filas separadas por hairlines y un «+» que gira a «−».
   Sin JavaScript: <details> nativo, así funciona con el JS desactivado y es accesible
   con teclado de serie.
   ========================================================================= */
.faqs-home {
  background: var(--plum-900);
  color: var(--cream);
  border-radius: var(--r, 18px);
  padding: 2.2rem 1.3rem 1.6rem;
  margin-block: var(--space-block);
  text-align: center;
}
@media (min-width: 48rem) { .faqs-home { padding: 2.8rem 2.4rem 2rem; } }

.faqs-home__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  color: var(--gold);
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; font-weight: 700;
  margin: 0 0 .7rem;
}
.faqs-home__eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: var(--gold); opacity: .8; }

.faqs-home h2 {
  font-family: var(--font-head);
  color: var(--cream);
  font-weight: 900;
  font-size: clamp(1.6rem, 5.2vw, 2.3rem);
  line-height: 1.12;
  margin: 0 0 1.6rem;
  max-width: 20ch; margin-inline: auto;
}

.faqs-home__item {
  text-align: left;
  border-bottom: 1px solid rgba(248, 241, 231, .16);
}
.faqs-home__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer;
  list-style: none;                 /* fuera el triángulo por defecto */
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cream);
  padding: 1.05rem 0;
}
.faqs-home__item summary::-webkit-details-marker { display: none; }
.faqs-home__item summary::after {
  content: "+";
  flex: none;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 1.35rem; line-height: 1;
  /* solo transform: animar un layout property da tirones */
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.faqs-home__item[open] summary::after { content: "−"; transform: rotate(180deg); }
.faqs-home__item summary:hover { color: var(--gold); }
.faqs-home__item summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.faqs-home__item p {
  margin: 0 0 1.15rem;
  color: var(--muted);
  font-size: .95rem;
  max-width: 62ch;
}
@media (prefers-reduced-motion: reduce) {
  .faqs-home__item summary::after { transition: none; }
}

/* Orden del bloque: en T3 lo manda el DOM (ver `.tpl-t3 .blk { order: 0 }`);
   en T1 va justo antes del CTA de cierre. */
.tpl-t1 .blk-faqs-home { order: 22; }  /* tras la oferta, como en T3 */
.tpl-t1 .blk-howto     { order: 24; }  /* y los 3 pasos, pegados a ellas */

/* El rótulo del pie de foto («Temática:» / «Theme:») en negrita y un punto más oscuro
   que la temática. Va marcado con <b> desde la plantilla y no con HTML metido en el
   dato, para que el texto siga siendo texto en cualquier otra salida. */
figcaption b {
  font-weight: 700;
  color: var(--c-text);
}
.faqs-home figcaption b { color: var(--cream); }