:root{
  --bg:#fbfaf8; --panel:#ffffff; --line:#e8e4de; --line2:#d9d3ca;
  --txt:#1b1a19; --muted:#6c6660; --accent:#6d3bf5; --accent-soft:#f0ebff;
  --rad:16px; --maxw:1100px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.65 "Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:3rem}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

header.top{border-bottom:1px solid var(--line);background:rgba(251,250,248,.94);
  position:sticky;top:0;z-index:40;backdrop-filter:blur(10px)}
.topin{max-width:var(--maxw);margin:0 auto;padding:.7rem 18px;display:flex;
  align-items:center;gap:1rem}
.brand{font-weight:700;font-size:1.1rem;color:var(--txt);text-decoration:none;
  letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--accent)}
nav.main{margin-left:auto;display:flex;gap:.15rem;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.main::-webkit-scrollbar{display:none}
nav.main a{color:var(--muted);text-decoration:none;font-size:.87rem;
  padding:.38rem .66rem;border-radius:9px;white-space:nowrap}
nav.main a:hover,nav.main a[aria-current]{color:var(--txt);background:#f1ede6}

h1{font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.8rem,5vw,2.9rem);line-height:1.1;margin:0 0 .6rem}
h2{font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.3rem,3.2vw,1.75rem);margin:2.4rem 0 .7rem}
h3{font-size:1.08rem;margin:1.6rem 0 .45rem;font-weight:600}
.hero{padding:2.2rem 0 1.2rem}
.lead{color:var(--muted);font-size:1.05rem;max-width:60ch;margin:0}
.crumb{font-size:.85rem;color:var(--muted);padding:.9rem 0 0}
.crumb a{color:var(--muted);text-decoration:none}

/* ---------- widget de tarjeta ---------- */
.cardwidget{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr);
  margin:1.4rem 0 .6rem}
@media(min-width:840px){.cardwidget{grid-template-columns:minmax(0,340px) minmax(0,1fr);
  align-items:start;gap:1.8rem}}
.stage{background:#f1ede6;border-radius:var(--rad);padding:14px;display:flex;
  justify-content:center;border:1px solid var(--line)}
/* --ar lo pone el JS con la proporcion de la tarjeta. Asi un fondo de
   pantalla, que es altisimo, se limita por ALTURA y cabe entero en la
   pantalla en vez de salirse por abajo. */
.frame{position:relative;width:100%;max-width:min(300px, calc(56vh * var(--ar, .8)));
  margin:0 auto}
.stage canvas{width:100%;height:auto;border-radius:10px;display:block;
  box-shadow:0 10px 30px rgba(27,26,25,.16)}
.locknote{font-size:.8rem;color:var(--muted);margin:0}
/* Maqueta del reloj encima de la vista previa del fondo de pantalla */
.lockmock{position:absolute;inset:0;pointer-events:none;color:#fff;
  text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums}
.lockmock .lk-date{position:absolute;top:7%;left:0;right:0;font-size:.62rem;
  opacity:.85;letter-spacing:.01em}
.lockmock .lk-time{position:absolute;top:10.5%;left:0;right:0;font-size:2.9rem;
  font-weight:600;line-height:1;opacity:.92}

