/* Hannah's Print · estilos v3 (mobile-first)
   Marca alegre y artesanal: Caprasimo (títulos), Nunito (texto), Caveat (notas a mano). Todas con licencia SIL OFL, servidas desde fuentes/. */
@font-face{font-family:"Caprasimo";src:url("../fuentes/Caprasimo-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fuentes/Nunito-Variable.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fuentes/Caveat-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --crema:#fff4e0; --papel:#fffaf0; --crema2:#ffe9c4; --tinta:#2d2233; --tinta2:#5b4a62;
  --coral:#d93a2c; --coral-txt:#c42f23; --coral-vivo:#ff5a4f; --sol:#ffc83d; --sol-osc:#f2a900;
  --caribe:#12b5ae; --caribe-osc:#0a6d69; --rosa:#ff8fab; --menta:#b9e8d3; --lila:#e5d7f5;
  --borde:#2d2233; --wa:#12803d; --wa-osc:#0d6a32;
  --radio:22px; --grueso:2.5px; --pegado:4px 4px 0 var(--tinta);
  --texto:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --titulo:"Caprasimo","Iowan Old Style",Georgia,serif;
  --mano:"Caveat","Segoe Script","Bradley Hand",cursive;
  --rebote:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:14px}
html{overflow-x:clip}
body{margin:0;font-family:var(--texto);font-size:1rem;color:var(--tinta);line-height:1.5;padding-bottom:0;overflow-x:clip;
  background-color:var(--crema);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
img,canvas,svg{max-width:100%}
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.1;margin:0;letter-spacing:.005em}
p{margin:0}
.oculto{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
[hidden]{display:none!important}
small{font-weight:600;color:var(--tinta2)}
.mano{font-family:var(--mano);font-weight:700;color:var(--coral-txt);font-size:1.25em;letter-spacing:0}
.ico{width:1.3em;height:1.3em;flex:none}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;box-shadow:0 0 0 6px var(--sol)}

/* ---------- franja de prueba y cabecera ---------- */
.aviso-proto{background:var(--tinta);color:var(--sol);text-align:center;font-size:.82rem;font-weight:700;padding:6px 10px;letter-spacing:.02em}
.cabecera{max-width:1180px;margin:0 auto;padding:12px 16px 4px;display:flex;align-items:center;gap:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-height:48px;margin-right:auto}
.marca-icono{width:46px;height:46px;flex:none;transition:transform .5s var(--rebote)}
.marca:hover .marca-icono{transform:rotate(-12deg) scale(1.08)}
.marca-texto{display:flex;flex-direction:column;line-height:1.1}
.marca-nombre{font-family:var(--titulo);font-size:1.4rem}
.marca-nombre em{font-style:normal;color:var(--coral-txt)}
.marca-lema{font-family:var(--mano);font-weight:700;font-size:1.05rem;color:var(--tinta2)}
.menu{display:none}
.btn-cabecera{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--sol);color:var(--tinta);border:var(--grueso) solid var(--borde);box-shadow:3px 3px 0 var(--tinta);font-weight:900;text-decoration:none;transition:transform .2s var(--rebote),box-shadow .2s}
.btn-cabecera:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:5px 5px 0 var(--tinta)}
.btn-cabecera:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}

main{max-width:1180px;margin:0 auto;padding:0 16px}

/* ---------- portada ---------- */
.portada{display:grid;gap:8px;padding:10px 0 26px;position:relative}
.sobretitulo{font-family:var(--mano);font-weight:700;font-size:1.4rem;color:var(--caribe-osc);transform:rotate(-1.5deg);transform-origin:left;margin-bottom:2px}
.portada h1{font-size:2.55rem;line-height:1.02}
.subrayado{position:relative;white-space:nowrap;display:inline-block;color:var(--coral-txt)}
.subrayado::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.14em;height:.32em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10c22-9 38 6 62-2s40-6 62 0 46 4 70-4' fill='none' stroke='%23ffc83d' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  z-index:-1;transform-origin:left;animation:dibujar .9s .5s both ease-out}
.portada-texto{display:contents}
.portada-texto>*{position:relative;z-index:1}
.sobretitulo{order:1}.portada h1{order:2}.portada-sub{order:3}.portada-cta{order:4}.hero-escena{order:5}.portada-datos{order:6}.privacidad{order:7}
.portada-sub{margin:8px 0 10px;font-size:1.05rem;color:var(--tinta2);max-width:34em;font-weight:600}
.portada-cta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px}
.enlace-mano{font-family:var(--mano);font-weight:700;font-size:1.45rem;color:var(--tinta);text-decoration:underline wavy var(--caribe);text-underline-offset:5px;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.enlace-mano:hover{color:var(--coral-txt)}
.portada-datos{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;font-weight:700;font-size:.95rem}
.portada-datos li{position:relative;padding-left:30px}
.portada-datos li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7 7.500.8-5.600 5 1.700 7.400L12 18l-6.600 4.200 1.700-7.400-5.600-5L9 9z' fill='%23ffc83d' stroke='%232d2233' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.portada-datos strong{font-family:var(--titulo);font-weight:400;font-size:1.2em;color:var(--coral-txt)}
.privacidad{display:flex;gap:10px;align-items:flex-start;margin-top:16px;background:var(--papel);border:2px dashed var(--caribe-osc);border-radius:16px 24px 16px 24px;padding:10px 14px;font-size:.88rem;color:var(--tinta);transform:rotate(-.6deg);max-width:34em}
.privacidad .ico{color:var(--tinta);margin-top:2px}

.hero-escena{position:relative;width:min(100%,380px);margin:10px auto 0;aspect-ratio:1/1.12;display:grid;place-items:center}
.hero-mancha{position:absolute;inset:-4% -8% 6% -8%;width:116%;height:90%;animation:mancha 14s ease-in-out infinite alternate}
.hero-giro{position:relative;width:84%;perspective:900px;z-index:2;filter:drop-shadow(0 14px 10px rgba(45,34,51,.18))}
#heroLienzo{display:block;width:100%;height:auto;aspect-ratio:3/4;cursor:pointer;animation:respira 5s ease-in-out infinite;transform-origin:50% 60%;-webkit-tap-highlight-color:transparent}
.confeti-flota{position:absolute;width:34px;height:34px;z-index:3;animation:flota 6s ease-in-out infinite}
.c1{left:2%;top:8%}.c2{right:6%;top:2%;animation-delay:-2s;width:24px;height:24px}.c3{right:0;top:46%;animation-delay:-4s;width:38px}.c4{left:-2%;top:56%;animation-delay:-1s;width:44px;height:44px}
.sello{position:absolute;right:0;bottom:8%;width:104px;z-index:4;transform:rotate(10deg)}
.sello-giro{transform-origin:60px 60px;animation:gira 22s linear infinite}
.hero-nombre{position:absolute;left:0;top:2%;z-index:4;font-family:var(--titulo);font-size:1.15rem;background:var(--rosa);border:var(--grueso) solid var(--borde);border-radius:12px 18px 12px 18px;padding:4px 14px;transform:rotate(-5deg);box-shadow:3px 3px 0 var(--tinta)}
.hero-puntos{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);display:flex;gap:0;z-index:5}
.hero-puntos button{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;cursor:pointer;padding:0}
.hero-puntos button span{width:14px;height:14px;border-radius:50%;background:var(--papel);border:2.5px solid var(--tinta);transition:transform .3s var(--rebote),background .2s}
.hero-puntos button[aria-pressed=true] span{background:var(--coral);transform:scale(1.5)}
.nota-mano{font-family:var(--mano);font-weight:700;font-size:1.25rem;color:var(--tinta2)}
.nota-hero{position:absolute;left:-2%;bottom:20%;width:132px;line-height:1;transform:rotate(-6deg);z-index:4;display:none}
.nota-hero svg{width:44px;height:38px;display:block;margin:4px 0 0 40px;color:var(--tinta)}

