/* ==========================================================================
 * Documentos legales de WAN
 *
 * El problema de un texto legal no es que sea largo: es que nadie lo lee de
 * arriba abajo. Se busca una cosa —cuándo llega, qué pasa si me equivoco, qué
 * hacen con mi número— y se quiere encontrar rápido. De ahí el índice de
 * entrada y el número grande al costado de cada cláusula: son asideros para
 * volver, no adorno.
 *
 * Del resto se encarga la casa: negro, oro, el serif para los titulares y la
 * monoespaciada en versalitas para los rótulos, igual que en cobertura y en la
 * Familia. Un texto legal en tipografía de bufete, en una perfumería, se lee
 * como si lo hubiera escrito otro.
 * ========================================================================== */

/*
 * El papel pintado de WAN, el mismo que ya viste el carrito y la ficha.
 *
 * Un documento legal sobre negro liso se lee como el aviso de cualquiera. Con
 * el patrón detrás, se lee como un papel de esta casa. Va velado en dos capas
 * —una miel arriba y un negro que se cierra hacia abajo— porque el patrón
 * tiene que reconocerse detrás del titular y desaparecer detrás del texto: si
 * compite con una cláusula, gana el patrón y pierde el lector.
 */
.legal-shell {
  position: relative;
  z-index: 2;
  isolation: isolate;
  min-height: 100svh;
  padding-bottom: clamp(50px, 6vw, 84px);
  background: #050403;
}

/* El patrón vive en una capa propia para conservar la misma luminosidad desde
   la cabecera hasta el cierre del documento, incluso en páginas muy largas. */
.legal-shell::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/identidad/wan-patron-oro.webp") center top / 620px auto repeat;
  filter: brightness(1.08) contrast(1.08) saturate(1.12);
  opacity: 0.94;
  pointer-events: none;
}

.legal-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 22% at 50% 0, rgba(242, 204, 107, 0.2), transparent 72%),
    radial-gradient(circle at 7% 34%, rgba(213, 161, 58, 0.11), transparent 23%),
    radial-gradient(circle at 93% 68%, rgba(242, 204, 107, 0.09), transparent 25%),
    linear-gradient(180deg, rgba(5, 4, 2, 0.12), rgba(4, 3, 2, 0.34) 42%, rgba(3, 3, 2, 0.48));
  pointer-events: none;
}

.legal-ancho {
  width: min(calc(100% - 40px), var(--legal-ancho, 960px));
  margin-inline: auto;
}

/* ── La entrada ─────────────────────────────────────────────────────────── */

.legal-hero {
  position: relative;
  padding: clamp(18px, 2.8vw, 30px) 0 clamp(22px, 3vw, 32px);
  text-align: center;
}

/*
 * Un claro en el papel pintado, justo detrás del titular. Sin él, la W gótica
 * del patrón cae encima de la del título y las dos se estorban; con él, el
 * patrón sigue viéndose alrededor y el título se queda con su sitio.
 */
.legal-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -10% -4%;
  background: radial-gradient(ellipse 58% 66% at 50% 48%, rgba(4, 3, 2, 0.91), rgba(4, 3, 2, 0.5) 56%, transparent 78%);
  pointer-events: none;
}

.legal-rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--color-miel);
}

.legal-rotulo span {
  width: clamp(24px, 6vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 204, 107, 0.65));
}

.legal-rotulo span:last-child {
  background: linear-gradient(90deg, rgba(242, 204, 107, 0.65), transparent);
}

.legal-hero :is(h1, h2) {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: clamp(2.15rem, 4.7vw, 3.55rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-crema);
  text-wrap: balance;
}

.legal-hero :is(h1, h2) em {
  font-style: italic;
  color: var(--color-miel-clara);
}

.legal-bajada {
  max-width: 66ch;
  margin: 14px auto 0;
  font-size: 0.85rem;
  line-height: 1.68;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

.legal-fecha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 239, 224, var(--wan-opacidad-rotulo-min));
}

.legal-fecha span {
  width: clamp(18px, 5vw, 44px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 204, 107, 0.4));
}

.legal-fecha span:last-child {
  background: linear-gradient(90deg, rgba(242, 204, 107, 0.4), transparent);
}

/* ── El índice ──────────────────────────────────────────────────────────── */

/*
 * El índice deja de ser el cartel de la entrada y pasa a ser el margen del
 * documento.
 *
 * Un contrato no se lee de arriba abajo: se busca una cláusula, se vuelve a
 * otra, se compara con una tercera. Con el índice arriba del todo, cada uno de
 * esos saltos obliga a subir hasta la cabecera; pegado al costado es un clic, y
 * de paso dice dos cosas que un documento legal nunca dice: en cuál vas y
 * cuánto queda.
 *
 * El hilo de miel que baja por el carril es ese «cuánto queda». Es lo único que
 * se mueve en toda la página, y se mueve solo cuando se mueve el lector.
 */
.legal-documento {
  --legal-ancho: 1300px;
  padding-bottom: clamp(10px, 2vw, 20px);
}

/* En un monitor de verdad la hoja se abre del todo. No para que la línea de
   texto se estire —eso empeora la lectura, no la mejora— sino para que quepan
   al lado la columna del índice y el margen del documento. */
@media (min-width: 1520px) {
  .legal-documento { --legal-ancho: 1380px; }
}

.legal-lectura {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 3vw, 52px);
  margin-top: clamp(20px, 2.8vw, 30px);
}

