/* ===========================================================
   InnPulso — Diagnóstico SEO para tiendas online
   Se carga sólo en /herramientas/ para no engordar el CSS global.
   =========================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Header sobre el hero oscuro ----------
   El header es transparente hasta que hay scroll, y su texto es navy:
   sobre este hero quedaría invisible. Mientras no esté "scrolled", va en blanco. */
.tool-page .brand-logo--white{display:none}
.tool-page .site-header:not(.scrolled) .brand-logo--color{display:none}
.tool-page .site-header:not(.scrolled) .brand-logo--white{display:block}
.tool-page .site-header:not(.scrolled) .main-nav a{color:#fff}
.tool-page .site-header:not(.scrolled) .main-nav a:hover{color:#FBAFC8}
.tool-page .site-header:not(.scrolled) .main-nav a.is-active{color:#FBAFC8}
.tool-page .site-header:not(.scrolled) .nav-toggle span{background:#fff}
.tool-page .main-nav a.is-active{color:var(--magenta)}
@media (max-width:1180px){
  /* el panel desplegable va sobre fondo blanco: ahí manda el color normal */
  .tool-page .site-header:not(.scrolled) .main-nav.open a{color:var(--navy)}
  .tool-page .site-header:not(.scrolled) .main-nav.open a.is-active{color:var(--magenta)}
}

/* ---------- Hero de la herramienta ---------- */
.tool-hero{background:var(--navy);color:#fff;padding:150px 0 84px;position:relative;overflow:hidden}
.tool-hero::before{content:"";position:absolute;top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(231,42,104,.34),transparent 68%);pointer-events:none}
.tool-hero-inner{position:relative;z-index:2;max-width:860px;text-align:center}
.tool-kicker{display:inline-block;padding:.42rem 1.1rem;border-radius:100px;background:rgba(231,42,104,.16);border:1px solid rgba(231,42,104,.42);color:#FBAFC8;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.5rem}
.tool-hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.5rem);margin-bottom:1.3rem;line-height:1.06}
.tool-lead{color:#B9C0D4;font-size:1.1rem;max-width:660px;margin:0 auto 2.3rem}

.tool-form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:660px;margin:0 auto}
.tool-form input{flex:1 1 300px;padding:1.2rem 1.6rem;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font-size:1.05rem;font-family:inherit}
.tool-form input::placeholder{color:#8890AA}
.tool-form input:focus{outline:none;border-color:var(--magenta);background:rgba(255,255,255,.11)}
.tool-form button[disabled]{opacity:.6;cursor:progress}
.tool-note{margin-top:1.2rem;color:#8890AA;font-size:.92rem}
.tool-error{margin-top:1.2rem;padding:.9rem 1.3rem;border-radius:14px;background:rgba(231,42,104,.14);border:1px solid rgba(231,42,104,.45);color:#FFD9E4;max-width:560px;margin-inline:auto}

/* ---------- Cargando ---------- */
.tool-loading{background:var(--navy);color:#fff;padding:0 0 90px;text-align:center}
.tool-spinner{display:flex;gap:10px;justify-content:center;margin-bottom:1.6rem}
.tool-spinner span{width:13px;height:13px;border-radius:50%;background:var(--magenta);animation:toolBounce 1.3s infinite ease-in-out}
.tool-spinner span:nth-child(2){animation-delay:.18s;background:#F2769D}
.tool-spinner span:nth-child(3){animation-delay:.36s;background:#FBAFC8}
@keyframes toolBounce{0%,80%,100%{transform:translateY(0);opacity:.55}40%{transform:translateY(-14px);opacity:1}}
.tool-loading-text{font-size:1.2rem;font-weight:700;color:#fff;margin:0 0 .4rem}
.tool-loading-sub{color:#8890AA;font-size:.94rem;margin:0}
@media (prefers-reduced-motion:reduce){.tool-spinner span{animation:none}}

/* ---------- Resultado ---------- */
.tool-result{background:var(--bg-soft);padding:70px 0 90px}

.score-card{display:flex;align-items:center;gap:2.8rem;flex-wrap:wrap;justify-content:center;background:#fff;border-radius:var(--radius-lg);padding:2.6rem;box-shadow:var(--shadow-sm);margin-bottom:2rem}
.score-ring-wrap{position:relative;flex:0 0 auto;width:200px;height:200px}
.score-ring{width:200px;height:200px;transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:15;stroke-linecap:round}
.ring-bg{stroke:#EDEFF6}
.ring-fill{stroke:var(--magenta);stroke-dasharray:540;stroke-dashoffset:540;transition:stroke-dashoffset 1.4s var(--ease),stroke .6s}
.score-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* fila propia: así "/100" se apoya en la base del número y no en el borde del anillo */
.score-num-row{display:flex;align-items:baseline;gap:3px}
.score-value strong{font-size:3.5rem;font-weight:900;letter-spacing:-.04em;color:var(--navy);line-height:1}
.score-value span{font-size:1.05rem;color:var(--muted);font-weight:600}
.score-info{flex:1 1 320px;min-width:280px}
.score-level{display:inline-block;padding:.4rem 1rem;border-radius:100px;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem;background:var(--magenta-soft);color:var(--magenta-dark)}
.score-info h2{font-size:1.9rem;margin-bottom:.7rem;word-break:break-word}
.score-info p{color:var(--muted);margin:0 0 .5rem}
.score-meta{font-size:.88rem;color:#9AA1B4}

.areas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1rem;margin-bottom:2rem}
.area-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:var(--shadow-sm)}
.area-card h4{font-size:1rem;margin-bottom:.9rem;color:var(--navy)}
.area-bar{height:9px;border-radius:100px;background:#EDEFF6;overflow:hidden;margin-bottom:.6rem}
.area-bar i{display:block;height:100%;border-radius:100px;width:0;transition:width 1.1s var(--ease)}
.area-score{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;color:var(--navy)}
.area-score small{font-size:.85rem;font-weight:600;color:var(--muted)}

.priority-box{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:2.2rem 2.4rem;margin-bottom:2rem}
.priority-box h3{color:#fff;font-size:1.4rem;margin-bottom:1.2rem}
.priority-box ol{counter-reset:pri;display:grid;gap:1rem}
.priority-box li{counter-increment:pri;display:flex;gap:1rem;align-items:flex-start;color:#B9C0D4;line-height:1.6}
.priority-box li::before{content:counter(pri);flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--magenta);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.priority-box strong{display:block;color:#fff;margin-bottom:.15rem}

.findings{display:grid;gap:1.4rem;margin-bottom:2.4rem}
.find-group{background:#fff;border-radius:var(--radius);padding:1.8rem 2rem;box-shadow:var(--shadow-sm)}
.find-group > h3{font-size:1.15rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.find-group > h3 em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--muted);background:var(--bg-soft);padding:.25rem .7rem;border-radius:100px}
.find-item{display:flex;gap:.9rem;padding:.95rem 0;border-top:1px solid var(--line)}
.find-item:first-of-type{border-top:none}
.find-dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;margin-top:.5rem}
.find-dot.ok{background:#22A45D}.find-dot.warn{background:#E8A13A}.find-dot.fail{background:var(--magenta)}
.find-body strong{display:block;font-size:1rem;color:var(--navy);margin-bottom:.15rem}
.find-body p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.find-body .find-tip{margin-top:.4rem;color:var(--ink);font-size:.94rem;border-left:3px solid var(--magenta-soft);padding-left:.8rem}

.tool-cta{background:#fff;border-radius:var(--radius-lg);padding:2.6rem;text-align:center;box-shadow:var(--shadow-sm)}
.tool-cta h3{font-size:1.7rem;margin-bottom:.8rem}
.tool-cta > p{color:var(--muted);max-width:600px;margin:0 auto 1.8rem}
.tool-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.tool-lead{border-top:1px solid var(--line);padding-top:1.8rem;max-width:520px;margin:0 auto}
.tool-lead > label{display:block;font-weight:600;margin-bottom:.8rem;color:var(--navy)}
.tool-lead-row{display:flex;gap:10px;flex-wrap:wrap}
.tool-lead-row input[type=email]{flex:1 1 240px;padding:.95rem 1.3rem;border-radius:100px;border:1px solid var(--line);background:var(--bg-soft);font-family:inherit;font-size:1rem;color:var(--ink)}
.tool-lead-row input[type=email]:focus{outline:none;border-color:var(--magenta);background:#fff}
.tool-lead-note{font-size:.85rem;color:#9AA1B4;margin:.9rem 0 0}
.tool-lead.is-sent{text-align:center;color:#22A45D;font-weight:600}

.tool-again{text-align:center;margin-top:2rem}
.linklike{color:var(--magenta);font-weight:600;font-size:1rem;text-decoration:underline;text-underline-offset:4px}

/* ---------- Contenido de apoyo ---------- */
.tool-content{padding:90px 0}
.tool-content-inner{max-width:820px}
.tool-content h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:2.8rem 0 1rem}
.tool-content h2:first-child{margin-top:0}
.tool-content p{color:var(--muted);margin:0 0 1.1rem}
.tool-content a{color:var(--magenta);font-weight:600}
.tool-areas-explain{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.3rem;margin:1.8rem 0 1rem}
.tool-areas-explain article{background:var(--bg-soft);border-radius:20px;padding:1.7rem}
.tool-areas-explain h3{font-size:1.1rem;margin-bottom:.7rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.tool-areas-explain h3 span{flex:0 0 auto;font-size:.8rem;font-weight:800;color:var(--magenta);background:var(--magenta-soft);padding:.25rem .7rem;border-radius:100px}
.tool-areas-explain p{font-size:.96rem;margin:0}
.tool-list{display:grid;gap:1rem;margin:1.4rem 0 1.6rem}
.tool-list li{padding-left:1.4rem;position:relative;color:var(--muted);line-height:1.65}
.tool-list li::before{content:"";position:absolute;left:0;top:.65rem;width:7px;height:7px;border-radius:50%;background:var(--magenta)}
.tool-list strong{color:var(--navy)}
.tool-content .faq-item{margin-bottom:.7rem}

/* ---------- Móvil ---------- */
@media (max-width:860px){
  .tool-hero{padding:120px 0 64px}
  .tool-form input,.tool-form button{width:100%;flex:0 0 auto}
  .score-card{padding:1.8rem;gap:1.8rem}
  .score-info{text-align:center}
  .priority-box,.tool-cta,.find-group{padding:1.6rem}
  .tool-cta-actions .btn{width:100%}
  .tool-content{padding:64px 0}
}