/* DentalRed — sistema de diseño del sitio público (prototipo VIS, 2026-10-09).
   Lenguaje: «expediente y sello». Tipo editorial (Fraunces) + etiquetas
   monoespaciadas + líneas de registro. Tokens de Marca: DentalRed (base, índigo) / Menta (alterna).
   La paleta clínica del odontograma (--dx-*) no vive aquí: es codificación médica (D-137). */

:root{
  --br:#2A3A8F; --brh:#1E2A6B; --brd:#161F52; --bi:#FFFFFF;
  --bs:#DDE1F5; --gd:#F5F6FB; --surf:#FFFFFF; --sf2:#EEF0F8;
  --ln:#D9DDF0; --ln2:#C7CCE6; --ik:#12162E; --ik2:#0C0F22; --tx:#3F4463; --sf:#676B85;
  --acc2:#B23A48; --acc2h:#8F2C38; --danger:#B23A48;
  --sombra:0 1px 2px rgba(18,22,46,.04), 0 14px 40px rgba(18,22,46,.09);
  --sombra-s:0 1px 2px rgba(18,22,46,.05);
  --sombra-l:0 30px 80px rgba(18,22,46,.16);
  --radio:20px; --radio-s:12px; --max:1180px; --h:76px;
  --cta-bg:#12162E; --cta-muted:#AEB4D6; --br-lite:#9AA6E8;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --mouse-x:72%; --mouse-y:18%;
}

/* ── Direcciones de marca (comparación en vivo) ───────────────────────────── */
[data-marca="menta"]{
  --br:#1F7652; --brh:#196143; --brd:#134B33;
  --bs:#DFF4E9; --gd:#F5F9F6; --sf2:#EAF4EE; --ln:#DCEAE1; --ln2:#C8E0D2;
  --ik:#122A20; --ik2:#0E1613; --tx:#3C534A; --sf:#60716A;
  --acc2:#2A6FD6; --acc2h:#1F5BB8; --danger:#C0362B;
  --sombra:0 1px 2px rgba(18,42,32,.04), 0 14px 40px rgba(18,42,32,.09);
  --cta-bg:#122A20; --cta-muted:#B9CCC2; --br-lite:#6CD3A3;
}
[data-marca="consta"]{
  --br:#0E6E63; --brh:#0A534B; --brd:#083F39;
  --bs:#DCEEEB; --gd:#F4F8F7; --sf2:#E6F1EF; --ln:#D3E4E0; --ln2:#BCD8D3;
  --ik:#0C1F1C; --ik2:#081512; --tx:#39514C; --sf:#5F6F6D;
  --acc2:#C8912B; --acc2h:#A87A1E; --danger:#B23A48;
  --sombra:0 1px 2px rgba(12,31,28,.04), 0 14px 40px rgba(12,31,28,.09);
  --cta-bg:#0C1F1C; --cta-muted:#A9C4BC; --br-lite:#4FBFAE;
}
[data-marca="savia"]{
  --br:#2F6B4F; --brh:#234F3B; --brd:#1A3C2C;
  --bs:#DCEADF; --gd:#F4F7F3; --sf2:#E7EFE6; --ln:#D6E3D6; --ln2:#C0D6C0;
  --ik:#15241C; --ik2:#0F1A14; --tx:#42513F; --sf:#616E5E;
  --acc2:#D98A5B; --acc2h:#B86F44; --danger:#B23A48;
  --sombra:0 1px 2px rgba(21,36,28,.04), 0 14px 40px rgba(21,36,28,.09);
  --cta-bg:#15241C; --cta-muted:#AFC4B0; --br-lite:#79B98F;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--gd); color:var(--tx);
  font-family:'Karla',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.66; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2{font-family:var(--display); font-optical-sizing:auto; color:var(--ik); line-height:1.06; margin:0 0 .5em; font-weight:600; letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem); line-height:1.02}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3,h4{font-family:'Sora',system-ui,sans-serif; color:var(--ik); line-height:1.2; margin:0 0 .5em}
h3{font-weight:600; font-size:1.22rem; letter-spacing:-.01em}
h4{font-weight:600; font-size:1.02rem}
p{margin:0 0 1rem}
a{color:var(--brh); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--br); color:#fff}

.kicker{display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--brh); margin:0 0 1rem}
.kicker::before{content:""; width:22px; height:1px; background:currentColor; opacity:.6}
.eyebrow{color:var(--sf); font-size:.92rem; margin:0 0 1rem}
.contenedor{max-width:var(--max); margin:0 auto; padding:0 26px; width:100%; box-sizing:border-box}
.seccion{padding:clamp(64px,8vw,110px) 0; position:relative; width:100%; overflow-x:clip; box-sizing:border-box}
.seccion.alt{background:var(--surf)}
.seccion.claro{background:linear-gradient(180deg,var(--bs),var(--gd) 78%)}
.seccion.oscura{background:var(--ik); color:#D6DCF3}
.seccion.oscura h2,.seccion.oscura h3,.seccion.oscura h4{color:#fff}
.seccion.oscura .kicker{color:var(--br-lite)}
.seccion.oscura p{color:#B9C0DE}
.centrado{text-align:center; max-width:800px; margin:0 auto}
.centrado .kicker{justify-content:center}
.lead{font-size:clamp(1.06rem,1.6vw,1.22rem); color:var(--tx); line-height:1.6}
.oscura .lead{color:#C3CAE8}
.regla{border:0; border-top:1px solid var(--ln); margin:0}

/* Header */
header.sitio{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--gd) 86%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--ln)}
.barra{display:flex; align-items:center; gap:22px; height:var(--h)}
.marca{display:flex; align-items:center; gap:11px; font-family:'Sora'; font-weight:700; font-size:1.22rem;
  color:var(--ik); letter-spacing:-.02em}
.marca:hover{text-decoration:none}
.marca .logo{color:var(--br); display:flex}
.marca img{width:36px; height:36px; object-fit:contain}
.marca small{display:block; font-family:'IBM Plex Mono',monospace; font-size:.58rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sf); margin-top:2px}
/* Progreso de lectura + header compacto */
.progreso{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--br),var(--acc2)); z-index:80; pointer-events:none}
header.sitio{transition:height .2s ease, box-shadow .2s ease}
header.sitio.compacta{box-shadow:0 10px 30px rgba(18,22,46,.08)}
.nav-toggle{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.nav{display:flex; gap:2px; margin-left:auto; align-items:center}
.nav a{color:var(--tx); font-weight:500; font-size:.93rem; padding:9px 12px; border-radius:9px; transition:.16s; position:relative}
.nav a::after{content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:2px;
  background:var(--acc2); transform:scaleX(0); transform-origin:0 50%; transition:transform .2s ease}
.nav a:hover{color:var(--brh); background:var(--sf2); text-decoration:none}
.nav a:hover::after{transform:scaleX(1)}
.nav a.activo{color:var(--brh); background:var(--bs)}
.nav a.activo::after{transform:scaleX(1)}
.menu-btn{display:none; margin-left:auto; background:var(--surf); border:1px solid var(--ln); border-radius:11px;
  width:44px; height:44px; font-size:1.2rem; cursor:pointer; color:var(--ik); align-items:center; justify-content:center;
  -webkit-user-select:none; user-select:none}
.nav-toggle:focus-visible + .barra .menu-btn{outline:3px solid var(--br-lite); outline-offset:2px}

/* Volver arriba */
.volver-arriba{position:fixed; right:22px; bottom:78px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--ln); background:var(--surf); color:var(--ik); font-size:1.15rem; cursor:pointer;
  opacity:0; transform:translateY(14px); pointer-events:none; transition:.24s ease; box-shadow:var(--sombra); z-index:60}