.legal-indice {
  position: sticky;
  top: calc(var(--wan-cabecera, 84px) + 14px);
  max-height: calc(100svh - var(--wan-cabecera, 84px) - 30px);
  overflow: auto;
  border: 1px solid rgba(242, 204, 107, 0.4);
  border-radius: 18px 5px 18px 5px;
  background:
    radial-gradient(circle at 0 0, rgba(213, 161, 58, 0.18), transparent 46%),
    linear-gradient(155deg, rgba(23, 18, 10, 0.97), rgba(4, 4, 3, 0.97));
  padding: 15px 15px 13px;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 238, 188, 0.1);
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 204, 107, 0.28) transparent;
}

/* El resumen plegable es cosa de la pantalla estrecha. En el margen estorba: no
   hay nada que plegar cuando el índice no le quita sitio a nada. */
.legal-indice > summary {
  display: none;
}

.legal-indice-rotulo {
  margin-bottom: 11px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 204, 107, 0.72);
}

.legal-indice-lista {
  position: relative;
  margin: 0;
  padding: 0 0 0 15px;
  list-style: none;
}

/* El carril, y encima lo que ya se ha leído. */
.legal-indice-lista::before,
.legal-indice-lista::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 1px;
  border-radius: 1px;
}

.legal-indice-lista::before {
  top: 6px;
  bottom: 6px;
  background: rgba(242, 204, 107, 0.16);
}

.legal-indice-lista::after {
  top: 6px;
  height: calc((100% - 12px) * var(--avance, 0));
  background: linear-gradient(180deg, rgba(246, 206, 106, 0.95), rgba(224, 165, 56, 0.55));
  box-shadow: 0 0 9px rgba(242, 204, 107, 0.45);
}

.legal-indice-lista a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
  border-radius: 8px;
  padding: 6px 6px 6px 8px;
  font-size: 0.8rem;
  line-height: 1.42;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  transition: color 170ms ease, background 170ms ease;
}

.legal-indice-lista small {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(242, 204, 107, var(--wan-opacidad-lectura-min));
  font-variant-numeric: lining-nums;
}

.legal-indice-lista a:is(:hover, :focus-visible) {
  background: rgba(242, 204, 107, 0.07);
  color: var(--color-miel-clara);
}

/* Dónde estás: una celda del panal engarzada en el hilo, a la altura del
   renglón que estás leyendo. */
.legal-indice-lista a[aria-current="true"] {
  color: var(--color-crema);
}

.legal-indice-lista a[aria-current="true"] small {
  color: var(--color-miel-clara);
}

.legal-indice-lista a[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: -15px;
  width: 7px;
  height: 8px;
  background: var(--color-miel-clara);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 10px rgba(242, 204, 107, 0.7);
}

.legal-indice-meta {
  margin-top: 12px;
  border-top: 1px solid rgba(242, 204, 107, 0.16);
  padding-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(246, 239, 224, var(--wan-opacidad-rotulo-min));
}

/* ── Las cláusulas ──────────────────────────────────────────────────────── */

/*
 * La hoja.
 *
 * El documento se apoya en el papel pintado en vez de flotar sobre él, y esa
 * es toda la idea: el patrón es la pared de WAN, esto es el papel que se ha
 * clavado encima.
 *
 * El sello de miel en el canto de arriba es el mismo que abre el pie. Solo hay
 * uno en toda la página: dos serían dos sellos, y un sello repetido no sella.
 */
/*
 * Los dos márgenes de la hoja no son iguales, y no es un descuido: el de la
 * izquierda es el del renglón y las cifras; el de la derecha es el que sobra
 * cuando el párrafo se corta a su medida. En un contrato en papel pasa igual,
 * y es justo donde se anota.
 */
/*
 * La hoja tiene dos anchos, y de ahí sale casi todo el ritmo de la página.
 *
 * La medida es el renglón del cuerpo: ochenta y pico caracteres, que es hasta
 * donde el ojo vuelve solo al principio de la línea siguiente. Estirarla porque
 * hay sitio se lee peor, no mejor, y por eso el monitor grande no la toca.
 *
 * El aparato es lo que sí puede salirse: el filete del titular, la entradilla y
 * las listas de condiciones. Al sobresalir marcan dónde empieza y acaba cada
 * cláusula sin necesidad de una línea más, y de paso ocupan el ancho que al
 * párrafo no le conviene ocupar.
 */
.legal-cuerpo {
  --legal-medida: 37.5rem;
  --legal-aparato: 43.5rem;
  --legal-margen: clamp(18px, 2.6vw, 40px);
  --legal-margen-der: clamp(18px, 9vw, 150px);
  --legal-aire: clamp(24px, 3.2vw, 46px);
  --legal-cifra: 62px;
  position: relative;
  display: grid;
  border: 1px solid rgba(242, 204, 107, 0.46);
  border-radius: 30px 8px 30px 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(213, 161, 58, 0.2), transparent 40%),
    radial-gradient(circle at 0 56%, rgba(213, 161, 58, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(18, 14, 8, 0.975), rgba(3, 3, 2, 0.968));
  padding: var(--legal-aire) var(--legal-margen-der) var(--legal-aire) var(--legal-margen);
  box-shadow: 0 38px 88px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 238, 188, 0.12), 0 0 54px rgba(213, 161, 58, 0.075);
}

.legal-cuerpo::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 11px;
  height: 12.5px;
  background: linear-gradient(160deg, #ffe6a6, #f2cc6b 45%, #c9922c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 18px rgba(242, 204, 107, 0.5);
  transform: translateX(-50%);
}

/*
 * El renglón del margen.
 *
 * Una sola línea que baja por donde cuelgan los números, y que es —más que
 * ninguna otra cosa de esta página— lo que convierte nueve bloques sueltos en
 * un documento. Los hexágonos van engarzados en ella, no puestos al lado: por
 * eso el panal es opaco, para que la línea le pase por detrás y no lo cruce.
 */
