/* ═══════════════════════════════════════════════════════════════════════════
   NORTE — hoja de estilos de las páginas legales (/terminos, /privacidad y
   /arrepentimiento)

   La landing lleva todo el CSS embebido a propósito: recibe tráfico pago y
   cada request de más cuesta plata. Estas páginas son el caso opuesto —
   tráfico casi nulo y markup idéntico entre sí — así que comparten esta hoja
   en vez de duplicar el mismo bloque de estilos en cada una.

   Vive en la raíz (y no en /assets) a propósito: las reglas de cache de
   netlify.toml y vercel.json le dan revalidación en cada visita, igual que al
   HTML. Es texto legal: cuando cambia, tiene que verse ya.

   Tokens: mismos nombres y valores que index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. FUENTES  (mismos archivos self-hosted que la landing)
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('/assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TOKENS  (subconjunto: sólo los que usan estas páginas)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#fbf8f2;
  --tinta:#1c1917;      /* 16.1:1 sobre papel */
  --tinta-2:#57534e;    /*  7.3:1 sobre papel — es el color del cuerpo acá */

  --borde:#e9e2d5;

  --ambar:#b45309;
  --ambar-2:#92400e;    /* links dentro del texto: 6.6:1 sobre papel */
  --ambar-suave:#fdf1dd;

  --lienzo:#1c1917;
  --lienzo-tinta:#fbf8f2;
  --lienzo-tinta-2:#b4aaa0;
  --lienzo-borde:#332e2a;
  --lienzo-acento:#f0b860;

  --ancho:1120px;
  --margen:clamp(20px,5.5vw,40px);

  color-scheme:light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. RESET + BASE
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgb(28 25 23 / .045) 1px, transparent 0);
  background-size:22px 22px;
  /* El pie queda abajo aunque el documento sea corto */
  min-height:100dvh;
  display:flex;flex-direction:column;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,a{font:inherit}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:4px}
.lienzo :focus-visible{outline-color:var(--lienzo-acento)}
a[href]{cursor:pointer}

h1{
  font-family:'Playfair Display',ui-serif,Georgia,serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
}
p{text-wrap:pretty}

/* ═══════════════════════════════════════════════════════════════════════════
   4. LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.envoltorio{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--margen);
}
.lienzo{background:var(--lienzo);color:var(--lienzo-tinta)}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CABECERA
   ═══════════════════════════════════════════════════════════════════════ */
.cabecera{padding-block:22px}
.cabecera .envoltorio{display:flex;align-items:center;justify-content:space-between;gap:16px}

.wordmark{
  display:inline-flex;align-items:baseline;gap:8px;
  font-family:'Playfair Display',ui-serif,Georgia,serif;
  font-weight:600;letter-spacing:-.02em;font-size:1.5rem;
  color:var(--tinta);text-decoration:none;
}
.wordmark svg{width:16px;height:16px;fill:var(--ambar);transform:translateY(.05em);flex:none}
.wordmark--chico{font-size:1.125rem}
.wordmark--chico svg{width:12px;height:12px}
.wordmark--lienzo{color:var(--lienzo-tinta)}
.wordmark--lienzo svg{fill:var(--lienzo-acento)}

/* min-height 44px: link chico, pero tiene que seguir siendo tocable */
.cabecera__volver{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.8125rem;font-weight:500;letter-spacing:.02em;
  color:var(--tinta-2);text-decoration:none;
  transition:color .18s ease-out;
}
.cabecera__volver:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════════════════════
   6. DOCUMENTO LEGAL
   Prioridad acá: legibilidad. Línea corta, interlineado holgado y el cuerpo
   en --tinta-2 (7.3:1), con los rótulos en --tinta para poder escanear.
   ═══════════════════════════════════════════════════════════════════════ */
.legal{flex:1;padding-block:clamp(28px,5vw,52px) clamp(56px,9vw,96px)}

.documento{max-width:70ch;margin-inline:auto}

.documento__marca{
  display:flex;align-items:center;gap:8px;
  margin-bottom:16px;
}
.documento__marca svg{width:13px;height:13px;fill:var(--ambar);flex:none}
.documento__marca span{
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ambar-2);
}
.documento h1{font-size:clamp(1.875rem,1.35rem + 2.2vw,2.75rem)}
.documento__fecha{margin-top:12px;font-size:.875rem;color:var(--tinta-2)}

