/* ==========================================================================
   TITANFIT — CAMBIOS Y DEVOLUCIONES · r1
   Asistente de 5 pasos. Portal de postventa.

   POR QUE EXISTE
   Hoy el cambio se pide por WhatsApp y no queda registro de nada. Este portal
   convierte esa conversacion en un caso con numero, unidades, motivo, solucion
   y ruta logistica — lo unico que ShippingHub puede consumir.

   MOBILE FIRST DE VERDAD
   El bloque base es el movil. Las media queries SOLO anaden desde 700 y 1040.
   Ni una sola regla `max-width` de layout: si algo se ve mal en el telefono se
   arregla en la base, no con una excepcion de escritorio.

   ARQUITECTURA CSS (AGENTS.md + audit del 2026-07-13)
   Tokens propios SOLO bajo `.tf-rma`, cero `:root`. Clases con prefijo
   `tf-rma__` — la convencion de header/footer/categoria/PDP — para que la
   frontera con Astra sea inequivoca y para no chocar con las clases sueltas
   (`.wrap`, `.btn`, `.campo`) que la landing mayorista declara sin prefijo.

   CONTRASTE
   El oro de marca (#d8aa43) mide 2,15 sobre blanco y REPRUEBA WCAG AA. Sobre
   claro se usa `--tf-rma-oro-txt` (#8a6410, mide 5,37 y sigue leyendose oro).
   El oro puro solo se usa sobre el negro del hero.
   ========================================================================== */

.tf-rma {
  /* superficies */
  --tf-rma-ink: #0d0d0d;
  --tf-rma-ink-2: #17171b;
  --tf-rma-ink-3: #232329;
  --tf-rma-claro: #fff;
  --tf-rma-claro-2: #f7f6f4;
  --tf-rma-claro-3: #efece7;
  --tf-rma-linea: #e6e3de;
  --tf-rma-linea-2: #d5d0c8;
  --tf-rma-linea-osc: rgba(255, 255, 255, .13);

  /* texto */
  --tf-rma-txt: #1a1a1a;
  --tf-rma-txt-2: #56544f;
  --tf-rma-txt-3: #86827b;
  --tf-rma-txt-osc: rgba(255, 255, 255, .74);
  --tf-rma-txt-osc-2: rgba(255, 255, 255, .5);

  /* marca */
  --tf-rma-oro: #d8aa43;
  --tf-rma-oro-osc: #b98c2f;
  --tf-rma-oro-txt: #8a6410;
  --tf-rma-oro-velo: rgba(216, 170, 67, .14);
  --tf-rma-oro-anillo: rgba(216, 170, 67, .38);
  --tf-rma-morado: #655688;

  /* estado */
  --tf-rma-ok: #2f7d57;
  --tf-rma-ok-txt: #14532d;
  --tf-rma-ok-bg: #e9f4ee;
  --tf-rma-ok-linea: #b6dcc5;
  --tf-rma-mal: #b3402f;
  --tf-rma-mal-txt: #8a2f22;
  --tf-rma-mal-bg: #fbeae7;
  --tf-rma-mal-linea: #edc0b7;
  --tf-rma-aviso-txt: #7a5a12;
  --tf-rma-aviso-bg: #fdf6e6;
  --tf-rma-aviso-linea: #e8d5a0;

  /* geometria */
  --tf-rma-max: 1180px;
  --tf-rma-r: 12px;
  --tf-rma-r-s: 8px;
  --tf-rma-r-xs: 6px;

  font-family: var(--font-body, Montserrat, "Helvetica Neue", Arial, sans-serif);
  color: var(--tf-rma-txt);
  line-height: 1.5;
  background: transparent;   /* el fondo lo pinta #content, a ancho completo */
  -webkit-font-smoothing: antialiased;

  /* El ancho visible real. Lo afina el JS; `100vw` es el respaldo porque
     incluye la barra de scroll. Lo consume el hero, que es el UNICO que
     sangra: ver la nota de `.tf-rma__hero`. */
  --tf-vw: 100vw;
}

.tf-rma *, .tf-rma *::before, .tf-rma *::after { box-sizing: border-box; }
.tf-rma * { min-width: 0; }
.tf-rma img { max-width: 100%; display: block; }
.tf-rma svg { flex: none; }
.tf-rma [hidden] { display: none !important; }

.tf-rma__wrap {
  width: 100%;
  max-width: var(--tf-rma-max);
  margin-inline: auto;
  padding-inline: 18px;
}
@media (min-width: 700px) { .tf-rma__wrap { padding-inline: 32px; } }

.tf-rma__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- tipografia */

.tf-rma__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 12px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tf-rma-oro-txt);
}
.tf-rma__eyebrow svg { width: 14px; height: 14px; }
.tf-rma__hero .tf-rma__eyebrow { color: var(--tf-rma-oro); }

.tf-rma__panel h2 {
  margin: 0 0 8px;
  font-size: 1.375rem; font-weight: 800; line-height: 1.18; letter-spacing: -.015em;
}
@media (min-width: 700px) { .tf-rma__panel h2 { font-size: 1.75rem; } }

.tf-rma__bajada {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: .9375rem; line-height: 1.6;
  color: var(--tf-rma-txt-2);
}
@media (min-width: 700px) { .tf-rma__bajada { font-size: 1rem; } }

.tf-rma__motivo-rechazo {
  margin: 0 0 26px;
  max-width: 62ch;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--tf-rma-fondo-2, #f4f4f4);
  font-size: .9375rem; line-height: 1.6;
  white-space: pre-wrap;
}

/* La etiqueta de devolucion, en la misma vista de estado. Es la UNICA accion de
   esa pantalla —ahi no hay asistente— asi que va sola y a lo ancho en movil.

   Lleva color propio y no compone con `--oro`, al reves que `--pago`: aquel es
   un CTA dentro de un hito, rodeado de botones del asistente, y este vive solo
   en un panel que pinta el JS. El precio lo anuncia la nota de `--pago` —color
   propio obliga a frontera nueva— y esta pagado al final del archivo. */
.tf-rma__etiqueta { margin: 0 0 26px; }
.tf-rma__btn--etiqueta {
  width: 100%;
  background: var(--tf-rma-oro); border-color: var(--tf-rma-oro); color: var(--tf-rma-ink);
}
.tf-rma__btn--etiqueta:hover,
.tf-rma__btn--etiqueta:focus,
.tf-rma__btn--etiqueta:active {
  background: var(--tf-rma-oro-osc); border-color: var(--tf-rma-oro-osc); color: #fff;
}
.tf-rma__btn--etiqueta:focus-visible { outline-color: var(--tf-rma-ink); }
@media (min-width: 700px) { .tf-rma__btn--etiqueta { width: auto; } }

/* El fallo se cuenta DEBAJO del boton que lo produjo, no en el aviso global de
   la pagina: en esta pantalla el aviso esta oculto junto con el asistente. */
.tf-rma__etiqueta-nota {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: .875rem; line-height: 1.5;
  color: var(--tf-rma-mal-txt);
}

/* --------------------------------------------------------------------- hero */

/* El hero sangra POR SU CUENTA.
   El sangrado de la raiz pinta el fondo claro a ancho completo, pero su
   `padding-inline` devuelve a los hijos a la linea original: el hero, que es
   uno de ellos, volvia a quedar con franjas blancas. Cada franja de color se
   sangra sola — misma tecnica, aplicada a la seccion, como en /mayorista/. */
.tf-rma__hero {
  position: relative;
  overflow: hidden;
  margin-inline: calc(50% - max(var(--tf-vw), 100%) / 2);
  padding-block: 38px 78px;
  padding-inline: calc(max(var(--tf-vw), 100%) / 2 - 50%);
  background: var(--tf-rma-ink);
  color: #fff;
}
.tf-rma__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 85% 0%, var(--tf-rma-oro-velo) 0%, transparent 60%);
  pointer-events: none;
}
@media (min-width: 700px) { .tf-rma__hero { padding-block: 54px 96px; } }

.tf-rma__hero-inner { position: relative; }

.tf-rma__hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
}
.tf-rma__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 1rem; line-height: 1.55;
  color: var(--tf-rma-txt-osc);
}

.tf-rma__hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 22px 0 0; padding: 0;
  list-style: none;
}
.tf-rma__hero-trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 600;
  color: var(--tf-rma-txt-osc);
}
.tf-rma__hero-trust svg { width: 16px; height: 16px; color: var(--tf-rma-oro); }

.tf-rma__piloto {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 14px; padding: 6px 12px;
  border: 1px solid var(--tf-rma-oro-anillo); border-radius: 999px;
  background: rgba(216, 170, 67, .12);
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tf-rma-oro);
}
.tf-rma__piloto svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------- layout */

.tf-rma__layout {
  display: grid;
  gap: 20px;
  align-items: start;
  margin-top: -56px;
  padding-bottom: 64px;
}
@media (min-width: 1040px) {
  .tf-rma__layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: -64px; }
}

.tf-rma__card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r);
  background: var(--tf-rma-claro);
  box-shadow: 0 12px 34px rgba(13, 13, 13, .10);
}

.tf-rma__aside {
  padding: 22px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r);
  background: var(--tf-rma-claro);
  box-shadow: 0 4px 16px rgba(13, 13, 13, .05);
}
@media (min-width: 1040px) { .tf-rma__aside { position: sticky; top: 96px; } }
.tf-rma__aside h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.tf-rma__aside ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 12px; }
.tf-rma__aside li {
  display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px;
  font-size: .8125rem; line-height: 1.5; color: var(--tf-rma-txt-2);
}
.tf-rma__aside li svg { width: 15px; height: 15px; margin-top: 3px; color: var(--tf-rma-oro-txt); }
.tf-rma__aside li b { color: var(--tf-rma-txt); font-weight: 700; }
.tf-rma__aside-pie {
  margin: 0; padding-top: 14px;
  border-top: 1px solid var(--tf-rma-linea);
  font-size: .75rem; line-height: 1.5; color: var(--tf-rma-txt-3);
}
.tf-rma__aside-pie a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ stepper */
/* No existe Stepper en el design system (verificado: cero coincidencias). Se
   construye con el patron `[aria-pressed]` de .chip/.opt de mayorista y con la
   barra de progreso `.barra`. La pista de fondo se rellena con un pseudo, asi
   el avance se lee de un vistazo sin contar circulos. */

.tf-rma__steps {
  padding: 16px 18px;
  border-bottom: 1px solid var(--tf-rma-linea);
  background: var(--tf-rma-claro);
}
@media (min-width: 700px) { .tf-rma__steps { padding: 20px 26px; } }

.tf-rma__steps-movil {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 12px;
}
@media (min-width: 700px) { .tf-rma__steps-movil { display: none; } }
.tf-rma__steps-movil b { font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; }
.tf-rma__steps-movil span {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tf-rma-txt-3);
}

.tf-rma__barra {
  height: 4px; overflow: hidden;
  border-radius: 999px;
  background: var(--tf-rma-linea);
}
@media (min-width: 700px) { .tf-rma__barra { display: none; } }
.tf-rma__barra i {
  display: block; height: 100%; width: 20%;
  background: var(--tf-rma-oro);
  transition: width .28s cubic-bezier(.16, 1, .3, 1);
}

.tf-rma__steps ol {
  display: none;
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 700px) {
  .tf-rma__steps ol {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  }
}

/* LA ETIQUETA VA DEBAJO DEL CIRCULO, NO AL LADO.
   Al lado, la pista que une los pasos cruzaba por encima del texto y lo
   tachaba: la linea nace en el borde del circulo y llega hasta el siguiente,
   y ahi en medio esta la etiqueta. Debajo, la pista corre por el eje de los
   circulos y no se cruza con nada. */
