/* ╔══════════════════════════════════════════════════════════════╗
   ║  page-landing.css · v9 «Una sola cinta roja, de Miami a tu     ║
   ║  puerta». Composición de la Landing sobre app.css.             ║
   ║  Los componentes (.ribbon .postmark .stamp-frame .flap .tape   ║
   ║  .sticker .kraft-card .boxy) viven en app.css; aquí solo se    ║
   ║  colocan y se ajustan por sección. Sin colores nuevos.         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 0. Nav: el CTA es un sticker navy (markup .sticker) ── */
.nav__cta.sticker { text-decoration: none; }

/* ── 1. Hero póster (#top): Poppins enorme sobre crema, la cinta cruza, Boxy salta sobre ella ── */
.hero-v9 { position: relative; overflow: clip; isolation: isolate; background: var(--cream); color: var(--ink); padding: clamp(112px, 15vh, 156px) 0 0; }
.hero-v9__inner { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 340px); column-gap: clamp(16px, 3vw, 40px); align-items: end; }
.hero-v9__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 8.4vw, 118px); line-height: 1.0; letter-spacing: -0.02em; color: var(--brand-navy); }
.hero-v9__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.hero-v9__title .line > span { display: inline-block; transform: translateY(110%); animation: lu 1s var(--ease) forwards; }
.hero-v9__title .line:nth-child(2) > span { animation-delay: 0.08s; }
.hero-v9__title .line:nth-child(3) > span { animation-delay: 0.16s; }
.hero-v9__title .line:nth-child(4) > span { animation-delay: 0.24s; }
.hero-v9__title .accent { color: var(--brand-red); }
.hero-v9__sub { margin-top: clamp(18px, 2.4vw, 30px); padding-bottom: clamp(26px, 4vw, 60px); font-size: clamp(16px, 1.35vw, 19.5px); line-height: 1.55; max-width: 62ch; color: rgba(8, 29, 76, 0.78); text-wrap: pretty; }
/* Boxy con los pies sobre el borde superior de la cinta: la banda gira -6° y su borde sube hacia la derecha */
/* El Boxy de la portada: es lo primero que se ve, así que manda el tamaño.
   340 px de tope se quedaban cortos en un monitor grande. */
.hero-v9__boxy { justify-self: end; position: relative; z-index: 2; margin-bottom: clamp(20px, 2.6vw, 36px); margin-right: clamp(0px, 2vw, 24px); }
.boxyanim.hero-v9__boxy { width: clamp(190px, 30vw, 460px); }
@media (max-width: 760px) { .boxyanim.hero-v9__boxy { width: clamp(170px, 60vw, 280px); } }
.hero-v9 > .ribbon--marquee { margin-top: 0; }
/* Debajo de la cinta, sobre crema: dos CTAs jerarquizados + los tres sellos */
.hero-v9__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 64px); padding-top: clamp(64px, 7vw, 108px); padding-bottom: clamp(36px, 5vw, 64px); }
.hero-v9__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-v9 .btn--ghost { color: var(--brand-navy); background: transparent; border: 2px solid var(--brand-navy); }
.hero-v9 .btn--ghost:hover { background: rgba(8, 29, 76, 0.06); border-color: var(--brand-navy); }
.hero-seals { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: center; justify-self: end; }
.hero-seals .sticker { font-family: var(--font-display); }
.hero-seals .sticker__price { font-variant-numeric: tabular-nums; }
.hero-seals .sticker__price .counter { display: inline-block; min-width: 1ch; text-align: right; }
.hero-seals .sticker__muted { font-size: 0.8em; }
.partners-v9 { padding: 6px 0 0; }
.partners-v9 .partners { padding: 18px 0 26px; border-top: 1px dashed var(--paper-line-2); }
@media (max-width: 760px) {
  .hero-v9 { padding-top: 104px; }
  .hero-v9__inner { grid-template-columns: 1fr; row-gap: 8px; }
  .hero-v9__title { font-size: 44px; }
  .hero-v9__sub { padding-bottom: 12px; font-size: 16px; }
  .hero-v9__boxy { justify-self: center; margin: 0 0 -2px; }
  .hero-v9__foot { grid-template-columns: 1fr; gap: 22px; padding-top: 40px; padding-bottom: 28px; }
  .hero-v9__actions { flex-direction: column; }
  .hero-v9__actions .btn { width: 100%; justify-content: center; }
  /* Sellos en fila con scroll horizontal, sin desbordar la página */
  .hero-seals { flex-wrap: nowrap; justify-self: stretch; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 12px; gap: 12px 14px; scrollbar-width: none; }
  .hero-seals::-webkit-scrollbar { display: none; }
  .hero-seals .sticker { flex: none; }
  .hero-seals .sticker--lg { padding: 9px 14px; font-size: 14px; box-shadow: 4px 4px 0 var(--sticker-shadow); }
}

/* ── 2. Servicios (#servicios): dos tickets kraft asimétricos 7/5 con matasellos ── */
.tkts { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.tkt { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.tkt--send { rotate: -0.6deg; padding-bottom: clamp(28px, 3.4vw, 46px); }
.tkt--recv { rotate: 0.8deg; margin-top: clamp(24px, 4vw, 64px); background-color: var(--kraft-2); }
.tkt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 88px; }
.tkt h3 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.03em; max-width: 13ch; color: var(--brand-navy); }
.tkt--recv h3 { padding-right: 90px; }
.tkt__lede { font-size: 15px; line-height: 1.6; color: rgba(8, 29, 76, 0.76); max-width: 52ch; }
.tkt__lines { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 2px 0; padding: 0; }
.tkt__lines li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; font-weight: 500; color: rgba(8, 29, 76, 0.84); }
.tkt__lines li b { flex: none; padding-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--brand-navy); }
.tkt__price { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px dashed rgba(8, 29, 76, 0.28); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.tkt__price strong { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; color: var(--brand-navy); }
.tkt__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.tkt--send .tkt__cta { padding-right: clamp(0px, 16vw, 200px); }
.tkt > .postmark--corner { top: -20px; right: -16px; }
/* Boxy consolida (grande) asoma por la esquina del ticket de encomienda; boxy-casillero (apoyo) en el de casillero */
.tkt__boxy { position: absolute; right: -5%; bottom: -9%; width: clamp(180px, 19vw, 250px); z-index: 2; pointer-events: none; rotate: 4deg; }
.tkt__boxy-sm { position: absolute; right: 22px; top: 64px; width: 80px; z-index: 2; pointer-events: none; rotate: 6deg; }
.tkt .sticker-row { gap: 10px 12px; }
.sticker .blogo { height: 18px; color: currentColor; opacity: 1; }
.sticker .blogo--sq { height: 22px; }
.sticker--sm .blogo { height: 14px; }
@media (max-width: 860px) {
  .tkts { grid-template-columns: 1fr; }
  .tkt--recv { margin-top: 26px; }
  .tkt--send .tkt__cta { padding-right: 0; }
  .tkt__boxy { position: relative; right: auto; bottom: auto; width: 150px; margin: 4px 0 -44px auto; rotate: 0deg; }
}
@media (max-width: 480px) {
  .tkt h3 { font-size: 28px; }
  .tkt--recv h3 { padding-right: 70px; }
  .tkt__boxy-sm { width: 60px; right: 14px; top: 58px; }
  .tkt > .postmark--corner { top: -14px; right: 8px; --postmark-size: 72px; }
  .tkt__head { padding-right: 60px; }
  .tkt__cta .btn { white-space: normal; }
}

/* ── Riel vertical (.ribbon--rail-v y los .postmark-row apilados): en writing-mode vertical el eje inline es el vertical,
   así que el track va en row (app.css lo pone en column y solo se ve el primer ítem). ── */
.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; } }

