@charset "UTF-8";
/* =============================================================
   RemiseroStudio.com — Landing B2B "Impresión de Afiches y Posters"
   Archivo: /css/afiches-b2b.css
   Uso EXCLUSIVO de: /impresion-color/afiches/
   Todas las clases van prefijadas .afb-  (Afiches B2B)
   No sobreescribe estilos globales del sitio.
   Actualizado: 2026-09-11c (cotizador en 5 pasos, validación por tipo, resumen equilibrado)
   ============================================================= */

/* ---------- Tokens (locales, no tocan :root global) ---------- */
.afb-scope,
.afb-hero,
.afb-sec,
.afb-cta-final,
.afb-trust {
  --afb-black:      #0d0d0d;
  --afb-ink:        #1a1a1a;
  --afb-muted:      #5c5c5c;
  --afb-line:       #e4e4e4;
  --afb-soft:       #f6f7f5;
  --afb-white:      #ffffff;
  --afb-accent:     #bdff06;
  --afb-accent-dk:  #9ad900;
  --afb-wa:         #25d366;
  --afb-wa-dk:      #1da851;
  --afb-radius:     10px;
  --afb-radius-lg:  16px;
  --afb-shadow:     0 2px 14px rgba(0,0,0,.08);
  --afb-shadow-hv:  0 10px 34px rgba(0,0,0,.16);
  --afb-max:        1240px;
  --afb-ease:       cubic-bezier(.22,.61,.36,1);
  --afb-font:       'Barlow', 'Helvetica Neue', Arial, sans-serif;
  /* Fallback ESTRECHO: mientras carga Barlow Condensed, Windows usa Arial Narrow,
     de ancho casi idéntico. Antes caía en 'Barlow' y luego Arial, mucho más anchas,
     y por eso el H1 pasaba de 4 líneas a 2 de golpe. */
  --afb-display:    'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', 'Liberation Sans Narrow', Arial, sans-serif;
}

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

.afb-scope { font-family: var(--afb-font); color: var(--afb-ink); }
.afb-scope img { max-width: 100%; height: auto; display: block; }

/* Contenedor interno */
.afb-wrap {
  width: 100%;
  max-width: var(--afb-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Títulos de sección ---------- */
/* NOTA: main.css define reglas globales para h2/h3/p/ul (h2{text-align:center},
   h3{font-size:20px;text-align:center}, p{margin-bottom:20px;font-weight:300}).
   Por eso aquí se declaran explícitamente text-align, line-height y font-weight. */
.afb-sec { padding: 56px 0; }
.afb-sec--soft { background: var(--afb-soft); }

.afb-sec-head { margin: 0 0 28px; }

.afb-h2 {
  position: relative;
  display: block;
  font-family: var(--afb-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.08;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: -.3px;
  color: var(--afb-black);
  margin: 0 0 10px;
  padding-left: 40px;
}
/* Barra de acento posicionada: así un título de varias líneas no la empuja */
.afb-h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: var(--afb-accent);
}
.afb-h2 em { font-style: normal; color: var(--afb-accent-dk); }

.afb-sub {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  color: var(--afb-muted);
  margin: 0;
  max-width: 780px;
}

/* ---------- Botones ---------- */
.afb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--afb-font);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: var(--afb-radius);
  text-decoration: none !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.afb-btn svg { flex: 0 0 auto; }
.afb-btn:hover { transform: translateY(-2px); }

.afb-btn--wa { background: var(--afb-wa); color: #fff !important; border-color: var(--afb-wa); }
.afb-btn--wa:hover { background: var(--afb-wa-dk); border-color: var(--afb-wa-dk); box-shadow: 0 8px 24px rgba(37,211,102,.35); }

.afb-btn--accent { background: var(--afb-accent); color: var(--afb-black) !important; border-color: var(--afb-accent); }
.afb-btn--accent:hover { background: var(--afb-accent-dk); border-color: var(--afb-accent-dk); }

.afb-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.65); }
.afb-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.afb-btn--outline { background: #fff; color: var(--afb-black) !important; border-color: var(--afb-black); }
.afb-btn--outline:hover { background: var(--afb-black); color: #fff !important; }

.afb-btn--lg { font-size: 1.05rem; padding: 17px 34px; }

/* =============================================================
   1. HERO B2B
   ============================================================= */
.afb-hero {
  position: relative;
  width: 100%;
  min-height: 620px;
  background: #0b0b0b;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.afb-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.afb-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Móvil / tablet: la foto es fondo completo con velo oscuro */
.afb-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8,8,8,.93) 0%, rgba(8,8,8,.84) 40%, rgba(8,8,8,.55) 100%),
    linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%);
}

/* Escritorio: texto a la izquierda, foto vertical a la derecha (mockup) */
@media (min-width: 901px) {
  .afb-hero-media { left: 40%; }
  .afb-hero-media::after {
    background:
      linear-gradient(to right, #0b0b0b 0%, rgba(11,11,11,.92) 10%, rgba(11,11,11,.35) 34%, rgba(11,11,11,0) 62%),
      linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 40%);
  }
  .afb-hero-col { max-width: 52%; }
}
.afb-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--afb-max);
  margin: 0 auto;
  padding: 76px 20px 64px;
}
.afb-hero-col { max-width: 640px; }

.afb-hero h1 {
  font-family: var(--afb-display) !important;
  font-size: clamp(2.1rem, 5.4vw, 3.9rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: #fff !important;
  margin: 0 0 18px !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.afb-hero h1 em { font-style: normal; color: var(--afb-accent); }

.afb-hero-lead {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  font-weight: 400;
  text-align: left;
  line-height: 1.62;
  color: rgba(255,255,255,.9);
  margin: 0 0 12px;
  max-width: 560px;
}
.afb-hero-note {
  font-size: .95rem;
  text-align: left;
  font-weight: 600;
  color: var(--afb-accent);
  margin: 0 0 28px;
  letter-spacing: .2px;
}

.afb-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

/* Chips de beneficios */
.afb-hero-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  max-width: 620px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.afb-hero-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  list-style: none;
  color: rgba(255,255,255,.88);
}
.afb-hero-feats svg { flex: 0 0 auto; margin-top: 1px; color: var(--afb-accent); }

/* ── Entrada del hero: mismos tiempos, easing y recorrido que /impresion-color/
      (rsIcUp .8s escalonado .46s → .80s y el barrido rsIcWipe de 1.2s).
      Los keyframes viven en /css/rs-reveal.css. Si ese archivo no cargara,
      la animación simplemente no corre y el hero se ve normal. ── */
.afb-hero-wipe{
  position:absolute;top:0;bottom:0;left:-3px;width:3px;
  z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,transparent,var(--afb-accent),transparent);
  box-shadow:0 0 26px 3px rgba(189,255,6,.4);
  animation:rsIcWipe 1.2s cubic-bezier(.66,0,.28,1) both;
}
.afb-hero h1     { animation:rsIcUp .8s var(--afb-ease) both .46s; }
.afb-hero-lead   { animation:rsIcUp .8s var(--afb-ease) both .54s; }
.afb-hero-note   { animation:rsIcUp .8s var(--afb-ease) both .58s; }
.afb-hero-ctas   { animation:rsIcUp .8s var(--afb-ease) both .62s; }
.afb-hero-feats  { animation:rsIcUp .8s var(--afb-ease) both .70s; }
.afb-hero-tag    { animation:rsIcUp .8s var(--afb-ease) both .78s; }
.afb-trust       { animation:rsIcUp .8s var(--afb-ease) both .80s; }