.tf-rma__step {
  position: relative;
  display: grid; justify-items: center; align-content: start; gap: 8px;
  padding: 4px 6px 0;
  text-align: center;
  font-size: .75rem; font-weight: 700; line-height: 1.25;
  color: var(--tf-rma-txt-3);
}
/* pista entre el circulo de este paso y el del siguiente; se corta en el ultimo */
.tf-rma__step::before {
  content: "";
  position: absolute; top: 17px;
  left: calc(50% + 19px); right: calc(-50% + 19px);
  height: 2px;
  background: var(--tf-rma-linea);
}
.tf-rma__step:last-child::before { display: none; }
.tf-rma__step.is-done::before { background: var(--tf-rma-oro); }

.tf-rma__step span {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: 26px; min-width: 26px; height: 26px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: 50%;
  line-height: 1;
  background: var(--tf-rma-claro);
  color: var(--tf-rma-txt-3);
  font-size: .75rem; font-weight: 800;
  transition: background-color .18s, border-color .18s, color .18s;
}
.tf-rma__step.is-done span,
.tf-rma__step.is-active span {
  border-color: var(--tf-rma-ink);
  background: var(--tf-rma-ink);
  color: var(--tf-rma-oro);
}
.tf-rma__step.is-active { color: var(--tf-rma-txt); }
.tf-rma__step.is-done { color: var(--tf-rma-txt-2); }
.tf-rma__step.is-active span { box-shadow: 0 0 0 3px var(--tf-rma-oro-anillo); }
.tf-rma__step svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ botones */
/* LOS CINCO ESTADOS SE DECLARAN SIEMPRE. El tema repinta todo <button> al pasar
   el raton, al enfocarlo y al pulsarlo, y el boton se queda CON EL FOCO despues
   de cada accion: en mayorista eso dejo el segundo "ver mas" blanco sobre
   blanco. El foco se marca con un anillo, nunca invirtiendo el boton. */

.tf-rma__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: var(--tf-rma-r-xs);
  font: inherit; font-size: .8125rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .1s;
}
.tf-rma__btn:active { transform: scale(.98); }
.tf-rma__btn svg { width: 18px; height: 18px; }

.tf-rma__btn--oro,
.tf-rma__btn--oro:visited { background: var(--tf-rma-oro); border-color: var(--tf-rma-oro); color: var(--tf-rma-ink); }
.tf-rma__btn--oro:hover,
.tf-rma__btn--oro:focus,
.tf-rma__btn--oro:active { background: var(--tf-rma-oro-osc); border-color: var(--tf-rma-oro-osc); color: #fff; }

.tf-rma__btn--ink,
.tf-rma__btn--ink:visited { background: var(--tf-rma-ink); border-color: var(--tf-rma-ink); color: #fff; }
.tf-rma__btn--ink:hover,
.tf-rma__btn--ink:focus,
.tf-rma__btn--ink:active { background: var(--tf-rma-oro); border-color: var(--tf-rma-oro); color: var(--tf-rma-ink); }

.tf-rma__btn--linea,
.tf-rma__btn--linea:visited { background: var(--tf-rma-claro); border-color: var(--tf-rma-linea-2); color: var(--tf-rma-txt); }
.tf-rma__btn--linea:hover,
.tf-rma__btn--linea:focus,
.tf-rma__btn--linea:active { background: var(--tf-rma-claro-2); border-color: var(--tf-rma-ink); color: var(--tf-rma-txt); }

.tf-rma__btn:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__btn--oro:focus-visible { outline-color: var(--tf-rma-ink); }

.tf-rma__btn[disabled],
.tf-rma__btn[disabled]:hover,
.tf-rma__btn[disabled]:focus,
.tf-rma__btn[disabled]:active {
  background: var(--tf-rma-claro-3); border-color: var(--tf-rma-linea-2);
  color: var(--tf-rma-txt-3); cursor: not-allowed; transform: none;
}
.tf-rma__btn--bloque { width: 100%; }

/* estado de carga: no existe en el repo, se construye aqui */
.tf-rma__btn.is-cargando { pointer-events: none; }
.tf-rma__btn.is-cargando .tf-rma__btn-txt { opacity: .55; }
.tf-rma__spinner {
  width: 15px; height: 15px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: tf-rma-giro .7s linear infinite;
}
@keyframes tf-rma-giro { to { transform: rotate(360deg); } }

.tf-rma__acciones {
  display: flex; flex-direction: column-reverse; gap: 10px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--tf-rma-linea);
}
@media (min-width: 700px) {
  .tf-rma__acciones { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .tf-rma__acciones .tf-rma__btn { width: auto; }
}
.tf-rma__acciones .tf-rma__btn { width: 100%; }

/* ---------------------------------------------------------------- panel base */

.tf-rma__panel { padding: 24px 18px 26px; }
@media (min-width: 700px) { .tf-rma__panel { padding: clamp(26px, 4vw, 40px); } }
.tf-rma__panel:focus { outline: none; }

/* ------------------------------------------------------------------- avisos */

.tf-rma__aviso {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  margin: 0 0 20px; padding: 13px 15px;
  border: 1px solid var(--tf-rma-mal-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-mal-bg);
  color: var(--tf-rma-mal-txt);
  font-size: .875rem; line-height: 1.5;
}
.tf-rma__aviso svg { width: 17px; height: 17px; margin-top: 2px; }
.tf-rma__aviso.es-ok { border-color: var(--tf-rma-ok-linea); background: var(--tf-rma-ok-bg); color: var(--tf-rma-ok-txt); }
.tf-rma__aviso.es-nota { border-color: var(--tf-rma-aviso-linea); background: var(--tf-rma-aviso-bg); color: var(--tf-rma-aviso-txt); }

.tf-rma__nota {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px;
  margin: 14px 0 0;
  font-size: .75rem; line-height: 1.5; color: var(--tf-rma-txt-3);
}
.tf-rma__nota svg { width: 14px; height: 14px; margin-top: 2px; color: var(--tf-rma-oro-txt); }

/* --------------------------------------------------------------- formulario */

.tf-rma__form { display: grid; gap: 20px; }
.tf-rma__grid-2 { display: grid; gap: 16px; }
@media (min-width: 700px) { .tf-rma__grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-rma__ancho { grid-column: 1 / -1; }

.tf-rma__campo { display: flex; flex-direction: column; gap: 6px; }
.tf-rma__campo > label,
.tf-rma__label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1.3;
  color: var(--tf-rma-txt-2);
}
.tf-rma__ayuda { font-size: .75rem; line-height: 1.45; color: var(--tf-rma-txt-3); }
/* La linea de recuperar el enlace va DEBAJO del CTA y separada de el: es la
   salida secundaria, y competir con «Buscar mi pedido» seria confundir cual de
   las dos es la puerta normal. */
.tf-rma__ayuda--recuperar { margin: 12px 0 0; text-align: right; }
.tf-rma__ayuda--recuperar .tf-rma__enlace { display: inline; }

.tf-rma__campo input,
.tf-rma__campo select,
.tf-rma__campo textarea {
  width: 100%; min-height: 48px; padding: 12px 13px; margin: 0;
  border: 1px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
  color: var(--tf-rma-txt);
  font: inherit; font-size: .9375rem; line-height: 1.4;
  box-shadow: none;
}
.tf-rma__campo textarea { min-height: 92px; resize: vertical; }
.tf-rma__campo input::placeholder,
.tf-rma__campo textarea::placeholder { color: #a8a29a; opacity: 1; }

.tf-rma__campo select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2356544f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  cursor: pointer;
}
.tf-rma__campo select:disabled {
  background-color: var(--tf-rma-claro-3); color: var(--tf-rma-txt-3); cursor: not-allowed;
}

.tf-rma__campo input:hover,
.tf-rma__campo select:hover,
.tf-rma__campo textarea:hover { border-color: var(--tf-rma-txt-3); }

.tf-rma__campo input:focus,
.tf-rma__campo select:focus,
.tf-rma__campo textarea:focus {
  outline: none;
  border-color: var(--tf-rma-oro-osc);
  box-shadow: 0 0 0 3px var(--tf-rma-oro-anillo);
}

/* estado de error de campo: no existe en el repo, se construye aqui */
.tf-rma__campo.es-mal input,
.tf-rma__campo.es-mal select,
.tf-rma__campo.es-mal textarea { border-color: var(--tf-rma-mal); background: #fffbfa; }
.tf-rma__campo.es-mal input:focus,
.tf-rma__campo.es-mal select:focus,
.tf-rma__campo.es-mal textarea:focus { box-shadow: 0 0 0 3px rgba(179, 64, 47, .18); }
.tf-rma__error {
  display: none;
  align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; color: var(--tf-rma-mal-txt);
}
.tf-rma__campo.es-mal .tf-rma__error { display: flex; }
.tf-rma__error svg { width: 13px; height: 13px; }

/* casillas */
.tf-rma__check {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 11px;
  font-size: .875rem; line-height: 1.5; color: var(--tf-rma-txt);
  cursor: pointer;
}
.tf-rma__check input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; accent-color: var(--tf-rma-oro-osc); cursor: pointer; }
.tf-rma__check--caja {
  padding: 13px 15px;
  border: 1px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro);
}
.tf-rma__check--caja:has(input:checked) { border-color: var(--tf-rma-ink); background: var(--tf-rma-claro-2); }

/* AUTOCOMPLETADO: la unica receta que resistio (tf-footer.css). Si el fondo va
   a ser blanco, el texto va oscuro. No se pelea con el navegador. */
.tf-rma__campo input:-webkit-autofill,
.tf-rma__campo input:-webkit-autofill:hover,
.tf-rma__campo input:-webkit-autofill:focus,
.tf-rma__campo input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--tf-rma-txt) !important;
  caret-color: var(--tf-rma-txt);
  -webkit-box-shadow: 0 0 0 60px var(--tf-rma-claro) inset !important;
  box-shadow: 0 0 0 60px var(--tf-rma-claro) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* --------------------------------------------------- paso 2 · las unidades */

.tf-rma__productos { display: grid; gap: 12px; }

.tf-rma__producto {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 13px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro);
  transition: border-color .18s, box-shadow .18s;
}
.tf-rma__producto:has(input:checked) {
  border-color: var(--tf-rma-ink);
  box-shadow: 0 4px 14px rgba(13, 13, 13, .07);
}
.tf-rma__producto > img {
  width: 68px; height: 68px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-2);
  object-fit: contain;
}
.tf-rma__producto h3 { margin: 0 0 3px; font-size: .875rem; font-weight: 700; line-height: 1.35; }
.tf-rma__producto p { margin: 0 0 10px; font-size: .75rem; color: var(--tf-rma-txt-3); }
.tf-rma__producto p b { color: var(--tf-rma-txt-2); font-weight: 700; }

