/* ==========================================================================
   Fuentes autoalojadas (Gloock + Lato, subconjuntos de Google Fonts).
   Se sirven desde este dominio: cero peticiones a terceros, cero cookies,
   y la página cumple su propia promesa de «no pedimos ningún dato».
   ========================================================================== */

@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/gloock-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/gloock-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/gloock-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/lato-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/lato-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Ruptika · Sismo Colombia — Lo legal sin vueltas
   Implementation of "Sismo - Prototipo.dc.html".
   Every colour, font stack, size and spacing value below is transcribed from
   the design's inline styles; the design's values are the source of truth.
   ========================================================================== */

:root {
  /* Ink — deep teal, the primary text and dark-surface colour */
  --ink:            #023047;
  --ink-80:         rgba(2, 48, 71, .8);
  --ink-75:         rgba(2, 48, 71, .75);
  --ink-72:         rgba(2, 48, 71, .72);
  --ink-70:         rgba(2, 48, 71, .7);
  --ink-65:         rgba(2, 48, 71, .65);

  /* Rules and hairlines, weakest to strongest */
  --rule-08:        rgba(2, 48, 71, .08);
  --rule-10:        rgba(2, 48, 71, .1);
  --rule-12:        rgba(2, 48, 71, .12);
  --rule-14:        rgba(2, 48, 71, .14);
  --rule-20:        rgba(2, 48, 71, .2);

  /* Surfaces */
  --paper:          #fff;
  --paper-60:       rgba(255, 255, 255, .6);
  --sage:           #E5E8E3;
  --sage-85:        rgba(229, 232, 227, .85);
  --sage-82:        rgba(229, 232, 227, .82);
  --sage-75:        rgba(229, 232, 227, .75);
  --sage-70:        rgba(229, 232, 227, .7);
  --sage-rule:      rgba(229, 232, 227, .14);

  /* Accents */
  --orange:         #FB8500;  /* primary action */
  --mustard:        #FFB703;  /* urgency flag */
  --amber:          #9A5100;  /* eyebrows, link hover — on light surfaces only */
  --green:          #7EBD59;  /* progress */
  --green-ink:      #3f6b28;  /* "listo" */
  --paid-ink:       #6b4c00;

  --tag-free-bg:    rgba(126, 189, 89, .2);
  --tag-paid-bg:    rgba(255, 183, 3, .35);

  /* Type */
  --serif:          'Gloock', Georgia, 'Times New Roman', serif;
  --sans:           'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Metrics */
  --measure:        44rem;
  --gutter:         22px;
  --gutter-tight:   20px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sage);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--ink); }
a:hover { color: var(--amber); }

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
label:focus-within {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* The design draws its own +/− marker */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The page is one centred sheet of paper on a sage ground */
.sheet {
  max-width: var(--measure);
  margin: 0 auto;
  background: var(--paper);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Shared type primitives
   -------------------------------------------------------------------------- */

.display { font-family: var(--serif); font-weight: 400; }

.display--xl { margin: 0; font-size: 34px; line-height: 1.05; }
.display--md { margin: 0; font-size: 30px; line-height: 1.08; }
.display--lg { margin: 0; font-size: 27px; line-height: 1.12; }
.display--sm { margin: 0; font-size: 26px; line-height: 1.05; }

/* The "/ LABEL" eyebrow that opens every section */
.eyebrow {
  margin: 0 0 14px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .25em;
  text-transform: uppercase;
}
.eyebrow--amber  { color: var(--amber); }
.eyebrow--muted  { color: var(--ink-72); }
.eyebrow--orange { color: var(--orange); }
.eyebrow--tight  { margin: 24px 0 4px; }

.lede {
  margin: 14px 0 0;
  font: 400 17px/1.62 var(--sans);
  color: var(--ink-65);
  text-wrap: pretty;
}

.section__lede {
  margin: 14px 0 22px;
  font: 400 16px/1.6 var(--sans);
  color: var(--ink-65);
  text-wrap: pretty;
}

.note {
  margin: 16px 0 0;
  font: 400 13px/1.6 var(--sans);
  color: var(--ink-72);
}

.note--noscript {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--sage);
  border-radius: 12px;
  font-size: 14px;
}

.stack { display: flex; flex-direction: column; gap: 8px; }
.stack--wide { gap: 10px; }

/* Circular pip holding an arrow or caret */
.pip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font: 400 16px/1 var(--sans);
}
.pip--ink   { border: 1px solid var(--rule-20); color: var(--ink); }
.pip--amber { border: 1px solid rgba(154, 81, 0, .55); color: var(--amber); }

