/* ---------- Páginas legales ----------------------------------------
   Lector a dos columnas: índice fijado a la izquierda (el propio
   ScrollTrigger del tema hace el pin de .legal-sidebar) y una columna
   de texto con medida de lectura a la derecha. Todo va prefijado con
   #legal para poder ganar en especificidad a las reglas exportadas
   del tema sin recurrir a !important. */

#legal {
  /* lavado iridiscente ESTÁTICO: la misma pila de radiales del botón
     de cabecera, sin barrido ni deriva. Sustituye a la animación
     vel-irid que llevaba antes el índice. */
  --irid: radial-gradient(at 20% 28%, #5eead4 0px, transparent 55%),
    radial-gradient(at 80% 14%, #a78bfa 0px, transparent 52%),
    radial-gradient(at 66% 86%, #f472b6 0px, transparent 55%),
    radial-gradient(at 10% 74%, #67e8f9 0px, transparent 50%),
    radial-gradient(at 94% 64%, #818cf8 0px, transparent 50%);
  --irid-base: #8ee0e4;
  --line: rgba(255, 255, 255, .1);
  --dim: rgba(255, 255, 255, .52);
  --body: rgba(255, 255, 255, .74);
  --accent: #7ee8e4
}

#legal .section-page {
  padding: 14rem 0 10rem
}

/* el tema lo dejaba en 89.6rem: demasiado estrecho para índice + texto */
#legal .section-page .s-inner {
  max-width: 126rem
}

/* ---------- cabecera ---------- */

#legal .section-page .s-inner .s-content {
  margin-bottom: 8rem
}

#legal .legal-eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 2.4rem;
  font-size: 1.2rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45)
}

#legal .legal-eyebrow i {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background-color: var(--irid-base);
  background-image: var(--irid)
}

#legal .section-page .s-title {
  font-size: clamp(4rem, 5.4vw, 6.8rem);
  line-height: 1.02;
  letter-spacing: -.03em
}

#legal .section-page .s-text {
  max-width: 58rem;
  margin-top: 2.4rem;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--dim)
}

#legal .legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line)
}

#legal .legal-updated {
  margin: 0;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .45)
}

#legal .legal-updated span {
  color: #fff
}

#legal .legal-docs {
  display: flex;
  gap: .8rem;
  margin-left: auto
}

#legal .legal-docs a {
  padding: .7rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 10rem;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .3s, border-color .3s
}

#legal .legal-docs a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .32)
}

#legal .legal-docs a.is-current {
  color: #0b0b0c;
  border-color: transparent;
  font-weight: 600;
  background-color: var(--irid-base);
  background-image: var(--irid)
}

/* ---------- estructura ---------- */

#legal .section-page .s-inner .legal-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8rem;
  margin-top: 0
}

#legal .section-page .s-inner .legal-wrapper .legal-sidebar {
  flex-shrink: 0;
  width: 30rem;
  padding-right: 0
}

#legal .section-page .s-inner .legal-wrapper .legal-sidebar.scroll {
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent
}

#legal .legal-sidebar.scroll::-webkit-scrollbar {
  width: 3px
}

#legal .legal-sidebar.scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 3px
}

#legal .legal-nav-label {
  margin-bottom: 1.6rem;
  font-size: 1.1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35)
}

/* ---------- índice lateral ---------- */

#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--line)
}

#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav .heading-nav-item {
  position: relative;
  display: block;
  width: 100%;
  margin-left: -1px;
  padding: .9rem 0 .9rem 1.8rem;
  text-align: left;
  background: none;
  border: 0;
  border-left: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, .48);
  font-size: 1.35rem;
  line-height: 1.4;
  transition: color .3s, border-color .3s
}

#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav .heading-nav-item:hover {
  color: #fff;
  background: none;
  border-left-color: rgba(255, 255, 255, .35)
}

/* marca activa: barra de gradiente ESTÁTICO, sin animación */
#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav .heading-nav-item.active {
  color: #fff;
  font-weight: 600;
  background: none
}

#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav .heading-nav-item:before {
  content: "";
  position: absolute;
  left: -1px;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  transform: none;
  opacity: 0;
  background-color: var(--irid-base);
  background-image: var(--irid);
  transition: opacity .3s
}

#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav .heading-nav-item.active:before {
  opacity: 1
}

/* el tema pinta su propia barra gris en :hover:before con (1,7,0);
   se neutraliza a la misma profundidad para que solo quede la
   barra iridiscente del apartado activo */
#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav .heading-nav-item:hover:before {
  transform: none;
  background-color: var(--irid-base);
  background-image: var(--irid)
}

/* el tema lee data-index de event.target, así que el span nunca puede
   ser el objetivo del clic */
#legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav .heading-nav-item .heading-nav-text {
  pointer-events: none;
  display: block
}

/* ---------- contenido ---------- */