.volver-arriba.visible{opacity:1; transform:none; pointer-events:auto}
.volver-arriba:hover{background:var(--br); color:#fff}
@media(prefers-reduced-motion:reduce){.volver-arriba{transition:none}} 

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px;
  padding:0 25px; border-radius:var(--radio-s); border:1px solid transparent; font-family:'Sora';
  font-weight:600; font-size:.95rem; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s;
  white-space:nowrap; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.primario{background:linear-gradient(180deg,color-mix(in srgb,var(--br) 88%,#fff),var(--br)); color:#fff;
  box-shadow:0 1px 2px rgba(18,22,46,.18), 0 10px 24px color-mix(in srgb,var(--br) 26%,transparent)}
.btn.primario:hover{box-shadow:0 2px 4px rgba(18,22,46,.2), 0 16px 34px color-mix(in srgb,var(--br) 34%,transparent)}
.btn.secundario{background:var(--surf); color:var(--ik); border-color:var(--ln2); box-shadow:var(--sombra-s)}
.btn.secundario:hover{border-color:var(--br); color:var(--brh)}
.btn.claro{background:#fff; color:var(--ik)}
.btn.claro:hover{background:var(--bs)}
.btn.fantasma{background:transparent; color:#fff; border-color:rgba(255,255,255,.28)}
.btn.fantasma:hover{border-color:#fff}
.btn.sm{min-height:42px; padding:0 17px; font-size:.89rem}
.btn .fl{transition:transform .16s}
.btn:hover .fl{transform:translateX(3px)}

/* Hero */
.hero{padding:clamp(70px,9vw,120px) 0 clamp(60px,7vw,96px); position:relative; overflow:hidden;
  min-height:calc(100svh - var(--h)); display:flex; align-items:center;
  background:
    radial-gradient(760px 520px at var(--mouse-x) var(--mouse-y),color-mix(in srgb,var(--br) 18%,transparent),transparent 68%),
    radial-gradient(620px 500px at 4% 92%,color-mix(in srgb,var(--acc2) 11%,transparent),transparent 72%),
    linear-gradient(145deg,var(--gd),color-mix(in srgb,var(--bs) 50%,var(--surf)) 54%,var(--gd));
  transition:background .35s ease}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(700px 460px at 70% 0%,#000,transparent 74%)}
.hero-grid{display:grid; grid-template-columns:.94fr 1.06fr; gap:clamp(34px,4vw,56px); align-items:center; position:relative}
.hero-grid>div:first-of-type{position:relative; z-index:2}
.hero h1{font-size:clamp(3rem,6.8vw,5.6rem); max-width:760px; letter-spacing:-.045em; text-wrap:balance}
.hero h1 em{font-style:italic; color:var(--br); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:1%; right:-1%; bottom:.03em; height:.12em; border-radius:999px;
  background:linear-gradient(90deg,var(--acc2),color-mix(in srgb,var(--acc2) 22%,transparent)); transform:rotate(-1deg); opacity:.75}
.hero .lead{max-width:660px; font-size:clamp(1.08rem,1.55vw,1.3rem)}
.hero-atmosfera{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.hero-atmosfera i{position:absolute; display:block; border-radius:50%; filter:blur(2px); opacity:.7; mix-blend-mode:multiply}
.hero-atmosfera i:nth-child(1){width:340px; height:340px; right:-90px; top:8%; border:1px solid color-mix(in srgb,var(--br) 28%,transparent); animation:orbita 18s ease-in-out infinite}
.hero-atmosfera i:nth-child(2){width:190px; height:190px; right:39%; bottom:-70px; background:color-mix(in srgb,var(--acc2) 7%,transparent); animation:flotar 13s ease-in-out infinite reverse}
.hero-atmosfera i:nth-child(3){width:12px; height:12px; left:5%; top:25%; background:var(--acc2); box-shadow:0 0 0 10px color-mix(in srgb,var(--acc2) 12%,transparent); animation:flotar 8s ease-in-out infinite}
@keyframes orbita{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-42px,28px,0) rotate(18deg)}}
@keyframes flotar{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-24px,0)}}
.badge{display:inline-flex; align-items:center; gap:9px; background:var(--surf); color:var(--brh);
  border:1px solid var(--ln); border-radius:999px; padding:7px 15px; font-size:.8rem; font-weight:600;
  margin-bottom:24px; box-shadow:var(--sombra-s); font-family:'IBM Plex Mono',monospace; letter-spacing:.02em}
.badge .punto{width:8px; height:8px; border-radius:50%; background:var(--br); box-shadow:0 0 0 4px color-mix(in srgb,var(--br) 22%,transparent)}
.acciones{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.nota-honesta{margin-top:22px; font-size:.9rem; color:var(--sf); border-left:2px solid var(--br); padding-left:14px; max-width:520px}
.pruebas-hero{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.pruebas-hero span{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--brh); background:var(--bs); border:1px solid var(--ln); border-radius:999px; padding:5px 10px}

/* Recorrido comercial */
.ruta-comercial{background:var(--ik); color:#D6DCF3}
.ruta-comercial h2,.ruta-comercial h3{color:#fff}
.ruta-comercial .lead{color:#C3CAE8}
.ruta-comercial .kicker{color:var(--br-lite)}
.camino{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:44px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radio); overflow:hidden; background:rgba(255,255,255,.12)}
.camino>div{background:var(--ik); padding:30px; position:relative}
.camino b{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--br); color:#fff; font-family:'IBM Plex Mono'; font-size:.78rem; margin-bottom:18px}
.camino h3{font-size:1.04rem}
.camino p{font-size:.92rem; color:#B9C0DE; margin:0}
.camino.vertical{grid-template-columns:repeat(5,1fr); border-color:var(--ln); background:var(--ln)}
.camino.vertical>div{background:var(--surf)}
.camino.vertical h3{color:var(--ik)}
.camino.vertical p{color:var(--tx)}
.comercial-precio{background:linear-gradient(135deg,var(--bs),var(--gd) 46%,var(--surf))}

/* Maqueta de producto */
.mock{position:relative; border:1px solid var(--ln2); border-radius:18px; background:var(--surf);
  box-shadow:var(--sombra-l); transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); transform-origin:center;
  animation:mock-flota 7s ease-in-out infinite}
.mock::before{content:""; position:absolute; z-index:-1; inset:9% -8% -9% 10%; border-radius:32px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--br) 24%,transparent),color-mix(in srgb,var(--acc2) 16%,transparent)); filter:blur(30px); opacity:.8}
@keyframes mock-flota{0%,100%{transform:perspective(1200px) rotateY(-4deg) rotateX(1deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-2deg) rotateX(0) translateY(-9px)}}
.mock::after{content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); border-radius:18px}
.mock-top{display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--ln); background:var(--sf2); border-radius:17px 17px 0 0}
.mock-top .pt{width:11px; height:11px; border-radius:50%; background:var(--ln2)}
.mock-top .t{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--sf); margin-left:8px; letter-spacing:.04em}
.mock-top .sellar{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--brh);
  background:var(--bs); border-radius:999px; padding:4px 10px; letter-spacing:.04em}
