/* Estilos de la portada de inteligencia operativa de Buhooo. */
.hero h1 {
    max-width: 860px;
    font-size: clamp(3.05rem, 4.6vw, 5.1rem);
    line-height: .97;
}

.hero-lead {
    max-width: 625px;
}

.clarity-section {
    position: relative;
    overflow: hidden;
    padding: clamp(90px, 10vw, 150px) 0;
    background: var(--orange);
    color: var(--ink);
}

.clarity-section::before {
    content: "";
    position: absolute;
    width: 370px;
    height: 370px;
    border: 58px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    top: -170px;
    left: -110px;
    pointer-events: none;
}

.clarity-layout {
    position: relative;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
}

.clarity-copy .kicker {
    color: #54222b;
}

.clarity-copy h2 {
    margin: 0;
    font: 800 clamp(2.8rem, 4.9vw, 5.35rem)/.96 var(--display);
    letter-spacing: -.06em;
}

.clarity-copy h2 span {
    display: block;
    color: #54222b;
}

.clarity-copy p:not(.kicker) {
    max-width: 490px;
    margin: 26px 0 28px;
    font-size: clamp(.99rem, 1.3vw, 1.14rem);
    line-height: 1.72;
}

.clarity-board {
    padding: clamp(22px, 3vw, 34px);
    border: 3px solid var(--ink);
    border-radius: 30px;
    background: #0d1a2d;
    color: var(--white);
    box-shadow: 13px 13px 0 var(--pink), 0 28px 65px rgba(7, 17, 31, .24);
}

.clarity-board__top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #9baac0;
    font: 800 .66rem/1.4 var(--body);
    letter-spacing: .09em;
}

.clarity-board__top span:last-child {
    color: var(--lime);
}

.clarity-board__event {
    display: grid;
    gap: 6px;
    margin: 26px 0 18px;
    padding: 22px;
    border: 2px solid var(--cyan);
    border-radius: 18px;
    background: rgba(22, 220, 255, .07);
}

.clarity-board__event small {
    color: var(--cyan);
    font: 800 .65rem/1.2 var(--body);
    letter-spacing: .15em;
}

.clarity-board__event strong {
    font: 800 clamp(1.5rem, 2.5vw, 2.3rem)/1.08 var(--display);
    letter-spacing: -.04em;
}

.clarity-board__event > span {
    color: #b4c2d5;
    font-size: .77rem;
}

.clarity-board__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.clarity-board__steps > div {
    min-width: 0;
    padding: 15px 13px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 13px;
    background: #14243a;
}

.clarity-board__steps small {
    display: block;
    margin-bottom: 10px;
    color: var(--pink);
    font: 800 .59rem/1.3 var(--body);
    letter-spacing: .08em;
}

.clarity-board__steps strong {
    font: 800 1.02rem/1.1 var(--display);
}

.clarity-board__steps p {
    margin: 8px 0 0;
    color: #bfccdd;
    font-size: .72rem;
    line-height: 1.48;
}

@media (max-width: 1050px) {
    .hero h1 { font-size: clamp(3.3rem, 7vw, 5.1rem); }
    .clarity-layout { grid-template-columns: 1fr; }
    .clarity-copy { max-width: 720px; }
}

@media (max-width: 560px) {
    .hero h1 { font-size: clamp(2.35rem, 10.5vw, 3rem); line-height: .99; }
    .hero-highlight { max-width: 100%; }
    .clarity-section { padding: 75px 0 83px; }
    .clarity-copy h2 { font-size: clamp(2.3rem, 10vw, 3.1rem); }
    .clarity-board { padding: 19px 17px; border-radius: 23px; box-shadow: 8px 8px 0 var(--pink); }
    .clarity-board__event { padding: 16px; }
    .clarity-board__steps { grid-template-columns: 1fr; }
    .clarity-board__steps > div { padding: 14px 16px; }
}