/* =============================================================
   article.css — Estilos compartidos para las páginas de detalle
   (News, Cases, Products, Operation). Antes todos los estilos
   eran inline, lo cual impedía el responsive. Este CSS
   define la maqueta institucional con media queries para
   mobile / tablet / desktop.
   ============================================================= */

/* Contenedor principal de cualquier página de detalle */
.article {
  background: #fff;
  padding: 64px 0;
}

.article .article-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.article .article-wrap-narrow {
  max-width: 880px;
  margin: 0 auto;
}

/* Link de volver arriba */
.article .article-back {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 32px;
}
.article .article-back:hover { color: var(--red); }

/* Heading h1 del artículo */
.article-h1 {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  color: var(--navy);
  text-transform: uppercase;
  margin: 14px 0 18px;
  letter-spacing: 0.5px;
}

/* Tag de sección (rojo, mono, uppercase) */
.article-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--red);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 24px;
}

/* Meta del artículo (fecha, autor, categoría) */
.article-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  align-items: center;
}
.article-meta .article-meta-cat {
  color: var(--red);
  font-weight: 600;
}

/* Header del article (etiqueta + título + meta) */
.article-header {
  margin-bottom: 36px;
}

/* Imagen de portada */
.article-cover {
  margin: 0 0 36px;
}
.article-cover img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.85);
  display: block;
}

/* Resumen destacado (texto grande, gris navy, separador) */
.article-lead {
  font-family: 'Barlow', sans-serif;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
}

/* Cuerpo del artículo */
.article-body {
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
}
.article-body p { margin: 0 0 22px; }
.article-body h2,
.article-body h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy);
  margin: 32px 0 14px;
  line-height: 1.15;
}
.article-body h2 { font-size: 26px; }
.article-body h3 { font-size: 20px; }
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 16px 0;
}
.article-body ul,
.article-body ol {
  padding-left: 22px;
  margin: 0 0 22px;
}
.article-body li {
  margin: 6px 0;
}

/* Footer del article (volver + CTA) */
.article-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.article-back-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
}
.article-back-cta:hover { color: var(--red); }

/* Botón CTA del article */
.article-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 15px;
  padding: 13px 26px;
  border: 0;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.article-cta:hover { background: #c41425; }

/* =============================================================
   Product detail — layout 2 columnas (cover + info)
   ============================================================= */
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 36px;
  align-items: start;
}

.product-cover figure {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
}
.product-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.product-gallery-cell {
  background: var(--paper);
  border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-price {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 24px 28px;
  margin-bottom: 24px;
}
.product-price-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.product-price-value {
  font-family: 'Oswald', system-serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--navy);
  margin-top: 6px;
}

.product-summary {
  font-family: 'Barlow', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
}

.product-body {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.product-body p { margin: 0 0 16px; }

/* =============================================================
   Case detail — figuras con números grandes
   ============================================================= */
.case-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: 36px;
}
.case-figure {
  padding: 24px 20px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.case-figure:last-child { border-right: 0; }
.case-figure-num {
  font-family: 'Oswald', system-serif;
  font-weight: 600;
  font-size: 42px;
  color: var(--navy);
  line-height: 1;
}
.case-figure-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* =============================================================
   Cards relacionadas
   ============================================================= */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.related-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0, 43, 74, 0.4);
}
.related-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eee;
}
.related-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.related-card-body {
  padding: 18px 20px 22px;
}
.related-card-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--red);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.related-card h3 {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--navy);
  text-transform: uppercase;
  margin: 8px 0 6px;
}
.related-card-date {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  color: var(--muted);
}

/* =============================================================
   Página con bloque lateral (Page/Index con sidebar)
   ============================================================= */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 32px;
}
.page-body > * + * { margin-top: 18px; }
.page-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* =============================================================
   RESPONSIVE — Media queries
   ============================================================= */

/* Tablet (≤ 860px) */
@media (max-width: 860px) {
  .article {
    padding: 48px 0;
  }
  .article .article-wrap,
  .article .article-wrap-narrow {
    padding: 0 20px;
  }

  /* Product: 2 columnas → 1 */
  .product-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Artículo heading un poco más chico */
  .article-h1 {
    font-size: clamp(28px, 7vw, 44px);
  }

  /* Case: figuras a 2 columnas */
  .case-figures {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-figure {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .case-figure:nth-child(odd) { border-right: 1px solid var(--line); }
  .case-figure:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  .article {
    padding: 36px 0;
  }

  .article-h1 {
    font-size: clamp(24px, 8vw, 32px);
    margin: 10px 0 14px;
  }

  .article-tag {
    font-size: 11px;
    margin-top: 20px;
  }

  .article-meta {
    gap: 10px;
    font-size: 11px;
    padding-bottom: 18px;
    margin-bottom: 24px;
  }

  .article-cover {
    margin: 0 0 24px;
  }
  .article-cover img {
    max-height: 320px;
  }

  .article-lead {
    font-size: 17px;
    padding: 0 0 20px;
    margin: 0 0 20px;
  }

  .article-body {
    font-size: 16px;
  }
  .article-body h2 { font-size: 22px; margin: 24px 0 12px; }
  .article-body h3 { font-size: 18px; margin: 20px 0 10px; }

  .article-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }
  .article-cta {
    width: 100%;
    text-align: center;
  }
  .article-back-cta {
    text-align: center;
  }

  /* Product gallery: 4 columnas → 2 */
  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Case: figuras a 1 columna */
  .case-figures {
    grid-template-columns: 1fr;
  }
  .case-figure {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .case-figure:last-child { border-bottom: 0; }
  .case-figure-num { font-size: 36px; }

  /* Related: 1 columna */
  .related-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}