.tf-rma__unidades { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-rma__unidad {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 13px 0 11px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: 999px;
  background: var(--tf-rma-claro);
  font-size: .8125rem; font-weight: 700; color: var(--tf-rma-txt);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.tf-rma__unidad input { width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: var(--tf-rma-oro-osc); cursor: pointer; }
.tf-rma__unidad:hover { border-color: var(--tf-rma-ink); }
.tf-rma__unidad:has(input:checked) { border-color: var(--tf-rma-ink); background: var(--tf-rma-ink); color: #fff; }
.tf-rma__unidad:has(input:focus-visible) { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__unidad.es-bloqueada,
.tf-rma__unidad.es-bloqueada:hover {
  border-color: var(--tf-rma-linea); background: var(--tf-rma-claro-3);
  color: var(--tf-rma-txt-3); cursor: not-allowed;
}

.tf-rma__vacio {
  padding: 24px 18px;
  border: 1px dashed var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro-2);
  text-align: center;
}
.tf-rma__vacio strong { display: block; margin-bottom: 4px; font-size: .9375rem; }
.tf-rma__vacio span { font-size: .8125rem; color: var(--tf-rma-txt-3); }

/* --------------------------------------------- paso 3 · motivo y solucion */

.tf-rma__unidad-card {
  margin-bottom: 16px; padding: 16px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro-2);
}
.tf-rma__unidad-card.es-mal { border-color: var(--tf-rma-mal); background: #fffbfa; }

.tf-rma__unidad-head {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center;
  margin-bottom: 16px;
}
.tf-rma__unidad-head img {
  width: 54px; height: 54px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
  object-fit: contain;
}
.tf-rma__unidad-num {
  display: block; margin-bottom: 3px;
  font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tf-rma-oro-txt);
}
.tf-rma__unidad-head h3 { margin: 0; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.tf-rma__unidad-head p { margin: 3px 0 0; font-size: .75rem; color: var(--tf-rma-txt-3); }

.tf-rma__bloque {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
}
.tf-rma__bloque > .tf-rma__label { display: block; margin-bottom: 10px; }

/* Soluciones como tarjetas-radio: son 1 a 3 opciones y es LA decision del paso.
   Mismo patron de seleccion que .opt de la landing mayorista, con caja. */
.tf-rma__soluciones { display: grid; gap: 8px; }
.tf-rma__solucion {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 11px;
  padding: 12px 13px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.tf-rma__solucion input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--tf-rma-oro-osc); cursor: pointer; }
.tf-rma__solucion:hover { border-color: var(--tf-rma-ink); }
.tf-rma__solucion:has(input:checked) { border-color: var(--tf-rma-ink); background: var(--tf-rma-claro-2); }
.tf-rma__solucion:has(input:focus-visible) { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__solucion b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.35; }
.tf-rma__solucion span { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.45; color: var(--tf-rma-txt-3); }

/* Solucion unica: no se pregunta, se informa. */
.tf-rma__solucion-fija {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-3);
}
.tf-rma__solucion-fija svg { width: 16px; height: 16px; margin-top: 2px; color: var(--tf-rma-txt-2); }
.tf-rma__solucion-fija b { display: block; font-size: .8125rem; font-weight: 800; }
.tf-rma__solucion-fija span { display: block; margin-top: 2px; font-size: .75rem; color: var(--tf-rma-txt-2); }

/* --------------------------------------------------------------- evidencia */

.tf-rma__subida {
  margin-top: 14px; padding: 16px;
  border: 1.5px dashed var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro);
  transition: border-color .15s, background-color .15s;
}
.tf-rma__subida.es-mal { border-style: solid; border-color: var(--tf-rma-mal); background: #fffbfa; }
.tf-rma__subida.es-encima { border-color: var(--tf-rma-oro-osc); background: var(--tf-rma-aviso-bg); }
.tf-rma__subida-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tf-rma__obligatorio { font-size: .625rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tf-rma-mal-txt); }
.tf-rma__opcional { font-size: .625rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tf-rma-txt-3); }

.tf-rma__soltar {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px;
  border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-2);
  text-align: center;
  cursor: pointer;
}
.tf-rma__soltar svg { width: 22px; height: 22px; color: var(--tf-rma-oro-txt); }
.tf-rma__soltar b { font-size: .8125rem; font-weight: 700; }
.tf-rma__soltar span { font-size: .75rem; color: var(--tf-rma-txt-3); }
.tf-rma__soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tf-rma__subida:has(input:focus-visible) .tf-rma__soltar { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }

.tf-rma__fotos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tf-rma__foto {
  position: relative; overflow: hidden;
  width: 88px; height: 88px; margin: 0;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-3);
}
.tf-rma__foto img { width: 100%; height: 100%; object-fit: cover; }
.tf-rma__foto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 3px 6px;
  background: rgba(255, 255, 255, .94);
  font-size: .5625rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-rma__foto button {
  position: absolute; top: 5px; right: 5px;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid #fff; border-radius: 50%;
  background: var(--tf-rma-ink); color: #fff;
  cursor: pointer;
}
.tf-rma__foto button:hover,
.tf-rma__foto button:focus,
.tf-rma__foto button:active { background: var(--tf-rma-mal); color: #fff; }
.tf-rma__foto button:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 1px; }
.tf-rma__foto button svg { width: 12px; height: 12px; }
.tf-rma__foto-estado {
  position: absolute; inset: 0 0 auto 0;
  padding: 2px 5px;
  background: rgba(13, 13, 13, .72); color: #fff;
  font-size: .5rem; line-height: 1.3; text-align: center;
}
.tf-rma__foto-estado--error { background: var(--tf-rma-mal); }

/* ------------------------------------------------------ catalogo de cambio */

.tf-rma__buscador { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
@media (min-width: 700px) { .tf-rma__buscador { flex-direction: row; align-items: flex-end; } }
.tf-rma__buscador .tf-rma__campo { flex: 1 1 auto; }

.tf-rma__tallas { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-rma__talla {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 60px; min-height: 46px; padding: 0 14px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
  font: inherit; font-size: .875rem; font-weight: 800; color: var(--tf-rma-txt);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.tf-rma__talla:hover { border-color: var(--tf-rma-ink); }
.tf-rma__talla:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__talla[aria-pressed="true"],
.tf-rma__talla[aria-pressed="true"]:hover { border-color: var(--tf-rma-ink); background: var(--tf-rma-ink); color: #fff; }
.tf-rma__talla[disabled],
.tf-rma__talla[disabled]:hover {
  border-color: var(--tf-rma-linea); background: var(--tf-rma-claro-3);
  color: var(--tf-rma-txt-3); cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--tf-rma-mal);
}

/* `grid-auto-rows: min-content` es el antidoto general al colapso: si algun dia
   esta grilla vuelve a ser hija de un contenedor con altura definida, sus filas
   seguiran midiendose por contenido en vez de repartirse el hueco. Es lo que
   dejaba las tarjetas del catalogo en 80 px con 254 px de contenido dentro. */
.tf-rma__opciones {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content; align-content: start;
  gap: 10px; margin-top: 12px;
}
@media (min-width: 700px) { .tf-rma__opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tf-rma__opciones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tf-rma__opcion {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  padding: 0 0 12px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
/* La celda cuadrada fuerza una foto 1:1 aunque el tema global declare height:auto. */
.tf-rma__opcion::before { content: ""; grid-column: 1; grid-row: 1; padding-top: 100%; background: var(--tf-rma-claro-3); }
.tf-rma .tf-rma__opcion > img {
  grid-column: 1; grid-row: 1;
  width: 100%; height: 100%; min-height: 0; max-height: none; max-width: none;
  align-self: stretch;
  background: var(--tf-rma-claro-3);
  object-fit: cover;
  transition: transform .2s;
}
.tf-rma__opcion:hover { border-color: var(--tf-rma-ink); box-shadow: 0 8px 20px rgba(13, 13, 13, .10); transform: translateY(-2px); }
.tf-rma__opcion:hover > img { transform: scale(1.03); }
.tf-rma__opcion:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__opcion[aria-pressed="true"] { border-color: var(--tf-rma-ink); box-shadow: inset 0 0 0 1.5px var(--tf-rma-ink); }
.tf-rma__opcion[aria-pressed="true"]::after {
  content: "";
  position: absolute; top: 9px; right: 9px;
  width: 18px; height: 18px;
  border: 3px solid #fff; border-radius: 50%;
  background: var(--tf-rma-oro);
  box-shadow: 0 0 0 1px var(--tf-rma-ink);
}
.tf-rma__opcion > strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  /* `max-height` además del recorte: sin él, el navegador compone una tercera
     línea que la tarjeta corta por la mitad de las letras, y se ve rota. */
  margin: 11px 11px 0; min-height: 2.7em; max-height: 2.7em;
  font-size: .8125rem; font-weight: 700; line-height: 1.35;
}
.tf-rma__opcion > span { display: block; margin: 6px 11px 0; font-size: .8125rem; font-weight: 800; }
.tf-rma__opcion > em {
  display: block; margin: 5px 11px 0;
  font-size: .6875rem; font-style: normal; font-weight: 700;
  color: var(--tf-rma-ok-txt);
}

/* ------------------------------------------------- paso 4 · retiro y pago */

.tf-rma__fieldset {
  margin: 8px 0 0; padding: 20px 18px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro-2);
}
.tf-rma__fieldset > legend {
  padding: 0 8px; margin-left: -8px;
  font-size: .9375rem; font-weight: 800; letter-spacing: -.01em;
}
.tf-rma__fieldset > .tf-rma__ayuda { display: block; margin: 4px 0 18px; }

/* ------------------------------------------------- paso 5 · confirmacion */

.tf-rma__resumen {
  padding: 16px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro-2);
}
.tf-rma__resumen-item {
  display: grid; gap: 12px;
  margin-bottom: 10px; padding: 14px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
}
.tf-rma__resumen-linea {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center;
}
.tf-rma__resumen-linea img {
  width: 46px; height: 46px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-2);
  object-fit: contain;
}
.tf-rma__resumen-linea span {
  display: block;
  font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tf-rma-txt-3);
}
.tf-rma__resumen-linea strong { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 700; line-height: 1.35; }
.tf-rma__resumen-linea small { display: block; margin-top: 2px; font-size: .75rem; color: var(--tf-rma-txt-3); }
.tf-rma__resumen-accion {
  margin: 0; padding: 11px 12px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-2);
  font-size: .8125rem; line-height: 1.5; color: var(--tf-rma-txt-2);
}
.tf-rma__resumen-accion b { color: var(--tf-rma-txt); font-weight: 700; }
.tf-rma__resumen-monto {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding-top: 11px;
  border-top: 1px solid var(--tf-rma-linea);
}
.tf-rma__resumen-monto span { font-size: .75rem; color: var(--tf-rma-txt-3); }
.tf-rma__resumen-monto strong { font-size: .875rem; font-weight: 800; }
.tf-rma__pill {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--tf-rma-ok-linea); border-radius: 999px;
  background: var(--tf-rma-ok-bg);
  font-size: .625rem; font-style: normal; font-weight: 800; letter-spacing: .04em;
  color: var(--tf-rma-ok-txt);
}

.tf-rma__fila {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  font-size: .875rem;
}
.tf-rma__fila + .tf-rma__fila { border-top: 1px solid var(--tf-rma-linea); }
.tf-rma__fila strong { font-weight: 700; }
.tf-rma__fila--total { margin-top: 2px; padding-top: 14px; border-top: 1.5px solid var(--tf-rma-linea-2); }
.tf-rma__fila--total strong { font-size: 1.125rem; font-weight: 800; color: var(--tf-rma-oro-txt); }

.tf-rma__ruta {
  display: grid; gap: 6px;
  margin: 18px 0 0; padding: 15px;
  border: 1px solid var(--tf-rma-ok-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-ok-bg);
  color: var(--tf-rma-ok-txt);
}
.tf-rma__ruta-head { display: flex; align-items: center; gap: 9px; }
.tf-rma__ruta-head svg { width: 18px; height: 18px; }
.tf-rma__ruta-head strong { font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; }
.tf-rma__ruta p { margin: 0; font-size: .8125rem; line-height: 1.55; }
.tf-rma__ruta-dir {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--tf-rma-ok-linea);
}
@media (min-width: 700px) { .tf-rma__ruta-dir { flex-direction: row; align-items: center; justify-content: space-between; } }
.tf-rma__ruta-dir p { font-size: .75rem; }
.tf-rma__ruta-dir .tf-rma__btn { min-height: 38px; padding: 0 13px; font-size: .6875rem; }

/* ------------------------------------------------------------- seguimiento */

.tf-rma__seguimiento { display: grid; gap: 18px; }
.tf-rma__estado {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; padding: 8px 14px;
  border: 1px solid var(--tf-rma-linea-2); border-radius: 999px;
  background: var(--tf-rma-claro-2);
  font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.tf-rma__estado svg { width: 14px; height: 14px; color: var(--tf-rma-oro-txt); }
.tf-rma__folio {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; letter-spacing: -.02em;
}
.tf-rma__hitos { display: grid; gap: 16px; margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--tf-rma-linea); }
.tf-rma__hitos li { position: relative; font-size: .8125rem; line-height: 1.5; color: var(--tf-rma-txt-2); }
.tf-rma__hitos li::before {
  content: "";
  position: absolute; left: -28px; top: 5px;
  width: 10px; height: 10px;
  border: 2px solid var(--tf-rma-linea-2); border-radius: 50%;
  background: var(--tf-rma-claro);
}
.tf-rma__hitos li.es-hecho::before { border-color: var(--tf-rma-oro-osc); background: var(--tf-rma-oro); }
.tf-rma__hitos li b { display: block; color: var(--tf-rma-txt); font-weight: 700; }
/* El CTA de pago dentro del hito. Solo geometria: el color lo pone `--oro`, que
   ya tiene su regla de frontera contra el morado del tema mas abajo. Inventar
   aqui un color propio obligaria a escribir una frontera nueva. */