#legal .section-page .s-inner .legal-wrapper .legal-content {
  flex: 1;
  min-width: 0;
  max-width: 74rem
}

/* OJO con el selector. main-style.css trae
     #legal .section-page .s-inner .legal-wrapper .legal-content .heading
   que es (1,5,0), mientras que el selector corto de este bloque
   (#legal .legal-content h2.heading) es solo (1,3,1). El tema ganaba, asi
   que el font-size y el margin-bottom declarados aqui llevaban tiempo
   siendo CSS muerto: la pagina renderizaba los 2.8rem del tema, no los
   2.2rem que ponia aqui. Por eso este bloque repite la cadena del tema y
   anade h2 al final -> (1,5,1), que si gana.

   Tamano: 3.2rem deja el titulo en 28.8px a 1440 (antes 25.2) y el margen
   inferior sube de 2rem a 2.8rem, para que no quede pegado a las
   etiquetas <strong> que abren los parrafos siguientes. */
#legal .section-page .s-inner .legal-wrapper .legal-content h2.heading {
  position: relative;
  margin: 6.4rem 0 2.8rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--line);
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #fff;
  scroll-margin-top: 12rem
}

#legal .legal-content h2.heading:after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 4.8rem;
  height: 1px;
  background-color: var(--irid-base);
  background-image: var(--irid)
}

#legal .legal-content h2.heading:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0
}

#legal .legal-content h2.heading:first-of-type:after {
  display: none
}

#legal .legal-content p {
  max-width: 66ch;
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--body)
}

#legal .legal-content p:not(:last-of-type) {
  margin-bottom: 1.8rem
}

#legal .legal-content strong {
  color: #fff;
  font-weight: 600
}

/* ---------- estructura de los textos legales ----------
   los documentos traen subapartados (4.1.), enumeraciones con viñetas,
   bloques de dirección y, en cookies, la tabla del apartado 7. */

#legal .legal-content h3.legal-sub {
  margin: 3.6rem 0 1.6rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: #fff
}

#legal .legal-content ul {
  max-width: 66ch;
  margin: -.6rem 0 1.8rem;
  padding-left: 2.2rem;
  list-style: disc
}

#legal .legal-content li {
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--body)
}

#legal .legal-content li::marker {
  color: var(--accent)
}

#legal .legal-content p.legal-label {
  margin-bottom: .8rem
}

#legal .legal-content p.legal-address {
  padding-left: 1.6rem;
  border-left: 1px solid var(--line)
}

#legal .legal-content p:has(+ ul),
#legal .legal-content p:has(+ .legal-table-wrap) {
  margin-bottom: 1.8rem
}

#legal .legal-table-wrap {
  margin: 0 0 2.4rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 1.2rem
}

#legal .legal-table {
  width: 100%;
  min-width: 64rem;
  border-collapse: collapse;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--body);
  text-align: left
}

#legal .legal-table caption {
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.3rem;
  color: var(--dim);
  text-align: left
}

#legal .legal-table th,
#legal .legal-table td {
  padding: 1.2rem 1.6rem;
  vertical-align: top;
  border-bottom: 1px solid var(--line)
}

#legal .legal-table tbody tr:last-child td {
  border-bottom: 0
}

#legal .legal-table th:nth-child(3) {
  width: 34%
}

#legal .legal-table th {
  font-weight: 600;
  color: #fff;
  white-space: nowrap
}

#legal .legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
  color: #fff;
  white-space: nowrap
}

/* el tema pintaba estos enlaces en #000 sobre fondo negro */
#legal .section-page .s-inner .legal-wrapper .legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(126, 232, 228, .4);
  transition: text-decoration-color .3s
}

#legal .section-page .s-inner .legal-wrapper .legal-content a:hover {
  text-decoration-color: var(--accent)
}

/* ---------- cierre ---------- */

#legal .legal-cta {
  margin-top: 8rem;
  padding: 3.2rem;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, .03)
}

#legal .legal-cta-title {
  margin-bottom: 1.2rem;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff
}

#legal .legal-content .legal-cta p {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  color: var(--dim)
}

#legal .legal-content .legal-cta a.legal-cta-link {
  display: inline-block;
  padding: 1.1rem 2rem;
  border-radius: 10rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0b0b0c;
  text-decoration: none;
  background-color: var(--irid-base);
  background-image: var(--irid)
}

/* ---------- móvil ---------- */

#legal .heading-dropdown {
  display: none
}

