/* ================================================================
   MEGA PACK AUTOCAD 2026 — MasterDxcs
   Sistema: MODEL SPACE (oscuro, donde se trabaja) / PAPER SPACE
   (claro, donde se entrega). Un solo tema: el contraste claro/oscuro
   significa algo, no es un botón.

   LA REGLA DEL COLOR — dos colores mandan, y nada más:

   ÁMBAR --acid  = TODO el acento de la interfaz. Rótulos de sección,
                   remates de titular, cotas, comandos, ojos de capa,
                   iconos, chips activos, bordes al pasar el mouse,
                   tildes, notas a mano. Si algo resalta, resalta en
                   ámbar. Sin excepciones.
   VERDE --wa    = la acción, y solo la acción. Un elemento verde es
                   siempre un enlace a WhatsApp. Nunca decoración.
   ACI   --aci-* = los seis colores de capa de AutoCAD. Viven ÚNICAMENTE
                   dentro de un dibujo o de una lista de capas: muros,
                   mobiliario, autos, vegetación, categorías de proyecto.
                   Ahí el cian es una capa más, no un acento.

   El cian NO es color de interfaz. Si aparece fuera de un dibujo o de
   una lista de capas, es un error.

   Sobre papel el ámbar baja a #b06a00: mismo lápiz, otro peso de pluma.
   ================================================================ */

:root{
  /* tokens que edita el panel de paleta de serve.py (no renombrar) */
  --bg:#16191a;
  --ink:#e8ebe9;
  --acid:#ff9f0a;

  --model-2:#1a1e20;
  --model-3:#0f1213;
  --model-4:#0b0e0f;
  --paper:#eceae4;
  --paper-2:#e3e6df;
  --paper-ink:#14181a;
  --paper-muted:#5a625f;  /* 6.3:1 sobre papel */
  --paper-line:#c3c0b8;
  --paper-line-2:#d8d5cd;
  --paper-acid:#8a5400;   /* ambar de papel, 4.8:1 */
  --paper-amber:var(--paper-acid);

  --muted:#a8b0b3;   /* 8.0:1 sobre el fondo — texto de lectura */
  --dim:#9aa3a6;     /* 5.7:1 — texto secundario */
  --faint:#8b9497;   /* 4.7:1 — etiquetas y letra fina */
  --line:#2c3234;
  --line-2:#262c2e;
  --line-3:#23292b;

  --amber:var(--acid);
  --wa:#25D366;
  --wa-ink:#08210f;

  --aci-red:#ff453a;
  --aci-yellow:#ffd60a;
  --aci-green:#32d74b;
  --aci-cyan:#4fc3f7;
  --aci-magenta:#bf5af2;
  --aci-orange:#ff9f0a;
  --aci-white:#b4bfc2;
  --aci-grey:#98a2a5;

  /* trazo de las miniaturas de plano de la galeria */
  --plan-line:#5f6d71;
  /* cita literal de la interfaz de WhatsApp, igual que el viewport cita a
     AutoCAD. Acotada a las burbujas del chat: no aparece en ningun otro
     lado de la pagina. El tilde de leido va en cian, no en el azul de
     WhatsApp, para no meter un cuarto color. */
  --wa-in:#202c33;
  --wa-out:#005c4b;

  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --hand:'Caveat','Segoe Script',cursive;

  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);

  --nav-h:60px;
  /* alto reservado para la barra fija de compra. En pantalla angosta la
     barra se apila en dos filas y necesita mas: se sube en el media query,
     no con otra regla de body que despues pelee por orden de cascada. */
  --bar-h:88px;
  --pad:clamp(20px,4vw,44px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  font-family:var(--sans);font-size:16px;line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button{-webkit-appearance:none;appearance:none;background:transparent;border:none;font-family:inherit;cursor:pointer;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.032em;line-height:1.04;text-wrap:pretty}
p{margin:0}
a{color:var(--acid);text-decoration:none}

.container{width:min(1440px,100%);margin:auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:var(--mono)}
.amber{color:var(--amber)}

/* ---------------- barra de progreso ---------------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--acid)}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,34px);
  padding:0 var(--pad);
  background:rgba(22,25,26,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:height .3s var(--ease-quart);
}
.brand{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.brand i{font-style:normal;color:var(--amber)}
.brand span{color:var(--dim);font-weight:400}
.nav-links{display:flex;gap:2px;flex-grow:1}
.nav-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);padding:0 14px;border:1px solid transparent;transition:.16s;
}
.nav-links a:hover{color:var(--ink);border-color:var(--line);background:var(--model-2)}
.nav-cta{
  display:flex;align-items:center;gap:9px;flex-shrink:0;min-height:44px;
  background:var(--acid);color:#171003;
  padding:0 18px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.07em;
  transition:filter .16s,transform .16s;
}
.nav-cta:hover{filter:brightness(1.08);color:#171003}
.nav-cta svg{width:15px;height:15px;flex-shrink:0}

/* ---------------- botón primario ---------------- */
.primary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--wa);color:var(--wa-ink);
  padding:16px 26px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  transition:filter .16s,transform .16s;
  white-space:nowrap;
}
.primary-btn:hover{filter:brightness(1.08);color:var(--wa-ink)}
.primary-btn:active{transform:translateY(1px)}
.primary-btn svg{width:18px;height:18px;flex-shrink:0}

/* ---------------- redlines (anotaciones a mano) ---------------- */
.hand{font-family:var(--hand);font-weight:600;font-size:26px;line-height:1.1;color:var(--amber);display:block}
.redline{position:absolute;pointer-events:none;z-index:3}
.redline svg{overflow:visible}
.redline svg path{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round}
.redline svg polygon{fill:var(--amber)}

/* ---------------- estructura de sección ---------------- */
.section{padding:clamp(44px,6vw,76px) 0;position:relative}
.sec-head{display:flex;align-items:flex-end;gap:clamp(24px,4vw,48px);margin-bottom:clamp(22px,3vw,32px);flex-wrap:wrap}
.sec-head-l{flex:1 1 460px;display:flex;flex-direction:column;gap:13px}
.sec-head-r{flex:0 1 430px;font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:6px}
.sec-head-r strong{color:var(--amber);font-weight:600}
.section-number{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber);
}
.section-number>span:first-child{width:6px;height:6px;background:var(--amber);flex-shrink:0}
.sec-head h2,.section h2{font-size:clamp(30px,4.4vw,46px)}
.section h2 span{color:var(--amber)}

.sec-foot{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px;margin-top:clamp(20px,2.4vw,26px);
}
.sec-foot p{flex:1 1 300px;font-family:var(--mono);font-size:clamp(11px,1vw,11.5px);letter-spacing:.07em;color:var(--dim);line-height:1.5}
.sec-foot p b{color:var(--muted);font-weight:500}

/* ================================================================
   HERO
   ================================================================ */
.hero{padding-top:calc(var(--nav-h) + 28px);position:relative;overflow:hidden}
.hero-grid-layout{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr));
  gap:clamp(24px,3.6vw,52px);align-items:center;
  padding-bottom:clamp(24px,3.4vw,40px);
}
.hero-copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px);min-width:0}
.eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber)}
.eyebrow span{width:6px;height:6px;background:var(--amber);flex-shrink:0}
.hero h1{font-size:clamp(40px,6.6vw,64px);line-height:1.02;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero-lead{font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:var(--muted);max-width:500px}
.hero-lead strong{color:var(--ink);font-weight:600}
.hero-rule{height:1px;background:var(--line)}
.hero-buy{display:flex;align-items:flex-end;gap:clamp(18px,3vw,32px);flex-wrap:wrap}
.price-wrap{display:flex;flex-direction:column;gap:7px}
.price-anchor{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.price{font-family:var(--mono);font-size:clamp(34px,5vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.price span{font-size:13px;color:var(--dim);margin-left:8px;letter-spacing:0}
.price-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--amber)}
.trust{display:flex;gap:clamp(12px,2vw,22px);flex-wrap:wrap}
.trust span{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--dim)}
.trust svg{width:12px;height:12px;color:var(--acid);flex-shrink:0}

/* foto acotada */
.hero-figure{position:relative;min-width:0}
.dim-box{position:relative;padding:44px 12px 28px 48px}
.dim-box img{width:100%;height:auto;border:1px solid var(--line)}

/* cotas en HTML, no en SVG: el texto de una cota no se puede deformar, y un
   viewBox escalado a un contenedor fluido siempre lo estira. Las líneas se
   estiran solas con flex y la tipografía queda nítida a cualquier ancho. */
.dim{position:absolute;display:flex;align-items:center;gap:10px;pointer-events:none;z-index:2}
.dim i{flex:1;position:relative;background:var(--acid);opacity:.92}
.dim span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acid);white-space:nowrap;line-height:1}
.dim i:before,.dim i:last-child:after{content:'';position:absolute;width:0;height:0;border:4px solid transparent}
.dim:before,.dim:after{content:'';position:absolute;background:var(--acid);opacity:.92}

