/* Reportes: composición editorial con producto, indicadores y neón CSS. */
#reportes.reports-premium { position: relative; isolation: isolate; overflow: hidden; padding-block: 72px 60px; background: radial-gradient(ellipse at 75% 56%, #ff005817, transparent 64%), #08090d; }
#reportes.reports-premium::before { content: ''; position: absolute; z-index: -1; left: 25%; right: -20%; bottom: 3%; height: 28%; background: radial-gradient(ellipse, #ff005833, transparent 65%); filter: blur(25px); pointer-events: none; }
#reportes .container { width: min(1620px, calc(100% - 96px)); }
#reportes .reports-layout { grid-template-columns: .86fr 1.64fr; gap: 0; align-items: center; }
#reportes .section-heading { position: relative; z-index: 2; min-width: 0; padding-block: 30px; }
#reportes .eyebrow { font-size: 11px; letter-spacing: 2.3px; color: #cbd0dd; margin-bottom: 30px; }
#reportes h2 { font-size: clamp(45px, 4.15vw, 74px); font-weight: 800; line-height: .96; letter-spacing: -.055em; }
#reportes .section-heading > p:not(.eyebrow) { font-size: clamp(14px, 1.14vw, 19px); line-height: 1.6; color: #bac1cc; max-width: 510px; margin-top: 25px; }
.report-benefits { display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; padding: 0; margin: 28px 0 0; max-width: 525px; }
.report-benefits li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.report-benefits li > span { display: grid; place-items: center; width: 43px; height: 46px; flex-shrink: 0; border: 1px solid #ff00582b; border-radius: 12px; background: linear-gradient(140deg, #2b1220a0, #111217); color: var(--apliton-primary); font-size: 22px; }
.report-benefits b { color: #d8dce5; font-size: 10px; font-weight: 500; line-height: 1.5; }
#reportes .section-heading .button { margin-top: 32px; border-radius: 100px; padding: 20px 29px; font-size: 15px; gap: 28px; color: #08090d; font-weight: 700; }
.report-product { position: relative; margin: 0 -42px 0 -55px; min-width: 0; aspect-ratio: 1.47; }
.report-device-image { display: block; position: absolute; width: 100%; height: auto; left: 0; bottom: 0; object-fit: contain; filter: drop-shadow(0 10px 30px #ff005817); }
.report-product figcaption { position: absolute; right: 42px; bottom: -15px; color: #8d8593; font-size: 8px; }
.report-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: #ff2c76; stroke-width: 1.4px; filter: drop-shadow(0 0 5px #ff0058); }
.report-metric { position: absolute; z-index: 2; display: flex; align-items: center; gap: 13px; padding: 16px 19px; border: 1px solid #ffffff25; border-radius: 13px; background: linear-gradient(145deg, #271221f0, #101116f2); box-shadow: 0 0 18px #ff005814, inset 0 1px #ffffff09; transform: rotate(-5deg); }
.report-metric > i { color: var(--apliton-primary); font-size: 31px; filter: drop-shadow(0 0 8px #ff005860); }
.report-metric span { display: block; font-size: 10px; color: #dad3e0; }
.report-metric strong { display: block; font-size: clamp(17px, 1.5vw, 25px); letter-spacing: -.6px; line-height: 1.25; margin-top: 6px; }
.report-metric small { display: block; font-size: 10px; color: #00e77e; margin-top: 6px; font-weight: 600; }
.report-metric-sales { left: 17%; top: 7%; border-top-color: #ff005882; border-right-color: #ff00586a; }
.report-metric-orders { left: 59%; top: 0; padding: 15px 19px; }
.report-metric-clients { right: 2%; top: 11%; padding: 15px; border-right-color: #ff005884; }
@media (max-width: 1280px) {
    #reportes .reports-layout { grid-template-columns: .9fr 1.6fr; }
    .report-benefits { gap: 8px; }
    .report-benefits li { gap: 6px; }
    .report-benefits li > span { width: 35px; height: 40px; font-size: 19px; }
    .report-benefits b { font-size: 8px; }
    .report-metric { padding: 12px; gap: 8px; }
    .report-metric > i { font-size: 23px; }
    .report-metric span { font-size: 8px; }
    .report-metric small { font-size: 8px; }
    .report-product { margin-left: -25px; }
}
@media (max-width: 1100px) {
    #reportes.reports-premium { padding-block: 60px 50px; }
    #reportes .reports-layout { grid-template-columns: 1fr; gap: 30px; }
    #reportes .section-heading { padding: 0; max-width: 700px; }
    #reportes h2 { font-size: clamp(42px, 6vw, 64px); line-height: 1.04; }
    #reportes .report-title-break { display: none; }
    #reportes .section-heading > p:not(.eyebrow) { max-width: 620px; font-size: 16px; }
    .report-benefits b { font-size: 11px; }
    .report-benefits li > span { width: 43px; height: 46px; font-size: 22px; }
    .report-product { margin: 0 -28px; }
    .report-metric strong { font-size: 21px; }
    .report-metric span, .report-metric small { font-size: 10px; }
}
@media (max-width: 600px) {
    #reportes .container { width: calc(100% - 40px); }
    #reportes .eyebrow { font-size: 9px; letter-spacing: 1.7px; margin-bottom: 22px; }
    #reportes h2 { font-size: clamp(37px, 9vw, 49px); }
    #reportes .section-heading > p:not(.eyebrow) { font-size: 14px; margin-top: 20px; }
    .report-benefits { gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
    .report-benefits li { gap: 8px; }
    .report-benefits b { font-size: 10px; }
    .report-benefits li > span { width: 37px; height: 41px; font-size: 20px; }
    #reportes .section-heading .button { font-size: 13px; padding: 16px 22px; margin-top: 27px; }
    .report-product { margin: 0 -20px; aspect-ratio: 1.2; }
    .report-device-image { bottom: 0; }
    .report-metric { padding: 9px; gap: 6px; border-radius: 9px; }
    .report-metric > i { font-size: 16px; }
    .report-metric span { font-size: 6px; }
    .report-metric strong { font-size: 12px; margin-top: 4px; letter-spacing: -.3px; }
    .report-metric small { font-size: 7px; margin-top: 3px; }
    .report-metric-sales { left: 6%; top: 7%; }
    .report-metric-orders { left: 50%; top: 0; }
    .report-metric-clients { right: 3%; top: 17%; }
    .report-product figcaption { right: 20px; font-size: 7px; }
}