/* ===== SOLO PARA LA PÁGINA DE DIRECTORIO ===== */
:root { --easing-smooth: cubic-bezier(.22,.61,.36,1); }

.page-directorio main {
  margin: 40px auto 60px;
}

/* ===== Animación de entrada (igual a Nosotros) ===== */
@keyframes floatInUp{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}

/* ===== ENCABEZADO ===== */
.page-directorio .dir-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 20px;
  animation: floatInUp .6s ease both;
  animation-delay: .06s;
}
.page-directorio .dir-head h1{
  margin:0;
  font-size:clamp(26px,3vw,34px);
  font-weight:800;
  letter-spacing:-.3px;
  color:#1f2937;
}

/* ===== BARRA DE HERRAMIENTAS ===== */
.page-directorio .dir-tools{
  position:sticky; top:72px; z-index:5;
  display:flex; flex-wrap:wrap; gap:12px;
  background:#fff; border:1px solid #eee; border-radius:14px;
  padding:14px 18px; margin-bottom:28px; box-shadow:0 6px 16px rgba(0,0,0,.04);
  animation: floatInUp .6s ease both;
  animation-delay: .12s;
}
.page-directorio .dir-tools input[type="search"],
.page-directorio .dir-tools select{
  padding:12px 14px; border-radius:10px; border:1px solid #ddd; outline:none; font-size:15px;
  transition:border-color .25s, box-shadow .25s;
}
.page-directorio .dir-tools input:focus,
.page-directorio .dir-tools select:focus{
  border-color:#7a0f2b; box-shadow:0 0 0 3px rgba(122,15,43,.15);
}

/* ===== TARJETAS DEL DIRECTORIO ===== */
.page-directorio .dir-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:22px; margin-bottom:40px;
}

/* Tarjeta base con degradado dorado MUY suave */
.page-directorio .dir-card{
  background: linear-gradient(135deg, #f9f5e8 0%, #fefcf3 15%, #fff9e6 30%, #fffef8 50%, #fff9e6 70%, #fefcf3 85%, #f9f5e8 100%);
  border:1px solid #e8dcc0; 
  border-radius:14px;
  padding:22px 24px; 
  box-shadow:0 8px 20px rgba(212, 175, 55, 0.15);
  position:relative; overflow:hidden;
  animation: floatInUp .6s ease both;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Estilos específicos para el carrusel */
#directorio.dir-carousel .dir-card {
  min-height: 450px;
}

/* Stagger corto y ágil */
.page-directorio .dir-grid .dir-card:nth-child(1){animation-delay:.16s}
.page-directorio .dir-grid .dir-card:nth-child(2){animation-delay:.20s}
.page-directorio .dir-grid .dir-card:nth-child(3){animation-delay:.24s}
.page-directorio .dir-grid .dir-card:nth-child(4){animation-delay:.28s}
.page-directorio .dir-grid .dir-card:nth-child(5){animation-delay:.32s}
.page-directorio .dir-grid .dir-card:nth-child(6){animation-delay:.36s}
.page-directorio .dir-grid .dir-card:nth-child(7){animation-delay:.40s}
.page-directorio .dir-grid .dir-card:nth-child(8){animation-delay:.44s}
.page-directorio .dir-grid .dir-card:nth-child(9){animation-delay:.48s}

/* Hover: flotar suave y resaltar con más dorado */
.page-directorio .dir-card:hover{
  transform:translateY(-8px);
  background:linear-gradient(135deg, #f4e8c8 0%, #fdf6e3 20%, #fff8dc 40%, #fffef5 60%, #fff8dc 80%, #f4e8c8 100%);
  box-shadow:0 14px 28px rgba(212, 175, 55, 0.3);
  border-color:#d4af37;
}

/* ===== CHIP (siempre arriba, separado del nombre) ===== */
.page-directorio .dir-chip{
  display:block; width:fit-content;
  font-size:13px; font-weight:700; letter-spacing:.3px;
  color:#7a0f2b; background:rgba(122,15,43,.10);
  padding:6px 12px; border-radius:999px; margin-bottom:10px;
}

/* ===== NOMBRE ===== */
.page-directorio .dir-card h3{
  margin:0 0 8px; font-size:18px; font-weight:800; color:#111827;
  line-height:1.3; position:relative; text-decoration:none;
}

/* Línea roja solo al hover, cubriendo todo el nombre */
.page-directorio .dir-card h3::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:100%;
  background:linear-gradient(90deg,#7a0f2b,rgba(122,15,43,.35));
  border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease; opacity:0;
}
.page-directorio .dir-card:hover h3::after{ transform:scaleX(1); opacity:1; }

/* ===== PUESTO ===== */
.page-directorio .dir-card .puesto{
  font-size:15px; color:#555; line-height:1.5;
}

/* ===== CAJA DE CONTACTO ===== */
.page-directorio .dir-info{
  background:#fff; border:1px solid #eee; border-radius:16px;
  padding:22px 26px; box-shadow:0 8px 22px rgba(0,0,0,.05); margin-top:40px;
  animation: floatInUp .6s ease both; animation-delay:.40s;
}
.page-directorio .dir-info h3{
  font-size:19px; font-weight:800; color:#1f2937; margin-bottom:14px;
}

/* Íconos y texto */
.page-directorio .info-item{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; transition:transform .25s ease;
}
.page-directorio .info-item:hover{ transform:translateX(5px); }

.page-directorio .info-item i.icon{
  font-style:normal; font-size:20px; color:#fff; background:#7a0f2b;
  border-radius:10px; padding:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  transition:all .25s ease; box-shadow:0 2px 8px rgba(122,15,43,.2);
}
.page-directorio .info-item:hover i.icon{ transform:scale(1.1); background:#5e0b20; }

.page-directorio .info-item p{ margin:0; font-size:15px; color:#374151; line-height:1.5; }
.page-directorio .info-item strong{ color:#7a0f2b; }

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .page-directorio .dir-tools{ flex-direction:column; align-items:stretch; }
  .page-directorio .dir-grid{ grid-template-columns:1fr; }
  .page-directorio .info-item{ align-items:center; }
}