/* ========= Paleta calmada & tokens ========= */
:root{
  --bg: #f6f9fc;
  --panel: #ffffff;
  --stroke: #e6ecf3;

  --text: #2f3a4f;
  --muted: #6f7d95;
  --accent: #2a6eea;
  --accent-weak: #e9f1ff;

  --chip-impulso: #e6f0ff;  --chip-impulso-t: #1f5ed6;
  --chip-escala:  #eaf7f0;  --chip-escala-t:  #1d8a5f;
  --chip-neutral: #eef2f7;  --chip-neutral-t: #4d5f78;

  --shadow: 0 10px 30px rgba(46,74,117,.08);
  --radius: 16px;
}

/* ========= Base ========= */
.precio-page{ background: var(--bg); color: var(--text); padding: 1.5rem 1rem 3rem; }
.precio-hero{ max-width: 1100px; margin: 0 auto 1rem; }
.precio-hero h1{ margin: .25rem 0; font-size: clamp(1.6rem,2.6vw,2.2rem); letter-spacing: -.01em; }
.precio-hero p{ margin: 0; color: var(--muted); }

/* ========= Tabs (anchors + :target + :has) ========= */
.tabs{
  max-width: 1100px;
  margin: 1rem auto 0;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Barra de tabs */
.tabs__nav{
  display: flex;
  gap: .25rem;
  padding: .25rem .25rem 0;
  overflow-x: auto;
}
.tabs__nav a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .85rem 1rem;
  font-weight: 800;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  border-radius: 8px 8px 0 0;
}
.tabs__nav a:hover{ color: var(--accent); background: #f7faff; }

/* Resaltado de pestaña activa solo con CSS */
.tabs:has(#asm:target)       .tabs__nav a[href="#asm"],
.tabs:has(#nethunter:target) .tabs__nav a[href="#nethunter"],
.tabs:has(#argus:target)     .tabs__nav a[href="#argus"],
.tabs:has(#ciso360:target)   .tabs__nav a[href="#ciso360"],
.tabs:has(#pentest:target)   .tabs__nav a[href="#pentest"]{
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: #f7faff;
}

/* Si no hay :target, resalta la primera */
.tabs:not(:has(.tab-panel:target)) .tabs__nav a[href="#asm"]{
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: #f7faff;
}

/* Contenido y paneles */
.tabs__content{ border-top: 1px solid var(--stroke); padding: 1rem; }

.tab-panel{
  display: none;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* Solo el objetivo */
.tab-panel:target{ display: block; }

/* Fallback cuando NO hay hash: muestra el primero */
.tabs__content:not(:has(.tab-panel:target)) .tab-panel:first-of-type{ display: block; }

/* ========= Cabecera de panel ========= */
.panel__hdr h2{ margin: 0 0 .4rem; font-size: clamp(1.2rem,1.8vw,1.6rem); }
.panel__hdr p{ margin: 0; color: var(--muted); }

/* ========= Cards/planes ========= */
.plan-grid{ display: grid; gap: 1rem; margin-top: 1rem; }
.plan-grid.two{ grid-template-columns: 1fr; }
.plan-grid.three{ grid-template-columns: 1fr; }

@media (min-width: 780px){
  .plan-grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .plan-grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.plan-card{
  background: linear-gradient(180deg, #fff, #f9fbff);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .6rem;
}

.plan-card__head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.chip{
  padding: .35rem .6rem; border-radius: 999px; font-weight: 800;
  border: 1px solid var(--stroke); letter-spacing: .02em;
}
.chip--impulso{ background: var(--chip-impulso); color: var(--chip-impulso-t); }
.chip--escala { background: var(--chip-escala);  color: var(--chip-escala-t);  }
.chip--neutral{ background: var(--chip-neutral); color: var(--chip-neutral-t); }

.price{ display:flex; align-items:baseline; gap:.35rem; }
.price .amount{ font-size: 1.9rem; font-weight: 900; color: var(--accent); line-height: 1; }
.price .per{ color: var(--muted); font-weight: 700; }

.list{ margin: 0; padding-left: 1.1rem; }
.list li{ margin: .35rem 0; color: var(--text); }

.fine{ margin-top: .75rem; color: var(--muted); }

/* Foco accesible */
.tabs__nav a:focus{ outline: 3px solid var(--accent-weak); outline-offset: 3px; border-radius: 8px; }