/* cvm+ medical — estilos compartidos.
   Hereda el lenguaje visual de la caja de ventas (mismos tokens), pero cambia
   el acento a verde clínico para que se lea como una línea propia. */
:root{
  --negro:#0A0A0A; --carbon:#141414; --panel:#1A1A1A; --panel2:#202020;
  --linea:#2A2A2A; --linea2:#343434;
  --blanco:#FAFAFA; --gris:#9A9A9A; --gris2:#6B6B6B;
  --morado:#7C3AED; --morado2:#9D5CFF; --amarillo:#FFD60A;
  --verde:#34D399; --verde2:#6EE7B7; --teal:#2DD4BF;
  --naranja:#FF9F0A; --rojo:#FF4D4D;
  --f:'League Spartan',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--negro); color:var(--blanco); font-family:var(--f); min-height:100vh;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:radial-gradient(1000px 560px at 12% -10%, rgba(45,212,191,.16), transparent 60%),
                   radial-gradient(800px 520px at 100% 0%, rgba(124,58,237,.10), transparent 55%);
  background-attachment:fixed;
}
.wrap{max-width:1180px; margin:0 auto; padding:36px 20px 90px}
.wrap.slim{max-width:1080px}

/* ---------------------------------------------------------------- cabecera */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:44px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.logo{font-weight:900; font-size:27px; letter-spacing:-1.3px; line-height:1}
.logo b{color:var(--morado2)} .logo .plus{color:var(--amarillo)}
.logo .med{color:var(--teal); font-size:20px; letter-spacing:-.5px; margin-left:3px}
.tagchip{font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gris);
  border:1px solid var(--linea); border-radius:999px; padding:7px 13px; background:rgba(255,255,255,.02)}
a.tagchip{text-decoration:none; transition:.2s}
a.tagchip:hover{color:var(--blanco); border-color:var(--linea2)}

.hero{max-width:780px}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--teal); margin-bottom:14px}
h1{font-size:clamp(34px,6.2vw,64px); font-weight:900; letter-spacing:-2px; line-height:.98; text-transform:lowercase}
h1 em{font-style:normal; color:var(--amarillo)}
h2{font-size:clamp(22px,3vw,30px); font-weight:900; letter-spacing:-1px; text-transform:lowercase}
.sub{color:var(--gris); font-size:clamp(16px,2.2vw,19px); font-weight:500; max-width:660px; margin-top:18px; line-height:1.5}

/* ---------------------------------------------------------------- roles */
.roles{display:flex; gap:9px; flex-wrap:wrap; margin-top:30px}
.rol{font-family:var(--mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  background:var(--panel); border:1px solid var(--linea); color:var(--gris); border-radius:999px;
  padding:9px 15px; cursor:pointer; transition:.2s}
.rol:hover{color:var(--blanco); border-color:var(--linea2); transform:translateY(-2px)}
.rol[aria-pressed="true"]{background:linear-gradient(120deg,rgba(45,212,191,.22),rgba(124,58,237,.20));
  border-color:var(--teal); color:#EAFFFA; box-shadow:0 5px 18px -6px rgba(45,212,191,.6)}

/* ---------------------------------------------------------------- tarjetas */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

.card{position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--carbon)); border:1px solid var(--linea); border-radius:18px;
  padding:22px; min-height:216px; transition:transform .3s var(--ease), border-color .3s, opacity .3s}
.card::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c,var(--teal));
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-6px); border-color:var(--c,var(--teal));
  box-shadow:0 18px 40px -18px var(--c,var(--teal))}
.card:hover::after{transform:scaleY(1)}
.card:hover .ico{transform:scale(1.12) rotate(-4deg)}
.card .ico{transition:transform .3s var(--ease)}
/* Entrada escalonada: da sensación de que la página "se arma" para vos.
   Es el momento dopaminérgico — dura poco y no se repite. */
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.grid .card{animation:entra .55s var(--ease) both}
.grid .card:nth-child(1){animation-delay:.04s}
.grid .card:nth-child(2){animation-delay:.10s}
.grid .card:nth-child(3){animation-delay:.16s}
.grid .card:nth-child(4){animation-delay:.22s}
.grid .card:nth-child(5){animation-delay:.28s}
.grid .card:nth-child(6){animation-delay:.34s}
/* El badge de norma respira al pasar por encima: refuerza que la ley es el eje */
.card:hover .badge{background:var(--c,var(--teal));color:#08110F;border-color:transparent}
.card .badge{transition:background .25s,color .25s,border-color .25s}

@media(prefers-reduced-motion:reduce){
  .grid .card{animation:none}
  .card:hover{transform:none}
  .card:hover .ico{transform:none}
}
.card.oculta{display:none}
.card .n{font-family:var(--mono); font-size:11px; letter-spacing:1.6px; color:var(--gris2)}
.card .ico{width:38px; height:38px; margin:14px 0 12px; color:var(--c,var(--teal))}
.card .ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.card h3{font-size:20px; font-weight:900; letter-spacing:-.6px; text-transform:lowercase; margin-bottom:8px}
.card p{color:var(--gris); font-size:14.5px; line-height:1.5; font-weight:500}
.card .badge{position:absolute; top:20px; right:20px; font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--c,var(--teal)); border:1px solid currentColor; border-radius:999px; padding:4px 9px; opacity:.8}
.card .para{margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--gris2)}

