@import url("tokens.css");

/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom
 * enrichment: none (tipografía + marquesinas del brief) · nav: N6 masthead · footer: Ft4 colofón denso
 */

/* ───────────────────────── Base ───────────────────────── */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: var(--peso-cuerpo);
  -webkit-font-smoothing: antialiased;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0 0 var(--space-md); max-width: var(--measure); }
ul, ol { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
  /* Nunca se anima: debe aparecer al instante. */
}
.on-dark :focus-visible, .foot :focus-visible, .util :focus-visible { outline-color: var(--color-focus-dark); }

.skip {
  position: absolute; left: var(--space-md); top: -100px;
  background: var(--color-ink); color: var(--color-ink-tinta);
  padding: var(--space-sm) var(--space-md); z-index: var(--z-modal);
  border-radius: var(--radius-sm); white-space: nowrap;
}
.skip:focus { top: var(--space-md); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ───────────────────────── Shell ───────────────────────── */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--tight { max-width: 56rem; }

.rule { border: 0; border-top: var(--rule-hair); margin: 0; }
.rule--double { border: 0; border-top: 3px double var(--color-rule-strong); margin: 0; }

/* ──────────── N6 · Masthead de periódico (sticky) ──────────── */
.masthead { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); }

.util {
  background: var(--surface-inv);
  color: var(--color-on-dark-mute);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.util__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-xs);
}
.util__item { white-space: nowrap; }
.util__wa { margin-inline-start: auto; color: var(--color-focus-dark); font-weight: 600; white-space: nowrap; }

.mast__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding-block: var(--space-md);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  letter-spacing: -0.03em; text-decoration: none; line-height: 1;
  color: var(--color-ink);
}
.wordmark__mark { flex: none; width: 1.9em; height: 1.9em; }
.wordmark__text { display: grid; }
.wordmark__sub {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.5em; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
}

.nav__toggle {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font: inherit; font-weight: 600; white-space: nowrap;
  background: none; border: var(--rule-firm); border-radius: var(--radius-sm);
  color: var(--color-ink); padding: var(--space-xs) var(--space-md);
  min-height: 44px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav__toggle:hover { background: var(--color-ink); color: var(--color-ink-tinta); }

.nav__links {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-sm);
}
.nav__link {
  display: inline-block; white-space: nowrap; text-decoration: none;
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding-block: var(--space-2xs);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { border-bottom-color: var(--color-accent); }
.nav__link[aria-current="page"] { border-bottom-color: var(--color-ink); font-weight: 700; }

@media (max-width: 59.99rem) {
  .nav__links { display: none; }
  .nav__links.is-open { display: grid; gap: 0; }
  .nav__links.is-open .nav__link {
    padding-block: var(--space-sm); border-bottom: var(--rule-hair);
    border-radius: 0; min-height: 44px;
  }
}
@media (min-width: 60rem) { .nav__toggle { display: none; } }

/* ──────────── Submenú del catálogo ────────────
 * Escritorio: se abre al pasar el cursor y al hacer clic (teclado/táctil).
 * Móvil: acordeón dentro del menú hamburguesa.
 * Los enlaces son <a href> reales en el HTML para que Google los rastree. */
.nav__item--submenu { position: relative; }
.nav__link--parent {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding-block: var(--space-2xs); border-bottom: 2px solid transparent;
  color: var(--color-ink);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.nav__link--parent::after {
  content: ""; width: 0.5rem; height: 0.5rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur-micro) var(--ease-out);
}
.nav__link--parent[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.nav__link--parent:hover { border-bottom-color: var(--color-accent); }

.nav__submenu {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown);
  min-width: 30rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md);
  background: var(--color-paper); border: var(--rule-firm);
  border-radius: var(--radius-md); padding: var(--space-lg);
  box-shadow: 0 12px 32px oklch(20% 0.02 235 / 0.18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out),
              visibility var(--dur-micro);
}
.nav__item--submenu:hover .nav__submenu,
.nav__item--submenu:focus-within .nav__submenu,
.nav__submenu.is-open {
  opacity: 1; visibility: visible; transform: none;
}
.nav__submenu__group { display: grid; gap: var(--space-2xs); }
.nav__submenu__title {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-muted); padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair); margin-bottom: var(--space-2xs);
}
.nav__link--sub {
  display: block; text-decoration: none;
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding-block: var(--space-2xs); border-bottom: 0;
  color: var(--color-ink);
}
.nav__link--sub:hover { color: var(--color-accent-deep); }

/* En móvil el submenú es un acordeón dentro del menú hamburguesa. */
@media (max-width: 59.99rem) {
  .nav__submenu {
    position: static; min-width: 0;
    display: none; grid-template-columns: 1fr; gap: var(--space-sm);
    background: none; border: 0; box-shadow: none;
    padding: 0 0 var(--space-sm) var(--space-md);
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__submenu.is-open { display: grid; }
  .nav__link--parent {
    width: 100%; justify-content: space-between;
    padding-block: var(--space-sm); border-bottom: var(--rule-hair);
    min-height: 44px;
  }
  .nav__link--sub { padding-inline-start: var(--space-sm); }
}

/* ──────────── Botones ──────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  font: inherit; font-weight: 600; white-space: nowrap; text-decoration: none;
  padding: var(--space-sm) var(--space-lg); min-height: 44px;
  border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.btn--primary { background: var(--color-ink); color: var(--color-ink-tinta); border-color: var(--color-ink); }
.btn--primary:hover { background: var(--color-ink-deep); border-color: var(--color-ink-deep); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-ink); color: var(--color-ink-tinta); }

.btn--text {
  padding-inline: 0; min-height: 0; border: 0; border-radius: 0;
  border-bottom: 2px solid var(--color-accent); background: none;
  color: var(--color-ink); border-radius: 0;
}
.btn--text:hover { border-bottom-color: var(--color-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }

/* ──────────── Encabezados de sección (S2 · colgante, apilado) ──────────── */
.band { padding-block: var(--space-3xl); }
.band--tight { padding-block: var(--space-2xl); }
.band--dark { background: var(--surface-inv); color: var(--color-on-dark); }
.band--paper2 { background: var(--color-paper-2); }

.shead { margin-bottom: var(--space-xl); max-width: 46rem; }
.shead__kicker {
  display: block; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: var(--space-sm);
}
.band--dark .shead__kicker { color: var(--color-on-dark-mute); }
.shead__title { font-size: var(--text-2xl); font-weight: 800; }
.shead__lede { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-md); }
.band--dark .shead__lede { color: var(--color-on-dark-mute); }

/* ──────────── H2 · Hero diptych 7/5 ──────────── */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4xl); }
}
.hero__title { font-size: var(--text-display); font-weight: 800; }
.hero__lede {
  margin-top: var(--space-lg); font-size: var(--text-md);
  line-height: 1.55; max-width: 46ch;
}
.hero__body { margin-top: var(--space-md); color: var(--color-muted); }
.hero__cta { margin-top: var(--space-xl); }

/* Columna de prueba: índice tipográfico del inventario (sin foto inventada) */
.proof { border-top: var(--rule-firm); }
.proof__cap {
  display: flex; justify-content: space-between; gap: var(--space-md);
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-muted); padding-block: var(--space-sm);
}
.proof__list { list-style: none; }
.proof__row { border-top: var(--rule-hair); }
.proof__link {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); padding-block: var(--space-sm);
  text-decoration: none; min-height: 44px;
}
.proof__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.proof__meta { font-size: var(--text-sm); color: var(--color-muted); text-align: end; }
.proof__link:hover .proof__name { color: var(--color-accent-deep); }

