/* ======================================================================
   TOTAL RENT · Sistema global de círculos corporativos · v2
   ----------------------------------------------------------------------
   Cada sección usa una composición distinta: círculos XL, grandes,
   medianos y pequeños; aros, discos suaves y dobles aros. No se repite
   el mismo conjunto constantemente para que la web conserve movimiento
   visual sin quedar recargada.
   ====================================================================== */

:root {
  --tr-brand-blue: #00a6e3;
  --tr-brand-blue-mid: #4fc3ea;
  --tr-brand-blue-soft: #8edcf4;
  --tr-brand-circle-line: rgba(0, 166, 227, 0.095);
  --tr-brand-circle-line-strong: rgba(0, 166, 227, 0.135);
  --tr-brand-circle-line-soft: rgba(0, 166, 227, 0.060);
  --tr-brand-circle-fill: rgba(79, 195, 234, 0.075);
  --tr-brand-circle-fill-soft: rgba(142, 220, 244, 0.060);
}

.tr-brand-circles-host {
  isolation: isolate;
}

.tr-brand-circles-host--static {
  position: relative;
}

.tr-brand-circles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}

/* ----------------------------------------------------------------------
   PIEZAS INDIVIDUALES
   ---------------------------------------------------------------------- */
.tr-brand-circle {
  position: absolute;
  display: block;
  width: var(--tr-circle-size, 180px);
  height: var(--tr-circle-size, 180px);
  border-radius: 50%;
  box-sizing: border-box;
  border: var(--tr-circle-stroke, 9px) solid var(--tr-brand-circle-line);
  background: transparent;
  transform: translate3d(0, 0, 0);
}

.tr-brand-circle--xl {
  --tr-circle-size: clamp(360px, 35vw, 640px);
  --tr-circle-stroke: clamp(12px, 1.05vw, 20px);
  border-color: var(--tr-brand-circle-line-soft);
}

.tr-brand-circle--lg {
  --tr-circle-size: clamp(235px, 24vw, 420px);
  --tr-circle-stroke: clamp(10px, 0.82vw, 16px);
}

.tr-brand-circle--md {
  --tr-circle-size: clamp(145px, 15vw, 250px);
  --tr-circle-stroke: clamp(8px, 0.62vw, 12px);
}

.tr-brand-circle--sm {
  --tr-circle-size: clamp(72px, 7.2vw, 122px);
  --tr-circle-stroke: clamp(5px, 0.42vw, 8px);
  border-color: var(--tr-brand-circle-line-strong);
}

.tr-brand-circle--xs {
  --tr-circle-size: clamp(34px, 3.4vw, 58px);
  --tr-circle-stroke: 4px;
  border-color: var(--tr-brand-circle-line-strong);
}

.tr-brand-circle--solid {
  border: 0;
  background: var(--tr-brand-circle-fill);
}

.tr-brand-circle--soft-solid {
  border: 0;
  background: var(--tr-brand-circle-fill-soft);
}

.tr-brand-circle--double {
  border-color: var(--tr-brand-circle-line-strong);
  box-shadow:
    0 0 0 clamp(15px, 1.4vw, 24px) transparent,
    0 0 0 clamp(19px, 1.75vw, 30px) var(--tr-brand-circle-line-soft);
}

/* ----------------------------------------------------------------------
   8 COMPOSICIONES DISTINTAS
   ---------------------------------------------------------------------- */
/* V1 · Gran arco a la izquierda + pequeño satélite */
.tr-brand-circles--v1 .tr-brand-circle:nth-child(1) {
  left: clamp(-300px, -17vw, -145px);
  top: 8%;
}
.tr-brand-circles--v1 .tr-brand-circle:nth-child(2) {
  right: 8%;
  bottom: 17%;
}

/* V2 · Círculo grande arriba a la derecha + disco mediano abajo */
.tr-brand-circles--v2 .tr-brand-circle:nth-child(1) {
  right: clamp(-180px, -9vw, -72px);
  top: clamp(-110px, -5vw, -38px);
}
.tr-brand-circles--v2 .tr-brand-circle:nth-child(2) {
  left: 6%;
  bottom: 10%;
}

/* V3 · Aro XL recortado abajo + dos círculos pequeños separados */
.tr-brand-circles--v3 .tr-brand-circle:nth-child(1) {
  right: clamp(-305px, -18vw, -150px);
  bottom: clamp(-320px, -18vw, -155px);
}
.tr-brand-circles--v3 .tr-brand-circle:nth-child(2) {
  left: 5%;
  top: 18%;
}
.tr-brand-circles--v3 .tr-brand-circle:nth-child(3) {
  left: 13%;
  top: 31%;
}

/* V4 · Composición pequeña: ideal para bloques con mucho contenido */
.tr-brand-circles--v4 .tr-brand-circle:nth-child(1) {
  left: 8%;
  bottom: 9%;
}
.tr-brand-circles--v4 .tr-brand-circle:nth-child(2) {
  left: 15%;
  bottom: 24%;
}
.tr-brand-circles--v4 .tr-brand-circle:nth-child(3) {
  right: 5%;
  top: 14%;
}

