:root{
    --primary:#0b57d0;
    --primary-2:#1a73e8;
    --on-primary:#ffffff;
    --bg:#0b1220;          /* used only for subtle hero gradient base */
    --surface:#ffffff;
    --surface-2:#f6f8fc;
    --surface-3:#eef3fd;
    --text:#0f172a;
    --muted:#475569;
    --border:#e5e7eb;
    --success:#137333;
    --warning:#b45309;
    --radius:16px;
    --shadow: 0 10px 30px rgba(15,23,42,.08);
    --shadow-2: 0 6px 18px rgba(15,23,42,.10);
    --container: 1120px;
}

*{ 
    box-sizing:border-box; 
}

html,body { 
    height:100%; 
}

body {
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 30%, #ffffff 100%);
    line-height:1.5;
}

a { color:inherit; 
    text-decoration:none; 
}

.container { 
    width:min(var(--container), calc(100% - 40px)); 
    margin:0 auto; 
}

.container_priv {
    max-width:900px;
    margin:auto;
    background:white;
    border-radius:8px;
    box-shadow:0 2px 4px rgba(0,0,0,.05);
    padding:30px;
}

.container_priv h1 {
    font-size:28px;
    color:#222;
    text-align:center;
    margin-bottom:20px;
}

.container_priv h2 {
    font-size:18px;
    color:#444;
    margin-top:25px;
    border-bottom:1px solid #eee;
    padding-bottom:5px;
}

.container_priv p {
    margin:10px 0;
}

.container_priv table {
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
}

.container_priv th,td {
  padding:8px;
  text-align:left;
  border-bottom:1px solid #eee;
}

.container_priv a {t
  ext-decoration:none;
  color:#0066cc;
}

.topbar {
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(180%) blur(10px);
    background: rgba(255,255,255,.85);
    border-bottom:1px solid rgba(229,231,235,.8);
}

.nav {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    gap:18px;
}

