.nav-orange {
    --nav-bg: rgb(var(--orange-rgb));
    --nav-shadow: rgba(0, 0, 0, 0.3);
    --nav-text: white;
    --nav-text2: white;

    --nav-tiktok-bg: rgb(var(--orange-rgb));
    --nav-tiktok-border-size: 2px;
    --nav-tiktok-border-color: rgba(255, 255, 255, 1);

    --nav-ig-bg: rgb(var(--orange-rgb));
    --nav-ig-border-color: rgba(255, 255, 255, 1);

    --nav-wsp-bg: rgb(var(--orange-rgb));
    --nav-wsp-border-color: rgba(255, 255, 255, 1);
    --nav-wsp-color: white;
}

/* Page */
#view-animaciones {
  --accent-color: rgb(var(--orange-rgb));
  --accent-color-rgb: var(--orange-rgb);
  --accent-bg: var(--orange-bg);
  --orange-dark: #d96f2c;

  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

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

  background:
    #fffaf7;

  color:
    #2a2a2a;

  overflow-x: hidden;
}

/* =========================
   HERO
========================= */

.an-hero{

    width:min(1250px, 94%);

    margin-top:6rem;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:4rem;

    align-items:center;
}

.an-hero-content{

    display:flex;
    flex-direction:column;

    gap:1.4rem;
}

.an-tag{

    width:fit-content;

    padding:.55rem 1rem;

    border-radius:999px;

    background:
        rgba(var(--orange-rgb), .14);

    color:
        var(--orange-dark);

    font-size:.9rem;
    font-weight:700;
}

.an-title{

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

    font-size:
        clamp(3rem, 7vw, 5.8rem);

    line-height:.95;

    color:
        var(--accent-color);
}

.an-subtitle{

    max-width:
        560px;

    font-size:
        1.05rem;

    line-height:
        1.9;

    color:
        #555;
}

.an-div-button{

    display:flex;

    margin-top:.5rem;
}

.an-btn {

    padding: 1rem 1.5rem;

    border-radius: 18px;

    text-decoration: none;

    font-weight: 700;

    transition: .25s ease;

    background:
        var(--accent-color);

    color: white;

    box-shadow:
        0 14px 35px rgba(var(--orange-rgb), .22);
}

.an-btn:hover{

    transform:
        translateY(-3px);
}


/* =========================
   HERO VISUAL
========================= */

.an-hero-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 1rem;
}

/* Que las fotos llenen su celda en lugar de usar altura fija */
.an-hero-visual .an-photo {
    height: auto;
}

/* google1 → col 1, filas 1-2 */
.an-hero-visual .an-photo:nth-child(1) {
    grid-row: span 2;
}

/* google4 → col 1, fila 3 (se fuerza para no ir a col 2) */
.an-hero-visual .an-photo:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

/* google2 → col 2, filas 2-3 */
.an-hero-visual .an-photo:nth-child(4) {
    grid-column: 2;
    grid-row: span 2;
}

.an-photo{

    border-radius:30px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(var(--orange-rgb), .18),
            rgba(var(--orange-rgb), .05)
        );

    box-shadow:
        0 18px 40px rgba(var(--orange-rgb), .12);
}

.an-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* =========================
   INFO STRIP
========================= */

.an-strip{

    width:min(1200px, 94%);

    margin-top:5rem;
    padding:2rem;

    border-radius:30px;

    display:grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:1.5rem;

    background:white;

    box-shadow:
        0 16px 40px rgba(var(--orange-rgb), .10);
}

.an-strip-item{

    padding:1rem;

    display:flex;
    flex-direction:column;

    gap:.8rem;
}

.an-strip-item h3{

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

    font-size:1.5rem;

    color:
        var(--orange-dark);
}

.an-strip-item p{

    line-height:1.8;

    color:#555;
}

/* =========================
   SIMPLE GALLERY
========================= */

.an-gallery{

    width:min(1200px, 94%);

    margin-top:5rem;
}

.an-gallery-header{

    margin-bottom:2rem;
}

.an-gallery-title{

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

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

    color:
        var(--accent-color);

    margin-bottom:.7rem;
}

.an-gallery-subtitle{

    color:#555;

    line-height:1.8;

    max-width:650px;
}

.an-gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:1.2rem;
}

.an-gallery-card{

    border-radius:28px;

    overflow:hidden;

    background:white;

    box-shadow:
        0 14px 35px rgba(var(--orange-rgb), .10);

    transition:.28s ease;
}

.an-gallery-card:hover{

    transform:
        translateY(-6px);
}

