/*================================================================= SEC5 =================================================================*/

#sec5 {
  font-family: "Montserrat Alternates", serif;
}

#sec5 img {                                          /* Imágenes siempre adaptadas al contenedor */
  display: block; 
  max-width: 100%; 
  height: auto; 
}

#sec5 h1 {                                           /* Título con otra tipografía */
  font-family: "Nunito", sans-serif;
}


/* ----- CONTENEDOR DE CARTAS ----- */
#sec5 .card__container {
  display: grid;                                     /* Para crear filas y columnas con las cartas */
  grid-template-columns: repeat(4, 1fr);             /* 4 columnas en PC */
  gap: 1.5rem;                                       /* Separación entre tarjetas */
  max-width: 1200px;
  margin: 0 auto;                                    /* Centrado horizontal */
}


/* ----- CARTA ----- */

#sec5 .card__article {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  perspective: 1200px;                               /* Necesario para efecto 3D */
  transform-style: preserve-3d;                      /* Mantiene profundidad 3D */
  will-change: transform;                            /* Optimiza animación */
  transition: box-shadow 260ms ease;
}

/* wrapper que evita que el glare se salga */
#sec5 .tilt-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;                                  /* Corta el brillo dentro */
  border-radius: inherit;                            /* Igual que el que tenga la carta (su elemento padre) */
  transform-style: preserve-3d;
}

/* el glare debe estar DENTRO del wrapper */
.tilt-wrapper .reflejo-brillante {
  position: absolute;
  top: 50%; left: 50%;
  width: 180%; height: 180%;                         /* Mucho más grande para cubrir toda la carta */
  z-index: 50;
  pointer-events: none;                              /* No bloquea clicks */
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  background: radial-gradient(
    circle at center, 
    rgba(255,255,255,0.35), 
    rgba(255,255,255,0.18) 20%, 
    transparent 45%
  );
  opacity: 0;                                        /* Invisible hasta activar */
  mix-blend-mode: screen;                            /* Hace que el glare se mezcle con la tarjeta produciendo un efecto de luz realista, como si el brillo estuviera afectando al material de la tarjeta */
  filter: blur(22px);                                /* Suaviza brillo */
  transition: opacity 260ms ease, transform 260ms ease;
}


#sec5 .card__img {
  border-radius: inherit;
  transform-style: preserve-3d;
  backface-visibility: hidden;                       /* Oculta reverso en transformaciones, porque como la img ahora es como un elemento 3d, podria verse la parte de atras y ocasionar un glitch */
  transition: transform .4s;
}


/* Sombra inferior para efecto visual */
#sec5 .card__shadow {
  position: absolute;
  inset: 0;                                          /* Ocupa todo el espacio de la tarjeta */ /* Significa que top, right, bottom y left son 0 */
  background: linear-gradient(180deg, transparent 70%, #000 100%);
}

/* Carta se levanta en PC */
@media (hover: hover) and (pointer: fine) {
  #sec5 .card__article {
    transition: transform .35s ease, box-shadow .35s ease;
  }

  #sec5 .card__article:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,.28);
  }
}



/* ----- DATOS (nombre - profesion) ----- */

#sec5 .card__data {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  text-align: left;
}
#sec5 .card__name { 
  font-size: 1.5rem; 
  margin-bottom: .25rem; 
}

#sec5 .card__profession { 
  font-size: .813rem; 
}

/* ----- ICONO CLIP ----- */

#sec5 .card__clip {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: grid; place-items: center;                /* Centra ícono */

  background: linear-gradient(135deg, #7ED957, #c8e087);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); 
  color: #000;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform .4s ease;
  z-index: 10;
}

/* OCULTAR clip en PC */
@media (hover: hover) and (pointer: fine) {
  #sec5 .card__clip {
    display: none !important;
  }
}


/* ----- PANEL INFO ----- */

#sec5 .info {
  position: absolute;
  inset: 0;                                          /* Panel cubre toda la tarjeta */
  padding: 2rem 1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;


  background: hsla(0, 0%, 0%, .1);                 /* Negro transparente */
  backdrop-filter: blur(12px);                       /* Efecto de vidrio */
  -webkit-backdrop-filter: blur(12px);               /* NECESARIO para iPhone */

  clip-path: circle(0px at 88% 9%);                  /* Comienza cerrado */
  transition: clip-path .5s ease-in-out;             /* Apertura suave */
  z-index: 5;

  transform: translate3d(0,0,1px);                   /* ARREGLA EL BUG */
  backface-visibility: hidden;
  will-change: backdrop-filter, clip-path;           /* Fuerza a Safari a recomponer bien */
}

#sec5 .info__name { 
  font-size: 2rem; 
  margin-bottom: .5rem; 
}

#sec5 .info__description { 
  font-size: .813rem; 
  margin-bottom: 1rem; 
}

/* Permite que el texto no colapse al reducir tamaño */
#sec5 .info__name,
#sec5 .info__description {
  flex-shrink: 0;
  word-wrap: break-word;
}

/* Solo activar hover en dispositivos NO táctiles */
@media (hover: hover) and (pointer: fine) {
  #sec5 .info:hover,
  #sec5 .card__clip:hover ~ .info {
    clip-path: circle(100%);
  }
}

/* Abrir info al hacer hover en la carta (solo PC) */
@media (hover: hover) and (pointer: fine) {
  #sec5 .card__article:hover .info {
    clip-path: circle(120%);
    pointer-events: auto;                            /* Ya se puede hacer clic adentro */
  }
}


