:root{
  /* Primarios (tomados de tu config) */
  --primary-950: #003265;
  --primary-900: #00407a;

  /* Validación */
  --validation-600: #059669;

  /* Slate / gray */
  --slate-50: #F9FAFB;
  --slate-100: #F3F4F6;
  --slate-200: #E5E7EB;
  --slate-300: #BFC4CD;
  --slate-400: #9CA3AF;
  --slate-500: #6B7280;
  --slate-600: #4B5563;
  --slate-700: #374151;
  --slate-800: #1F2937;
  --slate-900: #111827;
  --slate-950: #030712;

  /* Otros */
  --bg: white;
  --text: var(--slate-900);
  --muted: var(--slate-600);
  --card-bg: linear-gradient(135deg, var(--slate-100), var(--slate-200));
  --card-border: rgba(17,24,39,0.06);
  --shadow-primary: rgba(0,50,101,0.18);
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --container-max: 1200px;
  --gap: 1.5rem;
  --transition: 180ms ease;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid #E5E7EB;
  background:white;
}

.dark .site-header{
  border-color:#1F2937;
  background:#003265;
}

/* container */

.header-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
}

@media(min-width:768px){
  .header-container{
    padding:16px 40px;
  }
}

/* logo */

.logo img{
  height:36px;
  width:auto;
  object-fit:contain;
}

/* nav */

.nav{
  display:flex;
  align-items:center;
  gap:24px;
}

/* desktop links */

.nav-links{
  display:none;
  align-items:center;
  gap:32px;
}

.nav-links a{
  font-size:14px;
  font-weight:500;
  color:#111827;
  text-decoration:none;
  transition:color .2s;
}

.nav-links a:hover{
  color:#00407a;
}

.dark .nav-links a{
  color:white;
}

/* desktop actions */

.nav-actions{
  display:none;
  align-items:center;
  gap:12px;
}

/* buttons */

.btn-primary{
  height:40px;
  padding:0 20px;
  border-radius:8px;
  border:none;
  background:#003265;
  color:white;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(0,50,101,.2);
  transition:all .2s;
}

.btn-primary:hover{
  background:#00407a;
  transform:translateY(-2px);
}

.btn-login{
  display:flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  border-radius:8px;
  background:#F3F4F6;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  color:#111827;
}

.btn-login:hover{
  background:#E5E7EB;
}

.dark .btn-login{
  background:#1F2937;
  color:white;
}

/* mobile toggle */

.menu-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:22px;
  background:none;
  border:none;
  cursor:pointer;
  color:#6B7280;
}

.menu-toggle:hover{
  color:#111827;
}

.dark .menu-toggle{
  color:#CBD5E1;
}

/* mobile menu */

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:16px;
  padding:20px 24px;
  border-bottom:1px solid #E5E7EB;
  background:white;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.dark .mobile-menu{
  background:#003265;
  border-color:#1F2937;
}

.mobile-menu a{
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  color:#374151;
}

.dark .mobile-menu a{
  color:#E5E7EB;
}

.mobile-menu hr{
  border:0;
  border-top:1px solid #E5E7EB;
}

.dark .mobile-menu hr{
  border-color:#1F2937;
}

.mobile-login{
  display:flex;
  justify-content:center;
  align-items:center;
  height:48px;
  border-radius:8px;
  background:#F3F4F6;
  font-weight:600;
}

.dark .mobile-login{
  background:#1F2937;
}

.mobile-demo{
  height:48px;
  border:none;
  border-radius:8px;
  background:#003265;
  color:white;
  font-size:16px;
  font-weight:600;
}

/* responsive */

@media(min-width:640px){
  .nav-actions{
    display:flex;
  }
}

@media(min-width:768px){
  .nav-links{
    display:flex;
  }

  .menu-toggle{
    display:none;
  }

  .mobile-menu{
    display:none !important;
  }
}

