/* ==========================================================================
   Tamar Realty — Sección de Equipo (autónomo para producción)
   Solo componentes de equipo + teaser del home. NO trae reset global,
   .container, header ni footer (los aporta el sitio / Bootstrap).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens de marca — autodefinidos por si el CSS global del sitio no los trae.
   Las familias mapean a las fuentes ya registradas en el sitio, con respaldos.
   -------------------------------------------------------------------------- */
.team-hero, .team-sec, .team-cta, .tz-b {
  --tr-navy:            #005279;
  --tr-navy-light:      #03679F;
  --tr-beige:           #D9B394;
  --tr-beige-dark:      #caa27f;
  --tr-bg-light:        #F4F4F4;
  --tr-border:          #e8e8e8;
  --tr-text-primary:    #222222;
  --tr-text-secondary:  #666666;
  --tr-text-muted:      #999999;
  --tr-radius:          12px;
  --tr-radius-sm:       8px;
  --tr-shadow-sm:       0 1px 4px rgba(0,0,0,.08);
  --tr-shadow-md:       0 4px 12px rgba(0,0,0,.10);
  --tr-shadow-hover:    0 8px 25px rgba(0,0,0,.15);
  --tr-transition:      0.25s ease;
  --tr-grad-navy:       linear-gradient(135deg, #03679F 0%, #005279 100%);
  --tr-serif:   'judson','Judson','Playfair Display',Georgia,serif;
  --tr-display: 'alexandria-tin','alexandria-thin','Alexandria','Inter',system-ui,sans-serif;
  --tr-body:    'montserrat','Montserrat','Inter',system-ui,sans-serif;
}

/* ---------- Hero ---------- */
.team-hero { position: relative; min-height: 52vh; display:flex; align-items:flex-end; overflow:hidden; background:#0c2a3a; }
.team-hero *, .team-sec *, .team-cta *, .tz-b * { box-sizing: border-box; }
.team-hero__bg { position:absolute; inset:0; background: url('/static/img/equipo/team-hero.jpg') center 32%/cover no-repeat; transform: scale(1.02); }
.team-hero__overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(0,40,60,.82) 0%, rgba(0,40,60,.30) 55%, rgba(0,40,60,.45) 100%); }
.team-hero__inner { position: relative; z-index:2; padding-bottom: 46px; }
.team-hero__eyebrow { font: 300 14px var(--tr-display); letter-spacing: 3px; text-transform: uppercase; color: var(--tr-beige); margin: 0 0 14px; }
.team-hero__title { font-family: var(--tr-serif); font-weight: 400; font-size: 62px; line-height: 1.05; color:#fff; margin: 0; }
.team-hero__title span { font-family: var(--tr-display); font-weight: 100; }
.team-hero__lead { font: 400 17px/1.7 var(--tr-body); color: rgba(255,255,255,.9); max-width: 620px; margin: 18px 0 0; }

/* ---------- Section scaffold ---------- */
.team-sec { padding: 64px 0; }
.team-sec--light { background: var(--tr-bg-light); }
.team-sec__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.team-sec__eyebrow { font: 500 12px var(--tr-body); text-transform: uppercase; letter-spacing: 2px; color: var(--tr-beige); margin: 0 0 14px; }
.team-sec__title { font-family: var(--tr-serif); font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--tr-navy); margin: 0; }
.team-sec__title span { font-family: var(--tr-display); font-weight: 100; }
.team-sec__rule { width: 60px; height: 3px; background: var(--tr-beige); margin: 16px auto 0; border:0; }
.team-sec__sub { font: 400 15px/1.7 var(--tr-body); color: var(--tr-text-secondary); margin: 18px auto 0; max-width: 620px; }

