/* ==========================================================================
   PERFUMASTE — PAGINAS LEGALES E INFORMATIVAS

   Terminos y condiciones, Envios, Cambios y devoluciones.
   Se carga despues de principal.css. Todo va con el prefijo `.leg`.

   ⚠️ ESTE ARCHIVO NO USA `@layer`, Y ES DELIBERADO.

   critico.css declara el orden `reset, tokens, base, chrome, layout,
   components, views` y principal.css escribe dentro de esas capas. En la
   cascada de CSS, lo NO estratificado gana a todo lo estratificado. Escribir
   aqui fuera de capa evita tener que subir la especificidad de cada selector
   para ganarle a `.cat__seo` o a lo que encole un plugin. A cambio, la
   disciplina es estricta: solo clases con prefijo `.leg`, cero selectores de
   etiqueta sueltos.

   REGISTRO: filete de 1px, aire y tipografia. Ni una sombra, ni un degradado,
   ni un icono. Un contrato no se decora.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */

.leg__cab {
  max-width: 68ch;
  padding-bottom: var(--s5);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--hilo);
}

.leg__entradilla {
  margin-top: var(--s4);
  color: var(--humo);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   REJILLA: INDICE + CUERPO

   El indice a la izquierda solo aparece cuando hay sitio de verdad. Por debajo
   de 1000px se convierte en una lista al principio del documento, que es lo que
   funciona en movil: nadie quiere una columna lateral de 13 entradas ocupando
   la primera pantalla del telefono.
   -------------------------------------------------------------------------- */

.leg { display: block; }

@media (min-width: 1000px) {
  .leg {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
  }
}

.leg__cuerpo { min-width: 0; }

/* --------------------------------------------------------------------------
   INDICE DE ANCLAS
   -------------------------------------------------------------------------- */

.leg__idx {
  margin-bottom: var(--s7);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--hilo);
}

@media (min-width: 1000px) {
  .leg__idx {
    /* ⚠️ `--cabecera` es la altura REAL de la cabecera pegajosa, medida en
       principal.css. Sin este desfase el indice se mete debajo del buscador. */
    position: sticky;
    top: calc(var(--cabecera) + var(--s5));
    max-height: calc(100vh - var(--cabecera) - var(--s7));
    overflow-y: auto;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-right: var(--s4);
    border-bottom: 0;
    border-right: 1px solid var(--hilo);
  }
}

.leg__idx-t {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: var(--s4);
}

.leg__idx-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.leg__idx-l a {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: var(--s2);
  align-items: baseline;
  padding: 5px 0;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.leg__idx-l a:hover { color: var(--laca); }

.leg__idx-n {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .06em;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   CONTROL "ABRIR TODO"
   -------------------------------------------------------------------------- */

.leg__ctrl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.leg__todo {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  padding: 4px 0;
  border-bottom: 1px solid var(--hilo);
  transition: color .15s ease, border-color .15s ease;
}

.leg__todo:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.leg__todo[hidden] { display: none; }

.leg__ctrl-n {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   ACORDEONES — <details>/<summary> NATIVOS

   Sin JavaScript de por medio. Lo unico que hay que hacer es quitarle al
   navegador su triangulito y poner el nuestro.
   -------------------------------------------------------------------------- */

.leg__ac {
  border-top: 1px solid var(--hilo);
  scroll-margin-top: calc(var(--cabecera) + var(--s4));
}

.leg__ac:last-of-type { border-bottom: 1px solid var(--hilo); }

/* ⚠️ HACEN FALTA LAS DOS REGLAS. Chrome y Firefox modernos usan `::marker`;
   Safari sigue pintando el triangulo con `::-webkit-details-marker`. Quitar
   solo una deja el triangulo a la vista en la mitad de los telefonos. */
.leg__ac > summary { list-style: none; }
.leg__ac > summary::-webkit-details-marker { display: none; }
.leg__ac > summary::marker { content: ''; }

.leg__ac-t {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) 1.5em;
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s5) 0;
  cursor: pointer;
  transition: color .15s ease;
}

.leg__ac-t:hover { color: var(--laca); }

.leg__ac-n {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .06em;
  color: var(--humo);
}

.leg__ac-h {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
}

/* El signo: dos filetes de 1px que se cruzan. Al abrir, el vertical desaparece
   y queda el menos. Mismo grosor que el resto de lineas del sistema. */
.leg__ac-s {
  position: relative;
  width: 11px;
  height: 11px;
  align-self: center;
  justify-self: end;
}

.leg__ac-s::before,
.leg__ac-s::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--humo);
}

