/* ===========================================================
   JuntoCompra — Páginas de contenido
   (legales, ayuda, sobre nosotros, contacto)
   =========================================================== */

/* ── Cabecera de página ─────────────────────────────────── */
.page-head{
  padding-block:calc(var(--header-h) + clamp(30px,4.5vw,52px)) clamp(38px,5vw,62px);
}
.mesh--page{
  background:
    radial-gradient(34% 58% at 90% 30%,
      rgba(216,56,92,.82) 0%,  rgba(216,56,92,.58) 40%,
      rgba(216,56,92,.24) 72%, rgba(216,56,92,0) 100%),
    radial-gradient(24% 40% at 2% 96%,
      rgba(216,56,92,.45) 0%,  rgba(216,56,92,.26) 46%,
      rgba(216,56,92,0) 100%),
    var(--ink);
}
.page-head .display{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:var(--s4)}
.page-head .lead{color:rgba(255,255,255,.76);max-width:58ch}
.page-meta{
  margin-top:var(--s5);
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ── Cuerpo del documento ───────────────────────────────── */
.doc{
  display:grid;
  grid-template-columns:minmax(0,1fr) 232px;
  gap:clamp(32px,5vw,64px);
  align-items:start;
  padding-block:clamp(44px,6vw,72px);
}
.doc--simple{grid-template-columns:minmax(0,1fr);max-width:74ch}

.prose{max-width:72ch;color:var(--ink-80)}
.prose > section{
  padding-top:var(--s7);
  margin-top:var(--s7);
  border-top:1px solid rgba(36,36,68,.1);
}
.prose > section:first-child{padding-top:0;margin-top:0;border-top:0}

.prose h2{
  display:flex;align-items:baseline;gap:11px;
  font-size:1.24rem;
  color:var(--ink);
  margin-bottom:var(--s4);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.prose h2 .n{
  flex:none;
  font-size:.72rem;font-weight:800;
  color:var(--red);
  font-variant-numeric:tabular-nums;
}
.prose h3{
  font-size:1rem;
  color:var(--ink);
  margin:var(--s5) 0 var(--s2);
}
.prose p{margin-bottom:var(--s4);line-height:1.7}
.prose p:last-child{margin-bottom:0}
/* Los enlaces del texto van en rojo y subrayados. */
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--red-hover)}

/* Pero eso no debe alcanzar a botones ni a las píldoras de navegación:
   el rojo sobre rojo dejaba el botón de contacto invisible. Se resuelve
   con especificidad y no con `:not()` de selector complejo, que en
   Safari anterior a 16.4 invalida la regla entera. */
.prose a.btn{text-decoration:none}
.prose a.btn--primary,
.prose a.btn--ink{color:var(--white)}
.prose .doc-nav a{color:var(--ink-60);text-decoration:none}
.prose .doc-nav a:hover{color:var(--red)}
.prose .doc-nav a[aria-current]{color:var(--white)}
.prose strong{color:var(--ink);font-weight:700}

.prose ul{margin:0 0 var(--s4);padding:0;list-style:none}
.prose ul li{
  position:relative;
  padding-left:20px;
  margin-bottom:9px;
  line-height:1.65;
}
.prose ul li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:5px;height:5px;border-radius:50%;
  background:var(--red);
}
.prose ol{margin:0 0 var(--s4);padding-left:20px;line-height:1.65}
.prose ol li{margin-bottom:9px}

/* Ficha de datos (identificación, contacto…) */
.datos{
  display:grid;grid-template-columns:auto 1fr;
  gap:9px var(--s5);
  padding:var(--s5);
  margin-bottom:var(--s4);
  background:var(--surface);
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
}
.datos dt{font-weight:700;color:var(--ink)}
.datos dd{margin:0;color:var(--ink-60)}

/* Aviso destacado */
.callout{
  padding:var(--s5);
  margin-bottom:var(--s6);
  border-radius:var(--r-md);
  background:rgba(216,56,92,.07);
  border:1.5px solid rgba(216,56,92,.22);
  font-size:var(--fs-sm);line-height:1.6;
}
.callout b{display:block;color:var(--ink);margin-bottom:5px}
.callout--calm{
  background:var(--surface);
  border-color:rgba(36,36,68,.12);
}

/* Tabla sencilla (cookies, plazos…) */
.tabla{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:var(--s4)}
.tabla th,.tabla td{
  text-align:left;padding:10px 12px;
  border-bottom:1px solid rgba(36,36,68,.1);
  vertical-align:top;
}
.tabla th{font-weight:700;color:var(--ink);white-space:nowrap}
.tabla td{color:var(--ink-60)}
.tabla tr:last-child td{border-bottom:0}
.tabla-wrap{overflow-x:auto;margin-bottom:var(--s4)}

/* ── Índice lateral ─────────────────────────────────────── */
.toc{
  position:sticky;
  top:calc(var(--header-h) + 20px);
  padding:var(--s5);
  background:var(--surface);
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
}
.toc h2{
  font-size:var(--fs-xs);font-weight:800;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-40);
  margin-bottom:var(--s3);
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:7px;line-height:1.4}
.toc a{
  display:block;
  color:var(--ink-60);
  transition:color var(--t-fast);
}
.toc a::before{content:counter(toc) '. ';color:var(--ink-40)}
.toc a:hover{color:var(--red)}

/* ── Acordeón de ayuda (versión clara) ──────────────────── */
.qa details{
  border-bottom:1px solid rgba(36,36,68,.1);
}
.qa details:first-of-type{border-top:1px solid rgba(36,36,68,.1)}
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:16px 0;
  font-size:var(--fs-body);font-weight:700;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:'+';
  flex:none;
  font-size:1.15rem;font-weight:400;
  color:var(--red);
  line-height:1;
  transition:transform var(--t-fast);
}
.qa details[open] summary::after{content:'\2212'}
.qa summary:hover{color:var(--red)}
.qa details > p,
.qa details > ul{
  margin:0 0 16px;
  padding-right:var(--s6);
  font-size:var(--fs-sm);
  line-height:1.65;
  color:var(--ink-60);
}

/* Bloque final de "¿sigues con dudas?" */
.ayuda-cta{
  display:grid;gap:var(--s4);
  padding:var(--s6);
  margin-top:var(--s7);
  background:var(--surface);
  border-radius:var(--r-lg);
  text-align:center;
  justify-items:center;
}
.ayuda-cta h2{font-size:1.15rem;color:var(--ink)}
.ayuda-cta p{font-size:var(--fs-sm);color:var(--ink-60);max-width:44ch;margin:0}

/* ── Otras páginas legales ──────────────────────────────── */
.doc-nav{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-top:var(--s6);
  margin-top:var(--s7);
  border-top:1px solid rgba(36,36,68,.1);
}
.doc-nav a{
  padding:.5em 1em;
  border:1.5px solid rgba(36,36,68,.14);
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-60);
  transition:border-color var(--t-fast), color var(--t-fast);
}
.doc-nav a:hover{border-color:var(--red);color:var(--red)}
.doc-nav a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--white)}

@media (max-width:900px){
  .doc{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:-1}
  .toc ol{columns:2;column-gap:var(--s5)}
}
@media (max-width:560px){
  .toc ol{columns:1}
  .datos{grid-template-columns:1fr;gap:2px var(--s4)}
  .datos dd{margin-bottom:9px}
}