/* ──────────────────────────────────────────────────────────────────────
   Analizador de sitios — /servicios/marketing

   Solo se carga en esa página, no en todo el sitio.

   Sobre los colores: aquí SÍ se usan verde y rojo, y es la única parte
   del sitio donde eso pasa. La paleta de la marca no los tiene, pero un
   semáforo es un lenguaje que el visitante ya sabe leer sin que nadie se
   lo explique, y esto es justamente un diagnóstico: verde = está bien,
   ámbar = se puede mejorar, rojo = urge. Viven en tokens locales de .an,
   no en la paleta global, para que no se filtren al resto del sitio.

   El naranja de la marca sigue siendo el color de la ACCIÓN (el botón, el
   foco del formulario, la alerta de error), no el de la advertencia: si
   el naranja significara dos cosas en la misma pantalla no significaría
   ninguna.

   Cada punto lleva además ícono y texto, para quien no distingue matices.
   ────────────────────────────────────────────────────────────────────── */

.an{
  margin:0 auto; max-width:820px;
  /* semáforo local — ver la nota de arriba antes de moverlos */
  --an-bien:#3fd684;      --an-bien-f:rgba(63,214,132,.13);
  --an-medio:#ffc53d;     --an-medio-f:rgba(255,197,61,.13);
  --an-mal:#ff4f63;       --an-mal-f:rgba(255,79,99,.13);
}

/* ── Formulario ───────────────────────────────────────────────────── */

.an-form{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:10px;border-radius:var(--pill);
  background:rgba(255,255,255,.04);
  border:1px solid var(--v-line);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.an-form:focus-within{
  border-color:var(--v);
  box-shadow:0 0 0 4px var(--v-soft);
}
.an-form input{
  flex:1;min-width:220px;border:0;background:transparent;
  padding:12px 18px;
  font-family:var(--font-body);font-size:1rem;color:var(--white);
}
.an-form input::placeholder{color:var(--text-dim)}
.an-form input:focus{outline:0}
.an-form button{
  flex-shrink:0;border:0;cursor:pointer;border-radius:var(--pill);
  padding:13px 26px;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  color:#0b0416;background:var(--v);
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.an-form button:hover:not(:disabled){transform:translateY(-1px)}
.an-form button:disabled{opacity:.5;cursor:progress}
.an-form button:focus-visible{outline:2px solid var(--white);outline-offset:3px}

.an-pie{
  margin:12px 4px 0;font-size:.8rem;color:var(--text-dim);text-align:center;
}

/* ── Estado ───────────────────────────────────────────────────────── */

.an-estado{
  display:none;align-items:center;justify-content:center;gap:12px;
  margin-top:28px;font-size:.92rem;color:var(--text-muted);
}
.an-estado.on{display:flex}
.an-spin{
  width:17px;height:17px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--v-line);border-top-color:var(--v);
  animation:an-gira .7s linear infinite;
}
@keyframes an-gira{to{transform:rotate(360deg)}}

.an-alerta{
  display:none;margin-top:22px;padding:14px 18px;border-radius:var(--radius);
  background:rgba(255,105,47,.09);border:1px solid rgba(255,105,47,.32);
  color:#ffb596;font-size:.9rem;line-height:1.6;text-align:center;
}
.an-alerta.on{display:block}
.an-alerta a{color:var(--orange-warm)}

/* ── Resultado ────────────────────────────────────────────────────── */

.an-out{display:none;margin-top:34px}
.an-out.on{display:block;animation:an-entra .5s var(--ease) both}
@keyframes an-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Cabecera: dominio + anillo de calificación */
.an-cab{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:24px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.an-anillo{position:relative;width:104px;height:104px;flex-shrink:0}
.an-anillo svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.an-anillo circle{fill:none;stroke-width:8;stroke-linecap:round}
.an-anillo .an-pista{stroke:rgba(255,255,255,.07)}
.an-anillo .an-arco{
  stroke:var(--an-color,var(--v));
  transition:stroke-dashoffset 1.1s var(--ease);
}
.an-anillo b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.85rem;
  color:var(--an-color,var(--v));
}
.an-cab-txt{flex:1;min-width:220px}
.an-cab-txt h3{
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  color:var(--white);line-height:1.25;margin-bottom:6px;word-break:break-word;
}
.an-cab-txt p{font-size:.9rem;color:var(--text-muted);line-height:1.6}

/* Barras por categoría */
.an-cats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-top:14px;
}
.an-cat{
  padding:15px 17px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.an-cat-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.an-cat-top span{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--text);
}
.an-cat-top b{
  font-family:var(--font-display);font-weight:800;font-size:.94rem;
  color:var(--an-color,var(--v));
}
.an-barra{
  height:5px;margin-top:10px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.07);
}
.an-barra i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--an-color,var(--v));
  transition:width 1s var(--ease);
}

