/* ============================================================
   pacocaetanoHoreca — pacocaetanoHoreca.css: capa de diseño
   (referencia Apple, docs/DESIGN.md; la misma familia que QRonline).
   Se carga DESPUÉS de tienda.css y solo re-mapea tokens y
   componentes. Nada del HTML cambia y las fotos siguen 1:1:
   aquí no se toca ninguna proporción.
   Carácter: galería de producto. Lienzos que alternan blanco,
   pergamino y carbón; barra global negra de 44 px; un solo azul
   de acción; SF Pro con tracking negativo; peso 600 como máximo;
   sin sombras en el chrome; cápsulas y píldoras.
   ============================================================ */
:root {
  --a-azul: #0071e3;
  --a-azul-pulsado: #0066cc;
  --a-azul-sobre-oscuro: #2997ff;
  --a-tinta: #1d1d1f;
  --a-tinta-80: #333333;
  --a-tinta-48: #7a7a7a;
  --a-lienzo: #ffffff;
  --a-pergamino: #f5f5f7;
  --a-perla: #fafafc;
  --a-hairline: #e0e0e0;
  --a-hairline-fuerte: #d2d2d7;
  --a-divisor: #f0f0f0;
  --a-tile: #272729;
  --a-tile-2: #2a2a2c;
  --a-nav: #000000;
  --a-sobre-oscuro: #ffffff;
  --a-sobre-oscuro-suave: #cccccc;

  /* Re-mapeo de los tokens que ya usa tienda.css */
  --fondo: var(--a-lienzo);
  --surface: var(--a-lienzo);
  --surface-2: var(--a-pergamino);
  --tinta: var(--a-tinta);
  --tinta-2: var(--a-tinta-80);
  --tinta-3: var(--a-tinta-48);
  --borde: var(--a-hairline);
  --borde-2: var(--a-hairline-fuerte);
  --acento: var(--a-azul);
  --acento-t: #ffffff;
  --ok: #1f7a37;
  --sombra-1: none;
  --sombra-2: 0 24px 60px -20px rgba(0,0,0,.35);
  --radio: 18px;
  --radio-s: 11px;
  --nav-h: 44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --a-azul: #2997ff;
    --a-azul-pulsado: #0071e3;
    --a-tinta: #f5f5f7;
    --a-tinta-80: #d2d2d7;
    --a-tinta-48: #86868b;
    --a-lienzo: #000000;
    --a-pergamino: #1c1c1e;
    --a-perla: #161617;
    --a-hairline: rgba(255,255,255,.12);
    --a-hairline-fuerte: rgba(255,255,255,.2);
    --a-divisor: rgba(255,255,255,.08);
    --ok: #5ec97a;
    --sombra-2: 0 24px 60px -20px rgba(0,0,0,.8);
  }
}

/* ---------- Base y tipografía: SF Pro, 17/1.47, tracking negativo ---------- */
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; }
h1, h2, h3, h4 { font-weight: 600; }
.lead, .listado__intro, .hero__p, .pbloque__p, .ficha__corto, .acordeon__cuerpo, .cuenta__p, .okpag__pasos { text-wrap: pretty; }
.hero__h1, .pbloque__h, .listado__h1, .ficha__h1, .pag__h1, .vacio h1, .bloque__h { text-wrap: balance; }

