:root{
  --ink:#0b1220; --ink-2:#131c2e; --ink-3:#1c2740;
  --paper:#ffffff; --paper-soft:#f6f8fc;
  --accent:#5b6bff; --accent-2:#8b6bff; --accent-soft:#eef0ff;
  --amber:#ff9f43; --amber-soft:#fff3e6;
  --good:#1fb37a; --good-soft:#e8faf3;
  --warn:#e0a52c; --warn-soft:#fff7e6;
  --bad:#e0524f; --bad-soft:#fdecec;
  --muted:#6b7488; --muted-2:#98a1b3;
  --line:#e6e9f2;
  --radius-lg:22px; --radius-md:16px; --radius-sm:11px;
  --shadow-lg:0 24px 60px rgba(15,23,42,.16), 0 4px 14px rgba(15,23,42,.08);
  --shadow-md:0 10px 28px rgba(15,23,42,.10);
  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --dur:.5s; --dur-fast:.22s;

  /* ---- Sistema tipográfico único — se aplica en toda la plataforma ---- */
  --fs-hero: 44px; --fs-h1: 30px; --fs-h2: 24px; --fs-sub: 21px;
  --fs-body: 18px; --fs-label: 17px; --fs-help: 16px; --fs-btn: 18px; --fs-small: 16px; --fs-option: 17px;

  /* ---- Colores de texto semánticos: se redefinen solos en .stage.on-dark ---- */
  --text-body: var(--ink); --text-muted: var(--muted); --text-faint: var(--muted-2);
  --surface: var(--paper); --surface-border: var(--line);
}
@media (max-width:640px){
  :root{ --fs-hero:32px; --fs-h1:24px; --fs-h2:20px; --fs-sub:18px; --fs-body:17px; --fs-btn:17px; }
}
/* Contexto oscuro: un único punto de control — todo lo que use estas variables se adapta automáticamente */
.stage.on-dark{
  --text-body:#ffffff; --text-muted:#cfd3ef; --text-faint:#aab0d6;
  --surface: rgba(255,255,255,.08); --surface-border: rgba(255,255,255,.22);
  color:#ffffff;
}

@media (prefers-reduced-motion: reduce){ :root{ --dur:0s; --dur-fast:0s; } }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  color:var(--text-body); background:var(--paper-soft);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font-family:inherit;}
h1,h2,h3{margin:0; line-height:1.15;}
p{margin:0;}
::selection{background:var(--accent-soft);}
a{color:inherit;}

/* ---------------- Fondo abstracto (SVG local, sin descargas) ---------------- */
#bg-scene{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background: radial-gradient(1200px 800px at 15% -10%, #202b4d 0%, var(--ink) 55%), var(--ink);
}
#bg-scene svg{position:absolute; opacity:.55;}
.blob-a{top:-120px; right:-160px; width:560px; animation: floatA 22s ease-in-out infinite;}
.blob-b{bottom:-160px; left:-140px; width:520px; animation: floatB 26s ease-in-out infinite;}
.blob-c{top:38%; left:46%; width:380px; opacity:.28; animation: floatA 30s ease-in-out infinite reverse;}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(26px) rotate(6deg);}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-22px) rotate(-5deg);}}
@media (prefers-reduced-motion: reduce){ .blob-a,.blob-b,.blob-c{animation:none;} }

/* ---------------- App shell ---------------- */
#app{position:relative; z-index:1; min-height:100vh;}

