@font-face { font-family: 'Outfit'; src: url('/fuentes/outfit-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fuentes/outfit-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fuentes/outfit-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fuentes/nunito-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fuentes/nunito-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face {
  font-family: 'Nunito';
  src: url('/fuentes/nunito-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('/fuentes/andika-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('/fuentes/fredoka-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Chewy';
  src: url('/fuentes/chewy-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Sniglet';
  src: url('/fuentes/sniglet-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Grandstander';
  src: url('/fuentes/grandstander-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Bubblegum Sans';
  src: url('/fuentes/bubblegum-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lilita One';
  src: url('/fuentes/lilita-one-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'LEGO';
  src: url('/fuentes/lego.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2 ExtraBold';
  src: url('/fuentes/baloo2-extrabold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik ExtraBold';
  src: url('/fuentes/rubik-extrabold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Patrick Hand';
  src: url('/fuentes/patrick-hand-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ---------- Marca Tilde ----------
   Títulos: Lilita One (parecida a Le Petit Cochon). Detalles a mano: Patrick Hand (parecida a KG Primary Penmanship).
   Para usar las fuentes originales (con licencia), reemplazá estos dos nombres en --display y --mano. */
:root {
  /* Identidad Tilde · opción C «La lista tildada» */
  --rojo: #ef2b3f;
  --rojo-osc: #b30e2a;
  --lima: #b8f03c;
  --tinta: #1e2a47;
  --papel: #f4f6f9;
  --durazno: #fde8ea;
  --hoja: #ffffff;
  --sticker: #ffffff;
  --texto: #1e2a47;
  --suave: #4a5878;
  --linea: #dce2ea;
  --ok: #1e8e5a;
  --error: #b30e2a;
  --radio: 16px;
  --sombra-sticker: 0 1px 0 rgba(30, 42, 71, 0.1), 0 3px 8px rgba(30, 42, 71, 0.14);
  --display: 'Outfit', 'Trebuchet MS', system-ui, sans-serif;
  --mano: 'Nunito', system-ui, sans-serif;
  --cuerpo: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* alias que usa el resto del código */
  --acento: var(--rojo);
  --acento-osc: var(--rojo-osc);
  --soporte: var(--papel);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 400 1.0625rem/1.55 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--rojo-osc); }

:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Título tipo sticker: color de marca y borde blanco */
.titulo-sticker {
  color: var(--tinta);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.titulo-sticker::first-letter { color: var(--rojo); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
}

.marca { display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1; text-decoration: none; color: var(--tinta); }
.marca svg { width: 2.6rem; height: auto; display: block; }
.marca .palabra { font: 800 2.1rem/1 var(--display); letter-spacing: -0.04em; }

.lema { font: 800 1.2rem/1.1 var(--display); letter-spacing: -0.01em; color: var(--tinta); padding: 0.15rem 0.6rem; flex: 0 1 auto; margin-right: auto; background: linear-gradient(transparent 58%, var(--lima) 58%); }

.carrito-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font: 400 1rem var(--display);
  box-shadow: var(--sombra-sticker);
  cursor: pointer;
}
.carrito-boton:hover { background: var(--rojo-osc); }
.carrito-icono { font-size: 1.25rem; }
.carrito-texto { display: grid; text-align: left; line-height: 1.1; }
.carrito-texto strong { font-weight: 400; font-size: 0.95rem; }

.contador {
  position: absolute;
  top: -0.5rem;
  left: -0.4rem;
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--lima);
  color: var(--texto);
  font: 400 0.95rem var(--display);
  box-shadow: 0 0 0 2px #fff;
}
.contador.salta { animation: salto 0.45s ease; }
@keyframes salto { 40% { transform: scale(1.45); } }

/* ---------- Armador ---------- */
.armador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  align-items: start;
}
.armador.sin-vista { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.armador.sin-vista .vista { display: none; }

.pasos { display: flex; flex-direction: column; gap: 1.4rem; max-width: 40rem; }
.armador.sin-vista .pasos { max-width: none; }

h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }

.progreso { display: flex; flex-wrap: wrap; gap: 0.4rem 0.35rem; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.progreso li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.75rem 0.2rem 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--suave);
  font: 400 1.05rem var(--mano);
}
.progreso li::before {
  counter-increment: paso;
  content: counter(paso);
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #fff;
  color: var(--suave);
  font: 400 0.95rem var(--display);
}
.progreso li.actual { background: #fff; color: var(--texto); box-shadow: 0 0 0 2px var(--rojo); }
.progreso li.actual::before { background: var(--rojo); color: #fff; }
.progreso li.hecho::before { content: '✓'; background: var(--lima); color: var(--texto); }

.paso { display: grid; gap: 0.9rem; }
.paso h2 { font-size: clamp(1.6rem, 4vw, 2rem); color: var(--texto); -webkit-text-stroke: 0; }
.paso h2::first-letter { color: var(--rojo); }

.ayuda { color: var(--suave); font-size: 0.97rem; }
.consejo { padding: 0.7rem 0.95rem; border-radius: 12px; background: rgba(255, 255, 255, 0.6); font: 400 1.08rem/1.35 var(--mano); }
.estado { font-weight: 700; min-height: 1.55em; }
.estado.completo { color: var(--ok); }

/* Tipo de sticker */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.85rem; }
.tipo-op, .pack-op { position: relative; }
.tipo-op input, .pack-op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }

.tipo-op label {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radio);
  background: var(--sticker);
  border: 3px solid transparent;
  box-shadow: var(--sombra-sticker);
  cursor: pointer;
}
.tipo-op strong { font: 400 1.45rem/1.1 var(--display); color: var(--rojo); }
.tipo-op span { font-weight: 600; }
.tipo-op small { color: var(--suave); font-size: 0.92rem; line-height: 1.35; }
.tipo-op input:checked + label { border-color: var(--rojo); background: var(--durazno); }
.tipo-op input:focus-visible + label, .pack-op input:focus-visible + label { outline: 3px solid var(--texto); outline-offset: 2px; }

/* Planchas y combos */
.grupo-packs { display: grid; gap: 0.5rem; }
.grupo-packs + .grupo-packs { margin-top: 0.9rem; }
.grupo-packs h3 { font: 400 1.2rem var(--display); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 0.75rem; }

.pack-op label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.85rem;
  align-items: center;
  align-content: start;
  height: 100%;
  padding: 0.9rem;
  border-radius: var(--radio);
  background: var(--sticker);
  border: 3px solid transparent;
  box-shadow: var(--sombra-sticker);
  cursor: pointer;
}
.pack-op input:checked + label { border-color: var(--rojo); background: var(--durazno); }
.pack-op strong { font: 400 1.15rem/1.15 var(--display); }
.pack-op small { color: var(--suave); font-size: 0.9rem; line-height: 1.3; }
.pack-op .precio { font: 400 1.2rem var(--display); color: var(--rojo-osc); }
.pack-op .insignia { grid-column: 1 / -1; justify-self: start; padding: 0.1rem 0.7rem; border-radius: 999px; background: var(--lima); color: var(--texto); font: 400 1rem var(--mano); }
.pack-op .incluye { margin: 0.1rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--suave); }
.pack-op label > :not(.esquema):not(.insignia) { grid-column: 2; }
.pack-op label.combo { grid-template-columns: 1fr; }
.pack-op label.combo > * { grid-column: 1; }

.pack-op label.con-foto { grid-template-columns: 1fr; }
.pack-op label.con-foto > * { grid-column: 1; }
.foto-pack { width: 100%; height: 17rem; object-fit: contain; border-radius: 0.6rem; background: #fff; border: 1px solid var(--linea); margin-bottom: 0.3rem; }
.esquema {
  grid-column: 1;
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 3px;
  width: 2.6rem;
  border-radius: 3px;
  background: var(--hoja);
  border: 1px solid var(--linea);
}
.ez { display: grid; gap: 1.5px; }
.ez i { display: block; aspect-ratio: var(--ar); background: var(--c); border-radius: 1px; }

/* Planchas de un combo */
.piezas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pieza {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 3px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: var(--texto);
  font: 700 0.92rem var(--cuerpo);
  cursor: pointer;
}
.pieza[aria-pressed='true'] { border-color: var(--rojo); background: var(--durazno); }
.pieza-n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--linea); font-size: 0.85rem; }
.pieza.lista .pieza-n { background: var(--lima); }

.casilla { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 600; cursor: pointer; }
.casilla input { width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; accent-color: var(--rojo); flex: none; }

/* Motivos */
.elegidos { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-height: 2.9rem; }
.elegido-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem 0.2rem 0.3rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--rojo);
  font: 400 1.05rem var(--mano);
}
.elegido-chip .motivo { width: 1.7rem; height: 1.7rem; }
.elegido-chip b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--rojo); color: #fff; font: 400 0.85rem var(--display); }
.elegido-chip button { border: 0; background: none; padding: 0 0.2rem; font-size: 1.2rem; line-height: 1; color: var(--suave); cursor: pointer; }
.elegidos .vacio-elegidos { font: 400 1.1rem var(--mano); color: var(--suave); }

.filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filtros button {
  padding: 0.25rem 0.85rem;
  border: 2px solid rgba(30, 42, 71, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--texto);
  font: 400 1.05rem var(--mano);
  cursor: pointer;
}
.filtros button[aria-pressed='true'] { background: var(--texto); border-color: var(--texto); color: #fff; }

.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.55rem; }

.motivo-op {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.2rem 0.4rem;
  border: 3px solid transparent;
  border-radius: 12px;
  background: var(--sticker);
  box-shadow: var(--sombra-sticker);
  color: var(--texto);
  font: 600 0.74rem/1.1 var(--cuerpo);
  cursor: pointer;
}
.motivo-op .motivo { width: 2.3rem; height: 2.3rem; }
.motivo-op[aria-pressed='true'] { border-color: var(--rojo); background: var(--durazno); }
.motivo-op .orden { position: absolute; top: -0.5rem; right: -0.4rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--rojo); color: #fff; font: 400 0.85rem var(--display); box-shadow: 0 0 0 2px #fff; }
.motivo-op.liso { grid-column: span 2; background: #fff; }
.motivo-op .liso-muestra { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 8px; border: 2px dashed var(--linea); font: 400 0.7rem var(--display); color: var(--rojo); }

.acciones-motivos { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

.boton-texto {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--rojo-osc);
  font: 700 0.95rem var(--cuerpo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Campos */
.campo { display: grid; gap: 0.35rem; }
.campo label, .etiqueta, legend { font-weight: 700; font-size: 0.97rem; }
.opcional { font-weight: 400; color: var(--suave); }

input[type='text'], input[type='email'], input[type='tel'], input[type='number'], textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  color: var(--texto);
  font: inherit;
}
input:focus, textarea:focus { border-color: var(--rojo); }
input.invalido, textarea.invalido { border-color: var(--error); }
.casilla.invalido { outline: 3px solid var(--error); outline-offset: 4px; border-radius: 8px; }

#nombre { font: 400 1.5rem var(--display); max-width: 22rem; }

.tintas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tinta-op { position: relative; }
.tinta-op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tinta-op label {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--linea);
  cursor: pointer;
}
.tinta-op input:checked + label { box-shadow: 0 0 0 3px var(--texto); }
.tinta-op input:focus-visible + label { outline: 3px solid var(--texto); outline-offset: 4px; }

.cantidad { display: inline-flex; align-items: stretch; width: max-content; }
.cantidad button {
  width: 2.9rem;
  border: 2px solid var(--linea);
  background: #fff;
  color: var(--texto);
  font: 700 1.3rem var(--cuerpo);
  cursor: pointer;
}
.cantidad button:first-child { border-radius: 12px 0 0 12px; }
.cantidad button:last-child { border-radius: 0 12px 12px 0; }
.cantidad input { width: 4rem; border-radius: 0; text-align: center; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Botones */
.boton-principal, .boton-secundario {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border: 3px solid var(--rojo);
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font: 400 1.2rem var(--display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(30, 42, 71, 0.2);
}
.boton-principal:hover { background: var(--rojo-osc); border-color: var(--rojo-osc); }
.boton-principal:disabled { background: #9aa5b8; border-color: #9aa5b8; cursor: not-allowed; }
.boton-secundario { background: #fff; color: var(--rojo-osc); }
.boton-secundario:hover { background: var(--durazno); }
.boton-principal.grande, .boton-secundario.grande { width: 100%; padding: 1rem; font-size: 1.3rem; }

.nav-pasos { display: flex; gap: 0.75rem; align-items: stretch; }
.nav-pasos .boton-principal { flex: 1; }
.nav-pasos .boton-secundario { flex: none; }

/* ---------- Vista previa ---------- */
.vista { position: sticky; top: 1rem; display: grid; gap: 0.5rem; }

.papel {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 1.75rem);
  border-radius: 22px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0 2px, transparent 2px 14px),
    #d9e3f0;
}

.hoja {
  --tinta: var(--rojo);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, calc(66vh * var(--ratio, 0.7)));
  aspect-ratio: var(--ratio, 0.7);
  border-radius: 6px;
  background: var(--hoja);
  box-shadow: 0 2px 0 rgba(30, 42, 71, 0.1), 0 14px 30px rgba(30, 42, 71, 0.22);
  overflow: clip;
}

.hoja::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9%;
  aspect-ratio: 1;
  background: linear-gradient(315deg, #cbc6c2 50%, #fff 50%, #ddd8d4);
  box-shadow: -3px -3px 6px rgba(30, 42, 71, 0.18);
  border-top-left-radius: 8px;
  transition: width 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
  pointer-events: none;
}
.hoja.despegando::after { width: 24%; }

.zonas { container-type: inline-size; display: flex; flex-direction: column; }
.zona { display: grid; justify-content: space-between; }

.sticker {
  container-type: inline-size;
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  aspect-ratio: var(--ar, 1);
  border: 0;
  border-radius: var(--r, 50%);
  background: var(--bg, var(--sticker));
  box-shadow: 0 1px 0 rgba(30, 42, 71, 0.12);
  color: var(--texto);
  font: inherit;
  overflow: hidden;
}
.sticker.centro { gap: 3cqw; }
.sticker.fila { display: flex; align-items: center; justify-content: center; gap: 4cqw; padding: 0 4cqw; }

button.sticker { cursor: pointer; padding: 0; }
.sticker.vacio { color: rgba(30, 42, 71, 0.55); }
.sticker.vacio::before { content: '+'; font: 400 calc(var(--mas, 22) * 1cqw)/1 var(--display); }
.sticker.elegido { box-shadow: 0 0 0 3px var(--rojo); }

.sticker .motivo { flex: none; width: calc(var(--ico, 62) * 1cqw); aspect-ratio: 1; }

.sticker .rotulo {
  max-width: 100%;
  font: var(--nombre-peso, 400) calc(var(--k, 10) * 1cqw)/1.05 var(--nombre-fuente, var(--display));
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.sticker .rotulo.fantasma { opacity: 0.3; }

.motivo {
  display: block;
  background: var(--tinta, var(--texto));
  -webkit-mask: var(--img) center / contain no-repeat;
  mask: var(--img) center / contain no-repeat;
}
.motivo.color { background: var(--img) center / contain no-repeat; -webkit-mask: none; mask: none; }

.vista-datos { text-align: center; font-weight: 700; }
.vista-datos span { color: var(--suave); font-weight: 500; }
.vista-ayuda { text-align: center; font: 400 1.1rem var(--mano); color: var(--suave); min-height: 1.4em; }

/* ---------- Pedido ---------- */
.pedido {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 4rem;
  display: grid;
  gap: 1.4rem;
}
.pedido > h2 { font-size: clamp(2rem, 6vw, 3rem); }
.vacio { color: var(--suave); }

.grupo-nombre { display: grid; gap: 0.6rem; }
.grupo-nombre + .grupo-nombre { margin-top: 0.6rem; }
.grupo-nombre > h3 {
  display: inline-block;
  justify-self: start;
  padding: 0.1rem 1rem;
  border-radius: 999px;
  background: var(--lima);
  color: var(--texto);
  font: 400 1.3rem var(--display);
}
.grupo-nombre > h3.sin-nombre { background: #fff; color: var(--suave); font-family: var(--mano); }
.lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.linea {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.8rem;
  border-radius: var(--radio);
  background: var(--sticker);
  box-shadow: var(--sombra-sticker);
}
.linea .papel { padding: 0.45rem; border-radius: 10px; }
.linea .papel.multi { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.linea .papel.multi .hoja { width: calc(50% - 0.15rem); }
.linea .hoja { width: 100%; box-shadow: 0 1px 4px rgba(30, 42, 71, 0.25); }
.linea .hoja::after { display: none; }
.linea .sticker { box-shadow: none; }
.linea h4 { margin: 0; font: 400 1.1rem/1.2 var(--display); }
.linea .detalle { color: var(--suave); font-size: 0.9rem; line-height: 1.35; }
.linea .acciones { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: 0.3rem; }
.linea .importe { font: 400 1.2rem var(--display); text-align: right; color: var(--rojo-osc); }

.revision { display: grid; gap: 0.5rem; padding: 1.1rem 1.2rem; border-radius: var(--radio); background: var(--durazno); border: 3px dashed var(--rojo); }
.revision h3 { font-size: 1.5rem; }
.nombres-grandes { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.nombres-grandes li { display: grid; gap: 0.1rem; }
.nombres-grandes .gran {
  font: 400 clamp(1.9rem, 7vw, 2.8rem)/1.05 var(--display);
  color: var(--rojo);
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  overflow-wrap: anywhere;
}
.nombres-grandes .de { font: 400 1.1rem var(--mano); color: var(--suave); }

form#form-pedido { display: grid; gap: 1.4rem; }
.casilla-revision { padding: 0.9rem 1rem; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-sticker); font-size: 1.1rem; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
legend { padding: 0; margin-bottom: 0.9rem; font: 400 1.4rem var(--display); }
.campo-doble { display: grid; grid-template-columns: 1fr 8rem; gap: 0.75rem; }

.envios { display: grid; gap: 0.5rem; }
.envio-op { position: relative; }
.envio-op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.envio-op label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 3px solid transparent;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sombra-sticker);
  font-weight: 600;
  cursor: pointer;
}
.envio-op input:checked + label { border-color: var(--rojo); background: var(--durazno); }
.envio-op input:focus-visible + label { outline: 3px solid var(--texto); outline-offset: 2px; }

.resumen { margin: 0; display: grid; gap: 0.3rem; max-width: 24rem; }
.resumen div { display: flex; justify-content: space-between; gap: 1rem; }
.resumen dt { color: var(--suave); }
.resumen dd { margin: 0; font-weight: 700; }
.resumen .total { padding-top: 0.5rem; margin-top: 0.3rem; border-top: 3px solid var(--texto); font: 400 1.7rem var(--display); }
.resumen .total dt { color: var(--texto); }

.aviso-pago {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  background: #fff;
  border-left: 6px solid var(--lima);
}
.aviso-pago h3 { font-size: 1.25rem; }
.aviso-pago p { font-size: 0.97rem; }
.legal { font-size: 0.88rem; color: var(--suave); }

.error { color: var(--error); font-weight: 700; min-height: 1.55em; }

.confirmacion { display: grid; gap: 0.8rem; justify-items: start; max-width: 36rem; padding: 1.5rem; border-radius: var(--radio); background: #fff; border-left: 6px solid var(--lima); }
.confirmacion h3 { font-size: 2rem; }

/* ---------- Carrito (cajón) ---------- */
.cajon { margin: 0 0 0 auto; padding: 0; border: 0; width: min(28rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; }
.cajon::backdrop { background: rgba(30, 42, 71, 0.55); }
.cajon-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; background: var(--papel); box-shadow: -10px 0 40px rgba(30, 42, 71, 0.35); }
.cajon-cab { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; background: var(--rojo); color: #fff; }
.cajon-cab h2 { font-size: 1.7rem; }
.cerrar { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: #fff; color: var(--rojo-osc); font: 400 1.8rem/1 var(--display); cursor: pointer; }
.cajon-cuerpo { overflow-y: auto; padding: 1rem 1.1rem; display: grid; align-content: start; gap: 0.6rem; }
.cajon .linea { grid-template-columns: 4rem minmax(0, 1fr); }
.cajon .linea .importe { grid-column: 2; text-align: left; }
.cajon-pie { display: grid; gap: 0.6rem; padding: 0.9rem 1.1rem 1.1rem; background: rgba(255, 255, 255, 0.7); }
.cajon-total { display: flex; justify-content: space-between; font: 400 1.4rem var(--display); }

/* ---------- Pie y diálogo ---------- */
.pie { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; color: var(--suave); font-size: 0.95rem; }
.pie .marca .palabra { font-size: 1.6rem; }
.pie .marca svg { width: 2rem; }
.pie p { flex: 1; }
.pie::before { content: ''; position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: 6px; border-radius: 3px; background: var(--lima); }

.demo { max-width: 26rem; padding: 1.5rem; border: 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(30, 42, 71, 0.4); }
.demo::backdrop { background: rgba(30, 42, 71, 0.55); }
.demo form { display: grid; gap: 0.8rem; }
.demo-botones { display: grid; gap: 0.5rem; justify-items: center; margin-top: 0.4rem; }

/* ---------- Pantallas chicas ---------- */
@media (max-width: 62rem) {
  .armador { grid-template-columns: minmax(0, 1fr); }
  .cabecera { position: sticky; top: 0; z-index: 30; padding: 0.35rem 1rem; background: rgba(244, 246, 249, 0.97); box-shadow: 0 2px 8px rgba(30, 42, 71, 0.12); }
  .marca img { width: 2.9rem; height: 2.9rem; }
  .vista { position: sticky; top: 3.65rem; z-index: 5; order: -1; margin: 0 -1.25rem; padding: 0.4rem 1.25rem; background: rgba(244, 246, 249, 0.96); }
  .papel { padding: 0.5rem; border-radius: 14px; }
  .hoja { width: min(100%, calc(21vh * var(--ratio, 0.7))); }
  .vista-datos { display: none; }
  .armador:not(.sin-vista) h1 { display: none; }
  .papel { padding: 0.35rem; }
  .vista-ayuda { font-size: 1rem; }
  .pasos { max-width: none; }
  .nav-pasos { position: sticky; bottom: 0.5rem; z-index: 6; padding: 0.5rem; margin: 0 -0.5rem; border-radius: 22px; background: rgba(244, 246, 249, 0.96); box-shadow: 0 -6px 14px rgba(30, 42, 71, 0.12); }
}

@media (max-width: 40rem) {
  #ayuda-motivos { display: none; }
  .progreso { flex-wrap: nowrap; }
  .progreso li:not(.actual) { font-size: 0; padding: 0.2rem; }
  .progreso li:not(.actual)::before { font-size: 0.95rem; }
  .lema { font-size: 1.1rem; }
  .cabecera::after { display: none; }
  .carrito-boton:not(.con-items) .carrito-texto { display: none; }
  .carrito-boton.con-items #cab-n { display: none; }
  .carrito-boton { padding: 0.5rem 0.9rem; }
  .carrito-boton.con-items .carrito-texto strong { font-size: 1.05rem; }
  .linea { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .linea .importe { grid-column: 2; text-align: left; }
  .campo-doble { grid-template-columns: 1fr 6.5rem; }
  .cajon { width: 100vw; }
}

/* ---------- Nombre en letras con relieve ---------- */
.copia-nombre svg { display: block; width: 100%; height: auto; overflow: visible; }
.copia-nombre text { font-family: 'Lilita One', var(--display), sans-serif; }
.copia-nombre svg.e-lego text { font-family: 'LEGO', 'Lilita One', sans-serif; }
.copia-nombre svg.vacio { opacity: 0.4; }
.esquema .en { display: block; height: 4px; margin: 1px 0 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px var(--b); }
#nombre.mayusculas { text-transform: uppercase; letter-spacing: 0.04em; }
.tinta-op label[style*='--b'] { box-shadow: 0 0 0 2px var(--b); }
.tinta-op input:checked + label[style*='--b'] { box-shadow: 0 0 0 3px var(--texto); }

@media (min-width: 40.01rem) {
  .carrito-boton .contador { display: none; }
}

/* Modelos con etiqueta propia: el nombre va a la derecha del dibujo, en el color del modelo */
.sticker.modelo {
  position: relative;
  display: block;
  background: var(--etq) center / 100% 100% no-repeat;
  box-shadow: none;
}
.sticker.modelo .rotulo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--desde, 40%);
  right: 6%;
  display: grid;
  place-items: center;
  max-width: none;
  color: var(--nombre-color);
  text-align: center;
  white-space: pre;
  line-height: 1.02;
}
.sticker.modelo.elegido { box-shadow: 0 0 0 3px var(--rojo); }
.sticker.modelo.vacio::before { content: none; }

/* ---------- Tamaño real ---------- */
.boton-secundario.chico { padding: 0.45rem 1.1rem; font-size: 1rem; justify-self: start; align-self: flex-start; }

.real { width: min(100vw, 70rem); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: auto; padding: 0; border: 0; background: transparent; --zoom: 1; }
.real::backdrop { background: rgba(30, 42, 71, 0.6); }
.real-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; background: var(--papel); }
.real-cab { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; background: var(--rojo); color: #fff; }
.real-cab h2 { font-size: 1.5rem; flex: 1; }
.real-zoom { display: inline-flex; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 2px #fff; }
.real-zoom button { padding: 0.35rem 0.9rem; border: 0; background: transparent; color: #fff; font: 400 1rem var(--display); cursor: pointer; }
.real-zoom button[aria-pressed='true'] { background: #fff; color: var(--rojo-osc); }
.real-nota { padding: 0.5rem 1rem 0; }
.real-cuerpo { overflow: auto; padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.real-fig { margin: 0 auto; display: grid; gap: 0.5rem; }
.real-fig figcaption { font-weight: 700; }
.hoja.real-hoja {
  width: calc(var(--cm-ancho) * 1cm * var(--zoom));
  max-width: none;
  flex: none;
}
.real-hoja::after { display: none; }

/* ---------- Fondo liso: combinaciones de colores (fondo + letra) ---------- */
.campo-liso { display: grid; gap: 0.4rem; margin: 0.6rem 0; padding: 0.8rem; border-radius: 14px; background: #fff; box-shadow: var(--sombra-sticker); }
.campo-liso .etiqueta { margin: 0; font-weight: 700; }
.lisos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.liso-op {
  display: grid; place-items: center;
  width: 3.4rem; height: 2.4rem;
  border: 3px solid transparent;
  border-radius: 12px;
  background: var(--f);
  color: var(--l);
  font: 400 1.25rem/1 var(--display);
  box-shadow: 0 0 0 1px rgba(30, 42, 71, 0.2);
  cursor: pointer;
}
.liso-op[aria-pressed='true'] { border-color: var(--rojo); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rojo); }
.liso-op:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.sticker.liso { outline: 1px solid rgba(30, 42, 71, 0.14); outline-offset: -1px; }
.sticker.liso .rotulo { color: var(--nombre-color, var(--tinta)); }

/* Los pasos dicen "Paso N: …": el círculo con número solo aparece en el celular (pasos no actuales) y la tilde en los hechos */
.progreso li { padding-left: 0.75rem; }
.progreso li::before { display: none; }
.progreso li.hecho { padding-left: 0.25rem; }
.progreso li.hecho::before { display: inline-grid; }
@media (max-width: 40rem) {
  .progreso li:not(.actual) { padding-left: 0.25rem; }
  .progreso li:not(.actual)::before { display: inline-grid; }
}


/* ---------- Fotos de los productos (o el espacio reservado para ponerlas) ---------- */
.foto { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--sombra-sticker); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.35rem 0.7rem; background: linear-gradient(transparent, rgba(30, 42, 71, 0.65)); color: #fff; font: 400 1.05rem/1.2 var(--mano); }
.foto.vacia {
  display: grid; place-items: center; align-content: center; gap: 0.15rem;
  padding: 0.6rem; text-align: center;
  border: 2.5px dashed #c3cfdf; background: rgba(255, 255, 255, 0.55); box-shadow: none; color: var(--suave);
}
.foto.vacia .foto-icono { font-size: 1.8rem; line-height: 1; filter: grayscale(0.3); }
.foto.vacia .foto-titulo { font: 400 1.05rem/1.2 var(--mano); color: var(--texto); }
.foto.vacia .foto-nota { font-size: 0.8rem; line-height: 1.25; }
.f-portada { aspect-ratio: 16 / 7; }
.f-cuadrada { aspect-ratio: 1; }
.f-tipo { aspect-ratio: 4 / 3; margin: -0.4rem -0.5rem 0.4rem; border-radius: 12px; }
.f-ancha { aspect-ratio: 16 / 5; }
.f-paso { aspect-ratio: 4 / 3; }
.foto-bloque { display: grid; gap: 0.55rem; margin-top: 1.4rem; }
.foto-bloque h3 { font: 400 1.35rem var(--display); color: var(--rojo); }
.foto-fila { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.foto-fila.tres { grid-template-columns: repeat(3, 1fr); }
#foto-portada:not(:empty) { margin-bottom: 1.1rem; }
#foto-plancha:not(:empty) { margin-bottom: 0.9rem; }
@media (max-width: 40rem) { .f-portada { aspect-ratio: 16 / 9; } .f-tipo { aspect-ratio: 16 / 8; } .foto-fila { grid-template-columns: repeat(2, 1fr); } .foto-fila.tres { grid-template-columns: repeat(3, 1fr); } .foto.vacia .foto-nota { display: none; } }

/* Tipo de letra (nombre en relieve) */
.letras { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.letra-op { display: grid; justify-items: center; gap: 0.15rem; min-width: 7rem; padding: 0.55rem 1rem; border: 2px solid var(--linea); border-radius: 0.9rem; background: #fff; cursor: pointer; font: inherit; color: var(--texto); }
.letra-op[aria-checked='true'] { border-color: var(--rojo); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rojo); }
.letra-op:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
.letra-muestra { font: 400 1.7rem/1.1 'Lilita One', var(--display), sans-serif; text-transform: uppercase; }
.letra-muestra text { font-family: 'Lilita One', var(--display), sans-serif; }
.letra-muestra svg.e-lego text { font-family: 'LEGO', 'Lilita One', sans-serif; }
.letra-nombre { font-size: 0.85rem; }

.letra-muestra svg { display: block; height: 2.3rem; width: auto; overflow: visible; margin: 0 auto; }
.letra-op:has(svg) .letra-muestra { min-height: 2.1rem; display: flex; align-items: center; }

svg.e-baloo text { font-family: 'Baloo 2 ExtraBold', 'Lilita One', sans-serif; font-weight: 800; }
svg.e-rubik text { font-family: 'Rubik ExtraBold', sans-serif; font-weight: 800; }
svg.e-reborde { filter: drop-shadow(0 0 0.6px rgba(60, 40, 20, 0.55)); }

/* ---------- Archivo de impresión (solo lo usa window.__hojaImprimir) ---------- */
#lienzo-impresion { position: fixed; left: 0; top: 0; z-index: 99999; background: transparent; }
html.modo-impresion, html.modo-impresion body { background: transparent !important; }
html.modo-impresion body > *:not(#lienzo-impresion) { display: none !important; }
.hoja.imprimir { width: auto; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.hoja.imprimir::after { display: none; }
.hoja.imprimir .sticker { box-shadow: none; outline: none; }
.hoja.imprimir .sticker:not(.liso):not(.modelo) { background: transparent; }
.hoja.imprimir svg.vacio { opacity: 1; }
.celda { position: relative; background: transparent; }
.celda-corte { position: absolute; inset: 0.03cm; border: 0.03cm solid #000; pointer-events: none; }
.celda-pie { position: absolute; display: flex; align-items: center; gap: 0.2cm; color: #111; font: 700 7pt/1 'Nunito', 'Lilita One', sans-serif; }
.celda-pie svg { height: 100%; width: auto; display: block; }
.celda-marca { font: 800 10pt/1 'Outfit', sans-serif; letter-spacing: -0.03em; }
.celda-codigo { margin-left: auto; font: 700 8pt/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.05em; }

/* Tipo de letra del nombre en las etiquetas */
.fuentes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fuente-op { display: grid; gap: 0.1rem; justify-items: center; min-width: 6.4rem; padding: 0.45rem 0.8rem; border: 2px solid var(--linea); border-radius: 0.9rem; background: #fff; cursor: pointer; font: inherit; color: var(--texto); }
.fuente-op[aria-checked='true'] { border-color: var(--rojo); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rojo); }
.fuente-op:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
.fuente-muestra { font-size: 1.5rem; line-height: 1.15; max-width: 9rem; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.fuente-nombre { font-size: 0.8rem; color: var(--suave, #6b5b52); }

/* Banner de portada (paso 1) */
.banner-portada { margin-bottom: 1.2rem; }
.carrusel { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--sombra-sticker); background: var(--tinta); }
.carrusel .slides { position: relative; aspect-ratio: 5 / 2; }
.carrusel .slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.carrusel .slide.activa { opacity: 1; pointer-events: auto; }
.carrusel .slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carrusel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem 0.9rem; background: linear-gradient(transparent, rgba(30, 42, 71, 0.78)); color: #fff; font: 700 1.25rem/1.15 var(--display); letter-spacing: -0.01em; }
.carrusel .puntos { position: absolute; right: 0.9rem; bottom: 0.95rem; display: flex; gap: 0.35rem; }
.carrusel .punto { width: 0.6rem; height: 0.6rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); cursor: pointer; }
.carrusel .punto.activa { background: var(--lima); transform: scale(1.25); }
@media (max-width: 40rem) { .carrusel figcaption { font-size: 0.95rem; padding: 1.4rem 0.8rem 0.6rem; } .carrusel .puntos { bottom: 0.7rem; right: 0.7rem; } }
@media (prefers-reduced-motion: reduce) { .carrusel .slide { transition: none; } }

@media (max-width: 40rem) {
  .marca svg { width: 2.1rem; }
  .marca .palabra { font-size: 1.7rem; }
  .lema { font-size: 0.82rem; white-space: nowrap; padding: 0.1rem 0.4rem; }
  .cabecera { gap: 0.6rem; }
}

/* Código de descuento (pantalla de pago) */
.fila-codigo { display: flex; gap: 0.5rem; }
.fila-codigo input { flex: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.msg-codigo { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--rojo-osc); min-height: 1.2em; }
.msg-codigo.ok { color: #1e7a4a; font-weight: 700; }
.resumen .descuento dd, .resumen .descuento dt { color: #1e7a4a; font-weight: 700; }
.resumen .descuento .boton-texto { font-size: 0.85rem; margin-left: 0.3rem; }
.resumen [hidden] { display: none; }

.aviso-gratis { margin: 0.5rem 0 0; font-weight: 700; color: var(--rojo-osc); }
.aviso-gratis.logrado { color: #1e7a4a; }

.f-combo { aspect-ratio: 16 / 9; margin: 0 0 0.5rem; border-radius: 12px; }
.pack-op label.combo .foto { grid-column: 1; }

.pack-op label.combo .foto { justify-self: stretch; width: 100%; }
.progreso { align-items: center; }
.progreso li.actual { white-space: nowrap; }
.pack-op label.combo { grid-template-columns: 1fr; }
.pack-op label.combo > :not(.esquema):not(.insignia), .pack-op label.combo > .insignia { grid-column: 1 / -1; }