/* ============================================================
   Call Harmony — Documentos
   ------------------------------------------------------------
   Índice (legal.html) y las seis láminas: términos, privacidad,
   reembolsos, uso aceptable, servicios y preguntas.

   Cárgala DESPUÉS de header.css y ch.css: no define fichas ni
   tipografía, sólo lo que el texto largo necesita.

     <link rel="stylesheet" href="css/header.css" />
     <link rel="stylesheet" href="css/ch.css" />
     <link rel="stylesheet" href="css/documento.css" />

   Por qué existe este fichero y no un <style> en cada página:
   son SIETE páginas con el mismo cuerpo legal. Duplicado siete
   veces, la primera corrección ya deja seis desincronizadas.

   La página legal de casi cualquier sitio parece otro sitio:
   fondo blanco, Arial, línea apretada. Ese corte se lee como
   plantilla pegada, y en un servicio que se paga por
   adelantado eso es justo la señal contraria a la que hace
   falta. Así que aquí es la misma mesa y la misma vela: el
   reglamento escrito en el mismo papel y con la misma mano.
   ============================================================ */

/* ============================================================
   La lámina
   ------------------------------------------------------------
   Columna estrecha y línea ancha: esto se lee de arriba abajo,
   no se escanea.
   ============================================================ */
.doc {
  max-width: 44rem;
  counter-reset: apartado;
}

.doc h1 {
  margin: var(--e-4) 0 var(--e-3);
}

/* La bajada: qué contesta este documento, en una línea. */
.doc__entrada {
  color: var(--tinta-2);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: var(--e-6);
}

/* --- El sello ------------------------------------------------
   Un documento legal lleva estampa: versión, alcance y quién lo
   firma. No es un "última actualización" al pie — va arriba,
   donde decide si te fías de lo que vas a leer. */
.doc__sello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--filo);
  border-radius: var(--r-sm);
  background: var(--bano-oro);
  font-size: 0.8125rem;
  color: var(--tinta-3);
}

.doc__version {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
  /* Las versiones son cifras y tienen que alinear entre láminas */
  font-variant-numeric: lining-nums tabular-nums;
}

/* Un punto medio entre datos se quedaba huérfano al principio de la
   línea cuando el sello envolvía a dos filas, y ahí parece una viñeta
   suelta. Un filo vertical al comienzo del dato aguanta el salto: si
   cae al inicio de línea sigue leyéndose como margen, no como texto. */
.doc__sello span + span {
  padding-left: var(--e-3);
  border-left: 1px solid var(--filo);
}

/* --- El idioma de la lámina ----------------------------------
   La operadora es brasileña (LGPD, CDC, horario BRT, +55) pero el
   sitio está en español. Los documentos son la única parte que ya
   existía en portugués —venía en los PDF—, así que son la única
   parte que se puede ofrecer en los dos idiomas sin inventarse
   media traducción.

   Conmutador y no un desplegable: son dos opciones, y con dos
   opciones un desplegable esconde la mitad de la información
   detrás de un clic para no ahorrar nada. */
.doc__idioma {
  margin: var(--e-6) 0 var(--e-8);
}

.conmutador {
  display: inline-flex;
  /* El filo va en el contenedor y no en cada opción: así la línea
     entre las dos es una sola, no dos pegadas. */
  border: 1px solid var(--filo);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.conmutador__op {
  padding: var(--e-2) var(--e-4);
  font-size: 0.875rem;
  color: var(--tinta-3);
  text-decoration: none;
  transition: background-color 0.18s var(--paso), color 0.18s var(--paso);
}

.conmutador__op + .conmutador__op {
  border-left: 1px solid var(--filo);
}

.conmutador__op:hover {
  background: var(--bano-luz);
  color: var(--tinta);
}

/* La activa se lleva el baño de oro. `aria-current` en vez de una
   clase: el estado ya está declarado para quien no ve la pantalla,
   y no hace falta repetirlo. */
.conmutador__op[aria-current] {
  background: var(--bano-oro);
  color: var(--oro);
  cursor: default;
}

/* Los PDF bajan a una línea callada: son el respaldo firmado, no
   la forma de leer el documento. */
.doc__pdfs {
  margin-top: var(--e-3);
  font-size: 0.8125rem;
  color: var(--tinta-4);
}

.doc__pdfs a {
  color: var(--tinta-3);
}

.doc__pdfs a:hover {
  color: var(--oro);
}

/* --- El aviso de idioma --------------------------------------
   Aparece cuando el navegador está en portugués y la página está
   en español (o al revés). NO redirige: alguien puede haber
   recibido el enlace a un apartado concreto, y rebotarlo a otra
   versión le quita de las manos lo que vino a leer. Ofrece y se
   quita de en medio. */
.aviso-idioma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-6);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--filo);
  border-radius: var(--r-sm);
  background: var(--carta);
  font-size: 0.875rem;
  color: var(--tinta-2);
}

