/* ==========================================================================
   OnTruck — Secciones específicas
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(760px, 88vh);
    padding-block: clamp(72px, 9vw, 120px);
    background: var(--navy-900);
    overflow: hidden;
    isolation: isolate;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(105deg, rgba(7, 27, 52, .95) 0%, rgba(7, 27, 52, .82) 42%,
                        rgba(7, 27, 52, .38) 72%, rgba(7, 27, 52, .55) 100%),
        linear-gradient(180deg, rgba(7, 27, 52, .5) 0%, transparent 30%, rgba(5, 20, 42, .85) 100%);
}

.hero__inner { max-width: 680px; }

.hero h1 { color: #fff; }

.hero__lead {
    margin-top: 22px;
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, .82);
    max-width: 58ch;
}

.hero .btn-row { margin-top: 34px; }

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero__stars {
    height: 20px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.hero__proof-text {
    font-size: .875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .78);
}

/* Hero con media a la derecha */
.hero--split .hero__inner { max-width: none; }

.hero--split .hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hero--split .hero__veil {
    background: linear-gradient(180deg, rgba(7, 27, 52, .6) 0%, rgba(7, 27, 52, .92) 100%);
}

.hero--compact { min-height: auto; }

/* --------------------------------------------------------------------------
   Selector de ediciones (el corazón de la home)
   -------------------------------------------------------------------------- */

.editions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.edition {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease),
                border-color .3s var(--ease);
}

.edition:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 104, 200, .3);
    box-shadow: var(--shadow-lg);
}

.edition__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.edition__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.edition:hover .edition__media img { transform: scale(1.05); }

.edition__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 27, 52, .1) 0%, rgba(7, 27, 52, .7) 100%);
}

.edition__pill {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(6px);
}

.edition__pill--pro { background: rgba(32, 181, 115, .92); }
.edition__pill--dealer { background: rgba(0, 104, 200, .92); }

.edition__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 30px;
}

.edition__who {
    margin-bottom: 10px;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.edition__body h3 { margin-bottom: 12px; }

.edition__body > p { font-size: .9688rem; }

.edition .checklist {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.edition .checklist li { font-size: .9375rem; }

.edition .btn { margin-top: 26px; align-self: flex-start; }

/* --------------------------------------------------------------------------
   Rejilla de dolores / problemas
   -------------------------------------------------------------------------- */

.pains {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pain {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    transition: border-color .24s var(--ease), transform .24s var(--ease);
}

.pain:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 122, 0, .4);
}

.pain__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #FFF3E8;
    color: var(--orange-500);
}

.pain__icon svg { width: 21px; height: 21px; }

.pain span {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Bloque ISC / subsidio diésel
   -------------------------------------------------------------------------- */

.isc__highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 52px;
}

.isc-card {
    position: relative;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-lg);
    background:
        linear-gradient(140deg, rgba(32, 181, 115, .16) 0%, rgba(255, 255, 255, .04) 55%);
    overflow: hidden;
}

.isc-card--blue {
    background:
        linear-gradient(140deg, rgba(0, 104, 200, .22) 0%, rgba(255, 255, 255, .04) 55%);
}

.isc-card__value {
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: #4EE0A4;
}

.isc-card--blue .isc-card__value { color: #7ECBFF; }

.isc-card h3 {
    margin: 14px 0 10px;
    color: #fff;
}

.isc-card p { font-size: .9375rem; color: rgba(255, 255, 255, .78); }

.isc-card__legal {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.isc-card__legal span {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--r-pill);
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
}

/* --- Calculadora de subsidio --------------------------------------------- */

.calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: center;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .045);
}

.calc__field label {
    display: block;
    margin-bottom: 12px;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
}

.calc__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.calc__input {
    width: 100%;
    padding: 16px 100px 16px 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 800;
}

.calc__input::placeholder { color: rgba(255, 255, 255, .35); font-weight: 400; }

