/* ══════════════════════════════════════════════════════════════════════
   Transcribo tus clases
   Tres colores: ladrillo, papel, tinta. Todo lo demás son mezclas suyas.
   Los tonos salen de los afiches, no de la web anterior: el papel es más
   envejecido y el rojo más terroso.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --ladrillo:#A63A28;
  --ladrillo-hondo:#7E2A1C;
  --papel:#EDE3CC;
  --papel-alto:#F6EFDF;
  --papel-hondo:#DFD2B4;
  --tinta:#1C1A17;
  --tinta-media:#544C40;
  /* Era #7E7362, que daba 3,65:1 sobre el papel — bajo el mínimo AA de 4,5
     para las glosas y las ayudas. Este da 4,84 y mantiene el mismo matiz. */
  --tinta-suave:#6A604F;
  --linea:#C4B695;
  --linea-tenue:#D9CDB0;

  /* Los colores del .docx. No son de la marca: son del producto que se
     muestra, igual que en el afiche. */
  --doc-azul:#1F4E79;
  --doc-azul-relleno:#DDEBF7;
  --doc-ambar:#BF8F00;
  --doc-ambar-relleno:#FFF2CC;

  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --texto:"Newsreader",Georgia,"Times New Roman",serif;
  --dato:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Estaba en 1120 px y en una pantalla de escritorio dejaba cintas enormes de
     papel vacío a los lados mientras el contenido se apretaba al medio. La
     comparación del hero es lo que más lo pedía: dos documentos lado a lado
     necesitan aire. */
  --ancho:1320px;
  --paso:clamp(56px,8vw,96px);
}

/* `hidden` tiene que ganar siempre. El navegador lo aplica con display:none
   desde su hoja base, así que cualquier regla propia que defina display lo
   anula sin avisar. Pasó con la ficha del panel: se abría sola y vacía. */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}

/* La cinta superior es sticky: sin este colchón, cada ancla deja el título de
   la sección tapado por el encabezado. */
html{scroll-behavior:smooth;scroll-padding-top:66px}

body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

.ancho{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 22px}

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

.saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);
  color:var(--papel-alto);padding:10px 16px;z-index:100}
.saltar:focus{left:8px;top:8px}

/* Grano de papel: SVG mínimo repetido, no una textura pesada. */
.grano{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.3;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}

/* ───────────────────────────────────────────────────────── encabezado */

.cinta{border-bottom:1px solid var(--tinta);background:var(--papel);
  position:sticky;top:0;z-index:50}
.cinta-fila{display:flex;align-items:center;gap:16px;height:50px}
/* El logo va en la cinta, no en el hero: arriba identifica y no compite con el
   titular, que es lo que tiene que leerse primero. Mezclado a multiply para que
   el papel del logo se funda con el papel de la página en vez de quedar como un
   recorte pegado encima. */
.marca{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;
  font-size:17px;color:var(--tinta);text-decoration:none;
  display:inline-flex;align-items:center;gap:9px}
.marca img{display:block;width:34px;height:34px}
@media (max-width:520px){
  /* En pantalla chica se queda el logo y se va el texto: dice lo mismo y deja
     sitio para el enlace de pedido, que es lo que se aprieta. */
  .marca span{display:none}
}
.cinta-dato{font-family:var(--dato);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave)}
/* «Hacer pedido» queda pegado a la marca, a la izquierda, y «Seguimiento» se
   va al otro extremo. Antes los dos vivían a la derecha con `margin-left:auto`
   cada uno, que los dejaba juntos: el que empuja es solo el último. */
.cinta-enlace{font-family:var(--display);text-transform:uppercase;
  font-size:14px;text-decoration:none;border-bottom:3px solid var(--ladrillo);padding-bottom:1px}
.cinta-enlace--fin{margin-left:auto}

/* ──────────────────────────────────────────────────────────────── hero */

/* El logo como marca de agua detrás del titular: grande, difuminado y muy
   tenue, como el sello de la imprenta que quedó marcado en el papel antes de
   imprimir encima.
   Va con `mix-blend-mode:multiply` para que se hunda en el papel en vez de
   flotar sobre él, y con opacidad baja: si compite con el titular deja de ser
   marca de agua y pasa a ser ruido. */
.hero{padding:clamp(36px,6vw,64px) 0 clamp(30px,4vw,46px);
  border-bottom:3px double var(--tinta);text-align:center;
  position:relative;overflow:hidden}
/* La primera sección después del hero arranca más arriba: entre el último
   sello y «01 · Tu pedido» se sumaban 96 px del hero y 96 de la sección, casi
   200 px sin nada. `--paso` no se toca porque es la respiración de todas las
   demás secciones. */
.hero + .seccion{padding-top:clamp(30px,4vw,46px)}
.hero::before{
  content:"";position:absolute;top:50%;left:50%;
  width:min(78vw,760px);aspect-ratio:1;transform:translate(-50%,-52%);
  background:url("assets/logo-recortado.png") center/contain no-repeat;
  /* Difuminado apenas: lo justo para que se lea como tinta que traspasó el
     papel y no como una imagen puesta encima. Con más desenfoque se convertía
     en una mancha gris sin forma. */
  opacity:.11;filter:blur(0.6px);
  pointer-events:none;z-index:0}
/* El contenido tiene que quedar por encima del sello, no debajo. */
.hero > .ancho{position:relative;z-index:1}

@media (max-width:520px){
  /* En el celular el titular ya ocupa casi todo: la marca de agua ahí solo
     ensucia la lectura. */
  .hero::before{opacity:.08;width:96vw;filter:blur(0.8px)}
}

.epigrafe{font-family:var(--dato);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ladrillo);margin:0 0 18px}

/* El titular a dos tintas es la firma de la marca: negro arriba, rojo abajo. */
.titular{margin:0;line-height:.82;text-transform:uppercase;font-family:var(--display);
  font-weight:400;letter-spacing:.005em}
.titular-a{display:block;font-size:clamp(46px,13vw,132px)}
.titular-b{display:block;position:relative;color:var(--ladrillo);
  font-size:clamp(58px,17vw,176px)}
/* Desregistro de imprenta: un fantasma apenas corrido, como una tinta que no
   calzó. Tiene que ir centrado igual que el texto real, o se lee como texto
   doble en vez de como un error de impresión. */
.titular-b::before{content:attr(data-eco);position:absolute;top:0;left:0;right:0;
  text-align:center;color:var(--ladrillo);opacity:.34;z-index:-1;pointer-events:none;
  transform:translate(-4px,3px)}

.lema{font-family:var(--display);text-transform:uppercase;font-size:clamp(12px,2.4vw,17px);
  letter-spacing:.04em;margin:20px auto 0;display:inline-block;
  border:2px dashed var(--ladrillo);padding:7px 18px;color:var(--tinta)}

.hero-cuerpo{display:grid;grid-template-columns:1fr;gap:36px;margin-top:clamp(28px,4vw,44px);
  text-align:left;align-items:start}

.entrada{font-size:clamp(18px,2.4vw,21px);margin:0 0 12px;max-width:34ch}
.entrada-menor{font-size:16px;color:var(--tinta-media);margin:0 0 24px;max-width:38ch}

.acciones{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:20px}

.requisito-linea{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;
  font-family:var(--dato);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-media)}

/* Sello de goma, girado, como en el afiche. */
.timbre{font-family:var(--display);text-transform:uppercase;font-size:12px;
  letter-spacing:.05em;color:var(--ladrillo);border:2px solid var(--ladrillo);
  padding:4px 10px;transform:rotate(-3deg);display:inline-block}

/* hoja de TXT mecanografiado */
.hoja-txt{margin:0;position:relative;background:var(--papel-alto);
  border:1px solid var(--linea);padding:24px 20px 16px;
  box-shadow:5px 5px 0 rgba(28,26,23,.12);transform:rotate(-.8deg)}
.hoja-txt figcaption{font-family:var(--dato);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave);margin-top:12px;
  border-top:1px solid var(--linea-tenue);padding-top:8px}