.legal-cuerpo::after {
  content: "";
  position: absolute;
  top: var(--legal-aire);
  bottom: var(--legal-aire);
  left: calc(var(--legal-margen) + var(--legal-cifra) / 2);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(242, 204, 107, 0.32) 2%, rgba(242, 204, 107, 0.22) 10%, rgba(242, 204, 107, 0.22) 95%, transparent);
  pointer-events: none;
}

/* Dos escuadras finas en los cantos que la hoja lleva redondeados. Es el gesto
   del papel timbrado: no encierran nada, solo dicen que esto es un documento. */
.legal-cuerpo-marco {
  position: absolute;
  inset: 13px;
  pointer-events: none;
}

.legal-cuerpo-marco::before,
.legal-cuerpo-marco::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border: 0 solid rgba(242, 204, 107, 0.26);
}

.legal-cuerpo-marco::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
  border-radius: 19px 0 0 0;
}

.legal-cuerpo-marco::after {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
  border-radius: 0 0 19px 0;
}

.legal-clausula {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--legal-cifra) minmax(0, 1fr);
  gap: clamp(13px, 1.8vw, 24px);
  scroll-margin-top: calc(var(--wan-cabecera, 84px) + 18px);
}

/*
 * El renglón entre cláusula y cláusula arranca donde arranca el texto: si
 * cruzara la línea del margen la cortaría en nueve trozos, y volveríamos a
 * tener nueve bloques.
 */
.legal-clausula + .legal-clausula {
  margin-top: clamp(26px, 3.2vw, 38px);
  border-width: 1px 0 0;
  border-style: solid;
  border-image: linear-gradient(
      90deg,
      rgba(242, 204, 107, 0) 7%,
      rgba(242, 204, 107, 0.3) 9%,
      rgba(242, 204, 107, 0.14) 62%,
      rgba(242, 204, 107, 0)
    )
    1;
  padding-top: clamp(26px, 3.2vw, 38px);
}

/*
 * El número dentro del hexágono del panal, el mismo marco que llevan las cifras
 * de la portada y los motivos del quiz. Aquí numerar sí encierra un orden: son
 * cláusulas y se citan por su número.
 */
.legal-numero {
  display: grid;
  width: var(--legal-cifra);
  place-items: start center;
}

.legal-numero span {
  display: grid;
  width: 46px;
  height: 53px;
  place-items: center;
  background:
    linear-gradient(160deg, rgba(242, 204, 107, 0.36), rgba(242, 204, 107, 0.09)),
    linear-gradient(180deg, #100c07, #070604);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--color-miel-clara);
  font-variant-numeric: lining-nums;
  transition: background 220ms ease, color 220ms ease;
}

.legal-clausula:hover .legal-numero span {
  background:
    linear-gradient(160deg, rgba(242, 204, 107, 0.5), rgba(242, 204, 107, 0.14)),
    linear-gradient(180deg, #100c07, #070604);
  color: #ffe6a6;
}

/*
 * La cabecera de la cláusula: el titular, el filete que cruza toda la hoja y,
 * al final del filete, cuántas van de cuántas. El filete llega hasta donde el
 * párrafo no llega, y por eso el margen de la derecha deja de ser un hueco y
 * pasa a ser un margen.
 */
.legal-clausula-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  max-width: var(--legal-aparato);
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(242, 204, 107, 0.17);
  padding: 9px 0 12px;
}

.legal-clausula-marca {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(242, 204, 107, var(--wan-opacidad-rotulo-min));
  font-variant-numeric: lining-nums;
}

.legal-clausula-marca i {
  margin: 0 3px;
  font-style: normal;
  opacity: var(--wan-opacidad-rotulo-min);
}

.legal-clausula h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.44rem, 3vw, 1.98rem);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--color-crema);
  text-wrap: balance;
}

/* El titular es también el enlace a su propia cláusula. Quien cita un contrato
   necesita señalar el punto exacto, y el § es el gesto de toda la vida. */
.legal-ancla {
  color: inherit;
}

.legal-ancla::after {
  content: "§";
  margin-left: 9px;
  font-size: 0.62em;
  color: rgba(242, 204, 107, 0.55);
  opacity: 0;
  transition: opacity 160ms ease;
}

.legal-clausula:hover .legal-ancla::after,
.legal-ancla:focus-visible::after {
  opacity: 1;
}

.legal-clausula p {
  max-width: var(--legal-medida);
  font-size: 0.95rem;
  line-height: 1.78;
  color: rgba(246, 239, 224, 0.76);
  text-wrap: pretty;
}

/*
 * La entradilla.
 *
 * El primer párrafo de cada cláusula dice de qué va la cláusula; los que vienen
 * detrás la matizan. Cuando los nueve párrafos pesan igual hay que leerlos los
 * nueve para saber si alguno te interesa, y ahí es donde un documento legal se
 * vuelve ilegible. Con la entradilla un grado más grande y más clara se puede
 * bajar leyendo solo la primera línea de cada bloque, y parar donde toque.
 */
.legal-clausula-cabecera + p {
  max-width: var(--legal-aparato);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.66;
  color: rgba(248, 244, 233, 0.9);
}

.legal-clausula p + p,
.legal-clausula ul + p {
  margin-top: 14px;
}

/*
 * Las listas, en su propia bandeja.
 *
 * Casi siempre son condiciones: lo que limita lo que acaba de decir el párrafo
 * de encima. Sueltas entre dos párrafos del mismo tamaño no se distinguen del
 * texto corrido; sobre su placa, con el filete de oro al canto, se ven desde
 * lejos y se puede volver a ellas.
 */
