/* IT en Línea · Hero editorial v0.2 */
.it-home { padding: 32px 0 76px; }
.it-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: 12px; height: 500px; }
.it-hero__aside { display: grid; grid-template-rows: repeat(3, minmax(0,1fr)); gap: 12px; min-height: 0; }
.it-hero__teaser, .it-hero__stage { position: relative; min-width: 0; overflow: hidden; background: #172b3d; }
.it-hero__teaser { display: block; width: 100%; min-height: 0; padding: 0; border: 0; text-align: left; color: #fff; isolation: isolate; }
.it-hero__teaser-media, .it-hero__media, .it-hero__shade { position: absolute; inset: 0; }
.it-hero__teaser-media, .it-hero__media { display: block; z-index: -2; }
.it-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.it-hero__media--empty { background: linear-gradient(135deg, #2475b6, #142334); }
.it-hero__shade { z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(5,15,25,.35) 42%, rgba(5,15,25,.94)); }
.it-hero__teaser:hover .it-hero__image, .it-hero__link:hover .it-hero__image { transform: scale(1.04); }
.it-hero__teaser:focus-visible, .it-hero__arrow:focus-visible, .it-hero__link:focus-visible { outline: 3px solid #7fcdff; outline-offset: -3px; }
.it-hero__teaser[aria-pressed="true"] { outline: 3px solid var(--it-blue, #2276ba); outline-offset: -3px; }
.it-hero__teaser-content { position: absolute; inset: auto 0 0; padding: 18px 19px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.it-hero__category { display: inline-block; padding: 5px 8px; background: var(--it-blue, #2276ba); color: #fff; font-size: 10px; font-weight: 800; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.it-hero__teaser-title { display: block; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }
.it-hero__slide { position: absolute; inset: 0; isolation: isolate; }
.it-hero__slide[hidden] { display: none !important; }
.it-hero__slide.is-active { animation: it-hero-enter .45s ease both; }
.it-hero__link { display: flex; align-items: flex-end; width: 100%; height: 100%; color: #fff; }
.it-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: 36px 38px 64px; }
.it-hero__title { display: block; font-size: clamp(28px, 2.7vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; max-width: 790px; }
.it-hero__meta { font-size: 11px; color: #e1e9ef; }
.it-hero__controls { position: absolute; z-index: 3; right: 17px; bottom: 16px; display: flex; gap: 9px; align-items: center; color: #fff; }
.it-hero__arrow { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.4); color: #fff; border-radius: 50%; font-size: 20px; line-height: 1; }
.it-hero__arrow:hover { background: var(--it-blue, #2276ba); }
.it-hero__counter { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes it-hero-enter { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 900px) {
  .it-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); height: 450px; }
  .it-hero__teaser-content { padding: 13px; }
  .it-hero__teaser-title { font-size: 15px; }
  .it-hero__content { padding: 25px 25px 65px; }
  .it-hero__title { font-size: clamp(25px, 3.4vw, 34px); }
}
@media (max-width: 680px) {
  .it-home { padding: 18px 0 46px; }
  .it-hero__layout { display: flex; flex-direction: column-reverse; height: auto; gap: 10px; }
  .it-hero__stage { height: 390px; flex-shrink: 0; }
  .it-hero__aside { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: none; gap: 7px; }
  .it-hero__teaser { min-height: 150px; }
  .it-hero__teaser-content { padding: 9px; }
  .it-hero__teaser-title { font-size: 12px; line-height: 1.22; }
  .it-hero__teaser .it-hero__category { font-size: 8px; padding: 4px; }
  .it-hero__content { padding: 22px 20px 64px; }
  .it-hero__title { font-size: clamp(25px, 6.2vw, 35px); }
}
@media (max-width: 420px) {
  .it-hero__stage { height: 350px; }
  .it-hero__teaser { min-height: 136px; }
  .it-hero__teaser-title { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .it-hero__slide.is-active { animation: none; }
  .it-hero__image { transition: none; }
}



/* IT en Línea · Color del título principal al pasar el mouse */

.it-hero__link .it-hero__title {
    color: #ffffff;
    transition: color .25s ease;
}

.it-hero__link:hover .it-hero__title {
    color: #7dd3fc;
}

.it-hero__link:focus-visible .it-hero__title {
    color: #7dd3fc;
}