/* ==========================================================================
   Urbanet — sistema visual v3 · "periódico"
   Reglas del sistema (no se rompen):
   1. Una sola familia: Schibsted Grotesk.
   2. Negro neutro y papel. Un solo acento: azul Urbanet, solo en botones,
      enlaces y la ruta del mapa. La luz cálida solo existe en la caja (el producto).
   3. Tamaños: titular grande, titular de sección, subtítulo, texto, nota. Nada más.
   4. Sin esquinas redondeadas, sin sombras, sin brillos, sin degradados.
   ========================================================================== */

:root {
    --black: #0e0e0f;
    --black-2: #161617;
    --line-d: rgba(255, 255, 255, 0.14);
    --text: #f3f3f0;
    --text-2: #b8b8b2;
    --text-3: #85857f;

    --paper: #f2f2ef;
    --paper-2: #ffffff;
    --ink: #111112;
    --ink-2: #55554f;
    --ink-3: #85857f;
    --line-l: #d8d8d2;

    --blue: #0146fd;
    --blue-press: #0033b8;
    --route: #3a6dff;
    --light: #fff4d6;

    --tbd-bg: #ffe45c;
    --tbd-ink: #111111;

    --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

    /* Escala tipográfica */
    --t-hero: clamp(42px, 4.6vw, 76px);
    --t-h2: clamp(32px, 4.2vw, 60px);
    --t-h3: clamp(21px, 1.9vw, 26px);
    --t-lead: clamp(18px, 1.5vw, 21px);
    --t-body: 17px;
    --t-note: 13.5px;

    --gutter: clamp(20px, 5vw, 64px);
    --max: 1240px;
    --header-h: 64px;
    --section: clamp(72px, 9vw, 128px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1,
h2 {
    font-weight: 800;
    text-wrap: balance;
}

h2 {
    font-size: var(--t-h2);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--t-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.wrap {
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--paper-2);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus-visible {
    top: 12px;
}

:focus-visible {
    outline: 2px solid var(--route);
    outline-offset: 3px;
}

/* Pendientes: amarillo a propósito, para que no se publique nada sin confirmar */
mark.tbd {
    padding: 0 0.3em;
    background: var(--tbd-bg);
    color: var(--tbd-ink);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: 0.15em;
}

.faq mark.tbd,
.signup mark.tbd {
    white-space: normal;
}

.lead {
    max-width: 52ch;
    margin-top: 20px;
    color: var(--text-2);
    font-size: var(--t-lead);
    line-height: 1.5;
}

.section-head {
    margin-bottom: clamp(36px, 5vw, 64px);
}

.section-head h2 {
    max-width: 17ch;
}

.section-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 32px;
}

.section-head-row p {
    color: var(--text-3);
    font-size: var(--t-note);
}

/* ---------- Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 0;
    font: 700 16px/1.1 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.btn svg {
    transition: transform 150ms ease;
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn-primary {
    background: var(--blue);
    color: #fff;
}

.btn-primary:hover {
    background: var(--blue-press);
}

.btn-light {
    background: #fff;
    color: var(--blue);
}

.btn-light:hover {
    background: var(--black);
    color: #fff;
}

.btn-sm {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 14.5px;
}

.btn-lg {
    min-height: 56px;
    padding: 16px 24px;
    font-size: 17px;
}

.btn-block {
    width: 100%;
}

.btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* ---------- Header: transparente sobre el video, sólido al bajar ---------- */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding-top: env(safe-area-inset-top, 0px);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 250ms ease, border-color 250ms ease;
}

.site-header.is-scrolled {
    background: var(--black);
    border-bottom-color: var(--line-d);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
}

.brand img {
    width: auto;
    height: 30px;
    filter: brightness(0) invert(1);
}

/* ---------- 1 · Hero ---------- */

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    background: var(--black);
}

.hero-media {
    position: relative;
    grid-area: 1 / 1;
    width: 100%;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: var(--black-2);
}

/* Capa de legibilidad: oscurece arriba (menú) y abajo (titular) sin tapar la caja */
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(14, 14, 15, 0.6) 0%, rgba(14, 14, 15, 0) 16%),
        linear-gradient(0deg, #0e0e0f 0%, rgba(14, 14, 15, 0.94) 12%, rgba(14, 14, 15, 0.6) 32%, rgba(14, 14, 15, 0) 56%);
}

.hero-poster,
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}

.hero-video {
    opacity: 0;
    transition: opacity 500ms ease;
}

.hero-video.is-playing {
    opacity: 1;
}

.hero-grid {
    display: contents;
}

.hero-head {
    position: relative;
    z-index: 2;
    grid-area: 1 / 1;
    align-self: end;
    padding: 0 var(--gutter) 28px;
}

.hero-cta {
    margin-top: 22px;
}

.hero-info {
    grid-area: 2 / 1;
    padding: 8px var(--gutter) 48px;
    background: var(--black);
}

.hero h1 {
    font-size: var(--t-hero);
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-wrap: initial;
}

.hero h1 span,
.hero h1 em {
    display: block;
}

.hero h1 em {
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hero-sub {
    max-width: 42ch;
    margin-top: 20px;
    color: var(--text-2);
    font-size: var(--t-lead);
    line-height: 1.5;
}

.hero-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 20px;
    margin: 28px 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line-d);
}

.hero-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
}

.hero-price .label {
    flex-basis: 100%;
    margin-bottom: 6px;
    color: var(--text-3);
    font-size: var(--t-note);
}