/* ──────────── Marquesinas (banner de Inicio) ──────────── */
.marquee { overflow: hidden; padding-block: var(--space-md); }
.marquee__track {
  list-style: none; display: flex; gap: var(--space-md); width: max-content;
  animation: slide var(--dur-marquee) linear infinite;
}
.marquee--right .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee__item { flex: none; }
.marquee__item a { display: block; text-decoration: none; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: var(--color-paper-3); border: var(--rule-hair);
  display: grid; place-items: end start;
  padding: var(--space-sm); color: var(--color-muted);
  font-size: var(--text-sm); line-height: 1.3;
}
.tile--pieza { width: 15rem; aspect-ratio: 3 / 4; }
.tile--montaje { width: 22rem; aspect-ratio: 16 / 9; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__slot { position: relative; z-index: var(--z-base); }
.tile__slot b { display: block; font-weight: 600; color: var(--tinta-sobre-foto); font-family: var(--font-display); }
.tile__slot code { font-size: var(--text-xs); word-break: break-all; color: var(--color-muted); }

@media (max-width: 39.99rem) {
  .tile--pieza { width: 10.5rem; }
  .tile--montaje { width: 16rem; }
  :root { --dur-marquee: 48s; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ──────────── Universos (rejilla asimétrica, 7 piezas) ──────────── */
.universos { list-style: none; display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .universos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .universos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .universos > li { grid-column: span 2; }
  .universos > li:first-child { grid-column: span 3; }
  .universos > li:nth-child(2) { grid-column: span 3; }
}
.uni {
  display: grid; gap: var(--space-sm); height: 100%;
  padding: var(--space-lg); border: var(--rule-hair); border-radius: var(--radius-md);
  background: var(--color-paper); text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .uni:hover { border-color: var(--color-ink); transform: translateY(-2px); }
}
.uni__name { font-size: var(--text-lg); font-weight: 700; }
.uni__line { color: var(--color-muted); font-size: var(--text-sm); margin: 0; max-width: none; }
.uni__go {
  margin-top: auto; font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; color: var(--color-accent-deep);
}

/* ──────────── F4 · Secuencia de pasos ──────────── */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps > li { counter-increment: step; border-top: var(--rule-hair); padding-block: var(--space-lg); }
.steps > li:last-child { border-bottom: var(--rule-hair); }
@media (min-width: 60rem) {
  .steps > li { display: grid; grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.step__name { font-size: var(--text-md); font-weight: 700; margin-block: var(--space-2xs); }
.step__note { color: var(--color-muted); margin: 0; }

/* ──────────── Split Studio · bloques dípticos alternos ──────────── */
.dip { display: grid; gap: var(--space-xl); align-items: start; padding-block: var(--space-2xl); border-top: var(--rule-hair); }
@media (min-width: 60rem) {
  .dip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4xl); }
  .dip--flip > :first-child { order: 2; }
}
.dip__title { font-size: var(--text-xl); font-weight: 700; }
.dip__aside { color: var(--color-muted); }

/* ──────────── Listas de piezas / catálogo ──────────── */
.pieces { list-style: none; display: grid; gap: 0; }
.pieces > li { border-top: var(--rule-hair); padding-block: var(--space-sm); }
.pieces > li:last-child { border-bottom: var(--rule-hair); }
.pieces b { font-family: var(--font-display); font-weight: 600; }
.pieces span { color: var(--color-muted); }

.cats { list-style: none; display: grid; gap: var(--space-3xl); }
.cat { border-top: var(--rule-firm); padding-top: var(--space-md); }
.cat__name { font-size: var(--text-lg); font-weight: 700; }
.cat__items { margin-top: var(--space-xs); color: var(--color-muted); }
.cat__list { list-style: none; display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }
.cat__list li { padding-left: var(--space-md); position: relative; }
.cat__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--color-accent, currentColor); }

/* ──────────── Tarjetas de secciones del catálogo ──────────── */
.secciones { list-style: none; display: grid; gap: var(--space-lg); }
@media (min-width: 30rem) { .secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .secciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seccion { display: grid; gap: var(--space-xs); text-decoration: none; color: inherit; }
.seccion__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: var(--foto-bg); }
.seccion__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.seccion__group { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }

/* ──────────── Badges de estado ──────────── */
.badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-sm);
  background: var(--badge-bg); color: var(--color-ok);
}
.badge--warn { color: var(--color-warn); }
.badge--ok { color: var(--color-ok, #2e7d32); }
.badge--new  { color: var(--color-on-dark); }

/* ──────────── Galería ──────────── */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.filter {
  font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  background: none; border: var(--rule-hair); border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md); min-height: 44px; cursor: pointer;
  color: var(--color-ink);
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.filter:hover { border-color: var(--color-ink); }
.filter[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }

.gal { list-style: none; display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gal figure { margin: 0; display: grid; gap: var(--space-sm); }
.gal figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.gal figcaption b { color: var(--color-ink); font-family: var(--font-display); }

/* ──────────── FAQ · acordeón accesible ──────────── */
.faq { border-top: var(--rule-hair); }
.faq__item { border-bottom: var(--rule-hair); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-md); text-align: start; font: inherit;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  color: var(--color-ink); background: none; border: 0; cursor: pointer;
  padding-block: var(--space-lg); min-height: 44px;
}
.faq__sign { flex: none; color: var(--color-accent); font-size: var(--text-lg); line-height: 1; transition: transform var(--dur-short) var(--ease-in-out); }
.faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--space-lg); color: var(--color-muted); }

/* ──────────── Migas de pan ──────────── */
.crumbs { font-size: var(--text-sm); padding-block: var(--space-lg); color: var(--color-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--color-rule-strong); }
.crumbs a { white-space: nowrap; }

/* ──────────── Ficha de datos (contacto / nosotros) ──────────── */
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: grid; gap: var(--space-2xs); border-top: var(--rule-hair); padding-block: var(--space-sm); }
@media (min-width: 40rem) { .facts > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-md); } }
.facts dt { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.facts dd { margin: 0; }

/* ──────────── Aviso de contenido pendiente ──────────── */
.note {
  border-inline-start: 3px solid var(--color-accent);
  background: var(--color-paper-2);
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm); color: var(--color-muted);
}
.note p:last-child { margin-bottom: 0; }
.note b { color: var(--color-ink); }

/* ──────────── Selector "Arma tu montaje" ──────────── */
.wiz { display: grid; gap: var(--space-xl); }
.wiz__progress { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-md); border-bottom: var(--rule-hair); padding-bottom: var(--space-md); }
.wiz__progress li { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.wiz__progress li::before {
  content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%;
  background: var(--color-rule-strong); flex: none;
}
.wiz__progress li[data-state="active"] { color: var(--color-ink); }
.wiz__progress li[data-state="active"]::before { background: var(--color-focus); }
.wiz__progress li[data-state="done"]::before { background: var(--color-ok); }

.wiz__step[hidden] { display: none; }

.choices { list-style: none; display: grid; gap: var(--space-sm); }
@media (min-width: 40rem) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice {
  width: 100%; text-align: start; font: inherit; cursor: pointer;
  background: var(--card-bg); border: var(--rule-hair); border-radius: var(--radius-md);
  padding: var(--space-md); min-height: 44px; color: var(--color-ink);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.choice:hover { border-color: var(--color-ink); }
.choice[aria-pressed="true"] { border-color: var(--color-focus); border-width: 2px; }
.choice b { display: block; font-family: var(--font-display); font-weight: 700; }
.choice span { font-size: var(--text-sm); color: var(--color-muted); }

.picker { display: grid; gap: var(--space-xl); }
.picker__group h3 { font-size: var(--text-md); font-weight: 700; padding-bottom: var(--space-xs); border-bottom: var(--rule-firm); }
.picker__list { list-style: none; }
.picker__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair); padding-block: var(--space-sm);
}
.picker__row > span:first-child { flex: 1 1 14rem; min-width: 0; }

.stepper { display: flex; align-items: center; gap: var(--space-xs); margin-inline-start: auto; }
.stepper button {
  width: 44px; height: 44px; font: inherit; font-size: var(--text-md); font-weight: 700;
  background: none; border: var(--rule-hair); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--color-ink);
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.stepper button:hover { background: var(--color-ink); color: var(--color-ink-tinta); }
.stepper output { min-width: 2.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }

.field { display: grid; gap: var(--space-2xs); max-width: 24rem; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input {
  font: inherit; padding: var(--space-sm) var(--space-md); min-height: 44px;
  border: var(--rule-hair); border-radius: var(--radius-sm);
  background: var(--color-paper-2); color: var(--color-ink);
}
.field input:hover { border-color: var(--color-rule-strong); }

.summary { list-style: none; }
.summary li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  border-bottom: var(--rule-hair); padding-block: var(--space-sm);
}
.summary__qty { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.summary__empty { color: var(--color-muted); }

.wiz__nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; }

/* Barra fija de envío en móvil (C4) */
@media (max-width: 59.99rem) {
  .wiz__send--sticky {
    position: sticky; bottom: 0; z-index: var(--z-raised);
    background: var(--color-paper); border-top: var(--rule-firm);
    padding-block: var(--space-sm);
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .wiz__send--sticky .btn { width: 100%; }
}

/* ──────────── Blog ──────────── */
.posts { list-style: none; display: grid; gap: 0; }
.posts > li { border-top: var(--rule-hair); padding-block: var(--space-lg); }
.posts > li:last-child { border-bottom: var(--rule-hair); }
@media (min-width: 60rem) {
  .posts > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: var(--space-xl); align-items: baseline; }
}
.post__title { font-size: var(--text-md); font-weight: 700; }
.post__meta { font-size: var(--text-sm); color: var(--color-muted); }

/* Artículo del blog */
.post { max-width: 760px; margin: 0 auto; }
.post__hero { border-radius: 16px; overflow: hidden; margin: 0 0 2rem; }
.post__hero img { width: 100%; height: auto; display: block; }
.post__body { font-size: 1.05rem; line-height: 1.75; }
.post__body p { margin: 0 0 1.25rem; }
.post__body h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.post__body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.post__body ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.post__body li { margin: .4rem 0; }
.post__figure { margin: 1.5rem 0; }
.post__figure img { width: 100%; height: auto; border-radius: 12px; }
.post__figure figcaption { font-size: .85rem; color: var(--color-muted); margin-top: .5rem; text-align: center; }
.post__cta { margin-top: 2.5rem; }

