/* Guías por cargo de MegaMarket. Se leen en pantalla y se imprimen / guardan como PDF en A4. */
:root{--green:#0a4aa0;--green-d:#083b80;--green-dd:#062a5c;--ink:#121a2b;--body:#4a5468;--muted:#8a92a3;--bg:#f5f7fb;--card:#fff;--line:#e2e6ee;--soft:#e8f1fc;--tag:#f6c91c;--tag-ink:#2b2200;--warn:#fff7e6;--warn-ink:#7a5a12;--sans:'Plus Jakarta Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
a{color:var(--green-d);font-weight:600}
.top{background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green-dd));color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.name{font-weight:600;font-size:19px}.name b{color:var(--green);font-weight:800}
.top .acc{display:flex;gap:14px;align-items:center;font-size:14px}
.btn-print{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink)}
.btn-print:focus-visible,a:focus-visible{outline:3px solid var(--tag);outline-offset:2px;border-radius:6px}

.hero{padding:34px 0 8px}
.eyebrow{display:inline-block;background:var(--soft);color:var(--green-dd);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:12px}
h1{font-size:clamp(28px,5vw,40px);line-height:1.12;letter-spacing:-.03em;margin-bottom:10px;text-wrap:balance}
.lead{font-size:18px;color:var(--body);max-width:680px}
h2{font-size:22px;letter-spacing:-.02em;margin:34px 0 12px}

.resumen{background:var(--green-dd);color:#fff;border-radius:16px;padding:20px 22px;margin-top:20px}
.resumen h2{font-size:15px;margin:0 0 8px;letter-spacing:.04em;text-transform:uppercase;color:#bcd9f7}
.resumen ul{list-style:none;display:grid;gap:7px;font-size:15.5px}
.resumen li{padding-left:22px;position:relative}
.resumen li::before{content:"✓";position:absolute;left:0;color:#5cc4ff;font-weight:800}
.acceso{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:14px;font-size:15px}
.acceso b{color:var(--ink)}
code,.mono{font-family:ui-monospace,Consolas,monospace;background:#eef1f6;padding:1px 6px;border-radius:6px;font-size:.92em}

.paso{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:16px;break-inside:avoid;box-shadow:0 8px 24px rgba(15,30,60,.06)}
.paso h3{font-size:19px;letter-spacing:-.01em;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.paso h3 .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.cuerpo{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}
.cuerpo.celu{grid-template-columns:minmax(0,260px) 1fr}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.shot img{display:block;width:100%;height:auto}
.leyenda{list-style:none;display:grid;gap:10px;font-size:15px;color:var(--body)}
.leyenda li{position:relative;padding-left:38px;min-height:28px}
.leyenda li::before{content:attr(data-n);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--tag);color:var(--tag-ink);border:2px solid var(--tag-ink);display:grid;place-items:center;font-weight:800;font-size:14px}
.leyenda b{color:var(--ink)}
.nota{background:var(--warn);color:var(--warn-ink);border-radius:12px;padding:12px 14px;font-size:14.5px;margin-top:12px}
.nota b{color:#5c430b}

.lista{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 18px}
.lista li{list-style:none;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--body)}
.lista li:last-child{border-bottom:0}
.lista li b{color:var(--ink)}
.faq{display:grid;gap:10px}
.faq div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;break-inside:avoid}
.faq b{display:block;color:var(--ink);margin-bottom:2px}
.faq span{color:var(--body);font-size:15px}
.otras{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}
.otras a{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-size:14px;text-decoration:none}
.foot{margin:34px 0 30px;color:var(--muted);font-size:13px;border-top:1px dashed var(--line);padding-top:16px}

/* índice */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(15,30,60,.06);display:flex;flex-direction:column;gap:8px}
.card:hover{border-color:var(--green)}
.card .rol{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--green-d)}
.card b{font-size:20px;letter-spacing:-.01em}
.card span.d{color:var(--body);font-size:15px;flex:1}
.card .go{font-weight:700;color:var(--green-d);font-size:14px}

@media(max-width:760px){.cuerpo,.cuerpo.celu{grid-template-columns:1fr}.cuerpo.celu .shot{max-width:280px}.cards{grid-template-columns:1fr}}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;font-size:12.5px}
  .noprint,.btn-print{display:none!important}
  .top{border:0}.top .acc{display:none}
  .paso,.resumen,.faq div,.lista{box-shadow:none}
  .paso{padding:14px;margin-bottom:12px}
  .cuerpo{grid-template-columns:1.2fr 1fr;gap:14px}.cuerpo.celu{grid-template-columns:200px 1fr}
  .shot img{max-height:122mm;width:auto;max-width:100%;margin:0 auto}
  .cuerpo:not(.celu){grid-template-columns:1fr}
  .cuerpo:not(.celu) .shot{text-align:center;background:#f4f6fa}
  .cuerpo:not(.celu) .shot img{max-height:70mm}
  .cuerpo:not(.celu) .leyenda{grid-template-columns:1fr 1fr;gap:8px 18px}
  .cuerpo.celu{grid-template-columns:150px 1fr}
  .cuerpo.celu .shot img{max-height:98mm}
  h1{font-size:28px}.lead{font-size:14.5px}h2{margin-top:20px}
  a{color:var(--ink);text-decoration:none}
  .resumen{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .leyenda li::before,.paso h3 .n,.eyebrow{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.brand-logo{height:46px;width:auto;display:block}
@media (max-width:640px){.brand-logo{height:36px}}

/* franja con los colores del logo */
.top{position:relative}.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#003c84 0 11%,#fcb400 11% 22%,#48a818 22% 33%,#fc6024 33% 44%,#845430 44% 55%,#9c3cc0 55% 66%,#242424 66% 77%,#fc303c 77% 88%,#00a8fc 88%)}