/* ============================================================================
   Novatecsystem | Portal Web Corporativo + NEIF
   Módulo M3 — Estilos de la página institucional de Soluciones.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Hero Soluciones
   --------------------------------------------------------------------------- */
.sol-hero {
    background: linear-gradient(160deg, var(--color-graphite) 0%, var(--color-graphite-2) 55%, var(--color-surface) 100%);
    color: var(--color-text-light);
    padding: var(--space-8) 0;
    position: relative;
    overflow: hidden;
}

.sol-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(29, 158, 117, 0.22), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(57, 191, 200, 0.12), transparent 45%);
    pointer-events: none;
}

.sol-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-8);
    align-items: center;
}

.sol-badge {
    display: inline-block;
    color: var(--color-tech);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.78rem;
    border: 1px solid rgba(57, 191, 200, 0.4);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
}

.sol-title {
    color: var(--color-text-light);
    font-size: clamp(1.9rem, 4.6vw, 2.8rem);
    margin-bottom: var(--space-5);
}

.sol-support {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 620px;
    margin-bottom: var(--space-6);
}

.sol-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Flujo de solución (Problema → Solución) */
.sol-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(17, 20, 24, 0.55);
}

.sol-flow-node {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    padding: var(--space-2) var(--space-3);
}

.sol-flow-node.is-core {
    color: var(--color-accent);
    border-color: var(--color-primary);
    background: rgba(29, 158, 117, 0.12);
}

.sol-flow-arrow {
    display: block;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Enfoque integral
   --------------------------------------------------------------------------- */
.approach-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-7);
}

.approach-point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.approach-mark {
    color: var(--color-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.sol-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.sol-compare {
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid rgba(17, 20, 24, 0.1);
    box-shadow: var(--shadow-sm);
}

.sol-compare.is-a {
    background: var(--color-white);
}

.sol-compare.is-b {
    background: var(--color-graphite);
    color: var(--color-text-light);
}

.sol-compare-title {
    font-size: 1.2rem;
    margin-bottom: var(--space-4);
}

.sol-compare.is-b .sol-compare-title {
    color: var(--color-text-light);
}

.sol-compare-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sol-compare-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.sol-compare.is-b .sol-compare-item {
    color: var(--color-text-muted);
}

.sol-compare-mark {
    color: var(--color-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.sol-compare.is-b .sol-compare-mark {
    color: var(--color-accent);
}

.approach-note {
    max-width: 720px;
    margin: var(--space-5) 0 0;
    color: var(--color-ink);
}

/* ---------------------------------------------------------------------------
   Áreas de solución (siete dominios)
   --------------------------------------------------------------------------- */
.domain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.domain-card {
    background: var(--color-white);
    border: 1px solid rgba(17, 20, 24, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}

.domain-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.domain-card:last-child {
    grid-column: 1 / -1;
}

.domain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.domain-num {
    font-family: var(--font-code);
    font-weight: 700;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
}

.domain-icon {
    color: var(--color-primary-dark);
}

.domain-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-3);
}

.domain-desc {
    margin-bottom: var(--space-4);
    font-size: 0.95rem;
}

.domain-caution {
    font-size: 0.88rem;
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    border-left: 3px solid var(--color-primary);
    padding: var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: var(--space-4);
}

.domain-note {
    font-size: 0.88rem;
    color: var(--color-ink);
    border-top: 1px solid rgba(17, 20, 24, 0.08);
    padding-top: var(--space-3);
    margin: var(--space-4) 0 0;
}

.capability-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
}

.capability-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.92rem;
}

.capability-check {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.domain-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(17, 20, 24, 0.08);
}

.domain-neif {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Capacidades transversales
   --------------------------------------------------------------------------- */
.transversal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3) var(--space-6);
}

.transversal-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.transversal-mark {
    color: var(--color-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.transversal-note {
    max-width: 720px;
    margin: var(--space-6) 0 0;
}

/* ---------------------------------------------------------------------------
   NEIF como núcleo (mapa radial)
   --------------------------------------------------------------------------- */
.core-map-wrap {
    display: flex;
    justify-content: center;
}

.core-map {
    position: relative;
    width: min(620px, 100%);
    aspect-ratio: 1 / 1;
    color: var(--color-primary-dark);
}

.core-map-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(17, 20, 24, 0.18);
    pointer-events: none;
}

.core-map-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    text-align: center;
    background: var(--color-graphite);
    color: var(--color-text-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
    box-shadow: var(--shadow-md);
}

.core-map-name {
    display: block;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.1em;
}

.core-map-desc {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.core-map-nodes {
    position: absolute;
    inset: 0;
}

.core-map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    background: var(--color-white);
    border: 1px solid rgba(17, 20, 24, 0.12);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-graphite);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.core-map-node:nth-child(1) { left: 50%; top: 12%; }
.core-map-node:nth-child(2) { left: 79.7%; top: 26.3%; }
.core-map-node:nth-child(3) { left: 87%; top: 58.5%; }
.core-map-node:nth-child(4) { left: 66.5%; top: 84.2%; }
.core-map-node:nth-child(5) { left: 33.5%; top: 84.2%; }
.core-map-node:nth-child(6) { left: 13%; top: 58.5%; }
.core-map-node:nth-child(7) { left: 20.3%; top: 26.3%; }

/* ---------------------------------------------------------------------------
   Modelo de intervención
   --------------------------------------------------------------------------- */
.iv-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.iv-step {
    display: flex;
    gap: var(--space-4);
    background: var(--color-white);
    border: 1px solid rgba(17, 20, 24, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.iv-step-num {
    font-family: var(--font-code);
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

.iv-step-body {
    flex: 1;
}

.iv-step-action {
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

.iv-step-dl {
    display: grid;
    gap: var(--space-2);
}

.iv-step-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-3);
    font-size: 0.92rem;
}

.iv-step-row dt {
    color: var(--color-primary-dark);
}

.iv-step-row dd {
    color: var(--color-ink);
}

/* ---------------------------------------------------------------------------
   Entregables
   --------------------------------------------------------------------------- */
.deliverable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.deliverable {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--color-white);
    border: 1px solid rgba(17, 20, 24, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
    font-size: 0.95rem;
}

.deliverable-mark {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.deliverable-note {
    max-width: 720px;
    margin: var(--space-6) 0 0;
}

/* ---------------------------------------------------------------------------
   Aplicación sectorial
   --------------------------------------------------------------------------- */
.sector-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.sector-card {
    background: var(--color-white);
    border: 1px solid rgba(17, 20, 24, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sector-card-num {
    font-family: var(--font-code);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.85rem;
}

.sector-card-name {
    font-size: 1.1rem;
    margin: 0;
}

.sector-card-example {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-ink);
}

.sector-note {
    max-width: 720px;
    margin: var(--space-6) 0 0;
}

/* ---------------------------------------------------------------------------
   Diferenciadores
   --------------------------------------------------------------------------- */
.diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.diff-card {
    background: var(--color-white);
    border: 1px solid rgba(17, 20, 24, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

.diff-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.diff-title {
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

.diff-desc {
    margin: 0;
    font-size: 0.92rem;
}