/* V5 · Doble aro grande en lateral + círculo pequeño relleno */
.tr-brand-circles--v5 .tr-brand-circle:nth-child(1) {
  left: clamp(-155px, -8vw, -58px);
  top: 18%;
}
.tr-brand-circles--v5 .tr-brand-circle:nth-child(2) {
  right: 10%;
  bottom: 12%;
}

/* V6 · Gran aro recortado arriba + anillo mediano opuesto */
.tr-brand-circles--v6 .tr-brand-circle:nth-child(1) {
  right: clamp(-270px, -14vw, -118px);
  top: clamp(-290px, -16vw, -132px);
}
.tr-brand-circles--v6 .tr-brand-circle:nth-child(2) {
  left: 5%;
  bottom: 10%;
}

/* V7 · Constelación de círculos pequeños, sin aro grande */
.tr-brand-circles--v7 .tr-brand-circle:nth-child(1) {
  left: 5%;
  top: 18%;
}
.tr-brand-circles--v7 .tr-brand-circle:nth-child(2) {
  left: 12%;
  top: 34%;
}
.tr-brand-circles--v7 .tr-brand-circle:nth-child(3) {
  right: 8%;
  bottom: 18%;
}

/* V8 · Disco grande muy tenue + aro pequeño, visualmente diferente */
.tr-brand-circles--v8 .tr-brand-circle:nth-child(1) {
  left: clamp(-125px, -6vw, -48px);
  bottom: clamp(-115px, -5vw, -38px);
}
.tr-brand-circles--v8 .tr-brand-circle:nth-child(2) {
  right: 7%;
  top: 16%;
}

/* ----------------------------------------------------------------------
   TONOS Y CASOS ESPECIALES
   ---------------------------------------------------------------------- */
.tr-brand-circles-host[data-tr-brand-tone="dark"] {
  --tr-brand-circle-line: rgba(255, 255, 255, 0.095);
  --tr-brand-circle-line-strong: rgba(126, 218, 248, 0.145);
  --tr-brand-circle-line-soft: rgba(255, 255, 255, 0.052);
  --tr-brand-circle-fill: rgba(126, 218, 248, 0.075);
  --tr-brand-circle-fill-soft: rgba(255, 255, 255, 0.050);
}

/* En el hero permitimos una pieza algo más presente, pero nunca más densa. */
.tr-brand-circles-host[data-tr-brand-hero="true"] .tr-brand-circle--xl,
.tr-brand-circles-host[data-tr-brand-hero="true"] .tr-brand-circle--lg {
  opacity: 1;
}

/* Bloques bajos: se elimina la tercera pieza y se reduce la presencia. */
.tr-brand-circles--compact .tr-brand-circle:nth-child(n+3) {
  display: none;
}

.tr-brand-circles--compact .tr-brand-circle--xl {
  --tr-circle-size: clamp(280px, 28vw, 430px);
}

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 991px) {
  .tr-brand-circle--xl {
    --tr-circle-size: clamp(290px, 44vw, 430px);
  }
  .tr-brand-circle--lg {
    --tr-circle-size: clamp(200px, 31vw, 310px);
  }
  .tr-brand-circle--md {
    --tr-circle-size: clamp(120px, 20vw, 190px);
  }
}

@media (max-width: 767px) {
  .tr-brand-circles {
    opacity: 0.82;
  }

  .tr-brand-circle--xl {
    --tr-circle-size: 255px;
    --tr-circle-stroke: 10px;
  }

  .tr-brand-circle--lg {
    --tr-circle-size: 178px;
    --tr-circle-stroke: 8px;
  }

  .tr-brand-circle--md {
    --tr-circle-size: 116px;
    --tr-circle-stroke: 7px;
  }

  .tr-brand-circle--sm {
    --tr-circle-size: 68px;
    --tr-circle-stroke: 5px;
  }

  .tr-brand-circle--xs {
    --tr-circle-size: 34px;
    --tr-circle-stroke: 3px;
  }

  /* Móvil: máximo dos piezas decorativas por sección. */
  .tr-brand-circles .tr-brand-circle:nth-child(n+3) {
    display: none;
  }

  .tr-brand-circles--v1 .tr-brand-circle:nth-child(1),
  .tr-brand-circles--v5 .tr-brand-circle:nth-child(1),
  .tr-brand-circles--v8 .tr-brand-circle:nth-child(1) {
    left: -118px;
  }

  .tr-brand-circles--v2 .tr-brand-circle:nth-child(1),
  .tr-brand-circles--v3 .tr-brand-circle:nth-child(1),
  .tr-brand-circles--v6 .tr-brand-circle:nth-child(1) {
    right: -132px;
  }
}

@media (max-width: 480px) {
  .tr-brand-circles {
    opacity: 0.70;
  }

  /* En móvil muy estrecho dejamos una sola pieza dominante en bloques cortos. */
  .tr-brand-circles--compact .tr-brand-circle:nth-child(n+2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-brand-circles,
  .tr-brand-circle {
    animation: none !important;
    transition: none !important;
  }
}


/* 18/09/2026 · Desactivado por decisión de diseño: no usar aros/círculos decorativos de fondo. */
.tr-brand-circles,
.tr-brand-circle{display:none!important;}