.marca {
    width: 90%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.ilustra {
    width: 200px;
    height: 200px;
    object-position: center;
}

.brand {
    display:flex; 
    align-items:center; 
    gap:10px; 
    min-width:180px;
}

.brand-logo {
    width:34px; height:34px;
    border-radius:12px;
    display:block;
    object-fit:contain;
    background:#fff;
    border:1px solid rgba(229,231,235,.8);
    box-shadow: 0 8px 16px rgba(15,23,42,.06);
    padding:4px;
}

.logo {
    width:34px; 
    height:34px; 
    border-radius:12px;
    background: radial-gradient(120% 120% at 20% 20%, #5aa2ff 0%, var(--primary) 55%, #083c92 100%);
    box-shadow: 0 8px 16px rgba(11,87,208,.25);
}
    
.brand strong { 
    font-weight:700; 
    letter-spacing:.2px; 
} 
  
.brand span { 
    display:block; 
    font-size:12px; 
    color:var(--muted); 
    margin-top:-2px; 
}

.menu {
    display:flex; align-items:center; gap:18px;
    color:#0b1b3a;
}
    
.menu a {
    font-size:14px;
    color:#0b1b3a;
    opacity:.84;
    padding:8px 10px;
    border-radius:12px;
    transition: background .15s ease, opacity .15s ease;
}
    
.menu a:hover { 
    background: var(--surface-3); opacity:1; 
}

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

.btn {
    border:1px solid transparent;
    border-radius: 999px;
    padding:10px 14px;
    font-weight:600;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    user-select:none;
    white-space:nowrap;
}
    
.btn:active { 
    transform: translateY(1px); 
}
    
.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 10px 20px rgba(11,87,208,.20);
}
    
.btn-primary:hover { 
    background: var(--primary-2); 
    box-shadow: 0 14px 28px rgba(11,87,208,.22); 
}
    
.btn-tonal {
    background: #e8f0fe;
    color: #0b1b3a;
    border-color: #d5e3ff;
}

.btn-tonal:hover { 
  background:#deebff; 
  border-color:#c7dcff; 
}

.btn-outline {
    background:transparent;
    border-color: #cbd5e1;
    color:#0b1b3a;
}

.btn-outline:hover { 
  background: var(--surface-3); 
  border-color:#bcd0f0; 
}

.icon {
    font-family: "Material Symbols Rounded";
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.mobile-toggle { 
  display:none; 
}

.mobile-menu {
    display:none;
    padding: 0 0 14px;
}

.mobile-menu a {
    display:block;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    margin-top:10px;
    background: var(--surface);
    color:#0b1b3a;
    font-size:14px;
}

/* Hero */
.hero {
    padding: 56px 0 22px;
    position:relative;
}

.hero-grid {
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
    align-items: center;
}

.badge {
    display:inline-flex; align-items:center; gap:8px;
    background: var(--surface-3);
    color:#0b1b3a;
    border:1px solid #d5e3ff;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

h1 {
    margin: 14px 0 10px;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height:1.12;
    letter-spacing: -0.02em;
}

.lead {
    font-size: 16px;
    color: var(--muted);
    margin: 0 0 18px;
    max-width: 62ch;
}

.hero-actions {
    display:flex; gap:12px; flex-wrap:wrap;
    margin: 18px 0 12px;
}

.hero-checks {
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    margin-top: 10px;
    color: #1f2937;
}

.pill {
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.9);
    padding:8px 10px;
    border-radius:999px;
    font-size:13px;
}

.pill .icon { 
  color: var(--success); 
  font-size:18px; 
}

.mock {
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border:1px solid #dbe7ff;
    box-shadow: var(--shadow);
    overflow:hidden;
}

.mock-top {
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f2f6ff 0%, #ffffff 100%);
    border-bottom:1px solid #e6efff;
}

.mock-dots{ 
  display:flex; 
  gap:6px; 
}

.dot { 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:#d6e1ff; 
}

.mock-title {
    display:flex; align-items:center; gap:10px;
    font-weight:700;
    color:#0b1b3a;
    font-size:13px;
}

.mock-body { 
  padding: 14px; 
}

.kpis {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.kpi{
    border:1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--surface);
}

.kpi .n { 
  font-weight:800; 
  font-size:18px; 
}

.kpi .t { 
  font-size:12px; 
  color:var(--muted); 
  margin-top:2px; 
}

.mock-grid {
     display:grid;
     grid-template-columns: 1fr;
     gap: 10px;
}

.mock-card {
    border:1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 12px;
}

.row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:13px;
    color:#0b1b3a;
    margin-bottom:10px;
}

.chip {
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    background:#e8f0fe;
    border:1px solid #d5e3ff;
    font-weight:600;
    color:#0b1b3a;
    white-space:nowrap;
}

.timeline {
    display:grid;
    gap:8px;
    margin-top: 10px;
}
    .step{
      display:flex; align-items:flex-start; gap:10px;
      padding: 10px;
      border-radius: 14px;
      background: #fbfdff;
      border:1px dashed #d7e6ff;
    }
    .bullet{
      width:26px; height:26px;
      border-radius: 10px;
      background: #e8f0fe;
      display:grid; place-items:center;
      color: var(--primary);
      font-weight:800;
      flex: 0 0 auto;
    }
    .step .meta{ font-size:12px; color:var(--muted); margin-top:2px; }
    .step strong{ display:block; font-size:13px; color:#0b1b3a; }

    /* Trust band */
    .trust{
      margin-top: 18px;
      padding: 18px 0;
    }
    .trust-box{
      display:flex; align-items:center; justify-content:space-between;
      gap: 18px;
      padding: 16px 16px;
      border-radius: 18px;
      background: var(--surface-3);
      border: 1px solid #d5e3ff;
    }
    .trust-box h3{
      margin:0;
      font-size:14px;
      color:#0b1b3a;
      letter-spacing:.2px;
    }
    .trust-tags{
      display:flex; flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .tag{
      background: rgba(255,255,255,.8);
      border:1px solid rgba(219,231,255,.9);
      border-radius: 999px;
      padding:8px 10px;
      font-size:12px;
      color:#0b1b3a;
      display:inline-flex; align-items:center; gap:8px;
    }
    .tag .icon{ color: var(--primary); font-size:18px; }

section { 
  padding: 56px 0; 
}

section.alt { 
  background: linear-gradient(180deg, var(--surface-2) 0%, #ffffff 100%); 
  border-top:1px solid rgba(229,231,235,.8); 
  border-bottom:1px solid rgba(229,231,235,.8); 
}

.sec-head {
    display:flex; align-items:flex-end; justify-content:space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.sec-head h2 {
    margin:0;
    font-size: clamp(22px, 2.1vw, 30px);
    letter-spacing:-0.01em;
}

.sec-head p { margin:0; color: var(--muted); max-width: 70ch; }

    .grid-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .grid-4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .card{
      border-radius: var(--radius);
      border:1px solid var(--border);
      background: var(--surface);
      padding: 16px;
      box-shadow: 0 1px 0 rgba(15,23,42,.02);
    }
    .card h4{ margin: 10px 0 6px; font-size: 15px; }
    .card p{ margin:0; color: var(--muted); font-size: 14px; }
    .card .ic{
      width:40px; height:40px;
      border-radius: 14px;
      background: #e8f0fe;
      border: 1px solid #d5e3ff;
      display:grid; place-items:center;
      color: var(--primary);
    }
    .card .ic .icon{ font-size:20px; }

    /* Stepper */
    .stepper{
      display:grid;
      gap: 10px;
    }
    .stepper-item{
      display:flex; align-items:flex-start; gap:12px;
      border:1px solid var(--border);
      background: var(--surface);
      border-radius: 16px;
      padding: 14px;
    }
    .num{
      width:32px; height:32px;
      border-radius: 12px;
      background: #e8f0fe;
      border:1px solid #d5e3ff;
      display:grid; place-items:center;
      font-weight:800;
      color: var(--primary);
      flex: 0 0 auto;
    }
    .stepper-item h4{ margin:0; font-size:15px; }
    .stepper-item p{ margin:6px 0 0; color: var(--muted); font-size:14px; }

    /* Benefit list */
    .benefits{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 12px;
    }
    .benefit{
      display:flex; align-items:flex-start; gap:10px;
      border:1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      padding: 14px;
    }
    .benefit .icon{ color: var(--success); font-size:20px; margin-top:2px; }
    .benefit strong{ display:block; font-size:14px; }
    .benefit span{ display:block; color: var(--muted); font-size:13px; margin-top:4px; }

    /* Security */
    .security-wrap{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      align-items: start;
    }
    .bullets{
      display:grid;
      gap: 10px;
      margin-top: 10px;
    }
    .bullet-row{
      display:flex; gap:10px; align-items:flex-start;
      padding: 12px 12px;
      border:1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
    }
    .bullet-row .ic{
      width:36px; height:36px; border-radius:14px;
      background: #e8f0fe; border:1px solid #d5e3ff;
      display:grid; place-items:center; color: var(--primary);
      flex: 0 0 auto;
    }
    .bullet-row .ic .icon{ font-size:20px; }
    .bullet-row strong{ display:block; font-size:14px; }
    .bullet-row span{ display:block; margin-top:4px; color: var(--muted); font-size:13px; }

    /* KPI panel */
    .panel{
      border-radius: 18px;
      border:1px solid #dbe7ff;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      box-shadow: var(--shadow-2);
      padding: 16px;
    }
    .panel h3{ margin:0 0 10px; font-size:14px; color:#0b1b3a; }
    .mini-kpis{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }
    .mini{
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 10px 12px;
      background: var(--surface);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 10px;
      font-size:13px;
    }
    .mini b{ font-size:16px; }
    .mini small{ color: var(--muted); }

    /* Cases */
    .cases{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .case{
      border-radius: 18px;
      border:1px solid var(--border);
      background: var(--surface);
      padding: 16px;
    }
    .case .top{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:10px;
    }
    .case .sub{
      display:flex; align-items:center; justify-content:space-between;
    }
    .case .nombre{ font-weight:700; font-size:16px; }
    .case .label{ font-weight:700; font-size:14px; }
    .case .stat{
      background:#ecfdf3; border:1px solid #bbf7d0;
      padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
      color:#14532d;
      white-space:nowrap;
    }
    .case ul{ margin:10px 0 0; padding-left: 16px; color: var(--muted); font-size:13px; }
    .case li{ margin:6px 0; }

    /* FAQ accordion */
    details{
      border:1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      padding: 14px 14px;
    }
    details + details{ margin-top:10px; }
    summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:700;
      font-size:14px;
    }
    summary::-webkit-details-marker{ display:none; }
    .faq-a{
      margin-top:10px;
      color: var(--muted);
      font-size:14px;
    }

    /* CTA / Form */
    .cta{
      border-radius: 22px;
      border: 1px solid #dbe7ff;
      background: linear-gradient(135deg, #ffffff 0%, #f1f6ff 45%, #ffffff 100%);
      box-shadow: var(--shadow);
      padding: 20px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 16px;
      align-items: start;
    }
    .cta h2{ margin:0 0 8px; }
    .cta p{ margin:0; color: var(--muted); max-width: 70ch; }

    form{
      border:1px solid var(--border);
      background: rgba(255,255,255,.9);
      border-radius: 18px;
      padding: 14px;
    }
    .fields{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .field{ display:flex; flex-direction:column; gap:6px; }
    label{ font-size:12px; color:#0b1b3a; font-weight:600; }
    input, textarea, select{
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 10px 12px;
      font: inherit;
      font-size: 14px;
      background: #ffffff;
      outline:none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    input:focus, textarea:focus, select:focus{
      border-color: #bcd0f0;
      box-shadow: 0 0 0 4px rgba(11,87,208,.12);
    }
    textarea{ resize: vertical; min-height: 92px; }
    .full{ grid-column: 1 / -1; }
    .form-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      margin-top: 10px;
    }
    .fineprint{
      font-size:12px;
      color: var(--muted);
      margin-top: 8px;
    }

    /* Footer */
    footer{
      padding: 24px 0 34px;
      color: var(--muted);
      border-top: 1px solid rgba(229,231,235,.8);
      background: #ffffff;
    }
    .foot{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 14px;
      flex-wrap:wrap;
    }
    .foot a{ text-decoration:underline; }

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .security-wrap{ grid-template-columns: 1fr; }
      .cta{ grid-template-columns: 1fr; }
      .grid-4{ grid-template-columns: repeat(2, 1fr); }
      .grid-3{ grid-template-columns: 1fr; }
      .cases{ grid-template-columns: 1fr; }
      .kpis{ grid-template-columns: 1fr; }
      .menu{ display:none; }
      .mobile-toggle{ display:inline-flex; }
      .mobile-menu{ display:block; }
    }
    @media (max-width: 560px){
      .benefits{ grid-template-columns: 1fr; }
      .fields{ grid-template-columns: 1fr; }
      .trust-box{ flex-direction:column; align-items:flex-start; }
      .trust-tags{ justify-content:flex-start; }
    }

/* Por defecto: menú móvil oculto, botón oculto */
.mobile-toggle{ display:none; }
.mobile-menu{ display:none; }

/* Desktop: tu menú normal visible */
.menu{ display:flex; }

/* Móvil: esconder menú normal y mostrar botón + menú colapsable */
@media (max-width: 980px){
  .menu{ display:none; }
  .mobile-toggle{ display:inline-flex; }

  .mobile-menu{
    display:block;
    padding: 0 0 14px;
  }

  .mobile-menu a{
    display:block;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-top: 10px;
    background: var(--surface);
    color: #0b1b3a;
    font-size: 14px;
  }

  .mobile-menu a:hover{
    background: var(--surface-3);
    border-color: #bcd0f0;
  }

  .mobile-menu .mobile-cta{
    background: var(--primary);
    color: var(--on-primary);
    border-color: transparent;
    font-weight: 700;
    text-align:center;
    box-shadow: 0 10px 20px rgba(11,87,208,.20);
  }
}


.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.whatsapp-icon {
    margin: 0;
}

.whatsapp-float:hover .whatsapp-icon path {
    fill: #128c7e; /* Color al pasar el cursor */
}