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

/* ---- página corta: portada y secciones más compactas (solo aquí) ---- */
.pr .hero{padding:var(--s-48) 0 var(--s-32)}
.pr .hero h1{max-width:none}
.pr .sec{padding:var(--s-48) 0}
.pr .sec-head{max-width:none;margin-bottom:var(--s-24)}
.pr .sec-head .lede{font-size:var(--t-19);letter-spacing:var(--trk-19);max-width:46em;margin-top:var(--s-12)}
.pr .tabs{margin-bottom:var(--s-24)}
@media (max-width:620px){.pr .sec-head .lede{font-size:var(--t-17)}.pr .hero .lede{font-size:var(--t-19)}}
.pr details.mas{margin-top:var(--s-24)}

/* ---- el deck de ejemplo: visor en un marco, con sus controles dentro ---- */
.pr-deck{margin-bottom:var(--s-16)}
.pr-deck-fila{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--s-24);align-items:start}
@media (max-width:900px){.pr-deck-fila{grid-template-columns:minmax(0,1fr);gap:0}}
.pr-visor{container-type:inline-size;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);overflow:hidden;background:var(--superficie)}
.pr-visor iframe{display:block;width:100%;height:calc(100cqw * .5625 + 56px);border:0}
.pr-chips{margin:0;gap:4px;flex-direction:column;flex-wrap:nowrap}
@media (max-width:900px){.pr-chips{flex-direction:row;flex-wrap:wrap;margin:var(--s-16) 0 var(--s-8)}}
.pr-chips button{display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 4px;min-height:38px;transition:background var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro),border-color var(--dur-micro) var(--mov-micro)}
.pr-chips .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);font-size:var(--t-12);font-weight:var(--bold);font-variant-numeric:tabular-nums;color:var(--texto-2)}
.pr-chips button[aria-pressed="true"] .n{border-color:var(--fondo);color:var(--fondo)}
.pr-chips button:hover:not([aria-pressed="true"]){border-color:var(--texto);color:var(--texto)}
.pr-pie-deck{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-12) var(--s-32);margin:var(--s-8) 0 var(--s-8)}
.pr-cap{flex:1 1 380px;margin:0;font-size:var(--t-15);color:var(--texto-2);min-height:3em;max-width:40em}
.pr-cap b{color:var(--texto)}
.pr-pie-deck .acciones{margin:0}

/* ---- pieza con marcas numeradas y su lista de reglas ---- */
.pr-ana{display:grid;gap:var(--s-24) var(--s-48);align-items:start}
.pr-ana-reglas{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.pr-ana-reglas{grid-template-columns:minmax(0,1fr)}}
.pr-fig{position:relative;min-width:0}
.pr-ana-reglas>.pr-fig{position:sticky;top:calc(var(--cabecera) + 24px)}
@media (max-width:900px){.pr-ana-reglas>.pr-fig{position:relative;top:auto}}
.pr-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)}
.pr-mk.hl{background:var(--tinta);color:var(--blanco)}
.pr-reglas{list-style:none;margin:0;padding:0}
.pr-reglas li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--s-8);padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-15);line-height:var(--lh-cuerpo);transition:background var(--dur-micro) var(--mov-micro)}
.pr-reglas li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.pr-reglas .n{font-variant-numeric:tabular-nums;font-weight:var(--bold);color:var(--texto-2)}
.pr-reglas b{color:var(--texto)}
.pr-reglas span:last-child{color:var(--texto-2)}
.pr-reglas li.hl{background:var(--superficie)}

