/* ═══════════════════════════════════════════════════
   Sistema de diseño compartido (match landing)
   ═══════════════════════════════════════════════════ */
:root{
  --cream:#F5EEE1;  --cream-deep:#EDE3CF; --paper:#FBF7EE;
  --ink:#1E2A23;    --ink-soft:#3E4A42;   --ink-mute:#6A7067;
  --mate:#6B7B3F;   --mate-deep:#4D5A2B;  --mate-soft:#C9D4A3;
  --terracotta:#C2502F; --terra-deep:#9B3E21; --terra-soft:#F0C4B0;
  --sun:#E9C46A;    --sun-soft:#F7E3A6;   --gold:#B89455;
  --line:#D9CFB8;   --line-soft:#E8DFC9;
  --f-display:"Playfair Display", Georgia, serif;
  --f-ui:"Outfit", system-ui, sans-serif;
  --f-body:"Instrument Sans", ui-sans-serif, sans-serif;
  --f-hand:"Caveat", cursive;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;
  --r-lg:24px; --r-md:16px; --r-sm:10px;
  --shadow-card:0 2px 0 rgba(30,42,35,.04),0 20px 50px -28px rgba(30,42,35,.35);
  --shadow-paper:0 1px 0 rgba(30,42,35,.04),0 12px 40px -20px rgba(30,42,35,.25);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html,body{ margin:0; padding:0; background:var(--cream); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
.reg__section{ scroll-margin-top:90px; }
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1000; opacity:.3; mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .16  0 0 0 0 .14  0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }
img{ max-width:100%; display:block; }

.logo-mark{ width:34px; height:34px; border-radius:7px; flex-shrink:0; margin-right:10px; background:url('/images/logo-inventarioapp.webp') center/contain no-repeat; }
.logo{ display:inline-flex; align-items:center; font-family:var(--f-ui); font-weight:700; font-size:19px; letter-spacing:-0.01em; color:var(--ink); white-space:nowrap; }
.logo b{ color:var(--terracotta); font-weight:700; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:999px; font-weight:600; font-size:15px;
  letter-spacing:-0.005em; border:1px solid transparent; font-family:var(--f-ui);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--ink); color:var(--paper); box-shadow:0 1px 0 rgba(0,0,0,.2),0 10px 24px -12px rgba(30,42,35,.6); }
.btn--primary:hover{ background:var(--mate-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--terra{ background:var(--terracotta); color:var(--paper); }
.btn--terra:hover{ background:var(--terra-deep); }
.btn--sun{ background:var(--sun); color:var(--ink); }
.btn--sm{ padding:10px 16px; font-size:13.5px; }
.btn--block{ width:100%; }
.btn .arrow{ transition:transform .2s; }
.btn:hover .arrow{ transform:translateX(3px); }



.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-ui); font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mate-deep);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--mate-deep); opacity:.7; }

/* ═══════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════ */
.login{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.login__side{
  background:var(--ink); color:var(--paper); padding:60px 70px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.login__side::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 300px at 20% 20%, rgba(194,80,47,.18), transparent 70%),
    radial-gradient(700px 400px at 80% 80%, rgba(107,123,63,.22), transparent 70%);
}
.login__side > *{ position:relative; z-index:1; }
.login__side .logo{ color:var(--paper); font-size:22px; }
.login__side .logo b{ color:var(--sun); }
.login__quote{
  font-family:var(--f-display); font-size:52px; font-weight:400; line-height:1.02; letter-spacing:-0.02em;
  margin:0 0 20px; max-width:14ch;
}
.login__quote em{ font-style:italic; color:var(--sun); }
.login__quote-sub{ color:#D9CFB8; font-size:17px; max-width:40ch; }
.login__note{
  font-family:var(--f-hand); font-size:24px; color:var(--sun);
  transform:rotate(-2deg); max-width:22ch;
}
.login__foot{ display:flex; gap:18px; font-size:13px; color:#8A9C84; }
.login__foot a:hover{ color:var(--paper); }

.login__form{
  display:flex; flex-direction:column; justify-content:center;
  padding:60px 80px; max-width:580px; margin:0 auto; width:100%;
}
.login__title{
  font-family:var(--f-display); font-weight:500; font-size:46px; line-height:1;
  letter-spacing:-0.02em; margin:12px 0 8px;
}
.login__title em{ font-style:italic; color:var(--mate-deep); }
.login__sub{ color:var(--ink-soft); font-size:17px; margin-bottom:36px; }

.field{ margin-bottom:18px; }
.field__label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--ink-mute); text-transform:uppercase; margin-bottom:8px;
}
.field__input{
  width:100%; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r-md); font:inherit; font-family:var(--f-body);
  font-size:15.5px; color:var(--ink); background:var(--paper);
  transition:border-color .18s, box-shadow .18s;
}
.field__input:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(30,42,35,.06);
}
.field__input-wrap{ position:relative; }
.field__input-wrap .icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ink-mute); pointer-events:none;
}
.field__input-wrap .field__input{ padding-left:44px; }
.field__input-wrap .toggle-pw{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-mute); padding:6px; border-radius:6px;
}
.field__input-wrap .toggle-pw:hover{ color:var(--ink); background:rgba(30,42,35,.05); }