/* cota horizontal, arriba de la foto */
.dim-h{left:48px;right:12px;top:24px;height:1px}
.dim-h i{height:1px}
.dim-h i:first-child:before{left:0;top:50%;transform:translateY(-50%);border-right-color:var(--acid);border-left-width:0}
.dim-h i:last-child:before{display:none}
.dim-h i:last-child:after{right:0;top:50%;transform:translateY(-50%);border-left-color:var(--acid);border-right-width:0}
.dim-h:before,.dim-h:after{width:1px;height:22px;top:-2px}
.dim-h:before{left:0}
.dim-h:after{right:0}

/* cota vertical, a la izquierda */
.dim-v{left:24px;top:44px;bottom:28px;flex-direction:column;width:1px}
.dim-v i{width:1px}
.dim-v span{writing-mode:vertical-rl;transform:rotate(180deg)}
.dim-v i:first-child:before{top:0;left:50%;transform:translateX(-50%);border-bottom-color:var(--acid);border-top-width:0}
.dim-v i:last-child:before{display:none}
.dim-v i:last-child:after{bottom:0;left:50%;transform:translateX(-50%);border-top-color:var(--acid);border-bottom-width:0}
.dim-v:before,.dim-v:after{width:22px;height:1px;left:-2px}
.dim-v:before{top:0}
.dim-v:after{bottom:0}
.redline-hero{left:56px;bottom:34px;width:180px}
.redline-hero .hand{text-shadow:0 2px 10px rgba(8,11,12,.95),0 0 22px rgba(8,11,12,.9)}
.redline-hero svg{width:110px;height:84px;margin-top:-6px;margin-left:16px}

/* línea de comando + barra de estado */
.cmdline{border-top:1px solid var(--line);background:var(--model-3)}
.cmdline .container{display:flex;align-items:center;gap:10px;height:42px;font-family:var(--mono);font-size:12px;white-space:nowrap;overflow:hidden}
.c-lbl{color:var(--faint)}
.c-cmd{color:var(--acid)}
.c-arg{color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.caret{width:7px;height:14px;background:var(--dim);display:block;flex-shrink:0;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.statusbar{border-top:1px solid var(--line);background:#14181a}
.statusbar .container{display:flex;align-items:stretch;height:34px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--faint);gap:16px}
.vp-tabs{display:flex;gap:2px;flex-grow:1}
.vp-tabs span{padding:0 15px;display:flex;align-items:center}
.vp-tabs .active{background:var(--model-2);color:var(--ink);border-top:1px solid var(--acid)}
.vp-stats{display:flex;align-items:center;gap:16px;white-space:nowrap;overflow:hidden}
.vp-stats b{color:var(--acid);font-weight:400}

/* ================================================================
   01 PROBLEMA — tabla de revisiones
   ================================================================ */
.problema-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,4vw,48px);align-items:stretch}
.problema-photo{position:relative;overflow:hidden;border:1px solid var(--line);min-height:340px}
.problema-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04)}
.problema-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,15,.1),rgba(11,14,15,.74));pointer-events:none}
.redline-problema{left:30px;bottom:34px;width:260px}
.redline-problema .hand{font-size:28px;text-shadow:0 2px 12px rgba(8,11,12,.95)}
.redline-problema svg{width:120px;height:64px;margin-left:120px;margin-top:-4px}

.problema-side{display:flex;flex-direction:column;gap:24px;min-width:0}
.revtable{border:1px solid var(--line)}
.revtable-head,.revtable-row{display:flex;align-items:stretch}
.revtable-head{height:36px;background:#22282a;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--dim)}
.revtable-head span{display:flex;align-items:center}
.revtable-row{border-bottom:1px solid var(--line-2);transition:background .15s}
.revtable-row:last-child{border-bottom:none}
.revtable-row:hover{background:#1c2123}
.rt-rev{width:62px;flex-shrink:0;justify-content:center;text-align:center;display:flex;align-items:center;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--acid);border-right:1px solid var(--line-2)}
.revtable-head .rt-rev{justify-content:center;border-right-color:var(--line);font-size:9px;font-weight:400;color:var(--dim)}
.rt-desc{flex-grow:1;display:flex;align-items:center;padding:16px 18px;font-size:15px;line-height:1.4;color:#d6dcde;min-width:0}
.revtable-head .rt-desc{padding:0 18px;font-size:9px;color:var(--dim)}
/* Los cinco dolores quedan marcados como resueltos: la tabla de
   revisiones de un plano se cierra cuando el problema se corrigio, y esa
   es exactamente la promesa del pack. El verde de estado es el ACI, no
   el de WhatsApp: aca es un dato de la tabla, no un boton. */
.rt-state{width:112px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.09em;
  color:var(--aci-green);border-left:1px solid var(--line-2)}
.revtable-head .rt-state{width:112px;border-left-color:var(--line);color:var(--dim);font-weight:400}

.closing-band{display:flex;align-items:center;gap:18px;border:1px solid #3d3524;background:#1c1710;padding:20px 22px;margin-top:auto}
.closing-band svg{width:22px;height:22px;color:var(--amber);flex-shrink:0}
.closing-band p{font-size:clamp(15px,1.6vw,17px);line-height:1.45}
.closing-band strong{color:var(--amber);font-weight:600}

/* ================================================================
   02 BENEFICIOS
   ================================================================ */
/* La figura es mas alta que la lista, asi que con align-items:start
   quedaba un hueco muerto debajo del ultimo beneficio. Centradas, el
   aire se reparte arriba y abajo y se lee como decision. */
.beneficios-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:clamp(28px,4.5vw,64px);align-items:center}
.benefit-list article{display:flex;gap:20px;padding:28px 0;border-top:1px solid var(--line-2);transition:border-color .16s}
.benefit-list article:hover{border-top-color:var(--acid)}
.benefit-list article:last-child{border-bottom:1px solid var(--line-2)}
.benefit-list b{width:52px;flex-shrink:0;font-family:var(--mono);font-size:clamp(20px,2.2vw,26px);
  font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--amber);padding-top:1px}
.benefit-list h3{font-size:19px;margin-bottom:7px;letter-spacing:-.012em}
.benefit-list p{font-size:14.5px;line-height:1.55;color:var(--muted)}

.benefit-figure{position:relative;padding-top:46px}
.corner-frame{position:relative}
.corner-frame img{width:100%;height:auto;border:1px solid var(--line)}
.corner-frame:before,.corner-frame:after{content:'';position:absolute;width:28px;height:28px;pointer-events:none}
.corner-frame:before{left:-1px;top:-1px;border-left:1.4px solid var(--acid);border-top:1.4px solid var(--acid)}
.corner-frame:after{right:-1px;bottom:-1px;border-right:1.4px solid var(--acid);border-bottom:1.4px solid var(--acid)}
.redline-benef{right:6%;top:-6px;width:230px;display:flex;align-items:flex-start;gap:4px;flex-direction:row-reverse}
.redline-benef .hand{text-align:left}
.redline-benef svg{width:70px;height:56px;flex-shrink:0;margin-top:14px}
.fig-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--dim)}
.fig-meta b{color:var(--acid);font-weight:400}

/* ================================================================
   03 POR DENTRO — el programa, con capas que se apagan de verdad
   ================================================================ */
