/* SpinalAI — la identidad de la web ES la de la app.
   Los colores y las tipografías NO se inventaron acá: salen de
   mobile/src/design-system/tokens.ts (crema hueso, Fraunces, Inter, azul clínico)
   y de los renders anatómicos del banco (hueso beige, disco gris, nervio amarillo).
   Antes la web era azul frío + Sora: parecía otra empresa, y ESA era la razón por
   la que se leía a plantilla de IA. 27-ago-2026. */
:root{
  --bone:#F6F3ED;          /* fondo: el bg de la app y el hueso de los renders */
  --paper:#FFFDFA;         /* superficies */
  --ink:#1F1B15;           /* negro cálido, no azul frío */
  --ink-soft:#6F6860;
  --rule:#E7E0D5;
  --clinical:#1767CF;      /* el único color de acción */
  --clinical-deep:#0F4C9C;
  --clinical-soft:#E3EDFA;
  --nerve:#C8920F;         /* amarillo nervio: SOLO para marcar el hallazgo */
  --nerve-soft:#F6E7BC;
  --dark:#17130E;          /* negro cálido — nunca navy: rompía la familia */
  --success:#16A34A;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gut:clamp(24px,5vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;max-width:100%}
a,button,input,select,textarea,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{background:var(--bone);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--clinical);outline-offset:3px;border-radius:6px}

/* Fraunces con óptica automática: en 88px se afina y gana contraste, en 20px se
   engorda y se lee. Es la misma serif que usa la app. */