.login__row{ display:flex; justify-content:space-between; align-items:center; margin:6px 0 28px; font-size:14px; }
.check{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); user-select:none; cursor:pointer; }
.check input{ width:16px; height:16px; accent-color:var(--terracotta); }
.link{ color:var(--terracotta); font-weight:600; border-bottom:1px solid transparent; transition:border-color .2s; }
.link:hover{ border-color:var(--terracotta); }

.login__sep{
  display:flex; align-items:center; gap:14px; margin:30px 0 22px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:700;
}
.login__sep::before, .login__sep::after{ content:""; flex:1; height:1px; background:var(--line); }

.login__alt{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 26px; display:flex; flex-direction:column; align-items:center;
  gap:14px; text-align:center;
}
.login__alt-text{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
.login__alt-text b{ color:var(--ink); font-weight:600; display:block; margin-bottom:2px; font-size:15px; }
.login__alt .btn{ min-width:190px; justify-content:center; }

/* ═══════════════════════════════════════════════════
   REGISTRO
   ═══════════════════════════════════════════════════ */
.reg{ display:grid; grid-template-columns:1.3fr 1fr; min-height:100vh; }
.reg__main{ padding:48px 70px; max-width:760px; }
.reg__main > .logo{ display:flex; width:fit-content; margin-bottom:28px; }
.reg__badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--mate-soft); color:var(--mate-deep);
  padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700;
  letter-spacing:.04em; margin-bottom:18px;
}
.reg__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--mate); box-shadow:0 0 0 0 rgba(107,123,63,.7); animation:pulse 1.6s ease-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(107,123,63,.65); } 70%{ box-shadow:0 0 0 8px rgba(107,123,63,0); } }
.reg__title{ font-family:var(--f-display); font-size:52px; font-weight:500; line-height:.98; letter-spacing:-0.02em; margin:6px 0 10px; max-width:14ch; }
.reg__title em{ font-style:italic; color:var(--terracotta); }
.reg__sub{ color:var(--ink-soft); font-size:17px; max-width:48ch; margin-bottom:34px; }

.reg__steps{ display:flex; gap:8px; margin-bottom:30px; }
.reg__step{
  flex:1; padding:12px 14px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; font-size:13px; display:flex; align-items:center; gap:10px;
  opacity:.55; transition:opacity .2s, border-color .2s, transform .2s;
  color:var(--ink); text-align:left; cursor:pointer; font-family:var(--f-body);
  text-decoration:none;
}
.reg__step:hover{ opacity:1; transform:translateY(-1px); border-color:var(--ink); }
.reg__step.active{ opacity:1; border-color:var(--ink); }
.reg__step-n{
  width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:13px;
}
.reg__step.done .reg__step-n{ background:var(--mate); }
.reg__step.active .reg__step-n{ background:var(--terracotta); }
.reg__step b{ color:var(--ink); font-weight:600; font-family:var(--f-ui); }

.reg__section{ margin-bottom:36px; }
.reg__section-title{
  font-family:var(--f-display); font-size:22px; font-weight:500; margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.reg__section-title .num{
  font-style:italic; color:var(--terracotta); font-family:var(--f-display);
}
.reg__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.reg__grid--1{ grid-template-columns:1fr; }
.reg__grid--3{ grid-template-columns:1fr 1fr 1fr; }
.field__hint{ margin-top:6px; font-size:12px; color:var(--ink-mute); }

.select{
  width:100%; padding:14px 38px 14px 16px; border:1px solid var(--line); border-radius:var(--r-md);
  font:inherit; font-size:15.5px; background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1L5 5L9 1' stroke='%231E2A23' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 16px center;
  appearance:none; color:var(--ink);
}
.select:focus{ outline:none; border-color:var(--ink); }

.reg__terms{
  display:flex; align-items:start; gap:10px; margin:20px 0 26px;
  font-size:14px; color:var(--ink-soft);
}
.reg__terms input{ margin-top:3px; width:16px; height:16px; accent-color:var(--terracotta); }

.reg__side{
  background:var(--paper); border-left:1px solid var(--line); padding:60px 50px 40px;
  position:relative;
}
.reg__side-eyebrow{ font-family:var(--f-ui); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); margin-bottom:16px; }
.reg__side-title{ font-family:var(--f-display); font-size:30px; font-weight:500; letter-spacing:-0.01em; line-height:1.1; margin:0 0 28px; }
.reg__features{ list-style:none; padding:0; margin:0 0 34px; display:flex; flex-direction:column; gap:14px; }
.reg__features li{ display:flex; align-items:start; gap:12px; font-size:15px; color:var(--ink-soft); }
.reg__features .check{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--mate-soft); color:var(--mate-deep); display:grid; place-items:center; font-size:12px; font-weight:800; }
.reg__features b{ color:var(--ink); font-weight:600; }