.tf-rma__btn--pago { display: inline-flex; margin-top: 10px; }

/* enlace-boton: solo el prototipo lo usa, pero el estilo se porta igual porque
   el paso 5 real lo necesita para "editar direccion" en linea. */
.tf-rma__enlace {
  padding: 0; margin: 0;
  border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--tf-rma-oro-txt);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.tf-rma__enlace:hover, .tf-rma__enlace:focus { color: var(--tf-rma-ink); }
.tf-rma__enlace:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__acciones--fin { justify-content: flex-end; }

/* La pantalla de cerrado: el portal apagado, o abierto solo para operadores.
   Comparte hero, tarjeta y aside con el asistente; solo cambia el panel. */
.tf-rma__panel > .tf-rma__acciones:first-of-type { border-top: 0; padding-top: 0; margin-top: 22px; }

/* ------------------------------------------- llegó un producto equivocado */
/* Tres decisiones sobre el paquete de más. La jerarquía es deliberada: las dos
   que evitan la logística inversa se ven como una oferta, y la de solo retirar
   se ve como lo que es — una opción legítima, sin adornos y sin castigo. */

.tf-rma__elegido {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin-top: 12px; padding: 12px;
  border: 1.5px solid var(--tf-rma-ink); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro);
}
.tf-rma__elegido img {
  width: 52px; height: 52px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-3);
  object-fit: contain;
}
.tf-rma__elegido span {
  display: block;
  font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tf-rma-oro-txt);
}
.tf-rma__elegido strong { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 700; line-height: 1.3; }
.tf-rma__elegido small { display: block; margin-top: 2px; font-size: .75rem; color: var(--tf-rma-txt-3); }

.tf-rma__oferta-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.tf-rma__oferta-head .tf-rma__label { margin: 0; }

.tf-rma__ofertas { display: grid; gap: 10px; }

.tf-rma__oferta {
  position: relative;
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.tf-rma__oferta input {
  width: 18px; height: 18px; min-height: 0; margin: 2px 0 0;
  accent-color: var(--tf-rma-oro-osc); cursor: pointer;
}
.tf-rma__oferta:hover { border-color: var(--tf-rma-ink); }
.tf-rma__oferta:has(input:focus-visible) { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__oferta:has(input:checked) {
  border-color: var(--tf-rma-ink);
  background: var(--tf-rma-claro-2);
  box-shadow: inset 0 0 0 1px var(--tf-rma-ink);
}
.tf-rma__oferta-cuerpo > b { display: block; font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.tf-rma__oferta-cuerpo > span { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.5; color: var(--tf-rma-txt-2); }

/* La cifra es lo que convence, así que se separa del texto y se destaca. */
.tf-rma__oferta-cifra {
  margin-top: 10px !important; padding: 9px 11px;
  border: 1px solid var(--tf-rma-aviso-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-aviso-bg);
  font-size: .8125rem !important; line-height: 1.5;
  color: var(--tf-rma-aviso-txt) !important;
}
.tf-rma__oferta-cifra b { font-weight: 800; }

/* "Solo que lo retiren" no lleva cifra ni fondo: es la salida neutra. */
.tf-rma__oferta.es-simple { background: var(--tf-rma-claro-2); }
.tf-rma__oferta.es-simple:has(input:checked) { background: var(--tf-rma-claro-2); }

/* precio tachado en las tarjetas con descuento */
.tf-rma__opcion > span s { margin-left: 5px; font-weight: 500; color: var(--tf-rma-txt-3); }

/* ----------------------------------------------------------------- diálogo */
/* `<dialog>` nativo: trae el foco atrapado, el Escape y el scrim sin JavaScript
   propio. El modal a mano de la landing mayorista tuvo que resolver las tres
   cosas por separado. */

.tf-rma__dialogo {
  width: min(560px, calc(100% - 28px));
  max-height: calc(100dvh - 32px);
  padding: 0; margin: auto;
  border: 0; border-radius: var(--tf-rma-r);
  background: transparent;
  overflow: visible;
}
.tf-rma__dialogo::backdrop { background: rgba(13, 13, 13, .72); }

.tf-rma__dialogo-caja {
  position: relative;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 26px 22px 22px;
  border-radius: var(--tf-rma-r);
  background: var(--tf-rma-claro);
  color: var(--tf-rma-txt);
}
@media (min-width: 700px) { .tf-rma__dialogo-caja { padding: 32px 30px 26px; } }

.tf-rma__dialogo-caja h2 {
  margin: 0 0 14px; padding-right: 40px;
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.2;
}
.tf-rma__dialogo-caja p { margin: 0 0 14px; font-size: .875rem; line-height: 1.6; color: var(--tf-rma-txt-2); }
.tf-rma__dialogo-caja p b { color: var(--tf-rma-txt); font-weight: 700; }

.tf-rma__dialogo-x {
  /* z-index: la foto del selector ocupa la esquina superior y sin esto el aspa
     queda debajo — se ve el modal sin forma de cerrarlo salvo Escape, que en
     un telefono no existe. */
  z-index: 3;
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--tf-rma-linea-2); border-radius: 50%;
  background: var(--tf-rma-claro); color: var(--tf-rma-txt);
  cursor: pointer;
}
.tf-rma__dialogo-x:hover,
.tf-rma__dialogo-x:focus,
.tf-rma__dialogo-x:active { background: var(--tf-rma-ink); color: #fff; border-color: var(--tf-rma-ink); }
.tf-rma__dialogo-x:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__dialogo-x svg { width: 15px; height: 15px; }

.tf-rma__ayuda-lista { margin: 0 0 16px; }
.tf-rma__ayuda-lista dt {
  margin-top: 14px;
  font-size: .875rem; font-weight: 800; line-height: 1.35; color: var(--tf-rma-txt);
}
.tf-rma__ayuda-lista dt:first-child { margin-top: 0; }
.tf-rma__ayuda-lista dd {
  margin: 4px 0 0; padding-left: 12px;
  border-left: 2px solid var(--tf-rma-oro);
  font-size: .8125rem; line-height: 1.55; color: var(--tf-rma-txt-2);
}
.tf-rma__ayuda-pie {
  padding: 12px 13px; margin-bottom: 18px !important;
  border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-2);
  font-size: .8125rem !important;
}

/* ------------------------------------------------- selector de variación */
/* Una tarjeta del catálogo es un producto; aquí se elige la variación que se
   despacha. Dos columnas en escritorio — foto grande y lista — y una sola en
   el teléfono, con la foto arriba y recortada para que la lista entre sin
   scroll. */

/* ⚠️ `overflow: hidden` LE QUITABA EL SCROLL A LA CAJA DEL DIALOGO.
   Va despues de `.tf-rma__dialogo-caja { overflow-y: auto }` y con la misma
   especificidad, asi que ganaba. Y el presupuesto vertical no cabe: 34dvh de
   foto + 20 de relleno + 69 de tiras + 52dvh del panel = 86dvh + 89 px, contra
   los `100dvh - 32` de la caja. En un telefono de 667 px de alto el boton
   dorado que confirma la eleccion salia cortado y no habia forma de alcanzarlo.
   En vertical scrollea; en horizontal sigue recortando, que es lo que conserva
   el radio de las esquinas. */
.tf-rma__selector { padding: 0; overflow: hidden auto; }

/* En el telefono el panel de datos toma lo que sobre en vez de pedir su 52dvh. */
@media (max-width: 699px) {
  .tf-rma__selector { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
  .tf-rma__selector-media { flex: 0 0 auto; }
  .tf-rma__selector-info { max-height: none; flex: 1 1 auto; min-height: 0; }
}

@media (min-width: 700px) {
  .tf-rma__selector {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
  }
}

/* LA FOTO SE ADAPTA, NO SE RECORTA.
   Con `cover` la foto se ampliaba hasta llenar la caja: en un producto vertical
   eso recortaba la mitad y ademas se veia pixelado, porque la fuente era la
   miniatura del catalogo estirada. Ahora `contain` sobre fondo blanco —el mismo
   fondo del estudio— y el servidor manda la talla `large`. */
.tf-rma__selector-media {
  position: relative;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: #fff;
}
.tf-rma__selector-foto {
  display: grid; place-items: center;
  min-height: 0; padding: 10px;
}
.tf-rma .tf-rma__selector-foto > img {
  display: block;
  width: 100%; height: auto; max-height: 34dvh;
  object-fit: contain; object-position: center;
}
@media (min-width: 700px) {
  .tf-rma__selector-foto { padding: 18px; }
  .tf-rma .tf-rma__selector-foto > img { max-height: min(56dvh, 460px); }
}

.tf-rma__selector-tiras {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--tf-rma-linea);
  scrollbar-width: none;
}
.tf-rma__selector-tiras::-webkit-scrollbar { display: none; }

.tf-rma__tira {
  flex: 0 0 48px; width: 48px; height: 48px; padding: 3px; overflow: hidden;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
  cursor: pointer;
}
.tf-rma .tf-rma__tira img { width: 100%; height: 100%; object-fit: contain; }
.tf-rma__tira:hover { border-color: var(--tf-rma-ink); }
.tf-rma__tira:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__tira.es-puesta { border-color: var(--tf-rma-ink); box-shadow: inset 0 0 0 1px var(--tf-rma-ink); }

.tf-rma__selector-info {
  display: flex; flex-direction: column;
  max-height: 52dvh; overflow-y: auto;
  padding: 22px 20px 24px;
}
@media (min-width: 700px) { .tf-rma__selector-info { max-height: calc(100dvh - 32px); padding: 30px 28px; } }

.tf-rma__selector-info h2 { margin: 0 0 6px; padding-right: 34px; font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.tf-rma__selector-ayuda { margin: 0 0 16px; font-size: .8125rem; line-height: 1.5; color: var(--tf-rma-txt-3); }

.tf-rma__selector-lista { display: grid; gap: 8px; }

.tf-rma__variante {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.tf-rma .tf-rma__variante img {
  width: 46px; height: 46px;
  border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-3);
  object-fit: cover;
}
.tf-rma__variante:hover { border-color: var(--tf-rma-ink); background: var(--tf-rma-claro-2); }
.tf-rma__variante:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__variante-txt > b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.tf-rma__variante-txt > span { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 700; color: var(--tf-rma-txt-2); }
.tf-rma__variante-txt s { margin-left: 5px; font-weight: 500; color: var(--tf-rma-txt-3); }

.tf-rma__variante[disabled],
.tf-rma__variante[disabled]:hover {
  border-color: var(--tf-rma-linea); background: var(--tf-rma-claro-3);
  cursor: not-allowed; opacity: .7;
}
.tf-rma__variante[disabled] .tf-rma__variante-txt > span { color: var(--tf-rma-txt-3); font-weight: 500; }
/* La etiqueta de la variante agotada, tachada como las tallas: misma señal en
   las tres superficies que ofrecen producto. */
.tf-rma__variante[disabled] .tf-rma__variante-txt > b {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--tf-rma-mal);
}

/* «17 opciones» bajo la tarjeta: avisa de que al elegir hay un paso más.
   Se selecciona por CLASE, no por posición. Deducirlo de «es el segundo <em>»
   funcionaba mientras todas las grillas emitieran dos; en cuanto el catálogo de
   extras añadió el sello del descuento, la misma cifra salía como pastilla en
   una tarjeta y como texto verde plano en la de al lado. */
.tf-rma__opcion > em.tf-rma__pie-vars {
  display: inline-flex; align-items: center;
  margin: 8px 11px 0; padding: 3px 8px;
  border: 1px solid var(--tf-rma-linea-2); border-radius: 999px;
  background: var(--tf-rma-claro-2);
  font-size: .625rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tf-rma-txt-2);
}

/* ------------------------------------------------------------- swatches */
/* Elegir un color leyendo su nombre es exactamente lo que un swatch existe
   para evitar. Los datos salen de Iconic, igual que en la ficha de producto. */

.tf-rma__atributos { display: grid; gap: 16px; margin: 4px 0 16px; }

.tf-rma__atributo { min-width: 0; margin: 0; padding: 0; border: 0; }
.tf-rma__atributo legend {
  margin-bottom: 8px; padding: 0;
  font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tf-rma-txt-2);
}

