@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@400;700&display=swap");

.page-producciones-overview {
  background: #1f1f1f;
  color: var(--hero-white);
  --production-media-bg: #1f1f1f;
}

.page-producciones-overview .hero__nav a.nav-active {
  color: var(--hero-lime) !important;
}

.page-producciones-overview .hero__topbar {
  background: #1f1f1f;
}

.page-producciones-overview .conversion,
.page-producciones-overview .conversion__title,
.page-producciones-overview .conversion__text,
.page-producciones-overview .conversion__cta {
  transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.page-producciones-overview .footer__link {
  transition: color 0.4s ease-in-out, opacity 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}

.page-producciones-overview .conversion:hover {
  background-color: #d2f583 !important;
}

.page-producciones-overview .conversion:hover .conversion__title,
.page-producciones-overview .conversion:hover .conversion__text {
  color: #1a1a1a !important;
}

.page-producciones-overview .conversion:hover .conversion__cta {
  color: #1a1a1a;
  border-color: #1a1a1a;
  background-color: transparent;
}

.page-producciones-overview .conversion__cta:hover {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #d2f583 !important;
}

.page-producciones-overview .conversion,
.page-producciones-overview .conversion__content,
.page-producciones-overview .conversion__title,
.page-producciones-overview .conversion__title .intro__title-line,
.page-producciones-overview .conversion__text {
  text-align: center;
}

.page-producciones-overview .conversion__content,
.page-producciones-overview .conversion__title,
.page-producciones-overview .conversion__text {
  margin-left: auto;
  margin-right: auto;
}

.page-producciones-overview .conversion__title.conversion__title--brand {
  width: min(700px, 100%) !important;
  max-width: 100%;
  display: block !important;
}

.page-producciones-overview .conversion__text {
  width: min(520px, 100%);
}

@media (max-width: 1024px) {
  .page-producciones-overview .hero__topbar,
  .page-producciones-overview .hero__topbar--glass,
  .page-producciones-overview .hero__topbar--lime {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
  }

  .page-producciones-overview .hero__topbar--lime .hero__brand::after {
    background-image: url("../icon/iconomovil2.png") !important;
  }

  .page-producciones-overview .hero__menu-toggle,
  .page-producciones-overview .hero__topbar--glass .hero__menu-toggle,
  .page-producciones-overview .hero__topbar--lime .hero__menu-toggle {
    background: var(--mobile-menu-pill-bg) !important;
    border-color: var(--mobile-menu-pill-border) !important;
    color: var(--hero-lime) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}

.producciones-overview {
  background: #1f1f1f;
}

.producciones-overview__hero {
  min-height: 680px;
  height: min(760px, calc(100svh - var(--header-height) + 80px));
  padding: calc(var(--header-height) + 48px) var(--hero-side-pad) 132px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.04), transparent 18%),
    linear-gradient(180deg, #242424 0%, #1f1f1f 100%);
}

.producciones-overview__hero-inner {
  width: min(1200px, 100%);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  text-align: center;
  transform: translateY(-25px);
}

.producciones-overview__lead {
  max-width: 320px;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
  color: var(--hero-white);
}

.producciones-overview__title {
  margin: 0;
  font-family: "Outfit", Arial, sans-serif;
  font-size: clamp(92px, 14vw, 146px);
  line-height: 0.88;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--hero-white);
  text-align: center;
  overflow: visible;
}

.producciones-overview__title .intro__title-line {
  padding-inline: 0.06em;
  margin-inline: -0.03em;
  overflow: visible;
}

.producciones-overview__title.line-reveal-title.animate-on-scroll.is-visible .intro__title-line {
  clip-path: inset(0 -0.08em 0 -0.08em) !important;
}

.producciones-overview__grid-section {
  background: #1f1f1f;
  color: var(--hero-white);
  scroll-margin-top: calc(var(--header-height, 80px) + 16px);
}

.producciones-overview__grid-inner {
  width: min(1440px, 100%);
  min-height: 0;
  margin: -1px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px clamp(32px, 6vw, 120px) 196px;
  gap: clamp(40px, 5vw, 64px);
  box-sizing: border-box;
}

.producciones-overview__filters {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 0;
  flex: none;
  order: 0;
  flex-grow: 0;
  box-sizing: border-box;
  overflow: visible;
}

