/* atina.markets home and waitlist (2026-10-31): river.poker's layout and motion, flipped to a charcoal page.
   Each section: a label row, a two-tone title, then a panel where the app's own UI plays out (built here in HTML
   so it can move; no phone frames). Loaded after style.css. */
:root {
  --panel: #1c1c1b;
  --panel-line: #272725;
  --app: #161616;
  --app-card: #1d1d1d;
  --app-raised: #202020;
  --app-line: #2b2b2b;
  --suave: cubic-bezier(.16, 1, .3, 1);
}
[hidden] { display: none !important; }
html { scroll-padding-top: 84px; }

/* ---------- titles that rise line by line ---------- */
.titulo .linea { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.titulo .linea > span { display: inline-block; }
.revela .titulo .linea > span, .portada .titulo .linea > span { transform: translateY(105%); opacity: 0; }
.revela .sube, .portada .sube { opacity: 0; transform: translateY(10px); }
.portada .titulo .linea > span, .revela.visto .titulo .linea > span { animation: llega .95s var(--suave) both; }
.titulo .linea:nth-child(2) > span { animation-delay: .08s !important; }
.titulo .linea:nth-child(3) > span { animation-delay: .16s !important; }
.portada .sube, .revela.visto .sube { animation: asoma .7s var(--suave) both; animation-delay: calc(.25s + var(--d, 0) * 80ms); }
@keyframes llega { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes asoma { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.portada { padding: 56px 0 40px; }
.portada .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; min-height: min(640px, calc(100svh - 160px)); }
.portada h1 { font-size: clamp(56px, 7.4vw, 106px); line-height: .94; margin: 24px 0 26px; }
.escrito { min-height: 1.6em; font-size: 17px; font-weight: 500; color: var(--strong); letter-spacing: -0.01em; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--gold); animation: parpadea 1s steps(1) infinite; }
@keyframes parpadea { 50% { opacity: 0; } }
.portada .sub { margin-top: 6px; color: var(--muted-2); font-size: 16px; }
.portada .cta { margin-top: 36px; display: flex; align-items: center; gap: 24px; }
.portada .beta { margin-top: 22px; font-size: 13px; color: var(--muted); }
.descubre { display: inline-flex; gap: 8px; margin: 40px 0 0 max(32px, calc((100% - 1200px) / 2 + 32px)); font-size: 13px; color: var(--muted); }
.descubre:hover { color: var(--strong); text-decoration: none; }
/* the colour field behind the hero (inicio.js, WebGL at half resolution, stretched): under everything, fades in once drawn;
   without WebGL, the soft gradient on .portada itself stays */
.portada { position: relative; isolation: isolate;
  background: radial-gradient(55% 70% at 70% 50%, rgba(140,70,20,.28), transparent 70%), radial-gradient(35% 45% at 80% 35%, rgba(252,213,53,.12), transparent 70%); }
.portada .aura-fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 2s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 72%, transparent 100%); }
.portada .aura-fondo.lista { opacity: 1; }

.mesa { position: relative; height: 560px; border-radius: 6px; overflow: hidden; }