@media (prefers-reduced-motion:reduce){
  .afb-hero-wipe{ display:none !important; }
}

/* Aviso "solo impresión" — va dentro de .afb-hero-col pero se ancla al hero */
.afb-hero-tag {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  max-width: 320px;
  text-align: right;
  line-height: 1.35;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9);
  font-size: .74rem;
  letter-spacing: .3px;
  padding: 7px 13px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* =============================================================
   Barra de confianza
   ============================================================= */
.afb-trust {
  background: var(--afb-black);
  border-top: 3px solid var(--afb-accent);
}
.afb-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px 26px;
  padding: 18px 20px;
  max-width: var(--afb-max);
  margin: 0 auto;
}
.afb-trust-grid div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: .87rem;
  font-weight: 500;
}
.afb-trust-grid svg { flex: 0 0 auto; color: var(--afb-accent); }

/* =============================================================
   2. USOS COMERCIALES  ·  tarjetas con imagen
   ============================================================= */
.afb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.afb-cards--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }

.afb-card {
  background: #fff;
  border: 1px solid var(--afb-line);
  border-radius: var(--afb-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.afb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--afb-shadow-hv);
  border-color: #cfcfcf;
}
.afb-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #eceeea;
  overflow: hidden;
}
.afb-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform .5s ease;
}
.afb-card:hover .afb-card-img img { transform: scale(1.05); }

.afb-card-body { padding: 16px 16px 20px; flex: 1 1 auto; }
.afb-card-body h3 {
  font-family: var(--afb-font);
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  color: var(--afb-black);
  margin: 0 0 7px;
  line-height: 1.25;
}
.afb-card-body p {
  font-size: .89rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  color: var(--afb-muted);
  margin: 0;
}

/* =============================================================
   3. TAMAÑOS Y PRECIOS
   ============================================================= */
.afb-price-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--afb-line);
  border-left: 4px solid var(--afb-accent);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--afb-ink);
  margin: 0 0 24px;
}

.afb-prices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.afb-price {
  background: #fff;
  border: 1px solid var(--afb-line);
  border-radius: var(--afb-radius);
  padding: 18px 16px 16px;
  text-align: center;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.afb-price:hover { transform: translateY(-3px); box-shadow: var(--afb-shadow); }

.afb-price-name {
  display: block;
  font-family: var(--afb-display);
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1;
  color: var(--afb-black);
  letter-spacing: -.5px;
}
.afb-price-name.is-long { font-size: 1.22rem; padding-top: 8px; }
.afb-price-dim {
  display: block;
  font-size: .76rem;
  color: var(--afb-muted);
  margin: 5px 0 14px;
  letter-spacing: .2px;
}
.afb-price-rows { border-top: 1px dashed var(--afb-line); padding-top: 12px; }
.afb-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.afb-price-row + .afb-price-row { margin-top: 8px; }
.afb-price-row span {
  font-size: .74rem;
  color: var(--afb-muted);
  text-align: left;
  line-height: 1.25;
}
.afb-price-row strong { font-size: 1.06rem; font-weight: 800; color: var(--afb-black); white-space: nowrap; }
.afb-price-row--bulk { padding-top: 8px; border-top: 1px solid var(--afb-line); }
.afb-price-row--bulk strong { color: #2f7a00; }

/* Bloque gran formato */
.afb-bigformat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  background: var(--afb-black);
  color: #fff;
  border-radius: var(--afb-radius-lg);
  padding: 26px 30px;
}
.afb-bigformat h3 {
  font-family: var(--afb-display);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: -.2px;
}
.afb-bigformat h3 em { font-style: normal; color: var(--afb-accent); }
.afb-bigformat p { margin: 0; font-size: .95rem; font-weight: 400; line-height: 1.55; text-align: left; color: rgba(255,255,255,.82); }
.afb-bigformat strong { color: var(--afb-accent); }

.afb-legal {
  margin: 18px 0 0;
  font-size: .82rem;
  font-weight: 400;
  text-align: left;
  color: var(--afb-muted);
  line-height: 1.55;
}

/* =============================================================
   4. MATERIALES
   ============================================================= */
.afb-mat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
}
.afb-mat {
  background: #fff;
  border: 1px solid var(--afb-line);
  border-radius: var(--afb-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.afb-mat:hover { transform: translateY(-4px); box-shadow: var(--afb-shadow-hv); }
.afb-mat.is-main { border-color: var(--afb-accent-dk); box-shadow: 0 0 0 2px rgba(189,255,6,.28); }
.afb-mat-img { aspect-ratio: 4 / 3; background: #f0f0f0; overflow: hidden; }
.afb-mat-img img { width: 100%; height: 100%; object-fit: cover; }
.afb-mat-body { padding: 16px 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; }
.afb-mat-body h3 { font-size: 1rem; font-weight: 700; text-align: left; margin: 0 0 8px; color: var(--afb-black); line-height: 1.25; }
.afb-mat-body p { font-size: .87rem; font-weight: 400; line-height: 1.55; text-align: left; color: var(--afb-muted); margin: 0 0 14px; flex: 1 1 auto; }
.afb-tag {
  align-self: flex-start;
  display: inline-block;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 5px 11px;
  border-radius: 20px;
  background: #eef0ec;
  color: #3a3a3a;
}
.afb-tag--pop { background: var(--afb-accent); color: var(--afb-black); }

.afb-disclaimer {
  margin: 22px 0 0;
  background: #fff;
  border: 1px solid var(--afb-line);
  border-left: 4px solid #d0d0d0;
  border-radius: 6px;
  padding: 14px 16px;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--afb-muted);
}
.afb-disclaimer strong { color: var(--afb-ink); }

/* =============================================================
   5. PRODUCCIÓN POR VOLUMEN  /  6. POSTERS CIENTÍFICOS
   ============================================================= */
.afb-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
}
.afb-split--rev .afb-split-media { order: 2; }
.afb-split-media {
  border-radius: var(--afb-radius-lg);
  overflow: hidden;
  box-shadow: var(--afb-shadow);
  aspect-ratio: 4 / 3;
}
.afb-split-media img { width: 100%; height: 100%; object-fit: cover; }
.afb-split-media--portrait { aspect-ratio: 4 / 5; }
.afb-split-text h2 { margin-bottom: 14px; }
.afb-split-text p { font-size: 1rem; font-weight: 400; line-height: 1.68; text-align: left; color: var(--afb-muted); margin: 0 0 16px; }

.afb-list { list-style: none; margin: 0 0 24px; padding: 0; font-size: 1em; }
.afb-list li {
  position: relative;
  padding-left: 26px;
  font-size: .93rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-indent: 0;
  list-style: none;
  color: var(--afb-ink);
  margin-bottom: 10px;
}
.afb-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--afb-accent);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--afb-accent-dk);
}

