/* ============================================================
   SR · Capa de entregable cliente-facing
   Propuestas, decks y one-pagers. Consume sr.css.

   Se copia al proyecto junto con sr.css y la fuente. No se edita
   sr.css: esa es la hoja de produccion y la fuente de verdad.

   Sin acento por cliente. Se discontinuo el 2026-09-02: la marca no
   tiene color y la diferenciacion vive en el contenido.
   ============================================================ */

html{scroll-behavior:smooth}
body{margin:0}

/* ============ tira de marca ============ */
.sr-bar{position:sticky;top:0;z-index:50;background:var(--sr-paper);border-bottom:1px solid var(--sr-ink)}
.sr-bar-in{max-width:1180px;margin:0 auto;padding:16px var(--sr-margin);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sr-3)}
.sr a.sr-bar-l{display:inline-flex;align-items:center;border-bottom:0;padding-bottom:0;line-height:1}

/* ============ scroll-page de propuesta ============ */
.sr-sec{border-top:1px solid var(--sr-line);padding-top:var(--sr-5);margin-top:var(--sr-6);
  scroll-margin-top:var(--sr-5)}
.sr-sec:first-of-type{border-top:0;margin-top:0;padding-top:var(--sr-6)}
/* Columna de lectura + nota al margen. El indice de seccion va en la nota. */
.sr-cols{display:grid;grid-template-columns:minmax(0,600px) minmax(0,250px);gap:32px;align-items:start}
.sr .sr-t{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;
  line-height:1.12;max-width:26ch;margin:0 0 var(--sr-3)}
/* 66 caracteres reales. El token 66ch mide anchos de cero y deja pasar 80+. */
.sr .sr-blk>p{max-width:47ch}
.sr .sr-blk>p+p{margin-top:var(--sr-2)}

/* ============ filas: la tarjeta no existe, existe la linea ============ */
.sr-list{border-top:1px solid var(--sr-ink);margin-top:var(--sr-4)}
.sr-fila{display:grid;grid-template-columns:40px minmax(0,1fr) 160px;gap:var(--sr-3);
  padding:var(--sr-3) 0;border-bottom:1px solid var(--sr-line);align-items:start}
.sr-fila:last-child{border-bottom:0}
.sr-fila-h{font-size:var(--sr-label);font-weight:var(--sr-emph);line-height:1.5;margin-bottom:var(--sr-1)}
.sr-fila-tag{text-align:right;white-space:nowrap}
.sr .sr-fila p{max-width:47ch}

/* ============ cuadro 2x2: la grilla a la vista ============ */
.sr-cuad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--sr-ink);margin-top:var(--sr-4)}
.sr-cel{display:flex;flex-direction:column;padding:var(--sr-3) var(--sr-3) var(--sr-3) 0;
  border-bottom:1px solid var(--sr-line)}
.sr-cel:nth-child(2n){padding-left:var(--sr-3);padding-right:0;border-left:1px solid var(--sr-line)}
.sr-cuad .sr-cel:nth-last-child(-n+2){border-bottom:0}
.sr-cel-h{font-size:var(--sr-label);font-weight:var(--sr-emph);line-height:1.5;margin-bottom:var(--sr-1)}
.sr .sr-cel p{max-width:47ch;flex:1}

/* ============ precio: ancla firme, cifra al techo ============ */
.sr-precio{border-top:1px solid var(--sr-ink);margin-top:var(--sr-4)}
.sr-precio-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sr-3);
  padding:var(--sr-3) 0;border-bottom:1px solid var(--sr-line);align-items:baseline}
.sr-precio-fila:last-child{border-bottom:0}
.sr-precio-cifra{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;
  line-height:1.12;text-align:right;white-space:nowrap}
/* Recomendado: se marca con forma, no con color. */
.sr-precio-fila.sr-elegido{background:var(--sr-surface)}
/* La medida de lectura tambien rige adentro del cuadro de precio.
   Faltaba en la plantilla v1.0: detectado en el primer uso real. */
.sr .sr-precio p{max-width:47ch}

/* ============ bloque en tinta ============ */
.sr-ink{background:var(--sr-ink);color:var(--sr-paper);padding:var(--sr-6) 0;margin-top:var(--sr-6)}
.sr-ink a{color:var(--sr-paper);border-color:var(--sr-paper)}
.sr-ink a:hover{color:var(--sr-line);border-color:var(--sr-line)}
.sr-ink .sr-mic{color:var(--sr-line)}
.sr .sr-ink a.sr-btn{background:var(--sr-paper);color:var(--sr-ink);border-color:var(--sr-paper);padding:8px 16px}
.sr .sr-ink a.sr-btn:hover{background:var(--sr-ink);color:var(--sr-paper)}