.reg__quote{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--terracotta);
  border-radius:var(--r-md); padding:20px 22px; margin-bottom:24px;
}
.reg__quote .q{ font-family:var(--f-display); font-size:18px; line-height:1.35; color:var(--ink); font-weight:500; margin-bottom:14px; }
.reg__quote .attr{
  display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-mute);
}
.reg__quote .avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--terracotta), var(--sun));
  display:grid; place-items:center; color:var(--ink); font-family:var(--f-display); font-weight:600;
  flex-shrink:0;
}
.reg__quote .attr b{ color:var(--ink); font-weight:600; display:block; font-family:var(--f-ui); }

.reg__plans-hint{
  font-size:13px; color:var(--ink-mute); padding:14px 16px; background:var(--cream-deep);
  border-radius:var(--r-sm); line-height:1.5;
}
.reg__plans-hint b{ color:var(--ink); font-weight:600; }

/* ═══════════════════════════════════════════════════
   PLANES
   ═══════════════════════════════════════════════════ */
.planes{ padding:0 0 80px; }
.planes__nav{
  padding:20px 40px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(8px); background:color-mix(in srgb, var(--cream) 90%, transparent);
  position:sticky; top:0; z-index:50;
}
.planes__nav-links{
  display:flex; gap:30px;
  font-size:14.5px; color:var(--ink-soft);
  font-family:var(--f-ui); font-weight:500;
}
.planes__nav-links a{ position:relative; padding:6px 0; transition:color .18s; }
.planes__nav-links a:hover{ color:var(--ink); }
.planes__nav-links a:hover::after,
.planes__nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--terracotta); border-radius:2px;
}
.planes__nav-links a.active{ color:var(--ink); }
.planes__nav-cta{ display:flex; gap:10px; }

.planes__hero{
  max-width:1200px; margin:0 auto; padding:80px 40px 50px; text-align:center;
}
.planes__title{
  font-family:var(--f-display); font-size:clamp(48px,6vw,84px); font-weight:500;
  letter-spacing:-0.025em; line-height:.98; margin:12px 0 14px;
}
.planes__title em{ font-style:italic; color:var(--terracotta); }
.planes__subtitle{ color:var(--ink-soft); font-size:19px; max-width:56ch; margin:0 auto 32px; }

.planes__toggle{
  display:inline-flex; background:var(--paper); border:1px solid var(--line);
  padding:4px; border-radius:999px;
}
.planes__toggle button{
  padding:10px 22px; border-radius:999px; font-family:var(--f-ui); font-weight:600;
  font-size:14px; color:var(--ink-soft); transition:all .2s;
}
.planes__toggle button.active{ background:var(--ink); color:var(--paper); }
.planes__toggle .save{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.08em;
  background:var(--sun); color:var(--ink); padding:2px 6px; border-radius:4px; margin-left:8px;
}

