@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

.frogmi-ai-diagram{
  --orbit:#717C76;
  --claude-bg:#FDF4F2;
  --gemini-bg:#EFF6FF;
  --gpt-bg:#E2F0F5;
  --cursor-bg:#F2F2F1;
  --frogmi-bg:#F2F7F4;
  --inventory-text:#9A4291;
  --inventory-bg:#F9F3F8;
  --terrain-text:#00539F;
  --terrain-bg:#EFF4FA;
  --execution-text:#32ACA0;
  --execution-bg:#F3FAF9;
  --compliance-text:#E2314F;
  --compliance-bg:#FEF7F8;
  --claude-line:#D97757;
  --gemini-line:#3387FF;
  --gpt-line:#12A37A;
  --cursor-line:#FFFFFF;
  --tag-font-size:12px;
  --frogmi-logo-height:76px;
  --claude-logo-height:36px;
  --gemini-logo-height:36px;
  --gpt-logo-height:36px;
  --cursor-logo-height:36px;
  --frogmi-logo-height-mobile:60px;
  --claude-logo-height-mobile:29px;
  --gemini-logo-height-mobile:29px;
  --gpt-logo-height-mobile:29px;
  --cursor-logo-height-mobile:29px;

  --desktop-claude-top:4.5%;
  --desktop-claude-right:auto;
  --desktop-claude-bottom:auto;
  --desktop-claude-left:7%;

  --desktop-gemini-top:4.5%;
  --desktop-gemini-right:7%;
  --desktop-gemini-bottom:auto;
  --desktop-gemini-left:auto;

  --desktop-gpt-top:auto;
  --desktop-gpt-right:auto;
  --desktop-gpt-bottom:6.5%;
  --desktop-gpt-left:6.5%;

  --desktop-cursor-top:auto;
  --desktop-cursor-right:6.5%;
  --desktop-cursor-bottom:6.5%;
  --desktop-cursor-left:auto;

  --mobile-claude-top:4.5%;
  --mobile-claude-right:auto;
  --mobile-claude-bottom:auto;
  --mobile-claude-left:7%;

  --mobile-gemini-top:4.5%;
  --mobile-gemini-right:7%;
  --mobile-gemini-bottom:auto;
  --mobile-gemini-left:auto;

  --mobile-gpt-top:auto;
  --mobile-gpt-right:auto;
  --mobile-gpt-bottom:6.5%;
  --mobile-gpt-left:6.5%;

  --mobile-cursor-top:auto;
  --mobile-cursor-right:6.5%;
  --mobile-cursor-bottom:6.5%;
  --mobile-cursor-left:auto;

  --desktop-compliance-top:15%;
  --desktop-compliance-right:auto;
  --desktop-compliance-bottom:auto;
  --desktop-compliance-left:50%;

  --desktop-inventory-top:46.5%;
  --desktop-inventory-right:auto;
  --desktop-inventory-bottom:auto;
  --desktop-inventory-left:12%;

  --desktop-terrain-top:47%;
  --desktop-terrain-right:13%;
  --desktop-terrain-bottom:auto;
  --desktop-terrain-left:auto;

  --desktop-execution-top:auto;
  --desktop-execution-right:auto;
  --desktop-execution-bottom:14.5%;
  --desktop-execution-left:50%;

  --mobile-compliance-top:15%;
  --mobile-compliance-right:auto;
  --mobile-compliance-bottom:auto;
  --mobile-compliance-left:50%;

  --mobile-inventory-top:46.5%;
  --mobile-inventory-right:auto;
  --mobile-inventory-bottom:auto;
  --mobile-inventory-left:12%;

  --mobile-terrain-top:47%;
  --mobile-terrain-right:13%;
  --mobile-terrain-bottom:auto;
  --mobile-terrain-left:auto;

  --mobile-execution-top:auto;
  --mobile-execution-right:auto;
  --mobile-execution-bottom:14.5%;
  --mobile-execution-left:50%;

  position:relative;
  width:min(100%, 940px);
  aspect-ratio:1 / .9;
  margin-inline:auto;
  overflow:visible;
  background:transparent;
  font-family:"Montserrat", Arial, Helvetica, sans-serif;
}

.frogmi-ai-orbit{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  border:1.5px solid var(--orbit);
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}

.frogmi-ai-orbit--outer{
  width:91%;
  aspect-ratio:1;
}

