/* ======= Layout general ======= */
:root{
  --card-radius: 10px;
  --shadow: 0 8px 28px rgba(0,0,0,.12);
  --blue: #0d6efd;
  --blue-hover:#0b5ed7;
  --text:#2a2e35;
  --muted:#6b7280;
  --bg:#f3f4f6;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;background:var(--bg);color:var(--text)}
img{max-width:100%;display:block}

/* ======= Sección ======= */
.team-section{padding:40px 16px}
.team-container{max-width:1100px;margin:0 auto}
.team-title{
  text-align:center;
  font-size:28px;
  font-weight:700;
  margin:0 0 140px;
  color:#374151;
}

/* ======= Grid ======= */
.team-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
}

/* ======= Card ======= */
.team-card{
  position:relative;
  background:#fff;
  border-radius:var(--card-radius);
  box-shadow:var(--shadow);
  padding-top:70px; /* espacio para el avatar */
  overflow:visible;
  margin-bottom: 75px;
}

/* Avatar flotando */
.avatar-wrap{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;height:120px;
}
.avatar{
  width:120px;height:120px;border-radius:50%;
  object-fit:cover;
  border:6px solid #fff;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  background:#eee;
}

/* Contenido */
.card-body{padding:22px}
.name{
  text-align:center;
  font-size:18px;
  font-weight:700;
  margin:8px 0 8px;
  color:#374151;
}

.phone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#4b5563;
  font-size:15px;
  margin:8px 0 18px;
}
.phone i{
  font-size:18px;
  opacity:.85;
}

/* Botón azul */
.btn-view{
  display:block;
  width:100%;
  text-align:center;
  background:#a30000;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding:12px 16px;
  border-radius:8px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .08s ease, background .15s ease;
}
.btn-view:hover{ background:#222 }
.btn-view:active{ transform:translateY(1px) }

/* Hover suave de la tarjeta (opcional) */
.team-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  transition:.18s ease;
}

/* Responsivo fino */
@media (max-width:360px){
  .avatar-wrap{width:100px;height:100px}
  .avatar{width:100px;height:100px}
  .team-card{padding-top:58px}
}