:root{
  --bg: #f4f8ff;
  --bg2:#eef6ff;
  --card:#0b1220;
  --card2:#0f1a2e;
  --text:#e7eefc;
  --muted: rgba(231,238,252,.72);
  --stroke: rgba(231,238,252,.14);
  --accent:#49b3ff;
  --accent2:#7c5cff;
  --ok:#46d39a;
  --shadow: 0 18px 60px rgba(10,20,40,.18);
  --radius: 18px;
  --danger:#b42318;
}

*{box-sizing:border-box}

html, body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue";
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(73,179,255,.22), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(124,92,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:#0b1220;
}

/* Layout base */
.wrap{max-width:1100px;margin:0 auto;padding:22px 16px 110px}

/* Secciones */
.section{margin-top:8px}

/* Titulares base */
h1{margin:26px 2px 6px;font-size:30px}
h2{margin:22px 2px 10px;font-size:20px}

/* Texto auxiliar */
.sub{
  margin:0 2px 14px;
  color:rgba(10,20,40,.75);
  max-width:860px;
  line-height:1.4;
}

/* Grid general usado en packs y servicios */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
  margin-top:8px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(6, 1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns: repeat(1, 1fr)} }

/* Utilidad usada por lista seleccionada en modal */
.mSelectedList{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

/* Accesibilidad */
:focus-visible{
  outline: 3px solid rgba(73,179,255,.55);
  outline-offset: 2px;
}

/* Enlaces */
a{color:inherit}