/* =============================================================
   7. B2C SECUNDARIO
   ============================================================= */
.afb-b2c { background: var(--afb-soft); padding: 46px 0; border-top: 1px solid var(--afb-line); }
.afb-b2c .afb-h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.afb-b2c-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 20px;
}
.afb-b2c-item {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #e8e8e8;
  border: 1px solid var(--afb-line);
  position: relative;
}
.afb-b2c-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.afb-b2c-item:hover img { transform: scale(1.06); }

/* =============================================================
   FAQ
   ============================================================= */
.afb-faq-list { max-width: 900px; }
.afb-faq-item { background: #fff; border: 1px solid var(--afb-line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.afb-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 16px 46px 16px 18px;
  font-family: var(--afb-font);
  font-size: .98rem;
  font-weight: 700;
  color: var(--afb-black);
  cursor: pointer;
  position: relative;
  line-height: 1.4;
}
.afb-faq-q::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--afb-accent-dk);
  transition: transform .2s ease;
}
.afb-faq-item.is-open .afb-faq-q::after { content: "–"; }
.afb-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.afb-faq-item.is-open .afb-faq-a { max-height: 520px; }
.afb-faq-a-in { padding: 0 18px 18px; font-size: .92rem; font-weight: 400; text-align: left; line-height: 1.68; color: var(--afb-muted); }

/* =============================================================
   8. CTA FINAL
   ============================================================= */
.afb-cta-final {
  background: var(--afb-black);
  color: #fff;
  padding: 52px 0;
  text-align: center;
}
.afb-cta-final h2 {
  text-align: center;
  font-family: var(--afb-display);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: -.4px;
}
.afb-cta-final h2 em { font-style: normal; color: var(--afb-accent); }
.afb-cta-final p { margin: 0 auto 26px; max-width: 620px; font-size: 1rem; font-weight: 400; text-align: center; line-height: 1.6; color: rgba(255,255,255,.8); }

/* =============================================================
   Formulario WhatsApp
   ============================================================= */
