/* ╔══════════════════════════════════════════════════════════════╗
   ║  TUCAJADEUSA · subpáginas (cómo funciona · tarifas · rastrear ║
   ║  · legal · 404). Se carga después de app.css: solo composición ║
   ║  de página, los componentes viven en la capa de marca.        ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 1. Cabecera de página: cinta + Boxy asomándose por la derecha ── */
.page-head { padding-bottom: clamp(64px, 8vw, 96px); }
.page-head__tape { display: block; width: fit-content; margin: 18px 0 4px; }
.page-head__inner { max-width: 880px; }
.page-head__boxy { position: absolute; right: clamp(12px, 5vw, 96px); bottom: 0; z-index: 2; width: clamp(150px, 20vw, 300px); translate: 0 16%; rotate: -4deg; pointer-events: none; }
.page-head__boxy--up { translate: 0 6%; rotate: 3deg; }
.page-head__stickers { margin-top: 26px; }
.page-head__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.page-head--wide .page-head__inner { max-width: 1100px; }
@media (max-width: 1100px) { .page-head__inner { max-width: 720px; } .page-head__boxy { width: clamp(140px, 18vw, 220px); } }
@media (max-width: 760px) { .page-head__boxy { width: 96px; right: 10px; translate: 0 22%; opacity: 0.9; } }
@media (max-width: 480px) { .page-head__boxy { display: none; } }

/* ── 2. Pasos del casillero: lista numerada + Boxy caminando al lado ── */
.how { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 320px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.how__aside { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.how__aside .boxy--lg { width: clamp(200px, 22vw, 300px); }
.how__note { width: 100%; }
.how__note .kraft-card__title { font-size: 20px; }
.how .step-row { grid-template-columns: minmax(72px, 136px) 1fr; }
.how .kicker-num small { letter-spacing: 0.12em; font-size: 0.27em; overflow-wrap: anywhere; }
.step-row__meta.boxy-say { align-items: flex-end; }
@media (max-width: 860px) {
  .how { grid-template-columns: 1fr; }
  .how__aside { position: static; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 16px; }
  .how__aside .boxy--lg { width: min(34vw, 150px); }
  .how__note { width: auto; flex: 1; }
}
@media (max-width: 560px) { .how .step-row { grid-template-columns: 1fr; gap: 8px; } .how .kicker-num small { display: inline-block; margin-left: 10px; vertical-align: 0.35em; } }
@media (max-width: 480px) { .how__aside { flex-direction: column; align-items: flex-start; } .how__aside .boxy--lg { width: 120px; } }

/* ── 3. Foto pegada con cinta: .photo-tape vive en app.css (la usa también la Landing) ── */

/* ── 4. Encomienda: manifiesto en cartón + foto ── */
.manifest-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.manifest-card .step-row { padding: clamp(18px, 2.4vw, 26px) 0; grid-template-columns: minmax(48px, 72px) 1fr; }
.manifest-card > .step-row:first-child, .manifest-card .kraft-card__head + .step-row { border-top: 0; padding-top: 4px; }
.manifest-card .step-row:last-of-type { border-bottom: 0; }
.manifest-card .kicker-num { font-size: clamp(30px, 3.6vw, 46px); }
.manifest-card .step-row__title { font-size: clamp(18px, 1.8vw, 23px); }
.manifest-card .step-row p { font-size: 14.5px; }
.manifest-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(8,29,76,0.28); }
.manifest-card__foot .barcode { flex: 1; min-width: 120px; }
.manifest-side { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); position: sticky; top: 110px; }
@media (max-width: 860px) { .manifest-grid { grid-template-columns: 1fr; } .manifest-side { position: static; } }