.hero-price strong {
    font-size: clamp(36px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.price-tax {
    color: var(--text-2);
    font-weight: 600;
}

.hero-limit {
    color: var(--text-2);
    font-size: 15px;
}

.hero-limit b {
    color: var(--text);
}

/* ---------- 2 · Por qué la calle ---------- */

.street {
    padding-block: var(--section);
}

.street-grid {
    display: grid;
    gap: 40px;
}

.street-photo {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.street-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.street-copy h2 {
    max-width: 14ch;
}

.street-hit {
    margin-top: 32px;
    font-size: var(--t-h3);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.street-aside {
    max-width: 48ch;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line-d);
    color: var(--text-3);
    font-size: 15.5px;
}

/* ---------- 3 · La caja ---------- */

.box {
    padding-block: var(--section);
    background: var(--black);
}

.box-head {
    display: grid;
    gap: 20px;
    margin-bottom: clamp(56px, 7vw, 96px);
}

.box-head h2 {
    max-width: 14ch;
}

.box-head .lead {
    margin-top: 0;
}

/* Caja desplegada: 3 caras con anuncio + tapa */
.unfold {
    /* Las tres caras ocupan exactamente el ancho de la retícula: alinean con título y datos */
    --face: calc(min(100vw - 2 * var(--gutter), var(--max)) / 3);
    margin: 0;
}

.unfold-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--face));
    grid-template-rows: auto var(--face) auto;
    justify-content: center;
}

.unfold-dim {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    height: 1px;
    margin-bottom: 24px;
    background: var(--text-3);
}

.unfold-dim::before,
.unfold-dim::after {
    content: "";
    position: absolute;
    top: -6px;
    width: 1px;
    height: 13px;
    background: var(--text-3);
}

.unfold-dim::before {
    left: 0;
}

.unfold-dim::after {
    right: 0;
}

.unfold-dim span {
    position: absolute;
    top: -11px;
    left: 50%;
    padding: 0 8px;
    transform: translateX(-50%);
    background: var(--black);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.unfold-lid {
    display: grid;
    place-items: center;
    grid-column: 2;
    grid-row: 1;
    height: calc(var(--face) * 0.42);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-bottom: 0;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
}

.unfold-face {
    display: grid;
    place-items: center;
    grid-row: 2;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: var(--black-2);
}

.unfold-face + .unfold-face {
    margin-left: -1px;
}

.unfold-ad {
    display: grid;
    place-content: center;
    gap: 4px;
    width: 76%;
    aspect-ratio: 1;
    background: var(--light);
    color: var(--ink);
    text-align: center;
}

.unfold-ad b {
    font-size: clamp(12px, 2.1vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.unfold-ad small {
    color: #6d6450;
    font-size: clamp(10px, 1.05vw, 14px);
    font-weight: 600;
}

.unfold-name {
    grid-row: 3;
    padding-top: 12px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
}

.unfold figcaption {
    margin-top: 14px;
    color: var(--text-3);
    font-size: var(--t-note);
    text-align: center;
}

/* Datos + foto real */
.box-proof {
    display: grid;
    gap: 40px;
    margin-top: clamp(56px, 7vw, 96px);
}

.box-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    margin: 0;
}

.box-facts > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 4px;
    padding: 16px 0 20px;
    border-top: 1px solid var(--line-d);
}

.box-facts dd {
    margin: 0;
    font-size: var(--t-h3);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.box-facts dt {
    color: var(--text-3);
    font-size: 14px;
}

.box-photo {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.box-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 48%;
}

/* ---------- 4 · La ruta ---------- */

.route {
    padding-block: var(--section);
}

.route-grid {
    display: grid;
    gap: 48px;
}

.route-copy h2 {
    max-width: 14ch;
}

.figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--text);
}

.figures li {
    display: grid;
    gap: 2px;
    padding: 16px 12px 0 0;
}

.figures li + li {
    padding-left: 16px;
    border-left: 1px solid var(--line-d);
}

.figures b {
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.figures span {
    color: var(--text-3);
    font-size: 14.5px;
    line-height: 1.3;
}

.report {
    margin-top: 40px;
}

.report-title {
    margin-bottom: 12px;
    font-size: var(--t-body);
    font-weight: 700;
}

.report ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-d);
}

.report li {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--line-d);
    color: var(--text-2);
}

/* Mapa del recorrido: animación en video (cuadrada) con su imagen fija de respaldo */
.route-map {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--line-d);
    background: #17191c;
}

.route-poster,
.route-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.route-video {
    opacity: 0;
    transition: opacity 500ms ease;
}

.route-video.is-playing {
    opacity: 1;
}

/* ---------- 6 · Cómo funciona ---------- */

.steps {
    padding-block: var(--section);
    background: var(--black-2);
}

.stops {
    display: grid;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stops li {
    position: relative;
    padding-top: 20px;
}

.stops li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--text);
    transform-origin: left center;
}

.stops li:nth-child(2) {
    --d: 180ms;
}

.stops li:nth-child(3) {
    --d: 360ms;
}

.stop-n {
    display: block;
    margin-bottom: 14px;
    font-size: clamp(44px, 4.6vw, 64px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.stops p {
    max-width: 34ch;
    margin-top: 10px;
    color: var(--text-2);
}

/* ---------- 7 · Oferta ---------- */

.offer {
    padding-block: var(--section);
    background: var(--blue);
    color: #fff;
}

.offer-grid {
    display: grid;
    gap: 48px;
    align-items: center;
}

.offer h2 {
    max-width: 13ch;
}

.offer-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 24px 0 12px;
}

.offer-price strong {
    font-size: clamp(64px, 7.4vw, 108px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.offer-price span {
    font-size: 20px;
    font-weight: 700;
}

.offer-copy > p:not(.offer-price) {
    max-width: 40ch;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--t-lead);
}

/* Video de cajas con distintas marcas (el mismo del inicio, versión vertical) */
.offer-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--black);
}

.offer-poster,
.offer-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

.offer-video {
    opacity: 0;
    transition: opacity 500ms ease;
}

.offer-video.is-playing {
    opacity: 1;
}

/* ---------- 8 · Preguntas ---------- */

.faq,
.signup {
    background: var(--paper);
    color: var(--ink);
}

.faq {
    padding-block: var(--section) 48px;
}

.faq-grid {
    display: grid;
    gap: 8px;
}

.faq .section-head {
    margin-bottom: 24px;
}

.faq-list {
    border-top: 1px solid var(--ink);
}

.faq details {
    border-bottom: 1px solid var(--line-l);
}

.faq summary {
    position: relative;
    padding: 18px 44px 18px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-52%);
    color: var(--blue);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}

.faq details[open] summary::after {
    content: "–";
}

.faq details p {
    max-width: 62ch;
    padding: 0 0 20px;
    color: var(--ink-2);
}

/* ---------- 9 · Formulario ---------- */