.planes__grid{
  max-width:1400px; margin:40px auto 0; padding:0 40px;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:16px;
}
.plan{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:28px 24px; display:flex; flex-direction:column; position:relative;
  transition:transform .3s, box-shadow .3s;
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.plan--featured{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
  box-shadow:var(--shadow-card);
}
.plan--featured:hover{ transform:translateY(-4px); }
.plan__badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--sun); color:var(--ink); font-family:var(--f-ui); font-weight:800;
  padding:5px 14px; border-radius:999px; font-size:11px; letter-spacing:.1em;
}
.plan__icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--mate-soft); color:var(--mate-deep); margin-bottom:16px;
}
.plan--featured .plan__icon{ background:rgba(233,196,106,.2); color:var(--sun); }
.plan__name{ font-family:var(--f-display); font-size:24px; font-weight:500; letter-spacing:-0.01em; margin:0 0 4px; }
.plan__desc{ font-size:13.5px; color:var(--ink-mute); min-height:2.8em; margin-bottom:20px; }
.plan--featured .plan__desc{ color:#BDB39B; }
.plan__price{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.plan__price .n{ font-family:var(--f-display); font-size:44px; font-weight:600; letter-spacing:-0.02em; line-height:1; }
.plan__price .p{ font-size:14px; color:var(--ink-mute); }
.plan--featured .plan__price .p{ color:#BDB39B; }
.plan__price-usd{ font-size:12px; color:var(--ink-mute); font-family:var(--f-mono); letter-spacing:-.01em; margin-bottom:22px; }
.plan--featured .plan__price-usd{ color:#9AA696; }
.plan__cta{ margin-bottom:22px; }
.plan__sep{ height:1px; background:var(--line-soft); margin-bottom:20px; }
.plan--featured .plan__sep{ background:rgba(255,255,255,.15); }
.plan__features{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.plan__features li{ display:flex; gap:10px; align-items:start; color:var(--ink-soft); }
.plan__features li .ic{ flex-shrink:0; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; margin-top:1px; }
.plan__features li.yes .ic{ background:var(--mate-soft); color:var(--mate-deep); }
.plan__features li.no{ opacity:.45; }
.plan__features li.no .ic{ background:var(--line-soft); color:var(--ink-mute); }
.plan--featured .plan__features li{ color:#E8DFC9; }
.plan--featured .plan__features li.yes .ic{ background:rgba(201,212,163,.25); color:var(--mate-soft); }

.planes__common{
  max-width:1200px; margin:80px auto 0; padding:0 40px;
}
.planes__common-title{ font-family:var(--f-display); font-size:32px; font-weight:500; letter-spacing:-0.01em; margin:0 0 28px; text-align:center; }
.planes__common-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.planes__common-item{ padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); }
.planes__common-item h5{ font-family:var(--f-ui); font-size:14px; font-weight:700; margin:0 0 6px; }
.planes__common-item p{ font-size:13px; color:var(--ink-mute); margin:0; }

.planes__faq{ max-width:860px; margin:80px auto 0; padding:0 40px; }
.planes__faq-title{ font-family:var(--f-display); font-size:32px; font-weight:500; text-align:center; margin:0 0 32px; }
.planes__faq-item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 24px; margin-bottom:10px;
}
.planes__faq-item summary{
  cursor:pointer; font-family:var(--f-display); font-size:19px; font-weight:500;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.planes__faq-item summary::-webkit-details-marker{ display:none; }
.planes__faq-item p{ margin:12px 0 0; color:var(--ink-soft); font-size:15px; }

.planes__bottom-cta{
  max-width:860px; margin:90px auto 0; padding:50px 40px;
  background:var(--ink); color:var(--paper); border-radius:24px; text-align:center;
  position:relative; overflow:hidden;
}
.planes__bottom-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(500px 300px at 50% 0%, rgba(233,196,106,.2), transparent 60%);
}
.planes__bottom-cta h3{ font-family:var(--f-display); font-size:40px; font-weight:500; letter-spacing:-0.02em; margin:0 0 10px; position:relative; }
.planes__bottom-cta h3 em{ font-style:italic; color:var(--sun); }
.planes__bottom-cta p{ color:#D9CFB8; margin:0 0 24px; font-size:17px; position:relative; }
.planes__bottom-cta .ctas{ display:inline-flex; gap:10px; position:relative; }

/* ═══════════════════════════════════════════════════
   SELECCIONAR SUCURSAL
   ═══════════════════════════════════════════════════ */
.suc{ padding:40px 40px 80px; max-width:1200px; margin:0 auto; }
.suc__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; }
.suc__user{ display:flex; gap:14px; align-items:center; font-family:var(--f-ui); }
.suc__user .avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--terracotta), var(--sun));
  display:grid; place-items:center; color:var(--ink); font-weight:700; font-size:16px;
}
.suc__user .name{ font-weight:600; font-size:15px; }
.suc__user .role{ font-size:12px; color:var(--ink-mute); }
.suc__logout{ font-size:14px; color:var(--ink-mute); border:1px solid var(--line); padding:8px 14px; border-radius:999px; transition:all .2s; }
.suc__logout:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.suc__welcome{ text-align:center; margin:60px 0 50px; }
.suc__welcome .hand{ font-family:var(--f-hand); font-size:26px; color:var(--terracotta); transform:rotate(-2deg); display:inline-block; margin-bottom:12px; }
.suc__welcome h1{
  font-family:var(--f-display); font-size:clamp(40px, 5.5vw, 68px); font-weight:500;
  letter-spacing:-0.02em; line-height:1; margin:0 0 14px;
}
.suc__welcome h1 em{ font-style:italic; color:var(--mate-deep); }
.suc__welcome p{ color:var(--ink-soft); font-size:17px; max-width:44ch; margin:0 auto; }

.suc__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.suc__grid form{ flex:0 1 360px; min-width:280px; margin:0; }
.suc__grid > .suc-card{ flex:0 1 360px; min-width:280px; }
.suc-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:26px 24px; cursor:pointer; transition:all .25s; text-align:left;
  position:relative; overflow:hidden;
}
.suc-card:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:var(--shadow-card); }
.suc-card::after{
  content:"→"; position:absolute; top:22px; right:22px; font-size:22px; color:var(--ink-mute);
  transition:all .25s;
}
.suc-card:hover::after{ color:var(--terracotta); transform:translateX(4px); }
.suc-card__icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  margin-bottom:16px; font-family:var(--f-display); font-weight:600; font-size:18px;
  color:var(--paper); background:var(--mate);
}
.suc-card--terra .suc-card__icon{ background:var(--terracotta); }
.suc-card--sun .suc-card__icon{ background:var(--sun); color:var(--ink); }
.suc-card--ink .suc-card__icon{ background:var(--ink); }
.suc-card__name{ font-family:var(--f-display); font-size:24px; font-weight:500; margin:0 0 4px; letter-spacing:-0.01em; }
.suc-card__addr{ font-size:13.5px; color:var(--ink-mute); margin-bottom:18px; }
.suc-card__stats{ display:flex; gap:22px; padding-top:16px; border-top:1px solid var(--line-soft); }
.suc-card__stat .k{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; }
.suc-card__stat .v{ font-family:var(--f-display); font-size:19px; font-weight:600; letter-spacing:-0.01em; margin-top:3px; }
.suc-card__badge{
  position:absolute; top:16px; right:60px;
  background:var(--sun-soft); color:var(--gold);
  padding:3px 10px; border-radius:999px; font-size:10px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
}
.suc-card__status{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--mate-deep); font-weight:600;
}
.suc-card__status .dot{ width:7px; height:7px; border-radius:50%; background:var(--mate); }
.suc-card__status.closed{ color:var(--ink-mute); }
.suc-card__status.closed .dot{ background:var(--ink-mute); }