/* ----- REDES SOCIALES ----- */

#sec5 .info__social {
  margin-top: auto;
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: flex; gap: .5rem;
  justify-content: center;
}
#sec5 .info__link {
  background-color: rgba(200, 224, 135, 0.7);
  width: 2rem;
  height: 2rem;
  border-radius: .75rem;

  display: flex;
  align-items: center;      /* centrado vertical */
  justify-content: center;  /* centrado horizontal */

  font-size: 1.2rem;
  color: #000;
  transition: transform .4s;
}

#sec5 .info__link i {
  display: block;                                    /* fuerza al icono a ocupar solo su contenido */
  line-height: 1;
}




/* ============================================================ */

/* Hover solo en PC */
@media (hover: hover) and (pointer: fine) {
  #sec5 .info__link:hover { 
    transform: translateY(-.25rem); 
  }
}

/* Oculta el icono si está abierto por teclado o por clip */
@media (pointer: coarse) {
  #sec5 .card__article.open-by-keyboard .card__clip,
  #sec5 .card__article.show-info .card__clip {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
  }
}


/* ==================== PARA QUE FUNCIONE CON TAB ==================== */

/* Abrir .info cuando la carta tiene la clase (activación por teclado/JS) */
#sec5 .card__article.open-by-keyboard .info,
#sec5 .card__article.show-info .info {
  clip-path: circle(120%);
  pointer-events: auto;
}

/* ----------------------------------------------------------------------- */

@media (max-width: 1024px) {
  #sec5 .card__container {
    grid-template-columns: 1fr 1fr;                  /* 2 columnas */
    gap: 1rem;
    padding: 1.5rem;
  }

  #sec5 .card__clip {
    width: clamp(40px, 7vw, 80px);
    height: clamp(40px, 7vw, 80px);
    font-size: clamp(1.8rem, 3.8vw, 3.5rem);
  }

  #sec5 .card__name { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  #sec5 .card__profession { font-size: clamp(0.8rem, 2.2vw, 1rem); }

  #sec5 .info__name { font-size: clamp(2rem, 4vw, 3rem); }
  #sec5 .info__description { font-size: clamp(0.9rem, 2.5vw, 1.2rem); }

  #sec5 .info__social {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);                     /* Centra iconos */
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  #sec5 .info__link {
    width: clamp(40px, 6vw, 60px);
    height: clamp(40px, 6vw, 60px);
    font-size: clamp(1.2rem, 3.5vw, 2rem);
    border-radius: 0.6rem;
  }
}

@media (max-width: 768px) {
  #sec5 .card__container {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  #sec5 .info__name { font-size: clamp(1.8rem, 4vw, 2.5rem); }
  #sec5 .info__description { font-size: clamp(0.9rem, 3vw, 1.1rem); }

  #sec5 .card__clip {
    width: clamp(40px, 8vw, 70px);
    height: clamp(40px, 8vw, 70px);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }

  #sec5 .info__link {
    width: clamp(35px, 7vw, 55px);
    height: clamp(35px, 7vw, 55px);
  }
}

@media (max-width: 480px) {
  #sec5 .card__container {
    grid-template-columns: 1fr 1fr;
    padding: 1rem;
  }

  #sec5 .card__name { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }
  #sec5 .card__profession { font-size: clamp(0.7rem, 2.5vw, 1rem); }

  #sec5 .info__name { display: none; }               /* Oculta nombres para no saturar */
  #sec5 .info__description { font-size: clamp(0.8rem, 3vw, 1rem); }

  #sec5 .card__clip {
    width: clamp(35px, 9vw, 60px);
    height: clamp(35px, 9vw, 60px);
  }

  #sec5 .info__link {
    width: clamp(30px, 7vw, 50px);
    height: clamp(30px, 7vw, 50px);
    font-size: clamp(1rem, 3.2vw, 1.8rem);
  }
}

@media (max-width: 360px) {
  #sec5 h1 { display: none; }                        /* Oculta título para espacio */

  #sec5 .card__container {
    grid-template-columns: 1fr;
    margin-top: 3vw;
  }

  #sec5 .card__article {
    width: 80%;
    margin: 0 auto;
  }

  #sec5 .card__clip {
    width: clamp(30px, 10vw, 50px);
    height: clamp(30px, 10vw, 50px);
    font-size: clamp(1.2rem, 3.4vw, 2rem);
  }

  #sec5 .info__name { font-size: clamp(1rem, 3vw, 1.6rem); }
  #sec5 .info__description { font-size: clamp(0.8rem, 2.8vw, 1rem); }

  #sec5 .info__link {
    width: clamp(25px, 6vw, 45px);
    height: clamp(25px, 6vw, 45px);
    font-size: clamp(0.9rem, 2.8vw, 1.4rem);
  }
}

/* ----------- PANTALLAS ALTAS Y ESTRECHAS (Galaxy Z Fold / S8) ----------- */
@media screen and (max-width: 400px) and (min-height: 740px) {
  #sec5 h1 { display: none; }
 #sec5 .card__container {
    grid-template-columns: 1fr;
    margin-top: 3vw;
  }

  #sec5 .card__article {
    width: 50%;
    margin: 0 auto;
  }

  #sec5 .info__name { display: none; }
  #sec5 .info__description { font-size: clamp(0.75rem, 2.3vw, 0.9rem); }
  #sec5 .info__link {
    width: clamp(25px, 5.5vw, 40px);
    height: clamp(25px, 5.5vw, 40px);
    font-size: clamp(0.9rem, 2.8vw, 1.2rem);
  }
}