.signup {
    padding-block: 48px var(--section);
}

.signup-grid {
    display: grid;
    gap: 32px;
    padding-top: 48px;
    border-top: 1px solid var(--line-l);
}

.signup h2 {
    max-width: 12ch;
}

.signup .lead {
    color: var(--ink-2);
}

.signup-price {
    margin-top: 24px;
    font-weight: 700;
}

.signup-price span {
    display: block;
    color: var(--ink-3);
    font-size: var(--t-note);
    font-weight: 500;
}

.form-card {
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--line-l);
    background: var(--paper-2);
}

.form-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-left: 3px solid #b3261e;
    background: #fbeceb;
    color: #7d1b14;
    font-weight: 600;
    line-height: 1.45;
}

.fields {
    display: grid;
    gap: 16px;
}

.field {
    display: grid;
    gap: 6px;
}

.field > span {
    font-size: 14.5px;
    font-weight: 700;
}

.field small {
    margin-left: 6px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
}

.field input,
.field select {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #c9c9c2;
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: 500 17px/1.2 var(--font);
    appearance: none;
    transition: border-color 150ms ease;
}

.field select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111112' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.field input.is-invalid,
.field select.is-invalid {
    border-color: #b3261e;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 22px;
    color: var(--ink-2);
    font-size: 15px;
    cursor: pointer;
}

.check input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--blue);
}