.leg__ac-s::after { transform: rotate(90deg); transition: opacity .18s ease; }
.leg__ac[open] .leg__ac-s::after { opacity: 0; }

.leg__ac[open] > .leg__ac-t { color: var(--tinta); }

/* --------------------------------------------------------------------------
   PROSA LEGAL

   Medida de linea de 60-75 caracteres. Un contrato a 1.100px de ancho no lo
   termina nadie.
   -------------------------------------------------------------------------- */

.leg__prosa {
  max-width: 68ch;
  padding-bottom: var(--s6);
  color: var(--tinta);
  font-size: .95rem;
  line-height: 1.68;
  /* Los NIT, los correos y las URL no se parten solos y desbordan a 390px. */
  overflow-wrap: anywhere;
}

.leg__prosa > * + * { margin-top: var(--s4); }
.leg__prosa strong, .leg__prosa b { font-weight: 600; }
.leg__prosa em { font-style: italic; }

.leg__prosa h2,
.leg__prosa h3,
.leg__prosa h4 {
  margin-top: var(--s6);
  font-family: var(--dato);
  font-size: var(--fs-dato);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  line-height: 1.5;
}

.leg__prosa h3 strong,
.leg__prosa h4 strong { font-weight: 400; }

.leg__prosa ul,
.leg__prosa ol { padding-left: 1.15em; }
.leg__prosa li + li { margin-top: var(--s2); }
.leg__prosa li::marker { color: var(--humo); }

/* En el original hay parrafos DENTRO de cada <li>: sin esto cada viñeta abre
   con un margen de 16px y la lista se lee como bloques sueltos. */
.leg__prosa li > p { margin: 0; }
.leg__prosa li > p + p { margin-top: var(--s2); }

.leg__prosa a { color: var(--tinta); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--hilo); }
.leg__prosa a:hover { text-decoration-color: var(--laca); color: var(--laca); }

.leg__prosa blockquote {
  padding-left: var(--s4);
  border-left: 1px solid var(--hilo);
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   SECCIONES DE ENVIOS Y DEVOLUCIONES

   Ahi no hay acordeon: son paginas cortas que se leen de corrido.
   -------------------------------------------------------------------------- */

.leg__s {
  padding-top: var(--s6);
  border-top: 1px solid var(--hilo);
  scroll-margin-top: calc(var(--cabecera) + var(--s4));
}

.leg__s:first-of-type { padding-top: 0; border-top: 0; }

.leg__s-t {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -.018em;
  margin-bottom: var(--s4);
}

/* --------------------------------------------------------------------------
   TABLAS DE PLAZOS

   ⚠️ EL CONTENEDOR CON `overflow-x` NO ES OPCIONAL. Una tabla de tres columnas
   con frases largas no cabe en 390px, y sin este envoltorio quien desborda es
   el BODY: la pagina entera se desplaza en horizontal.
   -------------------------------------------------------------------------- */

.leg__tabla-c {
  max-width: 68ch;
  margin-bottom: var(--s5);
  overflow-x: auto;
}

.leg__tabla {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: .9rem;
  text-align: left;
}

.leg__tabla-cap {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  text-align: left;
  padding-bottom: var(--s3);
}

.leg__tabla th,
.leg__tabla td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--hilo);
  vertical-align: top;
  line-height: 1.5;
}

.leg__tabla thead th {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
  border-bottom-color: var(--tinta);
  white-space: nowrap;
}

/* ⚠️ EL `nowrap` DEL ENCABEZADO ES QUIEN SACA LA TABLA DE LA PANTALLA.
   Medido a 390px: la tabla de tres columnas pedia 381px dentro de un hueco de
   358 y quedaba con desplazamiento horizontal propio. No desbordaba la pagina
   —para eso esta `.leg__tabla-c`— pero obligaba a arrastrar de lado para leer
   el estado del producto. Dejando que "ESTADO DEL PRODUCTO" parta en dos
   lineas, cabe entera. */
@media (max-width: 640px) {
  .leg__tabla { font-size: .85rem; min-width: 0; }
  .leg__tabla thead th { white-space: normal; }
  .leg__tabla th, .leg__tabla td { padding-right: var(--s3); }
}

.leg__tabla tbody th { font-weight: 500; color: var(--tinta); }
.leg__tabla td:last-child, .leg__tabla th:last-child { padding-right: 0; }

