/* ============================================================
   CON JURÍDICO — Sistema de diseño
   Azul medianoche · Plata · Blanco · Gris
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* color */
  --navy-deep:   #08131F;
  --navy:        #0F2038;
  --navy-mid:    #1B324F;
  --silver:      #C7CFDA;
  --silver-soft: #EDF0F4;
  --white:       #FFFFFF;
  --gray-900:    #1C232E;
  --gray-600:    #4C5666;
  --gray-400:    #8A93A3;
  --gray-200:    #DCE1E8;
  --gray-100:    #F4F6F8;
  --line:        rgba(199,207,218,0.28);

  /* type */
  --display: 'Cormorant Garamond', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radius: 9px;
  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--gray-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0; line-height:1.12; letter-spacing:0.005em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--silver);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gray-400);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--silver);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--silver); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,19,31,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(199,207,218,0.14);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:34px; height:34px;
  border:1px solid var(--silver);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:15px;
  color:var(--silver-soft);
  position:relative;
}
.brand-mark::after{
  content:'';
  position:absolute; inset:4px;
  border:1px solid rgba(199,207,218,0.4);
  border-radius:50%;
}
.brand-name{
  font-family:var(--display); font-weight:600; font-size:21px;
  color:var(--white); letter-spacing:0.01em;
}
.brand-tag{
  display:block;
  font-family:var(--mono); font-size:9px; letter-spacing:0.16em;
  color:var(--gray-400); text-transform:uppercase; margin-top:1px;
}

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{
  font-size:14px; color:var(--silver); font-weight:500;
  position:relative; padding:6px 0;
}
.main-nav a:hover{ color:var(--white); }
.nav-toggle{ display:none; background:none; border:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:13px 26px;
  font-size:13px; font-weight:600; letter-spacing:0.03em;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:all .18s ease;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(8,19,31,0.06), 0 4px 10px rgba(8,19,31,0.05);
}
.btn-primary{
  background:var(--silver);
  color:var(--navy-deep);
  border-color:var(--silver);
}
.btn-primary:hover{ background:var(--silver-soft); transform:translateY(-1px); }
.btn-outline{
  background:transparent;
  border-color:rgba(199,207,218,0.5);
  color:var(--silver-soft);
}
.btn-outline:hover{ border-color:var(--silver-soft); background:rgba(199,207,218,0.08); }
.btn-dark{
  background:var(--navy-deep);
  color:var(--white);
  border-color:var(--navy-deep);
}
.btn-dark:hover{ background:var(--navy); }
.btn-block{ width:100%; }

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(circle at 82% 18%, rgba(199,207,218,0.10), transparent 45%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:96px 0 110px;
}
.hero::before{
  /* engraved seal rings, evoca el sello del escudo */
  content:'';
  position:absolute;
  top:50%; right:-160px; transform:translateY(-50%);
  width:620px; height:620px;
  border-radius:50%;
  border:1px solid rgba(199,207,218,0.14);
  box-shadow:0 0 0 60px rgba(199,207,218,0.045), 0 0 0 120px rgba(199,207,218,0.03);
  pointer-events:none;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-eyebrow{ margin-bottom:26px; }
.hero h1{
  font-size:clamp(36px, 4.6vw, 58px);
  color:var(--white);
  max-width:15ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--silver);
  border-bottom:1px solid rgba(199,207,218,0.4);
}
.hero-sub{
  margin-top:24px;
  font-size:17px;
  color:var(--gray-200);
  max-width:46ch;
  line-height:1.65;
}
.hero-actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-meta{
  margin-top:46px;
  display:flex; gap:34px;
  border-top:1px solid rgba(199,207,218,0.16);
  padding-top:22px;
}
.hero-meta div span{ display:block; }
.hero-meta .num{ font-family:var(--mono); font-size:20px; color:var(--white); }
.hero-meta .label{ font-size:12px; color:var(--gray-400); margin-top:3px; }

