@font-face{
    font-family: 'Forma DJR Display Black Testing';
    src: url('../fuentes/FormaDJRDisplay-Black-Testing.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'Montserrat Medium';
    src: url('../fuentes/Montserrat-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: "Forma DJR Banner Black Testing";
    src: url('../fuentes/FormaDJRBanner-Black-Testing.ttf');
    font-weight: normal;
    font-style: normal;
}

.fondo{
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('../img/avida/eventos fondo.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    text-align: center;
    color: white;
    justify-content: center;
    align-items: center;
    position: relative;
}

.platillos{
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    width: 100vw; /* Ancho igual al 100% del viewport */
    height: 100%;
    background-image: url('../img/avida/leftdish.png'), url('../img/avida/rightdish.png');
    background-size: 600px 556px, 593px 712px;
    background-repeat: no-repeat;
    background-position: right 15%, left 90%;
}

.letras{
    position: absolute;
    margin: 0;
    padding: 0;
    max-width: 100%;
    font-size: 275px;
    box-sizing: border-box;
    font-family: 'Forma DJR Banner Black Testing', sans-serif;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1;
    height: 100%;
    will-change: transform;
}

.anim-left, .anim-right {
    animation-duration: 1s; /* Duración de la animación */
    animation-fill-mode: both; /* Aplicar estilos antes y después de la animación */
    animation-iteration-count: infinite; /* Repetir la animación infinitamente */
    animation-timing-function: ease-in-out;
    white-space: nowrap; /* Evita saltos de línea */
}

.anim-left { animation-name: anim-left; }

.anim-right { animation-name: anim-right; }

.titulo {
    font-size: 60px;
    letter-spacing: 30px;
    font-family: 'Forma DJR Display Black Testing', sans-serif;
    position: relative;
  }

.subtitulo{
    width: 50%;
    font-family: 'Montserrat Medium', sans-serif;
    margin: 0 auto;
    position: relative;
}

.notas{
    padding-top: 50px;
    padding-bottom: 50px;
}

.nota_indv{
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.img{
    position: relative;
    z-index: 2;
}

.recorte1{
    position: relative;
    z-index: 1;
    margin-left: -25px;
    margin-top: 25px;
}

.recorte2{
    position: relative;
    z-index: 1;
    margin-right: -25px;
    margin-top: 25px;
}

.contenido_nota{
    position: absolute;
    z-index: 3;
    top: 50px;
    width: 250px;
    color: rgb(65, 65, 65);
}


.nota_izq{
    text-align: left; left: 300px;
}

.nota_der{
    text-align: right; right: 300px;
}

.contenido_nota_titulo{
    font-family: 'Forma DJR Banner Black Testing', sans-serif;
    font-size: 37px;
}

.contenido_nota_text{
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 17px;
}
.contenido_nota_autor{
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 12px;
}

.grafiti{
    position: absolute;
    bottom: 150px;
    right: 25px;
}

.btn-outline-custom-green{
    color: rgb(0, 255, 0);
    border-color: rgb(0, 255, 0);
    border-radius: 25px;
    width: 200px;
    position: relative;
}

.btn-outline-custom-green:hover{
    background-color: rgb(0, 255, 0);
    color: white;
}

/* Animaciones */
@keyframes anim-left {
    0%    { transform: translateX(0px); }
    5%    { transform: translateX(-50px); }
    10%   { transform: translateX(-100px); }
    15%   { transform: translateX(-150px); }
    20%   { transform: translateX(-200px); }
    25%   { transform: translateX(-250px); }
    30%   { transform: translateX(-300px); }
    35%   { transform: translateX(-350px); }
    40%   { transform: translateX(-400px); }
    45%   { transform: translateX(-450px); }
    50%   { transform: translateX(-500px); }
    55%   { transform: translateX(-550px); }
    60%   { transform: translateX(-600px); }
    65%   { transform: translateX(-650px); }
    70%   { transform: translateX(-700px); }
    75%   { transform: translateX(-750px); }
    80%   { transform: translateX(-800px); }
    85%   { transform: translateX(-850px); }
    90%   { transform: translateX(-900px); }
    95%   { transform: translateX(-950px); }
    100%  { transform: translateX(-1000px); }
}

@keyframes anim-right {
    0%    { transform: translateX(-1000px); }
    5%    { transform: translateX(-950px); }
    10%   { transform: translateX(-900px); }
    15%   { transform: translateX(-850px); }
    20%   { transform: translateX(-800px); }
    25%   { transform: translateX(-750px); }
    30%   { transform: translateX(-700px); }
    35%   { transform: translateX(-650px); }
    40%   { transform: translateX(-600px); }
    45%   { transform: translateX(-550px); }
    50%   { transform: translateX(-500px); }
    55%   { transform: translateX(-450px); }
    60%   { transform: translateX(-400px); }
    65%   { transform: translateX(-350px); }
    70%   { transform: translateX(-300px); }
    75%   { transform: translateX(-250px); }
    80%   { transform: translateX(-200px); }
    85%   { transform: translateX(-150px); }
    90%   { transform: translateX(-100px); }
    95%   { transform: translateX(-50px); }
    100%  { transform: translateX(0px); }
}

/*
@keyframes anim-left{
    from { transform: translateX(0px); }
    to { transform: translateX(-1000px); }
}

@keyframes anim-right{
    from { transform: translateX(-1000px); }
    to { transform: translateX(0px); }
}
*/

@media screen and (max-width: 2560px){
    .img{ height: 350px; width: 260px; }
    .recorte{ height: 350px; width: 370px; }
}

@media screen and (max-width: 1400px){
    .titulo{ font-size: 40px; letter-spacing: 20px; }
    .img{ height: 345px; width: 255px; }
    .recorte{ height: 345px; width: 365px; }
}

@media screen and (max-width: 1200px){
    .contenido_nota{ top: 5px; }
    .nota_izq{ left: 250px; }
    .nota_der{ right: 250px; }
    .contenido_nota_titulo{ font-size: 30px; }
    .img{ height: 275px; width: 214px; }
    .recorte{ height: 275px; width: 307px; }
    .grafiti{ height: auto; width: 40%; bottom: 150px; right: 75px; }
}

@media screen and (max-width: 990px){
    .platillos{background-size: 500px 463px, 493px 592px; }
    .titulo{ font-size: 20px; letter-spacing: 17px; }
    .subtitulo{ font-size: 15px; width: 85%; }
    .contenido_nota{ top: 10px; }
    .nota_izq{ left: 200px; }
    .nota_der{ right: 200px; }
    .contenido_nota_titulo{ font-size: 25px; }
    .contenido_nota_text{ font-size: 12px; }
    .contenido_nota_autor{ font-size: 10px; }
    .img{ height: 225px; width: 164px; }
    .recorte{ height: 225px; width: 257px; }
    .notas{ padding-top: 35px; padding-bottom: 35px; }
    .btn-outline-custom-green{ max-width: 50%; }
    .grafiti{ height: auto; width: 40%; bottom: 150px; right: 45px; }
}

@media screen and (max-width: 770px){
    .platillos{ background-size: 450px 417px, 443px 531px; }
    .nota_izq{ left: 230px; }
    .nota_der{ right: 230px; }
    .grafiti{ display: none; }
    .lineas_inv{ display: none; }
}

@media screen and (max-width: 580px){
    .platillos{ background-size: 400px 371px, 393px 471px; }
    .nota_izq{ left: 245px; }
    .nota_der{ right: 245px; }
    .contenido_nota{ width: 190px; }
}

@media screen and (max-width: 520px){
    .platillos{ background-size: 350px 324px, 343px 411px; }
    .nota_izq{ left: 220px; }
    .nota_der{ right: 220px; }
}

@media screen and (max-width: 475px){
    .nota_izq{ left: 195px; }
    .nota_der{ right: 195px; }
}

@media screen and (max-width: 450px){
    .contenido_nota_titulo{ font-size: 20px; }
    .nota_izq{ left: 180px; }
    .nota_der{ right: 180px; }
    .img{ height: 205px; width: 144px; }
    .recorte{ height: 205px; width: 237px; }
    .salto_invisible{ display: none; }
}

@media screen and (max-width: 410px){
    .platillos{ background-size: 300px 278px, 293px 351px; }
    .contenido_nota_titulo{ font-size: 14px; }
    .contenido_nota_text{ font-size: 10px; }
    .contenido_nota_autor{ font-size: 7px; }
    .contenido_nota{ width: 120px; }
    .nota_izq{ left: 175px; }
    .nota_der{ right: 175px; }
    .img{ height: 165px; width: 104px; }
    .recorte{ height: 165px; width: 177px; }
}

@media screen and (max-width: 360px){
    .nota_izq{ left: 150px; }
    .nota_der{ right: 150px; }
    .img{ height: 165px; width: 104px; }
    .recorte{ height: 165px; width: 177px; }
}

@media screen and (max-width: 320px){
    .platillos{ background-size: 250px 231px, 243px 291px; }
    .nota_izq{ left: 130px; }
    .nota_der{ right: 130px; }
    .img{ height: 150px; width: 89px; }
    .recorte{ height: 150px; width: 162px; }
}