/* ─────────────────────────────────────────────────────────────
   SHELL = paleta de Presichi's Street Tech.
   Hex VERIFICADOS el 13-ago-2026 con grep sobre
   marca/PST_LOGO_OFICIAL/SVG/PST_micro.svg — no de memoria:
       #FFC72C  (oro, x2)   #FFFFFF   #000000

   El shell es OSCURO por obligación, no por gusto: marca/paleta/PALETA.md
   mide el oro a 1.56:1 sobre blanco — no alcanza ni para texto grande.
   Sobre negro da 13.46:1. Mismo razonamiento y mismos tokens semánticos
   que Olimpo (excepción ya declarada en PALETA.md §"Qué sale del logo").

   ⛔ SIN --shadow-1 / --shadow-2 a propósito. SISTEMA_DE_DISENO.md §3 lo
   midió: sobre un fondo casi negro la sombra proyectada da 1.01–1.06:1,
   por debajo del umbral perceptual (~1.1:1). La profundidad se hace con
   luminancia de superficie y borde de 1px, que sí mide 1.32:1.
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:        #0B0B0B;
  --superficie: #161616;
  --line:       #2A2A2A;
  --gold:       #FFC72C;
  --gold-deep:  #6B5210;
  --paper:      #FFFFFF;
  --tenue:      #9E9E9E;
  --error:      #FF6B6B;
  --ok:         #5FD08A;
  --radio:      10px;
  --ease-settle: cubic-bezier(.22,.61,.36,1);
  --t1: 12px; --t2: 15px; --t3: 18px; --t4: 22px;
  --tap: 52px;             /* PATRON_CLIENTE §6.2 — 52, no los 48 de Material */
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
/* min-height, NO height. Con height:100% el contenido mas alto que el hueco
   se DESBORDA recortado en vez de hacer scroll. Medido en vivo el 13-ago. */
html,body{min-height:100%}
body{
  background:var(--ink); color:var(--paper);
  font:400 var(--t3)/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center;
}
.app{width:100%;max-width:440px;display:flex;flex-direction:column;min-height:100dvh;
     padding-bottom:calc(100px + var(--safe-b))}

/* ── marca + idioma ──────────────────────────────────────── */
.brandline{
  display:flex;align-items:center;gap:9px;
  padding:14px 20px 13px;border-bottom:1px solid var(--line);
}
.brandline .mark{
  width:26px;height:26px;border-radius:6px;flex:0 0 auto;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#000;letter-spacing:-.5px;
}
.brandline .wm{font-size:var(--t1);font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--tenue);flex:1;min-width:0}
/* Píldora de idioma — mismo patrón que .pill-idioma de Rose Red */
.pill-idioma{
  flex:0 0 auto;font-family:inherit;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--tenue);
  border-radius:999px;padding:0 12px;height:32px;min-width:44px;
  font-size:var(--t1);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  transition:border-color .14s var(--ease-settle),color .14s var(--ease-settle);
}
.pill-idioma:active{border-color:var(--gold);color:var(--gold)}

/* ── progreso ────────────────────────────────────────────── */
.progress{display:flex;align-items:center;gap:7px;padding:16px 20px 0}
.progress.oculto{visibility:hidden}
.progress-dot{
  width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:background .14s var(--ease-settle),transform .14s var(--ease-settle);
}
.progress-dot.done{background:var(--gold-deep)}
.progress-dot.on{background:var(--gold);transform:scale(1.45)}
.step-label{margin-left:5px;font-size:var(--t1);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}

/* ── pregunta ────────────────────────────────────────────── */
.htitle{padding:11px 20px 3px;font-size:var(--t4);font-weight:800;
  line-height:1.25;letter-spacing:-.2px}
.rec-note{padding:7px 20px 0;font-size:var(--t2);line-height:1.4;color:var(--tenue)}
.rec-note b{color:var(--paper);font-weight:600}