/* El valor elegido se escribe junto a la etiqueta. Un circulo de color no dice
   «Café» por si solo, y el nombre solo aparece al pasar el raton — que en un
   telefono no existe. */
.tf-rma__atributo legend em {
  margin-left: 6px;
  font-style: normal; font-weight: 700; font-size: .75rem;
  letter-spacing: 0; text-transform: none;
  color: var(--tf-rma-txt);
}

.tf-rma__swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* La TALLA se lee: pastilla de texto, con su ancho. */
.tf-rma__swatch {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box;
  min-height: 40px; min-width: 44px; padding: 0 13px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
  font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1;
  color: var(--tf-rma-txt);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.tf-rma__swatch:hover:not([disabled]) { border-color: var(--tf-rma-ink); }
.tf-rma__swatch:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }
.tf-rma__swatch[aria-pressed="true"] {
  border-color: var(--tf-rma-ink);
  box-shadow: inset 0 0 0 1px var(--tf-rma-ink);
}

/* ⚠️ EL AGOTADO SE TACHA. Antes la etiqueta llevaba una coletilla —«M · en
   Rojo», «L · agotado»— y en un producto donde solo queda la S salían tres
   seguidas: se lee como si la talla fuera roja, y confunde más de lo que
   aclara. Una talla tachada se entiende sin leer. */
.tf-rma__swatch[disabled],
.tf-rma__swatch[disabled]:hover {
  border-color: var(--tf-rma-linea); background: var(--tf-rma-claro-3);
  color: var(--tf-rma-txt-3); cursor: not-allowed;
  opacity: .65;
}
.tf-rma__swatch > span { display: inline-block; }
.tf-rma__swatch[disabled] > span,
.tf-rma__swatch.es-otra > span {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--tf-rma-mal);
}
/* «Existe, pero no con lo que llevas elegido»: tachado igual —para el cliente
   no lo hay— pero sin apagar y clicable, porque al tocarlo se recoloca el
   resto. Apagarlo dejaria encerrado a quien quiere justo esa combinacion. */
.tf-rma__swatch.es-otra { color: var(--tf-rma-txt-3); }

/* EL COLOR SE VE: 28 px, medida de la landing mayorista.
   54 px era el tamano de un boton, no el de una muestra de color: con diez
   colores se comia la ficha entera. 28 px sigue por encima del minimo tactil de
   WCAG 2.2 (24 px) y deja ver diez de un vistazo. */
.tf-rma__swatch.es-visual {
  width: 28px; height: 28px;
  min-width: 0; min-height: 0; padding: 2px; gap: 0;
  border-radius: 6px; overflow: hidden;
}
.tf-rma .tf-rma__swatch.es-visual img {
  display: block; width: 100%; height: 100%;
  border-radius: 3px; object-fit: cover;
}
/* El filete interior es para que un color claro —blanco, amarillo— siga
   teniendo borde sobre fondo blanco. */
.tf-rma__swatch-color {
  display: block; width: 100%; height: 100%;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .16);
}
.tf-rma__swatch.es-visual[aria-pressed="true"] {
  border-color: var(--tf-rma-oro);
  box-shadow: 0 0 0 1.5px var(--tf-rma-oro) inset;
}
/* «Existe, pero no con lo que llevas elegido». No se apaga: al pulsarlo el
   resto se recoloca solo. Apagarlo dejaria encerrado a quien quiere justo la
   otra combinacion. */
/* El punteado ya es la marca. Apagarlo ademas restaba contraste, y la unica
   forma de «encenderlo» era el hover — que en un telefono no existe. */
.tf-rma__swatch.es-otra { border-style: dashed; }
.tf-rma__ruta-puntos { margin: 10px 0 0; font-size: .8125rem; }

.tf-rma__atributo-nota {
  margin: 8px 0 0; padding: 0;
  font-size: .6875rem; line-height: 1.45; color: var(--tf-rma-txt-3);
}

/* Sin texto que tachar, el agotado se marca con la diagonal — que es la misma
   idea: una raya encima de lo que no hay. */
.tf-rma__swatch.es-visual[disabled] { opacity: 1; }
.tf-rma__swatch.es-visual.es-otra::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right,
    transparent 47%, var(--tf-rma-mal) 47%, var(--tf-rma-mal) 53%, transparent 53%);
}
.tf-rma__swatch.es-visual[disabled]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right,
    transparent 47%, var(--tf-rma-mal) 47%, var(--tf-rma-mal) 53%, transparent 53%);
}

.tf-rma__selector-precio { margin: 0 0 14px; font-size: 1.0625rem; }
.tf-rma__selector-precio strong { font-weight: 800; }
.tf-rma__selector-precio s { margin-left: 6px; font-size: .875rem; font-weight: 500; color: var(--tf-rma-txt-3); }

/* --------------------------------------------------- agrega algo mas */
/* Un cambio es una venta que ya se perdio una vez. El camion va a ir igual a
   esa direccion, asi que sumar un producto no cuesta un envio mas — y ese es
   el unico argumento honesto para ofrecerlo aqui. Por eso el bloque NO grita:
   va en el tono de un aviso, no en el de una promocion. */

.tf-rma__extras {
  margin: 22px 0 0; padding: 16px;
  border: 1.5px dashed var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro-2);
}
.tf-rma__extras-head { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.tf-rma__extras-head svg { width: 20px; height: 20px; color: var(--tf-rma-oro-txt); }
.tf-rma__extras-head b { display: block; font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.tf-rma__extras-head span { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.5; color: var(--tf-rma-txt-2); }

.tf-rma__extras-lista { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
/* ⚠️ CUATRO COLUMNAS NO CABEN EN UN TELEFONO.
   `44px minmax(0,1fr) auto auto` con las dos `auto` sin encoger —el control de
   cantidad mide 91 px y el aspa 30— dejaba 68 px para el nombre: seis renglones
   de dos palabras, y las largas pintadas encima de los botones. La cantidad
   baja a su propia linea y el nombre parte palabras. */
.tf-rma__extras-lista li {
  display: grid; gap: 4px 10px; align-items: center;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "img txt x" "img qty x";
  padding: 8px; border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
}
.tf-rma .tf-rma__extras-lista img { grid-area: img; }
.tf-rma__extras-txt { grid-area: txt; overflow-wrap: anywhere; }
.tf-rma__extras-lista .tf-rma__qty { grid-area: qty; justify-self: start; }
.tf-rma__extras-x { grid-area: x; }
@media (min-width: 560px) {
  .tf-rma__extras-lista li {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas: "img txt qty x";
  }
  .tf-rma__extras-lista .tf-rma__qty { justify-self: end; }
}
.tf-rma .tf-rma__extras-lista img {
  width: 44px; height: 44px; border-radius: var(--tf-rma-r-xs);
  background: #fff; object-fit: contain;
}
.tf-rma__extras-txt { min-width: 0; }
.tf-rma__extras-txt b { display: block; font-size: .8125rem; font-weight: 700; line-height: 1.3; }
.tf-rma__extras-txt span { display: block; margin-top: 2px; font-size: .75rem; color: var(--tf-rma-txt-3); }

/* Cantidad: el mismo patron de la landing mayorista. */
.tf-rma__qty {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1.5px solid var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro);
}
.tf-rma__qty button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 1rem; font-weight: 800; line-height: 1;
  color: var(--tf-rma-txt); cursor: pointer;
}
.tf-rma__qty button:hover { color: var(--tf-rma-oro-txt); }
.tf-rma__qty button:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: -2px; }
.tf-rma__qty b { min-width: 20px; text-align: center; font-size: .8125rem; font-weight: 800; }

.tf-rma__extras-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--tf-rma-txt-3); cursor: pointer;
}
.tf-rma__extras-x svg { width: 15px; height: 15px; }
.tf-rma__extras-x:hover { color: var(--tf-rma-mal); background: var(--tf-rma-claro-3); }
.tf-rma__extras-x:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 1px; }

.tf-rma__extras-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--tf-rma-linea);
  font-size: .8125rem; color: var(--tf-rma-txt-2);
}
.tf-rma__extras-total strong { font-size: .9375rem; font-weight: 800; color: var(--tf-rma-txt); }
.tf-rma__extras .tf-rma__btn { margin-top: 14px; }

/* ------------------------------------------------ catalogo en el dialogo */
/* Es el mismo dialogo del selector, con la cuadricula dentro. La caja se
   limita en alto y la cuadricula scrollea sola: sin eso, con doce tarjetas el
   boton de cerrar se iba fuera de la pantalla en el telefono. */

.tf-rma__catalogo { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.tf-rma__catalogo h2 { margin: 0 34px 6px 0; font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.tf-rma__catalogo .tf-rma__campo { margin: 14px 0 12px; }
/* ⚠️ SCROLLEA EL ENVOLTORIO, NO LA GRILLA.
   Con `flex: 1 1 auto` + `overflow-y: auto` sobre el propio grid, el navegador
   le da una altura DEFINIDA y reparte sus filas dentro: a 390 px cada tarjeta
   quedaba con 120 px para 285 px de contenido, y como la tarjeta lleva
   `overflow: hidden` solo se veia la foto recortada — sin nombre y sin precio.
   Un div de por medio, y la grilla vuelve a medir por contenido. */
.tf-rma__catalogo-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 -4px; padding: 2px 4px 4px;
}
.tf-rma__catalogo .tf-rma__opciones { margin-top: 0; }

/* El sello del descuento del upsell, sobre la foto.
   Va con `> em.` porque `.tf-rma__opcion > em` (0,1,1) le ganaba a `.tf-rma__sello`
   (0,1,0): el sello salia con el VERDE de «Ahorras $X» sobre la pastilla negra
   —2,1 de contraste, el mismo numero que la cabecera de este archivo llama
   REPROBADO— y con el margen heredado, que en una caja absoluta lo movia 11 px
   a la derecha de donde dice `left`. */
.tf-rma__opcion > em.tf-rma__sello {
  position: absolute; z-index: 2; top: 8px; left: 8px;
  margin: 0; padding: 3px 7px;
  border-radius: 999px;
  background: var(--tf-rma-ink); color: var(--tf-rma-oro);
  font-size: .625rem; font-weight: 800; font-style: normal; letter-spacing: .04em;
}

/* «No encontré lo que llegó por error»: una salida, no un boton de accion. */
.tf-rma__ticket {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 14px;
  border: 1px dashed var(--tf-rma-linea-2); border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-2);
  font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1.3;
  color: var(--tf-rma-txt-2); text-align: left; cursor: pointer;
}
.tf-rma__ticket svg { width: 16px; height: 16px; flex: none; color: var(--tf-rma-oro-txt); }
.tf-rma__ticket:hover { border-color: var(--tf-rma-ink); color: var(--tf-rma-txt); }
.tf-rma__ticket:focus-visible { outline: 2px solid var(--tf-rma-oro); outline-offset: 2px; }

.tf-rma__fila-nota {
  margin: 8px 0 0; padding: 0;
  font-size: .75rem; line-height: 1.5; color: var(--tf-rma-txt-3);
}

/* ------------------------------------------------------ el paso del pago */
/* Cuando el caso implica pagar algo, ese paso existe y se cuenta ANTES de
   confirmar. Enterarse despues es la sorpresa que genera el reclamo. */

