/* =========================================================
   BITSIDEAS — Regiones
   Tres tarjetas altas con mapa animado, contador y detalle
   que se despliega al acercar el cursor.
   ========================================================= */
.regions-wrap{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(162deg,#241f2c 0%,#12384f 58%,#1d1926 100%);
  color:#eaf3fa;
}
.regions-wrap .h2,.regions-wrap .lead{color:#eaf3fa}
.regions-wrap .lead{color:#b7b0c4}
.regions-wrap .eyebrow{color:var(--accent-400)}
.regions-wrap .container{position:relative;z-index:2}

/* Meridianos que se desplazan muy despacio de fondo */
.regions-wrap::before{
  content:"";position:absolute;inset:-20%;z-index:0;opacity:.16;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(125,210,245,.55) 78px 79px),
    repeating-linear-gradient(0deg,transparent 0 78px,rgba(125,210,245,.35) 78px 79px);
  animation:meridians 46s linear infinite;
}
@keyframes meridians{to{transform:translate3d(78px,78px,0)}}

.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}

.region{
  position:relative;display:flex;flex-direction:column;
  padding:30px 26px 28px;border-radius:var(--r-xl);overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  transition:transform .55s var(--ease-out),background .45s var(--ease),
             border-color .45s var(--ease),box-shadow .5s var(--ease);
}
.region:hover,.region:focus-within{
  transform:translateY(-10px);
  background:rgba(255,255,255,.085);
  border-color:rgba(125,210,245,.5);
  box-shadow:0 26px 54px rgba(0,0,0,.4), 0 0 0 1px rgba(125,210,245,.28);
}
/* Resplandor que sube desde la base */
.region::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:0;opacity:0;
  background:linear-gradient(0deg,color-mix(in srgb,var(--accent-500) 24%,transparent),transparent);
  transition:opacity .55s var(--ease);
}
.region:hover::after{opacity:1}
.region > *{position:relative;z-index:1}

/* ---------- Mapa animado ---------- */
.region__map{
  width:84px;height:84px;margin-bottom:20px;
  transition:transform .6s var(--ease-out);
}
.region:hover .region__map{transform:scale(1.06) translateY(-3px)}
.region__map svg{width:100%;height:100%;overflow:visible}

/* Globo: se traza al entrar en pantalla y los meridianos rotan */
.rg-globe{
  fill:rgba(125,210,245,.08);stroke:rgba(125,210,245,.7);stroke-width:1.5;
  stroke-dasharray:164;stroke-dashoffset:164;
  transition:stroke-dashoffset 1.6s var(--ease-out),fill .5s var(--ease);
}
.region.is-in .rg-globe{stroke-dashoffset:0}
.region:hover .rg-globe{fill:rgba(125,210,245,.16)}

.rg-par{fill:none;stroke:rgba(125,210,245,.42);stroke-width:1.1;opacity:0;transition:opacity .7s var(--ease) .5s}
.region.is-in .rg-par{opacity:1}

.rg-mer{
  fill:none;stroke:rgba(125,210,245,.5);stroke-width:1.1;opacity:0;
  transition:opacity .7s var(--ease) .6s;
}
.region.is-in .rg-mer{opacity:1}
/* La variación del radio horizontal simula la rotación del globo */
.region.is-in .rg-mer--1{animation:spin1 9s var(--ease) infinite}
.region.is-in .rg-mer--2{animation:spin2 9s var(--ease) infinite}
.region:hover .rg-mer--1,.region:hover .rg-mer--2{animation-duration:4s}
@keyframes spin1{0%,100%{rx:9}50%{rx:24}}
@keyframes spin2{0%,100%{rx:19}50%{rx:4}}

/* Punto de presencia con onda expansiva */
.rg-pin{fill:var(--accent-400);stroke:none}
.rg-ping{
  fill:none;stroke:var(--accent-400);stroke-width:1.6;opacity:0;
  transform-origin:var(--px,50%) var(--py,50%);
}
.region.is-in .rg-ping{animation:rgPing 2.8s var(--ease) infinite}
.region.is-in .rg-ping--b{animation-delay:1.4s}
@keyframes rgPing{
  0%{opacity:.85;transform:scale(.35)}
  70%,100%{opacity:0;transform:scale(2.6)}
}

/* Arco que conecta con la sede */
.rg-arc{
  fill:none;stroke:var(--accent-400);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;opacity:.9;
  transition:stroke-dashoffset 1.1s var(--ease-out) .3s;
}
.region:hover .rg-arc{stroke-dashoffset:0}

/* ---------- Texto ---------- */
.region__n{
  font-family:var(--font);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-400);margin-bottom:10px;display:block;
}
.region__name{
  font-family:var(--font-light);font-weight:300;font-size:1.75rem;letter-spacing:.01em;
  line-height:1.08;color:#fff;margin-bottom:6px;
}
.region__role{font-size:.93rem;color:#b9cbd9}

.region__more{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s var(--ease-out),opacity .4s var(--ease),margin-top .5s var(--ease);
}
.region:hover .region__more,.region:focus-within .region__more{grid-template-rows:1fr;opacity:1;margin-top:16px}
.region__more > div{overflow:hidden;min-height:0}
.region__more ul{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.region__more li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;line-height:1.45;color:#c6d6e2}
.region__more svg{width:12px;height:12px;flex:0 0 auto;margin-top:4px;color:var(--accent-400);
  stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.regions{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.regions{grid-template-columns:1fr}
  .region{padding:28px 24px 26px}
  .region__map{width:78px;height:78px}
}
@media (prefers-reduced-motion:reduce){
  .regions-wrap::before,.rg-ping{animation:none}
  .rg-outline{stroke-dashoffset:0}
  .rg-arc{stroke-dashoffset:0}
}