.frogmi-ai-orbit--inner{
  width:61%;
  aspect-ratio:1;
}

.frogmi-ai-logo-pill,
.frogmi-ai-tag,
.frogmi-ai-center{
  position:absolute;
  z-index:4;
}

.frogmi-ai-logo-pill{
  min-width:176px;
  min-height:54px;
  padding:8px 14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

.frogmi-ai-logo-pill img,
.frogmi-ai-center img{
  display:block;
  max-width:100%;
  object-fit:contain;
}

.frogmi-ai-logo-pill--claude{
  top:var(--desktop-claude-top);
  right:var(--desktop-claude-right);
  bottom:var(--desktop-claude-bottom);
  left:var(--desktop-claude-left);
  background:var(--claude-bg);
}

.frogmi-ai-logo-pill--gemini{
  top:var(--desktop-gemini-top);
  right:var(--desktop-gemini-right);
  bottom:var(--desktop-gemini-bottom);
  left:var(--desktop-gemini-left);
  background:var(--gemini-bg);
}

.frogmi-ai-logo-pill--gpt{
  top:var(--desktop-gpt-top);
  right:var(--desktop-gpt-right);
  bottom:var(--desktop-gpt-bottom);
  left:var(--desktop-gpt-left);
  background:var(--gpt-bg);
}

.frogmi-ai-logo-pill--cursor{
  top:var(--desktop-cursor-top);
  right:var(--desktop-cursor-right);
  bottom:var(--desktop-cursor-bottom);
  left:var(--desktop-cursor-left);
  background:var(--cursor-bg);
}

.frogmi-ai-logo-pill--claude img{
  max-height:var(--claude-logo-height);
}

.frogmi-ai-logo-pill--gemini img{
  max-height:var(--gemini-logo-height);
}

.frogmi-ai-logo-pill--gpt img{
  max-height:var(--gpt-logo-height);
}

.frogmi-ai-logo-pill--cursor img{
  max-height:var(--cursor-logo-height);
}

.frogmi-ai-center{
  left:50%;
  top:50%;
  width:124px;
  height:124px;
  translate:-50% -50%;
  border-radius:50%;
  background:var(--frogmi-bg);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.15);
  animation:frogmiAiFloat 4.8s ease-in-out infinite;
}

.frogmi-ai-center img{
  max-width:92px;
  max-height:var(--frogmi-logo-height);
}

.frogmi-ai-center::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(242,247,244,.32);
  opacity:.8;
  animation:frogmiAiRing 4.8s ease-in-out infinite;
  pointer-events:none;
}

.frogmi-ai-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  min-height:32px;
  color:#111;
  font-size:12px;
  font-weight:800;
  text-align:center;
  letter-spacing:.02em;
}

.frogmi-ai-tag{
  padding:9px 16px;
  border-radius:999px;
  font-size:var(--tag-font-size);
  line-height:1;
  font-weight:800;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  white-space:nowrap;
}

.frogmi-ai-tag--inventory{
  top:var(--desktop-inventory-top);
  right:var(--desktop-inventory-right);
  bottom:var(--desktop-inventory-bottom);
  left:var(--desktop-inventory-left);
  color:var(--inventory-text);
  background:var(--inventory-bg);
}

.frogmi-ai-tag--terrain{
  top:var(--desktop-terrain-top);
  right:var(--desktop-terrain-right);
  bottom:var(--desktop-terrain-bottom);
  left:var(--desktop-terrain-left);
  color:var(--terrain-text);
  background:var(--terrain-bg);
}

.frogmi-ai-tag--execution{
  top:var(--desktop-execution-top);
  right:var(--desktop-execution-right);
  bottom:var(--desktop-execution-bottom);
  left:var(--desktop-execution-left);
  translate:-50% 0;
  color:var(--execution-text);
  background:var(--execution-bg);
}

.frogmi-ai-tag--compliance{
  top:var(--desktop-compliance-top);
  right:var(--desktop-compliance-right);
  bottom:var(--desktop-compliance-bottom);
  left:var(--desktop-compliance-left);
  translate:-50% 0;
  color:var(--compliance-text);
  background:var(--compliance-bg);
}

.frogmi-ai-routes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  overflow:visible;
}

.frogmi-ai-route{
  fill:none;
  stroke-width:2.65px;
  stroke-linecap:round;
  stroke-dasharray:9 9;
  animation:frogmiAiDash 2.4s linear infinite;
}