/* ──────────── Cierre / CTA final ──────────── */
.close__title { font-size: var(--text-xl); font-weight: 700; max-width: 22ch; }

/* ──────────── Ft4 · Colofón denso ──────────── */
.foot { background: var(--surface-inv); color: var(--color-on-dark-mute); padding-block: var(--space-2xl) var(--space-xl); }
.foot a { color: var(--color-on-dark); }
.foot a:hover { text-decoration-color: var(--color-focus-dark); }
.foot__mark { color: var(--color-on-dark); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; }
.foot__colophon {
  margin-top: var(--space-lg); max-width: 78ch;
  font-size: var(--text-sm); line-height: 1.75;
}
.foot__colophon b { color: var(--color-on-dark); font-weight: 600; }
.foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); font-size: var(--text-sm); }
.foot__links a { white-space: nowrap; }
.foot__legal { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid oklch(45% 0.03 235); font-size: var(--text-xs); }

/* ──────────── WhatsApp flotante (solo móvil) ──────────── */
.wa-float {
  position: fixed; right: var(--gutter); z-index: var(--z-dropdown);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--color-ink); color: var(--color-on-dark);
  text-decoration: none; font-weight: 600; font-size: var(--text-sm); white-space: nowrap;
  padding: var(--space-sm) var(--space-md); min-height: 48px;
  border-radius: 999px; box-shadow: 0 1px 2px oklch(20% 0.01 235 / 0.25);
}
@media (min-width: 60rem) { .wa-float { display: none; } }

/* ──────────── Revelado (una sola orquestación) ──────────── */
/* El contenido nunca se oculta si no hay JS: sólo se esconde cuando el
   navegador puede ejecutar el observer que lo vuelve a mostrar. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(10px); }
}
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition-duration: 150ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 150ms !important; }
}

/* Botones sobre superficie navy */
.btn--invert { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.btn--invert:hover { background: var(--color-paper-2); border-color: var(--color-paper-2); }
.btn--ghost-invert { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark); }
.btn--ghost-invert:hover { background: var(--color-on-dark); color: var(--color-ink); }

/* Utilidades de ritmo */
.stack-xl { margin-top: var(--space-xl); }
.stack-lg { margin-top: var(--space-lg); }
.stack-2xl { margin-top: var(--space-2xl); }
.fields { display: grid; gap: var(--space-lg); }
.map { border: 0; border-radius: var(--radius-md); display: block; }

/* Titular de 56 caracteres: regla de hallmark — 51–90 chars baja un escalón. */
.hero__title--long { font-size: var(--text-display-s); max-width: 18ch; }

/* ═══════════════ v3 · patrón de marca, fotos reales, bloque de color ═══════════════ */

/* ──────────── Patrón de marca (separador / borde) ──────────── */
.patron {
  height: 48px;
  background-image: url("../img/patron.svg");
  background-repeat: repeat;
  background-size: auto 100%;
}
@media (max-width: 39.99rem) { .patron { height: 36px; } }

/* Variante monocroma para fondos oscuros: el mismo SVG usado como máscara. */
.patron--claro {
  background-image: none;
  background-color: var(--color-on-dark);
  -webkit-mask: url("../img/patron.svg") repeat;
  mask: url("../img/patron.svg") repeat;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  opacity: 0.55;
}
/* Textura de fondo, sólo detrás de bloques de color pleno. Nunca bajo texto largo. */
.patron-bg { position: relative; }
.patron-bg > * { position: relative; z-index: 1; }
.patron-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.14;
  background-color: var(--color-on-dark);
  -webkit-mask: url("../img/patron.svg") repeat;
  mask: url("../img/patron.svg") repeat;
}

/* ──────────── Logotipo real del manual de marca ──────────── */
.wordmark__img { flex: none; height: 2.6em; width: auto; }
@media (max-width: 39.99rem) { .wordmark__img { height: 2.2em; } }
.foot__logo { height: 56px; width: auto; margin-bottom: var(--space-md); }

/* ──────────── Inicio v3 · carruseles primero, titular debajo ──────────── */
.hero-carousels { display: flex; flex-direction: column; gap: var(--space-lg); }
.hero-carousels > .marquee--left  { order: 1; }
.hero-carousels > .marquee--right { order: 2; }
.hero-carousels > .hero__head     { order: 3; }
.hero__head { padding-block: var(--space-xl) var(--space-2xl); }

/* ──────────── Bloque de color pleno (franja destacada) ──────────── */
.colorblock { background: var(--surface-inv); color: var(--color-on-dark); padding-block: var(--space-3xl); }
.colorblock--magenta { background: var(--color-accent-deep); }
.colorblock--azul { background: var(--color-focus); }
.colorblock__title {
  font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 800;
  line-height: 1.0; max-width: 17ch;
}
.colorblock__lede { margin-top: var(--space-lg); font-size: var(--text-md); max-width: 46ch; }

/* ──────────── Fotos reales dentro de las piezas de marquesina ──────────── */
.tile { background: var(--foto-bg); border-color: transparent; padding: 0; }
.tile--pieza { aspect-ratio: 4 / 5; }
.tile__cap {
  display: block; padding: var(--space-xs) var(--space-sm) var(--space-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--tinta-sobre-foto);
  font-family: var(--font-display); line-height: 1.25;
}
.marquee__item a:hover .tile__cap { color: var(--acento-sobre-foto); }
.marquee__item figure { margin: 0; }

/* ──────────── Rejilla de producto del catálogo ──────────── */
.grid-prod { list-style: none; display: grid; gap: var(--space-lg); }
@media (min-width: 30rem) { .grid-prod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .grid-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .grid-prod { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prod { display: grid; gap: var(--space-xs); }
.prod img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-md); background: var(--foto-bg);
}
.prod figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); }

/* ──────────── Galería con fotos reales ──────────── */
.gal img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-md); background: var(--foto-bg);
}
.gal figure a { display: block; }
.gal > li[hidden] { display: none; }
.gal__empty { grid-column: 1 / -1; }