.suc__footer{ text-align:center; margin-top:50px; padding-top:30px; border-top:1px solid var(--line-soft); font-size:14px; color:var(--ink-mute); }
.suc__footer .hand{ font-family:var(--f-hand); font-size:20px; color:var(--terracotta); margin-right:8px; }

/* Responsive */
@media (max-width: 960px){
  .login{ grid-template-columns:1fr; }
  .login__side{ padding:40px 30px; }
  .login__form{ padding:40px 30px; }
  .reg{ grid-template-columns:1fr; }
  .reg__side{ border-left:0; border-top:1px solid var(--line); }
  .reg__main{ padding:40px 30px; }
  .planes__grid{ grid-template-columns:repeat(2, 1fr); }
  .planes__common-grid{ grid-template-columns:1fr 1fr; }
  .suc__grid form,
  .suc__grid > .suc-card{ flex-basis:100%; min-width:0; }
}

/* ═══════════════════════════════════════════════════
   CONTACTO / LEGAL (Privacidad + Términos)
   Appended from mockups v2
   ═══════════════════════════════════════════════════ */

/* Nav top shared */
.topnav{
  padding:18px 40px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(8px); background:color-mix(in srgb, var(--cream) 90%, transparent);
  position:sticky; top:0; z-index:50;
}
.topnav__links{ display:flex; gap:26px; font-size:14px; color:var(--ink-soft); font-family:var(--f-ui); font-weight:500; }
.topnav__links a:hover{ color:var(--ink); }
.topnav__cta{ display:flex; gap:10px; }

/* ═══════════════════════════════════════════════════
   CONTACTO
   ═══════════════════════════════════════════════════ */
.cnt{ padding:60px 40px 100px; max-width:1240px; margin:0 auto; }
.cnt__hero{ text-align:center; margin-bottom:60px; }
.cnt__hand{ font-family:var(--f-hand); font-size:26px; color:var(--terracotta); transform:rotate(-2deg); display:inline-block; margin-bottom:10px; }
.cnt__title{
  font-family:var(--f-display); font-size:clamp(46px, 6.2vw, 84px); font-weight:500;
  letter-spacing:-0.025em; line-height:.98; margin:10px 0 14px;
}
.cnt__title em{ font-style:italic; color:var(--mate-deep); }
.cnt__subtitle{ color:var(--ink-soft); font-size:19px; max-width:54ch; margin:0 auto; }

.cnt__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:40px; }

