/* p-papeleria.css · /papeleria/ · solo tokens (sin hex sueltos, sin sombras, sin degradados, sin rebotes) · prefijo pp- */

/* ---- ritmo de la página: secciones más juntas, para que se lea de una pasada ---- */
.hero{padding:var(--s-64) 0 var(--s-32)}
.hero-acc{margin-top:var(--s-24)}
.sec{padding:var(--s-48) 0}
.sec-head{max-width:none;margin-bottom:var(--s-24)}
.sec-head .lede{margin-bottom:0}
.sec details.mas{margin-top:var(--s-24)}

.pp-vis{margin-bottom:var(--s-16)}
.pp-nota{display:none}
.pp-h3{font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:1.25;margin:0 0 var(--s-16)}
.pp-h3.mt-0{margin-top:0}

/* ---- la idea: cuatro hojas pequeñas, una por regla ---- */
.pp-reglas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-32) var(--medianil)}
.pp-reglas li{border-top:var(--borde-encendido) solid var(--texto);padding-top:var(--s-16);display:flex;flex-direction:column;gap:var(--s-8);min-width:0}
.pp-reglas h3{font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:1.25}
.pp-reglas p{margin:0;font-size:var(--t-15);color:var(--texto-2)}
.pp-hoja{width:96px;height:auto;margin-bottom:var(--s-4);overflow:visible}
/* las hojas son papel: usan colores de paleta fijos, no los roles del tema */
.pp-p{fill:var(--blanco);stroke:var(--apagado);stroke-width:.5}
.pp-g{stroke:var(--apagado);stroke-width:.35;stroke-dasharray:1.4 1.4;fill:none}
.pp-t{fill:var(--tinta)}.pp-n{fill:var(--pizarra)}.pp-l{fill:var(--linea)}.pp-c{fill:var(--papel)}.pp-a{fill:var(--encendido)}
.pp-x{stroke:var(--tinta);stroke-width:1.1;stroke-linecap:round;fill:none}

/* ---- la letra: cuatro muestras a tamaño real en pt y tres reglas ---- */
.pp-letra{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-48);align-items:start}
.pp-muestras{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-24) var(--s-32);display:grid;gap:var(--s-16)}
.pp-muestras span{display:block;color:var(--texto)}
.pp-muestras small{display:block;font-size:var(--t-12);color:var(--texto-2);margin-top:2px;font-variant-numeric:tabular-nums}
.pp-pts{list-style:none;margin:0;padding:0;font-size:var(--t-15);color:var(--texto-2)}
.pp-pts li{padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde)}
.pp-pts li:first-child{padding-top:0;border-top:0}
.pp-pts b{color:var(--texto)}
.pp-tipos td{vertical-align:middle}
.pp-tipos td:nth-child(2){min-width:340px}
.pp-tipos td span{display:block;white-space:nowrap;color:var(--texto)}
.pp-t1{font-size:36pt;line-height:38pt;font-weight:var(--bold);letter-spacing:var(--trk-58)}
.pp-t2{font-size:48pt;line-height:1;font-weight:var(--bold);letter-spacing:var(--trk-80);font-variant-numeric:tabular-nums}
.pp-t3{font-size:20pt;line-height:24pt;font-weight:var(--bold);letter-spacing:var(--trk-30)}
.pp-tipos .pp-t4{font-size:12pt;line-height:17pt;letter-spacing:var(--trk-19);color:var(--texto-2)}
.pp-t5{font-size:10pt;line-height:14.17pt}
.pp-t6{font-size:9pt;line-height:12pt}
.pp-tipos .pp-t7,.pp-muestras .pp-t7{font-size:7pt;line-height:9pt;font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.pp-tipos .pp-t8{font-size:7pt;line-height:9pt;color:var(--texto-2)}

/* ---- interruptor que enciende la cuadrícula (la misma cápsula del logo) ---- */
.pp-ctl{margin-bottom:var(--s-8)}
.pp-tog{display:inline-flex;align-items:center;gap:var(--s-12);min-height:var(--tocable);padding:0;border:0;background:transparent;font:inherit;font-size:var(--t-15);font-weight:var(--bold);color:var(--texto);cursor:pointer;text-align:left}
.pp-tog-sw{position:relative;display:block;width:24px;height:42px;border:var(--borde-encendido) solid var(--control-apagado);border-radius:var(--r-pill);flex:none;transition:border-color var(--dur-estado) var(--mov-estado)}
.pp-tog-sw b{position:absolute;left:50%;bottom:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--control-apagado);transition:transform var(--dur-estado) var(--mov-estado),background var(--dur-estado) var(--mov-estado)}
.pp-tog[aria-checked="true"] .pp-tog-sw{border-color:var(--acento)}
.pp-tog[aria-checked="true"] .pp-tog-sw b{transform:translateY(-19px);background:var(--acento)}
.pp-tog small{display:block;font-size:var(--t-12);font-weight:var(--regular);color:var(--texto-2)}

