:root{
  --bg: #f6f9fc;
  --panel: #ffffff;
  --stroke: #e6ecf3;

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

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

  --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; text-align: center; }
.precio-hero h1{ margin: .25rem 0; font-size: clamp(1.6rem,2.6vw,2.2rem); color:#2a3448; }
.precio-hero p{ margin: 0.5rem 0; color: var(--muted); }

/* Tabs */
.tabs{ max-width: 1100px; margin: 1rem auto 0; background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); }
.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: .2s; border-radius: 8px 8px 0 0; }
.tabs__nav a:hover{ color: var(--accent); background: #f7faff; }

/* Tab activa */
.tabs:has(#asm:target)       .tabs__nav a[href="#asm"],
.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"],
.tabs:not(:has(.tab-panel:target)) .tabs__nav a[href="#asm"]{
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: #f7faff;
}

/* 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: 1.5rem; box-shadow: var(--shadow); }
.tab-panel:target{ display: block; }
.tabs__content:not(:has(.tab-panel:target)) .tab-panel:first-of-type{ display: block; }

/* Panel headers */
.panel__hdr h2{ margin: 0 0 .4rem; font-size: clamp(1.3rem,2vw,1.6rem); color: #2a3448; display: flex; align-items: center; gap: .5rem; }
.panel__hdr h2 .icon svg{ width: 22px; height: 22px; stroke:#2563eb; fill:none; stroke-width:2; }
.panel__hdr p{ margin: 0; color: var(--muted); }

/* Grid de 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, 1fr); }
  .plan-grid.three{ grid-template-columns: repeat(3, 1fr); }
}

/* Tarjetas */
.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; transition: transform .2s ease; }
.plan-card:hover{ transform: translateY(-3px); }
.plan-card__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }

/* Chips */
.chip{ display: inline-flex; align-items: center; 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); }
.chip--eds    { background: var(--chip-eds);     color: var(--chip-eds-t);    }

/* Precios */
.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; }

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

/* EDS título */
.plan-card__tit{ display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.plan-card__subtitle{ margin: 0; font-size: .9rem; font-weight: 700; color: #224488; background: #eef3ff; border: 1px solid #dde7ff; border-radius: .5rem; padding: .25rem .5rem; }

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