/* Las guías públicas. Una columna, letra grande y mucho aire: se leen desde
   el teléfono, de pie, en medio de otra cosa. */
:root{
  --primary:#714B67; --primary-d:#4a2f44; --primary-l:#efe6ed;
  --accent:#00A09D; --accent-d:#00706e; --accent-l:#d9f0ef;
  --text:#241a2b; --body:#3f3647; --muted:#7e7288; --border:#e6dfea;
  --surface:#fff; --surface2:#faf8fb;
  --warn:#7c5700; --warn-l:#fff4e0; --warn-b:#f0d38a;
  --ok:#166534; --ok-l:#e7f5ec;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  color:var(--body);font-size:16px;line-height:1.65;
  background:
    radial-gradient(900px 500px at 8% -14%,rgba(113,75,103,.10),transparent 60%),
    radial-gradient(700px 460px at 96% -4%,rgba(0,160,157,.10),transparent 62%),
    #faf8fb;
  -webkit-font-smoothing:antialiased;
}

/* ── barra ── */
.barra{display:flex;align-items:center;gap:14px;padding:13px 20px;
  background:var(--primary);color:#fff;flex-wrap:wrap;}
.marca{color:#fff;text-decoration:none;font-size:16px;font-weight:800;
  display:inline-flex;align-items:center;gap:8px;letter-spacing:-.01em;
  min-height:38px;}
.marca span{font-weight:300;opacity:.85;}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.barra nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:13.5px;
  font-weight:600;padding:8px 12px;border-radius:9px;}
.barra nav a:hover{background:rgba(255,255,255,.14);color:#fff;}
.barra nav a.cta{background:var(--accent);color:#fff;font-weight:700;}
.barra nav a.cta:hover{background:var(--accent-d);}

/* ── hoja ── */
.hoja{max-width:760px;margin:0 auto;padding:26px 20px 60px;}
.miga{font-size:12.5px;color:var(--muted);margin-bottom:20px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.miga a{color:var(--muted);text-decoration:none;display:inline-flex;
  align-items:center;min-height:32px;}
.miga a:hover{color:var(--primary);text-decoration:underline;}
.miga i{font-size:10px;opacity:.6;}

.tema{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-d);background:var(--accent-l);
  padding:4px 11px;border-radius:20px;}
h1{font-size:clamp(26px,5vw,38px);font-weight:800;color:var(--text);
  letter-spacing:-.028em;line-height:1.14;margin:14px 0 0;}
.entrada{font-size:17.5px;color:var(--muted);line-height:1.6;margin-top:14px;}
.ficha{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-bottom:20px;
  border-bottom:1.5px solid var(--border);font-size:12.5px;color:var(--muted);}
.ficha span{display:inline-flex;align-items:center;gap:6px;}

article h2{font-size:clamp(20px,3.4vw,25px);font-weight:800;color:var(--text);
  letter-spacing:-.02em;line-height:1.25;margin:38px 0 12px;}
article h3{font-size:17.5px;font-weight:700;color:var(--text);margin:26px 0 9px;}
article p{margin-bottom:15px;}
article a{color:var(--primary);font-weight:600;}
article a:hover{color:var(--primary-d);}
article strong,article b{color:var(--text);font-weight:700;}
article ul,article ol{margin:0 0 16px 22px;}
article li{margin-bottom:8px;}
article li::marker{color:var(--primary);}

/* ── piezas que se repiten ── */
.nota{background:var(--warn-l);border:1.5px solid var(--warn-b);color:var(--warn);
  border-radius:13px;padding:14px 17px;margin:20px 0;font-size:14.5px;
  line-height:1.6;}
.nota b{color:#5e4100;}
.clave{background:var(--surface);border:1.5px solid var(--border);
  border-left:4px solid var(--accent);border-radius:12px;padding:14px 17px;
  margin:20px 0;font-size:14.5px;line-height:1.6;}
.clave b{color:var(--text);}
.fecha-grande{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;margin:22px 0;}
.fecha-grande .d{font-family:'DM Mono',monospace;font-size:21px;font-weight:500;
  color:var(--primary);line-height:1.1;white-space:nowrap;}
.fecha-grande .t{font-size:14px;line-height:1.5;}

table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;}
th{text-align:left;background:var(--surface2);color:var(--muted);font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;
  border-bottom:1.5px solid var(--border);}
td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
tr:last-child td{border-bottom:0;}

.pasos{counter-reset:p;margin:18px 0;list-style:none;}
.pasos li{counter-increment:p;position:relative;padding-left:40px;margin-bottom:14px;}
.pasos li::before{content:counter(p);position:absolute;left:0;top:1px;
  width:27px;height:27px;border-radius:50%;background:var(--primary);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;
  justify-content:center;}

/* ── cierre y otras ── */
.cierre{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-d) 100%);
  color:#fff;border-radius:16px;padding:24px 24px 26px;margin:44px 0 0;}
.cierre h2{font-size:21px;font-weight:800;color:#fff;margin:0 0 9px;
  letter-spacing:-.02em;}
.cierre p{font-size:14.5px;opacity:.88;line-height:1.6;margin-bottom:17px;}
.cierre-btns{display:flex;gap:10px;flex-wrap:wrap;}
.cierre-btns a{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;
  border-radius:11px;font-size:14.5px;font-weight:700;text-decoration:none;
  white-space:nowrap;}
.cierre-btns .b1{background:var(--accent);color:#fff;}
.cierre-btns .b2{background:rgba(255,255,255,.14);color:#fff;
  border:1.5px solid rgba(255,255,255,.4);}

.otras{margin-top:44px;}
.otras h2{font-size:19px;font-weight:800;color:var(--text);margin-bottom:14px;}
.otras-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:11px;}
.tarjeta{display:block;background:var(--surface);border:1.5px solid var(--border);
  border-radius:13px;padding:15px 16px;text-decoration:none;
  transition:border-color .15s,transform .15s;}
.tarjeta:hover{border-color:var(--primary);transform:translateY(-2px);}
.tarjeta .t{font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-d);}
.tarjeta b{display:block;font-size:14.5px;font-weight:700;color:var(--text);
  line-height:1.35;margin-top:6px;}
