/* ===========================================================================
   CAPA DE ESTILO INSPIRADA EN CARBON (el sistema de diseño de IBM)
   ===========================================================================

   Se carga DESPUÉS de site.css, así que a igual especificidad gana esta.
   Para volver atrás basta con quitar su <link> de _Layout.cshtml: no se ha
   tocado ni una línea de site.css.

   No se copia la marca de IBM, solo el lenguaje de diseño: IBM Plex Sans es
   Open Font License y Carbon es Apache 2.0.

   Las cinco decisiones que hacen que IBM se vea como IBM:

     1. IBM Plex Sans, una grotesca con detalles humanistas (la 'a' de doble
        piso, el corte diagonal de la 'l') que se reconoce al instante.
     2. Titulares en peso LIGERO. Es lo más contraintuitivo: cuanto más
        grande el texto, más fino el trazo. Tenías 13 reglas en 800.
     3. Esquinas rectas. Cero radio, en todo. Tenías 43 usos de 8px/6px.
     4. Interletraje neutro. Nada de tracking negativo: tenías 11 reglas.
     5. Azul #0f62fe para lo interactivo, y solo para lo interactivo.
   =========================================================================== */

:root {
    /* --- Tipografía --- */
    --font-head: 'IBM Plex Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-serif: 'IBM Plex Serif', Georgia, serif;

    /* --- Color: azul de interacción de Carbon --- */
    --brand: #0f62fe;
    --brand-600: #0043ce;
    --brand-700: #002d9c;
    --brand-soft: #edf5ff;
    --accent: #0f62fe;
    --navy: #161616;        /* Gray 100: el "negro" de Carbon no es negro puro */
    --ink: #161616;
    --ink-2: #393939;
    --muted: #525252;
    --muted-2: #6f6f6f;
    --line: #e0e0e0;
    --line-2: #f4f4f4;

    /* --- Geometría: Carbon no tiene esquinas redondeadas --- */
    --radius: 0;
    --radius-sm: 0;
}

/* ===== Tipografía: grande y fino ===== */
body { font-family: var(--font-body); letter-spacing: 0; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); letter-spacing: 0; }

/* El titular de portada es el gesto principal: 300 y muy grande.
   IBM confía en el tamaño, no en el grosor. */
.hero-title, .aia-h1, .lp-h1, .svc-h1 {
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.15;
    font-size: clamp(2.4rem, 5vw, 3.75rem);
}

.section-head h2, .why-copy h2, .metrics-head h2,
.aia-cta h2, .svc-cta h2, .cta-inner h2 {
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.22;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

h3, .svc-title, .cap-card h3, .wcard h3, .aia-dim h3, .lp-step h3 {
    font-weight: 600;
    letter-spacing: 0;
}

/* Las etiquetas en versalitas sí llevan tracking positivo: es el contrapunto
   que hace legible el texto pequeño en mayúsculas. */
.eyebrow, .hero-eyebrow, .svc-num, .svc-tag, .aia-gate-step,
.clientbar-label, .aia-badge, .aia-level, .aia-addon-tag {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: .32px;
    text-transform: uppercase;
}

/* ===== Esquinas rectas en todo ===== */
.btn, .card, .cap-card, .tech-card, .wcard, .faq-item, .aia-quiz, .aia-opt,
.aia-actions, .aia-leadbox, .aia-addon, .lp-step, .lp-tech, .svc-feature,
.aia-card-imia, .aia-verify, .aia-score-wrap, .cta-inner, .reg-card,
.reg-search, .blog-search, .post-cta, .aia-field input, .aia-verify input,
.svc-go, .page-link, .post-share a, .social a, .bubble, .stack-note,
input, select, textarea {
    border-radius: 0;
}

/* Los círculos siguen siendo círculos: la regla anterior no debe aplastarlos */
.svc-go, .sb-ic, .sol-icon, .wc-ic, .aia-dim-ic, .testi-avatar,
.so-core, .so-chip, .why-visual .wv-badge, .why-visual .wv-chip,
.lp-step .lp-num, .aia-cs > span, .aia-step-card > span, .wa-float {
    border-radius: 50%;
}

/* ===== El botón de Carbon =====
   Rectángulo, altura fija, etiqueta a la izquierda y el icono empujado al
   extremo derecho. Ese hueco entre texto e icono es la firma del sistema. */
.btn {
    border-radius: 0;
    min-height: 48px;
    padding: .875rem 1rem;
    font-weight: 400;
    letter-spacing: 0;
    justify-content: space-between;
    gap: 2.5rem;
    border-width: 1px;
    transition: background .11s cubic-bezier(.2, 0, .38, .9),
                border-color .11s cubic-bezier(.2, 0, .38, .9),
                color .11s cubic-bezier(.2, 0, .38, .9);
}
.btn-lg { min-height: 56px; padding: 1rem 1rem; font-size: 1rem; }
.btn i { font-size: 1.15rem; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.btn-ghost { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-700); }

/* El CTA del menú lo pisaba `.main-nav > a` (especificidad 0,1,1, mayor que
   `.btn`). Se iguala con la misma especificidad para que todos los botones
   pesen lo mismo. En Carbon los enlaces de navegación también van en 400. */
.main-nav > a.btn { font-weight: 400; }
.main-nav > a { font-weight: 400; letter-spacing: 0; }

/* Foco de Carbon: recuadro sólido, no halo difuso */
.btn:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    box-shadow: none;
}

