/* ============================================================
   /equipo — diseño «El Taller» (Sobre Nosotros · Equipo, opción B)
   Lenguaje visual del sitio: Poppins, bandas planas, barritas de
   color sobre títulos, esquinas rectas, botones terracota.
   ============================================================ */

.hlq {
  --hlq-terra: var(--color--orange-700, #b44f24);
  --hlq-copper: var(--color--orange-500, #c37b44);
  --hlq-cream: var(--color--tierra-400, #dabe98);
  --hlq-tierra50: var(--color--tierra-50, #f3ebe2);
  --hlq-gray50: var(--color--gray-50, #f1f0ef);
  --hlq-teal: var(--color--blue-300, #c7d5d2);
  --hlq-teal-d: var(--color--blue-500, #91a5a1);
  --hlq-ink: var(--color--gray-900, #232323);
  --hlq-ink-soft: var(--color--gray-700, #6f6862);
  --hlq-line: #e5e2df;
  font-family: Poppins, sans-serif;
  color: var(--hlq-ink);
  background: #fff;
}
.hlq h1, .hlq h2, .hlq h3 { font-family: Poppins, sans-serif; font-weight: 600; line-height: 1.2; margin: 0; }
.hlq p { margin: 0; }
.hlq img { max-width: 100%; display: block; }

.hlq-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
/* Cabecera y bloque de equipo acotados al mismo ancho que el resto del sitio (.l-container) */
.hlq-hero, .hlq-split { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.hlq-hero { margin-top: 40px; }
@media (max-width: 991px) {
  .hlq-container, .hlq-hero, .hlq-split { padding: 0 24px; }
}
.hlq-swatch { display: block; width: 46px; height: 11px; background: var(--hlq-terra); margin-bottom: 16px; }
.hlq-swatch--teal { background: var(--hlq-teal-d); }
.hlq-swatch--tierra { background: var(--hlq-cream); }

.hlq-btn {
  display: inline-block; background: var(--hlq-terra); color: #fff; text-decoration: none;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  padding: 14px 28px; transition: opacity .2s;
}
.hlq-btn:hover { opacity: .88; }
.hlq-btn--ghost { background: transparent; border: 1px solid var(--hlq-ink-soft); color: #e4e2e1; }

/* ============ Cabecera partida: grupal protagonista + banda teal ============ */
.hlq-hero { display: grid; grid-template-columns: 1.7fr 1fr; min-height: 440px; }
.hlq-hero-img { position: relative; background: var(--hlq-gray50); }
.hlq-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hlq-hero-txt {
  background: var(--hlq-teal); padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.hlq-hero-txt h1 { font-size: clamp(26px, 2.6vw, 38px); text-wrap: balance; }
.hlq-hero-txt p { margin-top: 14px; font-size: 15px; color: #3d4a47; line-height: 1.7; }

/* ============ Split: columna fija + desfile del equipo ============ */
.hlq-split { display: grid; grid-template-columns: 38% 1fr; align-items: start; }
.hlq-col { background: var(--hlq-tierra50); align-self: stretch; }
.hlq-col-inner { position: sticky; top: calc(var(--hlq-nav-h, 72px) + 0px); padding: 56px 44px; }

.hlq-acc { border: 0; }
.hlq-acc + .hlq-acc { margin-top: 34px; }
.hlq-acc summary { list-style: none; cursor: default; }
.hlq-acc summary::-webkit-details-marker { display: none; }
.hlq-acc summary h2 { font-size: 22px; display: block; }
.hlq-acc > p { margin-top: 12px; font-size: 14.5px; color: var(--hlq-ink-soft); line-height: 1.75; max-width: 44ch; }

.hlq-roster { background: var(--hlq-gray50); padding: 44px 40px; display: grid; gap: 26px; }
.hlq-roster-label { display: none; }

/* Tarjeta de persona (escritorio: horizontal alternada) */
.hlq-card {
  display: grid; grid-template-columns: 240px 1fr; background: #fff; overflow: hidden;
  min-height: 250px; box-shadow: 0 10px 26px -18px rgba(35, 35, 35, .35);
}
.hlq-card:nth-child(even) { grid-template-columns: 1fr 240px; }
.hlq-card:nth-child(even) .hlq-media { order: 2; }
.hlq-founder { box-shadow: inset 4px 0 0 var(--hlq-terra), 0 10px 26px -18px rgba(35, 35, 35, .35); }

.hlq-media { position: relative; overflow: hidden; min-height: 250px; }
.hlq-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.hlq-ph-alt { opacity: 0; }
.hlq-media.is-swapped .hlq-ph-alt, .hlq-card:hover .hlq-ph-alt { opacity: 1; }
.hlq-media.is-swapped .hlq-ph-base, .hlq-card:hover .hlq-ph-base { opacity: 0; }
.hlq-ph-empty { position: absolute; inset: 0; background: #e7e2d8; }
.hlq-ov { display: none; }

.hlq-body { padding: 28px 32px; align-self: center; }
.hlq-body h3 { font-size: 21px; }
.hlq-role {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hlq-terra); font-weight: 500; margin: 5px 0 12px;
}
.hlq-quote { font-size: 14px; color: var(--hlq-ink-soft); line-height: 1.7; font-style: italic; max-width: 46ch; }
.hlq-quote-strip { display: none; }

/* Separador de candids con rótulo centrado */
.hlq-inter { position: relative; overflow: hidden; height: 210px; }
.hlq-inter img { width: 100%; height: 100%; object-fit: cover; }
.hlq-inter-veil { position: absolute; inset: 0; background: rgba(25, 20, 16, .5); }
.hlq-inter-cap {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: #fff; font-size: 13px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 500; text-align: center; padding: 0 24px;
}
.hlq-inter-cap::before { content: ''; width: 40px; height: 9px; background: var(--hlq-terra); }

/* ============ Banda «El día a día» ============ */
.hlq-band { background: #fff; padding: 64px 0 72px; }
.hlq-band h2 { font-size: 28px; }
.hlq-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; grid-auto-flow: dense; gap: 12px; margin-top: 26px; }
.hlq-cell { overflow: hidden; position: relative; }
.hlq-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; cursor: zoom-in; }
.hlq-cell:hover img { transform: scale(1.05); }
.hlq-cell--tall { grid-row: span 2; }

/* ============ Cierre ============ */
.hlq-cta { background: var(--hlq-ink); color: #e4e2e1; padding: 64px 0 72px; }
.hlq-cta h2 { color: #fff; font-size: 30px; }
.hlq-cta p { margin-top: 12px; color: #b9b2a9; font-size: 15px; max-width: 56ch; line-height: 1.7; }
.hlq-cta-btns { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* ============================================================
   Móvil
   ============================================================ */
@media (max-width: 767px) {
  /* En móvil la cabecera y el equipo vuelven a ir de borde a borde */
  .hlq-hero, .hlq-split { padding: 0; }
  .hlq-hero { grid-template-columns: 1fr; min-height: 0; margin-top: 0; }
  .hlq-hero-img { height: 260px; position: relative; }
  .hlq-hero-txt { padding: 30px 24px 34px; }
  .hlq-hero-txt h1 { font-size: 24px; }

  .hlq-split { grid-template-columns: 1fr; }
  .hlq-col-inner { position: static; padding: 26px 20px 24px; }

  /* Capítulos como desplegables (plegados por defecto; equipo.js los abre en escritorio) */
  .hlq-acc { background: #fff; border: 1px solid var(--hlq-line); }
  .hlq-acc + .hlq-acc { margin-top: 12px; }
  .hlq-acc summary { cursor: pointer; padding: 16px 18px; position: relative; }
  .hlq-acc summary::after {
    content: '+'; position: absolute; right: 16px; top: 12px; font-size: 24px;
    color: var(--hlq-terra); font-weight: 500; transition: transform .3s;
  }
  .hlq-acc[open] summary::after { transform: rotate(45deg); }
  .hlq-acc summary .hlq-swatch { width: 36px; height: 9px; margin-bottom: 10px; }
  .hlq-acc summary h2 { font-size: 17px; padding-right: 30px; }
  .hlq-acc > p { padding: 0 18px 16px; margin-top: 0; font-size: 13px; }

  .hlq-roster { padding: 24px 18px 28px; gap: 18px; }
  .hlq-roster-label { display: block; padding: 4px 2px 2px; font-size: 19px; font-weight: 600; color: var(--hlq-ink); }
  .hlq-roster-label .hlq-swatch { width: 36px; height: 9px; margin-bottom: 10px; }

  /* Tarjeta móvil: foto grande con nombre superpuesto + frase debajo */
  .hlq-card, .hlq-card:nth-child(even) { display: block; min-height: 0; }
  .hlq-card:nth-child(even) .hlq-media { order: 0; }
  .hlq-founder { box-shadow: 0 10px 26px -18px rgba(35, 35, 35, .35); position: relative; }
  .hlq-founder::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hlq-terra); z-index: 2; }
  .hlq-media { min-height: 0; aspect-ratio: 4 / 3.1; }
  .hlq-media img { object-position: center 30%; }
  .hlq-body { display: none; }
  .hlq-ov {
    display: flex; position: absolute; inset: auto 0 0 0; padding: 34px 16px 13px;
    background: linear-gradient(180deg, rgba(25, 20, 16, 0), rgba(25, 20, 16, .78));
    align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .hlq-ov-name { color: #fff; font-weight: 600; font-size: 17px; line-height: 1.2; }
  .hlq-ov-role { color: #e8c9b4; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
  .hlq-quote-strip {
    display: block; background: #fff; padding: 11px 16px 13px; font-size: 13px;
    color: var(--hlq-ink-soft); font-style: italic; line-height: 1.55;
  }

  .hlq-inter { height: 160px; margin-inline: -18px; }
  .hlq-inter-cap { font-size: 11px; }

  .hlq-band { padding: 36px 0 40px; }
  .hlq-band h2 { font-size: 22px; }
  .hlq-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 8px; margin-top: 18px; }

  .hlq-cta { padding: 40px 0 46px; }
  .hlq-cta h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .hlq-media img, .hlq-cell img, .hlq-acc summary::after { transition: none; }
}

/* ============ Visor del mosaico: ampliación animada desde la casilla ============ */
.hlq-lb { position: fixed; inset: 0; z-index: 999; background: rgba(20, 16, 12, 0); transition: background .35s; cursor: zoom-out; }
.hlq-lb.on { background: rgba(20, 16, 12, .84); }
.hlq-lb-img { position: fixed; object-fit: cover; transition: left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { .hlq-lb, .hlq-lb-img { transition: none; } }