.afb-form-sec { padding: 52px 0; background: var(--afb-soft); }
.afb-form {
  background: #fff;
  border: 1px solid var(--afb-line);
  border-radius: var(--afb-radius-lg);
  padding: 30px;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: var(--afb-shadow);
}
.afb-form h2 { margin-bottom: 6px; }
.afb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.afb-field { display: flex; flex-direction: column; }
.afb-field label { font-size: .82rem; font-weight: 700; color: var(--afb-ink); margin-bottom: 6px; }
.afb-field input,
.afb-field select,
.afb-field textarea {
  font-family: var(--afb-font);
  font-size: .93rem;
  padding: 11px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 7px;
  background: #fff;
  color: var(--afb-ink);
  width: 100%;
}
.afb-field textarea { min-height: 92px; resize: vertical; }
.afb-field input:focus,
.afb-field select:focus,
.afb-field textarea:focus {
  outline: none;
  border-color: var(--afb-accent-dk);
  box-shadow: 0 0 0 3px rgba(189,255,6,.28);
}
.afb-form .afb-btn { width: 100%; margin-top: 4px; }
.afb-form-privacy { font-size: .78rem; font-weight: 400; color: var(--afb-muted); text-align: center; margin: 12px 0 0; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1080px) {
  .afb-cards--5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .afb-prices { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .afb-mat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .afb-split { gap: 32px; }
}

@media (max-width: 900px) {
  .afb-sec { padding: 44px 0; }
  .afb-hero { min-height: 0; }
  .afb-hero-inner { padding: 62px 20px 56px; }
  .afb-hero-feats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .afb-trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .afb-split { grid-template-columns: 1fr; gap: 26px; }
  .afb-split--rev .afb-split-media { order: 0; }
  .afb-bigformat { grid-template-columns: 1fr; text-align: left; }
  .afb-b2c-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
}

@media (max-width: 720px) {
  .afb-cards--5,
  .afb-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .afb-prices { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .afb-form-row { grid-template-columns: 1fr; }
  .afb-form { padding: 22px 18px; }
}

/* --- Móvil: respeta el orden visual del mockup --- */
@media (max-width: 600px) {
  .afb-wrap { padding: 0 16px; }
  .afb-h2 { padding-left: 30px; }
  .afb-h2::before { width: 20px; height: 4px; }
  .afb-sec { padding: 36px 0; }

  /* Hero compacto, imagen de fondo + texto encima */
  .afb-hero-inner { padding: 48px 16px 44px; }
  .afb-hero h1 { font-size: 1.85rem !important; margin-bottom: 14px !important; }
  .afb-hero-lead { font-size: .95rem; margin-bottom: 10px; }
  .afb-hero-note { font-size: .88rem; margin-bottom: 22px; }
  .afb-hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 26px; }
  .afb-hero-ctas .afb-btn { width: 100%; }
  .afb-hero-feats { grid-template-columns: 1fr; gap: 10px; }
  .afb-hero-tag { position: static; display: inline-block; max-width: none; text-align: left; margin-top: 24px; }

  .afb-trust-grid { grid-template-columns: 1fr; gap: 10px; padding: 16px; }

  /* Usos comerciales: lista horizontal compacta (mockup móvil) */
  .afb-cards--5,
  .afb-cards { grid-template-columns: 1fr; gap: 12px; }
  .afb-card { flex-direction: row; align-items: stretch; }
  .afb-card-img { flex: 0 0 108px; aspect-ratio: auto; }
  .afb-card-body { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; }
  .afb-card-body h3 { font-size: .95rem; }
  .afb-card-body p { font-size: .82rem; }

  /* Materiales: mismo patrón compacto */
  .afb-mat-grid { grid-template-columns: 1fr; gap: 12px; }
  .afb-mat { flex-direction: row; }
  .afb-mat-img { flex: 0 0 96px; aspect-ratio: auto; }
  .afb-mat-body { padding: 12px 14px; }
  .afb-mat-body p { margin-bottom: 10px; font-size: .82rem; }

  /* Precios: 2 columnas de fichas */
  .afb-prices { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .afb-price { padding: 14px 10px 12px; }
  .afb-price-name { font-size: 1.5rem; }
  .afb-price-name.is-long { font-size: 1rem; }
  .afb-price-row strong { font-size: .98rem; }

  .afb-bigformat { padding: 20px 18px; border-radius: 12px; }
  .afb-bigformat h3 { font-size: 1.22rem; }

  .afb-b2c-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .afb-cta-final { padding: 40px 0; }
  .afb-cta-final .afb-btn { width: 100%; }
}

/* --- Accesibilidad / preferencias ---
   OJO: aquí NO se usa "animation: none" en bloque. Eso apagaba también la
   entrada del hero. Los keyframes de /css/rs-reveal.css ya se redefinen a
   solo opacidad bajo prefers-reduced-motion, igual que en /impresion-color/;
   aquí solo se quitan los movimientos decorativos de hover. */
@media (prefers-reduced-motion: reduce) {
  .afb-card, .afb-mat, .afb-price, .afb-btn,
  .afb-card-img img, .afb-b2c-item img,
  .afb-split-media img { transition: none !important; }
  .afb-card:hover, .afb-mat:hover, .afb-price:hover, .afb-btn:hover { transform: none !important; }
  .afb-card:hover .afb-card-img img,
  .afb-b2c-item:hover img { transform: none !important; }
}

.afb-scope a:focus-visible,
.afb-scope button:focus-visible {
  outline: 3px solid var(--afb-accent-dk);
  outline-offset: 2px;
}

/* =============================================================
   AJUSTES FINALES 2026-09-10
   Solo orden, jerarquía y claridad comercial. No cambia el diseño base.
   ============================================================= */

/* --- Usos comerciales: Tiendas/vitrinas y Retail con prioridad visual ---
   Escritorio y tablet: rejilla de 6 columnas → las 2 tarjetas destacadas
   ocupan la fila superior (3+3) y las otras 3 la segunda fila (2+2+2). */
.afb-cards--5 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.afb-cards--5 > .afb-card { grid-column: span 2; }
.afb-cards--5 > .afb-card--featured { grid-column: span 3; }

.afb-card--featured { border-color: #d2d8c8; }
.afb-card--featured .afb-card-body {
  border-top: 4px solid var(--afb-accent);
  padding: 18px 22px 22px;
}
.afb-card--featured .afb-card-body h3 { font-size: 1.28rem; margin-bottom: 8px; }
.afb-card--featured .afb-card-body p  { font-size: .95rem; }

/* --- Medidas grandes: jerarquía clara (medida → precio → nota) --- */
.afb-bigformat { padding: 28px 32px; gap: 24px; }
.afb-bigformat .afb-bigformat-text h3 {
  font-size: 1.08rem;
  letter-spacing: .5px;
  color: rgba(255,255,255,.72);
  margin: 0 0 10px;
}
.afb-bigformat .afb-bigformat-size {
  font-family: var(--afb-display);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -.2px;
  color: #fff;
  margin: 0 0 10px;
}
.afb-bigformat .afb-bigformat-size strong { color: var(--afb-accent); }
.afb-bigformat .afb-bigformat-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
}
.afb-bigformat .afb-bigformat-price strong {
  font-family: var(--afb-display);
  font-size: clamp(2.1rem, 3.6vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--afb-accent);
}
.afb-bigformat .afb-bigformat-igv {
  align-self: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 20px;
  color: rgba(255,255,255,.88);
}
.afb-bigformat .afb-bigformat-note {
  font-size: .93rem;
  font-weight: 400;
  color: rgba(255,255,255,.74);
  margin: 0;
}

/* --- Vinil Adhesivo: enlace discreto a su página de producto --- */
.afb-mat-body .afb-mat-link {
  align-self: flex-start;
  display: inline-block;
  font-size: .83rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--afb-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--afb-accent-dk) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  margin: 0 0 12px;
}
.afb-mat-body .afb-mat-link::after { content: "\2192"; display: inline-block; margin-left: 6px; text-decoration: none; transition: transform .2s ease; }
.afb-mat-body .afb-mat-link:hover { color: #2f7a00 !important; }
.afb-mat-body .afb-mat-link:hover::after { transform: translateX(3px); }

/* --- Aclaración "solo impresión": muy visible --- */
.afb-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 26px 0 0;
  background: var(--afb-black);
  border: 0;
  border-left: 5px solid var(--afb-accent);
  border-radius: var(--afb-radius);
  padding: 18px 22px;
  color: rgba(255,255,255,.8);
}
.afb-disclaimer .afb-disclaimer-ico { flex: 0 0 auto; margin-top: 2px; color: var(--afb-accent); }
.afb-disclaimer .afb-disclaimer-main {
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  color: #fff;
  margin: 0 0 6px;
}
.afb-disclaimer .afb-disclaimer-main strong { color: var(--afb-accent); font-weight: 800; }
.afb-disclaimer .afb-disclaimer-sub {
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* --- Responsive de los ajustes --- */
@media (max-width: 720px) {
  .afb-cards--5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .afb-cards--5 > .afb-card,
  .afb-cards--5 > .afb-card--featured { grid-column: auto; }
  .afb-card--featured .afb-card-body { padding: 16px 16px 20px; }
  .afb-card--featured .afb-card-body h3 { font-size: 1.1rem; }
}

@media (max-width: 600px) {
  .afb-cards--5 { grid-template-columns: 1fr; }
  .afb-card--featured .afb-card-img { flex-basis: 132px; }
  .afb-card--featured .afb-card-body {
    border-top: 0;
    border-left: 4px solid var(--afb-accent);
    padding: 14px 14px;
  }
  .afb-card--featured .afb-card-body h3 { font-size: 1.02rem; }
  .afb-card--featured .afb-card-body p  { font-size: .84rem; }

  .afb-bigformat { padding: 22px 18px; }
  .afb-bigformat .afb-bigformat-text h3 { font-size: .98rem; }
  .afb-bigformat .afb-bigformat-price strong { font-size: 2.1rem; }

  .afb-mat-body .afb-mat-link::after { content: none; }

  .afb-disclaimer { padding: 16px; gap: 11px; }
  .afb-disclaimer .afb-disclaimer-main { font-size: 1rem; }
}

/* =============================================================
   EMBUDO DE COTIZACIÓN · 2026-09-11
   Cotizador, accesos desde precios/usos, trabajos, reseñas y pasos.
   Todo con prefijo .afb- ; main.css tiene reglas globales para
   p, h3, ul, label, etc., por eso se declaran márgenes y pesos.
   ============================================================= */

.afb-scope [hidden] { display: none !important; }
.afb-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Accesos al cotizador desde el resto de la página --- */
.afb-card-link,
.afb-scope .afb-card-link {
  display: inline-block;
  margin-top: 12px;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--afb-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--afb-accent-dk) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.afb-card-link::after { content: "\2192"; display: inline-block; margin-left: 6px; text-decoration: none; transition: transform .2s ease; }
.afb-card-link:hover { color: #2f7a00 !important; }
.afb-card-link:hover::after { transform: translateX(3px); }

.afb-price-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 24px; }
.afb-price-top .afb-price-note { margin: 0; }
.afb-price-hint { margin: 0; font-size: .86rem; font-weight: 600; color: #2f7a00; text-align: left; line-height: 1.4; }

.afb-price[data-afb-cot] { cursor: pointer; display: flex; flex-direction: column; }
@media (hover: hover) {
  .afb-price[data-afb-cot]:hover { border-color: var(--afb-black); }
  .afb-price[data-afb-cot]:hover .afb-price-go { background: var(--afb-black); color: var(--afb-accent); }
}
.afb-price-go {
  margin-top: 14px;
  width: 100%;
  font-family: var(--afb-font);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 9px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--afb-black);
  background: #fff;
  color: var(--afb-black);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.afb-price-go:focus-visible { background: var(--afb-black); color: var(--afb-accent); }
.afb-price-rows { flex: 1 1 auto; }

/* =============================================================
   COTIZADOR  (versión 2026-09-11c: herramienta en 5 pasos)
   Formulario ~65% · resumen ~35% (sticky en escritorio).
   ============================================================= */
.afb-cot-sec {
  position: relative;
  scroll-margin-top: 90px;
  padding: 64px 0;
  background: linear-gradient(180deg, #edf1e5 0%, #f4f6f0 100%);
  border-top: 1px solid #e2e7d9;
  border-bottom: 1px solid #e2e7d9;
}
.afb-anchor { position: absolute; top: -90px; left: 0; width: 1px; height: 1px; }

.afb-cot {
  background: #fff;
  border: 1px solid #dde2d3;
  border-top: 5px solid var(--afb-accent);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(24,34,0,.08), 0 2px 6px rgba(0,0,0,.04);
  padding: 34px 36px 36px;
}
.afb-cot fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Cabecera */
.afb-cot-head { margin: 0 0 26px; padding: 0 0 22px; border-bottom: 1px solid var(--afb-line); }
.afb-cot-head .afb-h2 { margin-bottom: 10px; }
.afb-cot-lead { margin: 0 0 10px; font-size: 1.06rem; font-weight: 500; line-height: 1.5; text-align: left; color: var(--afb-ink); }
.afb-cot-quick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f1fbd8;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2f6a00;
}

/* Pasos */
.afb-cot-step { border: 0; margin: 0; padding: 0; min-width: 0; scroll-margin-top: 100px; border-radius: 10px; }
.afb-cot-form > .afb-cot-step + .afb-cot-step { margin-top: 26px; padding-top: 24px; border-top: 1px dashed #d9dfcf; }
.afb-scope .afb-step-tit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--afb-font);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--afb-black);
}
.afb-step-n {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--afb-black);
  color: var(--afb-accent);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1;
}
.afb-step-tit .afb-f-opt { font-size: .82rem; font-weight: 500; }
.afb-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: start; }