/* ── 3. Cómo funciona (#como): pasos con matasellos enhebrados por la cinta vertical; fotos y Boxy a la derecha ── */
.how { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.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__title { font-size: clamp(20px, 2.1vw, 27px); }
.how .step-row p { font-size: 15px; }
.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__side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.how__boxy { width: clamp(180px, 19vw, 240px); margin: 0 auto -9%; position: relative; z-index: 2; }
.how__side .photo-tape:nth-child(3) { margin-left: clamp(0px, 8%, 56px); }
.how__more { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 860px) {
  .how { grid-template-columns: 1fr; }
  .how__side { position: static; }
  .how__boxy { width: 180px; margin-bottom: -40px; }
}
@media (max-width: 560px) {
  .how .step-row { grid-template-columns: 48px 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; }
}

/* ── 4. Brand film (#video): el marco de estampilla vive DENTRO de #filmFrame (app.js lo escala tal cual) ── */
.filmexp__frame { background: transparent; border-radius: 0; box-shadow: none; overflow: visible; display: grid; place-items: center; container-type: size; }
.filmexp__frame.is-full { border-radius: 0; }
.filmexp__stamp { width: min(86cqw, 1180px, calc((100cqh - 72px) * 1.6)); margin: 0; }
.filmexp__stamp > video { aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy-night); }
.filmexp__stamp > .postmark { top: -9%; right: -6%; }
.filmexp__stamp > .tape { left: -18px; bottom: 12%; }
.filmexp__title .w { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(36px, 7vw, 104px); }
.filmexp__title .w2 { color: var(--brand-red); }
@media (max-width: 760px) {
  .filmexp__stamp > .postmark { --postmark-size: 64px; top: -7%; right: -4%; }
  /* El titular sale del marco: arriba de la estampilla, no encima del póster */
  .filmexp__title { top: 9vh; align-items: flex-start; }
}

/* ── 5. Cobertura + ruta (#cobertura): mapa de cobertura sobre navy, ticket manifiesto con matasellos ── */
.cov { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 4vw, 68px); align-items: start; }
.cov__copy .lede { margin-top: 18px; color: rgba(245, 238, 225, 0.74); }
/* El trazo se «dibuja»: una goma del color del fondo se retira a lo largo del camino (stroke-dashoffset, solo con motion) */
.cov .cov-ticket { max-width: 440px; }
/* El manifiesto acompaña al mapa mientras se recorre, en vez de quedarse
   flotando a media altura con hueco arriba y hueco abajo. */