/* ---------------------------------------------------------------- herramienta */
.split{display:grid; grid-template-columns:1fr 400px; gap:22px; margin-top:36px; align-items:start}
@media(max-width:980px){.split{grid-template-columns:1fr}}

.panel{background:linear-gradient(180deg,var(--panel),var(--carbon)); border:1px solid var(--linea);
  border-radius:18px; padding:24px; margin-bottom:18px}
.panel h3{font-size:19px; font-weight:900; letter-spacing:-.5px; text-transform:lowercase; margin-bottom:4px}
.panel .ley{font-family:var(--mono); font-size:10.5px; letter-spacing:.8px; color:var(--teal); margin-bottom:16px; line-height:1.5}
.panel .desc{color:var(--gris); font-size:14px; line-height:1.5; margin-bottom:16px}

.sticky{position:sticky; top:20px}

/* opciones tipo botón (mismo patrón que la caja de ventas: data-key/data-val) */
.opts{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--panel2); border:1px solid var(--linea); border-radius:11px; padding:13px 15px;
  color:var(--gris); font-family:var(--f); font-size:14.5px; font-weight:600; transition:.18s}
.opt:hover{border-color:var(--linea2); color:var(--blanco)}
.opt[aria-pressed="true"]{background:rgba(45,212,191,.10); border-color:var(--teal); color:var(--blanco)}
.opt .pill{flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:7px;
  background:var(--linea); font-family:var(--mono); font-size:12px; color:var(--gris)}
.opt[aria-pressed="true"] .pill{background:var(--teal); color:#062B26}

/* campos numéricos */
.field{margin-bottom:14px}
.field label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--gris); margin-bottom:7px}
.field label .unit{color:var(--gris2); text-transform:none; letter-spacing:.4px}
.field input, .field select{width:100%; background:var(--panel2); border:1px solid var(--linea); border-radius:10px;
  padding:12px 14px; color:var(--blanco); font-family:var(--mono); font-size:15px; transition:.18s}
.field input:focus, .field select:focus{outline:none; border-color:var(--teal); background:#181818}

/* resultado */
.res .big{font-size:clamp(40px,7vw,62px); font-weight:900; letter-spacing:-2.5px; line-height:1}
.res .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gris2); margin-top:6px}
.barra{height:9px; border-radius:999px; background:var(--linea); overflow:hidden; margin:16px 0 8px}
.barra i{display:block; height:100%; width:0; border-radius:999px; transition:width .6s var(--ease), background .3s}
.estado{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:1.2px; text-transform:uppercase; padding:7px 13px; border-radius:999px; border:1px solid currentColor}
.estado .pt{width:7px; height:7px; border-radius:50%; background:currentColor}

.lista{list-style:none; margin-top:16px}
.lista li{display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--linea); font-size:14px;
  color:var(--gris); line-height:1.45}
.lista li b{color:var(--blanco); font-weight:700}
.lista li .mk{flex:none; font-family:var(--mono); font-size:11px; color:var(--teal); padding-top:2px}
.lista li.falla .mk{color:var(--rojo)}
.lista li.ok .mk{color:var(--verde)}