.check a {
    color: var(--blue);
    font-weight: 700;
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Registro de repartidores por pasos: una pregunta por pantalla.
   Sin JS se ven todas las preguntas seguidas y funciona como formulario normal. */
.steps-head {
    display: none;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.steps-bar {
    position: relative;
    flex: 1;
    height: 2px;
    overflow: hidden;
    background: var(--line-l);
}

.steps-bar i {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(0.143);
    transform-origin: left center;
    transition: transform 400ms cubic-bezier(0.2, 0.75, 0.1, 1);
}

.step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.step + .step {
    margin-top: 28px;
}

.step-q {
    margin-bottom: 4px;
    padding: 0;
    font-size: var(--t-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.step-q:focus {
    outline: none;
}

.step-hint {
    margin: 0;
    color: var(--ink-3);
    font-size: 14px;
}

.step .fields,
.step .opts {
    margin-top: 18px;
}

.opts {
    display: grid;
    gap: 6px;
}

.opt {
    position: relative;
    display: block;
}

/* El control real queda encima de la opción (invisible) para que el aviso de "falta" salga ahí */
.opt input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.opt > span {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #d6d6d0;
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.opt b {
    margin-right: auto;
    font-weight: 600;
}

.opt small {
    color: var(--ink-3);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* Marca cuadrada a la derecha: vacía o llena */
.opt > span::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1.5px solid #b4b4ad;
    background: transparent;
    transition: background-color 150ms ease, border-color 150ms ease;
}

/* Solo con mouse: en celular el "hover" se queda pegado y la opción de la pantalla siguiente parecería marcada */
@media (hover: hover) {
    .opt:hover > span {
        border-color: var(--ink);
    }
}

.opt input:checked + span {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.opt input:checked + span::after {
    border-color: var(--ink);
    background: var(--ink);
}

.opt input:focus-visible + span {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.q.is-invalid .step-q {
    color: #b3261e;
}

.q.is-invalid .opt > span {
    border-color: #b3261e;
}

.step .check {
    margin: 18px 0 0;
}

.step-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 22px;
}

.step-back {
    margin-right: auto;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    font: 600 15px/1 var(--font);
    cursor: pointer;
}

.step-back:hover {
    color: var(--ink);
}

.step-next,
.step-submit {
    min-height: 50px;
}

/* Sin JS: no hay pasos, solo el botón final */
.step-back,
.step-next {
    display: none;
}

/* Con JS: una pregunta a la vez */
.is-stepping .steps-head {
    display: flex;
}

.is-stepping .step + .step {
    margin-top: 0;
}

.is-stepping .step-back,
.is-stepping .step-next {
    display: inline-flex;
}

.is-stepping .step:first-of-type .step-back {
    display: none;
}

.is-stepping .step.is-active {
    animation: stepIn 360ms cubic-bezier(0.2, 0.75, 0.1, 1);
}

.is-stepping .step.is-back {
    animation-name: stepBack;
}

@keyframes stepIn {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes stepBack {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .is-stepping .step.is-active,
    .is-stepping .step.is-back {
        animation: stepFade 250ms ease;
    }

    @keyframes stepFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* Celular: el botón final va a todo lo ancho y "Atrás" debajo */
@media (max-width: 767px) {
    .step-nav-final {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 6px;
    }

    .step-nav-final .step-back {
        align-self: flex-start;
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    .opts-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Pie ---------- */

.site-footer {
    padding-block: 56px calc(32px + env(safe-area-inset-bottom, 0px));
    background: var(--black);
    color: var(--text-2);
}

.footer-grid {
    display: grid;
    gap: 32px;
}

.footer-brand img {
    width: 124px;
    height: auto;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.footer-brand p {
    font-size: 15px;
}

.footer-links {
    display: grid;
    gap: 10px;
    align-content: start;
}

.footer-links a {
    width: fit-content;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-cross {
    color: #8fa9ff !important;
}

.footer-base {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line-d);
    color: var(--text-3);
    font-size: var(--t-note);
}

/* ---------- Página de gracias ---------- */
/* Celular: foto arriba que se funde con el negro y el texto abajo.
   Escritorio: texto a la izquierda y foto a media pantalla a la derecha. */

.thanks {
    display: grid;
    align-content: start;
    min-height: 100svh;
    background: var(--black);
}

.thanks-inner {
    display: grid;
    align-content: start;
    justify-items: start;
    width: 100%;
    max-width: 560px;
    padding: 28px var(--gutter) 48px;
}

.thanks-logo img {
    width: auto;
    height: 32px;
    filter: brightness(0) invert(1);
}

.thanks-logo {
    margin-bottom: 40px;
}

.thanks-photo {
    position: relative;
    order: -1;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--black-2);
}

.thanks-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: thanksPhoto 1400ms cubic-bezier(0.2, 0.75, 0.1, 1) both;
}

.thanks-photo-anunciantes img {
    object-position: 50% 70%;
}

.thanks-photo-repartidores img {
    object-position: 55% 50%;
}

/* La foto se funde con el fondo, sin corte */
.thanks-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--black) 0%, rgba(14, 14, 15, 0) 45%);
    pointer-events: none;
}

@keyframes thanksPhoto {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .thanks-photo img {
        animation: none;
    }
}

@media (min-width: 900px) {
    .thanks {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-content: stretch;
    }

    .thanks-inner {
        align-content: center;
        justify-self: end;
        padding: 64px clamp(40px, 6vw, 96px);
    }

    .thanks-photo {
        order: 0;
        aspect-ratio: auto;
        min-height: 100svh;
    }

    .thanks-photo img {
        position: absolute;
        inset: 0;
    }

    .thanks-photo-anunciantes img {
        object-position: 50% 50%;
    }

    .thanks-photo::after {
        background: linear-gradient(90deg, var(--black) 0%, rgba(14, 14, 15, 0) 30%);
    }
}

.thanks h1 {
    font-size: clamp(38px, 6vw, 60px);
    line-height: 1;
    letter-spacing: -0.035em;
}

.thanks p {
    margin-top: 18px;
    color: var(--text-2);
    font-size: var(--t-lead);
    line-height: 1.5;
}

.thanks-back {
    margin-top: 32px;
    color: var(--text-3);
    font-size: 15px;
    text-decoration: none;
}

.thanks-back:hover {
    color: var(--text);
}

/* ==========================================================================
   Tablet y escritorio
   ========================================================================== */

@media (min-width: 768px) {
    :root {
        --header-h: 72px;
    }

    .brand img {
        height: 34px;
    }

    /* Hero a pantalla completa: la caja queda a la derecha del cuadro, el texto a la izquierda */
    .hero {
        display: flex;
        align-items: flex-end;
        min-height: clamp(640px, 100svh, 1000px);
    }

    .hero-media {
        position: absolute;
        inset: 0;
        height: auto;
        min-height: 0;
    }

    .hero-media::after {
        background:
            linear-gradient(90deg, rgba(14, 14, 15, 0.88) 0%, rgba(14, 14, 15, 0.6) 30%, rgba(14, 14, 15, 0) 56%),
            linear-gradient(0deg, rgba(14, 14, 15, 0.65) 0%, rgba(14, 14, 15, 0) 30%),
            linear-gradient(180deg, rgba(14, 14, 15, 0.5) 0%, rgba(14, 14, 15, 0) 14%);
    }

    .hero-poster,
    .hero-video {
        object-position: 50% 50%;
    }

    .hero-grid {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-block: calc(var(--header-h) + 48px) clamp(56px, 8vh, 88px);
    }

    .hero-head,
    .hero-info {
        display: contents;
    }

    .hero h1 { order: 1; }
    .hero-sub { order: 2; }
    .hero-offer { order: 3; width: min(560px, 100%); }
    .hero-cta { order: 4; margin-top: 0; }

    .hero-info,
    .hero-head {
        padding: 0;
    }

    .street-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(40px, 6vw, 96px);
        align-items: center;
    }

    .route-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(40px, 5vw, 80px);
        align-items: center;
    }

    .box-head {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: 48px;
        align-items: end;
    }

    .box-proof {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(40px, 5vw, 72px);
        align-items: start;
    }

    .stops {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    .offer-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .offer-media {
        justify-self: end;
        width: 100%;
        max-width: 440px;
    }

    .faq-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: 48px;
    }

    .faq .section-head h2 {
        position: sticky;
        top: calc(var(--header-h) + 24px);
    }

    .signup-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(40px, 6vw, 96px);
        align-items: start;
    }

    .fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-wide {
        grid-column: 1 / -1;
    }

    .footer-grid {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .footer-links {
        justify-items: end;
        text-align: right;
    }
}

@media (max-width: 767px) {
    .hero-cta,
    .offer .btn-lg {
        width: 100%;
    }

    .hero-sub {
        margin-top: 0;
    }

    .street-photo {
        order: 2;
        aspect-ratio: 4 / 3;
    }

    .street-photo img {
        object-position: 50% 62%;
    }

}

@media (max-width: 380px) {
    .report ul {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Franja de zonas en movimiento
   ========================================================================== */

.ticker {
    overflow: hidden;
    border-bottom: 1px solid var(--line-d);
    background: var(--black);
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker 52s linear infinite;
}

.ticker span {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 18px 28px 18px 0;
    color: var(--text);
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ticker span::after {
    content: "";
    width: 11px;
    height: 11px;
    background: var(--light);
}

@keyframes ticker {
    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Repartidores
   ========================================================================== */

/* Titular de 4 líneas: un poco más compacto en celular para que cada línea quepa entera */
@media (max-width: 767px) {
    .hero h1.hero-title-long {
        font-size: clamp(36px, 10.6vw, 44px);
    }
}

.route-hit {
    margin-top: 24px;
    font-size: var(--t-h3);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.figures b small {
    display: block;
    margin-bottom: 4px;
    color: var(--text-3);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

[data-page="repartidores"] .figures {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
}

/* Banda de video entre secciones */
.band {
    position: relative;
    display: grid;
    align-items: end;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* Mismo tono que los bordes del video (negro arriba, gris abajo): sin línea en las orillas */
    background: linear-gradient(180deg, var(--black) 50%, var(--black-2) 50%);
}

/* Tapan la orilla de medio pixel que deja el video cuando la banda no cae en pixel exacto */
.band::before,
.band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 2px;
    pointer-events: none;
}

.band::before {
    top: 0;
    background: var(--black);
}

.band::after {
    bottom: 0;
    background: var(--black-2);
}

.band-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Se funde con el negro de arriba y con el gris de la sección de abajo: sin cortes duros */
.band-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #0e0e0f 0%, rgba(14, 14, 15, 0) 22%),
        linear-gradient(0deg, #161617 0%, rgba(22, 22, 23, 0.9) 14%, rgba(22, 22, 23, 0.45) 36%, rgba(22, 22, 23, 0) 58%);
}

.band-poster,
.band-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.band-video {
    opacity: 0;
    transition: opacity 500ms ease;
}

.band-video.is-playing {
    opacity: 1;
}

.band-copy {
    position: relative;
    z-index: 1;
    padding-bottom: 12px;
}

/* Celular: el texto va debajo del video (no encima de la caja) y el video se funde con el fondo */
@media (max-width: 767px) {
    .band {
        aspect-ratio: auto;
        background: var(--black-2);
    }

    .band-media {
        position: relative;
        inset: auto;
        aspect-ratio: 4 / 5;
    }

    .band-copy {
        margin-top: -56px;
        padding-bottom: 0;
    }
}

.band h2 {
    max-width: 12ch;
}


.band h2 em {
    display: block;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Requisitos */
.reqs {
    padding-block: clamp(48px, 6vw, 88px) var(--section);
    background: var(--black-2);
}

.reqs-grid {
    display: grid;
    gap: 40px;
}

.reqs-photo {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.reqs-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 55%;
}

.reqs-copy h2 {
    max-width: 12ch;
}

.req-list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--text);
}

.req-list li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 15px 0 16px;
    border-bottom: 1px solid var(--line-d);
    font-size: var(--t-lead);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.req-box {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background: var(--light);
}

/* Página legal (aviso de privacidad) */
.legal {
    min-height: 100svh;
    padding: calc(var(--header-h) + 56px) 0 var(--section);
    background: var(--paper);
    color: var(--ink);
}

.legal-inner {
    max-width: 720px;
}

.legal h1 {
    font-size: var(--t-h2);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.legal .legal-meta {
    margin-top: 16px;
    color: var(--ink-3);
    font-size: var(--t-note);
}

.legal-body {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--ink);
}

.legal-body h2 {
    margin: 40px 0 12px;
    font-size: var(--t-h3);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.legal-body p,
.legal-body li {
    color: var(--ink-2);
}

.legal-body p + p {
    margin-top: 14px;
}

.legal-body ul + p {
    margin-top: 12px;
}

.legal-body ul {
    margin: 12px 0 0;
    padding-left: 20px;
}

.legal-body a {
    color: var(--blue);
    font-weight: 700;
}

.legal mark.tbd {
    white-space: normal;
}

/* ==========================================================================
   Inicio (urbanet.mx)
   ========================================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-link {
    color: var(--text);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
}

.header-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero-ctas {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.hero-alt {
    width: fit-content;
    color: var(--text);
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.hero-alt:hover {
    text-decoration-thickness: 2px;
}

/* Lo que cambia: comparación en papel */
.shift {
    padding-block: var(--section);
    background: var(--paper);
    color: var(--ink);
}

.shift-head {
    display: grid;
    gap: 20px;
}

.shift-head h2 {
    max-width: 12ch;
}

.shift-head .lead {
    margin-top: 0;
    color: var(--ink-2);
}

.compare {
    margin-top: clamp(40px, 6vw, 72px);
    border-top: 1px solid var(--ink);
}

.compare-row {
    display: grid;
    gap: 8px;
    padding: 18px 0 22px;
    border-bottom: 1px solid var(--line-l);
}

.compare-top {
    display: none;
}

.compare-k {
    color: var(--ink-3);
    font-size: var(--t-note);
    font-weight: 600;
}

.compare-old {
    color: var(--ink-3);
    font-size: 16px;
    text-decoration: line-through;
    text-decoration-color: rgba(17, 17, 18, 0.45);
    text-decoration-thickness: 1.5px;
}

.compare-new {
    color: var(--ink);
    font-size: var(--t-lead);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* La red */
.network-stops {
    margin-top: clamp(56px, 7vw, 96px);
}

/* Las dos entradas */
.doors {
    display: grid;
}

.door {
    display: flex;
    flex-direction: column;
    color: var(--text);
    text-decoration: none;
}

.door-brand {
    background: var(--blue);
    color: #fff;
}

.door-rider {
    background: var(--black-2);
}

.door:focus-visible {
    outline-offset: -4px;
}

.door-photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--black-2);
}

.door-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.door-brand .door-photo img {
    object-position: 90% 50%;
}

.door-rider .door-photo img {
    object-position: 50% 60%;
}

.door-body {
    display: grid;
    flex: 1;
    align-content: start;
    justify-items: start;
    gap: 14px;
    padding: clamp(32px, 4.4vw, 64px) var(--gutter) clamp(40px, 5vw, 72px);
}

.door-q {
    font-size: var(--t-lead);
    font-weight: 700;
}

.door-title {
    max-width: 13ch;
    font-size: var(--t-h2);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.door-text {
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.86);
}

.door-rider .door-text {
    color: var(--text-2);
}

.door-price {
    justify-self: stretch;
    max-width: 44ch;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 600;
}

.door-rider .door-price {
    border-top-color: var(--line-d);
    color: var(--text-3);
}

.door-btn {
    margin-top: 10px;
}

.door:hover .btn svg {
    transform: translateX(3px);
}

.door-brand:hover .btn-light {
    background: var(--black);
    color: #fff;
}

.door-rider:hover .btn-primary {
    background: var(--blue-press);
}

@media (hover: hover) {
    .door:hover .door-photo img,
    .js .door.is-in:hover .door-photo img {
        transform: scale(1.04);
        transition: transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1);
    }
}

.footer-brand .footer-note {
    margin-top: 14px;
    color: var(--text-3);
    font-size: 14px;
}

.footer-note a {
    color: var(--text);
}

@media (max-width: 767px) {
    .hero-ctas .btn {
        width: 100%;
    }

    .compare-old::before {
        content: "Antes:";
        display: inline-block;
        margin-right: 0.35em;
        color: var(--ink-2);
        font-weight: 700;
    }
}

@media (min-width: 768px) {
    .hero-ctas {
        order: 4;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 32px;
        margin-top: 32px;
    }

    .shift-head {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: 48px;
        align-items: end;
    }

    .compare-row {
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
        column-gap: clamp(24px, 3vw, 48px);
        align-items: baseline;
        padding: 24px 0 26px;
    }

    .compare-top {
        display: grid;
        padding: 14px 0;
        color: var(--ink-3);
        font-size: var(--t-note);
        font-weight: 600;
    }

    .compare-top span:last-child {
        color: var(--ink);
    }

    .compare-old {
        font-size: 17px;
    }

    .doors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .door-body {
        padding-inline: clamp(32px, 4.4vw, 64px);
    }
}

@media (min-width: 1500px) {
    /* En pantallas muy anchas, el texto de cada entrada no se va al extremo */
    .door-brand .door-body {
        padding-left: calc((100vw - var(--max)) / 2);
    }
}

/* ==========================================================================
   Giros: cajas con distintas marcas (anunciantes)
   ========================================================================== */

/* Fondo gris oscuro: es el mismo tono en el que termina la banda de video de arriba,
   así el video se funde con esta sección sin corte (igual que en repartidores). */
.examples {
    padding-block: clamp(48px, 6vw, 88px) var(--section);
    background: var(--black-2);
}

.examples .section-head {
    margin-bottom: 28px;
}

.examples .section-head h2 {
    max-width: 16ch;
}

.examples-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 8px;
    overflow-x: auto;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.examples-track::-webkit-scrollbar {
    display: none;
}

.ex {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--black-2);
    scroll-snap-align: start;
}

.ex img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Encuadre de las fotos que se recortan en el mosaico: que siempre se vea la caja */
.ex-top img {
    object-position: 50% 10%;
}

.ex-low img {
    object-position: 50% 94%;
}

.ex figcaption,
.ex-cta-label {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 8px 12px;
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.ex-cta {
    text-decoration: none;
}

.ex-cta-label {
    right: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--blue);
    color: #fff;
    font-size: 15px;
    transition: background-color 150ms ease;
}

.ex-cta:hover .ex-cta-label {
    background: var(--blue-press);
}

@media (hover: hover) {
    .ex:hover img,
    .js .ex.is-in:hover img {
        transform: scale(1.04);
        transition: transform 600ms cubic-bezier(0.2, 0.75, 0.1, 1);
    }
}

/* La etiqueta aparece cuando termina de entrar la imagen */
.js .ex[data-reveal] figcaption,
.js .ex[data-reveal] .ex-cta-label {
    opacity: 0;
    transition: opacity 500ms ease calc(var(--d, 0ms) + 700ms), background-color 150ms ease;
}

.js .ex.is-in figcaption,
.js .ex.is-in .ex-cta-label,
.reveal-all .ex[data-reveal] figcaption,
.reveal-all .ex[data-reveal] .ex-cta-label {
    opacity: 1;
}

/* Escritorio: mosaico como la galería. Foto grande a la izquierda y cuatro alrededor,
   alternando anchos por fila. */
@media (min-width: 768px) {
    .examples-track {
        grid-auto-flow: row;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-columns: auto;
        grid-template-rows: repeat(2, clamp(240px, 28vw, 400px));
        width: min(100% - 2 * var(--gutter), var(--max));
        margin-inline: auto;
        padding: 0;
        overflow: visible;
    }

    .ex {
        aspect-ratio: auto;
    }

    /* En el HTML la foto grande va segunda para que en celular el carrusel no abra con la
       misma marca que la banda de video; en escritorio se acomoda a la izquierda. */
    .ex:nth-child(1) {
        grid-column: 6 / 9;
        grid-row: 1;
    }

    .ex:nth-child(2) {
        grid-column: 1 / 6;
        grid-row: 1 / 3;
    }

    .ex:nth-child(3) {
        grid-column: 9 / 13;
        grid-row: 1;
    }

    .ex:nth-child(4) {
        grid-column: 6 / 10;
        grid-row: 2;
    }

    .ex:nth-child(5) {
        grid-column: 10 / 13;
        grid-row: 2;
    }
}

/* Lista de documentos en la página de gracias */
.thanks-list {
    display: grid;
    gap: 0;
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-d);
}

.thanks-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-d);
    color: var(--text);
    font-weight: 700;
}

.thanks-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: var(--light);
}

@media (min-width: 768px) {
    .band {
        aspect-ratio: 16 / 7;
        max-height: 88vh;
    }

    .band-copy {
        padding-bottom: clamp(24px, 3vw, 40px);
    }

    .band-media::after {
        background:
            linear-gradient(180deg, #0e0e0f 0%, rgba(14, 14, 15, 0) 20%),
            linear-gradient(0deg, #161617 0%, rgba(22, 22, 23, 0.55) 26%, rgba(22, 22, 23, 0) 50%),
            linear-gradient(90deg, rgba(14, 14, 15, 0.7) 0%, rgba(14, 14, 15, 0) 45%);
    }

    .reqs-grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: clamp(40px, 6vw, 96px);
        align-items: center;
    }

    .reqs-photo {
        aspect-ratio: 1;
    }
}

/* ==========================================================================
   Movimiento
   Solo se activa con JavaScript (clase .js en <html>). Sin JS o con
   "reducir movimiento", todo se ve de inmediato.
   ========================================================================== */

/* Hero: las líneas del titular suben desde una máscara; la foto entra con barrido */
.js .hero .ln {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.js .hero .ln > span {
    display: block;
    transform: translateY(110%);
}

.js.is-ready .hero .ln > span {
    transform: none;
    transition: transform 950ms cubic-bezier(0.2, 0.75, 0.1, 1);
}

.js.is-ready .hero .ln:nth-child(2) > span {
    transition-delay: 90ms;
}

.js.is-ready .hero .ln:nth-child(3) > span {
    transition-delay: 180ms;
}

.js [data-hero] {
    opacity: 0;
    transform: translateY(16px);
}

.js.is-ready [data-hero] {
    opacity: 1;
    transform: none;
    transition: opacity 700ms ease, transform 800ms cubic-bezier(0.2, 0.75, 0.1, 1);
}

.js.is-ready [data-hero="2"] { transition-delay: 380ms; }
.js.is-ready [data-hero="3"] { transition-delay: 480ms; }
.js.is-ready [data-hero="4"] { transition-delay: 580ms; }

.js .hero-media {
    clip-path: inset(0 0 0 100%);
}

.js.is-ready .hero-media {
    clip-path: inset(0);
    transition: clip-path 1200ms cubic-bezier(0.65, 0, 0.35, 1) 120ms;
}

/* Titulares y textos al entrar en pantalla */
.js [data-reveal="rise"],
.js [data-reveal="fade"] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 800ms ease var(--d, 0ms),
        transform 950ms cubic-bezier(0.2, 0.75, 0.1, 1) var(--d, 0ms);
}

.js [data-reveal="fade"] {
    transform: translateY(14px);
}

.js [data-reveal="rise"].is-in,
.js [data-reveal="fade"].is-in {
    opacity: 1;
    transform: none;
}

/* Fotos: barrido de izquierda a derecha, como algo que pasa por la calle */
/* (el recorte va en la imagen, no en el contenedor: así el observador sí detecta el contenedor) */
.js [data-reveal="wipe"] img {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.12);
    transition:
        clip-path 1150ms cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0ms),
        transform 1700ms cubic-bezier(0.2, 0.75, 0.1, 1) var(--d, 0ms);
}

.js [data-reveal="wipe"].is-in img {
    clip-path: inset(0);
    transform: none;
}

/* La caja se enciende, cara por cara */
.js [data-reveal="unfold"] .unfold-ad {
    background: #262623;
    color: #5f5f58;
}

.js [data-reveal="unfold"] .unfold-ad small {
    opacity: 0.35;
}

.js [data-reveal="unfold"].is-in .unfold-ad {
    animation: lampOn 900ms linear forwards;
    animation-delay: calc(var(--i, 0) * 280ms + 250ms);
}

.js [data-reveal="unfold"].is-in .unfold-ad small {
    opacity: 1;
    transition: opacity 400ms ease calc(var(--i, 0) * 280ms + 700ms);
}

@keyframes lampOn {
    0% { background: #262623; color: #5f5f58; }
    8% { background: var(--light); color: var(--ink); }
    13% { background: #262623; color: #5f5f58; }
    21% { background: var(--light); color: var(--ink); }
    26% { background: #6b6656; color: #3a3a35; }
    36%, 100% { background: var(--light); color: var(--ink); }
}

/* Video de la oferta: entra con barrido y un acercamiento que se asienta */
.js [data-reveal="clip"] {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1200ms cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0ms);
}

.js [data-reveal="clip"] img,
.js [data-reveal="clip"] video {
    transform: scale(1.12);
    transition: transform 2000ms cubic-bezier(0.2, 0.75, 0.1, 1) var(--d, 0ms), opacity 500ms ease;
}

.js [data-reveal="clip"].is-in {
    clip-path: inset(0);
}

.js [data-reveal="clip"].is-in img,
.js [data-reveal="clip"].is-in video {
    transform: none;
}

@keyframes boxOn {
    0% { background: rgba(255, 255, 255, 0.16); }
    35% { background: var(--light); }
    50% { background: rgba(255, 255, 255, 0.35); }
    100% { background: var(--light); }
}

/* Cifras de circulación */
.js [data-reveal="figures"] li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms ease, transform 800ms cubic-bezier(0.2, 0.75, 0.1, 1);
}

.js [data-reveal="figures"] li:nth-child(2) { transition-delay: 110ms; }
.js [data-reveal="figures"] li:nth-child(3) { transition-delay: 220ms; }

.js [data-reveal="figures"].is-in li {
    opacity: 1;
    transform: none;
}

/* Pasos: la línea se traza y aparece cada paso */
.js [data-reveal="stops"] li::before {
    transform: scaleX(0);
    transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0ms);
}

.js [data-reveal="stops"] li > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 600ms ease calc(var(--d, 0ms) + 280ms),
        transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(var(--d, 0ms) + 280ms);
}