/* ============ accion ============ */
.sr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sr-2);margin-top:var(--sr-3)}
.sr a.sr-btn{color:var(--sr-paper);background:var(--sr-ink);border:1px solid var(--sr-ink);padding:8px 16px}
.sr a.sr-btn:hover{background:var(--sr-paper);color:var(--sr-ink)}

/* ============ figura ============ */
.sr-fig{margin:0;border:1px solid var(--sr-line)}
.sr-fig img{display:block;width:100%;object-fit:cover;filter:grayscale(1)}
.sr-fig figcaption{padding:var(--sr-1);border-top:1px solid var(--sr-line);
  font-size:var(--sr-micro);color:var(--sr-mid)}

/* ============ pie ============ */
.sr-foot{border-top:1px solid var(--sr-ink);padding:var(--sr-4) 0 var(--sr-5)}
.sr-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sr-2) var(--sr-3);align-items:center}

@media(max-width:1000px){
  .sr-cols{grid-template-columns:1fr;gap:var(--sr-3)}
  .sr-cuad{grid-template-columns:1fr}
  .sr-cel,.sr-cel:nth-child(2n){padding:var(--sr-3) 0;border-left:0;border-bottom:1px solid var(--sr-line)}
  .sr-cuad .sr-cel:last-child{border-bottom:0}
  .sr-fila{grid-template-columns:40px minmax(0,1fr)}
  .sr-fila-tag{grid-column:-2;text-align:left}
}

/* ============================================================
   DECK DE SLIDES 1280x720

   OJO: sr.css deriva --sr-cap y compania con calc(var(--sr-body)*2)
   en :root, donde el cuerpo vale 14px. El calc se resuelve ahi, asi
   que poner .sr-slide en un elemento anidado NO cambia el techo.
   Por eso la escala se re-deriva aca sobre .sr-lamina.
   ============================================================ */
.sr-lamina{position:relative;width:1280px;height:720px;overflow:hidden;
  background:var(--sr-paper);color:var(--sr-ink);
  --sr-body:24px;
  --sr-cap:calc(var(--sr-body) * 2);
  --sr-lead:calc(var(--sr-body) * 1.28);
  --sr-label:calc(var(--sr-body) * 0.82);
  --sr-micro:calc(var(--sr-body) * 0.76);
  --sr-margin:96px;
  --sr-1:16px;--sr-2:32px;--sr-3:48px;--sr-4:72px;--sr-5:120px;
  font-size:var(--sr-body);line-height:1.62}
.sr-lamina-ink{background:var(--sr-ink);color:var(--sr-paper)}
.sr-lamina-ink .sr-mic{color:var(--sr-line)}
.sr-lamina-in{position:absolute;inset:var(--sr-margin);display:flex;flex-direction:column}
.sr-lamina-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sr-2);
  padding-bottom:var(--sr-1);border-bottom:1px solid var(--sr-line)}
.sr-lamina-ink .sr-lamina-top{border-color:var(--sr-mid)}
.sr-lamina-cuerpo{flex:1;display:flex;flex-direction:column;justify-content:center}
.sr-lamina-cap{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-.03em;
  line-height:1.12;max-width:22ch;margin:0 0 var(--sr-2)}
/* Numero de lamina abajo a la derecha, en micro. */
.sr-lamina-pie{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sr-2);
  padding-top:var(--sr-1);border-top:1px solid var(--sr-line)}
.sr-lamina-ink .sr-lamina-pie{border-color:var(--sr-mid)}

/* Una lamina por pantalla en la revision local; PDF al exportar. */
.sr-deck{display:flex;flex-direction:column;align-items:center;gap:var(--sr-3);padding:var(--sr-3) 0}

@media print{
  .sr-deck{gap:0;padding:0}
  .sr-lamina{break-after:page;break-inside:avoid}
}

/* ============================================================
   COMPONENTES NUEVOS · primer uso real de la plantilla v1.0
   Candidatos a subir a _system/SR Brand/plantillas/sr-deck.css
   Todos cumplen: cero radio, cero sombra, cinco tokens, base 8.
   ============================================================ */

/* ---- chips: dato duro enumerable, no decoracion ---- */
.sr-chips{display:flex;flex-wrap:wrap;gap:var(--sr-1);margin-top:var(--sr-3)}
.sr-chip{display:inline-block;padding:var(--sr-1) var(--sr-2);border:1px solid var(--sr-line);
  font-size:var(--sr-micro);color:var(--sr-mid);line-height:1.5;white-space:nowrap}
.sr-chip-on{border-color:var(--sr-ink);color:var(--sr-ink)}

/* ---- diagrama: la figura respira sola, sin marco doble ---- */
.sr-diag{margin:var(--sr-4) 0 0;border-top:1px solid var(--sr-ink);padding-top:var(--sr-3)}
.sr-diag svg{display:block;width:100%;height:auto}
.sr-diag figcaption{margin-top:var(--sr-2);font-size:var(--sr-micro);color:var(--sr-mid)}

