/* ============================================================
   Bloque 6B · documento legal, tabla de envíos, aviso de compra y acuse de solicitud.

   Nada de esto existía en el prototipo, que solo tenía Home. No se inventa ningún valor: los
   colores, las tipografías, el contenedor y el ritmo vertical salen de tokens.css y de las
   variables de las páginas interiores (--b3-pg-section), que es el mismo ritmo aprobado para la
   ficha de producto y las páginas comerciales.

   Dos decisiones de forma que son decisiones de fondo:

   1. **El documento legal se lee a 38rem**, no al ancho del contenedor. Una política a 84rem es
      una política que nadie termina de leer: la línea se hace tan larga que el ojo pierde el
      renglón. 38rem deja entre 65 y 75 caracteres, que es la medida de lectura.

   2. **La tabla de envíos sigue siendo una tabla en móvil.** Se apila, pero no se convierte en
      cajas: el marcado de tabla se conserva y cada celda lleva delante el nombre de su columna
      (desde data-col), para que quien use lector de pantalla siga sabiendo que ese importe es el
      de ese servicio.
   ============================================================ */

/* ============================================================
   Documento legal
   ============================================================ */

.b3-pg-politica {
  padding-block: var(--b3-pg-section);
  background: var(--b3-white);
  color: var(--b3-ink);
}

.b3-pg-politica__caja {
  /* Medida de lectura. Ver la nota 1 de la cabecera. */
  max-width: calc(38rem + var(--b3-gutter) * 2);
}

.b3-pg-politica__intro {
  font-size: var(--b3-fs-lead);
  line-height: 1.55;
  color: var(--b3-ink);
  margin: 0 0 2.5rem;
}

/* Índice: una lista numerada de anclas, no una caja decorativa. */
.b3-pg-politica__indice {
  border-top: 1px solid var(--b3-line);
  border-bottom: 1px solid var(--b3-line);
  padding-block: 1.5rem;
  margin-bottom: 2.5rem;
}

.b3-pg-politica__indice-titulo {
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
  margin: 0 0 0.875rem;
}

.b3-pg-politica__indice-lista {
  margin: 0;
  padding-left: 1.5rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--b3-fs-small);
}

.b3-pg-politica__indice-lista::marker,
.b3-pg-politica__indice-lista li::marker {
  color: var(--b3-ink-muted);
}

.b3-pg-politica__indice-lista a {
  color: var(--b3-ink);
  text-decoration-color: var(--b3-line);
  text-underline-offset: 0.25em;
}

.b3-pg-politica__indice-lista a:hover,
.b3-pg-politica__indice-lista a:focus-visible {
  text-decoration-color: currentColor;
}

.b3-pg-politica__sec + .b3-pg-politica__sec {
  margin-top: 2.5rem;
}

.b3-pg-politica__titulo {
  font-family: var(--b3-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.875rem;
  /*
   * La cabecera del sitio es fija: sin esto, al llegar desde el índice el título del apartado
   * queda tapado por ella. base.css usa el mismo criterio para el ancla de Watch Batteries.
   */
  scroll-margin-top: 6rem;
}

.b3-pg-politica__sec p {
  margin: 0 0 1rem;
  line-height: 1.65;
  color: var(--b3-ink);
}

.b3-pg-politica__sec p:last-child {
  margin-bottom: 0;
}

.b3-pg-politica__lista {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
  line-height: 1.6;
}

.b3-pg-politica__lista li::marker {
  color: var(--b3-champagne-deep);
}

.b3-pg-politica__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  font-size: var(--b3-fs-small);
}

.b3-pg-politica__enlace {
  color: var(--b3-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--b3-champagne);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.b3-pg-politica__enlace:hover,
.b3-pg-politica__enlace:focus-visible {
  text-decoration-color: var(--b3-ink);
}

/* Un destino que todavía no existe se lee como texto, no como enlace roto. */
.b3-pg-politica__enlace.b3-pendiente {
  color: var(--b3-ink-muted);
  text-decoration: none;
  font-weight: 500;
}

.b3-pg-politica__fecha {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--b3-line);
  font-size: var(--b3-fs-label);
  color: var(--b3-ink-muted);
}

/* ============================================================
   Tabla de envíos
   ============================================================ */

.b3-pg-envios {
  padding-block: var(--b3-pg-section);
}

.b3-pg-envios--blanco {
  background: var(--b3-white);
}

.b3-pg-envios__caja {
  max-width: calc(52rem + var(--b3-gutter) * 2);
}

.b3-pg-envios__intro {
  font-size: var(--b3-fs-lead);
  line-height: 1.55;
  margin: 0.75rem 0 2rem;
  color: var(--b3-ink);
}

.b3-tabla--envios {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--b3-fs-body);
}

