/* ═══════════════════════════════════════════════════════════
   Frogmi IA Hero Auditoría — hero.css  v1.1.6
   Solo estilos del bloque de foto + overlays.
   El fondo, textos y botón van en el tema/página.
   ═══════════════════════════════════════════════════════════ */

:root {
  --fiah-green:        #22c55e;
  --fiah-green-bright: #4AFF8C;
  --fiah-muted:        #8ab5a0;
}

/* ── BLOQUE PRINCIPAL ── */
.fiah-block {
  position: relative;
  width: 100%;
  max-width: 490px;
  aspect-ratio: 16 / 11;
  border-radius: 18px;
  overflow: visible;
  /* márgenes para que los badges flotantes no se corten */
  margin: 60px 70px 70px 90px;
}
.fiah-block *, .fiah-block *::before, .fiah-block *::after {
  box-sizing: border-box;
}

/* ── FOTO ── */
.fiah-photo {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 18px;
  display: block;
}
.fiah-photo-placeholder {
  width: 100%; height: 100%; border-radius: 18px;
  background: #0d2b1e; border: 1.5px dashed rgba(34,197,94,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(34,197,94,0.4);
  font-family: 'Sora', sans-serif; letter-spacing: 0.04em;
}

/* ── SCAN LINE ── */
.fiah-scan-line {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 5;
  background: linear-gradient(90deg,
    transparent,
    var(--fiah-green) 30%,
    var(--fiah-green-bright) 50%,
    var(--fiah-green) 70%,
    transparent);
  box-shadow: 0 0 10px var(--fiah-green-bright);
  pointer-events: none; border-radius: 2px;
  animation: fiah-scanMove 4s ease-in-out infinite;
}
@keyframes fiah-scanMove {
  0%   { top: 8%;  opacity: 0; }
  8%   { opacity: 0.75; }
  92%  { opacity: 0.75; }
  100% { top: 92%; opacity: 0; }
}

/* ── CORNERS ── */
.fiah-corner {
  position: absolute; width: 18px; height: 18px;
  pointer-events: none; z-index: 6;
}
.fiah-corner::before, .fiah-corner::after {
  content: ''; position: absolute;
  background: var(--fiah-green);
  box-shadow: 0 0 5px var(--fiah-green);
}
.fiah-tl { top:7px;    left:7px;   } .fiah-tr { top:7px;    right:7px;  }
.fiah-bl { bottom:7px; left:7px;   } .fiah-br { bottom:7px; right:7px;  }
.fiah-tl::before { top:0; left:0;   width:100%; height:2px; }
.fiah-tl::after  { top:0; left:0;   width:2px;  height:100%; }
.fiah-tr::before { top:0; right:0;  width:100%; height:2px; }
.fiah-tr::after  { top:0; right:0;  width:2px;  height:100%; }
.fiah-bl::before { bottom:0; left:0;  width:100%; height:2px; }
.fiah-bl::after  { bottom:0; left:0;  width:2px;  height:100%; }
.fiah-br::before { bottom:0; right:0; width:100%; height:2px; }
.fiah-br::after  { bottom:0; right:0; width:2px;  height:100%; }

/* ── SPARKLES ── */
.fiah-sparkles {
  position: absolute;
  width: 64px; height: 64px;
  pointer-events: none; z-index: 12;
}
/* estrella original arriba-derecha */
.fiah-sparkles-tr { top: -26px; right: -20px; }
/* nuevas estrellas alrededor, fuera de la foto */
.fiah-sparkles-tl { top: 8px; left: -46px; }
.fiah-sparkles-bl { bottom: 8px; left: -42px; }

.fiah-sp {
  position: absolute; color: #22c55e; font-weight: 900;
  user-select: none; line-height: 1;
  text-shadow: 0 0 10px rgba(74,255,140,.55);
  animation: fiah-tw 2.2s ease-in-out infinite;
}
.fiah-sp1 { top:2px;    right:8px;  font-size:24px; animation-delay:0s;    }
.fiah-sp2 { top:18px;   right:-2px; font-size:17px; animation-delay:.75s;  }
.fiah-sp3 { bottom:4px; right:8px;  font-size:14px; animation-delay:1.5s;  }

