@import url("fuentes.css?v=fd9fffec");

/* Hoja de las tres páginas legales. Mismo mundo que la landing —el tablón de
   kraft y las cartulinas cortadas— pero en una sola columna de lectura: estas
   páginas están para leerse, no para convertir. Aquí la medida manda sobre
   todo lo demás, y la única cartulina grande es la columna de texto.
   Reescrita el 27-10-2026 con el cambio de mundo: dejarlas en el sistema
   anterior habría sido una costura visible a un clic del formulario. */

:root{
  --papel:#DCCBA8;
  --hueso:#FBF7F0;
  --turquesa:#00B2C0;
  --morado:#611C70;
  --naranja:#DC690F;
  --accion:#B05209;
  --tinta:#241A2B;
  --tinta-2:#4E442F;
  --sobre-morado-2:#D6BEDD;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --texto:'Atkinson Hyperlegible Next',system-ui,-apple-system,sans-serif;
  --corte-a:polygon(
    0 4px, 31% 0, 33% 1px, 79% 4px, 100% 1px,
    calc(100% - 3px) 46%, 100% 49%, calc(100% - 2px) calc(100% - 3px),
    62% calc(100% - 1px), 60% calc(100% - 4px), 12% calc(100% - 2px), 0 100%,
    2px 58%, 1px 55%, 3px 22%);
  --corte-b:polygon(
    0 1px, 17% 4px, 19% 1px, 68% 3px, 100% 0,
    calc(100% - 2px) 27%, calc(100% - 4px) 30%, 100% calc(100% - 1px),
    43% calc(100% - 3px), 41% calc(100% - 1px), 9% calc(100% - 4px), 0 calc(100% - 2px),
    3px 71%, 1px 68%);
}

*{box-sizing:border-box}
body{
  margin:0;
  background-color:var(--papel);
  background-image:url(img/grano.png);
  background-size:72px 72px;
  background-blend-mode:multiply;
  color:var(--tinta);
  font-family:var(--texto);font-size:17px;line-height:1.7;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--morado);text-underline-offset:.18em;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--accion);outline-offset:3px}
::selection{background:var(--turquesa);color:var(--tinta)}
html{scrollbar-color:var(--morado) var(--papel)}
::marker{color:var(--naranja)}

.env{max-width:720px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}

header{
  background-color:var(--hueso);
  background-image:url(img/grano.png);background-size:72px 72px;
  background-blend-mode:multiply;
  padding-block:1.1rem;border-bottom:3px solid var(--tinta);
}
header .env{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1180px}
.marca img{width:104px;display:block}
header a.volver{
  color:var(--morado);font-family:var(--display);font-weight:700;
  text-decoration:none;white-space:nowrap;
  border-bottom:3px solid var(--naranja);padding-bottom:1px;
}

/* La columna de lectura ES una cartulina: una sola, grande, cortada, sobre el
   tablón. En estas páginas no hay nada más que clavar. */
/* OJO: en estas tres paginas el <main> ES el .env —<main class="env">, no
   un div dentro—, asi que el selector va pegado. Escrito como descendente
   (main .env) no casa con nada y la columna de lectura sale sin cartulina,
   que es justo lo que paso al reescribir esta hoja el 27-10.
   Y el corte va en un ::before y no en el elemento: dentro hay enlaces, y
   clip-path recorta tambien su anillo de foco. */
main.env{
  position:relative;isolation:isolate;
  margin-block:2.6rem 4rem;
  padding:clamp(1.6rem,5vw,3rem) clamp(1.2rem,4vw,2.4rem);
}
main.env::before{
  content:"";position:absolute;inset:0;z-index:-1;
  clip-path:var(--corte-a);
  background-color:var(--hueso);
  background-image:url(img/grano.png);background-size:72px 72px;
  background-blend-mode:multiply;
}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
   font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.02;margin:0 0 .3em}
h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
   font-size:1.3rem;line-height:1.2;margin:2.4em 0 .5em;color:var(--morado)}
h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:1.6em 0 .4em}
p,li{margin:0 0 .9em}
ul,ol{padding-left:1.25em}
.fecha{color:var(--tinta-2);font-size:.93rem;margin-bottom:2.6em}

.ficha{
  position:relative;isolation:isolate;
  padding:1.4rem 1.5rem;margin:1.4em 0;
}
.ficha::before{
  content:"";position:absolute;inset:0;z-index:-1;
  clip-path:var(--corte-b);
  background-color:var(--papel);
  background-image:url(img/grano.png);background-size:72px 72px;
  background-blend-mode:multiply;
}
.ficha p:last-child{margin-bottom:0}

table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:.95rem}
th,td{border:2px solid var(--tinta);padding:.7rem .8rem;text-align:left;vertical-align:top}
th{background:var(--papel);font-family:var(--display);font-weight:700}

footer{
  background-color:var(--morado);
  background-image:url(img/grano.png);background-size:72px 72px;
  background-blend-mode:multiply;
  color:var(--sobre-morado-2);padding-block:1.8rem;font-size:.93rem;
}
footer .env{max-width:1180px}
footer a{color:#fff;margin-right:1.4rem}

@media (max-width:620px){
  body{font-size:16px}
  table{font-size:.88rem}
  .marca img{width:88px}

  /* LA TABLA SE APILA. Cuatro columnas de texto legal no caben en un teléfono:
     medído el 29-10-2026, la tabla pedía 455 px y a 390 desbordaba la página
     ENTERA, no solo a sí misma. Se descartó el scroll lateral: en una política
     de privacidad, esconder una columna a la derecha es esconder un derecho.
     Cada fila pasa a ser un bloque y cada celda recupera su encabezado desde
     data-col, así que no se pierde ni una etiqueta. */
  table,table tbody,table tr,table td{display:block;width:100%}
  table{border-collapse:separate}
  table tr:first-child{display:none}          /* la fila de encabezados */
  table tr{border:2px solid var(--tinta);margin-bottom:1.1rem}
  table td{border:0;border-top:2px solid var(--tinta)}
  table tr td:first-child{border-top:0}
  table td::before{
    content:attr(data-col);
    display:block;
    font-family:var(--display);font-weight:700;
    margin-bottom:.25em;
  }
}