/* ---- piezas con marcas numeradas encima ---- */
.pp-fr{position:relative;min-width:0}
.pp-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--medianil);align-items:start}
.pp-par .fig figcaption{margin-top:var(--s-8);font-size:var(--t-12)}
.pp-split .fig figcaption{margin-top:var(--s-8);font-size:var(--t-12)}
.pp-mk{position:absolute;z-index:3;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--blanco);border:var(--borde-encendido) solid var(--tinta);color:var(--tinta);font-style:normal;font-size:var(--t-12);font-weight:var(--bold);display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro)}
.pp-mk.hl{background:var(--tinta);color:var(--blanco)}
.pp-reglas-l{list-style:none;margin:0;padding:0}
.pp-reglas-l li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-8);padding:var(--s-8) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-15);line-height:1.4;transition:background var(--dur-micro) var(--mov-micro)}
.pp-reglas-l li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.pp-reglas-l .n{font-variant-numeric:tabular-nums;font-weight:var(--bold);color:var(--texto-2)}
.pp-reglas-l b{color:var(--texto)}
.pp-reglas-l span:last-child{color:var(--texto-2)}
.pp-reglas-l li.hl{background:var(--superficie)}
.pp-reglas-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-32);margin-top:var(--s-24)}
.pp-reglas-2 li:nth-last-child(2){border-bottom:var(--borde-ancho) solid var(--borde)}

/* membrete: dos hojas a la izquierda, reglas a la derecha */
.pp-trio{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-32);align-items:start}
/* carta y propuesta: una hoja y sus reglas */
.pp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-48);align-items:start}
.pp-split>.fig{min-width:0}
.pp-lado{min-width:0}
.pp-lado .acciones{margin-top:var(--s-16)}
.pp-kv dt{white-space:nowrap}
/* tarjeta: las dos caras a tamaño real y los datos al lado */
.pp-tj{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-32);align-items:start}
.pp-par-t{grid-template-columns:repeat(2,minmax(0,322px));gap:var(--s-24)}
.pp-tj .pp-lado{padding-top:var(--s-8)}
.pp-tj .pp-kv{gap:var(--s-4) var(--s-16)}

/* ---- héroe: las piezas entran una tras otra dentro de su iframe (clase pre) ---- */
.pp-hero-stage .scaled{border:0;border-radius:0;background:transparent}
.pp-desliza{display:none}

/* ---- sobre: ensobrar, con la misma escala para la hoja y el sobre (210 y 220 mm) ---- */
.pp-sob{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s-48);align-items:start}
.pp-ens{display:block;aspect-ratio:1.176/1;min-width:0}
.pp-ens>div{position:absolute}
.pp-ens-carta{left:5%;top:4.2%;width:52.5%;opacity:0}
.pp-ens-sobre{left:35%;top:37.8%;width:55%;opacity:0}
.pp-ens.is-playing .pp-ens-carta{animation:pp-carta 4.5s both}
.pp-ens.is-playing .pp-ens-sobre{animation:pp-sobre 4.5s both}
/* la carta (pintada debajo) se dobla, baja sobre el sobre y entra por detrás de su frente: queda tapada, no desaparece */
@keyframes pp-carta{
  0%{opacity:0;clip-path:inset(0 0 0 0);transform:translate(0,0);animation-timing-function:var(--mov-entrada)}
  7%,24%{opacity:1;clip-path:inset(0 0 0 0);transform:translate(0,0)}
  24%{animation-timing-function:var(--mov-estado)}
  44%,58%{opacity:1;clip-path:inset(0 0 64.6% 0);transform:translate(0,0)}
  58%{animation-timing-function:var(--mov-estado)}
  74%,80%{opacity:1;clip-path:inset(0 0 64.6% 0);transform:translate(59.55%,1.4%)}
  80%{animation-timing-function:var(--mov-estado)}
  94%,100%{opacity:1;clip-path:inset(0 0 64.6% 0);transform:translate(59.55%,39.3%)}
}
@keyframes pp-sobre{0%,34%{opacity:0}40%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pp-ens-carta,.pp-ens-sobre{opacity:1}}
.pp-pasos-l{margin-top:var(--s-16);max-width:980px}