.js [data-reveal="stops"].is-in li::before {
    transform: scaleX(1);
}

.js [data-reveal="stops"].is-in li > * {
    opacity: 1;
    transform: none;
}

/* Comparación: aparece la fila y la forma de siempre se tacha */
.js [data-reveal="row"] > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1);
}

.js [data-reveal="row"] .compare-old {
    text-decoration-color: transparent;
    transition:
        opacity 600ms ease 90ms,
        transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1) 90ms,
        text-decoration-color 500ms ease 650ms;
}

.js [data-reveal="row"] .compare-new {
    transition-delay: 380ms;
}

.js [data-reveal="row"].is-in > * {
    opacity: 1;
    transform: none;
}

.js [data-reveal="row"].is-in .compare-old {
    text-decoration-color: rgba(17, 17, 18, 0.45);
}

/* Entradas: la foto barre y el texto sube */
.js [data-reveal="door"] .door-photo img {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.12);
    transition:
        clip-path 1150ms cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0ms),
        transform 1700ms cubic-bezier(0.2, 0.75, 0.1, 1) var(--d, 0ms);
}

.js [data-reveal="door"].is-in .door-photo img {
    clip-path: inset(0);
    transform: none;
}

.js [data-reveal="door"] .door-body > * {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 650ms ease calc(var(--d, 0ms) + var(--k, 0) * 80ms + 350ms),
        transform 750ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(var(--d, 0ms) + var(--k, 0) * 80ms + 350ms),
        background-color 150ms ease,
        color 150ms ease;
}