.mock-top .sellar i{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--br); margin-right:5px; box-shadow:0 0 0 4px color-mix(in srgb,var(--br) 13%,transparent); animation:latido 2s ease-out infinite}
@keyframes latido{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--br) 16%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.mock-app{display:grid; grid-template-columns:44px 1fr; min-width:0}
.mock-rail{background:var(--ik); padding:11px 7px; display:flex; flex-direction:column; align-items:center; gap:9px; border-radius:0 0 0 17px}
.mock-rail i,.mock-rail .rail-logo{font-style:normal; display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:#AEB4D6; font-family:'IBM Plex Mono'; font-size:.65rem}
.mock-rail .rail-logo{background:var(--br); color:#fff; font-family:'Sora'; font-weight:700; margin-bottom:3px}
.mock-rail i.on{background:rgba(255,255,255,.12); color:#fff}.mock-rail .rail-user{margin-top:auto; border-radius:50%; background:var(--acc2); color:#fff; font-size:.57rem}
.mock-cuerpo{padding:16px 18px 14px; min-width:0}
.mock-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin:-2px 0 15px; background:var(--sf2); border-radius:10px}
.mock-tabs button{appearance:none; border:0; border-radius:7px; background:transparent; color:var(--sf); min-height:34px; padding:0 7px; cursor:pointer; font-family:'Sora'; font-size:.68rem; font-weight:600; transition:.18s}
.mock-tabs button:hover{color:var(--ik)}
.mock-tabs button.on{background:var(--surf); color:var(--brh); box-shadow:var(--sombra-s)}
.mock-tabs button:focus-visible{outline:2px solid var(--br); outline-offset:1px}
.demo-label{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sf); margin-bottom:11px}
.ficha{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--ln)}
.ficha .av{width:40px; height:40px; border-radius:11px; background:var(--bs); color:var(--brh); display:grid; place-items:center; font-family:'Sora'; font-weight:700; font-size:.9rem}
.ficha b{display:block; font-family:'Sora'; color:var(--ik); font-size:.95rem}
.ficha span{font-size:.82rem; color:var(--sf)}
.ficha .estado{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--brh); border:1px solid var(--ln2); border-radius:6px; padding:3px 8px}
.mock-panel{min-height:208px; padding-top:14px; animation:panel-entra .3s ease}
.mock-panel[hidden]{display:none}
@keyframes panel-entra{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}
.nota-clinica{padding:16px; border:1px solid var(--ln); border-radius:12px; background:linear-gradient(145deg,var(--surf),var(--sf2))}
.nota-clinica span{display:block; color:var(--sf); font-family:'IBM Plex Mono'; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em}
.nota-clinica b{display:block; margin:5px 0 7px; color:var(--ik); font-family:'Sora'; font-size:.86rem}
.nota-clinica p{margin:0; color:var(--tx); font-size:.76rem; line-height:1.45}
.mock-actions{display:flex; justify-content:flex-end; gap:7px; margin-top:10px}
.demo-action{appearance:none; border:1px solid var(--br); background:var(--br); color:#fff; border-radius:8px; min-height:32px; padding:0 11px; font-family:'Sora'; font-size:.65rem; font-weight:600; cursor:pointer}
.demo-action.secondary{background:var(--surf); border-color:var(--ln2); color:var(--tx)}.demo-action:disabled{cursor:default; opacity:.78}
.mock.firmada .estado-linea span i{background:var(--br)}.mock.firmada .ficha .estado{background:var(--bs); border-color:var(--br)}
.estado-linea{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; color:var(--sf); font-size:.68rem}
.estado-linea span{display:flex; align-items:center; gap:7px}.estado-linea span i{width:7px; height:7px; border-radius:50%; background:#C8912B}.estado-linea strong{font-weight:500}
.odonto{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; margin:16px 0}
.odonto button{appearance:none; padding:0; aspect-ratio:1/1.25; min-width:0; border-radius:6px 6px 4px 4px; background:var(--sf2); border:1px solid var(--ln);
  position:relative; display:block; cursor:pointer; transition:.15s}
.odonto button::after{content:""; position:absolute; left:50%; top:22%; width:44%; height:40%; transform:translateX(-50%);
  border-radius:3px 3px 50% 50%; background:var(--ln2)}
.odonto button:hover,.odonto button.seleccionado{transform:translateY(-3px); box-shadow:0 5px 10px color-mix(in srgb,var(--ik) 13%,transparent)}
.odonto button:focus-visible{outline:2px solid var(--br); outline-offset:2px}
.odonto button.ok{background:color-mix(in srgb,var(--br) 16%,var(--surf)); border-color:var(--br)}
.odonto button.ok::after{background:var(--br)}
.odonto button.marca{background:color-mix(in srgb,var(--acc2) 14%,var(--surf)); border-color:var(--acc2)}
.odonto button.marca::after{background:var(--acc2)}
.tooth-detail{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; margin:-5px 0 9px; border:1px solid var(--ln); border-radius:8px; background:var(--sf2); font-size:.65rem}
.tooth-detail strong{font-family:'Sora'; color:var(--ik)}.tooth-detail span{color:var(--sf); text-align:right}
.leyenda-odonto{display:flex; flex-wrap:wrap; gap:11px; color:var(--sf); font-size:.62rem}
.leyenda-odonto span{display:flex; align-items:center; gap:5px}.leyenda-odonto i{display:block; width:8px; height:8px; border-radius:3px; border:1px solid var(--ln2); background:var(--sf2)}
.leyenda-odonto i.obs{background:var(--br); border-color:var(--br)}.leyenda-odonto i.hallazgo{background:var(--acc2); border-color:var(--acc2)}
.eventos{list-style:none; padding:0; margin:4px 0 0}
.eventos li{display:flex; gap:10px; align-items:baseline; padding:8px 0; border-top:1px dashed var(--ln); font-size:.82rem}
.eventos time{font-family:'IBM Plex Mono',monospace; color:var(--sf); font-size:.72rem; min-width:52px}
.eventos b{color:var(--ik); font-weight:600}
.eventos .evento-vivo{background:color-mix(in srgb,var(--br) 10%,var(--surf)); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:7px}.eventos .evento-vivo time{color:var(--brh); font-weight:700}
.sello-badge{position:absolute; right:-14px; bottom:-14px; width:104px; height:104px; border-radius:50%;
  background:var(--ik); color:#fff; display:grid; place-content:center; text-align:center; gap:2px;
  box-shadow:var(--sombra-l); transform:rotate(-9deg)}
.sello-badge .ring{font-family:'IBM Plex Mono',monospace; font-size:.5rem; letter-spacing:.14em; opacity:.7}
.sello-badge .big{font-family:var(--display); font-size:1.05rem; font-weight:600}
.sello-badge::before{content:""; position:absolute; inset:7px; border:1px dashed rgba(255,255,255,.35); border-radius:50%}

/* Demo viva expandida */
.demo-stage{background:linear-gradient(180deg,var(--ik2),var(--ik)); color:#D6DCF3; padding-top:clamp(70px,8vw,104px)}
.demo-stage-head{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; margin-bottom:38px}.demo-stage-head h2{color:#fff; max-width:620px}.demo-stage-head .kicker{color:var(--br-lite)}.demo-stage-head .lead{color:#BDC5E5; margin:0}
.live-demo{border:1px solid rgba(255,255,255,.16); border-radius:24px; overflow:hidden; background:var(--gd); box-shadow:0 40px 100px rgba(0,0,0,.38); color:var(--tx)}
.live-topbar{min-height:62px; display:grid; grid-template-columns:auto minmax(220px,460px) auto; align-items:center; gap:24px; padding:10px 18px; background:var(--ik); color:#fff}
.live-brand{display:flex; align-items:center; gap:9px;font-family:'Sora';font-weight:700}.live-brand span{line-height:1}.live-brand small{display:block;font-family:'IBM Plex Mono';font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:#929ABD;margin-top:4px}
.live-search{display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.07); color:#929ABD}.live-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:.8rem}.live-search input::placeholder{color:#929ABD}
.live-mode{font-family:'IBM Plex Mono';font-size:.62rem;color:#BFC6E4;white-space:nowrap}.live-mode i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#61C38B;margin-right:6px;box-shadow:0 0 0 4px rgba(97,195,139,.13)}
.live-shell{display:grid;grid-template-columns:230px 1fr;min-height:590px}.live-sidebar{display:flex;flex-direction:column;background:var(--sf2);border-right:1px solid var(--ln);padding:18px 12px}.live-side-label{font-family:'IBM Plex Mono';font-size:.61rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sf);padding:0 8px 12px}
.live-patient{appearance:none;border:1px solid transparent;background:transparent;text-align:left;border-radius:12px;padding:11px 10px;display:grid;grid-template-columns:42px 1fr;cursor:pointer;color:var(--tx);transition:.15s}.live-patient:hover{background:var(--surf)}.live-patient.on{background:var(--surf);border-color:var(--ln);box-shadow:var(--sombra-s)}.live-patient i{grid-row:1/span 2;font-style:normal;font-family:'IBM Plex Mono';font-size:.66rem;color:var(--brh)}.live-patient b{font-family:'Sora';font-size:.76rem;color:var(--ik)}.live-patient small{font-size:.65rem;color:var(--sf);margin-top:2px}.live-sidebar-foot{margin-top:auto;border-top:1px solid var(--ln);padding:14px 8px 0;display:flex;justify-content:space-between;font-size:.62rem;color:var(--sf)}.live-sidebar-foot b{color:var(--brh)}
.live-workspace{padding:0;min-width:0}.live-patient-head{display:flex;align-items:center;gap:12px;padding:20px 24px 15px}.live-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--bs);color:var(--brh);font-family:'Sora';font-weight:700}.live-patient-head small{font-family:'IBM Plex Mono';font-size:.58rem;color:var(--sf)}.live-patient-head h3{font-size:1.05rem;margin:2px 0 0}.live-status{margin-left:auto;border:1px solid var(--ln2);border-radius:999px;padding:5px 10px;font-family:'IBM Plex Mono';font-size:.59rem;color:var(--brh);background:var(--surf)}.is-signed .live-status{background:var(--bs);border-color:var(--br)}
.live-tabs{display:flex;gap:3px;padding:0 24px;border-bottom:1px solid var(--ln)}.live-tabs button{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;padding:10px 13px;color:var(--sf);font-family:'Sora';font-size:.72rem;font-weight:600;cursor:pointer}.live-tabs button.on{color:var(--brh);border-bottom-color:var(--br)}.live-tabs i{font-style:normal;background:var(--bs);border-radius:999px;padding:2px 6px;margin-left:4px;font-size:.58rem}
.live-panel{padding:24px;animation:panel-entra .28s ease}.live-panel[hidden]{display:none}.live-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.live-kpis>div,.live-card{background:var(--surf);border:1px solid var(--ln);border-radius:14px;padding:17px}.live-kpis span,.live-label{display:block;font-family:'IBM Plex Mono';font-size:.57rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sf)}.live-kpis b{display:block;font-family:'Sora';color:var(--ik);font-size:.92rem;margin:5px 0 1px}.live-kpis b.accent{color:var(--acc2)}.live-kpis small{color:var(--sf);font-size:.66rem}.live-columns{display:grid;grid-template-columns:1.35fr .65fr;gap:12px;margin-top:12px}.live-card h4{font-size:.9rem;margin:7px 0}.live-card p{font-size:.75rem;line-height:1.5;margin-bottom:12px}.live-tags{display:flex;flex-wrap:wrap;gap:5px}.live-tags span{background:var(--bs);color:var(--brh);border-radius:999px;padding:4px 8px;font-size:.59rem}.live-card ol{list-style:none;padding:0;margin:10px 0}.live-card li{font-size:.7rem;padding:7px 0 7px 20px;border-bottom:1px dashed var(--ln);position:relative}.live-card li::before{content:"○";position:absolute;left:0;color:var(--sf)}.live-card li.done::before{content:"✓";color:var(--br)}.live-card button{appearance:none;border:0;background:transparent;color:var(--brh);font-weight:700;font-size:.68rem;cursor:pointer;padding:4px 0}
.live-form{display:grid;gap:12px}.live-form label{font-family:'Sora';font-size:.69rem;font-weight:600;color:var(--ik)}.live-form textarea,.live-form select{display:block;width:100%;margin-top:5px;border:1px solid var(--ln);border-radius:10px;background:var(--surf);color:var(--tx);font:inherit;font-size:.72rem;padding:10px;resize:none}.live-form textarea{height:65px}.live-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.live-sign-row{display:flex;align-items:center;justify-content:space-between;margin-top:2px}.live-sign-row span{font-family:'IBM Plex Mono';font-size:.61rem;color:var(--sf)}.live-sign-row button{appearance:none;border:0;border-radius:9px;background:var(--br);color:#fff;padding:10px 14px;font-family:'Sora';font-size:.68rem;font-weight:700;cursor:pointer}.live-sign-row button:disabled{opacity:.75;cursor:default}
.live-odontogram{display:grid;grid-template-columns:repeat(16,1fr);gap:5px;padding:20px 8px;background:var(--surf);border:1px solid var(--ln);border-radius:14px}.live-odontogram button{appearance:none;aspect-ratio:1/1.25;border:1px solid var(--ln);border-radius:6px;background:var(--sf2);position:relative;cursor:pointer;padding:0}.live-odontogram button::before{content:"";position:absolute;left:22%;right:22%;top:20%;height:42%;border-radius:3px 3px 50% 50%;background:var(--ln2)}.live-odontogram button span{position:absolute;left:0;right:0;bottom:-17px;font-family:'IBM Plex Mono';font-size:.48rem;color:var(--sf)}.live-odontogram button.tratado{border-color:var(--br);background:color-mix(in srgb,var(--br) 14%,var(--surf))}.live-odontogram button.tratado::before{background:var(--br)}.live-odontogram button.alerta{border-color:var(--acc2);background:color-mix(in srgb,var(--acc2) 13%,var(--surf))}.live-odontogram button.alerta::before{background:var(--acc2)}.live-odontogram button.on{outline:3px solid color-mix(in srgb,var(--acc2) 25%,transparent);transform:translateY(-3px)}
.live-tooth-detail{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:35px 0 12px;padding:12px 14px;border:1px solid var(--ln);border-radius:11px;background:var(--surf);font-size:.7rem}.live-tooth-detail b{font-family:'Sora';color:var(--ik)}.live-tooth-detail span{color:var(--sf)}.live-tooth-detail button{appearance:none;border:0;border-radius:8px;background:var(--br);color:#fff;padding:8px 10px;font-family:'Sora';font-size:.62rem;font-weight:700;cursor:pointer}.live-legend{display:flex;gap:18px;font-size:.62rem;color:var(--sf)}.live-legend span{display:flex;align-items:center;gap:6px}.live-legend i{width:9px;height:9px;border-radius:3px;background:var(--sf2);border:1px solid var(--ln)}.live-legend i.tratado{background:var(--br);border-color:var(--br)}.live-legend i.alerta{background:var(--acc2);border-color:var(--acc2)}
.odonto-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}.odonto-levels button{appearance:none;border:1px solid var(--ln);border-radius:11px;background:var(--surf);padding:9px;display:flex;align-items:center;gap:8px;text-align:left;color:var(--tx);cursor:pointer}.odonto-levels button>b{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--sf2);color:var(--sf);font-family:'IBM Plex Mono';font-size:.58rem}.odonto-levels button>span{display:flex;flex-direction:column;font-family:'Sora';font-size:.68rem;font-weight:600;color:var(--ik)}.odonto-levels button small{font-family:'Karla';font-size:.6rem;font-weight:400;color:var(--sf)}.odonto-levels button.on{border-color:var(--br);background:var(--bs)}.odonto-levels button.on>b{background:var(--br);color:#fff}.odonto-level-panel{animation:panel-entra .24s ease}.odonto-level-panel[hidden]{display:none}.odonto-panel-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:8px}.odonto-panel-head span{font-family:'IBM Plex Mono';font-size:.57rem;text-transform:uppercase;color:var(--sf)}.odonto-panel-head h4{font-size:.9rem;margin:2px 0}.odonto-summary{font-size:.65rem;color:var(--sf)}.odonto-summary b{font-family:'Sora';color:var(--ik);font-size:.82rem;margin-left:7px}
.odonto-tour-banner{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:10px;border-radius:10px;background:var(--ik);color:#C9D0EC;font-size:.62rem}.odonto-tour-banner span{font-family:'IBM Plex Mono';color:var(--br-lite);margin-right:auto}.odonto-tour-banner b{font-family:'Sora';font-size:.62rem;color:#fff}.odonto-tour-banner i{font-style:normal;color:var(--acc2)}
.tooth-focus{display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:center;padding:20px;border:1px solid var(--ln);border-radius:14px;background:var(--surf)}.tooth-hero{width:112px;height:112px;border-radius:28px;background:linear-gradient(145deg,var(--bs),var(--sf2));position:relative;display:grid;place-items:center;color:var(--brh);font-family:var(--display);font-size:1.6rem;font-weight:700}.tooth-hero i{position:absolute;width:45px;height:58px;background:var(--surf);border:3px solid var(--br);border-radius:16px 16px 22px 22px}.tooth-hero span{position:relative;z-index:1}.tooth-focus h4{margin:5px 0;font-size:1rem}.tooth-focus p{font-size:.72rem;margin:0 0 10px}.tooth-meta{display:flex;flex-wrap:wrap;gap:5px}.tooth-meta span{font-size:.58rem;color:var(--brh);background:var(--bs);border-radius:999px;padding:4px 7px}.piece-history{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.piece-history>div{padding:12px;border:1px solid var(--ln);border-radius:11px;background:var(--surf);display:flex;flex-direction:column}.piece-history time{font-family:'IBM Plex Mono';font-size:.56rem;color:var(--sf)}.piece-history b{font-family:'Sora';font-size:.67rem;color:var(--ik);margin:4px 0}.piece-history span{font-size:.62rem;color:var(--sf);line-height:1.35}
.surface-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:center;padding:22px;border:1px solid var(--ln);border-radius:14px;background:var(--surf)}.surface-map{width:210px;height:210px;position:relative;margin:auto;border-radius:50%;background:var(--sf2);border:1px solid var(--ln)}.surface-map button{appearance:none;position:absolute;width:58px;height:58px;border-radius:16px;border:2px solid var(--ln2);background:var(--surf);color:var(--sf);font-family:'Sora';font-weight:700;cursor:pointer}.surface-map button:nth-child(1){top:14px;left:76px}.surface-map button:nth-child(2){top:76px;left:14px}.surface-map button:nth-child(3){top:76px;left:76px}.surface-map button:nth-child(4){top:76px;right:14px}.surface-map button:nth-child(5){bottom:14px;left:76px}.surface-map button.on{background:var(--acc2);border-color:var(--acc2);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--acc2) 14%,transparent)}.surface-copy h4{text-transform:capitalize;margin:5px 0}.surface-copy p{font-size:.72rem}.surface-copy label{font-family:'Sora';font-size:.66rem;font-weight:600;color:var(--ik)}.surface-copy select{display:block;width:100%;margin:5px 0 10px;border:1px solid var(--ln);border-radius:9px;background:var(--gd);padding:8px;font:inherit;font-size:.68rem}.surface-copy button{appearance:none;border:0;border-radius:8px;background:var(--br);color:#fff;padding:9px 12px;font-family:'Sora';font-size:.64rem;font-weight:700;cursor:pointer}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.evidence-card{padding:18px;border:1px solid var(--ln);border-radius:14px;background:var(--surf)}.evidence-card h4{font-size:.88rem;margin:6px 0}.evidence-card p{font-size:.7rem}.evidence-card dl{margin:12px 0 0}.evidence-card dl>div{display:flex;justify-content:space-between;padding:6px 0;border-top:1px dashed var(--ln);font-size:.62rem}.evidence-card dt{color:var(--sf)}.evidence-card dd{margin:0;color:var(--ik);font-family:'IBM Plex Mono'}.evidence-card.plan{background:var(--ik);border-color:transparent}.evidence-card.plan h4{color:#fff}.evidence-card.plan p{color:#BFC6E4}.evidence-card.plan .live-label{color:var(--br-lite)}.evidence-seal{display:flex;align-items:center;gap:10px;margin-top:13px}.evidence-seal>i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--br);color:#fff;font-style:normal}.evidence-seal span{display:flex;flex-direction:column}.evidence-seal b{font-family:'Sora';font-size:.67rem;color:#fff}.evidence-seal small{font-size:.59rem;color:#9FA8CE}.version-line{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:13px}.version-line span{border:1px solid var(--ln);border-radius:999px;background:var(--surf);padding:6px 10px;font-size:.59rem;color:var(--sf)}.version-line span.on{border-color:var(--br);color:var(--brh)}.version-line i{width:28px;height:1px;background:var(--ln2)}
.live-audit{border:1px solid var(--ln);border-radius:14px;background:var(--surf);overflow:hidden}.live-audit>div{display:grid;grid-template-columns:55px 12px 1fr auto;gap:11px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--ln)}.live-audit>div:last-child{border-bottom:0}.live-audit time{font-family:'IBM Plex Mono';font-size:.61rem;color:var(--sf)}.live-audit i{width:9px;height:9px;border-radius:50%;background:var(--br);box-shadow:0 0 0 4px var(--bs)}.live-audit span{display:flex;flex-direction:column}.live-audit b{font-family:'Sora';font-size:.72rem;color:var(--ik)}.live-audit small{font-size:.64rem;color:var(--sf)}.live-audit em{font-style:normal;font-family:'IBM Plex Mono';font-size:.57rem;color:var(--brh);background:var(--bs);border-radius:999px;padding:4px 8px}.live-audit .new{background:color-mix(in srgb,var(--br) 8%,var(--surf))}.live-audit .new i{background:var(--acc2);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc2) 15%,transparent)}
.live-footer{display:flex;justify-content:space-between;gap:20px;padding:10px 18px;background:var(--sf2);border-top:1px solid var(--ln);font-family:'IBM Plex Mono';font-size:.56rem;color:var(--sf)}

/* Tarjetas y paneles */
.tarjeta{background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio); padding:28px; box-shadow:var(--sombra-s); transition:.18s}
.tarjeta{background:linear-gradient(145deg,color-mix(in srgb,var(--surf) 96%,transparent),color-mix(in srgb,var(--bs) 24%,var(--surf))); backdrop-filter:blur(12px)}
.tarjeta:hover{border-color:var(--ln2); box-shadow:var(--sombra); transform:translateY(-3px)}
.tarjeta .ico{width:48px; height:48px; border-radius:14px; background:var(--bs); color:var(--brh); display:grid; place-items:center; margin-bottom:16px; font-size:1.35rem}
.tarjeta h3{margin-bottom:.4rem}
.tarjeta p{margin:0; font-size:.96rem; color:var(--tx)}
.panel{background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio); box-shadow:var(--sombra); padding:8px 26px}
.panel .fila{display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px dashed var(--ln)}
.panel .fila:last-child{border-bottom:0}
.sello-ico{flex:none; width:42px; height:42px; border-radius:12px; background:var(--bs); color:var(--brh); display:grid; place-items:center; font-size:1.15rem}
.panel strong{display:block; color:var(--ik); font-family:'Sora'; font-size:.98rem; margin-bottom:1px}
.panel span{font-size:.9rem}