.tf-rma__pago {
  margin: 20px 0 0; padding: 16px;
  border: 1.5px solid var(--tf-rma-aviso-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-aviso-bg);
}
.tf-rma__pago-head { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: start; }
.tf-rma__pago-head svg { width: 19px; height: 19px; margin-top: 2px; color: var(--tf-rma-aviso-txt); }
.tf-rma__pago-head b { display: block; font-size: .9375rem; font-weight: 800; color: var(--tf-rma-aviso-txt); }
.tf-rma__pago-head span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--tf-rma-txt-2); }

.tf-rma__pago-pasos {
  display: grid; gap: 8px;
  margin: 14px 0 0; padding-left: 20px;
}
.tf-rma__pago-pasos li { font-size: .8125rem; line-height: 1.5; color: var(--tf-rma-txt-2); }
.tf-rma__pago-pasos li b { color: var(--tf-rma-txt); font-weight: 700; }
.tf-rma__pago-pie {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--tf-rma-aviso-linea);
  font-size: .75rem; line-height: 1.5; color: var(--tf-rma-txt-2);
}

/* El medio de pago: las mismas tarjetas-radio de las soluciones, con el logo
   de la pasarela a la derecha. El logo lo sirve el propio plugin (su `icon`). */
.tf-rma__metodos { margin-top: 14px; }
.tf-rma__metodo { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; }
/* Movil primero: el logo cede sitio al texto, que es lo que decide. Con 96 px
   fijos, «Con tu cuenta de Mercado Pago o con tarjeta» salia en cuatro lineas. */
.tf-rma .tf-rma__metodo-logo { display: block; width: auto; max-width: 60px; height: 20px; object-fit: contain; }
@media (min-width: 700px) {
  .tf-rma .tf-rma__metodo-logo { max-width: 96px; height: 24px; }
}
.tf-rma__pago .tf-rma__error { margin-top: 10px; }
.tf-rma__pago.es-mal .tf-rma__error { display: flex; }
.tf-rma__pago.es-mal .tf-rma__metodo { border-color: var(--tf-rma-mal); }

/* El comprobante que Transbank pide en la pagina de exito: el cobro de un
   cambio vuelve aqui y no al «gracias», que es donde lo pinta su plugin. */
.tf-rma__comprobante {
  margin: 0; padding: 4px 16px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro);
}
.tf-rma__comprobante > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .8125rem; }
.tf-rma__comprobante > div + div { border-top: 1px solid var(--tf-rma-linea); }
.tf-rma__comprobante dt { color: var(--tf-rma-txt-2); }
.tf-rma__comprobante dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.tf-rma__estado.es-mal svg { color: var(--tf-rma-mal-txt); }

/* --------------------------------------------------- la captura del correo */

.tf-rma__captura {
  display: block; width: 100%; height: auto;
  margin: 4px 0 16px;
  border: 1px solid var(--tf-rma-linea); border-radius: var(--tf-rma-r-s);
}

/* enlace de ayuda en linea, dentro de una etiqueta */
.tf-rma__enlace--ayuda {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 4px;
  text-transform: none; letter-spacing: 0;
}
.tf-rma__enlace--ayuda svg { width: 14px; height: 14px; }

/* ==========================================================================
   FRONTERA CON EL TEMA
   El unico sitio donde AGENTS.md permite `!important`. Los cinco defectos
   estan medidos en produccion sobre /mayorista/ el 2026-08-19, no supuestos:

   1. Astra impone `font-family: Outfit` a h1..h6 con regla propia; la familia
      del contenedor no basta.
   2. `button:not([class*="klaviyo"])...` pone `border-width: 2px` a TODOS los
      botones.
   3. `color: #0f172a` sobre h1..h6. Como el color es heredable, las secciones
      oscuras lo daban por heredado del contenedor y NO lo declaraban en el
      encabezado: los titulos sobre negro salian azul marino, contraste 1.09.
      `:where()` deja la especificidad en 0, asi que gana al tema (selector de
      elemento) y pierde con mis propias clases, que es justo lo que hace falta.
   4. Todo <a> nuevo hereda el morado del Kit 882, en normal y en hover.
   5. Astra pone altura minima, relleno y radio propio a todo <input>.
   ========================================================================== */

.tf-rma :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

.tf-rma h1, .tf-rma h2, .tf-rma h3,
.tf-rma h4, .tf-rma h5, .tf-rma h6 {
  font-family: var(--font-body, Montserrat, "Helvetica Neue", Arial, sans-serif) !important;
}

.tf-rma a,
.tf-rma a:hover,
.tf-rma a:focus,
.tf-rma a:visited {
  color: var(--tf-rma-txt) !important;
  text-decoration: none;
  box-shadow: none !important;
}
.tf-rma a::before, .tf-rma a::after,
.tf-rma button::before, .tf-rma button::after { background: transparent !important; }
/* ...menos los pseudos que este portal SI usa para dibujar. */
.tf-rma .tf-rma__opcion::before { background: var(--tf-rma-claro-3) !important; }
.tf-rma .tf-rma__opcion[aria-pressed="true"]::after { background: var(--tf-rma-oro) !important; }
.tf-rma .tf-rma__step::before { background: var(--tf-rma-linea) !important; }
.tf-rma .tf-rma__step.is-done::before { background: var(--tf-rma-oro) !important; }
.tf-rma .tf-rma__hitos li::before { background: var(--tf-rma-claro) !important; }
.tf-rma .tf-rma__hitos li.es-hecho::before { background: var(--tf-rma-oro) !important; }

/* ...y menos el CTA blanco sobre negro: la regla de arriba mata el morado de
   Astra, pero aplicada al boton dejaria el texto negro sobre fondo negro. */
