/* ==========================================================================
   ARCHIVO:   css/3-camara.css
   PARTE:     Páginas de La Cámara (diseño "Ruta")
   CONTIENE:  pestañas, quiénes somos, misión y visión, valores,
              Junta Directiva y servicios
   LO USAN:   las cinco páginas de la carpeta camara/
   ORDEN:     después de 2-estructura.css
   ========================================================================== */

/* ---------- Pestañas: las cinco páginas de La Cámara ----------
   Una barra de vidrio con píldoras. La página abierta lleva aria-current="page"
   en el HTML y se ve encendida. */
.pestanas {
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.pestanas__lista {
  display: inline-flex;
  max-width: 100%;
  gap: 0.25rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 999px;
  background: rgba(8, 20, 47, 0.7);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.pestanas__lista::-webkit-scrollbar {
  display: none;
}
.pestanas__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: background-color 200ms var(--salida), color 200ms var(--salida), box-shadow 200ms var(--salida);
}
.pestanas__lista a[aria-current="page"] {
  background: linear-gradient(120deg, var(--azul), #7fe6fa);
  color: var(--sobre-seleccion);
  font-weight: 600;
  box-shadow: 0 6px 22px -6px rgba(61, 214, 245, 0.7);
}
.pestanas__lista a:focus-visible {
  outline-offset: -3px;
}
@media (hover: hover) and (pointer: fine) {
  .pestanas__lista a:not([aria-current="page"]):hover {
    background: rgba(150, 190, 255, 0.1);
    color: var(--tinta);
  }
}
@media (max-width: 40rem) {
  .pestanas__lista {
    display: flex;
    border-radius: 16px;
  }
}

/* Cuerpo de cada página */
.camara-pagina {
  padding-bottom: var(--espacio-seccion);
}

/* ---------- Luz que sigue al puntero (la activa js/componentes/ruta.js) ----------
   En los paneles con bisel, la luz se suma al fondo y al filo. */
.luz.bisel::after {
  background:
    radial-gradient(22rem circle at var(--x, -40rem) var(--y, -40rem), rgba(61, 214, 245, 0.13), transparent 60%),
    var(--panel);
}
.luz.bisel::before {
  background:
    radial-gradient(14rem circle at var(--x, -40rem) var(--y, -40rem), rgba(61, 214, 245, 0.9), transparent 60%),
    var(--linea-fuerte);
}

/* Las tarjetas aparecen escalonadas al cargar la página */
.js .mision__bloque,
.js .valores li,
.js .servicio,
.js .somos > * {
  animation: aparecer-panel 700ms var(--salida) both;
}
.js .mision__bloque:nth-child(2),
.js .valores li:nth-child(2),
.js .servicio:nth-child(2),
.js .somos > *:nth-child(2) { animation-delay: 90ms; }
.js .valores li:nth-child(3),
.js .servicio:nth-child(3) { animation-delay: 180ms; }
.js .valores li:nth-child(4) { animation-delay: 270ms; }
.js .valores li:nth-child(5) { animation-delay: 360ms; }
.js .valores li:nth-child(6) { animation-delay: 450ms; }
.js .valores li:nth-child(7) { animation-delay: 540ms; }
.js .valores li:nth-child(8) { animation-delay: 630ms; }
@keyframes aparecer-panel {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
}

/* ---------- Quiénes somos ---------- */
.somos {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.camara__lema {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.13rem, 0.7rem + 1.56vw, 1.87rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--tinta);
}
.camara__lema strong {
  font-weight: 600;
}
.camara__dato {
  margin-top: 1.75rem;
  max-width: 34rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--azul);
  font-size: var(--paso-1);
  line-height: 1.55;
  color: var(--tinta-suave);
}
.somos .camara__hueco,
.somos .camara__foto {
  margin-top: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--linea-fuerte), 0 30px 60px -30px rgba(61, 214, 245, 0.5);
}
@media (max-width: 52rem) {
  .somos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Misión y visión ---------- */
.mision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.25rem;
}
.mision__bloque {
  --bisel: 28px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 19rem;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}