.cardctl{display:flex;flex-direction:column;gap:.9rem}
.swatches{display:flex;gap:.45rem;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sw[aria-pressed=true]{border-color:var(--txt);transform:scale(1.06)}
.sizes{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{background:var(--panel);border:1px solid var(--line2);color:var(--muted);
  border-radius:999px;padding:.38rem .8rem;font-size:.85rem;cursor:pointer;
  font-family:inherit}
.chip:hover{color:var(--txt)}
.chip[aria-pressed=true]{background:var(--txt);border-color:var(--txt);color:#fff;font-weight:600}
.cardacts{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.btn{background:var(--panel);border:1px solid var(--line2);color:var(--txt);
  border-radius:11px;padding:.65rem 1.15rem;font-size:.95rem;cursor:pointer;
  font-family:inherit;font-weight:500}
.btn:hover{border-color:var(--txt)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:default}
.cardstatus{font-size:.85rem;color:var(--muted)}

/* ---------- rejillas ---------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1rem;text-decoration:none;color:var(--txt);display:block;
  transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile .sym{font-size:1.5rem;line-height:1;color:var(--accent)}
.tile .nm{font-weight:600;margin-top:.45rem;font-size:.98rem}
.tile .sub{color:var(--muted);font-size:.8rem;margin-top:.15rem}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:1.1rem 1.2rem}
.two{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.note{background:var(--accent-soft);border-left:3px solid var(--accent);
  border-radius:10px;padding:.8rem 1rem;font-size:.94rem;margin:1.1rem 0}
.muted{color:var(--muted)}
.small{font-size:.87rem}
ul.clean{list-style:none;padding:0;margin:.6rem 0}
ul.clean li{padding:.32rem 0 .32rem 1.15rem;position:relative}
ul.clean li:before{content:"\2192";position:absolute;left:0;color:var(--accent)}
.pills{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.pill{background:var(--panel);border:1px solid var(--line2);border-radius:999px;
  padding:.3rem .75rem;font-size:.84rem;color:var(--muted);text-decoration:none}
.pill:hover{color:var(--txt);border-color:var(--txt)}

/* ---------- test ---------- */
.q{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.2rem;margin:.9rem 0}
.q .qn{font-size:.78rem;color:var(--accent);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase}
.q .qt{font-weight:600;margin:.35rem 0 .8rem;font-size:1.05rem}
.opt{display:block;width:100%;text-align:left;background:#fbfaf8;
  border:1px solid var(--line2);border-radius:11px;padding:.7rem .9rem;
  margin:.4rem 0;cursor:pointer;font-family:inherit;font-size:.96rem;color:var(--txt)}
.opt:hover{border-color:var(--accent)}
.opt[aria-pressed=true]{background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:500}
.progress{height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin:.8rem 0 0}
.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s}

/* ---------- editor ---------- */
.editor{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr);margin:1.2rem 0}
@media(min-width:900px){
  .editor{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:start;gap:2rem}
  .ed-preview{position:sticky;top:76px}
}
.ed-controls{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
/* Dentro del editor el widget va SIEMPRE en una columna: con su rejilla de dos
   los controles se salian por encima de la columna de la derecha. */
.ed-preview .cardwidget{grid-template-columns:minmax(0,1fr);gap:.9rem;margin:0}
.ed-preview .frame{max-width:min(320px, calc(52vh * var(--ar, .8)))}
.edsec{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:1rem 1.1rem}
.edsec h2{font-size:1.02rem;margin:0 0 .6rem;font-family:inherit;font-weight:600;
  letter-spacing:0}
.edsec textarea{resize:vertical;min-height:72px;line-height:1.45;
  font-family:inherit}
/* Sin esto la etiqueta sale EN LINEA junto al campo en vez de encima. */
.fieldlab{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.25rem;
  font-weight:500}
.edsec .fieldlab{margin-top:.6rem}
.edsec .fieldlab:first-of-type{margin-top:0}
.row2{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.row2{grid-template-columns:1fr 1fr}}
.tabs{display:flex;gap:.3rem;margin-bottom:.8rem;flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:.4rem .2rem;margin-right:.7rem;font-family:inherit;font-size:.92rem;
  cursor:pointer}
.tab[aria-pressed=true]{color:var(--txt);border-bottom-color:var(--accent);font-weight:600}
.tabpane .swatches{gap:.5rem}
.tabpane .sw{width:44px;height:44px;border-radius:12px;background-position:center}
.filein{width:100%;font-family:inherit;font-size:.9rem;padding:.6rem;
  border:1px dashed var(--line2);border-radius:10px;background:#fbfaf8}
input[type=range]{width:100%;accent-color:var(--accent);margin:.2rem 0 .3rem}
#starters .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- calendario de dias ---------- */
.daybar{display:flex;gap:.3rem;overflow-x:auto;padding:.1rem 0 .4rem;
  margin:1rem 0 0;scrollbar-width:thin}
.day{flex:0 0 auto;width:38px;height:38px;border-radius:10px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);color:var(--muted);
  font-family:inherit;font-size:.85rem;font-variant-numeric:tabular-nums}
.day:hover{color:var(--txt);border-color:var(--txt)}
.day[aria-pressed=true]{background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:600}

/* ---------- fichas de formato ---------- */
.tile.fmt{text-align:center}
.fmtbox{height:132px;display:flex;align-items:center;justify-content:center;
  margin-bottom:.6rem}
.fmtbox span{display:block;border:2px solid var(--accent);border-radius:6px;
  background:var(--accent-soft)}
.tile.fmt .nm{font-size:.94rem}

/* ---------- generador de CV ---------- */
.rz{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr);margin:1.4rem 0}
@media(min-width:1000px){
  .rz{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start;gap:2rem}
  .rz-preview{position:sticky;top:76px}
}
.rz-form{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.rz-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.rz-stage{background:#e9e5dd;border:1px solid var(--line);border-radius:12px;
  padding:1px;overflow:hidden}
.rz-scale{transform-origin:top left}
.rzrow{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;
  margin-bottom:.7rem;background:#fbfaf8}
.rzrow textarea{resize:vertical;font-family:inherit}

/* La hoja mide milimetros DE VERDAD: asi lo que se ve es el documento y lo
   que se imprime sale exacto, sin reconstruir nada por otro camino. */
.sheet{width:210mm;min-height:297mm;background:#fff;color:#1d1c1a;
  padding:16mm 15mm;box-sizing:border-box;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:10.3pt;line-height:1.42;--rz-accent:#2f4f6f}
.sheet.paper-letter{width:215.9mm;min-height:279.4mm}
.sheet h1{font-family:"Fraunces",Georgia,serif;font-size:21pt;line-height:1.1;
  margin:0 0 1.5mm;letter-spacing:-.01em;color:#141311}
.sheet h2{font-family:"Outfit",sans-serif;font-size:9pt;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rz-accent);margin:6mm 0 2mm;
  padding-bottom:1mm;border-bottom:.4mm solid var(--rz-accent);font-weight:600}
.sheet p{margin:0 0 2mm}
.rz-head{display:flex;gap:6mm;align-items:flex-start;
  border-bottom:.3mm solid #ddd8d0;padding-bottom:4mm}
.rz-photo{width:26mm;height:26mm;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rz-role{font-size:11.5pt;color:var(--rz-accent);font-weight:500;margin:0 0 2mm}
.rz-contact{display:flex;flex-wrap:wrap;gap:1mm 4mm;font-size:8.8pt;color:#5a554e}
.rz-contact span{white-space:nowrap}
.entry{margin-bottom:3.5mm;break-inside:avoid}
.entry-head{display:flex;justify-content:space-between;gap:4mm;align-items:baseline}
.entry-role{font-weight:600;font-size:10.8pt}
.entry-when{font-size:8.8pt;color:#6d675f;white-space:nowrap}
.entry-org{font-size:9.6pt;color:var(--rz-accent);margin-bottom:1mm}
.sheet ul{margin:0;padding-left:4.5mm}
.sheet li{margin-bottom:.8mm}
ul.skills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:1.5mm}
ul.skills li{border:.3mm solid #d9d4cc;border-radius:1.5mm;padding:.8mm 2.2mm;
  font-size:9pt;background:#faf8f5}
.tpl-sidebar .rz-cols{display:flex;gap:7mm;margin-top:1mm}
.tpl-sidebar .rz-main{flex:1 1 auto;min-width:0}
.tpl-sidebar .rz-side{flex:0 0 52mm}
.tpl-sidebar .rz-side h2{margin-top:6mm}

/* IMPRESION. Se oculta todo menos la hoja con visibility, que es lo unico que
   funciona igual en todos los navegadores cuando la hoja esta anidada. El
   ajuste de color se fuerza para que el acento no salga en gris. */
/* IMPRESION.
   visibility:hidden NO sirve aqui: lo oculto sigue ocupando su sitio y el PDF
   salia con cuatro paginas, tres de ellas en blanco. Hay que quitar del flujo
   con display:none todo lo que no es la hoja.
   Y min-height se anula: con 297mm exactos y margenes a cero, el redondeo
   empuja unos pocos puntos a una segunda pagina vacia. */
@media print{
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body>header,body>footer,body>.toast{display:none!important}
  body>main>*:not(.rz){display:none!important}
  .rz>.rz-form,.rz-actions,.adslot{display:none!important}
  .rz{display:block!important;gap:0!important;margin:0!important}
  .rz-preview{position:static!important}
  .rz-stage{height:auto!important;overflow:visible!important;border:0!important;
    padding:0!important;background:none!important;border-radius:0!important}
  .rz-scale{transform:none!important;width:auto!important}
  .wrap{max-width:none!important;padding:0!important;margin:0!important}
  #sheet{margin:0!important;box-shadow:none!important;border:0!important;
    min-height:0!important;width:auto!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet h2,.entry-org,.rz-role,ul.skills li{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .entry,.sheet section{break-inside:avoid}
}

/* ---------- hueco de publicidad ---------- */
.adslot{border:1px dashed var(--line2);border-radius:12px;min-height:96px;
  display:flex;align-items:center;justify-content:center;color:#b3aca3;
  font-size:.78rem;margin:2rem 0;letter-spacing:.05em;text-transform:uppercase}

footer.bot{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0;
  color:var(--muted);font-size:.87rem}
footer.bot a{color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}