.leg__mini {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}

/* De donde sale el dato. Va en pequeño y en humo: es una nota al pie, no
   contenido. */
.leg__fuente {
  max-width: 68ch;
  margin: calc(var(--s5) * -1) 0 var(--s6);
  padding-top: var(--s3);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   CONTACTO Y ENLACES CRUZADOS
   -------------------------------------------------------------------------- */

.leg__contacto {
  max-width: 68ch;
  margin-top: var(--s7);
  padding: var(--s5);
  background: var(--blanco);
  border: 1px solid var(--hilo);
  border-radius: var(--r-sm);
}

.leg__contacto-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.leg__contacto-l li {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
}

.leg__contacto-l .dato { color: var(--humo); }
.leg__contacto-l a { color: var(--tinta); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--hilo); }
.leg__contacto-l a:hover { color: var(--laca); text-decoration-color: var(--laca); }

.leg__razon {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--hilo);
  font-size: .8rem;
  color: var(--humo);
}

.leg__rel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  max-width: 68ch;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--hilo);
}

.leg__rel a {
  font-family: var(--dato);
  font-size: var(--fs-dato);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.leg__rel a:hover { color: var(--tinta); border-bottom-color: var(--laca); }

/* --------------------------------------------------------------------------
   IMPRESION

   Quien imprime un contrato lo quiere entero. `<details>` cerrado no se
   imprime; esto lo despliega todo y quita el indice y los adornos.
   -------------------------------------------------------------------------- */

@media print {
  .leg { display: block; }
  .leg__idx, .leg__ctrl, .leg__rel { display: none; }
  .leg__ac > .leg__prosa { display: block !important; }
  .leg__ac-s { display: none; }
  .leg__prosa, .leg__tabla-c, .leg__cab, .leg__contacto { max-width: none; }
  .leg__contacto { border: 0; padding: 0; }
}

/* --------------------------------------------------------------------------
   EL FORMULARIO DE GARANTIA ROMPE LA COLUMNA DE PROSA

   ⚠️ `.cat__seo` ata el contenido de las paginas legales a ~60ch, que es lo
   correcto para leer parrafos — y lo incorrecto para el formulario de quejas
   (snippet 24), que quedaba arrinconado a la izquierda dentro de esa columna:
   "no esta centrado" (el dueno, 2026-08-08). Cuando la columna trae el
   formulario, se suelta el tope y el propio formulario (max-width 46em +
   margin auto) se centra en la pagina.

   El `!important` es la excepcion documentada: el tope viejo llega como
   estilo INLINE desde la plantilla y no hay otra forma de ganarle. */
.cat__seo:has(.perfumaste-quejas-wrap) { max-width: none !important; }

/* --------------------------------------------------------------------------
   SOPORTE — canales de accion + preguntas en acordeon

   Pedido del dueno (2026-08-08): "sin orden... mas interactiva". Los canales
   dejan de ser una lista con vinetas y pasan a ser TRES PLACAS DE ACCION —
   tocar una escribe el WhatsApp, abre el correo o lleva al rastreo. Las
   preguntas reutilizan el acordeon `.leg__ac` de Terminos: un solo gesto de
   apertura en toda la casa. Cero JavaScript nuevo: <details> nativo.
   -------------------------------------------------------------------------- */

/* La columna de prosa (68ch) se suelta cuando la pagina es la de soporte: las
   tres placas necesitan aire. El propio bloque pone su medida y se centra. */
.cat__seo:has(.soporte) { max-width: none !important; }
.soporte { max-width: 56em; margin-inline: auto; }

.soporte__lede {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--humo);
  max-width: 44ch;
  margin-bottom: var(--s6);
}
.soporte__lede strong { color: var(--tinta); }

.soporte__canales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
@media (max-width: 760px) { .soporte__canales { grid-template-columns: 1fr; } }

/* La placa de accion: la superficie del sistema con un gesto de mano. El
   borde se enciende y la placa se levanta 2px — suficiente para decir
   "tocame", poco para parecer un juguete. */
