/*! 1- hero*/
.hero_section {
  height: auto;
  width: 100%;
}
.hero_component {
  width: 100%;
}
.hero-video {
  width: 100%;
  display: block;
}
/*! 2- Aviso Component*/
.aviso-component {
  text-align: center;
}
.aviso-component h2 {
  font-size: var(--fs-10);
  font-weight: 400 !important;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25em; /* compacta el espacio por defecto */
  transition: row-gap 220ms ease;
}
.aviso-component .uno {
  color: var(--rojo);
  font-size: var(--fs-11);
  font-weight: 800;
}
.aviso-component .dos {
  color: var(--verde);
  font-size: var(--fs-11);
  font-weight: 800;
}
.aviso-component .tres {
  color: var(--palido);
  font-size: var(--fs-11);
  font-weight: 800;
}
.aviso-component h2 {
  line-height: 1.1;
  margin: 0;
}
.line {
  display: inline-block;
}
/* La línea 2 inicia colapsada */
.aviso-component .dos {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.25em) scale(0.8); /* arranca un poco más chica */
  margin-block: 0;
  transition: max-height 260ms ease, opacity 220ms ease,
    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
    /* overshoot tipo "pop" */ margin 260ms ease;
}

/* Al activarse, se expande y empuja a las otras */
.aviso-component.is-visible .dos {
  max-height: 3em; /* o 1.3–1.5em si quieres más compacto */
  opacity: 1;
  transform: translateY(0) scale(1); /* llega a su tamaño normal */
  margin-block: 0.1em;
}

/* Opcional: un pelín más de aire cuando ya está visible */
.aviso-component.is-visible h2 {
  row-gap: 0.35em;
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aviso-component h2 {
    transition: none;
  }
  .aviso-component .dos {
    transition: none;
  }
}

/*! 3 Intro*/
.intro-component p,
.intro-component a {
  font-size: var(--fs-6);
}
.intro-component p {
  color: var(--verde);
}
.intro-component a {
  color: var(--turquesa);
  font-weight: 600;
}

/*! 3 Blueprint*/
.blueprint_section {
  position: relative;
  width: 100%;
  aspect-ratio: 1728 / 1525;
  overflow: hidden;
  background-color: #af493e;
  background-image: url(/images/fondo-rayas.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 16%;
}
.blueprint-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blueprint-component p {
  color: var(--turquesa);
  font-size: var(--fs-7);
  width: 20rem;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 768px) {
  .blueprint_section {
    padding-top: 25%;
    background-size: 150%; /* fuerza un "zoom" 2x */
    background-position: center; /* ajusta la parte visible */
  }
  .blueprint-component p {
    font-size: var(--fs-5);
    width: 12rem;
  }
}

/*! Methdology Section*/
.methodology_section {
  background-color: var(--rojo);
}
.methodology_section p {
  color: var(--bg-beige);
  font-size: var(--fs-5);
}
.special-message {
  color: #77c6bd !important;
}
.methodology-title {
  font-size: var(--fs-6) !important;
  font-weight: 600;
}
.methodology-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
.methodology-item {
  width: 20%;
}
.methodology-item:first-child {
  margin-right: 2.5rem;
}
@media (max-width: 1000px) {
  .methodology-item {
    width: 40%;
  }
  .methodology-item:first-child {
    margin-right: 0rem;
  }
}

/*! Video Home*/
.videohome_section {
  width: 100%;
  padding-bottom: 2rem;
}
.video-home-component {
  width: 100%;
}
.video-youtube {
  width: 100%;
  aspect-ratio: 16 / 9 !important;
}