/* Métricas */
.metricas{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--ln); border-radius:var(--radio); overflow:hidden; background:var(--surf); box-shadow:var(--sombra-s)}
.metrica{padding:30px 26px; border-right:1px solid var(--ln); text-align:left}
.metrica:last-child{border-right:0}
.metrica .num{font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,3.4vw,3rem); color:var(--ik); line-height:1; letter-spacing:-.02em}
.metrica .num em{font-style:normal; color:var(--br)}
.metrica .txt{font-size:.86rem; color:var(--sf); margin-top:9px; line-height:1.4}
.metricas .num{font-family:var(--display); font-weight:600; font-size:2.6rem; color:var(--ik); line-height:1; font-variant-numeric:tabular-nums}
.metricas .txt{font-size:.88rem; color:var(--sf); margin-top:8px}

/* Grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

/* Bento */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.bento .b{grid-column:span 2; border:1px solid var(--ln); border-radius:var(--radio); background:var(--surf);
  padding:28px; box-shadow:var(--sombra-s); position:relative; overflow:hidden; transition:.18s}
.bento .b::after{content:""; position:absolute; width:150px; height:150px; right:-72px; bottom:-82px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--br) 16%,transparent),transparent 68%); transition:transform .35s ease}
.bento .b:hover::after{transform:scale(1.45)}
.bento .b:hover{transform:translateY(-3px); box-shadow:var(--sombra); border-color:var(--ln2)}
.bento .b.span-3{grid-column:span 3}
.bento .b.span-4{grid-column:span 4}
.bento .b.ancho{grid-column:span 6}
.bento .b.oscuro{background:var(--ik); border-color:transparent; color:#CDD4F0}
.bento .b.oscuro h3{color:#fff}
.bento .b.oscuro p{color:#AEB4D6}
.bento .b .ico{width:44px; height:44px; border-radius:12px; background:var(--bs); color:var(--brh); display:grid; place-items:center; font-size:1.25rem; margin-bottom:16px}
.bento .b.oscuro .ico{background:rgba(255,255,255,.1); color:var(--br-lite)}
.bento .b h3{margin-bottom:.45rem; font-size:1.14rem}
.bento .b p{margin:0; font-size:.94rem}
.bento .b .gigante{font-family:var(--display); font-weight:600; font-size:3.4rem; color:var(--brh); line-height:1; letter-spacing:-.03em}
.bento .b .mini{display:flex; gap:6px; margin-top:16px; flex-wrap:wrap}
.bento .b .mini span{font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--sf); border:1px solid var(--ln); border-radius:6px; padding:3px 8px}
.bento .b.oscuro .mini span{color:#C3CAE8; border-color:rgba(255,255,255,.2)}

/* Módulos enlazados */
.modulo{display:block; background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio-s); padding:22px; transition:.18s; color:inherit}
.modulo:hover{border-color:var(--br); box-shadow:var(--sombra); text-decoration:none; transform:translateY(-3px)}
.modulo h4{margin:0 0 6px; color:var(--ik)}
.modulo p{margin:0; font-size:.9rem; color:var(--sf)}
.modulo .flecha{color:var(--br); font-weight:600; font-size:.84rem; margin-top:11px; display:inline-block}

/* Filas feature */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; padding:30px 0}
.feature.inv .texto{order:2}
.feature .texto h3{font-family:var(--display); font-size:clamp(1.4rem,2.4vw,1.8rem); font-weight:600; letter-spacing:-.01em}
.feature .visual{background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio); box-shadow:var(--sombra); padding:28px}
.lista-check{list-style:none; padding:0; margin:18px 0}
.lista-check li{padding:10px 0 10px 33px; position:relative; border-bottom:1px dashed var(--ln)}
.lista-check li:last-child{border-bottom:0}
.lista-check li::before{content:"✓"; position:absolute; left:0; top:10px; width:21px; height:21px; border-radius:6px;
  background:var(--bs); color:var(--brh); font-size:.72rem; font-weight:700; display:grid; place-items:center}