/* El catálogo muestra fotografías: cada categoría ocupa el ancho completo. */
.cats { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
.cat__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.prod figcaption { text-wrap: balance; }

/* ═══════════ v4 · La marca a todo color ═══════════════════════════════════
 * El Manual de Marca no guarda las cuatro cromáticas para adornos: en pendones,
 * posts y tarjetas la marca pinta el campo entero de magenta o azul y encima
 * pone tarjetas blancas con sombra dura. Esta sección lleva ese sistema a la web.
 *
 * Regla única de legibilidad: sobre campo de color sólo va titular grande en
 * blanco; el texto corrido siempre dentro de una tarjeta blanca (.card-hard).
 * ════════════════════════════════════════════════════════════════════════ */

/* ──────────── Barra cromática (los cuatro colores del isotipo) ──────────── */
.rule--marca {
  height: 6px; border: 0; margin: 0; flex: none;
  background: linear-gradient(90deg,
    var(--brand-amarillo) 0 25%, var(--brand-azul) 25% 50%,
    var(--brand-verde) 50% 75%, var(--brand-magenta) 75% 100%);
}

/* ──────────── Campos de color ──────────── */
.band--magenta { background: var(--brand-magenta); color: #fff; }
.band--azul    { background: var(--brand-azul);    color: var(--brand-navy); }
.band--verde   { background: var(--brand-verde);   color: var(--brand-navy); }

.colorblock--magenta { background: var(--brand-magenta); color: #fff; }
.colorblock--azul    { background: var(--brand-azul);    color: var(--brand-navy); }

/* La trama de línea amarilla es la del pendón y los posts: sobre magenta.
 * Se compone con un degradado para que florezca a la derecha y deje limpio el
 * lado del titular — igual que en el post y el pendón, donde la trama rodea al
 * texto en vez de cruzarlo. */
.patron-bg::before {
  opacity: 1;
  background-color: var(--brand-amarillo);
  -webkit-mask-image: url("../img/patron-linea.svg"),
                      linear-gradient(90deg, transparent 0 34%, #000 70%);
  mask-image: url("../img/patron-linea.svg"),
              linear-gradient(90deg, transparent 0 34%, #000 70%);
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-size: 160px 160px, 100% 100%;
  mask-size: 160px 160px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Navegadores sin mask-composite: la trama entera al 45 %, nunca tapa el texto. */
@supports not (mask-composite: intersect) {
  .patron-bg::before { opacity: 0.45; }
}
.band--dark.patron-bg::before,
.colorblock:not(.colorblock--magenta):not(.colorblock--azul).patron-bg::before {
  background-color: var(--brand-azul); opacity: 0.35;
}
@media (max-width: 39.99rem) {
  .patron-bg::before { -webkit-mask-size: 110px 110px; mask-size: 110px 110px; }
}

/* Titular grande directo sobre el campo: blanco/magenta 3.83:1, AA para texto grande. */
.band--magenta .close__title,
.colorblock--magenta .colorblock__title { color: #fff; }
.band--magenta .close__title {
  font-size: clamp(2rem, 3.6vw + 1rem, 3.25rem); font-weight: 800; max-width: 16ch;
}

/* ──────────── Tarjeta blanca con sombra dura (recurso del manual) ──────────── */
.card-hard {
  position: relative; z-index: var(--z-base);
  background: var(--card-bg); color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: 10px 10px 0 var(--card-sombra);
  max-width: 54rem;
}
@media (max-width: 39.99rem) {
  .card-hard { padding: var(--space-lg); box-shadow: 6px 6px 0 var(--card-sombra); }
}
.card-hard > :last-child { margin-bottom: 0; }
.close__lede { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-md); }

/* ──────────── Resaltador tipográfico ──────────── */
.mark {
  padding: 0 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mark--amarillo { background: var(--brand-amarillo); color: var(--brand-navy); }
.mark--azul     { background: var(--brand-azul);     color: var(--brand-navy); }
.mark--magenta  { background: var(--brand-magenta);  color: #fff; }

/* ──────────── Universos: cada ocasión con su color ──────────── */
.uni {
  border: var(--rule-hair); border-top: 6px solid var(--uni, var(--brand-magenta));
  border-radius: var(--radius-md); background: var(--card-bg);
}
.universos > li:nth-child(4n+1) .uni { --uni: var(--brand-magenta); }
.universos > li:nth-child(4n+2) .uni { --uni: var(--brand-azul); }
.universos > li:nth-child(4n+3) .uni { --uni: var(--brand-verde); }
.universos > li:nth-child(4n+4) .uni { --uni: var(--brand-amarillo); }
@media (hover: hover) and (pointer: fine) {
  .uni:hover { border-color: var(--uni); border-top-color: var(--uni); transform: translateY(-2px); }
}

/* ──────────── Pasos: numeral dentro de una ficha de color ──────────── */
.steps > li::before {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm);
  background: var(--paso, var(--brand-amarillo)); color: var(--brand-navy);
  font-size: var(--text-md);
}
.steps > li:nth-child(4n+1) { --paso: var(--brand-amarillo); }
.steps > li:nth-child(4n+2) { --paso: var(--brand-azul); }
.steps > li:nth-child(4n+3) { --paso: var(--brand-verde); }
.steps > li:nth-child(4n+4) { --paso: var(--brand-magenta); }
.steps > li:nth-child(4n+4)::before { color: #fff; }

/* ──────────── Kicker con marcador de color ──────────── */
.shead__kicker { display: flex; align-items: center; gap: var(--space-xs); }
.shead__kicker::before {
  content: ""; width: 0.7rem; height: 0.7rem; flex: none;
  background: var(--brand-magenta);
}

/* ──────────── Botón azul (navy sobre azul = 5.41:1 AA) ──────────── */
.btn--azul { background: var(--brand-azul); color: var(--brand-navy); border-color: var(--brand-azul); }
.btn--azul:hover { background: var(--color-focus); color: #fff; border-color: var(--color-focus); }

/* ──────────── Galería: filtro activo en azul de marca ──────────── */
.filter[aria-pressed="true"] {
  background: var(--brand-azul); color: var(--brand-navy); border-color: var(--brand-azul);
}

/* ──────────── WhatsApp flotante en azul de marca ──────────── */
.wa-float { background: var(--brand-azul); color: var(--brand-navy); }

/* ──────────── Separador de patrón sobre campo magenta ──────────── */
.patron--magenta {
  background-image: none;
  background-color: var(--brand-magenta);
  position: relative;
}
.patron--magenta::before {
  content: ""; position: absolute; inset: 0;
  background-color: var(--brand-amarillo);
  -webkit-mask: url("../img/patron-linea.svg") repeat; mask: url("../img/patron-linea.svg") repeat;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
}

/* ──────────── Pie: cinta cromática arriba ──────────── */
.foot__logo { height: 48px; width: auto; margin-bottom: var(--space-md); }

/* ──────────── Logotipo oficial ──────────── */
.wordmark__img { flex: none; height: 2.9em; width: auto; }
@media (max-width: 39.99rem) { .wordmark__img { height: 2.4em; } }
.wordmark { gap: var(--space-md); }
.wordmark__sub { color: var(--color-muted); }
@media (max-width: 29.99rem) { .wordmark__sub { display: none; } }

/* ──────────── Riel de categorías del paso 2 ────────────
 * 117 referencias en 8 grupos: se muestra una categoría a la vez y el riel
 * permite saltar a cualquiera sin perder lo ya seleccionado. */
.catrail {
  display: grid; gap: var(--space-sm);
  border-bottom: var(--rule-firm); padding-bottom: var(--space-md);
  scroll-margin-top: 7rem;   /* el masthead es sticky */
}
.catrail__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.catrail__chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  background: var(--color-paper); color: var(--color-ink); cursor: pointer;
  border: var(--rule-hair); border-radius: 999px;
  padding: var(--space-xs) var(--space-md); min-height: 44px;
  transition: background var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.catrail__chip:hover { border-color: var(--color-ink); }
.catrail__chip[data-filled="yes"] { border-color: var(--brand-verde); border-width: 2px; }
.catrail__chip[aria-pressed="true"] {
  background: var(--brand-azul); color: var(--brand-navy); border-color: var(--brand-azul);
}
.catrail__n[hidden] { display: none; }   /* display: inline-grid pisa al atributo hidden */
.catrail__n {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem;
  padding-inline: 0.35rem; border-radius: 999px;
  background: var(--brand-verde); color: var(--brand-navy);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.picker__group[hidden] { display: none; }
.picker { gap: 0; }

/* La navegación del paso 2 nombra la categoría siguiente, no un genérico. */
.wiz__nav .btn { flex: 1 1 14rem; }
@media (min-width: 40rem) { .wiz__nav .btn { flex: 0 1 auto; } }

/* ═══════════ v5 · Un color por módulo + cabecera de campo ═════════════════
 * El manual entrega cuatro cromáticas. Reparto:
 *   magenta   → los dos momentos de marca: la cabecera de Inicio y el cierre
 *               de todas las páginas (texto blanco grande + tarjeta blanca).
 *   azul / verde / amarillo → los módulos. Sobre los tres, el navy cumple AA a
 *               cualquier tamaño (5.41 / 7.10 / 8.68 : 1), así que la cabecera
 *               de módulo lleva el texto directo, sin tarjeta.
 * Magenta se reserva a los dos momentos porque el blanco sobre magenta (3.83:1)
 * sólo alcanza AA en texto grande — un lede de 18 px ahí no sería legible.
 * ════════════════════════════════════════════════════════════════════════ */

:root { --modulo: var(--brand-magenta); --modulo-tinta: #fff; --modulo-linea: var(--modulo); }
/* var() se resuelve en el elemento donde se declara: si --modulo-linea se quedara sólo
   en :root, heredaría el magenta de ahí y no el color del módulo del <body>. */
[data-modulo] { --modulo-linea: var(--modulo); }

[data-modulo="catalogo"], [data-modulo="blog"],
[data-modulo="baby-shower"], [data-modulo="fiesta-infantil"],
[data-modulo="eventos-corporativos"] {
  --modulo: var(--brand-azul); --modulo-tinta: var(--brand-navy);
}
[data-modulo="galeria"], [data-modulo="nosotros"],
[data-modulo="primera-comunion"], [data-modulo="picnic"] {
  --modulo: var(--brand-verde); --modulo-tinta: var(--brand-navy);
}
[data-modulo="ocasiones"], [data-modulo="arma-tu-montaje"],
[data-modulo="preguntas-frecuentes"], [data-modulo="contacto"],
[data-modulo="quinceanera"], [data-modulo="boda"], [data-modulo="404"] {
  --modulo: var(--brand-amarillo); --modulo-tinta: var(--brand-navy);
  /* el amarillo sobre crema da 1.2:1: el subrayado de navegación va en navy */
  --modulo-linea: var(--brand-navy);
}

/* ──────────── Cabecera de módulo ──────────── */
.pagehead {
  position: relative; overflow: clip;
  background: var(--modulo); color: var(--modulo-tinta);
  padding-block: var(--space-2xl);
}
.pagehead > * { position: relative; z-index: var(--z-base); }
.pagehead.patron-bg::before { background-color: var(--brand-navy); opacity: 0.15; }
@supports not (mask-composite: intersect) {
  .pagehead.patron-bg::before { opacity: 0.10; }
}
.pagehead__title {
  font-size: var(--text-display-s); font-weight: 800;
  max-width: 22ch; text-wrap: balance;
}
.pagehead__lede {
  margin-top: var(--space-lg); margin-bottom: 0;
  font-size: var(--text-md); line-height: 1.55; max-width: 56ch;
}
.pagehead .shead__kicker { color: inherit; margin-bottom: var(--space-md); }
.pagehead .shead__kicker::before { background: currentColor; }
.pagehead .hero__cta { margin-top: var(--space-xl); }
/* La cabecera de módulo es campo claro en los DOS temas: sus botones no
   siguen la tinta del tema, o en oscuro saldría crema sobre amarillo (1.3:1). */
.pagehead .btn--primary {
  background: var(--brand-navy); color: var(--brand-crema); border-color: var(--brand-navy);
}
.pagehead .btn--primary:hover {
  background: oklch(23.0% 0.045 235); border-color: oklch(23.0% 0.045 235);
}
.pagehead .btn--ghost { border-color: var(--brand-navy); color: var(--brand-navy); }
.pagehead .btn--ghost:hover { background: var(--brand-navy); color: var(--color-on-dark); }
.pagehead .btn--text { color: var(--brand-navy); border-bottom-color: var(--brand-navy); }
.pagehead .btn--azul { background: var(--brand-navy); color: var(--color-on-dark); border-color: var(--brand-navy); }

/* La columna de prueba queda sola cuando el titular sube a la cabecera. */
.hero__grid--solo { grid-template-columns: minmax(0, 1fr) !important; }

/* La página actual se subraya con el color de su módulo. */
.nav__link[aria-current="page"] { border-bottom-width: 3px; border-bottom-color: var(--modulo-linea); }

/* ──────────── Cabecera de Inicio: campo magenta a sangre ──────────── */
.hero--campo {
  position: relative; overflow: clip;
  background: var(--brand-magenta); color: #fff;
  padding-block: 0 var(--space-3xl);
}
.hero--campo > * { position: relative; z-index: var(--z-base); }
.hero--campo .hero__title { color: #fff; }
.hero--campo .hero__head { padding-block: var(--space-3xl) 0; }
.hero--campo .hero__grid { gap: var(--space-lg); align-items: start; }
@media (min-width: 60rem) {
  .hero--campo .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); }
}
.hero--campo .card-hard { max-width: none; padding: var(--space-lg) var(--space-xl); }
.hero--campo .proof { border-top: 0; }
.hero--campo .proof__cap { padding-top: 0; }
.hero--campo .marquee { padding-block: var(--space-sm); }
.hero--campo .marquee--left { padding-top: var(--space-2xl); }

/* La ficha entera —foto y pie— es la tarjeta crema: si el pie quedara sobre el
   magenta, sería texto de 13 px a 3.65:1 y no cumpliría AA. */
.marquee__item figure {
  background: var(--foto-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hero--campo .marquee__item figure { box-shadow: 0 2px 0 oklch(30% 0.10 344 / 0.35); }

/* ═══════════ v6 · Barra fija del paso 2 ═══════════════════════════════════
 * Decoración tiene 23 piezas y Menaje 27: bajar hasta el final de la lista sólo
 * para pasar a la siguiente categoría era demasiado trabajo. La botonera del
 * paso 2 se muda a una barra anclada al pie, visible mientras se eligen piezas.
 * ════════════════════════════════════════════════════════════════════════ */
.wizbar {
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  background: var(--card-bg);
  box-shadow: 0 -8px 24px oklch(20% 0.02 235 / 0.14);
  padding-block: var(--space-sm);
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
}
.wizbar::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--brand-amarillo) 0 25%, var(--brand-azul) 25% 50%,
    var(--brand-verde) 50% 75%, var(--brand-magenta) 75% 100%);
}
body.wiz-piezas .wizbar { display: block; }
/* Que la última fila de la lista no quede debajo de la barra. */
body.wiz-piezas { padding-bottom: calc(var(--wizbar-h, 5.5rem) + var(--space-md)); }
/* Una sola acción flotante a la vez. */
body.wiz-piezas .wa-float { display: none; }

.wizbar__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-md); padding-top: var(--space-2xs);
}
.wizbar__pos {
  margin: 0; flex: 1 1 12rem; min-width: 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-ink);
}
.wizbar__acciones { display: flex; gap: var(--space-sm); margin-inline-start: auto; }

@media (max-width: 39.99rem) {
  .wizbar__pos { flex: 1 1 100%; font-size: var(--text-xs); }
  .wizbar__acciones { width: 100%; gap: var(--space-xs); }
  .wizbar__acciones .btn { white-space: normal; line-height: 1.2; padding-inline: var(--space-sm); }
  .wizbar__acciones [data-go="-1"] { flex: 0 1 auto; }
  .wizbar__acciones [data-go="1"]  { flex: 1 1 auto; }
}

/* ═══════════ v7 · Interruptor de tema ═════════════════════════════════════
 * Tres elementos cambian de pieza, no sólo de color: el logotipo (el manual
 * trae versión POSITIVO para claro y NEGATIVO para oscuro), el icono y el
 * rótulo del botón. Todo por CSS, sin JS: así el botón ya es correcto en el
 * primer pintado y su nombre accesible sale del texto visible.
 *
 * El patrón `:root:not([data-tema="claro"])` dentro del @media deja que la
 * elección manual gane sobre la preferencia del sistema.
 * ════════════════════════════════════════════════════════════════════════ */

.mast__acciones { display: flex; align-items: center; gap: var(--space-sm); }

.tema {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  background: none; border: var(--rule-hair); border-radius: var(--radius-sm);
  color: var(--color-ink); padding: var(--space-xs) var(--space-md);
  min-height: 44px; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.tema:hover { background: var(--color-ink); color: var(--color-ink-tinta); border-color: var(--color-ink); }
.tema__ico { flex: none; }

/* Claro: se ofrece la luna. Oscuro: se ofrece el sol. */
.tema__sol, .tema__rayos, .wordmark__img--crema, .tema__txt--claro { display: none; }
:root[data-tema="oscuro"] .tema__luna,
:root[data-tema="oscuro"] .wordmark__img--tinta,
:root[data-tema="oscuro"] .tema__txt--oscuro { display: none; }
:root[data-tema="oscuro"] .tema__sol,
:root[data-tema="oscuro"] .tema__rayos { display: block; }
:root[data-tema="oscuro"] .wordmark__img--crema { display: block; }
:root[data-tema="oscuro"] .tema__txt--claro { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema__luna,
  :root:not([data-tema="claro"]) .wordmark__img--tinta,
  :root:not([data-tema="claro"]) .tema__txt--oscuro { display: none; }
  :root:not([data-tema="claro"]) .tema__sol,
  :root:not([data-tema="claro"]) .tema__rayos { display: block; }
  :root:not([data-tema="claro"]) .wordmark__img--crema { display: block; }
  :root:not([data-tema="claro"]) .tema__txt--claro { display: inline; }
}

/* En pantallas estrechas queda sólo el icono, pero el rótulo sigue en el
   árbol de accesibilidad: es el nombre del botón. */
@media (max-width: 29.99rem) {
  .tema__txt--oscuro, :root[data-tema="oscuro"] .tema__txt--claro,
  :root:not([data-tema="claro"]) .tema__txt--claro {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tema { padding-inline: var(--space-sm); }
}

/* El mapa de Google se sirve en claro: un borde lo asienta sobre el fondo oscuro. */
:root[data-tema="oscuro"] .map { border: 1px solid var(--color-rule); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .map { border: 1px solid var(--color-rule); }
}

/* Sección de reseñas ------------------------------------------------------
   Usa variables de color del sistema para adaptarse a modo oscuro/claro.
   Mientras no haya 6 reseñas reales, la sección se deja con "is-pending"
   (oculta). Al llegar las reseñas, se rellenan las tarjetas y se quita
   "is-pending". No se agrega AggregateRating ni Review en datos estructurados. */
.resenas { position: relative; }
.resenas.is-pending { display: none; }
.resenas__track {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.resenas__track::-webkit-scrollbar { display: none; }
.resena {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--color-paper-2);
  border: var(--rule-hair);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
@media (min-width: 40rem) {
  .resena { flex-basis: calc((100% - var(--space-lg)) / 2); }
}
@media (min-width: 64rem) {
  .resena { flex-basis: calc((100% - 2 * var(--space-lg)) / 3); }
}
.resena__stars { color: var(--brand-amarillo); font-size: 1.1rem; letter-spacing: 2px; }
.resena__text { font-size: 1rem; line-height: 1.6; }
.resena__meta { font-size: .85rem; color: var(--color-muted); margin-top: auto; }
.resena__meta b { color: var(--color-ink); }
.resena__link { font-size: .85rem; font-weight: 600; color: var(--color-ink); }
.resenas__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: var(--rule-hair);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.resenas__arrow--prev { left: -8px; }
.resenas__arrow--next { right: -8px; }
.resenas__arrow:disabled { opacity: .35; cursor: default; }
.resenas__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }

/* ════════════════ Mega-menú del catálogo (v8) ════════════════
 * Cuatro columnas: tres grupos con su color de campo + tarjeta magenta.
 * Los enlaces largos ya no se desbordan (antes nowrap + 30rem de ancho). */
@media (min-width: 60rem) {
  .nav__submenu {
    width: min(64rem, calc(100vw - 2 * var(--gutter)));
    grid-template-columns: repeat(3, minmax(0, 1fr)) 15rem;
    gap: var(--space-lg); padding: var(--space-lg);
    margin-top: var(--space-xs);
    border-radius: var(--radius-md);
    box-shadow: 10px 10px 0 var(--card-sombra);
  }
  /* Puente invisible: el cursor no "cae" en el hueco entre botón y panel. */
  .nav__submenu::before { content: ""; position: absolute; inset: calc(-1 * var(--space-xs) - 2px) 0 auto; height: var(--space-xs); }
}
.nav__submenu__group { align-content: start; gap: 2px; --grupo: var(--brand-azul); }
.nav__submenu__group:nth-child(2) { --grupo: var(--brand-verde); }
.nav__submenu__group:nth-child(3) { --grupo: var(--brand-amarillo); }
.nav__submenu__title {
  justify-self: start; border: 0; margin-bottom: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm); border-radius: 999px;
  background: var(--grupo); color: var(--brand-navy);  /* navy sobre campo: ≥5.4:1 */
}
.nav__link--sub {
  white-space: normal; position: relative;
  padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm); border-left: 3px solid transparent;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.nav__link--sub::after {
  content: "→"; position: absolute; right: var(--space-sm); top: 50%;
  opacity: 0; transform: translate(-6px, -50%);
  transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.nav__link--sub:hover, .nav__link--sub:focus-visible {
  color: var(--color-ink); border-left-color: var(--grupo);
  background: color-mix(in oklch, var(--grupo) 18%, transparent);
}
.nav__link--sub:hover::after, .nav__link--sub:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.nav__link--sub[aria-current="page"] { font-weight: 700; border-left-color: var(--grupo); }

.nav__submenu__promo { display: grid; align-content: start; gap: var(--space-sm); }
.promo {
  display: grid; align-content: space-between; gap: var(--space-xl);
  min-height: 11rem; padding: var(--space-lg);
  border-radius: var(--radius-md); text-decoration: none;
  background: var(--brand-magenta) linear-gradient(135deg, transparent 55%, var(--brand-amarillo) 55% 60%, transparent 62%);
  transition: transform var(--dur-micro) var(--ease-out);
}
.promo:hover { transform: translateY(-2px); }
.promo__title {  /* blanco/magenta 3.83:1: sólo en titular grande */
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  line-height: 1.15; color: #fff;
}
.promo__cta {
  justify-self: start; padding: var(--space-xs) var(--space-md); border-radius: 999px;
  background: var(--brand-crema); color: var(--brand-navy);
  font-weight: 700; font-size: var(--text-sm);
}
.promo__all { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); text-underline-offset: 3px; }
.promo__all:hover { color: var(--color-accent-deep); }

@media (max-width: 59.99rem) {
  .nav__submenu { gap: var(--space-md); }
  .promo { display: none; }
  .nav__submenu__promo { padding-inline-start: var(--space-sm); }
}

/* ════════════════ Páginas de sección: tarjetas numeradas (v8) ════════════════ */
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: var(--space-lg); align-items: start; }
.tipo {
  display: grid; gap: var(--space-sm);
  background: var(--card-bg); color: var(--color-ink);
  border: 2px solid var(--color-ink); border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: 6px 6px 0 var(--modulo);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.tipo:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--modulo); }
.tipo__n {
  justify-self: start; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-sm); letter-spacing: 0.08em;
  padding: var(--space-3xs) var(--space-sm); border-radius: 999px;
  background: var(--modulo); color: var(--modulo-tinta);
}
.tipo__title { font-size: var(--text-lg); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.tipo__list { list-style: none; display: grid; }
.tipo__list li { padding-block: var(--space-sm); border-top: var(--rule-hair); color: var(--color-muted); line-height: 1.5; }
.tipo__list li:first-child { border-top: 0; padding-top: 0; }
.tipo__list b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-3xs); }
.tipo__list b::first-letter { text-transform: uppercase; }
.tipos__cierre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-lg); margin-top: var(--space-2xl);
  padding-top: var(--space-lg); border-top: var(--rule-firm);
}
.tipos__cierre .note { margin: 0; flex: 1 1 22rem; max-width: 60ch; }
.tipos__cierre .btn-row { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .tipo, .promo, .nav__link--sub::after { transition: none; }
  .tipo:hover, .promo:hover { transform: none; }
}

/* ════════════════ v9 · Cabecera en celular ════════════════
 * En pantallas angostas el lema se apretaba en tres líneas junto al logo. */
@media (max-width: 47.99rem) {
  .wordmark__sub { display: none; }
  .util__item + .util__item { display: none; }
}
@media (max-width: 29.99rem) {
  .util__item { display: none; }
  /* Sólo el ícono a la vista; el texto sigue ahí para lectores de pantalla. */
  .tema__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tema { padding-inline: var(--space-sm); }
}
/* Títulos que reciben foco por JS al cambiar de paso: sin recuadro de foco. */
[tabindex="-1"]:focus { outline: none; }

/* ════════════════ v9 · Arma tu montaje ════════════════ */
.wiz__progress {
  counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm); border: 0; padding: 0;
}
.wiz__progress li {
  counter-increment: paso; display: grid; gap: var(--space-xs); align-content: start;
  white-space: normal; font-size: var(--text-sm); line-height: 1.3;
  padding-top: var(--space-sm); border-top: 6px solid var(--color-rule);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.wiz__progress li::before {
  content: counter(paso); width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xs); background: var(--color-rule); color: var(--color-ink);
}
.wiz__progress li[data-state="active"] { border-top-color: var(--brand-amarillo); color: var(--color-ink); }
.wiz__progress li[data-state="active"]::before { background: var(--brand-amarillo); color: var(--brand-navy); }
.wiz__progress li[data-state="done"] { border-top-color: var(--brand-verde); }
.wiz__progress li[data-state="done"]::before { content: "✓"; background: var(--brand-verde); color: var(--brand-navy); }
@media (min-width: 40rem) {
  .wiz__progress li { grid-auto-flow: column; justify-content: start; align-items: center; }
}