/* ── 5. Listas de aduana: dos tickets de cartón + Boxy con "!" ── */
.rules { position: relative; }
.rules .kraft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rules__list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.rules__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: rgba(8,29,76,0.84); }
.rules__list b { flex: none; width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; margin-top: 1px; border: 2px solid var(--brand-navy); background: var(--white); color: var(--brand-navy); }
.rules__list--no b { background: var(--tape-red); color: var(--white); }
.rules__golden { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(8,29,76,0.28); display: flex; flex-direction: column; gap: 12px; }
.rules__golden p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(8,29,76,0.78); }
.rules__golden p strong { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.015em; text-transform: none; color: var(--brand-navy); margin-top: 4px; }
.rules__boxy { position: absolute; right: clamp(8px, 4vw, 56px); bottom: 0; width: clamp(120px, 14vw, 190px); translate: 0 18%; rotate: 4deg; z-index: 2; pointer-events: none; }
@media (max-width: 860px) { .rules .kraft-grid { grid-template-columns: 1fr; } .rules__boxy { width: 96px; right: 8px; } }
@media (max-width: 480px) { .rules__boxy { display: none; } }

/* ── 6. Almacén (foto de Doral) ── */
.coverage--doral .coverage__image { opacity: 0.42; }
.coverage--doral .coverage__overlay { background: linear-gradient(180deg, rgba(6,21,58,0.55), rgba(6,21,58,0.94)); }
.coverage__tape { margin-bottom: 18px; }
.coverage__lede { margin-top: 20px; color: rgba(245,238,225,0.76); }
.coverage__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.coverage--doral .cov-ticket { rotate: -0.8deg; }

