/* GENERAL */
body.no-interaction {
  pointer-events: none;
}

.hidden {
  display: none !important;
  pointer-events: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

html, body {
  font-family: sans-serif;
  background-color: #f9fbff;
}

:root {
    /* Main colors */
    --yellow-rgb: 252, 226, 47;
    --blue-rgb: 36, 172, 250;
    --red-rgb: 255, 27, 28;
    --green-rgb: 125, 228, 42;
    --orange-rgb: 254, 145, 76;

    --yellow-shadow-rgb: 255, 210, 60;
    --blue-shadow-rgb: 50, 190, 255;
    --red-shadow-rgb: 255, 60, 70;
    --green-shadow-rgb: 37, 211, 102;
    --orange-shadow-rgb: 255, 170, 90;

    --accent-color: #000;
    --accent-color-rgb: 0, 0, 0;
    --accent-bg: white;

    --nav-bg: white;
    --nav-shadow: rgba(0, 0, 0, 0.1);
    --nav-text: rgb(var(--green-rgb));
    --nav-text2: rgb(var(--yellow-rgb));
    --nav-links-color: white;

    --nav-tiktok-bg: black;
    --nav-tiktok-shadow-rgba: white;

    --nav-ig-bg: #ff2d95;
    --nav-ig-border-size: 2px;
    --nav-ig-border-color: rgba(0, 0, 0, 0.5);
    --nav-ig-shadow-rgba: 255, 45, 149, 0.4;
    --nav-ig-shadow-hover-rgba: 255, 45, 149, 0.6;

    --nav-wsp-bg: #22cc60;
    --nav-wsp-border-color: rgba(0, 0, 0, 0.5);
    --nav-wsp-shadow-rgba: 37, 211, 102, 0.4;
    --nav-wsp-shadow-hover-rgba: 37, 211, 102, 0.6;
}

#splash-wrap {
  width: 100%;
  height: fit-content;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  z-index: 2;
}



.hero{
  display: flex;
  position: relative;
  justify-content: center;
  margin-top: 4rem;
  width: 100%;
  min-height: 150vh;
  height: auto;
}

.hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 2rem;
  padding: 2rem 3rem;
  gap: 1rem;
  height: fit-content;
  font-family: "Poppins", sans-serif;
}

.hero-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
} 

.hero-text p {
  font-size: 1.2rem;
  line-height: 1.5;
}

.container {
  position: absolute;
  width: 30vw;
  user-select: none;
  cursor: pointer;
  z-index: 1;
}

.container:hover {
  z-index: 5;
}

.container.active {
  z-index: 999;
  pointer-events: none;
}

.splash {
  position: relative;
}

.splash img {
  position: relative;
  overflow: hidden;
  width: 100%;
  cursor: pointer;
}

/* Hover */
.container:hover img {
  animation: squishPop 0.5s ease forwards;
}

/* Click */
.splash.active {
  transform: scale(20);
  transition: transform 1s ease;
}

.container.active {
  pointer-events: none;
}

.container.active span{
  opacity: 0;
}

.container span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "DynaPuff", cursive;
  color: white;
  font-size: 3rem;
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.container:hover span {
  opacity: 0.7;
  animation: squishPopSpan 0.5s ease forwards;
}


.red.container {
  top: 45%;
  left: 18%;
  transform: translate(-50%, -50%);
}

.yellow.container {
  top: 75%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.yellow.container span {
  font-size: 2rem;
}

.blue.container {
  width: 35vw;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blue.container span {
  top: 45%;
}

.orange.container {
  top: 75%;
  left: 70%;
  transform: translate(-50%, -50%);
}

.orange.container span {
  top: 55%;
  font-size: 2rem;
}

.green.container {
  top: 50%;
  left: 73%;
  transform: translate(-50%, -50%);
  rotate: 20deg;
}

.green.container span {
  top: 45%;
  rotate: -20deg;
}

/* =========================
   REVIEWS
========================= */

.reviews-section{

    width: min(1350px, 94%);

    margin:
        6rem auto 8rem;

    padding:
        3rem;

    border-radius:
        42px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.75)
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.06);

    overflow: hidden;
}

