/* ==========================================================================
   DOUI — Paginas de texto: privacidad y accesibilidad.
   Se carga despues de doui.css. Sólo lo que esas paginas necesitan.
   ========================================================================== */

.documento { max-width: 74ch; }

.documento h2 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 3rem 0 1rem;
  scroll-margin-top: 5rem;
}
.documento h2:first-of-type { margin-top: 2rem; }
.documento h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 1.8rem 0 0.6rem;
  color: var(--crema);
}
.documento p { color: var(--humo); margin-bottom: 1rem; }
.documento strong { color: var(--crema); font-weight: 500; }
/* :not(.btn) no sobra. Esta regla pesa mas que .btn-whatsapp o .btn-linea
   -clase mas elemento contra clase sola-, asi que sin la exclusion pintaba
   de azul de enlace el texto de TODOS los botones del pedido. El de
   WhatsApp salia en azul lavanda sobre verde: contraste 1, ilegible, y era
   el boton con el que se cierra la compra. */
.documento a:not(.btn) { color: #9FB6FF; text-underline-offset: 3px; }
.documento a:not(.btn):hover { color: var(--crema); }

.documento ul { margin: 0 0 1.2rem; }
.documento ul li {
  color: var(--humo);
  position: relative;
  padding: 0.35rem 0 0.35rem 1.5rem;
}
.documento ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.95rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cereza);
}

.documento ol { counter-reset: n; margin: 0 0 1.2rem; }
.documento ol li {
  counter-increment: n;
  color: var(--humo);
  position: relative;
  padding: 0.35rem 0 0.35rem 2.2rem;
}
.documento ol li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.45rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--cereza);
}

.caja-dato {
  border: 1px solid rgba(248, 244, 236, 0.14);
  border-radius: 1.2rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: rgba(248, 244, 236, 0.05);
  backdrop-filter: blur(6px);
  margin: 1.8rem 0;
}
.caja-dato p:last-child { margin-bottom: 0; }

.sello {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.1);
  border: 1px solid rgba(248, 244, 236, 0.2);
  color: var(--crema);
  margin-bottom: 1.5rem;
}
.sello.bien { border-color: #2E7D4F; background: rgba(46, 125, 79, 0.22); }

.sumario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 1rem;
  padding: 0;
}
.sumario li { padding: 0; }
.sumario li::before { display: none; }
.sumario a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border: 1px solid rgba(248, 244, 236, 0.22);
  border-radius: 999px;
  color: var(--crema);
  text-decoration: none;
  font-size: 0.92rem;
}
.sumario a:hover { background: rgba(248, 244, 236, 0.1); border-color: var(--crema); }

.tabla-doc { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.tabla-doc th {
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--humo);
  padding: 0 0.8rem 0.7rem 0;
  border-bottom: 1px solid rgba(248, 244, 236, 0.2);
  vertical-align: bottom;
}
.tabla-doc td {
  padding: 0.7rem 0.8rem 0.7rem 0;
  border-bottom: 1px solid rgba(248, 244, 236, 0.08);
  color: var(--humo);
  font-size: 0.95rem;
  vertical-align: top;
}
.tabla-doc td:first-child { color: var(--crema); }
.tabla-doc .si { color: #7BD79E; font-weight: 500; }
.tabla-doc .no { color: var(--humo-bajo); }
.tabla-envuelta { overflow-x: auto; }

.fecha { color: var(--humo-bajo); font-size: 0.9rem; }

/* ------------------------------------------- informacion sanitaria -- */
/* Lo que falta se marca, no se disimula. Un hueco que parece resuelto es
   peor que un hueco: quien lea la pagina tiene que saber de un vistazo que
   ese dato todavia no existe. */

.pendiente {
  border-left: 3px solid var(--humo-bajo);
  background: rgba(248, 244, 236, 0.04);
  padding: 0.9rem 1.1rem;
  border-radius: 0 0.7rem 0.7rem 0;
  margin: 1rem 0 1.6rem;
}
.pendiente p:last-child,
.pendiente ul:last-child { margin-bottom: 0; }
.pendiente ul { margin-bottom: 0.6rem; }

/* Lo que no solo falta, sino que impide vender. */
.aviso-fuerte {
  border-left: 3px solid var(--cereza);
  background: rgba(232, 32, 58, 0.08);
  padding: 0.9rem 1.1rem;
  border-radius: 0 0.7rem 0.7rem 0;
  margin: 1rem 0 1.6rem;
}
.aviso-fuerte p:last-child { margin-bottom: 0; }

/* Los alergenos son lo unico de esta pagina que puede hacer dano hoy. */
.aviso-alergenos {
  border: 1px solid rgba(232, 32, 58, 0.45);
  background: rgba(232, 32, 58, 0.06);
  padding: 1rem 1.15rem;
  border-radius: 0.8rem;
  margin: 1rem 0 1.2rem;
}