.dark{
  --bg: #071226;
  --text: #fff;
  --muted: #cbd5e1; /* lighter slate for dark */
  --card-bg: linear-gradient(135deg, #111827, #1f2937);
  --card-border: rgba(148,163,184,0.08);
  --shadow-primary: rgba(0,0,0,0.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  line-height:1.45;
}

/* Container / Main */
.hero{
  display:flex;
  flex-direction:column;
  gap:1.75rem; /* gap-12 ~ 3rem, but for balance use 1.75rem */
  align-items:center;
  justify-content:space-between;
  padding:56px 24px; /* py-14 px-6 */
  max-width:var(--container-max);
  margin:0 auto;
  background:transparent;
}

/* layout breakpoint md = 768px */
@media(min-width:768px){
  .hero{
    flex-direction:row;
    padding:96px 80px; /* md:py-24 md:px-20 -> 96px 80px */
    gap:3rem;
  }
}

/* Left column */
.hero-left{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-width:640px; /* approx max-w-2xl */
  width:100%;
}

.eyebrow{
  display:inline-block;
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: rgba(0,50,101,0.9); /* primary-950/90 */
}

/* Title */
.hero-title{
  margin:0;
  font-weight:800;
  font-size:2.25rem; /* text-4xl */
  line-height:1.05;
  color:var(--slate-900);
}

@media(min-width:768px){
  .hero-title{ font-size:3.75rem; } /* md:text-6xl */
}

.accent{
  color:var(--primary-950);
  display:inline-block;
  margin-left:6px;
}

/* Lead paragraph */
.hero-lead{
  margin:0;
  color:var(--muted);
  font-size:1rem; /* text-lg in your mapping */
  max-width:48rem;
}

/* CTAs */
.hero-ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1rem;
  width:100%;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 2rem;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  transition:all var(--transition);
  white-space:nowrap;
  font-size:1rem;
}

/* primary button */
.btn-primary{
  background:var(--primary-950);
  color:#fff;
  box-shadow: 0 8px 24px var(--shadow-primary);
  border:1px solid rgba(0,0,0,0.04);
}

.btn-primary:hover{ background:var(--primary-900); transform:translateY(-2px); }

/* ghost button */
.btn-ghost{
  background:transparent;
  border:1px solid rgba(15,23,42,0.06);
  color:var(--slate-900);
}

.dark .btn-ghost{
  border-color: rgba(148,163,184,0.06);
  color:var(--text);
}

.btn-ghost:hover{ background: rgba(15,23,42,0.03); }

/* full width on small screens, auto on sm and up */
@media(min-width:640px){
  .btn{ min-width: auto; }
  .hero-ctas .btn{ width:auto; }
}
@media(max-width:639px){
  .hero-ctas .btn{ width:100%; }
}

/* features row */
.hero-features{
  display:flex;
  gap:1.5rem;
  margin-top:8px;
  color:var(--muted);
  font-size:0.9rem;
  align-items:center;
  flex-wrap:wrap;
}

.feature{
  display:flex;
  gap:0.6rem;
  align-items:center;
}

.icon{
  width:20px;
  height:20px;
  color:var(--validation-600);
}

/* Visual card (aside) */
.visual-card{
  position:relative;
  width:100%;
  max-width:420px; /* approx max-w-lg */
  aspect-ratio:4/3;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow: 0 20px 50px rgba(2,6,23,0.08);
  padding:18px;
}

/* top overlay to simulate light */
.visual-overlay-top{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, transparent, rgba(255,255,255,0.7));
  pointer-events:none;
  opacity:0.9;
}

.dark .visual-overlay-top{
  background: linear-gradient(to top, transparent, rgba(7,18,38,0.65));
}

/* inner card */
.card-inner{
  position:relative;
  z-index:10;
  background:var(--bg);
  color:var(--text);
  border-radius:14px;
  padding:20px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.08);
  width:86%;
  max-width:320px;
}

.dark .card-inner{
  background: #0f1724; /* dark card background */
}

/* header row inside card */
.card-header{
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(15,23,42,0.04);
  padding-bottom:12px;
  margin-bottom:12px;
}

.dark .card-header{
  border-bottom:1px solid rgba(148,163,184,0.04);
}

/* icons in header */
.pdf-icon{
  padding:8px;
  border-radius:8px;
  background: rgba(255,0,0,0.06); /* like red-100 */
  color:#e63939; /* red-700-ish */
  display:flex;
  align-items:center;
  justify-content:center;
}

.table-icon{
  padding:8px;
  border-radius:8px;
  background: rgba(16,185,133,0.06); /* validation-50 */
  color:var(--validation-600);
  margin-left:auto;
}