.tarjeta .d{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;}

/* ── índice ── */
.indice-cab{max-width:760px;margin:0 auto;padding:30px 20px 10px;}
.lista-guias{max-width:760px;margin:0 auto;padding:0 20px 60px;display:grid;gap:11px;}
.guia-fila{display:flex;align-items:flex-start;gap:15px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:14px;padding:17px 18px;
  text-decoration:none;transition:border-color .15s,transform .15s;}
.guia-fila:hover{border-color:var(--primary);transform:translateY(-2px);}
.guia-fila .ic{width:40px;height:40px;border-radius:11px;background:var(--primary-l);
  color:var(--primary);display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;}
.guia-fila .tx{flex:1;min-width:0;}
.guia-fila b{display:block;font-size:16px;font-weight:700;color:var(--text);
  line-height:1.35;}
.guia-fila p{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:5px;}
.guia-fila .meta{font-size:11.5px;color:var(--muted);margin-top:7px;
  display:flex;gap:13px;flex-wrap:wrap;}

/* ── pie ── */
.pie{border-top:1.5px solid var(--border);background:var(--surface);
  padding:26px 20px 34px;}
.pie > div:first-child{max-width:760px;margin:0 auto;}
.pie b{display:block;font-size:14.5px;color:var(--text);font-weight:800;}
.pie span{display:block;font-size:13px;color:var(--muted);margin-top:3px;}
.pie-links{max-width:760px;margin:13px auto 0;display:flex;gap:16px;flex-wrap:wrap;}
.pie-links a{font-size:13px;color:var(--primary);text-decoration:none;
  font-weight:600;display:inline-flex;align-items:center;min-height:34px;}
.pie-links a:hover{text-decoration:underline;}
.pie small{display:block;max-width:760px;margin:16px auto 0;font-size:11.5px;
  color:var(--muted);line-height:1.6;}
.pie small a{color:var(--muted);}

@media (max-width:620px){
  body{font-size:15.5px;}
  .barra{padding:10px 14px;}
  .barra nav{width:100%;margin-left:0;}
  .barra nav a{padding:7px 10px;font-size:13px;}
  .hoja{padding:20px 16px 48px;}
  .cierre{padding:20px 18px 22px;}
  .cierre-btns a{width:100%;justify-content:center;}
  .fecha-grande{flex-direction:column;align-items:flex-start;gap:8px;}
}