/* ===== Alineación: IBM no centra ===== */
.section-head { text-align: left; max-width: 42rem; margin-left: 0; margin-right: 0; }
.metrics-head { text-align: left; margin-left: 0; }
.svc-all { text-align: left; }

/* ===== Enlaces: azul, subrayado al pasar ===== */
a { color: var(--brand); }
.svc-title::after { background: var(--brand); }

/* ===== Superficies planas, sin sombra (Carbon usa capas de gris) ===== */
.card, .cap-card, .tech-card, .wcard, .faq-item, .aia-quiz, .lp-step {
    box-shadow: none;
    border-color: var(--line);
}
.cap-card:hover, .tech-card:hover, .wcard:hover, .faq-item:hover {
    border-color: var(--brand);
    box-shadow: none;
}

/* La banda oscura de Carbon es Gray 100, no azul marino */
.metrics-band, .aia-cta, .svc-cta, .cta-inner, .aia-card-imia,
.aia-verify, .aia-score-wrap, .faq-help, .wcard-dark, .svc-feature {
    background: #161616;
}
.aia-addon-dark { background: #161616; border-color: #161616; }

/* ===== Campos de formulario: subrayado, no caja =====
   En Carbon el input es un rectángulo gris con una sola línea inferior. */
.aia-field input, .reg-search input, .blog-search input {
    background: #f4f4f4;
    border: 0;
    border-bottom: 1px solid #8d8d8d;
    border-radius: 0;
}
.aia-field input:focus {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    box-shadow: none;
    background: #f4f4f4;
}

/* ===== Índice de servicios: la rejilla visible de Carbon ===== */
.svc-list { border-top-color: var(--line); }
.svc-list > li { border-bottom-color: var(--line); }
.svc-row-featured { background: var(--brand-soft); }
.svc-row-featured:hover { background: var(--brand-soft); }
.svc-tag { color: var(--brand); border-color: var(--brand); border-radius: 0; }

/* ===== Cifras: peso ligero también en los números grandes ===== */
.sb-num, .metric .m-num, .aia-score-num, .lp-metric .n {
    font-weight: 300;
    letter-spacing: 0;
}

/* ===========================================================================
   AJUSTES: botones del hero + escala de grises de Carbon
   =========================================================================== */

/* ----- El par de botones -----
   Medían 238 y 420px: sumados con el hueco no cabían en la columna de 640 y el
   segundo saltaba de línea desparejo. El `gap: 2.5rem` interno los inflaba.
   Carbon los resuelve como celdas iguales que se TOCAN (sin separación), y que
   pasan a apilarse a ancho completo cuando no caben. */
.hero-actions, .aia-cta-actions, .svc-cta-actions, .lp-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1px;
    max-width: 660px;
    align-items: stretch;
}
.hero-actions .btn, .aia-cta-actions .btn, .svc-cta-actions .btn, .lp-cta .lp-btn {
    width: 100%;
    gap: 1rem;
    white-space: normal;      /* una etiqueta larga parte de línea en vez de desbordar */
    text-align: left;
    align-items: center;
}
/* En las bandas oscuras el par va centrado, no en columna estrecha */
.aia-cta-actions, .svc-cta-actions { margin-left: auto; margin-right: auto; }