.clip{position:absolute;top:-11px;left:22px;width:16px;height:34px;
  border:2.5px solid var(--tinta-suave);border-radius:8px 8px 3px 3px;
  border-bottom-color:transparent;opacity:.6}

.txt-muestra{font-family:var(--dato);font-size:12px;line-height:1.65;margin:0;
  white-space:pre-wrap;color:var(--tinta-media)}
.txt-muestra--chico{font-size:11px}
.ts{color:var(--ladrillo)}

/* ──────────────────────────────────────────────────────────── secciones */

.seccion{padding:var(--paso) 0;border-bottom:1px solid var(--linea)}
.seccion--angosta .parrafo{max-width:62ch}

.rotulo{font-family:var(--dato);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ladrillo);margin:0 0 12px}
.rotulo--claro{color:var(--papel-hondo)}

.titulo{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,5.4vw,54px);line-height:.94;letter-spacing:.005em;margin:0 0 14px}
.titulo--claro{color:var(--papel-alto)}

.bajada{font-size:17.5px;color:var(--tinta-media);max-width:56ch;margin:0 0 clamp(28px,4vw,44px)}
/* Los dos párrafos de «Transcribir no es lo mismo que corregir» van
   justificados, que fue lo que pidió el operador. Con `hyphens:auto` el
   navegador puede partir palabras; sin eso, justificar en columnas angostas
   abre ríos blancos entre las palabras. */
.bajada--justa,.remate--justo{text-align:justify;hyphens:auto}
.bajada--clara{color:rgba(237,227,204,.72)}
.parrafo{margin:0 0 16px}

.seccion--oscura{background:var(--tinta);color:var(--papel);border-bottom:none}

/* ─────────────────────────────────────────────────────────── botones */

.boton{display:inline-block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.03em;font-size:16px;text-decoration:none;cursor:pointer;
  background:var(--ladrillo);color:var(--papel-alto);border:2px solid var(--ladrillo);
  padding:12px 24px;transition:background .14s,color .14s,transform .1s}