.hero-panel{
  position:relative;
  border:1px solid rgba(199,207,218,0.22);
  background:rgba(255,255,255,0.03);
  border-radius:4px;
  padding:34px;
}
.hero-panel-seal{
  width:88px; height:88px;
  margin:0 auto 22px;
  border:1px solid var(--silver);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hero-panel-seal::after{
  content:'';
  position:absolute; inset:6px;
  border:1px solid rgba(199,207,218,0.5);
  border-radius:50%;
}
.hero-panel-seal span{
  font-family:var(--display); font-weight:700; font-size:26px; color:var(--silver-soft);
}
.hero-panel h3{ color:var(--white); font-size:22px; text-align:center; }
.hero-panel-list{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.hero-panel-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14px; color:var(--gray-200);
}
.hero-panel-list li .tick{
  width:16px; height:16px; flex:none; margin-top:2px;
  border:1px solid var(--silver); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--silver);
}

/* ---------- section shell ---------- */
section{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.2vw,38px); color:var(--gray-900); margin-top:16px; }
.section-head p{ margin-top:16px; color:var(--gray-600); font-size:16px; line-height:1.65; }
.section-alt{ background:var(--gray-100); }
.section-dark{ background:var(--navy-deep); color:var(--white); }
.section-dark .section-head p{ color:var(--gray-200); }

.rule{
  height:1px;
  background:linear-gradient(90deg, var(--gray-200), transparent);
}
.rule-dark{ background:linear-gradient(90deg, rgba(199,207,218,0.3), transparent); }

/* ---------- features grid ---------- */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--gray-200);
  border:1px solid var(--gray-200);
}
.feat-card{
  background:var(--white);
  padding:36px 32px;
}
.feat-num{
  font-family:var(--mono); font-size:12px; color:var(--gray-400);
  letter-spacing:0.08em;
}
.feat-card h3{
  font-size:21px; margin-top:18px; color:var(--gray-900);
}
.feat-card p{ margin-top:12px; font-size:14.5px; color:var(--gray-600); }

/* ---------- process ---------- */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.process-step{ position:relative; padding-top:26px; }
.process-step::before{
  content:attr(data-step);
  font-family:var(--mono);
  font-size:13px;
  color:var(--silver-soft);
  background:var(--navy-deep);
  border:1px solid var(--silver);
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:0; left:0;
}
.process-step{ padding-left:0; padding-top:50px; }
.process-step h4{ font-size:18px; color:var(--white); }
.process-step p{ margin-top:10px; font-size:14px; color:var(--gray-200); }
.process-line{
  position:absolute; top:17px; left:44px; right:-28px; height:1px;
  background:rgba(199,207,218,0.25);
}
.process-step:last-child .process-line{ display:none; }

/* ---------- pricing ---------- */
.price-card{
  border:1px solid var(--gray-200);
  padding:44px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  background:var(--white);
}
.price-card .amount{
  font-family:var(--display); font-size:44px; color:var(--navy-deep);
}
.price-card .amount sup{ font-family:var(--mono); font-size:14px; color:var(--gray-400); }
.price-list{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.price-list li{ font-size:14px; color:var(--gray-600); display:flex; gap:8px; }
.price-list li::before{ content:'—'; color:var(--gray-400); }

/* ---------- testimonial / signature ---------- */
.signature-block{
  border:1px solid rgba(199,207,218,0.25);
  padding:56px;
  text-align:center;
  position:relative;
}
.signature-block::before,
.signature-block::after{
  content:'';
  position:absolute; left:50%; transform:translateX(-50%);
  width:1px; height:26px; background:var(--silver);
}
.signature-block::before{ top:-13px; }
.signature-block::after{ bottom:-13px; }
.signature-block q{
  font-family:var(--display); font-style:italic; font-size:26px;
  color:var(--white); max-width:60ch; display:block; margin:0 auto;
}
.signature-block cite{
  display:block; margin-top:24px; font-style:normal;
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  color:var(--gray-400); text-transform:uppercase;
}

/* ---------- forms ---------- */
.form-shell{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  border:1px solid var(--gray-200);
}
.form-info{
  background:var(--navy-deep);
  color:var(--white);
  padding:52px 44px;
}
.form-info h3{ color:var(--white); font-size:26px; }
.form-info p{ margin-top:16px; color:var(--gray-200); font-size:14.5px; line-height:1.7; }
.form-info-list{ margin-top:32px; display:flex; flex-direction:column; gap:18px; }
.form-info-list li{ font-size:13.5px; color:var(--gray-200); border-top:1px solid rgba(199,207,218,0.16); padding-top:14px; }
.form-info-list li strong{ display:block; color:var(--white); font-size:14px; margin-bottom:3px; }

.form-shell{ border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(8,19,31,0.10); border-color:var(--gray-200); }
.form-body{ padding:52px 44px; }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:12.5px; font-weight:600; color:var(--gray-900);
  margin-bottom:7px; letter-spacing:0.01em;
}
.field .hint{ font-size:12px; color:var(--gray-400); margin-top:5px; }
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  font-family:var(--body);
  font-size:14.5px;
  color:var(--gray-900);
  background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234C5666'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:38px;
  cursor:pointer;
}
.field select:disabled{ cursor:not-allowed; opacity:.6; }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--navy-mid); outline:none; box-shadow:0 0 0 3px rgba(27,50,79,0.07); }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.checkline{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--gray-600); }
.checkline input{ margin-top:3px; }
.checkline a{ text-decoration:underline; color:var(--gray-900); }

