/* ==========================================================================
   Soluciones CODETICA — experiencia /soluciones y páginas de solución.
   Solo se carga en las rutas solutions / solution-*. Usa los tokens de site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Frame de screenshot (compartido)
   -------------------------------------------------------------------------- */

.sframe {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}

.sframe__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    background: linear-gradient(180deg, #fbfdfe, #eef4f8);
    border-bottom: 1px solid #e3eaef;
}

.sframe__dots {
    display: inline-flex;
    gap: 5px;
    flex: none;
}

.sframe__dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d3dce3;
}

.sframe__addr {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8697a4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sframe__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1520 / 697;
    background: #f4f8fa;
}


/* --------------------------------------------------------------------------
   Hero — imagen de composición CODETICA sobre navy, copy en claro
   -------------------------------------------------------------------------- */

.shero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(500px, 44vw, 660px);
    padding-block: clamp(30px, 3.6vw, 52px) clamp(40px, 5vw, 72px);
    background-color: #041828;
}

.shero__bg {
    position: absolute;
    inset: 0;
    background-image: url("../img/soluciones/hero-soluciones.webp");
    background-size: cover;
    background-position: 72% center;
    background-repeat: no-repeat;
}

.shero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        96deg,
        rgba(4, 22, 38, .96) 0%,
        rgba(4, 22, 38, .93) 30%,
        rgba(4, 22, 38, .82) 45%,
        rgba(4, 22, 38, .34) 60%,
        rgba(4, 22, 38, 0) 72%
    );
}

.shero__inner {
    position: relative;
    width: 100%;
}

.shero__copy {
    max-width: 620px;
}

.shero__copy > * + * {
    margin-top: 18px;
}

.shero__copy .breadcrumbs a {
    color: #a8c6d6;
}

.shero__copy .breadcrumbs a:hover {
    color: #fff;
}

.shero__copy .breadcrumbs [aria-current] {
    color: #e8f3f8;
}

.shero__copy .h1 {
    line-height: 1.06;
    letter-spacing: -.032em;
    color: #fff;
}

.shero__copy .lead {
    max-width: 44ch;
    color: #d3e5f0;
}

.shero__note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: .9375rem;
    font-weight: 560;
    color: #7fd2e5;
}

.shero__note-mark {
    flex: none;
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), rgba(240, 128, 15, 0));
}

.shero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 26px 0 0;
    list-style: none;
}

.shero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    font-size: .75rem;
    font-weight: 620;
    color: #e8f3f8;
    backdrop-filter: blur(6px);
}

.shero__badges .icon {
    color: #7fd2e5;
}

.shero .btn--outline {
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
}

.shero .btn--outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
}
/* --------------------------------------------------------------------------
   Grid de las nueve soluciones
   -------------------------------------------------------------------------- */

.sgrid-section {
    background: linear-gradient(180deg, #edf7fb 0%, #f7fbfd 20%, #ffffff 68%);
    scroll-margin-top: 80px;
}

/* Costuras sin cambio de color.
   La rejilla termina en blanco, «La base existe» y las industrias son
   blancas enteras: en esas dos uniones el relleno inferior de una y el
   superior de la siguiente suman 245px de vacío sin un borde ni un cambio
   de fondo que lo justifique. Se descuenta la mitad. Las uniones que sí
   cambian de fondo —el hero y el cierre— o llevan filete —el ecosistema—
   conservan el ritmo normal de la página. */
.sgrid-section {
    padding-bottom: clamp(32px, 4.2vw, 60px);
}

.sbuild-section {
    padding-block: clamp(32px, 4.2vw, 60px);
}

.sind-section {
    padding-top: clamp(32px, 4.2vw, 60px);
}

.sgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 1.9vw, 26px);
}

.sgrid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
}

.scard {
    display: flex;
}

/* El contenedor dejó de ser un enlace: ahora hay dos destinos dentro.
   El CTA se estira sobre toda la tarjeta y el nombre del producto queda
   por encima, así que un clic en cualquier sitio abre la demo y un clic
   en el nombre abre el detalle. */
