/* ===================================================================
   PAGINAS LEGALES - RentacarIQ
   ===================================================================
   Aviso legal, privacidad, cookies y condiciones comparten esta hoja.

   Tres decisiones que no conviene deshacer:

   1. El ancho de lectura se limita a 820px. Un texto legal a todo lo
      ancho de una pantalla de escritorio no lo lee nadie, y estos
      documentos existen precisamente para poder ser leidos.
   2. El texto va en blanco sobre el fondo oscuro del sitio. Los rojos
      de marca NO se leen como texto sobre #1a1a1a (ver la cabecera de
      global.css): aqui el rojo solo aparece en filetes y bordes.
   3. Ningun texto baja de 12px y ninguna zona pulsable de 44px, que
      son las guardas de R-07 y R-03 del responsive ya verificado.
   =================================================================== */

/* ===================================================================
   DEFENSA CONTRA EL CSS DE LA CABECERA DEL SITIO
   ===================================================================
   css/header.css estiliza los ELEMENTOS <header> y <nav> sin clase, y
   estas paginas lo cargan. Usar cualquiera de los dos dentro del
   contenido legal heredaba la cabecera del sitio:

     - <header> se volvia position:absolute, top:0, width:100%, asi que
       el titulo del documento se despegaba del flujo y se superponia
       al logo y al menu.
     - <nav> se volvia flex con space-between, que mandaba el titulo
       "Indice" a un extremo y su lista al otro.

   El contenido usa <div role="navigation"> en su lugar, pero esta regla
   se queda como red de seguridad: si alguien vuelve a escribir <header>
   o <nav> aqui dentro, ya no rompe la pagina.
   =================================================================== */

.legal header,
.legal nav {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  background-color: transparent;
}

.legal {
  background-color: var(--fondo-oscuro);
  color: var(--texto-claro);
  /* 32px y no los 100px del resto de paginas internas: la cabecera es
     relativa por debajo de 768px, asi que ahi ese hueco era aire muerto
     (hallazgo R-08). */
  padding: 120px 20px 64px;
}

.legal-contenedor {
  max-width: 820px;
  margin: 0 auto;
}

/* --- Cabecera del documento ---------------------------------------- */

.legal-cabecera h1 {
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--texto-claro);
}

.legal-entradilla {
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto-claro);
  margin: 0 0 16px;
}

.legal-fecha {
  font-size: 14px;
  color: var(--texto-apagado);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--marca-rojo);
}

/* Aviso de datos del titular sin rellenar. Es deliberadamente llamativo:
   un documento legal incompleto no debe poder pasar desapercibido en una
   revision. */
.legal-pendiente {
  background-color: var(--marca-rojo-tenue);
  border-left: 4px solid var(--marca-rojo);
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* Aviso de que la version espanola prevalece. Solo aparece en los otros
   cuatro idiomas: en espanol la clave esta vacia. */
.legal-prevalencia {
  background-color: var(--fondo-tarjeta);
  border-left: 4px solid var(--texto-apagado);
  border-radius: 6px;
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-apagado);
  margin: 0 0 24px;
}

/* --- Indice --------------------------------------------------------- */

.legal-indice-caja {
  background-color: var(--fondo-tarjeta);
  border-radius: 10px;
  padding: 24px 28px;
  margin: 0 0 40px;
}

.legal-indice-caja h2 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-apagado);
}

.legal-indice {
  margin: 0;
  padding-left: 22px;
}

.legal-indice li {
  margin: 0;
}

.legal-indice a {
  /* 44px de alto pulsable sin cambiar el tamano del texto (R-03). */
  display: block;
  min-height: 44px;
  line-height: 44px;
  color: var(--texto-claro);
  text-decoration: none;
  font-size: 15px;
}

.legal-indice a:hover,
.legal-indice a:focus {
  color: var(--marca-blanco);
  text-decoration: underline;
}

/* --- Cuerpo --------------------------------------------------------- */

.legal-seccion {
  margin: 0 0 40px;
  /* Compensa la cabecera fija al saltar a un ancla desde el indice. */
  scroll-margin-top: 120px;
}

.legal-cuerpo h2,
.legal-seccion h2 {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
  padding-top: 8px;
  color: var(--texto-claro);
}

.legal-cuerpo h3 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 12px;
  color: var(--texto-claro);
}