.legal-clausula ul {
  display: grid;
  gap: 10px;
  max-width: var(--legal-aparato);
  margin-top: 16px;
  border-left: 1px solid rgba(242, 204, 107, 0.3);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(242, 204, 107, 0.058), rgba(242, 204, 107, 0.014) 58%, transparent);
  padding: 15px 18px 15px 19px;
  list-style: none;
}

.legal-clausula li {
  position: relative;
  padding-left: 21px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(246, 239, 224, 0.74);
  text-wrap: pretty;
}

/* Una gota de miel por viñeta, no un punto de procesador de textos. */
.legal-clausula li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 7px;
  height: 8px;
  background: rgba(242, 204, 107, 0.7);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.legal-clausula strong {
  font-weight: 700;
  color: rgba(248, 244, 233, 0.93);
}

/* Lo primero de cada punto es de lo que trata el punto: en oro se lee como el
   nombre de la condición y no como una palabra más en negrita. */
.legal-clausula li > strong:first-child {
  color: var(--color-miel-clara);
}

.legal-clausula a:not(.legal-ancla),
.legal-pie a {
  border-bottom: 1px solid rgba(242, 204, 107, 0.4);
  color: var(--color-miel-clara);
  transition: border-bottom-color 170ms ease;
}

.legal-clausula a:not(.legal-ancla):is(:hover, :focus-visible),
.legal-pie a:is(:hover, :focus-visible) {
  border-bottom-color: var(--color-miel-clara);
}

/*
 * Un documento legal se acaba; una página web, no. Decirlo ahorra el minuto de
 * seguir bajando por si quedaba algo.
 */
.legal-cierre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  max-width: var(--legal-aparato);
  margin-top: clamp(28px, 3.4vw, 44px);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 204, 107, var(--wan-opacidad-rotulo-min));
}

.legal-cierre span {
  flex: 1;
  max-width: 210px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 204, 107, 0.3));
}

.legal-cierre span:last-child {
  background: linear-gradient(90deg, rgba(242, 204, 107, 0.3), transparent);
}

/* ── La salida ──────────────────────────────────────────────────────────── */

.legal-salida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(38px, 5vw, 58px);
  border: 1px solid rgba(242, 204, 107, 0.26);
  border-radius: 26px 6px 26px 6px;
  background:
    radial-gradient(circle at 100% 0, rgba(213, 161, 58, 0.11), transparent 40%),
    linear-gradient(180deg, rgba(11, 10, 7, 0.9), rgba(4, 4, 3, 0.93));
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4);
}

.legal-rotulo-suelto {
  justify-content: flex-start;
}

.legal-rotulo-suelto span:first-child {
  width: 20px;
}

.legal-rotulo-suelto span:last-child {
  display: none;
}

.legal-salida h2 {
  margin-top: 11px;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 650;
  line-height: 1.1;
  color: var(--color-crema);
}