.cnt__methods{ display:flex; flex-direction:column; gap:14px; }
.cnt-method{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:26px 28px; transition:transform .25s, border-color .25s; position:relative; overflow:hidden;
}
.cnt-method:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:var(--shadow-card); }
.cnt-method--featured{
  background:linear-gradient(160deg, #1E2A23 0%, #2A3A31 100%); color:var(--paper); border-color:transparent;
}
.cnt-method--featured::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(400px 200px at 20% 0%, rgba(37,211,102,.18), transparent 70%);
}
.cnt-method > *{ position:relative; z-index:1; }
.cnt-method__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.cnt-method__icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--mate-soft); color:var(--mate-deep); flex-shrink:0;
}
.cnt-method--whats .cnt-method__icon{ background:rgba(37,211,102,.2); color:#25D366; }
.cnt-method--email .cnt-method__icon{ background:var(--terra-soft); color:var(--terra-deep); }
.cnt-method--call .cnt-method__icon{ background:var(--sun-soft); color:var(--gold); }
.cnt-method__k{
  font-family:var(--f-ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--ink-mute);
}
.cnt-method--featured .cnt-method__k{ color:#8A9C84; }
.cnt-method__title{
  font-family:var(--f-display); font-size:22px; font-weight:500; letter-spacing:-0.01em; margin:2px 0 0;
}
.cnt-method__value{
  font-family:var(--f-mono); font-size:15px; color:var(--ink-soft); margin:10px 0 16px;
}
.cnt-method--featured .cnt-method__value{ color:#D9CFB8; }
.cnt-method__desc{ font-size:14px; color:var(--ink-soft); margin:0 0 16px; }
.cnt-method--featured .cnt-method__desc{ color:#BDB39B; }

.cnt-method__hours{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--ink-mute);
}
.cnt-method--featured .cnt-method__hours{ border-top-color:rgba(255,255,255,.15); color:#8A9C84; }

.cnt__social{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:20px 24px; text-align:center;
}
.cnt__social-k{
  font-family:var(--f-ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-mute);
  margin-bottom:12px;
}
.cnt__social-links{ display:flex; gap:10px; justify-content:center; }
.cnt__social-links a{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-soft); transition:all .2s;
}
.cnt__social-links a:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }

.cnt__form{
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  padding:36px 38px; box-shadow:var(--shadow-paper);
}
.cnt__form-title{
  font-family:var(--f-display); font-size:28px; font-weight:500; letter-spacing:-0.01em;
  margin:0 0 6px;
}
.cnt__form-sub{ color:var(--ink-soft); font-size:15px; margin:0 0 24px; }

.field{ margin-bottom:18px; }
.field__label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--ink-mute); text-transform:uppercase; margin-bottom:8px;
  font-family:var(--f-ui);
}
.field__input, .field__textarea, .field__select{
  width:100%; padding:14px 16px; border:1px solid var(--line);
  border-radius:14px; font:inherit; font-family:var(--f-body);
  font-size:15.5px; color:var(--ink); background:#fff;
  transition:border-color .18s, box-shadow .18s; resize:vertical;
}
.field__input:focus, .field__textarea:focus, .field__select:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(30,42,35,.06);
}
.field__textarea{ min-height:140px; font-family:var(--f-body); line-height:1.55; }
.field__select{
  appearance:none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1L5 5L9 1' stroke='%231E2A23' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 16px center;
  padding-right:38px;
}
.field__hint{ margin-top:6px; font-size:12px; color:var(--ink-mute); }
.cnt__form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cnt__form-submit{ display:flex; justify-content:flex-end; margin-top:8px; }

/* ═══════════════════════════════════════════════════
   LEGAL (Privacidad / Terminos)
   ═══════════════════════════════════════════════════ */
.legal{ padding:50px 40px 100px; max-width:1200px; margin:0 auto; }
.legal__hero{
  border-bottom:1px solid var(--line-soft); padding-bottom:40px; margin-bottom:50px;
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end;
}
.legal__hero-main{ max-width:720px; }
.legal__title{
  font-family:var(--f-display); font-size:clamp(48px, 6vw, 80px); font-weight:500;
  letter-spacing:-0.025em; line-height:1; margin:16px 0 20px;
}
.legal__title em{ font-style:italic; color:var(--terracotta); }
.legal__lead{ font-size:18px; color:var(--ink-soft); max-width:56ch; }
.legal__meta{
  font-family:var(--f-ui); text-align:right;
}
.legal__meta-k{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-mute);
}
.legal__meta-v{ font-family:var(--f-display); font-size:19px; font-weight:500; margin-top:4px; }

.legal__layout{ display:grid; grid-template-columns:240px 1fr; gap:60px; align-items:start; }
.legal__toc{
  position:sticky; top:90px;
  padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:18px;
}
.legal__toc-k{
  font-family:var(--f-ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink-mute); margin-bottom:12px; padding-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}
