/* =========================================
   GRID CARDS · TREZE (FINAL REAL PRO)
========================================= */

.c-grid-cards{
  padding-block: clamp(60px, 8vw, 120px);
}


/* =========================================
   CONTAINER
========================================= */

.c-grid-cards__container{
  width: 100%;
  max-width: 1280px;

  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);

  box-sizing: border-box;
}


/* =========================================
   GRID DESKTOP (CENTRADO REAL)
========================================= */

.c-grid-cards__grid{
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 280px));
  gap: clamp(16px, 2vw, 28px);

  justify-content: center;
}


/* =========================================
   ITEM
========================================= */

.c-grid-cards__item{
  width: 100%;
  max-width: 280px;

  perspective: 1000px;

  opacity: 0;
  transform: translateY(40px);

  transition: 
    opacity .6s ease,
    transform .6s ease;
}

.c-grid-cards__item.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* =========================================
   INNER
========================================= */

.c-grid-cards__inner{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;

  aspect-ratio: 1.2 / 1;

  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;

  transform-style: preserve-3d;
  transition: transform .6s ease;
}

.c-grid-cards__inner:focus{
  outline: none;
}

.c-grid-cards__inner:focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}


/* =========================================
   EXPANDED FLIP
========================================= */

.c-grid-cards__inner[aria-expanded="true"]{
  transform: rotateY(180deg);
}


/* =========================================
   FRONT
========================================= */

.c-grid-cards__front{
  position: absolute;
  inset: 0;

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

  border-radius: 12px;

  background: linear-gradient(135deg, #201093 0%, #0A052D 100%);
  backface-visibility: hidden;
}

.c-grid-cards__front span{
  color: #fff;
  font-size: clamp(40px, 5vw, 64px);
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
}


/* =========================================
   BACK
========================================= */

.c-grid-cards__back {
  position: absolute;
  inset: 0;

  padding: clamp(16px, 2vw, 20px);

  border-radius: 12px;

  background: linear-gradient(135deg, #C98028 0%, #764306 100%);

  color: #0A052D;
  font-size: clamp(15px, 1.2vw, 15px);
  font-family: "Lexend Deca", sans-serif;
  line-height: 1.5;

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

  transform: rotateY(180deg);
  backface-visibility: hidden;
}


/* =========================================
   FOCUS VISIBLE
========================================= */

.c-grid-cards__inner:focus-visible{
  outline: 2px solid rgba(201, 128, 40, 0.55);
  outline-offset: 3px;
  border-radius: 12px;
}


/* =========================================
   HIGHLIGHT (13)
========================================= */

.c-grid-cards__item.is-highlight{
  grid-column: 1 / -1;
  justify-self: center;

  max-width: 320px;
}

.c-grid-cards__item.is-highlight .c-grid-cards__front{
  background: linear-gradient(135deg, #C98028 0%, #764306 100%);
}


/* =========================================
   FIX GLOBAL
========================================= */

.c-grid-cards,
.c-grid-cards *{
  min-width: 0;
  box-sizing: border-box;
}


/* =========================================
   TABLET (1024)
========================================= */

@media (max-width: 1024px){

  .c-grid-cards__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
  }

  .c-grid-cards__item{
    max-width: none;
  }

  .c-grid-cards__item.is-highlight{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 320px;
  }

}


/* =========================================
   TABLET (768) → AQUÍ ESTABA EL PROBLEMA
========================================= */

@media (max-width: 768px){

  .c-grid-cards__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-grid-cards__item{
    max-width: none;
  }

  /* 💥 FIX REAL DEL 13 */
  .c-grid-cards__item.is-highlight{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 280px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px){

  .c-grid-cards__grid{
    grid-template-columns: 1fr;
  }

  .c-grid-cards__item.is-highlight{
    max-width: 100%;
  }

}