.legal-salida > div > p:last-child {
  max-width: 46ch;
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

.legal-salida > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 13px;
  border-radius: 16px 4px 16px 4px;
  background: linear-gradient(110deg, #f8d978, #e8aa31 74%, #cf8816);
  padding: 12px 17px 12px 12px;
  color: #090704;
  box-shadow: 0 18px 32px rgba(224, 165, 56, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.legal-salida > a:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 23px 40px rgba(224, 165, 56, 0.3);
}

.legal-salida-icono {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #0dbf59;
  color: #fff;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.16);
}

.legal-salida > a small {
  display: block;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(6, 39, 33, 0.64);
}

.legal-salida > a strong {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  font-weight: 780;
}

.legal-salida > a i {
  font-size: 1rem;
  font-style: normal;
}

/* ── El pie del documento ───────────────────────────────────────────────── */

.legal-pie {
  margin-top: clamp(24px, 3vw, 34px);
  font-size: 0.72rem;
  line-height: 1.75;
  text-align: center;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

/*
 * Sin costado libre, el índice vuelve a ser la placa de entrada. Plegable, eso
 * sí: doce cláusulas abiertas en un móvil son una pantalla entera antes de leer
 * la primera línea, y el resumen que queda arriba sigue diciendo dónde estás.
 */
@media (max-width: 1080px) {
  .legal-documento { --legal-ancho: 940px; }
  .legal-lectura { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .legal-cuerpo {
    --legal-medida: 40rem;
    --legal-aparato: 46rem;
    --legal-margen-der: clamp(18px, 3.4vw, 52px);
  }

  .legal-indice {
    position: static;
    max-height: none;
    overflow: visible;
    border-radius: 20px 5px 20px 5px;
    padding: 4px 15px 13px;
  }

  .legal-indice > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 14px;
    padding: 12px 2px;
    list-style: none;
    cursor: pointer;
  }

  .legal-indice > summary::-webkit-details-marker { display: none; }

  .legal-indice > summary small {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--wan-texto-minimo);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(242, 204, 107, 0.72);
    font-variant-numeric: lining-nums;
  }

  .legal-indice > summary span {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--color-crema);
  }

  .legal-indice > summary i {
    grid-row: 1 / 3;
    grid-column: 2;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid rgba(242, 204, 107, 0.72);
    border-bottom: 1.5px solid rgba(242, 204, 107, 0.72);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 200ms ease;
  }

  .legal-indice[open] > summary {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(242, 204, 107, 0.18);
    padding-bottom: 13px;
  }

  .legal-indice[open] > summary i { transform: translateY(1px) rotate(-135deg); }

  .legal-indice-rotulo { display: none; }

  /*
   * Sin margen no hay hilo: aquí el índice se lee de una vez y en dos columnas,
   * y una barra de avance junto a una sola de ellas señalaría en falso. Lo que
   * queda es dónde estás —la fila encendida— y el 01/05 del resumen.
   */
  .legal-indice-lista { padding-left: 2px; }
  .legal-indice-lista::before,
  .legal-indice-lista::after,
  .legal-indice-lista a[aria-current="true"]::before { display: none; }
  .legal-indice-lista a[aria-current="true"] { background: rgba(242, 204, 107, 0.09); }
}

@media (min-width: 620px) and (max-width: 1080px) {
  .legal-indice-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
}

@media (max-width: 760px) {
  /* El patrón se acerca: a 580 px en una pantalla estrecha solo se ve el hueco
     entre dos letras y deja de reconocerse el dibujo. */
  .legal-shell::before { background-size: 410px auto; filter: brightness(1.06) contrast(1.08) saturate(1.1); }
  .legal-ancho { width: min(calc(100% - 28px), var(--legal-ancho-movil, 620px)); }
  .legal-documento { --legal-ancho-movil: 660px; }
  .legal-hero { padding-block: 17px 24px; }
  .legal-hero :is(h1, h2) { font-size: clamp(1.9rem, 9.5vw, 2.65rem); }
  .legal-bajada { font-size: 0.77rem; }
  .legal-cuerpo {
    --legal-medida: none;
    --legal-aparato: none;
    --legal-margen: 16px;
    --legal-margen-der: 16px;
    --legal-aire: 24px;
    --legal-cifra: 40px;
    border-radius: 22px 6px 22px 6px;
  }
  .legal-cuerpo-marco { inset: 9px; }
  .legal-cuerpo-marco::before,
  .legal-cuerpo-marco::after { width: 22px; height: 22px; border-radius: 13px 0 0 0; }
  .legal-cuerpo-marco::after { border-radius: 0 0 13px 0; }
  .legal-clausula { gap: 13px; }
  .legal-numero span { width: 34px; height: 39px; font-size: 0.94rem; }

  /* En estrecho la cifra no cabe al final del filete: se pone encima del
     titular, que es donde en un contrato impreso va el epígrafe. */
  .legal-clausula-cabecera {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    margin-bottom: 13px;
    padding: 2px 0 11px;
  }
  .legal-clausula-marca { order: -1; }
  .legal-clausula h2 { font-size: clamp(1.3rem, 6.2vw, 1.6rem); }

  /* En una columna de trescientos y pico píxeles, el cuerpo de escritorio deja
     treinta y cuatro caracteres por línea y alarga la página sin ganar nada. */
  .legal-clausula p { font-size: 0.885rem; line-height: 1.8; }
  .legal-clausula-cabecera + p { font-size: clamp(0.94rem, 4vw, 1.02rem); line-height: 1.66; }
  .legal-clausula li { font-size: 0.865rem; line-height: 1.72; padding-left: 19px; }
  .legal-clausula ul { padding: 13px 15px 13px 16px; }
  .legal-cierre { gap: 11px; }
  .legal-salida { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .legal-salida > a,
  .legal-indice-lista a,
  .legal-indice > summary i,
  .legal-ancla::after { transition: none; }
}

/* ==========================================================================
 * El documento en papel
 *
 * Un texto legal se imprime: para guardarlo, para llevarlo a un tercero, para
 * subrayarlo. Y esto se imprimía en blanco, porque la regla de la hoja de
 * reclamación escondía el cuerpo de la página entera. Aquí sale lo que tiene
 * que salir —el titular, las cláusulas y sus números— en tinta negra sobre
 * blanco, sin la cabecera de la tienda, sin el índice, que en papel no lleva a
 * ninguna parte, y sin el botón de WhatsApp, que en papel no se pulsa.
 * ========================================================================== */
@media print {
  .legal-shell,
  .privacidad-superficie {
    background: #fff;
  }

  .legal-shell::before,
  .legal-shell::after,
  .legal-hero::before,
  .legal-cuerpo::before,
  .legal-cuerpo::after {
    display: none;
  }

  .legal-documento .legal-indice,
  .legal-documento .legal-salida {
    display: none;
  }

  .legal-documento { --legal-ancho: 100%; }
  .legal-lectura { display: block; }

  .legal-cuerpo {
    --legal-medida: none;
    --legal-aparato: none;
    border: 0;
    background: none;
    padding: 0;
    box-shadow: none;
  }

  .legal-hero :is(h1, h2),
  .legal-clausula h2,
  .legal-clausula strong { color: #000; }

  .legal-rotulo,
  .legal-fecha,
  .legal-indice-meta { color: #6b5a2e; }

  .legal-bajada,
  .legal-clausula :is(p, li) { color: #1a1a1a; }

  .legal-numero span {
    background: none;
    color: #000;
  }

  .legal-clausula { break-inside: avoid; }
  .legal-clausula + .legal-clausula { border-image: none; border-top-color: #ccc; }
  .legal-cuerpo-marco { display: none; }
  .legal-clausula-cabecera { border-bottom-color: #ccc; }
  .legal-clausula-marca,
  .legal-cierre { color: #6b5a2e; }
  .legal-cierre span { background: #ccc; }
  .legal-clausula ul { border-left-color: #bbb; background: none; }
  .legal-clausula li::before { background: #8a6f2a; }
  .legal-ancla::after { content: none; }
  .legal-pie { color: #444; }
}

/* ==========================================================================
 * El libro de reclamaciones
 *
 * Quien llega aquí llega enfadado, y un formulario largo con un enfado encima
 * se abandona. De ahí los tres bloques con nombre —quién reclama, qué compró,
 * qué pasó—: no acortan el formulario, pero lo parten en tres cosas que se
 * pueden terminar. Y de ahí que lo opcional lleve escrito «opcional», para que
 * nadie se pare a buscar un dato de un pedido de hace tres semanas.
 * ========================================================================== */

.reclamo-hero {
  padding-top: clamp(18px, 3vw, 30px);
}

.reclamo-emblema {
  display: grid;
  width: 66px;
  height: 76px;
  margin: 0 auto 20px;
  place-items: center;
  background: linear-gradient(160deg, rgba(242, 204, 107, 0.2), rgba(242, 204, 107, 0.05));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--color-miel-clara);
}

.reclamo-cuerpo {
  margin-top: clamp(26px, 3.6vw, 40px);
}

.reclamo-hoja {
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(242, 204, 107, 0.24);
  border-radius: 28px 7px 28px 7px;
  background:
    radial-gradient(circle at 100% 0, rgba(213, 161, 58, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(11, 10, 7, 0.91), rgba(4, 4, 3, 0.94));
  padding: clamp(22px, 3.4vw, 38px);
  box-shadow: 0 34px 78px rgba(0, 0, 0, 0.46);
}

.reclamo-hoja fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  border: 0;
  padding: 0;
}

.reclamo-hoja legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--color-miel);
}

/* Reclamo o queja: dos puertas, no un desplegable. La diferencia entre las dos
   no la sabe nadie de memoria, así que va escrita debajo de cada una. */
.reclamo-tipo > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reclamo-tipo button {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(242, 204, 107, 0.24);
  border-radius: 16px 4px 16px 4px;
  background: rgba(5, 5, 4, 0.5);
  padding: 14px 16px;
  text-align: left;
  transition: border-color 170ms ease, background 170ms ease;
}

.reclamo-tipo button strong {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-weight: 650;
  color: var(--color-crema);
}

.reclamo-tipo button small {
  font-size: 0.7rem;
  line-height: 1.5;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

.reclamo-tipo button:hover {
  border-color: rgba(242, 204, 107, 0.45);
}

.reclamo-tipo button[aria-pressed="true"] {
  border-color: rgba(242, 204, 107, 0.72);
  background: rgba(242, 204, 107, 0.09);
}

.reclamo-tipo button[aria-pressed="true"] strong {
  color: var(--color-miel-clara);
}

.reclamo-campo {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.reclamo-ancho {
  grid-column: 1 / -1;
}

.reclamo-documento-tipo {
  max-width: 130px;
}

.reclamo-campo > span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(246, 239, 224, 0.68);
}

.reclamo-campo > span i {
  margin-left: 5px;
  font-size: var(--wan-texto-minimo);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 239, 224, var(--wan-opacidad-rotulo-min));
}

.reclamo-campo :is(input, select, textarea) {
  width: 100%;
  border: 1px solid rgba(242, 204, 107, 0.22);
  border-radius: 12px 3px 12px 3px;
  background: rgba(2, 2, 2, 0.55);
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--color-crema);
  transition: border-color 170ms ease, background 170ms ease;
}

.reclamo-campo textarea {
  resize: vertical;
  min-height: 84px;
}

.reclamo-campo :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: rgba(242, 204, 107, 0.7);
  background: rgba(242, 204, 107, 0.05);
}

.reclamo-campo :is(input, textarea)[data-malo] {
  border-color: #d67a8f;
  background: rgba(183, 70, 97, 0.12);
}

.reclamo-campo input::placeholder,
.reclamo-campo textarea::placeholder {
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
}

.reclamo-consentimiento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border-top: 1px solid rgba(242, 204, 107, 0.16);
  padding-top: clamp(18px, 2.4vw, 24px);
  cursor: pointer;
}

.reclamo-consentimiento input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: #e0a538;
}

.reclamo-consentimiento strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(246, 239, 224, 0.88);
}

.reclamo-consentimiento small {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

.reclamo-consentimiento a {
  border-bottom: 1px solid rgba(242, 204, 107, 0.4);
  color: var(--color-miel-clara);
}

.reclamo-error {
  border: 1px solid rgba(214, 122, 143, 0.42);
  border-radius: 14px;
  background: rgba(122, 33, 59, 0.2);
  padding: 12px 15px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #f0c3cd;
}

.reclamo-error a {
  border-bottom: 1px solid rgba(240, 195, 205, 0.5);
  color: #fff;
}

.reclamo-turnstile .turnstile-wan-estado {
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
}

.reclamo-turnstile[data-estado="verificado"] .turnstile-wan-estado {
  color: var(--color-miel-clara);
}

.reclamo-turnstile:is([data-estado="error"], [data-estado="no_disponible"])
  .turnstile-wan-estado {
  color: #f0c3cd;
}

.reclamo-enviar {
  justify-self: start;
  border-radius: 16px 4px 16px 4px;
  background: linear-gradient(110deg, #f8d978, #e8aa31 74%, #cf8816);
  padding: 14px 30px;
  font-size: 0.86rem;
  font-weight: 780;
  color: #090704;
  box-shadow: 0 18px 32px rgba(224, 165, 56, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.reclamo-enviar:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 23px 40px rgba(224, 165, 56, 0.3);
}

.reclamo-enviar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.reclamo-pie {
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

/* ── El acuse ───────────────────────────────────────────────────────────── */

.reclamo-recibo {
  border: 1px solid rgba(242, 204, 107, 0.34);
  border-radius: 28px 7px 28px 7px;
  background:
    radial-gradient(circle at 0 0, rgba(213, 161, 58, 0.13), transparent 42%),
    rgba(5, 5, 4, 0.68);
  padding: clamp(26px, 4vw, 42px);
}

.reclamo-recibo h2 {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 650;
  line-height: 1.1;
  color: var(--color-crema);
}

.reclamo-codigo {
  margin: 18px 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-miel-clara);
  font-variant-numeric: lining-nums;
}

.reclamo-recibo p:not(.reclamo-codigo):not(.legal-rotulo) {
  max-width: 52ch;
  font-size: 0.84rem;
  line-height: 1.75;
  color: rgba(246, 239, 224, 0.66);
  text-wrap: pretty;
}

.reclamo-recibo strong {
  color: rgba(246, 239, 224, 0.92);
}

.reclamo-recibo-nota {
  margin-top: 14px;
  font-size: 0.74rem !important;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min)) !important;
}

@media (max-width: 640px) {
  .reclamo-hoja fieldset,
  .reclamo-tipo > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .reclamo-documento-tipo { max-width: none; }
  .reclamo-enviar { justify-self: stretch; text-align: center; }
}


/* ── La copia que se lleva el consumidor ────────────────────────────────── */

/*
 * Un número de hoja no es una copia.
 *
 * El reglamento pide que quien reclama se lleve constancia de lo que escribió,
 * no solo del correlativo. Así que debajo del recibo va la hoja entera, y el
 * botón la manda al papel o al PDF. Se dibuja aquí en oscuro, como el resto del
 * sitio, y en la impresión se vuelve tinta negra sobre blanco: una hoja legal
 * impresa en negro gasta un cartucho y se lee peor.
 */
.reclamo-recibo-copia {
  margin-top: 14px;
}

.reclamo-imprimir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 15px;
  background: linear-gradient(125deg, #f5d16f, #dfa231 62%, #bd7e20);
  padding: 12px 20px;
  font-size: 0.76rem;
  font-weight: 850;
  color: #0d0b07;
  box-shadow: 0 18px 38px -22px rgba(224, 165, 56, 0.8);
  cursor: pointer;
  transition: transform 170ms ease;
}

.reclamo-imprimir:hover { transform: translateY(-2px); }

.reclamo-hoja-impresa {
  margin-top: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(242, 204, 107, 0.2);
  border-radius: 18px 5px 18px 5px;
  background: rgba(3, 3, 2, 0.6);
  padding: clamp(20px, 3vw, 30px);
}

.reclamo-hoja-impresa header p {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo) !important;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-miel) !important;
}

.reclamo-hoja-impresa h3 {
  margin-top: 7px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--color-miel-clara);
  font-variant-numeric: lining-nums;
}

.reclamo-hoja-impresa header small {
  display: block;
  margin-top: 5px;
  font-size: 0.7rem;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
}

.reclamo-hoja-impresa dl {
  margin-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid rgba(242, 204, 107, 0.14);
  padding-top: clamp(14px, 2vw, 18px);
}

.reclamo-hoja-impresa dl > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 6px 0;
}

.reclamo-hoja-impresa dt {
  font-size: var(--wan-texto-minimo);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 239, 224, var(--wan-opacidad-rotulo-min));
}

