/* ============ Serigrafía Utopía — estilo editorial ============ */
:root{
  --font-display:'Fraunces',serif;
  --font-body:'Inter',sans-serif;
  --bg:#F7F3EA;
  --ink:#1B1813;
  --ink-soft:#d8d2c4;
  --paper:#FDFBF6;
  --accent:#2C7A4E;      /* verde tinta */
  --accent-rgb:44,122,78;
  --accent-tint:#dcece2;  /* fondo suave verde */
  --line:1px solid #C9C2B2;
  --line-soft:1px solid #DDD6C6;
  --radius:14px;
  --shadow:0 12px 30px rgba(27,24,19,.08);
  --shadow-sm:0 4px 14px rgba(27,24,19,.07);
  --muted:#7a7264;
  --barH:76px;            /* altura de la cabecera real (.nav de la web = 76px) */
  /* Barra de navegacion FIJA de abajo en movil. El contenido de cada frame
     reserva esta altura, para que la barra no tape lo que hay que tocar. */
  --navH:60px;
  --bar-bg:#1a1a1a;       /* negro de la web de referencia (--color-black/olive) */
  --bar-accent:#10b981;   /* verde esmeralda de la web */
}
*{margin:0;padding:0;box-sizing:border-box}
/* [hidden] SIEMPRE oculta, aunque la clase del elemento defina display:flex/grid
   (sin esto, secciones "ocultas" del diseñador seguían viéndose). */