.tf-rma a.tf-rma__btn--ink,
.tf-rma a.tf-rma__btn--ink:visited { color: #fff !important; }

/* El CTA dorado tambien es un <a> desde que el paso 5 lleva a WhatsApp: sobre
   oro el texto va tinta, y al invertirse en hover va blanco. Sin estas dos
   reglas la frontera de arriba lo deja tinta sobre oro oscuro. */
.tf-rma a.tf-rma__btn--oro,
.tf-rma a.tf-rma__btn--oro:visited { color: var(--tf-rma-ink) !important; }
.tf-rma a.tf-rma__btn--oro:hover,
.tf-rma a.tf-rma__btn--oro:focus { color: #fff !important; }

/* Un enlace dentro de un aviso hereda su color -- si no, el morado del tema o
   el `color: inherit` de la frontera lo dejan indistinguible del texto. Se
   subraya, que es lo unico que lo delata como enlace en un bloque de color. */
.tf-rma .tf-rma__aviso a,
.tf-rma .tf-rma__aviso a:hover,
.tf-rma .tf-rma__aviso a:focus,
.tf-rma .tf-rma__aviso a:visited {
  color: inherit !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tf-rma a.tf-rma__btn--ink:hover,
.tf-rma a.tf-rma__btn--ink:focus { color: var(--tf-rma-ink) !important; }
.tf-rma__aside-pie a,
.tf-rma__aside-pie a:hover,
.tf-rma__aside-pie a:focus { color: var(--tf-rma-oro-txt) !important; }

/* El tema le da borde de 2px y radio propio a todo boton e input. La geometria
   la manda el portal. */
.tf-rma .tf-rma__enlace,
.tf-rma .tf-rma__enlace:hover,
.tf-rma .tf-rma__enlace:focus,
.tf-rma .tf-rma__enlace:active {
  min-height: 0 !important; height: auto !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--tf-rma-oro-txt) !important; text-decoration: underline;
}
.tf-rma .tf-rma__btn,
.tf-rma .tf-rma__unidad,
.tf-rma .tf-rma__solucion,
.tf-rma .tf-rma__talla { border-width: 1.5px !important; box-shadow: none; }

/* ⚠️ EL BOTON PRINCIPAL SALIA TRANSPARENTE Y SIN BORDE. EN PRODUCCION.
   Medido el 2026-08-24 sobre `/cambios-devoluciones/`: «Buscar mi pedido»
   computaba `background-color: rgba(0,0,0,0)` y `border-width: 0px` mientras
   la regla propia decia `var(--tf-rma-oro)`, la variable resolvia a #d8aa43 y
   el archivo estaba servido entero. En el prototipo local se veia dorado.

   La causa no es Astra: Klaviyo pone `klaviyo-prevent-body-scrolling` en el
   <body> y el sitio lleva una regla en linea que desactiva el estilo de los
   botones dentro de cualquier cosa que suene a Klaviyo —

     [class*="klaviyo"] :is(button, a.button) {
       background: transparent; border-width: medium !important;
       border-color: currentcolor !important; }

   — que con esa clase en el body pasa a alcanzar TODOS los botones de la
   pagina. Especificidad 21 con `!important`, contra los 10 de
   `.tf-rma__btn--oro`: gana el tema, y encima solo en produccion, que es donde
   Klaviyo carga.

   La defensa duplica la clase para subir a 30, y declara TAMBIEN
   `border-style`: sin el, `border-width: medium` computa 0 px porque el estilo
   del borde sigue siendo `none`. Van los cinco estados, como manda la receta:
   el tema los repinta todos. */
.tf-rma .tf-rma__btn.tf-rma__btn {
  border-style: solid !important;
  border-width: 1.5px !important;
}
.tf-rma .tf-rma__btn.tf-rma__btn--oro,
.tf-rma .tf-rma__btn.tf-rma__btn--oro:visited {
  background: var(--tf-rma-oro) !important;
  border-color: var(--tf-rma-oro) !important;
  color: var(--tf-rma-ink) !important;
}
.tf-rma .tf-rma__btn.tf-rma__btn--oro:hover,
.tf-rma .tf-rma__btn.tf-rma__btn--oro:focus,
.tf-rma .tf-rma__btn.tf-rma__btn--oro:active {
  background: var(--tf-rma-oro-osc) !important;
  border-color: var(--tf-rma-oro-osc) !important;
  color: #fff !important;
}
.tf-rma .tf-rma__btn.tf-rma__btn--ink,
.tf-rma .tf-rma__btn.tf-rma__btn--ink:visited {
  background: var(--tf-rma-ink) !important;
  border-color: var(--tf-rma-ink) !important;
  color: #fff !important;
}
.tf-rma .tf-rma__btn.tf-rma__btn--ink:hover,
.tf-rma .tf-rma__btn.tf-rma__btn--ink:focus,
.tf-rma .tf-rma__btn.tf-rma__btn--ink:active {
  background: var(--tf-rma-oro) !important;
  border-color: var(--tf-rma-oro) !important;
  color: var(--tf-rma-ink) !important;
}
.tf-rma .tf-rma__btn.tf-rma__btn--linea,
.tf-rma .tf-rma__btn.tf-rma__btn--linea:visited {
  background: var(--tf-rma-claro) !important;
  border-color: var(--tf-rma-linea-2) !important;
  color: var(--tf-rma-txt) !important;
}
.tf-rma .tf-rma__btn.tf-rma__btn--linea:hover,
.tf-rma .tf-rma__btn.tf-rma__btn--linea:focus,
.tf-rma .tf-rma__btn.tf-rma__btn--linea:active {
  background: var(--tf-rma-claro-2) !important;
  border-color: var(--tf-rma-ink) !important;
  color: var(--tf-rma-txt) !important;
}
/* El boton de la etiqueta paga aqui su color propio. Sin estas reglas sale con
   el morado del Kit 882 y sin fondo: mientras `klaviyo-prevent-body-scrolling`
   este en el <body>, la regla en linea del sitio alcanza CUALQUIER <button> de
   la pagina, y este es el unico de su pantalla — no hay vecino cuyo estilo
   delate el fallo, asi que se veria roto sin que nadie lo note en el asistente.
   Los cinco estados, como los demas: el tema los repinta todos. */
.tf-rma .tf-rma__btn.tf-rma__btn--etiqueta,
.tf-rma .tf-rma__btn.tf-rma__btn--etiqueta:visited {
  background: var(--tf-rma-oro) !important;
  border-color: var(--tf-rma-oro) !important;
  color: var(--tf-rma-ink) !important;
}
.tf-rma .tf-rma__btn.tf-rma__btn--etiqueta:hover,
.tf-rma .tf-rma__btn.tf-rma__btn--etiqueta:focus,
.tf-rma .tf-rma__btn.tf-rma__btn--etiqueta:active {
  background: var(--tf-rma-oro-osc) !important;
  border-color: var(--tf-rma-oro-osc) !important;
  color: #fff !important;
}
/* Deshabilitado va DESPUES: si no, el hover de arriba lo repinta como si
   estuviera vivo y el cliente pulsa un boton que no hace nada. */
.tf-rma .tf-rma__btn.tf-rma__btn[disabled],
.tf-rma .tf-rma__btn.tf-rma__btn[disabled]:hover,
.tf-rma .tf-rma__btn.tf-rma__btn[disabled]:focus,
.tf-rma .tf-rma__btn.tf-rma__btn[disabled]:active {
  background: var(--tf-rma-claro-3) !important;
  border-color: var(--tf-rma-linea) !important;
  color: var(--tf-rma-txt-3) !important;
}

/* ⚠️ LA MISMA TRAMPA ALCANZA A TODO LO QUE EL SITIO TRATA COMO BOTON, Y LA
   PRIMERA VERSION DE ESTA LISTA SE DEJO LA MITAD FUERA.

   Con `klaviyo-prevent-body-scrolling` en el <body>, la regla en linea del
   sitio —[class*="klaviyo"] :is(button, a.button), especificidad 21— alcanza
   TODOS los botones de la pagina y les quita el fondo y el borde. Se defendio
   `.tf-rma__btn` y `.tf-rma__swatch`, y quedaron sin defender la talla, la
   variante, el aspa de cerrar y el aspa de quitar una foto.

   El precio de cada omision, medido: la talla elegida salia BLANCA SOBRE BLANCO
   —y elegir la talla es toda la decision de ese paso—, las filas del selector
   perdian su tarjeta y el agotado dejaba de distinguirse, y el aspa de cerrar
   el dialogo desaparecia: circulo transparente e icono blanco sobre caja
   blanca, sin tecla Escape en un telefono.

   La geometria va junta; el color, por componente. `border-style` es
   imprescindible: Klaviyo fuerza `border-width: medium !important` y sin estilo
   de borde eso computa 0 px. El test 19 comprueba que ningun control del
   asistente se quede otra vez fuera de esta lista. */
.tf-rma .tf-rma__swatch.tf-rma__swatch,
.tf-rma .tf-rma__opcion.tf-rma__opcion,
.tf-rma .tf-rma__variante.tf-rma__variante,
.tf-rma .tf-rma__tira.tf-rma__tira,
.tf-rma .tf-rma__unidad.tf-rma__unidad,
.tf-rma .tf-rma__solucion.tf-rma__solucion,
.tf-rma .tf-rma__talla.tf-rma__talla,
.tf-rma .tf-rma__oferta.tf-rma__oferta,
.tf-rma .tf-rma__ticket.tf-rma__ticket {
  border-style: solid !important;
  border-width: 1.5px !important;
}
.tf-rma .tf-rma__swatch.es-otra { border-style: dashed !important; }
/* El tema pone borde y sombra a toda <img> dentro de un control. La portada de
   lo elegido no es un boton: se le quita explicitamente o sale con marco. */
.tf-rma .tf-rma__eje-foto {
  border: 0 !important; box-shadow: none !important; border-radius: var(--tf-rma-r-xs) !important;
}
.tf-rma .tf-rma__swatch img { border: 0 !important; box-shadow: none !important; }
.tf-rma .tf-rma__ticket.tf-rma__ticket { border-style: dashed !important; border-width: 1px !important; }
.tf-rma .tf-rma__qty.tf-rma__qty { border-style: solid !important; border-width: 1.5px !important; }

/* LA TALLA. Es la decisión del paso, y salía invisible. */
.tf-rma .tf-rma__talla.tf-rma__talla,
.tf-rma .tf-rma__talla.tf-rma__talla:hover,
.tf-rma .tf-rma__talla.tf-rma__talla:focus,
.tf-rma .tf-rma__talla.tf-rma__talla:active,
.tf-rma .tf-rma__talla.tf-rma__talla:focus-visible {
  background: var(--tf-rma-claro) !important;
  border-color: var(--tf-rma-linea-2) !important;
  color: var(--tf-rma-txt) !important;
}
.tf-rma .tf-rma__talla.tf-rma__talla[aria-pressed="true"],
.tf-rma .tf-rma__talla.tf-rma__talla[aria-pressed="true"]:hover,
.tf-rma .tf-rma__talla.tf-rma__talla[aria-pressed="true"]:focus {
  background: var(--tf-rma-ink) !important;
  border-color: var(--tf-rma-ink) !important;
  color: #fff !important;
}
.tf-rma .tf-rma__talla.tf-rma__talla[disabled],
.tf-rma .tf-rma__talla.tf-rma__talla[disabled]:hover {
  background: var(--tf-rma-claro-3) !important;
  border-color: var(--tf-rma-linea) !important;
  color: var(--tf-rma-txt-3) !important;
  /* El tema declara `text-decoration` en los botones y borraba el tachado, que
     aqui es la unica senal de que esa talla no esta. */
  text-decoration: line-through !important;
  text-decoration-color: var(--tf-rma-mal) !important;
}

/* LAS FILAS DEL SELECTOR, con su agotado. */
.tf-rma .tf-rma__variante.tf-rma__variante,
.tf-rma .tf-rma__variante.tf-rma__variante:hover,
.tf-rma .tf-rma__variante.tf-rma__variante:focus,
.tf-rma .tf-rma__variante.tf-rma__variante:active {
  background: var(--tf-rma-claro) !important;
  border-color: var(--tf-rma-linea-2) !important;
}
.tf-rma .tf-rma__variante.tf-rma__variante[disabled],
.tf-rma .tf-rma__variante.tf-rma__variante[disabled]:hover {
  background: var(--tf-rma-claro-3) !important;
  border-color: var(--tf-rma-linea) !important;
}

/* EL ASPA DE CERRAR. En un teléfono no hay tecla Escape: si no se ve, no hay
   forma de salir salvo adivinar que el fondo también cierra. */
.tf-rma .tf-rma__dialogo-x.tf-rma__dialogo-x,
.tf-rma .tf-rma__dialogo-x.tf-rma__dialogo-x:visited {
  background: var(--tf-rma-claro) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--tf-rma-linea-2) !important;
  color: var(--tf-rma-txt) !important;
}
.tf-rma .tf-rma__dialogo-x.tf-rma__dialogo-x:hover,
.tf-rma .tf-rma__dialogo-x.tf-rma__dialogo-x:focus,
.tf-rma .tf-rma__dialogo-x.tf-rma__dialogo-x:active,
.tf-rma .tf-rma__dialogo-x.tf-rma__dialogo-x:focus-visible {
  background: var(--tf-rma-ink) !important;
  border-color: var(--tf-rma-ink) !important;
  color: #fff !important;
}

/* EL ASPA DE QUITAR UNA FOTO: iba blanca sobre la propia foto, y a 24 px justos
   —el mínimo de WCAG 2.2— encima de un fondo de estudio claro. */
.tf-rma .tf-rma__foto button.tf-rma__foto,
.tf-rma .tf-rma__foto > button,
.tf-rma .tf-rma__foto > button:focus-visible {
  width: 28px !important; height: 28px !important;
  background: var(--tf-rma-ink) !important;
  border-style: solid !important; border-width: 1px !important;
  border-color: #fff !important;
  color: #fff !important;
}
.tf-rma .tf-rma__foto > button:hover,
.tf-rma .tf-rma__foto > button:focus,
.tf-rma .tf-rma__foto > button:active {
  background: var(--tf-rma-mal) !important;
  border-color: #fff !important;
  color: #fff !important;
}
.tf-rma .tf-rma__foto > button svg { color: currentColor !important; stroke: currentColor !important; }
.tf-rma .tf-rma__campo input,
.tf-rma .tf-rma__campo select,
.tf-rma .tf-rma__campo textarea {
  border-width: 1px !important;
  border-radius: var(--tf-rma-r-xs) !important;
  min-height: 48px !important;
  height: auto !important;
}
/* La altura la fija el bloque de arriba, que es el que sube el aspa a 28 px:
   24 px es exactamente el minimo de WCAG 2.2 y quedaba justo encima de la propia
   foto. Aqui solo el resto de la geometria, o esta regla —que va despues y mide
   lo mismo— volveria a bajarla. */
.tf-rma .tf-rma__foto button,
.tf-rma .tf-rma__foto button:hover,
.tf-rma .tf-rma__foto button:focus,
.tf-rma .tf-rma__foto button:active {
  min-height: 0 !important; padding: 0 !important;
  border-width: 1px !important; line-height: 1 !important;
}

/* Los label del portal: el tema pinta `color` en los label de formulario y en
   el fieldset oscuro salian blancos sobre blanco (bug medido en el modal de
   despacho de mayorista). */
.tf-rma .tf-rma__campo > label,
.tf-rma .tf-rma__label { color: var(--tf-rma-txt-2) !important; }
.tf-rma .tf-rma__fieldset > legend { color: var(--tf-rma-txt) !important; }

/* Astra corta el contenedor: el gutter lo pone el portal.

   Y `.ast-container` es FLEX. Su `<main>` queda como `flex: 0 1 auto`, asi que
   NO ocupa los 1240 px del contenedor: encoge a su contenido — medido en
   produccion, 1041,7 px. Eso descuadra el `50%` del sangrado del hero y lo
   saca 92 px a la izquierda. En esta pagina el contenedor no tiene barra
   lateral, solo el <main>, asi que volverlo bloque es seguro y es lo que hace
   que los porcentajes vuelvan a ser exactos. */
body.tf-code-rma-active .ast-container {
  padding-inline: 0;
  display: block;
}

/* EL FONDO Y EL RECORTE VIVEN EN `#content`, QUE YA MIDE TODO EL ANCHO.
   Antes sangraban la raiz Y el hero, uno dentro del otro. No funciona: el
   `50%` del hero se resuelve contra la caja de contenido de una raiz que ya
   estaba desplazada, y el hero salia 92 px a la izquierda. Medido en
   produccion. Con un solo nivel de sangrado los porcentajes son exactos.
   El color va literal porque `--tf-rma-claro-2` vive bajo `.tf-rma`, y esta
   regla es de su envoltorio; si cambia el token, cambia aqui tambien. */
body.tf-code-rma-active #content {
  background: #f7f6f4;
  overflow-x: clip;
}


/* El dialogo vive dentro de .tf-rma, asi que hereda la frontera de arriba —
   pero su <h2> y su aspa necesitan las suyas: el tema repinta el encabezado y
   deja el aspa invertida al enfocarla, y el dialogo SE ABRE con el foco puesto
   justo ahi. Es el mismo bug que en el modal de mayorista. */
.tf-rma .tf-rma__dialogo-caja h2 { color: var(--tf-rma-txt) !important; }
.tf-rma .tf-rma__dialogo-x,
.tf-rma .tf-rma__dialogo-x:hover,
.tf-rma .tf-rma__dialogo-x:focus,
.tf-rma .tf-rma__dialogo-x:active,
.tf-rma .tf-rma__dialogo-x:focus-visible {
  min-height: 0 !important; height: 34px !important; padding: 0 !important;
  border-width: 1px !important; line-height: 1 !important; box-shadow: none !important;
}
.tf-rma .tf-rma__dialogo-x svg { color: currentColor !important; stroke: currentColor !important; }
.tf-rma .tf-rma__ayuda-lista dt { color: var(--tf-rma-txt) !important; }
.tf-rma .tf-rma__oferta { border-width: 1.5px !important; }

.tf-rma .tf-rma__variante,
.tf-rma .tf-rma__tira { border-width: 1.5px !important; box-shadow: none; }
.tf-rma .tf-rma__selector-info h2 { color: var(--tf-rma-txt) !important; }
.tf-rma .tf-rma__variante-txt > b { color: var(--tf-rma-txt) !important; }