.reclamo-hoja-impresa dd {
  font-size: 0.83rem;
  line-height: 1.65;
  color: rgba(246, 239, 224, 0.86);
  overflow-wrap: break-word;
}

.reclamo-hoja-impresa footer {
  margin-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid rgba(242, 204, 107, 0.14);
  padding-top: 14px;
  font-size: 0.7rem;
  line-height: 1.7;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
}

@media (max-width: 560px) {
  .reclamo-hoja-impresa dl > div { grid-template-columns: minmax(0, 1fr); }
}

/*
 * La impresión.
 *
 * Se oculta todo y se deja ver solo la hoja: quien imprime esto lo hace para
 * guardarlo o para enseñarlo, y una cabecera con el menú de la tienda encima de
 * una constancia la convierte en un folleto.
 */
@media print {
  body:has(.reclamo-hoja-impresa) * { visibility: hidden; }
  .reclamo-hoja-impresa,
  .reclamo-hoja-impresa * { visibility: visible; }

  .reclamo-hoja-impresa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    border: 0;
    background: #fff;
    padding: 0;
    color: #000;
  }

  .reclamo-hoja-impresa h3,
  .reclamo-hoja-impresa header p { color: #000; }
  .reclamo-hoja-impresa header small,
  .reclamo-hoja-impresa dt,
  .reclamo-hoja-impresa dd,
  .reclamo-hoja-impresa footer { color: #1a1a1a; }
  .reclamo-hoja-impresa dl,
  .reclamo-hoja-impresa footer { border-color: #bbb; }
}


/* ── 404 y fallo ────────────────────────────────────────────────────────────
 *
 * Las dos páginas que nadie quiere ver. Usan el mismo papel que las legales
 * —el héroe, el rótulo, la salida por WhatsApp— porque no son un accidente
 * fuera de la casa: son la casa diciendo que algo no salió.
 */

.perdida-hero { padding-bottom: clamp(18px, 2.4vw, 26px); }

.perdida-buscador {
  display: grid;
  grid-template-columns: minmax(190px, 0.5fr) minmax(300px, 1fr);
  align-items: end;
  gap: clamp(14px, 2vw, 28px);
  margin-bottom: clamp(18px, 2.8vw, 28px);
  border: 1px solid rgba(246, 206, 106, 0.32);
  border-radius: 22px 7px 22px 7px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 8% 0%, rgba(224, 165, 56, 0.14), transparent 40%),
    rgba(7, 6, 4, 0.84);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.perdida-buscador label { display: grid; gap: 5px; }

.perdida-buscador label small {
  font-family: var(--font-sans);
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-miel);
}

.perdida-buscador label span {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.7vw, 1.8rem);
  font-weight: 700;
  color: var(--color-crema);
}