.wiz__step .dip__title { font-size: clamp(1.6rem, 3vw + 0.8rem, 2.4rem); font-weight: 800; line-height: 1.1; }
.paso {
  display: block; margin-bottom: var(--space-xs);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted);
}
.wiz__step .dip__aside { margin-top: var(--space-xs); max-width: 60ch; }

/* Ocasiones: tarjetas con foto. Dos columnas desde el celular. */
.choices { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr)) !important; gap: var(--space-md); }
@media (min-width: 60rem) { .choices { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--space-lg); } }
.choice {
  height: 100%; padding: 0; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr;
  border: 2px solid var(--color-rule); border-radius: var(--radius-md);
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.choice__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; background: var(--foto-bg); }
.choice b { padding: var(--space-sm) var(--space-md) 0; font-size: var(--text-md); line-height: 1.2; }
.choice span { padding: var(--space-2xs) var(--space-md) var(--space-md); line-height: 1.45; }
.choice:hover { border-color: var(--color-ink); transform: translateY(-3px); box-shadow: 6px 6px 0 var(--brand-amarillo); }
.choice[aria-pressed="true"] { border-color: var(--color-ink); border-width: 2px; box-shadow: 6px 6px 0 var(--brand-verde); }
@media (max-width: 29.99rem) {
  .choice b { font-size: var(--text-base); padding-inline: var(--space-sm); }
  .choice span { font-size: var(--text-xs); padding-inline: var(--space-sm); }
}