.lista-check li.no::before{content:"—"; background:var(--sf2); color:var(--sf)}
.lista-check li.no{color:var(--sf)}

/* Tablas tipo registro */
.tabla-envoltura{overflow-x:auto; border:1px solid var(--ln); border-radius:var(--radio); background:var(--surf); -webkit-overflow-scrolling:touch; max-width:100%; width:100%; box-sizing:border-box}
.tabla-envoltura table{min-width:640px; width:100%; margin:0}
th,td{text-align:left; padding:15px 20px; border:1px solid var(--ln); vertical-align:top; word-break:break-word}
th{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brh); background:var(--sf2)}
td code{font-family:'IBM Plex Mono'; font-size:.82rem; background:var(--sf2); padding:2px 7px; border-radius:5px; color:var(--ik)}
.check{color:var(--br); font-weight:700}
.cruz{color:var(--sf); font-weight:700}

/* Avisos */
.aviso{background:var(--sf2); border:1px solid var(--ln); border-left:3px solid var(--acc2);
  border-radius:var(--radio-s); padding:16px 19px; font-size:.94rem; color:var(--tx); margin-top:18px}
.aviso strong{color:var(--ik)}
.aviso.limite{border-left-color:var(--danger)}
.aviso.ok{border-left-color:var(--br)}

