/* Los documentos legales de Madrid Props (25 de septiembre de 2026).
 *
 * Aspecto de documento oficial: papel crema, tinta verde muy oscura (los colores de la
 * web), títulos en Cormorant Garamond, texto en Source Serif 4, y la marca y los rótulos
 * en Jost, que es la letra de la web. Artículos numerados, índice, versión y fecha de
 * vigencia, y una versión para imprimir.
 *
 * Mientras sean BORRADOR, los datos que faltan van resaltados (`.pendiente`) y arriba
 * sale la banda `.borrador`. Ver `docs/legal_web.md`.
 */
:root {
  --papel: oklch(0.985 0.008 95);
  --fondo: oklch(0.945 0.016 92);
  --tinta: oklch(0.26 0.04 155);
  --tinta-media: oklch(0.42 0.03 155);
  --tinta-suave: oklch(0.55 0.025 155);
  --verde: oklch(0.42 0.09 150);
  --filo: oklch(0.84 0.03 120);
  --filo-suave: oklch(0.91 0.02 110);
  --pendiente: oklch(0.94 0.08 95);
  --pendiente-borde: oklch(0.72 0.13 80);
  --borrador: oklch(0.52 0.15 25);
  /* Los enlaces, en azul grisáceo tirando a turquesa (pedido por el usuario el 28 sept):
     en la tinta verde del texto pasaban desapercibidos y no parecían enlaces. */
  --enlace: oklch(0.5 0.07 215);
  --enlace-fuerte: oklch(0.4 0.08 220);
}

* { box-sizing: border-box; }

html { background: var(--fondo); }

body {
  margin: 0;
  padding-block: 48px 64px;
  padding-inline: 16px;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 17.5px;
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.borrador {
  max-width: 860px;
  margin: 0 auto 18px;
  padding: 12px 20px;
  border: 1.5px solid var(--borrador);
  border-radius: 12px;
  background: oklch(0.96 0.03 25);
  color: var(--borrador);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-align: center;
}

.hoja {
  max-width: 860px;
  margin: 0 auto;
  background: var(--papel);
  border: 1px solid var(--filo);
  border-radius: 6px;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.8) inset, 0 30px 60px -30px oklch(0.2 0.03 155 / 0.35),
              0 2px 6px oklch(0.2 0.03 155 / 0.08);
  /* El doble filo interior de los documentos oficiales. */
  outline: 1px solid var(--filo-suave);
  outline-offset: -14px;
  padding: 64px clamp(22px, 7vw, 84px) 56px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.membrete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--filo);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
}
.marca {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta);
}
.titular {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
}

.encabezado { text-align: center; padding: 44px 0 30px; }
.encabezado .clase {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--verde);
}
h1 {
  margin: 14px 0 0;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 6vw, 50px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px auto 0;
  color: var(--filo);
}
.ornamento::before, .ornamento::after {
  content: "";
  width: 90px;
  height: 1px;
  background: var(--filo);
}
.ornamento span { font-size: 13px; color: var(--verde); }

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 24px;
  margin: 0 0 34px;
  padding: 16px 20px;
  border-top: 1px solid var(--filo-suave);
  border-bottom: 1px solid var(--filo-suave);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
}
.ficha dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.ficha dd { margin: 2px 0 0; color: var(--tinta); }

/* ── Índice ───────────────────────────────────────────────────────────────── */
nav.indice {
  margin: 0 0 40px;
  padding: 22px 26px;
  background: oklch(0.97 0.012 100);
  border-left: 3px solid var(--verde);
}
nav.indice h2 {
  margin: 0 0 10px;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
nav.indice ol { margin: 0; padding-left: 1.6em; columns: 2 260px; column-gap: 36px; }
nav.indice li { margin: 3px 0; break-inside: avoid; font-size: 16px; }
nav.indice a { color: var(--enlace); text-decoration: none; border-bottom: 1px dotted var(--enlace); }
nav.indice a:hover, nav.indice a:focus-visible { color: var(--enlace-fuerte); border-bottom-style: solid; border-bottom-color: var(--enlace-fuerte); }

/* ── Articulado ───────────────────────────────────────────────────────────── */
.preambulo { font-size: 18px; color: var(--tinta-media); margin: 0 0 34px; }

section.articulo { margin: 0 0 34px; scroll-margin-top: 24px; }
h2.art {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.2;
  text-wrap: balance;
}
h2.art .num {
  flex: none;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--verde);
}
h3 {
  margin: 20px 0 6px;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: 17.5px;
  font-variant: small-caps;
  letter-spacing: 0.03em;
}
p { margin: 0 0 12px; hyphens: auto; }
ul, ol { margin: 0 0 12px; padding-left: 1.4em; }
li { margin: 4px 0; }
strong { font-weight: 600; }
a { color: var(--enlace); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--enlace-fuerte); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-size: 15.5px;
}
.tabla { overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--filo-suave); }
th {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-media);
  border-bottom: 1px solid var(--filo);
}
td code, p code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13.5px; }

