/* =========================================================
   Transparencia (página completa) — SETT
   Reutiliza los estilos de Encabezado de sección e Índice lateral; aquí va
   la maquetación de la página y las tarjetas.
   ========================================================= */

.wpe-tr {
  --wpe-tr-top: 24px;

  display: flex;
  flex-direction: column;
  gap: 64px;
  font-family: Heebo, sans-serif;
  color: #101010;
}

/* ---------- Introducción ---------- */
.wpe-tr .wpe-tr__intro { display: flex; flex-direction: column; gap: 32px; }

.wpe-tr .wpe-tr__intro-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

.wpe-tr .wpe-tr__intro-titulo {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: #101010;
}

.wpe-tr .wpe-tr__intro-texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: #1F2A2C;
}
.wpe-tr .wpe-tr__intro-texto p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.wpe-tr .wpe-tr__intro-texto p a { color: #7A6612; }

/* Enlaces rápidos bajo el texto */
.wpe-tr .wpe-tr__rapidos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.wpe-tr .wpe-tr__rapido {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #FFFFFF;
  color: #101010;
  font-family: Heebo, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .18s ease;
}
.wpe-tr .wpe-tr__rapido:hover { background: #FBFAF7; color: #101010; text-decoration: none; }
.wpe-tr .wpe-tr__rapido:focus-visible { outline: 3px solid #607478; outline-offset: 2px; }
.wpe-tr .wpe-tr__rapido svg { flex: 0 0 auto; }
.wpe-tr .wpe-tr__rapido-etiqueta { display: block; font-size: 12px; color: #4F6266; }
.wpe-tr .wpe-tr__rapido-titulo { display: block; font-family: Poppins, sans-serif; font-weight: 500; color: #101010; }

/* ---------- Cuerpo: índice + contenido ---------- */
/* Índice 25 % · contenido 75 % en escritorio. */
.wpe-tr .wpe-tr__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 40px;
  align-items: start;
}

/* El índice se fija dentro del propio widget: su padre (el cuerpo) mide lo
   que todo el contenido, así que el sticky tiene recorrido completo.
   align-self evita que la celda se estire al alto de la fila, que dejaría
   al sticky sin sitio para moverse. */
.wpe-tr .wpe-tr__lateral {
  align-self: start;
  position: sticky;
  top: var(--wpe-tr-top);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Color de cada sección (colores del logo de SETT) ---------- */
/* Cada color fija también el de los botones de su sección, con el texto
   que mejor se lee encima (blanco sobre rojo, oscuro sobre azul y amarillo).
   El blanco, sobre tarjetas blancas, lleva borde. */
.wpe-tr .wpe-tr__color--rojo {
  --wpe-tr-color: #DE291B;
  --wpe-tr-boton: #DE291B;
  --wpe-tr-boton-texto: #FFFFFF;
}
.wpe-tr .wpe-tr__color--azul {
  --wpe-tr-color: #80ADC1;
  --wpe-tr-boton: #80ADC1;
  --wpe-tr-boton-texto: #101010;
}
.wpe-tr .wpe-tr__color--amarillo {
  --wpe-tr-color: #F2C818;
  --wpe-tr-boton: #F2C818;
  --wpe-tr-boton-texto: #101010;
}
.wpe-tr .wpe-tr__color--blanco {
  --wpe-tr-color: #FFFFFF;
  --wpe-tr-boton: #FFFFFF;
  --wpe-tr-boton-texto: #101010;
  --wpe-tr-boton-borde: #101010;
}

/* Punto de color: en el encabezado de la sección y en el índice. */
.wpe-tr .wpe-tr__punto {
  box-sizing: border-box;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--wpe-tr-color, #E4ED64);
}
/* El blanco necesita un filo para verse sobre fondos claros. */
.wpe-tr .wpe-tr__color--blanco .wpe-tr__punto { box-shadow: inset 0 0 0 1.5px #AEB9BA; }

.wpe-tr .wpe-tr__seccion .wpe-es { --wpe-es-num-tam: 22px; --wpe-es-gap: 14px; }

.wpe-tr .wpe-il .wpe-il__num.wpe-tr__punto { width: 10px; height: 10px; font-size: 0; }
/* Sobre la sección activa (fondo oscuro) el filo del blanco sobra. */
.wpe-tr .wpe-il .is-activa.wpe-tr__color--blanco .wpe-tr__punto { box-shadow: none; }

/* ---------- Banner de cada sección ---------- */
.wpe-tr .wpe-tr__banner {
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: 24px;
  background: #14292F;
  aspect-ratio: 1440 / 417;
}
.wpe-tr .wpe-tr__banner-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- Acceso al formulario (al final) ---------- */
/* Tarjeta blanca como las demás: está, pero no compite con el contenido. */
.wpe-tr .wpe-tr__acceso { padding: 24px 28px; }

/* En portátiles de poca altura el índice aprieta sus espacios para caber
   entero (lo decide transparencia.js midiendo) y, solo si aun así no cabe,
   se desplaza por dentro sin barra visible. */
@media (min-width: 1025px) {
  .wpe-tr .wpe-tr__lateral.is-muy-compacto .wpe-il { padding: 14px 12px; }
  .wpe-tr .wpe-tr__lateral.is-muy-compacto .wpe-il__etiqueta { padding-bottom: 6px; }
  .wpe-tr .wpe-tr__lateral.is-muy-compacto .wpe-il__lista { gap: 2px; }
  .wpe-tr .wpe-tr__lateral.is-muy-compacto .wpe-il__enlace { min-height: 38px; }
  .wpe-tr .wpe-tr__lateral.is-muy-compacto .wpe-il__sub { gap: 5px; padding: 4px 10px 8px 44px; }
  .wpe-tr .wpe-tr__lateral.is-muy-compacto .wpe-il__pie { margin-top: 6px; padding-top: 10px; }

  .wpe-tr .wpe-tr__lateral.is-desborda {
    max-height: calc(100vh - var(--wpe-tr-top) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .wpe-tr .wpe-tr__lateral.is-desborda::-webkit-scrollbar { display: none; }
  /* Sin esto, la columna aplastaría sus bloques en vez de desplazarse. */
  .wpe-tr .wpe-tr__lateral.is-desborda > * { flex-shrink: 0; }
}


.wpe-tr .wpe-tr__contenido {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 100px;
  /* La rejilla se adapta al ancho del contenido, no al de la pantalla. */
  container-type: inline-size;
  container-name: wpe-tr;
}

.wpe-tr .wpe-tr__seccion { display: flex; flex-direction: column; gap: 20px; }

/* Texto solo para lectores de pantalla */
.wpe-tr .wpe-tr__oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Rejilla de tarjetas ---------- */
.wpe-tr .wpe-tr__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.wpe-tr .wpe-tr__rejilla > .wpe-tc--ancho,
.wpe-tr .wpe-tr__rejilla > .wpe-tc--banner { grid-column: 1 / -1; }

/* ---------- Tarjeta ---------- */
.wpe-tr .wpe-tc {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 28px;
  border-radius: 24px;
  background: #FFFFFF;
  color: #101010;
}

.wpe-tr .wpe-tc__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wpe-tr .wpe-tc__icono {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #F6F3EC;
  color: #101010;
}

.wpe-tr .wpe-tc__etiqueta {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: #F6F3EC;
  color: #4F6266;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
/* Cada tipo de contenido conserva su color de siempre. */
.wpe-tr .wpe-tc__etiqueta--web { background: #14292F; color: #FFFFFF; }
.wpe-tr .wpe-tc__etiqueta--pdf { background: #3F6F7D; color: #FFFFFF; }
.wpe-tr .wpe-tc__etiqueta--pagina { background: #E4ED64; color: #101010; }

.wpe-tr .wpe-tc__titulo {
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #101010;
}

.wpe-tr .wpe-tc__desc {
  margin: 0;
  padding: 0;
  font-family: Heebo, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #4F6266;
}

.wpe-tr .wpe-tc__accion { display: flex; margin-top: auto; padding-top: 6px; }

/* Botón */
.wpe-tr .wpe-tc__boton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  transition: filter .18s ease;
}
.wpe-tr .wpe-tc__boton svg { flex: 0 0 auto; }
.wpe-tr .wpe-tc__boton:hover { filter: brightness(.94); text-decoration: none; }
.wpe-tr .wpe-tc__boton:focus-visible { outline: 3px solid #607478; outline-offset: 3px; }
.wpe-tr .wpe-tc__boton--icono { width: 46px; padding: 0; justify-content: center; }

.wpe-tr .wpe-tc__boton--lima,
.wpe-tr .wpe-tc__boton--lima:hover { background: #E4ED64; color: #101010; }
/* El de la sección (fuera de una sección, lima). */
.wpe-tr .wpe-tc__boton--seccion,
.wpe-tr .wpe-tc__boton--seccion:hover {
  background: var(--wpe-tr-boton, #E4ED64);
  color: var(--wpe-tr-boton-texto, #101010);
  box-shadow: inset 0 0 0 1.5px var(--wpe-tr-boton-borde, transparent);
}
.wpe-tr .wpe-tc__boton--azul,
.wpe-tr .wpe-tc__boton--azul:hover { background: #607478; color: #FFFFFF; }
.wpe-tr .wpe-tc__boton--oscuro,
.wpe-tr .wpe-tc__boton--oscuro:hover { background: #14292F; color: #FFFFFF; }
.wpe-tr .wpe-tc__boton--azul:hover,
.wpe-tr .wpe-tc__boton--oscuro:hover { filter: brightness(1.12); }

.wpe-tr .wpe-tc__cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* Fila completa: icono · textos · botón a la derecha */
.wpe-tr .wpe-tc--ancho {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
}
.wpe-tr .wpe-tc--ancho .wpe-tc__cuerpo { gap: 6px; }
.wpe-tr .wpe-tc--ancho .wpe-tc__accion { flex: 0 0 auto; margin: 0; padding: 0; }

/* Fila completa: icono · textos con el botón debajo */
.wpe-tr .wpe-tc--banner {
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
}
.wpe-tr .wpe-tc--banner .wpe-tc__accion { margin: 0; padding-top: 4px; }

/* ---------- Grupo de enlaces (Protección de datos) ---------- */
.wpe-tr .wpe-tg {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 32px;
  border-radius: 24px;
  background: #FFFFFF;
}
.wpe-tr .wpe-tg--sin-cabecera { padding: 20px; }

.wpe-tr .wpe-tg__cabecera { display: flex; align-items: center; gap: 18px; }
.wpe-tr .wpe-tg__textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.wpe-tr .wpe-tg__enlaces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wpe-tr .wpe-tg__enlaces > li { margin: 0; padding: 0; min-width: 0; }
.wpe-tr .wpe-tg__enlaces > li::before { content: none; }

.wpe-tr .wpe-tg__enlace {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
  min-height: 60px;
  padding: 0 20px;
  border-radius: 16px;
  background: #F6F3EC;
  color: #101010;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .18s ease;
}
.wpe-tr .wpe-tg__enlace svg { flex: 0 0 auto; }
.wpe-tr .wpe-tg__enlace:hover {
  background: var(--wpe-tr-boton, #E4ED64);
  color: var(--wpe-tr-boton-texto, #101010);
  box-shadow: inset 0 0 0 1.5px var(--wpe-tr-boton-borde, transparent);
  text-decoration: none;
}
.wpe-tr .wpe-tg__enlace:focus-visible { outline: 3px solid #607478; outline-offset: 2px; }

/* ---------- Quiénes somos (organigrama resumido) ---------- */
.wpe-tr .wpe-qs {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 32px 28px 28px;
  border-radius: 24px;
  background: #FFFFFF;
}

.wpe-tr .wpe-qs__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.wpe-tr .wpe-qs__cabecera .wpe-tc__boton { flex: 0 0 auto; }
.wpe-tr .wpe-qs__textos { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wpe-tr .wpe-qs__titulo {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: #101010;
}

.wpe-tr .wpe-qs__arbol {
  --wpe-qs-linea: #9AA8AA;
  --wpe-qs-hueco: 32px;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px;
  border-radius: 20px;
  background: #F6F3EC;
}

.wpe-tr .wpe-qs__nodo {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 20px 22px;
  border-radius: 20px;
  background: #FFFFFF;
}
.wpe-tr .wpe-qs__nodo--principal {
  max-width: 520px;
  padding: 20px 24px;
  border: 2px solid #E4ED64;
}
.wpe-tr .wpe-qs__nodo--final {
  max-width: 390px;
  gap: 4px;
  padding: 18px 22px;
  align-items: center;
  text-align: center;
}

.wpe-tr .wpe-qs__etiqueta {
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #4F6266;
}
.wpe-tr .wpe-qs__nodo--principal .wpe-qs__etiqueta {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #E4ED64;
  color: #101010;
}

.wpe-tr .wpe-qs__persona { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wpe-tr .wpe-qs__nodo--principal .wpe-qs__persona { gap: 20px; }
.wpe-tr .wpe-qs__nodo--final .wpe-qs__persona { flex-direction: column; gap: 8px; }

.wpe-tr .wpe-qs__avatar {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #F6F3EC;
  color: #101010;
}
.wpe-tr .wpe-qs__avatar--foto { width: 88px; height: 88px; padding: 0; object-fit: cover; }
.wpe-tr .wpe-qs__nodo--principal .wpe-qs__avatar { width: 96px; height: 96px; }

.wpe-tr .wpe-qs__datos { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wpe-tr .wpe-qs__nombre {
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: #101010;
}
.wpe-tr .wpe-qs__nodo--principal .wpe-qs__nombre { font-size: 19px; }
.wpe-tr .wpe-qs__texto { font-family: Heebo, sans-serif; font-size: 14px; line-height: 1.45; color: #4F6266; }

.wpe-tr .wpe-qs__enlace {
  margin-top: auto;
  padding-top: 4px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #7A6612;
}
.wpe-tr .wpe-qs__enlace:hover { color: #5C4C0C; }

/* Conectores: línea vertical y llaves que abren y cierran la fila central.
   La llave mide la distancia entre los centros de las dos casillas
   (media fila más medio hueco). */
.wpe-tr .wpe-qs__rama {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 812px;
}
.wpe-tr .wpe-qs__linea { display: block; width: 2px; height: 30px; background: var(--wpe-qs-linea); }
.wpe-tr .wpe-qs__linea--corta { height: 26px; }
.wpe-tr .wpe-qs__llave {
  box-sizing: border-box;
  display: block;
  width: calc(50% + var(--wpe-qs-hueco) / 2);
  height: 26px;
  border: 2px solid var(--wpe-qs-linea);
}
.wpe-tr .wpe-qs__llave--arriba { border-bottom: 0; border-radius: 10px 10px 0 0; }
.wpe-tr .wpe-qs__llave--abajo { border-top: 0; border-radius: 0 0 10px 10px; }

.wpe-tr .wpe-qs__fila { display: flex; justify-content: center; gap: var(--wpe-qs-hueco); width: 100%; }
.wpe-tr .wpe-qs__fila > .wpe-qs__nodo { max-width: 390px; }
.wpe-tr .wpe-qs__rama--doble .wpe-qs__fila > .wpe-qs__nodo { flex: 1 1 0; max-width: none; }

/* Los saltos del índice no deben quedar tapados por el propio índice fijo. */
.wpe-tr .wpe-tr__seccion,
.wpe-tr .wpe-es,
.wpe-tr .wpe-tc,
.wpe-tr .wpe-tg,
.wpe-tr .wpe-tg__enlaces > li,
.wpe-tr .wpe-qs { scroll-margin-top: var(--wpe-tr-top); }

/* ---------- Adaptación al ancho del contenido ---------- */
@container wpe-tr (max-width: 720px) {
  /* Organigrama: la fila central se apila y las llaves sobran. */
  .wpe-tr .wpe-qs__fila { flex-direction: column; align-items: center; gap: 16px; }
  .wpe-tr .wpe-qs__rama--doble .wpe-qs__fila > .wpe-qs__nodo { flex: none; max-width: 520px; }
  .wpe-tr .wpe-qs__llave { display: none; }
  .wpe-tr .wpe-qs__cabecera { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@container wpe-tr (max-width: 600px) {
  .wpe-tr .wpe-tr__rejilla,
  .wpe-tr .wpe-tg__enlaces { grid-template-columns: minmax(0, 1fr); }
  .wpe-tr .wpe-tc,
  .wpe-tr .wpe-tc--ancho,
  .wpe-tr .wpe-tc--banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 24px; }
  .wpe-tr .wpe-tc--ancho .wpe-tc__accion,
  .wpe-tr .wpe-tc--banner .wpe-tc__accion { padding-top: 6px; }
  .wpe-tr .wpe-tc__boton { max-width: 100%; }
  .wpe-tr .wpe-tg { padding: 24px; }
  .wpe-tr .wpe-tg__cabecera { align-items: flex-start; }
  .wpe-tr .wpe-qs { padding: 24px 20px 20px; }
  .wpe-tr .wpe-qs__arbol { padding: 20px 14px; }
  .wpe-tr .wpe-qs__nodo--principal .wpe-qs__persona { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wpe-tr .wpe-qs__nodo--principal .wpe-qs__avatar { width: 72px; height: 72px; }
  .wpe-tr .wpe-qs__avatar--foto { width: 64px; height: 64px; }
}

/* ---------- Pantalla ---------- */
@media (max-width: 1024px) {
  .wpe-tr { gap: 48px; }
  .wpe-tr .wpe-tr__intro-rejilla { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .wpe-tr .wpe-tr__intro-titulo { font-size: 28px; }
  .wpe-tr .wpe-tr__contenido { gap: 72px; }

  /* Tablet y móvil: el índice pasa arriba como barra plegable y sigue fijo
     mientras se lee (su padre sigue siendo el cuerpo completo). Es el mismo
     comportamiento que el Índice lateral tiene en móvil, aquí ya desde
     tablet. */
  .wpe-tr .wpe-tr__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .wpe-tr .wpe-tr__lateral {
    top: 8px;
    z-index: 20;
    gap: 8px;
  }

  .wpe-tr .wpe-il { padding: 6px; box-shadow: 0 8px 24px rgba(16, 16, 16, .12); }
  .wpe-tr .wpe-il .wpe-il__conmutador {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: calc(var(--wpe-il-radio) - 6px);
    background: transparent;
    color: var(--wpe-il-sec);
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .wpe-tr .wpe-il .wpe-il__conmutador:focus-visible { outline: 3px solid #607478; outline-offset: 2px; }
  .wpe-tr .wpe-il .wpe-il__conmutador-etiqueta {
    font-size: 11px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--wpe-il-etiqueta);
  }
  .wpe-tr .wpe-il .wpe-il__actual { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wpe-tr .wpe-il .wpe-il__chevron { flex: 0 0 auto; transition: transform .2s ease; }
  .wpe-tr .wpe-il.is-abierto .wpe-il__chevron { transform: rotate(180deg); }
  .wpe-tr .wpe-il .wpe-il__etiqueta { display: none; }
  .wpe-tr .wpe-il .wpe-il__cuerpo { display: none; padding: 6px 8px 12px; }
  .wpe-tr .wpe-il.is-abierto .wpe-il__cuerpo {
    display: flex;
    max-height: 70vh;
    overflow-y: auto;
  }

}

@media (max-width: 767px) {
  .wpe-tr .wpe-tr__contenido { gap: 56px; }
  .wpe-tr .wpe-tr__seccion .wpe-es { --wpe-es-num-tam: 18px; --wpe-es-gap: 12px; }
  .wpe-tr .wpe-tr__banner { border-radius: 18px; aspect-ratio: 16 / 7; }
}

@media (prefers-reduced-motion: reduce) {
  .wpe-tr .wpe-il .wpe-il__chevron,
  .wpe-tr .wpe-tr__rapido,
  .wpe-tr .wpe-tc__boton,
  .wpe-tr .wpe-tg__enlace { transition: none; }
}