/* Pasos */
.pasos{counter-reset:p; display:grid; gap:14px; margin-top:34px}
.paso{position:relative; background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio-s); padding:22px 24px 22px 78px}
.paso::before{counter-increment:p; content:counter(p,decimal-leading-zero); position:absolute; left:22px; top:19px;
  width:40px; height:40px; border-radius:11px; background:var(--bs); color:var(--brh); display:grid; place-items:center;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.86rem}
.paso h4{margin:0 0 4px}
.paso p{margin:0; font-size:.95rem}

/* Precios */
.precio-tarjeta{max-width:620px; margin:0 auto; background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio); box-shadow:var(--sombra-l); padding:40px; position:relative}
.precio-tarjeta .grande{font-family:var(--display); font-weight:600; font-size:3rem; color:var(--ik); margin:6px 0 2px; line-height:1; letter-spacing:-.02em}
.etiqueta{display:inline-block; font-family:'IBM Plex Mono'; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brh); background:var(--bs); border-radius:6px; padding:4px 10px; margin-bottom:12px}
.grid-precios{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.plan{background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio); padding:30px; display:flex; flex-direction:column; box-shadow:var(--sombra-s)}
.plan.destacado{border:2px solid var(--br); box-shadow:var(--sombra-l); transform:translateY(-8px)}
.plan .para{color:var(--sf); font-size:.92rem; min-height:48px}
.plan .valor{font-family:var(--display); color:var(--ik); font-size:clamp(1.6rem,2.4vw,2.15rem); font-weight:600; line-height:1.12; margin:15px 0 22px}
.plan .valor small{display:block; font-family:'IBM Plex Mono'; font-size:.65rem; color:var(--sf); text-transform:uppercase; letter-spacing:.08em}
.plan .valor em{font-family:'Karla'; font-size:.9rem; font-weight:500; color:var(--sf); font-style:normal}
.plan .lista-check{flex:1}

/* Diagnóstico comercial */
.diagnostico-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:26px; align-items:start}
.formulario-card label{display:block; font-family:'Sora'; font-weight:600; font-size:.86rem; color:var(--ik); margin:16px 0}
.formulario-card input,.formulario-card select{display:block; width:100%; min-height:48px; margin-top:7px; padding:0 14px; border:1px solid var(--ln2); border-radius:10px; background:var(--gd); color:var(--tx); font:inherit}
.formulario-card input:focus,.formulario-card select:focus{outline:3px solid color-mix(in srgb,var(--br) 25%,transparent); border-color:var(--br)}
.formulario-card .consentimiento{display:flex; gap:10px; align-items:flex-start; font-family:'Karla'; font-weight:400; color:var(--tx)}
.formulario-card .consentimiento input{width:18px; height:18px; min-height:0; margin:4px 0 0; flex:none}
.formulario-card .btn{width:100%; margin-top:8px}
.resultado{background:var(--ik); color:#D6DCF3; border-radius:var(--radio); padding:30px; margin-bottom:20px; box-shadow:var(--sombra-l)}
.resultado h3{color:#fff; font-family:var(--display); font-size:1.5rem}
.resultado p{color:#C3CAE8}
.resultado .micro,.cta .micro{font-size:.78rem; color:var(--cta-muted); margin:12px auto 0}
.expectativa ol{padding-left:1.25rem}
.expectativa li{margin:.75rem 0}

/* Artículos */
.articulo{display:block; background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio-s); padding:24px; color:inherit; transition:.18s}
.articulo:hover{border-color:var(--br); box-shadow:var(--sombra); text-decoration:none; transform:translateY(-3px)}
.articulo .tag{font-family:'IBM Plex Mono'; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brh)}
.articulo h4{font-family:'Sora'; margin:9px 0 6px; color:var(--ik)}
.articulo p{margin:0; font-size:.92rem; color:var(--sf)}

/* FAQ */
details{background:var(--surf); border:1px solid var(--ln); border-radius:var(--radio-s); padding:17px 21px; margin-bottom:11px; transition:.16s}
details[open]{border-color:var(--ln2); box-shadow:var(--sombra-s)}
summary{cursor:pointer; font-family:'Sora'; font-weight:600; color:var(--ik); list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; float:right; color:var(--brh); font-weight:700}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0; font-size:.95rem}

/* Prosa */
.prosa{max-width:820px}
.prosa h2{margin-top:2.2rem}
.prosa h2:first-child{margin-top:0}
.prosa h3{margin-top:1.7rem}
.prosa ul{padding-left:1.2rem}
.prosa li{margin:.35rem 0}
.prosa code{font-family:'IBM Plex Mono'; font-size:.85em; background:var(--sf2); padding:2px 6px; border-radius:5px; color:var(--ik)}

/* Migas */
.migas{display:flex; gap:8px; flex-wrap:wrap; font-size:.84rem; color:var(--sf); padding:24px 0 0; font-family:'IBM Plex Mono',monospace}
.migas a{color:var(--sf)}
.migas a:hover{color:var(--brh)}
.migas span{color:var(--ln2)}

/* Page hero */
.page-hero{padding:clamp(38px,5vw,64px) 0 clamp(34px,4vw,52px); position:relative; overflow:hidden;
  background:radial-gradient(760px 360px at var(--mouse-x) 0%,var(--bs),transparent 60%),var(--gd)}