/* ── 7. Tarifas: calculadora como panel de cartón (sobrescribe la .calc navy de app.css) ── */
.calc--kraft { background-color: var(--kraft-2); color: var(--ink); border: 2px solid var(--brand-navy); border-radius: 14px; box-shadow: 8px 8px 0 var(--brand-navy), var(--shadow-navy-lg); overflow: visible; }
.calc--kraft::before { border-radius: 12px; background:
    repeating-linear-gradient(30deg,  rgba(8,29,76,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(150deg, rgba(8,29,76,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg,  rgba(8,29,76,0.035) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(120% 100% at 0% 0%, #000 30%, transparent 92%); mask-image: radial-gradient(120% 100% at 0% 0%, #000 30%, transparent 92%); }
.calc--kraft::after { content: ''; position: absolute; top: -12px; left: clamp(24px, 6%, 64px); width: clamp(90px, 18%, 150px); height: 24px; background: var(--tape-red); rotate: -2deg; box-shadow: 2px 2px 0 var(--brand-red-2); z-index: 3; }
.calc--kraft .calc__intro .tape { margin-bottom: 16px; }
.calc--kraft .calc__intro .lede { color: rgba(8,29,76,0.72); max-width: 40ch; }
.calc--kraft .calc__field label { color: var(--ink-mute); }
.calc--kraft .calc__weight { background: var(--white); border: 2px solid var(--brand-navy); border-radius: 12px; box-shadow: var(--shadow-hard-sm); }
.calc--kraft .calc__weight:focus-within { border-color: var(--brand-navy); box-shadow: 4px 4px 0 var(--brand-red); }
.calc--kraft .calc__weight input { color: var(--ink); }
.calc--kraft .calc__weight .unit { color: var(--ink-mute); }
.calc--kraft .calc__modes { background: rgba(8,29,76,0.07); border: 2px solid var(--brand-navy); border-radius: 12px; }
.calc--kraft .calc__mode { color: var(--ink); border-radius: 8px; }
.calc--kraft .calc__mode small { color: rgba(8,29,76,0.74); }
.calc--kraft .calc__mode.is-active { background: var(--tape-red); color: var(--white); box-shadow: 3px 3px 0 var(--brand-navy); }
.calc--kraft .calc__mode.is-active small { color: #FFFFFF; }
.calc--kraft .calc__result { border-top: 1px dashed rgba(8,29,76,0.3); }
.calc--kraft .calc__result .lbl { color: var(--ink-mute); }
.calc--kraft .calc__amount { color: var(--ink); }
.calc--kraft .calc__amount.is-pop { color: var(--brand-red); }
.calc__boxy-say { margin-top: 26px; }
.calc__boxy-say .boxy { width: clamp(96px, 11vw, 150px); transition: opacity 0.25s var(--ease); }
.calc__boxy-say .boxy-tip { min-width: min(100%, 24ch); }
.calc__boxy-say .boxy-tip span { display: block; font-size: 14px; line-height: 1.45; }
.calc__note { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 860px) { .calc--kraft { box-shadow: 6px 6px 0 var(--brand-navy); } .calc__boxy-say { margin-top: 18px; } }
@media (max-width: 560px) { .calc__boxy-say { flex-direction: column; align-items: flex-start; gap: 16px; } .calc__boxy-say .boxy-tip { max-width: 100%; } .calc__boxy-say .boxy-tip::before { left: 26px; top: -9px; translate: 0 0; rotate: 135deg; } }

/* ── 8. Tarifas: dos tickets de cartón (marítimo / aéreo) ── */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 16px; padding-top: clamp(28px, 3.4vw, 40px); }
.plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan__price .sticker--lg .sticker__price { font-size: clamp(26px, 3vw, 38px); }
.plan__title { font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -0.03em; }
.plan__title .accent { color: var(--brand-red); }
.plan__sub { color: rgba(8,29,76,0.74); line-height: 1.55; max-width: 34ch; }
.plan__list { list-style: none; display: flex; flex-direction: column; margin-top: 4px; }
.plan__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px dashed rgba(8,29,76,0.26); font-size: 14.5px; }
.plan__list li span:first-child { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(8,29,76,0.78); }
.plan__list li b { font-weight: 600; color: var(--brand-navy); text-align: right; }
.plan__list li b .check { width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; background: var(--brand-navy); }
.plan__cta { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.plan__cta .btn { justify-content: center; }
.plan--air { background-color: var(--kraft); }
.plan--air .plan__list li { border-top-color: rgba(8,29,76,0.32); }
.plans__note { margin-top: 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } .plan--air { rotate: 0deg; } }

/* ── 9. Tarifas: las cuentas claras (rejilla de cartón desigual) ── */
.math .kraft-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.math__col { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 28px); }
.formula { margin: 18px 0 14px; padding: 16px 18px; background: var(--white); border: 2px solid var(--brand-navy); border-radius: 12px; box-shadow: var(--shadow-hard); font-family: var(--font-mono); font-size: clamp(12.5px, 1.3vw, 15px); letter-spacing: 0.04em; line-height: 1.5; color: var(--brand-navy); overflow-x: auto; }
.formula strong { color: var(--brand-red-2); font-weight: 700; white-space: nowrap; }
.example { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 8px; }
.example .kicker-num { font-size: clamp(34px, 4vw, 52px); }
.example p { font-size: 14px; line-height: 1.5; color: rgba(8,29,76,0.74); }
.guarantee { display: flex; align-items: center; gap: 14px; }
.guarantee .stamp { flex: none; width: 84px; height: 84px; }
@media (max-width: 760px) { .math .kraft-grid { grid-template-columns: 1fr; } .example { grid-template-columns: 1fr; gap: 6px; } }

/* ── 10. Rastrear: buscador con Boxy y línea de estados en stickers ── */
.track-hero { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 300px); gap: clamp(24px, 4vw, 56px); align-items: end; }
.track-hero__boxy { justify-self: center; width: 100%; max-width: 300px; }
.track-box { background: rgba(8,29,76,0.55); border: 2px solid rgba(245,238,225,0.24); border-radius: 18px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 6px 6px 0 var(--brand-red); }
.track-box__label { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,225,0.6); }
.track-box input { background: var(--cream-2); color: var(--ink); border: 2px solid var(--brand-navy); border-radius: 12px; box-shadow: 3px 3px 0 var(--brand-navy); }
.track-box input::placeholder { color: rgba(8,29,76,0.62); }
.track-box input:focus { border-color: var(--brand-navy); box-shadow: 3px 3px 0 var(--brand-red); }
.track-box__row .btn { white-space: nowrap; }
#trackResult { margin-top: 4px; }
.track-empty { padding: 22px 12px 8px; gap: 8px; }
.track-empty .boxy { width: clamp(84px, 10vw, 110px); }
.track-empty__title { font-size: 16px; }
.track-empty__text { font-size: 13.5px; color: rgba(245,238,225,0.7); }
#trackResult:not([hidden]) ~ .track-empty { display: none; }
.track-line { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; margin-top: 28px; padding-top: 24px; border-top: 1px dashed rgba(245,238,225,0.22); }
.track-line li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.track-line .sticker { counter-increment: st; white-space: normal; text-align: left; }
.track-line .sticker::before { content: counter(st, decimal-leading-zero); font-family: var(--font-mono); font-size: 10px; opacity: 0.6; }
.track-line p { font-size: 12.5px; line-height: 1.45; color: rgba(245,238,225,0.62); max-width: 24ch; }
.track-line li:last-child .sticker { --sticker-bg: var(--tape-red); --sticker-fg: #FFFFFF; --sticker-shadow: var(--cream); }
@media (max-width: 760px) { .track-hero { grid-template-columns: 1fr; gap: 10px; } .track-hero__boxy { order: -1; justify-self: start; width: min(30vw, 130px); } }
@media (max-width: 560px) { .track-line { grid-template-columns: 1fr; gap: 14px; } .track-line p { max-width: none; } .track-box { box-shadow: 4px 4px 0 var(--brand-red); } }

/* ── 11. Rastrear: demo del tracker sobre navy con estrellas ── */
.tracker { background: rgba(6,21,58,0.55); border: 2px solid rgba(245,238,225,0.2); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 18px; box-shadow: 6px 6px 0 var(--brand-red); }
.tracker__head { border-bottom: 1px dashed rgba(245,238,225,0.22); }
.tracker__node.is-done .tracker__dot, .tracker__node.is-active .tracker__dot { background: var(--tape-red); border-color: var(--cream); }
.tracker__dot { border-color: rgba(245,238,225,0.3); }

/* ── 12. Rastrear: dónde está mi código (papel) ── */
.codes .kraft-grid { align-items: stretch; }
.codes__side { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.codes__side .boxy-say .boxy { width: clamp(84px, 9vw, 120px); }
.codes dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: baseline; margin-top: 16px; }
.codes dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-navy); font-weight: 700; white-space: nowrap; }
.codes dd { font-size: 14.5px; line-height: 1.5; color: rgba(8,29,76,0.8); }
@media (max-width: 560px) { .codes dl { grid-template-columns: 1fr; gap: 2px 0; } .codes dd { margin-bottom: 8px; } }

/* ── 13. Legal: lectura a 62ch con índice al margen ── */
.legal-wrap { display: grid; grid-template-columns: 220px minmax(0, 62ch); gap: clamp(28px, 5vw, 72px); align-items: start; }
.legal-toc { position: sticky; top: 110px; }
.legal-toc ol { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.legal-toc a { display: block; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--brand-navy); border-bottom: 1px dashed rgba(8,29,76,0.24); }
.legal-toc a:hover { color: var(--brand-red-2); }
.legal-toc ol ol { margin: 4px 0 6px 14px; gap: 2px; }
.legal-toc ol ol a { font-weight: 500; font-size: 13px; border-bottom: 0; padding: 4px 0; color: rgba(8,29,76,0.72); }
.legal { max-width: 62ch; }
.legal section { margin-bottom: clamp(40px, 6vw, 64px); scroll-margin-top: 110px; }
.legal section > .tape { margin-bottom: 14px; }
.legal h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 18px; }
.legal h3 { font-size: 17.5px; letter-spacing: -0.015em; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: rgba(8,29,76,0.8); }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 10px 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.legal__intro { font-size: 17px; }
.legal__cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding-top: 8px; }
@media (max-width: 860px) { .legal-wrap { grid-template-columns: 1fr; } .legal-toc { position: static; } .legal-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; } .legal-toc ol ol { display: none; } .legal-toc a { border-bottom: 0; padding: 0; } }