/* ── subir logo ──────────────────────────────────────────── */
.dropzone{
  margin:18px 20px 0;padding:28px 16px;
  border:1.5px dashed var(--line);border-radius:var(--radio);
  background:var(--superficie);
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  cursor:pointer;min-height:150px;justify-content:center;
  transition:border-color .14s var(--ease-settle),background .14s var(--ease-settle);
}
.dropzone:active,.dropzone.arrastrando{border-color:var(--gold);background:#1a1608}
.dropzone .ic{font-size:30px;line-height:1}
.dropzone .t{font-size:var(--t3);font-weight:700}
.dropzone .d{font-size:var(--t2);color:var(--tenue)}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.dz-estado{margin:14px 20px 0;padding:16px;border-radius:var(--radio);
  border:1px solid var(--line);background:var(--superficie);
  display:flex;align-items:center;gap:12px;font-size:var(--t2)}
.dz-estado.error{border-color:var(--error);color:var(--error)}
.spinner{width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--gold);
  animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

.skip{display:block;margin:16px auto 0;background:none;border:0;
  color:var(--tenue);font-size:var(--t2);text-decoration:underline;
  font-family:inherit;cursor:pointer;padding:8px;min-height:44px}

/* ── vista previa ────────────────────────────────────────── */
/* Los colores de ESTA zona son el DATO DE EJEMPLO — Veneno Mix medido del
   CSS desplegado. Variables propias para que nunca se mezclen con PST. */
.preview{padding:15px 20px 0}
.preview .cap{font-size:var(--t1);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:8px}
.stage{border:1px solid var(--line);border-radius:var(--radio);
  padding:14px;overflow:hidden;background:var(--dfondo);
  transition:background .16s var(--ease-settle)}
.mini{background:var(--dpanel);color:var(--dtexto);border:1px solid var(--dlinea);
  border-radius:var(--dradio);padding:12px 13px;
  transition:border-radius .16s var(--ease-settle),background .16s var(--ease-settle)}
.mini + .mini{margin-top:8px}
.mini .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mini .n{font-size:var(--t2);font-weight:700;color:var(--dhead)}
.mini .money{font-size:var(--t3);font-weight:800;color:var(--dacento);
  font-variant-numeric:tabular-nums}
.mini .sub{font-size:var(--t1);color:var(--dtenue);margin-top:3px}
.mini .cta{margin-top:11px;background:var(--dacento);color:#fff;border:0;
  border-radius:var(--dradio-btn);min-height:44px;width:100%;
  font-size:var(--t2);font-weight:800;font-family:inherit;
  transition:border-radius .16s var(--ease-settle)}

/* ── opciones ────────────────────────────────────────────── */
.choice-row{display:flex;flex-direction:column;gap:10px;padding:17px 20px 0}
.shape-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:17px 20px 0}
.choice-btn,.shape-btn{
  font-family:inherit;text-align:left;cursor:pointer;
  background:var(--superficie);color:var(--paper);
  border:1px solid var(--line);border-radius:var(--radio);min-height:var(--tap);
  transition:background .14s var(--ease-settle),border-color .14s var(--ease-settle);
}
.choice-btn{padding:15px 16px;display:flex;align-items:center;gap:13px;min-height:76px}
.choice-btn .body{flex:1;min-width:0}
/* display:block obligatorio — son <span> y sin esto el titulo y la
   descripcion se pegan en el mismo renglon. Cazado en vivo, 13-ago. */