.fiah-sparkles-tl .fiah-sp1 { left:0; right:auto; top:0; animation-delay:.35s; }
.fiah-sparkles-tl .fiah-sp2 { left:24px; right:auto; top:18px; animation-delay:1.1s; }


.fiah-sparkles-bl .fiah-sp1 { left:8px; right:auto; top:4px; animation-delay:.2s; }
.fiah-sparkles-bl .fiah-sp2 { left:30px; right:auto; top:24px; animation-delay:.95s; }
.fiah-sparkles-bl .fiah-sp3 { left:6px; right:auto; bottom:0; animation-delay:1.65s; }


@keyframes fiah-tw {
  0%,100% { opacity:.15; transform:scale(.65); }
  50%      { opacity:1;   transform:scale(1.22); }
}

/* ════════════════════════════════════════
   BADGES  — estado inicial: invisibles
   Se animan cuando llegan al viewport
   ════════════════════════════════════════ */
.fiah-badge {
  position: absolute; z-index: 10;
  background: rgba(8,18,12,.90);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 12px; padding: 9px 12px;
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
  font-family: 'Inter', sans-serif;

  /* estado inicial: oculto + desplazado */
  opacity: 0;
  transform: translateY(12px) scale(.94);
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.22,1,.36,1);
}

/* Clase que agrega JS al entrar al viewport */
.fiah-badge.fiah-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* después de entrar, activa el float */
  animation: fiah-badgeFloat var(--fd,4s) ease-in-out var(--fde,0s) infinite;
}

@keyframes fiah-badgeFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Posiciones y timings del float */
.fiah-b-tl { top:-18px;   left:-12px;  --fd:5s;   --fde:0s;    transition-delay:.0s; }
.fiah-b-lc { top:50%;     left:-80px;  --fd:6s;   --fde:.5s;   transition-delay:.15s; }
.fiah-b-bl { bottom:-18px;left:-12px;  --fd:4.8s; --fde:1.6s;  transition-delay:.3s; }
.fiah-b-br { bottom:-18px;right:-12px; --fd:4.2s; --fde:1.1s;  transition-delay:.45s; }

/* Override float para el badge centrado verticalmente */
.fiah-b-lc.fiah-visible {
  animation: fiah-badgeFloatLc 6s ease-in-out .5s infinite;
}
@keyframes fiah-badgeFloatLc {
  0%,100% { transform: translateY(calc(-50% + 0px)); }
  50%      { transform: translateY(calc(-50% - 6px)); }
}
/* Mientras no es visible, centrar verticalmente sin float */
.fiah-b-lc:not(.fiah-visible) {
  transform: translateY(calc(-50% + 12px)) scale(.94);
}

/* Badge ring */
.fiah-badge-ring { position:relative; width:40px; height:40px; flex-shrink:0; }
.fiah-badge-ring svg { width:40px; height:40px; transform:rotate(-90deg); }
.fiah-track { fill:none; stroke:rgba(34,197,94,.14); stroke-width:3.5; }
.fiah-fill  { fill:none; stroke-width:3.5; stroke-linecap:round;
              stroke-dasharray:107; stroke-dashoffset:107; }
.fiah-pct {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-size:10px; font-weight:700; color:#fff;
}
.fiah-bname { font-family:'Sora',sans-serif; font-size:11px; font-weight:600; color:#fff; line-height:1.25; }
.fiah-bsub  { font-size:10px; color:var(--fiah-muted); margin-top:2px; }

/* ════════════════════════════════════════
   DASHBOARD CARD — igual que badges: entra al hacer scroll
   ════════════════════════════════════════ */
.fiah-dash {
  position:absolute; bottom:-52px; right:-62px;
  width:220px; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 52px rgba(0,0,0,.32);
  z-index:10; font-family:'Inter',sans-serif; color:#1a2e24;

  opacity:0;
  transform:translateY(16px) scale(.95);
  transition:
    opacity .55s ease .5s,
    transform .55s cubic-bezier(.22,1,.36,1) .5s;
}
.fiah-dash.fiah-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  animation:fiah-badgeFloat 5.5s ease-in-out .3s infinite;
}

