/*
Theme Name: Ziyegó Theme
Theme URI: https://ziyego.mx
Author: ZINNOVIX SOLUTIONS SA de CV
Author URI: https://ziyego.mx
Description: Tema a medida para Ziyegó, optimizado al máximo para velocidad y SEO Programático. CSS portado 1:1 del diseño aprobado (index.html).
Version: 2.0.0
Text Domain: ziyego
*/

    /* ==========================================================================
       Ziyegó template — tokens
       ========================================================================== */
    :root {
      --bg:           oklch(98.7% 0.003 328);
      --surface:      oklch(100% 0 0);
      --surface-alt:  oklch(96.5% 0.005 328);
      --shell:        oklch(27% 0.05 328);
      --shell-card:   oklch(33% 0.052 328);
      /* Liquid glass — navbar: vidrio humo neutro (tinte negro translúcido)
         para que el wordmark no se mezcle; cotizador/footer: vidrio ciruela. */
      --nav-shell:    oklch(17% 0.008 328 / 0.26);
      --nav-raised:   oklch(100% 0 0 / 0.12);
      --quote-shell:  oklch(44% 0.10 328);
      --footer-shell: oklch(38% 0.075 328);
      --footer-card:  oklch(46% 0.085 328 / 0.6);
      --glass-edge:   oklch(100% 0 0 / 0.18);
      --glass-hi:     oklch(100% 0 0 / 0.24);

      --fg:           oklch(21% 0.018 328);
      --fg-on-shell:  oklch(98% 0.003 328);
      --muted:        oklch(51% 0.01 328);
      --muted-shell:  oklch(80% 0.028 328);
      --border:       oklch(90.5% 0.004 328);
      --border-shell: oklch(45% 0.045 328);

      --accent:       oklch(48.5% 0.133 328);
      --accent-hot:   oklch(58.9% 0.182 353);
      --accent-soft:  oklch(95% 0.024 328);
      --gradient-cta: linear-gradient(135deg, oklch(58.9% 0.182 353) 0%, oklch(62.9% 0.198 31) 100%);

      --success:      oklch(60% 0.145 132);
      --warn:         oklch(82% 0.15 101);
      --danger:       oklch(62.9% 0.198 31);

      --radius-sm: 8px;
      --radius:    16px;
      --radius-lg: 24px;
      --radius-pill: 999px;

      --font-display: 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-body:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
      --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

      --container: 1200px;
      --gutter: clamp(16px, 4vw, 32px);
      --section-y: clamp(56px, 9vw, 112px);
    }

    /* ==========================================================================
       Reset
       ========================================================================== */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: clamp(15px, 1vw + 8px, 17px);
      line-height: 1.55;
      color: var(--fg);
      /* Aurora de la gama pintada en el body (no en .hero, que recorta con
         overflow) para que el color llegue hasta el borde superior, detrás
         y alrededor de la cápsula de vidrio. */
      background:
        radial-gradient(640px 360px at 6% -40px, color-mix(in oklch, oklch(89.6% 0.161 101) 44%, transparent), transparent 70%) no-repeat,
        radial-gradient(560px 330px at 30% -80px, color-mix(in oklch, oklch(82% 0.174 116) 30%, transparent), transparent 72%) no-repeat,
        radial-gradient(720px 400px at 96% -30px, color-mix(in oklch, var(--accent-hot) 26%, transparent), transparent 70%) no-repeat,
        radial-gradient(520px 300px at 72% -90px, color-mix(in oklch, oklch(73.3% 0.142 45) 22%, transparent), transparent 72%) no-repeat,
        var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-variant-numeric: tabular-nums;
      overflow-x: clip;
    }
    img, svg { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
    input, select, textarea { font: inherit; color: inherit; }
    h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
    p { margin: 0; overflow-wrap: break-word; }
    ul { margin: 0; padding: 0; list-style: none; }

    /* ==========================================================================
       Skip link a11y
       ========================================================================== */
    .skip-link {
      position: absolute; left: 8px; top: -100px;
      background: var(--shell); color: var(--fg-on-shell);
      padding: 10px 16px; border-radius: var(--radius-sm);
      z-index: 1000; font-size: 14px;
    }
    .skip-link:focus { top: 8px; }

    /* ==========================================================================
       Layout primitives
       ========================================================================== */
    .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: var(--section-y); }
    .section--dark { background: var(--shell); color: var(--fg-on-shell); }
    .section--alt  { background: var(--surface-alt); }
    .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
    .section--dark .eyebrow { color: oklch(85% 0.07 335); }
    .section-head { max-width: 720px; margin-block-end: clamp(32px, 5vw, 56px); }
    .section-head h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; margin-top: 12px; }
    .section-head p { margin-top: 16px; color: var(--muted); font-size: clamp(15px, 1vw + 8px, 18px); }
    .section--dark .section-head p { color: var(--muted-shell); }

    /* ==========================================================================
       Buttons
       ========================================================================== */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 12px 22px; border-radius: var(--radius-pill); font-weight: 500; font-size: 15px; transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease; white-space: nowrap; }
    .btn:focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 50%, transparent); outline-offset: 3px; }
    .btn--primary { background: var(--gradient-cta); color: #fff; box-shadow: 0 4px 14px -4px color-mix(in oklch, var(--accent-hot) 65%, transparent); }
    .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px color-mix(in oklch, var(--accent-hot) 75%, transparent); }
    .btn--ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
    .btn--ghost:hover { background: var(--surface-alt); }
    .section--dark .btn--ghost { background: transparent; color: var(--fg-on-shell); border-color: var(--border-shell); }
    .btn--lg { padding: 16px 28px; font-size: 16px; }

    /* ==========================================================================
       Header — barra navy sólida. El wordmark plata/magenta de Ziyegó está
       diseñado para fondo oscuro (igual que en el footer): sin cápsulas,
       sin pills, sin ornamento. Logo limpio + links + un solo CTA.
       ========================================================================== */
    .site-header {
      position: sticky; top: 10px; z-index: 50;
      background: transparent;
      color: var(--fg-on-shell);
    }
    .site-header__inner {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(12px, 2.4vw, 32px);
      min-height: 64px;
      padding-block: 6px;
      border-radius: 24px;
      background:
        linear-gradient(120deg, oklch(100% 0 0 / 0.10), oklch(100% 0 0 / 0.02) 42%),
        var(--nav-shell);
      -webkit-backdrop-filter: blur(28px) saturate(175%) brightness(0.88);
      backdrop-filter: blur(28px) saturate(175%) brightness(0.88);
      border: 1px solid oklch(100% 0 0 / 0.22);
      box-shadow:
        inset 0 1px 0 var(--glass-hi),
        0 18px 42px -26px oklch(10% 0 0 / 0.55);
    }
    .logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
    .logo img { width: 122px; max-width: 26vw; height: auto; display: block; }
    /* Wordmark en blanco tinta sobre el vidrio humo — el tratamiento monocromo
       que la propia marca usa cuando el logo va sobre superficies con color. */
    .site-header .logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 6px oklch(0% 0 0 / 0.4)); }
    .nav {
      display: flex; align-items: center;
      justify-self: center;
      gap: clamp(2px, 0.8vw, 10px);
      min-width: 0;
    }
    .nav a {
      position: relative;
      display: inline-flex; align-items: center;
      min-height: 44px;
      padding: 0 12px;
      font-size: 14px;
      font-weight: 550;
      color: var(--fg-on-shell);
      opacity: 0.82;
      white-space: nowrap;
      transition: opacity 0.15s ease;
    }
    .nav a::after {
      content: "";
      position: absolute;
      left: 12px; right: 12px; bottom: 9px;
      height: 2px;
      border-radius: var(--radius-pill);
      background: var(--gradient-cta);
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .nav a:hover, .nav a:focus-visible { opacity: 1; outline: none; }
    .nav a:hover::after, .nav a:focus-visible::after { opacity: 1; }
    .nav a.nav__link--accent {
      opacity: 1;
      color: oklch(86% 0.09 350);
      font-weight: 650;
    }
    /* "Ingresar" sólo aparece cuando el botón ghost del bar se oculta (tablet/móvil). */
    .nav__link--auth { display: none; }
    .site-header__actions { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .site-header__actions .btn { padding: 9px 18px; font-size: 14px; }
    .site-header__actions .btn--ghost {
      background: transparent;
      color: var(--fg-on-shell);
      border: 1px solid color-mix(in oklch, var(--accent-hot) 18%, var(--border-shell));
    }
    .site-header__actions .btn--ghost:hover { background: var(--nav-raised); }
    .nav-toggle {
      display: none;
      width: 44px; height: 44px;
      place-items: center;
      border: 1px solid var(--border-shell);
      border-radius: 12px;
      background: transparent;
      color: var(--fg-on-shell);
    }

    @media (max-width: 1180px) {
      .nav a { padding-inline: 9px; font-size: 13.5px; }
      .site-header__actions .btn--ghost { display: none; }
      .nav__link--auth { display: inline-flex; }
    }
    @media (max-width: 1060px) {
      /* En móvil la cápsula se pega al borde superior (sin el hueco flotante). */
      .site-header { top: 0; }
      /* Sin la barra de links, el grid pasa a 2 columnas: logo a la izquierda y
         las acciones (incluido el burger) ancladas a la derecha. */
      .site-header__inner { min-height: 62px; border-radius: 0 0 20px 20px; grid-template-columns: 1fr auto; }
      .logo img { width: 112px; max-width: 34vw; }
      .nav { display: none; }
      .nav-toggle { display: grid; }
      body.nav-open .nav {
        display: grid;
        position: absolute;
        inset: calc(100% + 8px) 0 auto 0;
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 12px;
        border-radius: 20px;
        background:
          linear-gradient(120deg, oklch(100% 0 0 / 0.1), oklch(100% 0 0 / 0.02) 40%),
          oklch(17% 0.01 328 / 0.94);
        -webkit-backdrop-filter: blur(22px) saturate(165%);
        backdrop-filter: blur(22px) saturate(165%);
        border: 1px solid var(--glass-edge);
        box-shadow:
          inset 0 1px 0 var(--glass-hi),
          0 32px 50px -30px oklch(22% 0.05 328 / 0.7);
      }
      body.nav-open .nav a { min-height: 48px; border-radius: 12px; padding: 0 14px; opacity: 0.92; }
      body.nav-open .nav a::after { display: none; }
      body.nav-open .nav a:hover, body.nav-open .nav a:focus-visible { background: var(--nav-raised); opacity: 1; }
    }
    @media (max-width: 520px) {
      .logo img { width: 104px; max-width: 38vw; }
      .site-header__actions { gap: 8px; }
      .site-header__actions .btn--primary { padding: 9px 14px; }
    }

    /* ==========================================================================
       Hero
       ========================================================================== */
    .hero { padding-block: clamp(42px, 5.8vw, 70px) clamp(28px, 3.8vw, 48px); position: relative; overflow: hidden; }
    .hero > .container { position: relative; z-index: 1; }
    .hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.55fr); gap: clamp(18px, 3.2vw, 34px); align-items: stretch; }
    .hero__grid > *,
    .quote-widget > *,
    .steps > * { min-width: 0; }
    .hero__copy h1 {
      font-size: clamp(38px, 4.8vw, 66px);
      line-height: 1.03;
      letter-spacing: -0.03em;
      max-width: 13.8ch;
    }
    .hero__copy h1 em {
      font-style: normal;
      background: var(--gradient-cta);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    /* Marcador amarillo (swatch 13) — un solo flourish juguetón en el hero */
    .hero__copy h1 mark.hl {
      background: linear-gradient(180deg, transparent 60%, color-mix(in oklch, oklch(89.6% 0.161 101) 80%, transparent) 60%);
      color: inherit;
      padding-inline: 2px;
      border-radius: 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .hero__sub { margin-top: 18px; font-size: clamp(16px, 1vw + 7px, 18px); line-height: 1.7; color: var(--muted); max-width: 52ch; overflow-wrap: anywhere; }
    .hero__cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
    .hero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px 28px; font-size: 13px; color: var(--muted); }
    .hero__meta span strong { display: block; color: var(--fg); font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1px; }
    .notice-card {
      align-self: stretch;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 12px;
      padding: clamp(18px, 2.2vw, 24px);
      border: 1px solid color-mix(in oklch, var(--border) 86%, var(--accent) 12%);
      border-radius: 28px;
      background: linear-gradient(145deg, var(--surface) 0%, color-mix(in oklch, var(--surface-alt) 82%, var(--accent-soft)) 100%);
      box-shadow: 0 22px 52px -34px color-mix(in oklch, var(--shell) 48%, transparent);
    }
    .notice-card__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .notice-card__heading {
      margin: 0;
      color: var(--fg);
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1.1;
      letter-spacing: -0.01em;
    }
    .notice-card__controls {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .notice-card__control,
    .notice-card__dot {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }
    .notice-card__control {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-pill);
      font-size: 18px;
      line-height: 1;
      display: grid;
      place-items: center;
    }
    .notice-card__control:hover,
    .notice-card__control:focus-visible,
    .notice-card__dot:hover,
    .notice-card__dot:focus-visible {
      border-color: color-mix(in oklch, var(--accent) 42%, var(--border));
      background: var(--accent-soft);
      outline: none;
      transform: translateY(-1px);
    }
    .notice-card__viewport {
      position: relative;
      overflow: hidden;
      min-height: 100%;
      border: 1px solid color-mix(in oklch, var(--border) 82%, var(--accent) 10%);
      border-radius: 22px;
      background: var(--surface);
    }
    .notice-slide {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-rows: minmax(158px, 0.82fr) auto auto;
      align-content: stretch;
      gap: clamp(14px, 1.6vw, 20px);
      padding: 18px;
      opacity: 0;
      transform: translateX(16px);
      pointer-events: none;
      transition: opacity 0.28s ease, transform 0.28s ease;
    }
    .notice-slide.is-active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    .notice-slide__media {
      min-height: 158px;
      border: 1px dashed color-mix(in oklch, var(--border) 76%, var(--accent) 18%);
      border-radius: 18px;
      background:
        linear-gradient(135deg, color-mix(in oklch, var(--accent-soft) 44%, transparent), transparent 58%),
        var(--surface-alt);
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--muted);
      padding: 16px;
    }
    .notice-slide__media svg {
      width: min(180px, 100%);
      height: auto;
    }
    .notice-slide__kicker {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .notice-slide h3 {
      max-width: 14ch;
      margin: 8px 0 0;
      font-size: clamp(23px, 2vw, 30px);
      line-height: 1.08;
      letter-spacing: -0.025em;
    }
    .notice-slide p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
      max-width: 35ch;
    }
    .notice-card__text {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }
    .notice-slide__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }
    .notice-slide__actions .btn {
      min-height: 40px;
      padding: 10px 14px;
      font-size: 13px;
    }
    .notice-slide__meta {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .notice-card__dots {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 18px;
    }
    .notice-card__dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border-radius: var(--radius-pill);
      background: color-mix(in oklch, var(--muted) 28%, transparent);
      color: transparent;
    }
    .notice-card__dot[aria-current="true"] {
      width: 24px;
      background: var(--accent);
      border-color: var(--accent);
    }
    .notice-dialog__summary {
      color: var(--muted);
      line-height: 1.5;
    }
    .notice-dialog__summary strong {
      display: block;
      color: var(--fg);
      margin-bottom: 6px;
      font-size: 18px;
    }
    .notice-dialog__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 2px;
    }
    .notice-dialog__link[hidden] {
      display: none;
    }
    .notice-dialog {
      width: min(640px, calc(100vw - 32px));
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 0;
      background: var(--surface);
      color: var(--fg);
      box-shadow: 0 28px 80px -42px color-mix(in oklch, var(--shell) 78%, transparent);
    }
    .notice-dialog::backdrop {
      background: color-mix(in oklch, var(--shell) 38%, transparent);
    }
    .notice-dialog__body {
      display: grid;
      gap: 18px;
      padding: clamp(18px, 3vw, 28px);
    }
    .notice-dialog__media {
      min-height: 260px;
      border-radius: 22px;
      border: 1px dashed color-mix(in oklch, var(--border) 64%, var(--accent) 28%);
      background:
        linear-gradient(135deg, color-mix(in oklch, var(--accent-soft) 62%, transparent), transparent 54%),
        var(--surface-alt);
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--muted);
      padding: 24px;
    }
    .notice-dialog__media strong {
      display: block;
      color: var(--fg);
      margin-bottom: 6px;
      font-size: 18px;
    }
    .notice-dialog__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }
    .notice-dialog__head h2 {
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.12;
      letter-spacing: -0.025em;
    }
    .notice-dialog__close {
      width: 40px;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      background: var(--surface);
      color: var(--fg);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }
    .notice-dialog__close:hover { background: var(--surface-alt); }

    @media (prefers-reduced-motion: reduce) {
      .notice-slide,
      .notice-card__control,
      .notice-card__dot {
        transition: none;
      }
    }

    @media (max-width: 880px) {
      .hero__grid { grid-template-columns: 1fr; }
      .hero__copy h1 { max-width: 15.5ch; }
      /* Móvil/tablet: el slide activo fluye y define la altura (los inactivos se
         ocultan), así el contenido nunca se recorta dentro de un alto fijo. */
      .notice-card { max-width: 540px; min-height: 0; }
      .notice-card__viewport { min-height: 0; overflow: visible; }
      .notice-slide { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; grid-template-rows: auto auto auto; }
      .notice-slide:not(.is-active) { display: none; }
    }
    @media (max-width: 520px) {
      .hero { padding-block-start: 44px; }
      .hero__grid,
      .hero__copy,
      .hero__sub,
      .hero__cta { max-width: 100%; }
      .hero__copy h1 { font-size: clamp(34px, 10.6vw, 42px); text-wrap: pretty; }
      .hero__sub { max-width: 34ch; }
      .hero__cta { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 320px; }
      .hero__cta .btn { width: 100%; min-width: 0; padding-inline: 16px; white-space: normal; text-align: center; }
      .hero__meta { display: grid; grid-template-columns: 1fr; gap: 12px; }
      .hero__meta span {
        min-width: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: baseline;
      }
      .hero__meta span strong { font-size: 22px; overflow-wrap: anywhere; margin-bottom: 0; }
      .notice-card {
        padding: 16px;
        border-radius: 22px;
      }
      .notice-card__top {
        display: grid;
        gap: 6px;
      }
      .notice-card__controls { justify-self: start; }
      .notice-card__viewport { min-height: 0; }
      .notice-slide { grid-template-rows: auto auto auto; padding: 14px; }
      .notice-slide__media { min-height: 128px; }
      .notice-slide h3 { max-width: 100%; }
    }

    /* ==========================================================================
       Cotizador
       ========================================================================== */
    .quote-block { margin-top: clamp(28px, 4vw, 56px); position: relative; z-index: 2; }
    .quote-widget {
      background: color-mix(in oklch, var(--accent-soft) 58%, var(--surface));
      border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--border));
      border-radius: var(--radius-lg);
      padding: 10px;
      box-shadow: 0 22px 54px -34px color-mix(in oklch, var(--accent) 34%, transparent);
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(500px, 1.05fr);
      gap: 10px;
      align-items: stretch;
    }
    .quote-widget > div:first-child {
      padding: clamp(18px, 2.5vw, 28px);
      border: 1px solid color-mix(in oklch, var(--accent) 12%, var(--border));
      border-radius: calc(var(--radius-lg) - 8px);
      background: var(--surface);
    }
    .quote-widget__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }
    .quote-widget__header h2 {
      font-size: clamp(24px, 2.4vw, 34px);
      line-height: 1.08;
    }
    .quote-widget__header p {
      margin-top: 8px;
      max-width: 52ch;
      color: var(--muted);
      font-size: 14.5px;
    }
    .quote-mode {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 16px;
      padding: 6px;
      border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--border));
      border-radius: 20px;
      background: var(--surface-alt);
    }
    .quote-mode__option {
      position: relative;
      min-width: 0;
      border: 1px solid transparent;
      border-radius: 16px;
      padding: 14px 15px 13px;
      background: transparent;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .quote-mode__option input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .quote-mode__option span {
      display: block;
      color: var(--fg);
      font-weight: 700;
      font-size: 14.5px;
      letter-spacing: -0.01em;
    }
    .quote-mode__option:has(input:checked) {
      border-color: var(--accent);
      background: var(--accent);
      box-shadow:
        0 10px 24px -18px color-mix(in oklch, var(--accent) 70%, transparent),
        inset 0 0 0 1px color-mix(in oklch, var(--accent) 12%, transparent);
    }
    .quote-mode__option:has(input:checked) span { color: var(--fg-on-shell); }
    /* Toggle secundario (caja/sobre): más compacto y en tono neutro para no
       competir con el toggle nacional/internacional. */
    .quote-mode--parcel { margin-top: -8px; }
    .quote-mode--parcel .quote-mode__option { padding: 10px 14px 9px; }
    .quote-mode--parcel .quote-mode__option span { font-size: 13.5px; }
    .quote-mode--parcel .quote-mode__option:has(input:checked) {
      border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
      background: color-mix(in oklch, var(--accent) 14%, var(--surface));
      box-shadow: none;
    }
    .quote-mode--parcel .quote-mode__option:has(input:checked) span { color: var(--accent); }
    .quote-widget__grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }
    .quote-widget__grid .field { grid-column: span 6; }
    .quote-widget__grid .field--country { grid-column: span 6; }
    .quote-widget__grid .field--cp { grid-column: span 6; }
    .dimension-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: color-mix(in oklch, var(--accent-soft) 34%, var(--surface-alt));
    }
    .dimension-fields[hidden],
    .field[hidden] { display: none; }
    .quote-widget__submit {
      grid-column: 1 / -1;
      justify-self: stretch;
      width: 100%;
      padding-block: 18px;
      font-size: 16px;
      letter-spacing: -0.01em;
      box-shadow:
        0 18px 36px -18px color-mix(in oklch, var(--accent) 60%, transparent),
        0 6px 12px -6px color-mix(in oklch, var(--accent-hot) 40%, transparent);
    }
    .quote-widget__submit[disabled] {
      cursor: wait;
      opacity: 0.78;
      transform: none;
      box-shadow: none;
    }
    .quote-widget__status[hidden] { display: none; }
    .quote-widget__status {
      grid-column: 1 / -1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
    }
    .quote-widget__status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--success);
    }
    .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .field label {
      font-size: 11px;
      font-family: var(--font-mono);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .field small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
    .field input, .field select {
      width: 100%;
      min-height: 54px;
      padding: 14px 15px;
      border: 1px solid color-mix(in oklch, var(--border) 90%, var(--fg) 4%);
      border-radius: 15px;
      background:
        linear-gradient(180deg, var(--surface) 0%, color-mix(in oklch, var(--surface-alt) 56%, var(--surface)) 100%);
      font-size: 15px;
      font-weight: 650;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,0.035);
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .field select {
      appearance: none;
      background-image:
        linear-gradient(180deg, var(--surface) 0%, color-mix(in oklch, var(--surface-alt) 56%, var(--surface)) 100%),
        url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%235B5265' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, right 14px center;
      padding-right: 40px;
    }
    .field input:focus, .field select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
    }
    .field input:hover, .field select:hover { border-color: color-mix(in oklch, var(--accent) 28%, var(--border)); }
    .quote-result {
      border-radius: calc(var(--radius-lg) - 8px);
      background:
        linear-gradient(135deg, oklch(100% 0 0 / 0.12), oklch(100% 0 0 / 0) 44%),
        radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent-hot) 42%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, color-mix(in oklch, var(--accent) 40%, transparent) 0%, transparent 54%),
        var(--quote-shell);
      border: 1px solid var(--glass-edge);
      box-shadow: inset 0 1px 0 var(--glass-hi);
      color: var(--fg-on-shell);
      padding: 24px;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      overflow: hidden;
      position: relative;
    }
    .quote-result[aria-busy="true"] {
      cursor: progress;
    }
    .quote-result__route {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: oklch(85% 0.07 335);
    }
    .quote-result__head {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .quote-result__head:has([hidden]) { display: none; }
    .quote-result__empty {
      margin-top: 18px;
      border: 1px dashed var(--border-shell);
      border-radius: var(--radius-sm);
      padding: 16px;
      color: var(--muted-shell);
      font-size: 13px;
      line-height: 1.45;
    }
    .quote-winner {
      margin-top: 18px;
      padding: 20px;
      border-radius: var(--radius);
      border: 1px solid oklch(100% 0 0 / 0.26);
      background:
        radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent-hot) 26%, transparent) 0%, transparent 60%),
        oklch(100% 0 0 / 0.12);
      box-shadow:
        inset 0 1px 0 oklch(100% 0 0 / 0.2),
        0 14px 36px -22px color-mix(in oklch, var(--accent-hot) 55%, transparent);
      display: grid;
      gap: 14px;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .quote-winner__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }
    .quote-winner__carrier {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .quote-winner__mark {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: var(--gradient-cta);
      color: white;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
    .quote-winner__carrier strong {
      display: block;
      font-family: var(--font-display);
      font-size: 17px;
      line-height: 1.1;
    }
    .quote-winner__carrier span {
      display: block;
      margin-top: 4px;
      color: var(--muted-shell);
      font-size: 12.5px;
    }
    .quote-winner__price {
      text-align: right;
      white-space: nowrap;
    }
    .quote-winner__price strong {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(30px, 3vw, 40px);
      line-height: 1;
      letter-spacing: -0.04em;
    }
    .quote-winner__price small {
      display: block;
      margin-top: 4px;
      color: var(--muted-shell);
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .quote-winner__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .quote-winner__meta span {
      border: 1px solid var(--border-shell);
      border-radius: var(--radius-pill);
      padding: 5px 9px;
      color: oklch(86% 0.04 328);
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: color-mix(in oklch, var(--shell) 40%, transparent);
    }
    .quote-winner__cta {
      width: 100%;
      justify-content: space-between;
      padding: 14px 18px;
      font-size: 14.5px;
    }
    .quote-paywall {
      position: relative;
      margin-top: 16px;
      border: 1px solid var(--border-shell);
      border-radius: var(--radius);
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(180deg,
          color-mix(in oklch, var(--shell-card) 75%, transparent) 0%,
          color-mix(in oklch, var(--shell) 96%, transparent) 100%);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .quote-result.is-loading .quote-winner,
    .quote-result.is-loading .quote-paywall {
      opacity: 0.22;
      transform: scale(0.99);
      pointer-events: none;
    }
    .quote-loading[hidden] { display: none; }
    .quote-loading {
      position: absolute;
      inset: 24px;
      z-index: 5;
      display: grid;
      align-content: center;
      gap: 18px;
      padding: 22px;
      border: 1px solid color-mix(in oklch, var(--accent-hot) 30%, var(--border-shell));
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent-hot) 20%, transparent) 0%, transparent 46%),
        var(--shell-card);
      color: var(--fg-on-shell);
      box-shadow: 0 20px 42px -30px color-mix(in oklch, var(--shell) 80%, transparent);
    }
    .quote-loading__pulse {
      display: inline-flex;
      gap: 7px;
      align-items: center;
    }
    .quote-loading__pulse span {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--accent-hot);
      animation: quote-pulse 0.9s ease-in-out infinite;
    }
    .quote-loading__pulse span:nth-child(2) { animation-delay: 0.14s; }
    .quote-loading__pulse span:nth-child(3) { animation-delay: 0.28s; }
    .quote-loading strong {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(20px, 2vw, 26px);
      line-height: 1.12;
    }
    .quote-loading p {
      margin-top: 7px;
      color: var(--muted-shell);
      font-size: 13.5px;
      max-width: 34ch;
    }
    @keyframes quote-pulse {
      0%, 100% { transform: translateY(0); opacity: 0.45; }
      50% { transform: translateY(-4px); opacity: 1; }
    }
    .quote-paywall__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--border-shell);
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .quote-paywall__lock {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 10px;
      border-radius: var(--radius-pill);
      border: 1px solid color-mix(in oklch, var(--accent-hot) 36%, var(--border-shell));
      background: color-mix(in oklch, var(--accent-hot) 14%, transparent);
      color: oklch(94% 0.06 348);
    }
    .quote-paywall__savings {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: var(--radius-pill);
      border: 1px solid color-mix(in oklch, var(--success) 50%, transparent);
      background: color-mix(in oklch, var(--success) 22%, transparent);
      color: oklch(95% 0.1 116);
    }
    .quote-paywall__savings::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--success);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 30%, transparent);
    }
    .quote-paywall__rows {
      display: grid;
      gap: 6px;
      padding: 12px 14px 0;
      position: relative;
    }
    .quote-paywall__row {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 11px;
      background: color-mix(in oklch, var(--shell-card) 60%, transparent);
      border: 1px solid var(--border-shell);
      position: relative;
      overflow: hidden;
    }
    .quote-paywall__row-mark {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: color-mix(in oklch, var(--shell) 60%, transparent);
      border: 1px solid var(--border-shell);
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: oklch(86% 0.04 328);
    }
    .quote-paywall__row-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .quote-paywall__row-name strong {
      font-family: var(--font-display);
      font-size: 14.5px;
      letter-spacing: -0.01em;
      color: var(--fg-on-shell);
      line-height: 1.05;
    }
    .quote-paywall__row-name span {
      font-size: 11px;
      color: var(--muted-shell);
      font-family: var(--font-mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .quote-paywall__row-price {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--fg-on-shell);
      min-width: 86px;
      text-align: right;
      filter: blur(7px);
      user-select: none;
      pointer-events: none;
    }
    .quote-paywall__cta {
      margin: 14px 14px 14px;
      justify-content: space-between;
      padding: 12px 16px;
      font-size: 14px;
    }

    /* ==========================================================================
       Reveal animation — cuando el cotizador devuelve resultado
       ========================================================================== */
    .quote-result::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg,
        transparent 30%,
        color-mix(in oklch, var(--accent-hot) 40%, transparent) 48%,
        color-mix(in oklch, var(--accent) 26%, transparent) 52%,
        color-mix(in oklch, var(--accent-hot) 40%, transparent) 56%,
        transparent 74%);
      transform: translateX(-110%);
      opacity: 0;
      pointer-events: none;
      mix-blend-mode: normal;
      z-index: 4;
    }
    .quote-result.is-revealing::before {
      animation: quote-sweep 1.05s cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
    }
    @keyframes quote-sweep {
      0%   { transform: translateX(-110%); opacity: 0; }
      18%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translateX(110%); opacity: 0; }
    }
    .quote-winner { position: relative; isolation: isolate; }
    .quote-winner::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: var(--gradient-cta);
      filter: blur(20px);
      opacity: 0;
      z-index: -1;
      pointer-events: none;
    }
    .quote-result.is-revealing .quote-winner {
      animation: winner-pop 0.75s cubic-bezier(0.16, 1.05, 0.32, 1) both;
    }
    .quote-result.is-revealing .quote-winner::after {
      animation: winner-glow 1.4s 0.05s ease-out forwards;
    }
    @keyframes winner-pop {
      0%   { transform: scale(0.92) translateY(10px); opacity: 0; filter: blur(4px); }
      55%  { transform: scale(1.015) translateY(0); opacity: 1; filter: blur(0); }
      100% { transform: scale(1); opacity: 1; filter: blur(0); }
    }
    @keyframes winner-glow {
      0%   { opacity: 0; }
      35%  { opacity: 0.6; }
      100% { opacity: 0; }
    }
    .quote-result.is-revealing .quote-winner__price strong {
      animation: digit-pop 0.55s 0.18s cubic-bezier(0.16, 1.1, 0.3, 1) both;
    }
    @keyframes digit-pop {
      0%   { transform: scale(0.7); opacity: 0; letter-spacing: 0.18em; filter: blur(2px); }
      100% { transform: scale(1); opacity: 1; letter-spacing: -0.04em; filter: blur(0); }
    }
    .quote-result.is-revealing .quote-winner__meta span,
    .quote-result.is-revealing .quote-winner__cta,
    .quote-result.is-revealing .quote-paywall__head,
    .quote-result.is-revealing .quote-paywall__row,
    .quote-result.is-revealing .quote-paywall__cta {
      animation: stage-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
    }
    .quote-result.is-revealing .quote-winner__meta span:nth-child(1) { animation-delay: 0.28s; }
    .quote-result.is-revealing .quote-winner__meta span:nth-child(2) { animation-delay: 0.36s; }
    .quote-result.is-revealing .quote-winner__meta span:nth-child(3) { animation-delay: 0.44s; }
    .quote-result.is-revealing .quote-winner__cta { animation-delay: 0.5s; }
    .quote-result.is-revealing .quote-paywall__head { animation-delay: 0.55s; }
    .quote-result.is-revealing .quote-paywall__row:nth-child(1) { animation-delay: 0.62s; }
    .quote-result.is-revealing .quote-paywall__row:nth-child(2) { animation-delay: 0.7s; }
    .quote-result.is-revealing .quote-paywall__row:nth-child(3) { animation-delay: 0.78s; }
    .quote-result.is-revealing .quote-paywall__cta { animation-delay: 0.88s; }
    @keyframes stage-in {
      0%   { transform: translateY(12px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .quote-result.is-revealing::before,
      .quote-result.is-revealing .quote-winner,
      .quote-result.is-revealing .quote-winner::after,
      .quote-result.is-revealing .quote-winner__price strong,
      .quote-result.is-revealing .quote-winner__meta span,
      .quote-result.is-revealing .quote-winner__cta,
      .quote-result.is-revealing .quote-paywall__head,
      .quote-result.is-revealing .quote-paywall__row,
      .quote-result.is-revealing .quote-paywall__cta { animation: none !important; }
    }
    @media (max-width: 920px) {
      .quote-widget { grid-template-columns: 1fr; }
      .quote-result { min-height: 320px; }
    }
    @media (max-width: 620px) {
      .quote-block { margin-top: 24px; }
      .quote-widget { border-radius: var(--radius); overflow: hidden; }
      .quote-widget__header { flex-direction: column; }
      .quote-mode { grid-template-columns: 1fr; }
      .quote-widget__grid,
      .dimension-fields { grid-template-columns: 1fr; }
      .quote-widget__grid .field,
      .dimension-fields,
      .quote-widget__grid .btn,
      .quote-widget__status { grid-column: auto; width: 100%; }
      .quote-widget__grid .btn { justify-self: stretch; }
      .quote-result { min-width: 0; padding: 20px; }
      .quote-result__route { letter-spacing: 0.1em; overflow-wrap: anywhere; }
      .quote-result__head { flex-direction: column; align-items: flex-start; }
      .quote-winner__row { grid-template-columns: 1fr; }
      .quote-winner__price { text-align: left; }
    }

    /* ==========================================================================
       Trust bar
       ========================================================================== */
    .trust { padding-block: 48px; border-block: 1px solid var(--border); }
    .trust__label { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
    .trust__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 48px); opacity: 0.72; }
    .trust__row span { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--muted); }
    .trust__facts {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      margin-top: 26px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--border);
    }
    .trust__fact {
      background: var(--surface);
      padding: 20px;
    }
    .trust__fact strong {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(22px, 2.2vw, 32px);
      line-height: 1;
      letter-spacing: -0.03em;
    }
    /* Eco multicolor de la gama: mismo orden que los cuatro pasos */
    .trust__fact:nth-child(1) strong { color: var(--accent); }
    .trust__fact:nth-child(2) strong { color: var(--accent-hot); }
    .trust__fact:nth-child(3) strong { color: oklch(64% 0.15 45); }
    .trust__fact:nth-child(4) strong { color: var(--success); }
    .trust__fact span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 13.5px;
    }
    @media (max-width: 820px) { .trust__facts { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 460px) { .trust__facts { grid-template-columns: 1fr; } }

    /* ==========================================================================
       Flujo compacto de operación
       ========================================================================== */
    /* Sección clara menta (swatch 09) con pasos multicolor de la gama:
       01 púrpura → 02 magenta → 03 coral → 11 verde. */
    .flow-compact {
      position: relative;
      overflow: hidden;
      background: color-mix(in oklch, oklch(73.9% 0.094 172) 14%, white);
    }
    .flow-compact::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 10% 4%, color-mix(in oklch, oklch(82% 0.174 116) 26%, transparent), transparent 28%),
        radial-gradient(circle at 90% 12%, color-mix(in oklch, oklch(89.6% 0.161 101) 34%, transparent), transparent 26%);
      pointer-events: none;
    }
    .flow-compact > .container { position: relative; z-index: 1; }
    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 24px);
    }
    .step:nth-child(1) { --step-c: var(--accent); }          /* 01 púrpura */
    .step:nth-child(2) { --step-c: var(--accent-hot); }      /* 02 magenta */
    .step:nth-child(3) { --step-c: oklch(64% 0.15 45); }     /* 03 coral, L bajada p/contraste */
    .step:nth-child(4) { --step-c: var(--success); }         /* 11 verde */
    .step {
      position: relative;
      display: grid;
      gap: 13px;
      align-content: start;
      padding: clamp(16px, 1.7vw, 22px);
      border: 1px solid color-mix(in oklch, var(--step-c) 24%, var(--border));
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 12px 30px -24px color-mix(in oklch, var(--step-c) 60%, transparent);
      min-height: 318px;
    }
    .step__num {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      background: color-mix(in oklch, var(--step-c) 14%, white);
      color: var(--step-c);
      border: 1px solid color-mix(in oklch, var(--step-c) 38%, transparent);
    }
    .step__visual {
      min-height: 132px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in oklch, var(--step-c) 16%, var(--border));
      border-radius: 14px;
      background: color-mix(in oklch, var(--step-c) 7%, white);
      overflow: hidden;
    }
    .step__visual svg {
      width: min(100%, 188px);
      height: 128px;
      display: block;
    }
    .step__visual .line { stroke: oklch(78% 0.008 328); }
    .step__visual .muted-line { stroke: oklch(66% 0.012 328); }
    .step__visual .accent-line { stroke: var(--step-c); }
    .step__visual .success-line { stroke: oklch(75.6% 0.114 141); }
    .step__visual .panel { fill: white; }
    .step__visual .soft { fill: color-mix(in oklch, var(--step-c) 22%, transparent); }
    .step__visual .success-soft { fill: color-mix(in oklch, var(--success) 20%, transparent); }
    .step__visual .ink { fill: oklch(42% 0.01 328); }
    .step__visual .muted { fill: oklch(64% 0.012 328); }
    .step__visual .accent { fill: var(--step-c); }
    .step__visual .success { fill: oklch(73.1% 0.159 132); }
    .step__copy {
      display: grid;
      gap: 8px;
    }
    .step h3 {
      font-size: clamp(19px, 1.3vw + 6px, 24px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--step-c);
    }
    .step p {
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.5;
      max-width: 26ch;
    }

    @media (max-width: 860px) {
      .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 38px); }
    }
    @media (max-width: 520px) {
      .steps { grid-template-columns: 1fr; }
      .step { min-height: auto; }
      .step p { max-width: none; }
    }

    /* ==========================================================================
       Soluciones por operación
       ========================================================================== */
    .solutions {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      grid-auto-rows: minmax(0, 1fr);
      gap: 16px;
    }
    .solution {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: clamp(24px, 2.6vw, 34px);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--surface);
      color: inherit;
    }
    .solution__meta {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      color: var(--muted);
      padding-bottom: 4px;
    }
    .solution__index {
      flex: 0 0 auto;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--accent);
      text-transform: uppercase;
      align-self: center;
    }
    .solution__volume {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      gap: 4px;
      line-height: 1;
    }
    .solution__volume strong {
      font-family: var(--font-display);
      font-size: clamp(28px, 1.7vw + 12px, 38px);
      font-weight: 600;
      letter-spacing: -0.035em;
      color: var(--fg);
      font-variant-numeric: tabular-nums;
      line-height: 0.95;
      white-space: nowrap;
    }
    .solution__volume span {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .solution--lead .solution__volume strong {
      background: var(--gradient-cta);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .solution--dark .solution__volume strong { color: var(--fg-on-shell); }
    .solution--dark .solution__volume span { color: var(--muted-shell); }
    .solution h3 {
      font-size: clamp(22px, 1.8vw + 8px, 30px);
      line-height: 1.05;
      letter-spacing: -0.025em;
    }
    .solution__headline {
      font-size: 15px;
      color: var(--muted);
      max-width: 38ch;
      margin: -4px 0 0;
    }
    .solution__list {
      display: grid;
      gap: 10px;
    }
    .solution__list li {
      position: relative;
      padding-left: 26px;
      font-size: 14px;
      line-height: 1.4;
      color: var(--fg);
    }
    .solution__list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 3px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: color-mix(in oklch, var(--accent) 18%, transparent);
      border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    }
    .solution__list li::after {
      content: "";
      position: absolute;
      left: 4px;
      top: 7px;
      width: 8px;
      height: 5px;
      border-left: 1.5px solid var(--accent);
      border-bottom: 1.5px solid var(--accent);
      transform: rotate(-45deg);
    }
    .solution__brands {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .solution__brands span {
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      background: var(--surface-alt);
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .solutions__footer {
      margin-top: clamp(24px, 2vw, 32px);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--surface-alt);
    }
    .solutions__footer p {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(15px, 1.1vw, 18px);
      letter-spacing: -0.01em;
      color: var(--fg);
    }
    .solutions__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .solution--lead {
      grid-row: span 2;
      background:
        radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 50%),
        var(--surface);
      border-color: color-mix(in oklch, var(--accent) 22%, var(--border));
    }
    .solution--lead .solution__index { color: #fff; background: var(--gradient-cta); padding: 4px 9px; border-radius: var(--radius-pill); letter-spacing: 0.14em; }
    .solution--lead h3 { font-size: clamp(28px, 2.4vw + 8px, 40px); }

    .solution--dark {
      background:
        radial-gradient(circle at 0% 100%, color-mix(in oklch, var(--accent-hot) 22%, transparent), transparent 55%),
        var(--shell);
      color: var(--fg-on-shell);
      border-color: var(--border-shell);
    }
    .solution--dark .solution__volume,
    .solution--dark .solution__meta,
    .solution--dark .solution__headline { color: var(--muted-shell); }
    .solution--dark .solution__index { color: oklch(88% 0.07 348); }
    .solution--dark .solution__list li { color: var(--fg-on-shell); }
    .solution--dark .solution__list li::before { background: color-mix(in oklch, var(--accent-hot) 22%, transparent); border-color: color-mix(in oklch, var(--accent-hot) 45%, transparent); }
    .solution--dark .solution__list li::after { border-color: oklch(92% 0.08 350); }
    .solution--dark .solution__brands span {
      border-color: var(--border-shell);
      background: color-mix(in oklch, var(--shell-card) 70%, transparent);
      color: oklch(80% 0.035 328);
    }

    @media (max-width: 980px) {
      .solutions { grid-template-columns: 1fr; grid-auto-rows: auto; }
      .solution--lead { grid-row: auto; }
    }

    /* ==========================================================================
       Integraciones
       ========================================================================== */
    .integrations {
      display: grid;
      grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
      gap: clamp(18px, 3vw, 30px);
      align-items: stretch;
    }
    .integrations > * { min-width: 0; }

    .int-benefits {
      border: 1px solid var(--border-shell);
      border-radius: var(--radius-lg);
      padding: clamp(24px, 3vw, 38px);
      background:
        radial-gradient(circle at 14% 0%, color-mix(in oklch, var(--accent) 24%, transparent) 0%, transparent 44%),
        var(--shell);
      color: var(--fg-on-shell);
      display: grid;
      align-content: start;
      gap: 18px;
    }
    .int-benefits h3 {
      font-size: clamp(22px, 1.6vw + 8px, 29px);
      line-height: 1.08;
      letter-spacing: -0.03em;
      max-width: 18ch;
    }
    .int-flow {
      position: relative;
      list-style: none;
      margin: 2px 0 0;
      padding: 0;
      counter-reset: ben;
    }
    .int-flow::before {
      content: "";
      position: absolute;
      left: 13.5px;
      top: 14px;
      bottom: 14px;
      width: 1.5px;
      background: var(--border-shell);
    }
    .int-flow li {
      position: relative;
      counter-increment: ben;
      padding: 0 0 18px 44px;
    }
    .int-flow li:last-child { padding-bottom: 0; }
    .int-flow li::before {
      content: counter(ben);
      position: absolute;
      left: 0;
      top: -1px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: color-mix(in oklch, var(--accent) 26%, var(--shell-card));
      border: 1px solid color-mix(in oklch, var(--accent) 50%, transparent);
      color: oklch(90% 0.06 330);
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .int-flow strong {
      display: block;
      font-size: 15.5px;
      letter-spacing: -0.01em;
    }
    .int-flow span {
      display: block;
      margin-top: 3px;
      color: var(--muted-shell);
      font-size: 13.5px;
      line-height: 1.45;
    }
    .int-rule {
      border: 1px solid var(--border-shell);
      border-radius: var(--radius);
      padding: 15px 17px;
      background: color-mix(in oklch, var(--shell-card) 70%, transparent);
    }
    .int-rule span {
      display: block;
      color: oklch(87% 0.075 332);
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .int-rule strong {
      display: block;
      margin-top: 6px;
      font-size: 15px;
      letter-spacing: -0.01em;
    }
    .int-rule p {
      margin-top: 4px;
      color: var(--muted-shell);
      font-size: 13px;
      line-height: 1.45;
    }

    .int-plugins {
      display: grid;
      align-content: start;
      gap: 14px;
    }
    .int-plugins__label {
      display: block;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .plugin-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .plugin-card {
      min-width: 0;
      min-height: 116px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 14px;
      align-items: start;
      color: var(--fg);
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.18s;
    }
    .plugin-card:hover {
      border-color: color-mix(in oklch, var(--accent) 48%, var(--border));
      transform: translateY(-2px);
      box-shadow: 0 14px 30px -22px color-mix(in oklch, var(--accent) 60%, transparent);
    }
    .plugin-card__mark {
      width: 72px;
      height: 52px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in oklch, var(--surface) 78%, var(--accent-soft));
      border: 1px solid color-mix(in oklch, var(--border) 82%, transparent);
      color: var(--accent);
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.02em;
      overflow: hidden;
    }
    .plugin-card__mark img {
      display: block;
      width: auto;
      max-width: 56px;
      max-height: 30px;
      object-fit: contain;
    }
    .plugin-card__mark--wide img { max-width: 64px; max-height: 34px; }
    .plugin-card__copy {
      display: block;
      min-width: 0;
    }
    .plugin-card__copy strong {
      display: block;
      font-size: 16px;
      line-height: 1.15;
      letter-spacing: -0.015em;
    }
    .plugin-card__copy span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    @media (max-width: 920px) {
      .integrations { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) { .plugin-grid { grid-template-columns: 1fr; } }

    /* ==========================================================================
       FAQ
       ========================================================================== */
    .faq { max-width: 820px; margin-inline: auto; }
    .faq details {
      border-bottom: 1px solid var(--border);
      padding: 22px 0;
    }
    .faq details:first-of-type { border-top: 1px solid var(--border); }
    .faq summary {
      list-style: none;
      cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 500;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "+";
      font-family: var(--font-mono);
      font-size: 22px;
      color: var(--accent);
      transition: transform 0.18s;
      flex-shrink: 0;
    }
    .faq details[open] summary::after { content: "−"; }
    .faq details p { margin-top: 14px; color: var(--muted); font-size: 15px; max-width: 65ch; }

    /* ==========================================================================
       Banner CTA final
       ========================================================================== */
    .cta-banner {
      background: var(--gradient-cta);
      color: #fff;
      border-radius: var(--radius-lg);
      padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
      display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center;
      position: relative; overflow: hidden;
    }
    .cta-banner::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at 90% 0%, color-mix(in oklch, var(--accent-hot) 34%, transparent) 0%, transparent 42%);
      pointer-events: none;
    }
    .cta-banner h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; max-width: 18ch; }
    .cta-banner p { margin-top: 14px; opacity: 0.88; max-width: 50ch; font-size: 16px; }
    .cta-banner .btn--ghost {
      background: color-mix(in oklch, var(--shell) 24%, transparent);
      border-color: color-mix(in oklch, var(--fg-on-shell) 28%, transparent);
      color: #fff;
    }
    .cta-banner .btn--ghost:hover { background: color-mix(in oklch, var(--shell) 34%, transparent); }

    @media (max-width: 720px) { .cta-banner { grid-template-columns: 1fr; } }

    /* ==========================================================================
       Footer
       ========================================================================== */
    .site-footer {
      position: relative;
      color: var(--fg-on-shell);
      padding-block: 72px 32px;
      background:
        linear-gradient(180deg, oklch(100% 0 0 / 0.1), oklch(100% 0 0 / 0) 120px),
        radial-gradient(900px 420px at 10% 0%, color-mix(in oklch, var(--accent) 50%, transparent), transparent 72%),
        radial-gradient(820px 400px at 90% 16%, color-mix(in oklch, var(--accent-hot) 34%, transparent), transparent 70%),
        radial-gradient(720px 420px at 52% 100%, color-mix(in oklch, oklch(73.9% 0.094 172) 16%, transparent), transparent 72%),
        var(--footer-shell);
      border-top: 1px solid var(--glass-edge);
      box-shadow: inset 0 1px 0 var(--glass-hi);
    }
    .site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 28px; }
    .site-footer__brand .logo {
      min-height: auto;
      padding: 0;
      background: transparent;
      box-shadow: none;
      color: var(--fg-on-shell);
    }
    .site-footer__brand .logo img { width: 112px; max-width: 30vw; }
    .site-footer__brand p { margin-top: 14px; font-size: 14px; color: oklch(78% 0.02 328); max-width: 36ch; }
    .site-footer__brand .socials { display: flex; gap: 10px; margin-top: 20px; }
    .site-footer__brand .socials a { width: 36px; height: 36px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--accent-hot) 20%, var(--border-shell)); display: grid; place-items: center; transition: background 0.15s, border-color 0.15s; }
    .site-footer__brand .socials a:hover { background: var(--footer-card); border-color: color-mix(in oklch, var(--accent-hot) 58%, var(--border-shell)); }
    .site-footer__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: oklch(84% 0.07 350); font-family: var(--font-mono); font-weight: 600; margin-bottom: 16px; }
    .site-footer__col ul li { padding: 6px 0; }
    .site-footer__col a { font-size: 14.5px; color: var(--fg-on-shell); opacity: 0.78; transition: opacity 0.15s; }
    .site-footer__col a:hover { opacity: 1; color: oklch(88% 0.075 350); }
    .site-footer__col li strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
    .site-footer__legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid color-mix(in oklch, var(--fg-on-shell) 14%, transparent); }
    .site-footer__legal h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: oklch(84% 0.07 350); font-family: var(--font-mono); font-weight: 600; margin: 0 0 10px; }
    .site-footer__legal p { font-size: 12px; line-height: 1.6; color: var(--fg-on-shell); opacity: 0.62; max-width: 100%; }
    .site-footer__bottom {
      margin-top: 56px; padding-top: 24px;
      border-top: 1px solid color-mix(in oklch, var(--accent-hot) 18%, var(--border-shell));
      display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
      font-size: 13px; color: var(--muted-shell);
    }
    .site-footer__bottom a { color: var(--muted-shell); margin-right: 16px; }
    .site-footer__bottom a:hover { color: var(--fg-on-shell); }

    @media (max-width: 880px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } .site-footer__brand { grid-column: 1 / -1; } }
    @media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

    /* ==========================================================================
       Reveal
       ========================================================================== */
    .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .reveal.is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    /* ==========================================================================
       Páginas internas (paqueterías, carrier, rastreo, legal) — API-driven.
       Reutilizan tokens y clases del home (.section, .container, .faq, .btn).
       ========================================================================== */
    .page-hero { padding-top: 132px; }
    .page-hero__sub { color: var(--muted); max-width: 640px; margin: 14px auto 0; }
    .api-empty { color: var(--muted); text-align: center; padding: 40px 0; }

    /* Índice de paqueterías */
    .carrier-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 18px;
    }
    .carrier-card {
      display: flex; flex-direction: column; gap: 14px;
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .carrier-card:hover {
      border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
      box-shadow: 0 18px 40px -28px color-mix(in oklch, var(--accent) 60%, transparent);
      transform: translateY(-2px);
    }
    .carrier-card__logo { height: 44px; display: flex; align-items: center; }
    .carrier-card__logo img { max-height: 40px; max-width: 140px; width: auto; object-fit: contain; }
    .carrier-card__logo strong { font-family: var(--font-mono); font-size: 20px; color: var(--accent); }
    .carrier-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .carrier-card__body strong { font-size: 17px; }
    .carrier-card__body span { color: var(--muted); font-size: 14px; line-height: 1.45; }
    .carrier-card__cta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 600; }

    /* Detalle de carrier */
    .carrier-hero { padding-top: 124px; }
    .carrier-hero__logo { margin-bottom: 18px; }
    .carrier-hero__logo img { max-height: 64px; max-width: 240px; width: auto; object-fit: contain; }
    .carrier-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .carrier-why h2, .carrier-services h2 { margin-bottom: 16px; }
    .carrier-why p { color: var(--muted); font-size: 17px; line-height: 1.7; }
    .carrier-resources {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 28px;
    }
    .carrier-resource {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px;
      background: var(--surface); font-weight: 600; transition: border-color .15s, background .15s;
    }
    .carrier-resource:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, var(--surface)); }
    .carrier-resource span { color: var(--accent); }

    /* Legal (aviso, términos, tyc carrier) */
    .legal-page__inner { max-width: 860px; }
    .legal-updated { color: var(--muted); font-size: 14px; font-family: var(--font-mono); }
    .legal-content { margin-top: 24px; line-height: 1.7; color: var(--fg); overflow-wrap: anywhere; }
    .legal-content h2 { font-size: clamp(20px, 3vw, 26px); margin: 32px 0 12px; }
    .legal-content h3 { font-size: 18px; margin: 24px 0 10px; }
    .legal-content p { margin: 0 0 14px; color: color-mix(in oklch, var(--fg) 86%, transparent); }
    .legal-content ul, .legal-content ol { margin: 0 0 16px; padding-left: 22px; }
    .legal-content li { margin-bottom: 6px; }
    .legal-content a { color: var(--accent); text-decoration: underline; }
    /* table-layout:fixed obliga a las tablas (vienen del backend con border/cellpadding
       anchos) a respetar el ancho del contenedor en móvil; el contenido envuelve en
       vez de desbordar y cortarse a lo largo. */
    .legal-content table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
    .legal-content td, .legal-content th { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
    .legal-content img { max-width: 100%; height: auto; }
    @media (max-width: 560px) {
      .legal-content table { font-size: 13px; }
      .legal-content td, .legal-content th { padding: 6px 8px; }
    }

    /* Rastreo */
    .track-page { padding-top: 124px; }
    .track-page__inner { max-width: 720px; }
    .track-form { display: flex; gap: 10px; margin: 28px 0 0; }
    .track-form input {
      flex: 1; min-width: 0; padding: 14px 16px; font-size: 16px;
      border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
      font-variant-numeric: tabular-nums; color: var(--fg);
    }
    .track-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
    .track-status { display: block; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface-alt); color: var(--muted); font-size: 14.5px; }
    .track-result { margin-top: 26px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: 24px; }
    .track-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
    .track-meta__item { display: flex; flex-direction: column; gap: 2px; }
    .track-meta__item span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-mono); }
    .track-meta__item strong { font-size: 15px; }
    .track-current {
      display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px;
      border-radius: 12px; background: color-mix(in oklch, var(--success) 12%, var(--surface));
      border: 1px solid color-mix(in oklch, var(--success) 30%, transparent);
    }
    .track-current > span:nth-child(2) { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); }
    .track-current strong { margin-left: auto; color: oklch(48% 0.13 150); font-size: 15px; }
    .track-current__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--success); }
    .track-history__title { font-size: 18px; margin: 24px 0 16px; }
    .track-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid color-mix(in oklch, var(--accent) 40%, var(--border)); }
    .track-event { position: relative; padding: 0 0 22px 22px; }
    .track-event__dot { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 999px; background: var(--border); border: 3px solid var(--surface); }
    .track-event.is-current .track-event__dot { background: var(--accent); }
    .track-event__body { display: flex; flex-direction: column; gap: 2px; }
    .track-event__body strong { font-size: 15px; }
    .track-event.is-current .track-event__body strong { color: var(--accent); }
    .track-event__date { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
    .track-event__loc { font-size: 13.5px; color: var(--muted); }

    @media (max-width: 760px) {
      .carrier-cols { grid-template-columns: 1fr; gap: 32px; }
      .track-form { flex-direction: column; }
    }

    /* ==========================================================================
       Cotizador — panel derecho: promo inicial → recorrido del camión (una
       parada por paquetería) → resultados con paywall (solo la más barata
       muestra precio). Filas en vidrio blanco (sticker) sobre el shell ciruela.
       ========================================================================== */
    .quote-result [hidden] { display: none !important; }

    /* Estado inicial: invitación a registrarse */
    .quote-promo {
      flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
      gap: 14px; min-height: 280px; padding: 18px 10px;
      opacity: 1; transform: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .quote-promo.is-leaving { opacity: 0; transform: translateX(26px); }
    .quote-promo .eyebrow { color: oklch(85% 0.07 335); }
    .quote-promo h3 { color: var(--fg-on-shell); font-size: clamp(20px, 2vw, 26px); line-height: 1.15; max-width: 360px; }
    .quote-promo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
    .quote-promo__list li {
      position: relative; padding-left: 26px;
      color: color-mix(in oklch, var(--fg-on-shell) 86%, transparent); font-size: 14.5px;
    }
    .quote-promo__list li::before {
      content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
      border-radius: 999px; background: color-mix(in oklch, var(--success) 80%, white);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 100% no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 100% no-repeat;
    }
    .quote-promo__cta { margin-top: 6px; }
    .quote-promo__hint { font-size: 12.5px; color: color-mix(in oklch, var(--fg-on-shell) 62%, transparent); }

    /* Iconos del toggle caja/sobre */
    .quote-mode--parcel .quote-mode__option span {
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .quote-mode--parcel .quote-mode__option svg { flex: 0 0 auto; opacity: 0.85; }

    /* ==========================================================================
       Carga cinematográfica: el camión queda fijo al centro (la "cámara" lo
       sigue) y el mundo se desplaza — skyline en paralaje, carretera con rayas
       en movimiento y sucursales que cruzan la escena al ritmo de cada
       respuesta real de la API. Mientras carga, la escena ES el panel.
       ========================================================================== */
    .quote-journey { flex: 1; display: flex; flex-direction: column; margin: 2px 0 14px; }
    .quote-journey__scene {
      position: relative; flex: 1; min-height: 250px; overflow: hidden;
      border-radius: 14px;
      background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--accent-hot) 16%, transparent), transparent 58%),
        linear-gradient(to bottom, oklch(24% 0.055 328), oklch(31% 0.07 328) 72%, oklch(21% 0.04 328) 72.5%);
      border: 1px solid color-mix(in oklch, white 14%, transparent);
      opacity: 1; transition: opacity 0.55s ease;
    }
    .quote-journey.is-done .quote-journey__scene { opacity: 0; }

    .quote-journey__star {
      position: absolute; width: 3px; height: 3px; border-radius: 999px;
      background: color-mix(in oklch, white 75%, transparent);
      animation: qj-twinkle 2.6s ease-in-out infinite;
    }
    @keyframes qj-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }

    /* Skyline en dos planos (SVG repetible inline). El plano lejano va lento,
       el cercano más rápido: eso construye la sensación de cámara en travelling. */
    .quote-journey__skyline {
      position: absolute; left: 0; right: 0; background-repeat: repeat-x;
    }
    .quote-journey__skyline--far {
      bottom: 28%; height: 34%; opacity: 0.5;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120' viewBox='0 0 420 120'%3E%3Cg fill='%23493a55'%3E%3Crect x='8' y='38' width='44' height='82'/%3E%3Crect x='62' y='66' width='34' height='54'/%3E%3Crect x='104' y='22' width='52' height='98'/%3E%3Crect x='168' y='58' width='30' height='62'/%3E%3Crect x='208' y='40' width='46' height='80'/%3E%3Crect x='266' y='74' width='34' height='46'/%3E%3Crect x='308' y='30' width='48' height='90'/%3E%3Crect x='366' y='62' width='38' height='58'/%3E%3C/g%3E%3C/svg%3E");
      background-size: auto 100%; background-position: 0 bottom;
    }
    .quote-journey__skyline--near {
      bottom: 27.5%; height: 46%; opacity: 0.85;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='150' viewBox='0 0 520 150'%3E%3Cg fill='%23352940'%3E%3Crect x='0' y='52' width='64' height='98'/%3E%3Crect x='80' y='84' width='48' height='66'/%3E%3Crect x='142' y='34' width='70' height='116'/%3E%3Crect x='228' y='70' width='44' height='80'/%3E%3Crect x='286' y='48' width='62' height='102'/%3E%3Crect x='362' y='90' width='42' height='60'/%3E%3Crect x='418' y='40' width='66' height='110'/%3E%3C/g%3E%3Cg fill='%23F5DF4D' opacity='.32'%3E%3Crect x='152' y='46' width='7' height='7'/%3E%3Crect x='168' y='62' width='7' height='7'/%3E%3Crect x='190' y='46' width='7' height='7'/%3E%3Crect x='296' y='60' width='7' height='7'/%3E%3Crect x='318' y='78' width='7' height='7'/%3E%3Crect x='430' y='52' width='7' height='7'/%3E%3Crect x='448' y='70' width='7' height='7'/%3E%3Crect x='12' y='66' width='7' height='7'/%3E%3C/g%3E%3C/svg%3E");
      background-size: auto 100%; background-position: 0 bottom;
    }
    .quote-journey.is-driving .quote-journey__skyline--far,
    .quote-journey.is-looping .quote-journey__skyline--far { animation: qj-scroll 34s linear infinite; }
    .quote-journey.is-driving .quote-journey__skyline--near,
    .quote-journey.is-looping .quote-journey__skyline--near { animation: qj-scroll 13s linear infinite; }
    @keyframes qj-scroll { to { background-position: -1040px bottom; } }

    /* Carretera: asfalto + raya central en movimiento rápido (primer plano) */
    .quote-journey__road {
      position: absolute; left: 0; right: 0; bottom: 0; height: 27.5%;
      z-index: 1;
      background:
        repeating-linear-gradient(to right,
          color-mix(in oklch, white 56%, transparent) 0 34px,
          transparent 34px 78px) 0 46% / auto 3.5px no-repeat,
        linear-gradient(to bottom, oklch(19% 0.035 328), oklch(15% 0.03 328));
      background-blend-mode: normal;
    }
    .quote-journey.is-driving .quote-journey__road,
    .quote-journey.is-looping .quote-journey__road { animation: qj-road 0.62s linear infinite; }
    @keyframes qj-road { to { background-position: -112px 46%, 0 0; } }

    /* El camión: fijo al centro, grande, SOBRE la carretera (capa superior) */
    .quote-journey__truck {
      position: absolute; left: 50%; bottom: 13%;
      width: clamp(118px, 32%, 152px);
      transform: translateX(-50%);
      z-index: 3;
    }
    .quote-journey__truck svg { display: block; width: 100%; height: auto; }
    .quote-journey.is-driving .quote-journey__truck,
    .quote-journey.is-looping .quote-journey__truck { animation: qj-suspension 0.9s ease-in-out infinite; }
    @keyframes qj-suspension {
      0%, 100% { transform: translateX(-50%) translateY(0) rotate(0.001deg); }
      30% { transform: translateX(-50%) translateY(-1.6px) rotate(-0.3deg); }
      65% { transform: translateX(-50%) translateY(0.6px) rotate(0.25deg); }
    }
    .qj-hub { transform-box: fill-box; transform-origin: center; }
    .quote-journey.is-driving .qj-hub,
    .quote-journey.is-looping .qj-hub { animation: qj-hub-spin 0.55s linear infinite; }
    @keyframes qj-hub-spin { to { transform: rotate(360deg); } }

    /* Palomita que brinca sobre el camión cuando una paquetería entrega tarifa */
    .quote-journey__drop {
      position: absolute; left: 38%; top: -10px; width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 999px; background: var(--success); color: #fff;
      box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--success) 80%, transparent);
      opacity: 0; pointer-events: none;
    }
    .quote-journey__drop.is-active { animation: qj-drop 0.9s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes qj-drop {
      0% { opacity: 0; transform: translateY(10px) scale(0.4); }
      28% { opacity: 1; transform: translateY(-8px) scale(1.12); }
      62% { opacity: 1; transform: translateY(-4px) scale(1); }
      100% { opacity: 0; transform: translateY(-16px) scale(0.85); }
    }

    /* Sucursales que cruzan la escena (una por paquetería consultada).
       Van en la banqueta: detrás del camión, delante del skyline. */
    .quote-journey__pass { position: absolute; inset: 0; z-index: 2; }
    .qj-stop {
      position: absolute; bottom: 27%; left: 0; width: 92px;
      animation: qj-pass var(--pass-ms, 2000ms) linear both;
      will-change: transform;
    }
    /* La distancia inicial la fija el JS con --pass-from (ancho real de la escena). */
    @keyframes qj-pass {
      from { transform: translateX(var(--pass-from, 560px)); }
      to { transform: translateX(-150px); }
    }
    .qj-stop svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px oklch(0% 0 0 / 0.35)); }
    /* Nombre como letrero flotante sobre la sucursal: chip oscuro con texto
       blanco, bien separado de la carretera. */
    .qj-stop__name {
      position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
      padding: 3px 10px; border-radius: 999px;
      background: oklch(16% 0.035 328 / 0.88);
      border: 1px solid color-mix(in oklch, white 18%, transparent);
      font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em;
      text-transform: uppercase; color: #fff;
      white-space: nowrap;
    }
    .qj-stop.is-hit .qj-stop__name {
      background: oklch(28% 0.07 328 / 0.95);
      border-color: color-mix(in oklch, var(--warn) 55%, transparent);
    }
    .qj-stop.is-hit .qj-window { animation: qj-light 0.7s ease both; }
    @keyframes qj-light { 0% { fill: #4a3f57; } 40% { fill: #F5DF4D; } 100% { fill: #F5DF4D; } }
    .qj-stop.is-miss { opacity: 0.55; }

    /* Meta: estado + barra de avance */
    .quote-journey__meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
    .quote-journey__label {
      flex: 1; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
      color: var(--fg-on-shell); opacity: 0.9; animation: q-label-in 0.3s ease both;
    }
    @keyframes q-label-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.9; transform: none; } }
    .quote-journey__bar {
      flex: 0 0 110px; height: 5px; border-radius: 999px; overflow: hidden;
      background: color-mix(in oklch, white 16%, transparent);
    }
    .quote-journey__bar i {
      display: block; height: 100%; width: 0; border-radius: 999px;
      background: linear-gradient(90deg, var(--accent-hot), var(--warn));
      transition: width 0.4s ease;
    }

    @media (max-width: 760px) {
      .quote-journey__scene { min-height: 200px; }
      .quote-journey__truck { width: clamp(98px, 36%, 130px); }
    }

    /* Filas de resultado: vidrio blanco translúcido (sticker sobre ciruela) */
    .quote-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .quote-row {
      position: relative;
      display: flex; align-items: center; gap: 14px; padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid oklch(100% 0 0 / 0.5);
      background: oklch(100% 0 0 / 0.92);
      color: var(--fg);
      box-shadow: 0 8px 22px -16px oklch(0% 0 0 / 0.5);
      opacity: 1; transform: none; cursor: pointer;
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s, border-color 0.3s, background 0.3s;
    }
    .quote-row.is-entering { opacity: 0; transform: translateY(14px) scale(0.96); }
    /* Enlace estirado: toda la fila es clickeable hacia registro. */
    .quote-row__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
    .quote-row__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .quote-row:not(.is-entering):hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); box-shadow: 0 14px 30px -18px oklch(0% 0 0 / 0.55); }
    .quote-row__logo {
      flex: 0 0 auto; width: 56px; height: 40px; border-radius: 9px;
      background: var(--surface-alt);
      display: flex; align-items: center; justify-content: center; padding: 5px;
    }
    .quote-row__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .quote-row__mark { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--accent); }
    .quote-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .quote-row__info > strong { color: var(--fg); font-size: 15px; letter-spacing: -0.01em; }
    /* :not(.quote-row__badge) — si no se excluye, esta regla (más específica que
       .quote-row__badge) pinta el texto del badge en gris y le impone 12px. */
    .quote-row__info > span:not(.quote-row__badge) { color: var(--muted); font-size: 12px; }
    .quote-row__badge {
      align-self: flex-start; margin-top: 5px; font-family: var(--font-mono);
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
      padding: 3px 10px; border-radius: 999px;
      background: var(--gradient-cta); color: #fff;
      text-shadow: 0 1px 1.5px rgba(20, 5, 20, 0.4);
      box-shadow: 0 3px 9px -4px color-mix(in oklch, var(--accent) 70%, transparent);
      animation: q-badge-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.2s both;
    }
    /* El pop es SÓLO escala — nunca toca la opacidad, así el texto jamás queda invisible. */
    @keyframes q-badge-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
    .quote-row__price {
      display: flex; align-items: baseline; gap: 5px;
      font-family: var(--font-mono); font-weight: 700; font-size: 18px;
      color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    /* Bloqueadas: datos visibles, precio oculto tras blur + candado */
    .quote-row.is-locked { background: oklch(100% 0 0 / 0.74); }
    .quote-row.is-locked .quote-row__logo { opacity: 0.85; }
    .quote-row__blur {
      filter: blur(7px); user-select: none; pointer-events: none;
      color: var(--muted); letter-spacing: 1px;
    }
    .quote-row__lock { color: var(--accent); align-self: center; }
    /* Ganadora: única con precio, glow cálido */
    .quote-row.is-best {
      background: #fff;
      border-color: color-mix(in oklch, var(--warn) 70%, white);
      box-shadow:
        0 16px 38px -18px color-mix(in oklch, var(--warn) 65%, transparent),
        inset 0 0 0 1px color-mix(in oklch, var(--warn) 30%, transparent);
      animation: q-best-glow 1.6s ease-out 0.5s 1;
    }
    @keyframes q-best-glow {
      0%, 100% { box-shadow: 0 16px 38px -18px color-mix(in oklch, var(--warn) 65%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--warn) 30%, transparent); }
      45% { box-shadow: 0 18px 50px -14px color-mix(in oklch, var(--warn) 95%, transparent), inset 0 0 0 2px color-mix(in oklch, var(--warn) 55%, transparent); }
    }
    .quote-row.is-best .quote-row__price strong { font-size: 22px; color: var(--accent-hot); }
    .quote-row.is-best .quote-row__price small { font-size: 11px; color: var(--muted); font-weight: 600; }

    /* CTA de desbloqueo (paywall) */
    .quote-unlock {
      margin-top: 14px; padding: 16px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
      border-radius: 14px;
      background:
        linear-gradient(120deg, color-mix(in oklch, var(--accent-hot) 30%, transparent), transparent 65%),
        color-mix(in oklch, white 10%, transparent);
      border: 1px solid color-mix(in oklch, white 22%, transparent);
      animation: q-unlock-in 0.5s cubic-bezier(.22,.61,.36,1) 0.25s both;
    }
    @keyframes q-unlock-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .quote-unlock__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .quote-unlock__copy strong { color: var(--fg-on-shell); font-size: 15.5px; letter-spacing: -0.01em; }
    .quote-unlock__copy span { color: color-mix(in oklch, var(--fg-on-shell) 74%, transparent); font-size: 12.5px; }
    .quote-unlock__cta { flex: 0 0 auto; box-shadow: 0 14px 30px -14px color-mix(in oklch, var(--accent-hot) 80%, transparent); }

    .quote-widget__status[hidden], .track-status[hidden] { display: none !important; }
    .quote-widget__status {
      margin-top: 12px; padding: 11px 13px; border-radius: 10px; font-size: 13px;
      background: color-mix(in oklch, var(--danger) 24%, transparent); color: #fff;
    }

    /* Fix: logo de la paquetería centrado en /paqueterias/{slug} */
    .carrier-hero__logo { display: flex; justify-content: center; }

    /* /paqueterias: menos aire entre el hero y el grid; cards con flecha sutil
       en lugar del botón "Más información". */
    .page-hero { padding-bottom: 0; }
    .page-hero + .section { padding-top: clamp(28px, 4vw, 44px); }
    .carrier-card { position: relative; }
    .carrier-card__arrow {
      position: absolute; top: 18px; right: 18px;
      width: 30px; height: 30px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      color: var(--accent); background: color-mix(in oklch, var(--accent) 9%, transparent);
      font-weight: 600; opacity: 0; transform: translateX(-6px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .carrier-card:hover .carrier-card__arrow,
    .carrier-card:focus-visible .carrier-card__arrow { opacity: 1; transform: none; }

    /* Legal: callouts y separadores del contenido transformado */
    .legal-content .legal-callout {
      padding: 14px 18px; border-left: 4px solid var(--accent);
      background: var(--surface-alt); border-radius: 0 10px 10px 0;
    }
    .legal-content hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }