/* PRINT-LAB · sitio público con el diseño aprobado (propuesta F).
   Primera parte: estructura común. Segunda: look de la propuesta F. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.5; padding-bottom: 5.5rem; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; margin-bottom: 0.5rem; }

/* Barra superior */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; }
.marca { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 800; min-height: 44px; }
.estado { margin-left: auto; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; text-align: right; line-height: 1.2; }
.estado::before { flex: none; }
.estado::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #9aa0a6; }
.estado[data-abierto="true"]::before { background: #16a34a; box-shadow: 0 0 0 4px rgb(22 163 74 / 0.18); }
.estado[data-abierto="false"]::before { background: #dc2626; }
.top .top-wa { display: none; }

main { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* Atajos: fila desplazable en móvil */
.atajos { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.75rem 0; scrollbar-width: none; margin: 0 -1rem; padding-inline: 1rem; }
.atajos::-webkit-scrollbar { display: none; }
.atajos a { flex: none; text-decoration: none; padding: 0.6rem 1rem; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }

.bloque { padding: 2.5rem 0; scroll-margin-top: 4rem; }
.bloque-cabeza { display: grid; gap: 0.35rem; margin-bottom: 1.25rem; }
.bloque-num { font-size: 0.85rem; font-weight: 700; }
.nota { margin-top: 1rem; font-size: 0.95rem; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.25rem; text-decoration: none; font-weight: 800; cursor: pointer; }
.boton-wa::before { content: ""; width: 1.25rem; height: 1.25rem; flex: none; background: currentColor;
  -webkit-mask: var(--icono-wa) center / contain no-repeat; mask: var(--icono-wa) center / contain no-repeat; }
.boton-grande { width: 100%; min-height: 56px; font-size: 1.1rem; }

/* Chips (radios reales) */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-caja { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 0.45rem 0.9rem; }
.chip-titulo { font-weight: 700; line-height: 1.2; }
.chip-detalle { font-size: 0.8rem; line-height: 1.2; opacity: 0.8; }
.chip input:focus-visible + .chip-caja { outline: 3px solid currentColor; outline-offset: 2px; }
.campo { margin-top: 0.5rem; width: 100%; min-height: 48px; padding: 0.6rem 0.9rem; font: inherit; }

.contador { display: inline-flex; align-items: center; gap: 0.5rem; }
.contador button { width: 48px; height: 48px; font: inherit; font-size: 1.5rem; font-weight: 800; cursor: pointer; }
.contador output { min-width: 2.5ch; text-align: center; font-size: 1.5rem; font-weight: 800; }

/* Armador */
.armador { display: grid; gap: 1.25rem; }
.armador-opciones { display: grid; gap: 1.1rem; }
.resumen { display: grid; gap: 0.6rem; padding: 1.25rem; align-self: start; }
.resumen-precio { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.resumen-precio b { font-size: 2.25rem; line-height: 1; }
.resumen-titulo { font-size: 0.85rem; font-weight: 700; margin-top: 0.4rem; }
.burbuja { white-space: pre-line; font-size: 0.95rem; padding: 0.8rem 1rem; position: relative; }

.tr { display: grid; gap: 1.25rem; }
.tr-opciones { display: grid; gap: 1.1rem; }
.tr-resultado { display: grid; gap: 0.75rem; align-content: start; }
.tr-precio b { font-size: 2.5rem; line-height: 1; }

/* Servicios de mostrador */
.servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.85rem; }
.servicio { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i t" "i p" "n n" "a a"; column-gap: 0.85rem; row-gap: 0.15rem; padding: 1rem; text-decoration: none; }
.servicio-icono { grid-area: i; width: 2.75rem; height: 2.75rem; background: currentColor; -webkit-mask: var(--icono) center / 70% no-repeat; mask: var(--icono) center / 70% no-repeat; }
.servicio-titulo { grid-area: t; font-weight: 800; }
.servicio-precio { grid-area: p; }
.servicio-precio b { font-size: 1.5rem; }
.servicio-nota { grid-area: n; font-size: 0.85rem; margin-top: 0.4rem; }
.servicio-accion { grid-area: a; margin-top: 0.6rem; font-weight: 800; }
.servicio-copia { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h9l4 4v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V7h3.5M3 7v13a3 3 0 0 0 3 3h10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.servicio-curp { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11' r='2.2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4.8 16.2c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4M14 10h5M14 13.5h4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.servicio-escaneo { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8V5a2 2 0 0 1 2-2h3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M8 21H5a2 2 0 0 1-2-2v-3M3 12h18' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Pagos */
.pagos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.pago-enlace { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 0.75rem 1rem; text-decoration: none; }
.pago-nombre { font-weight: 800; }
.pago-comision { font-size: 0.95rem; white-space: nowrap; }

/* Útiles: lista de precios con puntos guía */
.utiles { display: grid; gap: 1.5rem; margin-bottom: 1.25rem; }
.utiles-cat { font-size: 1rem; margin-bottom: 0.5rem; }
.utiles-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.util { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; }
.util-puntos { flex: 1; border-bottom: 2px dotted currentColor; opacity: 0.35; transform: translateY(-0.25rem); }
.util-precio { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; counter-reset: paso; }
.paso { display: flex; gap: 0.85rem; align-items: flex-start; }
.paso-num { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-weight: 800; }

/* Pie */
.pie { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem; display: grid; gap: 1.25rem; }
.pie-datos { display: grid; gap: 0.35rem; }
.pie-nombre { font-size: 1.5rem; font-weight: 800; }
.privacidad summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.privacidad p { font-size: 0.95rem; }

/* Barra fija de WhatsApp en móvil */
.barra-wa { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 56px; text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.barra-wa::before { content: ""; width: 1.4rem; height: 1.4rem; background: currentColor; -webkit-mask: var(--icono-wa) center / contain no-repeat; mask: var(--icono-wa) center / contain no-repeat; }
.fallo { position: fixed; inset: auto 1rem 5.5rem; padding: 1rem; background: #fff3cd; color: #5c4400; border: 2px solid #e0b000; z-index: 40; }

:root { --icono-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.3l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3.4 4.4c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.2 5 4.4 2.5 1 3 .8 3.5.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4l-.5-.3-1.8-.9c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.3-.8-.7-1.3-1.5-1.4-1.8-.2-.3 0-.4.1-.5l.4-.5.3-.4v-.5l-.8-2c-.2-.5-.4-.5-.6-.5h-.5z'/%3E%3C/svg%3E"); }

@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  .barra-wa { display: none; }
  .top .top-wa { display: inline-flex; }
  .estado { white-space: nowrap; }
  .estado { margin-left: auto; }
  .atajos { flex-wrap: wrap; overflow: visible; margin: 0; padding-inline: 0; }
  .armador { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .resumen { position: sticky; top: 5rem; }
  .tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .utiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paso { flex-direction: column; }
  .pie { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ═══ Estilo de la propuesta F (aprobada) ═══ */
/* F (v2) · Arriba la vista de A (rótulo, papel picado, bloque de color); abajo B + C (taller + cuaderno).
   Paleta viva y agradable: morado, naranja y verde limón sobre papel claro. Juvenil, pero ordenada. */
@font-face { font-family: "Rotulo"; src: url("../fuentes/bungee-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Titular"; src: url("../fuentes/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Taller"; src: url("../fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Taller"; src: url("../fuentes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Plumon"; src: url("../fuentes/caveat-brush-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Escuela"; src: url("../fuentes/lexend-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Escuela"; src: url("../fuentes/lexend-latin-700-normal.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

:root {
  --morado: #6d28d9; --morado-osc: #4c1d95; --wa: #0f7a40; --wa-osc: #064b26; --naranja: #ff7a1a; --lima: #a3e635; --lima-osc: #4d7c0f;
  --tinta: #1e1533; --tenue: #5b5272; --papel: #fcfaff; --blanco: #fff; --cuadro: #ebe4f7;
  --rosa: #ff3d8b; --amarillo: #ffd60a; --cielo: #22b8f0;
  /* Versiones oscuras para TEXTO (AA ≥ 4.5:1 sobre el papel y las notas pastel); los vivos quedan para fondos y adornos. */
  --rosa-osc: #be185d; --naranja-osc: #c2410c;
  --n-naranja: #ffe2c7; --n-lila: #ebe0ff; --n-lima: #e9f9c4; --n-rosa: #ffd6e7; --n-amarillo: #fff3a1; --n-cielo: #d4f0ff;
  --sub: rgb(255 214 10 / 0.65);
  --pp1: var(--naranja); --pp2: var(--lima); --pp3: var(--rosa); --pp4: var(--amarillo); --pp5: var(--cielo);
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
body { font-family: "Escuela", system-ui, sans-serif; color: var(--tinta); background-color: var(--papel);
  background-image: linear-gradient(90deg, transparent 2.4rem, var(--naranja) 2.4rem, var(--naranja) calc(2.4rem + 2px), transparent calc(2.4rem + 2px)),
    linear-gradient(var(--cuadro) 1px, transparent 1px), linear-gradient(90deg, var(--cuadro) 1px, transparent 1px);
  background-size: 100% 100%, 1.5rem 1.5rem, 1.5rem 1.5rem; }
main, .pie { padding-left: 3.4rem; }

/* Barra superior como en A */
.top { background: var(--tinta); color: var(--papel); }
.marca { font-family: "Rotulo", sans-serif; font-weight: 400; letter-spacing: 0.02em; }
.marca-logo { width: 1.6rem; height: 1.6rem; border-radius: 0.35rem; transform: rotate(8deg);
  background: conic-gradient(var(--rosa) 0 20%, var(--naranja) 0 40%, var(--amarillo) 0 60%, var(--lima) 0 80%, var(--cielo) 0); }
.estado { font-family: "Taller", monospace; font-size: 0.78rem; color: var(--papel); }

.boton { border-radius: 999px; font-weight: 800; }
/* WhatsApp siempre en verde (decisión del usuario); #0f7a40 deja el texto blanco en 5.4:1. */
.boton-wa { background: var(--wa); color: #fff; box-shadow: 0 4px 0 var(--wa-osc); }
.boton-wa:hover { background: #0b6b37; }
.boton-wa:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wa-osc); }
.boton-claro { background: var(--blanco); color: var(--tinta); border: 3px solid var(--tinta); }
.boton-secundario { background: var(--tinta); color: #fff; }

/* ─── Parte superior: la vista de A ─────────────────────────────────────────── */
/* Fondo vivo: el morado se va a fucsia y a rosa profundo, despacio (14 s) y de regreso. Medido (auditoría 03-nov,
   fórmula WCAG contra los colores puros del ciclo): texto blanco ≥ 4.6:1; verde limón ≥ 3.05:1, por eso el limón solo
   va en texto grande (rótulo «PRINT», negritas del lema de 19 px) y el rótulo chico de arriba va en blanco. */
@property --fondo-a { syntax: "<color>"; inherits: false; initial-value: #6d28d9; }
@property --fondo-b { syntax: "<color>"; inherits: false; initial-value: #a21caf; }
.hero { position: relative; margin: 0 -1rem 0 -3.4rem; padding: 4.5rem 1rem 2.75rem 3.4rem; color: var(--blanco); overflow: hidden; display: grid; gap: 2rem;
  background: var(--morado) linear-gradient(135deg, var(--fondo-a), var(--fondo-b));
  animation: fondo-vivo 14s ease-in-out infinite alternate; }
@keyframes fondo-vivo {
  0% { --fondo-a: #6d28d9; --fondo-b: #a21caf; }
  50% { --fondo-a: #a21caf; --fondo-b: #db2777; }
  100% { --fondo-a: #db2777; --fondo-b: #7c3aed; }
}
.hero::after { content: ""; position: absolute; right: -7.5rem; bottom: -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: var(--naranja); z-index: 0; }
.hero::before { content: ""; position: absolute; right: -1.8rem; top: 62%; width: 4rem; height: 4rem; border-radius: 50%; background: var(--lima); opacity: 0.9; z-index: 0; }
.hero > * { position: relative; z-index: 1; }
.rotulo { position: relative; }
.rotulo::after { content: ""; position: absolute; z-index: -1; right: 4%; bottom: 0.15em; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--rosa); box-shadow: 0.05em 0.05em 0 var(--tinta); }
.papel-picado { position: absolute !important; top: 0; left: 0; right: 0; height: 3.1rem; z-index: 2 !important;
  background: repeating-linear-gradient(90deg, var(--pp1) 0 4.5rem, var(--pp2) 4.5rem 9rem, var(--pp3) 9rem 13.5rem, var(--pp4) 13.5rem 18rem, var(--pp5) 18rem 22.5rem);
  -webkit-mask: radial-gradient(circle, #0000 0.28rem, #000 0.3rem) 0 0 / 1.5rem 1.5rem; mask: radial-gradient(circle, #0000 0.28rem, #000 0.3rem) 0 0 / 1.5rem 1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 97.5% 100%, 95% 72%, 92.5% 100%, 90% 72%, 87.5% 100%, 85% 72%, 82.5% 100%, 80% 72%, 77.5% 100%, 75% 72%, 72.5% 100%, 70% 72%, 67.5% 100%, 65% 72%, 62.5% 100%, 60% 72%, 57.5% 100%, 55% 72%, 52.5% 100%, 50% 72%, 47.5% 100%, 45% 72%, 42.5% 100%, 40% 72%, 37.5% 100%, 35% 72%, 32.5% 100%, 30% 72%, 27.5% 100%, 25% 72%, 22.5% 100%, 20% 72%, 17.5% 100%, 15% 72%, 12.5% 100%, 10% 72%, 7.5% 100%, 5% 72%, 2.5% 100%, 0 72%);
  transform-origin: top; animation: ondear 5s ease-in-out infinite alternate; }
@keyframes ondear { from { transform: skewX(-1.5deg); } to { transform: skewX(1.5deg); } }
.hero-pre { font-family: "Taller", monospace; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--blanco); }
.rotulo { font-family: "Rotulo", sans-serif; font-weight: 400; line-height: 0.88; font-size: clamp(3.6rem, 19vw, 8.5rem); margin: 0.6rem 0 1rem;
  display: flex; flex-wrap: wrap; column-gap: 0.15em; color: var(--lima); text-shadow: 0.06em 0.06em 0 var(--tinta); }
.rotulo span:last-child { color: var(--blanco); text-shadow: 0.06em 0.06em 0 var(--naranja); }
.hero-lema { font-size: 1.2rem; max-width: 32rem; }
.hero-lema b { color: var(--lima); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.boton-hero { background: var(--lima); color: var(--tinta); box-shadow: 0 4px 0 var(--lima-osc); font-size: 1.08rem; min-height: 56px; padding-inline: 1.6rem; }
.boton-hero:hover { background: #bef264; }
.anotacion { font-family: "Plumon", cursive; font-size: 1.5rem; color: var(--n-naranja); transform: rotate(-3deg); display: inline-block; margin-top: 0.9rem; }

.hero-hoja { display: none; }
.hoja { position: relative; width: 15.5rem; aspect-ratio: 8.5 / 11; background: var(--blanco); color: var(--tinta); padding: 1.5rem; display: flex; flex-direction: column; justify-content: center;
  transform: rotate(4deg); box-shadow: 0 26px 44px -18px rgb(30 21 51 / 0.6); animation: salir 0.9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes salir { from { transform: translateY(40px) rotate(0); opacity: 0; } to { transform: rotate(4deg); opacity: 1; } }
.hoja::before, .hoja::after { content: ""; position: absolute; width: 1.4rem; height: 1.4rem; border: 0 solid var(--blanco); }
.hoja::before { top: -0.7rem; left: -0.7rem; border-top-width: 2px; border-left-width: 2px; }
.hoja::after { bottom: -0.7rem; right: -0.7rem; border-bottom-width: 2px; border-right-width: 2px; }
.tintas { position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.2rem; }
.tintas i { width: 1.5rem; height: 0.8rem; } .t1 { background: var(--rosa); } .t2 { background: var(--amarillo); } .t3 { background: var(--cielo); } .t4 { background: var(--tinta); }
.hoja-precio { display: grid; text-align: center; font-family: "Taller", monospace; }
.hoja-precio b { font-family: "Rotulo", sans-serif; font-weight: 400; font-size: 4.6rem; line-height: 1.05; color: var(--morado); text-shadow: 0.05em 0.05em 0 var(--lima); }
.hoja-pie { position: absolute; bottom: 0.9rem; left: 0; right: 0; text-align: center; font-family: "Taller", monospace; font-size: 0.6rem; color: var(--tenue); letter-spacing: 0.08em; }
.calco { position: absolute; font-family: var(--emoji); font-size: 1.9rem; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 0 1px rgb(0 0 0 / .3)); animation: flotar 3.5s ease-in-out infinite alternate; }
.calco-1 { top: 2.6rem; right: 1rem; } .calco-2 { bottom: 2.4rem; left: 0.9rem; animation-delay: -1.2s; } .calco-3 { top: -1rem; right: 35%; animation-delay: -2.1s; }
@keyframes flotar { from { translate: 0 0; } to { translate: 0 -6px; } }

/* Notas adhesivas bajo la portada (C) */
.nota-adhesiva { position: relative; box-shadow: 0 10px 18px -12px rgb(30 21 51 / 0.45); }
.nota-adhesiva::before { content: ""; position: absolute; top: -0.55rem; left: 50%; width: 4.5rem; height: 1.1rem; transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / .8) 0 6px, rgb(109 40 217 / .28) 6px 12px); }
.hero-datos { list-style: none; margin: 1.75rem 0 0.5rem; padding: 0; display: grid; gap: 1.1rem; }
.hero-datos li { padding: 1rem 1.1rem 1.1rem 3.6rem; display: grid; gap: 0.1rem; }
.hero-datos b { font-family: "Plumon", cursive; font-weight: 400; font-size: 1.6rem; line-height: 1; }
.dato-emoji { position: absolute; left: 0.9rem; top: 1rem; font-family: var(--emoji); font-size: 1.7rem; }
.n-naranja { background: var(--n-amarillo); transform: rotate(-1.2deg); } .n-lila { background: var(--n-rosa); transform: rotate(1deg); } .n-lima { background: var(--n-cielo); transform: rotate(-0.5deg); }

/* Atajos */
.atajos { border-bottom: 2px solid var(--tinta); }
.atajos a { font-family: "Taller", monospace; font-weight: 600; font-size: 0.9rem; border: 2px solid var(--tinta); border-radius: 999px; background: var(--blanco); gap: 0.4rem; }
.atajos a::before { font-family: var(--emoji); }
.atajos a:nth-child(1)::before { content: "🖨️"; } .atajos a:nth-child(2)::before { content: "🪪"; } .atajos a:nth-child(3)::before { content: "📄"; }
.atajos a:nth-child(4)::before { content: "🧾"; } .atajos a:nth-child(5)::before { content: "✏️"; }
.atajos a:nth-child(1) { box-shadow: 3px 3px 0 var(--rosa); } .atajos a:nth-child(2) { box-shadow: 3px 3px 0 var(--naranja); } .atajos a:nth-child(3) { box-shadow: 3px 3px 0 var(--amarillo); }
.atajos a:nth-child(4) { box-shadow: 3px 3px 0 var(--lima-osc); } .atajos a:nth-child(5) { box-shadow: 3px 3px 0 var(--cielo); }
.atajos a:hover { background: var(--n-lima); }

/* ─── Abajo: B + C ──────────────────────────────────────────────────────────── */
.bloque { border-bottom: 2px solid var(--tinta); }
.bloque-num { font-family: "Taller", monospace; font-weight: 600; color: var(--morado); letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 0.5rem; }
.bloque-num::before { font-family: var(--emoji); font-size: 1.8rem; letter-spacing: 0; }
#imprimir .bloque-num::before { content: "🖨️"; } #tamano-real .bloque-num::before { content: "🪪"; } #mostrador .bloque-num::before { content: "📄"; }
#pagos .bloque-num::before { content: "🧾"; } #utiles .bloque-num::before { content: "🎒"; } #como .bloque-num::before { content: "🤝"; }
.bloque h2 { font-family: "Titular", serif; font-weight: 600; font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.02; letter-spacing: -0.015em;
  background: linear-gradient(transparent 58%, var(--sub) 58% 92%, transparent 92%); justify-self: start; padding-right: 0.15em; }
.bloque-cabeza p { color: var(--tenue); }
legend { font-family: "Taller", monospace; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--morado); }

.chip-caja { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 0.8rem; display: grid; grid-template-columns: auto 1fr; column-gap: 0.45rem; align-items: center; transition: transform .12s, box-shadow .12s; }
.chip-emoji { grid-row: span 2; font-family: var(--emoji); font-size: 1.35rem; }
.chip-titulo { grid-column: 2; } .chip-titulo:last-child { grid-row: span 2; }
.chip-detalle { font-family: "Taller", monospace; font-size: 0.7rem; grid-column: 2; }
.chip input:checked + .chip-caja { background: var(--lima); box-shadow: 3px 3px 0 var(--morado); transform: translate(-1px, -1px); }
.grupo-tamano .chip input:checked + .chip-caja { background: var(--amarillo); box-shadow: 3px 3px 0 var(--rosa); }
.grupo-papel .chip input:checked + .chip-caja { background: var(--n-rosa); box-shadow: 3px 3px 0 var(--rosa); }
.grupo-caras .chip input:checked + .chip-caja { background: var(--n-cielo); box-shadow: 3px 3px 0 var(--cielo); }
.grupo-acabado .chip input:checked + .chip-caja { background: var(--n-naranja); box-shadow: 3px 3px 0 var(--naranja); }
.grupo-para .chip input:checked + .chip-caja { background: var(--n-lila); box-shadow: 3px 3px 0 var(--morado); }

/* E1c §2.3 · plantilla de niveles: dos pasos (¿B/N o color? y la tarjeta con dibujo, nombre, ejemplo y precio).
   A 360 px caben dos tarjetas por renglón sin desborde; en pantalla grande se reparten en tres o cuatro. */
.tarjetas-nivel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.tarjeta-nivel { display: block; }
.tarjeta-caja { display: grid; justify-items: start; align-content: start; gap: 0.2rem; height: 100%; padding: 0.7rem 0.75rem; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 0.8rem; transition: transform .12s, box-shadow .12s; }
.tarjeta-miniatura { width: 3rem; height: 3rem; }
.tarjeta-nombre { font-weight: 700; font-size: 0.95rem; line-height: 1.15; }
.tarjeta-ejemplo { font-size: 0.8rem; line-height: 1.25; color: var(--tenue); }
.tarjeta-precio { font-family: "Taller", monospace; font-size: 0.78rem; font-weight: 600; color: var(--morado); }
.chip input:focus-visible + .tarjeta-caja { outline: 3px solid currentColor; outline-offset: 2px; }
.tarjeta-nivel input:checked + .tarjeta-caja { background: var(--lima); box-shadow: 3px 3px 0 var(--morado); transform: translate(-1px, -1px); }
.tarjeta-nivel input:checked + .tarjeta-caja .tarjeta-ejemplo { color: var(--tinta); }
.tarjeta-nivel input:checked + .tarjeta-caja .tarjeta-precio { color: var(--morado-osc); }
/* E1c §2.5 · «No sé cuál es» no es un nivel del catálogo: borde punteado para no confundirla con uno. */
.tarjeta-no-se .tarjeta-caja { border-style: dashed; }
.tarjeta-no-se input:checked + .tarjeta-caja { background: var(--n-rosa); box-shadow: 3px 3px 0 var(--rosa); }
.nota-niveles { margin-top: 0.55rem; font-size: 0.85rem; line-height: 1.35; color: var(--tenue); }

/* E1c §2.4 · documentos mezclados: el interruptor abre una lista con un contador por nivel. Cerrado, todas las
   páginas van al nivel elegido. Los botones − / + miden 60 px como los del contador de páginas. */
.interruptor { position: relative; display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; padding: 0.7rem 0.8rem; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 0.8rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
/* El radio/check real cubre todo el rótulo (área de toque completa); la casilla que se ve es la de al lado. */
.interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.interruptor-caja { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 0.45rem; }
.interruptor input:checked + .interruptor-caja { background: var(--lima); }
.interruptor input:checked + .interruptor-caja::after { content: "✓"; font-size: 1.1rem; font-weight: 800; line-height: 1; color: var(--morado-osc); }
.interruptor input:focus-visible + .interruptor-caja { outline: 3px solid var(--morado); outline-offset: 2px; }
.mezcla { display: grid; gap: 0.7rem; margin-top: 0.75rem; padding: 0.8rem; background: var(--blanco); border: 2px dashed var(--morado); border-radius: 0.8rem; }
.mezcla-ayuda { font-size: 0.85rem; line-height: 1.35; color: var(--tenue); }
.mezcla-niveles { display: grid; gap: 0.5rem; }
.mezcla-nivel { display: grid; gap: 0.4rem; justify-items: start; padding: 0.5rem 0.6rem; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 0.8rem; }
.mezcla-nombre { font-size: 0.9rem; font-weight: 700; line-height: 1.15; }
/* Un renglón por nivel: nombre arriba y contador abajo. Lado a lado no caben (a 1024 px la columna del armador mide
   250 px); con este orden el contador de 60 px entra siempre y no pisa ninguna tarjeta vecina. */
.mezcla-nivel .contador { gap: 0.4rem; }
.mezcla-nivel .contador button { width: 60px; height: 60px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--n-naranja); font: inherit; font-size: 1.4rem; font-weight: 800; line-height: 1; cursor: pointer; }
.mezcla-nivel .contador button:active { transform: translateY(1px); }
.mezcla-nivel .contador-num { width: 4.5ch; height: 60px; padding: 0; font-size: 1.4rem; }
.mezcla-total { font-family: "Taller", monospace; font-size: 0.82rem; font-weight: 700; color: var(--morado); }
.campo { border: 2px solid var(--tinta); background: var(--blanco); border-radius: 0.8rem; }
.contador button { border: 2px solid var(--tinta); border-radius: 50%; background: var(--n-naranja); }
.contador output { font-family: "Titular", serif; font-size: 2rem; }

.resumen { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 1rem; position: relative; box-shadow: 7px 7px 0 var(--morado); }
.resumen::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; border-radius: 1rem 1rem 0 0; background: linear-gradient(90deg, var(--rosa) 0 20%, var(--naranja) 0 40%, var(--amarillo) 0 60%, var(--lima) 0 80%, var(--cielo) 0); }
.resumen::after { content: "📝"; position: absolute; top: -1.1rem; right: 1rem; font-family: var(--emoji); font-size: 1.8rem; transform: rotate(10deg); }
.resumen-precio span { font-family: "Taller", monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.resumen-precio b { font-family: "Titular", serif; font-size: 3rem; color: var(--morado); }
.resumen-titulo { font-family: "Plumon", cursive; font-weight: 400; font-size: 1.35rem; }
.burbuja { background: #dcf8c6; color: #111; border-radius: 0.9rem 0.9rem 0.9rem 0.2rem; font-size: 0.92rem; box-shadow: 0 1px 0 rgb(0 0 0 / 0.15); }

.tr-resultado { background: var(--n-cielo); padding: 1.25rem; position: relative; transform: rotate(-0.5deg); box-shadow: 0 14px 24px -14px rgb(30 21 51 / .45); }
.tr-resultado::before { content: ""; position: absolute; top: -0.6rem; left: 50%; width: 5rem; height: 1.2rem; transform: translateX(-50%) rotate(2deg); background: repeating-linear-gradient(45deg, rgb(255 255 255 / .8) 0 6px, rgb(255 122 26 / .35) 6px 12px); }
.tr-precio b { font-family: "Titular", serif; font-size: 3.2rem; color: var(--morado); }

.servicio { border: 2px solid var(--tinta); border-radius: 1rem; box-shadow: 3px 4px 0 var(--tinta); transition: transform .15s; grid-template-columns: 3rem 1fr; }
.servicio:hover { transform: rotate(-1deg) translateY(-2px); }
.servicio:nth-child(6n+1) { background: var(--n-amarillo); } .servicio:nth-child(6n+2) { background: var(--n-rosa); } .servicio:nth-child(6n+3) { background: var(--n-cielo); }
.servicio:nth-child(6n+4) { background: var(--n-lima); } .servicio:nth-child(6n+5) { background: var(--n-naranja); } .servicio:nth-child(6n) { background: var(--n-lila); }
.servicio-emoji { grid-area: i; font-family: var(--emoji); font-size: 2.2rem; line-height: 1; }
.servicio-precio b { font-family: "Titular", serif; font-size: 1.9rem; }
.servicio-nota { font-family: "Plumon", cursive; font-size: 1.25rem; color: var(--rosa-osc); }
.servicio-accion { font-family: "Taller", monospace; font-size: 0.85rem; color: var(--morado); }

.pago-enlace { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 0.9rem; justify-content: flex-start; }
.pago-enlace:hover { background: var(--n-lima); }
.pago-emoji { font-family: var(--emoji); font-size: 1.6rem; }
.pago-nombre { font-family: "Titular", serif; font-weight: 600; font-size: 1.2rem; flex: 1; }
.pago-comision { font-family: "Taller", monospace; }
.pago-comision.gratis { font-family: "Plumon", cursive; font-size: 1.35rem; color: var(--lima-osc); }

.utiles-cat { font-family: "Plumon", cursive; font-weight: 400; font-size: 1.7rem; color: var(--rosa); }
.utiles-grupo:nth-child(2) .utiles-cat { color: var(--naranja-osc); }
.util-emoji { font-family: var(--emoji); width: 1.6rem; flex: none; }
.util-precio { font-family: "Taller", monospace; font-weight: 600; }
.paso-num { font-family: var(--emoji); font-size: 1.5rem; width: 3.25rem; height: 3.25rem; border: 2px solid var(--tinta); border-radius: 50%; background: var(--n-lima); }
.pasos .paso:nth-child(2) .paso-num { background: var(--n-rosa); } .pasos .paso:nth-child(3) .paso-num { background: var(--n-cielo); } .pasos .paso:nth-child(4) .paso-num { background: var(--amarillo); }

.pie { background: var(--tinta); color: var(--papel); max-width: none; padding-inline: max(1rem, calc((100% - 70rem) / 2)); font-family: "Taller", monospace; font-size: 0.85rem; }
.pie-nombre { font-family: "Rotulo", sans-serif; font-weight: 400; color: var(--lima); }
.barra-wa { background: var(--wa); color: #fff; border-radius: 999px; box-shadow: 0 5px 0 var(--wa-osc), 0 12px 24px rgb(30 21 51 / .3); }

@media (min-width: 48rem) {
  body { background-image: linear-gradient(90deg, transparent 4.5rem, var(--naranja) 4.5rem, var(--naranja) calc(4.5rem + 2px), transparent calc(4.5rem + 2px)),
    linear-gradient(var(--cuadro) 1px, transparent 1px), linear-gradient(90deg, var(--cuadro) 1px, transparent 1px); }
  main { padding-left: 6rem; }
  .hero { margin: 0 0 0 -6rem; padding: 6rem 3rem 3.5rem; border-radius: 0 0 2.5rem 2.5rem; grid-template-columns: 1.4fr 1fr; align-items: center; }
  .hero::after { width: 24rem; height: 24rem; right: -6rem; bottom: -9rem; }
  .hero::before { right: auto; left: 52%; top: 22%; width: 6rem; height: 6rem; }
  .rotulo::after { right: 18%; }
  .hero-hoja { display: grid; place-items: center; }
  .hero-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
  .bloque { display: grid; grid-template-columns: 14rem 1fr; gap: 0 3rem; }
  .bloque-cabeza { align-self: start; position: sticky; top: 5rem; }
  .bloque > :not(.bloque-cabeza) { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .calco, .papel-picado, .hero { animation: none; } }

/* ═══ E1b · el sitio cotiza el total (04-nov) ═══ */
/* Páginas y juegos: dos contadores del mismo alto. El de páginas es escribible, con − / + de 60 px. */
.contadores { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
.contador-grupo { display: grid; gap: 0.4rem; }
.contador-etiqueta { font-family: "Taller", monospace; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue); }
.contadores .contador button { width: 60px; height: 60px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--n-naranja); font: inherit; font-size: 1.75rem; font-weight: 800; line-height: 1; cursor: pointer; }
.contadores .contador button:active { transform: translateY(1px); }
.contadores .contador output { min-width: 2.5ch; font-family: "Titular", serif; font-size: 2rem; font-weight: 800; text-align: center; }
.contador-num { width: 5.5ch; height: 60px; padding: 0 0.25rem; text-align: center; font-family: "Titular", serif; font-size: 1.75rem; font-weight: 800; color: var(--tinta); background: var(--blanco); border: 2px solid var(--tinta); border-radius: 0.8rem; -moz-appearance: textfield; appearance: textfield; }
.contador-num::-webkit-outer-spin-button, .contador-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contador-nota { margin-top: 0.5rem; font-size: 0.88rem; color: var(--tenue); }

/* Desglose: renglón de impresión, renglón de acabado (si lo hay) y el total, que es el número grande. */
.desglose { margin: 0; display: grid; gap: 0.2rem; }
.desglose-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.95rem; }
.desglose-fila dt { color: var(--tenue); }
.desglose-fila dd { margin: 0; font-family: "Taller", monospace; font-weight: 600; white-space: nowrap; }
/* El total puede ser un rango (E1c §2.5): si no cabe junto a su etiqueta, baja de renglón y encoge con la pantalla,
   en vez de estirar el armador y sacarlo de la pantalla a 360 px. */
.desglose-total { margin-top: 0.35rem; padding-top: 0.4rem; border-top: 2px dashed var(--tinta); flex-wrap: wrap; }
.desglose-total dt { font-family: "Taller", monospace; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta); }
.desglose-total dd { font-family: "Titular", serif; font-size: clamp(1.6rem, 7vw, 2.5rem); font-weight: 600; line-height: 1; color: var(--morado); }
.resumen-precio b { font-family: "Titular", serif; font-size: 1.6rem; color: var(--tinta); }
.resumen-aviso { padding: 0.5rem 0.7rem; background: #fff3a1; border: 2px solid var(--tinta); border-radius: 0.6rem; color: var(--tinta); font-weight: 700; font-size: 0.9rem; }

/* ═══ E1b · pantalla de PC (04-nov): más ancho útil y el resumen a la vista ═══ */
/* Todo dentro de la media query: el celular de 360 px queda igual que estaba aprobado y la tableta
   (48 rem) tampoco cambia. A partir de 64 rem el contenido llega a 1280 px (antes 1152: en una
   pantalla de 1440 sobraban 144 px por lado) y el armador deja de ser una lista larga. */
@media (min-width: 64rem) {
  main { max-width: 80rem; }
  .pie { padding-inline: max(1rem, calc((100% - 78rem) / 2)); }

  /* El bloque 01 pasa la cabecera arriba (como en el celular) para que el armador use todo el ancho:
     con la cabecera lateral de 14 rem la columna se quedaba en 896 px y la rejilla de 2 no cabía. */
  .bloque-imprimir { display: block; }
  .bloque-imprimir .bloque-cabeza { position: static; margin-bottom: 1.5rem; }

  .armador { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; }
  /* «Páginas y copias» a todo lo ancho: son dos contadores con botones de 60 px. */
  .armador-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.75rem; align-content: start; }
  .armador-opciones .grupo-paginas { grid-column: 1 / -1; }
  /* La plantilla de niveles (§2.3) es el paso con el que el cliente se reconoce: familia y tarjetas ocupan las dos
     columnas. En media columna las tarjetas se quedaban de 55 px a 1024 y el precio se salía de su tarjeta. */
  .armador-opciones .grupo-familia,
  .armador-opciones .grupo-tinta { grid-column: 1 / -1; }
  .tarjetas-nivel { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* El resumen acompaña mientras se eligen opciones (antes la regla de la base lo dejaba en relative).
     Su alto natural es 678 px, y con el aviso de engargolado llega a 773: en una pantalla de 768 no cabe.
     Por eso tiene tope de alto y se desplaza por dentro: así el botón de WhatsApp nunca queda cortado
     (con `top` fijo se cortaría abajo y el botón quedaría inalcanzable). */
  .resumen {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* El emoji de la esquina vive fuera de la caja (top: -1.1rem) y el desplazamiento interno lo recortaría. */
  .resumen::after { display: none; }
}

/* A partir de 70 rem (1120 px) las secciones cortas caben de a dos: cada una queda de ~480 px o más.
   A 1024 px cada mitad sería de 432 y las tarjetas de mostrador se irían a una por renglón. */
@media (min-width: 70rem) {
  /* 02+03 y 04+05 lado a lado, con la cabecera arriba (la lateral de 14 rem no cabe en media pantalla). */
  .pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; align-items: start; }
  .pareja > .bloque { display: block; }
  .pareja .bloque-cabeza { position: static; }
  .pareja .tr { grid-template-columns: minmax(0, 1fr); }
  .pareja .utiles { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* ═══ E1b 2.4 · el archivo va en el mismo chat (el sitio no sube archivos) ═══ */
/* Aviso pegado al botón de WhatsApp: es la última duda del cliente antes de mandar el mensaje. */
.resumen-archivo { font-size: 0.85rem; line-height: 1.35; color: var(--tenue); }
/* El envoltorio no pinta nada en el celular: sus hijos se colocan como si estuvieran sueltos. */
.resumen-cuerpo { display: contents; }

/* En PC el resumen es una columna con dos partes: arriba lo que se puede desplazar (precio, desglose y la
   vista previa del mensaje) y abajo, siempre a la vista, el aviso del archivo y el botón de WhatsApp.
   Así, cuando la ventana es baja, se desplaza solo la vista previa y nunca se pierde el botón. */
@media (min-width: 64rem) {
  .resumen { display: flex; flex-direction: column; }
  .resumen-cuerpo { display: grid; gap: 0.6rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}