/* Portada de qnttech.com. Las páginas de descarga de cada app usan estilos.css. */
:root {
  --papel: #FFFFFF;
  --papel-2: #F4F3F0;
  --tinta: #111110;
  --tinta-2: #3D3B37;
  --gris: #77736B;
  --linea: rgba(17, 17, 16, .12);
  --naranja: #F47B2A;
  --naranja-tinta: #C25A12;
  --noche: #121211;
  --noche-2: #1C1B19;
  --noche-linea: rgba(255, 255, 255, .1);
  --noche-gris: #A29E95;
  --ancho: 1160px;
  --lado: clamp(16px, 4vw, 40px);
  --sans: 'Geist', -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); background: var(--papel); color: var(--tinta); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }
.marco { width: min(var(--ancho), 100%); margin: 0 auto; padding: 0 var(--lado); }
.etiqueta { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--linea); }
.barra .marco { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.barra .logo img { height: 30px; width: auto; }
.barra nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.barra nav a { text-decoration: none; color: var(--tinta-2); }
.barra nav a:hover { color: var(--tinta); }
.barra nav .contacto { background: var(--tinta); color: var(--papel); padding: 9px 16px; border-radius: 999px; font-weight: 500; }
.barra nav .contacto:hover { color: #fff; background: #000; }

/* Portada */
.portada { padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 88px); }
.portada .marco { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.portada h1 { font-size: clamp(40px, 6.4vw, 78px); line-height: .98; letter-spacing: -.035em; font-weight: 600; margin: 18px 0 22px; }
.portada h1 em { font-style: normal; color: var(--naranja); }
.portada .bajada { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--tinta-2); max-width: 34em; margin: 0 0 32px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 15px; padding: 13px 20px; border-radius: 999px; transition: background .15s, color .15s; }
.boton.principal { background: var(--naranja); color: #fff; }
.boton.principal:hover { background: #E2691A; }
.boton.claro { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.boton.claro:hover { background: var(--papel-2); }
.boton .flecha { font-family: var(--mono); }

/* Mosaico de apps de la portada */
.mosaico { --g: clamp(10px, 1.6vw, 18px); display: flex; flex-wrap: wrap; justify-content: center; gap: 18px var(--g); }
.mosaico a { flex: 0 0 calc((100% - 3 * var(--g)) / 4); }
.mosaico a { position: relative; text-decoration: none; }
.mosaico img { width: 100%; aspect-ratio: 1; border-radius: 24%; object-fit: cover; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px -12px rgba(0,0,0,.25); transition: transform .2s; }
.mosaico a:hover img { transform: translateY(-3px); }
.mosaico span { display: block; margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--tinta-2); }

/* Cifras */
.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cifras .marco { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifras .marco > div { padding: 26px 0; }
.cifras .marco > div + div { padding-left: 24px; border-left: 1px solid var(--linea); }
.cifras b { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.02em; }
.cifras small { color: var(--gris); font-size: 14px; }

/* Secciones */
.seccion { padding: clamp(64px, 9vw, 112px) 0; }
.cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 40px; }
.cabeza h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; margin: 12px 0 0; }
.cabeza p { margin: 0; color: var(--tinta-2); font-size: 17px; line-height: 1.55; }

/* Lista de apps para clientes */
.lista { border-top: 1px solid var(--linea); }
.fila { display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.fila img { width: 64px; height: 64px; border-radius: 15px; object-fit: cover; }
.fila h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fila .pais { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--gris); margin-top: 4px; display: block; }
.fila p { margin: 0; color: var(--tinta-2); font-size: 15px; line-height: 1.5; }
.fila .enlaces { display: flex; align-items: center; gap: 18px; font-size: 13.5px; }
.fila .enlaces a { color: var(--gris); text-decoration: none; }
.fila .enlaces a:hover { color: var(--tinta); }
.fila .enlaces .ir { color: var(--tinta); font-weight: 500; background: var(--papel-2); padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.fila .enlaces .ir:hover { background: var(--tinta); color: var(--papel); }
.pronto { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--naranja-tinta); background: rgba(244, 123, 42, .12); padding: 3px 7px; border-radius: 6px; vertical-align: 3px; }

/* Acceso al registro de restaurantes */
.registro { background: var(--naranja); color: #fff; }
.registro .marco { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 32px 64px; align-items: center; padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(48px, 7vw, 80px); }
.registro .etiqueta { color: rgba(255,255,255,.8); }
.registro h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; margin: 12px 0 14px; }
.registro p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.92); max-width: 36em; }
.registro-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.boton.negro { background: var(--tinta); color: #fff; font-size: 16px; padding: 15px 24px; }
.boton.negro:hover { background: #000; }
.registro-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.registro-apps img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 2px #fff; }

/* Gana dinero: modos de Comercios y Central */
.gana-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gana-item { background: var(--papel-2); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--tinta); transition: background .2s, transform .25s cubic-bezier(.2, .7, .2, 1); }
.gana-item:hover { background: #ECEAE5; transform: translateY(-3px); }
.gana-item img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; margin-bottom: 10px; }
.gana-item .app { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.gana-item b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.gana-item small { color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; flex: 1; }
.gana-item .ver { font-weight: 500; font-size: 14px; color: var(--naranja-tinta); margin-top: 8px; }
.gana-lista .grande { grid-column: span 2; background: var(--noche); color: #F2F0EB; padding: 32px; position: relative; }
.gana-lista .grande:hover { background: #000; }
.gana-lista .grande b { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.02em; }
.gana-lista .grande small { color: #C9C5BC; font-size: 16px; max-width: 34em; }
.gana-lista .grande .app { color: var(--noche-gris); }
.gana-lista .grande img { width: 56px; height: 56px; border-radius: 14px; }
.gana-lista .grande .ver { color: var(--naranja); font-size: 15px; }
.gana-lista .grande .chip { position: absolute; top: 24px; right: 24px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--naranja); padding: 5px 9px; border-radius: 6px; }
.gana-lista .gana-item:not(.grande) { grid-column: span 2; display: grid; grid-template-columns: 44px 1fr auto; column-gap: 16px; align-items: center; }
.gana-lista .gana-item:not(.grande) img { margin: 0; grid-row: span 3; }
.gana-lista .gana-item:not(.grande) .app, .gana-lista .gana-item:not(.grande) b, .gana-lista .gana-item:not(.grande) small { grid-column: 2; }
.gana-lista .gana-item:not(.grande) .ver { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
.negocio .modos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.negocio .modos span { color: var(--noche-gris); margin-right: 2px; }
.negocio .modos a { color: #fff; text-decoration: none; background: rgba(255,255,255,.08); padding: 6px 12px; border-radius: 999px; }
.negocio .modos a:hover { background: rgba(255,255,255,.16); }
@media (max-width: 960px) { .gana-lista { grid-template-columns: 1fr; } .gana-lista .grande, .gana-lista .gana-item:not(.grande) { grid-column: auto; } }
@media (max-width: 560px) { .gana-lista .gana-item:not(.grande) { grid-template-columns: 44px 1fr; } .gana-lista .gana-item:not(.grande) .ver { grid-column: 2; grid-row: auto; margin-top: 6px; } .gana-lista .grande .chip { position: static; align-self: flex-start; } }

/* Negocios (banda oscura) */
.noche { background: var(--noche); color: #F2F0EB; }
.noche .etiqueta { color: var(--noche-gris); }
.noche .cabeza p { color: var(--noche-gris); }
.negocios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.negocio { background: var(--noche-2); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.negocio .arriba { display: flex; align-items: center; gap: 14px; }
.negocio img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.negocio h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.negocio .para { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--noche-gris); }
.negocio p { margin: 0; color: #C9C5BC; font-size: 15px; line-height: 1.55; flex: 1; }
.negocio .enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13.5px; padding-top: 18px; border-top: 1px solid var(--noche-linea); }
.negocio .enlaces a { color: var(--noche-gris); text-decoration: none; }
.negocio .enlaces a:hover { color: #fff; }
.negocio .enlaces .ir { color: var(--noche); background: #F2F0EB; font-weight: 500; padding: 9px 16px; border-radius: 999px; }
.negocio .enlaces .ir:hover { background: #fff; color: #000; }
.negocio.destacado { background: var(--noche-2); }

/* Cómo encaja todo */
.recorrido { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: paso; }
.paso { padding: 28px 28px 0 0; border-top: 2px solid var(--tinta); position: relative; }
.paso + .paso { padding-left: 28px; }
.paso + .paso::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 0; width: 1px; background: var(--linea); }
.paso .num { font-family: var(--mono); font-size: 12px; color: var(--naranja-tinta); }
.paso h3 { margin: 10px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.paso p { margin: 0 0 18px; color: var(--tinta-2); font-size: 15px; line-height: 1.55; }
.paso .iconos { display: flex; gap: 8px; }
.paso .iconos img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }

/* Contacto */
.contacto-final { background: var(--papel-2); }
.contacto-final .marco { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.contacto-final h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; margin: 12px 0 0; }
.medios { display: flex; flex-direction: column; }
.medios a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.medios a:first-child { border-top: 1px solid var(--linea); }
.medios a span { color: var(--gris); font-size: 14px; }
.medios a b { font-weight: 500; font-size: 17px; }
.medios a:hover b { color: var(--naranja-tinta); }

/* Pie */
.pie { padding: 28px 0 40px; font-size: 13px; color: var(--gris); }
.pie .marco { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie a { color: var(--gris); text-decoration: none; }
.pie a:hover { color: var(--tinta); }

/* Celular y tablet */
@media (max-width: 900px) {
  .portada .marco { grid-template-columns: 1fr; }
  .mosaico { max-width: 420px; }
  .cabeza { grid-template-columns: 1fr; }
  .fila { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 16px; }
  .fila img { width: 56px; height: 56px; grid-row: span 2; align-self: start; }
  .fila p { grid-column: 2; }
  .fila .enlaces { grid-column: 2; margin-top: 10px; flex-wrap: wrap; gap: 10px 16px; }
  .negocios { grid-template-columns: 1fr; }
  .recorrido { grid-template-columns: 1fr; gap: 32px; }
  .paso, .paso + .paso { padding: 24px 0 0; }
  .paso + .paso::before { display: none; }
  .contacto-final .marco, .registro .marco { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .barra nav a:not(.contacto) { display: none; }
  .barra .marco { gap: 10px; }
  .barra nav { margin-left: auto; }
  .cifras .marco { grid-template-columns: repeat(2, 1fr); }
  .cifras .marco > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cifras .marco > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .negocio { padding: 22px; }
}

.menu-boton { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--papel-2); cursor: pointer; flex: none; }
.menu-boton span { display: block; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .18s ease, opacity .18s ease; }
.menu-abierto .menu-boton span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-abierto .menu-boton span:nth-child(2) { opacity: 0; }
.menu-abierto .menu-boton span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-panel { display: grid; gap: 2px; padding: 8px var(--lado) 16px; background: var(--papel); box-shadow: 0 12px 24px rgba(17, 17, 16, .1); }
.menu-panel[hidden] { display: none; }
.menu-panel a { display: block; padding: 12px; border-radius: 12px; color: var(--tinta); text-decoration: none; font-size: 16px; font-weight: 500; }
.menu-panel a:hover { background: var(--papel-2); }
@media (max-width: 640px) { .menu-boton { display: inline-flex; } }
@media (min-width: 641px) { .menu-panel { display: none !important; } }

/* Animaciones mínimas (animaciones.js): los bloques suben y aparecen al entrar en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .con-animacion .revelar { opacity: 0; transform: translateY(16px); transition: opacity .7s ease var(--retraso, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--retraso, 0ms); }
  .con-animacion .revelar.visto { opacity: 1; transform: none; }
  @keyframes entrar-icono { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
  @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .flecha { display: inline-block; transition: transform .2s ease; }
  a:hover > .flecha, button:hover > .flecha { transform: translateX(3px); }
  /* Íconos de la portada: entran uno tras otro y luego flotan apenas */
  .mosaico a { animation: entrar-icono .6s cubic-bezier(.2, .7, .2, 1) both; }
  .mosaico a:nth-child(2) { animation-delay: .06s; } .mosaico a:nth-child(3) { animation-delay: .12s; } .mosaico a:nth-child(4) { animation-delay: .18s; }
  .mosaico a:nth-child(5) { animation-delay: .24s; } .mosaico a:nth-child(6) { animation-delay: .3s; } .mosaico a:nth-child(7) { animation-delay: .36s; }
  .mosaico a:hover img { transform: translateY(-6px) scale(1.04); }
  .registro-apps img, .fila img, .negocio .arriba img { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
  .registro-apps img:hover, .fila:hover img, .negocio:hover .arriba img { transform: translateY(-3px) scale(1.05); }
}