/* ============================
   LADO DOS LOGOS (30)
   ============================ */

.brand-images{
  position:relative;
  min-height: 700px; /* era 560px (24) -> +1 linha */
}

@media (max-width: 980px){
  .brand-images{ min-height: 660px; } /* era 520px */
}

.brand-logo{
  position:absolute;
  width: var(--card);
  height: var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(10, 25, 50, 0.10);
  transition: top .9s ease, left .9s ease, transform .9s ease, opacity .9s ease;
  will-change: top,left,transform;
  outline:none;
}

.brand-logo img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display:block;
  filter: saturate(1.05);
}

.brand-logo:hover{
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 18px 40px rgba(10, 25, 50, 0.14);
  z-index: 5;
}

.brand-logo:focus-visible{
  box-shadow: 0 0 0 4px rgba(1,163,108,.25), 0 18px 40px rgba(10, 25, 50, 0.14);
  z-index: 6;
}

/* ========= ESTADO 1: "ESPALHADO" (default) ========= */
.brand-images .brand-logo-1  { top:  2%; left: 12%; transform: rotate(-15deg) skew(10deg); }
.brand-images .brand-logo-2  { top:  6%; left: 58%; transform: rotate( 12deg) skew(-8deg); }
.brand-images .brand-logo-3  { top: 26%; left:  3%; transform: rotate(  9deg) skew( 8deg); }
.brand-images .brand-logo-4  { top: 24%; left: 34%; transform: rotate(-10deg) skew(-8deg); }
.brand-images .brand-logo-5  { top: 22%; left: 70%; transform: rotate( 14deg) skew( 8deg); }
.brand-images .brand-logo-6  { top: 48%; left: 14%; transform: rotate(-12deg) skew( 8deg); }
.brand-images .brand-logo-7  { top: 50%; left: 52%; transform: rotate( 10deg) skew(-7deg); }
.brand-images .brand-logo-8  { top: 56%; left: 80%; transform: rotate(-14deg) skew(10deg); }
.brand-images .brand-logo-9  { top: 78%; left:  2%; transform: rotate( 12deg) skew(-8deg); }
.brand-images .brand-logo-10 { top: 78%; left: 26%; transform: rotate(-10deg) skew( 8deg); }
.brand-images .brand-logo-11 { top: 78%; left: 50%; transform: rotate( 10deg) skew(-8deg); }
.brand-images .brand-logo-12 { top: 78%; left: 74%; transform: rotate(-12deg) skew( 9deg); }
.brand-images .brand-logo-13 { top:  0%; left: 80%; transform: rotate( 10deg) skew(-7deg); opacity:.92; }
.brand-images .brand-logo-14 { top: 44%; left: 86%; transform: rotate( -9deg) skew( 8deg); opacity:.92; }
.brand-images .brand-logo-15 { top:  0%; left: -2%; transform: rotate(  9deg) skew(-7deg); opacity:.92; }

/* 16–24 (espalhado) */
.brand-images .brand-logo-16 { top: 10%; left:  6%; transform: rotate( 11deg) skew(-8deg); opacity:.92; }
.brand-images .brand-logo-17 { top: 12%; left: 38%; transform: rotate(-13deg) skew( 8deg); opacity:.92; }
.brand-images .brand-logo-18 { top: 14%; left: 90%; transform: rotate(  9deg) skew(-7deg); opacity:.92; }
.brand-images .brand-logo-19 { top: 36%; left: 60%; transform: rotate(-11deg) skew( 8deg); opacity:.92; }
.brand-images .brand-logo-20 { top: 40%; left:  0%; transform: rotate( 13deg) skew(-8deg); opacity:.92; }
.brand-images .brand-logo-21 { top: 62%; left: 30%; transform: rotate(-12deg) skew( 8deg); opacity:.92; }
.brand-images .brand-logo-22 { top: 66%; left: 66%; transform: rotate( 10deg) skew(-8deg); opacity:.92; }
.brand-images .brand-logo-23 { top: 92%; left: 82%; transform: rotate(-10deg) skew( 8deg); opacity:.92; }
.brand-images .brand-logo-24 { top: 92%; left: 40%; transform: rotate( 12deg) skew(-8deg); opacity:.92; }

/* 25–30 (espalhado) — só para não sobrepor */
.brand-images .brand-logo-25 { top:  8%; left: 24%; transform: rotate( 10deg) skew(-8deg); opacity:.92; }
.brand-images .brand-logo-26 { top: 32%; left: 18%; transform: rotate(-12deg) skew( 8deg); opacity:.92; }
.brand-images .brand-logo-27 { top: 34%; left: 78%; transform: rotate( 12deg) skew(-8deg); opacity:.92; }
.brand-images .brand-logo-28 { top: 92%; left: 10%; transform: rotate(-10deg) skew( 8deg); opacity:.92; }
.brand-images .brand-logo-29 { top: 92%; left: 62%; transform: rotate( 11deg) skew(-8deg); opacity:.92; }
.brand-images .brand-logo-30 { top: 40%; left: 44%; transform: rotate(-10deg) skew( 8deg); opacity:.92; }

