/* ==========================================================================
   Kinetlas · web pública (estilo Apple)
   Superficies claras (#fff / #f5f5f7), secciones negras donde manda el modelo 3D,
   tipografía del sistema (San Francisco) con Inter como respaldo y un único azul.
   ========================================================================== */

html{scroll-behavior:smooth; scroll-padding-top:64px}
body{overflow-x:hidden}
.skip{position:absolute; left:12px; top:-60px; z-index:200; padding:10px 14px; border-radius:10px; background:var(--k-accent); color:#fff; font-size:.9rem}
.skip:focus{top:10px}
.wrap{width:min(1120px, 100% - 44px); margin-inline:auto}

/* ---------- marca ---------- */
.logo{display:inline-flex; align-items:center; gap:8px; font:600 1.125rem/1 var(--k-font-display); letter-spacing:-.02em; color:var(--k-ink)}
.logo__mark{width:20px; height:20px; flex:none; background:currentColor;
  -webkit-mask:url(img/mark.svg) center/contain no-repeat; mask:url(img/mark.svg) center/contain no-repeat}

/* ---------- navegación global ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(22,22,23,.9); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav:not(.is-dark){background:rgba(250,250,252,.8); border-bottom:1px solid var(--k-hair)}
.nav__in{height:48px; display:flex; align-items:center; gap:24px; width:min(1120px, 100% - 44px); margin-inline:auto}
.nav .logo{font-size:1.0625rem}
.nav__links{display:flex; gap:30px; margin:0 auto}
.nav__links a{font-size:.8125rem; letter-spacing:-.01em; color:var(--k-ink); opacity:.8; transition:opacity var(--k-t-fast) ease-out}
.nav__links a:hover,.nav__links a[aria-current="page"]{opacity:1}
.nav__cta{display:flex; align-items:center; gap:16px}
.nav__login{font-size:.8125rem; color:var(--k-ink); opacity:.8}
.nav__login:hover{opacity:1}
.nav__burger{display:none; width:36px; height:36px; margin-right:-8px; border:0; background:transparent; cursor:pointer; position:relative}
.nav__burger span{position:absolute; left:10px; right:10px; height:1.5px; border-radius:1px; background:var(--k-ink); transition:transform var(--k-t) var(--k-ease), top var(--k-t) var(--k-ease)}
.nav__burger span:first-child{top:14px} .nav__burger span:last-child{top:21px}
.nav__burger[aria-expanded="true"] span:first-child{top:17.5px; transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{top:17.5px; transform:rotate(-45deg)}
.mnav{padding:12px 22px 28px; display:flex; flex-direction:column; animation:k-drop var(--k-t-slow) var(--k-ease)}
.mnav[hidden]{display:none}
.mnav > a{padding:12px 0; font:600 1.5rem/1.2 var(--k-font-display); letter-spacing:-.02em; color:var(--k-ink); border-bottom:1px solid var(--k-hair)}
.mnav__cta{display:grid; gap:10px; margin-top:22px}
@keyframes k-drop{from{opacity:0; transform:translateY(-8px)}}
@media (max-width: 900px){
  .nav__links,.nav__login,.nav__cta > .k-btn{display:none}
  .nav__burger{display:block}
  .nav__in{justify-content:space-between}
}

/* ---------- héroe ---------- */
.hero{padding:clamp(56px, 9vw, 96px) 0 clamp(56px, 7vw, 88px); text-align:center; overflow:hidden}
.hero__copy{max-width:880px}
.hero__brand{margin:0 0 10px; font:600 clamp(1.25rem, 2vw, 1.5rem)/1.1 var(--k-font-display); letter-spacing:-.015em; color:var(--k-warn)}
.hero .k-display{font-size:clamp(2.4rem, 5.4vw, 4.25rem); line-height:1.06}
.hero .k-lead{max-width:680px; margin:20px auto 0}
.hero__cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 28px; margin-top:30px}
.k-link--lg{font-size:1.0625rem}
.hero__stage{position:relative; height:clamp(520px, 76svh, 780px); margin-top:clamp(28px, 4vw, 48px); display:flex; justify-content:center; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.hero__stage::before{content:""; position:absolute; left:50%; top:52%; width:min(760px, 110vw); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(41,151,255,.14), rgba(41,151,255,0)); pointer-events:none}
.hero__stage.is-drag{cursor:grabbing}
.hero__stage canvas{position:relative; height:100%; width:auto}
.float{position:absolute; display:flex; flex-direction:column; gap:2px; padding:11px 15px 11px 32px; border-radius:var(--k-r-md); text-align:left;
  font-size:.875rem; font-weight:600; letter-spacing:-.01em; pointer-events:none; transition:opacity var(--k-t) ease-out, transform var(--k-t) var(--k-ease)}