/* ---------- CTA banner ---------- */
.team-cta { background: var(--tr-grad-navy); color:#fff; text-align:center; padding: 70px 0; position: relative; overflow:hidden; }
.team-cta__palm { position:absolute; right:-30px; bottom:-30px; width: 260px; opacity: .08; }
.team-cta__inner { position:relative; z-index:2; max-width: 720px; margin: 0 auto; padding: 0 24px; }
.team-cta__title { font-family: var(--tr-serif); font-weight:400; font-size: 38px; line-height: 1.18; margin: 0 0 14px; }
.team-cta__title span { font-family: var(--tr-display); font-weight: 100; }
.team-cta__text { font: 400 16px/1.7 var(--tr-body); color: rgba(255,255,255,.88); margin: 0 0 30px; }
.team-cta__btn { display:inline-block; background: var(--tr-beige); color:#fff; padding: 14px 38px; border-radius: 8px; font: 500 13px var(--tr-body); text-transform: uppercase; letter-spacing: 1px; text-decoration:none; transition: background var(--tr-transition), transform var(--tr-transition); }
.team-cta__btn:hover { background: var(--tr-beige-dark); transform: translateY(-2px); color:#fff; }

/* ---------- Equipo de soporte (icono + nombre) ---------- */
.tech-row { display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tech-card { text-align:center; }
.tech-card__mono { width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%; background: var(--tr-navy); color: var(--tr-beige); display:grid; place-items:center; font-size: 34px; }
.tech-card__role { font: 500 12px var(--tr-body); text-transform: uppercase; letter-spacing: 1.2px; color: var(--tr-beige); margin: 0 0 4px; }
.tech-card__name { font: 400 18px var(--tr-serif); color: var(--tr-navy); margin: 0; }

/* ---------- Liderazgo (tarjetas) ---------- */
.p1-lead { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.p1-leadcard { display:grid; grid-template-columns: 200px 1fr; background:#fff; border:1px solid var(--tr-border); border-radius: var(--tr-radius); overflow:hidden; box-shadow: var(--tr-shadow-sm); transition: box-shadow var(--tr-transition), transform var(--tr-transition); }
.p1-leadcard:hover { box-shadow: var(--tr-shadow-hover); transform: translateY(-4px); }
.p1-leadcard__photo { position: relative; background: var(--tr-bg-light); }
.p1-leadcard__body { padding: 26px 26px 28px; }
.p1-leadcard__tag { font: 500 11px var(--tr-body); text-transform: uppercase; letter-spacing: 1.5px; color: var(--tr-beige); margin: 0 0 8px; }
.p1-leadcard__name { font: 400 27px var(--tr-serif); color: var(--tr-navy); margin: 0 0 4px; }
.p1-leadcard__role { font: 500 13px var(--tr-body); color: var(--tr-text-secondary); margin: 0 0 14px; }
.p1-leadcard__bio { font: 400 14px/1.65 var(--tr-body); color: var(--tr-text-primary); margin: 0; }

/* ---------- Asesores (cuadrícula) ---------- */
.p1-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.p1-card { background:#fff; border-radius: var(--tr-radius); overflow:hidden; box-shadow: var(--tr-shadow-sm); transition: transform var(--tr-transition), box-shadow var(--tr-transition); }
.p1-card:hover { transform: translateY(-4px); box-shadow: var(--tr-shadow-hover); }
.p1-card__photo { position: relative; aspect-ratio: 4/5; background: var(--tr-bg-light); }
.p1-card__photo::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,40,60,.30) 0%, transparent 42%); pointer-events:none; }
.p1-card__body { padding: 20px 22px 24px; }
.p1-card__tag { font: 500 11px var(--tr-body); text-transform: uppercase; letter-spacing: 1.3px; color: var(--tr-beige); margin: 0 0 7px; }
.p1-card__name { font: 400 24px var(--tr-serif); color: var(--tr-navy); margin: 0 0 12px; }
.p1-card__bio { font: 400 14px/1.65 var(--tr-body); color: var(--tr-text-secondary); margin: 0; }

/* ==========================================================================
   Teaser del Home  (bloque .tz-b — panel navy editorial con collage)
   ========================================================================== */
.tz-b { background: var(--tr-grad-navy); padding: 64px 0; overflow: hidden; }
.tz-b__inner { display:flex; align-items:center; gap: 56px; }
.tz-b__text { flex: 1 1 46%; }
.tz-eyebrow { font: 500 12px var(--tr-body); text-transform: uppercase; letter-spacing: 2.5px; color: var(--tr-beige); margin: 0 0 20px; }
.tz-b__title { font-family: var(--tr-serif); font-weight: 400; font-size: 38px; line-height: 1.35; color: #fff; margin: 0 0 32px; max-width: 540px; }
.tz-b__title span { font-family: var(--tr-display); font-weight: 100; color: var(--tr-beige); }
.tz-btn { display:inline-block; background: var(--tr-beige); color:#fff; padding: 15px 34px; border-radius: 8px; font: 500 12px var(--tr-body); text-transform: uppercase; letter-spacing: 1.5px; text-decoration:none; transition: background var(--tr-transition); }
.tz-btn:hover { background: var(--tr-beige-dark); color:#fff; }
.tz-b__collage { flex: 1 1 54%; display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items:center; }
.tz-b__collage img { width:100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; display:block; border-radius: 10px; border: 4px solid #fff; box-shadow: var(--tr-shadow-md); background: var(--tr-bg-light); }
.tz-b__collage img:nth-child(2), .tz-b__collage img:nth-child(5) { transform: translateY(-16px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .p1-lead { grid-template-columns: 1fr; }
  .p1-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-row { grid-template-columns: repeat(2, 1fr); }
  .team-hero__title { font-size: 46px; }
  .tz-b__inner { flex-direction: column; align-items: flex-start; gap: 44px; }
  .tz-b__title { font-size: 30px; }
  .tz-b__collage { width: 100%; }
}
@media (max-width: 620px) {
  .p1-grid { grid-template-columns: 1fr; }
  .p1-leadcard { grid-template-columns: 1fr; }
  .p1-leadcard__photo { aspect-ratio: 16/10; }
}