@media (min-width: 981px) {
  .cov .cov-ticket { position: sticky; top: clamp(96px, 12vh, 140px); }
}
@media (min-width: 1600px) {
  .cov { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); }
  .cov .cov-ticket { max-width: 470px; }
}
.cov-ticket__marks { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cov-ticket__marks .postmark { --postmark-color: var(--brand-red-2); }
@media (max-width: 900px) {
  .cov { grid-template-columns: 1fr; }
  .cov .cov-ticket { max-width: 520px; margin: 0; }
}
@media (max-width: 700px) {
}

/* ── 6. Rastreo (#rastreo): riel de cinta con matasellos, tablero split-flap y el formulario real ── */
.track__head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 3.5vw, 48px); }
.track__head .tape { margin-bottom: 14px; }
.track__head h2 { font-size: clamp(32px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.03em; }
.track__head p { margin: 12px auto 0; max-width: 52ch; font-size: clamp(14.5px, 1.2vw, 17px); line-height: 1.55; color: rgba(245, 238, 225, 0.72); }
.track__rail { max-width: 1040px; margin: 0 auto; }
.track__rail .postmark-row { padding: 18px 0; }
.track__rail .postmark { --postmark-size: clamp(64px, 8vw, 96px); transition: color 0.4s var(--ease); }
/* Pendiente: se atenúa el trazo, no el disco de fondo (así el riel no se lee a través del sello) */
.track__rail .tracker__node .postmark { --postmark-color: rgba(245, 238, 225, 0.62); opacity: 1; }
/* El riel enhebra el centro de los sellos (la fila incluye etiqueta y subtítulo, 50 % queda por debajo) */
@media (min-width: 701px) {
  .track__rail .postmark-row > .ribbon--rail { top: calc(18px + clamp(64px, 8vw, 96px) / 2); }
  .cot__steps .postmark-row > .ribbon--rail { top: calc(14px + 36px); }
}
.track__rail .tracker__node.is-done .postmark, .track__rail .tracker__node.is-active .postmark { --postmark-color: var(--orange-hot); opacity: 1; }
.track__rail .tracker__node.is-active .postmark { filter: drop-shadow(0 0 12px rgba(245, 26, 24, 0.55)); }
.track__rail .postmark-row__lbl { color: var(--cream); }
.track__rail .postmark-row__sub { color: rgba(245, 238, 225, 0.55); opacity: 1; }
.track__rail .tracker__node:not(.is-done):not(.is-active) .postmark-row__lbl { color: rgba(245, 238, 225, 0.58); }
.track__status { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: clamp(22px, 3vw, 36px) auto 0; }
.track__status-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 238, 225, 0.62); }
.track__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; max-width: 620px; margin: clamp(30px, 4vw, 52px) auto 0; }
.track__card { color: var(--ink); padding: clamp(18px, 2.4vw, 26px); }
.track__card label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.track__row { display: flex; gap: 8px; }
.track__row input { flex: 1; min-width: 0; padding: 12px 14px; border: 2px solid var(--brand-navy); border-radius: 12px; background: var(--cream-2); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.track__row input::placeholder { text-transform: none; color: rgba(8, 29, 76, 0.62); letter-spacing: 0.04em; }
.track__row input:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.track__hint { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
.track__hint a { color: var(--brand-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.track__boxy { width: 96px; }
@media (max-width: 760px) {
  .track__form { grid-template-columns: 1fr; }
  .track__boxy { display: none; }   /* el Boxy grande de esta pantalla es el avión de papel de #cobertura */
}
@media (max-width: 700px) {
  .track__rail .postmark { --postmark-size: 64px; }
  .track__rail .postmark-row--stack { padding-left: 34px; row-gap: 14px; }
  .track__rail .postmark-row--stack > .ribbon--rail { --rail-x: 6px; left: 59px; }   /* 34 px de padding + radio 32 − 7: la cinta cruza el centro de los sellos */
  .cot__steps .postmark-row--stack > .ribbon--rail { left: 55px; }
}
@media (max-width: 480px) {
  .track__row { flex-direction: column; }
  .track__row .btn { justify-content: center; }
}

/* ── 7. Tiendas (#tiendas): Boxy con bolsas + pared de stickers con logos navy mono ── */
.shops { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.shops__figure { display: flex; justify-content: center; }
.shops__boxy { width: clamp(180px, 26vw, 360px); margin: 0 auto; }
.shops__wall { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: center; margin-top: 24px; }
.shops__wall .sticker { min-height: 46px; rotate: var(--t, 0deg); }
.shops__wall .sticker:nth-child(6n+1) { --t: -4deg; }
.shops__wall .sticker:nth-child(6n+2) { --t: 1deg; }
.shops__wall .sticker:nth-child(6n+3) { --t: 3deg; }
.shops__wall .sticker:nth-child(6n+4) { --t: -2deg; }
.shops__wall .sticker:nth-child(6n+5) { --t: 5deg; }
.shops__wall .sticker:nth-child(6n+6) { --t: -1deg; }
.shops__wall .sticker:hover { translate: 0 -1px; }
@media (max-width: 860px) {
  .shops { grid-template-columns: 1fr; }
  .shops__figure { display: flex; justify-content: center; }
.shops__boxy { width: clamp(160px, 44vw, 220px); }
}
@media (max-width: 480px) {
  .shops__wall { gap: 12px 10px; }
  .shops__wall .sticker { padding: 6px 12px; min-height: 40px; }
  .sticker .blogo { height: 15px; }
}

/* ── 8. Cotiza por foto (#cotiza): tres matasellos sobre un riel corto + marco de encuadre con la caja ── */
.cot { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cot__steps { max-width: 540px; margin: 24px 0 28px; }
.cot__steps .postmark-row { padding: 14px 0; }
.cot__steps .postmark-row__lbl { color: var(--brand-navy); }
.cot__steps .postmark-row__sub { color: var(--ink-mute); opacity: 1; }
.cot__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn--navy { background: var(--brand-navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy); }
.btn--navy .wa { width: 18px; height: 18px; flex: none; }
.cot__stage { position: relative; padding: clamp(10px, 2vw, 28px) clamp(10px, 2vw, 28px) clamp(10px, 2vw, 28px) clamp(30px, 5vw, 64px); }
.cot__frame { position: relative; padding: clamp(18px, 2.4vw, 28px); }
.cot__frame::before, .cot__frame::after, .cot__corners::before, .cot__corners::after { content: ''; position: absolute; width: 28px; height: 28px; border: 0 solid var(--brand-navy); pointer-events: none; z-index: 2; }
.cot__frame::before { top: 9px; left: 9px; border-top-width: 2px; border-left-width: 2px; }
.cot__frame::after { bottom: 9px; right: 9px; border-bottom-width: 2px; border-right-width: 2px; }
.cot__corners::before { top: 9px; right: 9px; border-top-width: 2px; border-right-width: 2px; }
.cot__corners::after { bottom: 9px; left: 9px; border-bottom-width: 2px; border-left-width: 2px; }
.cot__frame img { display: block; width: 100%; height: auto; border-radius: 6px; }
.cot__weight { position: absolute; right: 7%; bottom: 10%; z-index: 3; }
.cot__boxy { position: absolute; left: -2%; bottom: -6%; width: clamp(150px, 17vw, 220px); z-index: 4; }
@media (max-width: 860px) {
  .cot { grid-template-columns: 1fr; }
  .cot__stage { padding: 8px 8px 60px 8px; max-width: 520px; }
  .cot__boxy { width: 150px; left: 0; bottom: -10px; }
}

/* ── 9. App (#app): Boxy asoma tras el teléfono del PNG; sobre su pantalla, el rastreo en vertical ── */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.app__copy .lede { color: rgba(245, 238, 225, 0.75); }
.app__badges { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 22px; }
.app__stage { position: relative; width: min(100%, 520px); margin: 0 auto; container-type: inline-size; }
.app__stage > img { display: block; width: 100%; height: auto; }
.app__screen { position: absolute; left: 46.5%; top: 5%; width: 49%; height: 90%; display: flex; flex-direction: column; padding: 9% 5% 6% 6%; color: var(--ink); }
.app__screen-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4%; font-family: var(--font-mono); font-size: clamp(7px, 1.9cqw, 10px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.app__screen-head .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); display: inline-block; margin-right: 4px; vertical-align: middle; }
.app__screen .postmark-row--v { flex: 1; padding-left: clamp(14px, 4.5cqw, 24px); row-gap: 6px; }
.app__screen .postmark-row--v > .ribbon--rail { width: 10px; --ribbon-fs: 7px; }
.app__screen .postmark { --postmark-size: clamp(26px, 7.5cqw, 40px); --postmark-color: var(--brand-red-2); }
.app__screen .postmark-row .postmark { --postmark-bg: var(--cream-2); }
.app__screen .postmark-row__item { gap: clamp(5px, 1.8cqw, 10px); }
.app__screen .postmark-row__item.is-wait .postmark { --postmark-color: var(--brand-navy); opacity: 0.32; }
.app__screen .postmark-row__lbl { font-size: clamp(8.5px, 2.6cqw, 13px); color: var(--brand-navy); }
.app__screen .postmark-row__sub { font-size: clamp(6.5px, 1.8cqw, 9px); color: var(--ink-mute); opacity: 1; }
.app__screen-foot { margin-top: 4%; padding-top: 4%; border-top: 1px dashed rgba(8, 29, 76, 0.25); font-family: var(--font-mono); font-size: clamp(6.5px, 1.8cqw, 9.5px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; overflow: hidden; }

/* ── La pantalla del teléfono, en marcha ──
   La sección promete «rastreo en vivo» y la pantalla estaba quieta. Se anima
   lo que la sección dice, no el dibujo: el punto late, el riel sube y los
   cinco estados se encienden en orden. Es lento a propósito: tiene que
   acompañar la lectura, no robársela. */
@keyframes app-late { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: 0.3; scale: 0.75; } }
@keyframes app-riel { 0%, 6% { clip-path: inset(100% 0 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes app-parada { from { opacity: 0.28; } to { opacity: 1; } }

.reveal.is-in .app__screen-head .ld { animation: app-late 1.9s ease-in-out infinite; }
.reveal.is-in .app__screen .postmark-row--v > .ribbon--rail { animation: app-riel 5.4s ease-out 0.5s both; }
.app__screen .postmark-row__item { opacity: 0.28; }
.reveal.is-in .app__screen .postmark-row__item {
  animation: app-parada 0.45s ease-out calc(0.8s + var(--p, 1) * 0.85s) both;
}
/* La última parada se queda a medias a propósito: la caja todavía va en camino
   y encenderla del todo diría que ya llegó. */
.reveal.is-in .app__screen .postmark-row__item.is-wait { animation: none; opacity: 0.34; }

@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .app__screen-head .ld,
  .reveal.is-in .app__screen .postmark-row--v > .ribbon--rail { animation: none; }
  .app__screen .postmark-row__item,
  .reveal.is-in .app__screen .postmark-row__item { animation: none; opacity: 1; }
  .reveal.is-in .app__screen .postmark-row__item.is-wait { opacity: 0.34; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app__stage { width: min(100%, 360px); }
}

/* ── 10. Garantía (#garantia): Boxy con el sello + póliza kraft sellada ── */
.gar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.gar__boxy { width: clamp(180px, 20vw, 260px); margin: clamp(16px, 3vw, 32px) auto 0; }
.policy { position: relative; max-width: 580px; margin-left: auto; padding: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px) clamp(28px, 3vw, 42px); }
.policy__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.policy__head .tape { white-space: nowrap; }
.policy__title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 8px; color: var(--brand-navy); }
.policy__lede { font-size: 14.5px; line-height: 1.55; color: rgba(8, 29, 76, 0.78); }
.policy .incl { margin-top: 14px; }
.policy .incl li { font-size: 15px; }
.policy .incl li b { color: var(--brand-navy); }
.policy__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; padding-right: 96px; border-top: 1px dashed rgba(8, 29, 76, 0.28); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.policy__foot .barcode { height: 26px; width: 120px; }
.policy__stamp { right: -8px; bottom: -30px; top: auto; width: 128px; height: 128px; transform: rotate(-12deg); color: var(--brand-red); opacity: 0.88; mix-blend-mode: multiply; }
@media (max-width: 860px) {
  .gar { grid-template-columns: 1fr; }
  .gar__boxy { width: clamp(150px, 42vw, 200px); }
  .policy { margin-left: 0; margin-top: 40px; }
}
@media (max-width: 480px) { .policy__stamp { width: 104px; height: 104px; right: -6px; bottom: -18px; } }

/* ── 11. Compramos por ti (#compramos): orden de compra en kraft ── */
/* El paso a paso: cuatro tarjetas a ancho completo. El número es grande a
   propósito — es lo que ordena la lectura cuando alguien viene barriendo. */
.pasos { list-style: none; margin: clamp(34px, 4.5vw, 60px) 0 clamp(38px, 5vw, 66px); padding: 0;
         display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.pasos__it { position: relative; padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 30px);
             background: var(--cream-2); border: 2px solid var(--brand-navy); border-radius: var(--r-card, 18px);
             box-shadow: 5px 5px 0 rgba(8, 29, 76, 0.12); }
.pasos__it::before { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; height: 7px;
                     background: var(--tape-red); border-radius: var(--r-card, 18px) var(--r-card, 18px) 0 0; }
.pasos__n { display: block; font-family: var(--font-mono); font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
            line-height: 1; letter-spacing: -0.02em; color: var(--brand-navy); opacity: 0.26; margin-bottom: 10px; }
.pasos__t { font-family: var(--font-display); font-size: clamp(19px, 1.65vw, 24px); font-weight: 700;
            line-height: 1.15; letter-spacing: -0.02em; color: var(--brand-navy); margin: 0 0 8px; }
.pasos__d { font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.62; color: rgba(8, 29, 76, 0.82); margin: 0; }

.buy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.buy__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.buy__say { margin-top: 26px; }
.buy__say .buy__boxy { width: clamp(104px, 13vw, 180px); flex: none; }
.order { position: relative; max-width: 540px; margin-left: auto; padding: clamp(22px, 3vw, 34px); rotate: 0.6deg; }
.order__fields { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 14px 0 6px; padding: 0; }
.order__fields li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px dashed rgba(8, 29, 76, 0.32); }
.order__fields b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-navy); }
.order__fields span { font-size: 15px; font-weight: 500; color: rgba(8, 29, 76, 0.84); }
.order__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.order__foot .barcode { height: 28px; width: 150px; }
.order > .postmark--corner { top: -22px; right: -18px; }
.buy__if { margin-top: 22px; }
.buy__if-title { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
@media (max-width: 860px) {
  .buy { grid-template-columns: 1fr; }
  .order { margin-left: 0; margin-top: 30px; rotate: 0deg; }
}
@media (max-width: 480px) {
  .order__fields li { grid-template-columns: 1fr; gap: 4px; }
  .order > .postmark--corner { --postmark-size: 72px; top: -14px; right: 8px; }
  .buy__actions .btn { white-space: normal; text-align: left; }
  .pasos { grid-template-columns: 1fr; gap: 14px; }
}

/* ── 12. Tarifas (#tarifas): dos tickets grandes + bloque estrecho de casillero (5/5/2), calculadora real y tabla plana ── */
.rates { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2.4fr); gap: clamp(18px, 2.6vw, 32px); align-items: start; }
.rate { position: relative; padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 34px) clamp(24px, 3vw, 34px); }
.rate--air { rotate: -0.6deg; margin-top: 10px; }
.rate--sea { rotate: 0.6deg; margin-top: clamp(20px, 3vw, 48px); background-color: var(--kraft-2); }
.rate__tape { position: absolute; top: -18px; left: 20px; z-index: 2; }
.rate__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.rate__name { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.025em; color: var(--brand-navy); }
.rate__days { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.rate__price { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.04em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.rate__price small { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-mute); }
.rate__for { font-size: 14.5px; line-height: 1.5; color: rgba(8, 29, 76, 0.78); padding-top: 12px; border-top: 1px dashed rgba(8, 29, 76, 0.28); }
.rate__for b { color: var(--brand-navy); }
.rate .btn { margin-top: 16px; }
.rate--box { padding: clamp(18px, 2.4vw, 26px); background: var(--cream-2); border: 2px solid var(--brand-navy); border-radius: 12px; box-shadow: var(--shadow-hard); margin-top: clamp(28px, 4vw, 64px); }
.rate--box h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.1; color: var(--brand-navy); }
.rate--box ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.4; color: rgba(8, 29, 76, 0.82); }
.rate--box li { display: flex; gap: 8px; align-items: flex-start; }
.rate--box li .check { flex: none; background: var(--brand-navy); margin-top: 1px; width: 16px; height: 16px; }
.rate--box .btn { margin-top: 16px; }
.calc-v9 { margin-top: clamp(30px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding: clamp(20px, 3vw, 32px); }
.calc-v9__fields { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(240px, 1.3fr) auto; gap: 12px; align-items: end; }
.calc-v9__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calc-v9 label { white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.calc-v9 input, .calc-v9 select { width: 100%; min-width: 0; padding: 12px 14px; border: 2px solid var(--brand-navy); border-radius: 12px; background: var(--cream-2); font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.calc-v9 input:focus-visible, .calc-v9 select:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.calc-v9__result { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding-top: 12px; border-top: 1px dashed rgba(8, 29, 76, 0.28); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.calc-v9__result strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.03em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.calc-v9__aside .boxy { width: 96px; }
.rate-table { width: 100%; border-collapse: collapse; margin-top: clamp(24px, 3vw, 40px); font-size: 14.5px; color: var(--ink); }
.rate-table th, .rate-table td { padding: 12px 10px; text-align: left; border-top: 1px solid var(--brand-navy); vertical-align: top; }
.rate-table th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.rate-table tbody tr:last-child td { border-bottom: 1px solid var(--brand-navy); }
.rate-table td:first-child { color: var(--ink-mute); }
.rate-table td .check { width: 16px; height: 16px; background: var(--brand-navy); margin-right: 6px; vertical-align: -3px; }
.compare__note { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; }
.tarifas__more { margin-top: 28px; }
@media (max-width: 960px) {
  .rates { grid-template-columns: 1fr 1fr; }
  .rate--box { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 640px) {
  .rates { grid-template-columns: 1fr; }
  .rate--sea { margin-top: 26px; }
  .calc-v9 { grid-template-columns: 1fr; }
  .calc-v9__fields { grid-template-columns: 1fr; }
  .calc-v9__fields .btn { width: 100%; justify-content: center; }
  .rate-table { font-size: 13.5px; }
  .rate-table th, .rate-table td { padding: 10px 6px; }
}

/* ── 13. Testimonios (#testimonios): burbujas de WhatsApp sobre cartón ── */
.testi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); align-items: start; }
.testi > :nth-child(2), .testi > :nth-child(4) { margin-top: clamp(16px, 3vw, 44px); }
.bubble { position: relative; padding: 18px 20px 14px; background: var(--cream-2); border: 1px solid var(--paper-line-2); border-radius: 14px; border-top-left-radius: 4px; box-shadow: var(--shadow-navy); }
.bubble::before { content: ''; position: absolute; left: -9px; top: 0; width: 12px; height: 12px; background: var(--cream-2); clip-path: polygon(100% 0, 100% 100%, 0 0); }
.bubble__q { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.bubble__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(8, 29, 76, 0.2); }
.bubble__who { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--brand-navy); }
.bubble__who small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.bubble__ticks { font-family: var(--font-mono); font-size: 11px; letter-spacing: -0.1em; color: var(--brand-blue); }
.bubble .postmark { --postmark-color: var(--brand-red-2); flex: none; }
@media (max-width: 640px) {
  .testi { grid-template-columns: 1fr; }
  .testi > :nth-child(2), .testi > :nth-child(4) { margin-top: 0; }
  .bubble { margin-left: 8px; }
}

/* ── 14. Comerciantes (#comerciantes): Boxy con carretilla + stickers ── */
.merch { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.merch__boxy { width: clamp(180px, 24vw, 320px); margin: 0 auto; }
.merchant-stickers { margin: 4px 0 18px; }
.merchant-stickers .sticker { white-space: normal; }
.merchant-note { font-size: 15px; line-height: 1.6; color: rgba(8, 29, 76, 0.8); max-width: 56ch; }
.merchant-note b { color: var(--brand-navy); }
.merch__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 860px) {
  .merch { grid-template-columns: 1fr; }
  .merch__boxy { width: clamp(160px, 44vw, 220px); }
}

/* ── 15. FAQ (#faq): details/summary a todo ancho con líneas navy 1 px ── */
.faq-v9 { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--brand-navy); }
.faq-v9 details { border-bottom: 1px solid var(--brand-navy); }
.faq-v9 summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.7vw, 22px); letter-spacing: -0.015em; line-height: 1.3; color: var(--brand-navy); }
.faq-v9 summary::-webkit-details-marker { display: none; }
.faq-v9 summary::after { content: ''; flex: none; width: 11px; height: 11px; margin: 0 8px 4px 0; border-right: 2px solid var(--brand-navy); border-bottom: 2px solid var(--brand-navy); transform: rotate(45deg); transition: transform 0.35s var(--ease); }
.faq-v9 details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-v9 summary:hover { color: var(--red-text); }
.faq-v9 summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.faq-v9__a { padding: 0 0 24px; font-size: 16px; line-height: 1.65; color: rgba(8, 29, 76, 0.72); max-width: 700px; }
.faq-v9__a a { color: var(--brand-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── 16. Referidos (#referidos): sticker rojo + Boxy guiñando ── */
.refer-v9 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.refer-v9__stickers { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 18px; }
.refer-v9__boxy { position: relative; z-index: 2; width: 120px; }
.refer .sticker--red { --sticker-shadow: var(--brand-navy); }
@media (max-width: 640px) {
  .refer-v9 { grid-template-columns: minmax(0, 1fr); }
  .refer-v9__stickers .sticker { white-space: normal; text-align: center; }
  .refer-v9__boxy { width: 110px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 17. Cierre (#contacto): la cinta termina bajo Boxy con «ENTREGADO ✓» ── */
.final { background-color: var(--navy-night); padding: clamp(88px, 12vw, 170px) 0 clamp(56px, 7vw, 100px); }
.final__inner { text-align: left; max-width: none; }
.final__copy { max-width: 900px; }
.final h2 { font-size: clamp(56px, 10vw, 140px); font-weight: 700; line-height: 0.96; letter-spacing: -0.03em; margin-bottom: 22px; }
.final h2 .accent { display: inline; color: var(--brand-red); }
.final__lede { margin: 0 0 28px; max-width: 52ch; text-align: left; }
.final__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 14px; }
.final__cta-sticker { background: var(--cream-2); color: var(--brand-navy); border: 2px solid var(--brand-navy); box-shadow: 4px 4px 0 var(--brand-red); }
.final__cta-sticker:hover { background: var(--white); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--brand-red); filter: none; }
.final__cta-sticker:active { transform: translate(2px, 2px) scale(1); box-shadow: 2px 2px 0 var(--brand-red); }
.final .btn--ghost { color: var(--cream); border: 2px solid rgba(245, 238, 225, 0.5); }
.final .btn--ghost:hover { border-color: var(--cream); background: rgba(245, 238, 225, 0.08); }
.final .btn--wa .wa { width: 18px; height: 18px; }
/* La cinta cruza de lado a lado. Antes medía «hasta el 66 %» y dejaba la
   mitad derecha en blanco, que es lo que hacía ver la sección partida. */
.final__stage { position: relative; height: clamp(212px, 25vw, 352px); margin-top: clamp(14px, 1.8vw, 26px); }
.final__ribbon.ribbon {
  position: absolute; left: 50%; top: 70%; translate: -50% -50%;
  width: 124vw; margin-left: 0;
  /* Tamaño de cinta de embalaje, no de marquesina: la del hero va a 46 px y
     aquí eso convierte la banda en un tajo rojo. */
  --ribbon-h: clamp(46px, 5.2vw, 74px);
  --ribbon-fs: clamp(13px, 1.55vw, 22px);
  --ribbon-rot: -2.5deg;
  letter-spacing: 0.16em;
}
/* El matasellos va estampado sobre la cinta: crema sobre rojo (rojo sobre rojo no se ve) */
/* El sello se estampa SOBRE la cinta: disco navy detras para que se lea (crema sobre rojo no contrasta). */
/* El sello cierra el recorrido a la derecha. Estaba al 62 % y partía la
   palabra VENEZUELA justo por el medio. */
.final__stamp { position: absolute; left: 22%; top: 56%; translate: -50% -50%; z-index: 3; --postmark-rot: -9deg; --postmark-color: var(--cream); --postmark-size: clamp(72px, 7.2vw, 100px); filter: drop-shadow(3px 4px 0 rgba(6, 21, 58, 0.35)); }
.final__stamp .postmark__ring { fill: var(--navy-night); }
.final__stamp .postmark__ring--in { fill: none; }
.final .final__stamp { --postmark-color: var(--cream); }
/* Boxy camina sobre la cinta: sus pies quedan en el borde alto de la banda. */
.final__boxy { position: absolute; left: 63%; translate: -50% 0; bottom: 33%; width: clamp(165px, 20vw, 290px); z-index: 2; }
.final__contact { margin-top: clamp(40px, 5vw, 64px); padding-top: 36px; justify-content: flex-start; }
@media (max-width: 760px) {
  .final__stage { height: 232px; margin-top: 10px; }
  .final__ribbon.ribbon { width: 134vw; top: 66%; --ribbon-rot: -3.5deg; --ribbon-h: 44px; --ribbon-fs: 12.5px; }
  /* En móvil el sello va al borde derecho: en el centro pisaba el texto. */
  .final__stamp { left: 20%; top: 56%; translate: -50% -50%; --postmark-size: 64px; }
  .final__boxy { left: 68%; translate: -50% 0; right: auto; bottom: 31%; width: 150px; }
  .final__contact { gap: 26px; }
}

/* ── Modal de agendar: cinta pequeña en la cabecera; Boxy feliz en el éxito ── */
.modal__tape { display: inline-flex; margin: 0 0 8px; }
.modal__boxy { width: 96px; margin: 0 auto 4px; }

/* ── Movimiento reducido: todo quieto y en estado final ── */
@media (prefers-reduced-motion: reduce) {
  .hero-v9__title .line > span { animation: none; transform: none; }
  .faq-v9 summary::after { transition: none; }
  .final__cta-sticker:hover, .final__cta-sticker:active { transform: none; }
  .shops__wall .sticker:hover { translate: 0 0; }
}

/* ╔════════ CLIENTE REGISTRADO · Tu casillero de un vistazo ════════╗
   La rellena assets/app-cliente.js solo si hay sesion; para un visitante
   el contenedor queda con [hidden] y la Landing no cambia. */
.cliente-wrap { background: var(--cream); padding: clamp(18px, 2.4vw, 30px) 0 0; }
.cliente__card {
  position: relative;
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  background: var(--kraft-2, #EDE0C6);
  border: 2px solid var(--brand-navy);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--brand-navy);
}
.cliente__card::before {
  content: ''; position: absolute; top: -9px; left: clamp(20px, 6%, 60px);
  width: clamp(70px, 9%, 110px); height: 18px;
  background: var(--brand-red); box-shadow: 0 3px 0 var(--brand-red-2);
  rotate: -2deg;
}
.cliente__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cliente__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-navy); color: var(--cream);
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
}
.cliente__quien { display: grid; gap: 2px; min-width: 0; }
.cliente__hola { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -0.02em; color: var(--brand-navy); line-height: 1.1; }
.cliente__sub { font-size: 13.5px; color: var(--ink-mute, rgba(8, 29, 76, 0.68)); }
.cliente__suite { margin-left: auto; }
.cliente__chips { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap; border-top: 1px dashed rgba(8, 29, 76, 0.18); padding-top: 14px; }
.cliente__chip { display: flex; align-items: baseline; gap: 7px; }
.cliente__chip b { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.cliente__chip span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute, rgba(8, 29, 76, 0.68)); }
.cliente__ultimo { display: grid; gap: 2px; margin-left: auto; text-align: right; }
.cliente__ultimo-lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-text); }   /* red-2 sobre kraft = 4.26:1 */
.cliente__ultimo-val { font-size: 14px; color: var(--brand-navy); }
.cliente__ultimo-val b { font-family: var(--font-mono); font-weight: 700; }
.cliente__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.cliente__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 18px; border-radius: var(--r-btn);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  background: var(--cream-2); color: var(--brand-navy); border: 2px solid var(--brand-navy);
  cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.cliente__btn--primary { background: var(--brand-navy); color: var(--cream); box-shadow: 3px 3px 0 var(--brand-red); }