@media(max-width:1099px) {
  #legal .section-page {
    padding: 10rem 0 7.2rem
  }

  #legal .section-page .s-inner .s-content {
    margin-bottom: 4.8rem
  }

  #legal .section-page .s-text {
    font-size: 1.6rem
  }

  #legal .legal-docs {
    margin-left: 0
  }

  #legal .section-page .s-inner .legal-wrapper {
    display: block
  }

  #legal .section-page .s-inner .legal-wrapper .legal-sidebar {
    width: auto;
    margin-bottom: 4rem
  }

  #legal .legal-nav-label,
  #legal .section-page .s-inner .legal-wrapper .legal-sidebar .heading-nav {
    display: none
  }

  #legal .heading-dropdown {
    display: block;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    overflow: hidden
  }

  #legal .dropdown-bg {
    position: absolute;
    inset: 0;
    /* el tema la capa a 4.8rem y sólo la suelta con .dropdown.active, una
       clase que este marcado no lleva: el fondo se quedaba en la cabecera.
       También le pone borde negro y radio propios, que aquí ya lleva el
       contenedor */
    max-height: none;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .04)
  }

  /* cabecera y opciones en la misma sans: el tema pone la cabecera en
     Mackinac a 1.8rem y las opciones en grotesk, y la mezcla se leía rara */
  #legal .dropdown-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 1.6rem 1.8rem;
    color: #fff;
    font-family: "Acid Grotesk", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer
  }

  /* el tema añade 1.2rem más de sangría al texto de la cabecera */
  #legal .dropdown-header-text {
    padding: 0
  }

  /* flecha: el tema la dibuja con bordes arriba/derecha y aquí se sumaban
     abajo/derecha, así que salía una esquina suelta. Se redefine entera */
  #legal .dropdown-header:after {
    content: "";
    flex-shrink: 0;
    width: .7rem;
    height: .7rem;
    margin: -.4rem 0 0 1.6rem;
    border-style: solid;
    border-width: 0 1.5px 1.5px 0;
    border-color: rgba(255, 255, 255, .7);
    transform: rotate(45deg);
    transition: transform .3s, margin .3s
  }

  #legal .heading-dropdown.active .dropdown-header:after {
    margin-top: .4rem;
    transform: rotate(225deg)
  }

  #legal .dropdown-options {
    position: relative;
    display: none;
    max-height: 42vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* sin la sangría lateral del tema: la opción activa llega de borde a
       borde en vez de flotar como una píldora dentro de la caja */
    padding: .6rem 0;
    border-top: 1px solid var(--line);
    /* main-style.css esconde la lista con clip-path: inset(0 0 100% 0) y
       pointer-events: none, y sólo lo levanta en .dropdown.active. Este
       desplegable es .heading-dropdown, así que al abrirse la caja crecía
       pero las opciones seguían recortadas del todo y sin poder pulsarse:
       se veía un recuadro vacío y sólo respondía la cabecera. Aquí abrir y
       cerrar ya lo lleva display, así que el recorte sobra */
    clip-path: none;
    pointer-events: auto
  }

  #legal .heading-dropdown.active .dropdown-options {
    display: block
  }

  /* block, no el flex del tema, para que la sangría francesa funcione: si
     un título largo parte en dos, la segunda línea queda alineada con el
     texto y no debajo del número */
  #legal .dropdown-option {
    display: block;
    min-height: 0;
    padding: 1rem 1.8rem 1rem calc(1.8rem + 2.4ch);
    text-indent: -2.4ch;
    border-radius: 0;
    color: rgba(255, 255, 255, .6);
    font-family: "Acid Grotesk", system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
  }

  #legal .dropdown-option:hover {
    color: #fff
  }

  /* la actual se marca con una línea a la izquierda en vez de un bloque de
     fondo, que junto al fondo de la caja quedaba sucio */
  #legal .dropdown-option.active {
    color: #fff;
    background: none;
    box-shadow: inset 2px 0 0 #fff
  }

  /* misma cadena que arriba, por el mismo motivo de especificidad */
  #legal .section-page .s-inner .legal-wrapper .legal-content h2.heading {
    margin-top: 4.8rem;
    margin-bottom: 2.4rem;
    padding-top: 2.4rem;
    font-size: 2.6rem;
    scroll-margin-top: 9rem
  }

  #legal .legal-cta {
    margin-top: 5.6rem;
    padding: 2.4rem
  }
}

/* ---------- impresión ----------
   un documento legal acaba impreso o guardado en PDF; el tema dark
   lo dejaba en negro sólido y sin índice utilizable. */

@media print {

  #legal .legal-sidebar,
  #legal .legal-cta,
  #legal .legal-docs,
  .header,
  .footer {
    display: none !important
  }

  #legal .legal-content h2.heading,
  #legal .legal-content p,
  #legal .legal-content strong,
  #legal .section-page .s-title,
  #legal .section-page .s-text,
  #legal .legal-updated,
  #legal .legal-updated span {
    color: #000 !important
  }

  #legal .section-page .s-inner .legal-wrapper .legal-content {
    max-width: none
  }

  #legal .legal-content h2.heading {
    break-after: avoid;
    page-break-after: avoid
  }
}