:root {
  /* Paleta Nómada (manual de identidad v01) */
  --black: #0b0c0f;          /* Negro azulado tipo Axon — menos áspero que #000 */
  --white: #ffffff;
  --blue-light: #00b9e4;     /* Pantone 306 C - destacado principal */
  --red: #d52b1e;            /* Pantone 485 C */
  --pink: #f4b2c1;           /* Pantone 707 C */
  --green: #206c49;          /* Pantone 555 C */
  --orange: #e9994a;         /* Pantone 157 C */
  --blue-deep: #0f4dbc;      /* Pantone 2728 C */

  /* Variables semánticas (estilo Axon/Stripe — neutros fríos elegantes) */
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-elev: #ffffff;
  --ink: #0b0c0f;
  --ink-soft: #475569;
  --ink-mute: #94a3b8;
  --line: #f1f3f4;
  --line-strong: #e2e8f0;
  --accent: #00b9e4;
  --accent-soft: #e0f5fb;
  --accent-ink: #007091;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(11,12,15,.04);
  --shadow-md: 0 4px 16px rgba(11,12,15,.06);
  --shadow-lg: 0 24px 56px rgba(11,12,15,.16);
  --container: 1360px;
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --transition: .2s ease;
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a, button, input, select { transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition); }

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* ───────────── Loading inicial ───────────── */
.app-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--font);
  color: var(--ink-soft);
  font-size: 14px;
  transition: opacity .25s ease;
}
.app-loading[hidden] { display: none; }
.is-catalog-entry .app-loading { display: flex; }
.app-loading.is-fading { opacity: 0; pointer-events: none; }
.app-loading__spinner {
  width: 36px;
  height: 36px;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: app-loading-spin .9s linear infinite;
}
@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}
.app-loading p { margin: 0; }
.app-loading--error {
  display: flex;
  color: var(--red);
}
.app-loading--error .app-loading__spinner {
  display: none;
}

/* ───────────── Header ───────────── */
.topbar {
  position: sticky; top: 0; z-index: 65;
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand search actions";
  gap: 32px;
  align-items: center;
}
.brand { grid-area: brand; }
.search { grid-area: search; }
.topbar__actions { grid-area: actions; }

@media (max-width: 1100px) {
  .topbar__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "search search";
    gap: 14px 24px;
    padding: 14px 24px;
  }
  .search { max-width: none !important; }
}
@media (max-width: 720px) {
  .topbar__inner { padding: 12px 16px; gap: 10px 12px; }
  .brand__sub { display: none; }
  .topbar__actions { gap: 6px; }
  .how-link { padding: 8px 12px; font-size: 13px; }
  /* Ocultamos "Cómo trabajamos" en mobile para que entren los importantes */
  .topbar__actions a[href="#como-trabajamos"] { display: none; }
}
/* La cabecera se desbordaba en el móvil: medido el 04/09 a 375 px, las acciones
   llegaban a x=457 sobre un contenedor de 375 y el botón principal se leía "Pedir
   presu". Con tres cosas (ideas, carrito y presupuesto) el texto largo no cabe, así
   que en pantalla estrecha se acorta: "💡 4" y "Presupuesto". Nada se oculta —
   esconder la vuelta a Mis ideas en el móvil sería quitarla justo donde más cuesta
   volver a encontrar algo. */
.how-link__corta { display: none; }
@media (max-width: 560px) {
  .topbar__actions { gap: 4px; min-width: 0; }
  .how-link { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .how-link__larga { display: none; }
  .how-link__corta { display: inline; }
  .how-link--cart.has-pending .how-link__larga { display: inline; }
  .how-link--cart.has-pending svg { display: none; }
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand__name {
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.025em;
  line-height: 1;
}
/* Identidad v02 rev. 08/09/2026: el sello (disco con la N calada) sustituye a la
   flecha suelta. Hereda currentColor. */
.brand__mark { width: 24px; height: 24px; flex-shrink: 0; }
.brand__arrow {
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute);
  display: inline-block;
  transform: translateY(1px);
}
.brand__sub {
  font-size: 14px;
  color: var(--ink-soft);
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  margin-left: 6px;
  font-weight: 400;
}
.search {
  position: relative;
  max-width: 560px;
  width: 100%;
  justify-self: center;
}
.search__icon {
  position: absolute;
  left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--ink-mute);
  pointer-events: none;
}
#search {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  padding: 14px 40px 14px 48px;
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
}
#search::placeholder { color: var(--ink-mute); }
#search:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--bg-elev);
  box-shadow: 0 0 0 4px rgba(11,12,15,.04);
}
.search__clear {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  border: none;
  background: var(--line);
  color: var(--ink-soft);
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  font-size: 11px;
}
.search__clear.is-visible { display: flex; }

.search__suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 200;
  overflow: hidden;
}
.sugg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.sugg-item:last-child { border-bottom: none; }
.sugg-item:hover, .sugg-item.is-active { background: var(--bg-soft); }
.sugg-item--cat::before {
  content: '⊞';
  font-size: 11px;
  color: var(--accent);
  flex-shrink: 0;
}
.sugg-item--prod::before {
  content: '○';
  font-size: 10px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.sugg-item__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sugg-item__count {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}
.sugg-item__sub {
  font-size: 11px;
  color: var(--ink-mute);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.topbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.how-link {
  text-decoration: none;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}
.how-link--ghost {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg);
}
.how-link--ghost:hover { background: var(--bg-soft); border-color: var(--ink-mute); }
.how-link--primary {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}
.how-link--primary:hover { background: #1f2330; }
/* .how-link--logged eliminado al quitar el gate de precios.
   Reactivable desde la rama git feature/login-area-cliente (Q4 2026). */

/* ───────────── Nav de categorías (debajo del topbar) ───────────── */
.catnav {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  position: relative;
  z-index: 70;
}
.catnav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}
.catnav__inner::-webkit-scrollbar { display: none; }
.catnav__mobile-toggle { display: none; }
.catnav__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.catnav__item:hover, .catnav__item.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.catnav__icon { display: none; }
.catnav__caret { font-size: 10px; color: var(--ink-mute); }

@media (max-width: 1280px) {
  .catnav__item { padding: 16px 14px; font-size: 14.5px; }
}
@media (max-width: 1100px) {
  .catnav__item { padding: 15px 12px; font-size: 14px; gap: 5px; }
}
@media (max-width: 880px) {
  .catnav__inner { padding: 0 16px; }
  .catnav__item { padding: 13px 10px; font-size: 13px; gap: 4px; }
  .catnav__caret { display: none; }
}
@media (max-width: 560px) {
  .catnav { display: flex; align-items: stretch; }
  .catnav__mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .catnav__mobile-toggle[aria-expanded="true"] { color: var(--accent-ink); }
  .catnav__inner { flex: 1; min-width: 0; padding: 0 8px; margin: 0; }
  .catnav__item { padding: 13px 10px; }
}

/* ───────────── Mega-menú productos (estilo Moloon) ───────────── */
.mega-trigger { display: inline-flex; align-items: center; gap: 4px; }
.mega-trigger__caret {
  font-size: 11px;
  transition: transform .2s;
  color: var(--ink-mute);
}
.mega-trigger[aria-expanded="true"] .mega-trigger__caret { transform: rotate(180deg); }

.mega[hidden] { display: none; }
.mega {
  position: fixed;
  inset: 0;
  z-index: 60;
  animation: fadeIn .15s ease-out;
}
.mega__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,12,15,.35);
  backdrop-filter: blur(2px);
}
.mega__panel {
  position: absolute;
  top: var(--header-h, 124px);
  left: 0; right: 0;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(11,12,15,.08);
  max-height: calc(100vh - var(--header-h, 124px));
  overflow-y: auto;
  animation: slideDown .2s ease-out;
}
@keyframes slideDown { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.mega__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
}
.mega-panels { position: relative; }
.mega-overview, .mega-panel__back, .mega-panel__mobile-title { display: none; }
.mega-panel {
  display: none;
  padding: 30px 40px 36px;
  grid-template-columns: minmax(0, 1fr) 238px;
  gap: 28px;
  align-items: start;
}
.mega-panel.is-active {
  display: grid;
  animation: mega-panel-in .12s ease-out;
}
@keyframes mega-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mega-panel__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px 30px;
}
.mega-panel__hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f5f8fb;
  color: var(--ink);
  text-decoration: none;
}
.mega-panel__hero:hover { border-color: var(--accent); }
.mega-panel__hero-kicker { color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.mega-panel__hero-image { display: grid; place-items: center; height: 164px; overflow: hidden; border-radius: 10px; background: #fff; }
.mega-panel__hero-image img { width: 100%; height: 100%; object-fit: contain; }
.mega-panel__hero strong { font-size: 14px; line-height: 1.3; }
.mega-panel__hero-cta { font-size: 12px; font-weight: 700; color: var(--accent-ink); }
@media (max-width: 1100px) {
  .mega-panel { grid-template-columns: 1fr; }
  .mega-panel__hero { display: none; }
}
@media (max-width: 880px) {
  .mega-panel { padding: 24px 20px 28px; }
  .mega-panel__blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
}
@media (max-width: 560px) {
  .mega-panel__blocks { grid-template-columns: 1fr; gap: 18px; }
  .mega.is-overview .mega-overview { display: block; padding: 20px; }
  .mega.is-overview .mega-panel { display: none; }
  .mega-overview__title { display: block; margin-bottom: 12px; font-size: 19px; }
  .mega-overview__list { display: grid; grid-template-columns: 1fr; }
  .mega-overview__item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .mega-overview__item span { color: var(--accent-ink); }
  .mega-panel__back { display: block; grid-column: 1; border: 0; padding: 0; background: none; color: var(--accent-ink); text-align: left; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .mega-panel__mobile-title { display: block; grid-column: 1; font-size: 21px; }
}
.mega-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mega-block__title {
  background: none;
  border: none;
  padding: 0 0 8px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent-ink);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 8px;
  letter-spacing: -0.005em;
  transition: color .15s, border-color .15s;
  text-transform: none;
}
.mega-block__title:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.mega-block__count {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: auto;
}
.mega-block__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mega-block__item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 5px 0;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 6px;
  transition: color .12s, padding .12s;
}
.mega-block__item:hover {
  color: var(--ink);
  padding-left: 4px;
}
.mega-block__item::before {
  content: '›';
  color: var(--ink-mute);
  font-size: 12px;
}
.mega-block__item:hover::before { color: var(--accent); }
.mega-block__item-count {
  font-size: 11px;
  color: var(--ink-mute);
  margin-left: auto;
  font-weight: 500;
}

@media (max-width: 880px) {
  .mega-panel { padding: 24px 20px 28px; }
  .mega-panel__blocks { grid-template-columns: 1fr; gap: 24px; }
}

/* ───────────── Hero ───────────── */
.hero {
  background: var(--bg);
  padding: 48px 32px 42px;
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  max-width: 860px;
  margin: 0 auto;
}
.hero h1,
.hero .hero__claim {
  margin: 0 0 20px;
  font-size: clamp(36px, 5.5vw, 68px);
  letter-spacing: -0.035em;
  font-weight: 500;
  line-height: 1.02;
}
.hero h1 .arrow,
.hero .hero__claim .arrow {
  font-weight: 400;
  display: inline-block;
  color: var(--ink-mute);
}
.hero p {
  margin: 0 0 32px;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 640px;
  line-height: 1.5;
}
.hero p strong {
  color: var(--ink);
  font-weight: 600;
}
.hero__proof {
  font-size: 13px;
  color: var(--ink-mute);
  margin: -8px 0 22px;
  letter-spacing: 0.1px;
}
.hero__proof strong {
  color: var(--ink);
  font-weight: 600;
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-cta {
  font-family: inherit;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn-cta--primary {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
}
.btn-cta--primary:hover { background: #1f2330; transform: translateY(-1px); }
/* WhatsApp como CTA PARALELO al primario — vías equivalentes, el cliente elige.
   Cliente B2B tradicional usa form; cliente con prisa o más informal usa WhatsApp. */
.btn-cta--wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
  text-decoration: none;
}
.btn-cta--wa:hover { background: #1ebb56; border-color: #1ebb56; transform: translateY(-1px); }
.btn-cta--wa svg { flex-shrink: 0; }
.btn-cta--ghost {
  background: none;
  color: var(--accent-ink);
  border: 1px solid transparent;
  padding: 14px 8px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.btn-cta--ghost:hover { color: var(--ink); text-decoration-color: var(--ink); }
.hero__pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.hero__pills-label {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__pill {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  letter-spacing: -0.01em;
}
.hero__pill:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-1px);
}
@media (max-width: 880px) {
  .hero { padding: 40px 20px 36px; }
  .hero h1 { font-size: clamp(32px, 8vw, 48px); margin-bottom: 14px; }
  .hero p { font-size: 16px; margin-bottom: 22px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn-cta { width: 100%; padding: 14px 18px; text-align: center; }
  .btn-cta--ghost { font-size: 14px; }
}

/* ───────────── Banda de servicios (debajo del hero) ───────────── */
.services {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 28px 32px;
}
.services__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.service {
  display: flex;
  align-items: center;
  gap: 14px;
}
.service__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.service div { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.service strong { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.service span { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 880px) {
  .services { padding: 20px 16px; }
  .services__inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service { gap: 10px; }
  .service__icon { width: 40px; height: 40px; }
  .service__icon svg { width: 22px; height: 22px; }
  .service strong { font-size: 13px; }
  .service span { font-size: 11.5px; }
}

/* ───────────── Slide-in captación de intención ───────────── */
.intent-bar {
  position: fixed;
  bottom: 24px;
  left: 20px;
  z-index: 88;
  width: calc(100% - 40px);
  max-width: 400px;
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(120%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  pointer-events: none;
}
.intent-bar:not([hidden]) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.intent-bar[hidden] { display: block !important; }  /* hidden actúa solo vía transform */
.intent-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
}
.intent-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intent-bar__text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* Antes nowrap: forzaba 1 línea y truncaba el título. Ahora permitimos wrap
     natural (max 2 líneas con line-clamp) para que el texto siempre quepa. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.intent-bar__text span {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.35;
}
.intent-bar__cta {
  flex-shrink: 0;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: opacity .15s;
}
.intent-bar__cta:hover { opacity: .82; }
.intent-bar__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  line-height: 1;
  font-family: inherit;
}
.intent-bar__close:hover { color: var(--ink); }
@media (max-width: 480px) {
  .intent-bar {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: 80px; /* sobre el FAB en móvil */
  }
}

/* ───────────── Botón flotante WhatsApp ───────────── */
.fab-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: var(--white);
  padding: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .35), 0 2px 6px rgba(0,0,0,.12);
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .2s, box-shadow .2s;
}
.fab-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, .45), 0 4px 10px rgba(0,0,0,.15);
  color: var(--white);
}
.fab-whatsapp svg { line-height: 0; }
.fab-whatsapp__label { letter-spacing: -0.005em; }
@media (max-width: 720px) {
  .fab-whatsapp {
    bottom: 16px;
    right: 16px;
    padding: 14px;
    border-radius: 50%;
  }
  .fab-whatsapp__label { display: none; }
  /* En la ficha tapaba el total y la fecha de entrega; allí ya hay «Por WhatsApp». */
  body.is-product-page .fab-whatsapp { display: none; }
}

/* ───────────── Banda de logos clientes (marquee) ───────────── */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  background: var(--bg);
  overflow: hidden;
}
.trust__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trust__lead {
  margin: 0;
  padding: 0 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  text-align: center;
}
.trust__caption {
  margin: -8px 0 0;
  padding: 0 24px;
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
}
.trust__track {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.trust__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: max-content;
  gap: 56px;
  animation: trust-marquee 45s linear infinite;
}
.trust:hover .trust__logos { animation-play-state: paused; }
.trust__logos li {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Reserva de espacio para evitar Cumulative Layout Shift (CLS)
     mientras los logos PNG lazy-load se descargan. */
  min-width: 100px;
  height: 32px;
}
.trust__logos img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity .2s, filter .2s;
}
.trust__logos li:hover img {
  filter: none;
  opacity: 1;
}
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .trust { padding: 20px 0; }
  .trust__logos { gap: 36px; animation-duration: 30s; }
  .trust__logos li { width: 80px; height: 40px; }
}

/* ───────────── Section heads (Top ventas, Categorías) ───────────── */
.section-head {
  margin-bottom: 48px;
}
.section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.section-head h2 .arrow {
  font-weight: 400;
  display: inline-block;
  color: var(--ink-mute);
}
.section-head p {
  margin: 0;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 720px;
  line-height: 1.5;
}

/* ───────────── Top ventas ───────────── */
.bestsellers {
  background: var(--bg);
  padding: 96px 32px 48px;
}
@media (max-width: 720px) {
  .bestsellers { padding: 56px 16px 32px; }
  .themes { padding: 48px 16px !important; }
  .editorial-cats { padding: 48px 16px !important; }
  .reviews { padding: 48px 0 !important; }
  .como { padding: 64px 24px !important; margin-top: 32px !important; }
  .como h2 { margin-bottom: 32px !important; font-size: 28px !important; }
  .como__grid { gap: 24px !important; }
  .como__note { margin-top: 32px !important; padding-top: 24px !important; }
  .newsletter { padding: 56px 24px !important; }
  .newsletter__copy h2 { font-size: 26px !important; }
  .newsletter__copy p { font-size: 14px !important; }
  .section-head { margin-bottom: 24px !important; }
  .section-head h2 { font-size: clamp(24px, 6vw, 32px) !important; }
  .section-head p { font-size: 15px !important; }
  .catalog-cta { padding: 32px 16px 8px; }
  .catalog-cta__button { padding: 24px 20px; }
  .catalog-cta__label { font-size: 16px; }
  .layout { padding: 8px 16px 64px; gap: 32px; }
  .layout__head { padding: 32px 16px 24px; margin-top: 32px; }
}
.bestsellers__inner {
  max-width: var(--container);
  margin: 0 auto;
}
/* ───────────── Carrusel reutilizable (top ventas, etc.) ───────────── */
.carousel {
  position: relative;
}
.carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
  scroll-padding-left: 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > .card {
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: 240px;
  max-width: 340px;
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .carousel__track > .card { flex: 0 0 calc((100% - 40px) / 3); }
}
@media (max-width: 880px) {
  .carousel__track > .card { flex: 0 0 calc((100% - 20px) / 2); min-width: 160px; }
}
@media (max-width: 480px) {
  .carousel__track > .card { flex: 0 0 70%; min-width: 200px; }
}
.carousel__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: var(--shadow-md);
  font-family: inherit;
  line-height: 1;
  transition: border-color var(--transition), background var(--transition);
}
.carousel__nav:hover { border-color: var(--ink); background: var(--bg); }
.carousel__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.carousel__nav--prev { left: -22px; }
.carousel__nav--next { right: -22px; }
@media (max-width: 880px) {
  .carousel__nav { display: none; }
}

.bestsellers__more {
  text-align: center;
  margin-top: 40px;
}
.link-arrow {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.link-arrow:hover {
  border-color: var(--ink);
  background: var(--bg-soft);
}

/* ───────────── Por Temáticas (intenciones B2B) ───────────── */
.themes {
  background: var(--bg);
  padding: 80px 32px;
  border-top: 1px solid var(--line);
}
.themes__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.theme-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 0;
}
@media (min-width: 720px) {
  .theme-tiles { gap: 18px; }
}
@media (min-width: 900px) {
  /* 3 columnas y no 4: las temáticas son SEIS, y a cuatro por fila la segunda fila
     quedaba con dos huecos y la sección se veía a medias. Con tres van 3+3 exactas
     y además cada tarjeta gana tamaño. Si algún día se añade una séptima, revisar. */
  .theme-tiles { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.theme-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg-elev);
  border: 1.5px solid var(--line-strong);
  border-top: 4px solid var(--tema-color, var(--ink));
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.theme-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.09);
  border-color: var(--tema-color, var(--ink));
  border-top-color: var(--tema-color, var(--ink));
}
.theme-tile__img-wrap {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 16px;
  transition: background-color .3s;
}
.theme-tile__img-wrap img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
  transition: transform .4s ease;
}
.theme-tile:hover .theme-tile__img-wrap img { transform: scale(1.05); }
.theme-tile__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--line);
  flex: 1;
}
.theme-tile__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}
.theme-tile__sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  flex: 1;
}
.theme-tile__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.theme-tile__count {
  font-size: 11.5px;
  color: var(--ink-mute);
  font-weight: 500;
}
.theme-tile__arrow {
  color: var(--tema-color, var(--ink));
  font-weight: 600;
  font-size: 14px;
  transition: transform .2s ease;
}
.theme-tile:hover .theme-tile__arrow { transform: translateX(4px); }
@media (max-width: 500px) {
  .theme-tile__title { font-size: 14px; }
  .theme-tile__sub { display: none; }
  .theme-tile__body { padding: 14px 14px 16px; }
}

/* ───────────── Editorial: Lo más buscado (estilo Moloon) ───────────── */
.editorial-cats {
  background: var(--bg);
  padding: 72px 32px 72px;
}
.editorial-cats__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 720px) {
  .editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (min-width: 1100px) {
  .editorial-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
}
.editorial-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition);
}
.editorial-card:hover { transform: translateY(-3px); }

.editorial-card__img {
  aspect-ratio: 4 / 3;
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px;
}
.editorial-card__img img {
  max-width: 78%;
  max-height: 88%;
  object-fit: contain;
  transition: transform .5s ease;
}
.editorial-card:hover .editorial-card__img img { transform: scale(1.05); }

.editorial-card__body {
  padding: 22px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.editorial-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.editorial-card__copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.editorial-card__copy strong {
  color: var(--ink);
  font-weight: 600;
}
.editorial-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  transition: background var(--transition), transform var(--transition);
}
.editorial-card:hover .editorial-card__cta {
  background: var(--accent-ink);
}
@media (max-width: 720px) {
  .editorial-cats { padding: 56px 16px; }
  .editorial-card__body { padding: 18px 2px 0; gap: 10px; }
  .editorial-card__title { font-size: 19px; }
  .editorial-card__copy { font-size: 14px; }
  .editorial-card__img { padding: 18px; }
}