.scard__link {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}

.scard__visual {
    overflow: hidden;
    background: #f4f8fa;
    border-bottom: 1px solid var(--border);
}

.scard__visual .sframe {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform-origin: 50% 0;
    transition: transform .4s var(--ease);
}

/* En las cards el screenshot se recorta a 16/9 desde arriba: la interfaz se ve
   más grande y se mantiene la parte reconocible de cada sistema. */
.sframe--card .sframe__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

.scard__body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 7px;
    padding: 17px 20px 19px;
}

.scard__cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.scard__cat .icon {
    color: var(--brand);
}

.scard__name {
    position: relative;
    z-index: 1;
    justify-self: start;
    text-decoration: none;
    transition: color .24s var(--ease);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 640;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--text-strong);
}

.scard__text {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.scard__name:hover {
    color: var(--brand-strong);
}

.scard__name:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}

.scard__cta {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: .9375rem;
    font-weight: 620;
    color: var(--brand);
}

.scard__cta .icon {
    width: 17px;
    height: 17px;
    transition: transform .3s var(--ease);
}

/* El CTA cubre la tarjeta completa. Va detrás del nombre (z-index 1), que
   conserva su propio destino. */
.scard__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.scard__link:hover,
.scard__link:focus-within {
    border-color: var(--brand-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.scard__link:hover .sframe,
.scard__link:focus-within .sframe {
    transform: scale(1.03);
}

.scard__link:hover .scard__cta .icon,
.scard__link:focus-within .scard__cta .icon {
    transform: translateX(4px);
}

/* El foco del CTA se dibuja sobre la tarjeta entera, que es su área real
   de clic; :focus-visible suelto queda como respaldo. */
.scard__link:has(.scard__cta:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

@supports not selector(:has(*)) {
    .scard__cta:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 3px;
    }
}

/* --------------------------------------------------------------------------
   Start with CODETICA / Build with CODETICA
   -------------------------------------------------------------------------- */

.spaths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 30px);
}

.spath {
    position: relative;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: clamp(24px, 2.6vw, 40px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.spath::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
}

.spath--start::before {
    background: linear-gradient(90deg, var(--brand-strong), var(--hb-cyan));
}

.spath--build::before {
    background: linear-gradient(90deg, var(--accent-strong), #ffb15e);
}

.spath__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.spath--start .spath__label {
    color: var(--brand-strong);
}

.spath--build .spath__label {
    color: var(--accent-text);
}

.spath h3 {
    margin: 0;
}

.spath .body {
    margin: 0;
}

.spath__points {
    margin: 4px 0 0;
}

.spath__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0 0;
    margin: 4px 0 0;
    list-style: none;
    border-top: 1px dashed var(--border-strong);
}

.spath__examples li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .78rem;
    font-weight: 560;
    color: var(--text-muted);
}

.spath__examples .icon {
    color: var(--brand);
}

.spath--build .spath__examples .icon {
    color: var(--accent);
}

.spath .btn {
    justify-self: start;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Ecosistema
   -------------------------------------------------------------------------- */

.seco-section {
    background: linear-gradient(180deg, #fff, var(--brand-tint));
    border-block: 1px solid var(--border);
}

.seco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 56px);
    align-items: center;
}

.seco__copy > * + * {
    margin-top: 16px;
}

.seco__copy .h2 {
    max-width: 24ch;
    text-wrap: balance;
}

.seco__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: .875rem;
    color: var(--text-muted);
}

.seco__note .icon {
    color: var(--brand);
    flex: none;
    margin-top: 2px;
}

