/* ==========================================================
   COMO TRABAJAMOS — flip box 3D con alternativa tactil
   ========================================================== */

/* ---------- CÓMO TRABAJAMOS (flip box 3D) ---------- */
.work{background:var(--navy); color:var(--paper);}
.work .section-head{border-top-color:var(--rule-light);}
.work .section-head p{color:rgba(246,243,236,0.68);}
.work .section-head h2{color:var(--paper);}
.work-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule-light);
  border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);
}
.flip{position:relative; perspective:1000px;}
.flip-inner{display:grid; min-height:266px;}
.flip-face{
  grid-area:1 / 1;
  padding:32px 30px;
  transition:transform var(--t-flip) var(--ease-flip);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transform-style:preserve-3d;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.flip-front{background:var(--navy); transform:rotateY(0deg);}
.flip-back{background:var(--navy-deep); transform:rotateY(-180deg); justify-content:center;}
.flip:hover .flip-front, .flip:focus-within .flip-front{transform:rotateY(180deg);}
.flip:hover .flip-back,  .flip:focus-within .flip-back{transform:rotateY(0deg);}
.flip .num{font-family:'Libre Baskerville',serif; font-style:italic; color:var(--accent); font-size:15px;}
.flip h3{color:var(--paper); font-size:18px; margin-top:14px; margin-bottom:12px;}
.flip p{color:rgba(246,243,236,0.68); font-size:14px; margin:0;}
.flip-front .flip-hint{
  margin-top:auto; padding-top:22px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(246,243,236,0.42); display:flex; align-items:center; gap:9px;
}
.flip-front .flip-hint::before{content:""; width:22px; height:1px; background:var(--brass);}
.flip-back .back-rule{width:34px; height:2px; background:var(--brass); margin-bottom:18px;}
.flip-back h3{margin-top:0;}
/* Sin puntero (táctil): se muestran las dos caras, sin volteo */
@media (hover:none){
  .flip-inner{display:block; min-height:0;}
  .flip-face{transform:none !important; padding:28px 26px; display:block;}
  .flip-front .flip-hint{display:none;}
  .flip-back{border-top:1px solid var(--rule-light); padding-top:22px;}
  .flip-back h3, .flip-back .back-rule{display:none;}
}
@media (max-width:780px){
  .work-steps{grid-template-columns:1fr;}
}