.field-section{
  display:flex; align-items:center; gap:12px;
  margin:32px 0 18px;
}
.field-section:first-of-type{ margin-top:0; }
.field-section .n{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--navy-deep); color:#fff;
  font-family:var(--mono); font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.field-section span.txt{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gray-600); font-weight:600;
}
.field-section::after{ content:''; flex:1; height:1px; background:var(--gray-200); }

.form-note{
  margin-top:18px; font-size:12.5px; color:var(--gray-400);
}
.form-success{
  display:none;
  border:1px solid var(--gray-200);
  padding:20px;
  font-size:14px;
  color:var(--gray-900);
  background:var(--gray-100);
}
.form-success.show{ display:block; }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-deep); color:var(--gray-200); padding:64px 0 30px; }
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(199,207,218,0.14);
}
.footer-brand p{ margin-top:16px; font-size:13.5px; color:var(--gray-400); max-width:32ch; line-height:1.7; }
.footer-col h5{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gray-400); margin-bottom:16px; font-weight:600;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:13.5px; color:var(--gray-200); }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; font-size:12px; color:var(--gray-400); flex-wrap:wrap; gap:12px;
}

/* ---------- legal / static page ---------- */
.legal-header{
  background:var(--navy-deep); color:var(--white); padding:64px 0 44px;
}
.legal-header .eyebrow{ margin-bottom:16px; }
.legal-header h1{ font-size:clamp(28px,3.6vw,42px); color:var(--white); }
.legal-header .updated{ margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--gray-400); }
.legal-body{ padding:64px 0 100px; }
.legal-layout{ display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; }
.legal-toc{ position:sticky; top:100px; border-left:1px solid var(--gray-200); padding-left:20px; }
.legal-toc h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-400); margin-bottom:14px; }
.legal-toc ul{ display:flex; flex-direction:column; gap:10px; }
.legal-toc a{ font-size:13.5px; color:var(--gray-600); }
.legal-toc a:hover{ color:var(--navy-deep); }
.legal-content article{ margin-bottom:40px; }
.legal-content .num{ font-family:var(--mono); font-size:12px; color:var(--gray-400); }
.legal-content h2{ font-size:22px; margin-top:8px; color:var(--gray-900); }
.legal-content p, .legal-content li{ font-size:14.5px; color:var(--gray-600); line-height:1.75; margin-top:12px; }
.legal-content ul{ padding-left:20px; list-style:disc; }
.legal-content li{ margin-top:8px; }
.legal-callout{
  border:1px solid var(--gray-200);
  background:var(--gray-100);
  padding:20px 22px;
  font-size:13.5px;
  color:var(--gray-600);
  margin-top:16px;
}

/* ---------- contenido del blog (HTML del editor) ---------- */
.blog-content{ font-size:16px; line-height:1.85; color:var(--gray-900); }
.blog-content h2{ font-size:24px; margin:34px 0 12px; color:var(--navy-deep); }
.blog-content h3{ font-size:19px; margin:26px 0 10px; color:var(--navy-deep); }
.blog-content p{ margin:0 0 16px; }
.blog-content ul, .blog-content ol{ margin:0 0 16px; padding-left:24px; }
.blog-content li{ margin-bottom:6px; }
.blog-content a{ color:var(--navy-mid); text-decoration:underline; }
.blog-content img{ max-width:100%; height:auto; border-radius:4px; margin:20px 0; display:block; }
.blog-content strong{ color:var(--gray-900); }