.float i{position:absolute; left:14px; top:16px; width:8px; height:8px; border-radius:50%}
.float small{font-weight:400; color:var(--k-ink-2); font-size:.78rem}
.float--a{left:calc(50% - 400px); top:30%}
.float--b{left:calc(50% + 190px); top:46%}
.float.is-hidden{opacity:0; transform:translateY(6px)}
.stage__hint{position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); margin:0; font-size:.8125rem; color:var(--k-ink-3); transition:opacity var(--k-t-slow)}
.hero__stage.was-dragged .stage__hint{opacity:0}
.hero__stats{display:grid; grid-template-columns:repeat(4, 1fr); max-width:860px; margin-top:clamp(40px, 5vw, 64px); padding-top:32px; border-top:1px solid var(--k-hair)}
.hero__stats > div{display:flex; flex-direction:column; gap:4px}
.hero__stats dt{font:600 clamp(1.75rem, 3vw, 2.5rem)/1 var(--k-font-display); letter-spacing:-.02em}
.hero__stats dd{margin:0; font-size:.875rem; color:var(--k-ink-2)}
@media (max-width: 760px){
  .hero__stage{height:min(66svh, 560px)}
  .float{font-size:.78rem; padding:8px 11px 8px 27px} .float i{left:11px; top:13px}
  .float--a{left:2px; top:22%} .float--b{left:auto; right:2px; top:50%}
  .hero__stats{grid-template-columns:repeat(2, 1fr); row-gap:24px}
}