h1,h2,h3{font-family:var(--display);font-optical-sizing:auto;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
main{position:relative;z-index:1}

/* ---------------------------------------------------------------- nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,40px);background:rgba(246,243,237,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
nav .logo{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em}
nav .logo b{color:var(--clinical);font-weight:700}
nav .right{display:flex;align-items:center;gap:4px}
nav a.item{padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
nav a.item:hover,nav a.item[aria-current="page"]{color:var(--ink)}
nav a.cta{background:var(--ink);color:var(--bone);font-weight:500;font-size:14px;padding:10px 18px;border-radius:999px;white-space:nowrap}
nav a.cta:hover{background:var(--clinical)}
@media(max-width:640px){
  nav{height:56px}
  nav .logo{font-size:17px}
  nav .right{gap:0}
  nav a.item{padding:8px 8px;font-size:12.5px}
  nav a.cta{padding:8px 13px;font-size:12.5px}
}
@media(max-width:480px){nav a.cta{display:none}}
@media(max-width:380px){nav .logo{font-size:16px}nav a.item{padding:8px 6px;font-size:12px}}
@media(max-width:640px){nav .right:has(a.item:nth-of-type(4)) a.item{padding:8px 5px;font-size:12px}}
@media(max-width:460px){nav .right:has(a.item:nth-of-type(4)) a.item:nth-of-type(4){display:none}}

.progress{position:fixed;top:62px;left:0;height:2px;width:0;z-index:59;background:var(--clinical);pointer-events:none}
@media(max-width:640px){.progress{top:56px}}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  html.rvon .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.22,1,.36,1)}
  html.rvon .rv.in{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- héroe
   Alineado a la izquierda: antes todo estaba centrado y nada mandaba. */
.hero{padding-top:clamp(104px,17vw,150px);padding-bottom:0;text-align:left}
.hero h1{font-size:clamp(42px,10.5vw,88px);line-height:.98;letter-spacing:-.035em;max-width:15ch;margin:14px 0 0}
/* El énfasis lo hace la itálica de la propia serif, no un degradé de colores.
   Misma familia, mismo color: lo que cambia es la forma de la letra. */
.hero h1 .grad{font-style:italic;font-weight:500;letter-spacing:-.02em}
.hero p.sub{margin:22px 0 0;color:var(--ink-soft);font-size:clamp(16.5px,2vw,19px);max-width:46ch;line-height:1.55}
.hero .trial{margin-top:14px;font-size:13px;color:var(--ink-soft);text-align:left}
.hero .stores{justify-content:flex-start;margin-top:26px}
.hero.small{padding-top:clamp(104px,17vw,148px);padding-bottom:8px}
.hero.small h1{font-size:clamp(36px,7vw,62px);max-width:18ch}

/* ---------------------------------------------------------------- botón único */
.stores{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-height:56px;padding:9px 26px;border-radius:999px;background:var(--ink);color:var(--bone);text-align:left;transition:background .2s,transform .2s}
.store small{font-size:11px;opacity:.72}
.store span{font-weight:600;font-family:var(--body);font-size:16.5px;letter-spacing:-.01em}
.store:hover{background:var(--clinical);transform:translateY(-2px)}
.store.alt{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.trial{margin-top:14px;font-size:13px;color:var(--ink-soft);text-align:center}

/* ------------------------------------------------- el escenario: dos objetos reales
   A la izquierda la app de verdad (captura del App Store). A la derecha la anatomía,
   recortada sobre el crema: da profundidad sin un solo adorno inventado. */
.stage{position:relative;margin:clamp(40px,7vw,64px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.74fr);align-items:end;gap:clamp(10px,3vw,40px)}
.phone{position:relative;border-radius:22px;overflow:hidden;background:var(--paper);border:1px solid var(--rule);box-shadow:0 30px 60px -34px rgba(31,27,21,.45),0 2px 6px -2px rgba(31,27,21,.07)}
.phone img{width:100%;display:block}
.anat{position:relative;justify-self:end;align-self:end}
/* El render es un recorte de columna: termina en corte plano. El desvanecido hace
   que emerja del crema en vez de parecer una foto mal cortada. */
.anat img{width:100%;max-width:330px;margin-left:auto}
/* Una sola señal amarilla en toda la página, justo donde el render muestra el nervio. */
.anat figcaption{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12px;color:var(--ink-soft)}
.anat figcaption i{flex:none;width:18px;height:2px;background:var(--nerve);border-radius:2px;font-style:normal}
/* En teléfono dos objetos lado a lado quedan diminutos los dos. Se superponen:
   la app adelante y grande, la anatomía detrás saliendo por el borde. */
@media(max-width:700px){
  .stage{display:block;position:relative}
  .phone{width:74%;position:relative;z-index:2}
  .anat{position:absolute;right:-9%;bottom:-4%;width:44%;z-index:1;justify-self:auto;opacity:.9}
  .anat img{max-width:none;width:100%}
  .anat figcaption{display:none}
}

/* ---------------------------------------------------------------- el informe traducido
   Elemento firma: la página no cuenta que traduce jerga médica — la traduce. */
.report{margin:clamp(80px,13vw,140px) 0 0}
.report .card{background:var(--paper);border:1px solid var(--rule);border-radius:20px;overflow:hidden}
.report .side{padding:clamp(22px,4.4vw,38px)}
.report .side + .side{border-top:1px solid var(--rule)}
.report .eyebrow{display:block;margin-bottom:15px}
.rt-jargon{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(12.5px,2.6vw,14px);line-height:1.9;color:var(--ink-soft)}
/* El término marcado: subrayado color nervio. No resaltado de fondo — eso grita;
   el subrayado señala. Donde hay glosario, además es un enlace de verdad. */
.term{color:var(--ink);text-decoration:none;box-shadow:inset 0 -.4em 0 var(--nerve-soft);border-bottom:2px solid var(--nerve)}
a.term:hover{box-shadow:inset 0 -.95em 0 var(--nerve-soft)}
.rt-plain{font-family:var(--display);font-optical-sizing:auto;font-weight:500;font-size:clamp(19px,4.2vw,28px);line-height:1.34;letter-spacing:-.02em;color:var(--ink)}
.report .foot{margin-top:18px;font-size:12.5px;color:var(--ink-soft)}
@media(min-width:820px){
  .report .card{display:grid;grid-template-columns:1fr 1fr}
  .report .side + .side{border-top:0;border-left:1px solid var(--rule)}
}

/* ---------------------------------------------------------------- banda vértebras
   Se mantiene el scroll que arma la columna pieza por pieza: eso SÍ significa algo
   (el plan se construye con cada check-in). Cambian los colores a hueso y nervio. */
.vert{position:relative;height:230vh;background:var(--dark);border-radius:clamp(20px,4vw,32px);margin:clamp(80px,13vw,140px) var(--gut) 0;overflow:clip}
.vstage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gut);text-align:center}
.vstage .eyebrow{color:rgba(246,243,237,.5)}
.vstage h2{color:var(--bone);font-size:clamp(32px,6.4vw,60px);line-height:1.02;letter-spacing:-.03em;margin-top:14px;max-width:15ch}
.vdiscs{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:clamp(30px,6vw,46px)}
.vdiscs .node{width:16px;height:16px;border-radius:50%;background:var(--nerve);box-shadow:0 0 26px rgba(200,146,15,.55);will-change:transform,opacity}
.vdiscs .d{height:14px;border-radius:999px;background:linear-gradient(180deg,#F4EEE2,#D9CDB6);will-change:transform,opacity}
.vstage p.note{margin-top:clamp(30px,6vw,46px);color:rgba(246,243,237,.66);max-width:42ch;font-size:15.5px}

/* ---------------------------------------------------------------- mazo */
.deck{padding-top:clamp(80px,13vw,140px)}
.deck .head{text-align:left;margin-bottom:clamp(28px,5vw,44px);max-width:34ch}
.deck h2,.sect h2{font-size:clamp(30px,5.6vw,50px);line-height:1.04;letter-spacing:-.03em}
.deck .head p{color:var(--ink-soft);margin-top:12px;font-size:17px}
.dcard{position:sticky;top:96px;max-width:760px;margin:0 auto 24vh;background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:clamp(26px,5vw,46px);box-shadow:0 24px 50px -34px rgba(31,27,21,.4);will-change:transform;transform-origin:50% 0}
.dcard:nth-of-type(2){top:110px}
.dcard:nth-of-type(3){top:124px}
.dcard:last-of-type{margin-bottom:6vh}
/* La numeración 01/02/03 se queda porque el contenido SÍ es una secuencia:
   evaluación -> plan -> informe. Es el orden real en que usás la app. */
.dcard .n{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:11px;color:var(--ink-soft);letter-spacing:.2em}
.dcard .n i{display:inline-block;width:22px;height:1px;background:var(--rule);font-style:normal}
.dcard h3{font-size:clamp(24px,4.2vw,34px);line-height:1.08;letter-spacing:-.025em;margin:14px 0 10px}
.dcard p{color:var(--ink-soft);font-size:clamp(15.5px,1.9vw,17px);max-width:52ch}
.dcard .tag{display:inline-flex;margin-top:20px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--clinical-soft);color:var(--clinical-deep)}

/* ---------------------------------------------------------------- cifras
   Una fila fina con líneas, no cuatro tarjetas de vidrio. */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;padding-top:clamp(70px,11vw,110px)}
