/* ==========================================================================
     BLOG ARTICLE - Premium Medical Layout (Mover a style/style.css en producción)
     ========================================================================== */
     .article {
      padding-top: var(--space-12);
      padding-bottom: var(--space-24);
      background-color: var(--color-bg);
    }

    /* Ancho ampliado para mayor categorie */
    .article__inner {
      max-width: 1024px;
      margin: 0 auto;
    }

    /* --- Breadcrumb --- */
    .article__breadcrumb {
      margin-bottom: var(--space-10);
      font-size: var(--fs-sm);
      color: var(--color-text-light);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .article__breadcrumb a {
      color: var(--color-text-light);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .article__breadcrumb a:hover {
      color: var(--color-primary);
    }

    .article__breadcrumb span {
      color: var(--color-primary);
      font-weight: var(--fw-medium);
    }

    /* --- Header --- */
    .article__header {
      margin-bottom: var(--space-12);
      padding-bottom: var(--space-10);
      border-bottom: 1px solid var(--color-border);
    }

    .article__category {
      display: inline-block;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-primary);
      background-color: var(--color-accent-light);
      padding: var(--space-2) var(--space-5);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-6);
    }

    .article__title {
      font-size: clamp(var(--fs-3xl), 4vw, 3.2rem);
      font-weight: var(--fw-extrabold);
      line-height: var(--lh-tight);
      color: var(--color-gray-900);
      margin-bottom: var(--space-8);
      letter-spacing: -0.02em;
    }

    .article__meta {
      display: flex;
      justify-content: flex-start;
      gap: var(--space-8);
      font-size: var(--fs-base);
      color: var(--color-text-light);
      font-weight: var(--fw-medium);
    }

    .article__meta i {
      margin-right: var(--space-2);
      color: var(--color-primary);
    }

    /* --- Content --- */
    .article__lead {
      font-size: var(--fs-lg);
      font-weight: var(--fw-medium);
      color: var(--color-gray-800);
      line-height: 1.7;
      margin-bottom: var(--space-10);
      border-left: 5px solid var(--color-primary);
      padding-left: var(--space-8);
    }

    .article__content p {
      margin-bottom: var(--space-8);
      line-height: 1.8;
      color: var(--color-text);
      font-size: var(--fs-md);
    }

    .article__section {
      margin-top: var(--space-16);
    }

    .article__subtitle {
      font-size: var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--color-primary-dark);
      margin-bottom: var(--space-8);
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .article__subtitle::after {
      content: '';
      flex: 1;
      height: 2px;
      background: linear-gradient(to right, var(--color-border), transparent);
    }

    /* --- Video Wrapper --- */
    .article__video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      margin: var(--space-10) 0;
      background-color: var(--color-gray-900);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--color-gray-800);
    }

    .article__video-wrapper::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius-xl);
      border: 2px solid rgba(74, 222, 128, 0.2);
      z-index: 1;
      pointer-events: none;
    }

    .article__video-wrapper video,
    .article__video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* --- Specs Grid (Technical Highlights) --- */
    .article__specs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-10);
    }

    .article__spec-card {
      background-color: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      transition: all var(--transition-base);
      border-top: 4px solid transparent;
    }

    .article__spec-card:hover {
      border-top-color: var(--color-primary);
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    .article__spec-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-md);
      background-color: var(--color-accent-light);
      color: var(--color-primary-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-lg);
      margin-bottom: var(--space-5);
    }

    .article__spec-title {
      font-size: var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--color-gray-900);
      margin-bottom: var(--space-2);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .article__spec-desc {
      font-size: var(--fs-sm);
      color: var(--color-text-light);
      line-height: var(--lh-normal);
      margin: 0;
    }

    /* --- Product Showcase Block --- */
    .article__product-showcase {
      margin-top: var(--space-20);
      padding: var(--space-16);
      background-color: var(--color-gray-900);
      border-radius: var(--radius-xl);
      position: relative;
      overflow: hidden;
      text-align: center;
      color: var(--color-white);
      box-shadow: var(--shadow-xl);
    }

    .article__product-showcase::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(74, 222, 128, 0.15) 0%, transparent 60%);
      pointer-events: none;
    }

    .article__product-badge {
      display: inline-block;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-accent);
      background-color: rgba(74, 222, 128, 0.15);
      padding: var(--space-2) var(--space-5);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-6);
      position: relative;
      z-index: 1;
    }

    .article__product-title {
      font-size: var(--fs-3xl);
      font-weight: var(--fw-extrabold);
      margin-bottom: var(--space-6);
      position: relative;
      z-index: 1;
    }

    .article__product-showcase p {
      color: var(--color-gray-300);
      max-width: 650px;
      margin: 0 auto var(--space-2);
      position: relative;
      z-index: 1;
      line-height: 1.7;
      font-size: var(--fs-md);
    }

    /* --- Acknowledgments (Nuevo diseño Magazine / Partner Card) --- */
    .article__acknowledgment {
      margin-top: var(--space-20);
      background-color: var(--color-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      display: flex;
      border: 1px solid var(--color-border);
    }

    .article__ack-img {
      flex: 0 0 40%; /* La imagen ocupa un 40% de la tarjeta */
      min-height: 350px;
      position: relative;
      background-color: var(--color-gray-100);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .article__ack-img img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Usa 'cover' para fotos de la clínica. Si es un logo, cámbialo a 'contain' y quita el height:100% */
      transition: transform var(--transition-slow);
    }

    .article__acknowledgment:hover .article__ack-img img {
      transform: scale(1.03);
    }

    .article__ack-text {
      flex: 1;
      padding: var(--space-12);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .article__ack-label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-accent-dark);
      background-color: var(--color-accent-light);
      align-self: flex-start;
      padding: var(--space-1) var(--space-4);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-6);
    }

    .article__ack-title {
      font-size: var(--fs-xl);
      font-weight: var(--fw-bold);
      color: var(--color-gray-900);
      margin-bottom: var(--space-4);
    }

    .article__ack-text p {
      font-size: var(--fs-base);
      color: var(--color-text);
      line-height: var(--lh-normal);
      margin: 0;
    }

    .article__ack-text strong {
      color: var(--color-primary-dark);
      font-weight: var(--fw-semibold);
    }

    /* --- CTA Inferior --- */
    .article__cta {
      margin-top: var(--space-20);
      padding: var(--space-16);
      background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
      border-radius: var(--radius-xl);
      text-align: center;
      color: var(--color-white);
      position: relative;
      overflow: hidden;
    }

    .article__cta::after {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      top: -150px;
      right: -100px;
    }

    .article__cta-title {
      font-size: var(--fs-2xl);
      font-weight: var(--fw-bold);
      margin-bottom: var(--space-10);
      color: var(--color-white);
      position: relative;
      z-index: 1;
    }

    .article__cta-actions {
      display: flex;
      gap: var(--space-6);
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    .article__cta .btn {
      padding: var(--space-4) var(--space-8);
      font-size: var(--fs-base);
      font-weight: var(--fw-semibold);
      border-radius: var(--radius-md);
    }

    .article__cta .btn--white {
      background-color: var(--color-white);
      color: var(--color-primary-dark);
    }

    .article__cta .btn--white:hover {
      background-color: var(--color-accent-light);
    }

    .article__cta .btn--outline-white {
      border: 2px solid rgba(255, 255, 255, 0.6);
      color: var(--color-white);
      background: transparent;
    }

    .article__cta .btn--outline-white:hover {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: var(--color-white);
    }

    @media (max-width: 1024px) {
      .article__specs-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .article__meta {
        flex-direction: column;
        gap: var(--space-2);
      }
      .article__specs-grid {
        grid-template-columns: 1fr;
      }
      /* Apilamiento en móvil para la tarjeta de clínica */
      .article__acknowledgment {
        flex-direction: column;
      }
      .article__ack-img {
        flex: none;
        width: 100%;
        min-height: 250px;
      }
      .article__ack-text {
        padding: var(--space-8);
      }
    }