.producciones-overview__filters::-webkit-scrollbar {
  display: none;
}

.producciones-overview__filter,
.producciones-overview__filter-toggle {
  all: unset;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  min-width: max-content;
  padding: 12px 18px;
  border: 1px solid rgba(245, 246, 239, 0.1);
  border-radius: 107px;
  font-family: "Roboto Mono", monospace;
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(245, 246, 239, 0.72);
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: color 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
}

.producciones-overview__filter-toggle {
  display: none;
}

.producciones-overview__filter:not(.is-active):hover,
.producciones-overview__filter:not(.is-active):focus-visible,
.producciones-overview__filter-toggle:hover,
.producciones-overview__filter-toggle:focus-visible {
  color: var(--hero-lime);
  border-color: rgba(210, 245, 131, 0.42);
}

.producciones-overview__filter.is-active {
  color: var(--hero-lime);
  background: #414141;
  border-color: rgba(210, 245, 131, 0.24);
}

.producciones-overview__filter-toggle.is-open {
  color: var(--hero-lime);
  background: #414141;
  border-color: rgba(210, 245, 131, 0.24);
}

.producciones-overview__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 72px) clamp(20px, 2vw, 28px);
}

.production-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.production-card[hidden] {
  display: none;
}

.production-card__media {
  order: 1;
  margin: 0;
  aspect-ratio: 1.58;
  overflow: visible;
  background: var(--production-media-bg);
  border-radius: 0;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.production-card__media img,
.production-card__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--production-media-bg);
  transform: scale(1);
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.production-card__media--tecnologia {
  overflow: hidden;
}

.production-card__media--tecnologia img {
  transform: scale(1.22);
  object-position: center 38%;
}

.production-card__media--tecnologia:hover img,
.production-card__media--tecnologia:focus-visible img {
  transform: scale(1.26);
}

.production-card__media video {
  pointer-events: none;
}

.production-card__media:hover img,
.production-card__media:hover video,
.production-card__media:focus-visible img,
.production-card__media:focus-visible video {
  transform: scale(1.075);
}

.production-card:has(.production-card__media:hover),
.production-card:has(.production-card__media:focus-visible) {
  z-index: 3;
}

.production-card__body {
  order: 2;
  padding: 0 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  border-bottom: 1px solid rgba(245, 246, 239, 0.26);
}

.production-card__category {
  display: none;
}

.production-card__title {
  margin: 0;
  font-size: clamp(18px, 1.45vw, 28px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--hero-white);
  text-wrap: balance;
  cursor: pointer;
}

.production-card__title:focus-visible,
.production-card__media:focus-visible {
  outline: 1px solid var(--hero-lime);
  outline-offset: 6px;
}

.production-card__title span {
  display: block;
  color: var(--hero-lime);
}

.production-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: end;
  justify-self: end;
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 246, 239, 0.72);
  white-space: nowrap;
  transition: color 0.24s ease;
}

.production-card__cta:hover,
.production-card__cta:focus-visible {
  color: var(--hero-lime);
}

.production-card__cta:focus-visible {
  outline: 1px solid var(--hero-lime);
  outline-offset: 6px;
}

.production-card--disabled .production-card__cta {
  pointer-events: none;
  opacity: 0.45;
}

@media (min-width: 1025px) {
  .producciones-overview__hero {
    min-height: 100svh;
    height: 100svh;
  }
}

@media (min-width: 1600px) {
  .producciones-overview__hero {
    min-height: 100svh;
    height: 100svh;
    padding-bottom: 144px;
  }

  .producciones-overview__hero-inner {
    width: min(1520px, 100%);
    gap: 72px;
    transform: translateY(-12px);
  }

  .producciones-overview__lead {
    max-width: 360px;
    font-size: 17px;
  }

  .producciones-overview__title {
    font-size: clamp(132px, 8vw, 158px);
  }

  .producciones-overview__grid-inner {
    width: min(1680px, 100%);
    align-items: stretch;
    padding: 48px clamp(80px, 6vw, 120px) 210px;
    gap: 56px;
  }

  .producciones-overview__filters {
    max-width: 1320px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .producciones-overview__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 64px 28px;
    align-items: start;
  }

  .production-card {
    min-width: 0;
    gap: 22px;
  }

  .production-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .production-card__body {
    min-height: 96px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding-bottom: 24px;
  }

  .production-card__title {
    font-size: clamp(18px, 1.05vw, 22px);
    line-height: 1.05;
  }

  .production-card__cta {
    justify-self: end;
    align-self: end;
    font-size: 12px;
    line-height: 16px;
  }
}