.legal-cuerpo p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 16px;
  color: var(--texto-claro);
}

.legal-cuerpo ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legal-cuerpo li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 10px;
}

.legal-cuerpo strong {
  font-weight: 700;
  color: var(--marca-blanco);
}

/* Los avisos tienen su propio fondo y quedaban fuera de la regla de
   enlaces de abajo: el correo salia en el azul por defecto del
   navegador sobre el rojo oscuro del recuadro, practicamente
   ilegible. */
.legal-pendiente a,
.legal-prevalencia a {
  color: var(--marca-blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.legal-cuerpo a,
.legal-otros a {
  /* Subrayado permanente, no solo al pasar el raton: en blanco sobre
     oscuro, el color ya no distingue un enlace del texto corriente. */
  color: var(--marca-blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-cuerpo a:hover,
.legal-otros a:hover {
  text-decoration-thickness: 2px;
}

/* --- Tablas --------------------------------------------------------- */

/* El contenedor scrollea, no la pagina: la regla del sitio es que el
   cuerpo nunca se desplace en horizontal. */
.legal-tabla-scroll {
  overflow-x: auto;
  margin: 0 0 24px;
  -webkit-overflow-scrolling: touch;
}

.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  min-width: 480px;
}

.legal-tabla th,
.legal-tabla td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-tabla thead th {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-apagado);
  border-bottom: 2px solid var(--marca-rojo);
}

.legal-tabla tbody th {
  font-weight: 600;
  color: var(--marca-blanco);
  width: 30%;
}

/* --- Otros documentos ----------------------------------------------- */

.legal-otros {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 2px solid var(--marca-rojo);
}

.legal-otros h2 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-apagado);
}

.legal-otros ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.legal-otros a {
  display: block;
  min-height: 44px;
  line-height: 44px;
  font-size: 15px;
}

/* ===================================================================
   RESPONSIVE
   Mismos cortes que el resto del sitio: 1024, 768, 480 y apaisado.
   =================================================================== */

@media (max-width: 1024px) {
  .legal {
    padding-top: 100px;
  }
}

@media (max-width: 768px) {
  /* Por debajo de 768 la cabecera deja de superponerse (es relativa),
     asi que el hueco superior se recorta a lo que pide el diseno. */
  .legal {
    padding: 32px 20px 48px;
  }

  .legal-cabecera h1 {
    font-size: 30px;
  }

  .legal-seccion {
    scroll-margin-top: 16px;
  }

  .legal-indice-caja {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .legal {
    padding: 28px 16px 40px;
  }

  .legal-cabecera h1 {
    font-size: 26px;
  }

  .legal-entradilla {
    font-size: 16px;
  }

  .legal-cuerpo h2,
  .legal-seccion h2 {
    font-size: 20px;
  }

  .legal-cuerpo h3 {
    font-size: 17px;
  }

  /* Las tablas de tres columnas no caben en un telefono ni scrolleando
     comodamente. Se convierten en tarjetas: cada celda muestra encima el
     titulo de su columna, que el PHP ya emite en data-titulo. */
  .legal-tabla,
  .legal-tabla tbody,
  .legal-tabla tr,
  .legal-tabla tbody th,
  .legal-tabla td {
    display: block;
    width: auto;
  }

  .legal-tabla {
    min-width: 0;
  }

  .legal-tabla thead {
    /* Fuera de pantalla, no display:none: asi sigue anunciandose a los
       lectores de pantalla. */
    position: absolute;
    left: -9999px;
  }

  .legal-tabla tr {
    background-color: var(--fondo-tarjeta);
    border-radius: 8px;
    padding: 8px 4px;
    margin-bottom: 14px;
  }

  .legal-tabla tbody th,
  .legal-tabla td {
    border-bottom: none;
    padding: 8px 14px;
  }

  .legal-tabla td[data-titulo]::before {
    content: attr(data-titulo);
    display: block;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-apagado);
    margin-bottom: 2px;
  }

  .legal-otros ul {
    gap: 0;
  }
}

/* Telefono en apaisado: se recupera altura sin tocar el layout. */
@media (max-width: 1024px) and (max-height: 500px) {
  .legal {
    padding: 24px 20px 32px;
  }

  .legal-cabecera h1 {
    font-size: 26px;
  }

  .legal-seccion {
    margin-bottom: 28px;
    scroll-margin-top: 12px;
  }
}