/* ---- firma de correo ---- */
.pp-fgen{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-32);align-items:start}
.pp-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-16);align-items:end}
.pp-campos>.filtros,.pp-campos>.pp-chk,.pp-campos>.acciones{grid-column:1/-1}
.pp-campos .filtros{margin-bottom:var(--s-16)}
.pp-campos .campo{margin-bottom:var(--s-12)}
.pp-campos .campo input{min-width:0;width:100%}
.pp-campos>.acciones{margin-top:var(--s-24)}
.pp-chk{display:flex;gap:var(--s-12);align-items:flex-start;font-size:var(--t-15);cursor:pointer;line-height:1.4}
.pp-chk input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--acento)}
.pp-mail{position:relative;background:var(--blanco);color:var(--tinta);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);overflow:hidden}
.pp-mail .tag{color:var(--pizarra);border-color:var(--linea);background:var(--blanco)}
.pp-mail-tag{position:absolute;right:12px;top:10px}
.pp-mail-cab div{padding:10px 20px;border-bottom:var(--borde-ancho) solid var(--linea);font-size:var(--t-15);color:var(--pizarra)}
.pp-mail-cab b{color:var(--tinta);font-weight:var(--regular)}
.pp-mail-cuerpo{padding:20px}
.pp-mail-cuerpo p{margin:0 0 var(--s-12);font-size:var(--t-15);line-height:1.5;color:var(--tinta);max-width:none}
#pp-firma{margin-top:var(--s-16)}
.pp-mail-s{padding:20px}
.pp-pasos-t{margin:0;padding-left:1.2em;font-size:var(--t-15);color:var(--texto-2)}
.pp-pasos-t li+li{margin-top:var(--s-8)}
.pp-firma-mal{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:13px;line-height:19px;color:var(--pizarra)}
.pp-firma-mal b{color:var(--encendido);font-size:16px}
.pp-firma-mal em{color:var(--apagado)}
.pp-mal-redes{display:flex;gap:6px}
.pp-mal-redes i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:var(--borde-ancho) solid var(--apagado);font-style:normal;font-size:10px;font-weight:var(--bold);color:var(--apagado)}
.pp-mal-banner{align-self:stretch;margin-top:6px;padding:12px;border-radius:8px;background:var(--encendido);color:var(--blanco);font-weight:var(--bold);text-align:center}

/* ---- lo que no se hace: un error por pestaña, con su sí y su no ---- */
.pp-no{display:grid;grid-template-columns:minmax(0,1fr)}
.pp-no .tabs{margin-bottom:var(--s-24)}
/* los seis paneles ocupan el mismo lugar: la caja mide lo del más alto y nada salta al cambiar de pestaña */
.pp-no .tabpanel{grid-area:2/1}
.pp-no .tabpanel[hidden]{display:block;visibility:hidden}
.pp-mw{max-width:380px}
#ne-tarjeta .pp-mw{max-width:322px}
.pp-lista{margin:0;padding-left:1.1em;font-size:var(--t-15);color:var(--texto-2)}
.pp-lista li+li{margin-top:var(--s-8)}
.pair .scaled{border-radius:var(--r-captura)}

/* ---- imprenta ---- */
.pp-tintas{--alto:64px}