/* Piezas: la fila elegida se marca; botones redondos de 44 px para el dedo. */
.picker__group h3 { font-size: var(--text-lg); padding-top: var(--space-md); }
.picker__row { padding: var(--space-sm); border-radius: var(--radius-sm); flex-wrap: nowrap;
  transition: background var(--dur-micro) var(--ease-out); }
.picker__row > span:first-child { flex: 1 1 auto; line-height: 1.35; }
.picker__row:has(.stepper[data-filled="yes"]) { background: color-mix(in oklch, var(--brand-verde) 16%, transparent); }
.picker__row:has(.stepper[data-filled="yes"]) > span:first-child { font-weight: 700; }
.stepper { flex: none; gap: var(--space-2xs); }
.stepper button { border-radius: 50%; border: 2px solid var(--color-rule-strong); line-height: 1; }
.stepper button[data-step-by="1"] { background: var(--color-ink); color: var(--color-ink-tinta); border-color: var(--color-ink); }
.stepper button[data-step-by="1"]:hover { background: var(--brand-verde); color: var(--brand-navy); border-color: var(--brand-verde); }
.stepper[data-filled="no"] output { color: var(--color-neutral); }
.stepper output { min-width: 2rem; font-size: var(--text-md); }

/* Las categorías van en una sola fila deslizable en celular. */
@media (max-width: 47.99rem) {
  .catrail__list {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: var(--space-2xs);
    scrollbar-width: none;
  }
  .catrail__list::-webkit-scrollbar { display: none; }
  .catrail__list li { scroll-snap-align: start; flex: none; }
  .wizbar__pos { flex-basis: 100%; font-size: var(--text-xs); }
  .wizbar__acciones { width: 100%; }
  .wizbar__acciones .btn { flex: 1 1 0; padding-inline: var(--space-sm); }
}

