/* La lista de espera: el formulario que se abre encima de la página (home, términos, privacidad, no encontrado).
   No depende de los estilos de la página que lo carga: trae sus colores y sus letras (Satoshi e Inter ya están en todas). */

.apunta {
  --l-cian: #00cfff; --l-tinta: #0b132b; --l-tinta-2: #5b6478; --l-texto: #2c3550; --l-mal: #b3261e;
  --l-display: "Satoshi", "Inter", system-ui, sans-serif;
  --l-sans: "Inter", system-ui, -apple-system, sans-serif;
  --l-mono: "JetBrains Mono", ui-monospace, monospace;
  --l-out: cubic-bezier(.22, 1, .36, 1);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0;
  background: transparent; color: var(--l-tinta); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  font-family: var(--l-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left;
}
.apunta:not([open]) { display: none; }
.apunta[open] { display: grid; place-items: center; }
.apunta::backdrop { background: rgba(11, 19, 43, .58); }
.apunta *, .apunta *::before, .apunta *::after { box-sizing: border-box; }

.apunta__hoja { position: relative; width: min(100%, 520px); padding: 46px 44px 40px; border-radius: 28px; background: #fff; box-shadow: 0 34px 90px -24px rgba(11, 19, 43, .5); }
.apunta[open] .apunta__hoja { animation: apunta-entra .34s var(--l-out); }
.apunta[open]::backdrop { animation: apunta-fondo .24s ease; }
@keyframes apunta-entra { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes apunta-fondo { from { opacity: 0; } }

.apunta__x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--l-tinta); cursor: pointer; }
.apunta__x svg { width: 22px; height: 22px; }
.apunta__x:hover { background: #f1f1ec; }

.apunta__t { margin: 0 44px 0 0; font: 700 44px/.98 var(--l-display); letter-spacing: -.04em; text-wrap: balance; color: var(--l-tinta); }
.apunta__lead { margin: 14px 0 0; font: 400 17px/1.45 var(--l-sans); letter-spacing: -.008em; color: var(--l-texto); text-wrap: pretty; }

.apunta__forma form { margin: 26px 0 0; }
.apunta__campo { display: block; margin: 0 0 14px; }
.apunta__campo span { display: block; margin: 0 0 7px; font: 500 11.5px/1 var(--l-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--l-tinta-2); }
.apunta__campo input { display: block; width: 100%; margin: 0; padding: 13px 16px; border: 1.5px solid var(--l-tinta); border-radius: 14px; background: #fff; color: var(--l-tinta); font: 500 17px/1.35 var(--l-sans); letter-spacing: -.008em; -webkit-appearance: none; appearance: none; }
.apunta__campo input:focus { outline: none; box-shadow: 0 0 0 3px var(--l-cian); }
.apunta__campo input[aria-invalid="true"] { border-color: var(--l-mal); }
.apunta__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apunta__error { margin: 2px 0 14px; font: 500 14.5px/1.4 var(--l-sans); color: var(--l-mal); }
.apunta__error[hidden] { display: none; }
.apunta__error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.apunta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 8px 0 0; padding: 15px 24px; border: 0; border-radius: 999px; background: var(--l-tinta); color: #fff; font: 600 16px/20px var(--l-sans); white-space: nowrap; cursor: pointer; transition: transform .16s var(--l-out), opacity .16s ease; }
.apunta__btn svg { width: 16px; height: 16px; flex: none; transition: transform .16s var(--l-out); }
.apunta__btn:hover svg { transform: translateX(3px); }
.apunta__btn:active { transform: scale(.98); }
.apunta__btn[disabled] { opacity: .6; cursor: default; }
.apunta__btn:focus-visible, .apunta__x:focus-visible, .apunta__otra:focus-visible, .apunta__op:focus-visible, .apunta__legal a:focus-visible { outline: 3px solid var(--l-cian); outline-offset: 3px; }

.apunta__legal { margin: 18px 0 0; font: 400 13px/1.5 var(--l-sans); color: var(--l-tinta-2); }
.apunta__legal a { color: var(--l-tinta); text-decoration: underline; text-decoration-color: var(--l-cian); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* los dos estados: el formulario o el «listo» */
.apunta__listo { display: none; }
.apunta__hoja[data-estado="listo"] .apunta__forma { display: none; }
.apunta__hoja[data-estado="listo"] .apunta__listo { display: block; }
.apunta__listo:focus { outline: none; }
.apunta__listo .apunta__btn { margin-top: 0; }
/* después de apuntarse: la pregunta de un toque (solo para quien se acaba de apuntar) y los dos botones */
.apunta__preg { margin: 26px 0 0; padding: 22px 0 0; border-top: 1.5px solid #e5e5e0; }
.apunta__preg[hidden] { display: none; }
.apunta__q { margin: 0; font: 700 24px/1.12 var(--l-display); letter-spacing: -.025em; text-wrap: balance; color: var(--l-tinta); }
.apunta__q span { display: block; margin: 0 0 10px; font: 500 11.5px/1 var(--l-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--l-tinta-2); }
.apunta__ops { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.apunta__op { min-height: 44px; margin: 0; padding: 10px 17px; border: 1.5px solid var(--l-tinta); border-radius: 999px; background: #fff; color: var(--l-tinta); font: 600 15.5px/20px var(--l-sans); letter-spacing: -.008em; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .16s ease, color .16s ease, opacity .2s ease, transform .16s var(--l-out); }
.apunta__op:hover { background: #f1f1ec; }
.apunta__op:active { transform: scale(.97); }
.apunta__op[aria-pressed="true"] { background: var(--l-tinta); color: #fff; }
.apunta__op[disabled] { cursor: default; transform: none; }
.apunta__op[disabled][aria-pressed="false"] { opacity: .34; background: #fff; }
.apunta__gracias { min-height: 21px; margin: 12px 0 0; font: 500 14.5px/1.45 var(--l-sans); color: var(--l-texto); }
.apunta__acc { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
/* el favor: qué se pide (mismo formato que la pregunta) y, debajo, los dos botones */
.apunta__favor { margin: 26px 0 0; padding: 20px 0 0; border-top: 1.5px solid #e5e5e0; }
.apunta__favor .apunta__acc { margin-top: 16px; }
.apunta__preg:not([hidden]) + .apunta__favor { margin-top: 6px; }   /* (el renglón de «Gracias, anotado.» ya deja su aire) */
.apunta__wa { text-decoration: none; }
.apunta__btn--2 { background: #fff; color: var(--l-tinta); box-shadow: inset 0 0 0 1.5px var(--l-tinta); }
.apunta__btn--2:hover { background: #f1f1ec; }
.apunta__otra { display: block; margin: 16px 0 0; padding: 4px 0; border: 0; background: none; color: var(--l-tinta-2); font: 500 14px/1.4 var(--l-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* en teléfono, la hoja es la pantalla completa (como el menú): el teclado no la descuadra */
@media (max-width: 600px) {
  .apunta { padding: 0; }
  .apunta[open] { place-items: stretch; }
  .apunta::backdrop { background: #fff; }
  .apunta__hoja { width: 100%; min-height: 100%; padding: calc(env(safe-area-inset-top, 0px) + 76px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px); border-radius: 0; box-shadow: none; }
  .apunta[open] .apunta__hoja { animation-name: apunta-sube; }
  .apunta__x { top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; }
  .apunta__t { margin-right: 0; font-size: 40px; }
  .apunta__btn { width: 100%; }
}
@keyframes apunta-sube { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  .apunta[open] .apunta__hoja, .apunta[open]::backdrop { animation: none; }
  .apunta__btn, .apunta__btn svg, .apunta__op { transition: none; }
}

/* El botón de la lista en la barra del celular (solo en «espera»: lo pone armar_produccion.py junto al botón del menú).
   Con él hay un botón a la vista durante toda la película: aparece cuando el del inicio se despide y se quita cuando
   llega el del cierre, para que nunca haya dos iguales en pantalla (lo decide el script de la página, FIJO en el armado).
   Usa .btn y .btn--sm de la película. Entre el logo y el menú no cabe el letrero completo: dice «Únete a la lista» (el
   nombre completo va en aria-label). Va en su propia capa en iPhone, como lo demás de la barra (ver movil3.css) */
.nav__apunta { position: relative; z-index: 10; margin-left: auto; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s, transform .16s cubic-bezier(.22, 1, .36, 1); }
.nav__apunta--ya { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s, transform .16s cubic-bezier(.22, 1, .36, 1); }
.abierto .nav__apunta { opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s .12s; }
@supports (-webkit-touch-callout: none) { .nav__apunta:not(:active) { transform: translateZ(0); } }