/* css/personalidades.css – Colores reforzados y animaciones */

/* Fuentes */
@font-face {
  font-family: 'AdobeCleanBold';
  src: url('/fonts/AdobeCleanBold.otf') format('opentype');
  font-weight: bold;
}
@font-face {
  font-family: 'AdobeCleanRegular';
  src: url('/fonts/AdobeCleanRegular.otf') format('opentype');
  font-weight: normal;
}

body {
  margin: 0;
  font-family: 'AdobeCleanRegular', sans-serif;
  color: #333;
}

/* Animaciones */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Título principal */
.p-title {
  text-align: center;
  font-family: 'AdobeCleanBold', sans-serif;
  font-size: 3rem;
  margin: 2rem 0;
  opacity: 0;
  animation: fadeInDown 1s ease-out both;
}

/* Cada grupo con clipping, fondo suave y animación */
.p-group {
  position: relative;
  padding: 5rem 1rem;
  overflow: hidden;
  clip-path: polygon(
    0   5%, 10% 0%, 90% 0%, 100% 5%,
    100% 95%, 90% 100%, 10% 100%, 0% 95%
  );
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease-out both;
}
.p-group:nth-of-type(1) { animation-delay: 0.2s; }
.p-group:nth-of-type(2) { animation-delay: 0.4s; }
.p-group:nth-of-type(3) { animation-delay: 0.6s; }
.p-group:nth-of-type(4) { animation-delay: 0.8s; }

/* Fondo tipográfico gigante */
.p-group::before {
  content: attr(data-title);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'AdobeCleanBold', sans-serif;
  font-size: 8rem;
  color: rgba(255,255,255,0.1);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
}

/* Encabezado de grupo – color reforzado */
.p-group h2 {
  position: relative;
  z-index: 1;
  font-family: 'AdobeCleanBold', sans-serif;
  font-size: 3rem;
  margin-bottom: 2rem;
  text-align: center;
  opacity: 0;
  animation: fadeInDown 0.8s ease-out both;
}
.group-analysts h2 { color: #6a1b9a; }          /* morado fuerte */
.group-diplomats h2 { color: #2e7d32; }         /* verde fuerte */
.group-sentinels h2 { color: #1565c0; }         /* azul fuerte */
.group-explorers h2 { color: #f9a825; }         /* amarillo fuerte */

/* Grid de tarjetas */
.p-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Tarjeta individual con animación */
.p-grid .p-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out both;
}
.p-grid .p-card:nth-child(1) { animation-delay: 1.0s; }
.p-grid .p-card:nth-child(2) { animation-delay: 1.1s; }
.p-grid .p-card:nth-child(3) { animation-delay: 1.2s; }
.p-grid .p-card:nth-child(4) { animation-delay: 1.3s; }

.p-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.p-card h3 {
  font-family: 'AdobeCleanBold', sans-serif;
  font-size: 1.25rem;
  margin-bottom: .5rem;
}
.p-code {
  display: block;
  font-family: 'AdobeCleanRegular', sans-serif;
  color: #555;
  margin-bottom: .75rem;
}
.p-card p {
  font-family: 'AdobeCleanRegular', sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}

/* Grupos con fondos muy suaves */
.group-analysts { background: rgba(106,27,154,0.05); }
.group-diplomats { background: rgba(46,125,50,0.05); }
.group-sentinels { background: rgba(21,101,192,0.05); }
.group-explorers { background: rgba(249,168,37,0.05); }

/* Responsive */
@media (max-width: 768px) {
  .p-title { font-size: 2rem; }
  .p-group { padding: 3rem 1rem; }
  .p-group::before { font-size: 5rem; }
  .p-group h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
  .p-grid .p-card { padding: 1rem; }
  .p-card h3 { font-size: 1.1rem; }
}