/* Diagnóstico escrito */
.an-diag{
  margin-top:22px;padding:24px 26px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--v-soft),transparent);
  border:1px solid var(--v-line);
}
.an-diag h4{
  font-family:var(--font-display);font-weight:800;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--v);margin-bottom:14px;
}
.an-diag p{font-size:.95rem;line-height:1.75;color:var(--text);margin-bottom:12px}
.an-diag p:last-child{margin-bottom:0}
.an-diag strong{color:var(--white);font-weight:600}
/* el cursor de escritura mientras llega el texto */
.an-diag.escribiendo p:last-child::after{
  content:'';display:inline-block;width:2px;height:1em;margin-left:2px;
  vertical-align:-.12em;background:var(--v);animation:an-late 1s steps(2) infinite;
}
@keyframes an-late{50%{opacity:0}}

/* Lista de revisiones */
.an-lista{margin-top:22px}
.an-grupo{
  border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;background:var(--surface);
}
.an-grupo summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:15px 18px;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--white);
}
.an-grupo summary::-webkit-details-marker{display:none}
.an-grupo summary:focus-visible{outline:2px solid var(--v);outline-offset:-2px}
.an-grupo summary .an-cuenta{
  margin-left:auto;font-family:var(--font-body);font-weight:400;
  font-size:.8rem;color:var(--text-dim);
}
.an-grupo summary::after{
  content:'+';font-size:1.1rem;color:var(--text-dim);line-height:1;
}
.an-grupo[open] summary::after{content:'−'}
.an-items{padding:0 18px 8px}

.an-item{
  display:flex;gap:12px;padding:12px 0;
  border-top:1px solid var(--line-soft);
}
.an-item:first-child{border-top:0}
.an-marca{
  flex-shrink:0;width:20px;height:20px;margin-top:2px;border-radius:50%;
  display:grid;place-items:center;font-size:.7rem;font-weight:700;
}
.an-item.si .an-marca{color:var(--an-bien);background:var(--an-bien-f)}
.an-item.no .an-marca{color:var(--an-mal);background:var(--an-mal-f)}
.an-item b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:.88rem;color:var(--white);margin-bottom:3px;
}
.an-item p{font-size:.84rem;line-height:1.6;color:var(--text-muted)}

/* CTA final */
.an-cierre{
  margin-top:26px;padding:24px;border-radius:var(--radius);text-align:center;
  background:var(--surface);border:1px solid var(--line);
}
.an-cierre p{font-size:.92rem;color:var(--text-muted);margin-bottom:16px}
.an-botones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.an-botones button,.an-botones a{
  display:inline-block;cursor:pointer;text-decoration:none;
  padding:12px 22px;border-radius:var(--pill);
  font-family:var(--font-display);font-weight:700;font-size:.88rem;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.an-botones .an-primario{color:#0b0416;background:var(--v);border:0}
.an-botones .an-fantasma{
  color:var(--white);background:transparent;border:1px solid rgba(255,255,255,.2);
}
.an-botones button:hover,.an-botones a:hover{transform:translateY(-1px)}
.an-botones .an-fantasma:hover{background:rgba(255,255,255,.06)}
.an-botones :focus-visible{outline:2px solid var(--v);outline-offset:3px}

@media (max-width:560px){
  .an-form{border-radius:var(--radius);flex-direction:column}
  .an-form input{text-align:center}
  .an-cab{gap:18px;padding:20px;justify-content:center;text-align:center}
  .an-diag{padding:20px}
}

@media (prefers-reduced-motion:reduce){
  .an-spin{animation:none}
  .an-out.on{animation:none}
  .an-anillo .an-arco,.an-barra i{transition:none}
  .an-diag.escribiendo p:last-child::after{animation:none}
}