/* Paso 1 · tipo de pedido */
.afb-cot-tipos-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.afb-tipo { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400; }
.afb-tipo input,
.afb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.afb-tipo-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 16px 14px;
  border: 2px solid #dfe3d8;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.afb-tipo-box::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #cfd4c8;
  background: #fff;
  box-sizing: border-box;
}
.afb-tipo:hover .afb-tipo-box { border-color: var(--afb-accent-dk); background: #fbfff0; transform: translateY(-2px); }
.afb-tipo input:checked + .afb-tipo-box { border-color: var(--afb-black); background: #fbfff1; box-shadow: 0 0 0 3px rgba(189,255,6,.55); }
.afb-tipo input:checked + .afb-tipo-box::after {
  content: "\2713";
  display: grid;
  place-items: center;
  border-color: var(--afb-black);
  background: var(--afb-black);
  color: var(--afb-accent);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.afb-tipo input:focus-visible + .afb-tipo-box { outline: 3px solid var(--afb-accent-dk); outline-offset: 2px; }
.afb-tipo-ico { font-size: 1.65rem; line-height: 1; }
.afb-tipo-tit { font-size: 1rem; font-weight: 800; line-height: 1.25; color: var(--afb-black); padding-right: 22px; }
.afb-tipo-txt { flex: 1 1 auto; font-size: .83rem; line-height: 1.45; color: var(--afb-muted); }
.afb-tipo-tag { align-self: flex-start; margin-top: 4px; padding: 4px 9px; border-radius: 20px; background: #eef0ec; font-size: .7rem; font-weight: 700; letter-spacing: .3px; color: #3a3a3a; }
.afb-tipo input:checked + .afb-tipo-box .afb-tipo-tag { background: var(--afb-accent); color: var(--afb-black); }

/* Formulario + resumen */
.afb-cot-grid {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(300px, 35fr);
  gap: 34px;
  align-items: start;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--afb-line);
}
.afb-f { display: flex; flex-direction: column; min-width: 0; border-radius: 10px; scroll-margin-top: 110px; transition: box-shadow .3s ease, background .3s ease; }
.afb-f--full { grid-column: 1 / -1; }
.afb-f-lab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 7px; font-size: .9rem; font-weight: 700; line-height: 1.3; text-align: left; color: var(--afb-ink); }
.afb-f-opt { font-size: .78rem; font-weight: 500; color: var(--afb-muted); }

.afb-f input[type="text"],
.afb-f input[type="number"],
.afb-f input[type="date"],
.afb-f select,
.afb-f textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 13px;
  font-family: var(--afb-font);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--afb-ink);
  background: #fff;
  border: 1.5px solid #cfd4c8;
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.afb-f select { cursor: pointer; }
.afb-f textarea { min-height: 70px; resize: vertical; }
.afb-f input:hover, .afb-f select:hover, .afb-f textarea:hover { border-color: #aeb5a4; }
.afb-f input:focus,
.afb-f select:focus,
.afb-f textarea:focus { outline: none; border-color: var(--afb-accent-dk); box-shadow: 0 0 0 3px rgba(189,255,6,.35); }

.afb-f-help { margin: 6px 0 0; font-size: .79rem; font-weight: 400; line-height: 1.45; text-align: left; color: var(--afb-muted); }
.afb-f-help b { font-weight: 700; color: var(--afb-ink); }
.afb-f-warn { margin: 8px 0 0; padding: 8px 10px; font-size: .8rem; font-weight: 500; line-height: 1.45; text-align: left; color: #8a3500; background: #fff4e5; border: 1px solid #ffd49a; border-radius: 6px; }

/* Cantidad destacada (cambia el precio) */
.afb-f--cant .afb-f-lab { font-size: .98rem; }
.afb-f--cant input[type="number"] {
  min-height: 56px;
  font-size: 1.35rem;
  font-weight: 800;
  border: 2px solid #b9c1ad;
  background: #fcfff6;
}
.afb-f--cant input[type="number"]::placeholder { font-weight: 500; color: #9aa092; }

/* Tamaños en fichas */
.afb-chips { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.afb-chips--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.afb-chip { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400; }
.afb-chip > span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 10px 6px;
  text-align: center;
  background: #fff;
  border: 2px solid #d6dbcf;
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.afb-chip strong { font-family: var(--afb-display); font-size: 1.5rem; font-weight: 900; line-height: 1; color: var(--afb-black); }
.afb-chip strong.is-long,
.afb-chip--txt strong { font-family: var(--afb-font); font-size: .9rem; font-weight: 800; line-height: 1.2; }
.afb-chip small { font-size: .75rem; font-weight: 500; line-height: 1.2; color: #555; }
.afb-chip:hover > span { border-color: var(--afb-accent-dk); background: #f8ffe6; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.afb-chip input:checked + span { background: var(--afb-accent); border-color: var(--afb-black); box-shadow: 0 0 0 3px rgba(189,255,6,.35); transform: none; }
.afb-chip input:checked + span small { color: #1a1a1a; font-weight: 600; }
.afb-chip input:checked + span::after {
  content: "\2713";
  position: absolute;
  top: -8px; right: -8px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--afb-black);
  color: var(--afb-accent);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.afb-chip input:focus-visible + span { outline: 3px solid var(--afb-black); outline-offset: 2px; }

/* Ancho × alto */
.afb-medida { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: end; max-width: 480px; }
.afb-medida-in { display: flex; flex-direction: column; }
.afb-medida-in label { margin: 0 0 6px; font-size: .88rem; font-weight: 700; text-align: left; color: var(--afb-ink); }
.afb-medida-x { padding-bottom: 13px; font-size: 1.1rem; font-weight: 700; color: var(--afb-muted); }

/* Campos que faltan: solo después de intentar continuar */
.afb-f.is-missing input[type="text"],
.afb-f.is-missing input[type="number"],
.afb-f.is-missing select,
.afb-f.is-missing .afb-chip > span { border-color: #d9472b; }
.afb-f-err {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: #b8321a;
}
.afb-f-err::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #d9472b;
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
}
.afb-f.is-flash,
.afb-cot-tipos.is-flash { animation: afbFlash 1.6s ease; }
@keyframes afbFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(189,255,6,0); background: transparent; }
  25%, 60% { box-shadow: 0 0 0 8px rgba(189,255,6,.38); background: rgba(189,255,6,.12); }
}

/* Precio en vivo junto a la cantidad (solo cuando el resumen queda abajo) */
.afb-cot-live {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1fbd8;
  border: 1px solid #cfe98a;
  font-size: .88rem;
  line-height: 1.3;
  text-align: left;
  color: var(--afb-ink);
}
.afb-cot-live strong { font-weight: 800; color: var(--afb-black); }

/* Resumen (equilibrado con el formulario) */
.afb-cot-res { position: sticky; top: 100px; }
.afb-cot-res-in { background: #f7f8f4; border: 1px solid #e0e4d8; border-radius: 16px; padding: 22px 22px 20px; }
.afb-cot-res-kicker {
  margin: 0 0 4px;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--afb-black);
  font-family: var(--afb-display);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: left;
  color: var(--afb-black);
}
.afb-res-rows { border-top: 1px solid #e3e7dc; }
.afb-res-rows:first-child { border-top: 0; }
.afb-res-rows--money { margin-top: 8px; }
.afb-res-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e3e7dc; font-size: .88rem; line-height: 1.35; }
.afb-res-row span { text-align: left; color: var(--afb-muted); }
.afb-res-row strong { text-align: right; font-weight: 700; color: var(--afb-black); }
.afb-res-row--unit strong { font-size: 1rem; color: #2f7a00; }
.afb-res-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 0 4px; }
.afb-res-total span { font-size: .8rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--afb-black); }
.afb-res-total strong {
  font-family: var(--afb-display);
  font-size: clamp(1.9rem, 2.8vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.5px;
  white-space: nowrap;
  color: var(--afb-black);
  background: linear-gradient(transparent 60%, rgba(189,255,6,.8) 60%);
  padding: 0 2px;
}
.afb-res-empty { margin: 12px 0 0; padding: 14px; border: 1px dashed #cdd3c4; border-radius: 10px; background: #fff; font-size: .9rem; line-height: 1.5; text-align: left; color: var(--afb-muted); }
.afb-res-empty b { color: var(--afb-black); }
.afb-res-nudge { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #cfe98a; border-radius: 10px; background: #f1fbd8; font-size: .82rem; line-height: 1.5; text-align: left; color: #2b3a00; }
.afb-res-nudge b { color: var(--afb-black); }
.afb-res-nudge-btn { display: inline-block; margin-top: 6px; padding: 5px 11px; font-family: var(--afb-font); font-size: .78rem; font-weight: 700; border: 0; border-radius: 20px; background: var(--afb-black); color: var(--afb-accent); cursor: pointer; }
.afb-res-nudge-btn:hover { background: #333; }
.afb-res-msg { margin: 12px 0 0; font-size: .86rem; font-weight: 400; line-height: 1.55; text-align: left; color: var(--afb-muted); }
.afb-res-msg--main { font-size: .92rem; font-weight: 600; color: var(--afb-black); }
.afb-res-msg--ok { padding: 9px 11px; border-radius: 8px; background: #f1fbd8; border: 1px solid #cfe98a; color: #2b3a00; }
.afb-res-refs { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e0e4d8; }
.afb-res-refs-tit { margin: 0 0 4px; font-size: .7rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; text-align: left; color: var(--afb-muted); }
.afb-res-ref2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 0; }
.afb-res-ref2 + .afb-res-ref2 { border-top: 1px solid #e8ebe3; }
.afb-res-ref2 span { width: 100%; font-size: .78rem; color: var(--afb-muted); }
.afb-res-ref2 strong { font-family: var(--afb-display); font-size: 1.3rem; font-weight: 900; line-height: 1.05; color: var(--afb-black); }
.afb-res-ref2 em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--afb-ink); }
.afb-res-sec { margin: 16px 0 0; }
.afb-res-sec-tit { margin: 0 0 2px; font-size: .7rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; text-align: left; color: var(--afb-muted); }
.afb-res-rows--sec .afb-res-row { padding: 6px 0; font-size: .8rem; }
.afb-res-rows--sec .afb-res-row strong { font-weight: 600; }

/* Botón: desactivado hasta completar los datos obligatorios */
.afb-cot-cta { width: 100%; margin-top: 18px; }
.afb-cot-cta.is-disabled,
.afb-cot-cta.is-disabled:hover {
  background: #e2e5dc;
  border-color: #e2e5dc;
  color: #6f7568 !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.afb-cot-cta.is-disabled svg { opacity: .45; }
.afb-cot-falta { margin: 8px 0 0; min-height: 1em; font-size: .8rem; font-weight: 500; text-align: center; color: var(--afb-muted); }
.afb-cot-falta:empty { display: none; }
.afb-cot-res-foot { margin: 12px 0 0; font-size: .76rem; font-weight: 400; line-height: 1.5; text-align: left; color: var(--afb-muted); }

/* Responsive del cotizador */
@media (max-width: 1080px) {
  .afb-cot-tipos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .afb-cot-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; }
  .afb-chips { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .afb-chips--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .afb-cot-grid { grid-template-columns: 1fr; }
  .afb-cot-res { position: static; }
  .afb-cot-live:not([hidden]) { display: flex; }
  .afb-chips { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .afb-chips--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .afb-step-grid { grid-template-columns: 1fr; }
  .afb-chips { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .afb-chips--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .afb-cot-sec { padding: 32px 0; }
  .afb-cot { padding: 22px 16px 22px; border-radius: 14px; }
  .afb-cot-head { margin-bottom: 20px; padding-bottom: 18px; }
  .afb-cot-lead { font-size: .98rem; }
  .afb-scope .afb-step-tit { font-size: 1rem; gap: 6px 10px; }
  .afb-step-n { width: 28px; height: 28px; font-size: .85rem; }
  .afb-cot-form > .afb-cot-step + .afb-cot-step { margin-top: 22px; padding-top: 20px; }
  .afb-cot-tipos-grid { grid-template-columns: 1fr; gap: 8px; }
  .afb-tipo-box { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 12px; row-gap: 3px; padding: 12px 40px 12px 12px; }
  .afb-tipo-ico { grid-row: 1 / span 3; font-size: 1.5rem; align-self: center; }
  .afb-tipo-tit { padding-right: 0; font-size: .95rem; }
  .afb-tipo-txt { font-size: .8rem; }
  .afb-tipo-tag { margin-top: 2px; justify-self: start; }
  .afb-tipo-box::after { top: 50%; margin-top: -10px; }
  .afb-tipo:hover .afb-tipo-box { transform: none; }
  .afb-cot-grid { margin-top: 22px; padding-top: 20px; gap: 22px; }
  .afb-chip > span { min-height: 66px; }
  .afb-chip strong { font-size: 1.3rem; }
  .afb-chip:hover > span { transform: none; }
  .afb-cot-res-in { padding: 18px 16px; }
}

/* =============================================================
   TRABAJOS IMPRESOS (se muestra solo cuando hay fotos reales)
   ============================================================= */
.afb-trab-sec { border-top: 1px solid var(--afb-line); }
.afb-trab-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.afb-trab-fil {
  font-family: var(--afb-font);
  font-size: .84rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid #d2d2d2;
  background: #fff;
  color: var(--afb-ink);
  cursor: pointer;
}
.afb-trab-fil[aria-pressed="true"] { background: var(--afb-black); border-color: var(--afb-black); color: var(--afb-accent); }
.afb-trab-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.afb-trab-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--afb-radius);
  border: 1px solid var(--afb-line);
  background: #eceeea;
}
.afb-trab-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.afb-trab-item:hover img { transform: scale(1.05); }
.afb-trab-cap {
  position: absolute;
  left: 10px; bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,0,0,.74);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}

/* =============================================================
   RESEÑAS
   ============================================================= */
.afb-op {
  position: relative;
  max-width: 880px;
  margin: 0;
  padding: 28px 32px 26px;
  background: #fff;
  border: 1px solid var(--afb-line);
  border-left: 5px solid var(--afb-accent);
  border-radius: var(--afb-radius-lg);
  box-shadow: var(--afb-shadow);
}
.afb-op::before {
  content: "\201D";
  position: absolute;
  top: 6px; right: 24px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  line-height: 1;
  color: #edf5d6;
  pointer-events: none;
}
.afb-op-top { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.afb-op-stars { font-size: 1.12rem; letter-spacing: 2px; color: #f5b301; }
.afb-op-fuente { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #eef0ec; color: #3a3a3a; }
.afb-scope .afb-op-txt {
  position: relative;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--afb-font);
  font-size: clamp(1.08rem, 2vw, 1.34rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  color: var(--afb-black);
}
.afb-op-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.afb-op-nombre { font-size: .92rem; font-weight: 800; letter-spacing: .5px; color: var(--afb-black); }
.afb-op-trabajo { font-size: .82rem; color: var(--afb-muted); }

/* =============================================================
   CÓMO HACER TU PEDIDO
   ============================================================= */
.afb-scope .afb-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.afb-scope .afb-paso {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px 18px 18px;
  list-style: none;
  text-indent: 0;
  background: #fff;
  border: 1px solid var(--afb-line);
  border-radius: var(--afb-radius);
}
.afb-scope .afb-paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px; right: -13px;
  width: 8px; height: 8px;
  border-top: 2px solid #c4c4c4;
  border-right: 2px solid #c4c4c4;
  transform: rotate(45deg);
}
.afb-paso-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.afb-paso-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--afb-black); color: var(--afb-accent); }
.afb-paso-n { font-family: var(--afb-display); font-size: 2.1rem; font-weight: 900; line-height: 1; color: #e3e7dc; }
.afb-scope .afb-paso h3 { margin: 0 0 7px; font-family: var(--afb-font); font-size: 1.02rem; font-weight: 800; line-height: 1.3; text-align: left; color: var(--afb-black); }
.afb-scope .afb-paso p { margin: 0; font-size: .88rem; font-weight: 400; line-height: 1.55; text-align: left; color: var(--afb-muted); }
.afb-scope .afb-paso .afb-paso-nota {
  margin: 10px 0 0;
  padding: 7px 9px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
  color: #3a3a3a;
  background: #f1f4eb;
  border-radius: 6px;
}
.afb-pasos-cta { margin: 24px 0 0; text-align: left; }

/* CTA final con dos salidas */
.afb-cta-final-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* =============================================================
   RESPONSIVE del embudo
   ============================================================= */
@media (max-width: 1080px) {
  .afb-scope .afb-pasos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .afb-scope .afb-paso:not(:last-child)::after { display: none; }
  .afb-trab-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .afb-price-go { font-size: .76rem; }
}

@media (max-width: 600px) {
  .afb-price-top { gap: 8px; }
  .afb-price-go { font-size: .74rem; padding: 8px 4px; }

  .afb-op { padding: 22px 18px 20px; }
  .afb-op::before { font-size: 4.5rem; right: 14px; }

  .afb-scope .afb-pasos { grid-template-columns: 1fr; gap: 10px; }
  .afb-scope .afb-paso { padding: 16px; }
  .afb-paso-top { margin-bottom: 10px; }
  .afb-pasos-cta .afb-btn { width: 100%; }

  .afb-trab-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

  .afb-cta-final-btns { flex-direction: column; }
  .afb-cta-final-btns .afb-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .afb-tipo-box, .afb-f, .afb-trab-item img { transition: none !important; }
  .afb-f.is-flash, .afb-cot-tipos.is-flash { animation: none !important; }
}

/* =============================================================
   AJUSTES 2026-09-11b · reglas definitivas
   ============================================================= */
/* Tabla: tercera escala (100 unidades o más) */
.afb-price-row--100 { padding-top: 8px; border-top: 1px solid var(--afb-line); }
.afb-price-row--100 strong { color: #2f7a00; }
.afb-price-row--100 span { font-weight: 600; color: var(--afb-ink); }

/* Materiales: características del Papel Trisol */
.afb-scope .afb-mat-feats { list-style: none; margin: 0 0 14px; padding: 0; }
.afb-scope .afb-mat-feats li {
  position: relative;
  margin: 0 0 5px;
  padding-left: 18px;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  text-indent: 0;
  list-style: none;
  color: var(--afb-ink);
}
.afb-scope .afb-mat-feats li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--afb-accent-dk);
}
.afb-mat.is-main .afb-mat-body p { flex: 0 0 auto; }
.afb-mat.is-main .afb-mat-feats { flex: 1 1 auto; }

/* =============================================================
   REVISIÓN DE EMBUDO · 2026-09-19
   Bloques nuevos: CTA único de aplicaciones, sección de entrega,
   nota del paso opcional y guardas de solape en pantallas medianas.
   No cambia precios, medidas, escalas ni identidad visual.
   ============================================================= */

/* CTA único debajo de las tarjetas de aplicaciones */
/* Cierre del bloque de aplicaciones: barra anclada a la rejilla de
   tarjetas (mismo ancho y mismo lenguaje visual), para que el botón
   no quede suelto en medio del espacio en blanco. */
.afb-cards-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 16px 0 0;
  padding: 18px 22px;
  background: var(--afb-soft);
  border: 1px solid var(--afb-line);
  border-radius: var(--afb-radius);
  text-align: left;
}
.afb-scope .afb-cards-cta-txt {
  flex: 1 1 320px;
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  color: var(--afb-muted);
}
.afb-scope .afb-cards-cta-txt b { font-weight: 700; color: var(--afb-ink); }
.afb-cards-cta .afb-btn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .afb-cards-cta { flex-direction: column; align-items: stretch; padding: 16px; gap: 14px; }
  .afb-scope .afb-cards-cta-txt { text-align: center; flex: 0 0 auto; }
  .afb-cards-cta .afb-btn { width: 100%; justify-content: center; }
}

/* Nota del paso de datos opcionales del cotizador */
.afb-cot-opc-note {
  margin: -4px 0 14px;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: var(--afb-muted);
}

/* ---- Sección ENTREGA Y RECOJO ---- */
.afb-entrega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.afb-entrega {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--afb-line);
  border-radius: var(--afb-radius);
  padding: 20px 20px 18px;
}
.afb-entrega-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--afb-black);
  color: var(--afb-accent);
}
.afb-scope .afb-entrega h3 {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  margin: 0 0 8px;
  color: var(--afb-black);
}
.afb-scope .afb-entrega p {
  font-size: .89rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  color: var(--afb-muted);
  margin: 0 0 14px;
  flex: 1 1 auto;
}

@media (max-width: 900px) {
  .afb-entrega-grid { grid-template-columns: 1fr; gap: 12px; }
  .afb-entrega { padding: 16px 16px 14px; }
  .afb-entrega-ico { width: 38px; height: 38px; margin-bottom: 10px; }
}

/* ---- Guarda: la barra social fija del pie (40 px, borde derecho)
   no debe montarse sobre el contenido en pantallas de ancho medio.
   Debajo de 561 px esa barra no se muestra, por eso el rango. ---- */
@media (min-width: 561px) and (max-width: 1340px) {
  .afb-scope .afb-wrap { padding-right: 46px; }
}

/* ---- 390 px: aire suficiente para los botones y el resumen ---- */
@media (max-width: 420px) {
  .afb-prices { grid-template-columns: 1fr; }
  .afb-price { padding: 16px 16px 14px; }
  .afb-price-go { padding: 12px 10px; font-size: .88rem; }
  .afb-cot-cta { width: 100%; }
  .afb-cards-cta .afb-btn { width: 100%; justify-content: center; }
  .afb-bigformat .afb-btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------
   CORRECCIÓN DE SALTO AL PASAR EL MOUSE
   main.css aplica `a:hover { border-style:none; text-decoration:underline }`
   a TODOS los enlaces del sitio. Como los botones y las miniaturas de
   esta página son <a> con borde, al pasar el mouse perdían el borde,
   encogían 4 px (2 px arriba + 2 px abajo) y empujaban hacia arriba la
   sección siguiente. Aquí se les devuelve el borde en :hover y :focus.
   ------------------------------------------------------------- */
.afb-scope a.afb-btn:hover,
.afb-scope a.afb-btn:focus,
.afb-scope a.afb-btn:active,
.afb-scope a.afb-b2c-item:hover,
.afb-scope a.afb-b2c-item:focus,
.afb-scope a.afb-trab-item:hover,
.afb-scope a.afb-trab-item:focus {
  border-style: solid;
  text-decoration: none;
}

/* -------------------------------------------------------------
   SIN DESPLAZAMIENTO AL PASAR EL MOUSE
   Los botones y tarjetas ya no se "levantan": el hover se indica
   solo con color, borde y sombra. Nada cambia de posición ni de
   tamaño, así que ningún bloque de la página se mueve.
   ------------------------------------------------------------- */
.afb-scope .afb-btn:hover,
.afb-scope .afb-card:hover,
.afb-scope .afb-price:hover,
.afb-scope .afb-mat:hover,
.afb-scope .afb-price[data-afb-cot]:hover {
  transform: none;
}
.afb-scope .afb-card:hover .afb-card-img img { transform: none; }

/* Con el "levantar" desactivado, se refuerza la señal de hover */
.afb-scope .afb-card:hover,
.afb-scope .afb-mat:hover { box-shadow: var(--afb-shadow-hv); border-color: #bcc4ae; }
.afb-scope .afb-price:hover { box-shadow: var(--afb-shadow); }

/* =============================================================
   BARRA INFERIOR FIJA  ·  2026-09-19
   Reemplaza al botón flotante de WhatsApp en esta página.
   El flotante abría WhatsApp sin ningún dato del pedido; la barra
   muestra la cotización en curso y la envía al pulsar.
   ============================================================= */

/* El botón flotante global no se usa aquí (este CSS solo carga en
   /impresion-color/afiches/, así que no afecta al resto del sitio) */
.btn-whatsapp { display: none !important; }

.afb-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9995;
  background: #fff;
  border-top: 1px solid #dcdfd4;
  box-shadow: 0 -4px 18px rgba(0,0,0,.10);
  transform: translateY(105%);
  transition: transform .28s var(--afb-ease);
  font-family: var(--afb-font);
}
.afb-bar.is-on { transform: none; }

.afb-bar-in {
  max-width: var(--afb-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px 20px;
  padding: 10px 20px;
}
.afb-bar-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.afb-bar-txt b {
  font-size: .98rem; font-weight: 800; line-height: 1.2;
  color: var(--afb-black); text-align: left;
}
.afb-bar-txt span {
  font-size: .85rem; font-weight: 500; line-height: 1.3;
  color: var(--afb-muted); text-align: left;
}
.afb-bar-txt span b { font-size: inherit; font-weight: 800; color: var(--afb-black); }
.afb-bar-igv { margin-left: 6px; font-style: normal; font-weight: 500; opacity: .75; }

.afb-bar-link {
  flex: 0 0 auto;
  font-size: .88rem; font-weight: 700; white-space: nowrap;
  color: var(--afb-black) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
.afb-bar-link:hover { color: #2f7a00 !important; }

.afb-bar-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0;
  font-family: var(--afb-font); font-size: 1rem; font-weight: 800; line-height: 1;
  padding: 13px 26px;
  border: 2px solid var(--afb-wa);
  border-radius: 50px;
  background: var(--afb-wa);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.afb-bar-btn:hover { background: var(--afb-wa-dk); border-color: var(--afb-wa-dk); }
.afb-bar-btn:focus-visible { outline: 3px solid var(--afb-black); outline-offset: 2px; }

/* Espacio al pie para que la barra no tape el final de la página */
body { padding-bottom: 78px; }

@media (max-width: 900px) {
  .afb-bar-link { display: none; }
}
@media (max-width: 720px) {
  .afb-bar-in { padding: 9px 14px; gap: 10px; }
  .afb-bar-igv { display: none; }
  .afb-bar-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .afb-bar-txt b { font-size: .9rem; }
  .afb-bar-txt span { font-size: .78rem; }
  .afb-bar-btn { padding: 11px 18px; font-size: .9rem; gap: 7px; }
  body { padding-bottom: 68px; }
}
@media (max-width: 400px) {
  .afb-bar-btn { padding: 11px 15px; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .afb-bar { transition: none !important; }
}