.seco__map {
    padding: clamp(22px, 2.4vw, 34px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.seco__map-label {
    margin: 0 0 14px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.seco__map-label--sub {
    margin-top: 26px;
}

.seco__flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.seco__node {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff, var(--surface-2));
    box-shadow: var(--shadow-sm);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-strong);
}

.seco__node-icon {
    display: inline-flex;
    color: var(--brand);
}

.seco__arrow {
    display: inline-flex;
    color: var(--brand-light);
}

.seco__around {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.seco__around li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    font-size: .8125rem;
    font-weight: 560;
    color: var(--text-muted);
}

.seco__around .icon {
    color: var(--brand);
}

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.sclose-section {
    background:
        radial-gradient(900px 440px at 12% 0%, rgba(0, 172, 200, .22), transparent 68%),
        radial-gradient(700px 380px at 96% 110%, rgba(240, 128, 15, .14), transparent 70%),
        #06212B;
}

.sclose {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) auto;
    gap: clamp(24px, 3vw, 52px);
    align-items: center;
}

.sclose__copy > * + * {
    margin-top: 14px;
}

.sclose__copy .h2 {
    color: #fff;
    max-width: 20ch;
}

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

.sclose__actions .btn--outline .icon:first-child {
    color: #7fd2e5;
}

/* --------------------------------------------------------------------------
   Página ligera de solución
   -------------------------------------------------------------------------- */

.sdetail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 40px);
}

.sdetail__text {
    margin-top: clamp(28px, 3vw, 44px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
    .shero__copy {
        max-width: 500px;
    }

    .shero__bg {
        background-position: 84% center;
    }

    .shero__veil {
        background: linear-gradient(
            100deg,
            rgba(4, 22, 38, .97) 0%,
            rgba(4, 22, 38, .95) 42%,
            rgba(4, 22, 38, .82) 60%,
            rgba(4, 22, 38, .48) 78%,
            rgba(4, 22, 38, .18) 100%
        );
    }
}

@media (max-width: 1024px) {
    .sgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seco {
        grid-template-columns: minmax(0, 1fr);
    }

    .seco__copy .h2 {
        max-width: none;
    }

    .sdetail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .shero {
        min-height: 0;
        padding-block: clamp(26px, 5vw, 40px) clamp(44px, 8vw, 64px);
    }

    /* En móvil mostramos la zona tranquila de la composición: las interfaces
       pequeñas serían ilegibles y ya se ven completas en el grid. */
    .shero__bg {
        background-image: url("../img/soluciones/hero-soluciones-sm.webp");
        background-position: 16% center;
    }

    .shero__veil {
        background: linear-gradient(
            180deg,
            rgba(4, 22, 38, .90) 0%,
            rgba(4, 22, 38, .86) 60%,
            rgba(4, 22, 38, .82) 100%
        );
    }

    .shero__copy {
        max-width: none;
    }

    .sclose {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .spaths {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgrid,
    .sgrid--related {
        grid-template-columns: minmax(0, 1fr);
    }

    .sdetail {
        grid-template-columns: minmax(0, 1fr);
    }

    .seco__flow {
        gap: 8px;
    }

    .seco__node {
        padding: 9px 12px;
        font-size: .875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scard__link,
    .scard__visual .sframe,
    .scard__cta .icon {
        transition: none;
    }

    .scard__link:hover,
    .scard__link:focus-within {
        transform: none;
    }

    .scard__link:hover .sframe,
    .scard__link:focus-within .sframe {
        transform: none;
    }
}

/* ==========================================================================
   Industrias en contexto
   Nueve sectores como rejilla de lectura, no como pestañas: aquí la
   pregunta es «¿esto aplica a mi empresa?», y se responde de un vistazo.
   El detalle sigue viviendo en /industrias.
   ========================================================================== */

.sind-section {
    background: #fff;
}

.sind {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(20px, 2.4vw, 34px) clamp(24px, 3vw, 48px);
}

@media (min-width: 680px) {
    .sind {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .sind {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sind__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    min-width: 0;
}

.sind__icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--brand-tint);
    border: 1px solid var(--border);
    color: var(--hb-blue);
}

.sind__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 660;
    letter-spacing: -.015em;
    color: var(--hb-navy);
    padding-top: 6px;
}

.sind__text {
    font-size: .9062rem;
    line-height: 1.56;
    color: var(--text-muted);
}

.sind__foot {
    margin: clamp(28px, 3vw, 42px) 0 0;
}