/* ========= ESTADO 2: "ARRUMADO" ========= */
/* (hover/focus no container) */
.brand-container:hover .brand-images .brand-logo,
.brand-container:focus-within .brand-images .brand-logo{
  transform: rotate(0) skew(0);
  opacity: 1;
}

/* também arruma quando a classe existir (para mobile auto) */
.brand-container.is-arranged .brand-images .brand-logo{
  transform: rotate(0) skew(0);
  opacity: 1;
}

/* GRID 6 colunas x 5 linhas (DESKTOP)
   Colunas: 6%, 22%, 38%, 54%, 70%, 86%
   Linhas:  10%, 30%, 50%, 70%, 90%
*/

/* Linha 1 (1–6) */
.brand-container:hover .brand-images .brand-logo-1,
.brand-container:focus-within .brand-images .brand-logo-1,
.brand-container.is-arranged .brand-images .brand-logo-1 { top: 10%; left:  6%; }

.brand-container:hover .brand-images .brand-logo-2,
.brand-container:focus-within .brand-images .brand-logo-2,
.brand-container.is-arranged .brand-images .brand-logo-2 { top: 10%; left: 22%; }

.brand-container:hover .brand-images .brand-logo-3,
.brand-container:focus-within .brand-images .brand-logo-3,
.brand-container.is-arranged .brand-images .brand-logo-3 { top: 10%; left: 38%; }

.brand-container:hover .brand-images .brand-logo-4,
.brand-container:focus-within .brand-images .brand-logo-4,
.brand-container.is-arranged .brand-images .brand-logo-4 { top: 10%; left: 54%; }

.brand-container:hover .brand-images .brand-logo-5,
.brand-container:focus-within .brand-images .brand-logo-5,
.brand-container.is-arranged .brand-images .brand-logo-5 { top: 10%; left: 70%; }

.brand-container:hover .brand-images .brand-logo-6,
.brand-container:focus-within .brand-images .brand-logo-6,
.brand-container.is-arranged .brand-images .brand-logo-6 { top: 10%; left: 86%; }

/* Linha 2 (7–12) */
.brand-container:hover .brand-images .brand-logo-7,
.brand-container:focus-within .brand-images .brand-logo-7,
.brand-container.is-arranged .brand-images .brand-logo-7 { top: 30%; left:  6%; }

.brand-container:hover .brand-images .brand-logo-8,
.brand-container:focus-within .brand-images .brand-logo-8,
.brand-container.is-arranged .brand-images .brand-logo-8 { top: 30%; left: 22%; }

.brand-container:hover .brand-images .brand-logo-9,
.brand-container:focus-within .brand-images .brand-logo-9,
.brand-container.is-arranged .brand-images .brand-logo-9 { top: 30%; left: 38%; }

.brand-container:hover .brand-images .brand-logo-10,
.brand-container:focus-within .brand-images .brand-logo-10,
.brand-container.is-arranged .brand-images .brand-logo-10 { top: 30%; left: 54%; }

.brand-container:hover .brand-images .brand-logo-11,
.brand-container:focus-within .brand-images .brand-logo-11,
.brand-container.is-arranged .brand-images .brand-logo-11 { top: 30%; left: 70%; }

.brand-container:hover .brand-images .brand-logo-12,
.brand-container:focus-within .brand-images .brand-logo-12,
.brand-container.is-arranged .brand-images .brand-logo-12 { top: 30%; left: 86%; }

/* Linha 3 (13–18) */
.brand-container:hover .brand-images .brand-logo-13,
.brand-container:focus-within .brand-images .brand-logo-13,
.brand-container.is-arranged .brand-images .brand-logo-13 { top: 50%; left:  6%; }

.brand-container:hover .brand-images .brand-logo-14,
.brand-container:focus-within .brand-images .brand-logo-14,
.brand-container.is-arranged .brand-images .brand-logo-14 { top: 50%; left: 22%; }

.brand-container:hover .brand-images .brand-logo-15,
.brand-container:focus-within .brand-images .brand-logo-15,
.brand-container.is-arranged .brand-images .brand-logo-15 { top: 50%; left: 38%; }

.brand-container:hover .brand-images .brand-logo-16,
.brand-container:focus-within .brand-images .brand-logo-16,
.brand-container.is-arranged .brand-images .brand-logo-16 { top: 50%; left: 54%; }

.brand-container:hover .brand-images .brand-logo-17,
.brand-container:focus-within .brand-images .brand-logo-17,
.brand-container.is-arranged .brand-images .brand-logo-17 { top: 50%; left: 70%; }