.clausulas{
  counter-reset:clausula;
  display:grid;gap:clamp(20px,3vw,28px);
  margin-top:clamp(30px,4.5vw,44px);
  padding:0;list-style:none;
}
/* ">" a propósito: las viñetas anidadas (.subitems) no llevan número */
.clausulas > li{
  position:relative;
  padding-left:44px;
  color:var(--tinta-2);
  line-height:1.72;
  overflow-wrap:break-word; /* los mails largos no rompen el layout en 375px */
}
.clausulas > li::before{
  counter-increment:clausula;
  content:counter(clausula);
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:999px;
  background:var(--ambar-suave);
  color:var(--ambar-2);
  font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.clausulas strong{color:var(--tinta);font-weight:600}
.clausulas a{
  color:var(--ambar-2);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.07em;
  transition:color .18s ease-out;
}
.clausulas a:hover{color:var(--ambar)}

/* Viñetas dentro de un punto numerado (y listas sueltas de /arrepentimiento) */
.subitems{
  display:grid;gap:10px;
  margin-top:10px;padding-left:1.25em;
  color:var(--tinta-2);line-height:1.72;
  overflow-wrap:break-word;
}
.subitems li::marker{color:var(--ambar)}
.subitems em{color:var(--tinta);font-style:italic}

/* ═══════════════════════════════════════════════════════════════════════════
   6b. /ARREPENTIMIENTO  (texto corrido + botón grande de mailto)
   ═══════════════════════════════════════════════════════════════════════ */
.documento__texto{margin-top:clamp(24px,4vw,36px);color:var(--tinta-2);line-height:1.72}
.documento__texto strong,.documento__nota strong{color:var(--tinta);font-weight:600}
.documento__subtitulo{
  margin-top:clamp(32px,5vw,44px);
  font-size:1.0625rem;font-weight:600;line-height:1.4;color:var(--tinta);
}
.documento__subtitulo + .clausulas{margin-top:18px}
.documento__subtitulo + .subitems{margin-top:12px}
.documento__nota{margin-top:clamp(32px,5vw,44px);color:var(--tinta-2);line-height:1.72}

/* Mismo .boton que la landing (tamaño, radio, colores) */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:14px 28px;
  margin-top:clamp(24px,4vw,32px);
  border:0;border-radius:18px;
  background:var(--ambar);color:#fff;
  font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;line-height:1.3;
  text-align:center;text-decoration:none;
  box-shadow:0 1px 2px rgb(28 25 23 / .16);
  transition:background-color .18s ease-out,transform .18s ease-out,box-shadow .18s ease-out;
}
.boton:hover{background:var(--ambar-2);box-shadow:0 6px 20px -6px rgb(180 83 9 / .5)}
.boton:active{transform:scale(.985)}
.boton svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* En celular ocupa todo el ancho: es LA acción de la página */
@media (max-width:767px){.boton{width:100%}}

/* ═══════════════════════════════════════════════════════════════════════════
   7. PIE  (mismo que la landing)
   ═══════════════════════════════════════════════════════════════════════ */
.pie{padding-block:40px;border-top:1px solid var(--lienzo-borde)}
.pie__fila{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.pie__links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  padding:0;list-style:none;font-size:.9375rem;
}
.pie__links a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--lienzo-tinta-2);text-decoration:none;transition:color .18s ease-out;
}
.pie__links a:hover{color:var(--lienzo-tinta);text-decoration:underline;text-underline-offset:3px}
/* Res. 424/2020: tiene que ser fácil de encontrar. Mismo tamaño que los demás,
   pero en el color claro y subrayado, para que no se pierda entre ellos. */
.pie__links a.pie__arrepentimiento{
  color:var(--lienzo-tinta);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lienzo-acento);
}
/* La página en la que ya estás no se ve como un link más */
.pie__links a[aria-current="page"]{color:var(--lienzo-tinta);cursor:default}
.pie__legal{font-size:.8125rem;color:var(--lienzo-tinta-2);line-height:1.6;max-width:46ch}

/* ═══════════════════════════════════════════════════════════════════════════
   8. MOTION
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  body{font-size:18px}
  .pie__fila{flex-direction:row;justify-content:space-between;text-align:left;gap:28px}
}