.an-gallery-card img{

    width:100%;
    height:100%;

    aspect-ratio:1/1.15;

    object-fit:cover;

    display:block;
}

/* =========================
   ANIMATORS BOX
========================= */

.an-join{

    width:min(950px, 92%);

    margin:
        5rem auto 6rem;

    padding:
        2.4rem;

    border-radius:
        32px;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            rgba(var(--orange-rgb), .20),
            rgba(var(--orange-rgb), .10)
        );

    box-shadow:
        0 18px 45px rgba(var(--orange-rgb), .10);
}

.an-join h2{

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

    font-size:
        clamp(2rem, 4vw, 3rem);

    color:
        var(--orange-dark);

    margin-bottom:1rem;
}

.an-join p{

    max-width:650px;

    margin:auto;

    line-height:1.9;

    color:#555;
}


.an-back-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor: pointer;

    margin-top:2rem;

    padding:
        .95rem 1.6rem;

    border-radius:
        18px;

    background:
        var(--orange-dark);

    color:
        white;

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

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 10px 25px rgba(var(--orange-rgb), .18);

    transition:
        transform .25s ease,
        opacity .25s ease,
        box-shadow .25s ease;
}

.an-back-button:hover{

    transform:
        translateY(-3px);

    opacity:
        .92;

    box-shadow:
        0 14px 30px rgba(var(--orange-rgb), .25);
}

/* ==================================
   MOBILE — VIEW ANIMACIONES
================================== */

@media (max-width: 768px) {

  /* =========================
     HERO
  ========================= */

  .an-hero {

    width: min(94%, 700px);

    margin-top: 7rem;

    grid-template-columns: 1fr;

    gap: 2rem;
  }

  .an-hero-content {

    gap: 1.2rem;

    text-align: center;

    align-items: center;
  }

  .an-tag {

    font-size: .8rem;

    padding: .5rem .9rem;
  }

  .an-title {

    font-size:
      clamp(2.8rem, 12vw, 4.5rem);

    line-height: .95;
  }

  .an-subtitle {

    font-size: 1rem;

    line-height: 1.8;

    max-width: 100%;
  }

  .an-div-button {

    width: 100%;

    justify-content: center;
  }

  .an-btn {

    width: 100%;

    text-align: center;

    padding: 1rem 1.2rem;

    border-radius: 16px;
  }

  /* =========================
     HERO VISUAL
  ========================= */

    .an-hero-visual {

    grid-template-columns:
        repeat(2, 1fr);

    grid-template-rows:
        repeat(3, 120px);

    gap: .8rem;
    }

    .an-photo {

    border-radius: 20px;

    height: 100%;
    }

    /* image 1 — tall izquierda */

    .an-hero-visual .an-photo:nth-child(1) {

    grid-column: 1;
    grid-row: 1 / 3;
    }

    /* image 3 — small arriba derecha */

    .an-hero-visual .an-photo:nth-child(2) {

    grid-column: 2;
    grid-row: 1 / 2;
    }

    /* image 4 — small abajo izquierda */

    .an-hero-visual .an-photo:nth-child(3) {

    grid-column: 1;
    grid-row: 3 / 4;
    }

    /* image 2 — tall derecha */

    .an-hero-visual .an-photo:nth-child(4) {

    grid-column: 2;
    grid-row: 2 / 4;
    }
  /* =========================
     STRIP
  ========================= */

  .an-strip {

    width: min(94%, 700px);

    margin-top: 3rem;

    padding: 1.2rem;

    grid-template-columns: 1fr;

    gap: 1rem;

    border-radius: 24px;
  }

  .an-strip-item {

    padding: .8rem;

    gap: .5rem;
  }

  .an-strip-item h3 {

    font-size: 1.2rem;
  }

  .an-strip-item p {

    font-size: .95rem;

    line-height: 1.7;
  }

  /* =========================
     GALLERY
  ========================= */

    .an-gallery-grid{

        grid-template-columns:1fr;
    }


  /* =========================
     JOIN SECTION
  ========================= */

  .an-join {

    width: min(94%, 700px);

    margin: 3rem auto 4rem;

    padding: 1.5rem 1.2rem;

    border-radius: 24px;
  }

  .an-join h2 {

    font-size:
      clamp(1.8rem, 9vw, 2.7rem);

    line-height: 1.05;
  }

  .an-join p {

    font-size: .96rem;

    line-height: 1.8;
  }

  .an-back-button {

    width: 100%;

    padding: 1rem 1.2rem;

    border-radius: 16px;
  }
}