.js [data-reveal="door"] .door-body > :nth-child(2) { --k: 1; }
.js [data-reveal="door"] .door-body > :nth-child(3) { --k: 2; }
.js [data-reveal="door"] .door-body > :nth-child(4) { --k: 3; }
.js [data-reveal="door"] .door-body > :nth-child(5) { --k: 4; }

.js [data-reveal="door"].is-in .door-body > * {
    opacity: 1;
    transform: none;
}

/* Titular de 4 líneas (repartidores) */
.js.is-ready .hero .ln:nth-child(4) > span {
    transition-delay: 270ms;
}

/* Banda de video: entra con barrido, como la calle que pasa */
.js [data-reveal="band"] .band-media {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1300ms cubic-bezier(0.65, 0, 0.35, 1);
}

.js [data-reveal="band"] .band-poster,
.js [data-reveal="band"] .band-video {
    transform: scale(1.1);
    transition: transform 2200ms cubic-bezier(0.2, 0.75, 0.1, 1), opacity 500ms ease;
}

.js [data-reveal="band"].is-in .band-media {
    clip-path: inset(0);
}

.js [data-reveal="band"].is-in .band-poster,
.js [data-reveal="band"].is-in .band-video {
    transform: none;
}

.js [data-reveal="band"] h2 {
    --d: 450ms;
}