.aviso-idioma a {
  color: var(--llama);
  font-weight: 500;
}

.aviso-idioma a:hover {
  color: var(--oro);
}

.aviso-idioma button {
  margin-left: auto;
  padding: var(--e-1) var(--e-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--tinta-4);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.aviso-idioma button:hover {
  color: var(--tinta-2);
}

/* ============================================================
   Apartados numerados
   ------------------------------------------------------------
   El número en oro delante del título es el mismo recurso que
   ya usaba privacidad.html. Se generaliza aquí.
   ============================================================ */
.doc section {
  padding-top: var(--e-8);
  margin-top: var(--e-8);
  border-top: 1px solid var(--filo-suave);
  counter-increment: apartado;
}

.doc section h2 {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  font-size: 1.375rem;
  margin-bottom: var(--e-4);
  scroll-margin-top: calc(var(--ch-height, 64px) + var(--e-6));
}

.doc section h2::before {
  content: counter(apartado, decimal-leading-zero);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--oro);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Apartados que no entran en la numeración legal. Los documentos
   explicativos (servicios, preguntas) no tienen articulado: van sin
   número, y esa ausencia es la que distingue de un vistazo lo que
   se firma de lo que se explica. */
.doc .sin-numero {
  counter-increment: none;
}

.doc .sin-numero h2::before {
  content: none;
}

.doc h3 {
  font-size: 1.0625rem;
  margin: var(--e-6) 0 var(--e-3);
  color: var(--tinta);
}

.doc p {
  margin-bottom: var(--e-4);
  line-height: 1.8;
}

.doc p:last-child {
  margin-bottom: 0;
}

.doc strong {
  color: var(--tinta);
  font-weight: 500;
}

.doc a:not(.btn):not(.doc__lengua) {
  color: var(--llama);
}

.doc a:not(.btn):not(.doc__lengua):hover {
  color: var(--oro);
}

/* --- Listas --------------------------------------------------
   El marcador en oro es el canto de la carta otra vez. */
.doc ul,
.doc ol {
  margin: 0 0 var(--e-4);
  padding-left: var(--e-6);
}

.doc li {
  margin-bottom: var(--e-2);
  line-height: 1.7;
}

.doc li::marker {
  color: var(--oro);
}

.doc ol li::marker {
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 500;
}

/* Lo que NO corresponde, lo que está prohibido, lo que no se
   devuelve. Va en lacre porque niega — es el mismo token que
   marca error y bloqueo en el resto del sitio, y aquí significa
   lo mismo: esto no pasa. */
.doc .lista--no li::marker {
  color: var(--ladrillo);
}

/* Lo que sí entra. Verde salvia, el mismo "disponible" de las
   salas. */
.doc .lista--si li::marker {
  color: var(--salvia);
}

/* --- La letra chica ------------------------------------------
   En los PDF hay párrafos en cursiva que matizan lo anterior
   ("no es automática", "no constituye reembolso monetario").
   Son la parte que más se malinterpreta, así que se marcan en
   vez de mezclarse con el cuerpo. */
.doc__nota {
  margin: var(--e-4) 0;
  padding: var(--e-4) var(--e-4) var(--e-4) var(--e-6);
  border-left: 2px solid var(--filo-vivo);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bano-luz);
  font-size: 0.9375rem;
  color: var(--tinta-2);
}

.doc__nota p:last-child {
  margin-bottom: 0;
}

/* --- Índice de la lámina -------------------------------------
   Sólo en los documentos largos. Sin él, "¿qué pasa si se corta
   la llamada?" está a cinco pantallas de scroll en el móvil. */
.doc__indice {
  margin: 0 0 var(--e-4);
  padding: var(--e-6);
  border: 1px solid var(--filo);
  border-radius: var(--r-md);
  background: var(--carta);
}

.doc__indice ol {
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--e-8);
  counter-reset: iref;
}

.doc__indice li {
  margin-bottom: var(--e-2);
  break-inside: avoid;
  counter-increment: iref;
  font-size: 0.9375rem;
}

.doc__indice a {
  display: flex;
  gap: var(--e-3);
  color: var(--tinta-2);
  text-decoration: none;
}

.doc__indice a::before {
  content: counter(iref, decimal-leading-zero);
  color: var(--tinta-4);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 0.8125rem;
  flex: none;
}

.doc__indice a:hover {
  color: var(--oro);
}

.doc__indice a:hover::before {
  color: var(--oro);
}

@media (max-width: 640px) {
  .doc__indice ol {
    columns: 1;
  }
}

/* --- Cierre de la lámina ------------------------------------- */
.doc__cierre {
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: 1px solid var(--filo);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}

/* ============================================================
   LA TIRADA — el índice de documentos
   ------------------------------------------------------------
   Seis documentos boca arriba sobre la mesa. Cada ficha no lleva
   el título legal delante: lleva LA PREGUNTA con la que llega
   quien la abre. Nadie busca "Política de Reembolsos y
   Reposiciones"; busca "se me cortó la llamada".

   El nombre formal va debajo, en pequeño, para quien sí venga
   buscándolo por su nombre — Stripe, un abogado, un usuario que
   cita un artículo.
   ============================================================ */
