/* ── Fuentes autoalojadas ── */
    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("../assets/fonts/font-75be45f9d2d223ca.woff2") format("woff2");
    }
    @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("../assets/fonts/font-1708a4aece7b9ae7.woff2") format("woff2");
    }

    /* ── Tokens del sistema ── */
    :root {
      --brand-primary:        #E31952;
      --brand-primary-deep:   #C80F45;
      --brand-secondary:      #7835C3;
      --brand-secondary-deep: #522A7F;
      --brand-secondary-dark: #49286F;
      --support-green-deep:   #00984C;
      --bg:           #FDFDFD;
      --surface:      #FFFFFF;
      --surface-soft: #F5F5F7;
      --surface-tint: #F3EEFB;
      --text:         #343434;
      --text-soft:    #555555;
      --muted:        #989898;
      --line:         rgba(52, 52, 52, 0.08);
      --gradient-brand: linear-gradient(106deg, #7835C3 -13.45%, #49286F 99.9%);
      --gradient-cta:   linear-gradient(93deg,  #440819  2.66%,  #E31952 126.64%);
      --shadow-soft:  0 18px 50px rgba(73, 40, 111, 0.08);
      --shadow-card:  0 16px 36px rgba(1, 43, 85, 0.08);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 28px;
      --radius-xl: 36px;
      --space-2:  8px;
      --space-3:  12px;
      --space-4:  16px;
      --space-5:  20px;
      --space-6:  24px;
      --space-8:  32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;
      --max-width: 1240px;
      --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--text);
      /* Fondo del sistema — igual que design-system.html y componentes.html */
      background:
        radial-gradient(circle at top left,  rgba(228, 215, 243, 0.7),  transparent 24%),
        radial-gradient(circle at top right, rgba(227, 25,  82,  0.08), transparent 18%),
        linear-gradient(180deg, #fafafc 0%, #f4f1f9 100%);
      -webkit-font-smoothing: antialiased;
    }

    main {background:
        radial-gradient(circle at top left,  rgba(228, 215, 243, 0.7),  transparent 24%),
        radial-gradient(circle at top right, rgba(227, 25,  82,  0.08), transparent 18%),
        linear-gradient(180deg, #fafafc 0%, #f4f1f9 100%);
      -webkit-font-smoothing: antialiased;}

    img { max-width: 100%; height: auto; display: block; }
    a   { text-decoration: none; }

    /* ── Wrapper ── */
    .wrapper {
      max-width: var(--max-width);
      margin: 0 auto;
      <!--padding: 0 var(--space-5);-->
    }
    section {background-color: transparent !important;}
    /* ══════════════════════════════════════════
       BANNER DE SECCIÓN CON BLOBS
       (componente .product-page-banner del sistema)
    ══════════════════════════════════════════ */
    .inv-section-banner {
      padding: var(--space-8) 0 var(--space-12);
    }

    .product-page-banner {
      position: relative;
      min-height: 200px;
      padding: var(--space-12) 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 24px;
      overflow: hidden;
      background: linear-gradient(180deg, #522A7F 0%, #B61442 100%);
    }

    .product-page-banner__title {
      margin: 0;
      position: relative;
      z-index: 2;
      font-family: var(--font-body);
      font-size: 36px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      color: #FDFDFD;
    }

    .product-page-banner__blob {
      position: absolute;
      z-index: 1;
      pointer-events: none;
    }
    .product-page-banner__blob--left {
      left: -40px; top: 50%;
      width: 160px; height: 200px;
      transform: translateY(-30%);
    }
    .product-page-banner__blob--top-right {
      top: -20px; right: -20px;
      width: 140px; height: 140px;
    }
    .product-page-banner__blob--bottom-right {
      right: 30px; bottom: 20px;
      width: 56px; height: 56px;
    }

    /* ══════════════════════════════════════════
       BREADCRUMB
    ══════════════════════════════════════════ */
    .inv-breadcrumb {
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: var(--space-5) 0;
      flex-wrap: wrap;
    }
    .inv-breadcrumb a {
      color: var(--text-soft);
    }
    .inv-breadcrumb a:hover {
      color: var(--brand-primary);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .inv-breadcrumb .sep     { color: var(--muted); font-size: 12px; }
    .inv-breadcrumb .current { color: var(--text); font-weight: 700; }

    /* ══════════════════════════════════════════
       SECCIÓN PRINCIPAL — texto izq, imagen der
       (sigue el patrón product-story-module del sistema)
    ══════════════════════════════════════════ */
    .inv-article {
      padding: var(--space-4) 0 var(--space-8);
    }

    .inv-content-card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      padding: var(--space-12);
      margin-bottom: var(--space-8);
    }

    /* Variante sin tarjeta (contenido directo sobre el fondo) */
    .cert-content-card {
      background: transparent;
      box-shadow: none;
      padding: 0;
      margin-bottom: 0;
    }

    .cert-content-card .inv-section__title {
      font-size: 32px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin: 0 0 var(--space-8);
    }

    /* Grid: texto izquierda | imagen derecha */
    .cert-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
      gap: var(--space-12);
      align-items: start;
    }

    /* ── Columna de texto ── */
    .cert-intro__content {
      min-width: 0;
    }
    .cert-intro__content p {
      margin: 0 0 var(--space-3);
      font-size: 16px;
      line-height: 1.65;
      color: var(--text-soft);
    }

    .cert-intro__lead {
      font-size: 17px;
      font-weight: 500;
      line-height: 1.5;
      color: var(--text) !important;
      margin-bottom: var(--space-4) !important;
    }

    /* ── Columna de imagen ── */
    .cert-intro__media {
      position: sticky;
      top: var(--space-10);
      margin: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--surface-soft);
      box-shadow: var(--shadow-soft);
    }
    .cert-intro__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.14);
      pointer-events: none;
    }
    .cert-intro__media img {
      display: block;
      width: 100%;
      min-height: 280px;
      object-fit: cover;
    }

    /* ── Calificaciones destacadas ── */
    .cert-rating-context {
      margin-bottom: var(--space-2) !important;
    }

    .cert-rating-list {
      display: grid;
      gap: var(--space-4);
      margin: var(--space-4) 0 var(--space-5);
      padding: var(--space-6);
      background: var(--surface-tint);
      border-radius: var(--radius-md);
      border-left: 3px solid var(--brand-secondary);
    }

    .cert-rating {
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
    }

    /* Calificación — usa el color secundario del sistema (morado) */
    .cert-rating__label {
      margin: 0;
      font-size: 52px;
      font-weight: 700;
      line-height: 0.92;
      letter-spacing: -0.04em;
      color: var(--brand-secondary);
      flex: 0 0 auto;
    }
    .cert-rating__label--small {
      font-size: 40px;
      font-style: italic;
    }

    .cert-rating__text {
      margin: 0;
      font-size: 15px;
      line-height: 1.4;
      color: var(--text-soft);
      flex: 1 1 auto;
      padding-top: 4px;
    }

    /* ── Nota con enlaces a fuentes externas ── */
    .cert-links-note {
      margin-bottom: var(--space-3) !important;
      font-size: 15px !important;
    }
    .cert-links-note a {
      color: var(--brand-secondary);
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.2s;
    }
    .cert-links-note a:hover {
      color: var(--brand-secondary-deep);
    }

    /* ── Lista de documentos PDF ── */
    .inv-link-list {
      list-style: none;
      padding: 0;
      margin: var(--space-4) 0 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .inv-link-list li {
      display: flex;
    }

    .inv-link-list a {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      color: var(--brand-primary);
      font-size: 15px;
      font-weight: 500;
      transition: color 0.2s, gap 0.2s;
    }
    /* Dot de bullet */
    .inv-link-list a::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--brand-primary);
      flex-shrink: 0;
    }
    /* Badge PDF */
    .inv-link-list a::after {
      content: "PDF";
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--brand-primary);
      border: 1px solid currentColor;
      border-radius: 4px;
      padding: 1px 5px;
      opacity: 0.75;
      margin-left: 2px;
    }
    .inv-link-list a:hover {
      color: var(--brand-primary-deep);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* ══════════════════════════════════════════
       CALIFICACIONES HISTÓRICAS — grilla visual
    ══════════════════════════════════════════ */
    .inv-hist-section {
      padding: var(--space-8) 0 var(--space-16);
    }

    .inv-hist-card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      box-shadow: 0 24px 64px rgba(73, 40, 111, 0.1);
      padding: var(--space-12);
    }

    .inv-hist-card h2 {
      font-size: 32px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.08;
      letter-spacing: -0.03em;
      margin: 0 0 var(--space-2);
    }

    .inv-hist-card > p {
      font-size: 16px;
      color: var(--text-soft);
      margin: 0 0 var(--space-8);
      line-height: 1.55;
    }

    /* ── Cards destacadas (años recientes + especiales) ── */
    .cert-hist-featured {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
      margin-bottom: var(--space-8);
    }

    .cert-hist-feat {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-6);
      border-radius: var(--radius-md);
      text-decoration: none;
      color: #fff;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Degradado de marca para los más recientes */
    .cert-hist-feat--primary {
      background: var(--gradient-brand);
      box-shadow: 0 8px 28px rgba(73, 40, 111, 0.22);
    }

    /* Gradiente CTA para el bono especial */
    .cert-hist-feat--accent {
      background: var(--gradient-cta);
      box-shadow: 0 8px 28px rgba(227, 25, 82, 0.2);
    }

    .cert-hist-feat:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(73, 40, 111, 0.3);
    }

    .cert-hist-feat__year {
      font-size: 36px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .cert-hist-feat__label {
      font-size: 13px;
      line-height: 1.35;
      opacity: 0.85;
      flex: 1;
    }

    .cert-hist-feat__pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: fit-content;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 999px;
      padding: 3px 10px;
      margin-top: var(--space-2);
    }

    .cert-hist-feat__pill::before {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      /* Ícono PDF inline — flecha de descarga */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7 1v8M4 6l3 3 3-3M2 11h10' stroke='rgba(255,255,255,0.9)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain;
    }

    /* ── Divisor con etiqueta ── */
    .cert-hist-divider {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      margin-bottom: var(--space-6);
    }

    .cert-hist-divider::before,
    .cert-hist-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    .cert-hist-divider span {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
    }

    /* ── Grilla de píldoras por año ── */
    .cert-hist-grid {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .cert-hist-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 68px;
      height: 42px;
      padding: 0 var(--space-5);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: var(--brand-secondary-dark);
      background: var(--surface-tint);
      border: 1px solid rgba(120, 53, 195, 0.15);
      text-decoration: none;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
                  transform 0.15s ease, box-shadow 0.18s ease;
    }

    .cert-hist-pill:hover {
      background: var(--brand-secondary);
      color: #fff;
      border-color: transparent;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(120, 53, 195, 0.25);
    }

    .cert-hist-pill--disabled {
      opacity: 0.38;
      cursor: not-allowed;
      color: var(--muted);
      background: var(--surface-soft);
      border-color: transparent;
      pointer-events: none;
    }

    /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
    @media (max-width: 900px) {
      .cert-intro {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }
      /* En móvil la imagen va debajo del texto */
      .cert-intro__media {
        position: static;
        max-width: 560px;
      }
      .cert-content-card .inv-section__title {
        font-size: 28px;
        margin-bottom: var(--space-6);
      }
      .cert-rating__label        { font-size: 44px; }
      .cert-rating__label--small { font-size: 36px; }
      .cert-hist-featured        { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px) {
      .inv-section-banner {
        padding: var(--space-4) 0 var(--space-8);
      }
      .product-page-banner {
        padding: var(--space-8) var(--space-6);
        min-height: 160px;
        border-radius: 20px;
      }
      .product-page-banner__title { font-size: 28px; }
      .product-page-banner__blob--left {
        width: 100px; left: -50px;
      }
      .product-page-banner__blob--top-right {
        width: 80px; height: 80px;
      }
      .product-page-banner__blob--bottom-right {
        width: 36px; height: 36px;
      }
      .inv-content-card,
      .inv-hist-card     { padding: var(--space-6); }
      .cert-hist-featured { grid-template-columns: 1fr; }
      .cert-intro        { gap: var(--space-6); }
      .cert-content-card .inv-section__title {
        font-size: 26px;
        margin-bottom: var(--space-5);
      }
      .cert-rating-list  { padding: var(--space-4); }
      .cert-rating {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2);
      }
      .cert-rating__label,
      .cert-rating__label--small { font-size: 36px; }
      .cert-rating__text         { padding-top: 0; }
    }