/* ══════════════════════════════════════════════════════════════════════
   LAS PÁGINAS LEGALES

   Estilo de Abretienda, pero en voz baja. La marca, la tipografía y el
   papel del FAQ — sin el amarillo, sin el mazo, sin nada que se mueva.

   Un texto legal se lee para entender, no para emocionarse. El circo
   completo acá sería ruido: la única decisión de diseño que importa es
   que se lea.
   ══════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --papel:#F2EDDF; --tinta:#272925; --verde:#83CE57; --coral:#FF6553;
  /* DOS grises, no uno. El #7A7466 que tenía daba 3.97 sobre el papel:
     alcanza para el titular —que es texto grande y ahí el mínimo es 3.0—
     pero NO para los números de 10.5px ni para el pie de 13.5px, que son
     texto de cuerpo y piden 4.5.
     El mismo gris en dos tamaños no es el mismo problema. */
  --gris:#655F52;        /* 5.42 · para todo lo chico */
  --gris-claro:#7A7466;  /* 3.97 · solo para el titular de 58px */
  --linea:rgba(39,41,37,.14);
  --ease:cubic-bezier(.22,1,.36,1);
}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--papel);color:var(--tinta);
  -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* ── el encabezado ── */
.top{display:flex;align-items:center;justify-content:space-between;padding:26px 0 0}
.marca{font-weight:900;font-size:19px;letter-spacing:-.045em;color:var(--tinta);
  text-decoration:none;display:inline-flex;align-items:baseline}
/* El punto: verde con canto de tinta, el mismo objeto de toda la marca.
   "abre" + punto verde = ABIERTO. */
.marca .p{flex:none;box-sizing:content-box;width:.3em;height:.3em;border-radius:50%;
  background:var(--verde);border:1.5px solid var(--tinta);margin:0 .1em}
.volver{font-size:13.5px;font-weight:700;color:var(--gris);text-decoration:none;
  transition:color .2s,transform .2s var(--ease);display:inline-block}
.volver:hover{color:var(--tinta);transform:translateX(-3px)}

/* ── el título ── */
.fecha{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--gris);
  text-transform:uppercase;margin:64px 0 14px}
h1{font-size:clamp(30px,3.35vw + 17.4px,58px);font-weight:900;letter-spacing:-.04em;
  line-height:1.02;margin-bottom:44px}
h1 em{font-style:normal;font-weight:500;color:var(--gris-claro)}

/* ── las secciones ── */
.s{display:grid;grid-template-columns:88px 1fr;gap:24px;padding:26px 0;
  border-top:1px solid var(--linea)}
.s:first-of-type{border-top:2px solid var(--tinta)}
.n{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--gris);
  text-transform:uppercase;padding-top:4px}
.s h2{font-size:16.5px;font-weight:900;letter-spacing:-.02em;margin-bottom:9px}
.s p{font-size:14.5px;line-height:1.65;font-weight:500;color:#3E3A32}
.s p + p{margin-top:10px}
.s b{font-weight:800;color:var(--tinta)}
.s a{color:var(--tinta);font-weight:700}
/* El resumen: lo único que la mayoría va a leer. Por eso va primero y sin
   título — es la respuesta, no un capítulo. */
.corto p{font-size:16px;font-weight:600;color:var(--tinta)}

/* ── el pie ── */
.pie{border-top:1px solid var(--linea);margin-top:44px;padding:26px 0 60px;
  font-size:13.5px;font-weight:600;color:var(--gris);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pie a{color:var(--tinta);font-weight:700}
.pie nav{display:flex;gap:18px}

@media(max-width:640px){
  .s{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .n{padding-top:0}
  .fecha{margin-top:44px}
  h1{margin-bottom:32px}
}