.viewport-wrap{--marg:0px;position:relative;padding:0 var(--marg) 78px}
@media(min-width:1101px){ .viewport-wrap{--marg:clamp(150px,14vw,196px)} }
.viewport{position:relative;border:1px solid #394346;background:var(--model-2);padding:9px}
.vp-titlebar{display:flex;align-items:stretch;height:30px;background:#22282a;border:1px solid var(--line);border-bottom:none;font-family:var(--mono);font-size:9.5px;overflow:hidden}
.vp-app{display:flex;align-items:center;gap:7px;padding:0 12px;color:var(--dim);border-right:1px solid var(--line);white-space:nowrap}
.vp-app i{width:8px;height:8px;background:var(--acid);display:block}
.vp-tab{display:flex;align-items:center;padding:0 14px;color:var(--faint);border-right:1px solid var(--line);white-space:nowrap}
.vp-tab.active{background:var(--model-3);color:var(--ink)}
.vp-ribbon{display:flex;align-items:center;gap:5px;height:38px;padding:0 10px;background:#1c2124;border:1px solid var(--line);border-bottom:none;overflow:hidden}
.vp-ribbon i{width:22px;height:22px;border:1px solid #333c3f;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.vp-ribbon svg{width:13px;height:13px;color:var(--dim)}

.vp-body{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--model-3);min-height:0}
.vp-panel-head{
  height:26px;flex-shrink:0;display:flex;align-items:center;gap:7px;padding:0 10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--faint);
  border-bottom:1px solid var(--line);
}
.vp-panel-head svg{width:11px;height:11px;color:var(--acid);flex-shrink:0}
.vp-layers{width:190px;flex-shrink:0;border-right:1px solid var(--line);background:#171b1d;display:flex;flex-direction:column}
.vp-layer-list{display:flex;flex-direction:column}
.layer-row{
  display:flex;align-items:center;gap:8px;padding:0 10px;height:32px;flex-shrink:0;
  cursor:pointer;transition:background .12s;border:none;width:100%;text-align:left;
}
.layer-row:hover{background:#242b2d}
.layer-row .dot{width:9px;height:9px;flex-shrink:0;display:block}
.layer-row .nm{flex-grow:1;font-family:var(--mono);font-size:9.5px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.layer-row svg{width:13px;height:13px;flex-shrink:0;color:var(--acid)}
.layer-row.off .dot{background:#3c4446 !important}
.layer-row.off .nm{color:#525b5e}
.layer-row.off svg{color:#4a5457}
.vp-panel-foot{
  margin-top:auto;height:30px;flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 10px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:8px;letter-spacing:.09em;color:var(--faint);
}
.vp-panel-foot span{flex-grow:1}
.vp-panel-foot b{color:var(--acid);font-weight:400}

.vp-canvas{flex-grow:1;position:relative;background:var(--model-4);min-width:0;min-height:300px}
.vp-canvas svg#cadDrawing{position:absolute;inset:0;width:100%;height:100%}
.lyr{transition:opacity .22s var(--ease-quart)}
.lyr.off{opacity:0}
.lyr path,.lyr rect,.lyr circle,.lyr ellipse{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.lyr text{font-family:var(--mono);font-size:11px;stroke:none}
.lyr-muros path,.lyr-muros rect{stroke:var(--aci-white);stroke-width:2.6}
.lyr-muros rect.w-thick{stroke-width:4}
.lyr-camas rect{stroke:var(--aci-yellow)}
.lyr-cocinas rect,.lyr-cocinas circle,.lyr-cocinas ellipse,.lyr-cocinas path{stroke:var(--aci-red)}
.lyr-autos rect,.lyr-autos path{stroke:var(--aci-cyan)}
.lyr-vegetacion circle,.lyr-vegetacion path{stroke:var(--aci-green);stroke-width:1.5}
.lyr-electricidad circle,.lyr-electricidad path{stroke:var(--aci-magenta);stroke-width:1.5}
.lyr-personas circle,.lyr-personas path{stroke:var(--aci-orange);stroke-width:1.5}
.lyr-cotas path{stroke:var(--aci-grey);stroke-width:1}
.lyr-cotas polygon{fill:var(--aci-grey);stroke:none}
.lyr-cotas text{fill:var(--aci-grey);font-size:12px}
.lyr-textos text{fill:var(--dim)}
.ucs-icon{position:absolute;left:12px;bottom:10px;width:26px;height:26px;color:#4a5457;pointer-events:none}

.vp-tree{width:230px;flex-shrink:0;border-left:1px solid var(--line);background:#171b1d;display:flex;flex-direction:column}
.tree-root{display:flex;align-items:center;gap:7px;padding:0 10px;height:26px;margin-top:8px;
  font-family:var(--mono);font-size:9.5px;color:var(--ink)}
.tree-root svg{width:12px;height:12px;color:var(--acid);flex-shrink:0}
.tree-list{padding-bottom:8px}
.tree-row{display:flex;align-items:center;gap:6px;padding:0 10px 0 22px;height:26px;font-family:var(--mono);font-size:9px;color:var(--muted)}
.tree-row svg{width:11px;height:11px;flex-shrink:0}
.tree-row .nm{flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tree-row .k{color:var(--faint)}

.vp-cmd{display:flex;align-items:center;gap:9px;height:30px;padding:0 12px;
  border:1px solid var(--line);border-top:none;background:#0a0d0e;
  font-family:var(--mono);font-size:10px;white-space:nowrap;overflow:hidden}
.vp-status{display:flex;align-items:stretch;height:24px;border:1px solid var(--line);border-top:none;background:#14181a;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--faint)}
.vp-status span{padding:0 12px;display:flex;align-items:center;white-space:nowrap}
.vp-status .active{background:var(--model-2);color:var(--ink);border-top:1px solid var(--acid)}
.vp-status i{flex-grow:1}

/* el pie del monitor: cuello + base. Sin esto el marco flota y no se lee
   como un monitor, que es justamente lo que la sección promete. Sólido y
   sin halos: un resplandor detrás lo desdibuja y parece una mancha. */
.monitor-stand{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;z-index:1}
.monitor-stand i{
  width:132px;height:34px;
  background:linear-gradient(90deg,#232a2c,#454e51 46%,#394245 58%,#1e2426);
  clip-path:polygon(14% 0,86% 0,100% 100%,0 100%);
}
.monitor-stand b{
  width:330px;height:13px;border-radius:2px 2px 5px 5px;
  background:linear-gradient(180deg,#525c60,#394245 38%,#222829);
  box-shadow:0 12px 24px rgba(0,0,0,.6);
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
}

.redline-capas{left:calc(-1 * var(--marg));top:14%;width:calc(var(--marg) - 24px);text-align:right}
.redline-capas svg{width:110px;height:70px;margin-left:auto;margin-top:2px}
.redline-tree{right:calc(-1 * var(--marg));top:6%;width:calc(var(--marg) - 24px)}
.redline-tree svg{width:110px;height:70px;margin-top:2px}
/* cada flecha apunta a algo distinto: capas, carpetas y el plano. La de
   bloques tiene que cruzar el panel de carpetas para llegar al dibujo,
   por eso es la más larga. */
.redline-bloques{right:calc(-1 * var(--marg));top:56%;width:calc(var(--marg) - 24px)}
.redline-bloques svg{width:192px;height:76px;margin-top:4px;margin-left:-6px}

/* ================================================================
   04 VISTA PREVIA — galería de proyectos
   ================================================================ */
.filter-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.chips{justify-content:flex-start}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;
  border:1px solid var(--line);color:var(--dim);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.chip:hover{color:var(--ink);border-color:#4a5457}
.chip .dot{width:6px;height:6px;display:block;flex-shrink:0}
.chip b{font-weight:600;color:var(--muted)}
.chip.active{background:var(--acid);border-color:var(--acid);color:var(--bg)}
.chip.active b{color:var(--bg)}
.chip.active .dot{background:var(--bg) !important}
.redline-filtro{position:static;display:flex;align-items:center;gap:8px}
.redline-filtro svg{width:34px;height:22px;flex-shrink:0}
.redline-filtro .hand{font-size:24px}

/* ---- páginas reales del pack, arriba de las tarjetas de tipo ----
   Van sobre fondo claro porque son láminas: en model space, un dibujo
   negro sobre blanco no se lee. Es el mismo criterio del paper space. */
.reales{margin-bottom:clamp(24px,3vw,36px)}
.reales-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.reales-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--acid)}
.reales-sep{flex-grow:1;height:1px;background:var(--line)}
.reales-nota{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--faint)}
/* Tres imágenes en una grilla: apiladas en teléfono, 2+1 en tablet con la
   tercera centrada debajo, y las 3 en fila en escritorio. auto-fit dejaba
   la tercera pegada a la izquierda cuando caían dos columnas, que es
   justamente lo que se ve mal. */
.reales-grid{--g:clamp(10px,1.4vw,16px);display:grid;grid-template-columns:1fr;gap:var(--g)}
@media(min-width:600px){
  .reales-grid{grid-template-columns:1fr 1fr}
  .reales-grid .real:nth-child(3):last-child{
    grid-column:1/-1;justify-self:center;width:calc(50% - var(--g)/2);
  }
}
@media(min-width:960px){
  .reales-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reales-grid .real:nth-child(3):last-child{grid-column:auto;justify-self:stretch;width:auto}
}
.real{margin:0;background:#f4f3ef;border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .2s var(--ease-quart),box-shadow .2s var(--ease-quart),border-color .2s}
.real:hover{transform:translateY(-3px);border-color:var(--acid);box-shadow:0 14px 34px rgba(0,0,0,.4)}
/* contain y no cover: el recuadro muestra el plano ENTERO, y lo que sobra
   queda en blanco, que en una lamina se lee como margen de hoja.
   height:auto es imprescindible: sin eso el atributo height="" del HTML
   fija la altura y el aspect-ratio se ignora, que fue lo que paso.
   Recuadro cuadrado porque los tres planos tienen proporciones distintas
   (dos verticales, uno horizontal) y asi los tres entran grandes. */
.real img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  display:block;background:#fff;padding:12px}
.real figcaption{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;color:#5a615d;
  padding:9px 11px;border-top:1px solid #d8d5cd;background:#eceae4}
.redline-reales{position:static;display:flex;align-items:flex-start;gap:10px;margin-top:14px;justify-content:center}
.redline-reales svg{width:80px;height:46px;flex:none}
.redline-reales .hand{font-size:23px}

/* ---- galería: una tarjeta por tipo de proyecto ---- */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr));gap:clamp(10px,1.2vw,18px)}
.type-card{position:relative;background:var(--model-2);border:1px solid var(--line-2);display:flex;flex-direction:column;transition:.18s}
.type-card:hover{border-color:var(--acid);background:#1e2427;transform:translateY(-2px)}
.type-card:before,.type-card:after{content:'';position:absolute;width:5px;height:5px;background:var(--acid);opacity:0;transition:opacity .18s}
.type-card:before{left:-3px;top:-3px}
.type-card:after{right:-3px;bottom:-3px}
.type-card:hover:before,.type-card:hover:after{opacity:1}
.type-card.is-hidden{display:none}

.type-thumb{position:relative;background:var(--model-4);padding:12px 12px 8px;border-bottom:1px solid var(--line-2)}
.type-thumb svg{width:100%;height:auto;display:block}
.type-thumb text{font-family:var(--mono)}
.type-count{
  position:absolute;right:12px;top:10px;
  font-family:var(--mono);font-size:clamp(20px,2.4vw,26px);font-weight:600;
  color:var(--ink);opacity:.16;letter-spacing:-.04em;line-height:1;
}
.type-meta{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px}
.type-meta h3{font-size:clamp(13px,1.3vw,14.5px);font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.type-lote{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;color:var(--dim)}
.type-file{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--faint)}
.type-file i{width:5px;height:5px;flex:none;display:block}

/* ================================================================
   05 PREGUNTAS — notas generales
   ================================================================ */
.notes-block{border:1px solid var(--line);background:var(--model-2)}
.notes-head{display:flex;align-items:center;gap:10px;height:38px;padding:0 20px;background:#22282a;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#c8cfd1}
.notes-head svg{width:13px;height:13px;color:var(--acid);flex-shrink:0}
.notes-head i{flex-grow:1}
.notes-head span{color:var(--faint)}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.notes-col{display:flex;flex-direction:column}
.notes-col:first-child{border-right:1px solid var(--line-3)}
.note{border-bottom:1px solid var(--line-3);transition:background .15s}
.note:hover{background:#1c2123}
/* La pregunta que mas llega no puede parecer una mas de la lista. */
.note-hi{background:#1b2022;border-left:2px solid var(--amber)}
.note-hi .n{color:var(--amber)}
.note summary{display:flex;gap:16px;padding:20px;cursor:pointer;list-style:none;align-items:flex-start}
.note summary::-webkit-details-marker{display:none}
.note .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--amber);flex-shrink:0;padding-top:2px}
.note h3{flex-grow:1;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink);line-height:1.35}
.note-ic{width:12px;height:12px;flex-shrink:0;position:relative;margin-top:3px}
.note-ic:before,.note-ic:after{content:'';position:absolute;background:var(--dim);transition:transform .22s var(--ease-quart)}
.note-ic:before{left:0;top:5.5px;width:12px;height:1.4px}
.note-ic:after{left:5.5px;top:0;width:1.4px;height:12px}
.note[open] .note-ic:after{transform:scaleY(0)}
.note>p{padding:0 20px 20px 52px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.notes-cta{margin-top:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 20px;background:#14181a;border-top:1px solid var(--line-3)}
.notes-cta>div{flex:1 1 180px;display:flex;flex-direction:column;gap:6px}
.notes-cta strong{font-size:16px;font-weight:600;color:var(--amber)}
.notes-cta span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim)}
.redline-faq{display:flex;align-items:flex-end;gap:12px;position:static;flex:0 1 400px}
.redline-faq svg{width:40px;height:27px;flex-shrink:0;margin-bottom:6px}
.redline-faq .hand{font-size:27px}

/* ================================================================
   06 CONFIANZA — WhatsApp
   ================================================================ */
.chat-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.chat-head i{height:1px;background:var(--line);flex-grow:1;min-width:20px}

.chat-head-r{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--dim)}
.chat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.chat{background:var(--model-3);border:1px solid var(--line-2);padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px}
.chat-who{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim)}
.chat-who .avatar{width:22px;height:22px;border-radius:50%;background:var(--line);color:#c8cfd1;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}
.chat-who b{font-weight:400;color:var(--muted)}
/* La etiqueta va al final de la fila para que el nombre y la captura
   queden juntos: primero quien lo dijo, despues la prueba. */
.chat-badge{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  color:var(--amber);border:1px solid var(--line);padding:3px 7px;white-space:nowrap}

/* La frase que hay que leer aunque nadie amplie la captura. */
.chat-pull{margin:0;padding-left:14px;border-left:2px solid var(--amber);
  font-size:clamp(15px,1.5vw,17px);line-height:1.5;color:var(--ink);text-wrap:pretty}

/* La captura entra con ancho de telefono y centrada: a ancho completo
   de columna se vuelve una pared de 900 px de alto. */
.chat-shot{margin:0;display:flex;justify-content:center}
.chat-shot img{display:block;width:100%;max-width:330px;height:auto;
  border:1px solid var(--line);border-radius:10px}
.chat-note{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);line-height:1.55}

/* ================================================================
   07 LA HOJA — PAPER SPACE (única transición a claro)
   ================================================================ */
.sheet-section{padding-top:clamp(20px,3vw,32px)}
.sheet{position:relative;background:var(--paper);color:var(--paper-ink);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.sheet-frame{position:absolute;left:14px;top:14px;right:14px;bottom:14px;border:1px solid var(--paper-line);pointer-events:none}
.sheet-frame.inner{left:20px;top:20px;right:20px;bottom:20px;border-color:var(--paper-line-2)}
/* la hoja ahora apila: encabezado, los dos packs, el gancho y el pie.
   Las columnas las arma .packs por dentro, no la hoja. */
.sheet-body{position:relative;display:flex;flex-direction:column;
  padding:clamp(32px,4.5vw,50px) clamp(28px,4vw,56px)}
.sheet .section-number{color:var(--paper-amber)}
.sheet .section-number>span:first-child{background:var(--paper-amber)}
.sheet h2{font-size:clamp(28px,4vw,44px);line-height:1.06}
.sheet h2 span{color:var(--paper-amber)}

.compare{position:relative;display:flex;border:1px solid var(--paper-line);flex-wrap:wrap}
.compare-cell{flex:1 1 200px;padding:18px 20px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--paper-line)}
.compare-cell:last-of-type{border-right:none}
.compare-cell.hi{background:var(--paper-2)}
.cc-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--paper-muted)}
.compare-cell.hi .cc-lbl{color:var(--paper-acid)}
.cc-val{font-family:var(--mono);font-size:clamp(19px,2.2vw,24px);font-weight:600;color:var(--paper-ink)}
.cc-val.muted{color:#7d827e;font-weight:500}
.cc-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--paper-muted)}
.compare-cell.hi .cc-sub{color:#5a615d}
.compare-tag{position:absolute;left:50%;top:-16px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  background:var(--paper);padding:0 10px;white-space:nowrap}
.compare-tag .hand{font-size:27px;color:var(--paper-amber)}
.compare-tag svg{width:22px;height:18px;flex-shrink:0;overflow:visible}
.compare-tag svg path{fill:none;stroke:var(--paper-amber);stroke-width:2;stroke-linecap:round}
.compare-tag svg polygon{fill:var(--paper-amber)}
.compare-src{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--paper-muted);line-height:1.5}

.incluye{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:13px 28px}
.incluye li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.4;color:#2c3330}
.incluye li:before{
  content:'';position:absolute;left:0;top:3px;width:15px;height:15px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5400' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.pricecard{border:1px solid var(--paper-ink)}
.pricecard-head{height:34px;display:flex;align-items:center;padding:0 16px;background:var(--paper-ink);color:var(--paper);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.pricecard-body{padding:28px 24px 26px;display:flex;flex-direction:column;gap:20px}
.final-price{font-family:var(--mono);font-size:clamp(38px,5vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1}
.final-price span{font-size:14px;color:var(--paper-muted);margin-left:8px;letter-spacing:0}
.final-note{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:var(--paper-amber)}
.pricecard .primary-btn{width:100%}
.guarantees{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--paper-line-2);padding-top:16px}
.guarantees span{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:#5a615d}
.guarantees svg{width:13px;height:13px;color:var(--paper-amber);flex-shrink:0}

/* ================================================================
   CIERRE — cajetín
   ================================================================ */
.footer{padding:clamp(30px,4vw,48px) 0 clamp(20px,3vw,32px);position:relative}
.last-call{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  border:1px solid var(--line);background:var(--model-2);padding:clamp(20px,3vw,26px) clamp(20px,3vw,32px);margin-bottom:26px}
.last-call>div{flex:1 1 340px;display:flex;flex-direction:column;gap:8px}
.last-call h2{font-size:clamp(21px,2.6vw,28px);line-height:1.15}
.last-call h2 span{color:var(--amber)}
.last-call p{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim);line-height:1.55}

/* El cajetín es una grilla de celdas iguales, no un rompecabezas de anchos
   fijos. auto-fit reparte las que entren en cada ancho y la marca siempre
   ocupa la fila completa arriba. Las líneas del cuadro son el gap de 1px
   dejando ver el fondo: así nunca sobra ni falta un borde, sin importar
   cuántas columnas queden. */
/* Las celdas son OCHO, siempre. auto-fit dejaba huecos grises cuando la
   ultima fila quedaba corta, asi que fijo conteos que dividen 8 exacto:
   2 / 4 / 8. Nunca sobra ni falta una celda, a ningun ancho. */
.titleblock{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--paper-line);
  border:2px solid var(--paper-ink);
  color:var(--paper-ink);
}
@media(min-width:640px){ .titleblock{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(min-width:1280px){ .titleblock{grid-template-columns:repeat(8,minmax(0,1fr))} }
.tb-brand{
  grid-column:1/-1;background:var(--paper);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px 22px;flex-wrap:wrap;
  padding:16px clamp(16px,2vw,22px);
}
.tb-brand strong{font-family:var(--mono);font-size:clamp(15px,2vw,19px);font-weight:600;letter-spacing:.02em}
.tb-brand strong i{font-style:normal;color:var(--paper-acid)}
.tb-brand strong span{color:var(--paper-muted);font-weight:400}
.tb-brand>span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--paper-muted)}
.tb-cell{
  background:var(--paper);min-width:0;
  padding:12px clamp(12px,1.4vw,18px);
  display:flex;flex-direction:column;gap:4px;justify-content:center;
}
.tb-cell.hi{background:var(--paper-2)}
.tb-cell span{font-family:var(--mono);font-size:8px;letter-spacing:.13em;color:var(--paper-muted)}
.tb-cell b{font-family:var(--mono);font-size:clamp(11px,1.1vw,12.5px);font-weight:500;overflow-wrap:anywhere}
.tb-cell.hi b{font-size:clamp(15px,1.6vw,19px);font-weight:600;letter-spacing:-.01em}

.foot-legal{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;margin-top:24px;padding-bottom:6px}
.foot-legal nav{display:flex;gap:12px 22px;flex-wrap:wrap;flex-grow:1}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.foot-legal a:hover{color:var(--ink)}
.foot-legal>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--faint)}

/* ================================================================
   REVEALS
   ================================================================ */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal="scale"]{transform:scale(.975)}
[data-reveal].in{opacity:1;transform:none}
[data-hero-in]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)}
body.ready [data-hero-in]{opacity:1;transform:none}
body.ready [data-hero-in="1"]{transition-delay:.06s}
body.ready [data-hero-in="2"]{transition-delay:.12s}
body.ready [data-hero-in="3"]{transition-delay:.18s}
body.ready [data-hero-in="4"]{transition-delay:.24s}
body.ready [data-hero-in="5"]{transition-delay:.3s}
body.ready [data-hero-in="6"]{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-reveal],[data-hero-in]{opacity:1 !important;transform:none !important}
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1200px){
  .viewport-wrap{padding:0}
  .vp-layers{width:168px}
  .vp-tree{width:200px}
}

@media(max-width:1000px){
  .hero-figure{max-width:640px}
  /* aspect-ratio + min-height se pelean: el min-height le impone un ancho
     por la proporción y el bloque desborda. El ancho manda, la altura sale
     de la proporción. */
  .problema-photo{min-height:0;width:100%;aspect-ratio:16/10}
  .benefit-figure{padding-top:34px;max-width:640px}
  .notes-col:first-child{border-right:none}
  .redline-benef{right:0;top:-10px}
}

@media(max-width:860px){
  .nav-links{display:none}
  .nav{gap:12px}
  .brand{flex-grow:1}
  .statusbar .container{gap:10px}
  .vp-stats{display:none}

  /* el programa se descompone: se cae el marco, las partes se apilan y el
     PLANO va primero — es la demo. Los controles vienen después, como en
     cualquier app móvil: primero lo que mirás, después lo que tocás. */
  .viewport{position:static;border:none;padding:0;background:transparent;display:flex;flex-direction:column}
  .vp-ribbon{display:none}
  .vp-titlebar .vp-tab:not(.active){display:none}
  /* display:contents disuelve .vp-body: sus hijos pasan a ser hijos directos
     de .viewport, y recien ahi se pueden ordenar entre el resto. Sin esto el
     pie del monitor no puede quedar entre la pantalla y los controles. */
  .vp-body{display:contents}
  .vp-titlebar{order:1;border-color:#394346}
  .vp-canvas{order:2;border:1px solid #394346;border-top:none;min-height:0;aspect-ratio:4/3;background:var(--model-4)}
  .vp-cmd{order:3;border-color:#394346}
  .monitor-stand{order:5;position:static;transform:none}
  .monitor-stand i{width:88px;height:24px}
  .monitor-stand b{width:214px;height:10px}
  .vp-layers{order:7;width:100%;border-right:none;border:none;background:transparent;margin-top:22px}
  .vp-tree{order:9}
  .vp-layers .vp-panel-head{border-bottom:none;padding:0;height:auto;margin-bottom:10px}
  .vp-layer-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .layer-row{height:46px;border:1px solid var(--line);background:var(--model-2);padding:0 10px}
  .vp-panel-foot{border-top:none;padding:0;margin-top:12px;height:auto}
  .vp-tree{width:100%;border-left:none;background:transparent;margin-top:20px}
  .vp-tree .vp-panel-head{border-bottom:none;padding:0;height:auto;margin-bottom:10px}
  .tree-root{padding:0;margin:0 0 10px;height:auto}
  .tree-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0}
  .tree-row{height:32px;padding:0 9px;background:var(--model-2);border:1px solid var(--line-2);font-size:8.5px}
  /* pegada a la pantalla: es parte del monitor, no una caja aparte */
  .vp-cmd{margin-top:0;border-top:none}
  .vp-status{display:none}
}

@media(max-width:760px){

  /* la barra fija mide ~73px, pero en iOS el indicador de inicio y la
     barra de Safari comen mas: sin este colchon el pie queda tapado. */
  .foot-legal{padding-bottom:8px}
  .sec-foot .cta-par,.notes-cta .primary-btn{width:100%}
  /* los chips de tipo, centrados: al envolverse en varias filas la ultima
     quedaba descolgada a la izquierda */
  .filter-row{justify-content:center}
  .chips{justify-content:center}
  .redline-filtro{justify-content:center}
  /* la barra se mantiene en una fila: precio a la izquierda, botones a la
     derecha. Apilarla dejaba el precio encima de los botones y ocupaba el
     doble de alto en la pantalla mas chica. */
  .buy-bar{gap:12px;padding-left:14px;padding-right:14px}
  .bb-info{gap:2px}
  .bb-tag{font-size:7.5px;letter-spacing:.1em}
  .bb-precio b{font-size:19px}
  .bb-precio{gap:5px}
  .bb-acciones{gap:7px}
  .bb-buy{padding:0 12px;font-size:11.5px;gap:7px}
  .bb-wa{padding:0;width:52px;flex:none}
  .bb-wa span{display:none}
  .upsell .hand{display:none}
  .hero-buy{gap:18px}
  /* los dos botones van UNO AL LADO DEL OTRO, no apilados: apilados se
     comen media pantalla del telefono antes de mostrar nada del producto */
  .hero-buy .cta-par{width:100%}
  .cta-par{gap:8px;flex-wrap:nowrap}
  .cta-par .primary-btn{flex:1 1 0;min-width:0;padding-left:10px;padding-right:10px;
    font-size:11.5px;gap:8px;letter-spacing:.04em}
  .cta-par .primary-btn svg{width:16px;height:16px}
  .cta-par .lbl-lg{display:none}
  .cta-par .lbl-sm{display:inline}
  .rt-desc{padding:14px;font-size:14px}
  /* ancho FIJO tambien en pantalla angosta: con width:auto cada celda se
     ajustaba a su texto y "ESTADO" (6 letras) no medía lo mismo que
     "SOLUCIONADO" (11), asi que la linea divisoria saltaba entre el
     encabezado y las filas. */
  .rt-state,.revtable-head .rt-state{width:88px;padding:0 6px;font-size:8px}
}

@media(max-width:430px){
  .bb-precio s{display:none}
  .bb-precio i{display:none}
}

@media(max-width:400px){
  /* mas vale un boton de dos lineas que scroll lateral */
  .primary-btn,.bb-buy,.pack-btn{white-space:normal;text-align:center;line-height:1.3;padding-top:12px;padding-bottom:12px}
}

@media(max-width:560px){
  .dim-box{padding:34px 4px 20px 34px}
  .dim-text{font-size:14px}
  .redline-problema{left:18px;bottom:20px;width:200px}
  .redline-problema .hand{font-size:22px}
  .note summary{padding:16px;gap:12px}
  .note>p{padding:0 16px 16px 42px}
  .trust{gap:8px 16px}
  .foot-legal nav{gap:16px}
}

/* ================================================================
   PUNTERO GRUESO — un iPad es tactil aunque tenga 1024px de ancho, asi
   que el tamano del objetivo no puede depender del ancho de pantalla
   sino de con que se toca. 44px es el minimo recomendado.
   ================================================================ */
@media (pointer: coarse){
  .layer-row{height:44px}
  .tree-row{height:34px}
  .note summary{padding-top:22px;padding-bottom:22px}
}

/* ================================================================
   NOTAS A MANO EN PANTALLA ANGOSTA
   En escritorio viven en los margenes, apuntando de costado. Debajo de
   1100px no hay margenes: pasan al flujo, justo DESPUES de lo que
   comentan, y la flecha de cada una se reemplaza por una sola flecha
   que apunta hacia arriba — hacia el elemento que acaban de dejar atras.
   Esconderlas, que es lo que hacian antes, borraba la voz de la marca
   justo donde mas gente entra.
   ================================================================ */
@media(max-width:1100px){
  .redline{
    position:static;display:flex;align-items:flex-start;gap:10px;
    width:auto;max-width:none;text-align:left;margin:12px 0 0;
  }
  .redline svg{display:none}
  .redline:before{
    content:'';flex:none;width:36px;height:29px;margin-top:3px;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M37 29 C 25 27, 12 20, 6 8' fill='none' stroke='%23ff9f0a' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpolygon points='4,2 14,11 2,14' fill='%23ff9f0a'/%3E%3C/svg%3E");
  }
  .redline .hand{font-size:23px;line-height:1.12}

  /* Cada nota va DESPUES del bloque que comenta, nunca en medio: antes la
     de bloques se metia entre la pantalla y la linea de comando y partia el
     monitor en dos. Orden real: pantalla(2) comando(3) base(5) nota(6)
     capas(7) nota(8) carpetas(9) nota(10). */
  .redline-bloques{order:6;padding:0 2px;margin-top:16px}
  .redline-capas{order:8;padding:0 2px;margin-top:18px}
  .redline-tree{order:10;padding:0 2px;margin-top:18px}

  /* Las que cuelgan de un bloque de ancho completo van centradas: alineadas
     a la izquierda quedaban descolgadas contra una grilla que ocupa todo. */
  .redline-hero,.redline-bloques,.redline-capas,.redline-tree,.redline-filtro{
    justify-content:center;
  }
  /* el chip de filtro necesita su propia linea para poder centrarse */
  .redline-filtro{flex:1 0 100%;margin-top:14px}

  /* estas dos ya estaban en el flujo: solo se alinean con el resto */
  .redline-filtro,.redline-faq{margin-top:10px}
  .redline-filtro .hand,.redline-faq .hand{font-size:23px}

  /* la del problema se queda encima de la foto: ahi se lee bien y el
     degradado le da contraste. La del hero baja al flujo, debajo de la
     imagen, para no taparla. */
  .redline-problema{position:absolute;display:block;margin:0}
  .redline-problema:before{display:none}
  .redline-problema svg{display:block}
}

@media(max-width:760px){
  .redline-problema{left:18px;bottom:22px;width:210px}
  .redline-problema .hand{font-size:22px}
  .redline-problema svg{width:86px;height:46px;margin:0 0 0 96px}
}

/* ================================================================
   BOTONES: COMPRAR + WHATSAPP
   Son dos acciones distintas, no una principal y una secundaria: una
   compra, la otra pregunta. Por eso van los dos sólidos, cada uno con
   su color. Ámbar es la marca (comprar); verde es WhatsApp.
   ================================================================ */
.cta-par{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
/* cada boton lleva dos etiquetas: la larga para escritorio y una corta
   para que los dos entren en una sola fila en el telefono */
.lbl-sm{display:none}
.cta-par .primary-btn{flex:1 1 auto}
.buy-btn{background:var(--acid);color:#171003}
.buy-btn:hover{color:#171003}
.buy-btn svg{width:17px;height:17px}

/* ================================================================
   07 — LOS DOS PACKS
   ================================================================ */
.sheet-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(22px,3vw,30px)}
.sheet-lead{font-size:15px;line-height:1.6;color:#4a534f;max-width:640px}

.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2.2vw,26px);align-items:start}

/* El pack básico es una hoja más: fina, clara, correcta.
   El completo es un bloque de model space apoyado sobre el papel — se
   invierte el contraste de toda la sección para que la vista caiga ahí
   sola, sin necesidad de gritarlo con una flecha. */
.pack{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--paper-line);background:var(--paper);transition:transform .2s var(--ease-quart),box-shadow .2s var(--ease-quart)}
.pack:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,24,26,.14)}

.pack.destacado{
  background:var(--paper-ink);color:var(--paper);border:none;
  box-shadow:0 18px 44px rgba(20,24,26,.34);
  padding-top:clamp(26px,3vw,34px);
}
.pack.destacado:hover{box-shadow:0 22px 52px rgba(20,24,26,.42)}

.pack-flag{
  position:absolute;top:0;left:0;right:0;
  background:var(--acid);color:#171003;text-align:center;
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.13em;padding:6px 10px;
}
.pack-head{display:flex;flex-direction:column;gap:8px}
.pack-tag{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--paper-muted)}
.pack.destacado .pack-tag{color:var(--acid)}
.pack-price{display:flex;align-items:baseline;gap:7px}
.pack-price strong{font-family:var(--mono);font-size:clamp(32px,4.4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1}
.pack-price small{font-family:var(--mono);font-size:12px;color:var(--paper-muted)}
.pack.destacado .pack-price small{color:var(--dim)}

/* barras: el volumen de cada pack, medido contra el completo */
.pack-bars{display:flex;flex-direction:column;gap:9px;padding:14px 0;border-top:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2)}
.pack.destacado .pack-bars{border-color:#2b3134}
.pb{display:flex;align-items:center;gap:10px}
.pb-lbl{width:74px;flex:none;font-family:var(--mono);font-size:8px;letter-spacing:.11em;color:var(--paper-muted)}
.pack.destacado .pb-lbl{color:var(--dim)}
.pb-track{flex-grow:1;height:7px;background:#d9d6ce;position:relative;overflow:hidden}
.pack.destacado .pb-track{background:#2b3134}
.pb-track i{position:absolute;left:0;top:0;bottom:0;background:#a9a69d;display:block}
.pack.destacado .pb-track i{background:var(--acid)}
.pb b{width:66px;flex:none;padding-left:8px;text-align:right;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--paper-ink);white-space:nowrap}
.pack.destacado .pb b{color:var(--paper)}

.pack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex-grow:1}
.pack-list li{position:relative;padding-left:24px;font-size:14px;line-height:1.4;color:#2c3330}
.pack.destacado .pack-list li{color:#d3d8d5}
.pack-list li b{font-weight:600}
.pack.destacado .pack-list li b{color:#fff}
.pack-list li:before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;font-weight:600}
.pack-list li.si:before{content:'✓';color:var(--paper-acid)}
.pack.destacado .pack-list li.si:before{color:var(--acid)}
/* lo que el basico NO trae va tachado: se lee de un vistazo que falta,
   sin tener que comparar las dos listas linea por linea */
.pack-list li.no{color:#5f655f;text-decoration:line-through;text-decoration-color:#a8a49a;
  text-decoration-thickness:1.5px;text-underline-offset:2px}
.pack-list li.no:before{content:'×';color:#8a8f88}

.pack-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  background:transparent;color:var(--paper-ink);border:1.6px solid var(--paper-ink);transition:.16s}
.pack-btn svg{width:17px;height:17px;flex:none}
.pack-btn:hover{background:var(--paper-ink);color:var(--paper)}
.pack-btn.hi{background:var(--acid);border-color:var(--acid);color:#171003}
.pack-btn.hi:hover{filter:brightness(1.08);background:var(--acid);color:#171003}

/* el gancho: la diferencia de precio, dicha en grande */
.upsell{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);flex-wrap:wrap;
  margin-top:clamp(18px,2.4vw,26px);padding:clamp(18px,2.2vw,24px);
  border:1.6px dashed var(--paper-acid);background:rgba(138,84,0,.06)}
.upsell-num{font-family:var(--mono);font-size:clamp(30px,4vw,44px);font-weight:600;
  letter-spacing:-.04em;color:var(--paper-acid);line-height:1;flex:none}
.upsell p{flex:1 1 300px;font-size:15px;line-height:1.5;color:#2c3330}
.upsell p strong{font-weight:600;color:var(--paper-ink)}
.upsell .hand{flex:none;font-size:25px;color:var(--paper-acid);text-align:right}

.sheet-foot{display:flex;align-items:flex-start;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(20px,2.6vw,28px);padding-top:20px;border-top:1px solid var(--paper-line-2)}
.sheet-foot .guarantees{flex:1 1 320px;border-top:none;padding-top:0}
.sheet-foot .compare-src{flex:1 1 260px}

/* ================================================================
   BARRA FIJA DE COMPRA — desde la sección 01 y en todos los tamaños
   ================================================================ */
.buy-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  padding:10px clamp(14px,3vw,40px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(18,21,22,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(115%);transition:transform .34s var(--ease-quart);
}
.buy-bar.show{transform:translateY(0)}

.bb-info{display:flex;flex-direction:column;gap:3px;flex:none;min-width:0}
.bb-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;color:var(--acid);white-space:nowrap}
.bb-precio{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.bb-precio b{font-family:var(--mono);font-size:clamp(19px,2.2vw,24px);font-weight:600;letter-spacing:-.03em}
.bb-precio i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim)}
.bb-precio s{font-family:var(--mono);font-size:10px;color:var(--faint);text-decoration:line-through}
.bb-acciones{display:flex;align-items:stretch;gap:9px;flex-grow:1;justify-content:flex-end}
.bb-buy,.bb-wa{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:0 clamp(16px,2.4vw,28px);transition:filter .16s;white-space:nowrap}
.bb-buy svg,.bb-wa svg{width:17px;height:17px;flex:none}
.bb-buy{background:var(--acid);color:#171003;flex:1 1 auto;max-width:420px}
.bb-buy:hover{filter:brightness(1.07);color:#171003}
.bb-wa{background:var(--wa);color:var(--wa-ink);flex:none}
.bb-wa:hover{filter:brightness(1.07);color:var(--wa-ink)}

/* ================================================================
   BOTONES CON VIDA
   Tres capas, de menos a más notoria:
   1. GRIPS en las esquinas al pasar el mouse — los cuadraditos de
      selección de AutoCAD, el mismo gesto que ya usan las tarjetas.
      Es lo que hace que el botón se sienta "seleccionable".
   2. DESTELLO que barre el botón una vez, como el brillo de un
      objeto resaltado. Solo al pasar por encima, nunca en bucle.
   3. LATIDO en el botón de compra de la barra fija: un halo que
      respira lento. Ese es el único que se mueve solo, porque es el
      que tiene que llamar cuando el resto de la página está quieta.
   Todo se apaga con prefers-reduced-motion (regla global más abajo).
   ================================================================ */
.primary-btn,.buy-btn,.bb-buy,.bb-wa,.pack-btn,.nav-cta{
  position:relative;overflow:hidden;isolation:isolate;
  transition:filter .16s,transform .18s var(--ease-quart),box-shadow .18s var(--ease-quart);
}

/* --- 1. grips: cuatro cuadraditos en las esquinas --- */
.primary-btn::before,.bb-buy::before,.pack-btn::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .18s;
  background:
    linear-gradient(currentColor,currentColor) left  2px top    2px/5px 5px no-repeat,
    linear-gradient(currentColor,currentColor) right 2px top    2px/5px 5px no-repeat,
    linear-gradient(currentColor,currentColor) left  2px bottom 2px/5px 5px no-repeat,
    linear-gradient(currentColor,currentColor) right 2px bottom 2px/5px 5px no-repeat;
}
.primary-btn:hover::before,.bb-buy:hover::before,.pack-btn:hover::before{opacity:.5}

/* --- 2. destello que barre una vez --- */
.primary-btn::after,.buy-btn::after,.bb-buy::after,.bb-wa::after,.pack-btn::after,.nav-cta::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:42%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.primary-btn:hover::after,.bb-buy:hover::after,.bb-wa:hover::after,
.pack-btn:hover::after,.nav-cta:hover::after{animation:destello .72s var(--ease-quart)}
@keyframes destello{
  from{left:-70%;opacity:1}
  to{left:118%;opacity:1}
}
/* el botón outline del pack básico se aclara con un barrido más tenue */
.pack-btn::after{background:linear-gradient(100deg,transparent,rgba(20,24,26,.10),transparent)}
.pack-btn.hi::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)}

/* --- se levantan al pasar el mouse --- */
.primary-btn:hover,.bb-buy:hover,.pack-btn:hover,.nav-cta:hover{transform:translateY(-2px)}
.buy-btn:hover,.bb-buy:hover{box-shadow:0 8px 22px rgba(255,159,10,.28)}
.primary-btn:not(.buy-btn):hover{box-shadow:0 8px 22px rgba(37,211,102,.26)}
.bb-wa:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(37,211,102,.26)}
.primary-btn:active,.bb-buy:active,.bb-wa:active,.pack-btn:active,.nav-cta:active{
  transform:translateY(0);box-shadow:none
}

/* --- 3. latido del botón de compra de la barra fija --- */
.bb-buy{animation:latido 3s var(--ease-quart) infinite}
.bb-buy:hover{animation-play-state:paused}
@keyframes latido{
  0%   {box-shadow:0 0 0 0 rgba(255,159,10,.5)}
  55%  {box-shadow:0 0 0 13px rgba(255,159,10,0)}
  100% {box-shadow:0 0 0 0 rgba(255,159,10,0)}
}

/* el ícono acompaña el gesto */
.primary-btn svg,.bb-buy svg,.bb-wa svg,.pack-btn svg,.nav-cta svg{
  transition:transform .22s var(--ease-quart)
}
.primary-btn:hover svg,.bb-buy:hover svg,.pack-btn:hover svg,.nav-cta:hover svg{transform:scale(1.12)}
.bb-wa:hover svg{transform:scale(1.12) rotate(-6deg)}



/* ================================================================
   BLOQUES DINAMICOS (04)
   Es la pregunta que mas llega por WhatsApp y, segun las ventas, el
   motivo por el que mucha gente compra. Va con su propio bloque y
   con los agarres dibujados: quien usa AutoCAD reconoce esas puntas
   de flecha antes de leer el texto.

   Los agarres van en AMBAR, no en el cian de AutoCAD: dentro de este
   sistema lo que resalta resalta en ambar, y el cian esta reservado
   a las capas ACI de un plano de verdad.
   ================================================================ */
.dinamicos{margin-top:clamp(28px,4vw,44px);background:var(--model-3);
  border:1px solid var(--line-2)}

.din-head{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.din-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--faint)}
.din-sep{height:1px;background:var(--line);flex-grow:1;min-width:16px}
.din-si{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  color:var(--amber);white-space:nowrap}

.din-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(20px,3vw,36px);padding:clamp(20px,3vw,30px)}

.din-texto h3{font-size:clamp(21px,2.6vw,29px);font-weight:600;letter-spacing:-.02em;
  line-height:1.18;color:var(--ink);margin:0 0 12px}
.din-texto h3 span{color:var(--amber)}
.din-texto p{margin:0 0 10px;font-size:clamp(14px,1.4vw,15.5px);line-height:1.6;
  color:var(--muted);text-wrap:pretty}
.din-p2{color:var(--dim);font-style:italic}

.din-demos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap:12px;align-content:start}
.din-demo{margin:0;background:var(--model-4);border:1px solid var(--line-3);
  padding:10px;display:flex;flex-direction:column;gap:8px}
.din-demo svg{width:100%;height:auto;display:block}
.din-demo .dl{fill:none;stroke:var(--plan-line);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.din-demo .muro{stroke-width:6;stroke-linecap:butt}
.din-demo .muro-f{stroke-width:2;fill:none}
.din-demo .hoja{stroke:var(--aci-white);stroke-width:3;stroke-linecap:butt}
.din-demo .fantasma{stroke:var(--plan-line);stroke-dasharray:5 4;opacity:.65}
.din-demo .arco{stroke:#3a4245;stroke-width:1.5;stroke-dasharray:4 4}
.din-demo .grip{fill:var(--amber);stroke:none}
.din-demo .grip .eje{fill:none;stroke:var(--amber);stroke-width:1.2;stroke-dasharray:4 4}
.din-demo .grip .lista{fill:none;stroke:var(--amber);stroke-width:1.6}
.din-demo .grip .renglon{fill:none;stroke:var(--amber);stroke-width:1.6;
  stroke-linecap:round;opacity:.55}
.din-demo figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  line-height:1.5;color:var(--faint);display:flex;flex-direction:column;gap:3px}
.din-demo figcaption b{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--amber)}

@media(max-width:760px){
  .chat-badge{margin-left:0}
  /* Dos capturas de 600 px seguidas alargan mucho la seccion en el
     telefono. Se angostan en vez de recortarse: el badge dice "sin
     editar" y eso tiene que seguir siendo cierto. */
  .chat-shot img{max-width:285px}
  /* Con dos columnas la tercera tarjeta queda sola y pegada a la
     izquierda; se centra con el ancho de una columna. */
  .din-demos{grid-template-columns:1fr 1fr}
  .din-demo:nth-child(3):last-child{grid-column:1/-1;justify-self:center;
    width:calc(50% - 6px);min-width:150px}
}

/* ================================================================
   FONDO — patrón de grilla del model space. Las variables --grid-*
   las reescribe /api/save-background desde el panel del dock: no
   renombrarlas ni sacarlas de este bloque :root. rgb sueltos (no rgba
   de una) para poder variar solo la opacidad desde JS.
   ================================================================ */
:root{
  --grid-dot-size:16px; --grid-dot-opacity:0.05; --grid-dot-color:107,124,130;
  --grid-major-size:96px; --grid-major-opacity:0.05; --grid-major-color:107,124,130;
}

/* el patrón vive en un pseudo-elemento de cada sección para que quede
   siempre DEBAJO del contenido y no se lleve los clicks. */
.section:before,.hero:before,.footer:before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
}
.section>*,.hero>*,.footer>*{position:relative;z-index:1}

/* patrón "puntos" (default) — grilla mayor + puntos */
body:not(.bg-pattern-lines):not(.bg-pattern-grid):not(.bg-pattern-none) .section:before,
body.bg-pattern-dots .section:before,
body:not(.bg-pattern-lines):not(.bg-pattern-grid):not(.bg-pattern-none) .hero:before,
body.bg-pattern-dots .hero:before,
body:not(.bg-pattern-lines):not(.bg-pattern-grid):not(.bg-pattern-none) .footer:before,
body.bg-pattern-dots .footer:before{
  background-image:
    radial-gradient(rgba(var(--grid-dot-color),var(--grid-dot-opacity)) 1px,transparent 1px),
    linear-gradient(to right,rgba(var(--grid-major-color),var(--grid-major-opacity)) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--grid-major-color),var(--grid-major-opacity)) 1px,transparent 1px);
  background-size:var(--grid-dot-size) var(--grid-dot-size),var(--grid-major-size) var(--grid-major-size),var(--grid-major-size) var(--grid-major-size);
}

