/* ===== Tarjetas volteables (flip 3D al pasar el cursor) =====
   La caja crece automaticamente segun la cara (frente o reverso) que
   necesite mas alto, usando ambas caras superpuestas en la misma celda
   de grid. Asi nunca hace falta scroll, sin fijar una altura a ojo. */
.flip-card{perspective:1400px;outline:none;cursor:pointer}
.flip-card .flip-inner{position:relative;width:100%;display:grid;transition:transform .7s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
.flip-card:hover .flip-inner,.flip-card:focus-visible .flip-inner,.flip-card:focus-within .flip-inner,.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-card .flip-front,.flip-card .flip-back{grid-area:1/1;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;display:flex;flex-direction:column}
.flip-card .flip-back{transform:rotateY(180deg)}
.flip-hint{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;opacity:.6}

/* ===== Tarjetas con foto (Gestion de talentos y Nuestros servicios) =====
   Cuadricula 2x2 de tarjetas volteables. La cara visible es una foto con el
   titulo sobrepuesto; al hacer click aparece el texto completo.
   El titulo va delante porque cuatro fotos sin rotulo no dicen de que trata
   cada tarjeta. grid-auto-rows:1fr iguala el alto de las dos filas. */
.testi.talent .wrap,
.testi.svc .wrap{display:block}
.testi.talent h2,
.testi.svc h2{margin-bottom:38px}

.tcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;grid-auto-rows:1fr}
.tcards.cols-3{grid-template-columns:repeat(3,1fr)}
.tcards.cols-3 .tcard.flip-card{min-height:300px}
.tcards.cols-3 .tcard-cap{padding:22px 20px}
.tcards.cols-3 .tcard-cap h3{font-size:18px}
.tcards.cols-3 .tcard.flip-card .flip-back{padding:26px 24px}
.tcards.cols-3 .tcard.flip-card .flip-back .tcol p{font-size:14px;line-height:1.6}

.tcard.flip-card{display:block;border-radius:16px;min-height:340px}
.tcard.flip-card .flip-inner{height:100%}

.tcard.flip-card .flip-front{position:relative;padding:0;border-radius:16px;overflow:hidden;
  background:var(--purple);align-items:stretch;justify-content:flex-end}
.tcard.flip-card .flip-front img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.tcard-cap{position:relative;width:100%;padding:26px 24px;text-align:left;
  background:linear-gradient(to top,rgba(46,33,89,.94),rgba(46,33,89,.60) 62%,rgba(46,33,89,0))}
.tcard-cap h3{margin:0;font-size:20px;line-height:1.3;color:#fff}
.tcard-cap .flip-hint{margin-top:8px;color:#fff;opacity:.75}

.tcard.flip-card .flip-back{background:var(--purple);border-radius:16px;padding:30px 32px;
  justify-content:center}
.tcard.flip-card .flip-back .tcol p{color:var(--cream);font-size:14.5px;line-height:1.65;
  text-align:left;margin:0;max-width:none}
.tcard.flip-card .flip-back .tcol p + p{margin-top:12px}

@media(max-width:1050px){
  .tcards.cols-3{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .tcards,
  .tcards.cols-3{grid-template-columns:1fr;gap:14px;grid-auto-rows:auto}
  .tcard.flip-card{min-height:300px}
  .tcard-cap{padding:20px}
  .tcard-cap h3{font-size:18px}
  .tcard.flip-card .flip-back{padding:24px 22px}
  .tcard.flip-card .flip-back .tcol p{font-size:14px}
}

/* ===== Modo click puro (.flip-click): no voltea con hover ni foco, solo con click ===== */
.flip-card.flip-click:hover .flip-inner,
.flip-card.flip-click:focus .flip-inner,
.flip-card.flip-click:focus-visible .flip-inner,
.flip-card.flip-click:focus-within .flip-inner{transform:none}
.flip-card.flip-click.flipped .flip-inner{transform:rotateY(180deg)}
.flip-card.flip-click:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* ===== Tarjetas de Tecnologias y Canales (por-que-elegirnos) =====
   El fondo y el padding pasan del contenedor a cada cara, para que ambas
   se vean como la tarjeta original. La altura la fija la fila del grid. */
.tech-card.flip-card{background:none;padding:0;display:block;border-radius:16px;height:100%}
.tech-card.flip-card .flip-inner{height:100%}
.tech-card.flip-card .flip-front,
.tech-card.flip-card .flip-back{background:rgba(255,255,255,.14);border-radius:16px;padding:24px 22px;align-items:center;justify-content:center;text-align:center}
.tech-card.flip-card .flip-back .reveal{margin-top:0}

/* ===== Cuadro "Beneficios de Externalizar" volteable ===== */
.benefits .benefits-flip{max-width:900px;margin:0 auto 50px;border-radius:20px}
.benefits .benefits-flip .flip-front,
.benefits .benefits-flip .flip-back{background:var(--purple);color:var(--cream);border-radius:20px;padding:56px;align-items:center;justify-content:center;text-align:center}
.benefits .benefits-flip .flip-front h3{font-family:var(--body);font-weight:700;font-size:20px;line-height:1.6;color:var(--cream);margin:0}
.benefits .benefits-flip .flip-back p{font-size:20px;line-height:1.6;color:var(--cream);max-width:760px;margin:0}

@media(max-width:900px){
  .tech-card.flip-card{padding:0;min-height:150px}
  .tech-card.flip-card .flip-front,
  .tech-card.flip-card .flip-back{padding:18px 12px}
  .benefits .benefits-flip .flip-front,
  .benefits .benefits-flip .flip-back{padding:34px 26px}
  .benefits .benefits-flip .flip-front h3,
  .benefits .benefits-flip .flip-back p{font-size:17px}
}