/* Resumen */
.fields { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); max-width: 44rem; }
.field { max-width: none; }
.summary {
  background: var(--card-bg); border: 2px solid var(--color-ink); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg); box-shadow: 6px 6px 0 var(--brand-amarillo); max-width: 44rem;
}
.summary li:last-child { border-bottom: 0; }

/* ════════════════ v9 · Blog ════════════════ */
.blog__h {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: var(--space-md);
}
.destacado {
  display: grid; text-decoration: none; color: var(--color-ink); overflow: hidden;
  background: var(--card-bg); border: 2px solid var(--color-ink); border-radius: var(--radius-md);
  box-shadow: 8px 8px 0 var(--modulo);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.destacado:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--modulo); }
.destacado__img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.destacado__txt { display: grid; gap: var(--space-sm); align-content: center; padding: var(--space-lg); }
.destacado__meta { font-size: var(--text-sm); color: var(--color-muted); }
.destacado__titulo { font-size: clamp(1.35rem, 1.6vw + 0.9rem, 2rem); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.destacado__resumen { color: var(--color-muted); line-height: 1.55; }
.destacado__cta { font-weight: 700; color: var(--color-accent-deep); }
@media (min-width: 56rem) {
  .destacado { grid-template-columns: 1.15fr 1fr; }
  .destacado__img { aspect-ratio: auto; min-height: 22rem; }
  .destacado__txt { padding: var(--space-xl); }
}
.proximos {
  list-style: none; display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
.proximo {
  display: grid; gap: var(--space-sm); align-content: start;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-md);
}
.proximo__tema {
  justify-self: start; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--space-3xs) var(--space-sm); border-radius: 999px;
  background: var(--modulo); color: var(--modulo-tinta);
}
.proximo__titulo { font-family: var(--font-display); font-weight: 600; line-height: 1.3; }
.blog__pregunta { margin-top: var(--space-2xl); }

@media (prefers-reduced-motion: reduce) {
  .choice, .destacado { transition: none; }
  .choice:hover, .destacado:hover { transform: none; }
}
.wiz { margin-top: var(--space-xl); }
.wiz__send--sticky .btn { min-width: min(18rem, 100%); }
@media (max-width: 39.99rem) {
  .proximos { gap: 0; }
  .proximo { border: 0; border-bottom: var(--rule-hair); border-radius: 0; padding: var(--space-md) 0; gap: var(--space-xs); }
  .proximo:last-child { border-bottom: 0; }
  .destacado { box-shadow: 6px 6px 0 var(--modulo); }
}

/* La foto ES la tile (img.tile), así que `.tile img { object-fit }` no la alcanzaba
   y las fotos se deformaban para llenar el recuadro. */
img.tile { object-fit: cover; object-position: center; }

/* ════════════════ v10 · Foto flotante de cada pieza (Arma tu montaje) ════════════════ */
.pz-pop {
  position: fixed; top: 0; left: 0; z-index: var(--z-modal); margin: 0;
  width: clamp(11rem, 18vw, 15rem); aspect-ratio: 3 / 4;
  border: 2px solid var(--color-ink); border-radius: var(--radius-md); overflow: hidden;
  background: var(--foto-bg); box-shadow: 8px 8px 0 var(--brand-amarillo);
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 120ms var(--ease-out), visibility 120ms;
}
.pz-pop.is-on { opacity: 1; visibility: visible; }
.pz-pop img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: none) { .pz-pop { width: min(62vw, 16rem); } }
.picker__row[data-img] { cursor: zoom-in; }
.picker__row[data-img] .stepper { cursor: auto; }
/* En pantallas táctiles no hay hover: una marca pequeña avisa que hay foto. */
@media (hover: none) {
  .picker__row[data-img] > span:first-child::after {
    content: "Ver foto"; display: inline-block; margin-inline-start: var(--space-xs);
    font-size: var(--text-xs); font-weight: 600; color: var(--color-muted);
    border-bottom: 1px dotted currentColor; line-height: 1.2;
  }
}
@media (prefers-reduced-motion: reduce) { .pz-pop { transition: none; } }

/* ════════════════ v11 · Inicio: barra de categorías + carruseles arrastrables ════════════════ */
.catbar { background: var(--color-paper); border-bottom: var(--rule-hair); }
/* Las 16 categorías a la vista, en varias filas: sin desplazar de lado. */
.catbar__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-md); }
.catbar__link {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--color-rule-strong); border-radius: 999px; text-decoration: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.catbar__link:hover { border-color: var(--brand-amarillo); background: color-mix(in oklch, var(--brand-amarillo) 14%, transparent); }
.catbar__link[aria-current="page"] { background: var(--modulo); border-color: var(--modulo); color: var(--modulo-tinta); }
@media (max-width: 39.99rem) {
  .catbar__list { gap: 6px; padding-block: var(--space-sm); }
  .catbar__link { min-height: 32px; padding: 2px var(--space-sm); font-size: var(--text-xs); }
}

.marquee { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none; }
.marquee::-webkit-scrollbar { display: none; }
.marquee__track { animation: none !important; }
.marquee img { -webkit-user-drag: none; }
.marquee.is-arrastrando { cursor: grabbing; }

/* ════════════════ v13 · Ficha de sección: galería tipo tienda + texto del Word ════════════════ */
.ficha { display: grid; gap: var(--space-xl); align-items: start; padding-top: var(--space-xl); }
@media (min-width: 52rem) {
  .ficha { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); }
  .gpz { position: sticky; top: calc(var(--masthead-h, 9rem) + var(--space-md)); }
}
.ficha__txt { display: grid; gap: var(--space-sm); align-content: start; }
.ficha__h1 { font-size: clamp(1.75rem, 2.6vw + 0.9rem, 2.75rem); font-weight: 800; line-height: 1.08; text-wrap: balance; }
.ficha__intro { font-size: var(--text-md); line-height: 1.6; color: var(--color-muted); }
.ficha__h2 { font-size: var(--text-lg); font-weight: 700; margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair); }
.ficha__txt > p:not(.ficha__intro):not(.note) { color: var(--color-muted); line-height: 1.6; }
.ficha__lista { list-style: none; display: grid; gap: var(--space-xs); }
.ficha__lista li { position: relative; padding-left: var(--space-md); line-height: 1.6; color: var(--color-muted); }
.ficha__lista li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--modulo); }
.ficha__lista strong { color: var(--color-ink); font-weight: 700; }
.ficha .btn-row { margin-top: var(--space-md); }
.ficha .note { margin-top: var(--space-sm); }

/* Galería: foto grande que cabe en la pantalla + miniaturas (al lado en computador, debajo en celular). */
.gpz { --alto: min(calc(100svh - var(--masthead-h, 9rem) - 9rem), 46rem); display: grid; gap: var(--space-md); }
@media (min-width: 52rem) {
  .gpz { grid-template-columns: 4.75rem minmax(0, 1fr); align-items: start; }
  .gpz__thumbs { order: -1; flex-direction: column; max-height: var(--alto); overflow-y: auto; overflow-x: hidden; }
}
.gpz__main { position: relative; margin: 0; display: grid; justify-items: center; padding: 0 8px 8px 0; }
.gpz__img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: var(--alto);
  border-radius: var(--radius-md); border: 2px solid var(--color-ink); box-shadow: 8px 8px 0 var(--modulo);
  background: var(--foto-bg); touch-action: pan-y;
}
@media (max-width: 51.99rem) { .gpz { --alto: 72svh; } }
.gpz__nav {
  position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--brand-navy); background: var(--brand-crema); color: var(--brand-navy);
  font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px;
  box-shadow: 0 2px 10px oklch(0% 0 0 / .25);
}
.gpz__nav--prev { left: var(--space-sm); }
.gpz__nav--next { right: calc(var(--space-sm) + 8px); }
.gpz__nav:hover { background: var(--brand-amarillo); }
.gpz__cont {
  position: absolute; top: var(--space-sm); left: 50%; translate: -50% 0; margin: 0;
  padding: 2px var(--space-sm); border-radius: 999px; font-size: var(--text-xs); font-weight: 700;
  background: var(--brand-navy); color: var(--brand-crema); font-variant-numeric: tabular-nums;
}
.gpz__thumbs {
  position: relative; list-style: none; display: flex; gap: var(--space-xs);
  overflow-x: auto; scrollbar-width: thin; padding: 2px;
}
.gpz__thumbs li { flex: none; }
.gpz__thumb {
  display: block; width: 4.25rem; padding: 0; cursor: pointer; background: var(--foto-bg);
  border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; opacity: .65;
  transition: opacity var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.gpz__thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gpz__thumb:hover { opacity: 1; }
.gpz__thumb[aria-current="true"] { opacity: 1; border-color: var(--modulo); }
@media (max-width: 51.99rem) { .gpz__thumb { width: 3.5rem; } }

/* ════════════════ v14 · Visor ampliado de la galería (tipo tienda) ════════════════ */
.gpz__img { cursor: zoom-in; }
html:has(dialog.lb[open]) { overflow: hidden; }
.lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--space-md);
  border: 0; background: var(--brand-crema); color: var(--brand-navy);
}
.lb::backdrop { background: oklch(0% 0 0 / .6); }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-sm); }
.lb__cont { justify-self: center; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb__cerrar {
  position: absolute; top: var(--space-sm); right: var(--space-md); width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--brand-navy); background: #fff; color: var(--brand-navy); font-size: 1.75rem; line-height: 1; cursor: pointer; z-index: 2;
}
.lb__cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); min-height: 0; }
.lb__thumbs {
  list-style: none; display: grid; grid-template-columns: repeat(2, 5.5rem); gap: var(--space-sm);
  align-content: start; overflow-y: auto; padding: 2px;
}
.lb__thumb {
  display: block; width: 100%; padding: 0; background: #fff; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden;
}
.lb__thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.lb__thumb[aria-current="true"] { border-color: var(--brand-azul); box-shadow: 0 0 0 2px var(--brand-azul); }
.lb__escena { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; }
.lb__img {
  max-width: 100%; max-height: calc(100dvh - 5.5rem); object-fit: contain; cursor: zoom-in;
  transition: transform 200ms var(--ease-out); touch-action: pan-y;
}
.lb.is-zoom .lb__img { transform: scale(2.2); cursor: zoom-out; }
.lb__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: transparent; color: var(--brand-navy); font-size: 2.5rem; line-height: 1; cursor: pointer;
}
.lb__nav:hover { background: oklch(0% 0 0 / .06); }
.lb__nav--prev { left: 0; }
.lb__nav--next { right: 0; }
/* Celular: la foto ocupa todo; las miniaturas pasan a una tira abajo. */
@media (max-width: 51.99rem) {
  .lb__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lb__img { max-height: calc(100dvh - 11rem); }
  .lb__thumbs { order: 2; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 3.5rem; overflow-x: auto; overflow-y: hidden; }
}
@media (prefers-reduced-motion: reduce) { .lb__img { transition: none; } }

