/* =========================================================================
   AZAHAR DATA INSIGHTS — CSS de página: legal
   Extraído de plantillas/legal.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 LEGALES (v2.5)
     Solo clases específicas del tipo "legal".
     Las clases globales azh-* viven en azh-globals.css.
     ========================================================= */

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

  /* Variantes de color: asignan las variables de la barra decorativa.
     Selectores compuestos para no chocar con el Style Manager. */
  .legal-page.legal-page--aviso {
    --legal-rect-color: var(--color-morado-accent, #a25aff);
    --legal-rect-light: var(--color-morado-light, #e8d6ff);
  }
  .legal-page.legal-page--privacidad {
    --legal-rect-color: var(--color-naranja-accent, #f59b00);
    --legal-rect-light: var(--color-naranja-light, #ffe9c2);
  }
  .legal-page.legal-page--cookies {
    --legal-rect-color: var(--color-lima-accent, #68b800);
    --legal-rect-light: var(--color-lima-light, #edffd6);
  }
  .legal-page.legal-page--grabacion {
    --legal-rect-color: var(--color-rosa-accent, #ff61c4);
    --legal-rect-light: var(--color-rosa-light, #ffebf8);
  }

  /* === HERO === */
  .legal-hero {
    position: relative;
    width: 100%;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 80px;
    padding-left: 0;
    overflow: hidden;
    background: var(--azahar-white, #ffffff);
  }
  .legal-hero__rect {
    width: 100%;
    height: 56px;
    margin-bottom: 72px;
    background: linear-gradient(90deg, var(--legal-rect-light) 0%, var(--legal-rect-light) 50%, var(--legal-rect-color) 100%);
  }
  .legal-hero__content {
    max-width: 1200px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0;
    padding-right: 40px;
    padding-bottom: 0;
    padding-left: 40px;
  }
  .legal-hero__breadcrumb { margin-bottom: 32px; }
  .legal-hero__title { color: var(--azahar-oxford, #05254c); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }

  /* === CONTENT === */
  .legal-content {
    padding-top: 0;
    padding-right: 40px;
    padding-bottom: 120px;
    padding-left: 40px;
    background: var(--azahar-white, #ffffff);
  }
  .legal-content__inner {
    max-width: 920px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    color: var(--azahar-oxford, #05254c);
  }

  /* Tipografía del cuerpo — estilada por etiqueta (contenido desde Markdown) */
  .legal-content__inner p { color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); margin: 0 0 20px 0; line-height: 1.7; }
  .legal-content__inner h2 { color: var(--azahar-oxford, #05254c); margin: 64px 0 24px 0; letter-spacing: -0.01em; line-height: 1.2; position: relative; padding-bottom: 16px; }
  .legal-content__inner h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--azahar-button, #4F4CC0); }
  .legal-content__inner h3 { color: var(--azahar-oxford, #05254c); margin: 40px 0 20px 0; letter-spacing: -0.005em; line-height: 1.25; }
  .legal-content__inner h4 { color: var(--azahar-oxford, #05254c); margin: 32px 0 16px 0; line-height: 1.3; }
  .legal-content__inner ul { margin: 0 0 24px 0; padding: 0; list-style: none; }
  .legal-content__inner ul li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); line-height: 1.65; display: list-item; }
  .legal-content__inner ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 10px; height: 2px; background: var(--azahar-button, #4F4CC0); }
  .legal-content__inner a { color: var(--azahar-link, #83c200); text-decoration: none; transition: color 0.2s ease; }
  .legal-content__inner a:hover { color: var(--azahar-link-hover, #05254c); }
  .legal-content__inner strong { font-weight: 600; color: var(--azahar-oxford, #05254c); }

  /* Intro: primer párrafo destacado con borde inferior */
  .legal-content__intro { color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); margin: 0 0 24px 0; padding-bottom: 32px; border-bottom: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.1)); }

  /* Fecha de última actualización */
  .legal-content__updated { margin-top: 72px; padding-top: 24px; color: var(--azahar-oxford-50, rgba(5, 37, 76, 0.5)); font-style: italic; border-top: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.1)); }

  /* === RESPONSIVE ===
     Todos los selectores con prefijo .legal-page para ganar especificidad.
     Breakpoints canónicos: 991px / 767px / 479px. */
  @media (max-width: 991px) {
    .legal-page .legal-hero { padding-bottom: 64px; }
    .legal-page .legal-hero__rect { height: 44px; margin-bottom: 56px; }
    .legal-page .legal-content { padding-bottom: 96px; }
    .legal-page .legal-content__inner h2 { margin-top: 56px; margin-bottom: 20px; }
  }

  @media (max-width: 767px) {
    .legal-page .legal-hero__content { padding-left: 24px; padding-right: 24px; }
    .legal-page .legal-content { padding-left: 24px; padding-right: 24px; padding-bottom: 80px; }
    .legal-page .legal-hero__rect { height: 36px; margin-bottom: 48px; }
    .legal-page .legal-hero__breadcrumb { margin-bottom: 24px; }
    .legal-page .legal-content__inner h2 { margin-top: 48px; margin-bottom: 20px; }
  }