/* ── 14. 404 ── */
.notfound { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px 20px 120px; overflow: hidden; isolation: isolate; }
.notfound__inner { position: relative; z-index: 2; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.notfound__scene { position: relative; width: min(60vw, 280px); margin: 0 auto 6px; }
.notfound__boxy { width: 100%; margin: 0; }
.notfound__badge, .stars-night .notfound__badge { position: absolute; right: -8%; top: 8%; font-family: var(--font-mono); font-size: clamp(22px, 4vw, 34px); padding: 8px 16px; rotate: 8deg; --sticker-bg: var(--tape-red); --sticker-fg: #FFFFFF; --sticker-shadow: var(--cream); }
.notfound__word { font-size: 22px; margin: 16px 0 12px; }
.notfound h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 12px; }
.notfound p { font-size: 16px; line-height: 1.55; color: rgba(245,238,225,0.74); max-width: 40ch; margin: 0 auto 28px; }
.notfound__actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.notfound__floor { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.notfound__floor::after { display: none; }
.notfound__code { display: block; margin-top: 30px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,238,225,0.58); }
@media (max-width: 480px) { .notfound { padding-bottom: 96px; } .notfound__badge { right: -4%; } }

/* Cartón sobre navy: dentro del ticket manda el papel, no el contexto oscuro */
.stars-night .kraft-card .kicker-num, .bg-navy .kraft-card .kicker-num, .final .kraft-card .kicker-num { color: var(--brand-red); }
.stars-night .kraft-card .kicker-num small, .bg-navy .kraft-card .kicker-num small { color: rgba(8,29,76,0.5); }
.stars-night .kraft-card .step-row, .bg-navy .kraft-card .step-row { border-color: rgba(8,29,76,0.28); }
.stars-night .kraft-card .step-row p, .bg-navy .kraft-card .step-row p { color: rgba(8,29,76,0.78); }
.stars-night .kraft-card .text-red-safe, .bg-navy .kraft-card .text-red-safe { color: var(--brand-red-2); }
.stars-night .kraft-card .btn--ghost, .bg-navy .kraft-card .btn--ghost { color: var(--ink); border-color: var(--paper-line-2); }
.kraft-card .btn--wa { align-self: flex-start; }

/* Sección que termina en marquesina: menos aire abajo */
.section--marquee-end { padding-bottom: clamp(20px, 3vw, 40px); }

/* ── 15. Detalles comunes ── */
.section-head--tight { margin-bottom: clamp(24px, 3vw, 40px); }
.final__boxy--md { width: clamp(140px, 18vw, 220px); }   /* es el Boxy grande del cierre: ≥ 180 px desktop, ≥ 140 px móvil */
.svc-card__tag--red { background: var(--tape-red); color: var(--white); box-shadow: 3px 3px 0 var(--brand-navy); }
.faq__panel-inner .link { font-weight: 700; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 480px) { .btn--lg { padding: 15px 20px; font-size: 14.5px; } .cta-row .btn, .page-head__actions .btn, .final__actions .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .calc__boxy-say .boxy { transition: none; } }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v9 · «Una sola cinta roja»: composición de las subpáginas    ║
   ║  sobre los componentes .ribbon .postmark .flap de app.css.    ║
   ║  Va al final: gana por orden sobre la capa v8 de arriba.      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Riel vertical: en writing-mode vertical el eje inline es el vertical, el track va en row (app.css lo pone en column) ── */
.ribbon--rail-v .ribbon__track, .postmark-row--v > .ribbon--rail .ribbon__track { flex-direction: row; width: auto; height: max-content; }
@media (max-width: 700px) { .postmark-row--stack > .ribbon--rail .ribbon__track { flex-direction: row; width: auto; height: max-content; } }
/* Corte hacia cartón (app.css solo trae --from-kraft) */
.ribbon--to-kraft { --floor-to: var(--kraft); }
/* Frase en sentence case bajo un matasellos (la fila trae __sub en mono caps; esto es texto de lectura) */
.postmark-row__txt { display: block; max-width: 22ch; font-size: 12.5px; line-height: 1.45; color: rgba(245,238,225,0.66); }

/* ── v9.1 Cabecera: Boxy de pie sobre la cinta impresa que cierra el bloque ── */
.page-head__boxy { width: clamp(180px, 21vw, 300px); translate: 0 14%; }
.page-head__boxy--up { translate: 0 8%; }
@media (max-width: 760px) { .page-head__boxy { width: 150px; right: 10px; translate: 0 20%; opacity: 1; } }
@media (max-width: 480px) {
  .page-head { padding-bottom: 0; }
  .page-head__boxy { display: block; position: relative; right: auto; bottom: auto; width: 150px; margin: 22px 0 0 auto; translate: 0 18%; rotate: -3deg; }
  .page-head__boxy--up { rotate: 3deg; }
}

/* ── v9.2 Cómo funciona: pasos con matasellos enhebrados por la cinta vertical ── */
.how__rail { position: relative; padding-left: 42px; }
.how__rail > .ribbon--rail-v { --rail-x: 6px; }
.how .step-row { grid-template-columns: 56px 1fr; gap: clamp(14px, 2vw, 28px); padding: clamp(18px, 2.4vw, 28px) 0; }
.how__rail > .ribbon--rail-v + .step-row { border-top: 0; padding-top: 0; }
.how .step-row > .postmark { margin-top: -4px; }
.how .step-row--boxy { position: relative; padding-right: 110px; }
.how .step-row--boxy > .boxy--apoyo { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 96px; }
.how__aside .boxy--hero { width: clamp(180px, 22vw, 300px); margin-bottom: -6%; position: relative; z-index: 2; }
.manifest-card .step-row { grid-template-columns: 48px 1fr; }
.manifest-card .step-row > .postmark { margin-top: -2px; }
.manifest-card__foot .postmark { flex: none; }
.rules__boxy { width: clamp(180px, 16vw, 210px); translate: 0 14%; }
@media (min-width: 861px) { .rules .kraft-grid { margin-right: clamp(200px, 18vw, 250px); } .rules__boxy { right: clamp(8px, 2vw, 28px); } }
.rules { padding-bottom: clamp(96px, 12vw, 170px); }
@media (max-width: 860px) {
  .how__aside .boxy--hero { width: 180px; margin-bottom: -30px; }
  .rules__boxy { width: 150px; right: 8px; }
}
@media (max-width: 560px) {
  .how .step-row { grid-template-columns: 44px 1fr; gap: 12px; }
  .how .step-row > .postmark { --postmark-size: 44px; }
  .how .step-row--boxy { padding-right: 0; padding-bottom: 96px; }
  .how .step-row--boxy > .boxy--apoyo { top: auto; bottom: 14px; translate: 0 0; width: 80px; right: 4px; }
  .how__rail { padding-left: 30px; }
  .how__rail > .ribbon--rail-v { --rail-x: 0px; }
  .manifest-card .step-row { grid-template-columns: 44px 1fr; gap: 10px; }
  .manifest-card .step-row > .postmark { --postmark-size: 40px; }
}
@media (max-width: 480px) {
  .how__aside .boxy--hero { width: 150px; }
  .rules { padding-bottom: 0; }
  .rules__boxy { display: block; position: relative; right: auto; bottom: auto; width: 150px; margin: 26px 0 0 auto; translate: 0 18%; }
}

/* ── v9.3 Tarifas: tickets con perforación y precio grande; cinta «$/lb» impresa en el corte ── */
.plan__big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.plan__amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 72px); line-height: 0.95; letter-spacing: -0.04em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.plan--air .plan__amount, .plan--air .plan__title .accent { color: var(--red-text); }   /* --brand-red sobre kraft = 2.6:1; rojo de texto = 3.8:1 */
.plan__unit { font-family: var(--font-mono); font-size: clamp(12px, 1.2vw, 15px); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(8,29,76,0.7); }
.plan__perf { margin: 6px 0 2px; }
.plans .perf--notch::before, .plans .perf--notch::after { background: var(--kraft); }
.plan { position: relative; }
.plan__tape { position: absolute; top: -28px; right: -14px; margin: 0; rotate: 6deg; z-index: 3; }
.plan__tape--l { right: auto; left: -10px; rotate: -5deg; }
.plans { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: start; }
.plan--air { margin-top: clamp(10px, 2vw, 28px); }
.calc__boxy-say .boxy { width: clamp(150px, 15vw, 210px); }
.calc__boxy-say .boxy-tip { align-self: flex-start; margin-top: 10px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } .plan--air { margin-top: 0; } .plan__tape { right: 4px; top: -12px; } .plan__tape--l { left: 6px; } }
@media (max-width: 560px) { .calc__boxy-say .boxy { width: 150px; } }

