/* =========================================================================
   AZAHAR DATA INSIGHTS — CSS de página: gracias
   Extraído de plantillas/gracias.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ÁGINA DE GRACIAS (v2.5)
     Solo clases específicas del tipo "gracias".
     Las clases globales azh-* viven en azh-globals.css.
     Página multicolor: las bandas del hero usan los acentos de
     marca como decoración, nunca como señal de sector.
     ========================================================= */

  /* === WRAPPER RAÍZ === */
  /* .gracias-page no se redefine como regla directa (evita CONFLICT). */
  .gracias-page * { box-sizing: border-box; }

  /* === HERO === */
  .gracias-hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 560px;
    background: var(--azahar-white, #ffffff);
  }

  /* --- Bandas decorativas superiores (dos filas) --- */
  .gracias-hero__strip { width: 100%; }
  .gracias-hero__row { display: grid; }
  .gracias-hero__row--top { grid-template-columns: 1fr 1fr 1fr; height: 52px; }
  .gracias-hero__row--bottom { grid-template-columns: 1fr 1fr; height: 52px; }
  .gracias-hero__band { width: 100%; height: 100%; }

  .gracias-hero__band--turquesa {
    background: linear-gradient(90deg, var(--color-turquesa-accent, #0eafa7) 0%, var(--azahar-white, #ffffff) 100%);
  }
  .gracias-hero__band--morado {
    background: linear-gradient(90deg, var(--color-morado-accent, #a25aff) 0%, var(--azahar-white, #ffffff) 100%);
  }
  .gracias-hero__band--naranja {
    background: linear-gradient(90deg, var(--color-naranja-accent, #f59b00) 0%, var(--azahar-white, #ffffff) 70%);
  }
  .gracias-hero__band--rosa {
    background: linear-gradient(90deg, var(--color-rosa-light, #ffd6f0) 0%, var(--color-rosa-accent, #ff61c4) 100%);
  }
  .gracias-hero__band--lima {
    background: linear-gradient(90deg, var(--color-lima-light, #edffd6) 0%, var(--color-lima-accent, #68b800) 100%);
  }

  /* --- Cuerpo del mensaje --- */
  .gracias-hero__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 96px;
    padding-right: 64px;
    padding-bottom: 104px;
    padding-left: 64px;
  }
  .gracias-hero__inner {
    width: 100%;
    max-width: 1200px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
  .gracias-hero__msg { max-width: 620px; }

  .gracias-hero__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-turquesa-accent, #0eafa7);
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: 0;
  }
  .gracias-hero__title {
    color: var(--azahar-oxford, #05254c);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 24px;
    margin-left: 0;
  }
  .gracias-hero__lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 16px;
    margin-left: 0;
  }
  .gracias-hero__note {
    font-size: 16px;
    line-height: 1.6;
    color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }
  .gracias-hero__plazo {
    color: var(--azahar-oxford, #05254c);
    font-weight: 600;
  }

  /* === RESPONSIVE ===
     Todos los selectores con prefijo .gracias-page para ganar
     especificidad. Breakpoints canónicos: 991px / 767px / 479px. */
  @media (max-width: 991px) {
    .gracias-page .gracias-hero { min-height: 480px; }
    .gracias-page .gracias-hero__body {
      padding-top: 80px;
      padding-right: 40px;
      padding-bottom: 88px;
      padding-left: 40px;
    }
  }

  @media (max-width: 767px) {
    .gracias-page .gracias-hero__row--top { height: 40px; }
    .gracias-page .gracias-hero__row--bottom { height: 40px; }
    .gracias-page .gracias-hero__body {
      padding-top: 56px;
      padding-right: 24px;
      padding-bottom: 64px;
      padding-left: 24px;
    }
    .gracias-page .gracias-hero__lead { font-size: 17px; }
  }