/* ================================================================
   Wireframe low-fidelity · Dr. Joel Marcelino · MM Agency
   Estilo compartido por TODAS las páginas → el menú es idéntico.
   ================================================================ */
:root{
  --ink:#3A3A40; --muted:#8A8A90; --line:#D4D4D9; --line2:#C7C7CD;
  --paper:#FFFFFF; --alt:#F4F4F6; --fill:#ECECEE; --dark:#3A3A40;
  --fb:'Inter',sans-serif; --fm:'DM Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#c9c9cd;color:var(--ink);font-family:var(--fb);line-height:1.5}
.page{max-width:1120px;margin:0 auto;background:var(--paper);box-shadow:0 0 40px rgba(0,0,0,.22);min-height:100vh}

/* ---- barra de estado wireframe (arriba del todo) ---- */
.wfbar{background:#2f2f34;color:#d6d6db;padding:9px 30px;font-family:var(--fm);font-size:11px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;letter-spacing:.03em}
.wfbar a{color:#fff;text-decoration:none;border-bottom:1px dotted #888}

/* ---- MENÚ (idéntico en todas las páginas) ---- */
.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-bottom:1px solid var(--line2);padding:12px 30px}
.nlogo{font-family:var(--fm);font-size:12px;color:#5c5c63;background:#EDEDF0;border:1px dashed var(--line2);border-radius:5px;padding:7px 13px;text-decoration:none}
.nlinks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nlinks a{font-family:var(--fm);font-size:12px;color:#5c5c63;text-decoration:none;background:#EDEDF0;border:1px dashed var(--line2);border-radius:5px;padding:6px 10px}
.nlinks a.active{background:#3a3a40;color:#fff;border-style:solid;border-color:#3a3a40}
.nlinks a.nbtn{background:#3a3a40;color:#fff;border:1.4px solid #3a3a40;border-radius:7px;font-weight:600}

/* ---- secciones ---- */
.sec{padding:28px 40px;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--alt)}
.tag{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.tag .n{background:var(--dark);color:#fff;font-family:var(--fm);font-size:11px;padding:3px 9px;border-radius:5px}
.tag .nm{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#55555b}
.tag .from{margin-left:auto;font-family:var(--fm);font-size:10px;color:var(--muted);background:#e8e8ec;border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.obj{font-size:12.5px;color:var(--muted);font-style:italic;border-left:2px solid var(--line2);padding-left:10px;margin-bottom:16px;max-width:780px}

/* ---- primitivas ---- */
.img{position:relative;background:var(--fill);border:1px solid var(--line2);border-radius:4px;
  background-image:linear-gradient(to top right,transparent 49.4%,var(--line2) 49.4%,var(--line2) 50.6%,transparent 50.6%),linear-gradient(to bottom right,transparent 49.4%,var(--line2) 49.4%,var(--line2) 50.6%,transparent 50.6%);
  display:flex;align-items:center;justify-content:center;min-height:80px;padding:8px}
.img span{background:var(--fill);padding:3px 9px;font-family:var(--fm);font-size:10.5px;color:#83838a;text-align:center;line-height:1.4}
.tl{height:9px;background:#E4E4E8;border-radius:4px;margin:7px 0}
.tl.s{width:55%}.tl.m{width:80%}.tl.l{width:95%}
.slot{font-family:var(--fm);font-size:12px;color:#5c5c63;background:#EDEDF0;border:1px dashed var(--line2);border-radius:5px;padding:6px 10px;display:inline-block;margin:3px 0}
.slot.h{font-size:14px;font-weight:500;color:#3a3a40}
.data{font-family:var(--fm);font-size:10.5px;color:#77777e;background:#EDEDF0;border:1px solid var(--line2);border-radius:4px;padding:1px 6px}
.btn{display:inline-flex;align-items:center;gap:7px;border:1.4px solid var(--dark);border-radius:7px;padding:10px 18px;font-size:12.5px;font-weight:600;color:var(--dark);background:#fff;text-decoration:none}
.btn.pri{background:var(--dark);color:#fff}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#55555b;background:#EDEDF0;border:1px solid var(--line);border-radius:20px;padding:5px 11px;margin:4px 6px 0 0;font-family:var(--fm)}
.field{background:#fff;border:1px solid var(--line2);border-radius:6px;padding:11px 12px;font-family:var(--fm);font-size:12px;color:#77777e;margin-bottom:10px}
.fq{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-family:var(--fm);font-size:12px;color:#55555b;display:flex;justify-content:space-between;margin-bottom:8px}

.grid{display:grid;gap:14px}.g5{grid-template-columns:repeat(5,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:13px}
.sec.alt .card{background:#fff}
.center{text-align:center}.center .tag{justify-content:center}.center .obj{margin:0 auto 16px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{background:#fff;border:1px solid var(--line);border-radius:8px;padding:13px}
.step .n{width:24px;height:24px;border-radius:50%;background:var(--dark);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:8px}

/* ---- FOOTER (idéntico en todas) ---- */
.footwire{background:#e4e4e8;border-top:1px solid var(--line2);padding:26px 40px}
.footwire .fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footwire h4{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#66666d;margin-bottom:10px}
.footwire .tl{background:#d3d3d8}

/* ---- botones flotantes fijos: WhatsApp + Agenda (2 caminos siempre visibles) ---- */
.fabwrap{position:fixed;right:24px;bottom:22px;z-index:30;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab{display:inline-flex;align-items:center;gap:7px;border:1.4px solid var(--dark);background:#fff;color:var(--dark);border-radius:30px;padding:10px 16px;font-weight:600;font-size:12px;font-family:var(--fm);text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.14)}
.fab .ic{width:16px;height:16px;border:1.4px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;line-height:1}
.fab.pri{background:var(--dark);color:#fff;border-color:var(--dark)}

/* ================= ÍNDICE ================= */
.idxhero{padding:44px 40px 26px;text-align:center;border-bottom:1px solid var(--line)}
.idxhero .kick{font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.idxhero h1{font-size:26px;font-weight:700;margin-top:10px;color:#2f2f34}
.idxhero p{font-size:13px;color:var(--muted);margin-top:8px;max-width:640px;margin-left:auto;margin-right:auto}
.idxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:28px 40px}
.idxcard{border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .15s}
.idxcard:hover{box-shadow:0 8px 22px rgba(0,0,0,.14)}
.idxcard .thumb{height:120px;background:var(--fill);background-image:linear-gradient(to top right,transparent 49.4%,var(--line2) 49.4%,var(--line2) 50.6%,transparent 50.6%),linear-gradient(to bottom right,transparent 49.4%,var(--line2) 49.4%,var(--line2) 50.6%,transparent 50.6%);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:11px;color:#83838a}
.idxcard .thumb span{background:var(--fill);padding:3px 9px}
.idxcard .body{padding:14px}
.idxcard .num{font-family:var(--fm);font-size:10.5px;color:var(--muted)}
.idxcard h3{font-size:15px;margin:4px 0 6px}
.idxcard .desc{font-size:12px;color:var(--muted);line-height:1.5;min-height:52px}
.idxcard .go{margin-top:10px;font-family:var(--fm);font-size:12px;font-weight:600;color:#2f2f34}
.idxcard.soon{opacity:.6}
.idxcard.soon .go{color:var(--muted)}

@media(max-width:840px){
  .sec{padding:20px 16px}.navbar{padding:10px 16px}
  .nlinks{gap:6px}.nlinks a{font-size:11px;padding:5px 8px}
  .g5,.g4,.g3,.steps,.idxgrid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .footwire .fgrid{grid-template-columns:1fr 1fr}
  .fabwrap{right:14px;bottom:14px;gap:8px}
  .fab{font-size:11px;padding:9px 13px}
}