:root{
  --grad-a:#93278f; --grad-b:#9a529a; --grad-c:#00a1de;
  --bg:#f7f8fb; --card:#ffffff; --text:#212529; --muted:#6b7280;
  --primary:#7d1f66; --primary-600:#6f1b5b; --primary-700:#611751;
  --ring:rgba(0,0,0,.08); --ok:#15803d;
}

.hero{color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b),var(--grad-c));padding:48px 20px}
.wrap{max-width:1100px;margin:0 auto}
.hero h1{margin:0 0 6px;font-size:clamp(24px,4vw,36px);font-weight:800}
.hero p{margin:0;color:#f3f4f6}

.years{background:var(--card);margin-top:-28px;border-radius:18px;box-shadow:0 10px 30px var(--ring);padding:20px}
.years h3{margin:0 0 8px;font-size:18px;color:var(--muted);font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;border:2px solid transparent;cursor:pointer;transition:.2s}
.chip:hover{background:var(--primary-600)}
.chip.is-outlined{background:#fff;color:var(--primary);border-color:var(--primary)}
.chip.is-outlined:hover{border-color:var(--primary-700);color:var(--primary-700)}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px auto 6px}
.tab{background:#fff;border:1px solid #e5e7eb;color:#334155;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;transition:.2s}
.tab:hover{box-shadow:0 6px 18px var(--ring)}
.tab[aria-selected="true"]{color:#fff;background:var(--primary);border-color:var(--primary)}

.card{background:var(--card);border-radius:18px;box-shadow:0 10px 30px var(--ring);overflow:hidden;margin:16px 0 24px}
.card h2{margin:0;padding:16px 18px;font-size:18px;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c))}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:14px 16px;border-bottom:1px solid #eef2f7;vertical-align:middle}
.table thead th{text-align:left;font-size:14px;color:#475569;background:#fafafa}
.doc-name{font-weight:700}
.muted{color:var(--muted);font-size:12px}

.grid-pdfs{display:grid;grid-template-columns:repeat(5,minmax(84px,1fr));gap:8px;align-items:center}
.pdf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#111827;font-weight:700;text-decoration:none;transition:.2s}
.pdf-btn:is(:hover,:focus-visible){box-shadow:0 6px 18px var(--ring)}
.pdf-btn.is-ok{border-color:rgba(21,128,61,.25);background:rgba(21,128,61,.06);color:var(--ok)}
.pdf-btn.is-off{pointer-events:none;color:#9ca3af;border-color:#eef2f7;background:#f8fafc}

.extra{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 26px}
.extra .chip{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.extra .chip:hover{color:var(--primary-700);border-color:var(--primary-700)}

.mini{color:var(--muted);font-size:12px;text-align:center;margin:24px 0 40px}

@media (max-width:820px){
  .grid-pdfs{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .table thead{display:none}
  .table tr{display:block;border-bottom:1px solid #eef2f7}
  .table td{display:block;border:0;border-bottom:1px dashed #eef2f7}
  .table td:last-child{border-bottom:0}
}

/* Centrar todo de forma explícita */
.hero .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Que el contenedor siempre quede centrado con padding lateral */
.wrap{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:16px;
}

/* Centrar filas de chips y tabs */
.years .chip-row,
.extra,
.tabs{
  justify-content:center;        /* 👈 centra horizontalmente */
}

/* Opcional: al “colapsar” a una columna, agranda los botones para que se vean cómodos */
.grid-pdfs.only-one .pdf-btn{
  min-width:140px;
  justify-self:center;
}

/* La tarjeta no debe tener padding interno */
.wrap.card {
  padding: 0;                /* 👈 importante */
  border-radius: 18px;
  overflow: hidden;          /* para que el título herede el redondeado visual */
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* El título ocupa el 100% y toma el borde redondeado superior de la card */
.section-title{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;                 /* sin separación */
  padding: 14px 20px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(90deg, #93278f, #9a529a, #00a1de);
  border-top-left-radius: inherit;   /* 👈 usa el radio de la card */
  border-top-right-radius: inherit;  /* 👈 usa el radio de la card */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* El contenedor de la tabla no debe agregar padding lateral */
.wrap.card > div[style*="overflow:auto"]{
  padding: 0;
  margin: 0;
}

/* Cabecera de tabla: que arranque justo debajo del título */
.table{ width:100%; border-collapse:separate; border-spacing:0 }