.cliente__btn--copy.is-ok { background: var(--brand-navy); color: var(--cream); }
.cliente__btn:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
@media (hover: hover) {
  .cliente__btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--brand-navy); }
  .cliente__btn--primary:hover { box-shadow: 5px 5px 0 var(--brand-red); }
}
.cliente__btn:active { transform: translate(1px, 1px); box-shadow: none; }
@media (min-width: 1100px) {
  .cliente__card { grid-template-columns: minmax(240px, auto) minmax(0, 1fr); grid-template-areas: "head chips" "acts acts"; align-items: center; }
  .cliente__head { grid-area: head; }
  .cliente__chips { grid-area: chips; border-top: 0; padding-top: 0; padding-left: clamp(20px, 3vw, 44px); border-left: 1px dashed rgba(8, 29, 76, 0.18); }
  .cliente__acts { grid-area: acts; padding-top: 14px; border-top: 1px dashed rgba(8, 29, 76, 0.18); }
}
@media (max-width: 760px) {
  .cliente__card { box-shadow: 4px 4px 0 var(--brand-navy); border-radius: 14px; }
  .cliente__suite { margin-left: 0; }
  .cliente__ultimo { margin-left: 0; text-align: left; width: 100%; }
  .cliente__acts { display: grid; grid-template-columns: 1fr 1fr; }
  .cliente__btn--primary, .cliente__btn--copy { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .cliente__acts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cliente__btn { transition: none; }
  .cliente__btn:hover, .cliente__btn:active { transform: none; }
}

/* ── Cliente sin casillero todavía: la barra dice la verdad, no un número ── */
.cliente__card--wait { background: var(--cream-2); }
.cliente__suite--wait { display: inline-flex; align-items: center; gap: 8px; }
.cliente__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-red); position: relative; flex: none; }
.cliente__pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-red);
  opacity: 0; animation: cli-pulse 1.9s var(--ease) infinite;
}
@keyframes cli-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.9); opacity: 0; } }
.cliente__btn--wa { background: #25D366; border-color: var(--brand-navy); color: #06351B; }

/* ── La barra se pega como una etiqueta: entra, no aparece ── */
.cliente__card { opacity: 0; transform: translateY(16px) rotate(-0.4deg); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.cliente__card.is-in { opacity: 1; transform: none; }
.cliente__card::before { transform-origin: left center; transform: scaleX(0); transition: transform 0.5s 0.18s var(--ease); }
.cliente__card.is-in::before { transform: scaleX(1); }
.cliente__avatar { transition: transform 0.45s 0.3s var(--ease); }
.cliente__card.is-in .cliente__avatar { animation: cli-avatar 0.5s 0.28s var(--ease) both; }
@keyframes cli-avatar { 0% { transform: scale(0.4) rotate(-18deg); opacity: 0; } 62% { transform: scale(1.14) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.cliente__chip b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .cliente__card { opacity: 1; transform: none; transition: none; }
  .cliente__card::before { transform: scaleX(1); transition: none; }
  .cliente__card.is-in .cliente__avatar { animation: none; }
  .cliente__pulse::after { animation: none; }
}

/* ── Reseñas: el hueco honesto mientras no haya reales ── */
.testi-soon { display: grid; place-items: center; }
.testi-soon__card { max-width: 62ch; text-align: center; display: grid; gap: 12px; justify-items: center; padding: clamp(22px, 3vw, 32px); }
.testi-soon__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); color: var(--brand-navy); }
.testi-soon__p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(8,29,76,0.72); }
.testi-soon__card .btn svg { width: 18px; height: 18px; }

