/* Estilos de la pagina de expectativa de Qullqix.
   Externalizado para no requerir style-src 'unsafe-inline' en la CSP.
   Las url(fonts/...) son relativas a este archivo (misma carpeta). */

    /* ─── Fuentes locales (mismas de la marca) ─────────── */
    @font-face {
      font-family: 'Bricolage Grotesque';
      font-style: normal; font-weight: 700 800; font-stretch: 100%;
      font-display: swap;
      src: url(fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Instrument Sans';
      font-style: normal; font-weight: 400 600;
      font-display: swap;
      src: url(fonts/pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0SZe1Q.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Spline Sans Mono';
      font-style: normal; font-weight: 500 600;
      font-display: swap;
      src: url(fonts/R70BjzAei_CDNLfgZxrW6wrZOF2WX5KZmA.woff2) format('woff2');
    }

    :root {
      --tinta:       #201640;   /* índigo de marca: texto sobre día */
      --tinta-suave: #4A4463;
      --tinta-dim:   #6A6480;
      --fucsia:      #D6336C;
      --fucsia-dark: #AD2258;
      --oro-oscuro:  #A66B14;
      --exito:       #1B7A57;
      --error:       #B3362C;
      --display:     'Bricolage Grotesque', sans-serif;
      --body:        'Instrument Sans', sans-serif;
      --mono:        'Spline Sans Mono', monospace;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: var(--body);
      color: var(--tinta);
      background: #7BCFDA;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ─── Escena: día altiplánico (lago y pampa dorada) ──
       Estilo vector plano: cielo en bandas, nubes a la
       deriva, cordillera, lago turquesa y alpacas
       pasteando junto a sus pastores aymaras. ──────────── */
    .escena {
      position: fixed;
      inset: 0;
      z-index: -1;
      /* Cielo en bandas planas, como la referencia */
      background: linear-gradient(180deg,
        #6EC6D4 0%,   #6EC6D4 18%,
        #7ED2DD 18%,  #7ED2DD 38%,
        #90DBE4 38%,  #90DBE4 58%,
        #A5E3EA 58%,  #A5E3EA 100%);
    }

    .escena svg.paisaje { position: absolute; inset: auto 0 0 0; width: 100%; }

    /* Nubes: deriva lenta y calma (sine.inOut de la guía) */
    .nube {
      position: absolute;
      animation: derivar var(--dur, 90s) ease-in-out infinite alternate;
    }
    .nube-1 { top: 6%;  left: 6%;  width: 200px; --dur: 95s; }
    .nube-2 { top: 13%; right: 12%; width: 260px; --dur: 120s; animation-delay: -40s; }
    .nube-3 { top: 24%; left: 34%; width: 150px; --dur: 80s;  animation-delay: -20s; opacity: 0.9; }

    @keyframes derivar {
      from { transform: translateX(0); }
      to   { transform: translateX(90px); }
    }

    /* Alpacas: ciclo de pastar (cuello baja, se queda, sube) */
    .cuello {
      transform-box: fill-box;
      transform-origin: 82% 88%;
      animation: pastar 10s ease-in-out infinite;
    }
    #alpaca-2 .cuello { animation-duration: 12s; animation-delay: -4.5s; }
    #alpaca-3 .cuello { animation-duration: 9s;  animation-delay: -7s; }

    @keyframes pastar {
      0%, 16%   { transform: rotate(0deg); }
      26%, 58%  { transform: rotate(-58deg); }  /* la cabeza baja al pasto */
      68%, 100% { transform: rotate(0deg); }
    }

    /* La cría: el único gesto juguetón de la escena (brinco) */
    #cria {
      transform-box: fill-box;
      animation: brinco 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    }
    @keyframes brinco {
      0%, 86%, 100% { transform: translateY(0); }
      90%           { transform: translateY(-10px); }
      94%           { transform: translateY(0); }
    }

    /* Brillo del lago: destello que recorre el agua, muy lento */
    #destello {
      animation: destello 16s ease-in-out infinite;
    }
    @keyframes destello {
      0%, 100% { transform: translateX(0);     opacity: 0.35; }
      50%      { transform: translateX(180px); opacity: 0.7; }
    }

    /* El movimiento ambiental (nubes, pastoreo, destello) es lento y
       decorativo: se mantiene para todos. Solo se suprime el gesto más
       marcado —el brinco de la cría— para quienes piden reducir movimiento. */
    @media (prefers-reduced-motion: reduce) {
      #cria { animation: none; }
    }

    /* ─── Layout ───────────────────────────────────────── */
    .contenido {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 22px 20px; /* la escena es fija: no hace falta scroll */
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
    }

    .logo {
      width: 46px; height: auto;
      margin-bottom: 10px;
    }

    .eyebrow {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--fucsia-dark);
      margin-bottom: 12px;
    }

    h1 {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(26px, 5vw, 42px);
      line-height: 1.1;
      margin-bottom: 12px;
      color: var(--tinta);
    }
    h1 span { color: var(--fucsia); }

    .desc {
      color: var(--tinta-suave);
      font-size: clamp(14px, 2vw, 16.5px);
      line-height: 1.6;
      max-width: 52ch;
      margin: 0 auto 22px;
    }
    .desc strong { color: var(--tinta); font-weight: 600; }

    /* ─── Tarjeta del texto ────────────────────────────── */
    /* Blanco translúcido con desenfoque: deja ver el paisaje detrás
       pero mantiene el texto legible sobre cualquier zona de la escena. */
    .panel {
      width: 100%;
      max-width: 600px;
      padding: clamp(22px, 4vw, 34px);
      background: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.7);
      border-radius: 26px;
      box-shadow: 0 24px 60px rgba(32,22,64,0.20);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* ─── Lista de espera ──────────────────────────────── */
    .waitlist {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
      max-width: 440px;
      margin: 0 auto 14px;
    }
    .waitlist input {
      flex: 1;
      min-width: 0;
      padding: 14px 18px;
      border-radius: 50px;
      border: 1px solid rgba(32,22,64,0.22);
      background: rgba(255,255,255,0.9);
      color: var(--tinta);
      font-family: var(--body);
      font-size: 15px;
      outline: none;
    }
    .waitlist input::placeholder { color: #8A84A0; }
    .waitlist input:focus { border-color: var(--fucsia); }
    .waitlist button {
      padding: 14px 26px;
      border: none;
      border-radius: 50px;
      background: var(--fucsia);
      color: white;
      font-family: var(--body);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      white-space: nowrap;
    }
    .waitlist button:hover { background: var(--fucsia-dark); transform: translateY(-1px); }
    .waitlist button:disabled { opacity: 0.6; cursor: wait; transform: none; }

    /* Selector de dispositivo: ocupa su propia fila bajo el email. */
    .wl-plat {
      flex-basis: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
    }
    .wl-plat-lbl { font-size: 12.5px; color: var(--tinta-dim); }
    .wl-plat label { display: inline-flex; position: relative; }
    /* Anula .waitlist input (flex:1, padding, borde) en los radios. */
    .wl-plat input {
      position: absolute;
      width: 1px; height: 1px;
      opacity: 0;
      flex: none;
      min-width: 0;
      padding: 0; margin: 0; border: 0;
    }
    .wl-plat .pill {
      display: inline-block;
      padding: 7px 14px;
      border-radius: 50px;
      border: 1px solid rgba(32,22,64,0.22);
      background: rgba(255,255,255,0.75);
      font-size: 13px;
      color: var(--tinta-suave);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .wl-plat .pill:hover { border-color: var(--fucsia); }
    .wl-plat input:checked + .pill {
      background: var(--fucsia);
      border-color: var(--fucsia);
      color: #fff;
      font-weight: 600;
    }
    .wl-plat input:focus-visible + .pill {
      outline: 2px solid var(--fucsia);
      outline-offset: 2px;
    }

    .waitlist-msg {
      font-size: 13.5px;
      font-weight: 600;
      min-height: 18px;
      margin-bottom: 14px;
    }
    .waitlist-msg.ok    { color: var(--exito); }
    .waitlist-msg.error { color: var(--error); }

    .consent {
      font-size: 12px;
      color: var(--tinta-dim);
      max-width: 46ch;
      margin: 0 auto 18px;
    }

    /* ─── Enlace a más información ─────────────────────── */
    .mas-info {
      background: transparent;
      border: 1px solid rgba(32,22,64,0.3);
      color: var(--tinta);
      font-family: var(--body);
      font-size: 14px;
      padding: 11px 24px;
      border-radius: 50px;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .mas-info:hover { border-color: var(--oro-oscuro); background: rgba(232,163,61,0.22); }

    /* ─── Enlace a las guías ────────────────────────────
       Deliberadamente en texto y no en botón: compite con la
       lista de espera si tiene el mismo peso visual. */
    .link-guias {
      margin-top: 20px;
      font-size: 14px;
      color: var(--tinta-suave);
    }
    /* El texto va en índigo y el oro queda en el subrayado. En oro,
       sobre el cian del panel, el contraste caía a 3.54 y hace falta
       4.5: el panel no es blanco, es translúcido sobre el cielo. */
    .link-guias a {
      color: var(--tinta);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 2px solid rgba(166,107,20,0.55);
      padding-bottom: 1px;
      transition: border-color 0.2s;
    }
    .link-guias a:hover { border-bottom-color: var(--oro-oscuro); }

    /* ─── Modal de contacto (claro, coherente con el día) ─ */
    dialog {
      border: 1px solid #E7E3F0;
      border-radius: 18px;
      background: #FFFDF9;
      color: var(--tinta);
      padding: 28px;
      width: min(92vw, 480px);
      box-shadow: 0 30px 80px rgba(32,22,64,0.35);
    }
    dialog::backdrop { background: rgba(32,22,64,0.45); backdrop-filter: blur(3px); }
    dialog h2 {
      font-family: var(--display);
      font-size: 22px;
      margin-bottom: 6px;
    }
    dialog .dialog-sub { color: var(--tinta-dim); font-size: 14px; margin-bottom: 20px; }
    dialog label {
      display: block;
      text-align: left;
      font-size: 13px;
      color: var(--tinta-dim);
      margin: 14px 0 6px;
    }
    dialog input, dialog textarea {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #E7E3F0;
      background: white;
      color: var(--tinta);
      font-family: var(--body);
      font-size: 14.5px;
      outline: none;
      resize: vertical;
    }
    dialog input:focus, dialog textarea:focus { border-color: var(--fucsia); }
    .dialog-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 22px;
    }
    .btn-ghost {
      background: none; border: none;
      color: var(--tinta-dim);
      font-family: var(--body); font-size: 14px;
      padding: 11px 16px; cursor: pointer;
    }
    .btn-enviar {
      background: var(--fucsia);
      border: none; color: white;
      font-family: var(--body); font-size: 14px; font-weight: 600;
      padding: 11px 26px; border-radius: 50px;
      cursor: pointer; transition: background 0.2s;
    }
    .btn-enviar:hover { background: var(--fucsia-dark); }
    .btn-enviar:disabled { opacity: 0.6; cursor: wait; }
    .dialog-msg { font-size: 13.5px; min-height: 18px; margin-top: 12px; text-align: left; }
    .dialog-msg.ok    { color: var(--exito); }
    .dialog-msg.error { color: var(--error); }

    /* Honeypot invisible */
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

    /* Contenedor del widget Turnstile (invisible salvo que haya reto) */
    .turnstile-box:not(:empty) { margin: 4px 0 12px; display: flex; justify-content: center; }

    footer {
      position: relative;
      text-align: center;
      padding: 0 20px 26px;
      font-size: 12.5px;
      color: #ffffff;
      font-weight: 700;
      text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    }
    .footer-legal {
      margin-top: 7px;
      font-weight: 500;
      font-size: 12px;
    }
    .footer-legal a {
      color: #ffffff;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .footer-legal a:hover { opacity: 0.82; }
    .footer-sep { opacity: 0.55; margin: 0 7px; }

    @media (max-width: 480px) {
      .waitlist { flex-direction: column; }
      .waitlist button { width: 100%; }
      .nube-3 { display: none; }
    }