/* Mustard urgency banner */
.flag {
  margin: 0;
  padding: 11px var(--gutter-tight);
  background: var(--mustard);
  font: 900 13px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.flag--sm { padding: 9px 16px; font-size: 12px; }

/* Un plazo que ya pasó deja de gritar: el trámite sigue ahí, la urgencia no.
   Lo aplica app.js sobre las tarjetas con data-vence. */
.flag--cerrado,
.is-vencido > .flag { background: var(--sage); color: var(--ink-70); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.btn__arrow { font-weight: 400; }

.btn--primary {
  width: 100%;
  min-height: 58px;
  padding: 18px 30px;
  background: var(--orange);
  font-size: 17px;
  line-height: 1.1;
}
/* The hero's CTA is an anchor and sits slightly tighter */
a.btn--primary { min-height: 56px; margin-top: 20px; padding: 17px 28px; }
a.btn--primary:hover { color: var(--ink); }

.btn--ghost {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-20);
  font-size: 12px;
  line-height: 1.2;
}

/* Checkboxes — 24px targets, tinted per context */
.check {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  margin: 0;
}
.check--amber { accent-color: var(--amber); }
.check--green { accent-color: var(--green); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  padding: 16px var(--gutter);
  background: var(--ink);
}

.masthead__brand {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 11px/1.3 var(--sans);
  letter-spacing: .25em;
  text-transform: uppercase;
  /* Design specified --amber here, which is 2.4:1 on the teal ground and
     unreadable. Using --orange (5.6:1) to match the identical eyebrow in
     the footer, which the design already renders in orange. */
  color: var(--orange);
}

.masthead__dash {
  width: 26px;
  height: 1.5px;
  background: var(--orange);
}

.masthead__meta {
  margin: 9px 0 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--sage-75);
}

/* --------------------------------------------------------------------------
   Triaje
   -------------------------------------------------------------------------- */

.triaje { padding: 0 0 8px; }
.triaje__intro { padding: 26px var(--gutter) 0; }

.triaje__opciones {
  margin-top: 22px;
  border-top: 1px solid var(--rule-10);
}

.opcion {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 70px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--rule-08);
  cursor: pointer;
}
.opcion__text  { flex: 1; }
.opcion__label { display: block; font: 700 17px/1.3 var(--sans); color: var(--ink); }
.opcion__sub   { display: block; margin-top: 2px; font: 400 14px/1.4 var(--sans); color: var(--ink-72); }

.triaje__foot { padding: 20px var(--gutter) 26px; }
.triaje__foot .note { margin: 0 0 20px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Pasos
   -------------------------------------------------------------------------- */

.pasos {
  background: var(--sage);
  padding: 0 0 26px;
}

.pasos__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px var(--gutter);
  background: rgba(2, 48, 71, .06);
}
.pasos__bar .eyebrow { margin: 0; line-height: 1.3; }

.block { padding: 22px var(--gutter-tight) 0; }
.block:first-of-type { padding-top: 24px; }
.block .eyebrow { margin: 0 0 12px; }

.hero {
  background: var(--paper);
  border-radius: 16px;
  overflow: hidden;
}
.hero__body   { padding: 22px var(--gutter-tight) 24px; }
.hero__detail { margin: 12px 0 0; font: 400 16px/1.6 var(--sans); color: var(--ink-70); text-wrap: pretty; }
.hero__norm {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-08);
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-72);
}

/* Secondary "hoy mismo" rows */
.paso-row {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 56px;
  padding: 14px 18px;
  background: var(--paper);
  border-radius: 12px;
  border-left: 2px solid var(--orange);
  text-decoration: none;
}
.paso-row__t { flex: 1; font: 400 16px/1.4 var(--sans); color: var(--ink); }

/* Collapsible "Esta semana" / "Cuando puedas" */
.fold {
  background: var(--paper-60);
  border-radius: 12px;
  overflow: hidden;
}
.fold__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.fold__title { display: block; font-size: 21px; line-height: 1.2; color: var(--ink); }
.fold__sub   { display: block; margin-top: 3px; font: 400 14px/1.4 var(--sans); color: var(--ink-72); }
.fold__panel { padding: 0 18px 16px; }