.page-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(640px 300px at 80% 0%,#000,transparent 72%)}
.page-hero .contenedor{position:relative}
.page-hero h1{font-size:clamp(2rem,4.2vw,3.2rem); max-width:860px}
.page-hero .lead{max-width:740px}
.page-proof{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.page-proof span{font-family:'IBM Plex Mono'; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sf); border:1px solid var(--ln); background:color-mix(in srgb,var(--surf) 72%,transparent); border-radius:999px; padding:6px 10px}

/* Mapa de producto */
.producto-mapa{background:linear-gradient(180deg,var(--gd),var(--surf) 18%,var(--surf) 88%,var(--gd))}
.mapa-intro{display:grid; grid-template-columns:.75fr 1.25fr; column-gap:clamp(34px,7vw,90px); align-items:end; padding-bottom:42px; border-bottom:1px solid var(--ln)}
.mapa-intro .kicker{grid-column:1}.mapa-intro h2{grid-column:1; margin-bottom:0}.mapa-intro .lead{grid-column:2; grid-row:1/span 2; margin:0}
.grupo-titulo{display:flex; align-items:center; gap:14px; margin:46px 0 17px}
.grupo-titulo span{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ik); color:#fff; font-family:'IBM Plex Mono'; font-size:.65rem}
.grupo-titulo h3{margin:0; font-family:var(--display); font-size:1.45rem}
.producto-mapa .modulo{min-height:166px; position:relative; overflow:hidden; padding:25px}
.producto-mapa .modulo::after{content:""; position:absolute; right:-42px; bottom:-52px; width:110px; height:110px; border-radius:50%; background:color-mix(in srgb,var(--br) 9%,transparent); transition:.25s}
.producto-mapa .modulo:hover::after{transform:scale(1.45)}

/* Precio explicado antes de los planes */
.precio-capas{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--ln); border-radius:var(--radio); overflow:hidden; background:var(--ln); margin-bottom:56px; box-shadow:var(--sombra-s)}
.precio-capas>div{background:var(--surf); padding:24px; display:grid; grid-template-columns:auto 1fr; column-gap:12px}
.precio-capas span{grid-row:1/span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--bs); color:var(--brh); font-family:'IBM Plex Mono'; font-size:.68rem}
.precio-capas strong{font-family:'Sora'; color:var(--ik); font-size:.9rem}.precio-capas p{grid-column:2; margin:3px 0 0; color:var(--sf); font-size:.78rem; line-height:1.4}

/* Diagnóstico guiado */
.diagnostico-pasos{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:16px; margin:0 0 30px; padding:20px 24px; border:1px solid var(--ln); border-radius:var(--radio); background:var(--surf); box-shadow:var(--sombra-s)}
.diagnostico-pasos>div{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center}
.diagnostico-pasos span{grid-row:1/span 2; font-family:'IBM Plex Mono'; color:var(--brh); font-size:.66rem; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--bs)}
.diagnostico-pasos b{font-family:'Sora'; color:var(--ik); font-size:.8rem}.diagnostico-pasos small{color:var(--sf); font-size:.72rem; line-height:1.2}
.diagnostico-pasos>i{display:block; width:40px; height:1px; background:linear-gradient(90deg,var(--ln2),var(--br),var(--ln2))}