.cta{display:block; text-align:center; text-decoration:none; margin-top:18px; padding:14px 18px; border-radius:12px;
  background:var(--teal); color:#062B26; font-weight:800; font-size:15px; transition:.2s}
.cta:hover{background:var(--verde2); transform:translateY(-2px)}
.cta.alt{background:transparent; border:1px solid var(--linea2); color:var(--blanco)}
.cta.alt:hover{border-color:var(--teal); color:var(--verde2); background:rgba(45,212,191,.06)}

/* ---------------------------------------------------------------- avisos */
.aviso{margin-top:34px; background:rgba(255,159,10,.06); border:1px solid rgba(255,159,10,.28);
  border-radius:14px; padding:18px 20px}
.aviso b{color:var(--naranja); font-family:var(--mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  display:block; margin-bottom:7px}
.aviso p{color:var(--gris); font-size:13.5px; line-height:1.55}

/* ---------------------------------------------------------------- himed */
.himed{position:relative; overflow:hidden; margin-top:52px; border-radius:22px;
  border:1px solid rgba(45,212,191,.34); padding:38px 34px;
  background:
    radial-gradient(720px 340px at 8% -20%, rgba(45,212,191,.16), transparent 62%),
    radial-gradient(620px 320px at 100% 0%, rgba(124,58,237,.16), transparent 58%),
    linear-gradient(180deg,#151A19,#101110)}
.himed .marca{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.himed .marca .nom{font-size:clamp(30px,5vw,46px); font-weight:900; letter-spacing:-1.8px; line-height:1}
.himed .marca .nom b{color:var(--teal)}
.himed .marca .por{font-family:var(--mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gris2)}
.himed h2{margin:16px 0 10px; max-width:640px}
.himed .lead{color:var(--gris); font-size:16.5px; line-height:1.55; max-width:660px}

.sellos{display:flex; gap:9px; flex-wrap:wrap; margin-top:22px}
.sello{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--verde2);
  border:1px solid rgba(45,212,191,.4); background:rgba(45,212,191,.08);
  border-radius:999px; padding:8px 14px}
.sello.n{color:var(--amarillo); border-color:rgba(255,214,10,.38); background:rgba(255,214,10,.07)}

.modulos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
@media(max-width:860px){.modulos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.modulos{grid-template-columns:1fr}}
.mod{background:rgba(255,255,255,.026); border:1px solid var(--linea); border-radius:13px; padding:15px 16px}
.mod b{display:block; font-size:15px; font-weight:800; letter-spacing:-.3px; margin-bottom:5px}
.mod span{display:block; font-family:var(--mono); font-size:9.6px; letter-spacing:.9px;
  text-transform:uppercase; color:var(--teal); line-height:1.5}

.himed .botones{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.himed .botones a{flex:1 1 230px; text-align:center; text-decoration:none; padding:15px 20px; border-radius:12px;
  font-weight:800; font-size:15.5px; transition:.2s}
.himed .botones .b1{background:var(--teal); color:#062B26}
.himed .botones .b1:hover{background:var(--verde2); transform:translateY(-2px)}
.himed .botones .b2{border:1px solid var(--linea2); color:var(--blanco)}
.himed .botones .b2:hover{border-color:var(--teal); color:var(--verde2); background:rgba(45,212,191,.06)}
.himed .pie{margin-top:18px; font-size:12px; color:var(--gris2); line-height:1.6}
.himed .pie a{color:var(--gris)}

/* franja compacta para las páginas de herramienta */
.himed-mini{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:34px; padding:20px 24px; border-radius:16px;
  border:1px solid rgba(45,212,191,.3); background:linear-gradient(90deg,rgba(45,212,191,.09),rgba(124,58,237,.07))}
.himed-mini .t{font-size:17px; font-weight:800; letter-spacing:-.4px}
.himed-mini .t b{color:var(--teal)}
.himed-mini .d{color:var(--gris); font-size:13.5px; margin-top:4px; line-height:1.5}
.himed-mini a.b{flex:none; text-decoration:none; background:var(--teal); color:#062B26;
  padding:12px 20px; border-radius:10px; font-weight:800; font-size:14.5px; transition:.2s}
.himed-mini a.b:hover{background:var(--verde2); transform:translateY(-2px)}

/* Cierre del hub: antes se acababa en las tarjetas y no había paso siguiente */
.cierre-hub{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-top:44px;padding:34px 32px;border-radius:20px;border:1px solid rgba(45,212,191,.3);
  background:linear-gradient(135deg,rgba(45,212,191,.11),rgba(124,58,237,.08))}
.cierre-hub > div:first-child{flex:1 1 440px}
.cierre-hub .et{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.7px;
  text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.cierre-hub h2{margin-bottom:11px}
.cierre-hub h2 em{font-style:normal;color:var(--amarillo)}
.cierre-hub p{color:var(--gris);font-size:15px;line-height:1.6;max-width:600px}
.cierre-hub .bts{display:flex;flex-direction:column;gap:10px;flex:none}
.cierre-hub .bts a{text-align:center;text-decoration:none;padding:14px 26px;border-radius:12px;
  font-weight:800;font-size:15px;transition:.2s;white-space:nowrap}
.cierre-hub .bts .b1{background:var(--teal);color:#062B26}
.cierre-hub .bts .b1:hover{background:var(--verde2);transform:translateY(-2px)}
.cierre-hub .bts .b2{border:1px solid var(--linea2);color:var(--blanco)}
.cierre-hub .bts .b2:hover{border-color:var(--teal);color:var(--verde2)}
@media(max-width:620px){.cierre-hub{padding:26px 22px}.cierre-hub .bts{width:100%}}

.foot{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:44px;
  padding-top:22px; border-top:1px solid var(--linea); font-size:12.5px; color:var(--gris2)}
.foot a{color:var(--gris); text-decoration:none}
.foot a:hover{color:var(--blanco)}

.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--panel2); border:1px solid var(--teal); color:var(--blanco); border-radius:11px;
  padding:12px 20px; font-size:14px; font-weight:600; transition:.3s var(--ease); z-index:99}
.toast.show{opacity:1; transform:translate(-50%,0)}