/* ════════════════ v15 · Mi montaje: agregar desde la foto + botón flotante ════════════════ */
.wizbar__acciones [hidden] { display: none; }
.gpz__add {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-ink); border-radius: var(--radius-md);
  background: var(--card-bg);
}
@media (min-width: 52rem) { .gpz__add { grid-column: 2; } }
.gpz__add [hidden] { display: none; }
.gpz__pieza { display: grid; margin: 0; margin-inline-end: auto; min-width: 0; line-height: 1.25; }
.gpz__pieza span { font-size: var(--text-xs); color: var(--color-muted); }
.gpz__pieza b { font-weight: 700; }
.gpz__add .stepper { margin-inline-start: 0; }
.gpz__add .stepper button { width: 44px; height: 44px; font-size: 1.25rem; cursor: pointer; }


/* En "Arma tu montaje" el envío ya es por WhatsApp: el flotante tapaba ese botón. */
body:has([data-montaje]) .wa-float { display: none; }
/* El botón pegajoso de envío ensanchaba la columna y cortaba el resumen en celular. */
.wiz { grid-template-columns: minmax(0, 1fr); }
/* En computador no hay WhatsApp flotante: "Mi montaje" va a la derecha, lejos de la galería. */

/* ════════════════ v16 · Mi montaje como carrito ════════════════ */
.nav__n {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; margin-inline-start: .4rem;
  border-radius: 999px; background: var(--brand-amarillo); color: var(--brand-navy); font-size: .75rem; letter-spacing: 0;
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
.nav__n[hidden] { display: none; }
.mm { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 52rem) {
  .mm { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); }
  .mm__envio { position: sticky; top: calc(var(--masthead-h, 9rem) + var(--space-md)); }
}
.mm__col, .mm__envio { min-width: 0; }
.mm__envio[hidden], .mm__lista[hidden], .mm__vacio[hidden] { display: none; }
.mm__h2 { font-size: var(--text-lg); font-weight: 800; }
.mm__total { font-weight: 600; color: var(--color-muted); }
.mm__lista { list-style: none; display: grid; margin-top: var(--space-md); border-top: var(--rule-hair); }
.mm__item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "foto info quitar" "foto paso paso";
  gap: var(--space-xs) var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: var(--rule-hair);
}
@media (min-width: 40rem) {
  .mm__item { grid-template-columns: 5rem minmax(0, 1fr) auto auto; grid-template-areas: "foto info paso quitar"; }
}
.mm__foto { grid-area: foto; display: block; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--color-ink); background: var(--foto-bg); }
.mm__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.mm__info { grid-area: info; display: grid; gap: 2px; margin: 0; line-height: 1.3; }
.mm__info b { font-weight: 700; }
.mm__sec { font-size: var(--text-xs); color: var(--color-muted); }
.mm__item .stepper { grid-area: paso; margin: 0; }
.mm__item .stepper button { width: 44px; height: 44px; font-size: 1.25rem; cursor: pointer; }
.mm__quitar {
  grid-area: quitar; justify-self: end; min-height: 44px; padding: 0 var(--space-sm); border: 0; background: none;
  color: var(--color-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--text-sm);
}
.mm__quitar:hover { color: var(--color-ink); }
.mm__vacio { margin-top: var(--space-md); padding: var(--space-xl); border: 2px dashed var(--color-rule-strong); border-radius: var(--radius-md); }
.mm__vacio-t { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-xs); }
.mm__envio .fields { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.mm__send { width: 100%; justify-content: center; }
.mm__envio .note { margin-top: var(--space-sm); }
/* Sin piezas no hay columna de envío: el aviso usa todo el ancho. Cabecera más baja para que la lista se vea sin bajar. */
.mm:has(> .mm__envio[hidden]) { grid-template-columns: minmax(0, 46rem); }

/* ════════════════ v17 · Ajustes del cliente: carrito, flechas, acordeones, redes ════════════════ */
.carrito {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm);
  border: 2px solid var(--brand-amarillo); color: var(--color-ink); text-decoration: none;
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
.carrito:hover, .carrito[aria-current="page"] { background: var(--brand-amarillo); color: var(--brand-navy); }
.carrito .nav__n { margin-inline-start: 0; }
@media (max-width: 47.99rem) {
  .carrito { padding-inline: var(--space-sm); }
  .carrito__txt { display: none; }
  .carrito .nav__n { position: absolute; top: -.5rem; right: -.5rem; margin: 0; }
}

.marquee-marco { position: relative; }
.marquee__nav { z-index: 2; }
.marquee__nav--prev { left: var(--gutter); }
.marquee__nav--next { right: var(--gutter); }

.acordeon .faq__q { font-size: var(--text-lg); font-weight: 800; }
.faq__a ul { padding-bottom: var(--space-lg); }
.faq__a .pieces li { color: var(--color-muted); }

.contacto { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 52rem) { .contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); } }
.contacto .map { width: 100%; border: 2px solid var(--color-ink); border-radius: var(--radius-md); }
.red { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; }
.red__ico { flex: none; }
.red__ico--wa { color: #25d366; }
.red__ico--ig { color: #e1306c; }
.red__ico--fb { color: #1877f2; }

/* ════════════════ v18 · Franja de título más baja, sombra del color de cada foto, tarjetas de sección ════════════════ */
.pagehead { padding-block: var(--space-lg); }
.pagehead__title { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem); }
.pagehead__lede { margin-top: var(--space-xs); }
/* La sombra toma el color del cuadro de la foto (amarillo, magenta, azul o verde). */
.gpz__img { box-shadow: 8px 8px 0 var(--sombra, var(--modulo)); }
/* Categoría y nombre arriba de la foto; el nombre se lee como título. */
.seccion__group { order: 1; }
.seccion__name { order: 2; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; margin-bottom: var(--space-xs); }
.seccion__img { order: 3; }
/* Catálogo: sin el subtítulo que había, las tarjetas quedaban muy abajo. */
.secciones { margin-top: 0; }
.band:has(> .secciones) { padding-top: var(--space-xl); }
/* Contacto: el botón de WhatsApp al lado del título, no debajo. */
.btn__ico { flex: none; margin-inline-end: var(--space-xs); vertical-align: middle; }
.pagehead--accion .btn { display: inline-flex; align-items: center; }
@media (min-width: 48rem) {
  .pagehead--accion .shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2xl); align-items: center; }
  .pagehead--accion .hero__cta { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ════════════════ v20 · Inicio sobre azul navy ════════════════ */
/* Fondo navy de marca (antes magenta); la trama en azul de marca, tenue, para
   que acompañe sin competir con los cuadros de color de las fotos. */
.hero--campo { background: var(--brand-navy); }
.hero--campo.patron-bg::before { background-color: var(--brand-azul); opacity: 0.22; }
.hero--campo .marquee__item figure { box-shadow: 0 6px 18px oklch(0% 0 0 / 0.35); }