/* Bestseller badge en cards */
.card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--black);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  z-index: 1;
}

/* Badge de gama en cards */
.card__gama {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  z-index: 1;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  color: var(--ink);
  border: 1px solid var(--line);
}
.card__gama--alta { color: var(--accent-ink); border-color: var(--accent); }
.card__gama--media { color: var(--ink); }
.card__gama--baja { color: var(--ink-mute); }

/* Botón "guardar para presupuesto" en cards: visible siempre, más contraste en hover */
.card__compare {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  cursor: pointer;
  z-index: 2;
  opacity: 0.7;
  transform: scale(1);
  transition: opacity .15s, transform .15s, border-color .15s, color .15s, background .15s;
}
.card:hover .card__compare {
  opacity: 1;
}
.card__compare:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: scale(1.08);
}
/* Si está seleccionado, mostrar siempre aunque no haya hover */
.card__compare.is-active {
  opacity: 1;
  transform: scale(1);
}
.card__compare .check { display: none; }
.card__compare.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.card__compare.is-active .check { display: block; }
.card__compare.is-active .plus-h,
.card__compare.is-active .plus-v { display: none; }

/* ───────────── Barra de comparación sticky ───────────── */
.compare-tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--white);
  transform: translateY(100%);
  transition: transform .25s ease-out;
  box-shadow: 0 -10px 30px rgba(0,0,0,.2);
}
.compare-tray.is-open { transform: translateY(0); }
.compare-tray__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 800px) {
  .compare-tray__inner { grid-template-columns: 1fr; }
}
.compare-tray__head {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.compare-tray__head strong { font-size: 14px; }
.compare-tray__hint { color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; }
.compare-tray__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 480px;
}
.tray-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  padding: 6px 10px 6px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.tray-item img {
  width: 32px; height: 32px;
  object-fit: contain;
  background: var(--white);
  border-radius: 4px;
  padding: 2px;
}
.tray-item__name {
  font-size: 12px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tray-item__remove {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  padding: 2px;
}
.tray-item__remove:hover { color: white; }
.compare-tray__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn--compact {
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 999px;
}
.compare-tray .btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,.25);
  color: var(--white);
}
.compare-tray .btn-secondary:hover {
  background: rgba(255,255,255,.08);
}
.btn-primary--compact {
  margin-top: 0;
  width: auto;
  padding: 10px 18px;
  font-size: 14px;
}
.compare-tray .btn-primary {
  background: var(--accent);
  color: var(--ink);
}
.compare-tray .btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.compare-tray .btn-primary:not(:disabled):hover {
  background: var(--white);
}

/* ───────────── Modal comparador ───────────── */
.modal__card--wide { max-width: 1200px; padding: 0; }

/* ───────────── La puerta (email + empresa) ─────────────
   Estrecha a propósito: dos campos y un botón. Cuanto más parece un formulario,
   menos se rellena — y aquí el intercambio ya es honesto, no hay que adornarlo. */