/* skeleton bars */
.skeletons{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.bar{ border-radius:8px; height:10px; background:var(--slate-200); width:100%; }
.bar.small{ height:6px; width:60%; background:var(--slate-100); }
.bar.large{ width:70%; height:12px }

/* arrow style */
.arrow{ color:var(--primary-950); width:20px; height:20px }

/* Card body rows */
.card-body{ display:flex; flex-direction:column; gap:10px; }

.card-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.9rem; padding:8px 2px; }

.header-row{ color:var(--muted); font-size:0.78rem; padding:0 6px; display:flex; gap:6px; justify-content:space-between; }

.data-row{
  background: rgba(15,23,42,0.03);
  border-radius:10px;
  padding:10px;
  align-items:center;
}

.dark .data-row{ background: rgba(255,255,255,0.02); }

.label{ font-weight:600; color:var(--slate-900); }
.value{ font-weight:600; color:var(--slate-700); }
.trust{ font-weight:700; color:var(--validation-600); font-size:0.78rem; }

/* small adjustments for dark text colors */
.dark .label{ color:#e6edf3; }
.dark .value{ color:#e6edf3; }

/* small responsive adjustments */
@media(max-width:760px){
  .card-inner{ width:92%; max-width:420px; }
}
/* SECTION */

.solutions-section{
  padding:96px 24px;
  background:white;
}

.dark .solutions-section{
  background:#003265;
}

/* container */

.solutions-container{
  max-width:1150px;
  margin:auto;
}

/* header */

.solutions-header{
  text-align:center;
  margin-bottom:80px;
}

.solutions-header h2{
  font-size:2rem;
  font-weight:700;
  margin-bottom:16px;
  color:#111827;
}

.dark .solutions-header h2{
  color:white;
}

.solutions-header p{
  font-size:1.1rem;
  max-width:620px;
  margin:auto;
  color:#4B5563;
  line-height:1.6;
}

.dark .solutions-header p{
  color:#9CA3AF;
}

/* GRID */

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

@media(min-width:768px){
  .solutions-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* CARD BASE */

.card-problem,
.card-solution{
  border-radius:16px;
  padding:40px;
  transition:all .3s ease;
  position:relative;
}

.card-problem:hover,
.card-solution:hover{
  transform:translateY(-6px);
}

/* PROBLEM */

.card-problem{
  background:rgba(255,232,232,.4);
  border:1px solid #FFB2B2;
}

.dark .card-problem{
  background:rgba(148,24,24,.2);
  border:1px solid rgba(148,24,24,.4);
}

.card-problem:hover{
  box-shadow:0 15px 40px rgba(0,0,0,.1);
}

/* SOLUTION */

.card-solution{
  background:rgba(238,247,255,.3);
  border:1px solid rgba(0,148,255,.35);
}

.dark .card-solution{
  background:rgba(0,64,122,.25);
  border:1px solid rgba(0,78,149,.6);
}

.card-solution:hover{
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}

/* ICON */

.card-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  margin-bottom:30px;
}

.card-icon svg{
  width:26px;
  height:26px;
}

.problem-icon{
  background:#FFD1D1;
  color:#E63939;
}

.solution-icon{
  background:#dcefff;
  color:#003265;
}

/* TITLES */

.card-problem h3,
.card-solution h3{
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:28px;
  color:#111827;
}

.dark .card-problem h3,
.dark .card-solution h3{
  color:white;
}

/* LIST */

.card-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.card-list li{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.card-list svg{
  width:22px;
  height:22px;
  margin-top:4px;
  flex-shrink:0;
}

/* icons */

.icon-x{
  color:#FF5656;
}

.icon-check{
  color:#059669;
}

/* text */

.item-title{
  font-weight:600;
  display:block;
  color:#374151;
}

.dark .item-title{
  color:#E5E7EB;
}

.item-desc{
  font-size:0.9rem;
  opacity:.8;
}
/* SECTION */

.features-section{
  padding:80px 24px;
  background:#F9FAFB;
}

.dark .features-section{
  background:#003265;
}

/* container */

.features-container{
  max-width:1150px;
  margin:auto;
}

/* GRID */

.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}

@media(min-width:768px){
  .features-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* CARD */

.feature-card{
  background:white;
  padding:32px;
  border-radius:16px;
  border:1px solid #E5E7EB;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:all .3s ease;
}

.dark .feature-card{
  background:#0f172a;
  border-color:#1F2937;
}

.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.1);
}

/* ICON */

.feature-icon{
  width:56px;
  height:56px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  transition:all .25s;
}

.feature-icon svg{
  width:26px;
  height:26px;
}

/* PRIMARY */

.icon-primary{
  background:#dcefff;
  color:#003265;
}

.feature-card:hover .icon-primary{
  background:#003265;
  color:white;
}

/* INDIGO */

.icon-indigo{
  background:#E0E7FF;
  color:#4F46E5;
}

.feature-card:hover .icon-indigo{
  background:#4F46E5;
  color:white;
}

/* TEAL */

.icon-teal{
  background:#CCFBF1;
  color:#0D9488;
}

.feature-card:hover .icon-teal{
  background:#0D9488;
  color:white;
}

/* TITLES */

.feature-card h3{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:12px;
  color:#111827;
}

.dark .feature-card h3{
  color:white;
}

/* TEXT */

.feature-card p{
  color:#4B5563;
  line-height:1.6;
}

.dark .feature-card p{
  color:#9CA3AF;
}

.workflow{
padding:96px 24px;
background:white;
}

.dark .workflow{
background:#020617;
}

.workflow-container{
max-width:1200px;
margin:auto;
text-align:center;
}

.workflow-label{
font-size:12px;
letter-spacing:2px;
font-weight:600;
text-transform:uppercase;
color:#1e3a8a;
}

.dark .workflow-label{
color:#60a5fa;
}

.workflow-title{
font-size:36px;
font-weight:700;
margin-top:12px;
margin-bottom:64px;
color:#0f172a;
}

.dark .workflow-title{
color:white;
}

.workflow-content{
position:relative;
}

.workflow-line{
display:none;
position:absolute;
top:48px;
left:0;
width:100%;
height:1px;
background:linear-gradient(
to right,
transparent,
#e2e8f0,
transparent
);
}

.dark .workflow-line{
background:linear-gradient(
to right,
transparent,
#334155,
transparent
);
}

.workflow-grid{
display:grid;
grid-template-columns:1fr;
gap:56px;
position:relative;
z-index:2;
}

.workflow-step{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.workflow-icon{
width:80px;
height:80px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
margin-bottom:24px;
background:#eff6ff;
border:1px solid #dbeafe;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
transition:transform .3s;
}

.dark .workflow-icon{
background:rgba(30,58,138,0.25);
border:1px solid #1e3a8a;
}

.workflow-step:hover .workflow-icon{
transform:scale(1.1);
}

.workflow-step h6{
font-size:20px;
font-weight:600;
margin-bottom:12px;
color:#0f172a;
}

.dark .workflow-step h6{
color:white;
}

.workflow-step p{
color:#475569;
max-width:260px;
}

.dark .workflow-step p{
color:#94a3b8;
}

/* responsive */

@media (min-width:768px){

.workflow-grid{
grid-template-columns:repeat(3,1fr);
}

.workflow-line{
display:block;
}

}
.contact-section{
padding:100px 24px;
background:#061017;
color:white;
}

.contact-container{
max-width:1200px;
margin:auto;
display:grid;
gap:60px;
grid-template-columns:1fr;
align-items:center;
}

.contact-info h3{
font-size:44px;
font-weight:900;
margin-bottom:20px;
}

.contact-info p{
color:#cbd5e1;
font-size:18px;
margin-bottom:30px;
max-width:500px;
}

.contact-benefits{
list-style:none;
padding:0;
color:#cbd5e1;
}

.contact-benefits li{
margin-bottom:12px;
}

.contact-form-wrapper{
display:flex;
justify-content:center;
}

.contact-form{
background:white;
color:#0f172a;
padding:42px;
border-radius:20px;
max-width:520px;
width:100%;
box-shadow:0 25px 60px rgba(0,0,0,.25);
}

.form-title{
font-size:26px;
font-weight:800;
margin-bottom:6px;
}

.form-title span{
color:#2563eb;
}

.form-subtitle{
color:#64748b;
margin-bottom:24px;
font-size:14px;
}

.form-grid{
display:grid;
grid-template-columns:1fr;
gap:18px;
}

.field{
display:flex;
flex-direction:column;
}

.field.full{
grid-column:1/-1;
}

.field label{
font-size:13px;
font-weight:600;
margin-bottom:6px;
color:#334155;
}

.field input,
.field textarea{
padding:13px 14px;
border-radius:10px;
border:1px solid #e2e8f0;
font-size:14px;
transition:all .2s;
background:#f8fafc;
}

.field input:focus,
.field textarea:focus{
outline:none;
border-color:#2563eb;
background:white;
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

textarea{
resize:vertical;
}

.error{
color:#ef4444;
font-size:12px;
margin-top:3px;
height:14px;
}

.form-message{
margin-top:10px;
font-size:14px;
}

.form-actions{
display:flex;
gap:10px;
margin-top:24px;
}

.btn-clear{
display:flex;
align-items:center;
gap:6px;
background:#e2e8f0;
border:none;
padding:12px 16px;
border-radius:10px;
cursor:pointer;
font-size:14px;
transition:.2s;
}

.btn-clear:hover{
background:#cbd5e1;
}

.btn-submit{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
border:none;
padding:13px 20px;
border-radius:10px;
cursor:pointer;
flex:1;
font-weight:600;
font-size:14px;
transition:.2s;
}

.btn-submit:hover{
transform:translateY(-1px);
box-shadow:0 10px 25px rgba(37,99,235,.35);
}

.btn-submit:disabled{
opacity:.6;
cursor:not-allowed;
transform:none;
box-shadow:none;
}

.privacy{
font-size:12px;
margin-top:18px;
color:#64748b;
}

.privacy a{
color:#2563eb;
text-decoration:none;
}

.privacy a:hover{
text-decoration:underline;
}

.hidden{
display:none;
}

@media(min-width:768px){

.contact-container{
grid-template-columns:1fr 1fr;
}

.form-grid{
grid-template-columns:1fr 1fr;
}

}

/* FAQ */

.faq-section{
padding:64px 24px;
background:white;
}

.dark .faq-section{
background:#020617;
}

.faq-container{
max-width:800px;
margin:auto;
}

.faq-title{
font-size:24px;
font-weight:700;
text-align:center;
margin-bottom:32px;
color:#0f172a;
}

.dark .faq-title{
color:white;
}

.faq-list{
display:flex;
flex-direction:column;
gap:16px;
}

.faq-item{
padding:16px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#f8fafc;
}

.dark .faq-item{
border:1px solid #1e293b;
background:#0f172a;
}

.faq-item summary{
cursor:pointer;
font-weight:600;
}

.faq-item p{
margin-top:10px;
color:#64748b;
}

.dark .faq-item p{
color:#94a3b8;
}



/* FOOTER */

.footer{
padding:60px 24px;
background:white;
border-top:1px solid #e2e8f0;
}

.dark .footer{
background:#020617;
border-top:1px solid #1e293b;
}

.footer-container{
max-width:1200px;
margin:auto;
}

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

.footer-brand p{
color:#64748b;
font-size:14px;
line-height:1.6;
}

.brand-logo{
display:flex;
align-items:center;
gap:10px;
margin-bottom:16px;
}

.logo-icon{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
background:white;
box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.brand-name{
font-weight:700;
font-size:18px;
}

.footer h4{
font-weight:700;
margin-bottom:14px;
}

.footer ul{
list-style:none;
padding:0;
margin:0;
}

.footer li{
margin-bottom:8px;
}

.footer a{
color:#64748b;
text-decoration:none;
font-size:14px;
transition:.2s;
}

.footer a:hover{
color:#1e3a8a;
}

.footer-bottom{
margin-top:50px;
padding-top:20px;
border-top:1px solid #f1f5f9;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
font-size:14px;
color:#94a3b8;
}

.dark .footer-bottom{
border-top:1px solid #1e293b;
}

.footer-social a{
color:#64748b;
}



/* responsive */

@media (min-width:768px){

.footer-grid{
grid-template-columns:2fr 1fr 1fr 1fr;
}

.footer-bottom{
flex-direction:row;
justify-content:space-between;
}

}