/* ── Riel del último envío dentro de la barra de cliente ──────────────
   Cuatro paradas del tramo Venezuela en pequeño. La que va en curso se
   marca en rojo y late; las cumplidas quedan en navy. */
.cliente__rail { list-style: none; display: flex; align-items: flex-start; gap: 0; margin: 8px 0 0; padding: 0; }
.cliente__rail-step { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 5px; text-align: center; }
.cliente__rail-step span {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.25;
  color: rgba(8,29,76,0.68); overflow-wrap: anywhere;   /* 0.5 sobre kraft = 3.1:1 */
}
.cliente__rail-step::before {
  content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px;
  background: rgba(8,29,76,0.16);
}
.cliente__rail-step:first-child::before { display: none; }
.cliente__rail-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cream-2); border: 2px solid rgba(8,29,76,0.28); position: relative; z-index: 1; }
.cliente__rail-step.is-done .cliente__rail-dot { background: var(--brand-navy); border-color: var(--brand-navy); }
.cliente__rail-step.is-done::before, .cliente__rail-step.is-now::before { background: var(--brand-navy); }
.cliente__rail-step.is-done span { color: rgba(8,29,76,0.72); }
.cliente__rail-step.is-now .cliente__rail-dot { background: var(--brand-red); border-color: var(--brand-red); }
.cliente__rail-step.is-now span { color: var(--red-text); font-weight: 700; }
.cliente__rail-step.is-now .cliente__rail-dot::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--brand-red);
  opacity: 0; animation: cli-pulse 1.9s var(--ease) infinite;
}
@media (min-width: 1100px) { .cliente__ultimo { min-width: 230px; } }
@media (prefers-reduced-motion: reduce) { .cliente__rail-step.is-now .cliente__rail-dot::after { animation: none; } }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  MAPA DE COBERTURA · Miami → los cuatro estados                       ║
   ║  Las paradas están puestas por su longitud real (Valencia -68.00,     ║
   ║  Caracas -66.88, Barlovento -66.10, Barcelona -64.68): el orden y las  ║
   ║  distancias de oeste a este son las de verdad.                        ║
   ║  La animación arranca cuando la sección entra en pantalla (.is-in).   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.vzmap { position: relative; margin-top: clamp(28px, 4vw, 48px); }
