/* Páginas legales de las apps (diseño Mada Apps). Las genera _herramientas/generar-legales-*.mjs */

@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Variable-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --ink:#141414;
  --muted:#6b6b6b;
  --line:#e4e7e4;
  --wall:#ffffff;
  --soft:#f3f6f3;
  --green-ink:#123623;
  --brand-blue:#1F2F8C;
  --ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:var(--ui);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{background:var(--wall);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Cabecera (igual que la de la portada) */
.cabecera{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:28px 40px;background:var(--wall)}
.logo{font-weight:600;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.cabecera nav{display:flex;gap:32px;font-size:14px}
.cabecera nav a{color:#7a7a7a;text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s}
.cabecera nav a:hover{color:var(--ink)}
.cabecera nav a.active{color:var(--ink);border-bottom-color:var(--ink)}

/* Página */
.pagina{max-width:760px;margin:0 auto;padding:150px 40px 120px}
.volver{display:inline-flex;align-items:center;gap:14px;color:var(--green-ink);text-decoration:none;font-size:14px;
  margin-bottom:40px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.volver svg{width:44px;height:44px}
.volver path{fill:none;stroke:currentColor;stroke-width:1.55}
.volver:hover{transform:translateX(-6px)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,6vw,64px);line-height:1.05;letter-spacing:-.01em;color:var(--green-ink)}
.entradilla{margin-top:16px;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--muted)}

/* Contenido legal */
/* overflow-wrap: la dirección de correo es más ancha que la columna en un móvil pequeño */
.legal,.pie{overflow-wrap:anywhere}
.legal{margin-top:56px;font-size:16px;line-height:1.7}
.legal p,.legal ul,.legal ol{margin-bottom:1.1em}
.legal ul,.legal ol{padding-left:1.3em}
.legal li{margin-bottom:.35em}
.legal h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,30px);line-height:1.2;color:var(--green-ink);
  margin:2.2em 0 .7em}
.legal h3{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.3;margin:1.8em 0 .5em}
.legal strong{font-weight:600}
.legal a{color:var(--green-ink);text-decoration-thickness:1px;text-underline-offset:3px}
.legal a:hover{text-decoration-thickness:2px}

/* Índice "En esta página" */
.legal .contenido{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:2.5em}
.legal .contenido summary{cursor:pointer;padding:16px 0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  list-style:none;display:flex;justify-content:space-between;align-items:center}
.legal .contenido summary::-webkit-details-marker{display:none}
.legal .contenido summary::after{content:"+";font-size:20px;font-weight:300;color:var(--ink)}
.legal .contenido details[open] summary::after{content:"–"}
.legal .contenido ul{list-style:none;padding:0 0 18px;margin:0}
.legal .contenido li{margin:0}
.legal .contenido a{display:block;padding:6px 0;text-decoration:none;color:var(--ink)}
.legal .contenido a:hover{color:var(--green-ink);text-decoration:underline}
.legal .contenido .sub a{padding-left:1.2em;color:var(--muted)}

/* Bloques destacados (pasos para borrar datos) */
.legal .destacado{background:var(--soft);border-left:2px solid var(--green-ink);padding:24px 28px;margin:2em 0;border-radius:2px}
.legal .destacado > :first-child{margin-top:0}
.legal .destacado > :last-child{margin-bottom:0}

/* Flecha "volver arriba": fija abajo a la izquierda, como en la portada */
.arriba{position:fixed;z-index:10;left:40px;bottom:40px;font-size:clamp(38px,6vw,72px);line-height:0;
  color:var(--green-ink);background:none;border:0;padding:0;cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.arriba svg{width:1.4em;height:1.4em;overflow:visible}
.arriba path{fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:butt;stroke-linejoin:miter}
.arriba:hover{transform:translateY(-8px)}
.arriba:focus-visible{outline:1px solid currentColor;outline-offset:8px}
/* Si el margen lateral no da para la flecha, se le reserva sitio a la izquierda */
@media (max-width:1100px){
  .pagina{padding-left:calc(40px + 1.4 * clamp(38px,6vw,72px) + 24px);max-width:calc(760px + 1.4 * clamp(38px,6vw,72px) + 64px)}
}

/* Pie */
.pie{margin-top:80px;padding-top:32px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--muted)}
.pie-titulo{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.pie ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:28px}
.pie ul a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;font-size:15px}
.pie ul a:hover{opacity:.6}
.pie p + p{margin-top:4px}

@media (max-width:640px){
  .cabecera{padding:20px 16px}
  .cabecera nav{gap:20px}
  .pagina{padding:116px 16px 80px 76px}
  .arriba{left:16px;bottom:24px;font-size:30px}
  .volver{margin-bottom:28px}
  .volver svg{width:36px;height:36px}
  .legal{margin-top:40px}
  .legal .destacado{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .volver,.arriba{transition:none}
}