.tirada {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  counter-reset: carta;
}

.tirada__carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  border: 1px solid var(--filo);
  border-radius: var(--r-md);
  background: var(--carta);
  counter-increment: carta;
  transition:
    background-color 0.2s var(--paso),
    border-color 0.2s var(--paso),
    transform 0.2s var(--paso);
}

/* Al alzarla: sube un paso de luz y un milímetro. Nada de
   sombra — sobre la mesa oscura no se vería. */
.tirada__carta:hover,
.tirada__carta:focus-within {
  background: var(--carta-alzada);
  border-color: var(--filo-vivo);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .tirada__carta {
    transition: none;
  }

  .tirada__carta:hover,
  .tirada__carta:focus-within {
    transform: none;
  }
}

.tirada__num {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--oro);
  font-variant-numeric: lining-nums tabular-nums;
}

/* La pregunta. Cormorant y grande: es el titular de la ficha. */
.tirada__pregunta {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
  margin: 0;
}

/* El enlace cubre la ficha entera para que el área de toque sea
   la carta y no seis palabras. El texto sigue siendo un enlace
   de verdad, así que el lector de pantalla anuncia la pregunta. */
.tirada__pregunta a {
  color: inherit;
  text-decoration: none;
}

.tirada__pregunta a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tirada__carta:hover .tirada__pregunta a {
  color: var(--llama);
}

.tirada__nombre {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  margin: 0;
}

.tirada__resumen {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tinta-2);
  margin: 0;
}

/* El PDF en portugués va encima del enlace-manta de la ficha,
   si no sería inalcanzable. */
.tirada__pt {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--e-3);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-4);
  text-decoration: none;
}

.tirada__pt:hover {
  color: var(--oro);
}

/* ============================================================
   Aviso contextual
   ------------------------------------------------------------
   El enlace legal que sirve no está en el pie: está al lado del
   botón de pagar, o al lado del de entrar a la llamada. Esto es
   esa línea.
   ============================================================ */
.nota-legal {
  /* Bloque y no flex: el contenido es una frase con enlaces dentro, y
     en flex cada nodo de texto se vuelve un ítem — la frase se partía
     y el correo salía a media oración. */
  display: block;
  margin-top: var(--e-4);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--tinta-4);
}

.nota-legal a {
  color: var(--tinta-3);
}

.nota-legal a:hover {
  color: var(--oro);
}

/* ============================================================
   Las dudas dentro de una lámina
   ------------------------------------------------------------
   El FAQ reutiliza el acordeón de ch.css en vez de inventar otro.
   Sólo hacen falta estos ajustes: dentro de .doc el ancho lo pone
   la columna de lectura, y el cuerpo de la respuesta necesita su
   propio hueco al pie cuando no termina en <p>.
   ============================================================ */
.doc .dudas {
  max-width: none;
}

.doc .duda p {
  margin-bottom: 0;
}

.doc .duda > :last-child {
  padding-bottom: var(--e-6);
}

.doc .duda ul,
.doc .duda ol {
  margin-bottom: var(--e-4);
}

/* ============================================================
   La tabla de gravedad en el móvil
   ------------------------------------------------------------
   Tres columnas en 390 px obligan a arrastrar de lado, y ahí se
   rompe justo lo que da sentido a la tabla: la FILA. Al mirar
   "Medida aplicable" ya no se ve si era Leve o Crítico.

   Así que por debajo de 640 la fila se pone de pie: el grado
   pasa a ser el titular y los otros dos datos van debajo con su
   rótulo delante. Sigue siendo una <table> — sólo cambia cómo
   se dibuja.
   ============================================================ */
@media (max-width: 640px) {
  .doc .tabla,
  .doc .tabla tbody,
  .doc .tabla tr,
  .doc .tabla td {
    display: block;
    width: auto;
  }

  /* La cabecera sobra: cada celda lleva ya su propio rótulo. */
  .doc .tabla thead {
    display: none;
  }

  .doc .tabla tr {
    padding: var(--e-4);
    border-bottom: 1px solid var(--filo-suave);
  }

  .doc .tabla tbody tr:last-child {
    border-bottom: 0;
  }

  .doc .tabla td {
    padding: 0;
    border: 0;
  }

  /* El grado es el titular de la ficha: en oro y en versalitas,
     como los rótulos del resto del sitio. */
  .doc .tabla .tabla__grado {
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oro);
    margin-bottom: var(--e-3);
  }

  .doc .tabla td[data-rotulo] {
    margin-bottom: var(--e-3);
  }

  .doc .tabla td[data-rotulo]:last-child {
    margin-bottom: 0;
  }

  .doc .tabla td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-4);
    margin-bottom: var(--e-1);
  }
}