/* Requisitos: cada casilla se enciende, una tras otra */
.js [data-reveal="checks"] li {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 600ms ease calc(var(--i, 0) * 110ms + 120ms),
        transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(var(--i, 0) * 110ms + 120ms);
}

.js [data-reveal="checks"] .req-box {
    background: rgba(255, 255, 255, 0.16);
}

.js [data-reveal="checks"].is-in li {
    opacity: 1;
    transform: none;
}

.js [data-reveal="checks"].is-in .req-box {
    animation: boxOn 560ms ease forwards;
    animation-delay: calc(var(--i, 0) * 110ms + 420ms);
}

/* Celular: el video del hero entra con desvanecido y acercamiento lento, no con barrido */
@media (max-width: 767px) {
    .js .hero-media {
        clip-path: none;
        opacity: 0;
    }

    .js .hero-poster,
    .js .hero-video {
        transform: scale(1.1);
    }

    .js.is-ready .hero-media {
        clip-path: none;
        opacity: 1;
        transition: opacity 900ms ease;
    }

    .js.is-ready .hero-poster,
    .js.is-ready .hero-video {
        transform: none;
        transition: transform 2400ms cubic-bezier(0.2, 0.75, 0.1, 1), opacity 500ms ease;
    }

    /* La banda de video tampoco barre en celular: aparece y se acerca despacio */
    .js [data-reveal="band"] .band-media {
        clip-path: none;
        opacity: 0;
        transition: opacity 900ms ease;
    }

    .js [data-reveal="band"].is-in .band-media {
        clip-path: none;
        opacity: 1;
    }
}