/* ---- portadas: claro y oscuro apilados, guías encima ---- */
.pr-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-8) var(--s-24);margin-bottom:var(--s-12)}
.pr-ctl .filtros{margin:0}
.pr-ana-portada{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pr-colfig{min-width:0}
.pr-colfig>.tiny{margin:var(--s-8) 0 0}
.pr-bajar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px;margin-top:var(--s-16)}
@media (max-width:900px){.pr-ana-portada{grid-template-columns:minmax(0,1fr)}}
.pr-pila{display:grid}
.pr-pila>.scaled{grid-area:1/1;transition:opacity var(--dur-estado) var(--mov-estado)}
.pr-pila[data-tema="claro"]>.pr-t-oscuro,.pr-pila[data-tema="oscuro"]>.pr-t-claro{opacity:0}
.pr-gu{position:absolute;inset:1px;pointer-events:none;opacity:0;transition:opacity var(--dur-estado) var(--mov-estado);z-index:2}
.pr-fig.guias .pr-gu{opacity:1}
.pr-caja{position:absolute;left:6.25%;right:6.25%;top:7.78%;bottom:8.89%;border:2px dashed var(--apagado)}
.pr-l30{position:absolute;left:0;right:0;top:30%;border-top:2px dashed var(--acento)}
.pr-l30 em{position:absolute;right:8px;top:-12px;font-style:normal;font-size:var(--t-12);font-weight:var(--bold);line-height:1;padding:5px 9px;border-radius:var(--r-pill);background:var(--blanco);color:var(--tinta);border:var(--borde-ancho) solid var(--linea)}
.pr-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}
.pr-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)}
.pr-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)}
.pr-tog[aria-checked="true"] .pr-tog-sw{border-color:var(--acento)}
.pr-tog[aria-checked="true"] .pr-tog-sw b{transform:translateY(-19px);background:var(--acento)}
.pr-tog small{display:block;font-size:var(--t-12);font-weight:var(--regular);color:var(--texto-2)}
.pr-refs{margin-top:var(--s-8)}
.pr-tit td:first-child{white-space:nowrap;color:var(--texto-2)}
.pr-tit td:nth-child(2){color:var(--texto-2)}
.pr-tit td:nth-child(3){font-size:var(--t-17);font-weight:var(--bold)}

/* ---- tipos de lámina ---- */
/* .car-track solo para que en celular sea una tira deslizable; en escritorio es una rejilla */
.pr-tipos.car-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32) var(--medianil);overflow:visible;padding:0}
@media (max-width:900px){.pr-tipos.car-track{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pr-t figcaption{margin-top:var(--s-12);font-size:var(--t-15);color:var(--texto-2)}
.pr-t figcaption b{display:flex;align-items:center;gap:var(--s-8);color:var(--texto);font-size:var(--t-17);letter-spacing:var(--trk-17);margin-bottom:var(--s-4)}
.pr-t figcaption .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:var(--borde-encendido) solid var(--texto);font-size:var(--t-12);font-variant-numeric:tabular-nums}
.pr-t figcaption p{margin:0}
.pr-t-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);margin-top:var(--s-8)}
.pr-t-pie .tiny{min-width:0}
.pr-otras figure{margin:0}
.pr-otras figcaption{margin-top:var(--s-8);font-size:var(--t-15);color:var(--texto-2)}
.pr-otras figcaption b{display:block;color:var(--texto)}

/* ---- los once pasos del deck comercial ---- */
.pr-est{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-48);align-items:start}
.pr-lista{list-style:none;margin:0;padding:0}
.pr-lista li{border-top:var(--borde-ancho) solid var(--borde)}
.pr-lista li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.pr-lista button{display:grid;grid-template-columns:18px 28px minmax(0,1fr);align-items:center;gap:var(--s-8);width:100%;min-height:42px;padding:2px 4px 2px 0;background:transparent;border:0;font:inherit;font-size:var(--t-17);text-align:left;color:var(--texto-2);cursor:pointer;transition:color var(--dur-micro) var(--mov-micro)}
.pr-lista button:hover{color:var(--texto)}
.pr-lista button[aria-pressed="true"]{color:var(--texto);font-weight:var(--bold)}
.pr-sw{display:block;position:relative;width:10px;height:18px;margin-left:4px;border:1.5px solid var(--control-apagado);border-radius:var(--r-pill);transition:border-color var(--dur-estado) var(--mov-estado)}
.pr-sw b{position:absolute;left:1.5px;right:1.5px;bottom:1.5px;height:5px;border-radius:var(--r-pill);background:var(--control-apagado);transition:transform var(--dur-estado) var(--mov-estado),background var(--dur-estado) var(--mov-estado)}
.pr-lista button[aria-pressed="true"] .pr-sw{border-color:var(--acento)}
.pr-lista button[aria-pressed="true"] .pr-sw b{background:var(--acento);transform:translateY(-7px)}
.pr-lista .n{font-variant-numeric:tabular-nums;color:var(--texto-2);font-weight:var(--bold)}
.pr-panel{position:sticky;top:calc(var(--cabecera) + 24px)}
.pr-prev{margin-bottom:var(--s-12)}
.pr-vacio{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s-32);background:var(--superficie);text-align:center}
.pr-vacio[hidden]{display:none}
.pr-vacio p{margin:0;max-width:22em;color:var(--texto-2);font-size:var(--t-17)}
.pr-qq{margin:0 0 var(--s-4);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.pr-panel h3{margin-bottom:var(--s-8)}
.pr-panel p{color:var(--texto-2)}
@media (max-width:900px){
  .pr-est{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}
  .pr-panel{position:static;order:-1}
  .pr-lista{display:flex;flex-wrap:wrap;gap:6px}
  .pr-lista li{border:0!important}
  .pr-lista button{display:inline-flex;min-height:40px;padding:4px 12px 4px 8px;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-pill);width:auto;font-size:var(--t-15)}
  .pr-lista button[aria-pressed="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
  .pr-lista .pr-sw,.pr-lista .t{display:none}
  .pr-lista button[aria-pressed="true"] .t{display:inline}
  .pr-lista button .n{margin:0}
}

/* ---- charla ---- */
.pr-charla.car-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--medianil);overflow:visible;padding:0}
.pr-charla figure{margin:0}
.pr-charla figcaption{margin-top:var(--s-8);font-size:var(--t-15);color:var(--texto-2)}
.pr-charla figcaption b{display:block;color:var(--texto)}