.b3-tabla__caption {
  /*
   * El resumen de la tabla existe para los lectores de pantalla: en pantalla lo dice ya la
   * entradilla, y repetirlo encima de la tabla sería decir dos veces lo mismo.
   */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.b3-tabla--envios th,
.b3-tabla--envios td {
  text-align: left;
  vertical-align: top;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--b3-line);
}

.b3-tabla--envios thead th {
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
  border-bottom-color: var(--b3-ink);
}

.b3-tabla--envios tbody th {
  font-weight: 600;
  color: var(--b3-ink);
}

.b3-pg-envios__carrier {
  display: block;
  font-weight: 500;
  font-size: var(--b3-fs-label);
  color: var(--b3-ink-muted);
  margin-top: 0.125rem;
}

.b3-pg-envios__rango {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}

.b3-tabla--envios td:last-child {
  color: var(--b3-ink-muted);
  font-size: var(--b3-fs-small);
  line-height: 1.55;
}

.b3-pg-envios__gratis {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 1.75rem 0 0;
  padding: 1.125rem 1.25rem;
  background: var(--b3-ivory);
  border-left: 3px solid var(--b3-champagne);
  line-height: 1.55;
}

.b3-pg-envios__gratis .b3-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--b3-champagne-deep);
}

.b3-pg-envios__nota {
  margin: 1.5rem 0 0;
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink-muted);
}

/*
 * Móvil: la tabla se apila sin dejar de ser tabla. Ver la nota 2 de la cabecera.
 */
@media (max-width: 599px) {
  .b3-tabla--envios thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .b3-tabla--envios tr {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--b3-line);
  }

  .b3-tabla--envios tr:last-child {
    border-bottom: 0;
  }

  .b3-tabla--envios th,
  .b3-tabla--envios td {
    display: block;
    padding: 0 0 0.5rem;
    border-bottom: 0;
  }

  .b3-tabla--envios td:not(:empty)::before {
    content: attr(data-col) ': ';
    font-size: var(--b3-fs-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b3-ink-muted);
  }

  .b3-pg-envios__rango {
    white-space: normal;
  }
}

/* ============================================================
   Aviso de carrito y pago
   ============================================================ */

.b3-aviso-comercio {
  padding-block: 0 var(--b3-pg-section);
}

.b3-aviso-comercio > .b3-container {
  max-width: calc(52rem + var(--b3-gutter) * 2);
}

/*
 * Dentro del carrito y del pago el aviso ya va en un contenedor del sitio: el suyo no vuelve a
 * poner la calle. El recuadro y su borde quedan intactos, porque son de la caja de dentro.
 */
.b3-comercio__cuerpo .b3-aviso-comercio > .b3-container {
  padding-inline: 0;
  max-width: none;
}

.b3-aviso-comercio__caja {
  padding: 1.5rem;
  border: 1px solid var(--b3-line);
  border-left: 3px solid var(--b3-champagne);
  background: var(--b3-warm-white);
}

.b3-aviso-comercio__titulo {
  font-family: var(--b3-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--b3-ink);
}

.b3-aviso-comercio__punto {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 0.875rem;
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink);
}

.b3-aviso-comercio__punto .b3-icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--b3-champagne-deep);
}

.b3-aviso-comercio__llamar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.25rem 0;
}

.b3-aviso-comercio__tel {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--b3-ink);
}

.b3-aviso-comercio__legal-titulo {
  margin: 1.25rem 0 0.5rem;
  font-size: var(--b3-fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
}

.b3-aviso-comercio__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--b3-fs-small);
}