[hidden]{display:none!important}
html,body{height:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{
  overflow:hidden;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;height:100dvh;
}
/* En el configurador la cabecera va EN FLUJO (sticky) para el layout sin-scroll;
   en las páginas de marketing sigue fixed (header.css) como en la web. */
.header{position:sticky}

/* ── Cabecera unificada con la web (barra oscura + logo + misma nav) ── */
.utopia-bar{flex:0 0 var(--barH);height:var(--barH);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(18px,2.6vw,48px);background:var(--bar-bg);box-shadow:0 4px 16px rgba(0,0,0,.08);position:relative;z-index:100}
.ub-logo{display:flex;align-items:center}
.ub-logo img{height:48px;width:auto;max-width:200px}
.ub-nav{display:flex;gap:clamp(20px,2.4vw,35px);align-items:center}
/* Menú = .nav-menu de la web: Montserrat 500, letter-spacing 1px, subrayado blanco */
.ub-nav a{font-family:'Montserrat',sans-serif;font-weight:500;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#fff;transition:opacity .2s;position:relative;white-space:nowrap;text-decoration:none;opacity:.92}
.ub-nav a:hover,.ub-nav a.on{opacity:1}
.ub-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:#fff;transition:width .3s cubic-bezier(.25,.46,.45,.94)}
.ub-nav a:hover::after,.ub-nav a.on::after{width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--ink-soft);border-radius:4px}

/* ============ LAYOUT: 3 FRAMES (bajo la cabecera unificada) ============ */
.frames{
  display:grid;
  grid-template-columns:0.9fr 1.24fr 1fr;
  grid-template-rows:1fr;
  flex:1 1 auto;min-height:0;height:auto;
  transition:transform .45s cubic-bezier(.7,0,.25,1);
}
.frame{
  display:flex;flex-direction:column;
  height:100%;min-height:0;overflow:hidden;
  padding:clamp(14px,2vh,26px) clamp(16px,1.8vw,30px);
}
.f1{grid-column:1;grid-row:1}
.f2{grid-column:2;grid-row:1}
.f3{grid-column:3;grid-row:1;display:flex;flex-direction:column;overflow:hidden}
/* Área central que crece/scrollea (zonas + config); ancla abajo el bloque de acciones */
.f3-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.frame+.frame{border-left:var(--line-soft)}
/* La sitebar y los logos por-frame se sustituyen por la cabecera unificada de arriba. */
.sitebar{display:none}
.f1-brandhead{display:none}

/* Cabecera de sitio (muestra de la futura navegación, abarca frames 2-3) */
.sitebar{
  grid-column:2 / 4;grid-row:1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:clamp(46px,6vh,58px);padding:0 clamp(16px,1.8vw,30px);
  border-bottom:var(--line-soft);border-left:var(--line-soft);
  background:linear-gradient(180deg,#fdfbf6,#f5efe4);
}
.sb-nav,.sb-right{display:flex;align-items:center;gap:clamp(10px,1.5vw,22px)}
.sb-link{font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .15s}
.sb-link:hover,.sb-link.on{color:var(--accent)}
.sb-account{font-size:13px;font-weight:700;color:#fff;background:var(--ink);padding:8px 15px;border-radius:10px}
.sb-account:hover{background:var(--accent)}

/* Logo de nuestra marca en la cabecera del frame 1 */
.f1-brandhead{display:none}/* logo ahora en la cabecera unificada superior */
.m-brandhead{display:none}/* cabecera con logo (solo móvil, frames 2 y 3) */
/* Menú hamburguesa (solo móvil): vive DENTRO de la barra oscura (en flujo), rayas blancas */
.m-menu-btn{display:none;width:40px;height:40px;background:transparent;border:none;box-shadow:none;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:0 0 auto}
.m-menu-btn span{display:block;width:21px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.m-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.m-menu-btn.open span:nth-child(2){opacity:0}
.m-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Desplegable: absoluto respecto de la barra (position:relative) → se posiciona bien */
.m-menu{display:none;position:absolute;top:calc(100% + 6px);right:clamp(12px,3vw,24px);z-index:97;flex-direction:column;gap:2px;min-width:210px;background:var(--paper);border:var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;animation:lbfade .15s ease}
.m-menu:not([hidden]){display:flex}
.m-menu[hidden]{display:none !important}
.m-menu .sb-link{padding:10px 12px;border-radius:9px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink)}
.m-menu .sb-link:hover,.m-menu .sb-link.on{background:var(--accent-tint);color:var(--accent)}
.m-menu .sb-account{margin-top:6px;padding:11px 12px;border-radius:10px;background:var(--ink);color:var(--bg);text-align:center;font-weight:700;font-size:13.5px;text-decoration:none}
.f1-brandlogo{height:clamp(34px,4vh,46px);width:auto}

/* ============ FRAME 1: PRODUCTO ============ */
/* Cabecera del frame 1: categoría + logo de marca, y nombre, ANTES de la imagen */
.f1-head{margin-bottom:10px;text-align:right}
.f1-cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.f1-namerow{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:5px}
.f1-logo{height:26px;max-width:130px;object-fit:contain;object-position:right center;opacity:.9;flex:none}
.f1-name{font-family:var(--font-display);font-weight:560;font-size:clamp(22px,2.4vw,36px);line-height:1.03;letter-spacing:-.01em}
.f1-sub{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500}
/* Anuncio de tirada corta. Solo sale en los productos recomendados, que son los
   únicos que se pueden estampar desde 1 unidad. La estrella va en el dorado de
   la etiqueta "★ RECOMENDADO" de la lista, para que se lea como lo mismo. */
/* Fila de la categoría: el cartel de tirada corta a la IZQUIERDA y "CAMISETAS"
   donde estaba, a la derecha. Es la línea más vacía del bloque, así que el
   cartel no gasta ninguna altura — antes tenía línea propia y empujaba la
   imagen hasta cortar las miniaturas del carrusel. */
/* `flex-end` es imprescindible: cuando el producto NO tiene colores de tirada
   corta el cartel va oculto y la categoría se queda sola en la fila. Sin esto se
   iba al extremo IZQUIERDO, lejos de todo, en vez de quedarse a la derecha como
   siempre. Con el cartel visible, su `margin-right:auto` lo empuja a la
   izquierda igualmente. */
.f1-catrow{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-height:20px}
/* `margin-right:auto` en vez de `justify-content`: empuja el cartel al extremo
   izquierdo aunque el bloque herede `text-align:right`, y deja CAMISETAS donde
   siempre estuvo, a la derecha. Así hay aire de sobra entre los dos. */
.f1-catrow .f1-desde1{margin-right:auto}
.f1-catrow .f1-cat{flex:none}

.f1-desde1{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;
  border-radius:999px;background:var(--accent-tint);border:1px solid rgba(var(--accent-rgb),.24);
  color:var(--accent);font-size:11.5px;font-weight:640;line-height:1.25;text-align:left;
  white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;
  animation:desde1Entra .34s ease both}
/* En pantallas estrechas la categoría y el cartel no caben en la misma línea:
   se deja que el cartel baje debajo en vez de comprimir el nombre de la
   categoría o cortar el texto. */
@media (max-width:520px){
  /* Una sola fila: el cartel a la izquierda y la categoria a la derecha. Antes
     la categoria se llevaba el ancho entero (width:100%) y empujaba el cartel a
     una segunda linea, gastando alto en la parte mas vacia de la pantalla. */
  .f1-catrow{flex-wrap:nowrap;justify-content:space-between;gap:10px;row-gap:0}
  .f1-catrow .f1-desde1{order:1;margin-right:auto;min-width:0;font-size:10.5px;padding:3px 9px 3px 7px}
  .f1-catrow .f1-cat{order:2;width:auto;flex:0 1 auto;font-size:10.5px;text-align:right}
  /* Si la categoria es larga, el que cede es el cartel (con puntos suspensivos),
     nunca la fila entera. */
  #f1desde1Txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .f1-desde1-star{font-size:13px}
}
.f1-desde1-star{color:#E8B923;font-size:15px;line-height:1;flex:none;
  text-shadow:0 1px 2px rgba(0,0,0,.12)}
/* Variante "hay OTROS colores desde 1 unidad": es información, no una oferta
   sobre lo que tiene delante, así que va más apagada para no competir con el
   cartel de verdad. */
.f1-desde1.otros{background:transparent;border-color:var(--line-soft);color:var(--muted);font-weight:560}
.f1-desde1.otros b{color:var(--accent)}
@keyframes desde1Entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.f1-desde1{animation:none}}
/* Botón "favorito" (corazón) */
.f1-fav{flex:none;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-soft);background:var(--paper);color:#d64d63;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,transform .12s,box-shadow .15s}
.f1-fav svg{display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;transition:fill .18s ease,transform .18s ease}
.f1-fav:hover{background:#fdecef;border-color:#f4c9d1;transform:scale(1.06);box-shadow:var(--shadow-sm)}
.f1-fav.on{color:#e11d48;border-color:#f4c9d1;background:#fdecef}
.f1-fav.on svg{fill:currentColor;stroke:currentColor;animation:favPop .32s ease}
@keyframes favPop{0%{transform:scale(.7)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
.f1-fav-msg{text-align:right;font-size:12px;font-weight:600;color:var(--accent);margin-top:6px}
.f1-fav-msg a{color:var(--accent);text-decoration:underline}

/* Carrusel: flechas FUERA de la imagen, a los lados */
/* Flechas FIJAS a los lados del frame (no se mueven con la proporción de la imagen):
   posición absoluta anclada a los bordes del stage y centradas verticalmente. El
   padding lateral reserva su hueco para que la imagen no quede debajo. */
.f1-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:0 46px;height:clamp(220px,40vh,390px)}
.f1-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:36px;height:36px;border-radius:50%;background:var(--paper);border:var(--line);box-shadow:var(--shadow-sm);font-size:20px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .12s,color .15s}
.f1-arrow.prev{left:4px}
.f1-arrow.next{right:4px}
.f1-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-50%) scale(1.08)}
.f1-counter{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;font-weight:600;color:var(--ink);background:rgba(253,251,246,.9);border:var(--line-soft);padding:2px 9px;border-radius:999px}

/* El marco se adapta a la proporción de la imagen principal (aspect-ratio se
   ajusta por JS al cargar). Height acotado; width derivado → centrado con aire. */
.f1-media{
  position:relative;flex:0 1 auto;
  height:100%;width:auto;max-width:100%;min-width:0;
  aspect-ratio:1/1;
  background:#fff;border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;
  transition:aspect-ratio .25s;
}
.f1-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .25s}
.f1-media video{width:100%;height:100%;object-fit:cover;background:#fff}
.f1-media .f1-yt{width:100%;height:100%;border:0;background:#000}
/* Póster de YouTube (Sol's/NEOBLU, sin incrustación): botón centrado que abre el vídeo. */
.f1-yt-badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;cursor:pointer;z-index:3}
.f1-yt-badge[hidden]{display:none} /* la clase display:flex ganaba a [hidden] → el póster se quedaba pegado en las fotos */
.f1-yt-badge .f1-yt-play{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(220,32,32,.95);color:#fff;font-size:1.5rem;padding-left:5px;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .15s,background .15s}
.f1-yt-badge:hover .f1-yt-play{transform:scale(1.08);background:#e30000}
.f1-yt-badge .f1-yt-txt{background:rgba(0,0,0,.72);color:#fff;font-size:.82rem;font-weight:600;padding:.32rem .7rem;border-radius:999px}
.f1-skeleton{position:absolute;inset:0;background:linear-gradient(100deg,#f0ece2 30%,#f7f4ee 50%,#f0ece2 70%);background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.f1-media .tag{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:4px 10px;border-radius:999px;
}
/* Miniaturas curadas (modelos + frontal). El resto de vistas, por las flechas. */
.f1-thumbs{display:flex;gap:9px;margin-top:11px;flex-wrap:nowrap;overflow:hidden}
.f1-thumb{flex:0 0 auto;width:68px;height:68px;border:var(--line);border-radius:11px;background:#fff;overflow:hidden;cursor:pointer;padding:4px;transition:border-color .15s,transform .12s}
.f1-thumb:hover{transform:translateY(-2px)}
.f1-thumb.on{border-color:var(--accent);border-width:2px}
.f1-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.f1-thumb-video{display:flex;align-items:center;justify-content:center;background:var(--ink);border-color:var(--ink)}
.f1-thumb-video .playicon{color:#fff;font-size:14px;margin-left:2px}
/* Controles del giro 360°: flechas a los lados y aviso de arrastre. */
/* Se sitúan POR ENCIMA del contador de diapositivas (que vive abajo del todo). */
.giro360-ui{position:absolute;left:0;right:0;bottom:46px;display:flex;align-items:center;justify-content:center;gap:10px;z-index:4;pointer-events:none}
.giro360-ui .giro-btn{pointer-events:auto;width:34px;height:34px;border-radius:50%;border:var(--line);background:rgba(253,251,246,.94);color:var(--ink);font-size:19px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}
.giro360-ui .giro-btn:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
.giro360-ui .giro-hint{pointer-events:none;background:rgba(27,24,19,.72);color:#fff;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:9px;white-space:nowrap}

/* Miniatura del giro 360°: la foto con un distintivo para que se vea interactiva. */
.f1-thumb-360{position:relative}
.f1-thumb-360 .badge360{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);background:rgba(27,24,19,.82);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.03em;padding:1.5px 5px;border-radius:7px;pointer-events:none}
.f1-thumb-video.on{border-color:var(--accent)}

/* Ficha de producto: enlace destacado (tipo botón outline) */
.f1-ficha{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;margin-top:12px;padding:9px 15px;font-size:13px;font-weight:700;color:#fff;text-decoration:none;background:var(--accent);border:1.5px solid var(--accent);border-radius:11px;transition:background .15s,color .15s}
.f1-ficha span{font-size:15px;transition:transform .15s}
.f1-ficha:hover{background:#1f5537;border-color:#1f5537;color:#fff}
.f1-ficha:hover span{transform:translateX(3px)}
.f1-desc{font-size:13px;line-height:1.5;margin-top:12px;max-width:46ch;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.f1-specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.spec{font-size:11.5px;font-weight:600;padding:5px 10px;background:var(--paper);border:var(--line-soft);border-radius:999px}
.spec-tec{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}
.f1-foot{margin-top:auto;padding-top:12px;border-top:var(--line-soft);display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
/* En el frame 3 el carrito flotante pisa el borde superior del pie → sin línea */
.f3-foot{border-top:none;padding-right:170px}
.f1-foot a{text-decoration:none}
.f1-foot a:hover{color:var(--accent)}

/* ============ FRAME 2: CONFIGURADOR ============ */
.f2-logo{text-align:center;padding:6px 0 14px}
.f2-logo-img{height:clamp(40px,4.8vh,60px);width:auto;display:block;margin:0 auto}
.f2-search{position:relative;margin-bottom:6px}
.f2-search input{
  width:100%;padding:11px 14px;border:var(--line);border-radius:var(--radius);
  background:var(--paper);font-size:14px;font-weight:500;
}
.f2-search input:focus{outline:none;border-color:var(--accent)}
/* ---- Barra de filtrar (marca destacada) + ordenar ---- */
.pl-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:clamp(8px,1.4vh,14px);flex-wrap:wrap}
.filtro-marcas{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.marca-chip{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;border:1.5px solid var(--accent);color:var(--accent);background:var(--paper);cursor:pointer;transition:all .14s;white-space:nowrap}
.marca-chip:hover{background:var(--accent-tint)}
.marca-chip.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(var(--accent-rgb),.28)}
.marca-chip span{opacity:.6;font-weight:500;margin-left:3px}
.marca-chip.on span{opacity:.85}
.pl-sortwrap{display:flex;align-items:center;gap:10px;flex:none}
.pl-filtrar{font-size:12px;font-weight:700;color:var(--ink);border:var(--line-soft);border-radius:9px;padding:6px 12px;background:var(--paper);cursor:pointer;display:flex;align-items:center;gap:6px;transition:border-color .15s}
.pl-filtrar:hover{border-color:var(--accent);color:var(--accent)}
.pl-filtro-n{min-width:17px;height:17px;border-radius:999px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.pl-count{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.pl-sortlabel{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.pl-sort{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--ink);border:var(--line-soft);border-radius:9px;padding:6px 9px;background:var(--paper);cursor:pointer}
.pl-sort:focus{outline:none;border-color:var(--accent)}

/* ---- Lista de productos inline (siempre desplegada, con scroll) ---- */
.f2-productlist{flex:1 1 auto;min-height:120px;overflow-y:auto;margin-top:10px;border:var(--line);border-radius:14px;background:var(--paper)}
.pl-empty{font-size:12.5px;color:var(--muted);padding:18px 12px;text-align:center}
.pl-item{width:100%;display:flex;align-items:center;gap:11px;padding:9px 12px;cursor:pointer;border-bottom:var(--line-soft);text-align:left;transition:background .12s}
.pl-item:last-child{border-bottom:none}
.pl-item:hover{background:#f2ede3}
.pl-item.on{background:var(--accent-tint)}
.pl-item img{width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.pl-info{min-width:0;flex:1 1 auto}
.pl-name{font-weight:600;font-size:13.5px;line-height:1.15;display:flex;align-items:center;gap:7px}
.pl-nostock{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:#e9e2d3;padding:2px 6px;border-radius:999px}
.pl-meta{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.pl-right{margin-left:auto;display:flex;flex-direction:row;align-items:center;gap:10px;flex:none;text-align:right}
.pl-marca{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:#efe8da;padding:3px 8px;border-radius:999px;white-space:nowrap}
.pl-price{font-size:15px;font-weight:700;color:var(--accent);white-space:nowrap;font-family:var(--font-display);line-height:1}
.pl-price span{display:block;font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pl-item.pl-out{opacity:.5}
.pl-item.pl-out:hover{opacity:.72}
/* Recomendados por la tienda: marco a la izquierda + etiqueta (no fondo, para no
   confundir con el seleccionado que sí usa fondo verde claro) */
.pl-item.pl-rec{box-shadow:inset 3px 0 0 var(--accent)}
.pl-recbadge{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:1px 6px;border-radius:999px;margin-right:2px}
.f2-sec{margin-top:clamp(10px,1.6vh,18px)}
.f2-label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* ---- Sistema de chips sólidos (categorías, técnicas) ---- */
.chip{font-size:12px;font-weight:600;padding:7px 12px;border-radius:10px;background:#efe8da;color:var(--ink);border:1px solid transparent;transition:transform .12s,background .15s,box-shadow .15s;white-space:nowrap;line-height:1;cursor:pointer}
.chip:hover{background:#e6ddcc;transform:translateY(-1px)}
.chip.on{background:var(--ink);color:var(--bg);box-shadow:0 4px 12px rgba(27,24,19,.18)}
.chip .cnt{opacity:.5;font-weight:500;margin-left:5px;font-size:10.5px}
.chip.on .cnt{opacity:.75}

/* ---- Barra de proveedores/marcas (con logos), bajo el buscador ---- */
.prov-bar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}
.prov-chip{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:44px;padding:0 13px;border:1.5px solid var(--line-soft);border-radius:11px;background:var(--paper);cursor:pointer;font-weight:700;font-size:12.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
.prov-chip img{height:20px;max-width:92px;object-fit:contain;filter:grayscale(1);opacity:.8}
.prov-chip:hover img,.prov-chip.on img{opacity:1}
.prov-chip:hover{border-color:var(--accent)}
.prov-chip.on{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent) inset;background:var(--accent-tint)}
.prov-todos{font-weight:700}
.prov-more{position:relative;display:inline-flex;align-items:center}
.prov-more > .prov-chip{border-top-right-radius:0;border-bottom-right-radius:0}
.prov-more-caret{height:38px;padding:0 10px;border:1.5px solid var(--line-soft);border-left:none;border-radius:0 11px 11px 0;background:var(--paper);cursor:pointer;color:var(--muted);font-size:12px;font-weight:700}
.prov-more-caret:hover{border-color:var(--accent);color:var(--accent)}
.prov-drop{position:absolute;z-index:25;top:calc(100% + 6px);left:0;min-width:190px;max-height:50vh;overflow-y:auto;background:var(--paper);border:var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px}
.prov-drop label{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.prov-drop label:hover{background:#f2ede3}
.prov-drop label span{margin-left:auto;font-size:11px;color:var(--muted)}
.prov-drop input{accent-color:var(--accent);width:15px;height:15px}

/* ---- Navegador de categorías (panel) ---- */
.cat-nav{background:linear-gradient(180deg,#fdfbf6,#f5efe4);border:var(--line);border-radius:16px;padding:11px;box-shadow:var(--shadow-sm)}
.cat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:9px;margin-bottom:9px;border-bottom:var(--line-soft)}
.cat-tools{display:flex;align-items:center;gap:7px;flex:none}
/* Las seis categorías de arriba caben en una línea en español, pero no en los
   otros siete idiomas: "Tecnología" es "Технології", "Technologie"…, y encima
   los botones de la derecha ("Filtrar", "Relevancia") también crecen y le roban
   sitio. Al envolver, la fila se partía en dos y descolocaba todo el frame.
   Se resuelve con desplazamiento horizontal: la barra ocupa SIEMPRE una línea,
   en cualquier idioma, y lo que no cabe se arrastra. Se le pone un degradado a
   la derecha para que se vea que hay más, y se oculta la barra de scroll para
   no meter ruido en un elemento de 30 px de alto. */
.cat-n1{display:flex;flex-wrap:nowrap;gap:5px;flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.cat-n1::-webkit-scrollbar{display:none}
/* Sin desbordamiento no hace falta el degradado: si la fila cabe entera, la
   máscara recortaría el último botón sin motivo. */
.cat-n1:not(.desborda){-webkit-mask-image:none;mask-image:none}
.cat-tab{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:10px;background:transparent;color:var(--muted);transition:all .15s;cursor:pointer;white-space:nowrap}
.cat-tab:hover{background:#efe8da;color:var(--ink)}
.cat-tab.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(var(--accent-rgb),.28)}
/* Desplegable de categorías con la flecha ▾ UNIDA a la última categoría (solo móvil) */
.cat-last{position:relative;display:inline-flex;align-items:stretch}
.cat-last > [data-ruta]{border-top-right-radius:0;border-bottom-right-radius:0}
.cat-arrow{display:flex;align-items:center;padding:0 9px;border-radius:0 10px 10px 0;background:#efe8da;color:var(--muted);font-weight:800;font-size:11px;cursor:pointer;border-left:1px solid rgba(0,0,0,.10)}
.cat-arrow:hover{background:#e6ddcc;color:var(--ink)}
/* si la última categoría está activa (verde), la flecha combina */
.cat-last > .on + .cat-arrow{background:var(--accent);color:#fff;border-left-color:rgba(255,255,255,.35)}
.cat-drop{position:absolute;z-index:30;top:calc(100% + 6px);right:0;min-width:180px;max-width:84vw;max-height:46vh;overflow-y:auto;background:var(--paper);border:var(--line);border-radius:12px;box-shadow:var(--shadow);padding:9px;display:flex;flex-wrap:wrap;gap:6px}
.cat-drop[hidden]{display:none}
.cat-n2,.cat-n3{display:flex;flex-wrap:wrap;gap:6px}
/* N3 (sub-subcategoría): claramente distinta — más pequeña, ghost, con chevron */
.cat-n3{margin-top:9px;padding-top:9px;border-top:1px dashed var(--ink-soft)}
.cat-n3 .chip{background:transparent;border:1px solid var(--ink-soft);color:var(--muted);font-size:11.5px;padding:6px 11px;border-radius:999px}
.cat-n3 .chip::before{content:"›";margin-right:5px;font-weight:800;opacity:.55}
.cat-n3 .chip:hover{background:var(--accent-tint);color:var(--ink);border-color:transparent}
.cat-n3 .chip.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(var(--accent-rgb),.28)}
/* Aviso sutil "elige subcategoría": halo verde que parpadea unas veces */
@keyframes catHintPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}50%{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22)}}
.cat-hint .chip,.cat-hint .cat-tab{animation:catHintPulse 1.5s ease-in-out 4}

/* ── Categorías en UNA fila ───────────────────────────────────────────────
   La clase .una-fila la pone el JS, y solo en móvil (ver catsEnUnaFila()). Con
   el interruptor CATS_UNA_FILA en false la clase no se pone y nada de aquí se
   aplica: es la vuelta atrás a las tres filas, sin quitar código.
   Aun así va dentro de un @media: si un día la clase se pusiera por error en
   escritorio, allí no debe esconder nada — con los tres niveles a la vista y
   sitio de sobra, una sola fila solo quitaría información. */
@media (max-width:960px){
  .cat-nav.una-fila .cat-n2,
  .cat-nav.una-fila .cat-n3{display:none}

  /* Las categorías ENVUELVEN en dos filas en vez de desplazarse en horizontal.
     Un carrusel lateral esconde la mitad de las opciones detrás de un gesto que
     no se ve; en dos filas se leen todas de un vistazo, que es de lo que va
     esta pantalla: elegir.
     El tope son dos filas de verdad (--catFilas). Si un nivel trae tantas que
     no caben, se desplaza EN VERTICAL dentro de su caja en lugar de empujar los
     productos fuera de la pantalla. */
  .cat-nav.una-fila .cat-n1{
    flex-wrap:wrap;
    overflow-x:visible;
    max-height:calc(var(--catFilas) * var(--catFilaH) + (var(--catFilas) - 1) * 6px);
    overflow-y:auto;
    -webkit-mask-image:none;mask-image:none;   /* el degradado era del scroll lateral */
  }
  .cat-nav.una-fila .cat-n1>*{white-space:normal}
  /* Con el envoltorio no hay scroll lateral del que salvarse, pero sí puede
     haberlo vertical: la flecha se queda arriba a la izquierda en los dos casos. */
  .cat-nav.una-fila .cat-atras{top:0}
}
/* La flecha de subir nivel se queda pegada al borde izquierdo aunque la fila se
   desplace: es la salida del nivel, y una salida que se va con el scroll no
   sirve. El fondo tapa los chips que pasan por debajo. */
.cat-atras{
  position:sticky;left:0;z-index:2;flex:0 0 auto;
  display:flex;align-items:center;gap:3px;
  font-family:inherit;font-size:12.5px;font-weight:700;
  padding:7px 11px 7px 8px;margin-right:3px;border:0;border-radius:10px;cursor:pointer;
  background:var(--accent-tint);color:var(--ink);
  box-shadow:6px 0 8px -4px rgba(253,251,246,.95);
  white-space:nowrap;
}
.cat-atras .ca-ar{font-size:17px;line-height:1;font-weight:800;color:var(--accent)}
.cat-atras:active{transform:scale(.96)}
.cat-n3 .chip.on::before{opacity:.85}
.cat-n3 .chip .cnt{opacity:.45}

/* ---- Técnicas ---- */
.tecnicas{display:flex;flex-wrap:wrap;gap:7px}
.tecmax{font-weight:600;color:var(--accent);font-size:11px;text-transform:none;letter-spacing:0;margin-left:4px}
/* técnica con pedido mínimo (serigrafía: 20 uds) */
.chip:disabled,.est2-fchip:disabled{opacity:.45;cursor:not-allowed}
.chip .chip-min{font-size:9.5px;font-weight:600;opacity:.75;margin-left:3px}
.est-minaviso{font-size:12px;font-weight:600;color:#b5701a;background:#FDF6E3;border:1px solid #E8B923;border-radius:10px;padding:8px 11px;margin-bottom:8px}
.est-minaviso b{color:#1b1813}

/* ---- Colores (compacto, antes de la cantidad) ---- */
.f2-colorwrap{flex:0 0 auto;display:flex;flex-direction:column;margin-top:clamp(8px,1.4vh,14px)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:8px;padding:5px;align-content:start}
.sw{position:relative;aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.14);cursor:pointer;transition:transform .12s,box-shadow .12s}
.sw:hover{transform:scale(1.12)}
.sw.on{transform:scale(1.05);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent)}
/* ★ = este color se estampa desde 1 unidad. Va fuera del círculo, arriba a la
   derecha, con sombra para que se lea igual sobre un swatch blanco o negro.
   `overflow:visible` porque el botón es redondo y recortaría la estrella. */
.sw.corta{overflow:visible}
.sw.corta::after{content:'★';position:absolute;top:-6px;right:-4px;font-size:11px;line-height:1;
  color:#E8B923;pointer-events:none;
  /* Contorno claro por los cuatro lados: así se lee igual sobre un swatch
     blanco que sobre uno negro, sin necesidad de pintar un disco detrás. */
  text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 1px 2px rgba(0,0,0,.5)}
/* Al estar seleccionado, el anillo pasa por encima: se sube un poco la estrella. */
.sw.corta.on::after{top:-8px;right:-6px}
.color-leyenda{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.4;
  color:var(--muted);margin:-2px 0 8px}
.color-leyenda b{color:var(--accent);font-weight:650}
.color-leyenda .sw-estrella{color:#E8B923;font-size:13px;line-height:1;flex:none}
.f2-colorname{font-size:12.5px;font-weight:600;margin-top:10px;color:var(--muted)}
.f2-colorname b{color:var(--ink)}

/* ---- Barra inferior: cantidad + precio (compacta) ---- */
.f2-bottombar{margin:clamp(10px,1.4vh,16px) 14px 2px;background:linear-gradient(180deg,#fdfbf6,#f3ecdf);border:var(--line);border-radius:16px;padding:10px 16px;box-shadow:var(--shadow-sm)}
.qtyrow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.qtyrow .bb-label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.stepper{display:flex;align-items:center;gap:6px}
.qtybtn{width:32px;height:32px;font-size:17px;font-weight:700;border:var(--line-soft);border-radius:9px;background:var(--paper);transition:background .12s}
.qtybtn:hover{background:#efe8da}
.qtybtn:active{transform:scale(.93)}
.qtyinput{width:54px;height:32px;text-align:center;font-weight:700;font-size:16px;border:var(--line-soft);border-radius:9px;background:var(--paper);font-family:var(--font-body);-moz-appearance:textfield;appearance:textfield}
.qtyinput::-webkit-outer-spin-button,.qtyinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtyhint{font-size:11px;color:var(--accent);font-weight:600;line-height:1.25}
.ver-tramos{font-size:11px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ver-tramos:hover{color:var(--accent)}
.f2-price{display:flex;justify-content:center;align-items:baseline;gap:30px;margin-top:10px;padding-top:10px;border-top:var(--line-soft)}
.f2-price .pu,.f2-price .pt{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.f2-price .lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.f2-price .pu .val{font-family:var(--font-display);font-size:clamp(17px,1.7vw,21px)}
.f2-price .pt .val{font-family:var(--font-display);font-size:clamp(25px,2.5vw,34px);color:var(--accent);line-height:1}
.f2-price .val small{font-size:.55em}
.prov-badge{font-size:9px;font-weight:700;letter-spacing:.05em;background:#e9e2d3;color:var(--muted);padding:2px 6px;border-radius:999px;text-transform:uppercase;vertical-align:middle}

/* ============ FRAME 3: EXTRAS + CARRITO ============ */
.f3-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);padding-bottom:10px;border-bottom:var(--line-soft);letter-spacing:.04em}
.f3-top a{text-decoration:none}
.f3-top a:hover{color:var(--accent)}
.f3-title{font-family:var(--font-display);font-weight:560;font-size:clamp(18px,1.8vw,26px);margin-top:clamp(10px,1.6vh,18px)}
.f3-note{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
/* Enlace en línea dentro de un aviso (p. ej. "consúltanos" cuando el proveedor no declara técnicas). */
.f3-note .lnk{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.f3-note .lnk:hover{opacity:.8}
/* ── Estampación: zonas ── */
/* minmax(0,1fr) y NO `1fr` a secas: un `1fr` no puede encogerse por debajo del
   min-content de su contenido, asi que un nombre largo ("Manga izquierda")
   ensanchaba la rejilla y sacaba las zonas fuera de la pantalla en movil
   (medido: 364px de contenido en 354 disponibles). */
.est-zonas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.est-zona{position:relative;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;padding:8px 10px;border:var(--line-soft);border-radius:var(--radius);background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s}
/* tooltip de bolsillos (solo textil): 1 zona Bolsillo 10×10 por cada bolsillo */
.ez-tip{position:relative;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;max-width:100%;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;font-style:normal;cursor:help;vertical-align:middle;margin-left:6px;white-space:nowrap}
.ez-tip-pop{position:absolute;top:calc(100% + 9px);right:-4px;width:270px;background:#1b1813;color:#fff;font-size:11.5px;line-height:1.5;font-weight:400;padding:10px 12px;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .15s;z-index:30;text-align:left;white-space:normal}
.ez-tip-pop::after{content:"";position:absolute;bottom:100%;right:26px;border:6px solid transparent;border-bottom-color:#1b1813}
.ez-tip:hover .ez-tip-pop,.ez-tip:focus .ez-tip-pop{opacity:1;pointer-events:auto}
.ez-tip-pop b{color:#E8B923}
/* La misma píldora de ayuda del aviso de bolsillos, reutilizada en el envío
   urgente. Ahí llevaba texto ("ℹ Bolsillos"); aquí es solo el signo, así que se
   redondea a mano para que no salga un óvalo. El popover se abre a la IZQUIERDA
   porque en el checkout esta opción queda pegada al borde derecho de la caja. */
.ez-tip.solo-signo{width:18px;height:18px;padding:0;justify-content:center;border-radius:50%;font-size:12px}
.ck-envio .ez-tip-pop{right:auto;left:-6px;width:min(300px,72vw)}
.ck-envio .ez-tip-pop::after{right:auto;left:12px}

/* quitar estampación / zona extra */
.ez-del{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:#1b1813;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:2;cursor:pointer}
.ez-del:hover{background:#c0392b}
/* tarjeta "añadir nueva zona" (zona temporal de sesión) */
.est-zona-add{border-style:dashed;justify-content:center;flex-direction:column;gap:5px;color:var(--muted);min-height:52px}
.est-zona-add:hover{color:var(--accent)}
.est-zona-add .eza-t{font-weight:700;font-size:12px}
.ez-opciones{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.ez-opciones [data-ezbase]{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);background:var(--paper);cursor:pointer}
.ez-opciones [data-ezbase]:hover{background:var(--accent);color:#fff}
.est-zona:hover{border-color:var(--accent)}
.est-zona.on{border-color:var(--accent);background:var(--accent-tint)}
.est-zona.done{border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.est-zona.done .ez-name{color:var(--accent)}
/* técnica elegida pero SIN diseño aplicado: pendiente (no cuenta todavía) */
.est-zona.pend .ez-tag{color:#b5701a;font-weight:700}
/* área CILINDRO 360° (tazas): opcional pero llamativa, siempre al final */
.est-zona.cil:not(.done){border:1.5px dashed var(--accent);background:linear-gradient(120deg,var(--paper) 30%,var(--accent-tint))}
.est-zona.cil:not(.done) .ez-name{color:var(--accent)}
.est-zona.cil:not(.done):not(.pend) .ez-tag{color:var(--accent);font-weight:600}
.est-zona.cil:not(.done) .ez-thumb{box-shadow:inset 0 0 0 1.5px var(--accent);background:#fff}
.est-zona.cil .ez-plus{color:var(--accent)}
.est-zona.done .ez-thumb{background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent)}
.est-zona.done .ez-thumb::after{content:"✓";position:absolute;font-size:0}
.ez-thumb{width:38px;height:38px;flex:0 0 38px;border-radius:8px;background:#f0ece3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ez-thumb img{width:100%;height:100%;object-fit:contain}
.ez-plus{font-size:20px;color:var(--muted);font-weight:400}
.est-zona .ez-name{font-weight:700;font-size:12.5px;line-height:1.15;min-width:0;overflow-wrap:break-word}
/* El texto de la zona puede encogerse; la miniatura no (flex:0 0 38px). Sin
   esto el nombre empuja y la tarjeta se sale. */
.est-zona > *:not(.ez-thumb){min-width:0}
/* Nombre y etiqueta van en COLUMNA, no en fila. En fila se repartian los ~100px
   que quedan tras la miniatura y con `anywhere` acababan partidos por la mitad
   ("Manga izquier / da", "sin esta / mpar"). En columna cada uno tiene el ancho
   entero, y `break-word` solo parte si una palabra sola no cabe de ninguna forma. */
.ez-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.est-zona .ez-tag{font-size:10.5px;color:var(--muted);display:block;overflow-wrap:break-word}
.est-zona.done .ez-tag{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:2px}
.est-zona.done .ez-tag::before{content:"✓ "}
.ez-name{display:flex;flex-direction:column}
/* ── Config de zona: técnica + params ── */
.est-config{margin-top:14px;padding-top:12px;border-top:var(--line-soft)}
.est-params{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.est-colores{display:flex;align-items:center;gap:10px}
.est-tamanos{display:flex;flex-wrap:wrap;gap:6px}
.chip.small{display:flex;flex-direction:column;align-items:flex-start;padding:6px 10px;font-size:11.5px}
.chip.small small{font-weight:500;opacity:.6;font-size:9.5px}
.chip.small.on small{opacity:.8}
.est-nota{font-size:11.5px;color:var(--muted);line-height:1.45;background:var(--accent-tint);padding:8px 10px;border-radius:10px}
.est-precio-zona{font-size:12px;color:var(--ink)}
.est-metalizado{font-size:11.5px;line-height:1.4;color:#6b5a2a;background:#faf6ea;border:1px solid #e7dcc0;border-radius:9px;padding:7px 10px;margin-top:8px}
.est-metalizado a{color:var(--accent);font-weight:600}
.est-precio-zona b{color:var(--accent)}
.est-disenar{margin-top:12px;width:100%;padding:13px;border:none;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.01em;cursor:pointer;box-shadow:0 8px 20px rgba(var(--accent-rgb),.35);transition:transform .15s,box-shadow .15s,filter .15s}
.est-disenar:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(var(--accent-rgb),.45);filter:brightness(1.06)}
/* Botón "¿No sabes qué técnica?" (consulta con diseño) */
/* Consulta: botón DESTACADO, distinto al resto (píldora oscura, no ocupa todo el ancho) */
.est-consulta-wrap{margin-top:14px;display:flex;justify-content:center}
.est-consulta{display:inline-flex;align-items:center;gap:11px;text-align:left;padding:9px 18px 9px 10px;border:none;border-radius:999px;background:linear-gradient(115deg,#1b1813,#3a3428 85%);color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(27,24,19,.28);transition:transform .15s,box-shadow .15s}
.est-consulta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(27,24,19,.36)}
.est-consulta .ec-icon{flex:0 0 32px;height:32px;border-radius:50%;background:#E8B923;color:#1b1813;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(232,185,35,.25)}
.est-consulta .ec-txt{display:flex;flex-direction:column;line-height:1.25}
.est-consulta .ec-txt b{color:#fff;font-size:12.5px}
.est-consulta .ec-txt small{color:rgba(255,255,255,.75);font-size:10.5px;font-weight:500}
/* Modal de consulta */
.consulta-campos{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.consulta-campos label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.consulta-campos textarea{resize:vertical;font-family:inherit}
.consulta-error{margin-top:10px;font-size:12px;color:#c0392b;background:#fdece9;border-radius:9px;padding:8px 11px}
.consulta-ok-icon{width:58px;height:58px;margin:14px auto 10px;border-radius:50%;background:var(--accent);color:#fff;font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center}
.consulta-ok-t{font-family:var(--font-display);font-weight:560;font-size:21px;text-align:center;margin-bottom:6px}
#consultaOk .modal-sub{text-align:center}
.consulta-ok-links{display:flex;flex-direction:column;gap:9px;margin:14px 0 4px}
.consulta-wa,.consulta-mail{display:block;text-align:center;padding:12px;border-radius:11px;font-weight:700;font-size:13.5px;text-decoration:none}
.consulta-wa{background:#25D366;color:#fff}
.consulta-wa:hover{filter:brightness(1.06)}
.consulta-mail{border:1.5px solid var(--ink);color:var(--ink)}
.consulta-mail:hover{background:var(--ink);color:var(--bg)}
/* ── Resumen de estampaciones ── */
.est-resumen{margin-top:14px;border:var(--line-soft);border-radius:12px;padding:10px 12px;background:var(--paper)}
.est-res-title{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.est-res-line{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;font-size:12px;padding:4px 0}
.erl-z{font-weight:700}
.erl-d{color:var(--muted);font-size:11px}
.erl-p{font-weight:700;color:var(--accent)}
.erl-rm{color:var(--muted);font-size:12px;cursor:pointer;padding:0 2px}
.erl-rm:hover{color:#c0392b}
/* Técnica sin precio automático (bordado, grabado…): se destaca para que el cliente
   lo vea antes de añadir al carrito. */
.est-res-line.est-res-manual{background:#FDF6E3;border-radius:8px;padding:5px 8px;margin:2px -4px}
.est-res-line.est-res-manual .erl-p{color:#b5701a}
.est-res-aviso{font-size:11.5px;font-weight:600;color:#b5701a;background:#FDF6E3;border:1px solid #E8B923;border-radius:10px;padding:8px 11px;margin-top:8px;line-height:1.45}
.est-aviso-consultar{font-size:12px;color:#7a4d12;background:#FDF6E3;border:1px solid #E8B923;border-radius:10px;padding:9px 12px;line-height:1.5}
.est-aviso-consultar b{color:#1b1813}
.est-sups-btn{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border:var(--line-soft);border-radius:12px;background:var(--paper);cursor:pointer;font-weight:600;font-size:13px;color:var(--ink);transition:border-color .15s,background .15s}
.est-sups-btn:hover{border-color:var(--accent);background:var(--accent-tint)}
.est-sups-btn .sb-add{color:var(--accent);font-weight:700;font-size:16px}
.sups-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;margin-left:4px}
.est-cambiotinta{margin-top:8px}
.sups{margin-top:8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.sup{display:flex;align-items:center;gap:10px;padding:8px 11px;border:var(--line-soft);border-radius:var(--radius);background:var(--paper);font-size:12.5px;font-weight:600}
.sup input{width:16px;height:16px;accent-color:var(--accent)}
.sup .sp{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
/* ── Modal diseñador ── */
/* ═══════════ Diseñador premium (frame 3) ═══════════ */
/* z-index por encima de la cabecera compartida del sitio (.header = 1000): el modal
   del diseñador es una tarea a pantalla completa y no debe quedar tapado por la nav. */
.est2{position:fixed;inset:0;z-index:2000;background:rgba(20,18,14,.55);display:flex;align-items:center;justify-content:center;padding:2.5vh 2vw;animation:lbfade .2s ease}
.est2[hidden]{display:none}
.est2-shell{width:min(1240px,96vw);height:min(94vh,900px);background:var(--bg);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.42);display:flex;flex-direction:column;overflow:hidden;border:var(--line)}
.est2-top{display:flex;align-items:center;gap:16px;padding:13px 20px;border-bottom:var(--line-soft);background:var(--paper)}
.est2-kicker{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.est2-titlewrap h3{font-family:var(--font-display);font-weight:560;font-size:19px;line-height:1.1}
.est2-zonas{display:flex;gap:6px;flex:1;flex-wrap:wrap;justify-content:center}
.est2-ztab{padding:7px 13px;border-radius:999px;border:var(--line-soft);background:var(--bg);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;position:relative}
.est2-ztab:hover{border-color:var(--accent);color:var(--ink)}
.est2-ztab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.est2-ztab.done::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--paper)}
/* pestaña de área CILINDRO 360° destacada también en el diseñador */
.est2-ztab.cil:not(.on){border:1.5px dashed var(--accent);color:var(--accent);background:linear-gradient(120deg,var(--paper) 30%,var(--accent-tint))}
.est2-ztab.cil.on{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
/* "+ Añadir nueva zona" DENTRO del diseñador. Existe solo por debajo de 960,
   que es donde el frame 3 esconde su tarjeta: ahí esta es la única vía. Va al
   final de la fila (que ya scrollea en horizontal), así que no roba alto —que
   era justo el motivo de quitar la tarjeta— ni empuja a las zonas de verdad. */
.est2-zadd,.est2-zask{display:none}
@media (max-width:960px){
  .est2-zadd{display:inline-block;border-style:dashed;border-color:var(--accent);color:var(--accent);font-weight:700}
  .est2-zadd.on{background:var(--accent);border-style:solid;color:#fff}
  /* La pregunta no es un botón: no debe parecerlo ni poder pulsarse. */
  .est2-zask{display:inline-flex;align-items:center;flex:0 0 auto;padding:0 4px;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
  .est2-zbase{border-color:var(--accent);color:var(--accent)}
}
.est2-topright{display:flex;align-items:center;gap:12px}
.est2-prenda{position:relative}
.est2-prenda-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border:var(--line-soft);border-radius:10px;background:var(--bg);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.est2-prenda-btn:hover{border-color:var(--accent)}
.est2-prenda-dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.est2-prenda-pop{position:absolute;z-index:5;top:calc(100% + 8px);right:0;width:min(300px,80vw);max-height:44vh;overflow-y:auto;background:var(--paper);border:var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:8px}
.est2-prenda-pop[hidden]{display:none}
.est2-close{width:36px;height:36px;border-radius:10px;font-size:16px;color:var(--muted);background:var(--bg);border:var(--line-soft);cursor:pointer}
.est2-close:hover{background:#f0ece3;color:var(--ink)}
.est2-body{flex:1;display:grid;grid-template-columns:290px 1fr auto;min-height:0}
.est2-tools{border-right:var(--line-soft);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background:var(--paper)}
/* Columna derecha: avisos y consejos (así la izquierda no necesita scroll) */
/* Ayudas del canvas: antes ocupaban toda una columna; ahora un icono ⓘ que
   despliega un popover (clic, o hover en escritorio). Libera espacio para el lienzo. */
.est2-help{position:relative;border-left:var(--line-soft);background:var(--paper);padding:12px 10px;display:flex;flex-direction:column;align-items:center}
.est2-help-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--accent);background:var(--accent-tint);color:var(--accent);font-size:19px;font-weight:800;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;flex:none}
.est2-help-btn:hover{background:var(--accent);color:#fff}
.est2-help-btn.alerta{border-color:#E8B923;background:#FDF6E3;color:#8a6d12;animation:helpPulse 1.6s ease-in-out infinite}
@keyframes helpPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,185,35,.55)}50%{box-shadow:0 0 0 8px rgba(232,185,35,0)}}
.est2-help-pop{position:absolute;top:56px;right:8px;width:min(300px,78vw);max-height:72vh;overflow-y:auto;background:var(--paper);border:var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:12px;z-index:6}
.est2-help-pop[hidden]{display:none}
@media (pointer:fine){.est2-help:hover .est2-help-pop{display:flex}}
.est2-nota{display:flex;gap:9px;align-items:flex-start;background:var(--accent-tint);border:1.5px solid var(--accent);border-radius:12px;padding:11px 12px}
.est2-nota-ico{font-size:16px;line-height:1;flex:none;margin-top:1px}
.est2-nota p{font-size:12px;line-height:1.45;color:var(--ink);font-weight:500}
.est2-stepper{display:flex;align-items:center;gap:10px}
.est2-colval{min-width:34px;text-align:center;font-weight:800;font-size:16px}
.est2-foot-precio{font-size:12.5px;color:var(--muted);white-space:nowrap}
.est2-foot-precio b{color:var(--ink);font-size:14px}
.est2-add{display:flex;flex-direction:column;gap:9px}
.est2-add-row{display:flex;gap:8px}
.est2-add-row .est2-secondary{flex:1;padding:11px 8px;font-size:12.5px}
.est2-tamnote{font-size:11px;color:var(--muted);line-height:1.4}
.est2-primary,.est2-secondary{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;transition:filter .15s,border-color .15s,color .15s}
.est2-primary{background:var(--accent);color:#fff;border:none;box-shadow:0 6px 16px rgba(var(--accent-rgb),.3)}
.est2-primary:hover{filter:brightness(1.07)}
.est2-primary span,.est2-secondary span{font-weight:800}
.est2-secondary{background:var(--bg);color:var(--ink);border:1.5px solid var(--ink-soft)}
.est2-secondary:hover{border-color:var(--accent);color:var(--accent)}
.est2-obj{display:flex;flex-direction:column;gap:16px}
.est2-obj[data-tipo=""]{display:none}
.est2-obj[data-tipo="imagen"] .est2-txt{display:none}
.est2-obj[data-tipo="texto"] .est2-img{display:none}
.est2-selhint{font-size:12px;color:var(--muted);line-height:1.55;background:var(--bg);border:var(--line-soft);border-radius:12px;padding:13px;display:none}
.est2-obj[data-tipo=""] ~ .est2-selhint{display:block}
/* ══════════ CHECKOUT ══════════ */
.ck{position:fixed;inset:0;z-index:70;background:var(--bg);overflow-y:auto}
/* Cabecera del sitio en el checkout: logo a la izquierda + navegación real */
.ck-topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:clamp(14px,2.5vw,34px);height:clamp(52px,7vh,64px);padding:0 clamp(18px,3vw,40px);background:linear-gradient(180deg,#fdfbf6,#f5efe4);border-bottom:var(--line-soft);box-shadow:0 2px 10px rgba(27,24,19,.05)}
.ck-topbar-brand{display:flex;align-items:center;flex:none;cursor:pointer;padding:0;border:none;background:none}
.ck-logo{height:clamp(30px,3.6vh,40px);width:auto}
.ck-nav{flex:1;justify-content:flex-start}
.ck-topbar .sb-right{flex:none}
.ck-volver{font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;padding:0;margin-bottom:10px;transition:color .15s;display:inline-block}
.ck-volver:hover{color:var(--accent)}

.ck-shell{display:grid;grid-template-columns:1.15fr 1fr;gap:0;max-width:1320px;margin:0 auto;align-items:start}
.ck-left{padding:clamp(20px,3vh,34px) clamp(20px,2.6vw,38px)}
.ck-right{padding:clamp(20px,3vh,34px) clamp(20px,2.6vw,38px);background:var(--paper);border-left:var(--line-soft);min-height:calc(100dvh - 64px)}
.ck-title{font-family:var(--font-display);font-weight:560;font-size:clamp(24px,2.6vw,30px);margin-bottom:18px;letter-spacing:-.01em}
.ck-h3{font-family:var(--font-display);font-weight:560;font-size:19px;margin:22px 0 12px;display:flex;align-items:center;gap:9px}
.ck-h3::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--accent)}
.ck-right>div>.ck-h3:first-child{margin-top:0}

.ck-line{background:var(--paper);border:var(--line-soft);border-radius:var(--radius);padding:16px 17px;margin-bottom:14px;box-shadow:var(--shadow-sm);transition:box-shadow .15s}
.ck-line:hover{box-shadow:0 8px 20px rgba(27,24,19,.1)}
.ck-line-top{display:flex;align-items:center;gap:12px;padding-bottom:11px;border-bottom:var(--line-soft)}
/* Miniatura del producto con la MAQUETA del primer diseño superpuesta (y "+N" si
   hay más). Sustituye a la fila de miniaturas: la línea del pedido ocupa la mitad. */
.ck-prodthumb{position:relative;width:62px;height:62px;border:var(--line-soft);border-radius:11px;flex:none;background:#fff;padding:0;overflow:hidden;display:block}
.ck-prodthumb.condis{cursor:pointer;transition:border-color .15s,transform .15s}
.ck-prodthumb.condis:hover{border-color:var(--accent);transform:translateY(-1px)}
.ckpt-prod{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ckpt-dis{position:absolute;right:2px;bottom:2px;width:30px;height:30px;object-fit:contain;background:#fff;border:1.5px solid var(--ink-soft);border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.16)}
.ckpt-n{position:absolute;left:3px;top:3px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:8px}
.ck-line-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.ck-line-top .nm{font-weight:800;font-size:14.5px}
.ck-line-top .meta{font-size:12px;color:var(--muted)}
.ck-line-top .tot{margin-left:auto;font-weight:800;font-size:15px;color:var(--accent);white-space:nowrap}
.ck-line-top .rm{color:#c0392b;font-weight:700;cursor:pointer;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ck-line-top .rm:hover{background:#fbe4e0}
.ck-pack{font-size:11.5px;color:var(--muted);margin-top:10px;background:var(--bg);border-radius:9px;padding:8px 10px;line-height:1.5}
.ck-pack b{color:var(--ink)}
.ck-pack.con-suelto{background:#fff6ea;border:1px solid #f2c68a}
.ck-pack-rec{display:inline-block;color:#8a4b00;font-weight:600}
.ck-pack-rec b{color:#8a4b00}
/* Desglose del total (envío/IVA): legible, no diminuto */
.ck-desg-envio{font-size:13px;line-height:1.55;color:var(--ink);margin-top:8px;background:var(--bg);border:var(--line-soft);border-radius:9px;padding:8px 11px}
.ck-desg-envio b{color:var(--ink);font-weight:800}
.ck-iva{color:var(--muted);font-weight:700}
/* Nota de packs dentro del modal de tallas */
.ckvar-pack{font-size:12.5px;color:var(--muted);background:#fff6ea;border:1px solid #f2c68a;border-radius:10px;padding:9px 12px;line-height:1.5;margin-top:12px}
.ckvar-pack b{color:#8a4b00}
/* ── Modal de color + tallas (checkout) ── */
.modal-card.ckvar-card{max-width:760px;width:min(760px,94vw)}
/* Sin scroll: las casillas se encogen para que quepan todos los colores a la vista
   (con muchos colores caben más por fila en vez de aparecer una barra). */
.ckvar-colores{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;margin-top:8px;padding:2px}
.ckvar-color{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 3px 5px;border:1.5px solid transparent;border-radius:12px;cursor:pointer;background:var(--bg);transition:border-color .15s,background .15s}
/* Contador de unidades asignadas a ese color (se ve el reparto de un vistazo). */
.ckvar-color.conuds{border-color:var(--accent);background:var(--accent-tint)}
.ckvar-n{position:absolute;top:4px;right:5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}
/* ★ = este color se estampa desde 1 unidad. Va arriba a la IZQUIERDA para no
   pelearse con el contador de unidades, que ocupa la derecha. */
.ckvar-corta{position:absolute;top:2px;left:4px;font-size:12px;line-height:1;color:#E8B923;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}
.ckvar-nota-corta{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--accent);background:var(--accent-tint);border:1px solid rgba(var(--accent-rgb),.22);border-radius:10px;padding:8px 11px}
.ckvar-color:hover{border-color:var(--ink-soft)}
.ckvar-color.on{border-color:var(--accent);background:var(--accent-tint);box-shadow:0 3px 10px rgba(var(--accent-rgb),.18)}
.ckvar-sw{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(0,0,0,.12);flex:none}
.ckvar-color.on .ckvar-sw{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.3)}
.ckvar-cn{font-size:9px;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ckvar-color.on .ckvar-cn{color:var(--accent)}
.ckvar-tallas{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:9px;margin-top:8px}
/* Tarjeta de talla: el recargo va en un BADGE flotante (no desplaza el contenido) */
.ck-talla{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid var(--ink-soft);border-radius:12px;padding:10px 6px 7px;background:var(--bg);transition:border-color .15s,background .15s;min-width:0}
.ck-talla.lleno{border-color:var(--accent);background:var(--accent-tint)}
.ck-talla.off{opacity:.55}
.rec-badge{position:absolute;top:-8px;right:-6px;background:#E8B923;color:#1b1813;font-size:9px;font-weight:800;padding:2px 7px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:1}
.ck-talla .tn{font-size:12px;font-weight:800}
.ck-talla input{width:100%;max-width:56px;text-align:center;font:inherit;font-weight:800;font-size:14px;padding:6px 4px;border:var(--line-soft);border-radius:8px;background:var(--paper)}
.ck-talla input:focus{outline:none;border-color:var(--accent)}
.ck-talla .st{font-size:9.5px;color:var(--muted);min-height:12px}
.ck-talla .st.out{color:#c0392b;font-weight:700}
/* Tallas con unidades fuera de pack: se resaltan y avisan del +20%. */
.ck-talla.consuelto{border-color:#E8931F;background:#fff6ea}
.suelto-badge{font-size:9px;font-weight:800;color:#8a4b00;background:#ffe3bf;border-radius:999px;padding:2px 6px;line-height:1.3;white-space:nowrap}
/* Línea de recargo destacada bajo el reparto de tallas. */
.ckvar-recargo{display:block;margin-top:6px;font-size:12px;color:var(--ink)}
.ckvar-recargo.suelto{color:#8a4b00;background:#fff6ea;border:1px solid #f2c68a;border-radius:8px;padding:5px 9px;font-weight:600}
.ckvar-recargo b{font-weight:800}
/* ── Modal detalle de diseño ── */
/* OJO: `.modal-card` se declara MÁS ABAJO con width:min(420px,100%) y, a igual
   especificidad, ganaba: el modal salía estrecho y la ficha del diseño quedaba
   aplastada en una columna. Se sube la especificidad para que mande este ancho. */
.modal-card.ckdis-card{max-width:660px;width:min(660px,94vw)}
.ckdis-body{display:flex;gap:18px;margin-top:12px;align-items:flex-start}
#ckDisImg{width:min(300px,45vw);aspect-ratio:1;object-fit:contain;background:#fff;border:var(--line-soft);border-radius:14px;box-shadow:var(--shadow-sm);flex:none}
.ckdis-meta{flex:1;min-width:0}
/* Etiqueta a la izquierda sin partirse y valor a la derecha. */
.ckdis-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:7px 0;border-bottom:var(--line-soft)}
.ckdis-row span{color:var(--muted);flex:0 0 auto;white-space:nowrap}
.ckdis-row b{text-align:right;min-width:0;word-break:break-word}
@media(max-width:640px){.ckdis-body{flex-direction:column;align-items:center}}
.ck-resto{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.ck-resto.bad{color:#c0392b}
.ck-resto.ok{color:var(--accent)}
/* Diseños de la línea: miniaturas SIEMPRE visibles y clicables (abre el detalle) */
.ck-disenos{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
.ck-disenos .dz{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--muted);cursor:pointer;border:none;background:none;padding:0;transition:transform .15s}
.ck-disenos .dz:hover{transform:translateY(-2px);color:var(--accent)}
.ck-disenos img{width:76px;height:76px;object-fit:contain;background:#fff;border:1.5px solid var(--ink-soft);border-radius:12px;box-shadow:var(--shadow-sm);transition:border-color .15s}
.ck-disenos .dz:hover img{border-color:var(--accent)}
.ck-dishint{font-size:10.5px;color:var(--muted);font-style:italic;line-height:1.4}
/* Tira de zonas dentro del modal de diseño: se ven todas las maquetas del pedido. */
.ckdis-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ckdis-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;border:1.5px solid transparent;border-radius:10px;background:var(--bg);cursor:pointer;font-size:9.5px;font-weight:700;color:var(--muted)}
.ckdis-tab img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:7px}
.ckdis-tab.on{border-color:var(--accent);color:var(--accent)}
.ckdis-tab:hover{border-color:var(--accent)}
/* Precio por unidad en el chip de tamaño del diseñador. */
.est2-fchip .fchip-eur{display:block;font-size:10px;color:var(--accent);margin-top:1px}
.est2-fchip.on .fchip-eur{color:#fff}
/* Resumen de color+tallas elegidos + botón de cambiar */
/* Resumen del reparto: una fila por color (el pedido admite varios). */
.ck-varsum{display:flex;flex-direction:column;gap:7px;margin-top:12px;background:var(--bg);border-radius:11px;padding:9px 12px;font-size:12.5px}
.ck-varcol{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ck-varcoln{font-size:11.5px;color:var(--muted);font-weight:600;margin-left:2px}
.ck-varpie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;border-top:var(--line-soft);padding-top:7px;margin-top:1px}
.ck-varsum.cargando{color:var(--muted)}
.ck-varcolor{display:inline-flex;align-items:center;gap:7px;font-weight:800}
.ck-sw{width:20px;height:20px;border-radius:50%;display:inline-block;border:1.5px solid rgba(0,0,0,.12);flex:none}
.ck-tchip{background:var(--paper);border:var(--line-soft);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600}
.ck-tchip b{color:var(--accent)}
.ck-tchip.vacio{color:var(--muted);font-style:italic}
.ck-varbtn{margin-left:auto;font-size:12px;font-weight:800;color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:6px 14px;cursor:pointer;background:var(--paper);transition:background .15s,color .15s}
.ck-varbtn:hover{background:var(--accent);color:#fff}
.ck-varbtn.atencion{display:flex;width:100%;justify-content:center;margin:12px 0 0;padding:12px;font-size:13.5px;background:var(--accent);color:#fff;border:none;border-radius:12px;box-shadow:0 6px 16px rgba(var(--accent-rgb),.3)}
.ck-varbtn.atencion:hover{filter:brightness(1.07)}
.ck-varhint{font-size:12px;color:var(--muted)}

.ck-obs-l{display:block;font-size:12.5px;font-weight:700;margin:18px 0 0}
.ck-obs-l textarea{margin-top:7px;width:100%;resize:vertical}
.ck-total-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:22px;padding-top:18px;border-top:2px solid var(--ink)}
.ck-total-desc{font-size:11.5px;color:var(--muted);line-height:1.5;max-width:280px}
.ck-total{font-size:14px;font-weight:600;text-align:right;white-space:nowrap}
.ck-total b{font-family:var(--font-display);font-size:28px;margin-left:9px;color:var(--accent)}

.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:12px}
.ck-grid label{font-size:11.5px;font-weight:700;display:flex;flex-direction:column;gap:5px;color:var(--muted)}
.ck-check{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;margin:12px 0}
/* Aviso previo compacto (desplegable) + consentimientos */
.ck-aviso-det{margin:10px 0 6px;border:var(--line-soft);border-radius:10px;background:var(--bg);padding:0 12px}
.ck-aviso-det summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--ink);padding:9px 0;list-style:none;display:flex;gap:7px;align-items:center}
.ck-aviso-det summary::-webkit-details-marker{display:none}
.ck-aviso-det summary::before{content:"▸";color:var(--accent);font-weight:800;transition:transform .15s}
.ck-aviso-det[open] summary::before{transform:rotate(90deg)}
.ck-aviso-det ul{margin:0 0 11px;padding-left:16px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.5;color:var(--muted)}
.ck-aviso-det b{color:var(--ink)}
.ck-terminos{margin:6px 0 2px}
.ck-terminos .ck-aviso-det{margin:0 0 12px}
.ck-terminos .ck-check{margin:7px 0}
.ck-terminos .ck-check input{width:16px;height:16px;flex:none}
.ck-terms-links{margin:8px 0 2px;font-size:11.5px;color:var(--muted);line-height:1.5}
.ck-terms-links a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.ck-terms-links a:hover{text-decoration:underline}
.ck-terms-req input{outline:2px solid #e06b6b;outline-offset:2px;border-radius:3px}
.ck-intl{margin:8px 0 12px;font-size:12.5px;background:#FDF6E3;border:1px solid #E8B923;border-radius:9px;padding:10px 12px;color:#7a5a00;line-height:1.5}
.ck-intl a{color:#7a5a00;font-weight:700}
.ck-pagos{display:flex;flex-direction:column;gap:9px}
.ck-pago{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--ink-soft);border-radius:13px;padding:13px 15px;cursor:pointer;background:var(--bg);transition:border-color .15s,background .15s}
.ck-pago:hover{border-color:var(--accent)}
.ck-pago:has(input:checked){border-color:var(--accent);background:var(--accent-tint);box-shadow:0 4px 14px rgba(var(--accent-rgb),.15)}
.ck-pago input{margin-top:3px;accent-color:var(--accent)}
.ck-pago span{display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.ck-pago small{font-size:11.5px;color:var(--muted);line-height:1.45}
/* Selector de tarjetas guardadas (aparece al elegir "tarjeta") */
.ck-tarjetas{margin-top:11px;padding:12px 13px;border:1.5px dashed var(--ink-soft);border-radius:13px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.ck-tarj-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ck-tarj-info{font-size:12.5px;color:var(--muted);line-height:1.5;display:flex;gap:8px;align-items:baseline}
.ck-tarj{display:flex;gap:10px;align-items:center;border:1.5px solid var(--ink-soft);border-radius:11px;padding:10px 13px;cursor:pointer;background:var(--card,#fff);transition:border-color .15s,background .15s}
.ck-tarj:hover{border-color:var(--accent)}
.ck-tarj:has(input:checked){border-color:var(--accent);background:var(--accent-tint);box-shadow:0 3px 12px rgba(var(--accent-rgb),.13)}
.ck-tarj input{accent-color:var(--accent)}
.ck-tarj span{font-size:13.5px;display:flex;align-items:center;gap:8px}
.ck-tarj i.fab{font-size:20px}
.ck-confirmar{width:100%;margin-top:20px;padding:15px;font-size:14.5px;box-shadow:0 8px 22px rgba(var(--accent-rgb),.3)}
.ck-pagoinfo{background:var(--bg);border:var(--line-soft);border-radius:12px;padding:14px;font-size:12.5px;line-height:1.6;margin:14px 0}
#ckOk{max-width:420px;margin:0 auto;text-align:center;padding-top:20px}
/* Wizard de checkout (barra de pasos + total compacto): solo se ven en móvil. */
.ck-mobnav{display:none}
.ck-mobnav[hidden]{display:none!important} /* pedido confirmado → oculta la barra aun en móvil */
.ck-total-mini{display:none}
.ck-mobnav-btn{display:flex;align-items:center;gap:6px;border:none;background:none;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer;padding:10px 6px}
.ck-mobnav-btn.next{color:#fff;background:var(--accent);padding:11px 18px;border-radius:11px;box-shadow:0 6px 16px rgba(var(--accent-rgb),.3)}
.ck-mobnav-btn[hidden]{display:none}
.ck-mobnav-dots{display:flex;gap:7px}
.ck-mobnav-dots .dot-i{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);transition:background .2s,transform .2s}
.ck-mobnav-dots .dot-i.on{background:var(--accent);transform:scale(1.25)}
.ck-total-mini{margin:16px 0 0;text-align:right;font-size:13px;color:var(--muted);font-weight:700}
.ck-total-mini b{font-family:var(--font-display);font-weight:560;font-size:20px;color:var(--ink);margin-left:6px}
.ck-total-mini small{font-size:11px;font-weight:600}
@media(max-width:960px){
  /* Checkout = wizard horizontal de 2 pasos: "Tu pedido" ⇄ "Datos y pago",
     igual patrón que los frames del configurador. Cada paso ocupa 100vw y
     scrollea por dentro; la barra inferior navega entre pasos. */
  .ck{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  .ck-topbar{flex:none}
  /* El menú del sitio no cabe en un móvil: se cortaba a media palabra y
     "Blog / Contacto / Mi cuenta" quedaba fuera de pantalla, sin poder llegar.
     En el checkout no hace falta navegar a ningún sitio: queda el logo (que
     vuelve a la tienda) y la barra inferior de pasos. */
  .ck-topbar .ck-nav,
  .ck-topbar .sb-right{display:none}
  /* Sin el menú, la barra se queda con el logo: se compacta para no gastar
     altura, que en un móvil es lo que falta. */
  .ck-topbar{height:46px;padding:0 14px}
  .ck-logo{height:26px}
  .ck-shell{display:flex;flex:1 1 auto;width:200vw;min-height:0;max-width:none;margin:0;gap:0;align-items:stretch;transform:translateX(0);transition:transform .3s ease}
  .ck-left,.ck-right{flex:0 0 100vw;width:100vw;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;border:none;padding:16px 16px 24px}
  .ck-mobnav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;height:60px;padding:0 14px;background:linear-gradient(180deg,#fdfbf6,#f5efe4);border-top:var(--line-soft);box-shadow:0 -3px 12px rgba(27,24,19,.06)}
  .ck-total-mini{display:block}
  .ck-topbar-t{display:none}
}
@media(max-width:520px){
  .ck-left,.ck-right{padding-left:14px;padding-right:14px}
  .ck-line{padding:13px}
  .ck-talla{min-width:0;padding:6px 4px}
  .ck-talla input{width:100%}
  .ck-grid{grid-template-columns:1fr}
  .ck-total-row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Aviso de maqueta DESTACADO: nos cubre si el posicionado no casa con el producto */
.est2-maqueta{display:flex;gap:10px;align-items:flex-start;background:#FDF6E3;border:1.5px solid #E8B923;border-left:5px solid #E8B923;border-radius:12px;padding:11px 12px;box-shadow:0 4px 14px rgba(232,185,35,.18)}
.est2-maqueta-ico{font-size:18px;line-height:1;flex:none;margin-top:1px}
.est2-maqueta p{font-size:12px;line-height:1.45;color:#5b4a12}
.est2-maqueta b{color:#1b1813}
.est2-tips{background:var(--bg);border:var(--line-soft);border-radius:12px;padding:12px 13px}
.est2-tips-t{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.est2-tips ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.est2-tips li{font-size:11.5px;line-height:1.4;color:var(--muted);padding-left:17px;position:relative}
.est2-tips li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.est2-tips b{color:var(--ink)}
.est2-disclaimer{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:min(580px,90%);background:#fdf3e7;border:1px solid #f0d9b8;border-radius:12px;padding:12px 15px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;z-index:2}
.est2-disclaimer[hidden]{display:none}
.est2-disc-txt{font-size:12.5px;line-height:1.45;color:#8a4a12}
.est2-disc-txt b{color:#6d3a0e}
.est2-disc-sizes{display:flex;flex-wrap:wrap;gap:7px}
.est2-disc-size{padding:7px 12px;border-radius:9px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;cursor:pointer;border:none}
.est2-disc-size.down{background:#c9821f}
.est2-disc-size:hover{filter:brightness(1.08)}
.est2-disc-none{font-size:11.5px;color:#8a4a12;font-weight:600}
.est2-sec{display:flex;flex-direction:column;gap:9px;padding-bottom:15px;border-bottom:var(--line-soft)}
.est2-sec:last-child{border-bottom:none;padding-bottom:0}
.est2-sec-t{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.est2-slider{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted);font-weight:600}
.est2-slider input[type=range]{accent-color:var(--accent);width:100%}
.est2-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--muted)}
/* Campo de tamaño manual del diseño (ancho × alto en cm). */
.est2-tamdis{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.est2-tamdis-lbl{font-size:11.5px;font-weight:600;color:var(--muted)}
.est2-tamdis-row{display:flex;align-items:center;gap:7px}
.est2-tamdis-x{color:var(--muted);font-weight:700}
.est2-numin{width:100%;min-width:0;padding:8px 9px;border:var(--line-soft);border-radius:8px;font:inherit;font-size:13px;font-weight:600;background:var(--bg);text-align:center}
.est2-numin:focus{outline:none;border-color:var(--accent)}
.est2-tamdis-note{font-size:11px;line-height:1.35;color:#8a6d1a;background:#fdf6e3;border:1px solid #f0e2b6;border-radius:8px;padding:6px 8px;margin:0}
.est2-row input[type=color]{width:44px;height:28px;border:1px solid var(--line-soft);border-radius:6px;background:none;cursor:pointer;padding:2px}
.est2-check{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;cursor:pointer}
.est2-check input{width:16px;height:16px;accent-color:var(--accent)}
.est2-input{padding:10px 11px;border:var(--line-soft);border-radius:9px;font:inherit;font-size:13px;background:var(--bg)}
.est2-chips{display:flex;gap:6px;flex-wrap:wrap}
.est2-obtn{flex:1;min-width:0;padding:8px 6px;border:var(--line-soft);border-radius:9px;background:var(--bg);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.est2-obtn:hover{border-color:var(--accent);background:var(--accent-tint)}
.est2-obtn.danger:hover{border-color:#c0392b;background:#fdece9;color:#c0392b}
.est2-fchip{flex:1;padding:9px;border:var(--line-soft);border-radius:9px;background:var(--bg);font-size:12px;font-weight:600;cursor:pointer}
.est2-fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* Chip de tamaño RECOMENDADO (parpadea): verde = sube de tamaño, ámbar = baja (más barato). */
.est2-fchip.suggest{border-color:var(--accent);animation:fchipPulse 1.15s ease-in-out infinite}
.est2-fchip.suggest.down{border-color:#c9821f;animation-name:fchipPulseDown}
@keyframes fchipPulse{0%,100%{box-shadow:0 0 0 0 rgba(44,122,78,.45)}50%{box-shadow:0 0 0 6px rgba(44,122,78,0)}}
@keyframes fchipPulseDown{0%,100%{box-shadow:0 0 0 0 rgba(201,130,31,.45)}50%{box-shadow:0 0 0 6px rgba(201,130,31,0)}}
.est2-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:20px;min-width:0;background:radial-gradient(circle at 50% 38%,#fbfaf6,#efe9df)}
.est2-canvas-wrap{position:relative;width:min(68vh,52vw,660px);height:min(68vh,52vw,660px);flex:0 0 auto}
.est2-canvas-wrap canvas{border-radius:12px}
/* Etiqueta de tamaño real del diseño, siempre visible sobre el lienzo. */
.est2-sizetag{position:absolute;top:10px;right:10px;z-index:5;pointer-events:none;font-size:12px;font-weight:700;line-height:1.25;color:#1b1813;background:rgba(255,255,255,.92);border:1px solid #e6ded2;border-radius:9px;padding:5px 9px;box-shadow:var(--shadow-sm);text-align:right;max-width:60%}
.est2-sizetag small{display:block;font-weight:600;font-size:11px;color:#7a7268}
.est2-sizetag .st-bad{color:#c0561a}
.est2 .est-aviso{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);max-width:80%;font-size:12px;line-height:1.4;color:#a6541b;background:#fdf3e7;border:1px solid #f0d9b8;border-radius:10px;padding:9px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.est2-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;border-top:var(--line-soft);background:var(--paper)}
.est2-foot-info{font-size:12.5px;color:var(--muted);font-weight:600}
.est2-foot-info b{color:var(--ink)}
.est2-foot-info .bad{color:#c0392b;font-weight:700}
.est2-foot-actions{display:flex;gap:10px}
.est2-foot-actions .btn-ghost,.est2-foot-actions .btn-accent{flex:0 0 auto;min-width:130px}
/* Diseñador en móvil: pantalla completa, compacto y SIN scroll, con el lienzo bien visible. */
@media (max-width:820px){
  .est2{padding:0}
  .est2-shell{width:100vw;height:100dvh;border-radius:0}
  /* Cabecera compacta: título en 1 línea + color de prenda como PUNTO (sin texto) + X. */
  .est2-top{flex-wrap:wrap;gap:8px;padding:9px 12px}
  .est2-kicker{display:none}
  .est2-titlewrap h3{font-size:15.5px}
  /* En móvil, "zonas" salta a su propia fila, así que el cluster (prenda + X) ya no
     queda pegado a la derecha: lo forzamos con margin-left:auto para poder anclar
     el ⓘ justo a su izquierda. */
  .est2-topright{gap:8px;margin-left:auto}
  .est2-prenda-btn{font-size:0;gap:0;padding:7px}
  .est2-prenda-dot{width:17px;height:17px}
  .est2-close{width:32px;height:32px}
  /* Zonas: fila con scroll horizontal, chips compactos (nombres abreviados por JS). */
  .est2-zonas{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;gap:6px;scrollbar-width:none}
  .est2-zonas::-webkit-scrollbar{display:none}
  .est2-ztab{padding:6px 11px;font-size:12px;flex:0 0 auto}
  .est2-body{grid-template-columns:1fr;grid-template-rows:1fr auto auto}
  /* Lienzo arriba; disclaimer/aviso DEBAJO (ya no tapan el área de impresión). */
  .est2-stage{order:1;padding:10px;flex-direction:column;gap:8px}
  /* Lienzo más grande (usa el ancho), dejando hueco para el disclaimer debajo. */
  .est2-canvas-wrap{width:min(36vh,80vw);height:min(36vh,80vw);max-width:none;max-height:none}
  .est2 .est2-disclaimer,.est2 .est-aviso{position:static;transform:none;left:auto;right:auto;bottom:auto;width:100%;max-width:none}
  .est2-disclaimer{padding:8px 11px;gap:6px}
  .est2-disc-txt{font-size:11.5px;line-height:1.35}
  /* Herramientas compactas. */
  .est2-tools{border-right:none;border-top:var(--line-soft);order:2;max-height:36dvh;flex-direction:column;gap:9px;padding:10px 14px}
  .est2-sec{padding-bottom:9px;gap:7px}
  .est2-fchip{padding:7px 8px;font-size:11.5px}
  /* Tamaños de impresión: nombre en 1 línea (no se reajusta al cambiar el ancho por
     el aviso/scroll) → altura de botón ESTABLE con o sin diseño. */
  #est2TamChips .est2-fchip{text-align:center}
  #est2TamChips .fchip-nombre{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .est2-tamnote{display:none}
  /* En móvil se ocultan quitar-fondo y filtros (para compactar). */
  .est2-img{display:none}
  /* La ayuda (ⓘ) deja de ser una barra: botón flotante arriba a la derecha,
     junto a la X, sin la línea/fondo que ocupaba una fila entera. */
  .est2-shell{position:relative}
  .est2-help{position:absolute;top:8px;right:96px;z-index:12;border:none;background:none;padding:0;flex-direction:column;align-items:flex-end}
  .est2-help-btn{width:32px;height:32px;font-size:15px}
  /* El popover se ancla al viewport (no al botón) para no salirse por la izquierda. */
  .est2-help-pop{position:fixed;top:48px;right:10px;left:auto;bottom:auto;width:min(300px,88vw);max-height:72vh;z-index:20}
  /* Sin texto de ayuda duplicado ni tamaño desestructurado abajo: el tamaño ya se ve
     en la etiqueta sobre el lienzo. El pie queda solo con Cancelar / Aplicar. */
  .est2-selhint{display:none!important}
  .est2-foot-info{display:none}
  .est2-foot-precio{display:none}
  .est2-bottom{padding:9px 14px}
  .est2-foot-actions{flex:1;gap:8px}
  .est2-foot-actions .btn-ghost,.est2-foot-actions .btn-accent{flex:1;min-width:0;padding:11px}
}
.f3-bottom{padding-top:14px;display:flex;flex-direction:column}
.addbtn{padding:15px;font-family:var(--font-display);font-weight:560;font-size:16px;background:var(--accent);color:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(var(--accent-rgb),.32);transition:transform .12s,box-shadow .12s;cursor:pointer}
.addbtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.addbtn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 11px 28px rgba(var(--accent-rgb),.42)}
.addbtn:not(:disabled):active{transform:scale(.98)}
.addbtn.flash{animation:flash .5s}
@keyframes flash{0%{transform:scale(1)}35%{transform:scale(1.04)}100%{transform:scale(1)}}
/* Carrito FLOTANTE (abajo a la derecha, sobre toda la página) */
.cartbtn{position:fixed;right:18px;bottom:18px;z-index:96;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;background:var(--ink);color:var(--bg);border-radius:999px;cursor:pointer;transition:background .15s,transform .15s;box-shadow:0 14px 34px rgba(0,0,0,.32)}
.cartbtn:hover{background:#000;transform:translateY(-1px)}
.cticon{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:560;font-size:17px;white-space:nowrap}
.ctright{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.badge{min-width:24px;height:24px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;transition:transform .2s}
.badge.pop{transform:scale(1.4)}
.cartpanel{position:fixed;right:18px;bottom:76px;z-index:96;width:min(370px,92vw);background:transparent;border:1px solid transparent;border-radius:16px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 16px}
.cartpanel.open{background:var(--paper);max-height:56vh;padding:16px;overflow-y:auto;border:var(--line);box-shadow:var(--shadow)}
.cartlines{overflow-y:auto;max-height:24vh;display:flex;flex-direction:column;gap:6px}
.cline{display:flex;align-items:center;gap:9px;font-size:12px;padding:8px 10px;border:var(--line-soft);border-radius:11px;background:var(--paper)}
.cline .cthumb{width:34px;height:34px;object-fit:contain;background:#fff;border:var(--line-soft);border-radius:8px;flex:none;mix-blend-mode:multiply}
.cline .cn{font-weight:600}
.cline .cq{color:var(--muted)}
.cline .cp{margin-left:auto;font-weight:700;white-space:nowrap}
.cline .rm{color:var(--muted);font-size:14px;padding:0 2px;cursor:pointer}
.cline .rm:hover{color:var(--accent)}
.checkoutbtn{width:100%;margin-top:10px;padding:12px;background:transparent;color:var(--ink);border:1.5px solid var(--ink);font-weight:700;font-size:13.5px;border-radius:11px;cursor:pointer;transition:all .15s}
.checkoutbtn:hover{background:var(--ink);color:var(--bg)}
/* Guardar la cesta es SECUNDARIO frente a tramitar el pedido: mismo ancho para
   que no descoloque, pero sin relleno y con menos peso visual. */
.guardarcesta{width:100%;margin-top:8px;padding:10px;background:transparent;color:var(--muted);
  border:1px dashed var(--line-color,#d8d2c4);font-weight:600;font-size:12.5px;border-radius:11px;
  cursor:pointer;transition:color .15s,border-color .15s}
.guardarcesta:hover{color:var(--accent);border-color:var(--accent)}
.cesta-msg{margin-top:8px;font-size:12px;line-height:1.4;padding:8px 10px;border-radius:9px}
.cesta-msg.ok{background:var(--accent-tint);color:var(--accent)}
.cesta-msg.err{background:#fdeceb;color:#b3261e}
.cartempty{font-size:12px;color:var(--muted);padding:14px 4px;text-align:center}

/* WhatsApp flotante del configurador (abajo-izquierda) — par con el carrito (dcha) */
.wa-float{position:fixed;left:14px;bottom:13px;z-index:96;width:46px;height:46px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(var(--accent-rgb),.42);transition:transform .18s}
.wa-float svg{width:24px;height:24px}
.wa-float:hover{transform:scale(1.08)}
/* Reserva de espacio abajo en el frame 3 para que "Añadir al carrito" no lo tape el carrito flotante */
.f3-bottom{margin-bottom:72px}

/* ============ MODAL DE IMAGEN (lightbox) ============ */
/* Flex en fila: [‹] [medio] [›] → las flechas quedan PEGADAS a la imagen, no en los
   bordes de la ventana (con fotos verticales quedaban lejísimos del contenido). */
.lightbox{position:fixed;inset:0;z-index:1600;background:rgba(20,18,14,.86);display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,22px);padding:5vh 4vw;cursor:zoom-out;animation:lbfade .2s ease}
.lightbox[hidden]{display:none}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4);cursor:default}
/* Giro 360° ampliado: caja CUADRADA fija con fondo blanco. Todos los fotogramas
   comparten el mismo lienzo → la prenda gira contenida y quieta, sin reescalarse. */
.lightbox.lb-giro img{width:auto;height:min(86vh,86vw);aspect-ratio:1;max-width:92vw;object-fit:contain;background:#fff}
/* Vídeo de YouTube ampliado: 16:9 lo más grande que quepa en la ventana. */
.lightbox .lb-yt{width:min(92vw,1600px);aspect-ratio:16/9;max-height:88vh;border:0;border-radius:10px;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lb-close{position:fixed;top:18px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.lb-close:hover{background:rgba(255,255,255,.3)}
/* Flechas para recorrer el carrusel con la imagen ampliada. Van en el flujo (no
   fijas), así se sitúan junto al medio y siempre a media altura. */
.lb-nav{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;transition:background .15s;align-self:center}
.lb-nav:hover{background:rgba(255,255,255,.32)}
.lb-prev{order:1}
.lb-next{order:3}
/* El medio (imagen, vídeo o iframe) queda entre las dos flechas. */
.lightbox img,.lightbox video,.lightbox .lb-yt{order:2}
@media (max-width:700px){.lb-nav{width:40px;height:40px;font-size:23px}}

/* ============ MODAL GENÉRICO (tramos) ============ */
.modal{position:fixed;inset:0;z-index:100;background:rgba(20,18,14,.55);display:flex;align-items:center;justify-content:center;padding:5vh 5vw;animation:lbfade .2s ease}
.modal[hidden]{display:none}
.modal-card{background:var(--paper);border:var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28);width:min(420px,100%);max-height:86vh;overflow-y:auto;padding:20px 22px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-head h3{font-family:var(--font-display);font-weight:560;font-size:21px}
.modal-close{width:34px;height:34px;border-radius:50%;background:#efe8da;color:var(--ink);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.modal-close:hover{background:#e6ddcc}
.modal-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
/* El diseñador es un modal a z-index 2000 y los tramos son un ".modal"
   normal, a 100. Ahora que los tramos se consultan DESDE dentro del lienzo,
   con el z-index de serie se abrirían por detrás: se ve el fondo oscurecerse
   y nada más. */
#tramosModal{z-index:2100}
.tramos-list{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.tramo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border:var(--line-soft);border-radius:11px;background:var(--bg)}
.tramo.on{border-color:var(--accent);background:var(--accent-tint)}
.tramo .tr-q{font-weight:600;font-size:13px}
.tramo .tr-p{font-family:var(--font-display);font-weight:560;font-size:17px;color:var(--accent)}
.tramo .tr-p small{font-size:.6em;color:var(--muted);font-family:var(--font-body);font-weight:600}
.modal-foot{font-size:11px;color:var(--muted);margin-top:14px;line-height:1.5}
/* Filtro: chips (tejido, tallas) */
.filtro-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.filtro-chips .chip.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(var(--accent-rgb),.28)}
/* Filtro por color */
.filtro-colores{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:10px;margin-top:10px;max-height:34vh;overflow-y:auto;padding:4px}
.fc-sw{position:relative;aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.14);cursor:pointer;transition:transform .12s}
.fc-sw:hover{transform:scale(1.1)}
.fc-sw.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent);transform:scale(1.05)}
.fc-sw .fc-n{position:absolute;bottom:-4px;right:-4px;min-width:15px;height:15px;border-radius:999px;background:var(--ink);color:#fff;font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.btn-ghost{flex:1;padding:11px;border:1.5px solid var(--ink);border-radius:11px;background:transparent;color:var(--ink);font-weight:700;font-size:13px;cursor:pointer}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-accent{flex:2;padding:11px;border:none;border-radius:11px;background:var(--accent);color:#fff;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 6px 16px rgba(var(--accent-rgb),.3)}
.btn-accent:hover{filter:brightness(1.05)}

/* ============ NAV MÓVIL ============ */
.navarrows{display:none}
.dots{display:none}
@media (max-width:960px){
  /* Orden en móvil: primero el formulario (F2), luego producto (F1), luego estampación (F3) */
  .sitebar{display:none}
  /* La cabecera unificada (barra oscura) ya muestra el logo → los logos por-frame se ocultan. */
  .m-brandhead{display:none}
  /* En móvil la nav de la barra se colapsa en el menú ☰. */
  .ub-nav{display:none}
  /* Menú ☰ (despliega la nav). Vive dentro de la barra → se alinea a la derecha por el space-between. */
  .m-menu-btn{display:flex}
  body:has(.ck:not([hidden])) .m-menu-btn{display:none}
  .frames{grid-template-columns:100vw 100vw 100vw;grid-template-rows:1fr;width:300vw}
  /* El hueco de abajo lo marca la barra fija, no un numero a ojo: asi el ultimo
     elemento de cada frame siempre queda accesible. Ya no hace falta reservar
     para el carrito, porque ahora vive DENTRO de la barra. */
  .frame{width:100vw;height:calc(100dvh - var(--barH));overflow-y:auto;overflow-x:hidden;
    padding-bottom:calc(var(--navH) + env(safe-area-inset-bottom,0px) + 16px);grid-column:auto;grid-row:auto}
  .frame+.frame{border-left:none}
  /* Hueco para el botón de "paso siguiente", SOLO en los dos frames que lo
     tienen. El paso 3 se queda con todo el alto, que es la razón por la que en
     su día se quitó la barra de abajo: era el más apretado y el botón no sale
     ahí (no hay paso siguiente). En el 1 y el 2 el precio queda justo en esa
     esquina, así que sin este hueco el botón se comía el TOTAL. */
  :root{--fabHueco:62px}   /* alto del botón (50) + su separación del borde (12) */
  .f2{order:1;padding-bottom:calc(var(--fabHueco) + env(safe-area-inset-bottom,0px))}
  .f1{order:2;padding-bottom:calc(var(--fabHueco) + env(safe-area-inset-bottom,0px))}
  .f3{order:3;display:block;overflow-y:auto;overflow-x:hidden}
  /* Holgura bajo "Añadir al carrito" para que las flechas fijas (← Producto /
     Estampar →, en bottom:20) no lo tapen al bajar del todo. */
  .f3-bottom{margin-bottom:16px}
  .wa-float{display:none} /* en móvil el fondo lo ocupan las flechas de navegación */
  /* En móvil el frame scrollea entero → el área central no necesita scroll propio */
  .f3-scroll{display:block;flex:none;overflow:visible;min-height:0}
  /* La tarjeta "+ Añadir nueva zona" no sale en móvil: ocupaba una celda entera
     de la rejilla de zonas (media pantalla) para algo que se hace de uvas a
     peras. No se pierde: en móvil se pide desde el DISEÑADOR, con el "+" del
     final de la fila de zonas (.est2-zadd), que no ocupa alto ninguno. Por eso
     el aviso de bolsillos sigue saliendo: se puede seguir haciendo. */
  .est-zona-add{display:none}
  /* En móvil los frames fluyen (no altura fija) para poder hacer scroll */
  .f1-stage{height:auto}
  .f1-media{height:clamp(260px,50vh,430px)}
  .f2-colorwrap{min-height:0}
  /* Barra de proveedores: UNA sola fila (3 marcas + desplegable con el resto,
     como JHK). chips compactos que no se encogen ni envuelven. */
  .prov-bar{flex:none;flex-wrap:nowrap;gap:6px;margin-top:6px;min-width:0}
  .prov-chip{height:30px;min-width:0;padding:0 9px;font-size:11.5px}
  .prov-chip img{height:15px;max-width:70px}
  .prov-more-caret{height:30px;padding:0 7px}
  .prov-todos{flex:none}
  /* El desplegable de "más proveedores" se ancla a la derecha para no salirse. */
  .prov-drop{left:auto;right:0}
  /* Cabecera de categorías compacta: solo las categorías (N1) en scroll
     horizontal. En móvil ocultamos Filtrar y el orden para ganar espacio. */
  .cat-top{flex-direction:row;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:8px}
  /* Con las categorías en una sola caja, la raya de debajo de .cat-top no separa
     nada (las filas 2 y 3 están escondidas): eran 17 px de alto regalados. */
  .cat-nav.una-fila .cat-top{padding-bottom:0;margin-bottom:0;border-bottom:0}
  .cat-tools{display:none}
  .cat-n1{flex:1 1 auto;min-width:0}
  /* Cada nivel es 1 fila que SE DESPLAZA horizontalmente (sin barra de scroll):
     así entran todas las categorías/subcategorías sin desplegable. */
  .cat-n1,.cat-n2,.cat-n3{flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cat-n1::-webkit-scrollbar,.cat-n2::-webkit-scrollbar,.cat-n3::-webkit-scrollbar{display:none}
  .cat-n1>*,.cat-n2>*,.cat-n3>*{white-space:nowrap;flex:0 0 auto}
  .cat-tab{padding:6px 10px;font-size:12px}
  .cat-n2 .chip{font-size:12px;padding:6px 10px}
  .cat-n3{margin-top:8px;padding-top:8px}
  .cat-nav{padding:7px 8px}
  /* Líneas de producto compactas: sin la línea de descripción/meta y con el
     "Recomendado" reducido a una estrella (para que no choque con nombre/precio). */
  .pl-meta{display:none}
  .pl-item{padding:7px 10px;gap:9px}
  .pl-item img{width:38px;height:38px}
  /* La lista se mide EN FILAS y no en píxeles a ojo: "que entre una fila más" es
     subir --plFilas y nada más. Una fila son 38 px de miniatura + 7 px de
     relleno arriba y abajo = 52, y 1 px de separación entre líneas. */
  .f2-productlist{flex:1 1 auto;margin-top:7px;
    min-height:calc(var(--plFilas) * var(--plFilaH));}
  .pl-name{flex-wrap:wrap;font-size:13.5px;gap:2px 6px}
  .pl-recbadge{font-size:0;border:none;padding:0;margin:0 3px 0 0}
  .pl-recbadge::before{content:"★";font-size:13px;color:var(--accent)}
  .pl-right{gap:7px}
  .pl-marca{font-size:9px;padding:2px 6px}
  .pl-price{font-size:14px}
  /* Colores: botón que abre un modal con la paleta (los swatches en línea se ocultan). */
  .f2-colorwrap{flex-direction:row;align-items:center;gap:8px;margin-top:7px;padding:9px 13px;border:var(--line-soft);border-radius:12px;background:var(--paper);cursor:pointer}
  .f2-colorwrap .swatches{display:none}
  .f2-colorwrap .f2-label{display:none}
  /* Aquí la paleta está oculta (se abre en un modal), así que la leyenda larga
     no pinta nada: se queda en una ★ con el número, y la explicación completa
     va dentro del modal, junto a los swatches. */
  .f2-colorwrap .color-leyenda{flex:none;order:2;margin:0;gap:3px;font-size:11px}
  .f2-colorwrap .color-leyenda b{font-weight:700}
  .f2-colorwrap .color-leyenda > span:last-child{display:none}
  .f2-colorwrap .color-leyenda::after{content:attr(data-n);color:var(--accent);font-weight:700}
  .f2-colorname{margin:0;font-size:13px}
  .f2-colorwrap::after{content:"▾";margin-left:auto;color:var(--accent);font-weight:800;font-size:14px}

  /* ── Frame 1: imagen más pequeña, con descripción y sin técnicas ── */
  .f1-media{height:clamp(180px,30vh,260px)}
  .f1-desc{-webkit-line-clamp:3;margin-top:10px;max-width:none}
  .f1-specs .spec-tec{display:none}
  .f1-foot{display:none}

  /* ── Barra de navegación FIJA abajo ──────────────────────────────────
     Antes eran tres elementos sueltos flotando sobre el contenido (dos
     píldoras y los puntos), y tapaban justo lo que hay que tocar: la lista de
     productos, el selector de color, el botón de añadir al carrito. Ahora es
     una barra de verdad: ocupa su sitio, el contenido reserva su altura
     (--navH) y ya no hay nada debajo que quede oculto. */
  .navarrows{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:var(--navH);padding:0 12px;
    padding-bottom:env(safe-area-inset-bottom,0);
    height:calc(var(--navH) + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(253,251,246,.94),#f5efe4);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:var(--line-soft);box-shadow:0 -3px 14px rgba(27,24,19,.08);
  }
  /* La barra de abajo DESAPARECE. Los pasos se cambian deslizando y su
     indicador se muda al borde inferior de la cabecera, donde no cuesta alto
     ninguno. Los frames recuperan los 44px que ocupaba —que es justo lo que
     pedía el paso 3, el más apretado—. Las flechas siguen en el HTML con su
     JS: revertir esto es devolverle el display a .navarrows y a .arrow. */
  :root{--navH:0px}
  /* Cuántas filas se ven de cada cosa. Están aquí y no repartidas por las reglas
     para que ajustar el alto sea cambiar un número: es lo que se pide cuando algo
     "no entra". Aparte de --navH a propósito: esa línea la vigila una prueba tal
     cual está escrita. */
  :root{
    --catFilas:2;        /* filas de categorías a la vista */
    --catFilaH:27px;     /* alto de un chip de categoría */
    --plFilas:4;         /* filas de producto a la vista (eran 3) */
    --plFilaH:53px;      /* alto de una línea de producto */
  }
  .navarrows{display:none}
  /* Los 3 pasos, pegados al borde de abajo de la cabecera. Cada tramo ocupa un
     TERCIO de la pantalla: como objetivo para el dedo no tiene comparación con
     los puntos de 9px de antes, y de un vistazo se ve por cuál se va. */
  .dots{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:2;gap:2px;padding:0;transform:none}
  .dot-i{flex:1 1 0;width:auto;height:14px;border:0;padding:0;background:none;border-radius:0;cursor:pointer;position:relative}
  .dot-i::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);transition:background .25s}
  .dot-i.on::after{background:var(--accent)}
  /* El carrito también sube a la cabecera (el mismo botón que en el resto del
     sitio). La píldora de abajo sobra y el panel cuelga de arriba. Y ya no
     depende del paso: arriba no le quita sitio a nada. */
  .cartbtn{display:none}
  .cartpanel{display:block;top:85px;bottom:auto;right:12px;left:auto;width:min(360px,calc(100vw - 24px))}
}

/* ── Por qué no se puede añadir al carrito ────────────────────────────────
   Ámbar y pegado al botón. El mismo aviso vivía solo en el bloque de cantidad,
   en otra columna, así que quien pulsaba "Añadir al carrito" veía un botón que
   no hacía nada. */
.add-aviso{
  margin-bottom:10px;padding:11px 13px;border-radius:11px;
  background:#FDF6E3;border:1px solid #E8B923;color:#7a5a00;
  font-size:13px;line-height:1.45;
}
.add-aviso[hidden]{display:none}
.add-aviso b{color:#5d4400}
.add-aviso.sacude{animation:avisoSacude .4s ease}
@keyframes avisoSacude{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
@media (prefers-reduced-motion:reduce){.add-aviso.sacude{animation:none}}

/* ── Guía de "siguiente paso" (pulso sobre el elemento + globo) ─────────── */
/* SIN `position`. Marcar un elemento para llamar la atención no puede cambiar
   dónde está colocado. Aquí ponía `position:relative`, y como esta regla va
   DESPUÉS de la media query, le ganaba el `position:fixed` a las flechas de
   navegación del móvil en cuanto la guía las señalaba: se caían al flujo, se
   montaban una encima de otra y la de «siguiente» acababa fuera de la pantalla
   (medido: x −16). Es lo que se veía como «en el frame 2 solo sale un botón».
   La animación es solo un box-shadow: no necesita posicionamiento. */
.guia-pulse{animation:guiaPulse 1.6s ease-in-out infinite;border-radius:10px}
@keyframes guiaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  50%{box-shadow:0 0 0 7px rgba(16,185,129,0)}
}
.guia-tip{position:fixed;z-index:1500;background:#10b981;color:#04231a;font-weight:700;
  font-size:13px;line-height:1.25;padding:9px 12px;border-radius:10px;max-width:230px;
  box-shadow:0 8px 24px rgba(16,185,129,.4);display:none;align-items:center;gap:8px;
  pointer-events:auto}
.guia-tip.on{display:inline-flex;animation:guiaIn .25s ease}
@keyframes guiaIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.guia-txt{flex:1}
.guia-flecha{font-size:16px;position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);color:#10b981;text-shadow:0 3px 3px rgba(16,185,129,.3);animation:guiaBob 1s ease-in-out infinite}
.guia-tip.guia-abajo .guia-flecha{bottom:auto;top:-15px;transform:translateX(-50%) rotate(180deg)}
@keyframes guiaBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(3px)}}
.guia-tip.guia-abajo .guia-flecha{animation:none}
.guia-x{background:rgba(4,35,26,.18);border:none;color:#04231a;width:18px;height:18px;
  border-radius:50%;cursor:pointer;font-size:11px;line-height:1;flex:0 0 auto;font-weight:700}
.guia-x:hover{background:rgba(4,35,26,.32)}

/* Técnicas del producto como enlaces (a su página en /tecnicas) */
a.spec-tec{text-decoration:none;display:inline-block;cursor:pointer;transition:filter .15s}
a.spec-tec:hover{filter:brightness(.94)}

/* Aviso de envío a Canarias, Ceuta o Melilla: el pedido va sin IVA pero el
   cliente paga IGIC/IPSI al recibirlo. Ámbar, no rojo: no es un error, es
   información que tiene que leer antes de pagar. */
.ck-aviso-terr {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid #e0b83a;
  border-left: 4px solid #e0b83a;
  border-radius: 6px;
  background: #fdf6e3;
  color: #6b4e00;
  font-size: 13.5px;
  line-height: 1.5;
}
.ck-aviso-terr b { color: #4a3600; }

/* ── Cambio automático de tramo de precio al escalar ──────────────────────
   Escalar el diseño ya no se topa en el tramo elegido: el arrastre es continuo
   y el TRAMO sigue al diseño. Pero eso mueve el precio, así que tiene que
   verse: este cartel aparece sobre el lienzo justo cuando cambia, dice hacia
   dónde (↑/↓) y cuánto cuesta ahora. Verde al bajar, ámbar al subir. */
.est2-tramo-aviso{
  position:absolute;left:50%;transform:translateX(-50%) translateY(6px);
  bottom:12px;z-index:6;pointer-events:none;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:13px;font-weight:700;line-height:1;
  padding:9px 14px;border-radius:999px;
  background:#1b1813;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.est2-tramo-aviso.on{opacity:1;transform:translateX(-50%) translateY(0)}
.est2-tramo-aviso .tv-flecha{font-size:15px;line-height:1}
.est2-tramo-aviso .tv-eur{font-weight:800}
.est2-tramo-aviso.up{background:#8a5a12}
.est2-tramo-aviso.down{background:#1c6b45}
/* El tramo vigente va SIEMPRE en la etiqueta de tamaño, no solo al cambiar:
   "lo puedo ver en todo momento" era justo la pega. */
.est2-sizetag .st-tramo{display:block;font-weight:700;font-size:11px;color:var(--accent);margin-top:2px}
.est2-sizetag .st-tramo b{font-weight:800}
/* Y el chip que acaba de activarse solo, con un pulso corto para que se localice. */
.est2-fchip.recien{animation:tramoRecien 1.1s ease}
@keyframes tramoRecien{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}
  60%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}
@media (prefers-reduced-motion:reduce){
  .est2-tramo-aviso{transition:none}
  .est2-fchip.recien{animation:none;outline:2px solid var(--accent)}
}

/* ── Flechas de "puedes deslizar" (móvil, al quedarse quieto) ───────────── */
/* Viajan hacia su lado y se desvanecen: el movimiento ES el mensaje, porque lo
   que hay que contar no es "hay más contenido" sino "arrastra el dedo hacia
   allá". Una flecha quieta dice lo primero pero no lo segundo.
   pointer-events:none: aparecen solas junto al borde, donde descansa el pulgar,
   así que no pueden robar el primer toque después de una pausa. */
/* ── Botón "paso siguiente" (solo móvil) ──────────────────────────────────
   En escritorio los tres frames se ven a la vez: no hay a dónde ir. En móvil,
   cambiar de paso era SOLO deslizar el dedo, y quien no lo intuía se quedaba
   mirando la primera pantalla. Esto es lo que la pista del gesto no puede ser:
   algo pulsable.
   Lleva el NOMBRE del paso al que va, no solo una flecha. "Producto →" dice a
   dónde llevas; un chevrón suelto solo dice que hay algo más.
   z-index 64: por debajo del checkout (70), del modal de estampación (2000) y
   del visor de imagen (1600), para que ninguno lo tenga flotando encima. */
.nextfab{display:none}
@media (max-width:960px){
  /* Redondo y solo con la flecha: el nombre del paso ocupaba un ancho que en un
     móvil se le quita a lo de debajo. 50px es el objetivo mínimo cómodo para un
     pulgar, así que no se baja de ahí aunque el contenido sea un carácter. */
  .nextfab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:64;
    right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:50px;height:50px;
    padding:0;border:0;border-radius:50%;cursor:pointer;
    font-family:inherit;
    background:var(--accent);color:#fff;
    box-shadow:0 10px 26px rgba(var(--accent-rgb),.42);
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .nextfab[hidden]{display:none} /* la clase display:flex le gana a [hidden] */
  .nextfab:active{transform:scale(.95);box-shadow:0 6px 16px rgba(var(--accent-rgb),.38)}
  .nextfab-ar{font-size:21px;line-height:1;font-weight:400}
  /* Mientras haya una pantalla completa delante, el botón no pinta nada ahí
     (el modal de estampación deja 2vw de margen y asomaba por la esquina). */
  body:has(#estampModal:not([hidden])) .nextfab,
  body:has(#checkout:not([hidden])) .nextfab,
  body:has(#lightbox:not([hidden])) .nextfab{display:none}
}

.swipe-flechas{position:fixed;inset:0;z-index:65;pointer-events:none;opacity:0;transition:opacity .35s ease}
.swipe-flechas.on{opacity:1}
.swipe-flechas .sf{
  position:absolute;top:50%;display:none;
  font-size:34px;line-height:1;font-weight:300;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55);
  width:44px;height:44px;border-radius:50%;
  background:rgba(27,24,19,.42);
  align-items:center;justify-content:center;
}
/* .hay lo pone el JS: solo el lado al que de verdad se puede ir. */
.swipe-flechas.on .sf.hay{display:flex}
.sf-izq{left:6px;animation:sfIzq 1.8s ease-in-out infinite}
.sf-der{right:6px;animation:sfDer 1.8s ease-in-out infinite}
@keyframes sfDer{
  0%{opacity:0;transform:translate(-12px,-50%)}
  30%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(12px,-50%)}
}
@keyframes sfIzq{
  0%{opacity:0;transform:translate(12px,-50%)}
  30%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-12px,-50%)}
}
/* Segundo aviso: el texto. Sale a los 12 s, cuando la flecha sola no ha
   bastado. Va a la altura de las flechas y pegado a la suya cuando solo hay un
   lado, para que el chevrón y la frase se lean como una sola cosa: "desplaza a
   la derecha" suelto en mitad de la pantalla es ambiguo. */
.sf-cartel{
  position:absolute;top:calc(50% + 42px);left:50%;transform:translateX(-50%);
  display:none;max-width:calc(100vw - 32px);white-space:nowrap;
  padding:10px 18px;border-radius:999px;
  background:rgba(27,24,19,.88);color:#fff;
  font-size:14px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  animation:sfLatido 1.8s ease-in-out infinite;
}
.swipe-flechas.grita .sf-cartel{display:block}
/* Arrimado a su flecha cuando solo se puede ir por un lado. */
.swipe-flechas.solo-der .sf-cartel{left:auto;right:6px;transform:none}
.swipe-flechas.solo-izq .sf-cartel{left:6px;transform:none}
@keyframes sfLatido{0%,100%{opacity:.75}50%{opacity:1}}
/* Pantallas estrechas: el texto no cabe en una línea al lado del borde. */
@media (max-width:360px){
  .sf-cartel{font-size:12.5px;padding:9px 14px;letter-spacing:.6px}
}
/* Sin animación la flecha tiene que seguir viéndose: es la única pista de que
   se puede deslizar, y quedarse en opacity:0 la borraría del todo. */
@media (prefers-reduced-motion:reduce){
  .swipe-flechas .sf{animation:none;opacity:.9;transform:translateY(-50%)}
  .sf-cartel{animation:none;opacity:1}
  .swipe-flechas{transition:none}
}