/* header */

.reviews-header{

    text-align:
        center;

    margin-bottom:
        3rem;
}

.reviews-kicker{

    display:inline-block;

    padding:
        .45rem 1rem;

    border-radius:
        999px;

    background:
        rgba(var(--yellow-rgb), .18);

    color:
        #c58f00;

    font-weight:
        700;

    font-family:
        "Poppins",
        sans-serif;

    margin-bottom:
        1rem;
}

.reviews-title{

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(2.3rem, 5vw, 4rem);

    line-height:
        1.1;

    margin-bottom:
        1rem;

    color:
        #222;
}

.reviews-subtitle{

    max-width:
        650px;

    margin:
        0 auto;

    font-size:
        1.05rem;

    line-height:
        1.7;

    color:
        #5d5d5d;

    font-family:
        "Poppins",
        sans-serif;
}

/* carousel */

.reviews-carousel{

    position: relative;

    display:flex;
    align-items:center;
    gap:1rem;
}

.reviews-track{

    display:flex;
    gap:1.5rem;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding:
        .5rem;
}

.reviews-track::-webkit-scrollbar{
    display:none;
}

/* cards */

.review-card{

    min-width:
        340px;

    max-width:
        340px;

    padding:
        1.7rem;

    border-radius:
        32px;

    background:
        white;

    box-shadow:
        0 12px 30px rgba(0,0,0,.06);

    transition:
        .25s ease;

    flex-shrink:0;
}

.review-card:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 38px rgba(0,0,0,.10);
}

/* top */

.review-top{

    display:flex;
    align-items:center;
    gap:1rem;

    margin-bottom:
        1rem;
}

.review-avatar{

    width:56px;
    height:56px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;

    font-size:1.2rem;

    color:white;

    background:
        linear-gradient(
            135deg,
            rgb(var(--blue-rgb)),
            rgb(var(--green-rgb))
        );

    flex-shrink:0;
}

.review-top h3{

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        1.05rem;

    margin-bottom:
        .15rem;
}

.review-avatar img{

    width:100%;
    height:100%;

    object-fit:
        cover;

    display:block;
}

/* stars */

.review-stars{

    color:
        #ffbf00;

    letter-spacing:
        2px;

    margin-bottom:
        1rem;

    font-size:
        1.1rem;
}

/* text */

.review-text{

    line-height:
        1.8;

    color:
        #444;

    font-family:
        "Poppins",
        sans-serif;
}

/* arrows */

.reviews-arrow{

    width:52px;
    height:52px;

    border:none;

    border-radius:50%;

    background:white;

    box-shadow:
        0 8px 22px rgba(0,0,0,.08);

    font-size:
        2rem;

    cursor:pointer;

    transition:
        .22s ease;

    flex-shrink:0;
}

.reviews-arrow:hover{

    transform:
        scale(1.08);

    background:
        rgb(var(--blue-rgb));

    color:white;
}

/* responsive */

@media (max-width:900px){

    .reviews-section{

        padding:
            2rem 1.2rem;
    }

    .review-card{

        min-width:
            85vw;

        max-width:
            85vw;
    }

    .reviews-arrow{

        display:none;
    }
}

/* 🔹 FOOTER */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 1rem;
  background: #222;
  color: white;
}

/* CSS for transition */
#transition-overlay {
  position: fixed;

  opacity: 1;

  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  pointer-events: none;

  z-index: 5000;

  transition: opacity 1s ease;
}

#transition-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Css for views */
#view-main {
  opacity: 1;
  transition: opacity 1s ease;
  z-index: 2;
}

#view-main.fade-out {
  opacity: 0;
  pointer-events: none;
}

#view-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    background-color: var(--accent-bg);

}