.mision__bloque h2 {
  font-size: clamp(1.48rem, 0.94rem + 1.87vw, 2.34rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mision__marca {
  width: 3.5rem;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--rojo), transparent);
}
.mision__bloque:nth-child(2) .mision__marca {
  background: linear-gradient(90deg, var(--azul), transparent);
}
.mision__bloque p {
  margin-top: auto;
  font-size: var(--paso-1);
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ---------- Valores ---------- */
.valores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
  counter-reset: valor;
}
.valores li {
  --bisel: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 10rem;
  padding: 1.15rem 1.25rem 1.35rem;
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  counter-increment: valor;
  transition: transform 260ms var(--salida);
}
.valores li::marker {
  content: none;
}
/* El número grande de contorno: los valores son ocho, numerados del 01 al 08 */
.valores__numero {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--azul);
}
@media (forced-colors: active) {
  .valores__numero {
    color: CanvasText;
    -webkit-text-stroke: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .valores li:hover {
    transform: translateY(-4px);
  }
  .valores li:hover .valores__numero {
    color: var(--azul);
  }
}

/* ---------- Servicios ---------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}
.servicio {
  --bisel: 22px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 15rem;
  padding: 1.75rem 1.6rem 1.9rem;
  transition: transform 260ms var(--salida);
}
.servicio svg {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: auto;
  padding: 0.6rem;
  border-radius: 14px;
  background: rgba(61, 214, 245, 0.1);
  color: var(--azul-tinta);
  box-shadow: inset 0 0 0 1px rgba(61, 214, 245, 0.35);
}
.servicio h2 {
  margin-top: 1.25rem;
  font-size: var(--paso-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.servicio p {
  color: var(--tinta-suave);
}
@media (hover: hover) and (pointer: fine) {
  .servicio:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .mision__bloque,
  .js .valores li,
  .js .servicio,
  .js .somos > * {
    animation: none;
  }
  .valores li,
  .servicio {
    transition: none;
  }
}

/* ---------- Junta Directiva ----------
   Pirámide de tarjetas: 1 persona, luego 2, luego 3… La arma js/componentes/junta.js
   con los datos de js/datos/junta.js.
   Cada tarjeta es clara, con el retrato redondo asomado por arriba: la foto de
   la persona o, mientras no haya foto, sus iniciales. Una línea central une las filas. */
.junta {
  --retrato: 6rem;          /* diámetro del retrato */
  --junta-libre: 1.75rem;   /* espacio entre una fila y los retratos de la siguiente */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--junta-libre);
}
.junta__fila {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
/* Línea que baja de una fila a la siguiente, con un rombo en medio */
.junta__fila + .junta__fila::before,
.junta__fila + .junta__fila::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
}
.junta__fila + .junta__fila::before {
  top: calc(var(--junta-libre) * -1);
  width: 1px;
  height: var(--junta-libre);
  background: var(--linea-fuerte);
}
.junta__fila + .junta__fila::after {
  top: calc(var(--junta-libre) / -2 - 4px);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--azul);
  transform: rotate(45deg);
}
.junta__fila:nth-child(2)::after {
  background: var(--rojo);
}

/* Tarjeta de una persona: el retrato sobresale la mitad por arriba */
.miembro {
  --bisel: 16px;
  position: relative;
  display: flex;
  flex: 0 1 17.5rem;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin-top: calc(var(--retrato) / 2);
  padding: calc(var(--retrato) / 2 + 0.9rem) 1.25rem 1.3rem;
  text-align: center;
}
.miembro__numero {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  font-family: var(--fuente-titulo);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
}
/* Retrato redondo con dos aros, como el sello del logotipo: un aro azul pegado
   a la foto y, separado por un filo claro, otro aro fino alrededor */