.b3-aviso-comercio__enlace {
  color: var(--b3-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--b3-champagne);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.b3-aviso-comercio__enlace:hover,
.b3-aviso-comercio__enlace:focus-visible {
  text-decoration-color: var(--b3-ink);
}

.b3-aviso-comercio__enlace.b3-pendiente {
  color: var(--b3-ink-muted);
  text-decoration: none;
  font-weight: 500;
}

/* ============================================================
   Solicitud: ayuda de campo, señuelo y acuse de recibo
   ============================================================ */

/*
 * Foco del área de texto de los formularios interiores.
 *
 * El foco global de B3 cubre `a, button, input, select` y deja fuera `textarea`, que no existía en
 * el prototipo. Sin esto, el campo «Anything else we should know?» se queda con el contorno por
 * omisión del navegador: se ve, pero no es el mismo del resto del formulario, y en un formulario
 * que ahora **sí envía** la diferencia se nota. `comercio.css` ya hace lo mismo para las notas del
 * pedido, con este mismo criterio.
 */
.b3 .b3-field textarea:focus-visible {
  outline: 2px solid var(--b3-focus);
  outline-offset: 3px;
}

.b3-field__ayuda {
  margin: 0.25rem 0 0.5rem;
  font-size: var(--b3-fs-label);
  line-height: 1.5;
  color: var(--b3-ink-muted);
}

/*
 * Dos campos en la misma fila, con sus casillas a la misma altura.
 *
 * «Preferred date» y «Preferred time» van emparejados y sus ayudas ocupan distinto número de
 * líneas, así que una casilla quedaba más alta que la otra y la fila se veía desigual. Los dos
 * campos ya tienen la misma altura —son hermanos de una fila flexible—, de modo que basta con
 * empujar el control al fondo de cada uno para que se alineen, lleve ayuda o no.
 */
.b3-form__row .b3-field {
  display: flex;
  flex-direction: column;
}

.b3-form__row .b3-field > :is(input, select, textarea) {
  margin-top: auto;
}

/*
 * El campo señuelo contra robots.
 *
 * No se usa `display: none` ni `hidden`: hay robots que precisamente buscan esos campos y los
 * dejan en blanco. Se saca de la pantalla, que lo hace invisible para una persona y sigue siendo
 * un campo normal para un programa. No es focalizable (`tabindex="-1"`) ni lo anuncia el lector de
 * pantalla (`aria-hidden` en su contenedor), así que no estorba a nadie que navegue con teclado.
 */
.b3-form__senuelo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.b3-form-exito {
  background: var(--b3-white);
  border: 1px solid var(--b3-line);
  border-top: 3px solid var(--b3-champagne);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.b3-form-exito:focus-visible {
  outline: 2px solid var(--b3-focus);
  outline-offset: 3px;
}

.b3-form-exito__icono {
  width: 2rem;
  height: 2rem;
  color: var(--b3-champagne-deep);
  stroke-width: 1.8;
}

.b3-form-exito__titulo {
  font-family: var(--b3-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0.75rem 0 0.75rem;
  color: var(--b3-ink);
}

.b3-form-exito__texto {
  margin: 0 0 0.875rem;
  font-size: var(--b3-fs-lead);
  line-height: 1.55;
  color: var(--b3-ink);
}

/*
 * La nota es la frase que importa: dice que no se ha reservado nada. Va destacada a propósito,
 * no como letra pequeña.
 */
.b3-form-exito__nota {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--b3-ivory);
  border-left: 3px solid var(--b3-champagne-deep);
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink);
}

.b3-form-exito__tel {
  margin: 0;
}

.b3-form-exito__tel a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--b3-ink);
  text-decoration-color: var(--b3-champagne);
  text-underline-offset: 0.3em;
}

.b3-form-exito__tel .b3-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* El botón de envío, mientras la página recarga. */
.b3-form__submit[aria-disabled='true'] {
  opacity: 0.6;
  pointer-events: none;
}

/*
 * El acuse sobre fondo oscuro: el cierre del Home.
 *
 * Mismo panel y misma estructura que en las páginas interiores; solo cambian los colores, porque
 * la franja es negra. Se usan los tokens que B3 ya tiene para contextos oscuros —`--b3-on-night`,
 * `--b3-line-dark`, `--b3-focus-dark`—, los mismos que usan ahí los botones y los campos, así que
 * el contraste es el que el diseño ya tenía aprobado.
 *
 * Ocupa exactamente el sitio del formulario, de modo que la columna no cambia de ancho ni la
 * franja de altura al pasar de uno a otro.
 */
.b3-form-exito--oscuro {
  background: rgb(244 239 231 / 0.06);
  border-color: var(--b3-line-dark);
  border-top-color: var(--b3-champagne);
  color: var(--b3-on-night);
}

/*
 * No hace falta alinearlo: `.b3-final__grid` ya centra sus columnas (`align-items: center`), así
 * que el acuse queda centrado en la suya igual que lo estaba el formulario, y la altura de la
 * franja la sigue marcando la columna de la izquierda. Se probó a añadir `align-self: center` y
 * no cambiaba nada, como era de esperar.
 */

.b3-form-exito--oscuro .b3-form-exito__icono {
  color: var(--b3-champagne);
}

.b3-form-exito--oscuro .b3-form-exito__titulo,
.b3-form-exito--oscuro .b3-form-exito__texto {
  color: var(--b3-on-night);
}

.b3-form-exito--oscuro .b3-form-exito__nota {
  background: rgb(244 239 231 / 0.07);
  border-left-color: var(--b3-champagne);
  color: var(--b3-on-night-muted);
}

.b3-form-exito--oscuro .b3-form-exito__tel a {
  color: var(--b3-on-night);
  text-decoration-color: var(--b3-champagne);
}

.b3-form-exito--oscuro:focus-visible {
  outline-color: var(--b3-focus-dark);
}