/* ⚠️ EL MORADO DE ASTRA EN LO SELECCIONADO.
   El tema pinta fondo propio en `button` al enfocarlo y al pulsarlo, y una
   tarjeta del catalogo se queda CON EL FOCO despues de elegirla: quedaba un
   bloque morado sobre la foto. La seleccion la marca el borde y el check, no
   un fondo. Van los cinco estados porque el tema los repinta todos. */
.tf-rma .tf-rma__opcion,
.tf-rma .tf-rma__opcion:hover,
.tf-rma .tf-rma__opcion:focus,
.tf-rma .tf-rma__opcion:active,
.tf-rma .tf-rma__opcion:focus-visible,
.tf-rma .tf-rma__opcion[aria-pressed="true"] {
  background: var(--tf-rma-claro) !important;
  color: var(--tf-rma-txt) !important;
}
.tf-rma .tf-rma__swatch,
.tf-rma .tf-rma__swatch:hover,
.tf-rma .tf-rma__swatch:focus,
.tf-rma .tf-rma__swatch:active,
.tf-rma .tf-rma__swatch:focus-visible {
  background: var(--tf-rma-claro) !important;
  color: var(--tf-rma-txt) !important;
  border-width: 1.5px !important;
}
.tf-rma .tf-rma__swatch[disabled],
.tf-rma .tf-rma__swatch[disabled]:hover {
  background: var(--tf-rma-claro-3) !important;
  color: var(--tf-rma-txt-3) !important;
}
/* El tema le mete relleno y altura de linea a todo <button>, y eso descentraba
   el chip de color dentro de su caja de 28 px. Mismo arreglo que en mayorista. */
.tf-rma .tf-rma__swatch.es-visual,
.tf-rma .tf-rma__swatch.es-visual:hover,
.tf-rma .tf-rma__swatch.es-visual:focus,
.tf-rma .tf-rma__swatch.es-visual:active,
.tf-rma .tf-rma__swatch.es-visual:focus-visible {
  width: 28px !important; height: 28px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 2px !important; line-height: 1 !important;
  background: #fff !important;
}
.tf-rma .tf-rma__swatch.es-visual[aria-pressed="true"] {
  border-color: var(--tf-rma-oro) !important;
  box-shadow: 0 0 0 1.5px var(--tf-rma-oro) inset !important;
}
.tf-rma .tf-rma__swatch.es-visual[disabled],
.tf-rma .tf-rma__swatch.es-visual[disabled]:hover {
  background: #fff !important;
}
.tf-rma .tf-rma__tira,
.tf-rma .tf-rma__tira:hover,
.tf-rma .tf-rma__tira:focus,
.tf-rma .tf-rma__tira:active { background: var(--tf-rma-claro) !important; }
.tf-rma .tf-rma__atributo legend { color: var(--tf-rma-txt-2) !important; }

/* Los botones del carrito de extras son cuadrados y chicos: el tema les mete
   altura minima, relleno y fondo propio en los cinco estados, y el «+» acababa
   ocupando el ancho de la fila. */
/* ⚠️ LA CLASE VA DUPLICADA TAMBIEN AQUI.
   `.tf-rma .tf-rma__extras-x` mide 20 y `.tf-rma .tf-rma__qty button` mide 21:
   el primero pierde contra Klaviyo y el segundo EMPATA, que en una regla en
   linea del propio sitio significa perder por orden. Duplicando la clase suben
   a 30 y 31. */
.tf-rma .tf-rma__qty.tf-rma__qty button,
.tf-rma .tf-rma__qty.tf-rma__qty button:hover,
.tf-rma .tf-rma__qty.tf-rma__qty button:focus,
.tf-rma .tf-rma__qty.tf-rma__qty button:active,
.tf-rma .tf-rma__qty.tf-rma__qty button:focus-visible,
.tf-rma .tf-rma__extras-x.tf-rma__extras-x,
.tf-rma .tf-rma__extras-x.tf-rma__extras-x:hover,
.tf-rma .tf-rma__extras-x.tf-rma__extras-x:focus,
.tf-rma .tf-rma__extras-x.tf-rma__extras-x:active,
.tf-rma .tf-rma__extras-x.tf-rma__extras-x:focus-visible {
  min-height: 0 !important; padding: 0 !important;
  border: 0 !important; line-height: 1 !important;
  background: transparent !important; box-shadow: none !important;
}
.tf-rma .tf-rma__qty.tf-rma__qty button { width: 32px !important; height: 32px !important; color: var(--tf-rma-txt) !important; }
.tf-rma .tf-rma__extras-x.tf-rma__extras-x { width: 30px !important; height: 30px !important; color: var(--tf-rma-txt-3) !important; }
.tf-rma .tf-rma__extras-x.tf-rma__extras-x svg { color: currentColor !important; stroke: currentColor !important; }
.tf-rma .tf-rma__extras-head b,
.tf-rma .tf-rma__extras-txt b { color: var(--tf-rma-txt) !important; }
.tf-rma .tf-rma__catalogo h2 { color: var(--tf-rma-txt) !important; }
.tf-rma .tf-rma__ticket,
.tf-rma .tf-rma__ticket:hover,
.tf-rma .tf-rma__ticket:focus,
.tf-rma .tf-rma__ticket:active,
.tf-rma .tf-rma__ticket:focus-visible {
  min-height: 0 !important;
  border-style: dashed !important; border-width: 1px !important;
  background: var(--tf-rma-claro-2) !important;
}
.tf-rma .tf-rma__ticket svg { color: var(--tf-rma-oro-txt) !important; stroke: currentColor !important; }
.tf-rma .tf-rma__pago-head b { color: var(--tf-rma-aviso-txt) !important; }
.tf-rma .tf-rma__pago-pasos li { color: var(--tf-rma-txt-2) !important; }

@media (prefers-reduced-motion: reduce) {
  .tf-rma *, .tf-rma *::before, .tf-rma *::after {
    animation: none !important;
    transition: none !important;
  }
  .tf-rma__opcion:hover { transform: none; }
  .tf-rma__opcion:hover > img { transform: none; }
  .tf-rma__btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Verificacion de persona

   El widget de Cloudflare puede pedir que se marque una casilla. Va DENTRO del
   flujo del asistente, con su hueco reservado para que no empuje el formulario
   al aparecer, sin `overflow` que lo recorte y sin nada por encima.
   -------------------------------------------------------------------------- */
.tf-rma__desafio {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--tf-rma-linea);
  border-radius: var(--tf-rma-r-s);
  background: var(--tf-rma-claro-2);
  overflow: visible;
}

.tf-rma__desafio:focus { outline: none; }

.tf-rma__desafio:focus-visible {
  outline: 3px solid var(--tf-rma-oro);
  outline-offset: 2px;
}

.tf-rma__desafio-txt {
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--tf-rma-txt);
}

/* El widget normal mide 300x65. Se reservan 70 px de alto para que la casilla
   aparezca sin dar un salto, y el ancho se deja fluir: a 320 px de viewport los
   300 del widget siguen cabiendo dentro del padding. */
.tf-rma__desafio-widget {
  min-height: 70px;
  display: flex;
  align-items: center;
}

.tf-rma__desafio-widget iframe { max-width: 100%; }

/* La caja vive FUERA del panel, justo encima, para sobrevivir al cambio de
   paso (ver `cajaDesafio()` en tf-rma.js). Lleva el mismo margen lateral que
   el panel, y sin caja dentro no ocupa nada. */
.tf-rma__verificacion { padding: 18px 18px 0; }
.tf-rma__verificacion:empty { display: none; }
.tf-rma__verificacion .tf-rma__desafio { margin: 0; }
@media (min-width: 700px) {
  .tf-rma__verificacion { padding: clamp(26px, 4vw, 40px) clamp(26px, 4vw, 40px) 0; }
}

/* La foto que fallo, avisada en otro paso: el texto y el boton de vuelta van
   en la columna del texto, uno debajo del otro. */
.tf-rma__aviso--fotos p { margin: 0 0 10px; }
.tf-rma__aviso--fotos .tf-rma__btn { width: auto; }

/* El widget `compact` mide 150x140: en pantallas estrechas se reserva ese alto
   para que la casilla siga sin dar un salto al aparecer. */
@media (max-width: 360px) {
  .tf-rma__desafio { padding: 10px; }
  .tf-rma__desafio-widget { min-height: 145px; }
}

/* --------------------------------------------------------------------------
   Selector de cambio por ejes

   Una fila por atributo —talla, color—, como en la ficha de producto. Los
   botones reusan `.tf-rma__talla`, que ya pinta las opciones sin stock en gris
   y tachadas: eso es justo lo que tiene que verse.
   -------------------------------------------------------------------------- */
.tf-rma__eje { margin: 0 0 14px; }
.tf-rma__eje:last-of-type { margin-bottom: 6px; }

.tf-rma__eje-nombre {
  display: block;
  margin: 0 0 6px;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--tf-rma-txt-2);
}

/* El nombre de lo elegido, junto al del eje: un circulo de color no dice
   «Rojo» por si solo, y en un eje visual esa es la unica lectura posible. */
.tf-rma__eje-eco {
  margin-left: 6px;
  font-style: normal; font-weight: 700;
  color: var(--tf-rma-txt);
}

/* LA PORTADA DE LO ELEGIDO.
   Acaba de elegir un cuadro de color y una talla; la foto es lo que convierte
   esas dos decisiones en un producto reconocible antes de confirmar. */
.tf-rma__eje-ok {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 10px;
  border: 1.5px solid var(--tf-rma-ok-linea);
  border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-ok-bg);
}
.tf-rma__eje-foto {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--tf-rma-r-xs);
  background: var(--tf-rma-claro-3);
}
.tf-rma__eje-dice { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-rma__eje-dice > span {
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tf-rma-txt-2);
}
.tf-rma__eje-dice > b {
  font-size: .9375rem; font-weight: 800; line-height: 1.25;
  color: var(--tf-rma-ok-txt, var(--tf-rma-txt));
  overflow-wrap: anywhere;
}

/* EL SWATCH DEL CAMBIO ES GRANDE. NO SON LOS 28 px DEL BUSCADOR.
   La frontera del tema fija `width: 28px !important` para `.es-visual`, que es
   el tamaño correcto en la tarjeta de un producto del buscador —ahí el swatch
   acompaña—. Aquí el swatch ES la decisión del paso, y a 28 px el artwork
   quedaba en 21: medido en el banco, no se distingue un diseño de otro. 44 px
   es además el mínimo táctil recomendado.
   Hace falta `!important` para ganarle a la frontera; se acota a
   `.tf-rma__eje` para no tocar el buscador, que sigue en 28. */
.tf-rma .tf-rma__eje.es-visual .tf-rma__swatch.es-visual,
.tf-rma .tf-rma__eje.es-visual .tf-rma__swatch.es-visual:hover,
.tf-rma .tf-rma__eje.es-visual .tf-rma__swatch.es-visual:focus,
.tf-rma .tf-rma__eje.es-visual .tf-rma__swatch.es-visual:focus-visible {
  width: 44px !important; height: 44px !important; padding: 3px !important;
}
/* El que no tiene swatch se pinta como pastilla de texto y necesita su ancho:
   «Abyss Bersek» no cabe en 44 px. */
.tf-rma__eje.es-visual .tf-rma__swatch:not(.es-visual) { min-height: 44px; padding: 0 13px; }
.tf-rma__eje.es-visual .tf-rma__swatch > span { padding: 0; }

/* AGOTADO: el tachado del texto no existe sobre una foto.
   `.tf-rma__swatch[disabled] > span` tacha la palabra, pero un swatch visual no
   tiene palabra que tachar: solo quedaba `opacity`, que se lee como «apagado»,
   no como «no hay». Se cruza con una diagonal, que es la convencion. */
.tf-rma__eje.es-visual .tf-rma__swatch.es-visual[disabled]::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px), var(--tf-rma-mal) calc(50% - 1px),
    var(--tf-rma-mal) calc(50% + 1px), transparent calc(50% + 1px));
}