@media (max-width: 768px) {
 
    /* ==================================
       HERO
    ================================== */
 
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 5rem;
        min-height: auto;
        overflow: visible;
 
        --splash-gap: -40vw; /* ← distancia entre splashes
                                   negativo = se superponen
                                   positivo = más separación  */
    }
 
    /* ==================================
       HERO TEXT
    ================================== */
 
    .hero-text {
        position: relative;
        width: 100%;
        margin-top: 0;
        padding: 1.5rem 1.2rem;
        text-align: center;
        z-index: 2;
        margin-bottom: 13rem;
    }
 
    .hero-text h2 { font-size: 2rem; }
    .hero-text p  { font-size: 1rem; }
 
    /* ==================================
       CONTAINERS — reset compartido
    ================================== */
 
    .container {
        position: relative;
        width: 110vw;
        top:  auto;
        left: auto;
        transform: none;
        margin-bottom: var(--splash-gap);
    }
 
    /* ==================================
       ORDEN vertical
    ================================== */
 
    .red.container    { order: 1; } /* Globos      */
    .blue.container   { order: 2; } /* Disfraces   */
    .green.container  { order: 3; } /* Living      */
    .orange.container { order: 4; } /* Animaciones */
    .yellow.container { order: 5; } /* Nosotros    */
 
    /* ==================================
       GLOBOS (red)
    ================================== */
 
    .red.container {
        width: 110vw;
        top:  auto;
        left: 30vw;
    }
    .red.container span {
        top: calc(50% + 0.2rem);
        left: calc(50% + 0.5rem);
        font-size: 3rem;
    }
 
    /* ==================================
       DISFRACES (blue)
    ================================== */
 
    .blue.container {
        width: 110vw;
        top:  20vw;
        left: 80vw;
    }
    .blue.container span {
        top: calc(50% - 1rem);
        left: calc(50% - 1rem);
        font-size: 2.5rem;
    }
 
    /* ==================================
       LIVING (green)
    ================================== */
 
    .green.container {
        top:    43vw;
        left:   8vw;
        rotate: 20deg;
    }
    .green.container span {
        top:       calc(50% - 1rem);
        left: calc(50% - .3rem);
        font-size: 3rem;
        rotate:    -20deg;
    }
 
    /* ==================================
       ANIMACIONES (orange)
    ================================== */
 
    .orange.container {
        top:  40vw;
        left: 75vw;
        rotate: 5deg;
    }
    .orange.container span {
        top:       calc(50% + 1.4rem);
        left: calc(50% - .9rem);
        font-size: 1.9rem;
        rotate: -5deg;
    }
 
    /* ==================================
       NOSOTROS (yellow)
    ================================== */
 
    .yellow.container {
        width: 120vw;
        top:  65vw;
        left: 10vw;
        rotate: 15deg;
    }
    .yellow.container span {
        top: calc(50% - 1.4rem);
        left: calc(50% + 1rem);
        font-size: 1.9rem;
        rotate: -15deg;
    }
 


    /* Elimina el highlight azul al tocar */
    .container,
    .splash {
        -webkit-tap-highlight-color: transparent;
    }

    /* Cancela animación del splash al hover */
    .container:hover img {
        animation: none;
    }

    /* Cancela opacity y animación del span al hover */
    .container:hover span {
        opacity: 1;
        animation: none;
    }

    /* Fade out del splash */
    .container.active span {
        opacity: 0;
    }

    .container span {
        transition: opacity 0.5s ease;
    }

}

/* =========================
   DISABLE HOVER ON MOBILE
========================= */

@media (hover: none) {

  * {
    -webkit-tap-highlight-color: transparent;
  }

  .logo:hover,
  .logo:hover .logo-img img,
  .instagram-btn:hover,
  .tiktok-btn:hover,
  .whatsapp-btn:hover,
  .review-card:hover,
  .reviews-arrow:hover,
  .li-masonry-item:hover {

    transform: none !important;
    animation: none !important;
  }

  .instagram-btn:hover::before,
  .tiktok-btn:hover::before,
  .whatsapp-btn:hover::before {

    clip-path: inset(0% 50% 0% 50%) !important;
  }
}