.stat{text-align:left;padding:24px 0;border-top:1px solid var(--rule)}
.stat:nth-child(odd){padding-right:18px}
.stat:nth-child(even){padding-left:18px;border-left:1px solid var(--rule)}
.stat b{display:block;font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:clamp(38px,7vw,56px);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--ink-soft);font-size:13.5px;margin-top:8px;max-width:22ch}
@media(min-width:760px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat:nth-child(odd),.stat:nth-child(even){padding-left:22px;padding-right:22px;border-left:1px solid var(--rule)}
  .stat:first-child{padding-left:0;border-left:0}
}

/* ---------------------------------------------------------------- secciones */
.sect{padding-top:clamp(70px,11vw,120px)}
.sect .head{text-align:left;margin-bottom:clamp(26px,4.4vw,40px);max-width:34ch}
.sect .head p{color:var(--ink-soft);margin-top:12px;max-width:52ch}
/* Sin sombras ni vidrio: las fichas comparten una retícula, como un cuadro clínico. */
.gcards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:18px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.gcard{background:var(--paper);padding:clamp(24px,3.4vw,32px)}
.gcard .n{font-family:var(--body);font-weight:600;font-size:11px;color:var(--ink-soft);letter-spacing:.2em}
.gcard h3{font-size:20px;line-height:1.2;letter-spacing:-.02em;margin:10px 0 8px}
.gcard p{color:var(--ink-soft);font-size:15px;line-height:1.55}

/* ---------------------------------------------------------------- precios */
.prices{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:820px}
.price{background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:clamp(26px,4vw,34px)}
.price.pro{border:1px solid var(--ink);position:relative}
.price.pro::before{content:attr(data-ribbon);position:absolute;top:-12px;left:28px;background:var(--ink);color:var(--bone);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:999px}
.price h3{font-size:20px}
.price .amount{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:clamp(38px,6vw,50px);letter-spacing:-.04em;color:var(--ink);margin:10px 0 2px;font-variant-numeric:tabular-nums}
.price .amount small{font-size:15px;color:var(--ink-soft);font-weight:400;font-family:var(--body);letter-spacing:0}
.price .desc{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px}
.price ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.price li{display:flex;gap:10px;font-size:15px;color:var(--ink)}
.price li::before{content:"";flex:none;width:15px;height:15px;margin-top:5px;border-radius:50%;background:var(--clinical-soft);box-shadow:inset 0 0 0 1.5px var(--clinical)}