.calc__input:focus {
    outline: none;
    border-color: var(--green-500);
    background: rgba(255, 255, 255, .1);
}

.calc__unit {
    position: absolute;
    right: 20px;
    font-size: .875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    pointer-events: none;
}

.calc__range {
    width: 100%;
    margin-top: 18px;
    accent-color: var(--green-500);
    cursor: pointer;
}

.calc__result {
    padding: 26px;
    border-radius: var(--r-md);
    background: rgba(32, 181, 115, .12);
    border: 1px solid rgba(32, 181, 115, .3);
    text-align: center;
}

.calc__result-label {
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.calc__result-value {
    margin: 8px 0 4px;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: #4EE0A4;
}

.calc__result-sub {
    font-size: .875rem;
    color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------------------
   Bloque de IA (repuestos / gastos) con mockups
   -------------------------------------------------------------------------- */

.ai-mockups {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(-40px, -3vw, 0px);
}

.ai-mockups .phone:first-child { transform: translateY(14px) rotate(-4deg); }
.ai-mockups .phone:last-child { transform: translateY(-14px) rotate(4deg); z-index: 2; }

.ai-shot {
    position: relative;
    padding: clamp(28px, 4vw, 52px);
    border-radius: var(--r-lg);
    background:
        radial-gradient(90% 80% at 50% 0%, rgba(0, 104, 200, .1) 0%, transparent 70%),
        var(--surface);
}

/* --------------------------------------------------------------------------
   Marketplace / etapas
   -------------------------------------------------------------------------- */

.stages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: stage;
}

.stage {
    position: relative;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
}

.stage::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--line);
    border-right: 2px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
}

.stage:last-child::after { display: none; }

.stage__num {
    display: block;
    margin-bottom: 14px;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--blue-500);
}

.stage h4 { margin-bottom: 8px; }
.stage p { font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Categorías de la tarjeta de gastos
   -------------------------------------------------------------------------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--white);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ink);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.chip:hover { transform: translateY(-2px); border-color: var(--green-500); }

.chip svg { width: 17px; height: 17px; color: var(--green-600); }

.on-navy .chip {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Galería de evento (Expo Industria)
   -------------------------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-auto-rows: 1fr;
    gap: 18px;
}

.gallery figure {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.gallery figure:first-child { grid-row: span 2; }

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}

.gallery figure:hover img { transform: scale(1.04); }

.gallery figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 44px 22px 18px;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 27, 52, .88) 100%);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
}

/* La foto grande necesita una altura mínima para no aplastarse */
.gallery figure:first-child img { min-height: 340px; }
.gallery figure:not(:first-child) img { min-height: 190px; }

.event-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue-500);
    border-radius: var(--r-sm);
    background: var(--white);
}

.event-note svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--blue-500);
}

.event-note p { font-size: .9375rem; }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */

.cta-final {
    position: relative;
    padding-block: clamp(64px, 7vw, 104px);
    background: var(--navy-900);
    overflow: hidden;
    isolation: isolate;
}

.cta-final__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .35;
}

.cta-final__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(7, 27, 52, .82) 0%, rgba(5, 20, 42, .96) 100%);
}

.cta-final__inner {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.cta-final h2 { color: #fff; }

.cta-final p {
    margin-top: 18px;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .8);
}

.cta-final .btn-row { margin-top: 32px; justify-content: center; }

/* --------------------------------------------------------------------------
   Descarga de la app (QR)
   -------------------------------------------------------------------------- */

.download {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 34px;
    align-items: center;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.download__qr {
    width: 150px;
    height: 150px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
}

.download h3 { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Sobre nosotros / confianza
   -------------------------------------------------------------------------- */

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.trust-item {
    padding: 26px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

.trust-item__label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6FC2FF;
}

.trust-item h4 { margin: 10px 0 8px; color: #fff; }
.trust-item p { font-size: .9375rem; color: rgba(255, 255, 255, .72); }