html:has(body.modelos-page),

body.modelos-page {

  background: #05070a;

  margin: 0;

  overflow-x: hidden;

}



body.modelos-page {

  padding-top: var(--site-header-height);

  color: #fff;

  font-family: var(--site-nav-font);

  max-width: 100%;

}



.modelos-main {

  background: #05070a;

  min-height: calc(100vh - var(--site-header-height));

  overflow-x: clip;

  max-width: 100%;

}



.modelos-hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  overflow: hidden;
  text-align: center;
}

.modelos-hero.site-parallax-hero {
  max-width: none;
  margin: 0;
  padding: 56px 24px 40px;
}

.modelos-hero .site-parallax-hero__content {
  max-width: 1280px;
  margin: 0 auto;
}

.modelos-hero__glow {
  position: absolute;
  inset: -50% -15% auto;
  height: 140%;
  background:
    radial-gradient(ellipse 55% 45% at 50% 35%, rgba(0, 210, 255, 0.14), transparent 58%),
    radial-gradient(ellipse 48% 38% at 50% 55%, rgba(160, 60, 255, 0.11), transparent 52%),
    radial-gradient(ellipse 42% 32% at 50% 75%, rgba(118, 185, 0, 0.07), transparent 48%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.modelos-grid-section {
  position: relative;
  overflow: hidden;
}

.modelos-grid-section__glow {
  position: absolute;
  inset: 10% -20% 20%;
  background: radial-gradient(
    ellipse 60% 50% at 50% 40%,
    rgba(118, 185, 0, 0.08),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.modelos-grid-section .modelos-grid {
  position: relative;
  z-index: 1;
}

.modelos-hero__title {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  max-width: 14em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

.modelos-hero__line {
  display: block;
  line-height: 1.08;
}

.modelos-hero__line--light {
  font-weight: 300;
  font-size: clamp(1.15rem, 2.8vw, 1.85rem);
  letter-spacing: 0.2em;
  padding-right: 0.2em;
}

.modelos-hero__line--with-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em 0.55em;
  letter-spacing: 0.16em;
  padding-right: 0.16em;
}

.modelos-hero__line--bold {
  font-weight: 800;
  font-size: clamp(1.85rem, 5.2vw, 3.5rem);
  letter-spacing: 0.015em;
}

.modelos-hero__nvidia-logo {
  display: block;
  height: clamp(26px, 3.8vw, 42px);
  width: auto;
  flex-shrink: 0;
}



.modelos-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;

  max-width: 1280px;

  margin: 0 auto;

  padding: 8px 24px 72px;

  list-style: none;

}



.modelos-grid__item {

  margin: 0;

  padding: 0;

  min-width: 0;

}



.modelos-card {

  margin: 0;

  height: 100%;

  border: 1px solid #2f6f9f;

  border-radius: 10px;

  background: #000;

  overflow: hidden;

  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;

}



.modelos-card:focus-within,

.modelos-grid__item:hover .modelos-card {

  border-color: #4a9fd4;

  box-shadow: 0 12px 40px rgba(47, 111, 159, 0.22);

  transform: translateY(-2px);

}



.modelos-card__visual {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 148px;

  padding: 20px 16px;

}



.modelos-card__visual img {

  display: block;

  width: 100%;

  max-height: 120px;

  object-fit: contain;

  transition: transform 0.35s ease, filter 0.35s ease;

}



.modelos-grid__item:hover .modelos-card__visual img,

.modelos-card:focus-within .modelos-card__visual img {

  filter: brightness(0.72);

}



.modelos-card__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    180deg,

    rgba(5, 7, 10, 0.15) 0%,

    rgba(5, 7, 10, 0.55) 45%,

    rgba(5, 7, 10, 0.92) 100%

  );

  opacity: 0;

  transition: opacity 0.3s ease;

  pointer-events: none;

}



.modelos-grid__item:hover .modelos-card__overlay,

.modelos-card:focus-within .modelos-card__overlay {

  opacity: 1;

}



.modelos-card__actions {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 16px;

  opacity: 0;

  transform: translateY(8px);

  transition: opacity 0.3s ease, transform 0.3s ease;

}



.modelos-grid__item:hover .modelos-card__actions,

.modelos-card:focus-within .modelos-card__actions {

  opacity: 1;

  transform: translateY(0);

}



.modelos-card__btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  box-sizing: border-box;

  min-width: min(100%, 220px);

  max-width: 100%;

  padding: 11px 18px;

  border-radius: 999px;

  font-size: 0.88rem;

  font-weight: 600;

  letter-spacing: 0.01em;

  text-decoration: none;

  white-space: nowrap;

  backdrop-filter: blur(8px);

  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;

}



.modelos-card__btn-icon {

  flex-shrink: 0;

}



.modelos-card__btn--info {

  color: #fff;

  background: rgba(118, 185, 0, 0.92);

  border: 1px solid rgba(154, 220, 40, 0.55);

  box-shadow: 0 4px 18px rgba(118, 185, 0, 0.28);

}



.modelos-card__btn--info:hover {

  background: #8fd400;

  transform: translateY(-1px);

  box-shadow: 0 6px 22px rgba(118, 185, 0, 0.38);

}



.modelos-card__btn--video {

  color: #e8f4ff;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(120, 180, 230, 0.45);

}



.modelos-card__btn--video:hover {

  background: rgba(74, 159, 212, 0.22);

  border-color: #4a9fd4;

  transform: translateY(-1px);

}



.modelos-footer {

  margin-top: 0;

  padding: 24px;

  text-align: center;

  font-size: 0.9rem;

  color: rgba(255, 255, 255, 0.72);

  background: #0a0e14;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.modelos-footer a {

  color: #76b900;

}



/* Móvil y touch: imagen arriba, botones abajo (sin superponer) */

@media (hover: none), (max-width: 900px) {

  .modelos-grid {

    grid-template-columns: 1fr;

    gap: 16px;

    padding-bottom: 56px;

  }



  .modelos-card__visual {

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    min-height: 0;

    box-sizing: border-box;

    padding: 16px 14px 14px;

  }



  .modelos-card__visual img {

    position: relative;

    z-index: 1;

    order: 1;

    width: 100%;

    max-width: 100%;

    max-height: clamp(100px, 28vw, 140px);

    margin: 0 auto;

    filter: none;

  }



  .modelos-card__overlay {

    display: none;

  }



  .modelos-card__actions {

    position: static;

    inset: auto;

    z-index: auto;

    order: 2;

    opacity: 1;

    transform: none;

    align-items: stretch;

    justify-content: flex-start;

    box-sizing: border-box;

    width: 100%;

    max-width: 100%;

    padding: 12px 0 0;

    gap: 8px;

  }



  .modelos-card__btn {

    box-sizing: border-box;

    min-width: 0;

    width: 100%;

    max-width: 100%;

    padding: 10px 14px;

    font-size: 0.88rem;

    white-space: normal;

  }



  .modelos-card__btn span {

    text-align: center;

  }

}



@media (max-width: 520px) {

  .modelos-hero__line--light {
    letter-spacing: 0.12em;
    padding-right: 0;
  }

  .modelos-hero__line--with-logo {
    letter-spacing: 0.08em;
    padding-right: 0;
  }

  .modelos-card__visual {

    padding: 14px 12px 12px;

  }



  .modelos-card__visual img {

    max-height: 100px;

  }

}



/* Video anchor scroll offset on destination pages */

#video,

#asus-video {

  scroll-margin-top: calc(var(--site-header-height, 72px) + 16px);

}