:root{
  --cielo:#6cc7f0;            /* azul celeste */
  --cielo-osc:#3aa3d8;
  --noche:#0b2447;
  --blanco:#f7fbfd;
  --plata:#dbe7f0;
  --sol:#e8b93c;
  --sol-osc:#c99a1f;
  --tinta:#0a1b30;
  --gris:#5a7288;
  --ok:#2fa374;
  --bad:#d95f4b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--tinta);
  background:
    radial-gradient(900px 420px at 85% -120px, rgba(108,199,240,.35), transparent 60%),
    radial-gradient(700px 380px at -80px 40%, rgba(232,185,60,.18), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#eef7fc 100%);
  min-height:100vh;
}
body.ops{background:
  radial-gradient(900px 420px at 85% -120px, rgba(61,125,180,.22), transparent 60%),
  linear-gradient(180deg,#0b2447 0%,#0a1b30 100%);color:#e8f1f8}
body.ops .foot{color:#5a7288}

/* navigation */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;gap:.35rem;align-items:center;
  padding:.8rem 3vw;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(11,36,71,.08);
}
.nav-b{
  font-size:.8rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;color:var(--tinta);
  padding:.45rem .9rem;border-radius:99px;
  transition:background .2s;
}
.nav-b:hover{background:rgba(11,36,71,.07);color:var(--cielo-osc)}

.wrap{max-width:1080px;margin:0 auto;padding:3.2rem 3vw 4rem}

/* hero */
.hero{display:flex;gap:3rem;align-items:center;margin-bottom:3.6rem}
.hero-txt{flex:1.3}
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cielo-osc);font-weight:700;margin-bottom:.8rem;
}
.hero h1{
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;
  font-weight:800;letter-spacing:-.03em;color:var(--noche);
  margin-bottom:1rem;
}
.hero h1 .diez{
  color:var(--sol);text-shadow:0 3px 0 rgba(201,154,31,.25);
  font-variant-numeric:tabular-nums;
}
.lede{color:var(--gris);font-size:1.05rem;max-width:34rem;line-height:1.6;font-weight:300}
.cta{display:flex;gap:.8rem;margin-top:1.7rem}
.btn{
  display:inline-block;padding:.8rem 1.5rem;border-radius:12px;
  background:linear-gradient(180deg,#6cc7f0,#3aa3d8);
  color:#fff;font-weight:700;text-decoration:none;font-size:.9rem;
  box-shadow:0 10px 24px rgba(58,163,216,.35);
  transition:transform .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--noche);box-shadow:none;border:1.5px solid var(--cielo)}

.hero-badge{flex:1;display:flex;flex-direction:column;align-items:center;gap:1rem}
.hero-badge img{width:min(240px,60%);filter:drop-shadow(0 14px 30px rgba(232,185,60,.35))}
.stripes{
  height:22px;width:min(280px,90%);border-radius:99px;overflow:hidden;
  display:flex;gap:0;box-shadow:0 8px 18px rgba(11,36,71,.15);
}
.stripes i{flex:1;background:var(--cielo)}
.stripes i:nth-child(even){background:#fff}
.stripes i:nth-child(odd){background:var(--cielo)}

/* cartes */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-bottom:2.6rem}
.card{
  display:block;text-decoration:none;color:var(--tinta);
  background:#fff;border:1px solid rgba(11,36,71,.09);
  border-radius:18px;padding:1.4rem;
  box-shadow:0 16px 40px rgba(11,36,71,.07);
  transition:transform .18s, box-shadow .18s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(11,36,71,.13)}
.card h3{font-size:1.02rem;font-weight:700;color:var(--noche);margin-bottom:.5rem}
.card p{font-size:.85rem;color:var(--gris);font-weight:300;line-height:1.5}

/* layout contenu */
.titulo{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:var(--noche);margin-bottom:.5rem}
.sub{color:var(--gris);font-weight:300;margin-bottom:1.4rem}
.nota{
  margin-top:1.6rem;padding:1rem 1.2rem;
  background:rgba(108,199,240,.12);border-left:3px solid var(--cielo-osc);
  border-radius:10px;font-size:.9rem;color:#1c3d5e;font-weight:400;
}
.err{color:var(--bad);font-weight:600}

/* formulaire de recherche */
.busca{display:flex;gap:.6rem;margin-bottom:1.3rem;max-width:480px}
.busca input{
  flex:1;padding:.8rem 1rem;border-radius:12px;border:1.5px solid rgba(11,36,71,.16);
  font:inherit;font-size:.92rem;background:#fff;
}
.busca input:focus{outline:none;border-color:var(--cielo-osc)}
.busca button{
  padding:.8rem 1.4rem;border:none;border-radius:12px;
  background:var(--noche);color:#fff;font-weight:700;cursor:pointer;font-size:.9rem;
}
.fila{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:#fff;border:1px solid rgba(11,36,71,.09);
  padding:1rem 1.3rem;border-radius:14px;text-decoration:none;color:var(--tinta);
  margin-bottom:.6rem;transition:border-color .15s;
}
.fila:hover{border-color:var(--cielo-osc)}
.fila b{color:var(--sol-osc);font-variant-numeric:tabular-nums}

/* ticket */
.ticket{
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;line-height:1.55;
  background:#fff;border:1px solid rgba(11,36,71,.12);
  border-radius:14px;padding:1.2rem;color:#12324f;overflow:auto;
}

/* ficha de cuenta */
.ficha{
  background:#fff;border:1px solid rgba(11,36,71,.1);
  border-radius:16px;padding:1.2rem 1.4rem;display:grid;gap:.55rem;max-width:520px;
}
.ficha p{display:flex;justify-content:space-between;font-size:.88rem;border-bottom:1px dashed rgba(11,36,71,.12);padding-bottom:.5rem}
.ficha span{color:var(--gris);font-weight:600;text-transform:uppercase;font-size:.68rem;letter-spacing:.1em}
.ficha b{font-family:'IBM Plex Mono',monospace;font-weight:600;word-break:break-all}
.ficha .mt{color:var(--sol-osc)}

/* footer */
.foot{
  margin-top:4rem;padding:1.6rem 3vw 2.2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:var(--gris);border-top:1px solid rgba(11,36,71,.09);
}
.foot a{color:var(--cielo-osc);text-decoration:none;font-weight:600}

@media (max-width:720px){
  .hero{flex-direction:column;gap:2rem}
  .cta{flex-wrap:wrap}
  .nav{overflow-x:auto}
  .nav-b{white-space:nowrap}
}