/* ---------- cinta ---------- */
.cinta{margin:6px calc(50% - 50vw) 0;overflow:hidden;background:var(--sol);border-block:var(--grueso) solid var(--borde);transform:rotate(-1.2deg);padding:10px 0;position:relative;z-index:2}
.cinta-pista{display:flex;align-items:center;gap:22px;width:max-content;animation:cinta 28s linear infinite;font-family:var(--titulo);font-size:1.15rem;white-space:nowrap}
.cinta-pista i{width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7 7.500.8-5.600 5 1.700 7.400L12 18l-6.600 4.200 1.700-7.400-5.600-5L9 9z' fill='%23ff5a4f' stroke='%232d2233' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- secciones ---------- */
.titulo-sec{font-size:2rem;line-height:1.08}
.titulo-sec .mano{display:block;font-size:1.15em;margin-top:2px}
.como,.ideas,.preguntas{padding:52px 0 8px}
.como-lista{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px}
.como-paso{position:relative;background:var(--papel);border:var(--grueso) solid var(--borde);box-shadow:var(--pegado);padding:20px 18px 18px 98px;min-height:120px}
.paso-a{border-radius:28px 12px 28px 12px;transform:rotate(-1deg);background:#fff0c2}
.paso-b{border-radius:12px 28px 12px 28px;transform:rotate(.8deg);background:#d6f3e6}
.paso-c{border-radius:28px 12px 28px 12px;transform:rotate(-.6deg);background:#ffdbe5}
.como-num{position:absolute;left:-10px;top:-16px;width:44px;height:44px;border-radius:50%;background:var(--coral);color:#fff;border:var(--grueso) solid var(--borde);display:grid;place-items:center;font-family:var(--titulo);font-size:1.5rem;box-shadow:2px 2px 0 var(--tinta)}
.como-ico{position:absolute;left:14px;top:50%;width:68px;height:68px;margin-top:-34px;transition:transform .4s var(--rebote)}
.como-paso:hover .como-ico{transform:rotate(-10deg) scale(1.12)}
.como-paso h3{font-size:1.35rem;margin-bottom:4px}
.como-paso p{color:var(--tinta2);font-weight:600;font-size:.97rem}

.ideas-sub{margin-top:8px;font-weight:600;color:var(--tinta2)}
.ideas-grid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 14px}
.idea{border:var(--grueso) solid var(--borde);box-shadow:var(--pegado);padding:10px 10px 14px;text-align:center;transition:transform .35s var(--rebote),box-shadow .2s;position:relative}
.idea canvas{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 70%;border-radius:12px;background:rgba(255,255,255,.65)}
.idea h3{font-size:1.2rem;margin:10px 0 2px}
.idea p{font-size:.88rem;font-weight:600;color:var(--tinta2);line-height:1.3}
.i1{background:var(--menta);border-radius:26px 10px 26px 10px;transform:rotate(-1.4deg)}
.i2{background:#ffe08a;border-radius:10px 26px 10px 26px;transform:rotate(1.2deg)}
.i3{background:var(--rosa);border-radius:26px 10px 26px 10px;transform:rotate(1deg)}
.i4{background:#bfe9f4;border-radius:10px 26px 10px 26px;transform:rotate(-1deg)}
.i5{background:#ffd0c2;border-radius:26px 10px 26px 10px;transform:rotate(-.8deg)}
.i6{background:#d9f0a8;border-radius:10px 26px 10px 26px;transform:rotate(1.3deg)}
.idea:hover{transform:translateY(-6px) rotate(0)!important;box-shadow:6px 8px 0 var(--tinta)}
.idea::before{content:"";position:absolute;top:-13px;left:50%;width:64px;height:22px;margin-left:-32px;background:rgba(255,200,61,.8);border:2px solid rgba(45,34,51,.25);transform:rotate(-3deg);z-index:2}

/* ---------- diseñador ---------- */
.disenador{padding:52px 0 0;scroll-margin-top:0}
.disenador-cabeza{margin-bottom:16px}
.disenador-sub{margin-top:8px;font-weight:600;color:var(--tinta2)}
.editor{display:block;position:relative}
.preview{position:relative;text-align:center}
.vista-barra{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.segmentado{display:inline-flex;border:var(--grueso) solid var(--borde);border-radius:999px;overflow:hidden;background:var(--papel)}
.seg{border:0;background:none;font:inherit;font-weight:800;min-height:44px;padding:0 14px;cursor:pointer;color:var(--tinta);white-space:nowrap;transition:background .2s}
.seg.activo{background:var(--tinta);color:var(--sol)}
.seg .cuenta{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--sol);color:var(--tinta);font-size:.74rem;margin-left:5px;padding:0 5px;font-weight:900}
.marco-lienzo{position:relative;display:inline-block;max-width:100%}
#lienzo{display:block;margin:0 auto;width:min(100%,calc(30vh * .75));aspect-ratio:3/4;height:auto;touch-action:none;cursor:grab;border-radius:18px;
  background:radial-gradient(circle at 50% 36%,#fffdf6 0,#ffe9bf 82%);border:var(--grueso) solid var(--borde);transform-origin:50% 70%}
#lienzo:active{cursor:grabbing}
.preview-ayuda{display:none;margin:8px auto 0;font-size:.85rem;font-weight:600;color:var(--tinta2);max-width:34em}

.paso{position:relative;background:var(--papel);border:var(--grueso) solid var(--borde);border-radius:var(--radio);box-shadow:var(--pegado);padding:18px 16px 16px;margin:24px 0 0}
.paso[data-paso="1"],.paso[data-paso="3"]{border-radius:26px 12px 26px 12px}
.paso[data-paso="2"],.paso-listo{border-radius:12px 26px 12px 26px}
.paso h2{font-size:1.4rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.paso h2 small{font-family:var(--texto);font-size:.82rem;flex-basis:100%;margin-top:-4px;padding-left:46px}
.num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:var(--grueso) solid var(--borde);font-size:1.15rem;flex:none;box-shadow:2px 2px 0 var(--tinta);transform:rotate(-6deg)}
.paso[data-paso="1"] .num{background:var(--coral);color:#fff}
.paso[data-paso="2"] .num{background:var(--caribe);color:var(--tinta)}
.paso[data-paso="3"] .num{background:var(--sol);color:var(--tinta)}
.num-ok{background:var(--caribe);color:var(--tinta)}
.campo{display:block;margin-bottom:14px}
.etiqueta{display:block;font-weight:800;font-size:.95rem;margin-bottom:8px}
.nota{margin:8px 0 0;font-size:.85rem;color:var(--tinta2);font-weight:600}
.nota-arriba{margin:0 0 12px;font-weight:800;color:var(--tinta);background:#fff0c2;border-radius:10px;padding:6px 12px;display:inline-block}
.alerta-suave{color:var(--coral-txt)}

.colores{display:flex;flex-wrap:wrap;gap:6px}
.muestra{position:relative;width:44px;height:44px;border-radius:50%;background:var(--c);border:var(--grueso) solid var(--borde);cursor:pointer;padding:0;transition:transform .25s var(--rebote)}
.muestra:hover{transform:scale(1.14) rotate(-6deg)}
.muestra.activo{transform:scale(1.12);box-shadow:0 0 0 3px var(--papel),0 0 0 6px var(--tinta)}
.muestra.activo::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.500l5 5L20 6.500' fill='none' stroke='%232d2233' stroke-width='4.500' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:pop .35s var(--rebote)}
.muestra.oscuro.activo::after{filter:invert(1)}
.colores.chicos{gap:6px}
.tallas,.fuentes{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:var(--grueso) solid var(--borde);background:#fff;border-radius:999px;padding:0 16px;font:inherit;font-weight:800;cursor:pointer;min-height:44px;color:var(--tinta);transition:transform .2s var(--rebote),background .2s}
.chip:hover{transform:translateY(-2px) rotate(-1.5deg)}
.chip.activo{background:var(--sol);box-shadow:2px 2px 0 var(--tinta)}
.chip-fuente{font-size:1.05rem}
/* ---- tipo de impresión: dos tarjetas lado a lado ---- */
.tipos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.tipo-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:var(--tinta);cursor:pointer;
  background:#fff;border:var(--grueso) solid var(--borde);border-radius:18px 8px 18px 8px;padding:20px 12px 12px;min-height:44px;
  transition:transform .25s var(--rebote),box-shadow .2s,background .2s}
.tipo-card:hover{transform:translateY(-3px) rotate(-.8deg)}
.tipo-premium{border-radius:8px 18px 8px 18px}
.tipo-card.activo{box-shadow:var(--pegado);transform:translate(-1px,-2px)}
.tipo-premium.activo{background:linear-gradient(135deg,#fff3d1,#ffd9d0)}
.tipo-eco.activo{background:#d7f3ee}
.tipo-sello{position:absolute;top:-11px;left:10px;font-size:.72rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:2px solid var(--borde);transform:rotate(-3deg)}
.tipo-premium .tipo-sello{background:var(--coral);color:#fff}
.tipo-eco .tipo-sello{background:var(--caribe);color:var(--tinta)}
.tipo-nombre{font-family:var(--titulo);font-weight:400;font-size:1.25rem;line-height:1.1}
.tipo-precio{font-weight:900;font-size:1rem;color:var(--coral-txt)}
.tipo-eco .tipo-precio{color:var(--caribe-osc)}
.tipo-desc{font-size:.8rem;font-weight:600;line-height:1.3;color:var(--tinta2);margin-top:2px}
.tipo-desc b{color:var(--tinta)}
.tipo-estrella{position:absolute;top:-14px;right:-8px;width:34px;height:34px;transition:transform .5s var(--rebote)}
.tipo-card:hover .tipo-estrella,.tipo-premium.activo .tipo-estrella{transform:rotate(25deg) scale(1.15)}
.nota-precios{font-size:.78rem;font-weight:600}
.aviso-tipo{margin-top:10px;background:#fff0c2;border:var(--grueso) dashed var(--borde);border-radius:14px;padding:10px 12px;font-size:.88rem;font-weight:700}
.aviso-tipo p{margin:0 0 8px}
.aviso-tipo button{background:var(--sol)}
.muestra.bloqueado{opacity:.4;background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.55) 5px 8px)}
.muestra.bloqueado:hover{transform:none}
.sello-tipo{display:inline-block;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em;padding:1px 9px;border-radius:999px;border:2px solid var(--borde);vertical-align:middle}
.sello-tipo.premium{background:var(--coral);color:#fff}
.sello-tipo.economica{background:var(--caribe);color:var(--tinta)}
.idea .sello-tipo{position:absolute;top:10px;right:-6px;z-index:3;transform:rotate(5deg);box-shadow:2px 2px 0 var(--tinta)}
.precio-esta{margin:0 0 10px;font-size:.92rem;font-weight:700}
.precio-esta strong{color:var(--coral-txt)}

.fila{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:var(--grueso) solid var(--borde);border-radius:999px;padding:0 24px;font:inherit;font-size:1.05rem;font-weight:900;cursor:pointer;min-height:50px;text-decoration:none;color:var(--tinta);
  box-shadow:var(--pegado);transition:transform .25s var(--rebote),box-shadow .2s,background .2s}
.btn:hover:not(:disabled){transform:translate(-2px,-3px) rotate(-1deg);box-shadow:6px 7px 0 var(--tinta)}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta)}
.btn-principal{background:var(--coral);color:#fff}
.btn-xl{min-height:58px;font-size:1.2rem;padding:0 30px}
.btn-xl .flecha{transition:transform .3s var(--rebote)}
.btn-xl:hover .flecha{transform:translateX(6px)}
.btn-suave{background:var(--crema2)}
.btn-suave:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-ia{background:repeating-linear-gradient(135deg,#fff 0 8px,#f3ecdc 8px 16px);color:var(--tinta2);border-style:dashed;box-shadow:none;cursor:not-allowed;font-weight:800;font-size:.95rem}
.btn-ia small{color:var(--tinta2);font-weight:800}
.btn-grande{width:100%;font-size:1.15rem;min-height:56px}
.btn-enlace{background:none;border:0;color:var(--coral-txt);text-decoration:underline;font:inherit;font-weight:800;cursor:pointer;margin-top:8px;padding:12px 0;min-height:44px}
.btn-mini{border:2px solid var(--borde);background:#fff;border-radius:999px;padding:0 14px;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer;color:var(--tinta);min-height:44px;transition:transform .2s var(--rebote),background .2s}
.btn-mini:hover:not(:disabled){background:var(--sol);transform:translateY(-2px) rotate(-1.5deg)}
.btn-mini:disabled{opacity:.45;cursor:not-allowed}
.btn-mini.peligro{color:#a8201a}
.btn-mini.peligro:hover:not(:disabled){background:#ffd7d2}
.btn-whatsapp{background:var(--wa);color:#fff}
.btn-whatsapp:disabled{background:#d9d3c4;color:#6a5f6f;cursor:not-allowed;box-shadow:none;border-color:#9a8fa0}
.btn.lleno{opacity:.7}

.mensaje{margin:10px 0 0;font-size:.92rem;min-height:1em;font-weight:700}
.mensaje.ok{color:#0d6a3a}.mensaje.aviso{color:#8a4a00}.mensaje.error{color:#a8201a}
.mensaje:not(:empty){animation:entra .35s var(--rebote)}
.controles{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;align-items:end;margin-top:12px}
.deslizador{display:flex;flex-direction:column;gap:2px;font-size:.88rem;font-weight:800}
input[type=range]{width:100%;accent-color:var(--coral);height:34px}
textarea,input[type=text]{width:100%;font:inherit;font-weight:600;border:var(--grueso) solid var(--borde);border-radius:14px;padding:10px 14px;background:#fff;color:var(--tinta);min-height:46px}
textarea::placeholder,input::placeholder{color:#7a6b80}
textarea:focus,input[type=text]:focus{outline:3px solid var(--sol);outline-offset:1px}

.sel-titulo{margin:12px 0 0;font-size:.95rem}
.fila-botones{margin-top:10px}
.capas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.capa{display:flex;align-items:center;gap:8px;border:2px solid var(--borde);background:#fff;border-radius:14px;padding:4px 14px 4px 4px;font:inherit;font-size:.88rem;font-weight:800;cursor:pointer;min-height:50px;color:var(--tinta);transition:transform .2s var(--rebote)}
.capa:hover{transform:translateY(-2px)}
.capa canvas{width:40px;height:40px;border-radius:10px;flex:none}
.capa.activa{background:#c9f0ee;box-shadow:3px 3px 0 var(--caribe-osc);border-color:var(--caribe-osc)}
.vacio.chico{padding:4px 0;text-align:left;font-size:.9rem;font-weight:600}

.qf{margin-top:16px;border:2px dashed var(--caribe-osc);background:#e9f8f4;border-radius:18px 10px 18px 10px;padding:12px 14px}
.interruptor{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:48px}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.int-pista{position:relative;flex:none;width:56px;height:32px;border-radius:16px;background:#cfc3bd;border:var(--grueso) solid var(--borde);transition:background .25s}
.int-pista::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--borde);transition:transform .35s var(--rebote)}
.interruptor input:checked + .int-pista{background:var(--caribe)}
.interruptor input:checked + .int-pista::after{transform:translateX(24px)}
.interruptor input:focus-visible + .int-pista{outline:3px solid var(--tinta);outline-offset:3px}
.qf-previas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.qf-previas figure{margin:0;text-align:center}
.qf-previas canvas{width:100%;height:auto;aspect-ratio:1;border-radius:12px;border:2px solid var(--borde);background:#fff}
.qf-previas figcaption{font-family:var(--mano);font-size:1.2rem;font-weight:700;margin-top:2px}

.cantidad{display:inline-flex;align-items:center;border:var(--grueso) solid var(--borde);border-radius:999px;background:#fff;overflow:hidden}
.cantidad button{width:46px;height:44px;border:0;background:var(--crema2);font:inherit;font-size:1.4rem;font-weight:900;cursor:pointer;color:var(--tinta);transition:background .15s}
.cantidad button:hover{background:var(--sol)}
.cantidad output{min-width:44px;text-align:center;font-weight:900;font-size:1.1rem}
.fila-cant{justify-content:space-between;margin-bottom:14px}
.fila-cant .etiqueta{margin:0}

/* ---------- pedido ---------- */
.pedido{margin:56px 0 0;background:#d6f3e6;border:var(--grueso) solid var(--borde);border-radius:30px 14px 30px 14px;padding:22px 16px 20px;box-shadow:var(--pegado);scroll-margin-top:16px;position:relative}
.pedido h2{margin-bottom:14px}
.contador{background:var(--papel);border:var(--grueso) solid var(--borde);border-radius:18px;padding:14px 14px 12px;margin-bottom:16px}
.contador-barra{height:20px;background:#fff;border:var(--grueso) solid var(--borde);border-radius:99px;overflow:hidden;position:relative}
.contador-relleno{height:100%;width:0;border-radius:99px;transition:width .7s var(--rebote);
  background:repeating-linear-gradient(-45deg,var(--sol) 0 12px,#ffdd7a 12px 24px);background-size:34px 34px;animation:rayas 1.2s linear infinite}
.contador.listo .contador-relleno{background:repeating-linear-gradient(-45deg,var(--caribe) 0 12px,#41cfc9 12px 24px);background-size:34px 34px}
.marcas{list-style:none;margin:8px 0 2px;padding:0;display:flex}
.marcas li{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:4px;font-family:var(--titulo);font-size:.95rem;color:var(--tinta2)}
.marcas svg{width:30px;height:30px;fill:#fff;stroke:var(--tinta);stroke-width:3.500;stroke-linejoin:round;transition:fill .3s,transform .5s var(--rebote)}
.marcas li.hecho{color:var(--tinta)}
.marcas li.hecho svg{fill:var(--coral-vivo);transform:rotate(-8deg) scale(1.2)}
.contador p{margin:6px 0 0;font-weight:800}
.contador.listo{background:#e3fbf6}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.item{display:flex;gap:12px;flex-wrap:wrap;border:var(--grueso) solid var(--borde);border-radius:18px;padding:10px;background:var(--papel);animation:entra .45s var(--rebote)}
.item:nth-child(even){border-radius:12px 22px 12px 22px}
.item.editando{background:#fff0c2;box-shadow:3px 3px 0 var(--tinta)}
.item-minis{display:flex;gap:6px;flex:none;align-self:flex-start}
.item-minis img{width:72px;height:auto;aspect-ratio:3/4;border-radius:10px;background:#ffe9bf;border:2px solid var(--borde);flex:none}
.item-info{flex:1;min-width:0}
.item-info h3{font-size:1.15rem;margin-bottom:2px}
.item-det{margin:2px 0;font-size:.88rem;color:var(--tinta2);overflow-wrap:anywhere;font-weight:600}
.item-lado{display:block}
.item-precio{margin:2px 0 8px;font-weight:900;font-size:.95rem}
.item-acciones{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cantidad-chica button{width:44px;height:44px}
.vacio{color:var(--tinta2);text-align:center;padding:14px 6px}
.vacio-grande{padding:22px 10px}
.vacio-grande svg{width:120px;height:90px;display:block;margin:0 auto 6px;animation:cuelga 3.2s ease-in-out infinite;transform-origin:60px 14px}
.vacio-grande p{font-weight:700;font-size:1.02rem;line-height:1.4}
.vacio-grande strong{font-family:var(--titulo);font-weight:400;font-size:1.25rem;color:var(--tinta)}
.resumen{margin-top:16px}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:2.5px dashed var(--borde);margin-bottom:12px;font-weight:700}
.total strong{font-family:var(--titulo);font-weight:400;font-size:1.8rem;white-space:nowrap}
.bloqueo{margin:12px 0 0;font-size:.92rem;font-weight:700;color:#7a3f00;background:#fff0c2;border-radius:12px}
.bloqueo:not(:empty){padding:10px 14px;border:2px dashed #b36b00}
.aviso-fotos{margin-top:14px;background:var(--papel);border:2px dashed var(--borde);border-radius:14px;padding:10px 14px;font-size:.9rem;font-weight:600}
.tiempo-entrega{margin-top:14px;display:flex;gap:10px;align-items:flex-start;background:#d9f3e8;border:2px solid var(--borde);border-radius:14px;padding:10px 14px;font-size:.95rem;font-weight:600;line-height:1.35}
.tiempo-entrega svg{flex:none;margin-top:1px}
.detalle-msg{margin-top:14px;font-size:.92rem}
.detalle-msg summary{cursor:pointer;font-weight:800;padding:10px 0;min-height:44px}
.detalle-msg textarea{margin:6px 0 10px;font-size:.85rem;background:#fff}

/* ---------- preguntas ---------- */
.preguntas{padding-bottom:20px}
.faq{margin-top:22px;display:grid;gap:12px}
.faq details{background:var(--papel);border:var(--grueso) solid var(--borde);border-radius:18px;box-shadow:3px 3px 0 var(--tinta);overflow:hidden}
.faq details:nth-child(even){background:#fff0c2}
.faq summary{list-style:none;cursor:pointer;padding:14px 56px 14px 18px;font-weight:900;min-height:56px;position:relative;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:14px;top:50%;margin-top:-17px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--sol);border:2px solid var(--borde);font-family:var(--titulo);font-size:1.4rem;line-height:1;transition:transform .35s var(--rebote)}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--rosa)}
.faq details p{padding:0 18px 16px;font-weight:600;color:var(--tinta2)}
.faq details[open] p{animation:entra .35s ease-out}

/* ---------- pie ---------- */
.pie{margin-top:48px;position:relative;text-align:center;color:#f6ecdc}
.pie-ola{display:block;width:100%;height:34px;margin-bottom:-1px}
.pie-cuerpo{background:var(--tinta);padding:18px 18px 110px}
.pie-marca{font-family:var(--titulo);font-size:2rem;color:#fff}
.pie-marca em{font-style:normal;color:var(--sol)}
.pie-mano{font-family:var(--mano);font-weight:700;font-size:1.6rem;color:var(--rosa);margin:2px 0 14px}
.btn-whatsapp-pie{background:var(--wa);color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--sol)}
.pie-chico{font-size:.82rem;margin-top:14px;color:#e6d9c6;font-weight:600;max-width:40em;margin-inline:auto}

/* ---------- barra móvil y aviso ---------- */
  transition:transform .5s var(--rebote),opacity .3s,background .3s}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;background:var(--tinta);color:#fff;border:2px solid var(--sol);padding:12px 18px;border-radius:16px;max-width:min(92vw,440px);text-align:center;font-size:.95rem;font-weight:700;box-shadow:4px 4px 0 var(--sol);animation:toast .5s var(--rebote)}
#confeti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------- movimiento ---------- */
.js .rev{opacity:0;transform:translateY(26px) rotate(var(--r,0deg));transition:opacity .6s ease-out,transform .7s var(--rebote)}
.js .rev.visto{opacity:1;transform:none}
.js .como-paso.rev.visto.paso-a{transform:rotate(-1deg)}.js .como-paso.rev.visto.paso-b{transform:rotate(.8deg)}.js .como-paso.rev.visto.paso-c{transform:rotate(-.6deg)}
.js .idea.rev.visto.i1{transform:rotate(-1.4deg)}.js .idea.rev.visto.i2{transform:rotate(1.2deg)}.js .idea.rev.visto.i3{transform:rotate(1deg)}.js .idea.rev.visto.i4{transform:rotate(-1deg)}.js .idea.rev.visto.i5{transform:rotate(-.8deg)}.js .idea.rev.visto.i6{transform:rotate(1.3deg)}
.js .idea.rev.visto:hover{transform:translateY(-6px) rotate(0)}
@keyframes dibujar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes respira{0%,100%{transform:scale(1) rotate(-.6deg)}50%{transform:scale(1.025) rotate(.6deg)}}
@keyframes flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(14deg)}}
@keyframes mancha{from{transform:rotate(-3deg) scale(1)}to{transform:rotate(4deg) scale(1.05)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes cinta{to{transform:translateX(-50%)}}
@keyframes rayas{to{background-position:34px 0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes entra{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast{from{opacity:0;transform:translate(-50%,20px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cuelga{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rev{opacity:1;transform:none}
  .cinta-pista{width:auto;flex-wrap:wrap;justify-content:center}
  .cinta-pista>:nth-child(n+9){display:none}
}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  body{padding-bottom:0}
  .toast{bottom:24px}
  .menu{display:flex;gap:6px;margin-right:12px}
  .menu a{padding:10px 14px;border-radius:999px;font-weight:800;color:var(--tinta);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
  .menu a:hover{background:var(--sol)}
  .cabecera{padding:16px 24px 6px}
  main{padding:0 24px}
  .portada{grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:30px 0 56px;min-height:640px}
  .portada-texto{display:block}
  .portada-texto>*{order:0}
  .portada-sub{margin:14px 0 18px}
  .hero-escena{grid-column:2;grid-row:1}
  .portada h1{font-size:4rem}
  .portada-sub{font-size:1.25rem}
  .hero-escena{width:100%;max-width:520px;margin:0 0 0 auto}
  .nota-hero{display:block}
  .hero-nombre{font-size:1.4rem;top:4%}
  .sello{width:128px}
  .titulo-sec{font-size:2.8rem}
  .como-lista{grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
  .como-paso{padding:92px 20px 22px}
  .como-ico{left:50%;top:14px;margin:0 0 0 -38px;width:76px;height:76px}
  .como-num{left:14px;top:-18px}
  .como-paso h3,.como-paso p{text-align:center}
  .ideas-grid{grid-template-columns:repeat(3,1fr);gap:34px 26px;margin-top:40px}
  .idea h3{font-size:1.5rem}.idea p{font-size:.95rem}
  .editor{display:grid;grid-template-columns:minmax(380px,470px) 1fr;gap:34px;align-items:start}
  .preview{position:sticky;z-index:6;top:14px;margin:0;padding:16px;border:var(--grueso) solid var(--borde);border-radius:30px 14px 30px 14px;background:var(--papel);box-shadow:var(--pegado)}
  .preview::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:26px;margin-left:-45px;background:rgba(255,200,61,.85);border:2px solid rgba(45,34,51,.25);transform:rotate(2deg)}
  #lienzo{width:100%;max-width:calc(66vh * .75)}
  .preview-ayuda{display:block}
  .asist-cabeza+.paso{margin-top:18px}
  .pedido{padding:30px 30px 28px;margin-top:70px}
  .lista{grid-template-columns:1fr 1fr}
  .item-minis img{width:84px}
  .faq{grid-template-columns:1fr 1fr;align-items:start}
  .pie-cuerpo{padding-bottom:40px}
}
@media (max-width:380px){ .marca-lema{display:none} .portada h1{font-size:2.2rem} .hero-nombre{font-size:1rem} }
#btnDescargarActual{white-space:nowrap}

/* ---- ideas navideñas (solo en la galería; se activan con TEMA_NAVIDAD en app.js) ---- */
.ideas-navidad{margin-top:44px}
.ideas-nav-titulo{display:flex;align-items:center;gap:10px;font-family:var(--titulo);font-weight:400;font-size:1.6rem;margin:0 0 4px}
.ideas-nav-titulo svg{width:30px;height:30px;flex:none;animation:giraEstrella 6s linear infinite}
@keyframes giraEstrella{50%{transform:rotate(18deg) scale(1.12)}}
.n1{background:#fff0d2;border-radius:26px 10px 26px 10px;transform:rotate(-1.2deg)}
.n2{background:#c9ebd3;border-radius:10px 26px 10px 26px;transform:rotate(1.2deg)}
.n3{background:#ffd3cc;border-radius:26px 10px 26px 10px;transform:rotate(.9deg)}
.n4{background:#ffe08a;border-radius:10px 26px 10px 26px;transform:rotate(-1deg)}
.n5{background:#bfe9f4;border-radius:26px 10px 26px 10px;transform:rotate(-.8deg)}
.n6{background:#ffc8d6;border-radius:10px 26px 10px 26px;transform:rotate(1.1deg)}
@media (prefers-reduced-motion:reduce){.ideas-nav-titulo svg{animation:none}}
.js .idea.rev.visto.n1{transform:rotate(-1.2deg)}.js .idea.rev.visto.n2{transform:rotate(1.2deg)}.js .idea.rev.visto.n3{transform:rotate(.9deg)}.js .idea.rev.visto.n4{transform:rotate(-1deg)}.js .idea.rev.visto.n5{transform:rotate(-.8deg)}.js .idea.rev.visto.n6{transform:rotate(1.1deg)}

/* ---------- asistente de 3 pasos ---------- */
.asist-cabeza{margin-top:18px;background:var(--papel);border:var(--grueso) solid var(--borde);border-radius:18px 8px 18px 8px;padding:10px 14px 8px;box-shadow:3px 3px 0 var(--tinta)}
.asist-fila{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.asist-contador{font-family:var(--titulo);font-size:1.3rem;line-height:1.1}
.asist-pedido{font-size:.82rem;font-weight:800;color:var(--tinta2)}
.asist-edicion{margin-top:6px;font-size:.88rem;font-weight:800;background:#fff0c2;border-radius:10px;padding:5px 10px;color:var(--tinta)}
.asist-progreso{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:6px}
.asist-progreso li{flex:1;min-width:0;position:relative}
.asist-progreso li+li::before{content:"";position:absolute;left:-9px;top:22px;width:12px;height:3px;background:var(--tinta);border-radius:2px;opacity:.35}
.asist-punto{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;font:inherit;color:var(--tinta2);cursor:pointer;min-height:48px;padding:2px 0}
.asist-bola{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:var(--grueso) solid var(--borde);background:#fff;font-family:var(--titulo);font-size:1.05rem;color:var(--tinta);transition:transform .35s var(--rebote),background .2s}
.asist-nombre{font-size:.78rem;font-weight:800;line-height:1.1;text-align:center}
.asist-punto.hecho .asist-bola{background:var(--caribe)}
.asist-punto.activo{color:var(--tinta)}
.asist-punto.activo .asist-bola{background:var(--coral);color:#fff;transform:scale(1.14) rotate(-6deg);box-shadow:2px 2px 0 var(--tinta)}
.asist-punto:hover .asist-bola{transform:scale(1.08)}
.asistente .paso:not([hidden]){animation:entra .4s var(--rebote)}
.subbloque{margin-top:18px;padding-top:14px;border-top:2.5px dashed var(--borde)}
.subbloque h3{font-size:1.2rem;margin-bottom:10px}
.subbloque h3 small{display:block;font-family:var(--texto);font-size:.82rem;margin-top:2px}
.asist-nav{margin:16px 0 0}
.asist-botones{display:flex;gap:10px}
.asist-botones .btn{min-height:54px;flex:1;padding:0 14px}
.asist-botones .btn-atras{flex:0 0 36%}
.msg-paso{margin:0 0 8px;min-height:0;font-size:.9rem}
.msg-paso:not(:empty){background:#ffe3df;border:2px dashed #a8201a;border-radius:12px;padding:8px 12px}
.revision{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.rv-minis{display:flex;gap:8px;flex:none}
.rv-minis figure{margin:0;text-align:center}
.rv-minis img{width:84px;height:auto;aspect-ratio:3/4;border-radius:10px;background:#ffe9bf;border:2px solid var(--borde);display:block}
.rv-minis figcaption{font-family:var(--mano);font-weight:700;font-size:1.1rem}
.rv-lista{list-style:none;margin:0;padding:0;flex:1;min-width:210px;display:grid;gap:6px}
.rv-lista li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;background:#fff;border:2px solid var(--borde);border-radius:12px;padding:6px 8px 6px 12px}
.rv-k{font-weight:900;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--coral-txt)}
.rv-v{font-weight:700;font-size:.9rem;overflow-wrap:anywhere;grid-column:1/-1;grid-row:2}
.rv-lista li .btn-mini{grid-column:3;grid-row:1}
.paso-listo{background:#e3fbf6}
.listo-texto{font-weight:700;margin:0 0 14px}
.fila-listo .btn{flex:1 1 200px}
.btn-whatsapp.ocupado{opacity:.75;cursor:progress}

/* ---------- ventanita de envío ---------- */
.dlg-fondo{position:fixed;inset:0;z-index:60;background:rgba(45,34,51,.62);display:grid;place-items:center;padding:16px}
.dlg{background:var(--papel);border:var(--grueso) solid var(--borde);border-radius:26px 12px 26px 12px;box-shadow:6px 6px 0 var(--sol);padding:20px 18px 12px;width:min(100%,460px);max-height:92vh;overflow:auto;animation:entra .4s var(--rebote);outline:none}
.dlg h3{font-size:1.5rem;margin-bottom:8px}
.dlg p{font-weight:600;color:var(--tinta2)}
.dlg-archivos{margin:10px 0 0;padding-left:20px;font-size:.84rem;font-weight:700;color:var(--tinta);overflow-wrap:anywhere}
.dlg-botones{display:grid;gap:10px;margin-top:14px}
.dlg-botones .btn{width:100%;font-size:1rem}
.dlg .btn-enlace{display:block;margin:6px auto 0}
@media (min-width:600px){ .asist-nombre{font-size:.86rem} }
@media (min-width:900px){
  .asist-nav{position:sticky;z-index:7;margin:18px 0 0;padding:8px 12px 10px;background:var(--crema);border:var(--grueso) solid var(--borde);border-radius:18px;bottom:12px;box-shadow:3px 3px 0 var(--tinta)}
  .asist-botones .btn-atras{flex:0 0 30%}
}
.como-final{margin-top:26px;font-weight:700;font-size:1.05rem;text-align:center;background:var(--papel);border:2px dashed var(--caribe-osc);border-radius:16px 24px 16px 24px;padding:12px 16px}
@media (max-width:380px){ .asist-nombre{font-size:.72rem} .asist-contador{font-size:1.15rem} }

@media (min-width:900px){ .toast{bottom:24px} }


/* =====================================================================
   v3.4 · Celular sencillo: todo fluye en la página (sin barras fijas, sin vista previa pegada)
   Cada paso muestra: título → camiseta pequeña → UNA acción → botones Atrás / Siguiente en línea.
   ===================================================================== */
.tipo-corta,.solo-mov{display:none}
.acordeon>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;font-weight:900;background:#fff;
  border:var(--grueso) solid var(--borde);border-radius:14px 8px 14px 8px;transition:background .2s}
.acordeon>summary::-webkit-details-marker{display:none}
.acordeon>summary::after{content:"+";margin-left:auto;font-family:var(--titulo);font-size:1.5rem;line-height:1}
.acordeon[open]>summary::after{content:"–"}
.acordeon>summary:hover{background:#fff6dc}
.acordeon>summary small{font-weight:700;color:var(--tinta2);font-size:.8rem}
.acordeon[open]>summary{background:#fff0c2}
.acordeon>:not(summary){margin-top:10px}
.acordeon-mini>summary{min-height:44px;font-size:.92rem}
.subbloque.acordeon{border-top:0;padding-top:0}
.nota-lado{margin:0}
.mas-info{margin-top:10px}
.mas-info>summary{cursor:pointer;font-weight:800;font-size:.9rem;color:var(--tinta2);min-height:40px;display:flex;align-items:center}
.mas-info p{margin:4px 0 0;font-size:.88rem;font-weight:600;color:var(--tinta2)}

@media (max-width:899px){
  .solo-esc{display:none!important}
  .solo-mov{display:block}
  .toast{bottom:20px}
  .editor{display:block}
  .disenador{padding-top:36px}
  /* encabezado del asistente: «Paso 2 de 3» + 3 puntitos, una sola vez */
  .asist-cabeza{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;margin-top:6px;padding:6px 8px 6px 14px;border-radius:16px 8px 16px 8px}
  .asist-fila{order:1}
  .asist-contador{font-size:1.15rem}
  .asist-progreso{order:2;margin:0;gap:0}
  .asist-progreso li+li::before{display:none}
  .asist-punto{min-height:44px;width:40px;padding:0}
  .asist-nombre{display:none}
  .asist-bola{width:26px;height:26px;font-size:.85rem;border-width:2.5px}
  .asist-punto.activo .asist-bola{transform:scale(1.15)}
  .asist-edicion{order:3;flex-basis:100%;margin:0 0 4px}
  .asist-cabeza+.paso{margin-top:12px}
  .asistente .paso{padding:16px 14px 14px;margin-top:12px}
  .paso h2{font-size:1.3rem;margin-bottom:10px}
  /* la camiseta, dentro del paso y a buen tamaño (no queda pegada) */
  .slot-previa{margin:0 0 14px}
  .slot-previa:empty{display:none}
  .preview-oculta{display:none}
  #btnDescargarActual{display:none}
  .vista-barra{justify-content:center;margin-bottom:8px}
  .seg{min-height:40px;padding:0 16px;font-size:.95rem}
  .marco-lienzo{display:block}
  #lienzo{width:min(100%,calc(34vh * .75),250px)}
  .preview-ayuda{display:none;font-size:.8rem;margin-top:6px}
  #paso2 .preview-ayuda{display:block}
  /* paso 1 */
  .tipo-card{padding:18px 10px 10px}
  .tipo-desc{display:none}
  .tipo-corta{display:block;font-size:.8rem;font-weight:700;line-height:1.25;color:var(--tinta2);margin-top:2px}
  .colores{gap:10px}
  .muestra{width:46px;height:46px}
  .colores.chicos{gap:8px}
  .chip{min-height:48px;min-width:56px;padding:0 14px}
  .tallas{gap:8px}
  /* paso 2: subir foto es la acción principal */
  .fila-subir{display:block}
  .fila-subir .btn{width:100%;min-height:64px;font-size:1.2rem}
  .nota-arriba{display:block;text-align:center;margin:10px 0 0}
  #bloqueCapas{margin-top:12px}
  #bloqueCapas.sin-capas{display:none}
  #bloqueSel{background:#e9faf6;border:2px dashed var(--caribe-osc);border-radius:16px;padding:10px 12px 12px;margin:12px 0}
  .sel-titulo{margin:0 0 6px}
  .fila-eliminar{margin-top:10px}
  .qf{margin-top:12px}
  .subbloque.acordeon{margin-top:14px}
  /* paso 3 */
  .rv-minis img{width:104px}
  .rv-lista{min-width:0;flex-basis:100%}
  .rv-lista li{padding:4px 6px 4px 12px;grid-template-columns:76px 1fr auto;gap:0 8px}
  .rv-v{grid-column:2;grid-row:1;font-size:.88rem}
  .rv-lista li .btn-mini{grid-column:3;min-height:40px;padding:0 12px}
  .asist-pedido{margin:12px 0 0;text-align:center;font-size:.92rem;background:#fff0c2;border-radius:10px;padding:6px 10px}
  .btn-enlace{min-height:44px}
  /* botones en línea al final del contenido */
  .asist-nav{margin:16px 0 0;padding:0}
  .asist-botones{gap:10px}
  .asist-botones .btn{min-height:58px;font-size:1.1rem}
  .asist-botones .btn-atras{flex:0 0 36%}
  .item-info{flex:1 1 100%}
  .item-minis img{width:84px}
  .item-acciones{gap:8px}
  .fila-listo{flex-direction:column;align-items:stretch}
  .fila-listo .btn{width:100%;min-height:58px;flex:none}
}

/* ---- v3.5: «Usar esta idea» (la galería ahora va debajo del diseñador) ---- */
.idea-usar{margin-top:10px;font:inherit;font-weight:900;font-size:.9rem;color:var(--tinta);background:#fff;border:var(--grueso) solid var(--borde);border-radius:999px;padding:8px 16px;min-height:44px;cursor:pointer;box-shadow:2px 3px 0 var(--tinta);transition:transform .15s}
.idea-usar:hover{transform:translateY(-2px)}
.idea-usar:focus-visible{outline:3px solid var(--caribe);outline-offset:2px}

/* =====================================================================
   v3.6 · DISPONIBILIDAD (agotado) y ZOOM de la camiseta
   ===================================================================== */
/* ---- agotado: se ve apagado, con rayas, y no se puede escoger ---- */
.tipo-agotado{display:inline-block;margin-top:4px;font-size:.74rem;font-weight:900;color:#a8201a;background:#ffd7d2;border:2px solid var(--borde);border-radius:999px;padding:0 9px}
.tipo-agotado[hidden]{display:none}
.tipo-card.agotado{opacity:.62;background:#f1ece4;cursor:not-allowed;background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(45,34,51,.06) 9px 12px)}
.tipo-card.agotado:hover{transform:none}
.muestra.agotado{opacity:.5;cursor:not-allowed;overflow:hidden}
.muestra.agotado:hover{transform:none}
.muestra.agotado::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;margin-top:-1.5px;background:var(--tinta);transform:rotate(-45deg)}
.chip.agotado{opacity:.5;cursor:not-allowed;text-decoration:line-through;background:#f1ece4}
.chip.agotado:hover{transform:none}
.nota-agotado{margin:8px 0 0;font-weight:700;color:var(--tinta);background:#fff0c2;border-radius:10px;padding:6px 10px}
.nota-agotado[hidden]{display:none}
.item.agotado{border-color:#a8201a}
.item-aviso{flex-basis:100%;margin:6px 0 0;padding:6px 10px;border-radius:10px;background:#ffd7d2;color:#7a150f;font-size:.88rem;font-weight:800}

/* ---- botón «Ampliar» sobre la camiseta ---- */
.btn-ampliar{position:absolute;right:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 14px;border:2px solid var(--borde);border-radius:999px;
  background:rgba(255,250,240,.94);color:var(--tinta);font:inherit;font-size:.86rem;font-weight:900;cursor:pointer;box-shadow:2px 2px 0 var(--tinta);transition:transform .2s var(--rebote),background .2s}
.btn-ampliar:hover{background:var(--sol);transform:translateY(-2px) rotate(-1.5deg)}
.btn-ampliar:focus-visible,.zoom-btn:focus-visible,.zoom-nivel:focus-visible,.zoom-cerrar:focus-visible,.ampliable:focus-visible,.zoom-area:focus-visible{outline:3px solid var(--sol);outline-offset:3px}
.ampliable{cursor:zoom-in}
.ampliable:hover{filter:brightness(1.03)}
body.zoom-abierto{overflow:hidden}

/* ---- vista ampliada (pantalla completa) ---- */
.zoom-fondo{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(45,34,51,.985);color:#fff}
.zoom-fondo[hidden]{display:none}
.zoom-barra{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.zoom-fondo .segmentado{background:var(--papel);border-color:#fff}
.zoom-cerrar{min-height:48px;min-width:48px;padding:0 18px;border:2.5px solid var(--borde);border-radius:999px;background:var(--sol);color:var(--tinta);font:inherit;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:3px 3px 0 #fff}
.zoom-area{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:16px;touch-action:none;cursor:grab;
  background:radial-gradient(circle at 50% 36%,#fffdf6 0,#ffe9bf 82%);user-select:none;-webkit-user-select:none}
.zoom-area.acercado{cursor:move}
.zoom-area:active{cursor:grabbing}
#zoomLienzo{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;will-change:transform;pointer-events:none}
.zoom-control{display:flex;align-items:center;justify-content:center;gap:10px;flex:none}
.zoom-btn{width:52px;height:52px;border:2.5px solid var(--borde);border-radius:50%;background:var(--papel);color:var(--tinta);font:inherit;font-size:1.7rem;font-weight:900;line-height:1;cursor:pointer;box-shadow:3px 3px 0 #fff}
.zoom-btn:disabled{opacity:.4;cursor:not-allowed}
.zoom-nivel{min-width:84px;min-height:48px;border:2.5px solid #fff;border-radius:999px;background:transparent;color:#fff;font:inherit;font-weight:900;font-size:1rem;cursor:pointer}
.zoom-ayuda{margin:0;text-align:center;font-size:.8rem;font-weight:700;color:#e8dcc8;flex:none}
@media (prefers-reduced-motion:reduce){.btn-ampliar{transition:none}}