/* ===== El Ojo Teatro — Staff (CSS completo, centrado infalible) ===== */

/* Paleta y tamaños base */
.eot-staff{
  --card:   #131a22;
  --title:  #7FE1D7;
  --text:   #C9D3DC;
  --muted:  #9ccbd0;
  --ring:   rgba(255,255,255,.18);
  --gap:    22px;
  --radius: 18px;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --shadow2:0 12px 28px rgba(0,0,0,.28);

  --colw:   300px;   /* ancho de card (sube a 320 si quieres) */
  --photo:  170px;   /* 180–200 si quieres foto más grande */

  max-width: 1200px;        /* ancho del bloque */
  margin: 0 auto;           /* centrado del bloque */
  padding: 0;
}

/* ===== Centrando sin depender del tema =====
   Hacemos que el contenedor sea un “centro” por texto
   y las tarjetas sean inline-block de ancho fijo.
*/
.eot-staff__grid{
  display: block !important;
  text-align: center !important;     /* <— clave: centrado de los hijos */
  margin: 0 auto;
  padding: 0;
  line-height: 0;                    /* evita espacios fantasma entre inline-block */
}

/* Tarjeta */
.eot-staff__card{
  display: inline-block !important;  /* <— clave */
  vertical-align: top !important;
  width: var(--colw) !important;
  max-width: var(--colw) !important;
  margin: 0 calc(var(--gap)/2) var(--gap) calc(var(--gap)/2); /* separaciones */
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 22px;
  text-align: center;
  line-height: 1.2;                  /* restaurar line-height para el texto interno */
  transition: transform .2s ease, box-shadow .2s ease;
}
.eot-staff__card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

/* Foto */
.eot-staff__photo{ margin: 6px 0 10px; line-height: 0; }
.eot-staff__avatar{
  width: var(--photo);
  height: var(--photo);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ring);
  display: inline-block;
  background:#0a0f14;
}
.eot-staff__avatar--ph{
  background: radial-gradient(circle at 30% 30%, #203040 0, #0b1218 60%, transparent 70%);
}

/* Tipografía */
.eot-staff__name{
  color: var(--title);
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: .2px;
  margin: 10px 0 8px;
}
.eot-staff__role{
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.eot-staff__bio{
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

/* ===== Responsive ===== */
/* 3 columnas centradas */
@media (max-width: 1250px){
  .eot-staff{ max-width: 980px; }      /* 3*300 + gaps */
}
/* 2 columnas centradas (y foto un pelito menor) */
@media (max-width: 1024px){
  .eot-staff{ max-width: 660px; }
  .eot-staff__avatar{ width:160px; height:160px; }
}
/* 1 columna centrada */
@media (max-width: 640px){
  .eot-staff{ max-width: 380px; }
  .eot-staff__card{
    width: 100% !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .eot-staff__name{ font-size: clamp(18px, 5vw, 24px); }
}

/* ===== Candados suaves contra Elementor/tema (sin tocar fuera del bloque) ===== */
.eot-staff .elementor-container,
.eot-staff .e-con { justify-content: center; }

/* Por si algún padre pone text-align:left a todo: */
.eot-staff{ text-align: initial; }