/* ==========================================================================
   LEGAL POLICY — Aviso de privacidad — DIGART Studio
   Pattern: Legal Policy

   Referencia documental:
     project/03-PRODUCT/P-01-SYSTEM-ARCHITECTURE.md (4 Arquitectura en capas)
     project/03-PRODUCT/P-02-FRONTEND.md (4.2 Contenedores, 6 Dirección de
     Arte, 10 Tipografía, 17 Sistema de Accesibilidad)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width, .l-container). No
   declara valores independientes de color, tipografía, espaciado, borde,
   sombra, tiempo ni punto de quiebre. Misma estructura de apertura oscura
   ya certificada en institutional-hero.css, services-hero.css,
   specialties-hero.css, portfolio-hero.css, blog-hero.css y
   contact-hero.css, reutilizada sin variación (Reuse Before Creation,
   G-03 §3.3) para ".legal-policy__intro".
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root — Apertura oscura (.legal-policy__intro)
   Fondo oscuro editorial (mismo Token de fondo inverso ya usado en Hero
   y Call To Action de la Home), necesario para que el Header reutilizado
   (estado transparent, texto/logo en color inverso) se lea con contraste
   suficiente. padding-block-start generoso evita que el título quede
   oculto bajo el Header fijo (position: fixed, header.css). Acotada a
   esta zona (no a todo el Pattern) para que el Header pase a su estado
   solid en cuanto termine la apertura, antes del cuerpo legal claro.
   -------------------------------------------------------------------- */
.legal-policy__intro {
  background-color: var(--color-background-inverse);
  padding-block-start: calc(var(--space-8) + var(--space-7));
  padding-block-end: var(--space-8);
}

.legal-policy__intro-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: clamp(40rem, 52vw, var(--breakpoint-desktop));
}

.legal-policy__eyebrow {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-error);
}

.legal-policy__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-inverse);
}

.legal-policy__updated {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------
   2. Container — Cuerpo editorial claro (.legal-policy__body)
   -------------------------------------------------------------------- */
.legal-policy__body {
  padding-block: var(--space-8);
  background-color: var(--color-background-default);
}

.legal-policy__container {
  max-width: clamp(40rem, 52vw, var(--breakpoint-desktop));
}

/* --------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------- */
.legal-policy__lead {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-5);
}

.legal-policy__link {
  color: var(--color-error);
}

.legal-policy__link:hover,
.legal-policy__link:focus-visible {
  text-decoration: underline;
}

.legal-policy__section {
  padding-block-start: var(--space-7);
  border-block-start: var(--border-width-default) var(--border-style-solid) var(--color-border-subtle);
}

.legal-policy__section:first-of-type {
  border-block-start: none;
}

.legal-policy__section + .legal-policy__section {
  margin-block-start: var(--space-7);
}

.legal-policy__section-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  margin-block-end: var(--space-4);
}

.legal-policy__text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.legal-policy__text + .legal-policy__text {
  margin-block-start: var(--space-4);
}

/* Envoltura con scroll horizontal propio: si el ancho disponible no
   alcanza para las tres columnas de la tabla (móvil, textos largos en
   "Finalidad"), el desbordamiento se contiene aquí y nunca en el
   documento (17 Sistema de Accesibilidad, Robustez). La tabla en sí no
   fuerza anchos de columna: se apoya en el layout automático nativo. */
.legal-policy__table-wrapper {
  overflow-x: auto;
  margin-block: var(--space-5);
}

.legal-policy__table {
  min-width: 100%;
  border-collapse: collapse;
}

.legal-policy__table-caption {
  text-align: start;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
  margin-block-end: var(--space-3);
}

.legal-policy__table th,
.legal-policy__table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
  border: var(--border-width-default) var(--border-style-solid) var(--color-border-default);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
}

.legal-policy__table thead th {
  background-color: var(--color-surface-subtle);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.legal-policy__table tbody th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.legal-policy__table tbody td {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
   4. Variants
   Sección reservada: este Pattern no define variantes.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Sin elementos interactivos propios salvo los enlaces mailto (Hover/
   Focus resueltos en Elements, .legal-policy__link); estado base
   (Default) representado por el resto de las reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Sin disparador funcional propio: esta página no reproduce la cadena de
   eventos narrativos de la Home (P-03); el contenido se presenta
   directamente en su estado final (mismo criterio ya aplicado en el
   resto de páginas institucionales: institutional-hero.css,
   services-hero.css, specialties-hero.css, portfolio-hero.css,
   blog-hero.css, contact-hero.css).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoints oficiales de tokens.css
   reproducidos en valor literal, mismo criterio que layout.css. Ancho de
   lectura (.legal-policy__intro-container, .legal-policy__container)
   resuelto mediante clamp() ya existente en el resto de páginas
   institucionales: se adapta de forma continua, sin punto de quiebre
   propio.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .legal-policy__intro {
    padding-block-start: calc(var(--space-7) + var(--space-6));
  }

  .legal-policy__intro-container,
  .legal-policy__container {
    max-width: none;
  }
}