/* Marquesina */
.marquesina{background:var(--ik); color:#D6DCF3; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); width:100%; max-width:100%; position:relative; contain:layout paint; isolation:isolate; box-sizing:border-box}
.marquesina .pista{display:flex; gap:44px; white-space:nowrap; padding:15px 0; width:max-content; animation:desliza 36s linear infinite; will-change:transform; backface-visibility:hidden; transform:translateZ(0); box-sizing:border-box}
.marquesina:hover .pista,.marquesina:focus-within .pista{animation-play-state:paused}
.marquesina span{font-family:'IBM Plex Mono',monospace; font-size:.82rem; letter-spacing:.03em; display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; box-sizing:border-box}
.marquesina span::after{content:"◇"; color:var(--br-lite); opacity:.7}
.marquesina b{color:#fff; font-weight:600}
@keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquesina .pista{animation:none}}

/* CTA */
.cta{background:var(--cta-bg,var(--ik)); color:#E6EAF7; border-radius:var(--radio); padding:clamp(38px,5vw,60px); text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(500px 240px at 50% 0%,#000,transparent 72%)}
.cta>*{position:relative}
.cta h2{color:#fff}
.cta p{color:var(--cta-muted,#AEB4D6); max-width:620px; margin:0 auto 24px}
.cta .kicker{color:var(--br-lite,#9AA6E8); justify-content:center}
.cta .kicker::before{display:none}
.correo{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.correo input{min-height:52px; padding:0 18px; border-radius:var(--radio-s); border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.26); color:#fff; font-size:.95rem; min-width:290px}
.correo input::placeholder{color:rgba(255,255,255,.5)}

/* Conmutador de marca */
.switch{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:6px;
  background:var(--surf); border:1px solid var(--ln); border-radius:999px; padding:7px 12px 7px 14px; box-shadow:var(--sombra-l)}
.switch span{font-size:.7rem; color:var(--sf); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.1em}
.switch button{border:1px solid var(--ln); background:transparent; color:var(--tx); font:inherit; font-size:.79rem;
  padding:5px 11px; border-radius:999px; cursor:pointer; min-height:0; transition:.15s}
.switch button:hover{border-color:var(--ln2)}
.switch button.on{background:var(--br); color:#fff; border-color:var(--br)}
.switch a{font-size:.77rem; color:var(--brh); margin-left:6px; white-space:nowrap}

/* Comparación de marcas */
.marcas{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.marca-preview{border:1px solid var(--ln); border-radius:var(--radio); padding:26px; background:var(--surf); color:var(--tx); display:flex; flex-direction:column; gap:16px}
.marca-preview h3{font-family:var(--display); font-size:1.32rem; line-height:1.22; color:var(--ik)}
.marca-preview p{font-size:.92rem; color:var(--tx)}
.marca-preview .fila-botones{display:flex; gap:10px; flex-wrap:wrap}
.marca-preview .btn{min-height:0; padding:10px 16px; font-size:.85rem}
.swatches{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:auto; padding-top:8px}
.swatches div{display:flex; flex-direction:column; gap:5px}
.swatches i{height:38px; border-radius:8px; border:1px solid rgba(0,0,0,.08)}
.swatches b{font-family:'IBM Plex Mono',monospace; font-size:.58rem; color:var(--sf); font-weight:400}
.mp-nombre{display:flex; align-items:center; gap:10px; font-family:'Sora'; font-weight:700; font-size:1.12rem; color:var(--ik)}
.mp-nombre img{height:30px}

/* Identidad / logo */
.encabezado{max-width:720px; margin:0 0 36px}
.encabezado h2{font-size:clamp(1.75rem,3.2vw,2.4rem); margin:10px 0 12px}
.encabezado p{color:var(--tx)}
.logos{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.shortlist-logo{background:linear-gradient(150deg,var(--ik),color-mix(in srgb,var(--brd) 74%,var(--ik))); color:#D6DCF3}
.shortlist-logo h2,.shortlist-logo h3{color:#fff}.shortlist-logo .lead{color:#C3CAE8}.shortlist-logo .kicker{color:var(--br-lite)}
.shortlist-grid{grid-template-columns:repeat(3,1fr); margin-top:40px}
.shortlist-grid .logo-card{background:color-mix(in srgb,var(--surf) 96%,transparent); border-color:rgba(255,255,255,.12); color:var(--tx)}
.shortlist-grid .logo-card h3{color:var(--ik)}
.shortlist-grid .logo-principal{min-height:190px; background:linear-gradient(145deg,var(--surf),var(--bs))}
.logo-veredicto{display:grid; grid-template-columns:.75fr 1.25fr; gap:28px; align-items:start; margin-top:30px; padding:28px; border:1px solid rgba(255,255,255,.14); border-radius:var(--radio); background:var(--ik2)}
.logo-veredicto>div:first-child>span{font-family:'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.12em; color:var(--br-lite); font-size:.67rem}
.logo-veredicto h3{font-family:var(--display); font-size:1.8rem; margin-top:7px}.logo-veredicto p{color:#C3CAE8; margin:0}
.logo-veredicto .tabla-envoltura{border-color:rgba(255,255,255,.14)}
.familia-dr{background:linear-gradient(180deg,var(--gd),var(--surf))}
.familia-dr-grid{grid-template-columns:repeat(2,1fr)}
.familia-dr-grid .logo-card:nth-child(3){border:2px solid var(--br); box-shadow:var(--sombra-l)}
.familia-dr-grid .logo-card:nth-child(3) h3{color:var(--brh)}
.familia-ranking{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px}
.familia-ranking>div{display:flex; align-items:center; gap:12px; padding:17px; border:1px solid var(--ln); border-radius:var(--radio-s); background:var(--surf)}
.familia-ranking b{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:var(--ik); color:#fff; font-family:'IBM Plex Mono'; font-size:.67rem}
.familia-ranking span{display:flex; flex-direction:column}.familia-ranking strong{font-family:'Sora'; color:var(--ik); font-size:.82rem}.familia-ranking small{color:var(--sf); font-size:.72rem; line-height:1.35; margin-top:2px}
.logo-card{border:1px solid var(--ln); border-radius:var(--radio); padding:24px; background:var(--surf); box-shadow:var(--sombra-s)}
.logo-card h3{font-size:1.02rem; color:var(--ik); margin-bottom:4px}
.logo-card .idea{font-size:.9rem; color:var(--tx); margin-bottom:18px; min-height:44px}
.logo-principal{display:flex; align-items:center; justify-content:center; height:162px; background:var(--gd); border:1px solid var(--ln); border-radius:14px; margin-bottom:16px}
.logo-principal.ok-dark{background:var(--ik); border-color:transparent}
.mono-row{display:flex; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--ln); flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:11px}
.chip.claro{background:#fff; border:1px solid var(--ln)}
.chip.oscuro{background:var(--ik)}
.lockup{display:flex; align-items:center; gap:11px}
.lockup .nombre{font-family:'Sora'; font-weight:700; font-size:1.55rem; color:var(--ik); letter-spacing:-.02em; line-height:1}
.lockup .nombre small{display:block; font-size:.64rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--sf); font-family:'IBM Plex Mono',monospace; margin-top:5px}
.tab-mock{width:132px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--sf)}
.tab-mock .barra-tab{display:flex; align-items:flex-end; gap:4px; justify-content:center; margin-bottom:8px}
.tab-mock .tab{background:var(--sf2); border:1px solid var(--ln); border-bottom:none; border-radius:7px 7px 0 0; padding:7px 9px 9px; display:flex; align-items:center; gap:6px}
.tab-mock .tab.on{background:var(--surf)}
.mock-barra{display:flex; align-items:center; gap:13px; background:var(--ik); padding:14px 20px; border-radius:14px 14px 0 0; color:var(--br)}
.mock-barra .nombre{font-family:'Sora'; font-weight:700; font-size:1.12rem; color:#fff}
.mock-barra .menu{margin-left:auto; display:flex; gap:16px; font-size:.82rem; color:#C9D0EC}
.mock-pie{background:var(--surf); border:1px solid var(--ln); border-top:none; border-radius:0 0 14px 14px; padding:22px 20px}
.variantes{width:100%; border-collapse:collapse; font-size:.92rem}
.variantes th,.variantes td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--ln); vertical-align:top}
.variantes th{font-family:'Sora'; font-size:.82rem; color:var(--ik)}
.variantes td,.variantes th{border-left:0; border-right:0; border-top:0}

/* Footer */
footer{background:var(--ik); color:#B9C0DE; padding:64px 0 34px; margin-top:0}
footer .marca{color:#fff}
footer .marca .logo{color:var(--br-lite)}
footer .marca small{color:#8A91B8}
.pie{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px}
.pie>div>p{color:#9AA1C6; font-size:.9rem; max-width:300px}
.pie h4{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#8A91B8; margin-bottom:16px}
.pie a{display:block; color:#C7CDE6; font-size:.92rem; padding:5px 0}
.pie a:hover{color:#fff}
.pie .marca{margin-bottom:16px}
.legal{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:#8A91B8; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.legal a{color:#C7CDE6; text-decoration:underline; text-underline-offset:3px}
.legal a:hover{color:#fff}

/* Revelado al hacer scroll */
[data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1; transform:none; transition:none}}
@media(prefers-reduced-motion:reduce){.hero-atmosfera i,.mock,.mock-top .sellar i,.mock-panel{animation:none}.mock{transform:none}.hero{transition:none}}

/* Responsive */
@media(max-width:1024px){
  .bento .b.span-4,.bento .b.span-3{grid-column:span 3}
  .camino.vertical{grid-template-columns:1fr 1fr}
}
@media(max-width:1120px){
  .nav{position:absolute; top:var(--h); left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--surf); border-bottom:1px solid var(--ln); padding:12px; gap:2px;
    display:none; box-shadow:var(--sombra); margin-left:0}
  .nav-toggle:checked + .barra .nav{display:flex}
  .menu-btn{display:flex}
  .nav a{padding:14px 12px}
  .menu-btn:hover{background:var(--sf2)}
}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero{min-height:auto}
  .mock{transform:none; animation:none; max-width:660px; margin:10px auto 0}
  .cta{padding:40px 24px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr; gap:28px}
  .feature.inv .texto{order:0}
  .bento{grid-template-columns:1fr}
  .bento .b,.bento .b.span-3,.bento .b.span-4,.bento .b.ancho{grid-column:auto}
  .marcas,.logos{grid-template-columns:1fr}
  .shortlist-grid{grid-template-columns:1fr}.logo-veredicto{grid-template-columns:1fr}
  .familia-dr-grid,.familia-ranking{grid-template-columns:1fr}
  .metricas{grid-template-columns:1fr 1fr}
  .metrica:nth-child(2){border-right:0}
  .metrica:nth-child(1),.metrica:nth-child(2){border-bottom:1px solid var(--ln)}
  .swatches{grid-template-columns:repeat(5,1fr)}
  .grid-precios,.diagnostico-grid{grid-template-columns:1fr}
  .demo-stage-head{grid-template-columns:1fr;gap:12px}.live-shell{grid-template-columns:1fr}.live-sidebar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-right:0;border-bottom:1px solid var(--ln)}.live-side-label,.live-sidebar-foot{grid-column:1/-1}.live-sidebar-foot{margin-top:0}.live-topbar{grid-template-columns:auto 1fr}.live-mode{display:none}
  .surface-layout{grid-template-columns:1fr}.evidence-grid{grid-template-columns:1fr}
  .mapa-intro{grid-template-columns:1fr}.mapa-intro .kicker,.mapa-intro h2,.mapa-intro .lead{grid-column:1; grid-row:auto}.mapa-intro .lead{margin-top:12px}
  .precio-capas{grid-template-columns:1fr}
  .plan.destacado{transform:none}
  .camino{grid-template-columns:1fr}
}
@media(max-width:600px){
  .barra > .btn.primario{display:none}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(2.65rem,13vw,4rem)}
  .hero h1 em{white-space:normal}
  .mock-app{grid-template-columns:34px 1fr}.mock-rail{padding-left:3px; padding-right:3px}.mock-rail i,.mock-rail .rail-logo{width:26px;height:26px}.mock-cuerpo{padding:13px 12px}.mock-panel{min-height:220px}
  .metricas{grid-template-columns:1fr}
  .metrica{border-right:0; border-bottom:1px solid var(--ln)}
  .metrica:last-child{border-bottom:0}
  .grid-4{grid-template-columns:1fr}
  .pie{grid-template-columns:1fr 1fr}
  .switch{left:12px; right:12px; justify-content:center; flex-wrap:wrap}
  .sello-badge{width:86px; height:86px}
  .mock-barra{gap:9px; padding:12px 14px}
  .mock-barra .menu{display:none}
  .camino.vertical{grid-template-columns:1fr}
  .diagnostico-pasos{grid-template-columns:1fr; gap:10px}.diagnostico-pasos>i{width:1px; height:14px; margin-left:14px; background:var(--ln2)}
  .live-demo{border-radius:16px}.live-topbar{grid-template-columns:1fr}.live-search{display:none}.live-sidebar{grid-template-columns:1fr;padding:10px}.live-patient:not(.on){display:none}.live-sidebar-foot,.live-side-label{display:none}.live-patient-head{padding:15px 13px 10px}.live-tabs{padding:0 8px;overflow-x:auto}.live-tabs button{padding:9px 8px;white-space:nowrap}.live-panel{padding:13px}.live-kpis{grid-template-columns:1fr 1fr}.live-kpis>div:last-child{grid-column:1/-1}.live-columns,.live-form-row{grid-template-columns:1fr}.live-odontogram{grid-template-columns:repeat(8,1fr);row-gap:24px}.live-tooth-detail{grid-template-columns:1fr}.live-tooth-detail button{justify-self:start}.live-audit>div{grid-template-columns:42px 10px 1fr}.live-audit em{display:none}.live-footer{flex-direction:column;gap:3px}
  .odonto-levels{grid-template-columns:1fr 1fr}.tooth-focus{grid-template-columns:1fr}.piece-history{grid-template-columns:1fr}.surface-map{transform:scale(.86);margin:-12px auto}.version-line{gap:4px;flex-wrap:wrap}.version-line i{width:12px}
  .odonto-tour-banner{flex-wrap:wrap}.odonto-tour-banner span{width:100%;margin:0}
}

/* La decoración no debe bloquear los controles de las demos. */
.sello-badge{pointer-events:none}
[data-product-demo] button,[data-live-demo] button{scroll-margin-top:110px}