.vzmap__svg { display: block; width: 100%; height: auto; overflow: visible; }
.vzmap__svg--v { display: none; }
@media (max-width: 700px) {
  .vzmap__svg--h { display: none; }
  .vzmap__svg--v { display: block; }
}

/* Mar, costa y tierra */
.vzmap__sea-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; fill: rgba(245, 238, 225, 0.55); }   /* 0.42 sobre navy = 3.6:1 */
.vzmap__land { fill: rgba(245, 238, 225, 0.13); }
/* Guía fina del punto a su etiqueta: los cuatro estados son vecinos y
   los nombres no caben debajo de cada punto sin pisarse. */
.vzmap__leader { fill: none; stroke: rgba(245, 238, 225, 0.34); stroke-width: 1; }
.vzmap__coast { fill: none; stroke: rgba(245, 238, 225, 0.55); stroke-width: 2; stroke-linecap: round; }

/* La ruta: cinta roja de puntos que camina hacia Venezuela */
.vzmap__route { fill: none; stroke: var(--brand-red); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 8; opacity: 0; }
.reveal.is-in .vzmap__route { opacity: 1; transition: opacity 0.6s var(--ease); animation: vz-march 1.1s linear infinite; }

/* El avioncito hace el viaje una vez */
.vzmap__plane circle { fill: var(--orange-hot); }
.vzmap__plane { opacity: 0; }
@supports (offset-path: path("M0 0 L1 1")) {
  .reveal.is-in .vzmap__svg--h .vzmap__plane { offset-path: path("M23.4 14.3 C 57.3 53.1 215.3 67.4 305.7 116.4"); animation: vz-fly 2.8s var(--ease) 0.35s both; }
  .reveal.is-in .vzmap__svg--v .vzmap__plane { offset-path: path("M14.4 11.8 C 34.5 36.5 128.0 45.6 181.5 76.8"); animation: vz-fly 2.8s var(--ease) 0.35s both; }
}

