:root {
  --s-tinta: #141414;
  --s-crema: #faf8f3;
  --s-lima: #d4f25a;
  --s-violeta: #5b3df5;
  --s-linea: #e4dfd3;
  --s-gris: #5f5f5f;
  --doc: 'Inter', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
.doc { box-sizing: border-box; width: 100%; min-height: 100%; display: flex; flex-direction: column; padding: 72px 80px 0; background: var(--s-crema); color: var(--s-tinta); font-family: var(--doc); -webkit-font-smoothing: antialiased; }
.doc *, .doc *::before, .doc *::after { box-sizing: border-box; }
.doc h1, .doc h2, .doc h3, .doc h4, .doc p, .doc ul, .doc ol, .doc dl, .doc dd, .doc figure { margin: 0; padding: 0; }
.doc ul, .doc ol { list-style: none; }
.doc-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding-bottom: 40px; border-bottom: 1.5px solid var(--s-tinta); }
.doc-etq { display: flex; align-items: center; gap: 12px; margin-bottom: 20px !important; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-gris); }
.doc-etq b { background: var(--s-lima); color: var(--s-tinta); padding: 3px 8px; font-weight: 700; }
.doc-tit { font: 600 60px/1 var(--doc); letter-spacing: -.035em; }
.doc-desc { font-size: 16px; line-height: 1.6; color: #3a3a3a; max-width: 600px; }
.doc-cuerpo { flex: 1; padding: 48px 0 56px; }
.doc-pie { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--s-linea); padding: 20px 0 24px; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s-gris); }
.doc-chip { display: inline-block; font: 700 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; background: var(--s-tinta); color: var(--s-crema); padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.doc-chip-lima { background: var(--s-lima); color: var(--s-tinta); }
.doc-chip-borde { background: transparent; color: var(--s-tinta); box-shadow: inset 0 0 0 1px #c9c2b3; }
.doc-espec { display: grid; grid-template-columns: 150px 1fr; gap: 0; font-size: 13px; }
.doc-espec dt { padding: 9px 0; border-bottom: 1px dashed #d9d3c5; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--s-gris); }
.doc-espec dd { padding: 9px 0; border-bottom: 1px dashed #d9d3c5; color: var(--s-tinta); }
.doc-rotulo { font: 400 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--s-gris); margin-top: 12px !important; }
.notas { width: 520px; flex: none; display: flex; flex-direction: column; padding: 56px 48px 40px; background: var(--s-crema); border-left: 1px solid var(--s-linea); font-family: var(--doc); color: var(--s-tinta); -webkit-font-smoothing: antialiased; }
.notas *, .notas *::before { box-sizing: border-box; }
.notas h2, .notas h3, .notas p, .notas ol, .notas ul, .notas dl, .notas dd { margin: 0; padding: 0; }
.notas ol, .notas ul { list-style: none; }
.notas-tit { margin-top: 4px !important; font: 600 34px/1.05 var(--doc); letter-spacing: -.03em; }
.notas-proposito { margin-top: 16px !important; font-size: 14.5px; line-height: 1.6; color: #3a3a3a; }
.notas-lista { margin-top: 28px !important; display: flex; flex-direction: column; border-top: 1px solid var(--s-linea); }
.nota { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--s-linea); }
.nota h3 { font: 600 14px/1.35 var(--doc); }
.nota p { margin-top: 4px !important; font-size: 13px; line-height: 1.55; color: #4a4a4a; }
.notas-espec { margin-top: auto !important; padding-top: 24px; }
.notas-firma { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--s-gris); }
}
/* ============================================================
   Documentación (estilo Sogno Studio)
   ============================================================ */
.doc { box-sizing: border-box; width: 100%; min-height: 100%; display: flex; flex-direction: column; padding: 72px 80px 0; background: var(--s-crema); color: var(--s-tinta); font-family: var(--doc); -webkit-font-smoothing: antialiased; }
.doc *, .doc *::before, .doc *::after { box-sizing: border-box; }
.doc h1, .doc h2, .doc h3, .doc h4, .doc p, .doc ul, .doc ol, .doc dl, .doc dd, .doc figure { margin: 0; padding: 0; }
.doc ul, .doc ol { list-style: none; }
.doc-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding-bottom: 40px; border-bottom: 1.5px solid var(--s-tinta); }
.doc-etq { display: flex; align-items: center; gap: 12px; margin-bottom: 20px !important; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-gris); }
.doc-etq b { background: var(--s-lima); color: var(--s-tinta); padding: 3px 8px; font-weight: 700; }
.doc-tit { font: 600 60px/1 var(--doc); letter-spacing: -.035em; }
.doc-desc { font-size: 16px; line-height: 1.6; color: #3a3a3a; max-width: 600px; }
.doc-cuerpo { flex: 1; padding: 48px 0 56px; }
.doc-pie { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--s-linea); padding: 20px 0 24px; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s-gris); }
.doc-pie img { height: 15px; width: auto; display: block; }
.doc-firma { display: flex; align-items: center; gap: 14px; }
.doc-grupo { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-gris); margin-bottom: 16px !important; display: flex; align-items: center; gap: 10px; }
.doc-grupo::after { content: ''; flex: 1; height: 1px; background: var(--s-linea); }
.doc-h { font: 600 20px/1.3 var(--doc); letter-spacing: -.01em; }
.doc-h-peq { font: 600 15px/1.35 var(--doc); }
.doc-p { font-size: 14px; line-height: 1.6; color: #444; }
.doc-p-peq { font-size: 13px; line-height: 1.55; color: #555; }
.doc-mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.doc-tarjeta { background: #fff; border: 1px solid var(--s-linea); border-radius: 12px; padding: 24px; }
.doc-lienzo { border-radius: 12px; padding: 40px; background-color: #efebe2; background-image: radial-gradient(#d6cfbf 1px, transparent 1px); background-size: 16px 16px; }
.doc-lienzo-oscuro { background-color: #1d1915; background-image: radial-gradient(#3a332c 1px, transparent 1px); }
.doc-chip { display: inline-block; font: 700 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; background: var(--s-tinta); color: var(--s-crema); padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.doc-chip-lima { background: var(--s-lima); color: var(--s-tinta); }
.doc-chip-borde { background: transparent; color: var(--s-tinta); box-shadow: inset 0 0 0 1px #c9c2b3; }
.doc-espec { display: grid; grid-template-columns: 150px 1fr; gap: 0; font-size: 13px; }
.doc-espec dt { padding: 9px 0; border-bottom: 1px dashed #d9d3c5; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--s-gris); }
.doc-espec dd { padding: 9px 0; border-bottom: 1px dashed #d9d3c5; color: var(--s-tinta); }
.doc-rotulo { font: 400 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--s-gris); margin-top: 12px !important; }
.doc-cota { position: relative; font: 400 11px var(--mono); color: var(--s-violeta); }

/* Marcas numeradas y panel de notas */
.anotar { position: relative; outline: 1.5px dashed rgba(91, 61, 245, .8); outline-offset: 6px; }
.marca { position: absolute; left: -16px; top: -16px; z-index: 40; width: 28px; height: 28px; border-radius: 50%; background: var(--s-violeta); color: #fff; font: 700 13px/28px var(--mono); text-align: center; letter-spacing: 0; text-transform: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 6px 14px rgba(0, 0, 0, .3); font-style: normal; }
.marca-dentro { left: 12px; top: 12px; }
.marca-linea { position: static; display: inline-block; flex: none; }
.raiz-desglose { display: flex; align-items: stretch; width: 1960px; min-height: 1100px; background: var(--s-crema); }
.raiz-desglose > .web { width: 1440px; flex: none; display: flex; flex-direction: column; }
.raiz-desglose > .web > .lleno { flex: 1; }
.raiz-simple > .web { width: 100%; }
.notas { width: 520px; flex: none; display: flex; flex-direction: column; padding: 56px 48px 40px; background: var(--s-crema); border-left: 1px solid var(--s-linea); font-family: var(--doc); color: var(--s-tinta); -webkit-font-smoothing: antialiased; }
.notas *, .notas *::before { box-sizing: border-box; }
.notas h2, .notas h3, .notas p, .notas ol, .notas ul, .notas dl, .notas dd { margin: 0; padding: 0; }
.notas ol, .notas ul { list-style: none; }
.notas-tit { margin-top: 4px !important; font: 600 34px/1.05 var(--doc); letter-spacing: -.03em; }
.notas-proposito { margin-top: 16px !important; font-size: 14.5px; line-height: 1.6; color: #3a3a3a; }
.notas-lista { margin-top: 28px !important; display: flex; flex-direction: column; border-top: 1px solid var(--s-linea); }
.nota { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--s-linea); }
.nota h3 { font: 600 14px/1.35 var(--doc); }
.nota p { margin-top: 4px !important; font-size: 13px; line-height: 1.55; color: #4a4a4a; }
.notas-espec { margin-top: auto !important; padding-top: 24px; }
.notas-firma { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--s-gris); }
.notas-firma img { height: 13px; width: auto; display: block; }