/* Estilos de /herramientas/ — comunes a las 4 (calculadora, stripe vs redsys,
   migracion shopify, generador de schema). Viven aparte de 360.css porque solo
   los usa esta seccion: no hay motivo para que los cargue el resto del sitio. */
.calc{display:grid;grid-template-columns:1.25fr .85fr;gap:1.6rem;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-block{border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;margin:0 0 1rem;background:var(--surface)}
.calc-block legend{padding:0 .5rem;font:600 .82rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.calc-block legend b{color:var(--cyan);font-family:var(--mono)}
.calc-opts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:520px){.calc-opts{grid-template-columns:1fr}}
.calc-opt input,.calc-check input{position:absolute;opacity:0;pointer-events:none}
.calc-opt span{display:flex;flex-direction:column;gap:.15rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s}
.calc-opt span b{font-size:.98rem}
.calc-opt span small{color:var(--muted);font:500 .8rem/1 var(--mono)}
.calc-opt input:checked+span{border-color:var(--cyan);background:rgba(49,230,255,.07)}
.calc-opt input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.calc-checks{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media(max-width:520px){.calc-checks{grid-template-columns:1fr}}
.calc-check span{display:block;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.92rem;transition:border-color .2s,background .2s}
.calc-check span small{color:var(--muted)}
.calc-check input:checked+span{border-color:var(--lime);background:rgba(183,255,90,.07)}
.calc-check input:focus-visible+span{outline:2px solid var(--lime);outline-offset:2px}
.calc-hint{margin:.7rem 0 0;color:var(--muted);font-size:.84rem;line-height:1.5}
.calc-block input[type=range]{width:100%;margin:.4rem 0 0;accent-color:var(--cyan)}
.calc-out{position:sticky;top:96px;border:1px solid var(--line);border-radius:18px;padding:1.4rem;background:var(--surface2)}
@media(max-width:900px){.calc-out{position:static}}
.calc-out-kicker{margin:0 0 .8rem;font:600 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc-plan b{display:block;font-size:1.15rem}
.calc-plan span{display:block;margin:.25rem 0 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.calc-price{margin:1rem 0;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-price b{display:block;font:800 2.3rem/1 var(--font);letter-spacing:-.02em}
.calc-price small{display:block;margin:.35rem 0 0;color:var(--muted);font:500 .78rem/1.4 var(--mono)}
.calc-rows:empty{display:none}
.calc-rows div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;font-size:.88rem;color:var(--muted)}
.calc-rows div b{color:var(--ivory);font-weight:600;white-space:nowrap}
.calc-meta{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line)}
.calc-meta span{display:block;color:var(--muted);font-size:.78rem}
.calc-meta b{font-size:.95rem}
.calc-legal{margin:1rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.calc-jump{margin:1rem 0 0;width:100%;justify-content:center}
@media(min-width:901px){.calc-jump{display:none}}
.calc-h2{margin:.2rem 0 .4rem;font-size:1.6rem;letter-spacing:-.02em}
.calc-sub{margin:0 0 1.2rem;color:var(--muted);line-height:1.6}
.form-ok-card .btn{margin:1rem 0 0}

/* Campos de texto/numero/select: el 360.css estiliza los del formulario de
   contacto, pero estos viven dentro de un fieldset, no de .form */
.calc-field{display:block;margin:.5rem 0 0;color:var(--muted);font-size:.86rem}
.calc-field input,.calc-field select{width:100%;margin:.35rem 0 0;padding:.7rem .85rem;border:1px solid var(--line);border-radius:10px;background:var(--obsidian);color:var(--ivory);font:500 1rem var(--font)}
.calc-field input:focus,.calc-field select:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
.calc-block .frow{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:520px){.calc-block .frow{grid-template-columns:1fr}}
.calc-block legend small{color:var(--muted);text-transform:none;letter-spacing:0}

/* Stripe vs Redsys: las dos cartas enfrentadas */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.vs-card{padding:.9rem;border:1px solid var(--line);border-radius:12px;text-align:center;transition:border-color .2s,background .2s}
.vs-card.gana{border-color:var(--lime);background:rgba(183,255,90,.06)}
.vs-card b{display:block;font-size:.9rem;color:var(--muted)}
.vs-year{display:block;margin:.3rem 0 .15rem;font:800 1.5rem/1 var(--font);letter-spacing:-.02em}
.vs-card small{display:block;color:var(--muted);font:500 .75rem var(--mono)}
.vs-verdict{margin:1rem 0;padding:.8rem;border-radius:10px;background:var(--surface);font-size:.92rem;line-height:1.5;text-align:center}
.vs-verdict b{color:var(--lime)}

/* Generador de Schema: horarios y salida de código */
.hors{display:grid;gap:.45rem}
.hor{display:grid;grid-template-columns:5.5rem 1fr 1fr auto;gap:.4rem;align-items:center;font-size:.85rem}
@media(max-width:520px){.hor{grid-template-columns:4.5rem 1fr 1fr;row-gap:.2rem}.hor-cerrado{grid-column:2/4}}
.hor>span{color:var(--muted)}
.hor input[type=time]{padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--obsidian);color:var(--ivory);font:500 .85rem var(--mono);width:100%}
.hor-cerrado{display:flex;align-items:center;gap:.3rem;color:var(--muted);cursor:pointer;font-size:.8rem}
.hor-cerrado input{position:static;opacity:1;pointer-events:auto;accent-color:var(--coral)}
.schema-out{max-height:340px;overflow:auto;padding:.9rem;border:1px solid var(--line);border-radius:12px;background:var(--obsidian);color:var(--ivory);font:500 .74rem/1.6 var(--mono);white-space:pre-wrap;word-break:break-word}
.schema-acts{display:flex;gap:.5rem;margin:.8rem 0 0;flex-wrap:wrap}
.schema-acts .btn{flex:1;justify-content:center;white-space:nowrap}

/* Hub: las tarjetas son enlaces enteros, no solo el pie */
.tool-card{display:block;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.tool-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.tool-card footer span{color:var(--cyan)}