.fold-step {
  padding: 14px 0;
  border-top: 1px solid var(--rule-10);
}
.fold-step__t { margin: 0; font: 700 16px/1.35 var(--sans); color: var(--ink); }
.fold-step__d { margin: 6px 0 0; font: 400 15px/1.55 var(--sans); color: var(--ink-70); }
.fold-step__a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font: 700 12px/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
}
.fold__panel .note { font-size: 15px; line-height: 1.5; }

.pasos__cierre {
  margin: 20px 0 0;
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-65);
}
.pasos__cierre b { color: var(--ink); }

/* --------------------------------------------------------------------------
   Sections on paper (Plazos, Sobre, Guías)
   -------------------------------------------------------------------------- */

.section {
  padding: 30px var(--gutter) 0;
  border-top: 1px solid var(--rule-10);
}
.section + .section { margin-top: 30px; }

.panel {
  padding: 18px;
  background: var(--sage);
  border-radius: 14px;
}
.panel__note {
  margin: 0 0 14px;
  font: 400 14px/1.55 var(--sans);
  color: var(--ink-72);
}
.panel .eyebrow { margin: 0 0 6px; }

/* --- Plazos ------------------------------------------------------------- */

.plazo-urgente {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule-12);
}
.plazo-urgente__body { padding: 14px 16px; }

.plazo__what { margin: 8px 0 0; font: 400 16px/1.5 var(--sans); color: var(--ink-75); }
.plazo__norm { margin: 7px 0 0; font: 400 13px/1.5 var(--sans); color: var(--ink-72); }

.plazo-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-10);
}
.plazo-row__when { margin: 0; font-size: 20px; line-height: 1.15; color: var(--ink); }
.plazo-row__what { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--ink-75); }
.plazo-row .plazo__norm { margin: 5px 0 0; }

.panel--entidad { margin: 24px 0 0; }
.plazo-row--entidad {
  padding: 13px 0;
  border-top: 1px dashed var(--ink-72);
}
.plazo-row--entidad .plazo-row__when { font-size: 19px; color: var(--ink-70); }
.plazo-row--entidad .plazo-row__what { color: var(--ink-70); }

/* Very small phones only (≤320px). The design's 104px date column holds fine
   at its 390px target, so keep it; below ~320px it starves the description. */
@media (max-width: 20rem) {
  .plazo-row { grid-template-columns: 1fr; gap: 6px; }
}

/* --- El sobre ----------------------------------------------------------- */

.panel--progreso { margin: 20px 0 0; padding: 16px 18px; }

.progreso__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.progreso__label { margin: 0; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.progreso__next {
  margin: 0;
  font: 700 12px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-72);
  text-align: right;
}

.meter {
  height: 8px;
  margin-top: 12px;
  background: var(--rule-12);
  border-radius: 999px;
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  background: var(--green);
  transition: width .25s ease;
}

.sobre__list { margin-top: 16px; }

.doc {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule-12);
  border-radius: 14px;
}
/* 44px hit target, pulled back so the box still aligns to the text */
.doc__check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -8px 0 0 -8px;
  cursor: pointer;
}
.doc__body { flex: 1; min-width: 0; }
.doc__num {
  margin: 0;
  font: 700 12px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.doc.is-done .doc__num { color: var(--green-ink); }

.doc__title {
  margin: 6px 0 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}
.doc__desc { margin: 8px 0 0; font: 400 15px/1.55 var(--sans); color: var(--ink-70); }
.doc__unlocks {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--orange);
  font: 700 14px/1.45 var(--sans);
  color: var(--ink);
}

.tag {
  display: inline-block;
  margin-left: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 10px/1.6 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tag--free { background: var(--tag-free-bg); color: var(--green-ink); }
.tag--paid { background: var(--tag-paid-bg); color: var(--paid-ink); }

/* --- Guías -------------------------------------------------------------- */

.guia {
  margin-bottom: 10px;
  background: var(--paper);
  border: 1px solid var(--rule-14);
  border-radius: 14px;
  overflow: hidden;
}

.guia__summary {
  display: flex;
  gap: 14px;
  align-items: baseline;
  min-height: 60px;
  padding: 18px;
  cursor: pointer;
}
.guia__num   { flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--ink-72); }
.guia__title { flex: 1; font: 700 17px/1.35 var(--sans); color: var(--ink); }

/* Marker reflects open/closed state — the design drew a static "+" */
.guia__marker {
  flex: 0 0 auto;
  font: 400 18px/1 var(--sans);
  color: var(--amber);
}
.guia__marker::before { content: '+'; }
.guia[open] .guia__marker::before { content: '\2212'; } /* − */