/* ---------------- Pantallas de conversación (full screen) ---------------- */
.stage{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 20px; position:relative;
}
.stage.on-dark{color:#fff;}
.stage-inner{width:100%; max-width:620px; animation: stageIn var(--dur) cubic-bezier(.22,.9,.32,1);}
@keyframes stageIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.stage-exit{ animation: stageOut var(--dur-fast) ease-in forwards; }
@keyframes stageOut{ to{opacity:0; transform:translateY(-14px);} }

/* progreso superior sutil */
#progress-rail{position:fixed; top:0; left:0; right:0; height:4px; background:rgba(255,255,255,.14); z-index:50;}
#progress-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width var(--dur) ease;}
#progress-rail.on-light{background:var(--line);}

.eyebrow{ font-size:16px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--accent-2); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.stage.on-dark .eyebrow{color:#b9c0ff;}
.stage h1{font-size:clamp(26px,3.6vw,32px); font-weight:800; letter-spacing:-.02em; margin-bottom:14px; line-height:1.2;}
.hero-title{font-size:clamp(34px,6vw,48px); font-weight:800; letter-spacing:-.02em; margin-bottom:16px; line-height:1.1;}
.stage h2{font-size:clamp(20px,2.6vw,22px); font-weight:800; letter-spacing:-.01em; margin-bottom:10px;}
.stage .lede{font-size:var(--fs-body); color:var(--text-muted); line-height:1.6; margin-bottom:26px;}
.stage.on-dark .lede{color:#c7cbe4;}

.btn-primary-lg{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none;
  font-size:var(--fs-btn); font-weight:800; padding:17px 32px; border-radius:999px; cursor:pointer; min-height:56px;
  box-shadow:0 14px 30px rgba(91,107,255,.35); transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn-primary-lg:hover{transform:translateY(-2px); box-shadow:0 18px 36px rgba(91,107,255,.45);}
.btn-primary-lg:active{transform:translateY(0);}
.btn-secondary-lg{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-muted);
  font-size:var(--fs-body); font-weight:700; cursor:pointer; padding:12px 6px; text-decoration:underline; text-underline-offset:3px; min-height:44px;
}
.stage.on-dark .btn-secondary-lg{color:#c7cbe4;}
.stage-actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:6px;}

.disclaimer-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:16px; color:#aab0cf; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); padding:7px 13px; border-radius:999px; margin-top:22px;
}

/* Tarjetas de opción (decisión principal por pantalla) */
.choice-grid{display:grid; gap:12px; margin-top:6px;}
.choice-card{
  text-align:left; background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md);
  padding:18px 20px; cursor:pointer; font-size:var(--fs-option); font-weight:700; color:var(--text-body);
  display:flex; align-items:center; gap:14px; transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  box-shadow:var(--shadow-sm);
}
.choice-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.choice-card .ci{font-size:22px; flex:0 0 auto;}
.choice-card .cc-sub{display:block; font-weight:500; font-size:16px; color:var(--text-muted); margin-top:2px;}
.stage.on-dark .choice-card .cc-sub{color:#b9c0e0;}

/* Campo único por pantalla */
.single-field{margin:18px 0 22px;}
.single-field input, .single-field textarea{
  width:100%; font-size:19px; padding:16px 18px; border-radius:var(--radius-md); border:1.5px solid var(--line);
  background:var(--paper); color:var(--text-body); font-weight:600;
}
.stage.on-dark .single-field input, .stage.on-dark .single-field textarea{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff;}
.single-field input:focus, .single-field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.single-field textarea{min-height:88px; resize:vertical; font-size:16px;}
.field-hint{font-size:16px; color:var(--text-muted); margin-top:8px;}
.small{font-size:16px; line-height:1.5;}
.field-error-msg{font-size:16px; color:var(--bad); margin-top:8px; font-weight:700; display:flex; align-items:center; gap:6px;}
.field-error-msg:before{content:"⚠";}
.single-field input.has-error, .single-field textarea.has-error, .form-row2 input.has-error{border-color:var(--bad) !important; box-shadow:0 0 0 3px var(--bad-soft) !important;}
.single-field input.is-valid-field, .single-field textarea.is-valid-field, .form-row2 input.is-valid-field{border-color:var(--good) !important;}
.stage.on-dark .field-hint{color:#c7cbe4;}
.stage.on-dark .form-row2 label{color:#e7e9ff;}
.stage.on-dark .form-row2 input, .stage.on-dark .form-row2 select, .stage.on-dark .form-row2 textarea{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); color:#fff;}
.stage.on-dark .form-row2 input::placeholder, .stage.on-dark .form-row2 textarea::placeholder{color:#9199c0;}
.stage.on-dark .single-field input::placeholder, .stage.on-dark .single-field textarea::placeholder{color:#9199c0;}
.stage.on-dark .form-row2 input:focus, .stage.on-dark .form-row2 select:focus, .stage.on-dark .form-row2 textarea:focus{outline:none; border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.14);}

/* Explicación de concepto (máx 3 líneas) */
.concept-box{
  background:var(--accent-soft); border:1px solid #d9deff; border-radius:var(--radius-md); padding:16px 18px; margin:16px 0;
  animation: popIn var(--dur-fast) ease;
}
@keyframes popIn{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:scale(1);}}
.concept-box .cb-title{font-weight:800; font-size:16px; margin-bottom:5px; color:var(--ink);}
.concept-box .cb-body{font-size:16px; color:#2b3358; line-height:1.5;}
.concept-box .cb-extra{font-size:16px; color:#4a5170; margin-top:8px; display:none;}
.concept-box.expanded .cb-extra{display:block;}
.concept-box .cb-toggle{background:none; border:none; color:var(--accent); font-size:16px; font-weight:700; cursor:pointer; margin-top:8px; padding:0;}

/* Chips de progreso discreto */
.stage-progress-dots{display:flex; gap:6px; margin-top:24px;}
.spd{width:7px; height:7px; border-radius:50%; background:var(--line);}
.spd.done{background:var(--accent);}
.spd.now{background:var(--ink); width:20px; border-radius:5px;}
.stage.on-dark .spd{background:rgba(255,255,255,.22);}
.stage.on-dark .spd.done{background:var(--accent-2);}
.stage.on-dark .spd.now{background:#fff;}

/* Números animados / resultado */
.result-hero{
  border-radius:var(--radius-lg); padding:26px 26px 22px; margin:8px 0 20px;
  box-shadow:var(--shadow-md);
}
.result-hero.good{background:var(--good-soft); border:1px solid #b7ecd7; color:var(--ink);}
.result-hero.warn{background:var(--warn-soft); border:1px solid #f3ddaa; color:var(--ink);}
.result-hero.bad{background:var(--bad-soft); border:1px solid #f3c6c4; color:var(--ink);}
.result-hero .rh-tag{font-size:16px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; margin-bottom:8px;}
.result-hero.good .rh-tag{color:var(--good);}
.result-hero.warn .rh-tag{color:var(--warn);}
.result-hero.bad .rh-tag{color:var(--bad);}
.result-hero h2{font-size:21px;}
.result-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px;}
@media (max-width:560px){ .result-metrics{grid-template-columns:repeat(2,1fr);} }
.rm-box{background:rgba(255,255,255,.65); border-radius:var(--radius-sm); padding:12px 10px; text-align:center;}
.rm-box .rm-label{font-size:16px; color:#6b7488; text-transform:uppercase; letter-spacing:.04em;}
.macro-progress-track{ height:6px; background:rgba(120,130,190,.18); border-radius:999px; overflow:hidden; max-width:420px; margin:6px 0 18px; }
.stage.on-dark .macro-progress-track{ background:rgba(255,255,255,.14); }
.macro-progress-fill{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:999px; transition:width var(--dur) ease; }
.provider-field-stack{ display:flex; flex-direction:column; gap:12px; }
.provider-field-card{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:16px 18px; }
.provider-field-card .pfc-label{ font-size:var(--fs-label); font-weight:800; color:var(--text-body); margin-bottom:4px; }
.provider-field-card .pfc-desc{ font-size:var(--fs-help); color:var(--text-muted); margin-bottom:10px; line-height:1.5; }
.provider-field-card input, .provider-field-card textarea{
  width:100%; font-size:var(--fs-body); padding:13px 14px; border-radius:var(--radius-sm); border:1.8px solid var(--surface-border);
  background:var(--surface); color:var(--text-body); min-height:50px;
}
.stage.on-dark .provider-field-card input, .stage.on-dark .provider-field-card textarea{ background:rgba(255,255,255,.08); }
.provider-field-card input:focus, .provider-field-card textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.provider-field-card .pfc-example{ font-size:var(--fs-help); color:var(--text-faint); margin-top:8px; font-style:italic; }
.rm-box .rm-value{font-size:18px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums;}

/* Bloqueo amigable */
.block-friendly{background:var(--bad-soft); border:1px solid #f3c6c4; border-radius:var(--radius-md); padding:18px 20px; margin:14px 0;}
.block-friendly .bf-title{font-weight:800; font-size:16px; color:#9a2f2d; margin-bottom:6px;}
.block-friendly .bf-body{font-size:16px; color:#5a2a29; line-height:1.5;}

/* Detalle técnico expandible (disponible en cualquier modo) */
details.tech{margin-top:14px;}
.master-recap-collapse{margin-bottom:16px;}
details.tech summary{cursor:pointer; font-size:16px; font-weight:700; color:var(--accent); list-style:none;}
details.tech summary::-webkit-details-marker{display:none;}
details.tech summary:before{content:"▸ "; }
details.tech[open] summary:before{content:"▾ ";}
details.tech .tech-body{margin-top:10px; font-size:16px; color:var(--text-muted); background:var(--paper-soft); border-radius:var(--radius-sm); padding:12px 14px;}
.stage.on-dark details.tech .tech-body{background:rgba(255,255,255,.06); color:#c7cbe4;}
.tech-row{display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed rgba(0,0,0,.06);}
.tech-row:last-child{border-bottom:none;}

/* Chips de opciones (evidencia, respaldo) */
.option-chip-grid{display:flex; flex-wrap:wrap; gap:9px; margin:14px 0;}
.option-chip{
  font-size:var(--fs-option); font-weight:700; padding:12px 18px; border-radius:999px; border:2px solid var(--surface-border);
  background:var(--surface); color:var(--text-body); cursor:pointer; transition:all var(--dur-fast) ease; min-height:44px;
  display:inline-flex; align-items:center; gap:8px; position:relative;
}
.option-chip:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--ink);}

/* -------- Toast / confirmaciones -------- */
#toast-root{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center;}
.toast{background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-size:16px; font-weight:700; box-shadow:var(--shadow-md); animation:toastIn var(--dur-fast) ease;}
@keyframes toastIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* ---------------- Espacio de trabajo (post-onboarding) ---------------- */
#workspace{ position:relative; z-index:1; min-height:100vh; padding:26px 20px 90px; }
.ws-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:1080px; margin:0 auto 22px;
  color:#fff;
}
.ws-brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px;}
.ws-brand .mark{background:linear-gradient(135deg,var(--accent),var(--accent-2)); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px;}
.ws-topbar .ws-actions{display:flex; gap:10px; align-items:center;}
.ws-pill-btn{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:16px; font-weight:700;
  padding:8px 14px; border-radius:999px; cursor:pointer;
}
.ws-pill-btn:hover{background:rgba(255,255,255,.16);}
.ws-pill-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent;}

.ws-wrap{max-width:1080px; margin:0 auto;}
.ws-hero{
  background:var(--paper); border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:20px; box-shadow:var(--shadow-lg);
}
.ws-hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.ws-hero .eyebrow{color:var(--accent);}
.ws-status-badge{font-size:16px; font-weight:800; padding:6px 13px; border-radius:999px;}
.ws-status-badge.good{background:var(--good-soft); color:var(--good);}
.ws-status-badge.warn{background:var(--warn-soft); color:var(--warn);}
.ws-status-badge.bad{background:var(--bad-soft); color:var(--bad);}
.ws-status-badge.neutral{background:var(--paper-soft); color:var(--text-muted);}

.ws-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px;}
@media (max-width:760px){ .ws-grid2{grid-template-columns:1fr;} }
.ws-list-title{font-size:16px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:800; margin-bottom:8px;}
.ws-list{list-style:none; margin:0; padding:0; font-size:16px;}
.ws-list li{padding:5px 0; display:flex; gap:8px; align-items:flex-start;}
.ws-list li:before{content:"✓"; color:var(--good); font-weight:800;}
.ws-list.todo li:before{content:"○"; color:var(--text-faint);}

.ws-next-card{background:linear-gradient(135deg,#eef0ff,#f7f3ff); border:1px solid #dfe3ff; border-radius:var(--radius-md); padding:20px 22px; margin-top:18px;}
.ws-next-card h3{font-size:19px; margin-bottom:6px;}
.ws-next-card p{color:var(--text-muted); font-size:16px; margin-bottom:14px;}

.tools-reveal-wrap{text-align:center; margin:26px 0 6px;}
.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px;}
@media (max-width:900px){ .tools-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){ .tools-grid{grid-template-columns:repeat(2,1fr);} }
.tool-card{
  background:var(--paper); border-radius:var(--radius-md); padding:18px 14px; text-align:center; cursor:pointer;
  box-shadow:var(--shadow-sm); border:1.5px solid transparent; transition:all var(--dur-fast) ease;
}
.tool-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-md);}
.tool-card.active{border-color:var(--accent); background:var(--accent-soft);}
.tool-card .tc-ico{font-size:26px; margin-bottom:8px;}
.tool-card .tc-label{font-size:16px; font-weight:700;}
.tool-card .tc-badge{display:inline-block; margin-top:6px; font-size:16px; padding:2px 8px; border-radius:999px; background:var(--bad-soft); color:var(--bad); font-weight:800;}

.tool-panel{background:var(--paper); border-radius:var(--radius-lg); padding:24px 26px; margin-top:16px; box-shadow:var(--shadow-lg); animation:popIn var(--dur-fast) ease;}
.tool-panel h2{font-size:20px; margin-bottom:4px;}
.tool-panel .tp-sub{color:var(--text-muted); font-size:16px; margin-bottom:18px;}
.tp-section{margin-bottom:20px;}
.tp-section-title{font-size:16px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:800; margin-bottom:10px;}

.data-grid{width:100%; border-collapse:collapse; font-size:16px;}
.data-grid th{text-align:left; font-size:16px; text-transform:uppercase; color:var(--text-muted); padding:8px 10px; border-bottom:1px solid var(--line);}
.data-grid td{padding:10px; border-bottom:1px solid #f1f2f8;}

.mini-card{background:var(--paper-soft); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px;}
.action-current-target{ outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--radius-md); animation:selectPulse .3s ease; transition:outline-color .3s ease; }
.action-current-label{ display:inline-block; background:var(--accent); color:#fff; font-size:16px; font-weight:800; padding:4px 10px; border-radius:999px; margin-bottom:6px; }
.badge-pill{display:inline-flex; font-size:16px; font-weight:800; padding:3px 11px; border-radius:999px;}
.badge-pill.good{background:var(--good-soft); color:var(--good);}
.badge-pill.warn{background:var(--warn-soft); color:var(--warn);}
.badge-pill.bad{background:var(--bad-soft); color:var(--bad);}
.badge-pill.neutral{background:var(--paper-soft); color:var(--text-muted); border:1px solid var(--line);}
.badge-pill.info{background:var(--accent-soft); color:var(--accent);}

.form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;}
@media (max-width:640px){ .form-grid2{grid-template-columns:1fr;} }
.form-row2 label{display:block; font-size:16px; font-weight:700; color:var(--text-body); margin-bottom:5px;}
.form-row2 .frow-unit{font-weight:500; color:var(--text-muted); font-size:16px;}
.form-row2 .frow-help{font-size:16px; color:var(--text-muted); margin-top:5px;}
.stage.on-dark .form-row2 .frow-help{color:#c7cbe4;}
.form-row2 input, .form-row2 select, .form-row2 textarea{
  width:100%; padding:12px 12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:16px; min-height:44px;
}
.btn-flat{background:var(--paper-soft); border:1.5px solid var(--line); color:var(--text-body); font-weight:700; font-size:16px; padding:11px 18px; border-radius:999px; cursor:pointer; min-height:44px;}
.back-btn{background:none; border:none; color:var(--text-muted); font-size:var(--fs-option); font-weight:800; cursor:pointer; padding:10px 4px; margin-bottom:8px; display:inline-flex; align-items:center; gap:6px; min-height:44px;}
.back-btn:hover{color:var(--accent);}
.stage.on-dark .back-btn:hover{color:#fff;}
.correction-banner{background:var(--warn-soft); border:1px solid #f3ddaa; color:#7a5b12; border-radius:var(--radius-sm); padding:12px 14px; font-size:16px; margin-bottom:16px; font-weight:600;}
.stage.on-dark .correction-banner{background:rgba(255,159,67,.16); border-color:rgba(255,159,67,.4); color:#ffd9a8;}
.progress-steptext{font-size:16px; color:var(--text-muted); font-weight:700; margin-bottom:4px;}
.stage.on-dark .progress-steptext{color:#c7cbe4;}
.fulfill-card{position:relative;}
.fulfill-card .fc-check{position:absolute; top:14px; right:14px; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; color:transparent;}
.stage.on-dark .fulfill-card .fc-check{border-color:rgba(255,255,255,.3);}
.fulfill-card.selected{border-color:var(--good); background:var(--good-soft);}
.stage.on-dark .fulfill-card.selected{background:rgba(31,179,122,.16); border-color:var(--good);}
.fulfill-card.selected .fc-check{background:var(--good); border-color:var(--good); color:#fff;}
.fulfill-card .fc-selected-label{display:none; color:var(--good); font-weight:800; font-size:16px; margin-top:6px;}
.fulfill-card.selected .fc-selected-label{display:block;}
.fulfill-card .fc-meta{margin-top:8px; font-size:16px; color:var(--text-muted); line-height:1.5;}
.stage.on-dark .fulfill-card .fc-meta{color:#c7cbe4;}
.fulfill-card .fc-meta strong{color:inherit;}
.result-integrated{border-radius:var(--radius-lg); padding:22px 24px; margin:8px 0 18px; box-shadow:var(--shadow-md); background:var(--paper); color:var(--ink);}
.ri-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink);}
.ri-row:last-child{border-bottom:none;}
.ri-row .ri-label{font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:#6b7488; font-weight:800;}
.ri-row .ri-value{font-size:16px; font-weight:800; color:var(--ink);}
.reason-chip-grid{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0;}
.reason-chip{font-size:16px; font-weight:700; padding:10px 15px; border-radius:999px; border:1.5px solid var(--surface-border); background:var(--surface); color:var(--text-body); cursor:pointer; min-height:44px;}
.reason-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.confirm-select-banner{background:var(--accent-soft); border:1px solid #d9deff; border-radius:var(--radius-sm); padding:12px 14px; margin:10px 0; font-size:16px; font-weight:700; color:var(--ink);}
.btn-flat:hover{border-color:var(--accent);}
.btn-flat.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:none;}
.btn-row2{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}

.timeline2{border-left:2px solid var(--line); margin-left:6px; padding-left:16px;}
.tl2-item{padding-bottom:16px; position:relative;}
.tl2-item:before{content:""; position:absolute; left:-21px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 0 0 1px var(--line);}
.tl2-date{font-size:16px; color:var(--text-muted);}
.tl2-title{font-weight:700; font-size:16px; margin:2px 0;}
.tl2-desc{font-size:16px; color:var(--text-muted);}
.tl2-conn{margin-top:4px; font-size:16px; color:var(--text-faint); font-style:italic;}

/* Modal genérico */
#modal-root:empty{display:none;}
.modal-ov{position:fixed; inset:0; background:rgba(10,14,28,.55); display:flex; align-items:center; justify-content:center; z-index:120; padding:20px;}
.modal-box2{background:#fff; border-radius:var(--radius-lg); max-width:460px; width:100%; padding:24px 26px; box-shadow:var(--shadow-lg); animation:popIn var(--dur-fast) ease;}
.modal-box2 h3{font-size:18px; margin-bottom:10px;}
.modal-box2 p{color:var(--text-muted); font-size:16px; line-height:1.5; margin-bottom:8px;}

/* Empty state */
.empty2{text-align:center; padding:34px 16px; color:var(--text-muted);}
.empty2 .e2-ico{font-size:30px; margin-bottom:8px;}
.empty2 .e2-title{font-weight:700; color:var(--text-body); margin-bottom:4px;}

/* Ejemplos (demo) */
.examples-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:760px){ .examples-grid{grid-template-columns:1fr;} }
.example-card{background:var(--paper); border-radius:var(--radius-md); padding:18px 20px; box-shadow:var(--shadow-sm); cursor:pointer; border:1.5px solid transparent;}
.example-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.example-card .ex-name{font-weight:800; font-size:16px; margin-bottom:4px;}
.example-card .ex-desc{font-size:16px; color:var(--text-muted); margin-bottom:8px;}

@media (max-width:620px){
  .ws-hero{padding:20px 18px;}
  .tool-panel{padding:18px 16px;}
  .stage{padding:22px 16px;}
}
/* ============================================================
   RECORRIDO A — Amazon desde cero: componentes nuevos
   ============================================================ */
.subprogress{ font-size:16px; color:var(--text-muted); font-weight:700; margin-bottom:10px; }
.stage.on-dark .subprogress{ color:#c7cbe4; }

.info-card{ background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:12px; color:var(--text-body); }
.stage.on-dark .info-card{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.info-card h3{ font-size:16px; margin-bottom:8px; color:var(--text-body); }
.info-card ul{ margin:6px 0 0; padding-left:18px; font-size:16px; color:var(--text-body); }

.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
@media (max-width:700px){ .compare-grid{ grid-template-columns:1fr; } }
.compare-col{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:16px 18px; color:var(--text-body); }
.compare-col h4{ margin:0 0 10px; font-size:16px; color:var(--text-body); }
.compare-col ul{ margin:0; padding-left:18px; font-size:16px; line-height:1.6; color:var(--text-body); }

.compare-table{ width:100%; border-collapse:collapse; font-size:16px; margin:14px 0; background:var(--surface); border-radius:var(--radius-md); overflow:hidden; color:var(--text-body); }
.compare-table th{ background:rgba(120,130,190,.12); text-align:left; padding:9px 12px; font-size:16px; text-transform:uppercase; color:var(--text-muted); }
.compare-table td{ padding:9px 12px; border-top:1px solid var(--surface-border); color:var(--text-body); }

.checklist-doc{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; }
.stage.on-dark .checklist-doc{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.checklist-doc .cd-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.checklist-doc .cd-label{ font-weight:800; font-size:16px; color:var(--text-body); }
.checklist-doc .cd-detail{ font-size:16px; color:var(--text-muted); margin-top:6px; line-height:1.5; }
.cd-check-btn{ font-size:16px; font-weight:800; padding:8px 14px; border-radius:999px; border:1.5px solid var(--surface-border); background:var(--surface); color:var(--text-body); cursor:pointer; min-height:40px; white-space:nowrap; }
.cd-check-btn.done{ background:var(--good); border-color:var(--good); color:#fff; }

.master-data-box{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:16px 18px; margin:14px 0; color:var(--text-body); }
.stage.on-dark .master-data-box{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }

.step-guide-card{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:22px 24px; color:var(--text-body); }
.step-guide-card .sg-row{ margin-bottom:10px; font-size:16px; color:var(--text-body); }
.step-guide-card .sg-row strong{ display:block; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:3px; }
.step-guide-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; font-size:16px; color:var(--text-muted); }

.status-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
@media (max-width:760px){ .status-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .status-grid{ grid-template-columns:1fr; } }
.status-chip{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-sm); padding:12px 10px; text-align:center; font-size:16px; font-weight:700; cursor:pointer; color:var(--text-body); }
.status-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.tag-picker{ display:flex; gap:6px; flex-wrap:wrap; }
.tag-opt{ font-size:16px; font-weight:700; padding:6px 11px; border-radius:999px; border:1.5px solid var(--surface-border); background:var(--surface); color:var(--text-body); cursor:pointer; }
.tag-opt.active-incluido{ background:var(--good); border-color:var(--good); color:#fff; }
.tag-opt.active-no-incluido{ background:var(--bad); border-color:var(--bad); color:#fff; }
.tag-opt.active-desconocido{ background:var(--muted-2); border-color:var(--text-faint); color:#fff; }
.tag-opt.active-estimado{ background:var(--warn); border-color:var(--warn); color:#fff; }

.quotation-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.quotation-card{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:18px 20px; margin-bottom:12px; }
.quotation-card-title{ font-size:var(--fs-h2); font-weight:800; margin-bottom:6px; }
.quotation-card-question{ font-size:var(--fs-help); color:var(--text-muted); margin-bottom:12px; }
.quotation-card-selected{ font-size:var(--fs-help); font-weight:800; color:var(--good); margin-top:10px; }
.adjustment-diff-note{ font-size:var(--fs-help); font-weight:700; margin-top:8px; }
.ri-value-text{ font-size:var(--fs-help); font-weight:800; text-align:right; max-width:60%; }
.quotation-row:last-child{ border-bottom:none; }

.model-card{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:10px; cursor:pointer; color:var(--text-body); }
.model-card.selected{ border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.model-card.selected h4, .model-card.selected .mc-meta{ color:var(--ink) !important; }
.model-card h4{ margin:0 0 6px; font-size:16px; color:var(--text-body); }
.model-card .mc-meta{ font-size:16px; color:var(--text-muted); line-height:1.7; }

.help-fab{ position:fixed; left:22px; bottom:22px; z-index:60; background:var(--paper); border:1.5px solid var(--line); color:var(--ink); border-radius:999px; padding:12px 16px; font-size:16px; font-weight:800; box-shadow:var(--shadow-md); cursor:pointer; }
.help-fab:hover{ border-color:var(--accent); }

.master-recap{ background:var(--accent-soft); border:1px solid #d9deff; border-radius:var(--radius-sm); padding:10px 14px; font-size:16px; margin-bottom:14px; color:var(--ink); }
.gate-warning{ background:var(--bad-soft); border:1px solid #f3c6c4; border-radius:var(--radius-sm); padding:10px 14px; font-size:16px; color:#7f1d1d; margin-top:10px; font-weight:700; }

/* ============================================================
   SISTEMA DE DISEÑO ÚNICO — v2.1 (aplica a toda la plataforma)
   ============================================================ */

/* ---- Sistema global de selección: toda opción marcada se ve igual de clara ---- */
@keyframes selectPulse{ 0%{ transform:scale(.97); } 60%{ transform:scale(1.015); } 100%{ transform:scale(1); } }
.option-chip.active, .status-chip.active, .reason-chip.active,
.tag-opt.active-incluido, .tag-opt.active-no-incluido, .tag-opt.active-desconocido, .tag-opt.active-estimado,
.model-card.selected, .fulfill-card.selected, .selectable.is-selected, .choice-card.active{
  animation: selectPulse .25s ease;
  font-weight:800;
}
@media (prefers-reduced-motion: reduce){
  .option-chip.active, .status-chip.active, .reason-chip.active, .tag-opt[class*="active-"], .model-card.selected, .fulfill-card.selected, .selectable.is-selected, .choice-card.active{ animation:none; }
}
.option-chip.active::before, .status-chip.active::before, .reason-chip.active::before,
.tag-opt.active-incluido::before, .tag-opt.active-no-incluido::before, .tag-opt.active-desconocido::before, .tag-opt.active-estimado::before{
  content:"✓"; margin-right:6px; font-weight:900;
}
.choice-card.active{ border-color:var(--accent) !important; background:var(--accent-soft) !important; box-shadow:0 0 0 3px var(--accent-soft); }
.option-chip.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; box-shadow:0 0 0 3px var(--accent-soft); }
.model-card.selected::after{ content:"✓ Seleccionado"; display:block; margin-top:8px; font-size:var(--fs-help); font-weight:800; color:var(--accent); }

/* ---- Portada (curso premium) ---- */
.cover-stage{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; position:relative; color:#fff; }

/* ============================================================
   IDENTIDAD ZETRUN — estilos aislados con prefijo exclusivo (prefijo .vendra- conservado por continuidad interna del sistema de diseño)
   ============================================================ */
.vendra-cover{ overflow:hidden; }
.vendra-cover-content{ max-width:640px; width:100%; text-align:center; position:relative; z-index:2; }
.vendra-content-hidden{ opacity:0; pointer-events:none; }
.brand-logo-img{ display:block; }
.vendra-logo-mark{ margin:0 auto 18px; filter:drop-shadow(0 10px 22px rgba(91,107,255,.35)); }
.cover-full-logo{ width:min(420px, 82vw); height:auto; margin:0 auto 22px; display:block; }
.vendra-brand-name{ letter-spacing:-.01em; }

.vendra-intro{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:radial-gradient(1200px 800px at 50% -10%, #202b4d 0%, var(--ink) 60%); transition:opacity .5s ease;
}
.vendra-intro.vendra-intro-done{ opacity:0; pointer-events:none; }
.vendra-intro-mark{
  display:flex; align-items:center; justify-content:center;
  animation: vendraFadeIn .6s ease both; filter:drop-shadow(0 10px 26px rgba(91,107,255,.4));
}
.vendra-intro-disclaimer{ animation: vendraFadeIn .5s ease 1.6s both; margin-top:6px; }
.vendra-intro-route{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; color:#cfd3ef; font-size:16px; font-weight:700; animation: vendraFadeIn .6s ease .4s both; max-width:90vw; }
.vendra-intro-arrow{ color:var(--accent-2); }
.vendra-intro-name{ font-size:clamp(30px,6vw,42px); font-weight:800; color:#fff; letter-spacing:.04em; animation: vendraFadeIn .5s ease 1s both; }
.vendra-intro-slogan{ font-size:18px; color:#cfd3ef; animation: vendraFadeIn .5s ease 1.3s both; }
@keyframes vendraFadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){
  .vendra-intro-mark, .vendra-intro-route, .vendra-intro-name, .vendra-intro-slogan{ animation:none; opacity:1; transform:none; }
}
.vendra-skip-intro{
  position:absolute; top:22px; right:22px; z-index:6; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:16px; font-weight:700; padding:10px 16px; border-radius:999px; cursor:pointer; min-height:44px;
}
.vendra-skip-intro:hover{ background:rgba(255,255,255,.2); }

.vendra-legacy-note{ display:block; text-align:left; }
.vendra-legacy-note .cover-actions{ align-items:stretch; }

/* ---- Explorar cómo funciona ---- */
.explore-stage-list{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.explore-stage-card{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:16px 18px; }
.explore-stage-card .esc-icon{ font-size:26px; flex:0 0 auto; }
.explore-stage-card .esc-label{ font-weight:800; font-size:var(--fs-label); color:var(--text-body); margin-bottom:4px; }
.explore-stage-card .esc-meta{ font-size:var(--fs-help); color:var(--text-muted); margin-bottom:4px; }
.explore-stage-card .esc-result{ font-size:var(--fs-help); color:var(--text-muted); }
.cover-inner{ max-width:640px; width:100%; text-align:center; animation: stageIn var(--dur) cubic-bezier(.22,.9,.32,1); }
.cover-mark{ width:64px; height:64px; border-radius:18px; margin:0 auto 22px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; color:#fff; box-shadow:0 16px 34px rgba(91,107,255,.4); }
.cover-sub{ font-size:var(--fs-sub); font-weight:700; color:#cfd3ef; margin-bottom:6px; }
.cover-explain{ font-size:var(--fs-body); color:#cfd3ef; line-height:1.6; margin:14px 0 24px; }
.cover-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:28px; }
.cover-fact{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:10px 18px; font-size:16px; font-weight:700; }
.cover-learn{ text-align:left; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); padding:22px 24px; margin-bottom:28px; }
.cover-learn h3{ font-size:var(--fs-h2); margin-bottom:12px; }
.cover-how{ margin-top:14px; color:#e5e7ff; font-size:var(--fs-body); line-height:1.6; }
.cover-progress-note{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:11px 18px; font-size:var(--fs-help); font-weight:700; margin-bottom:18px; color:#fff; }
.cover-actions{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.cover-learn ul{ margin:0; padding-left:20px; font-size:var(--fs-body); line-height:1.8; color:#e5e7ff; }

/* ---- Marco de mentor: qué haremos / por qué / qué debes hacer / qué sigue ---- */
.mentor-frame{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:18px 20px; margin-bottom:18px; }
.mentor-frame .mf-row{ display:flex; gap:10px; padding:6px 0; font-size:var(--fs-body); }
.mentor-frame .mf-ico{ flex:0 0 auto; }
.mentor-frame .mf-label{ font-weight:800; color:var(--accent); }
.stage.on-dark .mentor-frame .mf-label{ color:#b9c0ff; }

/* ---- Progreso: qué acabas de lograr / qué sigue ---- */
.progress-panel{ background:var(--surface); border:1.5px solid var(--surface-border); border-radius:var(--radius-md); padding:16px 20px; margin-bottom:18px; }
.progress-panel .pp-row{ display:flex; justify-content:space-between; gap:10px; font-size:var(--fs-body); padding:5px 0; }
.progress-panel .pp-label{ color:var(--text-muted); font-weight:700; }
.progress-panel .pp-value{ font-weight:800; text-align:right; }

/* ---- Celebración discreta ---- */
.celebrate-toast{ background:linear-gradient(135deg,var(--good),#17a06b); color:#fff; }
@keyframes celebratePop{ 0%{transform:scale(.85); opacity:0;} 60%{transform:scale(1.04); opacity:1;} 100%{transform:scale(1);} }
.celebrate-toast{ animation: celebratePop .4s cubic-bezier(.22,.9,.32,1); }
@media (prefers-reduced-motion: reduce){ .celebrate-toast{ animation:none; } }

/* ---- Estados de campo consistentes (formularios) ---- */
.field-wrap{ margin-bottom:20px; }
.field-wrap .fw-label{ display:block; font-size:var(--fs-label); font-weight:800; color:var(--text-body); margin-bottom:4px; }
.field-wrap .fw-desc{ font-size:var(--fs-help); color:var(--text-muted); margin-bottom:8px; line-height:1.5; }
.field-wrap .fw-example{ font-size:var(--fs-help); color:var(--text-faint); margin-top:6px; font-style:italic; }
.field-wrap input, .field-wrap select, .field-wrap textarea{
  width:100%; font-size:var(--fs-body); padding:14px 16px; border-radius:var(--radius-sm); border:1.8px solid var(--surface-border);
  background:var(--surface); color:var(--text-body); min-height:52px; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field-wrap input:focus, .field-wrap select:focus, .field-wrap textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.field-wrap.is-valid input, .field-wrap.is-valid select{ border-color:var(--good); }
.field-wrap.is-invalid input, .field-wrap.is-invalid select{ border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); }
.field-wrap .fw-status{ font-size:var(--fs-help); margin-top:6px; font-weight:700; display:none; align-items:center; gap:6px; }
.field-wrap.is-valid .fw-status.fw-status-ok{ display:flex; color:var(--good); }
.field-wrap.is-invalid .fw-status.fw-status-err{ display:flex; color:var(--bad); }

/* ---- Selección clara y consistente (cualquier elemento seleccionable) ---- */
.selectable{ position:relative; transition:all var(--dur-fast) ease; }
.selectable .sel-check{ position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; border:2px solid var(--surface-border); display:flex; align-items:center; justify-content:center; font-size:16px; color:transparent; background:var(--surface); }
.selectable.is-selected{ border-color:var(--accent) !important; background:var(--accent-soft) !important; box-shadow:0 0 0 3px var(--accent-soft); }
.selectable.is-selected .sel-check{ background:var(--accent); border-color:var(--accent); color:#fff; }
.stage.on-dark .selectable.is-selected{ background:rgba(91,107,255,.24) !important; }

/* ---- Ajustes de accesibilidad táctil global ---- */
button, .option-chip, .diag-opt, .status-chip, .tag-opt, .cd-check-btn, .btn-flat, .ws-pill-btn{ min-height:44px; }
input, select, textarea{ font-size:16px; }

@media (max-width:640px){
  .stage{ padding:24px 16px; }
  .cover-facts{ gap:8px; }
  .cover-fact{ font-size:16px; padding:9px 14px; }
  .cover-learn{ padding:18px 18px; }
  .btn-primary-lg, .btn-secondary-lg{ width:100%; justify-content:center; }
  .stage-actions{ width:100%; }
  .compare-grid, .status-grid, .examples-grid{ grid-template-columns:1fr; }
  .compare-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .mentor-frame, .info-card, .step-guide-card, .checklist-doc, .master-data-box, .model-card{ padding:16px 16px; }
  .help-fab{ left:12px; right:12px; bottom:88px; text-align:center; }
  .cd-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .cd-check-btn{ width:100%; }
  .quotation-row{ flex-direction:column; align-items:flex-start; }
}


/* ---- Selector de idioma (portada y encabezado del workspace) ---- */
.vendra-lang-selector{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.vendra-lang-label{ font-size:16px; font-weight:700; color:#cfd3ef; }
.vendra-lang-btn{ background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.22); color:#fff; font-size:16px; font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; min-height:40px; }
.vendra-lang-btn.active{ background:var(--accent); border-color:var(--accent); }
.ws-lang-pill{ background:var(--paper); border:1.5px solid var(--line); color:var(--ink); font-size:16px; font-weight:800; padding:8px 14px; border-radius:999px; cursor:pointer; min-height:40px; }
.ws-lang-pill.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---- Experiencia de introducción — video (Product Polish) ----
   Reemplaza cualquier mensaje de carga. Pantalla completa, fondo negro, sin controles,
   bloquea interacción mientras se reproduce, y hace un fade-out elegante al terminar. */
.zetrun-intro-video{
  position:fixed; inset:0; width:100vw; height:100vh;
  display:none; align-items:center; justify-content:center;
  background:#000; z-index:10000; opacity:1; visibility:visible;
  overflow:hidden; pointer-events:all; transition:opacity 450ms ease;
}
.zetrun-intro-video.fade-out{ opacity:0; pointer-events:none; }
.zetrun-intro-video video{ width:100%; height:100%; display:block; object-fit:cover; background:#000; }
@media (prefers-reduced-motion: reduce){ .zetrun-intro-video{ transition:none; } }

/* ---- Selector de idioma persistente (visible en toda la aplicación, sección 23/37) ---- */
.persistent-lang-selector{ position:fixed; top:14px; right:14px; z-index:500; display:flex; gap:6px; background:rgba(11,18,32,.55); backdrop-filter:blur(6px); border-radius:999px; padding:5px; border:1px solid rgba(255,255,255,.18); }
.persistent-lang-btn{ background:transparent; border:none; color:#fff; font-size:16px; font-weight:800; padding:7px 13px; border-radius:999px; cursor:pointer; min-height:36px; min-width:40px; }
.persistent-lang-btn.active{ background:var(--accent); }
.persistent-lang-btn:hover:not(.active){ background:rgba(255,255,255,.15); }
@media (max-width:640px){ .persistent-lang-selector{ top:8px; right:8px; } .persistent-lang-btn{ font-size:16px; padding:6px 10px; } }

/* ---- Descriptor de marca (sección 7 — HTML traducible, separado del logotipo) ---- */
.cover-descriptor{ font-size:16px; font-weight:600; color:#cfd3ef; text-align:center; margin-top:-6px; margin-bottom:10px; letter-spacing:.01em; }