/* ---------------------------------------------------------------- FAQ */
.faq{max-width:760px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:18px;letter-spacing:-.02em;padding:20px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{color:var(--ink-soft);font-size:15.5px;padding-bottom:22px;max-width:60ch}

/* ---------------------------------------------------------------- captura de mail */
.notify{max-width:560px;background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:clamp(26px,4vw,34px);text-align:left}
.notify h3{font-size:22px;letter-spacing:-.02em}
.notify p{color:var(--ink-soft);font-size:15px;margin-top:8px}
.notify form{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.notify input{flex:1;min-width:200px;height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--rule);background:var(--bone);font-size:16px;font-family:var(--body);color:var(--ink)}
.notify input:focus{outline:2px solid var(--clinical);outline-offset:1px;border-color:var(--clinical)}
.notify button{height:52px;padding:0 24px;border:0;border-radius:12px;background:var(--ink);color:var(--bone);font-weight:500;font-size:16px;font-family:var(--body);cursor:pointer}
.notify button:hover{background:var(--clinical)}
.notify button[aria-busy="true"]{opacity:.85;cursor:progress}
.notify button[aria-busy="true"]::after{content:"";display:inline-block;width:13px;height:13px;margin-left:9px;vertical-align:-2px;border:2px solid rgba(246,243,237,.45);border-top-color:var(--bone);border-radius:50%;animation:wlspin .7s linear infinite}
@keyframes wlspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.notify button[aria-busy="true"]::after{animation:none}}
.hero .notify{margin-top:28px}
.wlmsg{margin-top:12px;font-weight:500}

.platchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden;max-width:720px;margin:36px 0 0}
.platchips .pc{background:var(--paper);padding:18px;text-align:left}
.platchips .pc b{font-family:var(--display);font-optical-sizing:auto;font-weight:600;display:block;font-size:17px;letter-spacing:-.02em}
.platchips .pc span{color:var(--ink-soft);font-size:13px}
.platchips a.pc:hover{background:var(--bone)}

/* ---------------------------------------------------------------- cierre */
.cta{margin:clamp(80px,13vw,140px) auto clamp(60px,9vw,100px);width:calc(100% - var(--gut)*2);max-width:1080px;text-align:left;background:var(--dark);border-radius:clamp(20px,4vw,32px);padding:clamp(40px,7vw,72px) clamp(26px,5vw,64px);color:var(--bone)}
.cta h2{font-size:clamp(30px,5.6vw,50px);line-height:1.04;letter-spacing:-.03em;max-width:16ch}
.cta p{color:rgba(246,243,237,.7);margin-top:12px;max-width:48ch}
.cta .stores{justify-content:flex-start}
.cta .store{background:var(--bone);color:var(--ink)}
.cta .store:hover{background:#fff;transform:translateY(-2px)}
.cta .trial{text-align:left;color:rgba(246,243,237,.55)}

footer{border-top:1px solid var(--rule);padding:clamp(38px,6vw,54px) var(--gut) 60px;position:relative;z-index:1}
footer .cols{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;align-items:flex-start}
footer .brandcol{max-width:360px}
footer .logo{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em}
footer .logo b{color:var(--clinical)}
footer .brandcol p{color:var(--ink-soft);font-size:14.5px;margin-top:10px}
footer .links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft)}
footer .links a:hover{color:var(--ink)}
footer .legal{max-width:1080px;margin:26px auto 0;color:var(--ink-soft);font-size:12.5px}
footer .flangs{max-width:1080px;margin:20px auto 0;font-size:13px;color:var(--ink-soft)}
footer .flangs a{padding:2px 4px}
footer .flangs a[aria-current="true"]{color:var(--ink);font-weight:500}
footer .flangs a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .dcard{position:static;margin:0 auto 20px}
  .vert{height:auto}
  .vstage{position:static;height:auto;padding:clamp(70px,11vw,100px) var(--gut)}
}

select.lang{appearance:none;-webkit-appearance:none;border:1px solid var(--rule);background:transparent;border-radius:999px;padding:8px 26px 8px 12px;font:500 13px var(--body);color:var(--ink-soft);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F6860' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
select.lang:hover{color:var(--ink)}
@media(max-width:640px){select.lang{display:none}}

/* Cartel de idioma: en el flujo, nunca encima del contenido. */
.langbar{display:flex;align-items:center;gap:6px;white-space:nowrap;width:max-content;max-width:calc(100vw - 32px);margin:clamp(74px,15vw,86px) auto 0;position:relative;z-index:1;background:var(--ink);color:var(--bone);border-radius:999px;padding:7px 7px 7px 17px;font:500 13.5px var(--body);box-shadow:0 12px 26px -18px rgba(31,27,21,.6)}
.langbar a{color:var(--bone);text-decoration:underline;text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis}
.langbar button{background:none;border:0;color:rgba(246,243,237,.6);font-size:14px;cursor:pointer;width:26px;height:26px;border-radius:50%;line-height:1;flex:none}
.langbar button:hover{color:var(--bone);background:rgba(246,243,237,.14)}
body:has(.langbar) .hero{padding-top:26px}