@charset "UTF-8";
/*
 * Styles for the long-form legal pages (Aviso de Privacidad).
 *
 * Loaded only by those pages so the home page does not download rules it never
 * uses. Everything here reuses the palette and type already committed in
 * styles.css: oxblood #8b0025, ink #4d4d4d, dark panel #232323, Poppins for
 * headings and Proxima Nova for body text.
 *
 * The site header is `position: fixed` with white links and no background until
 * it gains `.fixed` on scroll, so a legal page needs a dark band behind it or
 * the navigation is invisible against the white document. `.legalHero` is that
 * band, and its top padding clears the unscrolled header.
 */

.legalHero {
  background-color: #232323;
  color: #fff;
  padding: 180px 0 80px; }
.legalHero .sectionHeader {
  margin-bottom: 0; }
.legalHero .sectionHeader span {
  color: #d3d3d3; }
.legalHero h1 {
  color: #fff;
  margin-bottom: 0;
  font-size: 50px;
  font-size: 2.77778rem;
  text-wrap: balance; }
.legalHero .legalHeroMeta {
  margin-top: 30px;
  color: #d3d3d3;
  font-size: 16px;
  font-size: 0.88889rem; }
.legalHero .legalHeroMeta strong {
  color: #fff; }

.legalBody {
  padding: 80px 0 100px;
  background-color: #fff; }
.legalBody .legalLayout {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 60px; }

/* In-page index. A privacy notice is long and people arrive looking for one
   specific clause — usually how to exercise their ARCO rights — so the document
   gets a real table of contents instead of making them scroll and hunt. */
.legalToc {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
  -webkit-flex: 0 0 260px;
  flex: 0 0 260px;
  font-size: 15px;
  font-size: 0.83333rem; }
.legalToc h2 {
  font-size: 16px;
  font-size: 0.88889rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b0025;
  margin-bottom: 20px; }
.legalToc ol {
  counter-reset: toc;
  line-height: 1.35; }
.legalToc ol li {
  counter-increment: toc; }
.legalToc ol li + li {
  margin-top: 12px; }
.legalToc ol li a {
  display: block;
  padding-left: 32px;
  position: relative;
  color: #4d4d4d; }
.legalToc ol li a:before {
  content: counter(toc, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Proxima Nova Bold", sans-serif;
  color: #8b0025; }
.legalToc ol li a:hover,
.legalToc ol li a:focus-visible {
  color: #8b0025; }

.legalContent {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  /* Legal prose is read, not skimmed. Cap the measure so lines stay in the
     55-75ch band even on a 1200px container. */
  max-width: 70ch; }
.legalContent > section {
  padding: 0;
  /* Clears the fixed header when a table-of-contents link jumps here. */
  scroll-margin-top: 120px; }
.legalContent > section + section {
  margin-top: 60px; }
.legalContent h2 {
  font-size: 30px;
  font-size: 1.66667rem;
  color: #232323;
  margin-bottom: 20px;
  text-wrap: balance; }
.legalContent h2 .legalNum {
  display: block;
  font-family: "Proxima Nova Bold", sans-serif;
  font-size: 16px;
  font-size: 0.88889rem;
  font-weight: normal;
  letter-spacing: 3px;
  color: #8b0025;
  margin-bottom: 10px; }
.legalContent h3 {
  font-size: 20px;
  font-size: 1.11111rem;
  color: #232323;
  margin-top: 30px;
  margin-bottom: 15px; }
.legalContent p,
.legalContent ul,
.legalContent ol {
  line-height: 1.6;
  text-wrap: pretty; }
.legalContent a:not(.btn) {
  color: #8b0025;
  font-family: "Proxima Nova Semibold", sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px; }
.legalContent a:not(.btn):hover,
.legalContent a:not(.btn):focus-visible {
  text-decoration-thickness: 2px; }

/* Responsible-party and contact details. A description list is the honest
   markup for label/value pairs; a table would imply rows that relate across
   columns, and these do not. */
.legalDefs {
  margin-top: 25px;
  border-top: #d3d3d3 1px solid; }
.legalDefs > div {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: #d3d3d3 1px solid; }
.legalDefs dt {
  -webkit-flex: 0 0 190px;
  flex: 0 0 190px;
  font-family: "Proxima Nova Bold", sans-serif;
  color: #232323; }
.legalDefs dd {
  -webkit-flex: 1 1 220px;
  flex: 1 1 220px;
  line-height: 1.4; }

/* Numbered purposes, transfers and so on. `ul.dotted` in styles.css already
   covers unordered lists; this is its ordered sibling. */
ol.numbered {
  counter-reset: num; }
ol.numbered > li {
  counter-increment: num;
  position: relative;
  padding-left: 32px; }
ol.numbered > li:before {
  content: counter(num) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Proxima Nova Bold", sans-serif;
  color: #8b0025; }
ol.numbered > li + li {
  margin-top: 10px; }

.legalCallout {
  margin-top: 30px;
  padding: 30px;
  background-color: #f9f9f9; }
.legalCallout h3 {
  margin-top: 0; }
.legalCallout :last-child {
  margin-bottom: 0; }

/* Visible keyboard focus. The base stylesheet never defines one, so without
   this the only cue is the browser default that `outline: 0` resets elsewhere. */
.legalBody a:focus-visible,
.legalToc a:focus-visible {
  outline: #8b0025 2px solid;
  outline-offset: 3px; }

@media only screen and (max-width: 960px) {
  .legalHero {
    padding: 140px 0 60px; }
  .legalHero h1 {
    font-size: 40px;
    font-size: 2.22222rem; }

  .legalBody {
    padding: 60px 0 80px; }
  .legalBody .legalLayout {
    display: block; }

  /* Stacked, the index becomes a lead-in to the document rather than a rail. */
  .legalToc {
    position: static;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: #d3d3d3 1px solid; }

  .legalContent {
    max-width: none; } }

@media only screen and (max-width: 640px) {
  .legalHero {
    padding: 120px 0 50px; }
  .legalHero h1 {
    font-size: 32px;
    font-size: 1.77778rem; }

  .legalContent > section + section {
    margin-top: 45px; }
  .legalContent h2 {
    font-size: 24px;
    font-size: 1.33333rem; }

  .legalDefs dt {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%; }

  .legalCallout {
    padding: 25px 20px; } }

@media (prefers-reduced-motion: reduce) {
  .legalToc ol li a,
  .legalContent a {
    -webkit-transition: none;
    transition: none; } }