.miembro__retrato {
  position: absolute;
  top: calc(var(--retrato) / -2);
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--retrato);
  height: var(--retrato);
  margin-left: calc(var(--retrato) / -2);
  padding: 3px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 5px var(--fondo), 0 0 0 6px var(--linea-fuerte);
  transition: background-color 200ms var(--salida);
}
.miembro__iniciales,
.miembro__foto {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.miembro__iniciales {
  display: grid;
  place-items: center;
  background: var(--panel-alto);
  font-family: var(--fuente-titulo);
  font-size: calc(var(--retrato) * 0.3);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tinta);
}
.miembro__foto {
  object-fit: cover;
  background: var(--panel-alto);
}
.miembro__texto {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.miembro__cargo {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--azul-tinta);
}
.miembro__nombre {
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
/* Pequeña marca roja bajo el nombre */
.miembro__texto::after {
  content: "";
  align-self: center;
  width: 1.5rem;
  height: 2px;
  margin-top: 0.45rem;
  background: var(--rojo);
}

/* Descripción: lo que hace cada persona, en dos o tres líneas cortas */
.miembro__descripcion {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}
/* Redes: pastillas con el nombre de la red y la cuenta. Van al pie de la
   tarjeta, para que en una misma fila queden a la misma altura. */
.miembro__redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 1rem 0 0;
  list-style: none;
}
.miembro__red {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: 0.74rem;
  line-height: 1.2;
  max-width: 100%;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 160ms var(--salida), background-color 160ms var(--salida);
}
/* El nombre de la red nunca se corta; si la cuenta es muy larga, es ella la que baja de línea */
.miembro__red-nombre {
  flex: none;
  font-weight: 600;
  color: var(--azul-tinta);
}
.miembro__red-cuenta {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Con logo oficial: el logo reemplaza al nombre de la red.
   Reglas de Meta que se respetan aquí: tamaño mínimo de 29 px para Instagram,
   espacio libre alrededor del logo y nada de sombras ni efectos. */
.miembro__red-logo {
  display: none;
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.miembro__red--logo {
  gap: 0.6rem;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
}
.miembro__red--logo .miembro__red-logo {
  display: block;
}
.miembro__red--logo .miembro__red-nombre {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .miembro__red:hover {
    border-color: var(--azul);
    background: var(--panel-alto);
  }
}

/* La punta de la pirámide: retrato más grande, con el aro de las dos banderas */
.miembro--principal {
  --retrato: 8.5rem;
  flex-basis: 24rem;
  padding-bottom: 1.6rem;
}
.miembro--principal .miembro__retrato {
  padding: 4px;
  background: linear-gradient(90deg, var(--ca-rojo) 0 50%, var(--hn-azul) 50% 100%);
}
.miembro--principal .miembro__nombre {
  font-size: 1.35rem;
}
.miembro--principal .miembro__cargo {
  font-size: 0.86rem;
}
.miembro--principal .miembro__texto::after {
  width: 3rem;
  background: linear-gradient(90deg, var(--ca-rojo) 0 50%, var(--hn-azul) 50% 100%);
}

@media (hover: hover) and (pointer: fine) {
  .miembro:hover::before {
    background: var(--azul);
  }
  .miembro:not(.miembro--principal):hover .miembro__retrato {
    background: var(--rojo);
  }
}

/* Entrada: cada fila aparece un momento después de la anterior, y dentro de la
   fila, cada tarjeta un momento después de la de su izquierda. Ocurre una vez. */
.js .junta .miembro {
  transition: opacity 380ms var(--salida), transform 380ms var(--salida);
  transition-delay: calc(var(--fila, 0) * 110ms + var(--columna, 0) * 45ms);
}
.js .junta:not(.junta--visible) .miembro {
  opacity: 0;
  transform: translateY(14px);
}
.junta__fila:nth-child(2) { --fila: 1; }
.junta__fila:nth-child(3) { --fila: 2; }
.junta__fila:nth-child(4) { --fila: 3; }
.junta__fila:nth-child(5) { --fila: 4; }
.junta__fila:nth-child(n + 6) { --fila: 5; }
.miembro:nth-child(2) { --columna: 1; }
.miembro:nth-child(3) { --columna: 2; }
.miembro:nth-child(4) { --columna: 3; }
.miembro:nth-child(5) { --columna: 4; }
.miembro:nth-child(n + 6) { --columna: 5; }

/* En pantallas anchas cada fila queda en una sola línea: se ve la pirámide */
@media (min-width: 62rem) {
  .junta__fila {
    flex-wrap: nowrap;
  }
}
/* En el teléfono va una tarjeta por línea */
@media (max-width: 40rem) {
  .junta {
    --retrato: 4.75rem;
    --junta-libre: 1.4rem;
  }
  .junta__fila {
    gap: 0.75rem;
  }
  /* Con descripción, cada tarjeta necesita el ancho completo para leerse bien */
  .miembro {
    flex: 0 1 100%;
    padding-inline: 1rem;
  }
  .miembro__nombre {
    font-size: 0.9rem;
  }
  .miembro__cargo {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
  .miembro--principal {
    --retrato: 6.5rem;
    flex-basis: 100%;
  }
  .miembro--principal .miembro__nombre {
    font-size: 1.2rem;
  }
}

/* Foto de la Cámara: hueco hasta que se escriba su ruta en js/configuracion.js */
.camara__hueco,
.camara__foto {
  height: auto;
  margin-top: 2rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radio);
}
.camara__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Diseño "Ruta": aro de luz que gira en los retratos de la Junta ---------- */
.miembro__retrato {
  background: conic-gradient(from var(--giro), var(--azul), var(--violeta, #8b7bff), var(--rojo), var(--azul));
  animation: girar-borde 6s linear infinite;
}
.miembro:nth-child(2n) .miembro__retrato {
  animation-duration: 7.5s;
  animation-direction: reverse;
}
@media (prefers-reduced-motion: reduce) {
  .miembro__retrato {
    animation: none;
  }
}