/* Veriko landing — Soluciones (hub + 5 verticales). Hereda base/shell/.hero/.sec/.caps/.cta de home.css.
   Propio: grid del hub, hero estrecho, bloque "en la práctica" y la **identidad de color por vertical**. */

/* ============================================================
 * Acento por vertical — tokens de feature (cada sector su color).
 * Se aplican vía [data-sol] en <main class="sol-page"> y en cada .sol-card.
 * Contraste verificado: accent sobre blanco y sobre su soft ≥ 4.5:1.
 * ============================================================ */
/* Paleta apagada/seria: tonos profundos y desaturados, separados en familia de matiz
   (índigo · teal · ciruela · café · pizarra). Sin colores brillantes ni rojo. */
[data-sol]{--sol-accent:var(--color-primary);--sol-accent-soft:var(--color-primary-light);--sol-accent-glow:rgba(47,79,153,.14)}
[data-sol="fintechs"]    {--sol-accent:#2f4f99;--sol-accent-soft:#eef1fb;--sol-accent-glow:rgba(47,79,153,.15)}
[data-sol="smb"]         {--sol-accent:#0f766e;--sol-accent-soft:#e6f3f1;--sol-accent-glow:rgba(15,118,110,.15)}
[data-sol="marketplaces"]{--sol-accent:#7c4a86;--sol-accent-soft:#f3ecf6;--sol-accent-glow:rgba(124,74,134,.15)}
[data-sol="payroll"]     {--sol-accent:#6f4e37;--sol-accent-soft:#f1ebe5;--sol-accent-glow:rgba(111,78,55,.16)}
[data-sol="remittances"] {--sol-accent:#445d75;--sol-accent-soft:#eaeef3;--sol-accent-glow:rgba(68,93,117,.15)}

/* Barra de acento al inicio de la página de cada vertical (diferenciador fuerte bajo el nav). */
.sol-page{border-top:3px solid var(--sol-accent)}

/* ---- Hero estrecho / centrado (hub + verticales) ---- */
.hero-narrow{max-width:760px}
.hero-center{margin-inline:auto;text-align:center}
.hero-center .hero-lead{margin-inline:auto}
.wrap-narrow{max-width:760px}

/* Ritmo vertical más compacto en soluciones — el padding inferior del hero y el superior
   de la sección se sumaban y dejaban demasiado aire al juntarse. Solo en .sol-page. */
.sol-page .hero,.sol-hub .hero{padding:44px 0 40px}
.sol-page .sec,.sol-hub .sec{padding:40px 0}
@media(min-width:768px){.sol-page .hero,.sol-hub .hero{padding:56px 0 48px}.sol-page .sec,.sol-hub .sec{padding:52px 0}}
@media(min-width:1100px){.sol-page .hero,.sol-hub .hero{padding:64px 0 56px}.sol-page .sec,.sol-hub .sec{padding:60px 0}}

/* Hero teñido + ornamento: el fondo completo toma el color del sector (atmósfera). */
.sol-page .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sol-accent-soft),var(--color-surface) 74%)}
.sol-page .hero > .wrap{position:relative;z-index:1}
.sol-ornament{position:absolute;inset:0;pointer-events:none;z-index:0}
.sol-ornament::before{content:"";position:absolute;top:-150px;right:-90px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,var(--sol-accent-glow),transparent 66%)}
.sol-ornament::after{content:"";position:absolute;bottom:-200px;left:-130px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--sol-accent-glow),transparent 70%);opacity:.5}

/* Chip de sector en el eyebrow del hero (pill teñido). */
.sol-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--sol-accent-soft);color:var(--sol-accent)}
.sol-tag .ic{width:15px;height:15px;color:var(--sol-accent)}

/* Iconos de las capacidades (solución) teñidos al acento del sector. */
.sol-page .cap-ico{background:var(--sol-accent-soft);color:var(--sol-accent)}

/* ---- Hub: grid de verticales (1 → 2 → 3), cada card con su color ---- */
.sol-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.sol-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(min-width:1100px){.sol-grid{grid-template-columns:repeat(3,1fr)}}

.sol-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;background:var(--color-surface);border:1px solid var(--color-border);border-top:3px solid var(--sol-accent);border-radius:var(--radius-xl);text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.sol-card:hover{border-color:var(--sol-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.sol-card-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-lg);background:var(--sol-accent-soft)}
.sol-card-ico .ic{width:22px;height:22px;color:var(--sol-accent)}
.sol-card h2{font-size:var(--font-size-xl);font-weight:650;color:var(--color-text-primary);margin:2px 0 0}
.sol-card p{color:var(--color-text-secondary);line-height:1.55;flex:1}
.sol-card-go{display:inline-flex;align-self:flex-end;align-items:center;gap:6px;font-size:var(--font-size-sm);font-weight:600;color:var(--sol-accent)}
.sol-card-go .ic{width:15px;height:15px;transition:transform .15s ease}
.sol-card:hover .sol-card-go .ic{transform:translateX(3px)}

/* ---- Verticales: reto + en la práctica ---- */
.sol-lead{font-size:var(--font-size-lg);line-height:1.6;color:var(--color-text-secondary);max-width:64ch}
.sol-case{padding:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);max-width:64ch}
.sol-case p{color:var(--color-text-secondary);line-height:1.65}
/* El verdict mantiene el VERDE de "Confirmado" (estado), no el acento del sector. */
.sol-case .sol-verdict{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:600;color:var(--color-success-text)}
.sol-verdict .ic{width:18px;height:18px;color:var(--color-success-text);stroke-width:2.5}

@media(prefers-reduced-motion:reduce){
  .sol-card,.sol-card-go .ic{transition:none}
  .sol-card:hover{transform:none}
  .sol-card:hover .sol-card-go .ic{transform:none}
}