.guia__body {
  padding: 0 18px 22px;
  border-top: 1px solid var(--rule-10);
}
.guia__intro { margin: 18px 0 0; font: 400 16px/1.6 var(--sans); color: var(--ink-75); }
.guia__fuente {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-10);
  font: 400 13px/1.6 var(--sans);
  color: var(--ink-72);
}

/* Grey context block inside a guide */
.callout {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--sage);
  border-radius: 12px;
}
.callout__q {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.callout__q--next { margin-top: 16px; }
.callout__a { margin: 9px 0 0; font: 400 15px/1.6 var(--sans); color: var(--ink-75); }
.callout__a b { color: var(--ink); }

/* Mustard "this is always confused" correction */
.correccion {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--mustard);
  border-radius: 12px;
}
.correccion__kicker {
  margin: 0;
  font: 900 11px/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.correccion__body { margin: 9px 0 0; font: 700 17px/1.5 var(--sans); color: var(--ink); }

/* Numbered steps — serif numerals in a 32px column.
   The numeral is absolutely positioned rather than a grid cell: as a grid the
   <li> turns every inline <b>/<a> in the step text into its own grid item,
   which throws those phrases into the numeral column. Keeping the <li> in
   normal flow lets guide copy carry arbitrary inline markup safely. */
.pasos-num {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos-num > li {
  position: relative;
  padding: 12px 0 12px 44px; /* 32px column + 12px gap */
  border-top: 1px solid var(--rule-10);
  font: 400 16px/1.55 var(--sans);
  color: var(--ink-80);
  counter-increment: paso;
}
.pasos-num > li::before {
  content: counter(paso);
  position: absolute;
  top: 12px;
  left: 0;
  width: 32px;
  font: 400 21px/1.1 var(--serif);
  color: var(--amber);
}
.pasos-num > li b { color: var(--ink); }
.pasos-num > li a { font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.colophon {
  margin-top: 34px;
  padding: 26px var(--gutter) 40px;
  background: var(--ink);
}
.colophon .eyebrow { margin: 0; line-height: 1.3; }
.colophon__p {
  margin: 14px 0 0;
  font: 400 15px/1.6 var(--sans);
  color: var(--sage-85);
}
.colophon__p b { color: #fff; }
.colophon__p--dim { color: var(--sage-70); }
.colophon__fuentes {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sage-rule);
  font: 400 13px/1.7 var(--sans);
  color: var(--sage-82);
}

/* --------------------------------------------------------------------------
   Volver
   Fixed bar, shown only after the reader has followed a step into a guide.
   The accordion is deep and the guides are long: without this, getting back
   to your own list means scrolling past fifteen other people's problems.
   -------------------------------------------------------------------------- */

.volver-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(2, 48, 71, .96);
}
.volver-bar__btn {
  max-width: 41rem;
  min-height: 52px;
  padding: 14px 22px;
}

/* --------------------------------------------------------------------------
   View switching
   Only applies once JS is running, so a no-JS phone keeps everything visible.

   #pasos is the exception: app.js builds its contents, so without JS it is an
   empty shell. It stays hidden and .pasos-fija takes its place — the same
   basic route, written out in the markup. app.js removes .pasos-fija on boot,
   and the rule below keeps it from flashing in the meantime, because the
   inline script in the head drops .no-js before this stylesheet is applied.
   -------------------------------------------------------------------------- */

.pasos-fija { display: none; }
.no-js .pasos-fija { display: block; }

[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Motion — the design is static; honour reduced-motion for the one transition
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Print — this page is meant to be printed and handed out on paper.
   Everything collapsed must open; nothing interactive should waste ink.
   app.js also force-opens <details> on beforeprint for browsers that keep
   closed content out of the print tree.
   -------------------------------------------------------------------------- */

@media print {
  .noprint { display: none !important; }

  body { background: #fff; }
  .sheet { max-width: none; }

  /* Reveal every collapsed region */
  details { display: block !important; }
  details > .guia__body { display: block !important; }
  .fold__panel[hidden] { display: block !important; }
  .guia__marker,
  .pip { display: none !important; }

  /* Keep a step and its guide link on one page */
  .guia,
  .doc,
  .plazo-urgente,
  .fold-step,
  .plazo-row { break-inside: avoid; }

  /* Solid ink instead of tinted surfaces */
  .fold,
  .hero,
  .doc,
  .guia { background: #fff; }
}