/* ---------- utility page banner (subpáginas) ---------- */
.page-banner{
  background:linear-gradient(180deg, var(--navy-deep), var(--navy));
  color:var(--white);
  padding:70px 0 60px;
}
.page-banner h1{ font-size:clamp(30px,3.8vw,44px); color:var(--white); margin-top:16px; max-width:22ch; }
.page-banner p{ margin-top:16px; color:var(--gray-200); max-width:50ch; font-size:15.5px; }

/* ============================================================
   LANDING PAGE (tráfico pago — Google Ads / Meta Ads)
   Sin menú, sin enlaces de salida, un solo objetivo: convertir.
   ============================================================ */
.lp-body{ background:var(--white); }

.lp-bar{
  background:var(--navy-deep);
  padding:16px 0;
  border-bottom:1px solid rgba(199,207,218,0.14);
}
.lp-bar .wrap{ display:flex; align-items:center; justify-content:space-between; }
.lp-bar .brand-name{ font-size:18px; }
.lp-bar-trust{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  color:var(--gray-400); text-transform:uppercase;
}
@media (max-width:640px){ .lp-bar-trust{ display:none; } }

.lp-hero{
  background:
    radial-gradient(circle at 85% 10%, rgba(199,207,218,0.10), transparent 45%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color:var(--white);
  padding:64px 0 80px;
  position:relative;
  overflow:hidden;
}
.lp-hero .wrap{
  display:grid;
  grid-template-columns:1fr 460px;
  gap:52px;
  align-items:start;
}
.lp-hero h1{
  font-size:clamp(32px,4vw,48px);
  color:var(--white);
  max-width:16ch;
}
.lp-hero h1 em{ font-style:normal; color:var(--silver); }
.lp-hero-sub{ margin-top:20px; font-size:16.5px; color:var(--gray-200); max-width:44ch; line-height:1.65; }

.lp-badges{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.lp-badge{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--gray-200);
  border:1px solid rgba(199,207,218,0.25);
  padding:9px 14px; border-radius:20px;
}
.lp-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--silver); flex:none; }

.lp-form-card{
  background:var(--white);
  border-radius:4px;
  padding:32px;
  color:var(--gray-900);
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}
.lp-form-card h3{ font-size:21px; color:var(--gray-900); }
.lp-form-card .sub{ font-size:13px; color:var(--gray-600); margin-top:6px; }
.lp-form-card form{ margin-top:22px; }

/* video explicativo */
.lp-video{ padding:80px 0; background:var(--gray-100); }
.lp-video .section-head{ text-align:center; margin:0 auto 40px; }
.video-frame{
  max-width:860px; margin:0 auto;
  aspect-ratio:16/9;
  background:var(--navy-deep);
  border-radius:4px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--gray-200);
}
.video-frame .play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:14px;
  color:var(--white);
  background:linear-gradient(180deg, rgba(8,19,31,0.2), rgba(8,19,31,0.55));
}
.video-frame .play-btn{
  width:66px; height:66px; border-radius:50%;
  border:1px solid var(--silver);
  display:flex; align-items:center; justify-content:center;
}
.video-frame .play span{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-200); }

/* beneficios compactos */
.lp-benefits{ padding:80px 0; }
.benefits-compact{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--gray-200); border:1px solid var(--gray-200);
}
.benefit-item{ background:var(--white); padding:28px 24px; text-align:left; }
.benefit-item .ico{
  width:38px; height:38px; border:1px solid var(--gray-200); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; color:var(--navy-deep); margin-bottom:16px;
}
.benefit-item h4{ font-size:15.5px; color:var(--gray-900); }
.benefit-item p{ margin-top:8px; font-size:13px; color:var(--gray-600); }

/* cta final */
.lp-final-cta{
  background:var(--navy-deep); color:var(--white);
  padding:80px 0; text-align:center;
}
.lp-final-cta h2{ color:var(--white); font-size:clamp(26px,3vw,34px); max-width:22ch; margin:16px auto 0; }
.lp-final-cta .btn{ margin-top:30px; }

