/* ===== Base (ajustada) ===== */
body{margin:0;font-family:Arial, sans-serif;background:#e6f0f8;color:#0f172a;text-align:center}
.wrap{max-width:1000px;margin:0 auto;padding:24px}

/* SUBIR todo bajo el logo */
.logo{max-width:240px;height:auto;margin:6px auto 0;display:block}
.tagline{font-size:18px;font-weight:bold;margin:2px 0 6px}
h1{font-size:26px;margin:4px 0 10px;font-weight:bold}

.navbar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}
a.btn{background:#0077b6;color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none;font-weight:bold}
a.btn.secondary{background:#00a896}
a.btn.muted{background:#94a3b8}

footer{font-size:14px;color:#334155;margin-top:20px;padding-bottom:18px}
footer strong{display:block;margin-bottom:4px;color:#0f172a}

/* Quitar “Paso 1 de …” si existiera */
.step{display:none !important}

/* ===== Tarjetas (grid + flip) ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  max-width:980px;
  margin:10px auto 18px;
  text-align:left;
}
.card{
  position:relative;
  height:clamp(200px,28vw,260px);
  aspect-ratio:3/2;
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  border:1px solid #cfe8f3;
  cursor:pointer;
  outline:none;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.card-face{
  position:absolute; inset:0; border-radius:16px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition:transform .55s ease;
  color:#0f172a;
}
/* Colores solicitados */
.card-front{display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;transform:rotateY(0deg);background:#A7D8F0;}
.card-front h3{font-size:18px;margin:0 8px;font-weight:700}
.card-back{background:#5BBCE4;padding:14px 16px;overflow:auto;transform:rotateY(180deg);}
.card-back p{margin:0;font-size:15px;line-height:1.6}

/* Estado abierto */
.card.is-open .card-front{transform:rotateY(180deg)}
.card.is-open .card-back{transform:rotateY(360deg)}

.hint{position:absolute;right:10px;bottom:10px;font-size:12px;color:#0f172a80}
.esc{position:absolute;left:10px;bottom:10px;font-size:12px;color:#0f172a80}

/* Íconos en los títulos */
.cards .card:nth-child(1) .card-front h3::before{content:"🧭 ";}
.cards .card:nth-child(2) .card-front h3::before{content:"🕒 ";}
.cards .card:nth-child(3) .card-front h3::before{content:"🧩 ";}
.cards .card:nth-child(4) .card-front h3::before{content:"🔐 ";}
.cards .card:nth-child(5) .card-front h3::before{content:"💱 ";}
.cards .card:nth-child(6) .card-front h3::before{content:"🛠️ ";}
.cards .card:nth-child(7) .card-front h3::before{content:"📝 ";}
.cards .card:nth-child(8) .card-front h3::before{content:"💼 ";} /* Honorarios */

/* Accesibilidad */
.card:focus-visible{box-shadow:0 0 0 3px rgba(14,165,233,.35)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card-face{transition:none}
  .card-front{transform:none}
  .card-back{display:none;transform:none;border-top:1px dashed #cfe8f3;border-radius:0 0 16px 16px}
  .card.is-open .card-back{display:block;margin-top:8px}
  .card{height:auto}
}
@media (max-width:480px){
  h1{font-size:24px}
  .cards{gap:16px}
  .card{height:clamp(210px,38vw,260px)}
}