/* ---------- Barra global: negra, 44px, logo en blanco ---------- */
.nav { background: var(--a-nav); color: var(--a-sobre-oscuro); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav .marca__img:not(.marca__img--emp) { filter: brightness(0) invert(1); }
.marca__img { height: 16px; }
/* Paso 124: el logotipo del distribuidor (modo catálogo) no es el wordmark de 16 px: más alto, que se lea en la barra.
   900×160 a 30 px de alto ≈ 170 px de ancho. */
.nav .marca__img--emp { height: 30px; max-width: 240px; }
/* 026: sin logo de color, el pie claro pinta el blanco en negro; en tema oscuro, tal cual. */
.marca__img--tinta { filter: brightness(0); }
@media (prefers-color-scheme: dark) { .marca__img--tinta { filter: none; } }
.nav .marca__txt { color: var(--a-sobre-oscuro); font-weight: 600; }
.nav .icobtn { color: rgba(255,255,255,.85); width: 36px; height: 36px; }
.nav .icobtn .ico { height: 18px; }
.nav .icobtn__n { background: var(--a-lienzo); color: var(--a-nav); }
.nav .nav__cuenta { height: 36px; }
.nav .nav__cuenta.is-on { background: rgba(255,255,255,.14); }
.nav .nav__cuenta-n { font-size: 12px; letter-spacing: -0.12px; }
.nav :focus-visible, .nav .buscar__in:focus-visible { outline-color: var(--a-sobre-oscuro); }
.buscar__in { background: rgba(255,255,255,.14); color: var(--a-sobre-oscuro); height: 32px; font-size: 14px; letter-spacing: -0.224px; }
.buscar__in::placeholder { color: rgba(255,255,255,.6); }
@media (hover: hover) and (pointer: fine) { .nav .icobtn:hover { background: rgba(255,255,255,.12); color: #fff; } }
@media (max-width: 900px) { :root { --nav-h: 48px; } .marca__img { height: 15px; } .nav .marca__img--emp { height: 26px; max-width: 170px; } .buscar.is-open { background: var(--a-nav); } }

/* ---------- Botones: píldora azul, 17/400 ---------- */
.btn { font-size: 17px; font-weight: 400; letter-spacing: -0.374px; padding: 11px 22px; border-color: var(--a-hairline); background: var(--a-lienzo); color: var(--a-azul); }
.btn--primario { background: var(--a-azul); color: #fff; border-color: transparent; }
.btn--s { font-size: 14px; letter-spacing: -0.224px; padding: 8px 15px; }
.compra__add { font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--a-perla); }
  .btn--primario:hover { background: var(--a-azul-pulsado); }
}
.cartfab { box-shadow: none; }
.cartfab__n { font-weight: 600; border-color: var(--a-lienzo); }
.cartpanel { box-shadow: none; border-left: 1px solid var(--a-hairline); }
.chip { background: var(--a-perla); border-color: var(--a-hairline); font-size: 14px; letter-spacing: -0.224px; font-weight: 400; }

/* ---------- Portada: lienzo blanco, titular 56/1.07/-0.28, cápsula perla ---------- */
.hero { padding: 80px 0; }
.hero:not(.hero--img) { background: var(--a-lienzo); color: var(--a-tinta); }
.hero:not(.hero--img) .hero__p { color: var(--a-tinta-80); }
.hero__in { gap: 17px; max-width: 760px; }
.hero__h1 { font-size: clamp(40px, 5.4vw, 56px); line-height: 1.07; letter-spacing: -0.28px; font-weight: 600; max-width: 18ch; }
.hero__p { font-size: clamp(19px, 2vw, 28px); line-height: 1.14; letter-spacing: 0.196px; max-width: 40ch; }
.hero__tag {
  background: var(--a-perla); color: var(--a-tinta-80); border: 1px solid var(--a-hairline);
  font-size: 14px; font-weight: 400; letter-spacing: -0.224px; border-radius: 11px; padding: 8px 14px; margin-bottom: 8px;
}
.hero--img .hero__tag { background: rgba(255,255,255,.92); color: #1d1d1f; border-color: transparent; }
.hero__btn { margin-top: 15px; font-size: 18px; letter-spacing: 0; padding: 14px 28px; }
.hero--img .btn--primario { background: var(--a-azul); }
.aviso-franja { background: var(--a-pergamino); color: var(--a-tinta-80); font-size: 14px; letter-spacing: -0.224px; font-weight: 400; }
.aviso-franja a { color: var(--a-azul); }
@media (max-width: 900px) { .hero { padding: 48px 0 40px; } }

/* Bloques: display-lg 40/1.1, entradilla tagline 21/1.19 */
.pbloque { padding-top: 80px; }
.pbloque__h { font-size: clamp(32px, 3.6vw, 40px); font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.pbloque__p { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; color: var(--a-tinta-80); max-width: 44ch; }
.pbloque__mas { color: var(--a-azul); font-size: 17px; letter-spacing: -0.374px; font-weight: 400; }
.pbloque__mas .ico { height: 11px; }
/* Familias: baldosas de pergamino, sin borde, sin sombra, sin elevación */
.fam { background: var(--a-pergamino); border: 0; border-radius: 18px; padding: 24px; transition: none; }
.fam b { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; }
.fam span { font-size: 14px; letter-spacing: -0.224px; line-height: 1.43; color: var(--a-tinta-80); }
.fam__ico { color: var(--a-azul); top: 28px; right: 22px; }
@media (hover: hover) and (pointer: fine) { .fam:hover { transform: none; box-shadow: none; } .fam:hover b { color: var(--a-azul); } }
/* Confianza: el tile carbón de la portada */
.confianza--portada {
  --tinta: var(--a-sobre-oscuro); --tinta-2: var(--a-sobre-oscuro-suave);
  background: var(--a-tile); color: var(--a-sobre-oscuro); border: 0; border-radius: 18px;
  padding: 26px 28px; gap: 24px;   /* Paco, 13/09: «era más estrecho de altura»: menos relleno y letra de 15 */
}
.confianza--portada li { font-size: 15px; letter-spacing: -0.24px; line-height: 1.4; color: var(--a-sobre-oscuro-suave); gap: 12px; }
.confianza--portada li b { color: var(--a-sobre-oscuro); }
.confianza--portada .ico { color: var(--a-azul-sobre-oscuro); height: 20px; margin-top: 1px; }
/* Paso 108: «Franja destacada» (Sin gastos ocultos): clara, centrada, pegada encima del tile de «Por qué nosotros» */
.franja-dest { background: var(--a-pergamino); border-radius: 18px; padding: clamp(26px, 4vw, 40px) 24px; text-align: center; }
.franja-dest__h { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -0.3px; font-weight: 600; color: var(--a-tinta); text-wrap: balance; }
.franja-dest__p { max-width: 52ch; margin: 10px auto 0; font-size: 17px; line-height: 1.45; letter-spacing: -0.2px; color: var(--a-tinta-80, var(--a-tinta-48)); text-wrap: balance; }
.pbloque:has(.franja-dest) + .pbloque:has(.confianza--portada) { padding-top: 12px; }   /* la franja y el tile se leen como una pieza */
.consulta { background: var(--a-pergamino); border: 0; border-radius: 18px; padding: 24px; }
.consulta p { font-size: 14px; letter-spacing: -0.224px; }
.campana__hasta { font-size: 14px; letter-spacing: -0.224px; }

/* ---------- Tienda ---------- */
.arbol__h, .hoja__h, .pie__h { font-size: 21px; letter-spacing: 0.231px; font-weight: 600; }
.arbol__fam-a { font-size: 15px; letter-spacing: -0.224px; font-weight: 600; color: var(--a-tinta-80); }
.arbol__fam-a.is-act { color: var(--a-tinta); }
.arbol__fam-a.is-act::after { background: var(--a-azul); }
.arbol__sub-a { font-size: 15px; letter-spacing: -0.224px; }
.arbol__sub-a::before { background: var(--a-azul); }
.listado__h1 { font-size: clamp(32px, 3.6vw, 40px); font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.listado__intro { font-size: 21px; line-height: 1.3; letter-spacing: 0.231px; color: var(--a-tinta-80); max-width: 62ch; }
.listado__meta, .migas, .listado__n { font-size: 12px; letter-spacing: -0.12px; }
.vista { background: var(--a-pergamino); }
.vista__b.is-on { box-shadow: inset 0 0 0 1px var(--a-hairline); }

/* Tarjetas: pergamino sobre blanco, radio 18, planas */
.tarj__media { background: var(--a-pergamino); border-radius: 18px; }
.tarj__tag {
  background: var(--a-perla); color: var(--a-tinta-80); border: 1px solid var(--a-hairline);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font-size: 12px; font-weight: 400; letter-spacing: -0.12px; border-radius: 11px; padding: 5px 10px;
}
.tarj__txt { padding: 4px 6px 0; }
.tarj__t { font-size: 17px; letter-spacing: -0.374px; font-weight: 600; }
.tarj__num { font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.tarj__desde, .tarj__min { font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-80); }
.tarj__iva { font-size: 12px; letter-spacing: -0.12px; }
.rejilla { gap: 32px 24px; }
.rejilla.is-lista .tarj { border-color: var(--a-hairline); }
@media (max-width: 900px) { .tarj__media { border-radius: 14px; } }

/* ---------- Ficha ---------- */
.ficha__h1 { font-size: clamp(28px, 3vw, 34px); line-height: 1.2; letter-spacing: -0.374px; font-weight: 600; }
.ficha__ref { font-size: 12px; letter-spacing: -0.12px; }
.ficha__precio .tarj__num { font-size: 34px; line-height: 1.2; letter-spacing: -0.374px; }
.ficha__corto { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; max-width: 62ch; }
.galeria__main { background: var(--a-pergamino); border-radius: 18px; }
.galeria__thumb { border-radius: 8px; background: var(--a-pergamino); }
.galeria__thumb.is-on { outline-color: var(--a-azul); }
/* Paso 116: aviso de que el tono de las muestras depende de la pantalla, bajo los acabados. Discreto: es una nota. */
.acab__tonos { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; line-height: 1.4; letter-spacing: -0.12px; color: var(--a-tinta-48, var(--tinta-3)); }
.acab__tonos .ico { height: 13px; flex: none; margin-top: 1px; }

/* Paso 110 (022): cinta en la esquina de la foto grande («Fabricación especial»…), para los colores que no son de
   serie. Banda a 45° que la foto recorta (overflow del marco); caben 24 caracteres. Se enciende con su foto.
   Paso 111 (Paco, 27/09): más gruesa y en dos renglones con jerarquía, la primera palabra pequeña en versalitas
   («FABRICACIÓN») y el resto grande («Especial»). */
.galeria__cinta {
  position: absolute; top: 46px; right: -62px; z-index: 2; width: 270px; padding: 9px 0 10px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transform: rotate(45deg); text-align: center; pointer-events: none;
  background: var(--a-azul); color: #fff; line-height: 1.15;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.3);
  opacity: 0; transition: opacity 260ms ease;
}
.galeria__cinta small { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.galeria__cinta b { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.galeria__cinta.is-on { opacity: 1; }
@media (max-width: 520px) {
  .galeria__cinta { top: 36px; right: -70px; width: 250px; padding: 7px 0 8px; }
  .galeria__cinta small { font-size: 9px; }
  .galeria__cinta b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .galeria__cinta { transition: none; } }
.galeria__nota { box-shadow: none; border: 1px solid var(--a-hairline); font-size: 12px; letter-spacing: -0.12px; }
.confianza .ico { color: var(--a-azul); }
.confianza li { font-size: 14px; letter-spacing: -0.224px; }
.bloque__h { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; }
.bloque__sub { font-size: 12px; letter-spacing: .04em; }
.acordeon__sum { font-size: 17px; letter-spacing: -0.374px; font-weight: 600; }
.acordeon__cuerpo { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; max-width: 62ch; }
.acab__h, .tarifa__h, .consulta__h { font-size: 17px; letter-spacing: -0.374px; font-weight: 600; }
.muestra.is-on .muestra__b { outline-color: var(--a-azul); }
.muestra__lupa { box-shadow: inset 0 0 0 1px var(--a-hairline); }
.seg { background: var(--a-pergamino); }
.seg ~ .acab__grupo { margin-top: 10px; }   /* paso 101: aire entre el segmentado y las muestras (la lupa de la textura sobresale hacia arriba) */
.seg__ind, .seg__r:has(input:checked) { box-shadow: inset 0 0 0 1px var(--a-hairline); }
.tarifa__t { border-color: var(--a-hairline); border-radius: 11px; }
.tarifa__fila th, .tarifa__fila td { font-size: 14px; letter-spacing: -0.224px; }
.tarifa__fila.is-on th, .tarifa__fila.is-on td { background: var(--a-pergamino); color: var(--a-tinta); }
.cant { border-color: var(--a-hairline); }
.sel__it { border-color: var(--a-hairline); }
.compra__nota, .tarifa__nota { font-size: 12px; letter-spacing: -0.12px; }

/* ---------- Campos y selección: radio 11, hairline, sin halo, azul ---------- */
.campo__in { border-radius: 11px; border-color: var(--a-hairline); font-size: 17px; letter-spacing: -0.374px; }
.campo__in:focus { border-color: var(--a-azul); box-shadow: none; }
.campo__lbl { font-size: 14px; letter-spacing: -0.224px; }
.select { color-scheme: inherit; }
.pago { border-color: var(--a-hairline); border-radius: 11px; }
.pago:has(input:checked) { border-color: var(--a-azul); box-shadow: inset 0 0 0 1px var(--a-azul); }
.pago--btn:hover:not(:disabled) { border-color: var(--a-tinta-48); }
.pago__ico { background: var(--a-pergamino); }
.vista-precio, .vista__op { border-radius: 11px; }
.vista__op:has(input:checked) { border-color: var(--a-azul); box-shadow: 0 0 0 1px var(--a-azul); }
.vista__op input[type="radio"] { accent-color: var(--a-azul); }
.fs__n { background: var(--a-azul); color: #fff; }
.fs__h { font-size: 21px; letter-spacing: 0.231px; font-weight: 600; }
.clin__tarifa { color: var(--a-azul); }
.clin__tarifa-box span.is-on { box-shadow: inset 0 0 0 1px var(--a-azul); }
.carrito__res, .checkout__res, .logos, .cuenta__datos, .vista-precio { border: 0; border-radius: 18px; background: var(--a-pergamino); }
.vista__op, .pago { background: var(--a-lienzo); }
.pag__h1 { font-size: clamp(32px, 3.6vw, 40px); font-weight: 600; letter-spacing: 0; }
.res__h, .logos__h { font-size: 21px; letter-spacing: 0.231px; font-weight: 600; }
.tot__total b { font-weight: 600; }
.flash { border-radius: 11px; }
.cuenta__dto { border-radius: 18px; }
.cuenta__dto > b { font-size: 40px; line-height: 1.1; letter-spacing: 0; font-weight: 600; }
.eyebrow { color: var(--a-tinta-80); font-weight: 400; font-size: 14px; letter-spacing: -0.224px; text-transform: none; }

/* ---------- Pie: pergamino, 64px, 12px ---------- */
.pie:not(:has(.pie__emp)) { background: var(--a-pergamino); border-top: 0; color: var(--a-tinta-80); padding: 64px 0 32px; margin-top: 64px; }
.pie__h { font-size: 12px; letter-spacing: -0.12px; font-weight: 600; }
.pie__txt { font-size: 12px; letter-spacing: -0.12px; line-height: 1.5; color: var(--a-tinta-80); }
.pie__ul a { font-size: 12px; letter-spacing: -0.12px; color: var(--a-tinta-80); padding: 4px 0; }
.pie__fin { font-size: 12px; letter-spacing: -0.12px; color: var(--a-tinta-48); border-top: 1px solid var(--a-hairline); padding-top: 20px; }
@media (hover: hover) and (pointer: fine) { .pie__ul a:hover { color: var(--a-tinta); } }

/* ---------- Flotantes ---------- */
.catbar { box-shadow: none; }
.toast { box-shadow: var(--sombra-2); font-size: 14px; letter-spacing: -0.224px; }
.cta-m { border-top-color: var(--a-hairline); }
.subnav { border-bottom-color: var(--a-hairline); }

/* ---------- Atajos del panel sobre el carrito (paso 42, solo logueado) ----------
   Dos botones grises apilados encima del carrito, a su misma distancia del borde.
   Van a la altura del carrito + 68 px aunque el carrito esté escondido. */
.adminfab {
  position: fixed; right: 30px; bottom: calc(24px + 56px + 12px); z-index: 400;
  display: flex; flex-direction: column; gap: 10px;
}
.adminfab__b {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0; font: inherit;
  background: color-mix(in srgb, var(--tinta) 58%, var(--fondo)); color: var(--fondo);
  transition: transform .18s var(--eo), background-color .2s;
}
.adminfab__b .ico { height: 18px; }
.adminfab__b:hover { transform: scale(1.06); background: color-mix(in srgb, var(--tinta) 75%, var(--fondo)); }
.adminfab__b:active { transform: scale(.94); }
.adminfab__b.is-done { background: var(--ok); }
@media (max-width: 900px) {
  .adminfab { right: 22px; bottom: calc(16px + 56px + 12px); }
  body:has(.cta-m) .adminfab { bottom: calc(16px + 64px + 56px + 12px + env(safe-area-inset-bottom)); }
}

/* ---------- Tooltips propios (data-tip) en la tienda: los pinta tienda.js ----------
   Encima de todo, también del panel del carrito (600) y de la lupa (700). */
.tip {
  position: fixed; z-index: 800; padding: 6px 10px; border-radius: 8px;
  background: var(--tinta); color: var(--fondo); font-size: 12px; letter-spacing: -0.12px;
  pointer-events: none; white-space: nowrap; opacity: 0; transform: translateY(4px);
  transition: opacity 125ms ease, transform 125ms var(--eo);
}
.tip.is-on { opacity: 1; transform: none; }

/* ---------- Color de realce por campaña (paso 45, como QRonline 177) ----------
   portada.php pone `--acento` y `--acento-t` en <main class="portada--campana">
   cuando la campaña activa tiene color. Dentro, el azul de la capa pasa a ser ese
   color y todo lo que ya lo usaba (botón, píldora, enlaces «Todo el catálogo»,
   chevrones de las familias, foco) se tiñe solo. Sin color, manda el azul. Los
   iconos del tile carbón (confianza) se quedan en azul claro: un color oscuro de
   campaña no se vería sobre carbón. El selector con `[style*=]` evita el ciclo
   `--acento` ⇄ `--a-azul` cuando NO hay color inline. */
.portada--campana[style*="--acento"] {
  --a-azul: var(--acento);
  --a-azul-pulsado: color-mix(in srgb, var(--acento) 85%, #000);
}
.portada--campana[style*="--acento"] .hero__tag { background: var(--acento); color: var(--acento-t, #fff); border-color: transparent; }
.portada--campana[style*="--acento"] .btn--primario { background: var(--acento); color: var(--acento-t, #fff); }

/* ---------- Tienda: cuatro columnas en pantalla grande, NUNCA cinco (paso 46, como QRonline 184) ----------
   La tienda (lateral + rejilla) usa un contenedor más ancho que el resto
   (clamp 1240–1700): con `--maxw` a 1240, en un monitor de 1920 salían tres
   tarjetas de 293 px con márgenes enormes. Medido: 1280 → 3 × 293; 1440 →
   3 × 312; 1600 → 3 × ~360; 1700 → 4 × ~286; 1920 → 4 × 329. El salto a
   cuatro va en 1700 y no en 1600 porque a 1600 cuatro columnas salían de
   264 px, más estrechas que las tres de 1440. La rejilla es fija (3 ó 4), así
   que no hay forma de que quepan cinco. La portada (`.rejilla--portada`) y la
   vista lista no cambian. */
main.tienda.wrap { max-width: clamp(1240px, 90vw, 1700px); }
@media (min-width: 1700px) {
  .tienda .rejilla:not(.rejilla--portada):not(.is-lista) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Aviso de vista previa de campaña (?vista=…, paso 48): banda ámbar a todo el ancho ----------
   Antes era un .flash dentro del .wrap (una caja estrecha a la izquierda); Paco
   pidió todo el ancho, centrado y que destaque. Solo la ve quien tiene el enlace. */
.vistaprev { background: #f0b429; color: #1d1d1f; text-align: center; padding: 12px 22px; font-size: 14px; letter-spacing: -0.224px; line-height: 1.43; }
.vistaprev__in { margin: 0; text-wrap: balance; }
.vistaprev b { font-weight: 600; }

/* ---------- Banner de campaña (paso 49): tamaño, alineación, foto, velo, altura, texto, botones y cupón ----------
   Las clases las pone portada_hero_html(); sin campaña el banner es el de siempre. */
.hero { position: relative; }
.hero__in { position: relative; z-index: 2; }
/* Todo el banner clicable: el enlace va debajo del contenido y el contenido deja pasar el clic salvo en sus botones. */
.hero__link { position: absolute; inset: 0; z-index: 1; }
.hero:has(.hero__link) .hero__in { pointer-events: none; }
.hero:has(.hero__link) .hero__in :is(a, button) { pointer-events: auto; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero__btn { margin-top: 0; }
.hero__btns:not(:empty) { margin-top: 15px; }
.hero--tam-s .hero__h1 { font-size: clamp(30px, 4vw, 44px); }
.hero--tam-l .hero__h1 { font-size: clamp(44px, 6.6vw, 76px); letter-spacing: -0.6px; line-height: 1.04; max-width: 20ch; }
.hero--tam-xl .hero__h1 { font-size: clamp(52px, 8.5vw, 104px); letter-spacing: -1.2px; line-height: 1; max-width: 18ch; }
.hero--centro .hero__in { text-align: center; justify-items: center; max-width: 960px; margin-inline: auto; }
.hero--centro .hero__h1 { max-width: none; }
.hero--centro .hero__p { margin-inline: auto; }
.hero--centro .hero__btns, .hero--centro .hero__cupon { justify-content: center; }
.hero--foco-izq { background-position: left center; }
.hero--foco-der { background-position: right center; }
.hero--velo-no.hero--img::before { background: none; }
.hero--velo-fuerte.hero--img::before { background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.45)); }
.hero--centro.hero--velo-suave.hero--img::before { background: rgba(0,0,0,.42); }
.hero--centro.hero--velo-fuerte.hero--img::before { background: rgba(0,0,0,.66); }
.hero--alto-alto { padding: 140px 0 128px; }
.hero--texto-tinta.hero--img { color: #1d1d1f; }
.hero--texto-tinta.hero--img .hero__p { color: rgba(0,0,0,.72); }
.hero--texto-blanco:not(.hero--img) { background: #1d1d1f; color: #fff; }
.hero--texto-blanco:not(.hero--img) .hero__p { color: rgba(255,255,255,.8); }
/* Botón de contorno: blanco translúcido sobre foto o fondo oscuro; el secundario normal sobre claro */
.btn--hero2 { background: transparent; color: inherit; border: 1px solid currentColor; }
.hero--img .btn--hero2, .hero--texto-blanco:not(.hero--img) .btn--hero2 { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
.hero--texto-tinta.hero--img .btn--hero2 { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.3); color: #1d1d1f; }
@media (hover: hover) and (pointer: fine) { .btn--hero2:hover { background: rgba(255,255,255,.28); } }
/* Cupón para copiar */
.hero__cupon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; font-size: 14px; letter-spacing: -0.224px; }
.hero__cupon-lbl { opacity: .75; }
.hero__cupon-cod { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; font-weight: 600; letter-spacing: .06em; padding: 6px 12px; border-radius: 8px; border: 1px dashed currentColor; }
.hero__cupon-btn { font: inherit; font-size: 13px; letter-spacing: -0.12px; padding: 6px 12px; border-radius: 9999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background .16s; }
.hero__cupon-btn:hover { background: rgba(127,127,127,.15); }
.hero__cupon-btn.is-done { background: var(--ok); border-color: transparent; color: #fff; }
.hero__cupon-txt { flex-basis: 100%; font-size: 13px; letter-spacing: -0.12px; opacity: .8; }
@media (max-width: 900px) {
  .hero--alto-alto { padding: 80px 0 64px; }
  .hero--tam-l .hero__h1 { font-size: clamp(36px, 8vw, 52px); }
  .hero--tam-xl .hero__h1 { font-size: clamp(40px, 9.5vw, 60px); }
}

/* ═══════════════ Portada nueva (paso 53): lienzos que alternan blanco / pergamino / carbón ═══════════════ */
.lienzo { padding: 80px 0; }
.lienzo--pergamino { background: var(--a-pergamino); }
.lienzo--carbon { background: var(--a-tile); color: var(--a-sobre-oscuro); --tinta: var(--a-sobre-oscuro); --tinta-2: var(--a-sobre-oscuro-suave); }
.pbloque + .lienzo, .hero + .lienzo { margin-top: 80px; }
.lienzo + .pbloque { padding-top: 80px; }
.lienzo + .lienzo { margin-top: 0; }
.eyebrow--claro { color: var(--a-azul-sobre-oscuro); }
/* Hueco de foto: pergamino con borde discontinuo y el texto de qué foto va */
.pfoto { display: block; width: 100%; border-radius: 18px; object-fit: cover; background: var(--a-pergamino); }
.pfoto--hueco { display: grid; place-items: center; border: 1px dashed var(--a-hairline-fuerte); color: var(--a-tinta-48); font-size: 12px; letter-spacing: -0.12px; text-align: center; padding: 12px; }
.lienzo--pergamino .pfoto { background: var(--a-lienzo); }

/* La diferencia */
.historia__in { display: grid; gap: 40px; align-items: center; }
.historia__in--foto { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.historia__h { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; letter-spacing: 0; font-weight: 600; margin: 8px 0 20px; text-wrap: balance; max-width: 22ch; }
.historia__p p { font-size: 19px; line-height: 1.42; letter-spacing: 0; color: var(--a-tinta-80); max-width: 58ch; margin: 0 0 14px; text-wrap: pretty; }
.historia__p p:last-child { margin: 0; }
.historia__foto { aspect-ratio: 4 / 3; }

/* Diseñamos · Fabricamos · Personalizamos */
.tres__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.tres__foto { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.tres__k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--a-azul); margin-bottom: 8px; }
.tres__c { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; margin-bottom: 10px; text-wrap: balance; }
.tres__x { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--a-tinta-80); text-wrap: pretty; }

/* Familias con foto */
.familias__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.familia { display: block; }
.familia__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--a-pergamino); }
.familia__n { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 17px; letter-spacing: -0.374px; font-weight: 600; }
.familia__n .ico { height: 11px; color: var(--a-azul); transition: transform .18s var(--eo); }
@media (hover: hover) and (pointer: fine) { .familia:hover .familia__n { color: var(--a-azul); } .familia:hover .familia__n .ico { transform: translateX(3px); } }

/* A medida */
.amedida__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.amedida__foto { aspect-ratio: 1; }
.amedida__frase { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; color: var(--a-azul); margin: 12px 0 16px; }
.amedida__p p { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--a-tinta-80); margin: 0 0 12px; max-width: 56ch; text-wrap: pretty; }
.amedida .hero__btns { margin-top: 24px; }

/* Pequeñas cantidades: tile carbón */
.cantidades__in { max-width: 860px; text-align: center; margin-inline: auto; }
.cantidades__frase { font-size: clamp(36px, 5vw, 56px); line-height: 1.07; letter-spacing: -0.28px; font-weight: 600; margin: 12px 0 20px; text-wrap: balance; }
.cantidades__p p { font-size: 21px; line-height: 1.3; letter-spacing: 0.231px; color: var(--a-sobre-oscuro-suave); text-wrap: pretty; margin: 0 auto; max-width: 60ch; }

/* Así trabajamos: cinco pasos */
.proceso__pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: paso; }
.paso__n { display: block; font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--a-azul); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.paso__t { font-size: 17px; line-height: 1.24; letter-spacing: -0.374px; font-weight: 600; margin-bottom: 6px; text-wrap: balance; }
.paso__x { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--a-tinta-80); text-wrap: pretty; }

/* El taller */
.taller__cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: end; margin-bottom: 32px; }
.taller__p p { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--a-tinta-80); margin: 0 0 12px; text-wrap: pretty; }
.taller__p p:last-child { margin: 0; }
.taller__fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.taller__foto { aspect-ratio: 4 / 5; }

/* Proyectos reales */
.proyectos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.proyecto__foto { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.proyectos--vertical .proyecto__foto { aspect-ratio: 4 / 5; }   /* el formato se elige en el bloque (paso 85) */
.proyectos--cuadrado .proyecto__foto { aspect-ratio: 1 / 1; }
.proyecto__n { font-size: 17px; letter-spacing: -0.374px; font-weight: 600; margin-bottom: 4px; }
.proyecto__x { font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-80); }

/* Reseñas */
.resenas__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.resena { margin: 0; padding: 24px; border-radius: 18px; background: var(--a-pergamino); }
.resena__x { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; margin-bottom: 14px; text-wrap: pretty; }
.resena__n { font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-48); }

/* Cierre */
.cierre__in { text-align: center; max-width: 720px; margin-inline: auto; }
.cierre__h { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; letter-spacing: 0; font-weight: 600; text-wrap: balance; }
.cierre__p { font-size: 21px; line-height: 1.3; letter-spacing: 0.231px; color: var(--a-tinta-80); margin: 14px 0 0; text-wrap: pretty; }
.cierre .hero__btns { justify-content: center; margin-top: 28px; }

@media (max-width: 1024px) {
  .proceso__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .familias__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lienzo { padding: 56px 0; }
  .pbloque + .lienzo, .hero + .lienzo { margin-top: 56px; }
  .lienzo + .pbloque { padding-top: 56px; }
  .historia__in--foto, .amedida__in, .taller__cab { grid-template-columns: 1fr; gap: 24px; }
  .tres__grid, .proyectos__grid, .resenas__grid { grid-template-columns: 1fr; gap: 28px; }
  .familias__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .taller__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proceso__pasos { grid-template-columns: 1fr; gap: 18px; }
  .paso { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; }
  .paso__n { grid-row: 1 / 3; font-size: 34px; }
  .historia__p p, .amedida__p p { font-size: 17px; }
}
video.pfoto { object-fit: cover; }

/* Menú móvil (paso 55): Nosotros y la cuenta, separados del árbol de familias */
.hoja__mas { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--a-hairline); }
.hoja__mas .arbol__todo { padding: 11px 0; font-size: 17px; letter-spacing: -0.374px; }

/* ---------- Novedades como fila deslizable (paso 56, «Explore the lineup») ----------
   Piezas de ~300 px que se desplazan en horizontal con scroll-snap; la fila
   sangra hasta el borde de la ventana (márgenes negativos del .wrap) y las
   flechas redondas de pergamino van abajo a la derecha, solo si hay más de
   lo que cabe. Cada pieza: foto 1:1 sobre pergamino, nombre, dos líneas de
   descripción, precio y «Ver ficha ›». */
.lineup { position: relative; margin: 0 -22px; }
.lineup__pista {
  display: flex; gap: 20px; padding: 4px 22px 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lineup__pista::-webkit-scrollbar { display: none; }
.lineup__it { flex: 0 0 clamp(240px, 26vw, 300px); scroll-snap-align: start; display: grid; gap: 8px; justify-items: center; text-align: center; padding-bottom: 8px; }
.lineup__media { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--a-pergamino); margin-bottom: 8px; }
.lineup__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--eo); }
@media (hover: hover) and (pointer: fine) { .lineup__media:hover img { transform: scale(1.03); } }
.lineup__media .tarj__tag { position: absolute; top: 12px; left: 12px; }
/* Título y texto con altura FIJA de dos líneas (Paco, 13/09: «los textos se cortan»): el clamp solo dejaba
   asomar media tercera línea, y un título de una línea desplazaba precio y «Ver ficha» respecto al vecino. */
.lineup__t { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; text-wrap: balance; min-height: 2.38em; display: flex; align-items: flex-end; justify-content: center; }
.lineup__p { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--a-tinta-80); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.86em; max-width: 30ch; margin: 0; }
.lineup__precio { font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-80); font-variant-numeric: tabular-nums; }
.lineup__mas a { font-size: 17px; letter-spacing: -0.374px; color: var(--a-azul); display: inline-flex; align-items: center; gap: 4px; }
.lineup__mas .ico { height: 11px; }
@media (hover: hover) and (pointer: fine) { .lineup__mas a:hover { text-decoration: underline; } }
.lineup__nav { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 22px 0; }
.lineup__nav[hidden] { display: none; }
.lineup__b { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--a-pergamino); color: var(--a-tinta); display: grid; place-items: center; cursor: pointer; transition: background .16s, opacity .16s; }
.lineup__b .ico { height: 12px; }
.lineup__b[data-lineup-prev] .ico { transform: scaleX(-1); }
.lineup__b:hover { background: var(--a-hairline); }
.lineup__b:disabled { opacity: .35; cursor: default; }
@media (max-width: 900px) { .lineup__it { flex-basis: min(78vw, 300px); } .lineup__t { font-size: 19px; } }

/* ── Páginas legales (paso 61): términos, privacidad, cookies ──
   Prosa a 62 caracteres, titulares 600, tablas con hairline; sin cajas ni sombras. */
.legal { padding: 56px 22px 96px; }
.legal__cab { max-width: 720px; margin-bottom: 40px; }
.legal__cab .lead { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; color: var(--a-tinta-80); margin-top: 12px; }
.legal__cuerpo { --medida: 720px; font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--a-tinta-80); }
.legal__cuerpo > h2, .legal__cuerpo > h3, .legal__cuerpo > p, .legal__cuerpo > ul, .legal__cuerpo > ol { max-width: var(--medida); text-wrap: pretty; }
.legal__cuerpo h2 { font-size: 28px; line-height: 1.14; letter-spacing: 0.196px; font-weight: 600; color: var(--a-tinta); margin: 48px 0 12px; text-wrap: balance; }
.legal__cuerpo h3 { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; color: var(--a-tinta); margin: 28px 0 8px; }
.legal__cuerpo p, .legal__cuerpo ul, .legal__cuerpo ol { margin: 0 0 14px; }
.legal__cuerpo ul, .legal__cuerpo ol { padding-left: 22px; }
.legal__cuerpo li { margin-bottom: 8px; }
.legal__cuerpo strong { color: var(--a-tinta); font-weight: 600; }
.legal__cuerpo a { color: var(--a-azul); text-decoration: underline; text-underline-offset: 2px; }
.legal__cuerpo code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; background: var(--a-pergamino); padding: 1px 6px; border-radius: 6px; color: var(--a-tinta); }
.legal__fecha { font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-48); margin-bottom: 24px; }
.legal__nota { font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-48); }
.legal__pie { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--a-hairline); font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-48); }
.legal__resumen { background: var(--a-pergamino); border-radius: 18px; padding: 24px 28px; max-width: 820px; margin: 0 0 40px; }
.legal__resumen h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: -0.374px; }
.legal__resumen ul { margin: 0; }
.legal__resumen li:last-child { margin-bottom: 0; }
.legal__tabla { overflow-x: auto; margin: 0 0 16px; max-width: min(100%, 980px); }
.legal__tabla:not(:has(thead)) { max-width: min(100%, var(--medida)); }
.legal__tabla table { border-collapse: collapse; width: 100%; font-size: 15px; letter-spacing: -0.24px; line-height: 1.4; }
.legal__tabla th, .legal__tabla td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--a-hairline); }
.legal__tabla thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-tinta-48); font-weight: 600; white-space: nowrap; }
.legal__tabla tbody th { font-weight: 600; color: var(--a-tinta); width: 160px; }
.legal__tabla td { color: var(--a-tinta-80); font-variant-numeric: tabular-nums; }
.legal__tabla small { color: var(--a-tinta-48); }
@media (max-width: 700px) { .legal { padding: 32px 22px 64px; } .legal__cuerpo h2 { font-size: 24px; margin-top: 36px; } .legal__resumen { padding: 20px; } }