.lp-footer{
  background:var(--navy-deep);
  border-top:1px solid rgba(199,207,218,0.14);
  padding:26px 0;
}
.lp-footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--gray-400); flex-wrap:wrap; gap:10px;
}
.lp-footer a{ color:var(--gray-400); text-decoration:underline; }

@media (max-width:980px){
  .lp-hero .wrap{ grid-template-columns:1fr; }
  .benefits-compact{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .benefits-compact{ grid-template-columns:1fr; }
  .lp-form-card{ padding:24px; }
}

/* ============================================================
   PANEL INTERNO (CRM) — vista privada tras iniciar sesión
   ============================================================ */
.panel-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.panel-sidebar{
  background:var(--navy-deep); color:var(--gray-200);
  padding:26px 20px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.panel-sidebar .brand{ padding-bottom:22px; border-bottom:1px solid rgba(199,207,218,0.16); margin-bottom:22px; }
.panel-sidebar .brand-name{ color:#fff; font-size:17px; }
.panel-nav{ display:flex; flex-direction:column; gap:2px; }
.panel-nav a{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:3px;
  font-size:13.5px; color:var(--gray-200);
}
.panel-nav a:hover{ background:rgba(199,207,218,0.08); color:#fff; }
.panel-nav a.active{ background:rgba(199,207,218,0.14); color:#fff; font-weight:600; }
.panel-nav .soon{ font-family:var(--mono); font-size:9px; color:var(--gray-400); margin-left:auto; }
.panel-nav-section{
  font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gray-400); margin:20px 0 8px; padding:0 12px;
}
.panel-user{
  margin-top:24px; padding-top:18px; border-top:1px solid rgba(199,207,218,0.16);
  font-size:12.5px; color:var(--gray-400);
}
.panel-user strong{ display:block; color:#fff; font-size:13.5px; margin-bottom:2px; }
.panel-user a{ color:var(--gray-400); text-decoration:underline; display:inline-block; margin-top:8px; }

/* Foto + nombre arriba del menú */
.panel-who{
  display:flex; align-items:center; gap:12px;
  padding:16px 12px; margin-bottom:6px;
  border-bottom:1px solid rgba(199,207,218,0.16);
}
.panel-who-photo{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(199,207,218,0.4); flex:none;
}
.panel-who-placeholder{
  display:flex; align-items:center; justify-content:center;
  background:rgba(199,207,218,0.12); color:#fff;
  font-family:var(--display); font-weight:700; font-size:16px;
}
.panel-who strong{ display:block; color:#fff; font-size:13.5px; }
.panel-who span{ display:block; font-size:11px; color:var(--gray-400); text-transform:capitalize; margin-top:2px; }

/* Barra superior móvil + botón hamburguesa (solo se ve en pantallas chicas) */
.panel-topbar-mobile{
  display:none; align-items:center; justify-content:space-between;
  background:var(--navy-deep); padding:14px 20px; position:sticky; top:0; z-index:50;
}
.panel-toggle{ background:none; border:1px solid rgba(199,207,218,0.3); border-radius:8px; padding:8px 10px; }

.panel-main{ background:var(--gray-100); padding:34px 40px; }
.panel-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.panel-topbar h1{ font-size:24px; color:var(--gray-900); }
.panel-topbar p{ margin-top:4px; font-size:13.5px; color:var(--gray-600); }

.panel-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px; }
.panel-card{ background:var(--white); border:1px solid var(--gray-200); padding:20px 22px; }
.panel-card .num{ font-family:var(--display); font-size:30px; color:var(--navy-deep); }
.panel-card .label{ font-size:12.5px; color:var(--gray-600); margin-top:4px; }

.panel-box{ background:var(--white); border:1px solid var(--gray-200); padding:26px; margin-bottom:24px; }
.panel-box h2{ font-size:17px; color:var(--gray-900); margin-bottom:16px; }

.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{
  text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gray-400); padding:10px 12px; border-bottom:1px solid var(--gray-200);
}
.table td{ padding:12px; border-bottom:1px solid var(--gray-100); color:var(--gray-900); vertical-align:top; }
.table tr:hover td{ background:var(--gray-100); }
.table .muted{ color:var(--gray-400); font-size:12.5px; }
.badge{
  display:inline-block; font-size:11px; padding:3px 9px; border-radius:20px;
  border:1px solid var(--gray-200); color:var(--gray-600);
}
.badge-soon{ font-family:var(--mono); font-size:10px; color:var(--gray-400); }

.empty-state{ text-align:center; padding:40px 20px; color:var(--gray-400); font-size:13.5px; }

@media (max-width:900px){
  .panel-shell{ grid-template-columns:1fr; }
  .panel-sidebar{ position:static; height:auto; }
  .panel-cards{ grid-template-columns:1fr 1fr; }
  .panel-main{ padding:24px 20px; }

  .panel-topbar-mobile{ display:flex; }
  .panel-sidebar{
    position:fixed; inset:60px 0 0 0; z-index:40;
    transform:translateX(-100%); transition:transform .25s ease;
    overflow-y:auto;
  }
  .panel-sidebar.open{ transform:translateX(0); }
  .panel-sidebar .brand{ display:none; }
}

/* ============================================================
   VISTA DE DOCUMENTO — imprimible / "Guardar como PDF" del navegador
   ============================================================ */
.doc-toolbar{
  background:var(--navy-deep); padding:16px 0; position:sticky; top:0; z-index:10;
}
.doc-toolbar .wrap{ display:flex; justify-content:space-between; align-items:center; }
.doc-toolbar .btn{ padding:10px 20px; }
.doc-page-wrap{ background:var(--gray-100); padding:40px 0 80px; min-height:100vh; }
.doc-page{
  max-width:760px; margin:0 auto; background:var(--white);
  border:1px solid var(--gray-200);
  padding:60px 64px;
  font-family:var(--body);
  font-size:14px; line-height:1.8; color:var(--gray-900);
  white-space:pre-wrap;
}
@media print{
  .no-print{ display:none !important; }
  .doc-page-wrap{ padding:0; background:#fff; }
  .doc-page{ border:none; max-width:none; padding:0; }
  body{ background:#fff; }
}

/* ============================================================
   ANIMACIONES CORPORATIVAS — revelado al scroll, brillo en fichas,
   botones con degradado animado
   ============================================================ */
[data-reveal]{
  opacity:0;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
[data-reveal="left"]{ transform:translateX(-28px); }
[data-reveal="right"]{ transform:translateX(28px); }
[data-reveal="up"]{ transform:translateY(22px); }
[data-reveal].is-visible{ opacity:1; transform:translate(0,0); }

[data-reveal-group] > *{ transition-delay:calc(var(--reveal-i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Brillo circundante sutil en fichas al pasar el mouse */
.feat-card, .price-card, .panel-card, .benefit-item{ position:relative; overflow:hidden; }
.feat-card::before, .price-card::before, .benefit-item::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(199,207,218,0.16), transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.feat-card:hover::before, .price-card:hover::before, .benefit-item:hover::before{ opacity:1; }

/* Botones de acción primarios: degradado animado sutil */
.btn-primary, .btn-dark{
  position:relative;
  background-size:200% 200%;
  transition:background-position .5s ease, transform .18s ease, box-shadow .3s ease;
}
.btn-primary{
  background-image:linear-gradient(120deg, var(--silver) 0%, var(--silver-soft) 45%, var(--silver) 100%);
}
.btn-dark{
  background-image:linear-gradient(120deg, var(--navy-deep) 0%, var(--navy-mid) 45%, var(--navy-deep) 100%);
}
.btn-primary:hover, .btn-dark:hover{
  background-position:100% 0;
  box-shadow:0 8px 22px rgba(8,19,31,0.18);
  transform:translateY(-2px);
}
.btn-primary:focus-visible, .btn-dark:focus-visible{ animation:pulse-ring 1.1s ease-out; }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(199,207,218,0.55); }
  100%{ box-shadow:0 0 0 10px rgba(199,207,218,0); }
}

/* ============================================================
   LOGIN — tarjeta redondeada con pestañas Iniciar sesión / Registrarse
   ============================================================ */
.auth-wrap{
  min-height:calc(100vh - 78px);
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(199,207,218,0.10), transparent 40%),
    linear-gradient(180deg, var(--gray-100) 0%, var(--white) 100%);
  padding:60px 20px;
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:18px;
  padding:38px 36px;
  box-shadow:0 30px 70px rgba(8,19,31,0.10);
  animation:auth-in .5s cubic-bezier(.22,.61,.36,1);
}
@keyframes auth-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.auth-mark{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--navy-deep); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:19px;
  margin:0 auto 18px;
}
.auth-tabs{
  display:flex; background:var(--gray-100); border-radius:30px; padding:4px;
  margin-bottom:28px;
}
.auth-tabs a{
  flex:1; text-align:center; padding:10px 0;
  font-size:13px; font-weight:600; color:var(--gray-600);
  border-radius:26px; transition:all .25s ease;
}
.auth-tabs a.active{ background:var(--navy-deep); color:#fff; box-shadow:0 4px 12px rgba(8,19,31,0.2); }

.auth-field{ position:relative; margin-bottom:20px; }
.auth-field input{
  width:100%; padding:16px 14px 8px; border:1px solid var(--gray-200); border-radius:10px;
  font-family:var(--body); font-size:14.5px; color:var(--gray-900);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.auth-field label{
  position:absolute; left:14px; top:14px;
  font-size:14.5px; color:var(--gray-400);
  pointer-events:none;
  transition:all .18s ease;
  background:var(--white); padding:0 4px;
}
.auth-field input:focus{ outline:none; border-color:var(--navy-mid); box-shadow:0 0 0 3px rgba(27,50,79,0.08); }
.auth-field input:focus + label,
.auth-field input:not(:placeholder-shown) + label{
  top:-8px; left:10px; font-size:11px; color:var(--navy-mid); font-weight:600;
}
.auth-submit{
  width:100%; border-radius:10px; padding:15px 0; font-size:13.5px;
}
.auth-foot{ text-align:center; margin-top:20px; font-size:13px; color:var(--gray-600); }
.auth-error{
  background:#FBEDEC; border:1px solid #E3B3AE; color:#7A2020;
  padding:12px 16px; border-radius:10px; font-size:13px; margin-bottom:20px;
}

/* ---------- buscador con sugerencias ---------- */
.search-box{ position:relative; max-width:360px; margin-bottom:20px; }
.search-box input{
  width:100%; padding:11px 14px; border:1px solid var(--gray-200); border-radius:8px;
  font-size:13.5px; font-family:var(--body);
}
.search-suggestions{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--white); border:1px solid var(--gray-200); border-radius:8px;
  box-shadow:0 12px 30px rgba(8,19,31,0.12);
  max-height:260px; overflow-y:auto; z-index:20; display:none;
}
.search-suggestions.show{ display:block; }
.search-suggestions .item{
  padding:10px 14px; font-size:13.5px; color:var(--gray-900); cursor:pointer;
  border-bottom:1px solid var(--gray-100);
}
.search-suggestions .item:last-child{ border-bottom:none; }
.search-suggestions .item:hover, .search-suggestions .item.active{ background:var(--gray-100); }
.search-suggestions .item mark{ background:none; color:var(--navy-mid); font-weight:700; }
.table tr.row-highlight{ animation:row-flash 1.4s ease; }
@keyframes row-flash{
  0%{ background:#EDF3FA; } 100%{ background:transparent; }
}

/* ---------- centro de notificaciones ---------- */
.notif-bell{ position:fixed; top:16px; right:24px; z-index:120; }
.notif-bell #notif-bell-btn{
  width:40px; height:40px; border-radius:50%;
  background:var(--white); border:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 14px rgba(8,19,31,0.10);
  position:relative;
}
.notif-dot{
  position:absolute; top:7px; right:7px;
  width:9px; height:9px; border-radius:50%;
  background:#C0392B; border:2px solid #fff;
}
.notif-dropdown{
  position:absolute; top:50px; right:0;
  width:320px; max-height:400px; overflow-y:auto;
  background:var(--white); border:1px solid var(--gray-200); border-radius:12px;
  box-shadow:0 20px 50px rgba(8,19,31,0.16);
}
.notif-dropdown-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--gray-100);
  font-size:13px; font-weight:600; color:var(--gray-900);
}
.notif-dropdown-head button{
  background:none; border:none; font-size:11.5px; color:var(--navy-mid); text-decoration:underline; cursor:pointer;
}
.notif-item{
  display:block; padding:12px 16px; border-bottom:1px solid var(--gray-100);
  font-size:13px; color:var(--gray-900);
}
.notif-item.unread{ background:#F4F7FA; }
.notif-item .cuando{ display:block; font-size:11px; color:var(--gray-400); margin-top:3px; }

@media (max-width:900px){
  .notif-bell{ top:14px; right:64px; }
}

/* ---------- checklist de bienvenida ---------- */
.welcome-box{
  border:1px solid var(--gray-200); background:var(--white);
  padding:26px 28px; margin-bottom:24px; border-radius:10px;
}
.welcome-box h2{ font-size:17px; color:var(--gray-900); }
.welcome-box p.sub{ font-size:13px; color:var(--gray-600); margin-top:4px; }
.welcome-list{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.welcome-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--gray-200); border-radius:8px;
  font-size:13.5px; color:var(--gray-600);
}
.welcome-item.done{ border-color:#bfe0cc; background:#F4FAF6; color:var(--gray-900); }
.welcome-item .tick{
  width:22px; height:22px; border-radius:50%; flex:none;
  border:1px solid var(--gray-300, var(--gray-200));
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.welcome-item.done .tick{ background:#3A8C5E; border-color:#3A8C5E; color:#fff; }
.welcome-item a{ margin-left:auto; font-size:12.5px; text-decoration:underline; color:var(--navy-mid); }

/* ---------- página 404 ---------- */
.notfound-wrap{
  min-height:calc(100vh - 78px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(199,207,218,0.08), transparent 45%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color:#fff;
  padding:60px 20px;
}
.notfound-mark{
  width:120px; height:120px; margin:0 auto 32px;
  border:1px solid var(--silver); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:44px; color:var(--silver-soft);
  animation:notfound-dance 2.6s ease-in-out infinite;
  position:relative;
}
.notfound-mark::after{
  content:''; position:absolute; inset:10px;
  border:1px solid rgba(199,207,218,0.4); border-radius:50%;
}
@keyframes notfound-dance{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  20%{ transform:translateY(-14px) rotate(-8deg); }
  40%{ transform:translateY(0) rotate(6deg); }
  60%{ transform:translateY(-8px) rotate(-4deg); }
  80%{ transform:translateY(0) rotate(3deg); }
}
.notfound-code{
  font-family:var(--mono); font-size:14px; letter-spacing:0.3em; color:var(--gray-400);
  margin-bottom:10px;
}
.notfound-wrap h1{ font-size:clamp(26px,3.6vw,38px); color:#fff; }
.notfound-wrap p{ margin-top:14px; color:var(--gray-200); max-width:44ch; margin-left:auto; margin-right:auto; }
.notfound-actions{ margin-top:32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- página de precios ---------- */
.pricing-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch;
}
.trial-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em;
  color:var(--navy-mid); background:#EEF2F7;
  border:1px solid rgba(27,50,79,0.16);
  padding:8px 14px; border-radius:20px;
  margin-top:18px;
}
.trial-badge::before{ content:'✓'; font-weight:700; }

@media (max-width:760px){
  .pricing-grid{ grid-template-columns:1fr; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero::before{ display:none; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr 1fr; }
  .form-shell{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; border-left:none; border-top:1px solid var(--gray-200); padding-left:0; padding-top:20px; }
}
@media (max-width:640px){
  .site-header{ backdrop-filter:none; background:var(--navy-deep); }
  .main-nav{
    position:fixed; inset:78px 0 0 0; background:var(--navy-deep);
    flex-direction:column; align-items:flex-start; padding:32px 24px;
    gap:22px; transform:translateX(100%); transition:transform .25s ease;
    z-index:150;
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
  .feat-grid{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .price-card{ grid-template-columns:1fr; text-align:left; }
  .field-row{ grid-template-columns:1fr; }
  .hero-meta{ flex-wrap:wrap; row-gap:16px; }
}