/* ---- lo que ya hicimos ---- */
.pr-hecho{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-32) var(--s-32);align-items:start}
.pr-hecho-txt{min-width:0}
.pr-hecho-txt h3{margin-bottom:var(--s-4)}
.pr-hecho-txt p{font-size:var(--t-15)}
.pr-hecho-txt .tiny{font-size:var(--t-12)}
.pr-hecho-txt .kv{grid-template-columns:minmax(0,1fr);gap:2px;margin:0}
.pr-hecho-txt .kv dt{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase}
.pr-hecho-txt .kv dd{margin-bottom:var(--s-12)}
.pr-hecho-img{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16) var(--s-12)}
.pr-hecho-img figure{margin:0;min-width:0}
.pr-hecho-img img{width:100%;height:auto;border-radius:var(--r-campo);border:var(--borde-ancho) solid var(--borde);background:var(--superficie)}
.pr-hecho-img figcaption{font-size:var(--t-12);color:var(--texto-2);margin-top:6px}
@media (max-width:900px){.pr-hecho{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.pr-hecho-img{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- lo que no se hace: un par por pestaña ---- */

/* ---- descargas ---- */
.pr-tabla td:first-child{white-space:nowrap}
.pr-tabla td:last-child{white-space:nowrap}
@media (min-width:701px){.pr-tabla .acciones{flex-wrap:nowrap}}
.pr-pasos{margin:0 0 var(--s-16);padding-left:1.2em;font-size:var(--t-17)}
.pr-pasos li{margin-bottom:var(--s-8)}

@media (max-width:620px){.pr-mk{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:10px;border-width:1.5px}}
@media (max-width:700px){
  .pr-tit thead{display:none}
  .pr-tit tr{display:block;padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  .pr-tit td{display:block;border:0;padding:2px 0;white-space:normal!important}
  .pr-tit td:first-child{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase}
  .pr-tit td:nth-child(2)::before{content:"Antes: "}
}
/* las referencias son <figure>: sin el margen que el navegador les pone */
figure.ref{margin:0}

/* celular: cada pieza de la lista de descargas es un bloque, con todos sus botones a la vista */
@media (max-width:700px){
  .pr-tabla thead{display:none}
  .pr-tabla,.pr-tabla tbody,.pr-tabla tr,.pr-tabla td{display:block;width:100%}
  .pr-tabla tr{padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  .pr-tabla td{border:0;padding:2px 0;white-space:normal!important}
  .pr-tabla td:first-child{font-size:var(--t-17);font-weight:var(--bold)}
  .pr-tabla td:nth-child(2){color:var(--texto-2)}
  .pr-tabla td:last-child{display:flex;flex-wrap:wrap;gap:var(--s-8);padding-top:var(--s-8)}
  .pr-tabla td:last-child .btn+.btn{margin-left:0}
}

/* celular: los tipos de lámina y la charla son tiras deslizables (la siguiente asoma por la derecha) */
@media (max-width:620px){
  .pr-tipos.car-track,.pr-charla.car-track{display:flex;gap:var(--s-16);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-8)}
  .pr-tipos.car-track>*,.pr-charla.car-track>*{flex:0 0 82%;scroll-snap-align:start}
}