/* ========================= */
/*           HERO            */
/* ========================= */

main > section.hero{
    max-width:none;
    padding:130px var(--gutter) 40px;
    overflow:hidden;
    isolation:isolate;
}

/* Retícula de papel técnico: fina cada 24px, marcada cada 120px */
main > section.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(21,19,27,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,19,27,.07) 1px, transparent 1px),
        linear-gradient(rgba(21,19,27,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,19,27,.035) 1px, transparent 1px);
    background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
    background-position:-1px -1px;
    -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent);
    mask-image:linear-gradient(to bottom, #000 80%, transparent);
}

.hero-inner{
    width:100%;
    max-width:var(--max);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(320px, .85fr);
    gap:clamp(40px, 5vw, 80px);
    align-items:center;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 14px 7px 12px;
    margin-bottom:30px;
    border:1px solid var(--line-strong);
    border-radius:4px;
    background:var(--panel);
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-2);
}

.hero h1{
    font-family:var(--font-serif);
    font-size:clamp(40px, 5.2vw, 82px);
    font-weight:600;
    line-height:1;
    letter-spacing:-.04em;
    text-wrap:balance;
}

.hero h1 em{
    display:block;
    margin-top:.08em;
}

/* Cota: línea de medida con remates, como en un plano */
.dimension{
    position:relative;
    display:flex;
    justify-content:center;
    max-width:560px;
    margin:26px 0 0;
    height:16px;
}

.dimension::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:var(--accent);
    box-shadow:-0.5px 0 0 var(--accent);
}

.dimension::after{
    content:"";
    position:absolute;
    inset:0;
    border-left:1.5px solid var(--accent);
    border-right:1.5px solid var(--accent);
}

.dimension span{
    position:relative;
    padding:0 12px;
    background:var(--paper);
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    line-height:16px;
}

.hero-sub{
    max-width:580px;
    margin-top:26px;
    color:var(--fg-2);
    font-size:clamp(16px, 1.3vw, 18px);
    line-height:1.65;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:36px;
}

/* ========================= */
/*  REGLA DE PRESUPUESTO     */
/* ========================= */

.gauge{
    --fg:#F1F0EA;
    --fg-2:#CFCBD6;
    --fg-3:#9D98A7;
    --line:rgba(241,240,234,.14);
    --accent:#D8B77A;
    --bg:#15131B;
    background-color:var(--ink);
    color:var(--fg);
    padding:30px 28px 28px;
    border-radius:2px;
    box-shadow:14px 14px 0 rgba(21,19,27,.1);
}

.gauge-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-3);
}

.gauge-value{
    display:block;
    margin:22px 0 18px;
    font-family:var(--font-serif);
    font-size:clamp(28px, 2.6vw, 38px);
    font-weight:600;
    letter-spacing:-.035em;
    line-height:1.05;
    font-variant-numeric:tabular-nums;
}

.gauge input[type="range"]{
    width:100%;
    height:34px;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
    background:
        repeating-linear-gradient(90deg, var(--fg-3) 0 1px, transparent 1px 10%) 0 100% / 100% 10px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 0 50% / var(--fill, 20%) 3px no-repeat,
        linear-gradient(var(--line), var(--line)) 0 50% / 100% 3px no-repeat;
}

.gauge input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:30px;
    border-radius:2px;
    background:var(--accent);
    border:3px solid var(--ink);
    box-shadow:0 0 0 1px var(--accent);
    cursor:grab;
}

.gauge input[type="range"]::-moz-range-thumb{
    width:12px;
    height:24px;
    border-radius:2px;
    background:var(--accent);
    border:3px solid var(--ink);
    cursor:grab;
}

.gauge-ticks{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--fg-3);
    font-variant-numeric:tabular-nums;
}

.gauge-k{
    margin-top:24px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
}

.gauge-scope{
    min-height:4.8em;
    margin-top:8px;
    color:var(--fg-2);
    font-size:16px;
    line-height:1.6;
}

.gauge-cta{
    width:100%;
    margin-top:22px;
    background:var(--accent);
    color:var(--ink);
}

.gauge-cta:hover{
    box-shadow:5px 5px 0 rgba(241,240,234,.25);
}

/* ========================= */
/*   FRANJA DE RESULTADOS    */
/* ========================= */

.results{
    list-style:none;
    width:100%;
    max-width:var(--max);
    margin:70px auto 0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    border-top:1.5px solid var(--fg);
    background:var(--panel);
}

.results li{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:22px 22px 20px;
}

.results li + li{ border-left:1px solid var(--line); }

.results strong{
    font-family:var(--font-serif);
    font-size:clamp(24px, 2.4vw, 34px);
    font-weight:600;
    letter-spacing:-.035em;
    line-height:1;
    white-space:nowrap;
}

.results span{
    color:var(--fg-3);
    font-size:14px;
    line-height:1.5;
}

.results .results-client{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-2);
}

.results .results-client::before{
    content:"";
    width:6px;
    height:6px;
    background:var(--accent);
    transform:rotate(45deg);
    flex:none;
}