:root {
      /* Paleta institucional compartida con front/style/ui.css (azul marino + celeste),
         más un acento ámbar reservado para los tickets y el sello. Sin verde
         y sin imitar la composición de SLEP Moviliza. */
      --navy-deep: #071b32;
      --navy: #0c2745;
      --navy-700: #1e3a5f;
      --blue: #1665b5;
      --blue-deep: #124f8c;
      --blue-soft: #eaf4fc;
      --teal: #27c6b1;
      --amber: #f0ad3d;
      --amber-deep: #8a5a12;
      --amber-ink: #5c3b0c;
      --text: #18314e;
      --muted: #61758c;
      --line: #dce6f0;
      --surface: #ffffff;
      --canvas: #f4f8fc;
      color-scheme: light; font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--navy-deep);
    }
    * { box-sizing: border-box; }
    html { overflow-x: hidden; }
    body { margin: 0; min-width: 280px; overflow-x: hidden; background: var(--navy-deep); }
    body.intro-open { overflow: hidden; }
    [hidden] { display: none !important; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

    /* ---------- Escena nocturna del valle (fondo compartido) ---------- */
    .scene-ridges { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
    .ridge { position: absolute; left: -2%; right: -2%; bottom: 0; }
    .ridge-a { height: 30%; background: linear-gradient(180deg, #4d7aad 0%, #4d7aad 4%, #234873 17%, #234873 100%); clip-path: polygon(0% 62%, 8% 44%, 18% 58%, 30% 32%, 42% 50%, 54% 28%, 66% 46%, 78% 24%, 90% 42%, 100% 30%, 100% 100%, 0% 100%); }
    .ridge-b { height: 20%; background: linear-gradient(180deg, #3a6089 0%, #3a6089 5%, #163656 20%, #163656 100%); clip-path: polygon(0% 70%, 12% 48%, 24% 64%, 38% 40%, 52% 60%, 64% 38%, 78% 58%, 90% 42%, 100% 55%, 100% 100%, 0% 100%); }
    .ridge-c { height: 12%; background: linear-gradient(180deg, #2d4f78 0%, #2d4f78 7%, #0e2543 26%, #0e2543 100%); clip-path: polygon(0% 78%, 14% 58%, 28% 72%, 44% 52%, 58% 70%, 74% 50%, 88% 68%, 100% 56%, 100% 100%, 0% 100%); }
    .scene-texture { position: absolute; z-index: -2; inset: 0; opacity: .5; background-image: radial-gradient(#ffffff1c 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 80% 65% at 50% 18%, #000 40%, transparent 92%); pointer-events: none; }
    .scene-glow { position: absolute; z-index: -3; inset: 0; pointer-events: none; }
    .scene-glow::before, .scene-glow::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(110px); }
    .scene-glow::before { top: -120px; left: -80px; background: #1665b545; }
    .scene-glow::after { right: -100px; bottom: 10%; background: #f0ad3d26; }

    /* ---------- Diagrama de la precarga (seis comunas) ---------- */
    .network { display: block; }
    .network .route { fill: none; stroke: #4f87c2; stroke-opacity: .55; stroke-width: 2.5; }
    .network .origin-ring { fill: none; stroke: #6fb3e0; stroke-opacity: .55; stroke-width: 1.4; }
    .network .origin { fill: #bfe3f5; stroke: var(--navy-700); stroke-width: 2.5; }
    .network .hub { fill: var(--blue-soft); stroke: var(--amber); stroke-width: 4.5; }
    .network .hub-tray { fill: none; stroke: var(--blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
    .network text { fill: #f3f9fd; font: 700 17px Inter, system-ui, sans-serif; text-anchor: middle; }
    .network .hub-title { fill: var(--navy); font-size: 23px; font-weight: 820; }
    .network .hub-subtitle { fill: var(--blue-deep); font-size: 13px; font-weight: 650; }
    .mobile-network { display: none; }
    .mobile-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0; padding: 0; }
    .mobile-chips li { padding: 6px 11px; border: 1px solid #9fcdf050; border-radius: 999px; background: #ffffff14; color: #eaf4fc; font-size: .76rem; font-weight: 650; }
    .mobile-link { width: 2px; height: 16px; margin: 8px auto; background: linear-gradient(var(--amber), transparent); }
    .mobile-hub-badge { display: block; width: max-content; max-width: 100%; margin: 0 auto; padding: .5rem .9rem; border-radius: 10px; background: var(--blue-soft); color: var(--navy); font-size: .82rem; font-weight: 760; }
    @media (max-width: 640px) {
      .intro .network { display: none; }
      .intro .mobile-network { display: block; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .network .tickets { display: none; }
    }

    /* ---------- Precarga ---------- */
    .intro { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 22px; overflow: auto; text-align: center; color: #f4f9fd; background: radial-gradient(circle at 50% 36%, var(--navy-700), var(--navy-deep) 76%); transition: opacity .35s ease, visibility .35s ease; }
    .intro.leaving { opacity: 0; visibility: hidden; }
    .intro-inner { position: relative; width: min(560px, 100%); }
    .intro-eyebrow { margin: 0 0 .55rem; color: #a9d4f5; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    .intro-title { margin: 0; font-size: clamp(1.4rem, 3.2vw, 2.05rem); font-weight: 820; letter-spacing: -.035em; line-height: 1.16; }
    .intro-title span { color: #cfe0f0; font-weight: 650; }
    .intro-visual { position: relative; width: min(74vh, 420px, 88vw); margin: 1rem auto 0; aspect-ratio: 1 / 1; }
    .intro-visual .network { width: 100%; height: 100%; }
    .intro-visual .mobile-network { padding: 8px 4px 0; }
    .intro-caption { margin: .8rem 0 0; color: #cfe0f0; font-size: .86rem; }
    .intro-skip { margin: 1rem auto 0; padding: .5rem .95rem; border: 1px solid #9fcdf070; border-radius: 999px; background: #ffffff12; color: #fff; font-size: .85rem; font-weight: 650; }
    .intro-skip:hover { background: #ffffff22; }

    /* ---------- Pantalla de acceso: escena única + tarjeta flotante tipo ticket ---------- */
    .page { position: relative; z-index: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(20px, 4vh, 40px) 18px; overflow: hidden; background: var(--navy-deep); }

    /* Las seis comunas envían tickets hacia el acceso, sin cruzar el formulario. */
    .arrival-field { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(100%, 1600px); height: min(80vh, 720px); transform: translate(-50%, -50%); pointer-events: none; }
    .arrival-routes path { fill: none; stroke: #6cb2df; stroke-width: 1.6; stroke-opacity: .38; stroke-linecap: round; }
    .arrival-origins circle { fill: #d5efff; stroke: #3778ac; stroke-width: 3; }
    .arrival-names text { fill: #bdd9eb; font: 650 15px Inter, system-ui, sans-serif; }
    .arrival-tickets use { opacity: 0; }
    .stage { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
    .ticket-card { position: relative; width: min(440px, 100%); background: var(--surface); border-radius: 26px; box-shadow: 0 32px 64px -22px #071b3273, 0 6px 18px #071b3233; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
    .ticket-card::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--navy), var(--blue) 55%, var(--amber)); }
    .ticket-header { padding: clamp(24px, 4vh, 32px) clamp(24px, 5vw, 36px) 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; }
    /* El logo original tiene letras blancas: oscurezco la base y dejo visible su A multicolor encima. */
    .brand-logo { position: relative; width: min(260px, 100%); aspect-ratio: 300 / 112; transform-origin: center; }
    .brand-logo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
    .brand-logo-ink { filter: brightness(0) saturate(100%) invert(14%) sepia(25%) saturate(1104%) hue-rotate(171deg) brightness(89%) contrast(94%); }
    .brand-logo-colors { clip-path: inset(29% 85.2% 38% 5%); }
    .access-kicker { margin: 0; color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
    .ticket-divider { position: relative; margin: 0; border-top: 2px dashed var(--line); }
    .ticket-divider::before, .ticket-divider::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--navy-deep); }
    .ticket-divider::before { left: -13px; }
    .ticket-divider::after { right: -13px; }
    .ticket-body { padding: clamp(22px, 4vh, 30px) clamp(24px, 5vw, 36px) clamp(22px, 4vh, 28px); }
    .ticket-body h1 { margin: 0 0 1.2rem; color: var(--navy); font-size: clamp(1.35rem, 2.4vw, 1.65rem); font-weight: 820; letter-spacing: -.035em; line-height: 1.15; text-align: center; }
    .ticket-body label { display: block; margin: 0 0 .45rem; color: var(--text); font-size: .83rem; font-weight: 700; }
    .field { display: flex; align-items: center; gap: .65rem; min-height: 47px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; box-shadow: inset 0 1px 3px #0f172a0a; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
    .field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px #1665b51f; background: #fff; }
    .field-icon { width: 17px; height: 17px; flex: none; color: #93a9bf; }
    .field:focus-within .field-icon { color: var(--blue); }
    .field input { width: 100%; min-width: 0; padding: .72rem 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: .92rem; }
    .field input::placeholder { color: #93a9bf; }
    .primary { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; width: 100%; margin-top: .9rem; padding: .6rem 1rem; border: 1px solid var(--blue-deep); border-radius: 10px; background: linear-gradient(180deg, #1c78c9, var(--blue) 60%, var(--blue-deep)); box-shadow: inset 0 1px #ffffff40, 0 8px 18px -8px #1665b58c; color: #fff; font-weight: 740; font-size: .96rem; text-decoration: none; transition: box-shadow .18s ease, filter .18s ease; }
    .primary:hover { filter: brightness(1.06); box-shadow: inset 0 1px #ffffff40, 0 11px 22px -8px #1665b5aa; }
    .primary:disabled { opacity: .6; cursor: not-allowed; }
    .btn-ticket-icon { flex: none; color: #fff; opacity: .92; }
    .secondary { display: block; width: max-content; max-width: 100%; margin: .85rem auto 0; padding: .35rem 0; border: 0; background: none; color: var(--blue-deep); font-weight: 680; text-decoration: underline; text-underline-offset: 4px; text-align: center; }
    .account { margin: 0 0 1rem; padding: .8rem; border: 1px solid #bcd9f2; border-radius: 10px; background: var(--blue-soft); color: var(--navy); font-size: .86rem; overflow-wrap: anywhere; text-align: center; }
    .google-slot { width: 100%; min-height: 44px; margin: .8rem 0; overflow: hidden; display: flex; justify-content: center; }
    .message { min-height: 1.3rem; margin: .9rem 0 0; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; text-align: center; }
    .message:not(:empty)::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--blue); vertical-align: middle; animation: pulse 1.3s ease-in-out infinite; }
    .message.error { color: #b91c1c; }
    .message.error::before { background: #b91c1c; animation: none; }
    @keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.05); } }
    .fine { margin: 1.1rem 0 0; color: var(--muted); font-size: .76rem; text-align: center; }
    .page-footer { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(10px, 2.4vh, 20px); padding: 0 18px; text-align: center; color: #9fb4ca; font-size: .72rem; }

    /* Movimiento pausado para dar vida al acceso sin distraer del formulario. */
    .page .scene-glow::before { animation: luz-ambiente 12s ease-in-out infinite alternate; }
    .page .scene-glow::after { animation: luz-ambiente 16s ease-in-out infinite alternate-reverse; }
    /* Al terminar la entrada, libero transform para que responda al cursor. */
    .page.revealed .ticket-card { animation: llegar-ticket .55s cubic-bezier(.22,1,.36,1) backwards; }
    @media (hover: hover) and (pointer: fine) {
      .ticket-card:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 42px 76px -22px #071b3299, 0 12px 28px #071b3240; }
    }
    .ticket-card .brand-logo { transition: transform .3s ease, filter .3s ease; }
    .ticket-card:hover .brand-logo { transform: scale(1.09); filter: drop-shadow(0 12px 14px #0c27453d); }
    .primary:hover { transform: translateY(-2px); }
    .primary:active { transform: translateY(0) scale(.99); }
    @keyframes llegar-ticket { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes luz-ambiente { from { transform: translate(0,0); opacity: .75; } to { transform: translate(38px, -26px); opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .arrival-tickets { display: none; }
      .page .scene-glow::before, .page .scene-glow::after, .page.revealed .ticket-card { animation: none; }
      .ticket-card, .ticket-card .brand-logo, .primary { transition: none; }
      .ticket-card:hover, .ticket-card:hover .brand-logo, .primary:hover, .primary:active { transform: none; filter: none; }
    }

    @media (max-width: 1120px), (max-height: 600px) {
      .arrival-field { display: none; }
    }
    @media (max-width: 480px) {
      .ticket-header { padding: 22px 20px 16px; }
      .ticket-body { padding: 20px 20px 22px; }
      .ticket-body h1 { font-size: 1.3rem; }
      .brand-logo { width: min(220px, 100%); }
      .intro-title { font-size: 1.3rem; }
      .intro-caption { font-size: .82rem; }
    }
    @media (max-height: 700px) {
      .page { padding-top: 14px; padding-bottom: 14px; }
      .ticket-header { padding-top: 18px; padding-bottom: 14px; }
      .ticket-body { padding-top: 16px; }
      .ticket-body h1 { margin-bottom: .9rem; }
      .page-footer { position: static; margin-top: 14px; }
    }