/* patrón "líneas" — solo verticales, como un papel de dibujo */
body.bg-pattern-lines .section:before,body.bg-pattern-lines .hero:before,body.bg-pattern-lines .footer:before{
  background-image:linear-gradient(to right,rgba(var(--grid-major-color),var(--grid-major-opacity)) 1px,transparent 1px);
  background-size:var(--grid-major-size) 100%;
}

/* patrón "grilla" — solo la grilla mayor, sin puntos */
body.bg-pattern-grid .section:before,body.bg-pattern-grid .hero:before,body.bg-pattern-grid .footer:before{
  background-image:
    linear-gradient(to right,rgba(var(--grid-major-color),var(--grid-major-opacity)) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--grid-major-color),var(--grid-major-opacity)) 1px,transparent 1px);
  background-size:var(--grid-major-size) var(--grid-major-size);
}

/* patrón apagado */
body.bg-pattern-none .section:before,body.bg-pattern-none .hero:before,body.bg-pattern-none .footer:before{background-image:none}

/* la hoja y el cajetín son paper space: el patrón nunca los pisa */
.sheet,.titleblock{z-index:1}

/* ================================================================
   BOTONES — presets de estilo, aplicados vía clase en <body>. Reusa los
   mismos elementos (.primary-btn, .nav-cta) — el preset solo cambia forma
   y relleno, nunca el texto ni el link.
   ================================================================ */
body.btn-style-pill .primary-btn,body.btn-style-pill .nav-cta{border-radius:999px}
body.btn-style-pill .primary-btn{padding-left:28px;padding-right:28px}

body.btn-style-outline .primary-btn,body.btn-style-outline .nav-cta{background:transparent;color:var(--ink);border:2px solid var(--ink)}
@media (hover:hover) and (pointer:fine){
  body.btn-style-outline .primary-btn:hover,body.btn-style-outline .nav-cta:hover{background:var(--ink);color:var(--bg)}
}

body.btn-style-accent .primary-btn,body.btn-style-accent .nav-cta{background:var(--acid);color:#101111;border:none}
@media (hover:hover) and (pointer:fine){
  body.btn-style-accent .primary-btn:hover,body.btn-style-accent .nav-cta:hover{filter:brightness(1.12)}
}

body.btn-style-ghost .primary-btn,body.btn-style-ghost .nav-cta{background:transparent;color:var(--acid);border:none;padding-left:2px;padding-right:2px}
@media (hover:hover) and (pointer:fine){
  body.btn-style-ghost .primary-btn:hover,body.btn-style-ghost .nav-cta:hover{text-decoration:underline}
}