/* Respaldo: si el JS no terminó de cargar, todo visible */
.reveal-all [data-reveal],
.reveal-all [data-reveal="wipe"] img,
.reveal-all [data-reveal="figures"] li,
.reveal-all [data-reveal="stops"] li > *,
.reveal-all [data-reveal="stops"] li::before,
.reveal-all [data-hero],
.reveal-all .hero .ln > span,
.reveal-all .hero-media,
.reveal-all [data-reveal="band"] .band-media,
.reveal-all [data-reveal="band"] .band-poster,
.reveal-all [data-reveal="band"] .band-video.is-playing,
.reveal-all [data-reveal="clip"] img,
.reveal-all [data-reveal="clip"] video.is-playing,
.reveal-all [data-reveal="checks"] li,
.reveal-all [data-reveal="row"] > *,
.reveal-all [data-reveal="door"] .door-photo img,
.reveal-all [data-reveal="door"] .door-body > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}

.reveal-all [data-reveal="checks"] .req-box {
    background: var(--light) !important;
}

/* ==========================================================================
   "Reducir movimiento" (ajuste de accesibilidad del teléfono)
   Muchos iPhone y Android lo traen activado. No apagamos todo: quitamos los
   desplazamientos y el parpadeo, y dejamos aparecer con opacidad, el encendido
   suave de las cajas, la ruta dibujándose y la franja de zonas más lenta.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ticker-track {
        animation-duration: 110s;
    }

    /* Sin desplazamientos: solo aparecen */
    .js [data-reveal="rise"],
    .js [data-reveal="fade"],
    .js [data-hero],
    .js [data-reveal="figures"] li,
    .js [data-reveal="stops"] li > * {
        transform: none !important;
    }

    .js .hero .ln > span {
        transform: none;
        opacity: 0;
    }

    .js.is-ready .hero .ln > span {
        opacity: 1;
        transition: opacity 900ms ease;
    }

    .js .hero-media {
        clip-path: none;
        opacity: 0;
    }

    .js.is-ready .hero-media {
        clip-path: none;
        opacity: 1;
        transition: opacity 1100ms ease 100ms;
    }

    .js [data-reveal="wipe"] img {
        clip-path: none;
        transform: none;
        opacity: 0;
        transition: opacity 900ms ease var(--d, 0ms);
    }

    .js [data-reveal="wipe"].is-in img {
        opacity: 1;
    }

    .js [data-reveal="stops"] li::before {
        transform: none;
        opacity: 0;
        transition: opacity 700ms ease var(--d, 0ms);
    }

    .js [data-reveal="stops"].is-in li::before {
        opacity: 1;
    }

    .js [data-reveal="checks"] li,
    .js [data-reveal="row"] > *,
    .js [data-reveal="door"] .door-body > * {
        transform: none !important;
    }

    .js [data-reveal="door"] .door-photo img {
        clip-path: none;
        transform: none;
        opacity: 0;
        transition: opacity 900ms ease var(--d, 0ms);
    }

    .js [data-reveal="door"].is-in .door-photo img {
        opacity: 1;
    }

    .js [data-reveal="band"] .band-media {
        clip-path: none;
        opacity: 0;
        transition: opacity 1000ms ease;
    }

    .js [data-reveal="band"].is-in .band-media {
        clip-path: none;
        opacity: 1;
    }

    .js [data-reveal="band"] .band-poster,
    .js [data-reveal="band"] .band-video {
        transform: none;
    }

    .js [data-reveal="checks"].is-in .req-box {
        animation-name: boxFade;
    }

    /* Encendido suave, sin parpadeo */
    .js [data-reveal="unfold"].is-in .unfold-ad {
        animation-name: lampFade;
        animation-duration: 700ms;
    }

    .js [data-reveal="clip"] {
        clip-path: none;
        opacity: 0;
        transition: opacity 900ms ease;
    }

    .js [data-reveal="clip"].is-in {
        opacity: 1;
    }

    .js [data-reveal="clip"] img,
    .js [data-reveal="clip"] video {
        transform: none;
    }

    @keyframes lampFade {
        from { background: #262623; color: #5f5f58; }
        to { background: var(--light); color: var(--ink); }
    }

    @keyframes boxFade {
        from { background: rgba(255, 255, 255, 0.16); }
        to { background: var(--light); }
    }
}