.soporte__canal {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--blanco);
  border: 1px solid var(--hilo);
  border-radius: var(--r-md);
  padding: var(--s5);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.soporte__canal:hover {
  transform: translateY(-2px);
  border-color: var(--plata, #B9B6B0);
  box-shadow: 0 18px 34px -24px rgba(43, 38, 34, .35);
}

.soporte__k {
  font-family: var(--dato);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
/* El cuerpo baja un punto para que el dato mas largo (el correo, 22
   caracteres) quepa entero en la placa: partirlo en "perfumaste.co / m" es
   peor que medio punto menos de tamano. */
.soporte__canal b {
  font-weight: 700;
  letter-spacing: -.015em;
  font-size: clamp(14.5px, 1.55vw, 17px);
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.soporte__ir {
  margin-top: auto;
  padding-top: 6px;
  font-size: .85rem;
  color: var(--laca);
  text-decoration: underline;
  text-decoration-color: var(--hilo);
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease;
}
.soporte__canal:hover .soporte__ir { text-decoration-color: var(--laca); }

.soporte__t {
  margin: var(--s7) 0 var(--s4);
  font-family: var(--texto);
  font-variation-settings: normal;
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}

.soporte__pie {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--hilo);
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}

/* ⚠️ BLINDAJE CONTRA `wpautop`: WordPress envuelve en <p> lo que encuentra
   suelto dentro del contenido, y esos parrafos —algunos VACIOS— se volvian
   celdas fantasma de la rejilla de canales: dos placas arriba, una descolgada
   en el centro (visto 2026-08-08). `display:contents` los borra del arbol de
   la rejilla sin tocar a sus hijos. */
.soporte__canales > p { display: contents; }

/* --------------------------------------------------------------------------
   RASTRO — la pagina publica de rastreo (/seguimiento-de-pedido/)

   La escena la monta inc/seguimiento.php: cabecera editorial, la RUTA y la
   placa con el formulario de WooCommerce dentro. El gesto de la pagina es la
   ruta: el filete punteado del sistema con un punto que viaja de la bodega a
   tu puerta — el paquete en camino, contado con una linea y un circulo.
   -------------------------------------------------------------------------- */

.rastro { max-width: 34em; margin-inline: auto; }
/* Con RESULTADO dentro (pedido encontrado), el traje ensancha: 34em le queda
   bien a un formulario de dos campos y ahoga una ficha de pedido — las placas
   de direccion salian de 199px y la elipsis se comia el telefono entero. */
.rastro:has(.dirs) { max-width: 46em; }
.cat__seo:has(.rastro) { max-width: none !important; }

/* El aire de apertura: la plantilla generica no pone padding de seccion y la
   cabecera nacia pegada a la navegacion ("muy pegada al menu", el dueno,
   2026-08-08). El mismo respiro superior que usan las demas paginas. */
.wrap:has(> .rastro) { padding-top: clamp(30px, 5vw, 60px); padding-bottom: clamp(30px, 5vw, 60px); }

/* La ruta */
.rastro__ruta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s5);
}
.rastro__hito {
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
  white-space: nowrap;
}
.rastro__linea {
  position: relative;
  flex: 1;
  height: 11px;
}
/* El filete punteado, dibujado con un degradado repetido: mismo trazo que los
   lideres del directorio de marcas. */
.rastro__linea::before {
  content: "";
  position: absolute;
  inset: 5px 0 auto;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--plata, #B9B6B0) 0 3px, transparent 3px 8px);
}
/* Los extremos: origen hueco, destino lleno. */
.rastro__linea::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinta);
}
.rastro__punto {
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--laca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--laca) 18%, transparent);
  animation: pfp-viaje 4.5s cubic-bezier(.45, 0, .35, 1) infinite;
}
@keyframes pfp-viaje {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% - 9px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rastro__punto { animation: none; left: calc(50% - 4px); }
}

/* La placa con el formulario de WooCommerce dentro */
.rastro__placa {
  background: var(--blanco);
  border: 1px solid var(--hilo);
  border-radius: var(--r-md);
  padding: clamp(24px, 4vw, 40px);
}

.rastro__placa p:first-child {
  margin-top: 0;
  color: var(--humo);
  font-size: 15px;
  line-height: 1.6;
}

/* Los form-row de WooCommerce, apilados y con la etiqueta en voz de dato. */
.rastro__placa .form-row {
  float: none !important;
  width: 100% !important;
  margin: var(--s4) 0 0;
  padding: 0;
}
.rastro__placa label {
  display: block;
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 7px;
}
.rastro__placa .input-text {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--hilo);
  border-radius: var(--r-sm);
  background: var(--blanco);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s ease;
}
.rastro__placa .input-text:hover { border-color: var(--humo); }
.rastro__placa .input-text:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.rastro__placa button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 44px;
  margin-top: var(--s3);
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s ease, transform .15s ease;
}
.rastro__placa button.button:hover {
  background: var(--laca);
  transform: translateY(-1px);
}