.legal__toc ol{
  list-style:none; counter-reset:toc; padding:0; margin:0;
  display:flex; flex-direction:column; gap:2px;
}
.legal__toc li{ counter-increment:toc; }
.legal__toc a{
  display:flex; align-items:baseline; gap:10px; padding:8px 10px; border-radius:8px;
  font-size:13.5px; color:var(--ink-soft); transition:all .15s;
}
.legal__toc a::before{
  content: counter(toc, decimal-leading-zero);
  font-family:var(--f-mono); font-size:11px; color:var(--terracotta); font-weight:600;
  flex-shrink:0;
}
.legal__toc a:hover{ background:var(--cream-deep); color:var(--ink); }
.legal__toc a.active{ background:var(--ink); color:var(--paper); }
.legal__toc a.active::before{ color:var(--sun); }

.legal__body{ max-width:70ch; font-size:17px; line-height:1.7; color:var(--ink-soft); }
.legal__body h2{
  font-family:var(--f-display); font-size:34px; font-weight:500; letter-spacing:-0.02em;
  color:var(--ink); margin:56px 0 20px; line-height:1.1;
  scroll-margin-top:100px;
}
.legal__body h2 .num{
  display:block; font-family:var(--f-mono); font-size:13px; font-weight:600;
  color:var(--terracotta); letter-spacing:.1em; margin-bottom:6px;
}
.legal__body h2:first-child{ margin-top:0; }
.legal__body h3{
  font-family:var(--f-display); font-size:22px; font-weight:500; letter-spacing:-0.01em;
  color:var(--ink); margin:28px 0 12px;
}
.legal__body p{ margin:0 0 16px; }
.legal__body p strong, .legal__body b{ color:var(--ink); font-weight:600; }
.legal__body ul{ padding-left:24px; margin:0 0 18px; }
.legal__body ul li{ margin-bottom:8px; }
.legal__body a{ color:var(--terracotta); border-bottom:1px solid transparent; transition:border-color .2s; }
.legal__body a:hover{ border-color:var(--terracotta); }
.legal__body blockquote{
  margin:20px 0; padding:18px 24px; background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--terracotta); border-radius:12px;
  font-family:var(--f-display); font-size:19px; font-style:italic; color:var(--ink);
}
.legal__body .callout{
  margin:22px 0; padding:18px 22px; background:var(--sun-soft); border-radius:12px;
  display:flex; gap:14px; align-items:start;
}
.legal__body .callout .emoji{ font-size:22px; flex-shrink:0; margin-top:-2px; }
.legal__body .callout p{ margin:0; color:var(--ink); font-size:15px; line-height:1.6; }
.legal__body code{
  font-family:var(--f-mono); font-size:14px;
  background:var(--cream-deep); padding:2px 6px; border-radius:4px;
  color:var(--ink);
}
.legal__table{
  width:100%; border-collapse:collapse; margin:18px 0 24px;
  font-size:15px; background:var(--paper);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.legal__table thead th{
  background:var(--cream-deep); color:var(--ink);
  font-weight:600; text-align:left; padding:12px 16px;
  font-size:13.5px; letter-spacing:0.01em;
  border-bottom:1px solid var(--line);
}
.legal__table tbody td{
  padding:12px 16px; border-bottom:1px solid var(--line);
  color:var(--ink-soft); vertical-align:top;
}
.legal__table tbody tr:last-child td{ border-bottom:none; }
.legal__table tbody td strong{ color:var(--ink); }

.legal__cta{
  margin-top:80px; padding:40px 50px; background:var(--ink); color:var(--paper);
  border-radius:22px; text-align:center; position:relative; overflow:hidden;
}
.legal__cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(500px 300px at 50% 0%, rgba(233,196,106,.2), transparent 60%);
}
.legal__cta > *{ position:relative; z-index:1; }
.legal__cta h3{ font-family:var(--f-display); font-size:28px; font-weight:500; margin:0 0 8px; letter-spacing:-0.015em; }
.legal__cta h3 em{ font-style:italic; color:var(--sun); }
.legal__cta p{ color:#D9CFB8; margin:0 0 18px; }

/* Responsive para las nuevas vistas */
@media (max-width: 960px){
  .cnt__grid{ grid-template-columns:1fr; }
  .cnt__form-row{ grid-template-columns:1fr; }
  .legal__layout{ grid-template-columns:1fr; }
  .legal__toc{ position:static; }
  .legal__hero{ grid-template-columns:1fr; }
  .legal__meta{ text-align:left; }}


/* ═══════════════════════════════════════════════════
   PLANES — Comparativa detallada (tabla)
   ═══════════════════════════════════════════════════ */
.planes__compare{
  max-width:1200px; margin:80px auto 0; padding:0 40px;
}
.planes__compare-head{ text-align:center; margin-bottom:34px; }
.planes__compare-title{
  font-family:var(--f-display); font-size:clamp(34px, 4.4vw, 54px);
  font-weight:500; letter-spacing:-0.02em; line-height:1;
  margin:12px 0 10px;
}
.planes__compare-title em{ font-style:italic; color:var(--mate-deep); }
.planes__compare-sub{ color:var(--ink-soft); font-size:17px; margin:0; }

.planes__compare-wrap{
  background:var(--paper); border:1px solid var(--line);
  border-radius:22px; padding:8px;
  overflow-x:auto;
  box-shadow:var(--shadow-paper);
}
.planes__compare-table{
  width:100%; border-collapse:collapse;
  font-size:14.5px;
  min-width:720px;
}
.planes__compare-table th,
.planes__compare-table td{
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  text-align:center;
}
.planes__compare-table thead th{
  font-family:var(--f-ui);
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:700;
  padding:20px 18px;
  border-bottom:2px solid var(--line);
  background:var(--cream-deep);
}
.planes__compare-table thead th:first-child{
  text-align:left; border-top-left-radius:14px;
}
.planes__compare-table thead th:last-child{ border-top-right-radius:14px; }
.planes__compare-table thead th.featured{
  color:var(--terracotta); background:var(--sun-soft);
  position:relative;
}
.planes__compare-table thead th.featured::after{
  content:"★"; position:absolute; top:6px; right:10px;
  font-size:11px; color:var(--sun);
}
.planes__compare-table td{
  color:var(--ink); font-weight:500;
}
.planes__compare-table td:first-child{
  text-align:left; color:var(--ink-soft); font-weight:500;
  font-family:var(--f-ui); font-size:14px;
}
.planes__compare-table tr:hover td{ background:rgba(194,80,47,.04); }
.planes__compare-table tr:last-child td{ border-bottom:none; }
.planes__compare-table td .yes{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--mate-soft); color:var(--mate-deep);
  font-weight:800; font-size:13px;
}
.planes__compare-table td .no{ color:var(--ink-mute); font-size:16px; opacity:.5; }