.boton:hover{background:var(--ladrillo-hondo);border-color:var(--ladrillo-hondo)}
.boton:active{transform:translateY(1px)}
.boton--linea{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.boton--linea:hover{background:var(--tinta);color:var(--papel-alto)}
.boton--bloque{display:block;width:100%;text-align:center;margin-top:16px}
.boton--grande{font-size:19px;padding:15px 32px}
.seccion--oscura .boton{background:var(--papel-alto);color:var(--tinta);border-color:var(--papel-alto)}
.seccion--oscura .boton:hover{background:var(--papel)}

/* ───────────────────────────────────────────────── antes / después */

.comparacion{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
.lado-etiqueta{font-family:var(--display);text-transform:uppercase;font-size:12px;
  letter-spacing:.06em;display:inline-block;padding:4px 11px;margin:0 0 10px;
  background:var(--tinta);color:var(--papel-alto)}
.lado-etiqueta--fuerte{background:var(--ladrillo)}
.lado-titulo{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,3.4vw,30px);line-height:1;margin:0 0 16px}
.papel--crudo{background:var(--papel-alto);border:1px solid var(--linea);padding:18px}
.lado-lista{margin:16px 0 0;padding-left:17px;font-size:15.5px;color:var(--tinta-media)}
.lado-lista li{margin-bottom:5px}

.flecha{display:flex;align-items:center;justify-content:center;padding:4px 0}
.flecha svg{width:78px;height:26px;overflow:visible}
.flecha-linea,.flecha-punta{stroke:var(--ladrillo);stroke-width:3.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* páginas del apunte, en abanico */
.abanico{position:relative;padding:0 8px 14px 0}
.pagina{background:#fff;border:1px solid var(--linea)}
.pagina--fondo,.pagina--medio{position:absolute;inset:0;left:auto;width:88%;height:100%}
.pagina--fondo{transform:rotate(3.2deg) translateX(14px);background:var(--papel-alto)}
.pagina--medio{transform:rotate(1.6deg) translateX(7px)}
.pagina--frente{position:relative;padding:14px 15px;display:flex;flex-direction:column;
  gap:5px;min-height:270px;box-shadow:3px 3px 0 rgba(28,26,23,.1)}

.pg-cabecera,.pg-pie{display:flex;justify-content:space-between;font-family:var(--dato);
  font-size:6.5px;letter-spacing:.09em;text-transform:uppercase;color:#9a9a9a}
.pg-cabecera{border-bottom:1px solid #e6e6e6;padding-bottom:5px}
.pg-pie{border-top:1px solid #e6e6e6;padding-top:5px;margin-top:auto}
.pg-h1{font-family:var(--texto);font-size:12px;font-weight:600;color:var(--doc-azul);
  margin:3px 0 2px;padding-bottom:2px;border-bottom:2px solid var(--doc-azul)}
.pg-h2{font-family:var(--texto);font-size:10px;font-weight:600;color:var(--doc-azul);margin:6px 0 1px}
.pg-linea{display:block;height:5px;background:#dcdcdc}
.pg-caja{padding:6px 8px;margin:4px 0;display:flex;flex-direction:column;gap:4px}
.pg-caja--azul{background:var(--doc-azul-relleno);border-left:3px solid var(--doc-azul)}
.pg-caja--ambar{background:var(--doc-ambar-relleno);border-left:3px solid var(--doc-ambar)}
.pg-caja .pg-linea{background:rgba(0,0,0,.12)}
.pg-caja-rotulo{font-family:var(--dato);font-size:6px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700}
.pg-caja--azul .pg-caja-rotulo{color:var(--doc-azul)}
.pg-caja--ambar .pg-caja-rotulo{color:#8a6600}
.pg-tabla{width:100%;border-collapse:collapse;margin:4px 0}
.pg-tabla th{height:9px;background:var(--doc-azul);border:1px solid var(--doc-azul)}
.pg-tabla td{height:9px;border:1px solid #bfd3e6}
.pg-tabla tr:nth-child(odd) td{background:#f2f7fb}

.pie-muestra{font-family:var(--dato);font-size:10px;letter-spacing:.05em;
  color:var(--tinta-suave);margin:26px 0 0;max-width:60ch}

/* ─────────────────────────────────────────────────── correcciones */

.correcciones{display:grid;grid-template-columns:1fr;gap:2px;background:rgba(237,227,204,.16);
  border:1px solid rgba(237,227,204,.22)}
.correccion{background:var(--tinta);padding:18px 20px}
.correccion-etiqueta{font-family:var(--dato);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(237,227,204,.5);margin:0 0 5px}
.correccion-etiqueta--ok{color:var(--ladrillo);margin-top:14px}
.correccion-texto{font-family:var(--dato);font-size:13px;line-height:1.5;margin:0;
  color:rgba(237,227,204,.85)}
.correccion-texto mark{background:none;font-weight:700;padding:0}
.correccion-texto--malo mark{color:var(--papel-alto);text-decoration:line-through;
  text-decoration-color:var(--ladrillo);text-decoration-thickness:2px}
.correccion-texto--bueno{color:var(--papel-alto)}
.correccion-texto--bueno mark{color:var(--ladrillo)}

.remate{font-size:18px;max-width:60ch;margin:clamp(28px,4vw,40px) 0 0}
.remate--claro{color:var(--tinta-media)}
.remate-ejemplos{font-family:var(--dato);font-size:10px;letter-spacing:.05em;
  color:rgba(237,227,204,.42);margin:10px 0 0}

/* ─────────────────────────────────────────────────────── calculadora */

.calc{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
.campo{border:none;margin:0 0 26px;padding:0}
.etiqueta{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.03em;font-size:14px;margin-bottom:9px;padding:0}
.fila-minutos{display:flex;align-items:baseline;gap:9px}
#minutos{font-family:var(--display);font-size:40px;width:140px;padding:3px 9px;
  border:2px solid var(--tinta);background:var(--papel-alto);color:var(--tinta);
  font-variant-numeric:tabular-nums}
.unidad{font-family:var(--dato);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave)}
input[type=range]{width:100%;margin:14px 0 6px;accent-color:var(--ladrillo)}
.ayuda{font-size:14px;color:var(--tinta-suave);margin:0}
.ayuda--clara{color:rgba(237,227,204,.6)}

.opciones{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opciones--3{grid-template-columns:repeat(3,1fr)}
.opciones--una{grid-template-columns:1fr}
/* El TXT bajó de tarjeta a letra chica: de cinco testers, los cinco eligieron
   el apunte completo y ninguno el TXT. Dos tarjetas iguales obligaban a
   decidir algo que nadie decidía a favor de la segunda. Sigue estando, y
   sigue siendo un clic. */
/* El enlace para corregir el correo. Rojo y subrayado a propósito: es la
   única acción de ese párrafo y tiene que distinguirse del texto. */
.corregir{color:var(--ladrillo);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.corregir:hover{background:rgba(166,58,40,.1)}
.formato-txt{margin:9px 0 0;font-size:13.5px;color:var(--tinta-suave);line-height:1.4}
.formato-txt label{display:flex;gap:7px;align-items:flex-start;cursor:pointer}
.formato-txt input{margin-top:3px;flex:none}
.formato-txt b{color:var(--tinta-media);font-weight:600}
.formato-txt:has(input:checked){color:var(--tinta-media)}
.formato-txt:has(input:checked) b{color:var(--ladrillo)}
.opcion{display:block;border:1px solid var(--linea);background:var(--papel-alto);
  padding:11px 13px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.opcion:hover{border-color:var(--tinta-suave)}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion:has(input:checked){border-color:var(--ladrillo);box-shadow:inset 0 0 0 2px var(--ladrillo)}
.opcion:has(input:focus-visible){outline:2px solid var(--ladrillo);outline-offset:2px}
.opcion-nombre{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:15px;line-height:1.15;letter-spacing:.01em}
.opcion-glosa{display:block;font-size:13px;color:var(--tinta-suave);line-height:1.32;margin-top:2px}

.casilla{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;
  cursor:pointer;margin-bottom:22px}
.casilla input{margin-top:4px;accent-color:var(--ladrillo);flex:none;width:16px;height:16px}
.casilla-nota{display:block;color:var(--tinta-suave);font-size:13px;margin-top:2px}

.boleta{border:2px solid var(--tinta);background:var(--papel-alto);padding:22px;
  box-shadow:6px 6px 0 var(--tinta)}
.boleta-cabecera{font-family:var(--dato);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-suave);margin:0 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--linea)}
.boleta-lineas{list-style:none;margin:0 0 16px;padding:0}
.boleta-lineas li{display:flex;align-items:baseline;gap:7px;padding:6px 0;font-size:15px}
.boleta-lineas .concepto{flex:none;max-width:60%}
.boleta-lineas .detalle{font-family:var(--dato);font-size:10.5px;color:var(--tinta-suave)}
.boleta-lineas .puntos{flex:1;border-bottom:1px dotted var(--linea);transform:translateY(-4px);min-width:10px}
.boleta-lineas .monto{font-family:var(--dato);font-size:13.5px;font-variant-numeric:tabular-nums}
.boleta-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:2px solid var(--tinta);padding-top:12px}
.boleta-etiqueta{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.boleta-monto{font-family:var(--display);font-size:40px;line-height:1;color:var(--ladrillo);
  font-variant-numeric:tabular-nums;transition:opacity .12s}
.boleta-monto.cambia{opacity:.45}
.boleta-minuto{font-family:var(--dato);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-suave);margin:9px 0 0}

/* ───────────────────────────────────────────────────────────── pasos */

.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.pasos li{border-top:1px solid var(--linea);padding:20px 0 20px 58px;position:relative}
.paso-n{position:absolute;left:0;top:18px;font-family:var(--display);font-size:26px;
  color:var(--ladrillo);line-height:1}
.pasos h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:19px;margin:0 0 4px;letter-spacing:.01em}
.pasos p{margin:0;color:var(--tinta-media);font-size:15.5px;max-width:52ch}

/* ─────────────────────────────────────────────────────── audio */

.audio-cols{display:grid;grid-template-columns:1fr;gap:20px}
.audio-col{border:1px solid var(--linea);background:var(--papel-alto);padding:20px 22px}
.audio-col--revisar{border-style:dashed;border-color:var(--ladrillo)}
.audio-titulo{font-family:var(--display);text-transform:uppercase;font-size:17px;
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--linea)}
.audio-col--revisar .audio-titulo{color:var(--ladrillo);border-bottom-color:var(--ladrillo)}
.audio-col ul{margin:0;padding-left:17px;font-size:15.5px}
.audio-col li{margin-bottom:5px}
.audio-nota{font-size:13.5px;color:var(--tinta-suave);margin:14px 0 0}

/* ───────────────────────────────────────────────────────── sellos */

.sellos-banda{background:var(--tinta);padding:clamp(30px,5vw,44px) 0}
.sellos{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 14px}
.sello{display:flex;flex-direction:column;gap:4px;padding-left:14px;
  border-left:2px solid var(--ladrillo)}
.sello-n{font-family:var(--display);text-transform:uppercase;font-size:24px;
  line-height:1;color:var(--papel-alto)}
.sello-t{font-family:var(--dato);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(237,227,204,.62)}

/* ────────────────────────────────────────────────────────── pedido */

.pedido{max-width:100%}
.alerta,.error{margin:14px 0 0;padding:12px 15px;border-left:3px solid var(--ladrillo);
  background:rgba(166,58,40,.09);font-size:15px;color:var(--tinta)}
.error{margin:0 0 14px}
.pedido-nota{font-size:14px;color:var(--tinta-suave);margin:14px 0 0;max-width:52ch}
/* Esta iba en dos renglones y el segundo quedaba corto, colgando a la derecha
   del botón. Sin tope de ancho entra en uno solo. */
.pedido-nota--linea{max-width:none}

/* ── la máquina de escribir ──────────────────────────────────────────────
   La dibujó el operador. La hoja venía en blanco y el texto va encima.

   Todo en porcentajes: la posición de la hoja está medida sobre la propia
   imagen (20,3% desde la izquierda, 22,9% desde la derecha, 6,5% desde
   arriba), así que el bloque de texto sigue a la hoja cuando la imagen se
   achica. Con píxeles fijos, el texto se sale del papel en cuanto cambia el
   ancho de la pantalla. */
/* El texto se centra contra la máquina en vez de colgar desde arriba.
   El titular mide 93 px y la máquina 230: alineados al tope quedaban 137 px de
   nada entre «Sube, calcula y listo» y lo de abajo. Medido, no a ojo. */
.encabezado-maquina{display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.encabezado-texto{flex:1 1 320px;min-width:0}
/* La máquina es decorativa y es la que fija el alto de toda la fila: con 230 px
   dejaba 68 px de aire a cada lado del titular, que mide 93. A 185 el aire baja
   a 46 y la imagen se sigue leyendo igual. */
.maquina{position:relative;flex:0 0 auto;width:min(185px,34vw);margin:0;
  container-type:inline-size}
.maquina img{display:block;width:100%;height:auto}
/* Medido sobre la imagen, la hoja va del 20,3% al 77,1%. Acá se entra un poco
   más: una hoja de verdad tiene margen, y pegado al borde el texto se salía. */
.maquina-hoja{position:absolute;left:24%;right:26%;top:9.5%;
  font-family:var(--dato);font-size:clamp(4.2px,1.5cqw,6px);line-height:1.55;
  color:#3A342B;text-align:left}
.maquina-linea{margin:0;white-space:nowrap;overflow:hidden}
/* El cursor de la máquina: parpadea al final de lo último escrito. */
.maquina-cursor{display:inline-block;width:.5em;height:1em;margin-left:1px;
  background:#3A342B;vertical-align:-.15em}

/* Se escribe sola. Cada línea aparece en su turno y el ancho crece de 0 a
   100%, que es el gesto de una máquina de escribir: la letra sale de a una y
   no se desvanece.

   Se anima `max-width` y no `width` para que cada línea se detenga en su
   propio largo en vez de estirarse hasta el borde de la hoja. */
.js .maquina-linea{max-width:0;animation:teclear 11s steps(30,end) infinite}
.js .maquina-linea--1{animation-delay:.2s}
.js .maquina-linea--2{animation-delay:1.6s}
.js .maquina-linea--3{animation-delay:3.0s}
.js .maquina-linea--4{animation-delay:4.6s}
.js .maquina-cursor{animation:latir 1s steps(1,end) infinite}

@keyframes teclear{
  0%{max-width:0}
  12%{max-width:100%}
  86%{max-width:100%}
  92%{max-width:0}
  100%{max-width:0}
}
@keyframes latir{0%,49%{opacity:1} 50%,100%{opacity:0}}

@media (max-width:719px){
  /* En pantalla chica la máquina pasa a ser un adorno bajo el título, y el
     texto de la hoja se vuelve ilegible: se apaga en vez de quedar como una
     mancha gris. */
  .encabezado-maquina{gap:14px}
  .maquina{width:150px;margin-inline:auto}
  .maquina-hoja{display:none}
}

/* ── el botón central, con la imagen del operador ──────────────────────── */
.boton-sello{display:inline-block;line-height:0;transition:transform .18s ease}
.boton-sello img{display:block;width:min(250px,62vw);height:auto}
.boton-sello:hover,.boton-sello:focus-visible{transform:translateY(-2px) rotate(-.6deg)}

/* ── el TXT se escribe ────────────────────────────────────────────────────
   La onda se reproduce y la máquina teclea; el TXT era lo único quieto de los
   tres, y es justo el que muestra lo que va saliendo del audio.

   Aparece por bloques y no letra por letra: son tres tramos con su marca de
   tiempo, y el reconocedor los entrega así, de a uno. Cada bloque entra desde
   abajo, que es como sube el texto en una consola.

   Los tiempos calzan con la onda: los 14 s del ciclo de la onda del audio
   dividido en tres. Si se separan, en la misma pantalla una cosa dice que va
   por la mitad y la otra que recién empieza.

   **Los tres bloques se borran juntos al final del ciclo, y no cada uno 14 s
   después de haber salido.** Antes cada bloque tenía su propio reloj de 14 s
   arrancado con retardo, así que se iban por separado y desfasados de la onda:
   el cabezal volvía al principio del audio y en pantalla seguía la
   transcripción del minuto 13, que es al revés de lo que muestra. Ahora todo
   corre en el MISMO ciclo de 14 s —cambia en qué momento entra cada uno, no
   cuándo termina— y al cerrar la vuelta la hoja queda en blanco y vuelve a
   escribirse desde arriba. */
.txt-bloque{display:block}
.js .txt-bloque{opacity:0;animation-duration:14s;animation-timing-function:ease-out;
  animation-iteration-count:infinite}
.js .txt-bloque--1{animation-name:salir-txt-1}
.js .txt-bloque--2{animation-name:salir-txt-2}
.js .txt-bloque--3{animation-name:salir-txt-3}

/* Los tres entran igual y salen a la vez. Lo único que cambia es a qué altura
   del ciclo aparece cada uno: 4%, 32% y 61%, que son los mismos 0,6 s, 4,6 s y
   8,6 s de antes, ahora medidos dentro de la misma vuelta. */
@keyframes salir-txt-1{
  0%{opacity:0;transform:translateY(6px)}
  4%{opacity:1;transform:none}
  90%{opacity:1;transform:none}
  96%{opacity:0;transform:none}
  100%{opacity:0}
}
@keyframes salir-txt-2{
  0%,29%{opacity:0;transform:translateY(6px)}
  33%{opacity:1;transform:none}
  90%{opacity:1;transform:none}
  96%{opacity:0;transform:none}
  100%{opacity:0}
}
@keyframes salir-txt-3{
  0%,58%{opacity:0;transform:translateY(6px)}
  62%{opacity:1;transform:none}
  90%{opacity:1;transform:none}
  96%{opacity:0;transform:none}
  100%{opacity:0}
}

/* La pista al lado de la etiqueta: en minúscula y en gris, para que se lea
   como una aclaración y no como parte del nombre del campo. */
.etiqueta-pista{font-family:var(--texto);text-transform:none;letter-spacing:0;
  font-size:12.5px;color:var(--tinta-suave);font-weight:400}

/* El botón de subir otro audio y su nota. Va debajo de todo lo del pago
   porque es lo que se hace DESPUÉS, no en vez de pagar. */
/* La separación no es decorativa: pegado al botón de pagar, un toque por error
   escondía el enlace de pago del pedido recién hecho. Con el pago pendiente la
   distancia se dobla y aparece el aviso de dónde sigue estando el enlace. */
.listo-otro{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--linea)}
.listo-otro--pendiente{margin-top:72px}
.listo-otro-titulo{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:12px;letter-spacing:.06em;color:var(--tinta-suave);margin-bottom:10px}
.listo-otro-nota{display:block;margin-top:8px;font-size:13px;color:var(--tinta-suave)}

/* ───────────────────────────────────────────────────────────── faq */

.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{font-family:var(--display);text-transform:uppercase;font-size:16px;
  padding:15px 30px 15px 0;cursor:pointer;position:relative;list-style:none;letter-spacing:.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;
  font-size:22px;color:var(--ladrillo);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;color:var(--tinta-media);font-size:16px;max-width:64ch}

/* ─────────────────────────────────────────────────────────── cierre */

.cierre{background:var(--ladrillo);color:var(--papel-alto);text-align:center;
  padding:clamp(48px,7vw,80px) 0}
.cierre-frase{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(26px,5.6vw,54px);line-height:.98;margin:0 0 26px;letter-spacing:.005em}
.cierre .boton{background:var(--papel-alto);color:var(--ladrillo);border-color:var(--papel-alto)}
.cierre .boton:hover{background:#fff;border-color:#fff}
.cierre-pie{font-family:var(--dato);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(246,239,223,.7);margin:20px 0 0}

.pie{padding:24px 0 34px}
.pie-fila{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-family:var(--dato);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-suave)}

/* ────────────────────────────────────────────────────── CTA móvil */

.cta-movil{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;
  display:none;text-align:center;font-family:var(--display);text-transform:uppercase;
  font-size:16px;text-decoration:none;background:var(--ladrillo);color:var(--papel-alto);
  border:2px solid var(--ladrillo-hondo);padding:13px;
  box-shadow:0 3px 0 var(--ladrillo-hondo);
  transform:translateY(130%);transition:transform .22s ease}
.cta-movil.visible{transform:translateY(0)}

/* ──────────────────────────────────────────────────────── movimiento */

/* Los sellos entran como un timbre golpeando el papel: llegan un poco
   grandes y girados, y se asientan. Dura poco a propósito. */
.js .sello:not(.marcado){opacity:0}
.sello.marcado{animation:timbrar .34s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes timbrar{
  from{opacity:0;transform:scale(1.18) rotate(-2.5deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}

/* La flecha se dibuja sola cuando entra en pantalla. */
.js .flecha:not(.dibujada) .flecha-linea,.js .flecha:not(.dibujada) .flecha-punta{stroke-dasharray:120;stroke-dashoffset:120}
.flecha.dibujada .flecha-linea{animation:trazar .5s ease forwards}
.flecha.dibujada .flecha-punta{animation:trazar .3s ease .35s forwards}
@keyframes trazar{to{stroke-dashoffset:0}}

/* Las hojas se mueven un pelo al pasar el cursor. Nada flotando solo. */
.hoja-txt,.pagina--frente{transition:transform .3s ease}
.hoja-txt:hover{transform:rotate(-.2deg) translateY(-3px)}
.abanico:hover .pagina--frente{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sello{opacity:1}
  .flecha-linea,.flecha-punta{stroke-dashoffset:0}
  .cta-movil{transition:none}
}

/* ─────────────────────────────────────────────────────────── anchos */

@media (min-width:720px){
  .comparacion{grid-template-columns:1fr auto 1.15fr;gap:24px}
  .flecha{padding-top:120px}
  .flecha svg{width:100px}
  .audio-cols{grid-template-columns:1fr 1fr}
  .correcciones{grid-template-columns:repeat(3,1fr)}
  .pasos{grid-template-columns:1fr 1fr;gap:0 34px}
}

@media (min-width:980px){
  .hero-cuerpo{grid-template-columns:1.25fr .85fr;gap:48px;align-items:center}
  .calc{grid-template-columns:1.45fr 1fr;gap:44px}
  .boleta{position:sticky;top:74px}
  .comparacion{grid-template-columns:.85fr auto 1.5fr}
}

@media (max-width:719px){
  body{font-size:16px}
  .flecha svg{transform:rotate(90deg)}
  .acciones .boton{flex:1 1 100%;text-align:center}
  .opciones,.opciones--3{grid-template-columns:1fr}
  .boleta{box-shadow:4px 4px 0 var(--tinta)}
  .cta-movil{display:block}
  .cierre{padding-bottom:84px}
}

/* ─────────────────────────────────────────── subida directa del archivo */

.pedido-rejilla{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:26px}
.campo-simple{display:block}
.campo-simple input{width:100%;font-family:var(--texto);font-size:17px;padding:10px 12px;
  border:1px solid var(--linea);background:var(--papel-alto);color:var(--tinta)}
.campo-simple input::placeholder{color:var(--tinta-suave)}
.campo-simple input:focus{border-color:var(--ladrillo);outline:none}
.campo-nota{display:block;font-size:13px;color:var(--tinta-suave);margin-top:4px}
.opcional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--tinta-suave)}

.soltar{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  border:2px dashed var(--linea);background:var(--papel-alto);padding:26px 18px;cursor:pointer;
  transition:border-color .14s,background .14s}
.soltar:hover,.soltar.encima{border-color:var(--ladrillo)}
.soltar.con-archivo{border-style:solid;border-color:var(--ladrillo)}
.soltar-icono{font-family:var(--display);font-size:22px;color:var(--ladrillo);line-height:1}
.soltar-texto{font-family:var(--display);text-transform:uppercase;font-size:15px;
  color:var(--tinta);word-break:break-word}
.soltar-nota{font-size:13.5px;color:var(--tinta-suave)}

.progreso{margin:18px 0 4px}
.progreso-barra{height:9px;background:var(--papel-hondo);overflow:hidden}
.progreso-barra span{display:block;height:100%;width:0;background:var(--ladrillo);
  transition:width .2s linear}
.progreso-texto{font-family:var(--dato);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-suave);margin:7px 0 0}

.listo{border:2px solid var(--tinta);background:var(--papel-alto);padding:26px;max-width:620px;
  box-shadow:5px 5px 0 var(--tinta)}
.listo-rotulo{font-family:var(--dato);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-suave);margin:0 0 6px}
.listo-numero{font-family:var(--display);font-size:38px;color:var(--ladrillo);margin:0 0 6px;line-height:1}
.listo-texto{margin:14px 0 18px;color:var(--tinta-media);font-size:16px}
.listo-nota{font-family:var(--dato);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-suave);margin:0}
.listo-correo{font-size:14px;color:var(--tinta-suave);margin:14px 0 0}

@media (min-width:600px){.pedido-rejilla{grid-template-columns:1fr 1fr;gap:18px}}
@media (prefers-reduced-motion:reduce){.progreso-barra span{transition:none}}

/* ══════════════════════════════════════════════════════════════════════
   v2 — un solo tramo comercial: calcula, sube y paga.
   La calculadora y el formulario dejaron de ser dos secciones separadas.
   ══════════════════════════════════════════════════════════════════════ */

/* La franja de tres pasos reemplaza a la sección "Cómo funciona" entera. */
.franja{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:0 0 clamp(20px,2.6vw,28px);
  padding:11px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.franja li{display:flex;align-items:baseline;gap:8px;font-family:var(--display);
  text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.franja-n{font-family:var(--dato);font-size:11px;letter-spacing:.1em;color:var(--ladrillo)}

.tramo{padding-top:clamp(16px,2.4vw,24px)}
.tramo + .tramo{margin-top:clamp(30px,4.5vw,52px);border-top:1px solid var(--linea)}
.tramo-titulo{display:flex;align-items:baseline;gap:12px;font-family:var(--display);
  text-transform:uppercase;font-size:clamp(19px,3vw,26px);margin:0 0 22px;letter-spacing:.01em}
.tramo-n{font-family:var(--display);font-size:clamp(24px,4vw,34px);color:var(--ladrillo);line-height:1}

.boleta-jura{font-family:var(--dato);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-media);margin:12px 0 0;padding-top:11px;border-top:1px dashed var(--linea)}

/* El resumen repite lo comprado arriba del formulario: el cliente nunca
   pierde de vista qué está pagando mientras llena sus datos. */
.resumen{font-family:var(--display);text-transform:uppercase;font-size:clamp(14px,2.2vw,17px);
  letter-spacing:.01em;background:var(--tinta);color:var(--papel-alto);
  padding:13px 17px;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
/* `hidden` no alcanza cuando el elemento tiene un display explícito: sin esta
   regla la cinta seguía ocupando su lugar aunque estuviera vacía. */
.resumen[hidden]{display:none}
.resumen b{color:var(--papel-alto);font-weight:400}
.resumen .resumen-total{margin-left:auto;color:var(--papel-alto);font-size:1.35em;line-height:1}

.requisito-subida{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:14px;color:var(--tinta-media);margin:12px 0 0}

/* El apunte pesa más que el TXT: título más grande, lista más oscura y sello. */
.lado-titulo--grande{font-size:clamp(24px,4vw,34px)}
.lado-lista--fuerte{color:var(--tinta);font-size:16.5px}
.sello-incluye{display:inline-block;font-family:var(--display);text-transform:uppercase;
  font-size:13px;letter-spacing:.03em;color:var(--papel-alto);background:var(--ladrillo);
  padding:8px 13px;margin:14px 0 0;transform:rotate(-1.2deg)}

.frase-corte{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(19px,3.4vw,32px);line-height:1.06;letter-spacing:.005em;
  margin:clamp(32px,5vw,48px) 0 0;max-width:22ch}

.opcion--destacada:has(input:checked){box-shadow:inset 0 0 0 2px var(--ladrillo),4px 4px 0 var(--linea)}

.aviso-fuerte{border:2px solid var(--ladrillo);background:var(--papel-alto);
  padding:18px 20px;margin:clamp(26px,4vw,38px) 0 0;font-size:17px;max-width:64ch}

.banda-nota{font-size:15px;color:rgba(237,227,204,.7);margin:26px 0 0;max-width:66ch}

.fijas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,4vw,40px);padding:0}
.fijas li{font-family:var(--display);text-transform:uppercase;font-size:12.5px;letter-spacing:.03em;
  border:1px solid var(--tinta);padding:8px 12px}

@media (max-width:719px){
  /* En móvil el resumen se pega arriba: al llenar los datos el total sigue
     a la vista, que es lo que sostiene la decisión de compra. */
  .resumen{position:sticky;top:0;z-index:40;margin-left:-22px;margin-right:-22px;
    padding-left:22px;padding-right:22px}
  .franja{flex-direction:column;gap:6px}
  .listo{box-shadow:4px 4px 0 var(--tinta)}
}

/* ══════════════════════════════════════════════════════════════════════
   v3 — sistema de movimiento
   Una sola idea: la página se comporta como algo que se imprime, se corrige
   y se timbra. Todo dura poco, pasa UNA vez y explica algo. Nada flota.
   ══════════════════════════════════════════════════════════════════════ */

/* ── campos con falta ── */
.con-falta input,.con-falta .soltar{border-color:var(--ladrillo)}
.con-falta .etiqueta{color:var(--ladrillo)}
input[aria-invalid],#archivo[aria-invalid]+.soltar{outline:none}
/* El encabezado pegado no puede tapar el campo al que se lleva el foco. */
.campo-simple,.campo,.casilla{scroll-margin-top:74px}

/* ── 1 · registro de impresión ──
   El fantasma rojo del titular entra desalineado y se asienta, como un pliego
   que se calza. 380 ms y no vuelve a pasar. */
.titular-b::before{animation:calzar .58s cubic-bezier(.22,.61,.36,1) both .12s}
@keyframes calzar{
  from{transform:translate(12px,-8px);opacity:.8}
  to{transform:translate(0,0);opacity:1}
}
.hoja-txt{animation:entrar-hoja .68s cubic-bezier(.22,.61,.36,1) backwards .22s}
@keyframes entrar-hoja{
  from{transform:translateY(22px) rotate(-1deg);opacity:0}
  to{transform:translateY(0) rotate(0);opacity:1}
}

/* ── 2 · las hojas del apunte ──
   Motion principal: el TXT ya está, y el apunte se arma encima. Dos tiempos,
   no seis: la flecha se dibuja (ya existía) y las hojas se apilan. */
.js .abanico:not(.armado) .pagina{opacity:0}
.abanico.armado .pagina--fondo{animation:apilar .5s cubic-bezier(.22,.61,.36,1) backwards}
.abanico.armado .pagina--medio{animation:apilar .5s cubic-bezier(.22,.61,.36,1) backwards .13s}
.abanico.armado .pagina--frente{animation:apilar .56s cubic-bezier(.22,.61,.36,1) backwards .26s}
/* El estado final va SIEMPRE explícito. Sin el `to`, el navegador lo resuelve
   como el valor de base del elemento — que acá es opacity:0 — y la hoja se
   animaba de invisible a invisible. */
@keyframes apilar{
  from{opacity:0;transform:translateY(26px) rotate(-2.4deg)}
  to{opacity:1;transform:translateY(0) rotate(0)}
}
.abanico.armado .pagina--fondo{animation-name:apilar-fondo}
.abanico.armado .pagina--medio{animation-name:apilar-medio}
@keyframes apilar-fondo{
  from{opacity:0;transform:rotate(3.2deg) translateX(14px) translateY(30px)}
  to{opacity:1;transform:rotate(3.2deg) translateX(14px)}
}
@keyframes apilar-medio{
  from{opacity:0;transform:rotate(1.6deg) translateX(7px) translateY(24px)}
  to{opacity:1;transform:rotate(1.6deg) translateX(7px)}
}
.js .lado--despues:not(.armado) .sello-incluye{opacity:0}
.abanico.armado ~ .sello-incluye,.lado--despues.armado .sello-incluye{
  animation:timbrar .34s cubic-bezier(.2,1.5,.35,1) both .78s}

/* ── 3 · la corrección editorial ──
   Lo mejor del sistema: la palabra mala se tacha con una línea que se dibuja,
   y la correcta entra estampada encima. Es lo que hace un corrector sobre una
   prueba de imprenta, y explica el producto sin una palabra más de copy. */
.correccion-texto--malo mark{position:relative}
.js .correccion-texto--malo mark{text-decoration:none}
.correccion-texto--malo mark::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;
  background:var(--ladrillo);transform:scaleX(0);transform-origin:left center}
.correccion.corregida .correccion-texto--malo mark::after{
  animation:tachar .42s cubic-bezier(.4,0,.5,1) both .35s}
@keyframes tachar{to{transform:scaleX(1)}}

.correccion-texto--bueno mark{display:inline-block}
.correccion.corregida .correccion-texto--bueno mark{
  animation:estampar .34s cubic-bezier(.2,1.5,.35,1) both .88s}
@keyframes estampar{
  from{opacity:0;transform:scale(1.14) rotate(-1.6deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
.js .correccion:not(.corregida) .correccion-texto--bueno mark{opacity:0}
.correccion.corregida .correccion-texto--bueno mark{opacity:1}

/* ── 4 · la bandeja de entrada ──
   Al arrastrar encima, la zona se comporta como una bandeja que recibe: la
   regla superior avanza y la flecha baja. Solo con los tres colores. */
.soltar{position:relative;overflow:hidden}
.soltar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--ladrillo);transform:scaleX(0);transform-origin:left center;
  transition:transform .18s ease}
.soltar.encima::before{transform:scaleX(1)}
.soltar.encima{background:var(--papel-hondo)}
.soltar-icono{transition:transform .18s ease}
.soltar.encima .soltar-icono{transform:translateY(5px)}
.soltar.con-archivo .soltar-icono{transform:rotate(180deg)}

/* ── 5 · la barra de progreso como línea de impresión ──
   Sigue leyéndose como progreso, pero avanza con la trama de una prensa. */
.progreso-barra span{
  background-image:repeating-linear-gradient(90deg,
    var(--ladrillo) 0 7px, var(--ladrillo-hondo) 7px 14px);
  animation:correr-trama .6s linear infinite}
@keyframes correr-trama{to{background-position-x:14px}}

/* ── 6 · el sello del pedido ──
   El momento de recompensa: el bloque llega como un timbre sobre el papel. */
.listo.timbrado{animation:timbrar-fuerte .42s cubic-bezier(.2,1.5,.35,1) both}
@keyframes timbrar-fuerte{
  0%{opacity:0;transform:scale(1.12) rotate(-2.2deg)}
  60%{opacity:1;transform:scale(.99) rotate(.4deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.listo.timbrado .listo-numero{animation:estampar .3s cubic-bezier(.2,1.4,.4,1) both .22s}

/* ── el precio: el papel avanza, la cifra se reimprime ──
   Sin contadores ni ruletas: el número cambia al tiro y solo se reimprime. */
.boleta-monto.cambia{animation:reimprimir .18s ease-out}
@keyframes reimprimir{
  from{opacity:.35;transform:translateY(-3px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  /* La regla general de arriba ya apaga animaciones y transiciones; acá solo
     hay que asegurar que nada quede invisible por haber empezado en opacity 0. */
  .abanico .pagina,.sello-incluye,.correccion .correccion-texto--bueno mark{opacity:1}
  /* Sin movimiento el TXT se queda escrito, que es lo que interesa mostrar. */
  .js .txt-bloque{opacity:1;animation:none}
  .js .maquina-linea{max-width:100%;animation:none}
  /* Sin movimiento la onda se queda oída hasta donde dice el tiempo, que es
     coherente con el 00:36 de 45:28 que muestra el reproductor. */
  .js .onda--oida{clip-path:inset(0 98.7% 0 0);animation:none}
  .js .reproductor-riel i{width:1.3%;animation:none}
  .js .onda-cabezal{display:none}
  .correccion-texto--malo mark::after{transform:scaleX(1)}
  .correccion-texto--malo mark{text-decoration:line-through}
}

/* ── contacto en el pie ── */
.pie-contacto{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.pie-contacto a{color:var(--ladrillo);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.pie-contacto a:hover{color:var(--ladrillo-hondo)}
@media (max-width:719px){
  .pie-fila{gap:14px}
  .pie-contacto{width:100%}
}

/* ── servicio cerrado ──
   Un cartel muerto desperdicia la visita. Este manda al WhatsApp con el
   mensaje escrito, así que el cierre recluta en vez de frenar. */
/* El margen de abajo NO es decorativo: el cartel terminaba pegado al primer
   campo del formulario, y su sombra de 5px caía justo encima de «Tu nombre».
   Se leía como un error de dibujo. */
.cerrado{border:2px solid var(--tinta);background:var(--papel-alto);
  padding:22px 24px;max-width:620px;box-shadow:5px 5px 0 var(--tinta);
  margin:0 0 clamp(28px,4vw,40px)}
.cerrado-titulo{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(19px,3.2vw,25px);margin:0 0 10px;letter-spacing:.01em;color:var(--ladrillo)}
.cerrado-texto{margin:0 0 12px;color:var(--tinta-media);max-width:52ch}
.cerrado-texto:last-of-type{margin-bottom:18px}
.cerrado-nota{font-family:var(--dato);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-suave);margin:16px 0 0}
@media (max-width:719px){.cerrado{padding:20px 18px;box-shadow:4px 4px 0 var(--tinta)}}

/* El código de tester viajaba solo en el enlace. Quien perdía el mensaje
   quedaba afuera sin manera de entrar, y el botón de al lado abre WhatsApp,
   así que parecía que no había puerta. Ahora se puede escribir. */
.codigo{margin:20px 0 0;max-width:420px}
.codigo-etiqueta{display:block;font-family:var(--dato);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-suave);margin-bottom:7px}
.codigo-fila{display:flex;gap:9px;align-items:stretch}
.codigo-fila input{flex:1;min-width:0;font-family:var(--dato);font-size:16px;padding:10px 12px;
  border:1px solid var(--linea);background:var(--papel-alto);color:var(--tinta);letter-spacing:.02em}
.codigo-fila input::placeholder{color:var(--tinta-suave);letter-spacing:0}
.codigo-fila input:focus{border-color:var(--ladrillo);outline:none}
.codigo-fila .boton{flex:none;padding:10px 20px;font-size:15px}
.codigo-aviso{margin:9px 0 0;font-size:14px;color:var(--ladrillo)}
.codigo-aviso[data-ok]{color:var(--tinta-media)}
@media (max-width:479px){.codigo-fila{flex-direction:column}.codigo-fila .boton{width:100%}}

.linea-descuento .concepto,.linea-descuento .monto{color:var(--ladrillo)}
.dcto{margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:14px}
.dcto-abrir{background:none;border:none;padding:0;cursor:pointer;font-family:var(--texto);
  font-size:14px;color:var(--tinta-suave);text-decoration:underline;text-underline-offset:3px}
.dcto-abrir:hover{color:var(--ladrillo)}
.dcto-campo{display:flex;gap:8px;align-items:stretch;flex:1;min-width:230px}
.dcto-campo input{flex:1;min-width:0;font-family:var(--dato);font-size:15px;padding:8px 11px;
  border:1px solid var(--linea);background:var(--papel-alto);color:var(--tinta)}
.dcto-campo input:focus{border-color:var(--ladrillo);outline:none}
.dcto-campo .boton{flex:none;padding:8px 16px;font-size:14px}
.dcto-aviso{flex-basis:100%;font-size:14px;color:var(--ladrillo)}
.dcto-aviso[data-ok]{color:var(--tinta-media);font-weight:600}

.ayuda-bajar{margin:10px 0 0;font-size:14px;color:var(--tinta-suave)}
.ayuda-bajar a{color:var(--ladrillo);text-underline-offset:3px}

.aviso-tester{border:2px solid var(--ladrillo);background:rgba(166,58,40,.08);
  padding:12px 15px;margin:0 0 22px;font-size:15px;max-width:620px}


/* ── vuelta desde el pago ────────────────────────────────────────────────
   El cliente que acaba de pagar aterriza acá. Va arriba de todo, con la banda
   de tinta, porque en ese momento no está mirando la portada: está buscando la
   confirmación de que su plata llegó a alguna parte. */
.vuelta-pago{background:var(--tinta);color:var(--papel-alto);
  padding:22px 0;border-bottom:4px solid var(--ladrillo)}
.vuelta-pago.es-problema{background:var(--ladrillo-hondo)}
.vuelta-titulo{font-family:var(--titulo);font-size:clamp(22px,3.4vw,31px);
  text-transform:uppercase;letter-spacing:.01em;margin:0 0 4px;line-height:1.05}
.vuelta-texto{margin:0;font-size:16px;color:var(--papel);max-width:62ch}
.vuelta-texto .pedido{font-family:var(--mono);font-size:.92em;
  background:rgba(237,227,204,.16);padding:2px 7px}

/* El plazo, en una frase, donde antes estaban las tres opciones de urgencia.
   Se promete 24 horas y se entrega mucho antes: es mejor prometer de menos y
   cumplir de más que al revés. */
.plazo-nota{margin:4px 0 0;font-size:15px;color:var(--tinta-media);
  padding:12px 14px;background:var(--papel-alto);border-left:3px solid var(--ladrillo)}

/* El aviso bajo el botón de continuar. Dice por qué está apagado; cuando se
   enciende, desaparece. */
.continuar-aviso{margin:8px 0 0;text-align:center;font-family:var(--dato);
  font-size:12.5px;color:var(--tinta-suave)}
.boton[disabled]{opacity:.45;cursor:default;pointer-events:none}

/* ── las partes de la clase ──

   Una clase partida en varios archivos se ve como una lista numerada, y el
   número es el dato importante: es el orden en que se va a pegar. Por eso va
   primero, grande y en el color de la marca, y no como una viñeta cualquiera.

   Los mandos son botones y no arrastre: en un teléfono no hay arrastre, y de
   ahí llega buena parte de los pedidos. */
.partes{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.parte{display:flex;align-items:center;gap:10px;
  background:var(--papel-alto);border:1px solid var(--linea);padding:9px 10px}
.parte-orden{flex:none;width:22px;text-align:center;font-family:var(--display);
  font-size:16px;color:var(--ladrillo);line-height:1}
.parte-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.parte-nombre{font-size:14px;color:var(--tinta);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.parte-glosa{font-family:var(--dato);font-size:12px;color:var(--tinta-suave)}
.parte-mandos{flex:none;display:flex;gap:4px}
.parte-mando{width:28px;height:28px;padding:0;line-height:1;cursor:pointer;
  border:1px solid var(--linea);background:var(--papel);color:var(--tinta-media);
  font-size:13px;transition:border-color .14s,color .14s}
.parte-mando:hover:not(:disabled){border-color:var(--ladrillo);color:var(--ladrillo)}
.parte-mando:disabled{opacity:.32;cursor:default}
.parte-mando--quitar:hover{border-color:var(--ladrillo);color:var(--ladrillo)}
/* La suma es lo que se cobra, así que se dice con todas sus letras: que son
   varias partes y que van EN ESE ORDEN. */
.partes-suma{margin:8px 0 0;font-family:var(--dato);font-size:13px;
  color:var(--tinta-media)}

/* La duración leída del archivo. No es una alerta: es el dato ya resuelto. */
.duracion-real{margin:10px 0 0;font-size:14.5px;font-family:var(--dato);letter-spacing:.01em}
.duracion-real.midiendo{color:var(--tinta-suave)}
.duracion-real.ok{color:var(--ladrillo);font-weight:600}
.duracion-real.manual{color:var(--tinta-media)}

/* En el teléfono la cinta no alcanza para el dato más los dos enlaces: al sumar
   "Ver mi pedido" los tres se partían en dos líneas y la barra crecía al doble.
   El dato es el que menos hace falta ahí: la página ya dice de qué se trata. */
@media (max-width:719px){
  .cinta-dato{display:none}
  /* Sin el dato del medio hace falta que algo separe los dos enlaces. */
  .cinta-fila{gap:12px;justify-content:space-between}
  .cinta-enlace{font-size:12px;white-space:nowrap}
}
@media (max-width:389px){
  .marca span{font-size:12px}
  .cinta-enlace{font-size:11px}
}

/* ═══════════════════════════════════════════ el hero cuenta la transformación
   De una grabación a un documento, en una sola pantalla y sin leer una
   palabra. Antes acá iba una muestra de TXT: el producto menor, y encima
   obligaba a comparar dos textos entre sí. */
.transformacion{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;
  margin-top:26px}
.transformacion .lado{text-align:center}
.transformacion .lado-titulo{margin-bottom:14px}

/* el reproductor: no funciona, muestra */
.reproductor{margin:0 0 14px;background:var(--papel-alto);border:1px solid var(--linea);
  padding:14px 16px 11px;box-shadow:3px 3px 0 rgba(28,26,23,.09)}
.onda{display:block;width:100%;height:34px}
.onda rect{fill:var(--tinta);opacity:.78}

/* La onda se reproduce. No es un ecualizador saltando —eso sería audio en
   vivo—: es un cabezal que avanza y va dejando atrás las barras ya oídas, que
   es lo que hace un reproductor de verdad. La barra de progreso de abajo
   avanza con el mismo tiempo y el mismo ritmo, o las dos se contradicen.

   El recorte se hace con `clip-path` sobre una copia teñida de la onda, y no
   animando 74 barras una por una: son 74 elementos y animar cada uno cuesta
   caro en un teléfono. Así el navegador anima una sola propiedad. */
.reproductor{position:relative}
.onda-envoltura{position:relative}
.onda--oida{position:absolute;inset:0;pointer-events:none}
.onda--oida rect{fill:var(--ladrillo);opacity:1}
.js .onda--oida{clip-path:inset(0 100% 0 0);animation:oir 14s linear infinite}
.js .reproductor-riel i{width:0;animation:oir-riel 14s linear infinite}
/* El cabezal: la línea fina que separa lo oído de lo que falta. */
.onda-cabezal{position:absolute;top:-2px;bottom:-2px;width:1.5px;
  background:var(--ladrillo);left:0;opacity:0}
.js .onda-cabezal{animation:oir-cabezal 14s linear infinite}

@keyframes oir{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes oir-riel{from{width:0} to{width:100%}}
@keyframes oir-cabezal{
  0%{left:0;opacity:0}
  4%{opacity:1}
  96%{opacity:1}
  100%{left:100%;opacity:0}
}
.reproductor-barra{display:flex;align-items:center;gap:10px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--linea)}
.reproductor-play{flex:none;width:0;height:0;border-left:11px solid var(--ladrillo);
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.reproductor-tiempo{font-family:var(--dato);font-size:11.5px;color:var(--tinta-media);
  white-space:nowrap}
.reproductor-riel{flex:1;height:3px;background:var(--linea);position:relative}
.reproductor-riel i{position:absolute;inset:0 auto 0 0;width:22%;background:var(--ladrillo)}

/* La flecha es la que dibujó el operador. Se intentó dos veces con SVG a mano y
   las dos quedó deforme; no se vuelve a intentar. */
.flecha-curva{display:flex;align-items:center;justify-content:center}
.flecha-curva img{display:block;width:104px;height:auto}

/* La franja de sellos: CINCO EN UNA FILA, con la placa del TXT al centro.
   Las dibujó el operador y el texto va dentro de la imagen, así que el `alt`
   es lo único que queda para quien no las ve.

   Se igualan por ALTURA, no por ancho. Es lo que hace que la fila se lea como
   una sola banda: las cuatro piezas cuadradas miden 2 a 1 y la placa del TXT
   5,6 a 1, así que fijar el ancho las dejaba de tamaños distintos y la placa
   enana. Con la altura pareja, cada una ocupa el largo que le corresponde y
   la placa queda naturalmente larga, que es lo que es.

   Antes la placa ocupaba un renglón entero para ella sola. Al centro de la
   fila cumple la misma función —parte la tira en dos mitades de dos— y ahorra
   un renglón completo. */
.tira-sellos{list-style:none;margin:30px 0 0;padding:26px 0 0;
  border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vw,30px) clamp(20px,3.6vw,54px)}
.tira-sellos li{flex:0 0 auto;min-width:0}
/* La altura manda; el ancho lo pone la proporción de cada dibujo. */
.tira-sellos img{display:block;height:clamp(38px,4.4vw,56px);width:auto;max-width:100%}

/* En pantallas medianas la fila de cinco no cabe entera. Antes que apretar las
   piezas hasta que el texto de adentro deje de leerse, se parte: la placa del
   TXT vuelve a su propio renglón y los cuatro sellos quedan de a dos y dos,
   que es lo que ya funcionaba. */
@media (max-width:1099px){
  .tira-sellos li.sello--ancho{flex:0 0 100%;display:flex;justify-content:center;
    order:9;margin-top:2px}
  .tira-sellos img{height:clamp(40px,5.6vw,52px)}
}

.acciones--centro{display:flex;justify-content:center;margin:30px 0 0}
.hero .pie-muestra{text-align:center;margin-top:16px}

@media (min-width:900px){
  .transformacion{grid-template-columns:1fr auto 1.02fr;gap:16px;margin-top:30px}
  .flecha-curva{padding-top:118px}
  .hero .titular-a,.hero .titular-b{font-size:clamp(52px,8.4vw,104px)}
  .hero .lema{margin-top:12px}
}
/* El bloque de transcripción se alinea a la izquierda aunque su columna esté
   centrada: es texto mecanografiado, y centrado deja de parecer un archivo. */
.transformacion .papel--crudo{text-align:left}
.transformacion .txt-muestra{text-align:left}
/* La hoja del apunte va alineada a la izquierda por dentro: un documento con
   los títulos centrados no parece un documento. */
.transformacion .abanico,
.transformacion .pagina{text-align:left}

@media (min-width:900px){
  .flecha-curva img{width:132px}
}
/* En una sola columna la flecha apunta hacia abajo, que es a donde está lo que
   sigue. */
@media (max-width:899px){
  .flecha-curva img{width:92px;transform:rotate(58deg)}
}


/* ═══════════════════════════════════════════════════ la escala de escritorio

   El operador miraba la página al 80% del navegador y la quería así: al 100%
   todo le quedaba encima.

   Lo que pasa es medible. En una pantalla de 1440 px el contenedor ocupa el
   92% del ancho y toda la tipografía está en su tope: el titular a 104 px, los
   títulos de sección a 54. Al 80% el navegador reporta 1800 px de ancho, así
   que los mismos valores en píxeles CSS ocupan proporcionalmente menos y se
   ven un quinto más chicos. No es que al 80% se vea distinto: es que al 100%
   está todo al máximo de la escala.

   Este bloque baja los topes un 20% y encoge el contenedor en la misma
   proporción, que es lo que hace que sobre papel a los lados. **Solo desde
   1100 px**: el teléfono y la tableta no se tocan, ahí la escala fluida ya
   entrega el tamaño correcto y achicarla dejaría el texto ilegible.

   Se cambian los TOPES, no los mínimos ni el comportamiento fluido: entre 1100
   y 1500 px la página sigue acomodándose sola. */
@media (min-width:1100px){
  :root{
    --ancho:1120px;
    --paso:clamp(56px,8vw,76px);
  }

  .hero{padding:clamp(36px,6vw,52px) 0 clamp(30px,4vw,38px)}
  .hero + .seccion{padding-top:clamp(30px,4vw,38px)}
  .hero .titular-a,.hero .titular-b{font-size:clamp(46px,8.4vw,84px)}
  .titular-a{font-size:clamp(46px,13vw,106px)}
  .titular-b{font-size:clamp(58px,17vw,141px)}
  .lema{font-size:clamp(12px,2.4vw,14px)}
  .hero-cuerpo{margin-top:clamp(28px,4vw,35px)}
  .entrada{font-size:clamp(18px,2.4vw,18px)}

  .titulo{font-size:clamp(28px,5.4vw,43px)}
  .bajada{font-size:16px;margin-bottom:clamp(28px,4vw,35px)}
  .lado-titulo{font-size:clamp(21px,3.4vw,24px)}
  .lado-titulo--grande{font-size:clamp(24px,4vw,27px)}
  .remate{font-size:16px;margin-top:clamp(28px,4vw,32px)}

  .sellos-banda{padding:clamp(30px,5vw,35px) 0}
  .cierre{padding:clamp(48px,7vw,64px) 0}
  .cierre-frase{font-size:clamp(26px,5.6vw,43px)}

  .tramo{padding-top:clamp(16px,2.4vw,20px)}
  .tramo + .tramo{margin-top:clamp(30px,4.5vw,42px)}
  .tramo-titulo{font-size:clamp(19px,3vw,21px)}
  .tramo-n{font-size:clamp(24px,4vw,27px)}
  .resumen{font-size:clamp(14px,2.2vw,15px)}

  .frase-corte{font-size:clamp(19px,3.4vw,26px);margin:clamp(34px,5vw,38px) 0}
  .aviso-fuerte{font-size:16px;margin-top:clamp(26px,4vw,30px)}
  .cerrado-titulo{font-size:clamp(19px,3.2vw,20px)}
  .vuelta-titulo{font-size:clamp(22px,3.4vw,25px)}

  /* La máquina y el botón se escalan con lo demás para que la proporción del
     encabezado no cambie. */
  .maquina{width:min(150px,34vw)}
  .boton-sello img{width:min(205px,62vw)}
  /* 62 px y no 52: con 52 la fila medía 892 px dentro de un contenedor de
     1.076 y quedaban 184 px de papel sin usar a los lados. A 62 la tira llena
     el ancho y los sellos se leen mejor. */
  .tira-sellos img{height:62px}
  .tira-sellos{gap:26px 52px}
}