/* ── v9.4 Rastrear: el buscador real sobre el riel de cinta con matasellos; el avión de papel es el Boxy grande ── */
@media (min-width: 761px) { .track-hero { grid-template-columns: minmax(0, 1fr) clamp(180px, 24vw, 320px); } }
.track-hero__boxy { max-width: 320px; width: clamp(180px, 24vw, 320px); }
.track-rail { position: relative; margin-top: 28px; padding-top: 24px; border-top: 1px dashed rgba(245,238,225,0.22); }
.track-rail .postmark-row { padding: 14px 0; gap: 6px; }
.track-rail .postmark { --postmark-size: 72px; --postmark-color: var(--orange-hot); --postmark-bg: var(--navy-night); }   /* rojo vivo sobre navy = 3.9:1 */
.track-rail .postmark-row__lbl { color: var(--cream); }
.track-rail .postmark-row__sub { color: rgba(245,238,225,0.55); opacity: 1; }
.track-empty .boxy { width: 96px; }
.tracker__flap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tracker__flap-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,238,225,0.62); display: flex; align-items: center; gap: 10px; }
.tracker__flap-lbl .ld { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-red); }
.tracker .postmark-row { padding: 18px 0; margin-top: 28px; }
.tracker .postmark { --postmark-size: clamp(64px, 8vw, 96px); --postmark-bg: var(--brand-navy); transition: color 0.4s var(--ease); }
.tracker .tracker__node .postmark { --postmark-color: rgba(245, 238, 225, 0.62); opacity: 1; }   /* se atenúa el trazo, no el disco */
.tracker .tracker__node.is-done .postmark, .tracker .tracker__node.is-active .postmark { --postmark-color: var(--orange-hot); opacity: 1; }
.tracker .tracker__node.is-active .postmark { filter: drop-shadow(0 0 12px rgba(245, 26, 24, 0.55)); }
.tracker .postmark-row__lbl { color: var(--cream); transition: color 0.4s var(--ease); }
.tracker .postmark-row__sub { color: rgba(245,238,225,0.55); opacity: 1; }
.tracker .tracker__node:not(.is-done):not(.is-active) .postmark-row__lbl { color: rgba(245,238,225,0.58); }
.tracker__head { align-items: flex-end; }
@media (max-width: 760px) {
  .track-hero__boxy { order: -1; justify-self: end; width: 160px; margin-bottom: -6px; }
  .tracker__flap { align-items: flex-start; width: 100%; }
}
@media (max-width: 700px) {
  .track-rail .postmark { --postmark-size: 56px; }
  .track-rail .postmark-row--stack, .tracker .postmark-row--stack { padding-left: 34px; row-gap: 14px; }
  .track-rail .postmark-row--stack > .ribbon--rail { left: 55px; }   /* centro del matasellos de 56 px: 34 + 28 - 7 */
  .tracker .postmark-row--stack > .ribbon--rail { left: 59px; }      /* matasellos de 64 px */
  .track-rail .postmark-row__txt { max-width: none; }
  .tracker .postmark { --postmark-size: 64px; }
}
@media (max-width: 480px) { .tracker .flap { --flap-h: 36px; --flap-w: 25px; gap: 2px; } }
@media (max-width: 400px) { .tracker .flap { --flap-w: 22px; --flap-h: 32px; } }   /* 10 × 22 + hueco + 20 = 250 px < 260 disponibles a 360 */
@media (min-width: 701px) {
  .track-rail .postmark-row > .ribbon--rail { top: 50px; }                                  /* 14 px de padding + radio 36 */
  .tracker .postmark-row > .ribbon--rail { top: calc(18px + clamp(64px, 8vw, 96px) / 2); }
}