.modal__card--narrow { max-width: 460px; padding: 32px 30px 28px; }
.puerta__tit { margin: 0 0 8px; font-size: 21px; letter-spacing: -0.02em; }
.puerta__sub { margin: 0 0 20px; font-size: 14px; color: var(--ink-soft, #475569); line-height: 1.5; }
.puerta__campo { display: block; margin: 0 0 12px; }
.puerta__campo > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.puerta__campo > span em { font-weight: 400; font-style: normal; color: var(--ink-mute); }
.puerta__campo input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 6px; background: var(--bg, #fff);
}
.puerta__campo input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.puerta__campo--extra { padding-top: 10px; border-top: 1px dashed var(--line, #e2e8f0); }
.puerta__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.puerta__rgpd { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 16px;
  font-size: 12px; color: var(--ink-soft, #475569); line-height: 1.45; }
.puerta__rgpd input { margin-top: 2px; flex: 0 0 auto; }
.puerta__error { margin: 0 0 12px; font-size: 13px; color: #b91c1c; }
#puerta-enviar { width: 100%; }
/* La otra salida de la cesta: llevarse la ficha en vez de pagar hoy */
.cart__propuesta {
  display: block; width: 100%; margin-top: 10px; padding: 11px 14px;
  background: transparent; border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 8px); font: inherit; font-size: 14px;
  color: var(--ink-soft, #475569); cursor: pointer; text-align: center;
}
.cart__propuesta:hover { border-color: var(--ink); color: var(--ink); }
.cart__propuesta strong { color: var(--ink); font-weight: 600; }
/* Atajo a la transferencia (28/09/2026): el formulario se queda en lo imprescindible */
#form-cart.is-transfer [data-opcional],
#form-cart.is-transfer .cart__invoice-toggle,
#form-cart.is-transfer .cart__transfer-atajo { display: none; }
.cart__transfer-atajo { margin: 0 0 4px; }
.cart__transfer-atajo button { background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--ink-soft, #475569); text-decoration: underline; cursor: pointer; text-align: left; }
.cart__transfer-atajo button strong { color: var(--ink); font-weight: 600; }

/* El saludo del enlace de cuenta */
.cuenta-saludo {
  max-width: 1400px; margin: 14px auto 4px; padding: 14px 18px;
  background: var(--bg-soft, #f8fafc); border-left: 3px solid var(--ink);
  font-size: 14px; line-height: 1.55;
}
@media (max-width: 700px) { .cuenta-saludo { margin: 0 0 8px; padding: 12px 16px; } }

/* "Tengo X € para Y personas" */
.presu { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 8px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.presu__campo { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.presu__campo input {
  width: 92px; padding: 8px 10px; font: inherit; font-size: 15px; text-align: right;
  border: 1px solid var(--line, #e2e8f0); border-radius: 6px; background: var(--bg, #fff);
}
.presu__campo input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.presu__quitar { background: none; border: 0; font: inherit; font-size: 13px;
  color: var(--ink-mute); text-decoration: underline; cursor: pointer; }
.presu__resultado { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--ink-soft, #475569); }
.presu__resultado strong { color: var(--ink); }

/* Entrada por presupuesto en la home */
.precio-entradas { margin-top: 22px; }
.precio-entradas__label { display: block; font-size: 13px; color: var(--ink-mute); margin-bottom: 10px; }
.precio-entradas__row { display: flex; gap: 10px; flex-wrap: wrap; }
.precio-tile {
  flex: 1 1 160px; padding: 12px 16px; text-align: left; cursor: pointer;
  background: var(--bg-elev, #fff); border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius, 8px); font: inherit; color: inherit;
}
.precio-tile:hover { border-color: var(--ink); }
.precio-tile.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.precio-tile strong { display: block; font-size: 15px; letter-spacing: -0.01em; }
.precio-tile span { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.precio-tile.is-active span { color: #cbd5e1; }

/* Plano acotado del marcaje */
.plano { margin: 0 0 16px; padding: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 6px; }
.plano__title { display: block; margin-bottom: 8px; font-size: 13px; }
.plano__escena { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 18px; align-items: end; margin: 12px 0 18px; padding: 12px; background: #f3f7f8; border-radius: 8px; }
.plano__escena[hidden] { display: none; }
.plano__escena canvas { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 8px 24px rgba(11,12,15,.09); }
.plano__escena-pie { display: flex; flex-direction: column; gap: 16px; align-self: center; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.plano__escena-pie label { display: grid; gap: 5px; font-weight: 600; color: var(--ink); }
.plano__escena-pie select { max-width: 160px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; font: inherit; }
.plano__technical-title { display: block; font-size: 12px; margin: 0 0 6px; }
.plano__cols { display: flex; gap: 12px; align-items: center; }
.plano__foto { width: 84px; flex: 0 0 84px; height: auto; border: 1px solid var(--line, #e2e8f0); background: #fff; }
.plano__svg { flex: 1 1 auto; width: 100%; max-width: 260px; height: auto; }
.plano__medida { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.plano__size { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 12px; font-weight: 600; }
.plano__size[hidden] { display: none; }
.plano__size input { flex: 1 1 140px; accent-color: var(--accent, #00b9e4); }
.plano__size span { min-width: 72px; text-align: right; }
.plano__size--offset span { min-width: 100px; white-space: nowrap; }
@media (max-width: 620px) { .plano__size--offset { flex-wrap: wrap; } .plano__size--offset input { min-width: 120px; } }
.plano__size--rotate > label { white-space: nowrap; }
.plano__quick { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.plano__quick:hover, .plano__quick:focus-visible { border-color: var(--ink); }
@media (max-width: 620px) { .plano__size--rotate { flex-wrap: wrap; } .plano__size--rotate > label { flex-basis: 100%; } .plano__size--rotate input { min-width: 120px; } }
@media (max-width: 620px) { .plano__escena { grid-template-columns: 1fr; } .plano__escena canvas { max-width: 360px; margin: auto; } .plano__escena-pie { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } }
.plano__nota { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-soft); }
.montaje__gate { margin: 10px 0 6px; font-size: 12px; color: var(--ink-soft); }
.montaje__drop--locked { opacity: .5; cursor: not-allowed; }
.plano__aviso { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #92400e;
  background: #fffbeb; border-left: 3px solid #f59e0b; padding: 7px 9px; }

/* Montaje con logo */
.btn-montaje { border-color: var(--ink) !important; border-width: 2px !important; }
/* El montaje es la acción con mejor conversión de la ficha (4 de cada 10 que lo
   abren lo piden) y era el botón más bajo de la pila. Mismo alto que los demás y
   la promesa dentro, que ya se hace en la fila de garantías pero llegaba tarde. */
.btn-montaje__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.btn-montaje__nota { font-size: 12px; font-weight: 500; color: var(--ink-soft, #475569); }
/* ink-mute (#94a3b8) da 2,8:1 sobre blanco y esto es una promesa de venta a 12px:
   tiene que leerse. ink-soft pasa de 7:1. */
.btn-montaje { min-height: 52px; }
.montaje__que {
  margin: 0 0 16px; padding: 10px 12px; background: var(--bg-soft, #f8fafc);
  border-left: 3px solid var(--ink); font-size: 13px; line-height: 1.45;
}
.montaje__drop { display: block; margin: 0 0 16px; text-align: center; cursor: pointer; }
.montaje__later {
  display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 16px;
  padding: 11px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 6px;
  font-size: 13px; line-height: 1.45; cursor: pointer;
}
.montaje__later input { margin-top: 3px; flex: 0 0 auto; }
.montaje__ok { font-size: 15px; line-height: 1.5; margin: 0 0 16px; }
#montaje-enviar { width: 100%; }

/* Petición de montaje en bolígrafos: una invitación, sin plano ni simulación. */
#modal-montaje.is-montage-request .modal__card {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 0;
  width: min(840px, calc(100vw - 32px)); max-width: 840px; padding: 0;
  overflow: auto; border-radius: 16px; background: #fff;
}
.is-montage-request .modal__card > .puerta__tit,
.is-montage-request .modal__card > .puerta__sub,
.is-montage-request #montaje-que, .is-montage-request #montaje-plano,
.is-montage-request #plano-escena, .is-montage-request #montaje-gate,
.is-montage-request #montaje-datos-extra, .is-montage-request .montaje__later { display: none !important; }
.montaje-revisado { grid-column: 1; grid-row: 1; background: #000; color: #fff; padding: 42px 32px 30px; }
.montaje-revisado[hidden], .montaje-revisado__form-head[hidden], .montaje-revisado__success[hidden],
.montaje-revisado__upload-icon[hidden], .montaje-revisado__formats[hidden], .montaje-revisado__after-button[hidden] { display: none; }
.montaje-revisado__eyebrow { display: block; color: #00b9e4; font-size: 10px; letter-spacing: .12em; line-height: 1.5; font-weight: 700; }
.montaje-revisado h2 { margin: 28px 0 20px; color: #fff; font-size: clamp(38px, 4.8vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.montaje-revisado > p { max-width: 270px; margin: 0; font-size: 14px; line-height: 1.6; color: #fff; }
.montaje-revisado__steps { list-style: none; margin: 34px 0; padding: 0; display: grid; gap: 18px; }
.montaje-revisado__steps li { display: flex; align-items: baseline; gap: 13px; font-size: 13px; line-height: 1.45; }
.montaje-revisado__steps li > span { color: #00b9e4; font-size: 10px; font-weight: 700; }
.montaje-revisado__steps strong { display: block; font-weight: 600; }
.montaje-revisado__promise { border-top: 1px solid #fff; padding-top: 18px; }
.montaje-revisado__promise > span { font-size: 9px; letter-spacing: .09em; color: #00b9e4; }
.montaje-revisado__promise p { font-size: 18px; line-height: 1.3; margin: 10px 0 0; }
.is-montage-request #form-montaje, .is-montage-request #montaje-ok { grid-column: 2; grid-row: 1; min-width: 0; padding: 44px 32px 30px; align-self: center; }
.is-montage-request #form-montaje[hidden], .is-montage-request #montaje-ok[hidden] { display: none; }
.montaje-revisado__form-head > span { font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.montaje-revisado__form-head h3 { margin: 10px 0; font-size: 25px; font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.montaje-revisado__form-head p { margin: 0 0 27px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.is-montage-request #montaje-datos .puerta__campo { margin-bottom: 18px; }
.is-montage-request #montaje-datos .puerta__campo input { min-height: 48px; border-radius: 6px; }
.is-montage-request #montaje-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 154px; padding: 22px 14px; margin: 0 0 18px; border: 1px dashed #000; border-radius: 8px; color: #000; background: #fff; transition: background .15s; }
.is-montage-request #montaje-drop:hover { background: #e0f5fb; }
.is-montage-request #montaje-drop.is-done { border-style: solid; background: #e0f5fb; }
.montaje-revisado__upload-icon { display: block; width: 30px; height: 30px; }
.is-montage-request #montaje-drop-text { max-width: 100%; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.montaje-revisado__formats { display: block; max-width: 240px; font-size: 10px; line-height: 1.5; font-weight: 400; color: var(--ink-soft); }
.is-montage-request #montaje-privacidad { margin: 0 0 20px; font-size: 11px; line-height: 1.5; }
.is-montage-request #montaje-enviar { min-height: 50px; background: #00b9e4; border-color: #00b9e4; color: #000; border-radius: 6px; font-size: 14px; font-weight: 700; }
.is-montage-request #montaje-enviar:hover { background: #000; border-color: #000; color: #fff; }
.montaje-revisado__after-button { text-align: center; margin: 11px 0 0; font-size: 11px; color: var(--ink-soft); }
.montaje-revisado__success > span { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; background: #00b9e4; border-radius: 50%; color: #000; font-size: 24px; }
.montaje-revisado__success h3 { margin: 23px 0 18px; font-size: 32px; line-height: 1.1; letter-spacing: -.035em; font-weight: 500; }
.is-montage-request .montaje__ok { font-size: 14px; line-height: 1.65; }
.is-montage-request .modal__close { z-index: 2; }
@media (max-width: 640px) {
  #modal-montaje.is-montage-request .modal__card { display: block; width: calc(100vw - 20px); border-radius: 12px; }
  .montaje-revisado { padding: 25px 24px 24px; }
  .montaje-revisado h2 { margin: 15px 0 12px; font-size: 38px; }
  .montaje-revisado h2 br { display: none; }
  .montaje-revisado > p { max-width: none; font-size: 13px; }
  .montaje-revisado__steps { display: none; }
  .montaje-revisado__promise { padding-top: 14px; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .montaje-revisado__promise > span { max-width: 85px; line-height: 1.6; }
  .montaje-revisado__promise p { margin: 0; font-size: 14px; text-align: right; }
  .is-montage-request #form-montaje, .is-montage-request #montaje-ok { padding: 25px 24px; }
  .montaje-revisado__form-head h3 { font-size: 23px; }
  .montaje-revisado__form-head p { margin-bottom: 20px; }
  .is-montage-request .modal__close { background: #000; color: #fff; border-color: #fff; }
}

/* Lo que la ficha ya sabe, en el formulario de presupuesto */
.quote-ya {
  padding: 10px 12px; background: var(--bg-soft, #f8fafc); border-left: 3px solid var(--ink);
  font-size: 13px; line-height: 1.5; margin-bottom: 4px;
}
.quote-ya strong { font-weight: 600; }
.quote-ya__label { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-mute); margin-bottom: 4px; }

.puerta__solo {
  display: block; width: 100%; margin-top: 10px; padding: 8px; background: none;
  border: 0; font: inherit; font-size: 13px; color: var(--ink-mute); text-decoration: underline;
  cursor: pointer;
}
.compare-modal__head {
  padding: 32px 40px 24px;
  border-bottom: 1px solid var(--line);
}
.compare-modal__head h2 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.compare-modal__head p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-mute);
}
.compare-table {
  display: grid;
  padding: 0 40px 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-cell {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.compare-cell--label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  font-weight: 600;
  padding-left: 0;
}
.compare-cell--head {
  position: relative;
  padding-top: 24px;
  border-bottom: 2px solid var(--ink);
}
.compare-cell--head img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  margin-bottom: 8px;
}
.compare-cell--head h3 {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.compare-cell__remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-mute);
  font-size: 11px;
  display: grid; place-items: center;
}
.compare-cell__remove:hover { color: var(--ink); border-color: var(--ink); }
.compare-cell__quote {
  width: 100%;
  text-align: center;
}

/* ───────────── Banner temático (Sostenibles / Welcome pack, etc.) ───────────── */
.banner-theme {
  padding: 48px 32px;
  background: var(--bg);
}
.banner-theme__inner {
  max-width: var(--container);
  margin: 0 auto;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: var(--radius-lg);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 48px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.banner-theme__copy { display: flex; flex-direction: column; gap: 12px; }
.banner-theme__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
  background: rgba(255,255,255,.7);
  padding: 4px 12px;
  border-radius: 999px;
  width: fit-content;
}
.banner-theme__copy h2 {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #052e16;
}
.banner-theme__copy h2 strong { color: #14532d; }
.banner-theme__copy p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #166534;
  max-width: 540px;
}
.banner-theme__copy .btn-cta--primary {
  background: #14532d;
  border-color: #14532d;
  align-self: flex-start;
}
.banner-theme__copy .btn-cta--primary:hover { background: #052e16; }
.banner-theme__visual { display: grid; place-items: center; }
@media (max-width: 880px) {
  .banner-theme { padding: 24px 16px; }
  .banner-theme__inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 16px; }
  .banner-theme__visual { display: none; }
  .banner-theme__copy .btn-cta--primary { width: 100%; text-align: center; }
}

/* ───────────── Stats / social proof ───────────── */
.stats {
  background: var(--bg);
  padding: 32px 24px;
  border-top: 1px solid var(--line);
}
.stats__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat strong {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.stat span { font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.02em; }
@media (max-width: 720px) {
  .stats { padding: 24px 16px; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
}

/* ───────────── CTA "Ver todo el catálogo" ───────────── */
.catalog-cta {
  padding: 48px 32px 16px;
  background: var(--bg);
}
.catalog-cta__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.catalog-cta__button {
  width: 100%;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--transition), transform var(--transition);
}
.catalog-cta__button:hover { background: #1f2330; }
.catalog-cta__button:active { transform: scale(.995); }
.catalog-cta__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.catalog-cta__label {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.catalog-cta__count {
  font-size: 14px;
  color: rgba(255,255,255,.65);
}
.catalog-cta__count strong { color: var(--white); font-weight: 600; }
.catalog-cta__arrow {
  font-size: 28px;
  color: var(--accent);
  font-weight: 400;
  transition: transform .2s;
}
.catalog-cta__button:hover .catalog-cta__arrow {
  transform: translateX(6px);
}
@media (max-width: 600px) {
  .catalog-cta__button { padding: 24px 24px; flex-direction: column; align-items: flex-start; }
  .catalog-cta__label { font-size: 18px; }
}

/* Cabecera de bloque "Todo el catálogo" */
.layout__head {
  max-width: var(--container);
  margin: 96px auto 0;
  padding: 64px 32px 40px;
}

/* ───────────── Layout ───────────── */
.layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px 32px 96px;
  display: block;
}

/* ───────────── Filter bar (estilo Moloon, barra horizontal) ───────────── */
.filter-bar {
  position: sticky;
  top: var(--header-h, 124px);
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filter-bar__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.filter-bar__quick .link-btn { margin-left: auto; font-size: 13px; }

.fdrop { position: relative; }
.fdrop[hidden] { display: none; }
.fdrop__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.fdrop__btn:hover:not(:disabled) { border-color: var(--ink-mute); }
.fdrop__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.fdrop__btn[data-count]::after {
  content: attr(data-count);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}
.fdrop[aria-expanded="true"] .fdrop__btn {
  border-color: var(--ink);
  background: var(--bg-soft);
}
.fdrop[aria-expanded="true"] .fdrop__caret { transform: rotate(180deg); }
.fdrop__caret { font-size: 12px; color: var(--ink-mute); transition: transform .15s; }

.fdrop__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-width: 420px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(11,12,15,.12);
  padding: 12px;
  z-index: 40;
}
.fdrop[aria-expanded="true"] .fdrop__panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Nota y enlace dentro de un panel de filtro (el de precio). Ocupan la fila
   entera porque el panel es un flex-wrap de chips. */
.fdrop__nota {
  width: 100%; margin: 8px 0 0; font-size: 12px; color: var(--ink-mute);
}
.fdrop__link {
  width: 100%; margin-top: 6px; padding: 8px 0 2px; background: none; border: 0;
  border-top: 1px solid var(--line, #e2e8f0); font: inherit; font-size: 13px;
  color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline;
}
.fdrop__panel--empty {
  padding: 16px;
  color: var(--ink-mute);
  font-size: 13px;
  text-align: center;
  font-style: italic;
  width: 100%;
}

/* Toggle ECO (switch) */
.eco-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  transition: border-color var(--transition), background var(--transition);
}
.eco-toggle:hover { border-color: var(--ink-mute); }
.eco-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.eco-toggle__track {
  width: 30px;
  height: 18px;
  background: var(--line-strong);
  border-radius: 999px;
  position: relative;
  transition: background var(--transition);
}
.eco-toggle__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-radius: 50%;
  transition: left var(--transition);
}
.eco-toggle input:checked + .eco-toggle__track { background: #2ea66e; }
.eco-toggle input:checked + .eco-toggle__track .eco-toggle__dot { left: 14px; }
.eco-toggle__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .5px;
}
.eco-toggle input:checked ~ .eco-toggle__label { color: #2ea66e; }
.eco-toggle--kids .eco-toggle input:checked + .eco-toggle__track,
.eco-toggle--kids input:checked + .eco-toggle__track { background: #5b7fff; }
.eco-toggle--kids input:checked ~ .eco-toggle__label { color: #5b7fff; }

/* Quick toggles (Destacados / Top ventas) */
.quick-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.quick-toggle input { accent-color: var(--ink); }
.quick-toggle__count {
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .filter-bar__group { gap: 6px; }
  .fdrop__btn { padding: 8px 12px; font-size: 13px; }
  .fdrop__panel { min-width: 220px; max-width: 92vw; }
}
.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.filters h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  padding: 0;
  font-weight: 500;
}
.link-btn:hover { text-decoration: underline; }

.filter-group {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.filter-group--toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}
.toggle:hover { background: var(--bg-soft); }
.toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.toggle__label {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}
.toggle__count {
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.toggle:has(input:checked) .toggle__count {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.filter-group:last-child { border-bottom: none; }
.filter-group h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip__count {
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 999px;
}
.chip.is-active .chip__count {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
}
.color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
}

/* ───────────── Results ───────────── */

/* Cabecera de listado por categoría (contexto + SEO, 18/07). Tokens existentes. */
.cat-header { margin: 4px 0 10px; }
.cat-header__title { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink); margin: 0 0 6px; }
.cat-header__intro { font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 68ch; margin: 0; }
@media (max-width: 600px) { .cat-header__title { font-size: 19px; } }
.cat-subnav {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 14px;
  padding-bottom: 4px;
  overflow-x: auto;
  white-space: nowrap;
}
.cat-subnav[hidden] { display: none; }
.cat-subnav__caption { margin-right: 3px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.cat-subnav__link {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  background: var(--bg-elev);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.cat-subnav__link:hover, .cat-subnav__link:focus-visible { border-color: var(--ink); }
.cat-subnav__link.is-active { border-color: var(--ink); background: var(--ink); color: var(--white); }
.cat-subnav__link span { margin-left: 3px; opacity: .7; font-size: 11px; }

.results__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.list-qty {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.list-qty input {
  width: 82px;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--ink);
  font: inherit;
}
.list-qty input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card__price--pending { font-size: 12px; color: var(--ink-mute); }
.sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.sort__label {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
}
.sort select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 32px 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.sort select:focus { outline: none; border-color: var(--ink); }
/* Móvil: recuento y orden en una fila, sin la etiqueta «Ordenar:». Sube la primera fila de
   productos ~50 px para que foto, nombre y precio quepan en el primer pantallazo. */
@media (max-width: 600px) {
  .results__head { gap: 8px 10px; margin-bottom: 12px; }
  .results__head > div:first-child { order: 1; flex: 1; }
  .results__head .sort { order: 2; margin-left: 0; }
  .results__head .sort__label { display: none; }
  .results__head .list-qty { order: 3; }
  .results__head .active-filters { order: 4; }
}
.count {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.active-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.active-filter__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-filter button {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  font-size: 13px;
  opacity: 0.6;
  cursor: pointer;
  line-height: 1;
}
.active-filter button:hover { opacity: 1; }
.active-filter--share {
  background: none;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.active-filter--share:hover { background: var(--accent); color: #fff; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
}
@media (min-width: 1100px) {
  #grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card__media {
  aspect-ratio: 1 / 1;
  background: var(--bg-elev);
  position: relative;
  overflow: hidden;
}
/* En listados, deja nombre y precio en el primer vistazo de portátil sin
   recortar la foto del proveedor. Las tarjetas destacadas de portada conservan
   su formato original. */
#grid .card__media {
  aspect-ratio: auto;
  height: clamp(190px, 18vw, 250px);
}
.card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-soft);
  z-index: 0;
}
.card__media img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  opacity: 0;
  transition: opacity .3s ease, transform .4s ease;
}
.card__media img[data-loaded="1"] {
  opacity: 1;
}
@keyframes card-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card:hover .card__media img { transform: scale(1.06); }
.card__media--placeholder {
  display: grid; place-items: center;
  color: var(--ink-mute);
  font-size: 12px;
  background: var(--bg-soft);
}
.card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-mute);
}
.card__placeholder span {
  font-size: 11px;
  letter-spacing: 0.02em;
}
.card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
@media (max-width: 720px) {
  .card__body { padding: 10px 12px 14px; gap: 4px; }
  .card__name { font-size: 14px; }
  .card__category { font-size: 10px; }
  .card__price strong { font-size: 15px; }
  .card__price-label, .card__price-unit { font-size: 11px; }
  .card__min { font-size: 10px; }
  .card__media img { padding: 6px; }
}
.card__category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-mute);
  font-weight: 600;
}
.card__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.card__facts {
  margin: 0;
  min-height: 17px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__desc {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 720px) {
  .card__desc { -webkit-line-clamp: 1; font-size: 11px; }
}
.card__tech {
  display: none; /* Las técnicas se ven en la ficha, no en grid (más respiración Axon-like) */
}
.card__price {
  margin-top: 0;
  padding-top: 2px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.card__price-context {
  display: grid;
  gap: 2px;
  color: var(--ink-mute);
  font-size: 11px;
  line-height: 1.3;
}
.card__price-total {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}
.card__price-label {
  font-size: 12px;
  color: var(--ink-mute);
}
.card__price-star {
  color: var(--ink-mute);
  cursor: help;
}
.card__price strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.card__price-unit {
  font-size: 12px;
  color: var(--ink-mute);
}
.card__min {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.card__min strong {
  color: var(--ink-soft);
  font-weight: 600;
}

/* Card meta: min qty + material (siempre visible) */
.card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-mute);
  flex-wrap: wrap;
  margin-top: 4px;
}
.card__meta-qty {
  font-weight: 600;
  color: var(--ink-soft);
}
.card__meta-sep {
  opacity: .3;
}
@media (max-width: 720px) {
  .card__meta { font-size: 10px; }
}

/* Badge eco en cards (productos sostenibles según categoría Makito) */
.card__badge--eco {
  background: #16a34a;
  color: var(--white);
  text-transform: lowercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: absolute;
  top: 10px;
  right: 48px;
  left: auto;
}
.card__badge--top + .card__badge--eco {
  top: 10px;
  left: auto;
  right: 48px;
}
.tech-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  font-weight: 500;
}

.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--ink-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.empty__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.empty__title {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
}
.empty__sub {
  margin: 0 0 8px;
  max-width: 440px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.empty__contact {
  background: none;
  border: none;
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
/* Botones de acción en estado vacío */
.empty__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.empty__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #25D366;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.empty__wa:hover { background: #1ebe5a; transform: translateY(-1px); color: #fff; }
.empty__wa svg { width: 18px; height: 18px; flex-shrink: 0; }
.empty__form-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.empty__form-btn:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.btn-ghost-sm {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-ghost-sm:hover { border-color: var(--ink-soft); color: var(--ink); }

/* ───────────── Reseñas Google (estilo Moloon) ───────────── */
.reviews {
  background: var(--bg-soft);
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.reviews__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
}
.reviews__rating {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reviews__google-mark { line-height: 0; }
.reviews__title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.03em;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}
.reviews__title .arrow { font-weight: 400; color: var(--ink-mute); display: inline-block; }
.reviews__score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}
.reviews__score strong {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.reviews__stars { color: #fbbf24; font-size: 22px; letter-spacing: 3px; }
.reviews__count { margin: 0; font-size: 14px; color: var(--ink-soft); }
.reviews__count a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.reviews__count a:hover { text-decoration-color: var(--ink); }

.reviews__carousel { position: relative; overflow: hidden; }
.reviews__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__loading { padding: 40px; color: var(--ink-mute); font-size: 14px; }
.review-card {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 260px;
  max-width: 360px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.review-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.review-card__head { display: flex; align-items: center; gap: 10px; }
.review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  overflow: hidden;
}
.review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Variante B2B: testimonios directos de clientes con cargo+empresa.
   Distintivo sutil (fondo del avatar más oscuro). */
.review-card__avatar--b2b {
  background: #111;
  color: #fff;
}
.review-card__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.review-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card__when { font-size: 12px; color: var(--ink-mute); }
.review-card__stars { color: #fbbf24; font-size: 13px; letter-spacing: 2px; }
.review-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.review-card__link {
  font-size: 13px;
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 500;
  margin-top: auto;
}
.review-card__link:hover { color: var(--ink); }

.reviews__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  line-height: 1;
}
.reviews__nav:hover { border-color: var(--ink); background: var(--bg); }
.reviews__nav:disabled { opacity: 0.35; cursor: not-allowed; }
.reviews__nav--prev { left: -20px; }
.reviews__nav--next { right: -20px; }

@media (max-width: 880px) {
  .reviews { padding: 56px 0; }
  .reviews__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 24px;
  }
  .reviews__title { font-size: 24px; }
  .reviews__score strong { font-size: 36px; }
  .reviews__nav { display: none; }
  .reviews__track { padding-right: 24px; }
  .review-card { flex: 0 0 80%; min-width: 260px; }
}

/* ───────────── Cómo trabajamos (azul claro Nómada · texto negro) ───────────── */
.about {
  padding: 72px 32px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.about__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 16px;
}
.about__text {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .about { padding: 56px 24px 16px; }
}

.como {
  background: var(--blue-light);
  color: var(--black);
  padding: 120px 32px;
  margin-top: 64px;
}
.como__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.como h2 {
  margin: 0 0 56px;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 720px;
}
.como h2 .arrow {
  display: inline-block;
  font-weight: 400;
}
.como__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.como__step {
  display: block;
  font-size: 13px;
  color: var(--black);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  border-top: 1px solid var(--black);
  padding-top: 12px;
}
.como__grid h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.como__grid p {
  margin: 0;
  color: rgba(0,0,0,.75);
  font-size: 14.5px;
  line-height: 1.55;
}
.como__note {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.75);
  font-size: 14.5px;
}
.como__note strong { color: var(--black); font-weight: 600; }

/* ───────────── FAQ ───────────── */
.faq {
  background: var(--bg);
  padding: 96px 32px;
  border-top: 1px solid var(--line);
}
.faq__inner {
  max-width: 880px;
  margin: 0 auto;
}
.faq__inner .section-head { text-align: center; margin-bottom: 40px; }
.faq__inner .section-head p { margin-left: auto; margin-right: auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
  transition: background .15s;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px 18px 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s, color .15s;
}
.faq-item[open] summary::after { content: '−'; color: var(--accent-ink); }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item p {
  margin: 0;
  padding: 0 24px 22px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.faq-item p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 880px) {
  .faq { padding: 56px 20px; }
  .faq-item summary { font-size: 15px; padding: 14px 24px 14px 0; }
  .faq-item p { font-size: 14px; padding-bottom: 18px; }
}

/* ───────────── Newsletter ───────────── */
.newsletter {
  background: var(--ink);
  color: var(--white);
  padding: 96px 32px;
}
.newsletter__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) {
  .newsletter { padding: 64px 24px; }
  .newsletter__inner { grid-template-columns: 1fr; gap: 32px; }
}
.newsletter__copy h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
}
.newsletter__copy h2 .arrow {
  font-weight: 400;
  color: rgba(255,255,255,.5);
  display: inline-block;
}
.newsletter__copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  max-width: 520px;
}
.newsletter__copy p + p {
  margin-top: 12px;
}
.newsletter__proof {
  font-size: 14px !important;
  color: rgba(255,255,255,.55) !important;
}
.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newsletter__label {
  display: block;
}
.newsletter__label input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 16px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  color: var(--white);
}
.newsletter__label input::placeholder {
  color: rgba(255,255,255,.45);
}
.newsletter__label input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.08);
}
.newsletter__submit {
  background: var(--accent);
  color: var(--ink);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 24px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background var(--transition), transform var(--transition);
}
.newsletter__submit:hover { background: var(--white); }
.newsletter__submit:active { transform: scale(.98); }
.newsletter__submit:disabled { opacity: .5; cursor: not-allowed; }
.newsletter__rgpd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  cursor: pointer;
  margin-top: 4px;
}
.newsletter__rgpd input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.newsletter__rgpd a { color: rgba(255,255,255,.85); text-decoration: underline; }
.newsletter__rgpd a:hover { color: var(--white); }
.newsletter__success {
  padding: 20px 24px;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  font-size: 15px;
  color: var(--white);
}
.newsletter__success p { margin: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ───────────── Footer ───────────── */
.foot {
  background: var(--ink);
  color: rgba(255,255,255,.8);
  padding: 64px 32px 40px;
}
.foot__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) repeat(2, minmax(130px, 1fr)) minmax(190px, 1.15fr);
  align-items: start;
  gap: 32px 28px;
  font-size: 14px;
  line-height: 1.6;
}
.foot strong { color: var(--white); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; display: block; margin-bottom: 6px; }
.foot__lines { margin: 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.6; }
.foot a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.foot a:hover { border-bottom-color: var(--white); }
.foot__links { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.foot__links a { color: rgba(255,255,255,.7); border-bottom: none; font-size: 13px; }
.foot__links a:hover { color: var(--white); text-decoration: underline; }
.foot__legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.foot__legal a {
  color: rgba(255,255,255,.7);
  border-bottom: none;
}
.foot__legal a:hover { color: var(--white); }
.foot__legal span { color: rgba(255,255,255,.3); }

/* Newsletter en footer — compacta, no compite con flujo de conversión */
.foot__newsletter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.15fr);
  gap: 4px 32px;
  padding-top: 8px;
}
.foot__newsletter-title { grid-column: 1; grid-row: 1; }
.foot__newsletter-lead { grid-column: 1; grid-row: 2; }
.foot__newsletter-form { grid-column: 2; grid-row: 1 / span 2; }
.foot__newsletter-success { grid-column: 2; }
.foot__newsletter-title {
  /* Hereda el .foot strong (16px blanco bold) */
}
.foot__newsletter-lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}
.foot__newsletter-proof {
  display: inline-block;
  color: rgba(255,255,255,.85);
  font-weight: 500;
}
.foot__newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.foot__newsletter-form input[type="email"] {
  flex: 1 1 180px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  color: var(--white);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.foot__newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,.4);
}
.foot__newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}
.foot__newsletter-form button[type="submit"] {
  padding: 10px 16px;
  background: var(--white);
  color: var(--ink);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.foot__newsletter-form button[type="submit"]:hover { opacity: 0.85; }
.foot__newsletter-rgpd {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  line-height: 1.45;
}
.foot__newsletter-rgpd input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.foot__newsletter-rgpd a {
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.foot__newsletter-success {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.35);
  border-radius: 6px;
  color: rgba(255,255,255,.95);
  font-size: 13px;
}
.foot__newsletter-success p { margin: 0; }

@media (max-width: 960px) {
  .foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .foot__newsletter { grid-template-columns: 1fr; gap: 8px; }
  .foot__newsletter-title, .foot__newsletter-lead, .foot__newsletter-form, .foot__newsletter-success {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 560px) {
  .foot { padding: 48px 20px 32px; }
  .foot__inner { gap: 28px 18px; }
  .foot__company, .foot__pago { grid-column: 1 / -1; }
  .foot__legal { gap: 8px; font-size: 12px; }
}

/* ───────────── Modal ───────────── */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fadeIn .15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
}
.modal__card {
  position: relative;
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  z-index: 1;
  animation: slideUp .2s ease-out;
}
.modal__card--small { max-width: 480px; padding: 32px; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  z-index: 2;
  display: grid; place-items: center;
}
.modal__close:hover { background: var(--line); color: var(--ink); }

.modal__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1fr;
  align-items: start;
}
@media (max-width: 820px) {
  /* Modal fullscreen en mobile. */
  .modal {
    padding: 0;
    place-items: stretch;
  }
  .modal__card {
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal__close {
    top: 12px; right: 12px;
    z-index: 10;
  }

  /* ⚡ Foto compacta ARRIBA + precio cerca del fold (revisión 10/06).
     El comprador de producto físico quiere ver el producto primero también
     en móvil; la versión anterior (16/05) la enterraba al final del modal.
     display:contents disuelve el wrapper media para ordenar sus piezas por
     separado: imagen y thumbs suben en compacto, colores/stock quedan como
     detalle después de la info. */
  .modal__grid {
    display: flex;
    flex-direction: column;
  }
  .modal__media {
    display: contents;
  }
  .modal__media > .product-image-zoom {
    order: 1;
    margin: 52px 16px 0;  /* hueco para el botón close */
    max-height: 190px;
  }
  .modal__thumbs {
    order: 2;
    justify-content: center;
    padding: 8px 16px 4px;
  }
  .modal__info {
    order: 3;
    padding: 12px 20px 24px;
  }
  .modal__colors-strip {
    order: 4;
    margin: 0 20px 20px;
  }
  .modal__thumbs .thumb {
    width: 44px;
    height: 44px;
  }
  .modal__info h2, .modal__info #m-name {
    font-size: 22px;
    margin: 0 0 4px;
  }
  .modal__quick-cta {
    margin-top: 12px;
  }
}
/* Solo escritorio: media sticky en columna. En móvil (<=820px) rige display:contents
   del media query de arriba (antes esta regla base iba después y lo sobrescribía →
   imagen sticky + texto solapado en móvil, corregido 18/07). */
@media (min-width: 821px) {
  .modal__media {
    background: var(--bg-soft);
    position: sticky;
    top: 0;
    align-self: start;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid var(--line);
  }
}
.product-image-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}
.modal__media .product-image-zoom > img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid var(--line);
}
.product-image-zoom__hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(17,17,17,.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
.product-image-zoom:hover .product-image-zoom__hint,
.product-image-zoom:focus-visible .product-image-zoom__hint {
  opacity: 1;
  transform: none;
}
.product-image-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.image-lightbox[hidden] { display: none; }
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 24px;
}
.image-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.84); }
.image-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(1100px, 100%);
  max-height: 100%;
}
.image-lightbox__dialog img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}
.image-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17,17,17,.84);
  color: #fff;
  font: 28px/1 sans-serif;
  cursor: pointer;
}
body.image-lightbox-open { overflow: hidden !important; }
.modal__thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.modal__thumbs .thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color var(--transition);
}
.modal__thumbs .thumb:hover { border-color: var(--ink-mute); }
.modal__thumbs .thumb.is-active { border-color: var(--ink); }
.modal__thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  max-height: none;
}
.modal__colors-strip {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.modal__colors-strip[hidden] { display: none; }
.colors-strip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.modal__info {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal__info > * + * { margin-top: 4px; }
.badge {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  font-weight: 600;
}
.modal__info h2, .modal__info #m-name {
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.1;
}
.modal__ref {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-mute);
}
.modal__quick-cta {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.modal__quick-cta .btn-primary--compact,
.modal__quick-cta .btn-secondary {
  margin-top: 0;
  width: auto;
}
.modal__quick-cta .btn-save--active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.modal__description {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.modal__section {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.modal__section:first-of-type { padding-top: 0; border-top: none; }
.modal__section h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-weight: 600;
}
.modal__section p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badges .tech-badge {
  font-size: 12px;
  padding: 4px 10px;
}

.btn-primary {
  margin-top: 24px;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 16px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  letter-spacing: -0.005em;
}
.btn-primary:hover { background: #1f2330; }
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--ink-mute); }

.modal__small {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}
.form-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  text-align: center;
}
#cart-error { grid-column: 1 / -1; text-align: left; }
.modal__related {
  padding: 24px 32px 28px;
  border-top: 1px solid var(--line);
}
.modal__related-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
/* Subtítulo de cada fila de recomendación ("Parecidos" / "Va con"). */
.modal__related-sub {
  font-size: 12px; font-weight: 600; color: var(--ink-mute);
  margin: 0 0 8px;
}
.modal__related-grid + .modal__related-sub { margin-top: 18px; }
.modal__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (min-width: 600px) {
  .modal__related-grid { grid-template-columns: repeat(6, 1fr); }
}
.related-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.related-card:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.related-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.related-card__img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.related-card__name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-card__price {
  font-size: 10px;
  color: var(--ink-mute);
}

.product-next {
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
}
.product-next__intro { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.product-next__intro strong { font-size: 14px; line-height: 1.3; }
.product-next__intro span { font-size: 12px; color: var(--ink-soft); }
.product-next__editorial { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.product-next__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-next .related-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  text-align: left;
}
.product-next .related-card__img { grid-row: 1 / 3; width: 52px; height: 52px; }
.product-next .related-card__name { font-size: 12px; font-weight: 600; }
.product-next .related-card__price { font-size: 11px; }
@media (max-width: 620px) {
  .product-next__grid { grid-template-columns: 1fr; }
}

/* ───────────── Sticky CTA modal ───────────── */
.modal__sticky-cta {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  z-index: 10;
}
.modal__sticky-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.modal__sticky-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal__sticky-price {
  font-size: 12px;
  color: var(--ink-mute);
}
.modal__sticky-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.modal__sticky-btn:hover { background: #1ebe5a; }
.modal__sticky-btn--buy { background: var(--ink); min-width: 180px; justify-content: center; font-size: 14px; }
.modal__sticky-btn--buy:hover { background: var(--black); opacity: .9; }
/* El montaje es la segunda salida: contorno, sin competir con «Comprar» (01/10/2026). */
.modal__sticky-btn--montaje { background: var(--bg-elev); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.modal__sticky-btn--montaje:hover { background: var(--bg-soft); }
.modal__sticky-btn--montaje span { font-size: 11px; font-weight: 500; }
@media (max-width: 620px) {
  /* Móvil: una línea con total, cantidad y fecha encima de los botones (27/09/2026) */
  .modal__sticky-cta { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; }
  .modal__sticky-info { flex: 1 0 100%; }
  .modal__sticky-name { display: none; }
  .modal__sticky-price { font-size: 13px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal__sticky-price:empty { display: none; }
  .modal__sticky-btn--buy { flex: 2; justify-content: center; min-width: 0; }
  .modal__sticky-btn--montaje { flex: 1; justify-content: center; }
  .modal__sticky-btn--montaje span { display: none; }
}

/* ───────────── Calculadora en ficha ───────────── */
.calc {
  background: var(--bg-soft);
  padding: 16px;
  border-radius: var(--radius);
  margin: 12px 0;
  border-top: none !important;
}
.calc h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
.calc__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.calc__row--3 {
  grid-template-columns: 90px 1fr 72px;
}
.calc__row--1 {
  grid-template-columns: 1fr;
}
.calc__row--2 {
  grid-template-columns: 1fr 72px;
}
.calc__row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}
.calc__row select {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--ink);
}
.calc__row select:focus { outline: none; border-color: var(--ink); }
.calc__qty {
  position: relative;
  display: flex;
  align-items: center;
}
.calc__qty input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 36px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--ink);
  appearance: textfield;
}
.calc__qty input::-webkit-outer-spin-button,
.calc__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc__qty input:focus { outline: none; border-color: var(--ink); }
.calc__qty input:invalid { border-color: var(--red); }
.calc__qty-unit {
  position: absolute;
  right: 10px;
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
  pointer-events: none;
}
.calc__qty-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.calc__qty-presets button {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 500;
}
.calc__qty-presets button:hover { border-color: var(--ink); color: var(--ink); }
.calc__qty-presets button.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }

.calc__result {
  background: var(--bg-elev);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--line);
}
.calc__price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.calc__price-unit strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.calc__price-unit {
  font-size: 13px;
  color: var(--ink-mute);
}
.calc__price-total strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.calc__price-total {
  font-size: 13px;
  color: var(--ink-mute);
}
.calc__price-mute { color: var(--ink-mute); font-size: 11px; }
/* Áreas de marcaje */
.calc__areas {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.calc__areas-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.calc__areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}
.area-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-elev);
  cursor: pointer;
  font-family: inherit;
}
.area-thumb:hover { border-color: var(--ink-mute); }
.area-thumb.is-active {
  border-color: var(--ink);
  background: var(--bg-soft);
}
.area-thumb img {
  width: 100%;
  height: 50px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: 4px;
}
.area-thumb__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 50px;
  background: var(--bg-soft);
  color: var(--ink-mute);
  border-radius: 4px;
  font-size: 18px;
}
.area-thumb__size {
  font-size: 10px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.calc__area-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
.calc__area-info strong { color: var(--ink); font-weight: 600; }

.calc__source {
  margin: 4px 0 8px;
  font-size: 11px;
  color: #0abf53;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.calc__nudge {
  margin: 10px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.calc__disclaimer {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* ───── Prueba social compacta en bloque calculadora ─────
   Versión minimalista: solo logos + 1 línea de meta. Sin headline, sin
   testimonio, sin recuadro destacado. Refuerzo visual sin competir con
   la atención del CTA inmediatamente debajo.                              */
.calc__trust {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ececef;
}
.calc__trust-logos {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px 12px;
  align-items: center;
  justify-items: center;
}
.calc__trust-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
}
.calc__trust-logos img {
  max-height: 22px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.45);
  transition: filter 0.2s ease;
}
.calc__trust-logos li:hover img {
  filter: grayscale(0%) opacity(1);
}
.calc__trust-meta {
  margin: 0;
  font-size: 10.5px;
  color: var(--ink-mute);
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 1.45;
}
.calc__trust-meta strong {
  color: #2a2a2e;
  font-weight: 600;
}

/* Microcopy justo debajo del botón CTA — reduce ansiedad antes de pulsar */
.calc__cta-microcopy {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
  line-height: 1.4;
}

/* V1.3 · Captura suave "Guárdame la selección" */
.calc__save { margin: 14px 0 0; text-align: center; }
.calc__save-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--ink-mute); text-decoration: underline;
  font-family: inherit; padding: 4px;
}
.calc__save-toggle:hover { color: var(--ink); }
.calc__save-form {
  margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px;
  text-align: left; background: var(--surface, #f5f5f3); border-radius: 8px; padding: 12px;
}
.calc__save-form input[type=email] {
  padding: 10px 12px; border: 1px solid var(--line, #d8d8d8); border-radius: 6px;
  font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box;
}
.calc__save-form #calc-save-submit {
  padding: 10px 14px; background: var(--ink, #0b0c0f); color: #fff; border: none;
  border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit;
}
.calc__save-form #calc-save-submit:disabled { opacity: .6; cursor: default; }
.calc__save-rgpd { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--ink-mute); line-height: 1.4; }
.calc__save-rgpd input { margin-top: 2px; flex-shrink: 0; }
.calc__save-rgpd a { color: inherit; }
.calc__save-status { margin: 2px 0 0; font-size: 12px; }
.calc__save-ok { margin: 0; font-size: 13px; color: #16794a; line-height: 1.45; }

@media (max-width: 600px) {
  .calc__trust-logos {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
  }
  .calc__trust-meta {
    font-size: 10px;
  }
}

/* CTA contextual que aparece cuando hay precio válido calculado — abre WhatsApp */
.calc__quote-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.01em;
  text-align: center;
  transition: background .15s, transform .1s;
}
.calc__quote-cta:hover { background: #333; transform: translateY(-1px); }
.calc__quote-cta:active { transform: translateY(0); }
.calc__quote-cta-icon { width: 18px; height: 18px; flex-shrink: 0; }
.calc__wa-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  background: #fff;
  color: #128C4B;
  border: 1.5px solid #25D366;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.01em;
  text-align: center;
  transition: background .15s, transform .1s;
}
.calc__wa-cta:hover { background: #f0fbf4; transform: translateY(-1px); }
.calc__wa-cta:active { transform: translateY(0); }
.calc__wa-cta-icon { width: 18px; height: 18px; flex-shrink: 0; color: #25D366; }
/* Animación de entrada la primera vez que el precio aparece */
@keyframes calc-cta-pop {
  0%   { transform: scale(0.95); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.calc__quote-cta.is-new {
  animation: calc-cta-pop 0.35s cubic-bezier(.34,1.56,.64,1) both;
}

/* Swatches de colores compactos (estilo presupuestador Nómada) */
.modal__section-count {
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.swatches-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
}
.swatch-compact {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: default;
  position: relative;
  min-width: 44px;
  background: none;
  border: none;
  padding: 2px;
  font-family: inherit;
}
.swatch-compact--clickable { cursor: pointer; }
.swatch-compact.is-selected .swatch-compact__square {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 0 0 2px var(--ink);
}
.swatch-compact.is-selected .swatch-compact__code {
  color: var(--ink);
}
.swatch-compact__square {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition: transform .15s ease;
}
.swatch-compact:hover .swatch-compact__square { transform: scale(1.08); }
.swatch-compact--border .swatch-compact__square { box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch-compact__code {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.swatch-compact--unknown .swatch-compact__square { opacity: 0.6; }
.swatch__stock {
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1.5px solid var(--bg);
  line-height: 1.2;
}
.swatch__stock--ok    { background: #0abf53; color: #fff; }
.swatch__stock--future { background: #fbbf24; color: #fff; padding: 0 4px; font-size: 11px; }
.swatch__stock--out    { background: var(--line-strong); color: var(--ink-mute); padding: 0 6px; font-size: 14px; }
.swatches__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.swatches__note strong { color: var(--ink); font-weight: 600; }
.stock-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.stock-dot--ok { background: #0abf53; }
.stock-dot--future { background: #fbbf24; }

/* Precio por cantidad (tramos) */
.price-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}
.price-tier {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.price-tier__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-weight: 600;
}
.price-tier__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Specs en ficha */
.specs {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.specs__row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}
.specs__row dt {
  color: var(--ink-mute);
  font-weight: 500;
  min-width: 90px;
}
.specs__row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.form--single { grid-template-columns: 1fr; }

/* Honeypot oculto visualmente pero accesible para bots */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Checkbox RGPD */
.rgpd-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px !important;
  color: var(--ink-soft);
  font-weight: 400 !important;
  padding: 4px 0;
}
.rgpd-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.rgpd-check span { line-height: 1.4; }
.rgpd-check a { color: var(--ink); text-decoration: underline; }
.rgpd-check a:hover { color: var(--accent-ink); }

/* ═════════ MODO PÁGINA DE PRODUCTO (19/08, patrón Moloon) ═════════
   Al entrar por la URL de un producto, la ficha se sirve como página a dos columnas
   en vez de como capa flotante. No se toca el DOM del modal (los manejadores de JS
   dependen de sus IDs): solo se cambia su presentación. Todo cuelga de .is-product-page,
   así que el catálogo normal queda exactamente igual que antes. */

/* En modo ficha, la ficha ES la página: se retira toda la portada (servicios, stats,
   confianza, top ventas, editorial, reseñas, quiénes somos, cómo trabajamos, FAQ…).
   Se ocultan las <section> hermanas en bloque en vez de enumerarlas una a una, para
   que añadir secciones nuevas a la home no vuelva a colarlas en la ficha.
   Cabecera, pie, modales y flotantes se conservan. */
.is-product-page > section,
.is-product-page > .layout,
.is-product-page > #todo-catalogo,
.is-product-page > #compare-tray,
.is-product-page > #intent-bar { display: none !important; }

/* En el HTML los modales van al final, después del pie. Al dejar de flotar, la ficha
   caería DEBAJO del footer. Con el body en columna se recoloca sin tocar el marcado. */
/* La página desplaza el documento; solo los formularios bloquean el fondo. */
.is-product-page { overflow: auto; }
.is-product-page { display: flex; flex-direction: column; min-height: 100vh; }
.is-product-page > header.topbar { order: 1; }
.is-product-page > #modal-product { order: 2; flex: 1 0 auto; }
.is-product-page > footer.foot   { order: 3; }

/* El "modal" deja de flotar y pasa a ser el contenido de la página */
.is-product-page #modal-product {
  position: static; display: block; padding: 0; animation: none; z-index: auto;
}
.is-product-page #modal-product .modal__backdrop { display: none; }
.is-product-page #modal-product .modal__card {
  max-width: 1180px; width: 100%; margin: 22px auto 60px;
  max-height: none; overflow: visible;
  box-shadow: none; border-radius: 0; background: transparent;
  animation: none; padding-left: 20px; padding-right: 20px;
}

/* Dos columnas de verdad: galería a la izquierda, configurador a la derecha.
   La izquierda se queda fija al hacer scroll — la decisión ocurre a la derecha. */
.is-product-page #modal-product .modal__grid {
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1fr);
  gap: 40px;
}
.is-product-page #modal-product .modal__media { position: sticky; top: 90px; }

/* En escritorio la acción está a la vista (columna derecha): la barra sobra.
   En móvil el botón de comprar queda a ~3 pantallas de scroll (medido: 2.364 px
   en la Turkal a 390 px), así que la barra pasa a ser fija al viewport y ES la
   forma de comprar sin volver arriba. */
@media (min-width: 901px) {
  .is-product-page #modal-sticky-cta { display: none !important; }
}
@media (max-width: 900px) {
  .is-product-page #modal-sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 70; /* por encima del header sticky (65) */
  }
}

@media (max-width: 900px) {
  .is-product-page #modal-product .modal__grid { grid-template-columns: 1fr; gap: 22px; }
  .is-product-page #modal-product .modal__media { position: static; }
  .is-product-page #modal-product .modal__card { margin-top: 12px; padding-left: 14px; padding-right: 14px; }
}

/* ───── Móvil: recuperar el ancho que se comían los paddings anidados ─────
   En una pantalla de 375 px había 66 px de margen POR LADO (14 de la tarjeta + 36
   del bloque de info + 16 del de cálculo): un tercio de la pantalla perdido, con la
   tabla de precios y las casillas de zona apretadas sin motivo. Los paddings tienen
   sentido en escritorio; anidados en móvil, no. */
@media (max-width: 620px) {
  .is-product-page #modal-product .modal__card { padding-left: 10px; padding-right: 10px; }
  .is-product-page #modal-product .modal__info  { padding-left: 6px;  padding-right: 6px; }
  .is-product-page #modal-product #calc-block   { padding-left: 10px; padding-right: 10px; }

  /* Cuatro garantías en 260 px eran ilegibles: en móvil van de dos en dos */
  .is-product-page .trustrow { grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }

  /* La casilla de zona ocupa el ancho y la imagen crece con él */
  .is-product-page .area-thumb { min-height: 0; }
  .is-product-page .calc-v2__areas-grid .area-thumb img,
  .is-product-page .area-thumb img { width: 104px !important; height: 104px !important; flex-basis: 104px; }
}

/* Checkout en móvil: una sola columna. En dos columnas cada campo se quedaba en
   192 px y escribir una dirección o un CIF ahí es incómodo — y es justo el momento
   en que no se puede perder a nadie. */
@media (max-width: 620px) {
  #form-cart { grid-template-columns: 1fr !important; }
  #form-cart > *, #form-cart .cart__paso > *, #form-cart label, #form-cart .full { grid-column: 1 / -1 !important; }  /* el botón heredaba span 2 y creaba una columna vacía de 86 px */
  #form-cart input { font-size: 16px; }   /* <16px hace que iOS haga zoom al enfocar */
}

/* Casillas de zona de marcaje al estilo Moloon: foto del área, posición, medida en
   mm y qué técnica entra ahí. Antes solo se veía "2.5×10cm" y el cliente no sabía
   ni dónde caía el logo ni con qué se marcaba. */
/* Casillas de zona en modo página: rectangulares y con la imagen grande. Antes se
   forzaban a 56 px de ancho y el croquis del marcaje era ilegible — que es justo el
   dato que el cliente necesita para decidir dónde va su logo. */
.is-product-page .calc-v2__areas-grid,
.is-product-page .calc__areas-grid {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.is-product-page .area-thumb {
  flex-direction: row !important;
  align-items: center;
  text-align: left;
  gap: 14px !important;
  padding: 12px !important;
  width: 100%;
  min-height: 154px;
  transition: border-color .12s, background .12s;
}
/* Selector de verdad: la zona elegida se ve de un vistazo, no por un borde de 1 px */
.is-product-page .area-thumb.is-active {
  border-width: 2px !important;
  border-color: var(--ink) !important;
  background: var(--bg-soft);
}
.is-product-page .area-thumb.is-active .area-thumb__size::after {
  content: ' ✓';
  font-weight: 700;
}
/* La imagen del área es EL dato de este paso: el cliente decide mirando dónde cae su
   logo. Se sube a 130 px. El selector incluye .calc-v2__areas-grid a propósito: una
   regla anterior fija ahí `height: 36px !important` y sin igualar su especificidad
   la imagen se quedaba aplastada a 36 px de alto por mucho !important que se pusiera. */
.is-product-page .calc-v2__areas-grid .area-thumb img,
.is-product-page .calc-v2__areas-grid .area-thumb__placeholder,
.is-product-page .area-thumb img,
.is-product-page .area-thumb__placeholder {
  width: 130px !important;
  height: 130px !important;
  flex: 0 0 130px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: 6px;
}
.is-product-page .area-thumb > span:not(.area-thumb__placeholder) { text-align: left; }

/* Zona sin foto de área (07/09/2026). Makito no publica la imagen de casi ninguna
   zona de la Premium line: la img daba 404, el onerror la ocultaba y el min-height
   de 154 px dejaba un recuadro vacío del tamaño de la foto que falta. Sin imagen,
   la fila se queda a la altura de su texto. */
.area-thumb--sinfoto { justify-content: flex-start; }
/* Zona que no hace la técnica elegida: se ve, pero no se puede marcar. Marcarla no
   añadía una cara —el motor solo cobra las zonas que admiten la técnica— y dejaba la
   ficha diciendo una cosa y el precio otra. */
.area-thumb--nodisp { opacity: .42; cursor: not-allowed; filter: grayscale(1); }
.area-thumb--nodisp:hover { border-color: var(--line); }
.area-thumb--nodisp .area-thumb__size { font-style: italic; }
.is-product-page .area-thumb--sinfoto { min-height: 0 !important; }

.area-thumb__pos  { display:block; font-size:12px; font-weight:600; line-height:1.3; }
.area-thumb__size { display:block; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.area-thumb__tech { display:block; font-size:11px; color:var(--ink-soft); line-height:1.3; margin-top:2px; }

/* ORDEN DE COMPRA (patrón Moloon): primero se configura, después se ve el precio y
   se compra. Antes el botón de "Añadir al carrito" salía ANTES de los pasos, así que
   forzaba a comprar 100 uds sin haber elegido color, cantidad ni técnica.
   Se reordena con flex sin tocar el marcado, para no romper ningún manejador. */
.is-product-page #calc-block { display: flex; flex-direction: column; }
.is-product-page #calc-block > * { order: 6; }             /* resto, al final */
.is-product-page #calc-block > .calc-v2__tune   { order: 1; }  /* 1-3 · los pasos */
.is-product-page #calc-block > .tiers           { order: 2; }  /* tabla de tramos */
.is-product-page #calc-block > .calc-v2__result { order: 3; }  /* el precio ya elegido */
.is-product-page #calc-block > #btn-add-cart    { order: 4; }  /* y entonces, comprar */
.is-product-page #calc-block > .calc__buy-note  { order: 5; }
.is-product-page #calc-block > .trustrow        { order: 5; }

/* El color del producto pasa a ser el paso 1, dentro de la configuración.
   El nodo lo mueve el JS (no se puede cruzar de columna solo con CSS); aquí solo
   se le da el aire de un paso más. */
.is-product-page #m-colors-section {
  margin: 0 0 16px; padding: 0 0 14px;
  border-bottom: 1px solid var(--line, #eee);
}

/* Pasos numerados en la configuración (patrón Moloon): el comprador ve que son
   cuatro decisiones cortas y no un formulario. Numeración por contador CSS, sin
   tocar el marcado existente más que con una clase en el contenedor. */
.calc-v2__tune-row { counter-increment: nomada-step; position: relative; }
.calc-v2__tune-label::before {
  content: counter(nomada-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 7px;
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}

/* ───────── Tienda (19/08): tramos, carrito y checkout ─────────
   Mecánica de compra tipo Moloon con la identidad Nómada intacta:
   se usan los tokens existentes (--ink, --accent-ink, --line), sin colores nuevos. */

/* Tabla de precios por tramo */
.tiers { margin: 14px 0 4px; }
.tiers__label { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.tiers__mute { font-weight: 400; color: var(--ink-soft); }
/* La tabla es clicable pero no lo parecía: sin este aviso nadie la usaba de selector */
.tiers__hint { display: block; font-weight: 400; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.tiers__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tiers__table th {
  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); padding: 4px 8px; border-bottom: 1px solid var(--line, #e5e5e5);
}
.tiers__table td { padding: 7px 8px; border-bottom: 1px solid var(--line, #eee); }
.tiers__row { cursor: pointer; transition: background .12s; }
.tiers__row:hover, .tiers__row:focus-visible { background: rgba(0,0,0,.035); outline: none; }
.tiers__row.is-active { background: rgba(0,0,0,.06); }
.tiers__row.is-active td:first-child { font-weight: 700; }
.tiers__off { font-weight: 600; color: var(--accent-ink, var(--ink)); }
.tiers__nudge {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px;
  width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px dashed var(--line, #ddd); border-radius: 8px;
  background: rgba(0,0,0,.025); font: inherit; font-size: 13px; text-align: left; color: var(--ink); cursor: pointer;
}
.tiers__nudge:hover, .tiers__nudge:focus-visible { background: rgba(0,0,0,.05); outline: none; }
.tiers__nudge-go { font-weight: 700; white-space: nowrap; }

/* ───── Ritmo de secciones (patrón Moloon, piel Nómada) ─────
   Moloon alterna fondo blanco y gris entre bloques: la página se lee como un
   recorrido en vez de como un muro continuo. Aquí se hace con el gris propio de
   Nómada, sin tocar tipografía ni introducir colores nuevos. */
.services, .trust, .cases, .reviews, .como, .faq {
  background: var(--bg-soft);
}
.stats, .themes, .bestsellers, .editorial-cats, .about {
  background: var(--bg-elev, #fff);
}
/* Aire entre bloques: Moloon respira mucho más que una parrilla densa */
.services, .stats, .trust, .cases, .reviews, .editorial-cats, .about, .como, .faq {
  padding-top: clamp(38px, 5vw, 64px);
  padding-bottom: clamp(38px, 5vw, 64px);
}

/* Muestras de color en la tarjeta (patrón Moloon): la gama se ve en la parrilla */
.card__swatches {
  display: flex; align-items: center; gap: 5px;
  margin: 8px 0 2px; min-height: 14px;
}
.card__swatch {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
  flex: 0 0 auto;
}
.card__swatch--claro { box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset; }
.card__swatch-more { font-size: 11px; color: var(--ink-soft); font-weight: 600; }

/* Compra segura en el pie (patrón Moloon) */
.foot__pago { margin-top: 0; }
.foot__pago-title { display: block; font-size: 13px; margin-bottom: 8px; }
.foot__pago-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0 0 8px; padding: 0;
}
.foot__pago-list li {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.foot__pago-note { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.68); }

/* ───── Tarjeta de producto con acción visible (patrón Moloon, piel Nómada) ─────
   El CTA deja de aparecer solo al pasar el ratón: en una tienda la acción se ve
   siempre, y en móvil el hover ni existe. Se mantiene el negro de Nómada; de Moloon
   se copia la estructura (botón + línea de condiciones), no su color. */
.card__buy {
  display: block; width: 100%;
  margin: auto 0 6px; padding: 10px 12px;
  background: var(--ink); color: #fff; border: 0; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity .12s;
}
.card__buy:hover { opacity: .88; }
.card__ship {
  margin: 0; font-size: 11px; color: var(--ink-soft); text-align: center;
}

/* Fecha de entrega estimada: va justo bajo el botón de comprar, que es donde el
   comprador se pregunta si le llega a tiempo. */
.entrega {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.entrega__nota { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 3px; }

/* Botón de compra: es el principal cuando hay precio cerrado (orden Moloon) */
.btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin: 14px 0 8px; padding: 15px 18px;
  background: var(--ink); color: #fff; border: 0; border-radius: 10px;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.btn-buy:hover { opacity: .9; transform: translateY(-1px); }
.btn-buy:active { transform: none; }
.calc__buy-note {
  margin: 0 0 14px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); text-align: center;
}

/* Fila de garantías (patrón Moloon: resuelve las dudas del que va a pagar) */
.trustrow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  list-style: none; margin: 0 0 16px; padding: 12px 0;
  border-top: 1px solid var(--line, #eee); border-bottom: 1px solid var(--line, #eee);
}
.trustrow li { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.trustrow strong { font-size: 12px; }
.trustrow span { font-size: 11px; color: var(--ink-soft); line-height: 1.3; }

/* Presupuesto degradado a secundario cuando se puede comprar */
.calc__quote-cta--secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line, #ccc) !important;
  font-weight: 500 !important;
}

/* Carrito en la cabecera */
.how-link--cart { font-variant-numeric: tabular-nums; }
/* Mis ideas en la cabecera. Mismo componente que el carrito: es el otro sitio al
   que se vuelve, y en una tienda B2B se vuelve más aquí que al carrito. */
.how-link--ideas { font-variant-numeric: tabular-nums; }

/* ───────────── Mis ideas ─────────────
   Se apoya en lo que ya existe (.compare-table, .related-card, .modal__card--wide):
   esto solo añade las pestañas, la rejilla de ideas y el pie de acciones. */
body.ideas-abierto .compare-tray { display: none; }

/* La barra de Mis ideas en el móvil. Medido el 04/09 a 375 px: con 4 ideas ocupaba
   unos 600 px de 812 —media pantalla— porque enseñaba título, explicación, la lista
   de productos y tres botones. En un teléfono eso no es una barra, es una pantalla.
   Se queda en una línea con lo que hay que poder hacer: ver, comparar y llevársela;
   la lista completa está a un toque en el panel, que en móvil se ve mucho mejor. */
@media (max-width: 700px) {
  .compare-tray__inner { padding: 10px 14px; }
  .compare-tray__hint,
  .compare-tray__list { display: none; }
  .compare-tray__head { margin: 0 0 8px; }
  .compare-tray__actions { gap: 8px; }
  .compare-tray__actions .btn-secondary { flex: 0 0 auto; }
  .compare-tray__actions .btn-primary { flex: 1 1 auto; }
  /* Y el WhatsApp deja de montarse encima de los botones de la bandeja.
     Medido en 375x812 con la bandeja compacta: 199 px de alto; 104 px lo dejaba
     justo encima de "Comparar". */
  .compare-tray.is-open ~ .fab-whatsapp,
  body:has(.compare-tray.is-open) .fab-whatsapp { bottom: 214px; }
}
.ideas-tabs { display: flex; gap: 6px; margin-top: 14px; }
.ideas-tab {
  padding: 7px 14px; border: 1px solid var(--line, #e2e8f0); background: transparent;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-mute); cursor: pointer;
}
.ideas-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
#ideas-pane { padding: 0 40px 8px; }
.ideas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .ideas-grid { grid-template-columns: repeat(3, 1fr); } }
.idea-card {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; border: 1px solid var(--line, #e2e8f0); text-align: left;
}
.idea-card img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 64px; }
.idea-card__body { min-width: 0; }
.idea-card__name { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.idea-card__cfg { display: block; font-size: 12px; color: var(--ink-mute); line-height: 1.4; }
.idea-card__remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line, #e2e8f0); background: var(--bg, #fff); color: var(--ink-mute);
  font-size: 11px; display: grid; place-items: center; cursor: pointer;
}
.ideas-foot { padding: 8px 40px 28px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ideas-empresa { font-size: 13px; color: var(--ink-mute); margin-right: auto; }
/* Foto del área dentro de la comparativa: "zona 2" no es un sitio, la foto sí. */
.compare-cell__area { width: 100%; max-width: 120px; height: auto; display: block;
  border: 1px solid var(--line, #e2e8f0); margin-bottom: 6px; background: #fff; }
.compare-cell__precios { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.compare-cell__precios span { display: flex; justify-content: space-between; gap: 10px; }
.compare-cell__precios .es-suya { background: #ecfeff; margin: 0 -4px; padding: 1px 4px; border-radius: 3px; }

/* Líneas del carrito */
.cart__item {
  display: flex; gap: 12px; justify-content: space-between; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line, #eee);
}
.cart__item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart__item-meta { font-size: 12px; color: var(--ink-soft); }
.cart__item-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cart__qty { width: 64px; padding: 5px 6px; border: 1px solid var(--line, #ccc); border-radius: 6px; font: inherit; font-size: 13px; }
.cart__item-price { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.cart__remove { border: 0; background: none; cursor: pointer; color: var(--ink-soft); font-size: 15px; line-height: 1; padding: 4px; }
.cart__remove:hover { color: var(--ink); }
@media (max-width: 620px) {
  .cart__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; position: relative; }
  .cart__item-img { grid-column: 1; grid-row: 1 / 3; }
  .cart__item-main { grid-column: 2; grid-row: 1; padding-right: 28px; }
  .cart__item-side { grid-column: 2; grid-row: 2; justify-content: space-between; padding-right: 28px; }
  .cart__remove { position: absolute; top: 8px; right: 0; }
}
.cart__empty { color: var(--ink-soft); font-style: italic; padding: 16px 0; }
.cart__pending { margin: 14px 0; padding: 16px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; background: var(--bg-soft, #f7f8fa); }
.cart__pending strong { display: block; margin-bottom: 5px; }
.cart__pending p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.cart__pending a { display: inline-block; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.cart__pending a:hover { opacity: .88; }

/* Totales */
.cart__totals { margin: 14px 0 18px; }
.cart__pricing-status { margin: -6px 0 14px; color: var(--muted, #5a6677); font-size: 13px; }
.cart__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.cart__row--mute { color: var(--ink-soft); font-size: 13px; }
.cart__row--total { border-top: 1px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 17px; }
.cart__legend { font-size: 13px; font-weight: 600; margin: 4px 0 2px; grid-column: 1 / -1; }
.cart__local-preview {
  grid-column: 1 / -1;
  margin: 8px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}
.cart__local-preview[hidden] { display: none; }
.cart__local-preview strong { color: var(--ink); }

/* Subida de logo en el modal de presupuesto (circuito de montaje 19/08).
   Usa los tokens de color existentes: cero cambio de look, solo un campo más. */
.quote-logo__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.quote-logo__drop {
  display: block;
  border: 1.5px dashed var(--line, #ccc);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s;
  line-height: 1.4;
}
.quote-logo__drop:hover,
.quote-logo__drop.is-dragover { border-color: var(--ink); color: var(--ink); }
.quote-logo__drop.is-done { border-style: solid; border-color: var(--ink); color: var(--ink); }
.quote-logo__status { margin: 6px 0 0; font-size: 13px; }
.quote-logo__status.is-error { color: #c0392b; }

/* ───────────── Form ───────────── */
.modal__lede { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; }
.modal__product-tag {
  background: var(--bg-soft);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  margin: 0 0 20px;
  color: var(--ink-soft);
}
.modal__product-list {
  background: var(--bg-soft);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin: 0 0 20px;
  font-size: 13px;
}
.modal__product-list__head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0 0 8px;
}
.modal__product-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal__product-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--bg-elev);
  border-radius: 6px;
  border: 1px solid var(--line);
}
.modal__product-list img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  background: var(--bg);
  border-radius: 4px;
  padding: 2px;
  flex-shrink: 0;
}
.modal__product-list__name {
  flex: 1;
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal__product-list__ref {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: ui-monospace, monospace;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form .full { grid-column: span 2; }
.cart__guest-note {
  margin: -6px 0 3px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}
.form .cart__invoice-toggle {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  cursor: pointer;
}
.cart__invoice-toggle input[type="checkbox"] { width: 17px; height: 17px; padding: 0; }
.cart__invoice-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}
.cart__invoice-fields[hidden] { display: none; }
.cart__invoice-fields .cart__legend { margin: 0; }
.form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.form input, .form select, .form textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form textarea { resize: vertical; }
.form .btn-primary { grid-column: span 2; }
.form + p { grid-column: span 2; }
.form__help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mute);
  line-height: 1.4;
}

.success {
  text-align: center;
  padding: 24px 0;
}
.success h3 {
  color: #16a34a;
  font-size: 22px;
  margin: 0 0 8px;
}
.success p {
  color: var(--ink-soft);
  margin: 0 0 24px;
}

/* ───────────── Casos reales ───────────── */
.cases {
  padding: 72px 32px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cases__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.cases__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.case-card {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
/* Cuando exista foto (.case-card__media presente), el padding se anula arriba
   para que la imagen llegue al borde, y los children llevan padding lateral. */
.case-card:has(.case-card__media) {
  padding: 0 0 24px;
}
.case-card:has(.case-card__media) .case-card__client,
.case-card:has(.case-card__media) .case-card__what,
.case-card:has(.case-card__media) .case-card__meta {
  padding-left: 28px;
  padding-right: 28px;
}
.case-card__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  margin: 0 0 12px;
  overflow: hidden;
  position: relative;
}
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-card__client {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.case-card__what {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.case-card__meta {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.case-card__meta li {
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--ink-soft);
}
.cases__note {
  margin-top: 36px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-mute);
}
@media (max-width: 900px) {
  .cases { padding: 48px 20px; }
  .cases__grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .cases__grid { grid-template-columns: 1fr 1fr; }
  .cases__grid .case-card:last-child { grid-column: span 2; }
}

/* ─────────────────────────────────────────────
   Botón compartir ficha de producto (sesión 8)
   ───────────────────────────────────────────── */
.modal__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.modal__title-row h2, .modal__title-row #m-name {
  margin: 0;
  flex: 1 1 auto;
}
.btn-share {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line, #e3e6ea);
  color: var(--ink, #0b0c0f);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-top: 4px;
}
.btn-share:hover {
  background: var(--ink, #0b0c0f);
  color: #fff;
  border-color: var(--ink, #0b0c0f);
}
.btn-share svg {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .btn-share span {
    display: none;
  }
  .btn-share {
    padding: 6px 8px;
  }
}

/* Toast notificación tras copiar link */
.nm-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0b0c0f;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
}
.nm-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─────────────────────────────────────────────
   Banner estreno (sesión 8, autoexpiración 26/05)
   ───────────────────────────────────────────── */
.launch-banner {
  background: #f7f5f0;
  border-bottom: 1px solid #ece8de;
  padding: 10px 20px;
  font-size: 13.5px;
  color: #4a4a4a;
  text-align: center;
  position: relative;
  line-height: 1.4;
}
.launch-banner__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding-right: 28px;
}
.launch-banner strong {
  color: #0b0c0f;
  font-weight: 600;
}
.launch-banner a {
  color: #0b0c0f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.launch-banner__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.launch-banner__close:hover {
  color: #0b0c0f;
  background: rgba(0,0,0,0.05);
}
@media (max-width: 600px) {
  .launch-banner {
    font-size: 12.5px;
    padding: 9px 16px;
  }
  .launch-banner__inner {
    padding-right: 24px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   CALC v2 — precio arriba, inputs compactos, explicación colapsable.
   Rediseño sesión 14 tarde: el v1 era 12 bloques separados estilo wizard;
   el v2 unifica todo en 4 secciones visuales claras (resultado / ajustes /
   trust / CTA). Coexisten ambos a través de .calc--v2 (modificador).
   ═════════════════════════════════════════════════════════════════════════ */

/* En v2, el <h3> "Calcular precio orientativo" se omite — el bloque de
   resultado ya hace de heading visual. Y los .calc__row/.calc__areas-help
   viejos se neutralizan (display:contents si quedasen sueltos). */
.calc--v2 { display: flex; flex-direction: column; gap: 14px; }
.calc--v2 > h3 { display: none; }

/* ─── 1) RESULTADO arriba ───────────────────────────────────────────────── */
.calc-v2__result {
  background: linear-gradient(180deg, #fafafb 0%, #f4f4f6 100%);
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 14px 16px;
}
.calc-v2__result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.calc-v2__result-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-mute);
}
.calc-v2__info-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #d4d4d8;
  border-radius: 999px;
  color: var(--ink-mute);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.calc-v2__info-toggle:hover { background: #fff; color: var(--ink); }
.calc-v2__info-toggle[aria-expanded="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.calc-v2__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--ink);
  margin-bottom: 4px;
}
.calc-v2__price strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.calc-v2__price-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
@media (max-width: 640px) {
  .calc-v2__price-group { flex-basis: 100%; }
  .calc-v2__price-sep { display: none; }
}
.calc-v2__price-unit, .calc-v2__price-total {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
}
.calc-v2__price-unit { margin-right: 4px; }
.calc-v2__price-sep { color: #d4d4d8; margin: 0 4px; }
.calc-v2__price-mute { color: #a0a0a8; font-size: 11px; }
.calc-v2__context {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.calc-v2__info-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e5ea;
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.calc-v2__info-body p { margin: 0; }

/* ─── 2) AJUSTES compactos ──────────────────────────────────────────────── */
.calc-v2__tune {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 12px;
}
.calc-v2__tune-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-v2__tune-row--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.calc-v2__tune-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
}
.calc-v2__tune-sublabel {
  font-size: 11px;
  color: var(--ink-mute);
  margin-left: 4px;
}
.calc-v2__qty-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.calc-v2__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
}
.calc-v2__qty input[type="number"] {
  width: 60px;
  border: none;
  padding: 4px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  background: transparent;
}
.calc-v2__qty input[type="number"]:focus { outline: none; }
.calc-v2__select {
  padding: 6px 10px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.calc-v2__select:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: -1px; }
.calc-v2__select--grow { flex: 1 1 200px; }
.calc-v2__select--small { width: auto; min-width: 60px; }

/* Áreas compactas (eran tarjetas grandes, ahora mini-tarjetas) */
.calc-v2__areas-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important;
  gap: 6px !important;
}
.calc-v2__areas-grid .area-thumb {
  padding: 4px !important;
  gap: 2px !important;
}
.calc-v2__areas-grid .area-thumb img,
.calc-v2__areas-grid .area-thumb__placeholder {
  height: 36px !important;
}
.calc-v2__areas-grid .area-thumb__size {
  font-size: 10px;
}
.calc-v2__area-info {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Pills de cantidad: reaprovechan estilos existentes pero un poco más compactos */
.calc--v2 .calc__qty-presets button {
  font-size: 12px;
  padding: 5px 10px;
}

/* Móvil: misma compactación */
@media (max-width: 600px) {
  .calc-v2__price strong { font-size: 24px; }
  .calc-v2__tune-row--inline { flex-direction: column; align-items: flex-start; gap: 6px; }
  .calc-v2__select--grow { width: 100%; flex: 1 1 100%; }
}

/* Mini-hint encima de los inputs de ajuste (orden v2.1: CTAs van arriba) */
.calc-v2__tune-hint {
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Separador "o:" entre presets de cantidad y el input personalizado */
.calc-v2__qty-sep {
  font-size: 11px;
  color: var(--ink-mute);
  margin: 0 4px;
  font-style: italic;
}
.calc-v2__tune-hint-mute {
  color: #a0a0a8;
  font-weight: 400;
  font-style: normal;
}
.calc-v2__tune-hint {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}

/* Asegurar que los 6 presets caben sin descuadrar */
.calc--v2 .calc__qty-presets {
  flex-wrap: wrap;
  gap: 4px;
}
.calc--v2 .calc__qty-presets button {
  padding: 5px 9px;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════════════
   F9 — Form a 2 obligatorios + WhatsApp paralelo prominente.
   En el modal de presupuesto, el WhatsApp es CTA principal alternativo
   al form, no un link discreto. Cliente elige vía con paridad visual.
   ════════════════════════════════════════════════════════════════════════ */
.btn-wa-prominent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  margin: 12px 0 14px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
}
.btn-wa-prominent:hover {
  background: #1ebb56;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}
.btn-wa-prominent svg { flex-shrink: 0; }
.modal__or {
  text-align: center;
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.5px;
}

/* ─── Bloque SSR (bots / no-JS; app.js lo retira al arrancar) ─── */
.js #ssr-seo{display:none}  /* también en la ficha: el servidor ya la pinta (01/10/2026) */
.ssr-seo{max-width:1080px;margin:28px auto;padding:0 20px;line-height:1.55}
.ssr-seo__crumbs{font-size:.85rem;opacity:.75;margin-bottom:8px}
.ssr-seo__meta{font-size:.9rem;opacity:.8}
.ssr-seo img{max-width:320px;height:auto;border-radius:10px;display:block;margin:12px 0}
.ssr-seo table{border-collapse:collapse;margin:12px 0}
.ssr-seo th,.ssr-seo td{border:1px solid #ddd;padding:5px 12px;text-align:left;font-size:.9rem}
.ssr-seo ul{columns:3;column-gap:32px;padding-left:20px;margin:12px 0}
@media(max-width:720px){.ssr-seo ul{columns:1}}

/* Móvil: cabecera de categoría ANTES de los filtros sticky (contexto primero, 18/07). */
@media (max-width: 600px) {
  .results { display: flex; flex-direction: column; }
  .results .cat-header { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   Cuarta tanda hacia Moloon (19/08/2026)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Etiquetas de tarjeta: una sola pila, máximo dos ──
   Antes cada etiqueta se posicionaba sola (top ventas arriba-izquierda, eco
   arriba-derecha) y se peleaban con el botón de comparar. Apiladas en un flex
   se colocan solas y da igual cuántas haya. */
.card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  gap: 4px;
  /* deja libre la esquina del botón de comparar */
  max-width: calc(100% - 56px);
}
.card__badges .card__badge {
  position: static;
  top: auto; left: auto; right: auto;
  white-space: nowrap;
}
/* eco pasa del verde genérico al verde del manual de identidad (Pantone 555) */
.card__badges .card__badge--eco { background: var(--green); }
/* Nuevo: cian de marca oscurecido, que sobre blanco sí se lee */
.card__badge--new {
  background: var(--accent-ink);
  color: var(--white);
}

/* ── Parrilla en móvil ──
   Medido a 390 px antes de tocar nada: la tarjeta da 157 px de ancho y 131 de
   contenido. Ahí "Personalizar y ver precio" ocupaba TRES líneas (botón de
   59 px) y la línea de meta otras tres, así que la foto —lo único que hace
   decidir— quedaba en 155 px dentro de una tarjeta de 458. */
.card__buy-short { display: none; }
@media (max-width: 620px) {
  .card__buy-long { display: none; }
  .card__buy-short { display: inline; }
  /* margin-top auto: el botón va al pie en todas las tarjetas, haya o no fila de colores */
  .card__buy { margin: auto 0 4px; padding: 9px 8px; font-size: 12.5px; }
  .card__facts, .card__swatches { margin-bottom: 6px; }
  /* el material se lee en la ficha; aquí solo estorba y rompe la línea */
  .card__meta-sep, .card__meta-mat { display: none; }
  /* "mín. 25" ya lo dice la línea de envío justo debajo: no se repite */
  .card__meta-qty::after { content: ''; }
  .card__price { padding-top: 6px; }
  .card__price strong { font-size: 16px; }
  .card__price-context { font-size: 10px; }
  .card__facts { font-size: 11px; }
  .card__swatches { margin: 6px 0 0; }
  .card__badges { top: 6px; left: 6px; gap: 3px; }
  .card__badge { font-size: 9px; padding: 2px 6px; }
}

/* ── Títulos de sección centrados (Moloon) ──
   La composición se centra; el texto y la voz siguen siendo los de Nómada. */
.section-head { text-align: center; }
.section-head p { margin-left: auto; margin-right: auto; }

/* Nota de técnica bajo el selector de colores del logo (tanda 2b).
   El cliente elige colores; la técnica se decide por dentro y se dice aquí:
   traducir la jerga no es esconderla. */
.calc-v2__tech-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
}
/* Rojo pedido por Gabriela (22/10); .modal__section p lo dejaba gris. */
.calc-v2__dark-note,
.modal__section .calc-v2__dark-note {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #d0021b;
}

/* Base del hero de tienda; la portada fotográfica se ajusta al final. */
.hero--shop .hero__inner {
  max-width: var(--container);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.hero--shop .hero__text { min-width: 0; }
.hero--shop h1,
.hero--shop .hero__claim { font-size: clamp(32px, 4.2vw, 56px); }
.hero--shop .hero__cta { gap: 12px; }

/* Franja de confianza: lo que Moloon repite en todo el flujo. */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  list-style: none; margin: 20px 0 0; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.hero__trust li { display: flex; align-items: center; gap: 6px; }
.hero__trust li::before {
  content: '✓'; color: var(--accent-ink); font-weight: 700;
}

@media (max-width: 900px) {
  .hero--shop .hero__inner { grid-template-columns: 1fr; gap: 22px; }
  .hero__trust { font-size: 12px; gap: 6px 14px; }
}

/* Carrito con foto y fecha (tanda 4, patrón Moloon).
   La foto no es decoración: es cómo se reconoce lo que se está a punto de pagar
   cuando el carrito lleva tres líneas parecidas. */
.cart__item-img {
  width: 56px; height: 56px; flex-shrink: 0;
  object-fit: contain; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
/* La entrega va DEBAJO del total: es lo último que se mira antes de pagar,
   y responde la objeción número uno del merch B2B. */
.cart__row--entrega {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
  font-size: 13px; color: var(--ink-soft);
}
.cart__row--entrega span:last-child { font-weight: 600; color: var(--ink); }

/* Vista filtrada: el bloque de titular se comprime para que la parrilla suba.
   El párrafo explicativo ("quita filtros para volver...") sobra cuando los chips
   de filtro activo ya están justo debajo diciendo lo mismo y con botón. */
.layout__head.layout__head--compact { margin: 8px auto 0 !important; padding: 0 32px !important; }
.layout__head--compact .section-head { margin-bottom: 14px; text-align: left; }
.layout__head--compact .section-head h2 { font-size: clamp(22px, 2.4vw, 30px); }
.layout__head--compact .section-head p { display: none; }

/* ── Filtros plegables en móvil (patrón Moloon) ──
   Desplegados ocupaban 203 px en 390 px de ancho y dejaban la primera fila de
   productos justo en el borde del pliegue. En escritorio no cambia nada. */
.filter-toggle { display: none; }
.filter-show-results { display: none; }
@media (max-width: 720px) {
  .filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 10px; padding: 9px 14px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--bg-elev); color: var(--ink);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .filter-toggle__count {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--ink); color: var(--white);
    font-size: 11px; font-weight: 700;
  }
  .filter-bar { display: none; }
  .filter-bar.is-open { display: block; }
  .filter-show-results {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 44px; margin-top: 12px; padding: 10px 16px;
    border: 0; border-radius: 9px; background: var(--ink); color: var(--white);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .results__head { scroll-margin-top: 185px; }
}

/* Error de campo en el checkout: el CIF se valida antes de pagar porque uno
   mal escrito no lo caza nadie hasta que la factura sale mal en Odoo. */
.form .is-invalid {
  border-color: var(--red);
  background: #fef2f2;
}
.field-error {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--red);
  line-height: 1.35;
}
.field-error--shipping { grid-column: 1 / -1; }
.field-error--shipping button { display: block; margin-top: 7px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }

/* Migas de pan en la ficha (patrón Moloon + respaldo visible del BreadcrumbList). */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 10px; font-size: 12px; color: var(--ink-mute);
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb__sep { opacity: .5; }
.breadcrumb [aria-current="page"] {
  color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch;
}

/* "Seguir comprando": la salida del carrito tiene que estar a la vista, no
   escondida tras la ✕. Añadir al carrito no es un compromiso de pagar. */
.cart__seguir {
  display: inline-block; margin: 10px 0 2px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-elev); color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cart__seguir:hover { color: var(--ink); border-color: var(--ink); }

/* Reservar la barra de compra también en escritorio, donde WhatsApp tapaba
   «Verlo con mi logo». Altura estable para que no salte al aparecer la barra;
   en móvil se conserva oculto porque la ficha ya ofrece la ayuda por WhatsApp. */
.is-product-page .fab-whatsapp { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* Aviso de stock del color: ámbar cuando queda poco, rojo cuando no queda nada.
   Va pegado al botón de comprar porque es ahí donde la decisión se toma. */
.calc__stock-aviso {
  margin: 8px 0 0; padding: 9px 12px;
  border-radius: 8px; font-size: 13px; line-height: 1.45;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
}
.calc__stock-aviso--stop {
  background: #fef2f2; border-color: #fca5a5; color: #991b1b;
}

/* Pista de multi-zona: sin ella nadie descubre que se pueden marcar las dos caras. */
.calc-area-hint { color: var(--accent-ink); font-weight: 600; }


/* El claim del hero sale como <p> en ficha y categoría (para no duplicar el H1):
   tiene que verse exactamente igual que el <h1> de la home. */
.hero .hero__claim {
  margin: 0 0 20px;
  max-width: none;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

/* Aviso de stock corto: avisa antes de pagar, no bloquea la compra. */
.calc-stock-aviso {
  margin: 8px 0 0; padding: 9px 12px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: #92400e;
}

/* Con 7 temáticas (entró "Fitness y bienestar" el 20/08) la última fila de la
   rejilla de 3 se queda con un tile solo, que es justo lo que Iván detectó como
   "se ve a medias". Un tile huérfano se centra en vez de quedarse a la izquierda. */
@media (min-width: 721px) {
  .theme-tiles > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* ── Carrito en dos pasos (02/09/2026) ────────────────────────────────────────
   Añadir al carrito abría el formulario fiscal entero: 11 personas abrieron el
   carrito en 30 días y ninguna escribió un carácter. Ahora la cesta se cierra con
   un solo botón y los datos vienen después, como en Moloon. */
.cart__cierre { margin-top: 18px; }
.cart__tramitar { width: 100%; justify-content: center; font-size: 16px; padding: 14px 18px; }
.cart__cierre .modal__small { margin-top: 10px; }
#form-cart .cart__seguir { margin-bottom: 12px; }

/* ── Casilla de zona: la técnica manda (02/09/2026) ───────────────────────────
   Copiado del paso 3 de Moloon, que lista "Serigrafía · Delante · 300×300 mm":
   la técnica delante y en negro, porque es lo que decide el precio; la posición
   debajo; y la medida al final, en gris y pequeña. Antes la medida iba primero
   en negrita y la técnica en gris, así que dos zonas de la misma medida se leían
   como la misma opción. */
.area-thumb__tech { font-size:13px !important; font-weight:700 !important; color:var(--ink) !important; margin-top:6px !important; }
.area-thumb__pos  { font-size:12px !important; font-weight:500 !important; color:var(--ink-soft); }
.area-thumb__size { font-size:12px !important; font-weight:500 !important; color:var(--ink-soft); }

/* ── Pasos plegables de la ficha (02/09/2026) ─────────────────────────────────
   Acordeón al estilo Moloon: número, título, y lo elegido a la derecha. Se pliega
   en vez de ocultarse, para no perder el precio de entrada. */
.calc-v2__tune .paso { border:1px solid var(--line); border-radius:10px; margin-bottom:8px; overflow:hidden; }
.paso__head { display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px;
  background:none; border:0; cursor:pointer; text-align:left; font:inherit; }
.paso__head:hover { background:var(--bg-soft, #fafafa); }
.paso__n { flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--ink); color:#fff;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.paso__tit { font-size:14px; font-weight:600; color:var(--ink); }
.paso__val { margin-left:auto; font-size:13px; color:var(--ink-soft); text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52%; }
.paso__chev { flex:0 0 auto; color:var(--ink-soft); transition:transform .18s ease; }
.paso--abierto .paso__chev { transform:rotate(180deg); }
.paso__body { display:none; padding:0 14px 14px; }
.paso--abierto .paso__body { display:block; }
/* Paso hecho (26/09): check en vez de número, como Moloon y GiftCampaign. */
.paso--hecho .paso__n { background:var(--accent-ink); }
.paso__siguiente { display:block; width:100%; margin-top:12px; padding:11px 14px; border:0; border-radius:8px;
  background:var(--ink); color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.paso__siguiente:hover, .paso__siguiente:focus-visible { opacity:.88; outline:none; }
/* Con la tabla de tramos dentro del paso, los botones de cantidad sobran: la tabla
   es el selector y queda «Otra cantidad» para lo demás. */
#calc-qty-row .tiers { margin:0 0 12px; }
#calc-qty-row .tiers__table td { white-space:nowrap; }
@media (max-width: 480px) {
  #calc-qty-row .tiers__table th, #calc-qty-row .tiers__table td { padding:7px 4px; }
}
#calc-qty-row.con-tramos .calc__qty-presets { display:none; }
/* La etiqueta antigua sobra: el título ya está en la cabecera del paso. */
.calc-v2__tune .paso .calc-v2__tune-label { display:none; }

/* Aviso de corrección ortográfica del buscador. Sobre la parrilla, discreto:
   informa de qué se buscó en realidad sin robarle sitio a los productos. */
.grid__correccion {
  margin: 0 0 16px;
  font-size: .875rem;
  color: var(--ink-soft);
}
.grid__correccion strong { color: var(--ink); font-weight: 600; }

/* Tabla "Dónde puedes marcarlo": todas las parejas zona+técnica del producto.
   Es la vista de referencia — la gente entra a ver qué se puede hacer y de qué
   tamaño — así que se lee como una tabla técnica, no como un selector. */
.marcajes__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.marcajes {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.marcajes th, .marcajes td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.marcajes thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-mute);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
/* La zona agrupa sus técnicas con rowspan: se separa con línea propia para que
   se lea "en esta zona puedo hacer estas tres cosas". */
.marcajes tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
}
.marcajes__mm { white-space: nowrap; font-variant-numeric: tabular-nums; }
.marcajes__tintas { white-space: nowrap; color: var(--ink-soft); }


/* ── Las tres salidas de la ficha, juntas ──────────────────────────────────────
   Estaban repartidas: comprar bajo el precio, la propuesta entre el plazo y los
   avisos, y "pedir presupuesto" detrás de las especificaciones. Quien decide no
   las veía a la vez. Ahora forman un bloque, con el peso visual ordenado por
   compromiso: comprar sólido, propuesta en contorno, hablar como enlaces. */
.acciones { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.acciones > .btn-buy { margin: 0; width: 100%; }
/* Segunda vía de compra, para quien lleva varios productos: enlace, no botón,
   para que «Comprar» siga siendo la decisión (25/09/2026). */
.btn-add-only { background: none; border: 0; padding: 2px 0; color: var(--ink-soft); font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.btn-add-only:hover { color: var(--ink); }

/* Propuesta en PDF: mismo tamaño y forma que comprar, en contorno. La mayoría
   entra a ver modelos y áreas, no a comprar hoy: esta es su salida natural y
   tiene que verse como una opción de verdad, no como un pie de página. */
.btn-propuesta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 18px;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.btn-propuesta:hover { background: var(--ink); color: #fff; }
.btn-propuesta svg { flex: 0 0 auto; }

/* Comprar y ver el montaje, al mismo nivel (Iván, 25/09/2026). GiftCampaign solo vende
   por la segunda vía —precio en la ficha + muestra virtual en 24 h— y aquí es la acción
   que mejor convierte: no puede verse como secundaria. Relleno azul Nómada, mismo alto,
   mismo radio y misma letra que comprar; en escritorio, uno al lado del otro. */
.acciones .btn-montaje {
  background: var(--accent); color: var(--ink);
  border: 0 !important; border-radius: 10px;
  padding: 15px 18px; font-size: 15px; font-weight: 700; min-height: 53px;
}
.acciones .btn-montaje:hover { background: #009fc5; color: var(--ink); }
.acciones .btn-montaje .btn-montaje__nota { color: var(--ink); opacity: .8; }
@media (min-width: 700px) {
  .acciones { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .acciones > .btn-buy, .acciones > .btn-montaje { height: 100%; }
  .acciones > *:not(.btn-buy):not(.btn-montaje) { grid-column: 1 / -1; }
}

/* Hablar con alguien: la tercera salida. Enlaces en una línea — presentes donde se
   decide, sin competir con los dos botones. */
.acciones__hablar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.acciones .calc__quote-cta,
.acciones .calc__wa-cta {
  width: auto; margin: 0; padding: 4px 0;
  background: none; border: 0; box-shadow: none;
  color: var(--ink-soft); font-size: .875rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.acciones .calc__quote-cta:hover,
.acciones .calc__wa-cta:hover { color: var(--ink); }
.acciones .calc__quote-cta-icon { display: none; }
.acciones .calc__wa-cta-icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.acciones .calc__cta-microcopy { margin: 0; font-size: .8125rem; color: var(--ink-mute); }

/* "Sin stock" en la tarjeta de la parrilla. Se enseña el producto igual —el 9% del
   catálogo está a cero y esconderlo sería esconder 400 referencias— pero se dice
   antes de abrir la ficha. Ámbar, no rojo: no es un error, es un plazo. */
.card__sinstock {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* La información debe poder encogerse dentro del grid/flex móvil.
   El scroll, si lo necesita una tabla, pertenece a su contenedor. */
.modal__info { min-width: 0; max-width: 100%; }
.marcajes__scroll { max-width: 100%; overflow-x: auto; }
@media (max-width: 820px) {
  .modal__grid > .modal__info { width: 100%; box-sizing: border-box; }
  .modal__media > .product-image-zoom { width: calc(100% - 32px); box-sizing: border-box; }
  .modal__thumbs { max-width: 100%; box-sizing: border-box; flex-wrap: wrap; }
  .calc-v2__price, .acciones { min-width: 0; }
  .acciones > button, .acciones > a { white-space: normal; overflow-wrap: anywhere; }
}
.choice-guide { margin: 16px 0 24px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); }
.product-return { display: inline-flex; margin: 0 0 20px; padding: 10px 0; color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.product-return:hover { color: var(--ink); text-decoration: underline; }
.card__name a { color: inherit; text-decoration: none; }
a.card__buy { text-decoration: none; text-align: center; }
.product-return:focus-visible, .card a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.product-description-details { margin: 20px 0; padding: 16px 0; border-block: 1px solid var(--line); }
.product-description-details summary { cursor: pointer; font-weight: 600; }
#product-benefit { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 18px; }
/* El precio y la entrega acompañan la configuración, también antes de desplegar
   todos los pasos. La tabla de descuentos queda después de las acciones. */
.is-product-page #calc-block > .calc-v2__result { order: 0; }
.is-product-page #calc-block > #calc-entrega { order: 0; }
.is-product-page #calc-block > #calc-stock-aviso { order: 2; }
.is-product-page #calc-block > #calc-acciones { order: 3; }
.is-product-page #calc-block > .tiers { order: 4; }
@media (max-width: 820px) {
  .is-product-page #modal-product .modal__grid { gap: 8px; }
  .is-product-page .modal__info { display: contents; }
  .is-product-page .modal__info > * { order: 8; min-width: 0; max-width: 100%; }
  .is-product-page .modal__info > .breadcrumb { order: -3; }
  .is-product-page .modal__info > .modal__title-row { order: -2; }
  .is-product-page .modal__info > .modal__ref { order: -1; margin-bottom: 0; }
  .is-product-page .modal__info > #product-benefit { order: 4; margin: 0 6px 8px; }
  .is-product-page .modal__info > #calc-block { order: 5; }
  .is-product-page .modal__media > .product-image-zoom { margin-top: 0; max-height: 230px; }
  .is-product-page .modal__media .product-image-zoom > img { max-height: 230px; }
  .is-product-page .modal__info #m-name { font-size: 25px; }
}
.choice-guide h3 { margin: 0 0 10px; font-size: 18px; }
.choice-guide p { margin: 8px 0; font-size: 14px; line-height: 1.5; }
.choice-guide a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.choice-guide__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.choice-guide__item { min-width: 0; }
@media (max-width: 620px) {
  .choice-guide__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 82%);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }
  .choice-guide__item { scroll-snap-align: start; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
}
@media (max-width: 360px) {
  .topbar .brand__name { display: none; }
  .topbar__actions { gap: 6px; min-width: 0; }
  .topbar__actions .how-link { padding-left: 10px; padding-right: 10px; }
}

/* Ficha amplia: presentación compacta y configurador bajo ella, a todo el ancho.
   El resumen conserva los mismos nodos y cálculos de precio y compra. */
.product-order-summary { display: contents; }
.product-order-summary > * { min-width: 0; order: 6; }
.product-order-summary > .calc-v2__result,
.product-order-summary > #calc-entrega { order: 0; }
.product-order-summary > #calc-stock-aviso { order: 2; }
.product-order-summary > #calc-acciones { order: 3; }
.product-order-summary > .calc__buy-note,
.product-order-summary > .trustrow { order: 5; }
@media (min-width: 901px) {
  .is-product-page #modal-product .modal__card {
    max-width: 1480px; padding-inline: 32px; margin-top: 12px;
  }
  .is-product-page #modal-product .modal__grid {
    grid-template-columns: 280px minmax(0, 1fr); gap: 6px 32px; align-items: start;
  }
  .is-product-page #modal-product .modal__media {
    grid-column: 1; grid-row: 1 / 6; position: sticky; top: 156px; padding: 0;
    background: transparent; min-width: 0;
  }
  .is-product-page #modal-product .modal__media > .product-image-zoom {
    width: 100%; height: 260px; max-height: 260px; margin: 0;
  }
  .is-product-page #modal-product .modal__media .product-image-zoom > #m-img {
    width: 100%; height: 260px; max-height: 260px; object-fit: contain;
    background: var(--bg-soft); border-radius: 12px;
  }
  .is-product-page #modal-product .modal__thumbs { margin: 8px 0 0; flex-wrap: wrap; }
  .is-product-page #modal-product .modal__info { display: contents; }
  .is-product-page .modal__info > * { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
  .is-product-page .modal__info > .breadcrumb { grid-column: 2; grid-row: 1; margin: 0; }
  .is-product-page .modal__info > .modal__title-row { grid-column: 2; grid-row: 2; }
  .is-product-page .modal__info > .modal__ref { grid-column: 2; grid-row: 3; margin: 0; }
  .is-product-page .modal__info > #product-benefit { grid-column: 2; grid-row: 4; max-width: 720px; margin: 4px 0; }
  .is-product-page #modal-product #calc-block {
    grid-column: 2; grid-row: 5; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 20px 20px; padding: 20px; margin: 12px 0 0; align-items: start;
  }
  .is-product-page #calc-block > .product-order-summary {
    grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column;
    gap: 14px; min-width: 0; order: 0;
  }
  .is-product-page #calc-block > .product-order-summary > * { order: 0; margin-block: 0; }
  .is-product-page #calc-block > .calc-v2__tune { grid-column: 1; grid-row: 1; margin: 0; }
  .is-product-page #calc-block > .tiers { grid-column: 1; grid-row: 2; margin: 0; }
  .is-product-page #calc-block > .calc__trust { grid-column: 1 / -1; grid-row: 3; }
  .is-product-page .calc-v2__areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .is-product-page .area-thumb { flex-direction: column !important; gap: 8px !important; min-width: 0; }
  .is-product-page .area-thumb > span:not(.area-thumb__placeholder) { width: 100%; text-align: center; }
  .is-product-page .product-order-summary .trustrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-product-page #modal-related .modal__related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .is-product-page #modal-product #calc-block { grid-template-columns: minmax(0, 1fr); }
  .is-product-page #calc-block > .product-order-summary { grid-column: 1; grid-row: 1; }
  .is-product-page #calc-block > .calc-v2__tune { grid-column: 1; grid-row: 2; }
  .is-product-page #calc-block > .tiers { grid-column: 1; grid-row: 3; }
  .is-product-page #calc-block > .calc__trust { grid-column: 1; grid-row: 4; }
}
@media (min-width: 1250px) {
  .is-product-page .calc-v2__areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 901px) and (min-height: 900px) {
  .is-product-page #calc-block > .product-order-summary { position: sticky; top: 156px; }
}

/* Resumen legible y compartible: los mismos controles alimentan precio y pedido. */
.order-selection { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.product-order-summary > .order-selection { order: 0; }
.order-selection dl { margin: 12px 0; }
.order-selection dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; margin: 7px 0; }
.order-selection dt { color: var(--ink-soft); }
.order-selection dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.order-tax-summary { font-size: 12px; line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--line); }
.order-share { width: 100%; padding: 10px; border: 1px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.order-share:disabled { opacity: .5; cursor: wait; }
.order-share-note { margin: 7px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.shared-config-notice { line-height: 1.5; background: var(--bg-soft); padding: 8px; border-radius: 6px; }
/* El resumen ahora es más alto: no fijarlo si ocultaría las acciones al pie. */
@media (min-width: 901px) {
  .is-product-page #calc-block > .product-order-summary { position: static; }
}

.share-config-url { width: 100%; min-width: 0; box-sizing: border-box; margin-top: 8px; padding: 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; }

.product-order-summary > .order-share-tools { order: 3; }
.is-product-page #btn-add-cart:disabled { opacity: .62; cursor: not-allowed; }
.order-selection .order-tax-summary { white-space: pre-line; margin: 10px 0 0; }
.order-selection dl > div { grid-template-columns: 75px minmax(0, 1fr); }
.order-selection .shared-config-notice { margin: 7px 0; padding: 6px; font-size: 12px; }

/* Ficha de compra: foto protagonista y cuatro elecciones en un panel. */
@media (min-width: 901px) {
  .is-product-page #modal-product .modal__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 8px 28px;
    align-items: start;
  }
  .is-product-page #modal-product .modal__media {
    grid-column: 1;
    grid-row: 4 / 6;
    position: sticky;
    top: 156px;
    padding: 0;
    align-self: start;
    border: 0;
  }
  .is-product-page #modal-product .modal__media > .product-image-zoom {
    width: 100%;
    height: clamp(420px, 42vw, 580px);
    max-height: none;
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(17, 17, 17, .055);
  }
  .is-product-page #modal-product .modal__media .product-image-zoom > #m-img {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 28px;
    object-fit: contain;
    background: #fff;
    border: 0;
  }
  .is-product-page #modal-product .modal__thumbs {
    margin: 10px 0 0;
    justify-content: flex-start;
  }
  .is-product-page .modal__info > .breadcrumb {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 8px;
  }
  .is-product-page .modal__info > .modal__title-row { grid-column: 1; grid-row: 2; align-self: end; }
  .is-product-page .modal__info > .modal__ref { grid-column: 1; grid-row: 3; margin: 0 0 8px; }
  .is-product-page .modal__info > #product-benefit { grid-column: 1; grid-row: 5; }
  .is-product-page #modal-product #calc-block {
    grid-column: 2;
    grid-row: 2 / 6;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(17, 17, 17, .065);
  }
  .is-product-page #calc-block > .calc-v2__tune {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
  }
  .is-product-page #calc-block > .product-order-summary {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0 20px 20px;
    position: static;
  }
  .is-product-page #calc-block > .tiers { grid-column: 1; grid-row: 4; margin: 0 20px 20px; }
  .is-product-page #calc-block > .calc__trust { grid-column: 1; grid-row: 5; margin: 0 20px 20px; }
  .is-product-page .calc-v2__areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.is-product-page .calc-v2__tune > .calc-v2__tune-hint {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 17px 20px;
  font-size: 17px;
  line-height: 1.3;
  border-bottom: 1px solid var(--line);
}
.is-product-page .calc-v2__tune > .calc-v2__tune-hint strong { font-weight: 700; }
.is-product-page .calc-v2__tune > .calc-v2__tune-hint .calc-v2__tune-hint-mute {
  font-size: 12px;
  text-align: right;
}
.is-product-page .calc-v2__tune .paso {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.is-product-page .calc-v2__tune .paso__head { padding: 18px 20px; }
.is-product-page .calc-v2__tune .paso__tit { font-size: 16px; }
.is-product-page .calc-v2__tune .paso__body { padding: 0 20px 20px; }
.is-product-page #m-colors-section { margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.is-product-page #m-colors .swatch-compact { min-width: 0; width: 100%; padding: 0; }
.is-product-page #m-colors.swatches-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 11px 7px;
}
.is-product-page #m-colors .swatch-compact__square { width: 46px; height: 46px; border-radius: 6px; }
.is-product-page #m-colors .swatch-compact__code {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
.is-product-page #m-colors .swatch__stock {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
}
.is-product-page #m-colors .swatch__stock--out { color: #a43f3f; }
.is-product-page #m-colors .swatch__stock--future { color: #8a6400; }
.is-product-page #calc-block .product-order-summary > .calc-v2__result { order: 0; }
.is-product-page #calc-block .product-order-summary > #calc-entrega,
.is-product-page #calc-block .product-order-summary > #calc-stock-aviso { order: 1; }
.is-product-page #calc-block .product-order-summary > #calc-acciones { order: 2; }
.is-product-page #calc-block .product-order-summary > .calc__buy-note { order: 3; }
.is-product-page #calc-block .product-order-summary > .order-selection { order: 4; }
.is-product-page #calc-block .product-order-summary > .trustrow { order: 5; }
.is-product-page #calc-block .product-order-summary > .product-next { order: 6; }
.is-product-page #calc-block .product-order-summary > .order-share-tools { order: 7; }
.is-product-page #calc-block .product-order-summary > .calc__save { order: 8; }
.is-product-page .product-detail-fold {
  grid-column: 1 / -1;
  margin: 0;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.is-product-page .product-detail-fold summary { cursor: pointer; font-weight: 650; }
.is-product-page .product-detail-fold .specs { margin-top: 14px; }
.topbar__phone { display: none; }
@media (min-width: 901px) {
  .topbar__phone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
  }
  .topbar__phone strong { font-size: 15px; }
}
@media (max-width: 900px) {
  .is-product-page .calc-v2__tune > .calc-v2__tune-hint { flex-wrap: wrap; padding: 14px; }
  .is-product-page .calc-v2__tune .paso__head { padding: 14px; }
  .is-product-page .calc-v2__tune .paso__body { padding: 0 14px 14px; }
  .is-product-page .modal__media > .product-image-zoom,
  .is-product-page .modal__media .product-image-zoom > img { max-height: 300px; }
}

/* La galería y el configurador son las dos columnas reales. Evita que los
   contenidos largos del configurador desplacen la foto por debajo del primer
   pantallazo (el grid anterior repartía su altura entre filas implícitas). */
@media (min-width: 901px) {
  .is-product-page #modal-product .modal__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 28px;
    align-items: start;
  }
  .is-product-page #modal-product .modal__media {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 145px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .is-product-page #modal-product .modal__info {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
  }
  .is-product-page #modal-product .modal__media > .product-image-zoom {
    width: 100%;
    height: clamp(220px, min(34vw, calc(100dvh - 410px)), 460px);
    max-height: none;
    margin: 6px 0 0;
  }
  .is-product-page #modal-product .modal__media .product-image-zoom > #m-img {
    width: 100%; height: 100%; max-height: none;
  }
  .is-product-page #modal-product #calc-block {
    width: 100%;
    margin: 0;
  }
  .is-product-page #modal-product .modal__media .breadcrumb { margin: 0 0 8px; }
  .is-product-page #modal-product .modal__media .modal__title-row { width: 100%; margin: 0; }
  .is-product-page #modal-product .modal__media #m-name { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.25; }
  .is-product-page #modal-product .modal__media .modal__thumbs { order: 1; }
  .is-product-page #modal-product .modal__media > .modal__que,
  .is-product-page #modal-product .modal__media > .modal__ref,
  .is-product-page #modal-product .modal__media > .sello-resenas { order: 2; }
  .is-product-page #modal-product .modal__title-row .btn-share { padding: 8px; }
  .is-product-page #modal-product .modal__title-row .btn-share span { display: none; }
  .is-product-page #modal-product .product-return { margin-bottom: 8px; padding-block: 6px; }
  .is-product-page #modal-product .modal__media .product-image-zoom > #m-img { padding: 16px; }
  .is-product-page #modal-product .modal__media .modal__ref { margin: 0 0 6px; }
  .is-product-page #modal-product .product-detail-fold { width: 100%; box-sizing: border-box; }
}
@media (max-width: 900px) {
  .is-product-page #modal-product .modal__media .modal__title-row { width: 100%; }
  .is-product-page #modal-product .modal__media #m-name { font-size: 25px; }
  .is-product-page #modal-product .modal__media .modal__ref { margin: 0 0 8px; }
}
@media (max-width: 820px) {
  .is-product-page #modal-product .modal__media { display: contents; }
  .is-product-page #modal-product .modal__media > .breadcrumb,
  .is-product-page #modal-product .modal__media > .badge,
  .is-product-page #modal-product .modal__media > .modal__title-row,
  .is-product-page #modal-product .modal__media > .modal__ref,
  .is-product-page #modal-product .modal__media > .sello-resenas {
    order: 0;
    margin-left: 16px;
    margin-right: 16px;
  }
  .is-product-page #modal-product .modal__media > .modal__title-row {
    width: auto;
    max-width: calc(100% - 32px);
    min-width: 0;
  }
  .is-product-page #modal-product .modal__title-row #m-name { min-width: 0; }
  .is-product-page #modal-product .modal__title-row .btn-share { flex: 0 0 auto; padding: 8px; }
  .is-product-page #modal-product .modal__title-row .btn-share span { display: none; }
  .is-product-page #modal-product .modal__media > .product-image-zoom { order: 1; margin-top: 4px; }
  .is-product-page #modal-product .modal__media > .modal__thumbs { order: 2; }
  .is-product-page #modal-product .modal__info { order: 3; display: block; }
}

/* La primera pantalla ofrece un camino de compra: categoría, búsqueda o cesta. */
.topbar__actions .how-link--primary {
  background: var(--bg); color: var(--ink); border-color: var(--line-strong);
}
.topbar__actions .how-link--primary:hover { background: var(--bg-soft); }
.topbar__actions .how-link--cart {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--white); border-color: var(--ink);
}
.topbar__actions .how-link--cart:hover { background: #1f2330; }
.hero--shop { padding-top: 22px; padding-bottom: 20px; }
.hero--shop .hero__inner { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
.hero--shop .hero__claim { max-width: 780px; margin-bottom: 12px; font-size: clamp(32px, 3.5vw, 46px); }
.hero--shop .hero__text > p:not(.hero__claim) { max-width: 690px; margin-bottom: 16px; font-size: 16px; }
.hero--shop .hero__trust { margin-top: 14px; }
.editorial-cats { padding: 25px 32px 42px; scroll-margin-top: 150px; }
.editorial-cats .section-head { margin-bottom: 18px; text-align: left; }
.editorial-cats .section-head h2 { font-size: clamp(25px, 2.5vw, 32px); }
.editorial-cats .section-head p { margin-left: 0; font-size: 15px; }
.editorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.editorial-card { min-width: 0; }
.editorial-card__img { height: 148px; aspect-ratio: auto; padding: 10px; border: 1px solid var(--line); }
.editorial-card__img img { max-width: 76%; max-height: 94%; }
.editorial-card__body { padding: 10px 2px 0; gap: 4px; }
.editorial-card__title { font-size: 17px; }
.editorial-card__cta { margin-top: 0; padding: 0; background: none; color: var(--ink-soft); font-size: 12px; }
.editorial-card:hover .editorial-card__cta { background: none; color: var(--accent-ink); }
@media (max-width: 620px) {
  .choice-guide { padding: 12px; margin: 12px 0 16px; }
  .choice-guide h3 { font-size: 16px; margin-bottom: 10px; }
  .choice-guide > p { display: none; }
}
@media (min-width: 1100px) {
  .editorial-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.is-product-page .calc-v2__tune #m-colors-section { order: 0; }
@media (max-width: 900px) {
  .hero--shop { padding: 24px 16px; }
  .hero--shop .hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hero--shop .hero__claim { font-size: 33px; }
  .editorial-cats { padding: 24px 16px 40px !important; }
  .editorial-cats .section-head { text-align: left; }
  .editorial-cats .section-head p { margin-left: 0; }
  .editorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .editorial-card__img { height: 124px; padding: 10px; }
  .editorial-card__body { padding: 8px 1px 0; gap: 3px; }
  .editorial-card__title { font-size: 15px; }
  .editorial-card__copy { display: none; }
  .editorial-card__cta { margin-top: 0; padding: 0; background: none; color: var(--ink-soft); font-size: 11px; }
}

/* Portada Nómada: escala fotográfica de comercio, paleta propia y texto HTML legible. */
.hero--shop { padding: 20px 32px 16px; border: 0; }
.hero--shop .hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--container);
  min-height: 430px;
  overflow: hidden;
  border-radius: 18px;
  background: #f5f7f8;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero--shop .hero__text {
  width: min(47%, 610px);
  padding: 42px clamp(32px, 4.2vw, 64px);
}
.hero--shop .hero__claim {
  max-width: 560px;
  font-size: clamp(38px, 3.9vw, 55px);
  font-weight: 700;
  line-height: 1.04;
}
.hero--shop .hero__text > p:not(.hero__claim) {
  max-width: 500px;
  color: #384454;
  font-size: 16px;
}
.hero--shop .hero__trust { gap: 7px 16px; }
.hero--shop .btn-cta--ghost { color: var(--ink); text-decoration-color: var(--blue-light); }
.services { border-top: 0; border-bottom: 1px solid var(--line); padding: 20px 32px; }
.services__inner { gap: 18px; }
.service__icon { background: var(--accent-soft); color: var(--accent-ink); }
.editorial-card__img { height: 202px; }
.editorial-card__img img {
  width: 100%; height: 180px; max-width: 100%; max-height: none;
  object-fit: contain; transform: scale(1.2);
}
.editorial-card__img--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 28px; }
.editorial-card__img--pair img { height: 180px; transform: scale(1.45); mix-blend-mode: multiply; }
.editorial-card:hover .editorial-card__img img { transform: scale(1.27); }
.editorial-card:hover .editorial-card__img--pair img { transform: scale(1.5); }
.bestsellers { padding-top: 54px; }
.themes { padding-top: 58px; padding-bottom: 58px; }
.bestsellers .section-head,
.themes .section-head { text-align: left; margin-bottom: 26px; }
.bestsellers .section-head h2,
.themes .section-head h2 { font-size: clamp(27px, 2.8vw, 36px); font-weight: 650; }
.bestsellers .section-head p,
.themes .section-head p { margin-left: 0; font-size: 16px; }
@media (min-width: 1100px) {
  .editorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
}
@media (max-width: 900px) {
  .hero--shop .hero__inner { min-height: 390px; }
  .hero--shop .hero__text { width: min(56%, 540px); padding: 32px; }
  .hero--shop .hero__claim { font-size: clamp(34px, 4.4vw, 44px); }
}
@media (max-width: 620px) {
  .hero--shop { padding: 12px 16px 8px; }
  .hero--shop .hero__inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero--shop .hero__text { order: 0; width: 100%; padding: 24px 22px 18px; }
  .hero--shop .hero__claim { font-size: 34px; }
  .hero--shop .hero__text > p:not(.hero__claim) { font-size: 14px; }
  .hero__photo { position: relative; order: 1; z-index: 0; height: 205px; object-position: 76% 50%; }
  .hero__trust { gap: 5px 12px; font-size: 11px; }
  .services { padding: 18px 16px; }
  .editorial-card__img { height: 158px; }
  .editorial-card__img img { height: 138px; transform: scale(1.12); }
  .editorial-card:hover .editorial-card__img img { transform: scale(1.18); }
  .editorial-card__img--pair { padding: 0 8px; }
  .editorial-card__img--pair img { transform: scale(2.1); }
  .editorial-card:hover .editorial-card__img--pair img { transform: scale(2.2); }
  .bestsellers { padding-top: 40px; }
}

/* Selector de pago del checkout (transferencia desde 300 €, 25/09/2026) */
.cart__pago { border: 1px solid var(--line-strong, #d7dce3); border-radius: 10px; padding: 10px 12px; margin: 4px 0 0; display: grid; gap: 8px; }
.form .cart__pago-op { display: flex; flex-direction: row; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; color: var(--ink); }
.form .cart__pago-op input { width: auto; flex: 0 0 auto; }
.cart__pago-op input { margin-top: 3px; }
.cart__ok { grid-column: 1 / -1; padding: 16px; border-radius: 10px; background: #effaf5; border: 1px solid #b7e4cc; font-size: 14px; line-height: 1.5; }

/* Sello de reseñas (ficha y pago) */
.sello-resenas { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: 13px; color: var(--ink); text-decoration: none; }
.sello-resenas:hover { text-decoration: underline; }
.sello-resenas__estrellas { color: #f5a623; letter-spacing: 1px; }
.sello-resenas--centro { justify-content: center; width: 100%; grid-column: 1 / -1; }
.resena-cita { grid-column: 1 / -1; margin: 10px 0 4px; padding: 10px 14px; border-left: 3px solid #f5a623; background: #faf8f3; border-radius: 6px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.resena-cita p { margin: 0 0 4px; }
.resena-cita footer { font-size: 12px; color: var(--ink-soft); }
.resena-cita footer span { color: #f5a623; letter-spacing: 1px; }

.form .cart__logo span em { font-style: normal; color: var(--ink-mute, #64748b); }
.form .cart__logo { min-width: 0; }
.form .cart__logo span { overflow-wrap: anywhere; }
.form .cart__logo input[type=file] { padding: 8px; font-size: 13px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.form .cart__pago, .form .cart__pago-op span { min-width: 0; overflow-wrap: anywhere; }

/* Ficha en móvil: precio en la primera pantalla (26/09/2026). El buscador, el menú de
   categorías y las migas se comían 170 px antes del nombre y el precio quedaba en 851
   de 812. En la ficha se vuelve con «← Ver catálogo»; buscar y navegar siguen en el
   listado. */
@media (max-width: 640px) {
  body.is-product-page .topbar .search,
  body.is-product-page .catnav,
  body.is-product-page #m-breadcrumb { display: none !important; }
  body.is-product-page #m-img { max-height: 240px; }
}

/* Portada en móvil: productos en la primera pantalla (26/09/2026). La primera familia
   con foto empezaba en 1.210 px, detrás de la foto de cabecera, un párrafo y la banda
   de servicios, que repite lo que ya dicen las cuatro garantías del hero. Moloon y
   GiftCampaign abren con categorías con foto. En escritorio no cambia nada. */
@media (max-width: 640px) {
  .hero--shop .hero__photo,
  .hero--shop .hero__text > p,
  .services,
  .editorial-cats .section-head > p { display: none; }
  .hero--shop .hero__cta { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .hero--shop .hero__cta > * { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; font-size: 14px; }
}

/* ───── Categorías con foto de ambiente (26/09/2026, patrón Moloon: 3 columnas,
   foto a sangre con el logo de ejemplo, título, dos líneas y «Ver más») ───── */
@media (min-width: 1100px) {
  .editorial-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
}
.editorial-card__img--foto { padding: 0; height: auto; aspect-ratio: 3 / 2; border: 0; }
.editorial-card__img--foto img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
@media (max-width: 720px) { .editorial-card__img--foto { padding: 0; height: auto; } }
@media (min-width: 621px) {
  .editorial-card__body { padding-top: 14px; gap: 8px; }
  .editorial-card__cta { margin-top: 4px; padding: 9px 18px; background: var(--ink); color: var(--white); font-size: 13px; border-radius: 999px; }
  .editorial-card:hover .editorial-card__cta { background: var(--accent-ink); color: var(--white); }
}

/* ───── Banda de ayuda a lo ancho (como el «Personal Shopper» de Moloon) ───── */
.ayuda-banda { padding: 0 32px 72px; background: var(--bg); }
.ayuda-banda__inner {
  max-width: var(--container); margin: 0 auto; padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--ink); color: var(--white); border-radius: var(--radius-lg);
}
.ayuda-banda__texto { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.ayuda-banda__texto strong { font-size: 22px; letter-spacing: -0.01em; }
.ayuda-banda__texto span { font-size: 15px; line-height: 1.5; opacity: .85; }
.ayuda-banda__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.ayuda-banda__btn {
  display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px;
  background: var(--white); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none;
  transition: transform var(--transition);
}
.ayuda-banda__btn:hover { transform: translateY(-2px); }
.ayuda-banda__btn--ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.4); }
@media (max-width: 720px) {
  .ayuda-banda { padding: 0 16px 56px; }
  .ayuda-banda__inner { padding: 22px 20px; }
  .ayuda-banda__texto strong { font-size: 19px; }
  .ayuda-banda__acciones, .ayuda-banda__btn { width: 100%; justify-content: center; }
}

/* Etiquetas por encima de la foto: la img lleva z-index 1 y va después en el DOM,
   así que tapaba «eco» y la gama (más con las fotos TU LOGO, que llenan el cuadro). */
.card__badges, .card__gama, .card__sinstock, .card__compare { z-index: 2; }

/* Ficha: medio punto de borde fuera de la foto (el salto al cambiar de color lo quita la
   precarga en app.js): algunas fotos de variante de Makito traen
   una línea negra en el canto (3164-001-P, 26/09/2026). */
#m-img { clip-path: inset(0.6%); }

/* Compra sin cuenta y logo después: misma fila en móvil para mantener el precio visible. */
.cat-header__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; font-size: .8125rem; color: var(--ink); }
.cat-header__trust li { display: inline-flex; align-items: center; gap: 6px; }
.cat-header__trust li::before { content: "✓"; font-weight: 700; color: var(--accent-ink, #0a7d5a); }
.cat-header__trust .cat-header__rating::before { content: none; }
.cat-header__rating:has(a[hidden]) { display: none; }
.cat-header__trust .sello-resenas { margin: 0; font-size: inherit; }

/* Mosaicos de foto en la primera pantalla del móvil (26/09/2026). En escritorio manda
   la foto del hero y no se enseñan. En móvil sustituyen al párrafo, que empujaba el
   primer producto por debajo de la primera pantalla. */
.hero__tiles { display: none; }
@media (max-width: 640px) {
  .hero__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
  .hero-tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
    font-size: 13px; font-weight: 600; text-align: center; }
  .hero-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #eee; }
  .hero--shop .hero__text > p:not(.hero__claim) { display: none; }
}

/* Nota de Google bajo el título de la ficha (27/09/2026) */
#modal-product .modal__media > .sello-resenas { margin-top: 0; margin-bottom: 10px; }

/* Qué es, debajo del nombre del modelo (27/09/2026, noche) */
.card__que { margin: 2px 0 6px; font-size: 12px; line-height: 1.3; color: var(--ink-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modal__que { margin: 4px 0 2px; font-size: 14px; color: var(--ink-mute); }
@media (max-width: 820px) {
  .is-product-page #modal-product .modal__media > .modal__que { order: 0; margin-left: 16px; margin-right: 16px; }
}

/* Móvil: quien llega de un anuncio tiene que ver producto y precio en el primer pantallazo
   (28/09/2026). El primer precio caía a 898 px con 812 de pantalla y el aviso de cookies
   tapando desde 682: 20 de 34 visitas de Ads eran de móvil y solo 3 abrieron ficha.
   Intro a una línea (se abre al tocarla), promesas en una fila, sin la fila de filtros
   activos, foto de tarjeta a 140 px y nombre a dos líneas. */
@media (max-width: 600px) {
  .cat-header { margin-bottom: 8px; }
  .cat-header__title { margin-bottom: 2px; }
  .cat-header__intro { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; cursor: pointer; }
  .cat-header__intro.is-open { display: block; }
  .cat-header__trust { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 6px; font-size: 12px; white-space: nowrap; }
  .cat-header__trust::-webkit-scrollbar { display: none; }
  .filter-toggle { margin-bottom: 4px; }
  .cat-subnav { margin-bottom: 6px; }
  .results__head { margin-bottom: 10px; }
  /* Los filtros activos ya los cuenta el botón «Filtrar» y se quitan desde su panel. */
  .results__head .active-filters { display: none; }
  #grid .card__media { height: 140px; }
  #grid .card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #grid .card__que { -webkit-line-clamp: 1; }
}

/* 30/09/2026: garantía bajo los botones de compra y montaje; solo si se puede comprar */
.acciones__garantia { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft, #475569); }
.acciones:has(#btn-add-cart[hidden]) .acciones__garantia { display: none; }

/* Fichas Ads: criterio y diferencias después del precio y la acción de compra. */
.is-product-page #calc-block .product-order-summary > .product-choice { order: 3; }
.product-choice { padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.product-choice p { margin: 0 0 8px; color: var(--ink); }
.product-choice ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.product-choice li { padding: 3px 8px; border-radius: 5px; background: #f2f5f4; }
.product-choice a { display: block; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.product-choice a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.is-product-page .area-thumb > .area-thumb__copy { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; text-align: left; }
.is-product-page .area-thumb__copy > span { text-align: left; overflow-wrap: anywhere; }
.is-product-page .area-thumb__copy .area-thumb__tech { margin-top: 0 !important; }
@media (max-width: 600px) {
  .is-product-page .calc-v2__areas-grid .area-thumb img { width: 110px !important; height: 110px !important; flex-basis: 110px; }
}

/* Un solo resultado vivo antes de configurar: no duplicar cifras ni controles. */
@media (min-width: 901px) {
  .is-product-page #calc-block > #calc-result { grid-column: 1; grid-row: 1; margin: 16px 20px 0; }
}
#price-with-tax { margin: 8px 0 0; color: var(--ink); font-size: 13px; }

/* Un listado debe permitir elegir en la primera pantalla de un portátil. */
#grid .card__buy { margin: 4px 0 6px; }
@media (min-width: 701px) {
  .filter-bar { padding: 8px 0; margin-bottom: 8px; gap: 6px; }
  .cat-header__intro { max-width: none; }
  .cat-subnav { margin-bottom: 8px; }
  .results__head { margin-bottom: 10px; }
  #grid .card__media { height: clamp(145px, calc(100dvh - 575px), 230px); }
  #grid .card__body { padding: 10px 14px 14px; gap: 4px; }
  #grid .card__name { font-size: 15px; }
}
/* No ofrecer una dimensión vacía (por ejemplo capacidad en bolsas). */
.fdrop:has(.fdrop__btn:disabled) { display: none; }
@media (min-width: 701px) {
  .fdrop__btn { padding: 8px 12px; }
}
@media (min-width: 1101px) and (max-height: 800px) {
  .topbar__inner { padding-top: 12px; padding-bottom: 12px; }
}
@media (min-width: 701px) {
  .cat-header { margin-bottom: 6px; }
  .cat-header__trust { margin-top: 6px; }
  .cat-subnav { padding-bottom: 0; }
}

/* ───────────── Cesta en dos pasos (01/10/2026) ─────────────
   El total va fijo arriba de la cesta y del pago; el paso 1 solo pide correo y
   empresa; el paso 2, la entrega y el pago. Los pasos no rompen la rejilla del
   formulario: sus campos siguen siendo hijos de la rejilla. */
.cart__resumen {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin: 0 -4px 12px; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.cart__resumen > span:first-child { font-size: 13px; font-weight: 600; color: var(--ink); }
.cart__resumen small { font-weight: 400; color: var(--ink-mute); }
.cart__resumen strong { font-size: 18px; margin-left: auto; }
.cart__resumen-meta { flex: 1 0 100%; font-size: 12px; color: var(--ink-mute); }
.cart__resumen-meta:empty { display: none; }
.cart__paso:not([hidden]) { display: contents; }
.cart__paso-n { font-weight: 500; color: var(--ink-mute); margin-left: 6px; }
.cart__paso-hecho { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ink-mute); }
.cart__paso-hecho button { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; }
#cart-paso-1-ok { margin-top: 8px; }
/* Con el pago abierto, el desglose cede el sitio: el total ya va fijo arriba. */
#modal-cart.is-pagando #cart-totals, #modal-cart.is-pagando #cart-seguir { display: none; }
@media (max-width: 620px) {
  /* «Continuar al pago» a mano sin bajar 2,5 pantallas: el botón se queda abajo. */
  #form-cart #cart-submit { position: sticky; bottom: 8px; z-index: 3; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
}

/* ───────────── «Cómo va tu logo» con botones (01/10/2026) ─────────────
   Mismo aire que las pastillas de tipo del listado. El <select> sigue en la página
   (es el que lee el precio), oculto. */
.calc-logo--oculto { display: none !important; }
.logo-opciones { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.logo-opcion {
  min-height: 44px; padding: 9px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-elev); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: left;
  cursor: pointer;
}
.logo-opcion:hover { border-color: var(--ink-mute); }
.logo-opcion.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ───────────── Listado pintado por el servidor (01/10/2026) ─────────────
   Al entrar por una categoría o un destino de campaña el HTML ya es el listado: sin
   la portada debajo (la escondía app.js a los 6 s y todo saltaba 179 px). app.js
   quita la clase al arrancar, cuando ya ha puesto `hidden` en lo mismo. */
.is-listado-ssr .hero, .is-listado-ssr .trust, .is-listado-ssr .services,
.is-listado-ssr .stats, .is-listado-ssr .cases, .is-listado-ssr .reviews,
.is-listado-ssr #bestsellers, .is-listado-ssr #themes, .is-listado-ssr #brands-home,
.is-listado-ssr .editorial-cats, .is-listado-ssr #catalog-cta, .is-listado-ssr .banner-theme,
.is-listado-ssr .ayuda-banda, .is-listado-ssr .launch-banner, .is-listado-ssr > .temporada,
.is-listado-ssr .layout__head .section-head { display: none !important; }
/* Hueco de la fila de tipos (Todos · Algodón · …) hasta que la pinta app.js. */
.cat-subnav--reserva:empty { min-height: 38px; }

/* ───────────── Precio claro (01/10/2026) ─────────────
   La foto TU LOGO es un ejemplo, y el precio lleva el logo: se dice. */
.product-image-zoom { position: relative; }
.product-image-zoom__ejemplo {
  display: none; position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 1px solid var(--line-strong);
  color: var(--ink-soft); font-size: 12px; font-weight: 600; pointer-events: none;
}
.product-image-zoom.con-tu-logo .product-image-zoom__ejemplo { display: block; }
.calc-v2__incluye { color: var(--ink-soft); }
.cart__item-unit { color: var(--ink-soft); }

/* ───────────── «Tu presupuesto» (01/10/2026) ─────────────
   La caja de configuración pasa a ser el presupuesto, como la de GiftCampaign pero con
   lo nuestro (Public Sans y cian): encima de «Comprar» y al día en cada paso. */
.is-product-page #calc-block .product-order-summary > .order-selection { order: 1; }
.order-selection { padding: 0; overflow: hidden; border: 1px solid var(--line-strong); }
.order-selection > .order-selection__title {
  display: block; padding: 10px 16px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.order-selection > .shared-config-notice { margin: 10px 16px 0; }
.order-selection dl { margin: 6px 16px 12px; }
.order-selection dl > div,
.sticky-presupuesto dl > div { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); }
.order-selection dl > div:last-child,
.sticky-presupuesto dl > div:last-child { border-bottom: 0; }
.order-selection dd,
.sticky-presupuesto dd { text-align: right; font-weight: 600; }
.order-selection dd small,
.sticky-presupuesto dd small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-soft); }
/* Cantidad y producto: el texto largo va debajo, a todo el ancho. */
.order-selection dl > div:nth-child(2),
.sticky-presupuesto dl > div:nth-child(2) { grid-template-columns: minmax(0, 1fr); }
.order-selection dl > div:nth-child(2) dd,
.sticky-presupuesto dl > div:nth-child(2) dd { text-align: left; font-weight: 500; }
.order-selection__fila--total dd,
.order-selection__fila--total dt { font-weight: 800; color: var(--ink); font-size: 15px; }
.order-selection__fila--iva { background: var(--bg-soft); margin: 4px -16px 0 !important; padding: 9px 16px !important; }
.order-selection__fila--iva dt, .order-selection__fila--iva dd { font-weight: 800; color: var(--ink); }
.order-selection dl > .order-selection__fila--entrega,
.sticky-presupuesto dl > .order-selection__fila--entrega { grid-template-columns: minmax(0, 1fr); }
.order-selection__fila--entrega dd { font-weight: 500; text-align: left !important; }

/* Barra fija: el presupuesto entero, desplegable encima de los botones. */
.sticky-presupuesto__toggle {
  order: 2; align-self: flex-start; padding: 0; border: 0; background: none; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--accent-ink); text-decoration: underline; cursor: pointer;
}
.sticky-presupuesto {
  position: absolute; left: 0; right: 0; bottom: 100%; max-height: 60vh; overflow: auto;
  padding: 12px 16px; background: var(--bg-elev); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -10px 24px rgba(11,12,15,.12); font-size: 13px;
}
.sticky-presupuesto > strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.sticky-presupuesto dl { margin: 6px 0 0; }
.sticky-presupuesto dl > div { display: grid; }
.sticky-presupuesto dt { color: var(--ink-soft); }
.sticky-presupuesto dd { margin: 0; overflow-wrap: anywhere; }
/* La fecha ya va en la fila «Entrega» de «Tu presupuesto»: la línea suelta sobraba. */
.product-order-summary > #calc-entrega { display: none !important; }

/* ───────────── Calendarios 2027 dentro del catálogo (01/10/2026) ───────────── */
.mega-block__cal { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; font-size: 13.5px; line-height: 1.4; color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.mega-block__cal:hover { text-decoration: underline; }
.cal-strip { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--accent-soft); }
.cal-strip__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.cal-strip__head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.cal-strip__head a { font-size: 13px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.cal-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cal-strip__card { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); }
.cal-strip__card:hover { border-color: var(--ink-mute); }
.cal-strip__card img { width: 100%; height: auto; aspect-ratio: 600 / 480; object-fit: contain; background: #ececec; }
.cal-strip__card strong { padding: 4px 10px 0; font-size: 14px; line-height: 1.3; }
.cal-strip__card span { padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
@media (max-width: 760px) {
  .cal-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-strip__head { flex-direction: column; gap: 2px; }
}
.cal-strip__dto, .temporada__dto { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; vertical-align: middle; letter-spacing: 0; }
.cal-strip__card span s { color: var(--ink-mute); font-weight: 500; }

/* ───────────── Banner de temporada (01/10/2026) ─────────────
   Uno solo y fijo: agendas y calendarios 2027 (portada, /calendarios/ y agendas 2027).
   Bloque negro (variante B, elegida por Iván); Public Sans, negro y cian; el −10 % como
   sello; en móvil, compacto. */
.temporada { --t-bg: var(--bg); --t-ink: var(--ink); --t-soft: var(--ink-soft); --t-line: var(--line-strong); background: var(--t-bg); color: var(--t-ink); border-bottom: 1px solid var(--t-line); }
.temporada__inner { max-width: var(--container); margin: 0 auto; padding: 22px 32px; display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.temporada__img { width: 100%; height: auto; aspect-ratio: 1050 / 546; object-fit: contain; border-radius: 12px; background: #e3e3e1; }
.temporada__texto { min-width: 0; }
.temporada__sello { display: inline-block; margin: 0 0 10px; padding: 5px 11px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.temporada__texto h2 { margin: 0 0 6px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: var(--t-ink); }
.temporada__texto p { margin: 0; font-size: 16px; color: var(--t-soft); }
.temporada__acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.temporada__botones { display: flex; gap: 10px; }
.temporada__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.temporada__btn--pri { background: var(--ink); color: #fff; }
.temporada__btn--sec { background: transparent; color: var(--t-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.temporada__btn:hover { opacity: .88; }
.temporada__navidad { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
/* Bloque negro: titular blanco, sello cian, foto en su tarjeta clara */
.temporada--b { --t-bg: var(--ink); --t-ink: #fff; --t-soft: #c9d2d9; --t-line: var(--ink); }
.temporada--b .temporada__sello { background: var(--accent); color: var(--ink); }
.temporada--b .temporada__btn--pri { background: var(--accent); color: var(--ink); }
.temporada--b .temporada__btn--sec { color: #fff; }
.temporada--b .temporada__navidad { color: #9fdff0; }
.temporada--listado { margin: 0 0 16px; border: 1px solid var(--t-line); border-radius: var(--radius-lg); overflow: hidden; }
.temporada--listado .temporada__inner { padding: 16px 18px; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 22px; }
@media (max-width: 1100px) {
  .temporada__inner { grid-template-columns: 220px minmax(0, 1fr); gap: 16px 24px; }
  .temporada__acciones { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .temporada__inner, .temporada--listado .temporada__inner { grid-template-columns: 118px minmax(0, 1fr); gap: 10px 12px; padding: 12px 16px; }
  .temporada__img { border-radius: 8px; }
  .temporada__sello { margin-bottom: 5px; padding: 3px 8px; font-size: 11.5px; }
  .temporada__texto h2 { font-size: 18px; margin-bottom: 3px; }
  .temporada__texto p { font-size: 12.5px; }
  .temporada__acciones { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; }
  .temporada__botones { gap: 6px; }
  .temporada__btn { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
  .temporada__navidad { margin-left: auto; font-size: 12px; white-space: nowrap; }
}

/* ───────────── Tabla de escalado en «Cantidad» (01/10/2026) ─────────────
   El paso de cantidad no se pliega: la tabla sigue a la vista con la fila elegida. */
.paso--fijo > .paso__head { cursor: default; }
.paso--fijo > .paso__head:hover { background: none; }
.paso--fijo .paso__chev { visibility: hidden; }
#calc-qty-row .tiers__table th:nth-child(2), #calc-qty-row .tiers__table td:nth-child(2),
#calc-qty-row .tiers__table th:nth-child(3), #calc-qty-row .tiers__table td:nth-child(3) { text-align: right; }
#calc-qty-row .tiers__row.is-active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
#calc-qty-row .tiers__row.is-active td { font-weight: 700; }
#calc-qty-row .tiers__off { font-size: 11px; }
@media (max-width: 480px) {
  /* Móvil: dos columnas (uds y total) y el €/ud pequeño debajo del total. */
  #calc-qty-row .tiers__table thead th:nth-child(3) { display: none; }
  #calc-qty-row .tiers__table tbody tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-bottom: 1px solid var(--line, #eee); }
  #calc-qty-row .tiers__table tbody td { border: 0; padding: 8px 6px 0; }
  #calc-qty-row .tiers__table tbody td:nth-child(3) { grid-column: 2; padding: 0 6px 8px; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
  #calc-qty-row .tiers__table tbody td:first-child { grid-row: span 2; align-self: center; padding-bottom: 8px; }
  #calc-qty-row .tiers__table thead tr { display: grid; grid-template-columns: 1fr auto; }
}
/* Piloto local de bolsas. Se activa por JS solo en loopback y en la ref 6050. */
.piloto-bolsas .calc-v2__tune { gap: 0; }
.piloto-bolsas .calc-v2__tune .paso__head { padding: 12px 18px; }
.piloto-bolsas .calc-v2__tune .paso__body { padding: 0 18px 14px; }
.piloto-bolsas .paso__chev,
.piloto-bolsas #m-colors-note,
.piloto-bolsas #calc-acciones > .btn-add-only,
.piloto-bolsas #btn-propuesta,
.piloto-bolsas .order-share-tools,
.piloto-bolsas #product-next,
.piloto-bolsas #calc-save,
.piloto-bolsas .product-choice,
.piloto-bolsas .product-order-summary > .sello-resenas,
.piloto-bolsas #calc-trustrow { display: none !important; }
.piloto-bolsas:not(.piloto-bolsas--opciones) #calc-areas,
.piloto-bolsas:not(.piloto-bolsas--opciones) .logo-opcion:not([data-valor="c1"]):not([data-valor="full"]):not(.is-active),
.piloto-bolsas:not(.piloto-bolsas--opciones) #m-colors .swatch-compact:nth-child(n+5):not(.is-selected),
.piloto-bolsas:not(.piloto-bolsas--opciones) .tiers__row[data-qty="25"]:not(.is-active),
.piloto-bolsas:not(.piloto-bolsas--opciones) .tiers__row[data-qty="1000"]:not(.is-active),
.piloto-bolsas:not(.piloto-bolsas--opciones) .tiers__off,
.piloto-bolsas:not(.piloto-bolsas--opciones) .tiers__nudge { display: none !important; }
.piloto-bolsas #calc-tech-row { order: 1; }
.piloto-bolsas #calc-qty-row { order: 2; }
.piloto-bolsas #calc-areas { order: 3; }
.piloto-bolsas .piloto-zona { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px; background: #f7f8fa; border-radius: 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.piloto-zona__ampliar { flex: 0 0 90px; padding: 0; border: 0; border-radius: 6px; background: white; cursor: zoom-in; }
.piloto-zona__foto { display: block; width: 90px; height: 110px; object-fit: contain; }
.piloto-zona__texto { min-width: 0; }
.piloto-zona__texto strong { color: var(--ink); }
.piloto-bolsas .piloto-opciones { order: 5; margin: 10px 18px 18px; padding: 10px 0; border: 0; background: transparent; color: var(--ink); text-align: left; text-decoration: underline; font: inherit; font-size: 13px; cursor: pointer; }
.piloto-bolsas .logo-opcion { flex: 1; padding: 12px; }
.piloto-bolsas .swatch__stock { font-size: 10px; }
.piloto-bolsas .tiers__hint { display: none; }
.piloto-bolsas .btn-montaje { font-size: 14px; }
.piloto-bolsas #modal-montaje #montaje-datos-extra .puerta__campo:last-child,
.piloto-bolsas #modal-montaje .montaje__later { display: none !important; }
.piloto-bolsas #modal-montaje .piloto-opciones { margin: 0 0 14px; }
.piloto-logo-review { padding: 12px; background: #f1f5f9; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.piloto-bolsas #piloto-preview-buy { margin-top: 16px; width: 100%; }

/* Solicitud como primera acción, solo en la demostración local de bolsas. */
.piloto-bolsas #calc-acciones { display: flex; flex-direction: column; }
.piloto-bolsas #btn-montaje { order: -1; width: 100%; min-height: 64px; }
.piloto-bolsas #btn-add-cart { width: 100%; background: white; color: var(--ink); border: 1px solid #cbd5e1; }
.piloto-bolsas #modal-montaje #montaje-datos-extra { display: block; }
.piloto-correo { margin: 20px 0; }
.piloto-correo h3 { margin-bottom: 8px; font-size: 20px; }
.piloto-correo__nota { color: #64748b; font-size: 13px; }
.piloto-correo__body { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-top: 14px; }
.piloto-correo__body p { margin: 0 0 16px; white-space: pre-line; line-height: 1.55; }
.piloto-correo__body .btn-primary { display: inline-flex; margin-bottom: 16px; }

.piloto-bolsas #piloto-ajuste-logo { margin: 12px 0 18px; }
.piloto-bolsas #piloto-ajuste-logo summary { cursor: pointer; font-size: 14px; text-decoration: underline; }

/* Petición breve: el equipo prepara el montaje; el cliente no edita el arte. */
.piloto-bolsas #modal-montaje #plano-escena,
.piloto-bolsas #modal-montaje #piloto-ajuste-logo,
.piloto-bolsas #modal-montaje #piloto-logo-review,
.piloto-bolsas #calc-buy-note { display: none !important; }
.piloto-bolsas #modal-montaje #montaje-que { font-size: 13px; }
.piloto-bolsas #modal-montaje #montaje-drop { min-height: 80px; margin-bottom: 6px; }
.piloto-bolsas #modal-montaje #piloto-logo-demo { margin-bottom: 20px; color: #64748b; font-size: 12px; }

/* ───────────── Modo «mejoras» (04/10/2026) · html.mejoras ─────────────
   Activo en local; `?mejoras=0` lo apaga. Lo que cambia: listado móvil compacto, acción
   junto al precio y barra fija también en escritorio, colores plegados con punto de stock,
   salidas secundarias plegadas y «las 6 que más vendemos» al abrir una categoría. */

/* 6. Acción junto al precio */
html.mejoras .calc-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
html.mejoras .calc-quick[hidden] { display: none; }
html.mejoras .calc-quick__buy { flex: 2 1 200px; justify-content: center; min-height: 46px; }
html.mejoras .calc-quick__montaje {
  flex: 1 1 160px; min-height: 46px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: var(--bg-elev); color: var(--ink); font: inherit; font-weight: 650; font-size: 14px;
  box-shadow: inset 0 0 0 1.5px var(--ink); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
html.mejoras .calc-quick__montaje small { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
html.mejoras .calc-quick__montaje:hover { background: var(--bg-soft); }
/* Barra fija también en escritorio cuando la acción sale de la vista */
@media (min-width: 901px) {
  html.mejoras .is-product-page #modal-sticky-cta { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; }
  html.mejoras .is-product-page #modal-sticky-cta[hidden] { display: none !important; }
  html.mejoras .is-product-page #modal-sticky-cta .sticky-presupuesto__toggle { display: none; }
}

/* 7. Colores: punto de stock y pliegue */
html.mejoras .swatch__stock--dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; padding: 0; font-size: 0; line-height: 0;
  position: absolute; top: 4px; right: 4px;
}
html.mejoras .swatch-compact { position: relative; }
html.mejoras #m-colors:not(.is-open) .swatch-compact[data-more] { display: none; }
html.mejoras .m-colors-more {
  margin: 6px 0 0; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* 9. Salidas secundarias plegadas */
html.mejoras .calc-mas { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
html.mejoras .calc-mas > summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); list-style: none; display: flex; align-items: center; gap: 8px; }
html.mejoras .calc-mas > summary::-webkit-details-marker { display: none; }
html.mejoras .calc-mas > summary::before { content: "+"; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
html.mejoras .calc-mas[open] > summary::before { content: "−"; }
html.mejoras .calc-mas__body { display: grid; gap: 12px; margin-top: 12px; }
html.mejoras .calc-mas__body .product-next { margin: 0; }
html.mejoras .calc-mas__body .calc-v2__info-toggle { justify-self: start; }

/* 5. Listado en móvil: una fila de mandos, producto en la primera pantalla */
html.mejoras .cat-header__trust--abajo { display: none; }
@media (max-width: 720px) {
  html.mejoras .cat-header__intro { display: none; }
  html.mejoras .cat-header__trust:not(.cat-header__trust--abajo) { display: none; }
  html.mejoras .cat-header__trust--abajo { display: flex; margin: 18px 0 8px; justify-content: center; }
  html.mejoras .cat-header__trust--abajo .cat-header__rating { flex-basis: 100%; justify-content: center; }
  html.mejoras .results__head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 10px; }
  html.mejoras .results__head .list-qty { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
  html.mejoras .results__head .list-qty input { width: 64px; }
  html.mejoras .results__head .sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.mejoras .results__head .active-filters { grid-column: 1 / -1; }
  html.mejoras .results__head .active-filters:empty { display: none; }
  html.mejoras .cat-header__title { font-size: 19px; margin-bottom: 2px; }
}

/* 10. Las que más vendemos, al abrir una categoría */
html.mejoras .top-cat { margin: 4px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); }
html.mejoras .top-cat[hidden] { display: none; }
html.mejoras .top-cat__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
html.mejoras .top-cat__head h2 { margin: 0; font-size: 17px; }
html.mejoras .top-cat__all { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
html.mejoras .top-cat__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { html.mejoras .top-cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { html.mejoras .top-cat { padding: 10px; } html.mejoras .top-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.mejoras body.quick-visible #modal-sticky-cta { display: none !important; }
@media (max-width: 720px) {
  html.mejoras .results__head { grid-template-columns: auto 1fr auto; }
  html.mejoras .results__head > div:first-child { white-space: nowrap; font-size: 13px; }
  html.mejoras .results__head .list-qty { font-size: 0; gap: 4px; justify-self: end; }
  html.mejoras .results__head .list-qty input, html.mejoras .results__head .list-qty span { font-size: 13px; }
  html.mejoras .results__head .sort select { max-width: 150px; font-size: 13px; }
}

/* Precio inicial de referencia; presupuesto al elegir, sin confirmar el acordeón. */
.calc-v2__price-start { font-size: 18px; }
.calc-v2__price-start > strong { font-size: 30px; }
#calc-block[data-selection-pending="true"] #calc-quick,
#calc-block[data-selection-pending="true"] #calc-open,
#calc-block[data-selection-pending="true"] #price-with-tax,
#calc-block[data-selection-pending="true"] #price-incluye,
#calc-block[data-selection-pending="true"] #price-config-note,
#calc-block[data-selection-pending="true"] .order-selection__title,
#calc-block[data-selection-pending="true"] #order-selection,
#calc-block[data-selection-pending="true"] #calc-entrega,
#calc-block[data-selection-pending="true"] #btn-propuesta { display: none !important; }