/* =========================================================
   HERO TeamTpl (centrado correcto)
   ========================================================= */

.teamtpl-hero{
  background:#fff;
  border:0;
  border-radius:0;

  /* ✅ línea separadora */
  border-bottom:1px solid #e9edf2;

  width:100%;
  margin:0 0 18px 0;
  padding:0;
  box-sizing:border-box;
}

.site-content .ast-container{
  align-items:flex-start;
  justify-content:center;
}

/* ✅ Contenido centrado a 1200px */
.teamtpl-hero-inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 0px;
  box-sizing:border-box;
}

.teamtpl-hero-left{
  min-width:0;
}

/* Título izquierda + escudo derecha */
.teamtpl-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.teamtpl-title{
  margin:0;
  font-size:clamp(2rem, 2.2vw, 3rem);
  line-height:1;
  font-weight:900;
  letter-spacing:.6px;
  color:#0b2a44;
  text-transform:uppercase;

  max-width:720px;
  text-wrap:balance;

  flex:1;
  min-width:0;
}

.teamtpl-escudo{
  width:100px;
  height:100px;
  flex:0 0 100px;
  object-fit:contain;
  display:block;
}

/* Subtítulo */
.teamtpl-intro{
  margin:6px 0 0 0;
  padding:0;
  color:#223b53;
  font-size:1rem;
  line-height:1.35;
  max-width:900px;
}


/* ===========================
   ✅ MOBILE (mejor proporción)
   =========================== */
@media (max-width: 767.98px){

  .teamtpl-hero-inner{
    padding:14px 16px;
  }

  /* ✅ Mejor alineación y proporción */
  .teamtpl-hero-head{
    align-items:center;
    gap:0px;
  }

  /* ✅ Escudo MÁS GRANDE en móvil */
  .teamtpl-escudo{
    width:78px;
    height:78px;
    flex:0 0 78px;
  }

  /* ✅ Título MÁS CHICO en móvil */
  .teamtpl-title{
    font-size:clamp(1.55rem, 5.4vw, 1.95rem) !important;
    line-height:1.05;
    letter-spacing:.35px;
    max-width:100%;
  }

  /* ✅ Subtítulo MÁS CHICO en móvil */
  .teamtpl-intro{
    font-size:.75rem !important;
    line-height:1.30;
    margin-top:8px;
  }
}