/* El resultado del rastreo (cuando WooCommerce pinta el estado del pedido)
   hereda la placa: nada queda desnudo sobre el papel. */
.rastro__placa .woocommerce-order-details,
.rastro__placa .order_details { margin: var(--s4) 0 0; }

/* El resultado del rastreo dentro de la placa */
.rastro__placa .order-info { margin: 0 0 var(--s4); }
.rastro__res {
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}
/* Red de seguridad: si algun texto de WooCommerce trae <mark>, jamas el
   amarillo fosforescente del navegador. */
.rastro__placa mark { background: transparent; color: inherit; font-weight: 700; }

/* --------------------------------------------------------------------------
   DIRECCIONES DEL PEDIDO — placas gemelas con filas accionables
   (woocommerce/order/order-details-customer.php; se ve en el rastreo publico
   y en Mi Cuenta)
   -------------------------------------------------------------------------- */
.dirs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 700px) { .dirs { grid-template-columns: 1fr 1fr; } }

/* La placa interior: papel sobre el blanco de la tarjeta — un escalon de
   superficie, sin sombra. */
.dir__placa {
  background: var(--papel);
  border: 1px solid var(--hilo);
  border-radius: var(--r-md);
  padding: var(--s5);
  min-width: 0;
}

.dir__t {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px var(--s3);
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: var(--s4);
}
.dir__mapa {
  font-family: var(--texto);
  font-size: .8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--laca);
  text-decoration: underline;
  text-decoration-color: var(--hilo);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.dir__mapa:hover { text-decoration-color: var(--laca); }

/* La direccion en si: el nombre (primera linea) en tinta y peso; el resto en
   humo. WooCommerce separa las lineas con <br>, asi que `::first-line` es
   fiable aqui. */
.dir { font-size: .95rem; line-height: 1.65; color: var(--humo); overflow-wrap: anywhere; }
.dir::first-line { color: var(--tinta); font-weight: 600; }

/* Las filas de dato accionables */
.dir__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding-top: var(--s3);
  margin-top: var(--s3);
  border-top: 1px solid var(--hilo);
}
.dir__fila:first-of-type { margin-top: var(--s4); }

.dir__k {
  font-family: var(--dato);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  flex: none;
}
.dir__v {
  margin-left: auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
a.dir__v:hover { color: var(--laca); }

/* El boton Copiar: una pastilla de dato, silenciosa hasta que confirma. */
.dir__copia {
  flex: none;
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
  background: var(--blanco);
  border: 1px solid var(--hilo);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.dir__copia:hover { color: var(--tinta); border-color: var(--humo); }
.dir__copia.es-copiado { color: var(--laca); border-color: var(--laca); }

/* --------------------------------------------------------------------------
   PERDIDO — la pagina 404
   Escena de marca: titular XXL, el frasco mas resenado flotando sobre el
   marmol, buscador grande y las dos salidas reales.
   -------------------------------------------------------------------------- */
.perdido {
  padding-block: clamp(36px, 6vw, 72px);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s4);
}
.perdido__t { font-size: clamp(2.2rem, 6.5vw, 4.6rem); max-width: 16ch; }
.perdido__d { color: var(--humo); max-width: 44ch; font-size: clamp(15px, 1.9vw, 17.5px); line-height: 1.6; }

.perdido__esc { position: relative; margin: var(--s4) 0 0; }
.perdido__f {
  height: min(34svh, 300px);
  width: auto;
  filter: drop-shadow(0 30px 28px rgba(43, 38, 34, .24));
  animation: pfp-flotar 6s ease-in-out infinite alternate;
}
@keyframes pfp-flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .perdido__f { animation: none; } }
.perdido__suelo {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 60%; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 38, 34, .2), transparent 72%);
  filter: blur(7px);
}

.perdido__busca {
  display: flex;
  gap: var(--s3);
  width: min(100%, 34em);
  margin-top: var(--s4);
}
.perdido__busca input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 var(--s4);
  background: var(--blanco);
  border: 1px solid var(--hilo);
  border-radius: var(--r-md);
  font-size: 1rem;
}
.perdido__busca input[type="search"]:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.perdido__acc { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; justify-content: center; margin-top: var(--s2); }
.perdido__mas { color: var(--humo); text-underline-offset: 5px; }
.perdido__mas:hover { color: var(--tinta); }