@media (min-width: 1920px) {
  .producciones-overview__grid-inner {
    width: min(1800px, 100%);
    padding-left: clamp(112px, 7vw, 152px);
    padding-right: clamp(112px, 7vw, 152px);
  }

  .producciones-overview__grid {
    gap: 72px 32px;
  }
}


@media (max-width: 1280px) {
  .producciones-overview__grid-inner {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 160px;
  }

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

@media (max-width: 1024px) {
  .producciones-overview__title {
    font-size: 80px;
    line-height: 0.95;
    letter-spacing: -0.02em;
  }

  .producciones-overview__grid-inner {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 140px;
    gap: 0;
  }

  .producciones-overview__filter-toggle {
    display: inline-flex;
    width: calc((100% - 24px) / 3);
    min-width: 0;
    min-height: 52px;
    padding: 12px 14px;
    align-self: center;
  }

  .producciones-overview__grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px 24px;
    margin-top: 40px;
  }

  .producciones-overview__filters {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    gap: 12px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transform: translateY(-8px);
    transition:
      max-height 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.48s ease,
      transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.85s;
  }

  .producciones-overview__filters.is-open {
    max-height: 420px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    margin-top: 12px;
    transition:
      max-height 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.48s ease,
      transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  .producciones-overview__filter {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 12px 14px;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  .production-card {
    gap: 24px;
  }

  .production-card__body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
  }

  .production-card__cta {
    justify-self: end;
    align-self: start;
    padding-top: 24px;
    white-space: nowrap;
    text-align: right;
  }

  .production-card__media {
    overflow: hidden;
    background: var(--production-media-bg);
  }

  .production-card__media img,
  .production-card__media video {
    object-fit: cover;
    object-position: center;
    background: var(--production-media-bg);
  }
}

@media (max-width: 768px) {
  .producciones-overview__hero {
    height: 500px;
    padding: calc(var(--header-height) + 32px) 24px 52px;
  }

  .producciones-overview__hero-inner {
    gap: 28px;
    transform: translateY(-10px);
  }

  .producciones-overview__lead {
    font-size: 14px;
  }

  .producciones-overview__title {
    font-size: 80px;
    line-height: 0.95;
    letter-spacing: -0.02em;
  }

  .producciones-overview__grid-section {
    background: #1f1f1f;
  }

  .producciones-overview__grid-inner {
    padding: 24px 24px 96px;
    gap: 0;
  }

  .producciones-overview__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .producciones-overview__filter-toggle {
    width: calc((100% - 10px) / 2);
    min-height: 48px;
    padding: 11px 10px;
    font-size: 11px;
    line-height: 15px;
  }

  .producciones-overview__filter {
    min-height: 48px;
    padding: 11px 10px;
    font-size: 11px;
    line-height: 15px;
  }

  .producciones-overview__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 26px;
  }

  .production-card {
    gap: 20px;
  }

  .production-card__body {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 0 18px;
    gap: 16px;
  }

}

@media (max-width: 600px) {
  .producciones-overview__title {
    font-size: 54px;
    line-height: 0.95;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 540px) {
  .producciones-overview__hero {
    height: 420px;
    padding: calc(var(--header-height) + 24px) 16px 36px;
  }

  .producciones-overview__hero-inner {
    gap: 22px;
    transform: translateY(-6px);
  }

  .producciones-overview__lead {
    max-width: 260px;
    font-size: 16px;
  }

  .producciones-overview__title {
    font-size: 54px;
    line-height: 0.95;
    letter-spacing: -0.02em;
  }

  .producciones-overview__grid-inner {
    padding: 24px 16px 72px;
    gap: 0;
  }

  .producciones-overview__grid {
    margin-top: 18px;
  }

  .producciones-overview__filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .production-card__body {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 0 16px;
    gap: 12px;
  }

  .production-card__title {
    font-size: 18px;
  }

  .production-card__cta {
    justify-self: end;
    align-self: start;
    padding-top: 22px;
    font-size: 11px;
    line-height: 14px;
  }
}