.header_text{
    position: relative;
    overflow: hidden;         /* por si algo se sale */
    text-align: center;
  }
  
  .header_text img{
    width: min(320px, 80%);
    height: auto;
    display: block;
    margin: 0 auto 12px;
  
    /* estado inicial fuerte (fuera de pantalla) */
    transform: translateX(-120vw) rotate(-180deg);
    opacity: 0;
    will-change: transform, opacity;
  }
  
  .header_text h2{
    font-weight: 350;
    color: var(--color-text);
  
    /* estado inicial */
    transform: translateY(58px);
    opacity: 0;
    transition: transform .7s ease, opacity .7s ease;
    will-change: transform, opacity;
  }
  
  /* cuando entra al viewport */
  .header_text.is-visible h2{
    transform: translateY(0);
    opacity: 1;
  }
  
  

  .section_1{
    position: relative;
    overflow: hidden; /* CLAVE para que no genere scroll */
  }
  
  .section_1_text{
    position: relative;
  }
  
  /* ===== DECORACIONES ===== */
  .section_1 .deco_down,
  .section_1 .deco_up{
    will-change: transform, opacity;
    opacity: 0;
  }
  
  /* gris (más atrás) */
  .section_1 .deco_down{
    transform: translateX(120vw) rotate(160deg);
  }
  
  /* morado (encima) */
  .section_1 .deco_up{
    transform: translateX(140vw) rotate(220deg);
  }
  
  .section_1_img{
    overflow: hidden; /* recorta si la imagen “sube” */
  }
  
  .section_1_img img{
    display: block;
    width: 100%;
    height: auto;
  
    transform: translateY(120px);
    opacity: 0;
  
    transition: transform .8s ease, opacity .8s ease;
    will-change: transform, opacity;
  }
  
  /* cuando entra al viewport */
  .section_1_img.is-visible img{
    transform: translateY(0);
    opacity: 1;
  }
  
  
  /* ===== h1 entra desde derecha ===== */
.section_2_text h1{
  transform: translateX(120vw) rotate(8deg); /* MUY evidente */
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .9s ease;
}

.section_2_text.is-visible h1{
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

/* ===== horarios shake ===== */
.horarios{
  will-change: transform;
}

/* clase que dispara el shake */
.horarios.shake{
  animation: shakeX .55s ease-in-out;
}

@keyframes shakeX{
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  30%  { transform: translateX(10px); }
  45%  { transform: translateX(-8px); }
  60%  { transform: translateX(8px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}