/* =========================================================
   Franja "Solicitar una demo" y pie de página (componente/pie.js)
   ========================================================= */

.banner-cta { padding: 90px 0; }
.banner-cta__caja {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    padding: 48px 52px;
    background: var(--naranja); color: var(--negro);
    border-radius: 24px;
    position: relative; overflow: hidden;
}
.banner-cta__caja::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px;
    background: rgba(0, 0, 0, 0.08);
    clip-path: var(--hexagono);
    pointer-events: none;
}
.banner-cta h2 { color: var(--negro); font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 8px; }
.banner-cta p { color: rgba(0, 0, 0, 0.72); font-size: 1.08rem; }
.banner-cta .boton { position: relative; z-index: 1; }

.pie { background: var(--negro-2); border-top: 1px solid var(--borde); padding: 64px 0 28px; }
.pie__grilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
.pie__marca img { height: 40px; width: auto; margin-bottom: 18px; }
.pie__marca p { color: var(--texto-suave); max-width: 340px; font-size: 0.98rem; }
.pie__columna h4 { font-size: 1rem; margin-bottom: 16px; }
.pie__columna ul { display: flex; flex-direction: column; gap: 10px; color: var(--texto-suave); font-size: 0.96rem; }
.pie__columna a:hover { color: var(--naranja); }
.pie__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    padding-top: 24px; border-top: 1px solid var(--borde);
    color: var(--texto-suave); font-size: 0.9rem;
}
.pie__legal a:hover { color: var(--naranja); }

@media (max-width: 1080px) {
    .pie__grilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .banner-cta__caja { flex-direction: column; align-items: flex-start; padding: 36px 30px; }
}

@media (max-width: 560px) {
    .banner-cta { padding: 64px 0; }
    .banner-cta__caja { padding: 30px 22px; }
    .banner-cta .boton { width: 100%; }
    .pie__grilla { grid-template-columns: 1fr; gap: 28px; }
}