/* =========================================================
   Soluciones (soluciones.html)
   ========================================================= */

.soluciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.solucion {
    position: relative; overflow: hidden;
    padding: 34px 32px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    transition: border-color 0.3s;
}
.solucion::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--naranja); transform: scaleY(0); transform-origin: top; transition: transform 0.35s;
}
.solucion:hover { border-color: rgba(255, 180, 35, 0.4); }
.solucion:hover::after { transform: scaleY(1); }
.solucion__numero { display: block; font-size: 3rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--naranja); margin-bottom: 18px; }
.solucion .h3 { margin-bottom: 10px; }
.solucion p { color: var(--texto-suave); }

/* ---------- Sectores ---------- */
.sectores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sector {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 22px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
    color: var(--texto); font-weight: 600;
    transition: border-color 0.2s, color 0.2s;
}
.sector::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--naranja); clip-path: var(--hexagono); }
.sector:hover { border-color: var(--naranja); color: var(--naranja); }

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

@media (max-width: 560px) {
    .solucion { padding: 28px 22px; }
    .sectores { grid-template-columns: 1fr; }
}