.brand-container:hover .brand-images .brand-logo-18,
.brand-container:focus-within .brand-images .brand-logo-18,
.brand-container.is-arranged .brand-images .brand-logo-18 { top: 50%; left: 86%; }

/* Linha 4 (19–24) */
.brand-container:hover .brand-images .brand-logo-19,
.brand-container:focus-within .brand-images .brand-logo-19,
.brand-container.is-arranged .brand-images .brand-logo-19 { top: 70%; left:  6%; }

.brand-container:hover .brand-images .brand-logo-20,
.brand-container:focus-within .brand-images .brand-logo-20,
.brand-container.is-arranged .brand-images .brand-logo-20 { top: 70%; left: 22%; }

.brand-container:hover .brand-images .brand-logo-21,
.brand-container:focus-within .brand-images .brand-logo-21,
.brand-container.is-arranged .brand-images .brand-logo-21 { top: 70%; left: 38%; }

.brand-container:hover .brand-images .brand-logo-22,
.brand-container:focus-within .brand-images .brand-logo-22,
.brand-container.is-arranged .brand-images .brand-logo-22 { top: 70%; left: 54%; }

.brand-container:hover .brand-images .brand-logo-23,
.brand-container:focus-within .brand-images .brand-logo-23,
.brand-container.is-arranged .brand-images .brand-logo-23 { top: 70%; left: 70%; }

.brand-container:hover .brand-images .brand-logo-24,
.brand-container:focus-within .brand-images .brand-logo-24,
.brand-container.is-arranged .brand-images .brand-logo-24 { top: 70%; left: 86%; }

/* Linha 5 (25–30) */
.brand-container:hover .brand-images .brand-logo-25,
.brand-container:focus-within .brand-images .brand-logo-25,
.brand-container.is-arranged .brand-images .brand-logo-25 { top: 90%; left:  6%; }

.brand-container:hover .brand-images .brand-logo-26,
.brand-container:focus-within .brand-images .brand-logo-26,
.brand-container.is-arranged .brand-images .brand-logo-26 { top: 90%; left: 22%; }

.brand-container:hover .brand-images .brand-logo-27,
.brand-container:focus-within .brand-images .brand-logo-27,
.brand-container.is-arranged .brand-images .brand-logo-27 { top: 90%; left: 38%; }

.brand-container:hover .brand-images .brand-logo-28,
.brand-container:focus-within .brand-images .brand-logo-28,
.brand-container.is-arranged .brand-images .brand-logo-28 { top: 90%; left: 54%; }

.brand-container:hover .brand-images .brand-logo-29,
.brand-container:focus-within .brand-images .brand-logo-29,
.brand-container.is-arranged .brand-images .brand-logo-29 { top: 90%; left: 70%; }

.brand-container:hover .brand-images .brand-logo-30,
.brand-container:focus-within .brand-images .brand-logo-30,
.brand-container.is-arranged .brand-images .brand-logo-30 { top: 90%; left: 86%; }

/* ===== MOBILE com EFEITO (absolute) ===== */
@media (max-width: 820px){

  .brand-images{
    position: relative;
    min-height: 1420px; /* era 1180px (12 linhas) -> agora 15 linhas */
  }

  .brand-logo{
    width: 132px;
    height: 78px;
  }

  .brand-logo img{
    width: 74%;
    height: 74%;
  }

  /* no mobile, o arrumado vai ser 2 colunas x 15 linhas
     e é ativado por .is-arranged (JS) */
  .brand-container.is-arranged .brand-images .brand-logo{
    transform: rotate(0) skew(0);
    opacity: 1;
  }

  /* 2 colunas: 8% e 56% */
  .brand-container.is-arranged .brand-images .brand-logo-1  { top:  6%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-2  { top:  6%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-3  { top: 14%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-4  { top: 14%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-5  { top: 22%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-6  { top: 22%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-7  { top: 30%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-8  { top: 30%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-9  { top: 38%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-10 { top: 38%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-11 { top: 46%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-12 { top: 46%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-13 { top: 54%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-14 { top: 54%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-15 { top: 62%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-16 { top: 62%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-17 { top: 70%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-18 { top: 70%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-19 { top: 78%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-20 { top: 78%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-21 { top: 86%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-22 { top: 86%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-23 { top: 94%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-24 { top: 94%; left: 56%; }

  /* Linha extra (25–28) */
  .brand-container.is-arranged .brand-images .brand-logo-25 { top: 102%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-26 { top: 102%; left: 56%; }

  .brand-container.is-arranged .brand-images .brand-logo-27 { top: 110%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-28 { top: 110%; left: 56%; }

  /* Última linha (29–30) */
  .brand-container.is-arranged .brand-images .brand-logo-29 { top: 118%; left:  8%; }
  .brand-container.is-arranged .brand-images .brand-logo-30 { top: 118%; left: 56%; }
}