/* ---- wireframe: el esqueleto de pantalla, no un mockup ---- */
.sr-wire{border:1px solid var(--sr-ink);margin-top:var(--sr-4);background:var(--sr-paper)}
.sr-wire-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sr-2);
  padding:var(--sr-2);border-bottom:1px solid var(--sr-ink)}
.sr-wire-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr)}
.sr-wire-col{padding:var(--sr-2);border-right:1px solid var(--sr-line);min-height:200px}
.sr-wire-col:last-child{border-right:0}
.sr-wire-h{font-size:var(--sr-micro);color:var(--sr-mid);text-transform:none;margin-bottom:var(--sr-2)}
.sr-wire-item{padding:var(--sr-1) 0;border-bottom:1px solid var(--sr-line);font-size:var(--sr-label);
  line-height:1.5;display:flex;justify-content:space-between;gap:var(--sr-2)}
.sr-wire-item:last-child{border-bottom:0}
.sr-wire-item span{color:var(--sr-mid);font-size:var(--sr-micro);white-space:nowrap}
.sr-wire-fill{height:8px;background:var(--sr-surface);margin:var(--sr-1) 0}
.sr-wire-fill-70{width:70%}
.sr-wire-fill-45{width:45%}

/* ---- etapas: la escalera de construccion ---- */
.sr-etapas{margin-top:var(--sr-4);border-top:1px solid var(--sr-ink)}
.sr-etapa{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--sr-3);
  padding:var(--sr-2) 0;border-bottom:1px solid var(--sr-line);align-items:baseline}
.sr-etapa:last-child{border-bottom:0}
.sr-etapa-n{font-size:var(--sr-micro);color:var(--sr-mid);font-variant-numeric:tabular-nums}
.sr-etapa-h{font-size:var(--sr-label);font-weight:var(--sr-emph);line-height:1.5}
.sr .sr-etapa p{max-width:47ch;margin:0;color:var(--sr-mid)}

@media(max-width:1000px){
  .sr-wire-body{grid-template-columns:1fr}
  .sr-wire-col{border-right:0;border-bottom:1px solid var(--sr-line);min-height:0}
  .sr-wire-col:last-child{border-bottom:0}
}

/* ---- columna de lectura centrada, sin nota al margen ----
   La medida sigue mandando (66 caracteres reales, techo del sistema).
   El aire no se gana estirando la linea: se gana centrando la columna
   y dejando que los bloques anchos usen todo el wrap. */
.sr-lee{max-width:680px;margin:0 auto}
.sr-web .sr-lee>p{max-width:50ch}
.sr-web .sr-lee .sr-t{max-width:22ch}

/* ---- chipset con etiqueta: separa naturaleza, no solo peso ---- */
.sr-chipset{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sr-2);margin-top:var(--sr-2)}
.sr-chipset-h{font-size:var(--sr-micro);color:var(--sr-mid);min-width:88px;flex:none}
.sr-chipset .sr-chips{margin-top:0}
.sr-chip-on{border-color:var(--sr-ink);color:var(--sr-ink);background:var(--sr-surface)}

/* ---- etapas con estimado ---- */
.sr-etapa{grid-template-columns:40px minmax(0,1fr) 120px}
.sr-etapa-t{font-size:var(--sr-micro);color:var(--sr-mid);text-align:right;white-space:nowrap}

@media(max-width:1000px){
  .sr-chipset-h{min-width:0;width:100%}
  .sr-etapa{grid-template-columns:40px minmax(0,1fr)}
  .sr-etapa-t{grid-column:-2;text-align:left}
}

/* ---- cierre de bloque: sin la linea final, el aire entre secciones
   se lee como un hueco y no como separacion ---- */
.sr-list,.sr-etapas,.sr-precio{border-bottom:1px solid var(--sr-line)}

/* ---- etapas de corrido: dos columnas, texto sin acotar.
   Para pasos cortos, donde apilar titulo + parrafo estira la seccion. ---- */
.sr-etapas-corrido .sr-etapa{grid-template-columns:40px minmax(0,1fr);align-items:baseline}
/* de corrido mientras el paso sea corto; si crece, corta en la medida del sistema */
.sr-web .sr-etapas-corrido .sr-etapa p{max-width:52ch;color:inherit}

/* Sobre tinta la linea fina desaparece o grita: se usa el gris medio. */
.sr-ink .sr-etapas{border-color:var(--sr-mid)}
.sr-ink .sr-etapa{border-color:var(--sr-mid)}
.sr-ink .sr-etapa-n{color:var(--sr-line)}

/* ---- equivalencia bajo la cifra: dato de apoyo, no segunda cifra ---- */
.sr-precio-cifra{display:block}
.sr-precio-sub{display:block;font-size:var(--sr-micro);font-weight:var(--sr-text);
  color:var(--sr-mid);letter-spacing:0;text-align:right;margin-top:var(--sr-1)}