.choice-btn .t{display:block;font-size:var(--t3);font-weight:700;line-height:1.25}
.choice-btn .d{display:block;font-size:var(--t2);color:var(--tenue);margin-top:3px;line-height:1.35}
/* dos señales al elegir, no una: relleno Y borde (ELEGIR_VARIEDAD §4) */
.choice-btn[aria-pressed="true"],.shape-btn[aria-pressed="true"]{
  background:#2A2005;border-color:var(--gold)}
.choice-btn:active,.shape-btn:active{background:#202020}
.tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:background .14s var(--ease-settle),border-color .14s var(--ease-settle)}
.tick svg{width:13px;height:13px;opacity:0;transition:opacity .14s var(--ease-settle)}
[aria-pressed="true"] .tick{background:var(--gold);border-color:var(--gold)}
[aria-pressed="true"] .tick svg{opacity:1}

.shape-btn{padding:13px 12px 14px;display:flex;flex-direction:column;
  align-items:center;gap:9px;min-height:110px}
/* Tarjeta en miniatura con el radio LITERAL — un cuadro de 34px con 5px de
   radio exageraba el redondeo ~4.5x. Cazado en vivo el 13-ago. */
.shape-btn .swatch-row{display:block;width:100%}
.shape-btn .swatch{display:block;width:100%;height:44px;
  background:var(--gold-deep);border:1px solid var(--line);
  transition:border-radius .16s var(--ease-settle),background .14s var(--ease-settle)}
.shape-btn[aria-pressed="true"] .swatch{background:var(--gold)}
.shape-btn .t{font-size:var(--t2);font-weight:700}

/* ── resumen ─────────────────────────────────────────────── */
.summary-card{margin:17px 20px 0;background:var(--superficie);
  border:1px solid var(--line);border-radius:var(--radio);overflow:hidden}
.summary-card .row{display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.summary-card .row:last-child{border-bottom:0}
.summary-card .k{font-size:var(--t2);color:var(--tenue)}
.summary-card .v{font-size:var(--t2);font-weight:700;text-align:right}
/* El px vive AQUI y sólo aquí: en el resumen es registro, no ayuda de
   decisión. En el botón era jerga de gremio — un dueño no sabe qué es un px. */
.summary-card .v .hex{display:block;font-size:var(--t1);color:var(--tenue);
  font-weight:400;font-variant-numeric:tabular-nums;margin-top:2px}

/* Repregunta dentro de una pantalla: más chica que el <h1> y con aire arriba,
   para que se lea como "y una cosa más" y no como una pantalla nueva metida a
   la fuerza. */
.sub-q{margin:26px 20px 0;font-size:var(--t3);font-weight:800;line-height:1.3}

/* ── estándar de la casa ─────────────────────────────────── */
/* Tarjeta propia y borde dorado: el estándar tiene que leerse como algo que se
   ELIGIÓ, no como tres campos que se llenaron solos. Mismo recurso que
   `.rev-sueno` usa en el Formulario para destacar la pieza que no es un dato
   más. Sobre negro, no sobre blanco: #FFC72C da 1.56:1 sobre blanco y 12.61:1
   sobre #0B0B0B — la regla de `marca/paleta/PALETA.md`, no una preferencia. */
.casa-card{margin:17px 20px 0;padding:17px;background:#000;
  border:1px solid var(--gold-deep);border-radius:var(--radio);text-align:center}
.casa-card .ojo{display:block;margin:0 auto 10px;width:52px;height:auto}
.casa-card .k{display:block;font-size:var(--t3);font-weight:800;color:var(--gold);
  line-height:1.25}
.casa-card .d{display:block;margin-top:7px;font-size:var(--t2);color:var(--tenue);
  line-height:1.45}

/* Con el estándar elegido, los tres valores de abajo son CONSECUENCIAS de esa
   decisión, no tres decisiones. Se les baja el peso y se les quita el negro
   para que no compitan con la tarjeta que sí explica de dónde salieron. */
.summary-card.derivado{opacity:.82}
.summary-card.derivado .v{font-weight:400;color:var(--tenue)}

/* ── campos ──────────────────────────────────────────────── */
.field{padding:16px 20px 0}
.field label{display:block;font-size:var(--t2);font-weight:700;margin-bottom:7px}
.field input,.field textarea{
  width:100%;font-family:inherit;font-size:var(--t3);
  /* ≥16px obliga: por debajo, iOS hace auto-zoom al enfocar el campo */
  background:var(--superficie);color:var(--paper);
  border:1px solid var(--line);border-radius:var(--radio);
  padding:14px 15px;min-height:var(--tap);
  transition:border-color .14s var(--ease-settle)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:#5c5c5c}

/* ── éxito ───────────────────────────────────────────────── */
.exito{padding:34px 20px 0;text-align:center}
.exito .ic{width:64px;height:64px;border-radius:50%;background:var(--ok);
  margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.exito .ic svg{width:30px;height:30px}
.exito h1{font-size:var(--t4);font-weight:800;margin-bottom:9px}
.exito p{font-size:var(--t2);color:var(--tenue);line-height:1.45}

/* ── navegación fija ─────────────────────────────────────── */
/* FIJA, no al final del flujo: las pantallas 3 y 4 median 766 y 771 px y en
   un viewport de 677 el boton principal quedaba FUERA DE PANTALLA. */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:440px;z-index:20;display:flex;gap:10px;
  background:var(--ink);border-top:1px solid var(--line);
  padding:14px 20px calc(14px + var(--safe-b))}
.nav.oculto{display:none}
.nav-btn{font-family:inherit;cursor:pointer;min-height:var(--tap);
  border-radius:var(--radio);font-size:var(--t3);font-weight:800;
  border:1px solid var(--line);background:transparent;color:var(--tenue);
  padding:0 20px;flex:0 0 auto;
  transition:background .14s var(--ease-settle),opacity .14s var(--ease-settle)}
.nav-btn.prim{flex:1;background:var(--gold);color:#000;border-color:var(--gold)}
.nav-btn:active{background:#202020}
.nav-btn.prim:active{background:#E0AC1F}
.nav-btn:disabled{opacity:.35}

.screen{display:none;flex-direction:column;flex:1}
.screen.on{display:flex}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}