/* ---------- the app's ticket (TarjetaBoleto) ---------- */
.boleto { background: var(--app); color: var(--strong); border: 1px solid #2e2e2c; border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 46px 80px -34px rgba(0,0,0,.85); font-family: var(--sans); }
.b-tit { font: italic 800 19px/1.1 var(--display); letter-spacing: -0.01em; text-transform: uppercase; }
.b-pago { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.b-pago b { font: 700 30px/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.b-pago span { font-size: 13px; color: var(--muted-2); }
.b-meta { margin-top: 8px; display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.etiqueta { padding: 3px 7px; border-radius: 5px; background: var(--app-line); color: var(--strong); font: 700 9.5px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.perfo { position: relative; margin: 14px -18px 12px; height: 14px; display: grid; place-items: center; }
.perfo::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 1.5px dashed #3a3a38; }
.perfo span { position: relative; padding: 0 10px; background: var(--app); font: 700 11px/1 var(--sans); color: var(--muted); letter-spacing: -0.01em; }
.perfo i { position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--fondo-mesa, var(--panel)); border: 1px solid #2e2e2c; }
.perfo i:first-of-type { left: -9px; } .perfo i:last-of-type { right: -9px; }
.b-fecha { font-size: 12.5px; color: var(--muted-2); margin-bottom: 8px; }
.pierna { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 5px 0; }
.pierna .ic-l { width: 24px; height: 24px; border-radius: 50%; object-fit: contain; }
.pierna .cara { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--app-line); }
.pierna .dos { position: relative; width: 26px; height: 26px; }
.pierna .dos img { position: absolute; width: 18px; height: 18px; }
.pierna .dos img:first-child { left: 0; top: 0; } .pierna .dos img:last-child { right: 0; bottom: 0; }
.pierna small { display: block; font: 700 9.5px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.pierna b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pierna b em { font-style: normal; color: var(--muted); font-weight: 500; }

/* ---------- sections ---------- */
.seccion { padding: 120px 0 40px; }
/* 2026-11-01 · the owner: a title is two lines on a monitor, never four, and all cream. Sized so the longest line
   («Nosotros te conseguimos el mejor.», 13.3 em) fits the title column */
.cabeza { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, .75fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.cabeza h2 { font-size: clamp(38px, 3.75vw, 54px); line-height: .98; letter-spacing: -0.04em; }
.cabeza p { color: var(--muted-2); font-size: 17px; line-height: 1.65; }
.panel { position: relative; border-radius: 6px; border: 1px solid var(--panel-line); background: var(--panel); padding: 40px; overflow: hidden; }
/* the robot stands beside the title; the text drops under the title. Row 1 is 1fr so a tall robot only adds space above the title */
.con-mascota { grid-template-rows: 1fr auto; row-gap: 28px; }
.con-mascota p { max-width: 34em; }
/* 2026-11-01 · the owner: the robot up top on the right with its line right under it; the title holds the left */
.con-mascota { align-items: end; }
.con-mascota > h2 { grid-column: 1; grid-row: 1 / span 2; }
.con-mascota > .sube:not(.mascota) { grid-column: 2; grid-row: 2; }
.mascota { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
.mascota img { display: block; width: auto; height: clamp(300px, 28vw, 400px); }
/* alive, calmly: it floats, blinks (sometimes twice), now and then glances aside and leans the same way. The glance and
   the lean share one 13 s clock; the blinks run on their own 6.6 s one so the two rarely repeat together. */
.mascota .robot { position: relative; transform-origin: 50% 96%; animation: rb-ladea 13s ease-in-out infinite; }
.rb-ojos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rb-mira { animation: rb-mira 13s cubic-bezier(.25, .7, .3, 1) infinite; }
.rb-ojo { animation: rb-parpadea 6.6s ease-in-out infinite; }
/* when the mouse moves, the glance stops and the eyes look at the cursor (owner, 2026-11-01) */
.rb-mira.sigue { animation: none; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .2s ease-out; }
@keyframes rb-mira { 0%, 24%, 42%, 66%, 81%, 100% { transform: translateX(0); } 26%, 40% { transform: translateX(9px); } 68%, 79% { transform: translateX(-8px); } }
@keyframes rb-ladea { 0%, 23%, 43%, 65%, 82%, 100% { rotate: 0deg; } 28%, 39% { rotate: 1.2deg; } 70%, 78% { rotate: -1deg; } }
@keyframes rb-parpadea { 0%, 36%, 39.5%, 82%, 85%, 87%, 90.5%, 100% { transform: scaleY(1); } 37.4%, 83.3%, 88.4% { transform: scaleY(.08); } }
.pie-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 40px 0 0; }
.pie-panel h3 { font: 500 clamp(26px, 2.6vw, 34px)/1.12 var(--display); letter-spacing: -0.04em; }
.pie-panel p { color: var(--muted-2); font-size: 16px; line-height: 1.7; }

/* the app, drawn plainly on the panel */
.pantalla { background: var(--app); border: 1px solid var(--app-line); border-radius: 22px; padding: 22px; font-family: var(--sans); color: var(--strong); min-width: 0; }
.ceja { font: 700 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }

/* market demo */
.partido { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 14px 0 18px; text-align: center; }
.equipo img { width: 54px; height: 54px; margin: 0 auto 8px; object-fit: contain; }
.equipo span { font-size: 15px; font-weight: 600; }
.hora small { display: block; font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hora b { display: block; margin-top: 6px; font: 600 34px/1 var(--sans); letter-spacing: -0.03em; }
.graf { border: 1px solid var(--app-line); border-radius: 16px; padding: 16px 16px 10px; background: var(--app-card); }
.graf-top { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; }
.graf-top .pct { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.graf-top .alza { font-size: 12px; color: var(--up); font-weight: 600; }
.leyenda { display: flex; gap: 14px; margin: 8px 0 6px; font-size: 12px; color: var(--muted-2); }
.leyenda i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--c); vertical-align: 1px; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf .eje { stroke: #262626; stroke-width: 1; }
.graf .etq { fill: var(--muted); font: 500 11px var(--sans); }
.traza { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1); }
.dibuja .traza { stroke-dashoffset: 0; }
.punta { opacity: 0; transition: opacity .4s ease 1.6s; }
.dibuja .punta { opacity: 1; }

.lado-compra { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.opcion { border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-card); padding: 10px 6px 9px; text-align: center; transition: border-color .25s, transform .2s, background-color .25s; }
.opcion .op-l { display: flex; align-items: center; justify-content: center; gap: 5px; font: 700 10px/1 var(--sans); letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; }
.opcion .op-l img { width: 14px; height: 14px; object-fit: contain; }
.opcion b { display: block; margin-top: 7px; font: 600 19px/1 var(--sans); font-variant-numeric: tabular-nums; }
.opcion small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.opcion.sel { border-color: var(--strong); background: var(--app-raised); transform: scale(.97); }
.doble { margin-top: 18px; }
.doble .opciones b { margin-top: 0; font-size: 15px; }
.doble .opcion { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 6px; }
.doble .opcion small { margin: 0; }

/* the buy sheet slides up over the buttons */
.hoja { position: absolute; left: -23px; right: -23px; bottom: -23px; padding: 12px 22px 22px; border-radius: 22px 22px 22px 22px; border: 1px solid #333331;
  background: var(--app-raised); box-shadow: 0 -30px 60px -20px rgba(0,0,0,.7); transform: translateY(105%); transition: transform .55s var(--suave); }
.hoja.arriba { transform: none; }
.asa { display: block; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: #3d3d3b; }
.hoja-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hoja-t img { width: 20px; height: 20px; object-fit: contain; }
.hoja-t span { margin-left: auto; color: var(--muted-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.monto { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.monto b { font: 600 44px/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.monto svg { width: 18px; height: 18px; color: var(--muted); }
.renglon { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--app-line); font-size: 13.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.renglon b { color: var(--strong); font-weight: 600; }
.mantener { position: relative; overflow: hidden; margin-top: 14px; height: 50px; border-radius: 14px; background: #3a3420; display: grid; place-items: center; }
.mantener .relleno { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(.0); transition: transform 1.25s linear; }
.mantener.lleno .relleno { transform: none; }
.mantener .txt { position: relative; font-size: 14px; font-weight: 600; color: #181a20; }
.listo { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--up); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.listo.ve { opacity: 1; transform: none; }

/* combo demo */
.sugerencias { display: grid; gap: 8px; margin-top: 12px; }
.sugerencia { display: grid; grid-template-columns: 34px 1fr auto 34px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 14px; background: var(--app-card); transition: opacity .4s, border-color .3s; }
.sugerencia .ic-l, .sugerencia .cara { width: 32px; height: 32px; }
.sugerencia .cara { border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--app-line); }
.sugerencia .dos { position: relative; width: 34px; height: 34px; }
.sugerencia .dos img { position: absolute; width: 22px; height: 22px; }
.sugerencia .dos img:first-child { left: 0; top: 0; } .sugerencia .dos img:last-child { right: 0; bottom: 0; }
.sugerencia small { display: block; font: 700 9.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sugerencia b { font-size: 14.5px; font-weight: 600; }
.sugerencia .pct { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agrega { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #3a3a38; color: var(--strong); font-size: 18px; line-height: 1; transition: background-color .25s, color .25s, border-color .25s; }
.sugerencia.agregada { border-color: #3a3a38; }
.sugerencia.agregada .agrega { background: var(--gold); border-color: var(--gold); color: #181a20; }
.sugerencia.agregada .agrega::before { content: "✓"; font-size: 15px; font-weight: 700; }
.sugerencia.agregada .agrega span { display: none; }
.combo-boleto { --fondo-mesa: var(--panel); }
.combo-boleto .boleto { box-shadow: none; }
.combo-boleto .pierna { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--suave); }
.combo-boleto .pierna.ve { opacity: 1; transform: none; }
.vacio { font-size: 12.5px; color: var(--muted); padding: 4px 0 2px; transition: opacity .3s; }
.combo-boleto.con .vacio { opacity: 0; }

/* ---------- waitlist page ---------- */
.lista-portada { padding: 64px 0 120px; }
.lista-portada .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: center; }
.lista-portada h1 { font-size: clamp(54px, 7vw, 100px); line-height: .94; margin: 24px 0 26px; }
.lista-portada .lede { font-size: 17px; line-height: 1.65; max-width: 30em; }
.tarjeta { background: var(--crema); color: var(--tinta); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 80px -24px rgba(0,0,0,.6); }
.tarjeta .cuerpo { padding: 34px; display: grid; gap: 0; }
.tarjeta .t-ceja { font: 550 10px/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: #20282a; padding-bottom: 20px; border-bottom: 1px solid #c8c6bf; }
.tarjeta h2 { color: var(--tinta); font-size: clamp(40px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -0.05em; margin: 24px 0 14px; }
.tarjeta p { color: #2b2b30; font-size: 14px; line-height: 1.6; }
.tarjeta p b { color: var(--tinta); }
.tarjeta .espera { display: grid; gap: 10px; margin-top: 22px; }
.tarjeta .tel { display: flex; align-items: center; height: 56px; border-radius: 4px; border: 1px solid #c8c6bf; background: #f3f2ee; overflow: hidden; }
.tarjeta .tel:focus-within { border-color: var(--tinta); }
.tarjeta .tel .prefijo { padding: 0 12px 0 16px; height: 100%; display: grid; place-items: center; border-right: 1px solid #d6d4cd; color: #2b2b30; font-weight: 500; }
.tarjeta input { font: 500 16px/1 var(--sans); color: var(--tinta); border: 0; background: none; outline: none; }
.tarjeta .tel input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; }
.tarjeta input.otp { height: 56px; border-radius: 4px; border: 1px solid #c8c6bf; background: #f3f2ee; text-align: center; letter-spacing: .32em; font-size: 22px; font-weight: 600; }
.tarjeta .btn-tinta { width: 100%; height: 56px; border: 0; cursor: pointer; font: 550 15px/1 var(--sans); }
.tarjeta .btn-tinta:disabled { opacity: .6; cursor: default; }
.espera-msg { min-height: 1.2em; font-size: 13px; color: #2b2b30; }
.espera-msg.err { color: #b02a3c; }
.tarjeta .letra { margin-top: 16px; font-size: 12px; color: #2b2b30; }
.tarjeta .letra a, .tarjeta button.link { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.tarjeta button.link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.tarjeta button.link:disabled { color: #cfcfc5; text-decoration: none; cursor: default; }
.tarjeta .tira { background: #d9dcd5; padding: 15px 34px; display: flex; justify-content: space-between; font: 550 9.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #20282a; }
.tarjeta .lugar-num { display: block; margin: 8px 0 6px; font: 500 clamp(64px, 8vw, 96px)/.9 var(--display); letter-spacing: -0.06em; color: var(--tinta); }
.tarjeta .t-lbl { font: 550 10px/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: #2b2b30; margin-top: 24px; }
.tarjeta .saltos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 12px; }
.tarjeta .saltos > div { padding: 14px; border-radius: 4px; background: #f3f2ee; border: 1px solid #d6d4cd; display: grid; gap: 4px; }
.tarjeta .saltos b { font: 600 26px/1 var(--sans); color: var(--tinta); letter-spacing: -0.02em; }
.tarjeta .saltos span { font-size: 12px; color: #2b2b30; line-height: 1.35; }
.tarjeta .liga { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 6px 0 14px; border-radius: 4px; border: 1px dashed #b8b6ae; background: #f3f2ee; }
.tarjeta .liga > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--tinta); user-select: all; }
.tarjeta .liga button { height: 38px; padding: 0 14px; border-radius: 4px; border: 0; background: var(--tinta); color: var(--crema); font: 550 13px/1 var(--sans); cursor: pointer; }
.tarjeta .compartir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tarjeta .compartir .btn { height: 48px; font-size: 14px; }
.tarjeta .btn-borde { border: 1px solid #b8b6ae; color: var(--tinta); background: none; cursor: pointer; }
.tarjeta .btn-borde:hover { text-decoration: none; background: #f3f2ee; }
.tarjeta .interes { margin: 18px 0 0; padding: 0; border: 0; }
.tarjeta .interes legend { font-size: 13px; color: #2b2b30; margin-bottom: 10px; padding: 0; }
.tarjeta .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tarjeta .chips button { height: 34px; padding: 0 12px; border-radius: 4px; border: 1px solid #c8c6bf; background: none; color: var(--tinta); font: 500 13px/1 var(--sans); cursor: pointer; }
.tarjeta .chips button[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .portada .wrap, .lista-portada .wrap { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .cabeza, .pie-panel, .duo { grid-template-columns: 1fr; gap: 24px; }
  .cabeza h2 { font-size: clamp(38px, 5.4vw, 56px); }
  .panel { padding: 20px; }
  .seccion { padding-top: 88px; }
  .lado-compra { min-height: 420px; }
  .cabeza.con-mascota { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .mascota img { height: 240px; }
}
@media (max-width: 640px) {
  .portada { padding-top: 32px; }
  .mesa { height: 540px; }
  .escrito { font-size: 15px; min-height: 2.9em; }
  .panel { padding: 12px; }
  .pantalla { padding: 16px; border-radius: 18px; }
  .hoja { left: -17px; right: -17px; bottom: -17px; padding: 12px 16px 16px; }
  .monto b { font-size: 38px; }
  .tarjeta .cuerpo { padding: 24px; }
  .tarjeta .tira { padding: 14px 24px; }
  .cabeza.con-mascota { grid-template-columns: 1fr; grid-template-rows: none; }
  .mascota, .con-mascota > h2, .con-mascota > .sube:not(.mascota) { grid-column: auto; grid-row: auto; }
  .mascota { order: -1; justify-self: start; }
  .mascota img { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .portada .titulo .linea > span, .revela .titulo .linea > span, .portada .sube, .revela .sube { animation: none !important; opacity: 1 !important; transform: none; }
  .caret { animation: none; }
  .traza { transition: none; }
  .mascota .robot, .rb-ojos * { animation: none; }
}

/* ---------- hero (2026-10-31, second take): the market the headline is typing, as the app draws it. The owner: the combo
   tickets were «low impact, forgettable». Each question glides in with its live probability, its month of prices and Sí/No. */
.mesa { display: grid; place-items: center; }
.carta-m { position: absolute; width: min(480px, calc(100% - 48px)); padding: 26px; border-radius: 22px; border: 1px solid #2b2b2b;
  background: var(--app); box-shadow: 0 50px 90px -40px rgba(0,0,0,.85); font-family: var(--sans); color: var(--strong);
  opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .55s ease, transform .8s var(--suave); pointer-events: none; }
.carta-m.on { z-index: 2; opacity: 1; transform: none; transition-delay: .14s; }
.carta-m.sale { z-index: 1; opacity: 0; transform: translateY(-22px) scale(.98); transition-duration: .28s, .5s; }
.cm-cab { display: flex; align-items: center; gap: 14px; }
.cm-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: #222; flex: none; }
.cm-cat { display: block; font: 700 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cm-q { margin-top: 4px; font: 600 21px/1.25 var(--display); letter-spacing: -0.02em; }
.cm-cifra { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 6px; flex-wrap: wrap; }
.cm-cifra b { font: 600 104px/.9 var(--display); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.cm-si { font: 600 18px/1 var(--sans); color: #62d394; }
.cm-cambio { width: 100%; font: 600 13px/1.3 var(--sans); }
.cm-cambio.up { color: #62d394; } .cm-cambio.down { color: #f07a86; }
.cm-graf { display: block; width: 100%; height: 132px; margin: 8px 0 18px; overflow: visible; }
.cm-graf polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.carta-m.on .cm-graf polyline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .2s; }
.cm-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-b { height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 var(--sans); }
.cm-b b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.cm-b.si { color: #62d394; background: rgba(98,211,148,0.14); border: 1.5px solid #62d394; }
.cm-b.no { color: #f07a86; background: rgba(178,178,178,0.065); }
.cm-caras { display: flex; flex: none; }
.cm-caras img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #2b2b2b; border: 2px solid var(--app); margin-left: -10px; }
.cm-caras img:first-child { margin-left: 0; }
.cm-filas { display: grid; gap: 12px; }
.cm-fila { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 12px; align-items: center; }
.cm-fila img { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #2b2b2b; }
.cm-n { font: 600 14px/1.2 var(--sans); }
.cm-n em { font-style: normal; font-weight: 600; margin-left: 4px; font-size: 12px; }
.cm-fila > b { font: 600 22px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; grid-row: span 2; }
.cm-fila > i { display: block; height: 4px; border-radius: 2px; background: #262626; position: relative; overflow: hidden; }
.cm-fila > i::after { content: ""; position: absolute; inset: 0; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--suave) .3s; }
.carta-m.on .cm-fila > i::after { transform: scaleX(var(--p)); }
@media (prefers-reduced-motion: reduce) {
  .carta-m { transition: none; } .carta-m .cm-graf polyline { stroke-dashoffset: 0; }
}

/* ---------- less text (owner, 2026-10-31: «too much text»): each step keeps its title, the line under it goes */
.seccion .pie-panel { display: none; }

/* ---------- phones (owner: «cluttered, the animations take up the whole screen»): no steps or side notes, the app smaller */
@media (max-width: 640px) {
  .portada .escrito { font-size: 15px; }
  .mesa { height: 500px; }
  .carta-m { padding: 18px; }
  .cm-cifra b { font-size: 64px; }
  .cm-graf { height: 100px; }
  .seccion { padding-top: 72px; }
  .seccion .cabeza { margin-bottom: 28px; }
  .seccion [class*="-lado"] { display: none !important; }
  .seccion .panel { padding: 16px 0 !important; }
  .seccion .panel > * { zoom: .86; }
  .cabeza h2 { font-size: 31px; line-height: 1.02; }
}

/* ---------- 2026-10-31 · ideas from Pentagram's TwelveLabs site (owner picked all five) ---------- */
/* buttons that react: the corners round off to exactly half the height (so the curve moves the whole way, never snaps),
   slowly and springy, and the face lifts with a soft inner light */
.btn { transition: border-radius .75s cubic-bezier(.22,1,.36,1), background-color .45s ease, box-shadow .6s ease, color .3s ease; }
.btn:hover { border-radius: 27px; transform: none; }
.btn-sm:hover { border-radius: 20px; }
.btn-gold:hover { background: #fff; box-shadow: inset 0 -10px 18px -10px rgba(252,213,53,.55), 0 10px 30px -12px rgba(240,240,233,.35); }
.btn-tinta:hover { background: #2c2d32; }

/* the statement whose words light up as you scroll */
.frase-viva { padding: 140px 0 40px; }
.frase-viva .frase { max-width: 1000px; font: 500 clamp(38px, 5.2vw, 74px)/1.05 var(--display); letter-spacing: -0.05em; color: var(--strong); }
/* the sentence carries one sweep, cream into the yellow (one accent, owner, 2026-11-03); a word shows it once lit */
.frase-viva .frase { background: linear-gradient(100deg, #f0f0e9 0%, #f0f0e9 30%, #fcd535 100%); -webkit-background-clip: text; background-clip: text; }
/* 2026-11-01 · the owner: the words start white and the gradient comes in as you scroll; padding so «ganar»'s g isn't cut */
.frase-viva .pal { color: #f0f0e9; transition: color .6s ease; }
.frase-viva .frase { padding-bottom: .16em; }
.frase-viva .pal.on { color: transparent; }

/* panels with depth: a faint inner light on the top edge and a soft inner shade (the green glow is gone: owner, «looks stupid») */
.seccion .panel { box-shadow: inset 0 1px 0 rgba(240,240,233,0.07), inset 0 0 90px -40px rgba(0,0,0,0.6); }

/* the footer's wordmark in dots (the svg stays for the text-only and no-canvas cases), over a glowing band of the aura's
   colours that drifts slowly, like TwelveLabs' footer */
.gigante.con-puntos { display: none; }
.gigante-puntos { position: relative; display: block; margin: 40px 0 -1.5%; }
.en-pausa, .en-pausa *, .en-pausa::before, .en-pausa::after, .en-pausa *::before, .en-pausa *::after { animation-play-state: paused !important; }
#preguntas details p a { color: #f0f0e9; text-decoration: underline; text-underline-offset: 3px; }
footer.pie { position: relative; isolation: isolate; }
footer.pie::after { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; bottom: -40px; height: 46%; pointer-events: none;
  background: linear-gradient(90deg, #8a4b14, #fcd535, #ffa64d, #fcd535, #8a4b14); background-size: 200% 100%;
  filter: blur(80px); opacity: .32; -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent);
  animation: aura-pie 18s linear infinite; }
@keyframes aura-pie { to { background-position: 200% 0; } }

@media (max-width: 640px) {
  .frase-viva { padding: 96px 0 8px; }
  .gigante-puntos { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .frase-viva .pal { transition: none; }
  footer.pie::after { animation: none; }
}

/* ---------- hero: futures and options too (owner, 2026-10-31: «not just prediction markets») */
.cm-cifra b small { font-size: .42em; letter-spacing: -0.02em; }
.cm-sub { font: 600 15px/1 var(--sans); color: var(--muted); }
.cm-graf .cm-guia { stroke: #3a3a37; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.cm-eje { display: flex; justify-content: space-between; margin: -10px 0 16px; font: 500 11.5px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- beside a lone phone, more of the app at the phone's height (owner, 2026-10-31: «lonely», then «six boxes next to
   the screenshot every time, lazy, still dead space, unequal sizes»): each section its own piece, stretched to the phone. */
.lamina { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid #2b2b2b; border-radius: 22px;
  background: var(--app); color: var(--strong); font-family: var(--sans); }
@media (max-width: 1000px) { .seccion .lamina, .seccion .ia-donde { display: none; } }

@media (max-width: 900px) {
    }
@media (max-width: 520px) {
    }

/* the motto at the end: the same lit statement, centred and a step bigger */
.lema { padding: 160px 0 60px; }
.lema .frase { margin: 0 auto; max-width: 1100px; text-align: center; font-size: clamp(42px, 6vw, 88px); }
@media (max-width: 640px) { .lema { padding: 110px 0 24px; } }

/* ── Preguntas: the FAQ's first row takes any question (owner, 2026-11-02). Light, dot wave and stop button are the desktop chat's (secciones/ia.css) ── */
.faq-ia { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.faq-ia-caja { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--hairline); border-radius: 16px; background: #1d1d1d; transition: border-color .2s ease; }
.faq-ia-caja > :not(.faq-ia-luz) { position: relative; }
.faq-ia-caja:focus-within { border-color: var(--gold); }
.faq-ia-ocupada .faq-ia-caja { border-color: transparent; }
.faq-ia-luz { position: absolute; inset: -1px; border-radius: 16px; overflow: hidden; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.faq-ia-luz svg { display: block; opacity: .7; }
.faq-ia-luz rect { animation: ia-luz 4.5s linear infinite paused; }
.faq-ia-ocupada .faq-ia-luz { opacity: 1; }
.faq-ia-ocupada .faq-ia-luz rect { animation-play-state: running; }
.faq-ia-tino { flex: none; width: 30px; height: 30px; object-fit: contain; }
.faq-ia-pensando .faq-ia-tino { animation: ia-respira 1.4s ease-in-out infinite alternate; }
.faq-ia input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: none; color: var(--strong); font: inherit; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.faq-ia input::placeholder { color: var(--muted); opacity: 1; }
.faq-ia-enviar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s ease, background .2s ease; }
.faq-ia input:not(:placeholder-shown) + .faq-ia-enviar { color: var(--gold); }
.faq-ia-enviar i { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 3px; background: #06070c; opacity: 0; transition: opacity .2s ease; }
.faq-ia-ocupada .faq-ia-enviar, .faq-ia-ocupada input:not(:placeholder-shown) + .faq-ia-enviar { background: var(--gold); color: transparent; }
.faq-ia-ocupada .faq-ia-enviar i { opacity: 1; }
.faq-ia-ahora { display: none; align-items: center; gap: 8px; padding: 14px 12px 2px; }
.faq-ia-pensando .faq-ia-ahora { display: flex; }
.faq-ia-olas { display: grid; grid-template-columns: repeat(3, 4px); gap: 2px; flex: none; }
.faq-ia-olas i { width: 4px; height: 4px; border-radius: 1px; background: #bfc5c5; opacity: .12; animation: ia-ola .64s linear calc((var(--s) - 1) * .64s) infinite; }
.faq-ia-brillo { font-size: 14px; line-height: 20px; font-weight: 500; color: transparent; background: linear-gradient(100deg, rgba(191,197,197,.55) 30%, #bfc5c5 50%, rgba(191,197,197,.55) 70%) 200% center / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: ia-brilla 2.6s linear infinite; }
.faq-ia-respuesta { padding: 0 40px 0 12px; color: var(--muted-2); font-size: 16px; line-height: 1.65; }
.faq-ia-respuesta:not(:empty) { padding-top: 16px; padding-bottom: 12px; }
.faq-ia-respuesta p + p { margin-top: 6px; }
.faq-ia-vineta { position: relative; padding-left: 20px; }
.faq-ia-vineta::before { content: ""; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
@media (max-width: 640px) {
  .faq-ia input { font-size: 16px; }
  .faq-ia-respuesta { padding-right: 0; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-ia-tino, .faq-ia-olas i, .faq-ia-brillo, .faq-ia-luz rect { animation: none; }
  .faq-ia-brillo { color: #e4e4da; }
}

/* ── Tino in the corner (owner, 2026-11-02): the FAQ's box above him, gone once the FAQ is reached ── */
.tino-flota { position: fixed; z-index: 40; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: opacity .3s ease, transform .45s var(--suave); }
.tino-flota.tino-fuera { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity .3s ease, transform .45s var(--suave), visibility 0s .3s; }
.tino-boton { display: block; width: 76px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); transition: transform .35s var(--suave); }
.tino-boton:hover { transform: scale(1.08) rotate(-3deg); }
.tino-boton:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
.tino-boton img { display: block; width: 100%; height: 100%; object-fit: contain; animation: tino-flota 3.6s ease-in-out infinite alternate; }
@keyframes tino-flota { to { transform: translateY(-5px); } }
.tino-globo { position: absolute; right: 80px; bottom: 26px; padding: 9px 13px; border-radius: 12px 12px 3px 12px; background: var(--strong); color: var(--canvas); font: 500 14px/18px var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(6px); animation: tino-globo 7s ease 2.2s both; }
.tino-fuera .tino-globo { animation: none; } /* the bubble's time starts when he appears, not when the page loads */
@keyframes tino-globo { 0% { opacity: 0; transform: translateX(6px); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(6px); } }
.tino-boton:hover ~ .tino-globo, .tino-flota:has(.tino-boton:hover) .tino-globo { animation: none; opacity: 1; transform: none; }
.tino-abierto .tino-globo, .tino-flota.tino-abierto:has(.tino-boton:hover) .tino-globo { display: none; }
.tino-panel { width: min(380px, calc(100vw - 24px)); padding: 16px; border: 1px solid var(--hairline); border-radius: 20px; background: #1a1a1a; box-shadow: 0 24px 60px rgba(0,0,0,.65); transform-origin: bottom right; animation: tino-abre .3s var(--suave) both; }
.tino-panel[hidden] { display: none; }
@keyframes tino-abre { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.tino-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tino-cab b { font: 500 17px/22px var(--display); letter-spacing: -.02em; color: var(--strong); }
.tino-cierra { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px -6px 0; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.tino-cierra:hover { color: var(--strong); }
.tino-sugiere { display: flex; flex-direction: column; margin-bottom: 12px; }
.tino-sugiere button { padding: 11px 0; border: 0; border-top: 1px solid var(--hairline); background: none; color: var(--muted-2); font: 500 15px/20px var(--sans); text-align: left; cursor: pointer; }
.tino-sugiere button:hover { color: var(--strong); }
.tino-usado .tino-sugiere { display: none; }
/* the box sits at the bottom, chat style: question, answer, then the box */
.faq-ia-flota { display: flex; flex-direction: column-reverse; padding: 0; border: 0; }
.faq-ia-flota .faq-ia-caja { flex: none; }
.faq-ia-flota input { font-size: 16px; }
.faq-ia-flota .faq-ia-ahora { padding: 0 2px 12px; }
.faq-ia-flota .faq-ia-respuesta { max-height: min(40svh, 300px); overflow-y: auto; padding: 0 2px; font-size: 15px; line-height: 1.55; }
.faq-ia-flota .faq-ia-respuesta:not(:empty) { padding: 0 2px 14px; }
.faq-ia-eco { margin: 0 0 10px; padding: 0 2px; font: 500 15px/20px var(--sans); color: var(--strong); }
.faq-ia-eco:empty { display: none; }
@media (max-width: 640px) {
  .tino-flota { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .tino-boton { width: 64px; height: 64px; }
  .tino-globo { display: none; } /* on a phone the bubble covers too much: Tino alone (owner, 2026-11-04) */
}
@media (prefers-reduced-motion: reduce) {
  .tino-boton img, .tino-panel { animation: none; }
  .tino-globo { animation: none; display: none; }
}

/* A link inside a sentence can't rely on colour alone (WCAG 1.4.1). */
p > a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 3px; }

/* ── The whole-site pass after studying Tern and Totalis (owner, 2026-11-02) ── */
/* where you are: a line along the top on every screen, and the sections down the side where there's room */
.avance { position: fixed; z-index: 45; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.riel { position: fixed; z-index: 30; right: 18px; top: 50%; display: none; transform: translateY(-50%); flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; padding: 0; list-style: none; transition: opacity .3s ease; }
.riel.fuera { opacity: 0; pointer-events: none; visibility: hidden; } /* hidden from the keyboard too: its links took focus while invisible */
.riel a { display: flex; align-items: center; gap: 8px; height: 22px; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.riel a:hover { color: var(--strong); text-decoration: none; }
.riel span { opacity: 0; transform: translateX(4px); transition: opacity .2s ease, transform .3s var(--suave); white-space: nowrap; }
.riel a:hover span, .riel .on span { opacity: 1; transform: none; }
.riel i { display: block; width: 12px; height: 1px; background: currentColor; transition: width .3s var(--suave), background-color .2s ease; }
.riel .on { color: var(--strong); }
.riel .on i { width: 22px; height: 2px; background: var(--gold); }
@media (min-width: 1380px) { .riel { display: flex; } }
/* the closer */
.lema { padding: 150px 0 110px; }
.lema .frase { max-width: 1240px; font-size: clamp(46px, 7.6vw, 118px); line-height: 1; }
.lema-cta { display: flex; justify-content: center; margin-top: 38px; }
/* every section fits one screen on a computer: the title and the whole demo in view while it plays. inicio.js works out --zp */
@media (min-width: 1001px) {
  /* the logo lines up with the hero's left edge, not the centred content (owner, 2026-11-05) */
  .top .brand { position: absolute; left: clamp(24px, 3.6vw, 64px); top: 50%; transform: translateY(-50%); } /* the same edge the hero's padding uses, measured from the page, not the centred content */
  .top nav { margin-left: auto; }
  /* a jump lands on the content, not on the section's top padding */
  .seccion[id] { scroll-margin-top: -64px; }
  /* each section fills the screen on its own, so the next one never peeks in under it (owner, 2026-11-05) */
  .seccion[id] { min-height: 100vh; }
}
@media (min-width: 1001px) {
  .seccion { padding: 28px 0; }
  .seccion .cabeza { gap: 32px; margin-bottom: 22px; }
  .seccion .panel { padding: 22px 26px; }
  .seccion .panel > * { zoom: var(--zp, 1); }
}
/* the AI section's Tino stands beside the demo instead of above it, so the demo stays on the screen */
.seccion .panel .panel > * { zoom: 1; }
@media (min-width: 1001px) and (max-width: 1359px) { #ia .mascota img { height: 130px; } }
@media (min-width: 1360px) {
  #ia .wrap { position: relative; }
  #ia .cabeza.con-mascota { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, .75fr); }
  #ia .cabeza.con-mascota .mascota { position: absolute; z-index: 4; right: 2px; bottom: 26px; grid-column: auto; grid-row: auto; margin: 0; }
  #ia .mascota img { height: min(270px, 33svh); }
}
/* One plain background down the whole page (owner, 2026-11-02: the board moving behind the demos and then still dots were both rejected). */
html { background: var(--canvas); }
body { background: transparent; }
/* No boxes (owner, 2026-11-02: «grey boxes that cover the background, and screenshots of phone recordings inside them, it looks terrible»):
   the demos stand directly on the page. */
.seccion .panel { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* the demos' shadows can show on a computer; on a phone anything wider than the screen would zoom the whole page out */
.seccion { overflow-x: clip; }
@media (min-width: 1001px) { .seccion .panel { overflow: visible; } }
.seccion .panel::before, .seccion .panel::after { display: none !important; }
@media (min-width: 1001px) {
  .seccion { padding: 76px 0; }
  .seccion .cabeza { margin-bottom: 30px; }
}
/* Letters keep their shapes: tracking stops at -.04em (hard to read tighter, owner, 2026-11-02) */
h1, .portada h1, .pt-pregunta, .frase-viva .frase { letter-spacing: -.04em; }
@media (max-width: 1000px) {
  .seccion { padding: 64px 0 40px; }
}