/* Fila "grupo" separadora (Capacidad, Funcionalidades) */
.planes__compare-table tr td.group{
  font-family:var(--f-ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:800; color:var(--terracotta);
  background:var(--cream-deep);
  padding:14px 18px 8px;
}
.planes__compare-table tr td.group + td,
.planes__compare-table tr td.group ~ td{ background:var(--cream-deep); border-bottom:1px solid var(--line); }

.planes__compare-foot{
  text-align:center; margin-top:22px; font-size:14.5px; color:var(--ink-mute);
}

@media (max-width: 960px){
  .planes__compare{ padding:0 20px; }
  .planes__compare-table{ font-size:13.5px; }
  .planes__compare-table th, .planes__compare-table td{ padding:12px 14px; }
}


/* ═══════════════════════════════════════════════════
   REGISTRO — Card del plan Demo en sidebar
   (sólo cuando entra por el flow estándar de 14 días)
   ═══════════════════════════════════════════════════ */
.reg__demo-plan{
  margin: 26px 0;
  padding: 22px 24px;
  background: linear-gradient(160deg, #1E2A23 0%, #2A3A31 100%);
  color: var(--paper);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -22px rgba(30,42,35,.5);
}
.reg__demo-plan::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(300px 150px at 10% 0%, rgba(233,196,106,.22), transparent 70%),
    radial-gradient(300px 200px at 90% 100%, rgba(194,80,47,.15), transparent 70%);
}
.reg__demo-plan > *{ position: relative; z-index: 1; }
.reg__demo-plan__badge{
  font-family: var(--f-ui);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sun);
  display: inline-block;
  margin-bottom: 6px;
}
.reg__demo-plan__name{
  font-family: var(--f-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--paper);
}
.reg__demo-plan__desc{
  font-size: 13px;
  color: #BDB39B;
  margin: 0 0 14px;
  line-height: 1.5;
}
.reg__demo-plan__list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px;
  color: #E8DFC9;
  line-height: 1.5;
}
.reg__demo-plan__list li{
  display: flex; align-items: start; gap: 10px;
}
.reg__demo-plan__list .tick{
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201,212,163,.22);
  color: var(--mate-soft);
  font-size: 11px; font-weight: 800;
  margin-top: 1px;
}
.reg__demo-plan__note{
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
  color: #9AA696;
  line-height: 1.55;
}