/* Lo que falta por confirmar, mientras es borrador. */
.pendiente {
  background: var(--pendiente);
  border-bottom: 1.5px dashed var(--pendiente-borde);
  padding: 0 4px;
  border-radius: 3px;
  font-style: normal;
}

/* ── Pie y sello ──────────────────────────────────────────────────────────── */
.sello {
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--filo);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 30px;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: var(--tinta-media);
}
.sello .firma { font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; color: var(--tinta); }
.otros {
  max-width: 860px;
  margin: 22px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.otros a { color: var(--enlace); text-decoration: none; }
.otros a:hover, .otros a:focus-visible, .otros a[aria-current="page"] { color: var(--enlace-fuerte); text-decoration: underline; text-underline-offset: 4px; }

/* ── «Volver a la web» (23 oct 2026, `volver.js`) ─────────────────────────────
   Solo en el móvil y la tablet (la versión estrecha de la Web de Clientes, por debajo de 1100 px), y
   copiado de su «Salir de la web»: mismo sitio, tamaño, colores y sombra; la casa, con su trazo. */
.volver-web { display: none; }
@media (max-width: 1099px) {
  body { padding-bottom: 96px; }   /* que el botón no tape los enlaces del final */
  .volver-web {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 25;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 999px;
    background: oklch(0.9 0.05 300);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 6px 16px oklch(0.3 0.05 300 / 0.22);
    transition: background 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .volver-web:hover, .volver-web:active { background: oklch(0.84 0.062 300); }
  .volver-web svg { width: 27px; height: 27px; display: block; }
}

/* La casa del chat de IA (28 oct, pedido por el usuario): arriba a la izquierda, SOLO en el
   ordenador (en el móvil y la tablet ya está la casa lila); la pone `volver.js` en las páginas con
   `data-casa-chat` (la de privacidad). Para que resalte MUCHO sobre el crema: un círculo verde casi
   negro con aro blanco y sombra, entero (sin transparencia), 52 px, y la casa en naranja, amarillo
   y blanco. Al señalarla, crece un poco. */
.casa-chat {
  position: fixed;
  left: 12px;
  top: 14px;
  z-index: 26;
  width: 52px;
  height: 52px;
  padding: 6px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background-color: #0b2a1c;
  box-shadow: 0 6px 18px rgba(11, 42, 28, 0.45), 0 0 0 2px #0b2a1c;
  cursor: pointer;
  display: flex;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.casa-chat:hover, .casa-chat:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(11, 42, 28, 0.55), 0 0 0 2px #0b2a1c;
}
/* Al pulsarla, baja: más pequeña, unos píxeles abajo y con menos sombra; y se sale cuando ha
   bajado (volver.js espera 220 ms). Mientras se mantiene apretada, lo mismo. */
.casa-chat:active, .casa-chat.pulsada {
  transform: translateY(3px) scale(0.92);
  box-shadow: 0 2px 6px rgba(11, 42, 28, 0.4), 0 0 0 2px #0b2a1c;
  transition-duration: 0.18s;
}
.casa-chat svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1099px) {
  .casa-chat { display: none; }
}

@media print {
  html, body { background: #fff; }
  body { padding: 0; font-size: 11pt; }
  .hoja { border: none; box-shadow: none; outline: none; padding: 0; max-width: none; }
  .otros, nav.indice, .volver-web, .casa-chat { display: none; }
  .borrador { border-color: #999; color: #444; background: none; }
  section.articulo { break-inside: avoid-page; }
  a { color: inherit; text-decoration: none; }
}