/**
 * ARANOX Home — Filosofia Institucional Premium
 * Release: AW3_004
 */

.arx4-philosophy{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(96px,12vw,170px) 0;
  color:#10232e;
  background:
    radial-gradient(circle at 10% 18%,rgba(54,198,226,.10),transparent 30%),
    radial-gradient(circle at 92% 78%,rgba(92,89,255,.08),transparent 27%),
    linear-gradient(180deg,#f7fbfd 0%,#ffffff 46%,#f3f8fa 100%);
}

.arx4-philosophy__ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.56;
  background-image:
    linear-gradient(rgba(10,47,66,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,47,66,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
}

.arx4-philosophy__shell{
  position:relative;
  z-index:2;
}

.arx4-philosophy__header{
  max-width:980px;
}

.arx4-philosophy__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  color:#167895;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.arx4-philosophy__eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,#28b6d3,transparent);
}

.arx4-philosophy__title{
  max-width:15ch;
  margin:0;
  color:#0b2230;
  font-size:clamp(2.7rem,5vw,5.7rem);
  font-weight:880;
  line-height:.98;
  letter-spacing:-.058em;
}

.arx4-philosophy__intro{
  max-width:760px;
  margin:30px 0 0;
  color:#536873;
  font-size:clamp(1.03rem,1.3vw,1.22rem);
  line-height:1.75;
}

.arx4-philosophy__manifesto{
  position:relative;
  max-width:1040px;
  margin:clamp(44px,6vw,78px) 0 0 auto;
  padding:clamp(28px,4vw,48px) clamp(28px,5vw,64px);
  border-left:2px solid #38bfd9;
  background:linear-gradient(90deg,rgba(47,191,217,.08),rgba(47,191,217,0));
}

.arx4-philosophy__manifesto p{
  margin:0;
  color:#183743;
  font-size:clamp(1.32rem,2vw,2rem);
  font-weight:720;
  line-height:1.45;
  letter-spacing:-.025em;
}

.arx4-philosophy__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:clamp(58px,8vw,100px);
}

.arx4-pillar{
  --arx4-card-x:50%;
  --arx4-card-y:50%;
  position:relative;
  min-height:390px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid rgba(24,77,95,.11);
  border-radius:24px;
  background:
    radial-gradient(circle at var(--arx4-card-x) var(--arx4-card-y),rgba(48,190,218,.12),transparent 32%),
    rgba(255,255,255,.72);
  box-shadow:
    0 18px 60px rgba(14,62,80,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  transition:
    transform .34s ease,
    border-color .34s ease,
    box-shadow .34s ease;
}

.arx4-pillar::after{
  content:"";
  position:absolute;
  inset:auto -28% -46% 22%;
  height:180px;
  border-radius:50%;
  background:rgba(69,202,226,.10);
  filter:blur(38px);
  transition:transform .5s ease,opacity .5s ease;
}

.arx4-pillar:hover{
  transform:translateY(-8px);
  border-color:rgba(35,171,202,.30);
  box-shadow:
    0 28px 84px rgba(14,62,80,.13),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.arx4-pillar:hover::after{
  transform:translateY(-18px) scale(1.08);
}

.arx4-pillar__index{
  position:absolute;
  top:24px;
  right:25px;
  color:rgba(20,80,101,.25);
  font-size:.71rem;
  font-weight:900;
  letter-spacing:.12em;
}

.arx4-pillar__icon{
  position:relative;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  margin-bottom:54px;
  border:1px solid rgba(34,151,180,.16);
  border-radius:19px;
  background:linear-gradient(145deg,rgba(40,187,216,.11),rgba(93,91,255,.05));
}

.arx4-pillar__icon span{
  position:absolute;
  width:28px;
  height:1px;
  background:#2299b5;
  transform-origin:center;
}

.arx4-pillar__icon span:nth-child(1){
  transform:rotate(0deg);
}

.arx4-pillar__icon span:nth-child(2){
  transform:rotate(60deg);
}

.arx4-pillar__icon span:nth-child(3){
  transform:rotate(-60deg);
}

.arx4-pillar h3{
  position:relative;
  z-index:2;
  margin:0;
  color:#102d3a;
  font-size:1.28rem;
  font-weight:860;
  letter-spacing:-.025em;
}

.arx4-pillar p{
  position:relative;
  z-index:2;
  margin:15px 0 0;
  color:#60727b;
  font-size:.94rem;
  line-height:1.66;
}

.arx4-pillar__signal{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:28px;
  color:#2084a0;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.arx4-pillar__signal::before{
  content:"";
  width:18px;
  height:1px;
  background:#2bb5d0;
}

.arx4-philosophy__flow{
  margin-top:clamp(70px,9vw,118px);
}

.arx4-philosophy__flow-line{
  position:relative;
  overflow:hidden;
  height:1px;
  background:rgba(28,102,127,.16);
}

.arx4-philosophy__flow-line span{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg,#2ab2d0,#63d9bc,#6e6ae8);
  box-shadow:0 0 18px rgba(42,178,208,.4);
  transition:width 1.4s cubic-bezier(.2,.8,.2,1);
}

.arx4-philosophy__flow.is-visible .arx4-philosophy__flow-line span{
  width:100%;
}

.arx4-philosophy__flow-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:18px;
}

.arx4-philosophy__flow-steps span{
  position:relative;
  color:#667a83;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.arx4-philosophy__flow-steps span::before{
  content:"";
  position:absolute;
  top:-22px;
  left:0;
  width:7px;
  height:7px;
  border:2px solid #f5fafc;
  border-radius:50%;
  background:#2caecb;
  box-shadow:0 0 0 4px rgba(44,174,203,.13);
}

.arx4-philosophy__callout{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:24px;
  max-width:980px;
  margin:clamp(58px,7vw,92px) auto 0;
  padding:clamp(28px,4vw,44px);
  border:1px solid rgba(29,104,129,.11);
  border-radius:26px;
  background:rgba(255,255,255,.66);
  box-shadow:0 20px 70px rgba(17,66,84,.07);
  backdrop-filter:blur(18px);
}

.arx4-philosophy__callout-mark{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(145deg,#179ab9,#5d60dd);
  box-shadow:0 16px 38px rgba(49,129,183,.23);
  font-size:1.5rem;
  font-weight:900;
}

.arx4-philosophy__callout span{
  color:#287f98;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.arx4-philosophy__callout p{
  margin:8px 0 0;
  color:#203b47;
  font-size:clamp(1.08rem,1.45vw,1.34rem);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
}

@media(max-width:1100px){
  .arx4-philosophy__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .arx4-pillar{
    min-height:350px;
  }
}

@media(max-width:680px){
  .arx4-philosophy{
    padding:90px 0;
  }

  .arx4-philosophy__title{
    max-width:100%;
    font-size:clamp(2.5rem,12vw,3.8rem);
  }

  .arx4-philosophy__grid{
    grid-template-columns:1fr;
  }

  .arx4-pillar{
    min-height:330px;
  }

  .arx4-philosophy__flow-steps{
    grid-template-columns:1fr;
    gap:20px;
    margin-left:10px;
  }

  .arx4-philosophy__flow-line{
    display:none;
  }

  .arx4-philosophy__flow-steps span{
    padding-left:22px;
  }

  .arx4-philosophy__flow-steps span::before{
    top:4px;
    left:0;
  }

  .arx4-philosophy__callout{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .arx4-pillar,
  .arx4-pillar::after,
  .arx4-philosophy__flow-line span{
    transition:none!important;
  }
}