/* ===== ALTURIN · Herramientas (portada, aplicaciones y recursos) ===== */

/* ---------- portada: 3 accesos ---------- */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:10px 0 100px}
.hub__card{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px;min-height:300px;border-radius:24px;border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:.3s}
.hub__card::before{content:"";position:absolute;width:300px;height:300px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);transition:.4s}
.hub__card:hover{transform:translateY(-6px);border-color:var(--glow)}
.hub__card:hover::before{transform:scale(1.3)}
.hub__card[data-c=red]{--glow:rgba(227,38,45,.35)}
.hub__card[data-c=blue]{--glow:rgba(47,107,255,.4)}
.hub__card[data-c=silver]{--glow:rgba(207,214,226,.25)}
.hub__ico{position:relative;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--line)}
.hub__ico svg{width:28px;height:28px;fill:none;stroke:var(--strong);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hub__card h2{position:relative;font-size:1.7rem;font-weight:800}
.hub__card p{position:relative;color:var(--muted);flex:1}
.hub__go{position:relative;font-weight:600;color:var(--blue2)}
.hub__card:hover .hub__go{color:#fff}

/* ---------- etiquetas comunes ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35em .7em;border-radius:7px}
.pill--free{background:rgba(37,211,102,.16);color:#3ee07f;border:1px solid rgba(37,211,102,.35)}
.pill--pay{background:rgba(255,196,0,.14);color:#ffc93c;border:1px solid rgba(255,196,0,.35)}
.pill--soon{background:var(--tint);color:var(--muted);border:1px solid var(--line)}
.ico-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.is-off{opacity:.45;pointer-events:none}

/* ---------- aplicaciones ---------- */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;padding:10px 0 100px}
.app{display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:.3s}
.app:hover{border-color:rgba(95,160,255,.4);box-shadow:0 24px 50px -26px rgba(47,107,255,.6)}
.app__top{display:flex;gap:16px;align-items:flex-start;padding:22px 22px 0}
.app__ico{width:64px;height:64px;flex-shrink:0;border-radius:18px;display:grid;place-items:center;background:linear-gradient(140deg,var(--a1),var(--a2));box-shadow:0 10px 24px -10px var(--a1)}
.app__ico svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app__top h3{font-size:1.15rem;font-weight:700;margin:4px 0 6px}
.app__cat{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.app__body{padding:16px 22px 0;flex:1}
.app__body p{color:var(--muted);font-size:.9rem}
.app__plat{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.app__plat span{font-size:.74rem;padding:.3em .7em;border-radius:99px;border:1px solid var(--line);color:var(--silver)}
.app__plat span.off{opacity:.4;text-decoration:line-through}
.app__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:20px 22px 22px}
.app__actions .btn{justify-content:center;padding:.75em .8em;font-size:.85rem}
.app__actions .btn--main{grid-column:1/-1}
.btn--dark{background:var(--tint);border:1px solid var(--line)}
.btn--dark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.btn--blue{background:linear-gradient(135deg,var(--blue),#1d47c2);color:#fff}
.btn--blue:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(47,107,255,.8)}
.btn--gold{background:linear-gradient(135deg,#ffc93c,#e8a800);color:#231a00}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(255,196,0,.6)}

/* ---------- recursos ---------- */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;padding:10px 0 100px}
.res{display:flex;flex-direction:column;border-radius:20px;border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:.3s}
.res:hover{transform:translateY(-5px);border-color:var(--rc)}
.res__cover{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 75% 20%,color-mix(in srgb,var(--rc) 45%,transparent),transparent 60%),linear-gradient(150deg,#13264a,#081226)}
.res__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.res__cover::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(200deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(200deg,#000,transparent 70%)}
.res__file{position:relative;z-index:1;width:74px;height:92px;border-radius:8px 22px 8px 8px;background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 90%,#fff 10%),color-mix(in srgb,var(--rc) 60%,#000 40%));display:grid;place-items:end center;padding-bottom:12px;font:800 .78rem var(--fh);letter-spacing:.06em;color:#fff;box-shadow:0 18px 30px -12px color-mix(in srgb,var(--rc) 70%,transparent);transition:.3s}
.res:hover .res__file{transform:translateY(-4px) rotate(-4deg)}
.res__cover .pill{position:absolute;top:12px;right:12px;z-index:2}
.res__body{display:flex;flex-direction:column;gap:6px;padding:18px;flex:1}
.res__type{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rc)}
.res__body h3{font-size:1.02rem;font-weight:700;line-height:1.3}
.res__body p{font-size:.86rem;color:var(--muted);flex:1}
.res__meta{font-size:.76rem;color:var(--muted);margin-top:4px}
.res__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px 18px}
.res__actions .btn{justify-content:center;padding:.7em .6em;font-size:.84rem}
.res__actions .btn:only-child{grid-column:1/-1}

/* ---------- página de aplicación (calculadora) ---------- */
.tool{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start;padding:10px 0 100px}
.panel{padding:24px;border-radius:20px;border:1px solid var(--line);background:var(--panel)}
.panel h2{font-size:1.15rem;font-weight:700;margin-bottom:16px}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inputs .field--full{grid-column:1/-1}
.inputs label{display:block;font-size:.8rem;color:var(--silver);margin-bottom:5px}
.inputs input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;outline:none}
.inputs input:focus{border-color:var(--blue2)}
.inputs small{color:var(--muted);font-size:.72rem}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.kpi{padding:14px 16px;border-radius:14px;background:var(--sunk);border:1px solid var(--line)}
.kpi small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi b{font:700 1.3rem var(--fh)}
.kpi.ok b{color:#3ee07f}
.kpi.bad b{color:var(--red2)}
.chart{margin-top:14px}
.chart h3{font-size:.9rem;font-weight:600;color:var(--silver);margin-bottom:6px}
.chart svg{width:100%;height:auto;border-radius:12px;background:var(--sunk);border:1px solid var(--line)}
.note{font-size:.8rem;color:var(--muted);margin-top:14px}

@media (max-width:980px){
  .hub{grid-template-columns:1fr}
  .hub__card{min-height:0}
  .tool{grid-template-columns:1fr}
}
@media (max-width:520px){
  .apps{grid-template-columns:1fr}
  .results{grid-template-columns:1fr 1fr}
}