/* ---- descargas ---- */
.pp-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24) var(--medianil)}
.pp-dl>div{border-top:var(--borde-ancho) solid var(--borde);padding-top:var(--s-12);display:flex;flex-direction:column;gap:2px}
.pp-dl .acciones{margin-top:var(--s-8)}

@media (max-width:1200px){
  .pp-tj{grid-template-columns:minmax(0,1fr)}
  /* apilado: primero el interruptor, luego la pieza, luego las reglas y al final los botones */
  .pp-trio,.pp-split{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-16)}
  .pp-trio>.pp-lado,.pp-split>.pp-lado{display:contents}
  .pp-trio .pp-lado>.pp-ctl,.pp-split>.pp-lado>.pp-ctl{order:1;margin:0}
  .pp-trio .pp-par,.pp-split>.fig{order:2}
  .pp-trio .pp-lado>.pp-reglas-l,.pp-split>.pp-lado>.pp-reglas-l{order:3}
  .pp-trio .pp-lado>.acciones,.pp-split>.pp-lado>.acciones{order:4;margin-top:0}
  .pp-split>.fig{max-width:420px;width:100%;align-self:flex-start}
  .pp-sob .pp-ens{max-width:700px}
  .pp-trio .pp-par{max-width:640px}
}
@media (max-width:900px){
  .pp-reglas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-fgen,.pp-letra,.pp-sob{grid-template-columns:minmax(0,1fr)}
  .pp-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-reglas-2{grid-template-columns:minmax(0,1fr)}
  .pp-reglas-2 li:nth-last-child(2){border-bottom:0}
}
@media (max-width:700px){
  .pp-par{grid-template-columns:minmax(0,1fr)}
  .pp-reglas{grid-template-columns:minmax(0,1fr)}
  .pp-reglas li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s-16);row-gap:var(--s-4);align-items:start}
  .pp-reglas .pp-hoja{width:64px;grid-row:1/3;margin:0}
  /* en celular cada pestaña ocupa solo su alto: los paneles ocultos no reservan lugar */
  .pp-no{display:block}
  .pp-no .tabpanel[hidden]{display:none;visibility:visible}
  .pp-mk{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:10px}
  .pp-par-t{grid-template-columns:minmax(0,322px)}
}
@media (max-width:620px){
  .pp-dl{grid-template-columns:minmax(0,1fr)}
  .pp-campos{grid-template-columns:minmax(0,1fr)}
}

/* ---- celular: la lámina del héroe se desliza (a 340 px nada se lee) y la tabla de letras se apila ---- */
@media (max-width:700px){
  .pp-nota{display:block;margin-top:var(--s-12)}
  .pp-hero-stage{display:block;justify-items:start;place-items:start;overflow-x:auto;padding-bottom:48px}
  .pp-hero-stage .scaled{min-width:860px}
  .pp-desliza{display:inline}
  .pp-tipos thead{display:none}
  .pp-tipos,.pp-tipos tbody,.pp-tipos tr,.pp-tipos td{display:block}
  .pp-tipos tr{padding:var(--s-16) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  .pp-tipos td{padding:0;border:0}
  .pp-tipos td:first-child{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
  .pp-tipos td:nth-child(2){min-width:0;margin:var(--s-8) 0}
  .pp-tipos td span{white-space:normal}
  .pp-tipos td:nth-child(n+3){display:inline;font-size:var(--t-12);color:var(--texto-2)}
  .pp-tipos td:nth-child(n+4)::before{content:" · "}
}

/* celular: la tabla de imprenta pasa a lista (cada pieza, con su papel, su tinta y lo que cuida) */
@media (max-width:700px){
  #imprenta .tabla thead{display:none}
  #imprenta .tabla,#imprenta .tabla tbody,#imprenta .tabla tr,#imprenta .tabla td{display:block;width:100%}
  #imprenta .tabla tr{padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  #imprenta .tabla td{border:0;padding:2px 0;color:var(--texto-2)}
  #imprenta .tabla td:first-child{font-size:var(--t-17);color:var(--texto)}
  #imprenta .tabla td:nth-child(2)::before{content:"Papel: "}
  #imprenta .tabla td:nth-child(3)::before{content:"Tinta: "}
  #imprenta .tabla td:nth-child(4)::before{content:"Cuida: "}
}