.fiah-dash-header {
  padding:9px 12px 7px;
  border-bottom:1px solid #e8f5ee;
  font-family:'Sora',sans-serif; font-size:9px; font-weight:700; color:#0d7a3f;
}
.fiah-dash-top {
  display:flex; gap:8px; padding:10px 12px 8px;
  border-bottom:1px solid #f0f7f2;
}
.fiah-score-wrap {
  display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0;
}
.fiah-dc-ring { position:relative; width:58px; height:58px; }
.fiah-dc-ring svg { width:58px; height:58px; transform:rotate(-90deg); }
.fiah-rtrack { fill:none; stroke:#e8f5ee; stroke-width:5; }
.fiah-rfill  {
  fill:none; stroke:#22c55e; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:157; stroke-dashoffset:157;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);
}
.fiah-ring-num {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.fiah-big   { font-family:'Sora',sans-serif; font-size:16px; font-weight:800; color:#0d7a3f; line-height:1; }
.fiah-denom { font-size:8px; color:#5a7a68; }
.fiah-excelente { font-family:'Sora',sans-serif; font-size:8px; font-weight:700; color:#0d7a3f; }
.fiah-meta  { display:flex; flex-direction:column; gap:5px; justify-content:center; }
.fiah-meta-row { display:flex; align-items:flex-start; gap:4px; }
.fiah-mi    { font-size:8px; color:#6b8c76; margin-top:1px; flex-shrink:0; }
.fiah-ml    { font-size:7px; color:#6b8c76; line-height:1.2; }
.fiah-mv    { font-size:8px; font-weight:600; color:#1a2e24; line-height:1.2; }

.fiah-dash-mid {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid #f0f7f2;
}
.fiah-dcol { padding:8px 10px; }
.fiah-dcol:first-child { border-right:1px solid #f0f7f2; }
.fiah-dcol-title { font-family:'Sora',sans-serif; font-size:7.5px; font-weight:700; color:#1a2e24; margin-bottom:5px; }
.fiah-finding {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:3px; font-size:7px; color:#3a5a44;
}
.fiah-pill { font-size:6.5px; padding:1.5px 5px; border-radius:8px; font-weight:600; }
.fiah-pill.green { background:#dcfce7; color:#15803d; }
.fiah-pill.red   { background:#fee2e2; color:#dc2626; }
.fiah-rank { display:flex; align-items:baseline; gap:3px; margin-bottom:4px; }
.fiah-rank-num { font-family:'Sora',sans-serif; font-size:22px; font-weight:800; color:#0d7a3f; line-height:1; }
.fiah-rank-of  { font-size:8px; color:#6b8c76; }
.fiah-rank-desc { font-size:6.5px; color:#3a5a44; line-height:1.4; margin-bottom:4px; }
.fiah-rank-desc strong { color:#0d7a3f; }

.fiah-mini-bars { display:flex; align-items:flex-end; gap:1.5px; height:22px; }
.fiah-mini-bar  {
  width:5px; flex:1; border-radius:1px;
  transform:scaleY(0); transform-origin:bottom;
  transition: transform .4s ease var(--bar-delay, 0s);
}
/* Las barras se animan cuando el dash entra al viewport */
.fiah-dash.fiah-visible .fiah-mini-bar { transform: scaleY(1); }

.fiah-dash-notes { padding:7px 10px 8px; background:#fffef5; }
.fiah-notes-title { font-family:'Sora',sans-serif; font-size:7.5px; font-weight:700; color:#1a2e24; margin-bottom:4px; }
.fiah-note-row { display:flex; gap:5px; align-items:flex-start; }
.fiah-note-text { font-size:6.5px; color:#5a5a3a; line-height:1.45; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .fiah-block {
    margin: 50px 20px 60px;
    max-width: calc(100% - 40px);
  }
  .fiah-b-lc { left: -10px; }
  .fiah-dash { right: -10px; bottom: -60px; width: 190px; }
  .fiah-sparkles { transform: scale(.82); }
  .fiah-sparkles-tl { top: 6px; left: -36px; }
  .fiah-sparkles-bl { bottom: 6px; left: -30px; }
}