/* ── Vista previa dentro del panel (paso 65): la ficha en un iframe, sin chrome ── */
body.vista-panel { padding-top: 0; }
body.vista-panel .nav, body.vista-panel .pie, body.vista-panel .adminfab, body.vista-panel .cartfab, body.vista-panel .cartpanel, body.vista-panel .migas { display: none !important; }
body.vista-panel .ficha { padding-top: 24px; }

/* ── Comprobador de empresas en el carrito (paso 66): solo en las líneas de reseñas ── */
.clin__enlace { margin-top: 10px; display: grid; gap: 6px; }
.clin__enlace-l { font-size: 14px; letter-spacing: -0.224px; font-weight: 600; color: var(--a-tinta); }
.clin__enlace-h { font-weight: 400; color: var(--a-tinta-48); }
.clin__enlace-f { display: flex; gap: 8px; flex-wrap: wrap; }
.clin__enlace-f .campo__in { flex: 1 1 260px; min-width: 0; height: 40px; font-size: 14px; }
.clin__enlace-f .btn { white-space: nowrap; }
.clin__enlace .campo__in.is-ok { border-color: var(--a-ok); box-shadow: inset 0 0 0 1px var(--a-ok); }
.clin__enlace-falta { font-size: 12px; letter-spacing: -0.12px; color: #b3261e; margin: 0; }
.cmodal { border: 0; padding: 0; background: transparent; color: var(--a-tinta); width: min(560px, calc(100% - 32px)); max-height: 88vh; }
.cmodal::backdrop { background: rgba(0, 0, 0, .4); backdrop-filter: saturate(140%) blur(6px); }
.cmodal__box { background: var(--a-lienzo); border-radius: 18px; padding: 28px 28px 22px; position: relative; max-height: 88vh; overflow-y: auto; }
.cmodal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--a-pergamino); color: var(--a-tinta-80); display: grid; place-items: center; border: 0; cursor: pointer; }
.cmodal__close .ico { height: 14px; }
.cmodal__h { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; margin: 0 36px 6px 0; text-wrap: balance; }
.cmodal__p { font-size: 14px; letter-spacing: -0.224px; color: var(--a-tinta-80); margin: 0 0 16px; text-wrap: pretty; }
.checker__form { display: flex; gap: 8px; flex-wrap: wrap; }
.checker__form .campo__in { flex: 1 1 240px; min-width: 0; }
.checker__hint { margin: 10px 0 0; font-size: 12px; letter-spacing: -0.12px; color: var(--a-tinta-48); }
.checker__result { margin-top: 16px; }
.checker__result[hidden] { display: none; }
.cres__msg { margin: 0; text-align: center; color: var(--a-tinta-80); font-size: 14px; line-height: 1.5; }
.cres__link { color: var(--a-azul); }
.cres__title { margin: 0 0 12px; font-size: 17px; letter-spacing: -0.374px; font-weight: 600; }
.cres { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 8px; background: var(--a-pergamino); border-radius: 11px; }
.cres__main { min-width: 0; flex: 1 1 220px; }
.cres__name { font-size: 15px; font-weight: 600; letter-spacing: -0.24px; }
.cres__addr { margin-top: 2px; font-size: 13px; color: var(--a-tinta-80); }
.cres__meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cres__stars { color: #f0b429; letter-spacing: 1px; }
.cres__rating { font-weight: 600; }
.cres__count { color: var(--a-tinta-48); }
.cres__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.cres__ver { font-size: 13px; color: var(--a-tinta-80); white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.cres__aviso { margin: 12px 0 0; padding: 12px 14px; border-radius: 11px; background: color-mix(in srgb, var(--a-azul) 7%, transparent); font-size: 13.5px; line-height: 1.5; color: var(--a-tinta-80); }
.cres__aviso strong { color: var(--a-tinta); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Composiciones del banner de campaña (paso 69) ──
   sangre = la de siempre (foto de fondo + velo). flotante / columnas / tile: la imagen va AL LADO del texto. */
.hero__in--cols { max-width: var(--maxw); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px 56px; }
.hero__in--cols.hero__in--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.hero__txt { display: grid; gap: 17px; max-width: 620px; }
.hero__media { min-width: 0; display: grid; place-items: center; }
.hero__media img { display: block; max-width: 100%; height: auto; }
.hero--comp-flotante { background: var(--a-pergamino); color: var(--a-tinta); }
.hero.hero--comp-flotante .hero__p, .hero.hero--comp-columnas .hero__p { color: var(--a-tinta-80); }
.hero.hero--comp-flotante.hero--texto-blanco .hero__p, .hero.hero--comp-columnas.hero--texto-blanco .hero__p { color: rgba(255,255,255,.8); }
.hero--comp-flotante .hero__media img { max-height: 440px; width: auto; object-fit: contain; }
.hero--sombra-si .hero__media img { filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .16)); }   /* opcional (Paco): con un PNG sin recortar bien, fea */
.hero--comp-columnas { background: var(--a-lienzo); color: var(--a-tinta); }
.hero--comp-columnas .hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--a-pergamino); }
.hero--comp-tile { background: var(--a-lienzo); padding: 40px 0 0; }
.hero--comp-tile .hero__in { background: var(--a-tile); color: var(--a-sobre-oscuro); border-radius: 18px; padding: 56px 48px; }
.hero.hero--comp-tile .hero__p { color: var(--a-sobre-oscuro-suave); }   /* .hero:not(.hero--img) .hero__p pesa más: hay que igualarlo */
.hero--comp-tile .hero__media img { max-height: 380px; width: auto; object-fit: contain; }
.hero--comp-tile .hero__tag { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.hero--comp-tile .btn--hero2 { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
.hero--comp-tile .hero__cupon-btn.is-done, .hero--comp-tile .hero__cupon-cod { color: #fff; }
.hero--comp-tile.hero--alto-alto .hero__in { padding: 88px 64px; }
.hero--comp-flotante.hero--alto-alto, .hero--comp-columnas.hero--alto-alto { padding: 120px 0 108px; }
/* Con el texto blanco pedido en el editor, flotante y columnas pasan a lienzo oscuro (la regla general ya lo hace). */
.hero--comp-flotante.hero--texto-blanco, .hero--comp-columnas.hero--texto-blanco { background: #1d1d1f; }
.hero--centro .hero__in--cols { text-align: left; }
.hero--centro .hero__in--cols:not(.hero__in--media) { text-align: center; justify-items: center; }
.hero--centro .hero__in--cols:not(.hero__in--media) .hero__txt { justify-items: center; max-width: 760px; }
@media (max-width: 800px) {
  .hero__in--cols.hero__in--media { grid-template-columns: 1fr; gap: 28px; }
  .hero--comp-flotante .hero__media img, .hero--comp-tile .hero__media img { max-height: 280px; }
  .hero--comp-tile .hero__in { padding: 36px 24px; }
  .hero--comp-tile { padding-top: 16px; }
}

/* Recargo por acabado (012, paso 73): «+0,40 €» bajo la muestra y el precio por unidad en «Tu selección». */
.muestra__rec { font-size: 11px; line-height: 1.1; color: var(--a-tinta-48); text-align: center; font-variant-numeric: tabular-nums; margin-top: -3px; }
.muestra.is-on .muestra__rec { color: var(--a-tinta); }
.sel__n { display: grid; white-space: normal; }
.sel__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__p { font-size: 12px; font-weight: 400; color: var(--a-tinta-48); font-variant-numeric: tabular-nums; }
.clin__rec { color: var(--a-tinta-48); }

/* Tarifa en Excel (paso 88): enlace discreto bajo la tabla de la ficha, solo con sesión de empresa */
.tarifa__xls { margin: 10px 0 0; font-size: 13px; letter-spacing: -0.12px; }
.tarifa__xls a { display: inline-flex; align-items: center; gap: 7px; color: var(--a-azul); text-decoration: none; }
.tarifa__xls a:hover { text-decoration: underline; }
.tarifa__xls .ico { height: 12px; width: auto; }
.cuenta__acc .btn .ico--download { height: 14px; width: auto; }

/* «Opciones y precios» (paso 97, 015), las píldoras de QRonline con los tokens de aquí: un grupo por fila con su
   rótulo pequeño, píldora de hairline y, la elegida, borde azul con sombra interior del mismo color (sin salto de
   layout). La que no cabe con lo elegido en otro grupo («Solo con») se ve apagada y discontinua, no se esconde. */
.opcs { display: grid; gap: 16px; padding-top: 6px; }
.opcs__g { display: grid; gap: 8px; }
.opcs__lbl { font-size: 12px; letter-spacing: -0.12px; font-weight: 600; color: var(--a-tinta-48); }
.opcs__list { display: flex; flex-wrap: wrap; gap: 8px; }
.fopt {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; letter-spacing: -0.224px;
  color: var(--a-tinta-80); background: var(--a-lienzo); border: 1px solid var(--a-hairline-fuerte);
  border-radius: 9999px; padding: 9px 16px; cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 100ms ease;
}
.fopt:hover { border-color: var(--a-tinta-48); }
.fopt.is-on { color: var(--a-tinta); border-color: var(--a-azul); box-shadow: inset 0 0 0 1px var(--a-azul); }
.fopt:active { transform: scale(.97); }
.fopt:focus-visible { outline: 2px solid var(--a-azul); outline-offset: 2px; }
.fopt.is-off { opacity: .42; border-style: dashed; cursor: not-allowed; }
.fopt.is-off:active { transform: none; }
.fopt__plus { font-size: 12px; color: var(--a-tinta-48); font-variant-numeric: tabular-nums; }
.fopt__plus--menos { color: var(--ok); font-weight: 600; }   /* lo que RESTA es un ahorro: en verde, no en gris */
.opcs__fija { cursor: default; justify-self: start; }
.opcs__fija:hover { border-color: var(--a-azul); }
.opcs__fija:active { transform: none; }
.opcs__ayuda { margin: 0; font-size: 13px; line-height: 1.45; color: var(--a-tinta-80); }
.opcs__ayuda:empty { display: none; }
.opcs__notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcs__notas li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--a-tinta-80); }
.opcs__notas .ico { flex: none; margin-top: 2px; color: var(--a-tinta-48); }
.opcs__pie { margin: 0; font-size: 12px; letter-spacing: -0.12px; color: var(--a-tinta-48); }
@media (prefers-reduced-motion: reduce) { .fopt { transition: none; } .fopt:active { transform: none; } }
/* Paso 105: la línea de carta digital elige «os doy el enlace» o «ya tengo mi QR»; el logotipo por línea es solo una nota */
.clin__qrmodo { display: grid; gap: 6px; margin: 6px 0 8px; }
.clin__qrmodo .radio { font-size: 13.5px; }
.clin__logo--nota { font-size: 12.5px; color: var(--a-tinta-48); margin: 6px 0 0; }
/* Paso 104: la fila activa de «Tu selección» (la que editan las opciones) y el «para Negro» del rótulo de cada grupo */
.sel__it { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sel__it.is-activa { border-color: var(--a-azul); box-shadow: 0 0 0 1px var(--a-azul); }
.opcs__para { color: var(--a-azul); font-weight: 600; }
.opcs__para::before { content: '· para '; color: var(--a-tinta-48); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .sel__it { transition: none; } }
/* Paso 105: «Tus archivos» en /pedido-ok y /archivos/<token>. Un hueco por archivo: zona para soltar o pulsar. */
/* Paso 105 (remate): en la confirmación, la referencia y el total no se parten nunca («HC-2026-» / «347B5») y los dos
   párrafos reparten sus líneas; el correo, si es muy largo, puede partirse por cualquier sitio antes que desbordar. */
.okpag .nw { white-space: nowrap; }
.okpag__lead, .okpag .okpag__pasos { text-wrap: balance; }
.okpag__mail { overflow-wrap: anywhere; }
.okpag .archs { width: 100%; max-width: 620px; margin: 8px auto 20px; text-align: left; }
.okpag--archs { display: grid; gap: 10px; padding-block: 40px 64px; }
.okpag--archs .archs { margin-inline: 0; }
.okpag--archs .archs__h { display: none; }   /* en /archivos/<token> el título ya es el de la página */
.archs { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--a-hairline); border-radius: 18px; background: var(--surface); }
.archs__h { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.2px; }
.archs__h .ico { width: 18px; height: 18px; color: var(--a-azul); }
.archs__p { font-size: 14px; line-height: 1.5; color: var(--a-tinta-48); }
.archs__p b { color: var(--a-tinta); font-weight: 600; }
.archs__ul { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.arch { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--a-pergamino); }
.arch__t { font-size: 14.5px; font-weight: 600; }
.arch__sub { font-size: 12.5px; color: var(--a-tinta-48); }
.arch__estado { display: flex; align-items: center; gap: 6px; font-size: 13.5px; min-height: 0; }
.arch__estado:empty { display: none; }
.arch__estado .ico { width: 16px; height: 16px; color: var(--ok); flex: none; }
.arch__url { overflow-wrap: anywhere; color: var(--a-tinta-48); }
.arch__zona { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border: 1.5px dashed var(--a-hairline-fuerte, var(--a-hairline)); border-radius: 12px; background: var(--surface); text-align: center; cursor: pointer; overflow: hidden; transition: border-color .15s ease, background-color .15s ease; }
.arch__zona:hover, .arch__zona.is-encima, .arch__zona:focus-within { border-color: var(--a-azul); }
.arch__zona.is-encima { background: color-mix(in srgb, var(--a-azul) 6%, var(--surface)); }
.arch__in { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.arch__zona-t { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--a-azul); }
.arch__zona-t .ico { width: 15px; height: 15px; }
.arch__zona-h { font-size: 12px; color: var(--a-tinta-48); }
.arch__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.arch__barra i { display: block; height: 100%; width: 0; background: var(--a-azul); transition: width .2s ease; }
.arch.is-subiendo .arch__zona { pointer-events: none; opacity: .75; }
.arch.is-ok .arch__zona { padding-block: 10px; }
.arch.is-ok .arch__zona-h { display: none; }
.arch__err { font-size: 13px; color: var(--a-peligro, #d70015); }
@media (prefers-reduced-motion: reduce) { .arch__zona, .arch__barra i { transition: none; } }