/* El hueco interno general baja de 2.5rem a 1.5rem: seguía siendo el gesto de
   Carbon pero sin ensanchar los botones de forma gratuita. */
.btn { gap: 1.5rem; }

/* ----- Más negro: la escala de grises de Carbon -----
   Gray 10 en vez del azul lavado para las secciones alternas, y Gray 100 en
   las bandas oscuras. El azul queda reservado a lo que se puede pulsar. */
.section-alt { background: #f4f4f4; }
.contact-section { background: #f4f4f4; }
.site-footer, footer.site-footer { background: #161616; }
.hero-figure { background-color: #f4f4f4; }
.aia-hero, .svc-hero, .reg-hero { background: #f4f4f4; border-bottom: 1px solid #e0e0e0; }
.aia-gate, .aia-quiz { background: #fff; border: 1px solid #e0e0e0; }

/* Gray 90 para la banda inmediatamente anterior al pie: escalón intermedio
   entre el blanco del contenido y el negro del pie. */
.cta-band { background: #262626; }
.cta-inner { background: #262626; }

/* Filete superior de color en los bloques oscuros: el recurso con el que
   Carbon marca jerarquía sin usar sombras. */
.metrics-band, .aia-cta, .svc-cta { border-top: 1px solid #393939; }

/* Texto sobre gris oscuro, con el contraste que pide Carbon */
.cta-band p, .cta-inner p { color: #c6c6c6; }

/* ----- Respiro entre el menú y el arranque del hero -----
   El hero tenía padding 0 y su contenido lo llenaba entero (1px de holgura),
   así que "TECNOLOGÍA QUE IMPULSA LO ESENCIAL" nacía pegado al menú. El aire
   que sobraba debajo no era del hero: era el padding-top de la banda de
   métricas. Se le quita a esa y se le da al hero, para separar arriba sin
   estirar la página. */
/*  >>> MARGEN SUPERIOR DEL HERO <<<
    Este es el valor que separa "TECNOLOGIA QUE IMPULSA LO ESENCIAL" del menu.
    Subelo o bajalo aqui: es el unico sitio donde se controla. */
.hero-figure, .hero-cover {
    padding-top: 25px;      /* <-- el margen. 48px era el anterior; esto es un 30% menos */
    padding-bottom: 8px;
}
.statband { padding-top: 16px; }

/* ===========================================================================
   AJUSTES DE COHERENCIA CON EL LENGUAJE CARBON
   =========================================================================== */

/* ----- 1. Banda CTA: los botones estaban descuadrados -----
   El contenedor centra su texto, pero la rejilla de botones tiene un ancho
   maximo de 660px y margenes laterales en 0, asi que quedaba pegada a la
   izquierda mientras el titular iba centrado. */
.cta-inner .hero-actions,
.cta-band .hero-actions {
    margin-inline: auto;
}

/* ----- 3. Fuera las orbitas decorativas -----
   Las composiciones orbitales (anillos concentricos, resplandor difuminado,
   fichas flotando alrededor de un centro) son el gesto opuesto a Carbon, que
   organiza la informacion en rejillas de mosaicos cuadrados. Son justo las
   dos zonas que desentonaban. */

/* El adorno de "Un socio tecnologico" es puramente decorativo
   (aria-hidden="true"), asi que se puede retirar sin perder informacion. */
.why-visual { display: none; }

/* El stack tecnologico SI lleva informacion: no se oculta, se reorganiza.
   Pasa de orbita a rejilla de mosaicos, que es el patron "tile" de Carbon.
   El truco del hueco de 1px sobre fondo gris dibuja la retícula sin bordes. */
.stack-orbit {
    position: static;
    display: grid;
    /* 5 columnas: con 10 tecnologias salen dos filas exactas, sin huecos grises.
       Con 4 sobraban dos celdas vacias al final. */
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    /* El `width: 100%` no bastaba: la orbita traia un max-width de 620px que la
       dejaba encogida y centrada, con la mitad izquierda vacia. */
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    /* La orbita traia `aspect-ratio: 1 / 0.92` para mantenerse cuadrada. Aplicado
       a una rejilla de 1356px de ancho forzaba 1248px de alto, y las dos filas se
       repartian ese espacio: mosaicos de 622px. */
    aspect-ratio: auto;
    background: #e0e0e0;
    border: 1px solid #e0e0e0;
}
.stack-orbit .so-ring,
.stack-orbit .so-core { display: none; }

.stack-orbit .so-chip {
    position: static;
    transform: none;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 112px;
    padding: 1rem;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    white-space: normal;
    transition: background .11s cubic-bezier(.2, 0, .38, .9);
}
.stack-orbit .so-chip:hover { background: #f4f4f4; border: 0; }
.stack-orbit .so-chip i { font-size: 1.5rem; color: var(--brand); }
.stack-orbit .so-chip img { height: 26px; width: auto; object-fit: contain; }
.stack-orbit .so-chip span {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: .95rem;
    color: var(--ink);
    letter-spacing: 0;
}

/* Con la orbita convertida en rejilla, la seccion deja de necesitar dos
   columnas desiguales: el texto arriba y los mosaicos a lo ancho. */
.stack-split { display: block; }
.stack-split > :first-child { max-width: 42rem; margin-bottom: 2.5rem; }

/* ----- Un botón solo no debe ocupar 660px -----
   La rejilla reparte el ancho entre las celdas que haya; con un único botón
   esa celda se lleva los 660px enteros. Cuando el par es en realidad uno solo,
   la rejilla se encoge y sigue centrada por el margin-inline: auto. */
.hero-actions:has(> :only-child),
.aia-cta-actions:has(> :only-child),
.svc-cta-actions:has(> :only-child),
.lp-cta:has(> :only-child) {
    max-width: 340px;
}


/* ----- Un botón sin icono lleva la etiqueta centrada -----
   `justify-content: space-between` es lo que separa el texto del icono y da al
   botón su forma de Carbon. Pero si el botón NO tiene icono, ese reparto empuja
   la etiqueta contra el borde izquierdo, que es lo que pasaba en "Solicitar
   propuesta de soporte". */
.btn:not(:has(i)) {
    justify-content: center;
    text-align: center;
}

/* En móvil la rejilla de tecnologías baja a 2 columnas: cinco no caben */
@media (max-width: 900px) { .stack-orbit { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .stack-orbit { grid-template-columns: repeat(2, 1fr); } }

/* ----- El sello AIDMI dentro del panel oscuro -----
   El logotipo es una placa NEGRA con las letras caladas en blanco: sobre el
   panel oscuro se perdería. Tampoco sirve teñirlo de blanco, porque su canal
   alfa es la placa entera y saldría un bloque macizo. La solución correcta es
   la que usan las marcas con logos monocromos: presentarlo sobre su propia
   superficie clara, sin alterar el original. */
.aia-seal-wrap {
    display: block;
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    background: #fff;
    line-height: 0;          /* evita el hueco fantasma bajo la imagen */
}
.aia-seal {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}
.aia-seal-note {
    margin: .9rem 0 1.25rem;
    font-size: .82rem;
    line-height: 1.6;
    color: #a9b7d1;
}

/* ===========================================================================
   BLOQUES NUEVOS: compromisos, perfiles y modalidades
   Rejilla de mosaicos con hueco de 1px sobre gris — la retícula de Carbon.
   =========================================================================== */

.trust-grid, .roles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.trust-item, .role-item { background: #fff; padding: 28px 26px; }
.trust-item i { font-size: 1.5rem; color: var(--brand); }
.trust-item h3, .role-item h3 {
    font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
    color: var(--ink); margin: 14px 0 8px; letter-spacing: 0;
}
.role-item h3 { margin-top: 0; }
.trust-item p, .role-item p { font-size: .9rem; line-height: 1.7; color: var(--muted); margin: 0; }
.role-stack {
    display: block; font-family: var(--mono, 'IBM Plex Mono', monospace);
    font-size: .72rem; letter-spacing: .04em; color: var(--brand); margin-bottom: 10px;
}
.roles-note {
    margin: 2rem 0 0; font-size: .93rem; line-height: 1.7; color: var(--muted);
    max-width: 46rem; border-left: 2px solid var(--brand); padding-left: 18px;
}

.modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); }
.mode-item { background: #fff; padding: 32px 30px; display: flex; flex-direction: column; }
.mode-item-featured { background: var(--navy); }
.mode-tag {
    display: inline-block; font-family: var(--font-head); font-size: .64rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
    border: 1px solid var(--brand); padding: .24rem .6rem; align-self: flex-start;
}
.mode-item-featured .mode-tag { color: #78a9ff; border-color: #78a9ff; }
.mode-item h3 {
    font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; line-height: 1.3;
    color: var(--ink); margin: 16px 0 12px; letter-spacing: 0;
}
.mode-item-featured h3 { color: #fff; }
.mode-item > p { font-size: .92rem; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.mode-item-featured > p { color: #c6c6c6; }
.mode-list { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--line); }
.mode-item-featured .mode-list { border-top-color: #393939; }
.mode-list li {
    font-size: .86rem; color: var(--ink-2); padding: 11px 0 11px 22px; position: relative;
    border-bottom: 1px solid var(--line-2);
}
.mode-item-featured .mode-list li { color: #c6c6c6; border-bottom-color: #393939; }
.mode-list li:last-child { border-bottom: 0; }
.mode-list li::before {
    content: ""; position: absolute; left: 0; top: 1.15em;
    width: 10px; height: 1px; background: var(--brand);
}

@media (max-width: 1000px) {
    .trust-grid, .roles-grid, .modes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .trust-grid, .roles-grid, .modes-grid { grid-template-columns: 1fr; }
}


/* El titulo de cada servicio pasa de <span> a <h3> por semantica: los h3 heredan
   margenes del navegador que romperian la fila de la rejilla. */
h3.svc-title { margin: 0 0 .35rem; }


/* Titulo del panel AIDMI: sustituye al encabezado que solo tenia la imagen */
.aia-card-title {
    font-family: var(--font-head); font-weight: 400; font-size: 1.05rem;
    line-height: 1.4; color: #fff; margin: 1.25rem 0 0; letter-spacing: 0;
}
.aia-seal-wrap { margin-top: .9rem; }

/* El pie pasa de H4 a H3: se conserva su tamano, solo cambia la semantica */
.site-footer h3 {
    font-family: var(--font-head); font-weight: 600; font-size: .92rem;
    color: #fff; margin: 0 0 14px; letter-spacing: 0;
}

/* Encabezado del listado del blog: existe para cerrar la jerarquia H1 -> H2 -> H3,
   así que va discreto, no compitiendo con el titular de la página. */
.blog-grid-title {
    font-family: var(--font-head); font-weight: 600; font-size: .72rem;
    letter-spacing: .32px; text-transform: uppercase; color: var(--muted);
    margin: 0 0 1.5rem;
}

/* Rejilla de subservicios: cuatro columnas, misma retícula de 1px del resto */
.subsrv-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
}
.subsrv-item { background: #fff; padding: 26px 24px; }
.subsrv-item h3 {
    font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    color: var(--ink); margin: 0 0 10px; letter-spacing: 0; line-height: 1.35;
}
.subsrv-item p { font-size: .88rem; line-height: 1.7; color: var(--muted); margin: 0; }
@media (max-width: 1100px) { .subsrv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .subsrv-grid { grid-template-columns: 1fr; } }