/**
 * ARANOX Home — Mercados Premium
 * Release: AW3_008
 */

.arx8-markets{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(100px,12vw,170px) 0;
  color:#102732;
  background:
    radial-gradient(circle at 10% 14%,rgba(42,177,207,.08),transparent 27%),
    radial-gradient(circle at 92% 84%,rgba(103,87,220,.06),transparent 24%),
    linear-gradient(180deg,#f7fafb 0%,#ffffff 48%,#f3f7f8 100%);
}

.arx8-markets__backdrop{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(20,73,92,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,73,92,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
}

.arx8-markets__shell{
  position:relative;
  z-index:2;
}

.arx8-markets__header{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:clamp(40px,8vw,110px);
  align-items:end;
}

.arx8-markets__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:20px;
  color:#1683a1;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.arx8-markets__eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,#25b8d5,transparent);
}

.arx8-markets__title{
  max-width:14ch;
  margin:0;
  color:#0c2430;
  font-size:clamp(2.7rem,5vw,5.5rem);
  font-weight:880;
  line-height:.98;
  letter-spacing:-.056em;
}

.arx8-markets__intro{
  margin:0 0 6px;
  color:#60727b;
  font-size:clamp(1rem,1.22vw,1.16rem);
  line-height:1.75;
}

.arx8-markets__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(250px,auto);
  gap:18px;
  margin-top:clamp(68px,9vw,112px);
}

.arx8-market{
  --arx8-accent:#2aaed0;
  --arx8-soft:#edf8fb;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  grid-column:span 4;
  min-height:330px;
  padding:30px;
  border:1px solid rgba(27,92,112,.10);
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--arx8-accent) 15%,transparent),transparent 30%),
    linear-gradient(145deg,#ffffff 0%,var(--arx8-soft) 100%);
  box-shadow:
    0 22px 70px rgba(17,66,84,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition:
    transform .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}

.arx8-market::after{
  content:"";
  position:absolute;
  right:-50px;
  bottom:-70px;
  width:180px;
  height:180px;
  border:1px solid color-mix(in srgb,var(--arx8-accent) 22%,transparent);
  border-radius:50%;
  transition:transform .45s ease;
}

.arx8-market:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb,var(--arx8-accent) 28%,transparent);
  box-shadow:
    0 30px 90px rgba(17,66,84,.13),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.arx8-market:hover::after{
  transform:scale(1.10) translate(-8px,-8px);
}

.arx8-market--large{
  grid-column:span 8;
}

.arx8-market--wide{
  grid-column:span 8;
}

.arx8-market--energy{
  --arx8-accent:#f29a2e;
  --arx8-soft:#fff6e9;
}

.arx8-market--telecom{
  --arx8-accent:#1f8ed1;
  --arx8-soft:#edf6fd;
}

.arx8-market--agro{
  --arx8-accent:#66a33a;
  --arx8-soft:#f1f8eb;
}

.arx8-market--infrastructure{
  --arx8-accent:#6f63d9;
  --arx8-soft:#f3f1ff;
}

.arx8-market--industry{
  --arx8-accent:#4b6d7d;
  --arx8-soft:#eef3f5;
}

.arx8-market--utilities{
  --arx8-accent:#18a6a0;
  --arx8-soft:#edf9f7;
}

.arx8-market__icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin-bottom:38px;
  border:1px solid color-mix(in srgb,var(--arx8-accent) 24%,transparent);
  border-radius:22px;
  background:rgba(255,255,255,.62);
  box-shadow:0 12px 30px color-mix(in srgb,var(--arx8-accent) 10%,transparent);
}

.arx8-market__icon svg{
  width:38px;
  height:38px;
  fill:none;
  stroke:var(--arx8-accent);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.arx8-market__tag{
  color:var(--arx8-accent);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.arx8-market h3{
  margin:12px 0 0;
  color:#12303c;
  font-size:clamp(1.45rem,2vw,2.1rem);
  font-weight:880;
  letter-spacing:-.035em;
}

.arx8-market p{
  max-width:640px;
  margin:16px 0 0;
  color:#5d717a;
  font-size:.94rem;
  line-height:1.68;
}

.arx8-market__link{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  margin-top:auto;
  padding-top:28px;
  color:#173c4a;
  text-decoration:none;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.arx8-market__link svg{
  width:20px;
  fill:none;
  stroke:var(--arx8-accent);
  stroke-width:1.8;
  transition:transform .25s ease;
}

.arx8-market__link:hover svg{
  transform:translateX(5px);
}

.arx8-markets__footer{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:center;
  margin-top:clamp(54px,7vw,88px);
  padding-top:32px;
  border-top:1px solid rgba(31,91,111,.12);
}

.arx8-markets__footer span{
  color:#1683a1;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.arx8-markets__footer p{
  max-width:850px;
  margin:0;
  color:#415964;
  font-size:clamp(1.05rem,1.38vw,1.28rem);
  font-weight:700;
  line-height:1.55;
  letter-spacing:-.02em;
}

@media(max-width:1080px){
  .arx8-market,
  .arx8-market--large,
  .arx8-market--wide{
    grid-column:span 6;
  }
}

@media(max-width:760px){
  .arx8-markets__header{
    grid-template-columns:1fr;
  }

  .arx8-markets__title{
    max-width:100%;
    font-size:clamp(2.45rem,12vw,3.8rem);
  }

  .arx8-markets__grid{
    grid-template-columns:1fr;
  }

  .arx8-market,
  .arx8-market--large,
  .arx8-market--wide{
    grid-column:auto;
    min-height:310px;
  }

  .arx8-markets__footer{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .arx8-market,
  .arx8-market::after,
  .arx8-market__link svg{
    transition:none!important;
  }
}