/* Origen y destinos */
.vzmap__hub-glow { fill: var(--brand-red); opacity: 0.22; }
.vzmap__hub-dot { fill: var(--brand-red); }
.vzmap__hub-lbl { font-family: var(--font-display); font-weight: 700; font-size: 15px; fill: var(--cream); }
.vzmap__lbl { font-family: var(--font-display); font-weight: 700; font-size: 14px; fill: var(--cream); }
.vzmap__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; fill: rgba(245, 238, 225, 0.66); }
.vzmap__dot { fill: var(--orange-hot); stroke: var(--navy-night); stroke-width: 2; }
.vzmap__stop--main .vzmap__dot { fill: var(--brand-red); }
.vzmap__pulse { fill: var(--brand-red); opacity: 0; }

.vzmap__stop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal.is-in .vzmap__stop { animation: vz-pop 0.5s var(--ease) calc(1s + var(--i) * 0.24s) both; }
.reveal.is-in .vzmap__stop--main .vzmap__pulse { animation: vz-pulse 2.4s var(--ease) 2s infinite; }
.vzmap__boxy { position: absolute; right: -2%; top: -14%; width: clamp(84px, 9vw, 126px); height: auto; }
/* ── Mapa de cobertura ──
   El contorno es el real. Los cuatro estados se dibujan encima y se encienden
   en orden; el resto del país queda apagado a propósito: la sección tiene que
   dejar claro dónde entregamos y dónde todavía no. */