.frogmi-ai-route--claude{stroke:var(--claude-line);opacity:.92;}
.frogmi-ai-route--gemini{stroke:var(--gemini-line);}
.frogmi-ai-route--gpt{stroke:var(--gpt-line);}
.frogmi-ai-route--cursor{stroke:var(--cursor-line);}

.frogmi-ai-moving-point{
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.24));
}

.frogmi-ai-moving-point-glow{
  opacity:.28;
  filter:blur(4px);
}

@keyframes frogmiAiDash{
  to{stroke-dashoffset:-36;}
}

@keyframes frogmiAiFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(0,-5px) scale(1.015);}
}

@keyframes frogmiAiRing{
  0%,100%{transform:scale(1);opacity:.65;}
  50%{transform:scale(1.025);opacity:.9;}
}

@media (max-width:760px){
  .frogmi-ai-diagram{
    width:min(100%, 760px);
  }

  .frogmi-ai-logo-pill--claude{
    top:var(--mobile-claude-top);
    right:var(--mobile-claude-right);
    bottom:var(--mobile-claude-bottom);
    left:var(--mobile-claude-left);
  }

  .frogmi-ai-logo-pill--gemini{
    top:var(--mobile-gemini-top);
    right:var(--mobile-gemini-right);
    bottom:var(--mobile-gemini-bottom);
    left:var(--mobile-gemini-left);
  }

  .frogmi-ai-logo-pill--gpt{
    top:var(--mobile-gpt-top);
    right:var(--mobile-gpt-right);
    bottom:var(--mobile-gpt-bottom);
    left:var(--mobile-gpt-left);
  }

  .frogmi-ai-logo-pill--cursor{
    top:var(--mobile-cursor-top);
    right:var(--mobile-cursor-right);
    bottom:var(--mobile-cursor-bottom);
    left:var(--mobile-cursor-left);
  }

  .frogmi-ai-tag--compliance{
    top:var(--mobile-compliance-top);
    right:var(--mobile-compliance-right);
    bottom:var(--mobile-compliance-bottom);
    left:var(--mobile-compliance-left);
  }

  .frogmi-ai-tag--inventory{
    top:var(--mobile-inventory-top);
    right:var(--mobile-inventory-right);
    bottom:var(--mobile-inventory-bottom);
    left:var(--mobile-inventory-left);
  }

  .frogmi-ai-tag--terrain{
    top:var(--mobile-terrain-top);
    right:var(--mobile-terrain-right);
    bottom:var(--mobile-terrain-bottom);
    left:var(--mobile-terrain-left);
  }

  .frogmi-ai-tag--execution{
    top:var(--mobile-execution-top);
    right:var(--mobile-execution-right);
    bottom:var(--mobile-execution-bottom);
    left:var(--mobile-execution-left);
  }

  .frogmi-ai-orbit--outer{
    width:92%;
  }

  .frogmi-ai-orbit--inner{
    width:63%;
  }

  .frogmi-ai-logo-pill{
    min-width:128px;
    min-height:44px;
    padding:6px 10px;
  }

  .frogmi-ai-logo-pill--claude img{
    max-height:var(--claude-logo-height-mobile);
  }

  .frogmi-ai-logo-pill--gemini img{
    max-height:var(--gemini-logo-height-mobile);
  }

  .frogmi-ai-logo-pill--gpt img{
    max-height:var(--gpt-logo-height-mobile);
  }

  .frogmi-ai-logo-pill--cursor img{
    max-height:var(--cursor-logo-height-mobile);
  }

  .frogmi-ai-center{
    width:112px;
    height:112px;
  }

  .frogmi-ai-center img{
    max-width:82px;
    max-height:var(--frogmi-logo-height-mobile);
  }

  .frogmi-ai-tag{
    padding:7px 10px;
    font-size:max(10px, calc(var(--tag-font-size) - 1px));
  }

  .frogmi-ai-placeholder{
    font-size:11px;
  }
}


/* Hover suave de cápsulas v1.3.3 */
.frogmi-ai-logo-pill,
.frogmi-ai-tag{
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1),
    filter .42s ease;
  transform-origin:center;
  will-change:transform;
}

.frogmi-ai-logo-pill:hover,
.frogmi-ai-tag:hover{
  transform:scale(1.035);
  box-shadow:0 10px 20px rgba(0,0,0,.11);
  filter:brightness(1.015);
}