@charset "UTF-8";
/**
 * Home hero module. One section background image (Option B), intro overlay (titles + logo), row left-aligned, optional video after intro.
 * All selectors are children of .mod_home_hero. See guia-cambios-modulos.md §6.1 Option B.
 */
.mod_home_hero {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background: #333;
  opacity: 1;
  visibility: visible;
  margin-bottom: 100px;
}

@media screen and (max-width: 64em) {
  .mod_home_hero {
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 40em) {
  .mod_home_hero {
    margin-bottom: 60px;
  }
}

/* Section background image (Option B: capa de fondo CSS, al inicio del contenedor) */
.mod_home_hero .mod_home_hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay: intro titles + logo (centered); animates out after 2s */
.mod_home_hero .mod_home_hero__overlay.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  animation: mod_home_hero_overlayOut ease 1.2s 2s forwards;
}

@media screen and (max-width: 36em) {
  .mod_home_hero .mod_home_hero__overlay.overlay {
    display: none;
  }
}

/* Overlay titles (intro text, centered) */
.mod_home_hero .mod_home_hero__overlay span.title {
  font-size: clamp(20px, 5vw, 110px);
  font-weight: 700;
  position: absolute;
  color: #fff;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

.mod_home_hero .mod_home_hero__overlay span.title.first {
  z-index: 1;
  top: calc(50% - 20px);
  opacity: 0;
  animation: mod_home_hero_firstTextIn ease 1s 0.25s forwards;
}

.mod_home_hero .mod_home_hero__overlay span.title.second {
  z-index: 3;
  top: calc(50% - 20px);
  opacity: 0;
  animation: mod_home_hero_secondTextIn ease 1s 0.75s forwards;
}

/* Overlay logo */
.mod_home_hero .mod_home_hero__overlay picture.logo img {
  width: clamp(30px, 7vw, 140px);
  position: absolute;
  z-index: 1;
  top: 30%;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: mod_home_hero_logoIn ease 1s 0.2s forwards;
}

/* Video block (fades in after intro; above section bg) */
.mod_home_hero .mod_home_hero__media.media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  animation: mod_home_hero_fadeIn ease 2s 1s forwards;
}

@media screen and (max-width: 36em) {
  .mod_home_hero .mod_home_hero__media.media {
    opacity: 1;
    animation: none;
  }
}

.mod_home_hero .mod_home_hero__media.media::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.mod_home_hero .mod_home_hero__media.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
}

/* Row: main content (H1 + buttons) — left-aligned after intro */
.mod_home_hero .mod_home_hero__row.row {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 240px 40px 120px;
  min-height: calc(200px + 32vw);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media screen and (max-width: 64em) {
  .mod_home_hero .mod_home_hero__row.row {
    padding: 240px 40px 200px;
  }
}

@media screen and (max-width: 40em) {
  .mod_home_hero .mod_home_hero__row.row {
    padding: 240px 20px 200px;
  }
}

.mod_home_hero .mod_home_hero__row .mod_home_hero__inner.inner {
  position: relative;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

.mod_home_hero .mod_home_hero__logo-top-100.logo-top-100 {
  margin-bottom: 1rem;
}

.mod_home_hero .mod_home_hero__logo-top-100.logo-top-100 img {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0;
}

.mod_home_hero .mod_home_hero__row .mod_home_hero__title-large {
  color: #fff;
  margin: 0;
  font-size: 80px;
  line-height: 1.2;
}

@media screen and (min-width: 64.1em) {
  .mod_home_hero .mod_home_hero__row .mod_home_hero__title-large {
    font-size: 62px;
  }
}

@media screen and (max-width: 64em) {
  .mod_home_hero .mod_home_hero__row .mod_home_hero__title-large {
    font-size: 58px;
  }
}

@media screen and (max-width: 40em) {
  .mod_home_hero .mod_home_hero__row .mod_home_hero__title-large {
    font-size: 48px;
  }
}

@media screen and (max-width: 36em) {
  .mod_home_hero .mod_home_hero__row .mod_home_hero__title-large {
    font-size: 42px;
  }
}

.mod_home_hero .mod_home_hero__row .mod_home_hero__title-large span.small {
  text-transform: uppercase;
  font-size: 26%;
  letter-spacing: 1.2px;
  display: block;
}

@media screen and (max-width: 40em) {
  .mod_home_hero .mod_home_hero__row .mod_home_hero__title-large span.small {
    font-size: 30%;
  }
}

.mod_home_hero .mod_home_hero__row .mod_home_hero__title-large .mask {
  clip-path: inset(0 0 100% 0);
  transform: translateY(100%);
  animation: mod_home_hero_textMask ease 1s 2s forwards;
  display: block;
}

.mod_home_hero .mod_home_hero__row .mod_home_hero__title-large .mask:nth-child(2) {
  animation-delay: 2.2s;
}

.mod_home_hero .mod_home_hero__row .mod_home_hero__title-large .mask:nth-child(3) {
  animation-delay: 2.4s;
}

@media screen and (max-width: 36em) {
  .mod_home_hero .mod_home_hero__row .mod_home_hero__title-large .mask {
    animation: none;
    transform: none;
    clip-path: inherit;
  }
}

.mod_home_hero .mod_home_hero__content.content {
  opacity: 0;
  animation: mod_home_hero_fadeIn ease 2s 2.2s forwards;
  margin-top: 30px;
}

@media screen and (max-width: 36em) {
  .mod_home_hero .mod_home_hero__content.content {
    opacity: 1;
    animation: none;
  }
}

.mod_home_hero .mod_home_hero__btn-wrap {
  margin: 0 0 0.5rem;
}

.mod_home_hero .mod_home_hero__btn-wrap:last-child {
  margin-bottom: 0;
}

.mod_home_hero .mod_home_hero__content .btn {
  display: inline-block;
  background-image: linear-gradient(to right, #264A9E, #7A90C8);
}

/* Keyframes (scoped names to avoid clashes) */
@keyframes mod_home_hero_logoIn {
  0% {
    top: 20%;
    opacity: 0;
  }
  100% {
    top: 10%;
    opacity: 1;
  }
}

@keyframes mod_home_hero_firstTextIn {
  0% {
    top: calc(50% - 20px);
    opacity: 0;
  }
  100% {
    top: 25%;
    opacity: 1;
  }
}

@keyframes mod_home_hero_secondTextIn {
  0% {
    top: calc(50% - 20px);
    opacity: 0;
  }
  100% {
    top: 38%;
    opacity: 1;
  }
}

@keyframes mod_home_hero_overlayOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes mod_home_hero_fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mod_home_hero_textMask {
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translateY(100%);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}