.vzmap__st-fill { fill: rgba(255, 61, 59, 0.26); stroke: var(--orange-hot); stroke-width: 1.6; stroke-linejoin: round; }
.vzmap__st--main .vzmap__st-fill { fill: rgba(255, 61, 59, 0.42); stroke-width: 2; }
.vzmap__st { opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal.is-in .vzmap__st { animation: vz-pop 0.5s var(--ease) calc(1.05s + var(--i) * 0.26s) both; }
.reveal.is-in .vzmap__st--main .vzmap__pulse { animation: vz-pulse 2.4s var(--ease) 2.2s infinite; }
.vzmap__nota { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(245, 238, 225, 0.74); max-width: 56ch; }
.vzmap__boxy.boxyanim { position: absolute; right: -3%; top: -14%; width: clamp(92px, 14vw, 200px); }
@media (max-width: 700px) { .vzmap__boxy.boxyanim { right: -2%; top: -6%; width: 92px; } }
@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .vzmap__st { animation: none; opacity: 1; }
  .vzmap__st { opacity: 1; }
  .reveal.is-in .vzmap__st--main .vzmap__pulse { animation: none; }
}
@media (max-width: 700px) { .vzmap__boxy { right: -2%; top: -6%; width: 84px; } }

@keyframes vz-march { to { stroke-dashoffset: -16; } }
@keyframes vz-fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes vz-pop {
  from { opacity: 0; transform: translateY(9px) scale(0.82); }
  62%  { opacity: 1; transform: translateY(0) scale(1.08); }
  to   { opacity: 1; transform: none; }
}
@keyframes vz-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Los cuatro estados, también en texto: el mapa no es la única fuente */
.vzmap__legend {
  list-style: none; margin: clamp(20px, 3vw, 30px) 0 0; padding: 0;
  display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.vzmap__legend li {
  display: grid; gap: 2px; padding-left: 16px; position: relative;
  border-left: 2px solid rgba(245, 238, 225, 0.18);
}
.vzmap__legend li::before {
  content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--orange-hot);
}
.vzmap__legend li:first-child::before { background: var(--brand-red); }
.vzmap__legend b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--cream); }
.vzmap__legend span { font-size: 13px; line-height: 1.45; color: rgba(245, 238, 225, 0.72); }

@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .vzmap__route { animation: none; }
  .reveal.is-in .vzmap__stop { animation: none; opacity: 1; }
  .vzmap__stop { opacity: 1; }
  .reveal.is-in .vzmap__plane { animation: none; opacity: 0; }
  .reveal.is-in .vzmap__stop--main .vzmap__pulse { animation: none; }
}

/* Los Boxy de apoyo, ya animados: el ancho lo lleva el envoltorio .boxyanim
   porque el <img> de dentro va al 100 %. */
.boxyanim.track__boxy { width: clamp(104px, 16vw, 250px); }
.boxyanim.merch__boxy { width: clamp(132px, 20vw, 300px); }
.boxyanim.gar__boxy { width: clamp(132px, 20vw, 300px); }
.boxyanim.calc-v9__boxy { width: clamp(100px, 14vw, 210px); flex: none; }

.boxyanim.refer-v9__boxy { width: clamp(106px, 16vw, 235px); }
.boxyanim.tkt__boxy { width: clamp(116px, 18vw, 265px); }
.boxyanim.gracias__boxy { width: clamp(130px, 19vw, 250px); margin: 0 auto 8px; }