.perdida-buscador > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 54px;
  border: 1px solid rgba(246, 206, 106, 0.28);
  border-radius: 999px;
  background: #050504;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.perdida-buscador > div:focus-within {
  border-color: var(--color-miel-clara);
  box-shadow: 0 0 0 3px rgba(246, 206, 106, 0.13);
}

.perdida-buscador input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 22px;
  background: transparent;
  font: 600 0.94rem/1 var(--font-sans);
  color: var(--color-crema);
}

.perdida-buscador input::placeholder { color: rgba(248, 244, 233, var(--wan-opacidad-lectura-min)); }

.perdida-buscador button {
  border: 0;
  border-radius: 999px;
  padding: 0 24px;
  background: linear-gradient(115deg, #f6ce6a, #e0a538 64%, #c98f24);
  font: 800 0.86rem/1 var(--font-sans);
  color: #171107;
  cursor: pointer;
}

.perdida-buscador button span { margin-left: 7px; }

/* El aviso del carné, en el sitio donde primero se mira. */
.perdida-carne {
  border: 1px solid rgba(246, 206, 106, 0.28);
  border-left: 3px solid var(--color-miel);
  border-radius: 16px;
  padding: clamp(14px, 2.6vw, 20px) clamp(16px, 3vw, 24px);
  background: rgba(224, 165, 56, 0.055);
}

@media (max-width: 680px) {
  .perdida-buscador { grid-template-columns: 1fr; }
  .perdida-buscador > div { grid-template-columns: 1fr; border-radius: 16px; }
  .perdida-buscador input { min-height: 52px; }
  .perdida-buscador button { min-height: 48px; border-radius: 12px; margin: 0 5px 5px; }
}

.perdida-carne p {
  margin: 0;
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(248, 244, 233, 0.76);
}

.perdida-carne strong { color: var(--color-crema); }

.perdida-carne a {
  border-bottom: 1px solid rgba(246, 206, 106, 0.5);
  color: var(--color-miel-clara);
}

.perdida-carne a:hover { border-bottom-color: var(--color-miel-clara); }

/* Las salidas: cuatro puertas, no una lista de enlaces. */
.perdida-salidas {
  display: grid;
  /* Dos y dos, no tres y una huérfana: con 240 px de mínimo caben tres en
     escritorio y la cuarta se queda sola en su fila. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(12px, 1.8vw, 16px);
  margin-top: clamp(22px, 3.4vw, 34px);
}

.perdida-salidas a {
  position: relative;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(246, 206, 106, 0.2);
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 21px) clamp(46px, 5vw, 52px) clamp(16px, 2.6vw, 21px) clamp(16px, 2.6vw, 21px);
  background: linear-gradient(160deg, rgba(224, 165, 56, 0.06), rgba(3, 3, 3, 0.5));
  transition: border-color 190ms ease, transform 190ms ease, background 190ms ease;
}

.perdida-salidas a:is(:hover, :focus-visible) {
  border-color: rgba(246, 206, 106, 0.56);
  background: linear-gradient(160deg, rgba(224, 165, 56, 0.12), rgba(3, 3, 3, 0.5));
  transform: translateY(-2px);
}

.perdida-salidas small {
  font-family: var(--font-sans);
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-miel);
}

.perdida-salidas strong {
  font-family: var(--font-serif);
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-crema);
}

.perdida-salidas span {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(248, 244, 233, var(--wan-opacidad-lectura-min));
}

.perdida-salidas i {
  position: absolute;
  top: 50%;
  right: clamp(16px, 2.6vw, 21px);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(246, 206, 106, 0.34);
  border-radius: 50%;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--color-miel-clara);
  transform: translateY(-50%);
  transition: transform 190ms ease, border-color 190ms ease;
}

.perdida-salidas a:is(:hover, :focus-visible) i {
  border-color: var(--color-miel-clara);
  transform: translateY(-50%) translateX(3px);
}

/* ── La página del fallo ───────────────────────────────────────────────────
 * Centrada y sola: no hay cabecera que la sostenga, a propósito.
 */
.fallo-shell {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: clamp(40px, 8vw, 90px);
}

.fallo-caja {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 560px;
  text-align: center;
}

.fallo-caja img { margin-bottom: 6px; }

.fallo-caja h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6.4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-crema);
}