/* ── v9.5 404: la cinta cruza el final de la pantalla y Boxy queda sobre ella; matasellos «SIN RUTA» en vez del sticker ── */
.notfound__ribbon { position: absolute; left: 0; right: 0; bottom: clamp(24px, 6vh, 64px); z-index: 1; overflow: clip; padding: 24px 0; }
.notfound__pm, .stars-night .notfound__pm { position: absolute; right: -14%; top: 4%; --postmark-color: var(--orange-hot); --postmark-rot: 10deg; }
.notfound__code { position: relative; z-index: 2; }
@media (max-width: 480px) { .notfound__pm { right: -10%; --postmark-size: 72px; } }

/* ── v9.6 Movimiento reducido: nada se mueve ── */
@media (prefers-reduced-motion: reduce) { .tracker .postmark, .tracker .postmark-row__lbl { transition: none; } }
/* Ajustes finales v9 */
.postmark-row__body { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.postmark-row--v > .postmark-row__item .postmark-row__body { align-items: flex-start; }
@media (max-width: 700px) { .postmark-row--stack > .postmark-row__item .postmark-row__body { align-items: flex-start; } }
@media (max-width: 860px) { .how__aside .boxy--hero { margin-bottom: 0; } }
.notfound { padding-bottom: clamp(150px, 24vh, 230px); }

/* ── v9.7 La cinta impresa cierra el bloque DESDE DENTRO (.page-head--ribbon / .section--ribbon).
   Antes iba como hermana del bloque y el overflow de la sección cortaba los pies de Boxy; ahora la cinta es el último
   hijo, Boxy (z-index 2) pinta encima de la banda (z-index 1) y "pisa" la cinta. En el lado derecho, donde va Boxy, la
   banda a -6° llega hasta el borde alto del corte, así que los pies entran ~22 px en el bloque y quedan sobre el rojo. ── */
.page-head--ribbon, .section--ribbon { padding-bottom: 0; }
.page-head--ribbon > .ribbon--print { margin-top: clamp(56px, 7vw, 88px); }
.section--ribbon > .ribbon--print { margin-top: clamp(64px, 9vw, 120px); }
.page-head--ribbon .page-head__boxy, .page-head--ribbon .page-head__boxy--up, .section--ribbon .rules__boxy { translate: 0 0; bottom: calc(clamp(84px, 12vw, 168px) - 22px); }
@media (max-width: 760px) {
  /* el corte baja de alto y la banda gira solo -3°: en el lado de Boxy su borde alto queda ~10 px bajo el borde del corte */
  .page-head--ribbon .page-head__boxy, .page-head--ribbon .page-head__boxy--up, .section--ribbon .rules__boxy { bottom: calc(clamp(72px, 20vw, 110px) - 30px); }
}
@media (max-width: 480px) {
  /* Boxy vuelve al flujo (v9.1) y se hunde 18 % sobre la cinta que le sigue; la cinta pega directo, sin margen */
  .page-head--ribbon > .ribbon--print, .section--ribbon > .ribbon--print { margin-top: 0; }
  .page-head--ribbon .page-head__boxy, .page-head--ribbon .page-head__boxy--up, .section--ribbon .rules__boxy { position: relative; bottom: auto; translate: 0 18%; margin-right: 14px; }
}

/* ── Portada legal: dos puertas, términos y privacidad ── */
.legal-hub { display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.legal-hub__card { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 34px); text-decoration: none; color: inherit; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.legal-hub__card h2 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 2.4vw, 27px); color: var(--brand-navy); }
.legal-hub__card p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(8,29,76,0.74); }
.legal-hub__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--red-text); }
.legal-hub__go svg { width: 17px; height: 17px; }
@media (hover: hover) { .legal-hub__card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--brand-navy); } }
.legal-hub__card:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 4px; }
.legal-hub__nota { margin: clamp(20px, 3vw, 30px) 0 0; text-align: center; font-size: 14.5px; color: rgba(8,29,76,0.7); }
@media (prefers-reduced-motion: reduce) { .legal-hub__card { transition: none; } .legal-hub__card:hover { transform: none; } }

/* ── Página de gracias ── */
.gracias__pasos { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: g; display: grid; gap: 14px; }
.gracias__pasos li { position: relative; padding-left: 38px; counter-increment: g; display: grid; gap: 2px; }
.gracias__pasos li::before {
  content: counter(g, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-navy); color: var(--cream);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.gracias__pasos b { font-size: 15px; color: var(--brand-navy); }
.gracias__pasos span { font-size: 14px; line-height: 1.5; color: rgba(8,29,76,0.74); }
.gracias__lede { margin: 12px 0 16px; font-size: 15px; line-height: 1.6; color: rgba(8,29,76,0.78); }
.gracias__nota { margin: 14px 0 0; font-size: 13.5px; color: rgba(8,29,76,0.7); }