:root{
    --gold-bright:#d0ae69;
    --panel:#0b0b0b;
    --panel2:#0e0e0e
}

.tools-page{
    background:#050505
}
.tools-header{
    height:162px
}


.status-dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold);
    margin-right:9px;
    vertical-align:1px
}
.tools-main{
    width:min(1380px,92%);
    margin:auto;
    padding:150px 0 100px
}

.tools-hero{
    min-height:390px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    border-bottom:1px solid rgba(184,152,88,.18);
    padding-bottom:75px
}
.hero-overline{
    font-size:.65rem;
    letter-spacing:.3em;
    color:var(--gold)
}
.tools-hero h1{
    font-family:Sora,sans-serif;
    font-size:clamp(3.4rem,7vw,7rem);
    font-weight:300;
    line-height:.94;
    letter-spacing:-.055em;
    margin-top:25px
}

.tools-hero h1 em{
    font-style:normal;
    color:var(--gold)
}

.tools-hero p{
    max-width:650px;
    color:#888;
    line-height:1.9;
    margin-top:35px;
    font-size:1rem
}

.tools-hero-mark{text-align:right;color:var(--gold);opacity:.65}.tools-hero-mark span{font-family:Sora;font-size:8rem;font-weight:300;line-height:.7}.tools-hero-mark small{display:block;font-size:.55rem;letter-spacing:.28em;line-height:1.7;margin-top:30px}.hero-actions{display:flex;gap:14px;margin-top:32px}.primary-btn,.ghost-btn{display:inline-flex;gap:25px;align-items:center;padding:17px 23px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:.3s}.primary-btn{border:1px solid var(--gold);color:var(--gold)}.primary-btn:hover{background:var(--gold);color:#050505}.ghost-btn{border:1px solid rgba(255,255,255,.12);color:#777}.ghost-btn:hover{border-color:rgba(255,255,255,.3);color:#fff}.quick-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(184,152,88,.16)}.quick-stats div{padding:27px 25px;border-right:1px solid rgba(184,152,88,.12)}.quick-stats div:last-child{border-right:0}.quick-stats strong{display:block;font-family:Sora;font-weight:300;color:#ddd;font-size:1.8rem}.quick-stats span{display:block;color:#555;text-transform:uppercase;letter-spacing:.13em;font-size:.58rem;margin-top:7px}.tools-section{padding:115px 0 0}.section-title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.eyebrow{font-size:.68rem;letter-spacing:.3em;color:var(--gold);font-weight:500}.section-title-row h2{font-family:Sora;font-weight:300;font-size:2.8rem;margin-top:13px;letter-spacing:-.03em}.section-title-row>p{color:#666;max-width:420px;line-height:1.7;text-align:right}.tool-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.filter{appearance:none;background:transparent;border:1px solid rgba(184,152,88,.14);color:#666;padding:11px 15px;text-transform:uppercase;letter-spacing:.12em;font-size:.58rem;cursor:pointer;transition:.25s}.filter:hover,.filter.active{color:var(--gold);border-color:rgba(184,152,88,.5);background:rgba(184,152,88,.045)}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tool-card{min-height:315px;border:1px solid rgba(184,152,88,.16);background:linear-gradient(145deg,#0c0c0c,#080808);padding:30px;display:flex;flex-direction:column;transition:.45s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}.tool-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(184,152,88,.07),transparent 45%);opacity:0;transition:.4s}.tool-card:hover{transform:translateY(-5px);border-color:rgba(184,152,88,.48)}.tool-card:hover:before{opacity:1}.tool-card>*{position:relative}.tool-card.featured{border-color:rgba(184,152,88,.38)}.tool-icon{font-size:1.5rem;color:var(--gold);height:55px}.tool-kicker{font-size:.6rem;letter-spacing:.25em;color:#666}.tool-card h3{font-family:Sora;font-size:1.35rem;font-weight:400;margin-top:12px}.tool-card p{font-size:.84rem;color:#777;line-height:1.75;margin-top:15px}.tool-arrow{margin-top:auto;color:var(--gold);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.tool-card.is-hidden{display:none}.data-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(184,152,88,.16);border-left:1px solid rgba(184,152,88,.16)}.data-card{min-height:170px;padding:25px;border-right:1px solid rgba(184,152,88,.16);border-bottom:1px solid rgba(184,152,88,.16);position:relative;transition:.3s}.data-card:hover{background:#0b0b0b}.data-card span{font-size:.62rem;color:#555;letter-spacing:.15em}.data-card strong{display:block;font-family:Sora;font-weight:300;font-size:1.45rem;margin-top:35px}.data-card small{display:block;color:#666;margin-top:10px}.data-card b{position:absolute;right:25px;bottom:25px;color:var(--gold);font-weight:400}.workflow-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(184,152,88,.16)}.workflow-step{min-height:190px;padding:27px;border-right:1px solid rgba(184,152,88,.16);position:relative}.workflow-step:last-child{border-right:0}.workflow-step span{font-size:.62rem;letter-spacing:.15em;color:#555}.workflow-step strong{display:block;font-family:Sora;font-weight:400;font-size:1.05rem;margin-top:40px}.workflow-step p{font-size:.78rem;color:#666;line-height:1.7;margin-top:12px}.library-card{border:1px solid rgba(184,152,88,.25);padding:55px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#0d0d0d,#080808)}.library-card h2{font-family:Sora;font-weight:300;font-size:2.5rem;margin:15px 0}.library-card p{color:#777;max-width:580px;line-height:1.8}.source-note{display:flex;gap:35px;margin-top:22px;padding:20px 25px;border-left:1px solid var(--gold)}.source-note span{font-size:.58rem;letter-spacing:.2em;color:var(--gold);min-width:130px}.source-note p{font-size:.72rem;color:#666;line-height:1.7}.tool-workspace{position:fixed;inset:0;background:rgba(5,5,5,.97);z-index:1000;padding:90px max(4%,40px);overflow:auto;display:none}.tool-workspace.open{display:block}.workspace-head{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid rgba(184,152,88,.18);padding-bottom:30px}.workspace-head h2{font-family:Sora;font-size:3rem;font-weight:300;margin-top:12px}.close-tool{background:transparent;border:1px solid rgba(255,255,255,.12);color:#777;padding:12px 17px;text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;cursor:pointer}.close-tool:hover{color:#fff;border-color:rgba(255,255,255,.3)}.workspace-placeholder{max-width:1200px;margin:80px auto;border:1px dashed rgba(184,152,88,.25);padding:80px 50px;text-align:center}.workspace-placeholder span{font-size:.6rem;letter-spacing:.25em;color:var(--gold)}.workspace-placeholder strong{display:block;font-family:Sora;font-weight:300;font-size:2rem;margin-top:18px}.workspace-placeholder p{max-width:600px;margin:15px auto 0;color:#666;line-height:1.8}.tools-footer{margin-top:40px}
@media(max-width:1050px){.tool-grid{grid-template-columns:repeat(2,1fr)}.data-grid,.workflow-grid{grid-template-columns:repeat(2,1fr)}.workflow-step:nth-child(2){border-right:0}.workflow-step:nth-child(-n+2){border-bottom:1px solid rgba(184,152,88,.16)}.tools-hero-mark{display:none}.section-title-row{gap:30px}}
@media(max-width:700px){.tools-main{padding-top:125px}.tools-hero{min-height:auto;padding-bottom:55px}.tools-hero h1{font-size:3.5rem}.tools-hero p{font-size:.9rem}.hero-actions{flex-direction:column;align-items:flex-start}.quick-stats{grid-template-columns:repeat(2,1fr)}.quick-stats div:nth-child(2){border-right:0}.quick-stats div:nth-child(-n+2){border-bottom:1px solid rgba(184,152,88,.12)}.tool-grid,.data-grid,.workflow-grid{grid-template-columns:1fr}.section-title-row{display:block}.section-title-row>p{margin-top:18px;text-align:left}.section-title-row h2{font-size:2.2rem}.workflow-step{border-right:0!important;border-bottom:1px solid rgba(184,152,88,.16)}.workflow-step:last-child{border-bottom:0}.library-card{display:block;padding:35px}.primary-btn{margin-top:30px}.source-note{display:block}.source-note p{margin-top:10px}.workspace-head{align-items:flex-start;gap:20px}.workspace-head h2{font-size:2rem}.workspace-placeholder{padding:55px 25px}}

/* Chronograph workspace v1 */
.workspace-subtitle{color:#666;line-height:1.7;margin-top:12px;max-width:650px;font-size:.82rem}.chrono-layout{max-width:1200px;margin:55px auto 0;display:grid;grid-template-columns:380px 1fr;gap:16px}.chrono-panel{border:1px solid rgba(184,152,88,.16);background:linear-gradient(145deg,#0c0c0c,#080808);padding:28px}.panel-label{border-bottom:1px solid rgba(184,152,88,.12);padding-bottom:18px;margin-bottom:24px}.panel-label span{display:block;font-size:.58rem;letter-spacing:.2em;color:var(--gold)}.panel-label strong{display:block;font-family:Sora;font-size:1.15rem;font-weight:400;margin-top:8px}.chrono-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}.chrono-panel label{display:block;color:#777;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}.chrono-panel input,.chrono-panel select,.chrono-panel textarea{box-sizing:border-box;width:100%;margin-top:9px;border:1px solid rgba(255,255,255,.1);background:#060606;color:#ddd;padding:13px;font:inherit;outline:none}.chrono-panel input:focus,.chrono-panel select:focus,.chrono-panel textarea:focus{border-color:rgba(184,152,88,.55)}.input-with-unit{position:relative}.input-with-unit input{padding-right:40px}.input-with-unit span{position:absolute;right:12px;top:22px;color:#555;font-size:.62rem}.shots-label{margin-bottom:18px}.shots-label>span{float:right;color:#444;letter-spacing:.08em;text-transform:none}.chrono-panel textarea{resize:vertical;min-height:220px;line-height:1.65;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.chrono-actions{display:flex;gap:10px}.chrono-actions .primary-btn,.chrono-actions .ghost-btn{cursor:pointer;background:transparent}.chrono-actions .primary-btn{font:inherit}.tool-disclaimer{font-size:.62rem;color:#4f4f4f;line-height:1.7;margin-top:20px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(184,152,88,.12);border:1px solid rgba(184,152,88,.12)}.metric{background:#090909;padding:18px;min-height:92px}.metric span{display:block;font-size:.54rem;letter-spacing:.16em;color:#555}.metric strong{display:block;font-family:Sora;font-size:1.55rem;font-weight:300;color:#ddd;margin-top:15px}.metric small{display:block;color:#4d4d4d;font-size:.58rem;margin-top:4px}.metric.highlight strong{color:var(--gold)}.chart-card{border:1px solid rgba(184,152,88,.12);margin-top:16px;padding:20px}.chart-head{display:flex;justify-content:space-between;color:#555;font-size:.55rem;letter-spacing:.16em;margin-bottom:15px}.chrono-chart{height:250px;display:flex;align-items:flex-end;gap:7px;padding:10px 8px 0;border-top:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}.chart-empty{width:100%;align-self:center;text-align:center;color:#444;font-size:.72rem}.chart-bar{flex:1;min-width:4px;max-width:34px;background:linear-gradient(to top,rgba(184,152,88,.2),rgba(184,152,88,.9));position:relative}.chart-bar:hover{background:var(--gold)}.chart-bar::after{content:attr(data-value);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);font-size:.48rem;color:#777;white-space:nowrap;opacity:0;transition:.2s}.chart-bar:hover::after{opacity:1}.result-note{border-left:1px solid var(--gold);padding:15px 18px;margin-top:16px;display:flex;gap:20px}.result-note span{font-size:.55rem;letter-spacing:.18em;color:var(--gold);min-width:70px}.result-note p{margin:0;color:#555;font-size:.65rem;line-height:1.7}
@media(max-width:950px){.chrono-layout{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.chrono-meta{grid-template-columns:1fr}.chrono-panel{padding:20px}.metric strong{font-size:1.2rem}.chrono-chart{height:210px;gap:4px}.result-note{display:block}.result-note p{margin-top:9px}.workspace-subtitle{font-size:.76rem}}

/* Tool: tamaño de grupo */
.group-layout{max-width:1200px;margin:55px auto 0;display:grid;grid-template-columns:380px 1fr;gap:16px}.tool-detail-section{padding-bottom:80px}.group-layout .chrono-meta label select{margin-top:7px}.group-layout .chrono-meta label input{margin-bottom:2px}
@media(max-width:950px){.group-layout{grid-template-columns:1fr}}


/*//////////////////////////////////////*/


/* =========================================================
   RAVEX TOOLS
   COMPONENTES GENERALES DE HERRAMIENTAS
   ========================================================= */


/* ---------------------------------------------------------
   PÁGINA DE HERRAMIENTA
   --------------------------------------------------------- */

.tool-page-main {
    width: min(1380px, 92%);
    margin: auto;
    padding: 150px 0 100px;
}


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.tool-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 32px;

    color: #555;
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.tool-breadcrumb a {
    color: #888;
    transition: .25s;
}

.tool-breadcrumb a:hover {
    color: var(--gold);
}


/* ---------------------------------------------------------
   HEADER / TÍTULO DE HERRAMIENTA
   --------------------------------------------------------- */

.tool-page-hero {
    min-height: 0;

    display: flex;
    align-items: flex-end;

    border-bottom: 1px solid rgba(184,152,88,.18);

    padding-bottom: 55px;
}

.tool-page-hero > div {
    max-width: 900px;
}

.tool-kicker {
    display: block;

    font-size: .65rem;
    letter-spacing: .30em;
    color: var(--gold);

    text-transform: uppercase;
}

.tool-page-hero h2 {
    font-family: Sora, sans-serif;

    font-size: clamp(3.4rem, 6vw, 6rem);
    font-weight: 300;

    line-height: .95;
    letter-spacing: -.055em;

    margin-top: 22px;
}

.tool-page-hero p {
    max-width: 680px;

    color: #888;

    line-height: 1.9;
    font-size: 1rem;

    margin-top: 28px;
}


/* ---------------------------------------------------------
   LAYOUT GENERAL
   --------------------------------------------------------- */

.tool-layout {
    display: grid;

    grid-template-columns: 380px 1fr;

    gap: 16px;

    margin-top: 55px;
}

.tool-layout-single {
    max-width: 900px;

    margin: 55px auto 0;
}


/* ---------------------------------------------------------
   PANEL GENERAL
   --------------------------------------------------------- */

.tool-panel {
    border: 1px solid rgba(184,152,88,.16);

    background:
        linear-gradient(
            145deg,
            #0c0c0c,
            #080808
        );

    padding: 28px;
}


/* Compatibilidad con las herramientas existentes */

.chrono-panel,
.group-panel,
.moa-panel {
    border: 1px solid rgba(184,152,88,.16);

    background:
        linear-gradient(
            145deg,
            #0c0c0c,
            #080808
        );

    padding: 28px;
}


/* ---------------------------------------------------------
   TÍTULO INTERNO DE PANEL
   --------------------------------------------------------- */

.panel-label {
    border-bottom: 1px solid rgba(184,152,88,.12);

    padding-bottom: 18px;
    margin-bottom: 24px;
}

.panel-label span {
    display: block;

    font-size: .58rem;
    letter-spacing: .20em;

    color: var(--gold);
}

.panel-label strong {
    display: block;

    font-family: Sora, sans-serif;

    font-size: 1.15rem;
    font-weight: 400;

    color: #ddd;

    margin-top: 8px;
}


/* ---------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------- */

.tool-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tool-form-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.tool-field {
    display: block;

    color: #777;

    font-size: .62rem;
    letter-spacing: .12em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   INPUTS / SELECTS / TEXTAREA
   --------------------------------------------------------- */

.tool-field input,
.tool-field select,
.tool-field textarea,

.tool-panel input,
.tool-panel select,
.tool-panel textarea,

.chrono-panel input,
.chrono-panel select,
.chrono-panel textarea,

.group-panel input,
.group-panel select,
.group-panel textarea,

.moa-panel input,
.moa-panel select,
.moa-panel textarea {
    box-sizing: border-box;

    width: 100%;

    margin-top: 9px;

    padding: 13px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 0;

    background: #060606;

    color: #ddd;

    font-family: inherit;
    font-size: .75rem;

    outline: none;

    transition:
        border-color .25s,
        background .25s;
}

.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus,

.tool-panel input:focus,
.tool-panel select:focus,
.tool-panel textarea:focus {
    border-color: rgba(184,152,88,.55);

    background: #080808;
}

.tool-field textarea,
.tool-panel textarea {
    resize: vertical;

    min-height: 140px;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   INPUT CON UNIDAD
   --------------------------------------------------------- */

.input-with-unit {
    position: relative;
}

.input-with-unit input {
    padding-right: 55px;
}

.input-with-unit span {
    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #555;

    font-size: .62rem;
}


/* ---------------------------------------------------------
   ACCIONES
   --------------------------------------------------------- */

.tool-actions,
.chrono-actions,
.group-actions,
.moa-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
}


/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */

.primary-btn,
.ghost-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 25px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 0;

    font-family: inherit;

    font-size: .68rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background .3s,
        border-color .3s,
        color .3s,
        transform .2s;
}


/* Botón principal */

.primary-btn {
    border: 1px solid var(--gold);

    background: transparent;

    color: var(--gold);
}

.primary-btn:hover {
    background: var(--gold);

    color: #050505;
}

.primary-btn:active {
    transform: translateY(1px);
}


/* Botón secundario */

.ghost-btn {
    border: 1px solid rgba(255,255,255,.12);

    background: transparent;

    color: #777;
}

.ghost-btn:hover {
    border-color: rgba(255,255,255,.30);

    color: #fff;
}


/* ---------------------------------------------------------
   RESULTADOS
   --------------------------------------------------------- */

.tool-results {
    margin-top: 16px;
}

.metric-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    background: rgba(184,152,88,.12);

    border: 1px solid rgba(184,152,88,.12);
}

.metric {
    min-height: 110px;

    padding: 20px;

    background: #090909;
}

.metric span {
    display: block;

    color: #555;

    font-size: .55rem;
    letter-spacing: .16em;

    text-transform: uppercase;
}

.metric strong {
    display: block;

    margin-top: 22px;

    color: #ddd;

    font-family: Sora, sans-serif;

    font-size: 1.7rem;
    font-weight: 300;
}

.metric small {
    display: block;

    margin-top: 5px;

    color: #4d4d4d;

    font-size: .58rem;
}

.metric.highlight strong {
    color: var(--gold);
}


/* ---------------------------------------------------------
   NOTAS / INFORMACIÓN
   --------------------------------------------------------- */

.result-note {
    display: flex;

    gap: 22px;

    margin-top: 16px;

    padding: 17px 20px;

    border-left: 1px solid var(--gold);

    background: rgba(184,152,88,.025);
}

.result-note > span {
    min-width: 90px;

    color: var(--gold);

    font-size: .55rem;
    letter-spacing: .18em;

    text-transform: uppercase;
}

.result-note p {
    margin: 0;

    color: #555;

    font-size: .65rem;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   DISCLAIMER
   --------------------------------------------------------- */

.tool-disclaimer {
    margin-top: 20px;

    color: #4f4f4f;

    font-size: .62rem;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   ESTADO VACÍO
   --------------------------------------------------------- */

.tool-empty {
    padding: 60px 30px;

    border: 1px dashed rgba(184,152,88,.18);

    text-align: center;

    color: #444;

    font-size: .72rem;
}


/* ---------------------------------------------------------
   SEPARADOR
   --------------------------------------------------------- */

.tool-divider {
    height: 1px;

    margin: 30px 0;

    background: rgba(184,152,88,.12);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 950px) {

    .tool-layout {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .tool-page-main {
        padding-top: 125px;
    }

    .tool-page-hero h2 {
        font-size: 3.5rem;
    }

    .tool-page-hero p {
        font-size: .9rem;
    }

    .tool-form-grid {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .tool-panel,
    .chrono-panel,
    .group-panel,
    .moa-panel {
        padding: 20px;
    }

    .result-note {
        display: block;
    }

    .result-note p {
        margin-top: 10px;
    }

    .tool-actions,
    .chrono-actions,
    .group-actions,
    .moa-actions {
        flex-direction: column;
    }

    .primary-btn,
    .ghost-btn {
        width: 100%;
    }

}