.fallo-caja h1 em { font-style: normal; color: var(--color-miel-clara); }

.fallo-caja .legal-bajada { max-width: 44ch; }

.fallo-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.fallo-acciones button {
  border: 0;
  border-radius: 999px;
  padding: 14px 30px;
  background: linear-gradient(115deg, #f6ce6a, #e0a538 62%, #c98f24);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 800;
  color: #14110b;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.fallo-acciones button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(224, 165, 56, 0.26);
}

.fallo-acciones a {
  display: grid;
  align-items: center;
  border: 1px solid rgba(246, 206, 106, 0.34);
  border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-miel-clara);
  transition: border-color 180ms ease, background 180ms ease;
}

.fallo-acciones a:hover {
  border-color: var(--color-miel-clara);
  background: rgba(224, 165, 56, 0.08);
}

.fallo-digest {
  margin: 14px 0 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  letter-spacing: 0.08em;
  color: rgba(248, 244, 233, var(--wan-opacidad-lectura-min));
}

.perdida-salidas a:focus-visible,
.fallo-acciones :is(button, a):focus-visible {
  outline: 3px solid var(--color-miel-clara);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .perdida-salidas a,
  .perdida-salidas i,
  .fallo-acciones button,
  .fallo-acciones a { transition: none; }

  .perdida-salidas a:hover,
  .fallo-acciones button:hover { transform: none; }

  .perdida-salidas a:hover i { transform: translateY(-50%); }
}