*, body {
    margin:0;
    padding:0;
}

#principal {
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    gap:5rem;
    background-color: #E7C3F5;
    height:90vh;
    padding:0;
}

#principal div:first-of-type img {
    width:40vw;
    padding:0;
    margin:0;
}

#texto {
    margin-bottom: 5rem;
    margin-right:2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: left;
}

#texto h2 {
    font-size:3rem;
    text-align: left!important;
}
#texto img{
    width:22vw;
}
#cardsColores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:3rem;
    padding:4rem;
} 

#cardsColores div {
    border-radius: 20px;
    padding: 4rem;
    height:15rem;
}

#cardsColores div:first-child {
    background-color: #E1C4F1;
}

#cardsColores div:first-child h4 {
   color: #fff;
} 

#cardsColores div:last-child {
    background-color: #000;
    color:#fff;
}

#cardsColores div:last-child h5 {
    color:#E1C4F1;
}

h4 {
    font-size: 2.2rem;
}

h5 {
    font-size: 2rem;
}

p {
    font-size:1.2rem;
    padding-top:1rem;
}

/* teleprompter */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

div.teleprompter {
    overflow: hidden;
}

div.teleprompter>div.marquee {
  display: flex;
  gap: 1.5em;
  align-items: baseline;
  position: relative;
  box-sizing: border-box;
  animation: marquee 10s linear infinite;
  padding:0.5rem;
}

/* teleprompter social */
div#aboutUsLila {
    background-color: #000;
}

div#aboutUsLila h4 {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #E1C4F1;
    color: #000;
    text-wrap: nowrap;
    font-size:2em;
}

/* mariposas */
#mariposas{
    display:flex;
    align-items:center;
    padding:2rem;
}

#mariposas div h2 {
    font-size: 8rem;
}

#mariposas div p{
    font-size: 1.5rem;
    padding-right:4rem;
}

#mariposas div img {
    width: 20vw;
}

/* cards acumuladas */
section#tarjetasAcumuladas {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    overflow:hidden;
}

.cardNosotros div {
    padding:2rem;
}

#card1 h4 {
    color: #F4F29F;
    font-size: 3rem;
}

#card1 h5 {
    color:#E1C4F1;
}

#card1 p {
    color:#fff;
}

#card2 h5 {
    color:#6E2A93;
}

.cards-container {
    position: relative;
    width: 60vw;
    height: 60vh;
}

.cardNosotros {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    user-select: none;
    transition: transform 0.3s ease;
    display:flex;
}

.card:not(:last-child) {
    pointer-events: none;
}

.cardNosotros div img{
    padding:2rem;
    width:20vw;
}

.cardNosotros div p {
    font-size:20px;
    padding-right:2rem;
}
    
.cards-container div#card2 {
    transform: rotate(5deg);
}
.cards-container div#card3 {
    transform: rotate(-5deg);
}
    
#fotosCorporativas {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6E2A93;
    gap:3rem;
}
    
#fotosCorporativas div img {
    width: 30vw;
    height: 60vh;
    object-fit: cover;
    padding: 3rem;
}

/* stickers */
#stickers{
    padding: 2rem;
}

#stickers h4 {
    font-size: 6rem;
}

.sticker {
 display: inline;
}

.sticker img {
    display: inline-block;
    vertical-align: middle; 
    width: 5vw;
    margin: 0 0.2em;
}

#sticker3 img {
    width: 9rem;
    margin:0;
}

#sticker5 img {
    width: 9rem;
    margin:0;
} 
/* galeria */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px);
    gap: 15px;
    max-width: 95vw;
    margin: auto;
    padding: 20px;
  }
  
.item {
    overflow: hidden;
    border-radius: 20px;
  }
  
.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Primera imagen alta en la izquierda (ocupa dos filas) */
.tall-left {
    grid-row: span 2;
    grid-column: 1;
}
  
  /* Última imagen alta en la derecha (ocupa dos filas) */
.tall-right {
    grid-row: span 2;
    grid-column: 4;
}