/* ---------- secciones ---------- */
.sec{padding:clamp(80px, 10vw, 128px) 0}
.sec--gray{background:var(--k-bg-2)}
.sec.is-dark{background:#000}
.sec__head{max-width:760px; margin-bottom:clamp(40px, 5vw, 64px)}
.sec__head .k-eyebrow{margin:0 0 10px}
.sec__head .k-lead{margin-top:16px}
.sec__head--center{text-align:center; margin-inline:auto}
.k-eyebrow{margin:0 0 10px}

/* mosaico de la plataforma */
.tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.tile{position:relative; display:flex; flex-direction:column; border-radius:var(--k-r-xl); overflow:hidden; background:#000; min-height:440px;
  transform:perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .5s var(--k-ease)}
.tile.k-reveal:not(.is-in){transform:translateY(14px)}
.tile__txt{position:relative; z-index:1; padding:30px 30px 0; text-align:center}
.tile__txt p{margin:8px auto 0; max-width:280px; font-size:.9375rem; color:var(--k-ink-2)}
.tile__txt .k-badge{margin-top:12px}
.tile img{margin-top:auto; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 30%;
  -webkit-mask:linear-gradient(to bottom, transparent, #000 22%); mask:linear-gradient(to bottom, transparent, #000 22%)}
@media (max-width: 980px){ .tiles{grid-template-columns:repeat(2, 1fr)} }
@media (max-width: 620px){ .tiles{grid-template-columns:1fr} .tile{min-height:0} }

/* columnas texto + imagen */
.split{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(40px, 6vw, 80px); align-items:center}
.split--rev{grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr)}
.split--rev .split__copy{order:2}
.split__copy .k-lead{margin-top:16px}
@media (max-width: 900px){ .split,.split--rev{grid-template-columns:1fr} .split--rev .split__copy{order:0} }

.ticks{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px}
.ticks li{position:relative; padding-left:30px; color:var(--k-ink)}
.ticks li::before{content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%; background:var(--k-accent-soft)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3 3 7-7'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks--sm{gap:10px; margin:24px 0 28px; font-size:.9375rem}

/* ficha de ejemplo */
.showcase{border-radius:var(--k-r-xl); background:#000; padding:clamp(18px, 2.4vw, 28px); display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:18px; align-items:stretch}
.showcase__img{width:100%; height:100%; min-height:320px; border-radius:var(--k-r-lg); object-fit:cover; object-position:center 35%}
.ficha{background:var(--k-elev-1); border-radius:var(--k-r-lg); padding:20px; font-size:.875rem}
.ficha__hd{padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--k-hair)}
.ficha__kind{margin:0; font-size:.75rem; color:var(--k-ink-3)}
.ficha h3{margin:4px 0 2px; font:600 1.1875rem/1.2 var(--k-font-display); letter-spacing:-.015em}
.ficha__en{margin:0; font-size:.8125rem; color:var(--k-ink-3); font-style:italic}
.ficha__tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ft{border-radius:var(--k-r-md); background:var(--k-elev-2); padding:10px 12px; display:flex; flex-direction:column; gap:3px}
.ft span{font-size:.6875rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase}
.ft b{font-weight:500; line-height:1.3}
.ft em{font-style:normal; font-size:.75rem; color:var(--k-ink-3)}
.ft--o span{color:#ff6961} .ft--i span{color:#2997ff} .ft--n span{color:#ffd60a} .ft--a span{color:#30d158}
.ficha__rows{margin:14px 0 0; display:grid}
.ficha__rows > div{display:grid; grid-template-columns:104px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--k-hair)}
.ficha__rows dt{color:var(--k-ink-3); display:flex; align-items:center; gap:6px}
.ficha__rows dt i{width:7px; height:7px; border-radius:50%; flex:none}
.ficha__rows dd{margin:0}
@media (max-width: 620px){ .showcase{grid-template-columns:1fr} .showcase__img{aspect-ratio:4/3; height:auto; min-height:0} .ficha__rows > div{grid-template-columns:1fr; gap:2px} }

/* biomecánica */
.movdemo{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:20px; align-items:stretch}
.movdemo__view{border-radius:var(--k-r-xl); overflow:hidden; background:var(--k-elev-1)}
.movdemo__view img{width:100%; height:100%; object-fit:cover}
.movdemo__panel{border-radius:var(--k-r-xl); background:var(--k-elev-1); padding:clamp(24px, 3vw, 36px)}
.movdemo__joint{margin:0 0 6px; font-size:.875rem; color:var(--k-ink-3)}
.movdemo__meta{display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 22px}
.roles{display:grid; gap:14px}
.role p{margin:0; font-size:.9375rem; color:var(--k-ink-2)}
.role .role__t{display:flex; align-items:center; gap:8px; margin-bottom:3px; font-weight:600; color:var(--k-ink)}
.role__t i{width:9px; height:9px; border-radius:50%}
.arthro{margin-top:22px; border-top:1px solid var(--k-hair); padding-top:14px}
.arthro summary{display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; font-weight:600; color:var(--k-link)}
.arthro summary::-webkit-details-marker{display:none}
.arthro summary svg{width:16px; height:16px; transition:transform var(--k-t) var(--k-ease)}
.arthro[open] summary svg{transform:rotate(180deg)}
.arthro__t{margin:0; font-weight:600; color:var(--k-ink)}
.arthro__b p{margin:8px 0 0; font-size:.9375rem; color:var(--k-ink-2)}
.arthro__b b{color:var(--k-ink); font-weight:600}
@media (max-width: 900px){ .movdemo{grid-template-columns:1fr} .movdemo__view img{aspect-ratio:4/3} }

/* imágenes radiológicas */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.chips .k-chip{height:32px; padding:0 14px; font-size:.875rem; font-weight:500; background:var(--k-bg); color:var(--k-ink)}
.note{margin:18px 0 0; font-size:.875rem; color:var(--k-ink-3)}
.rx{margin:0; border-radius:var(--k-r-xl); overflow:hidden; background:#000; position:relative}
.rx img{width:100%; aspect-ratio:4/5; object-fit:cover}
.rx figcaption{position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.8125rem; color:var(--k-ink-2)}

/* funciones */
.feats{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.feat{background:var(--k-bg-2); border-radius:var(--k-r-lg); padding:32px 30px}
.feat__ic{display:block; width:34px; height:34px; color:var(--k-accent); margin-bottom:22px}
.feat__ic svg{width:100%; height:100%}
.feat h3{margin:0; font:600 1.1875rem/1.25 var(--k-font-display); letter-spacing:-.015em}
.feat p{margin:8px 0 0; font-size:.9375rem; color:var(--k-ink-2)}
@media (max-width: 900px){ .feats{grid-template-columns:repeat(2, 1fr)} }
@media (max-width: 580px){ .feats{grid-template-columns:1fr} }

/* universidades */
.uni{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(40px, 6vw, 80px); align-items:center}
.uni__copy .k-lead{margin-top:16px}
.uni__cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:28px}
.uni__list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.uni__list li{background:var(--k-bg); border-radius:var(--k-r-lg); padding:20px 22px; display:flex; flex-direction:column; gap:4px}
.sec:not(.sec--gray) .uni__list li,.page .uni__list li{background:var(--k-bg-2)}
.uni__list b{font-weight:600}
.uni__list span{font-size:.875rem; color:var(--k-ink-2)}
@media (max-width: 900px){ .uni{grid-template-columns:1fr} }
@media (max-width: 520px){ .uni__list{grid-template-columns:1fr} }

/* licencias y precios */
.plans{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; max-width:900px; margin-inline:auto}
.plan{background:var(--k-bg-2); border-radius:var(--k-r-xl); padding:clamp(28px, 4vw, 44px); display:flex; flex-direction:column}
.plan__name{margin:0; font:600 1.5rem/1.15 var(--k-font-display); letter-spacing:-.02em}
.plan__desc{margin:4px 0 0; color:var(--k-ink-2)}
.plan__price{margin:28px 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px}
.plan__price > span{font:600 clamp(2.5rem, 5vw, 3.25rem)/1 var(--k-font-display); letter-spacing:-.03em}
.plan__price small{font-size:1rem; color:var(--k-ink-2)}
.plan__then{margin:10px 0 0; font-size:.9375rem; color:var(--k-ink-2)}
.plan__then b{color:var(--k-ink); font-weight:600}
.plan .k-btn{margin-top:auto}
.plan__note{margin:14px 0 0; font-size:.8125rem; color:var(--k-ink-3); text-align:center}
@media (max-width: 760px){ .plans{grid-template-columns:1fr} }

/* sobre y cierre */
.about{max-width:820px; text-align:center}
.about__quote{margin:0 0 18px; font:600 clamp(1.5rem, 3vw, 2.25rem)/1.25 var(--k-font-display); letter-spacing:-.02em; text-wrap:balance}
.final{padding:clamp(96px, 12vw, 150px) 0; text-align:center}
.final__in{display:flex; flex-direction:column; align-items:center}
.final__in .hero__cta{margin-top:28px}

/* ---------- pie ---------- */
.foot{background:var(--k-bg-2); color:var(--k-ink-2); font-size:.75rem; line-height:1.4; letter-spacing:-.01em; padding:40px 0 28px}
.foot__in{display:grid; gap:24px}
.foot__nav{display:grid; grid-template-columns:repeat(3, minmax(0, 200px)); gap:24px}
.foot__nav div{display:flex; flex-direction:column; gap:9px}
.foot__nav p{margin:0 0 2px; font-weight:600; color:var(--k-ink)}
.foot__nav a:hover{color:var(--k-ink); text-decoration:underline}
.foot__legal{border-top:1px solid #d2d2d7; padding-top:16px; display:flex; flex-direction:column; gap:6px}
.foot__legal p{margin:0}
.foot__legal a{color:var(--k-link)}
@media (max-width: 560px){ .foot__nav{grid-template-columns:1fr 1fr} }

/* ---------- páginas interiores ---------- */
.page{padding:clamp(56px, 8vw, 96px) 0 clamp(80px, 10vw, 120px)}
.page__head{max-width:760px; margin-bottom:clamp(40px, 5vw, 64px)}
.page__head .k-lead{margin-top:16px}
.page__head .hero__cta{justify-content:flex-start}
.page .sec__head{margin-bottom:28px}
.page .final__in{padding:clamp(56px, 8vw, 96px) 0 0; text-align:center}
.shot{margin:0; border-radius:var(--k-r-xl); overflow:hidden; background:#000; box-shadow:var(--k-shadow-3)}
.shot img{width:100%}
.steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; counter-reset:st}
.step{background:var(--k-bg-2); border-radius:var(--k-r-lg); padding:28px; counter-increment:st}
.step::before{content:counter(st); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--k-accent); color:#fff; font-weight:600; font-size:.875rem; margin-bottom:18px}
.step h3{margin:0; font:600 1.125rem/1.25 var(--k-font-display)}
.step p{margin:6px 0 0; font-size:.9375rem; color:var(--k-ink-2)}
@media (max-width: 760px){ .steps{grid-template-columns:1fr} }
.faq details{border-bottom:1px solid var(--k-hair)}
.faq summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; cursor:pointer; list-style:none; font:600 1.1875rem/1.3 var(--k-font-display); letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px; height:18px; flex:none; color:var(--k-ink-3); transition:transform var(--k-t) var(--k-ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin:0 0 20px; max-width:720px; color:var(--k-ink-2)}

/* contacto */
.contact{display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(40px, 6vw, 88px); align-items:start}
.contact__aside dl{margin:36px 0 0; display:grid; gap:20px}
.contact__aside dt{font-size:.8125rem; color:var(--k-ink-3); margin-bottom:3px}
.contact__aside dd{margin:0}
.form{display:grid; gap:18px; background:var(--k-bg-2); border-radius:var(--k-r-xl); padding:clamp(24px, 4vw, 40px)}
.form__2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 860px){ .contact{grid-template-columns:1fr} }
@media (max-width: 560px){ .form__2{grid-template-columns:1fr} }
.seg-pick{display:flex; flex-wrap:wrap; gap:8px}
.seg-pick label{cursor:pointer}
.seg-pick input{position:absolute; opacity:0; pointer-events:none}
.seg-pick span{display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:var(--k-r-pill); border:1px solid #d2d2d7; background:var(--k-bg); font-size:.9375rem;
  transition:border-color var(--k-t-fast) ease-out, background-color var(--k-t-fast) ease-out, color var(--k-t-fast) ease-out}
.seg-pick input:checked + span{border-color:var(--k-accent); box-shadow:inset 0 0 0 1px var(--k-accent); color:var(--k-accent)}
.seg-pick input:focus-visible + span{box-shadow:var(--k-focus)}
.form__done{display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:var(--k-bg-2); border-radius:var(--k-r-xl); padding:clamp(24px, 4vw, 40px)}
.form__done svg{width:44px; height:44px; color:var(--k-success)}
.form__done h2{margin:0} .form__done p{margin:0}
.pw{position:relative}
.pw .k-input{padding-right:48px}
.pw button{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:var(--k-ink-3); cursor:pointer; display:grid; place-items:center}
.pw button:hover{color:var(--k-ink)}
.pw button svg{width:19px; height:19px}

/* ---------- acceso (estilo Apple ID) ---------- */
.auth-top{height:48px; display:flex; align-items:center; justify-content:space-between; width:min(1120px, 100% - 44px); margin-inline:auto}
.auth-top a.k-link{font-size:.875rem}
.auth{min-height:calc(100svh - 48px); background:var(--k-bg-2); display:flex; align-items:flex-start; justify-content:center; padding:clamp(40px, 8vh, 88px) 16px 64px}
.auth__box{width:min(440px, 100%); text-align:center}
.auth__icon{width:64px; height:64px; margin:0 auto 22px; border-radius:16px; background:#1d1d1f; color:#fff; display:grid; place-items:center; box-shadow:var(--k-shadow-2)}
.auth__icon span{width:34px; height:34px; background:currentColor; -webkit-mask:url(img/mark.svg) center/contain no-repeat; mask:url(img/mark.svg) center/contain no-repeat}
.auth__box h1{margin:0; font:600 clamp(1.75rem, 4vw, 2.25rem)/1.12 var(--k-font-display); letter-spacing:-.02em}
.auth__box > p{margin:10px 0 0; color:var(--k-ink-2)}
.auth__box form{margin-top:30px; display:grid; gap:14px; text-align:left; background:var(--k-bg); border-radius:var(--k-r-lg); padding:clamp(22px, 4vw, 32px); box-shadow:var(--k-shadow-1)}
.auth__box .k-btn--block{margin-top:6px}
.auth__row{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.875rem}
.auth__row a{color:var(--k-link)}
.auth__row a:hover{text-decoration:underline}
.auth__alt{margin:22px 0 0; font-size:.9375rem; color:var(--k-ink-2)}
.auth__alt a{color:var(--k-link)}
.auth__alt a:hover{text-decoration:underline}
.auth__plan{margin:18px auto 0; display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--k-r-pill); background:var(--k-bg); font-size:.875rem; color:var(--k-ink-2)}
.auth__plan b{color:var(--k-ink); font-weight:600}
.auth .form__done{background:var(--k-bg); margin-top:30px; text-align:left}
.auth .note{text-align:center}

/* ---------- mi cuenta ---------- */
.acct #acctBody{margin-top:28px; text-align:left}
.acct .k-alert{margin-bottom:14px}
.acct__card{background:var(--k-bg); border-radius:var(--k-r-lg); padding:clamp(22px, 4vw, 32px); box-shadow:var(--k-shadow-1); display:grid; gap:12px}
.acct__card .k-btn--block{margin-top:4px}
.acct__state{margin:0; display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:600; color:var(--k-success)}
.acct__state i{width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(29,143,80,.15)}
.acct__plan{margin:0; font:600 1.375rem/1.2 var(--k-font-display); letter-spacing:-.02em}
.acct__meta{margin:0; font-size:.9375rem; color:var(--k-ink-2)}
.acct__meta b{color:var(--k-ink); font-weight:600}
.acct__card .plan__price{margin:0}
.acct__card .ticks{margin:6px 0 4px}
.acct__consent{font-size:.8125rem; line-height:1.4; padding:12px; border-radius:var(--k-r-md); background:var(--k-bg-2); transition:box-shadow var(--k-t-fast)}
.acct__consent.is-error{box-shadow:inset 0 0 0 1.5px var(--k-danger)}
.acct__card .note{text-align:center; margin:0}
.acct__spin{width:36px; height:36px; margin:24px auto; border-radius:50%; border:3px solid var(--k-hair-2); border-top-color:var(--k-accent); animation:k-spin .8s linear infinite}
.auth .k-alert{text-align:left}

/* ---------- páginas legales ---------- */
.legal{max-width:760px}
.legal h2{margin:36px 0 10px; font:600 1.3125rem/1.25 var(--k-font-display); letter-spacing:-.015em}
.legal p,.legal li{color:var(--k-ink-2); font-size:1rem}
.legal p{margin:0 0 12px}
.legal__list{padding-left:20px; margin:0 0 12px; display:grid; gap:8px}
.legal b{color:var(--k-ink); font-weight:600}
.acct .auth__alt{text-align:center}