/* =========================================================================
   AZAHAR DATA INSIGHTS — CSS de página: caso
   Extraído de plantillas/caso.html.j2 (fase 2 del refactor CSS).
   Las clases globales azh-* NO se redefinen aquí: viven en azh-globals.css.
   Fuente de verdad: este fichero. La plantilla Jinja2 ya no lleva <style>.
   ========================================================================= */

/* =========================================================
     AZAHAR — PÁGINAS DE CASOS DE ÉXITO (v2.5)
     Solo clases específicas del tipo "caso".
     Las clases globales azh-* viven en azh-globals.css.
     ========================================================= */

  /* === WRAPPER RAÍZ === */
  /* .caso-page ya está en Bricks Style Manager con box-sizing y color.
     NO redefinir aquí — causa diálogo CONFLICT en import. */
  .caso-page * { box-sizing: border-box; }

  /* === HERO === */
  /* LONGHAND EXPLÍCITO: nunca shorthand padding con var() en Bricks. */
  .caso-hero {
    padding-top: 80px;
    padding-right: 40px;
    padding-bottom: 120px;
    padding-left: 40px;
    max-width: 1200px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
  .caso-hero__stack { display: flex; flex-direction: column; gap: 32px; }
  .caso-hero__title { letter-spacing: -0.02em; margin: 0; }
  .caso-hero__tagline { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); max-width: 820px; margin: 0; }
  .caso-hero__bar { height: 16px; width: 100%; margin-top: 16px; background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light) 70%, var(--azahar-white, #ffffff) 100%); }

  /* === META === */
  /* Iconos: layout puro. El color lo aplica la global .azh-icon. */
  .caso-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 24px 0; border-top: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.1)); border-bottom: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.1)); }
  .caso-meta__item { display: flex; align-items: flex-start; gap: 14px; }
  .caso-meta__icon { flex-shrink: 0; width: 28px; height: 28px; margin-top: 2px; }
  .caso-meta__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .caso-meta__label { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--azahar-oxford-50, rgba(5, 37, 76, 0.5)); margin: 0; }
  .caso-meta__value { color: var(--azahar-oxford, #05254c); margin: 0; }

  /* === DESAFÍO === */
  .caso-challenge__heading { color: var(--azahar-white, #ffffff); letter-spacing: -0.01em; margin: 0 0 48px; }
  .caso-challenge__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
  .caso-challenge__lead { color: var(--azahar-white, #ffffff); font-size: 20px; line-height: 1.5; margin: 0; }
  .caso-challenge__body { display: flex; flex-direction: column; gap: 20px; }
  .caso-challenge__body p { color: rgba(255, 255, 255, 0.9); margin: 0; }

  /* KPIs — iconos con .azh-icon--on-dark (blanco sobre Oxford) */
  .caso-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
  .caso-kpis__item { display: flex; flex-direction: column; gap: 14px; }
  .caso-kpis__icon { width: 56px; height: 56px; }
  .caso-kpis__number { color: var(--accent-color); line-height: 1.1; margin: 0; }
  .caso-kpis__text { color: rgba(255, 255, 255, 0.9); margin: 0; }

  /* === SOLUCIÓN === */
  .caso-solution__title { letter-spacing: -0.01em; margin: 0; }
  .caso-solution__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 56px; }

  /* === IMPACTO === */
  .caso-impact__inner { display: grid; grid-template-columns: auto 1fr; gap: 64px; }
  .caso-impact__seal { display: flex; align-items: flex-start; gap: 20px; }
  .caso-impact__label { font-size: 17px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--azahar-oxford, #05254c); writing-mode: vertical-rl; transform: rotate(180deg); padding-top: 16px; margin: 0; white-space: nowrap; }
  .caso-impact__bar { width: 12px; min-height: 320px; background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-light) 100%); }
  .caso-impact__content { display: flex; flex-direction: column; gap: 40px; }
  .caso-impact__heading { letter-spacing: -0.01em; margin: 0; }
  .caso-impact__list { display: flex; flex-direction: column; gap: 32px; }
  .caso-impact__item-title { color: var(--azahar-oxford, #05254c); margin: 0 0 12px; }
  .caso-impact__item-text { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: 0; }

  /* === VALOR DIFERENCIAL === */
  .caso-value__title { letter-spacing: -0.01em; margin: 0; }
  .caso-value__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; }

  /* === TESTIMONIO (patrón Canva con 6 cuadros decorativos) === */
  .caso-testimonial { position: relative; background: var(--azahar-white, #ffffff); padding: 160px 40px; overflow: hidden; min-height: 800px; }
  .caso-testimonial__deco-1 { position: absolute; top: 0; right: 0; width: 380px; height: 88px; background: linear-gradient(90deg, var(--color-turquesa-light, #c6faf8) 0%, var(--color-turquesa-accent, #0eafa7) 100%); }
  .caso-testimonial__deco-2 { position: absolute; top: 88px; right: 0; width: 250px; height: 88px; background: linear-gradient(90deg, var(--color-rosa-accent, #ff61c4) 0%, var(--color-rosa-light, #ffebf8) 100%); }
  .caso-testimonial__deco-3 { position: absolute; top: 0; right: 0; width: 88px; height: 550px; background: linear-gradient(180deg, var(--color-naranja-light, #ffe9c2) 0%, var(--color-naranja-accent, #f59b00) 100%); }
  .caso-testimonial__deco-4 { position: absolute; bottom: 88px; left: 88px; width: 250px; height: 88px; background: linear-gradient(90deg, var(--color-rosa-accent, #ff61c4) 0%, var(--color-rosa-light, #ffebf8) 100%); }
  .caso-testimonial__deco-5 { position: absolute; bottom: 0; left: 88px; width: 380px; height: 88px; background: linear-gradient(90deg, var(--color-morado-light, #e8d6ff) 0%, var(--color-morado-accent, #a25aff) 100%); }
  .caso-testimonial__deco-6 { position: absolute; bottom: 0; left: 0; width: 88px; height: 550px; background: linear-gradient(180deg, var(--color-celeste-light, #d8f3fd) 0%, var(--color-celeste-accent, #0b9fd5) 100%); }
  .caso-testimonial__inner { position: relative; max-width: 720px; margin: 0 auto; z-index: 2; padding: 80px 0 60px; }
  .caso-testimonial__mark { font-family: Safiro, Georgia, "Times New Roman", serif; font-size: 280px; line-height: 0.8; color: var(--azahar-oxford, #05254c); margin: 0 0 -40px; display: block; font-weight: 700; }
  .caso-testimonial__quote { color: var(--azahar-oxford, #05254c); margin: 0 0 56px; font-size: 22px; line-height: 1.6; font-weight: 400; }
  .caso-testimonial__quote p { margin: 0 0 24px; }
  .caso-testimonial__quote p:last-child { margin-bottom: 0; }
  .caso-testimonial__author { display: flex; align-items: center; gap: 28px; }
  .caso-testimonial__photo-wrapper { position: relative; flex-shrink: 0; width: 120px; height: 120px; }
  .caso-testimonial__photo-wrapper::before { content: ''; position: absolute; top: 16px; left: 16px; width: 120px; height: 120px; background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%); z-index: 1; }
  .caso-testimonial__photo { position: relative; width: 120px; height: 120px; object-fit: cover; z-index: 2; display: block; }
  .caso-testimonial__name { margin: 0 0 4px; font-weight: 500; font-style: italic; }
  .caso-testimonial__role { margin: 0; font-size: 17px; line-height: 1.4; color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); font-style: italic; }

  /* === RECURSOS DEL PROYECTO === */
  .caso-resources__title { letter-spacing: -0.01em; margin: 0; }
  .caso-resources__grid { display: flex; flex-direction: column; gap: 16px; }
  .caso-resources__item { display: flex; align-items: flex-start; gap: 24px; padding: 28px 32px; background: var(--azahar-white, #ffffff); box-shadow: 0 0 0 1px var(--azahar-oxford-15, rgba(5, 37, 76, 0.15)) inset; text-decoration: none; transition: background 0.25s ease, box-shadow 0.25s ease; }
  .caso-resources__item:hover { background: linear-gradient(135deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 70%); box-shadow: 0 0 0 1px var(--accent-color) inset; }
  .caso-resources__type { flex-shrink: 0; min-width: 140px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-color); padding-top: 4px; }
  .caso-resources__content { flex: 1; min-width: 0; }
  .caso-resources__title-res { color: var(--azahar-oxford, #05254c); margin: 0 0 6px; font-weight: 500; }
  .caso-resources__meta { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: 0; font-size: 15px; }
  .caso-resources__arrow { flex-shrink: 0; color: var(--accent-color); padding-top: 4px; }

  /* === PRODUCCIÓN CIENTÍFICA === */
  .caso-publications__title { letter-spacing: -0.01em; margin: 0; }
  .caso-publications__grid { display: flex; flex-direction: column; gap: 16px; }
  .caso-publications__item { display: flex; align-items: flex-start; gap: 24px; padding: 28px 32px; background: var(--azahar-white, #ffffff); box-shadow: 0 0 0 1px var(--azahar-oxford-15, rgba(5, 37, 76, 0.15)) inset; text-decoration: none; transition: background 0.25s ease, box-shadow 0.25s ease; }
  .caso-publications__item:hover { background: linear-gradient(135deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 70%); box-shadow: 0 0 0 1px var(--accent-color) inset; }
  .caso-publications__type { flex-shrink: 0; min-width: 110px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-color); padding-top: 4px; }
  .caso-publications__content { flex: 1; min-width: 0; }
  .caso-publications__title-pub { color: var(--azahar-oxford, #05254c); margin: 0 0 6px; font-weight: 500; }
  .caso-publications__meta { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: 0; font-size: 15px; }
  .caso-publications__arrow { flex-shrink: 0; color: var(--accent-color); padding-top: 4px; }

  /* === SERVICIOS APLICADOS === */
  .caso-services__title { letter-spacing: -0.01em; margin: 0; }

  /* === RESPONSIVE ===
     Todos los selectores con prefijo .caso-page para ganar especificidad.
     Breakpoints canónicos: 991px / 767px / 479px. */
  @media (max-width: 991px) {
    .caso-page .caso-meta { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .caso-page .caso-challenge__grid { grid-template-columns: 1fr; gap: 32px; }
    .caso-page .caso-kpis { grid-template-columns: 1fr; gap: 24px; }
    .caso-page .caso-solution__grid { grid-template-columns: 1fr; gap: 48px; }
    .caso-page .caso-value__grid { grid-template-columns: 1fr; gap: 32px; }
    .caso-page .caso-impact__inner { grid-template-columns: 1fr; gap: 32px; }
    .caso-page .caso-impact__seal { flex-direction: row; align-items: center; gap: 16px; }
    .caso-page .caso-impact__label { writing-mode: horizontal-tb; transform: none; padding-top: 0; }
    .caso-page .caso-impact__bar { width: 40px; height: 6px; min-height: 0; background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light) 100%); }
    .caso-page .caso-hero__bar { height: 12px; }
    .caso-page .caso-testimonial { padding: 120px 32px; min-height: 700px; }
    .caso-page .caso-testimonial__inner { padding: 60px 0 40px; }
    .caso-page .caso-testimonial__deco-1 { width: 260px; height: 64px; }
    .caso-page .caso-testimonial__deco-2 { width: 170px; height: 64px; top: 64px; }
    .caso-page .caso-testimonial__deco-3 { width: 64px; height: 380px; }
    .caso-page .caso-testimonial__deco-4 { width: 170px; height: 64px; bottom: 64px; left: 64px; }
    .caso-page .caso-testimonial__deco-5 { width: 260px; height: 64px; left: 64px; }
    .caso-page .caso-testimonial__deco-6 { width: 64px; height: 380px; }
    .caso-page .caso-testimonial__quote { font-size: 19px; }
    .caso-page .caso-testimonial__mark { font-size: 240px; margin-bottom: -32px; }
    .caso-page .caso-resources__item { flex-direction: column; gap: 12px; padding: 24px; }
    .caso-page .caso-resources__type { min-width: 0; }
    .caso-page .caso-resources__arrow { display: none; }
  }

  @media (max-width: 767px) {
    .caso-page .caso-hero { padding-left: 24px; padding-right: 24px; }
    .caso-page .caso-meta { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .caso-page .caso-testimonial { padding: 80px 24px; min-height: 0; }
    .caso-page .caso-testimonial__deco-1 { width: 140px; height: 40px; }
    .caso-page .caso-testimonial__deco-2 { width: 90px; height: 40px; top: 40px; }
    .caso-page .caso-testimonial__deco-3 { display: none; }
    .caso-page .caso-testimonial__deco-4 { width: 90px; height: 40px; left: 0; bottom: 40px; }
    .caso-page .caso-testimonial__deco-5 { width: 140px; height: 40px; left: 0; }
    .caso-page .caso-testimonial__deco-6 { display: none; }
    .caso-page .caso-testimonial__quote { font-size: 17px; }
    .caso-page .caso-testimonial__mark { font-size: 180px; margin-bottom: -24px; }
    .caso-page .caso-testimonial__inner { padding: 32px 0; }
    .caso-page .caso-testimonial__author { gap: 20px; }
    .caso-page .caso-testimonial__photo-wrapper { width: 96px; height: 96px; }
    .caso-page .caso-testimonial__photo-wrapper::before { width: 96px; height: 96px; top: 12px; left: 12px; }
    .caso-page .caso-testimonial__photo { width: 96px; height: 96px; }
  }

  @media (max-width: 479px) {
    .caso-page .caso-meta { grid-template-columns: 1fr; gap: 16px; }
  }