/* ── Quantum Ventures · web ──────────────────────────────────────────────────
   Marca: el kit de Jordi (Manrope + Orbitron, sus dos ficheros convertidos a
   woff2 y alojados aqui) y la lamina de marca para el logo del punto.

   Color, decidido el 03/09 con Tesla, OpenAI y Apple delante:
     - La estructura es blanco, negro y gris. Nada de campos de color grandes.
     - El azul es SOLO la accion: botones y algun enlace. Uno solo, #0041f5.
     - El unico bloque de color pleno es Qiu, en negro, como Apple hace con el
       iPhone dentro de una pagina de Macs.
   Motivo: con el azul llenando secciones la pagina parecia un banco, y eso es
   justo lo que no queremos.
   ────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Manrope';src:url('fonts/manrope.woff2') format('woff2');
  font-weight:200 800;font-display:swap}
@font-face{font-family:'Orbitron';src:url('fonts/orbitron.woff2') format('woff2');
  font-weight:400 900;font-display:swap}

:root{
  --bg:#ffffff;
  --gris:#f5f5f7;          /* el gris suave de Apple. Se probo uno mas oscuro
                              (#eef0f5) y ella lo tumbo el 03/09: el cambio de
                              seccion lo marca la raya azul, no el fondo */
  --gris-hondo:#eceef1;
  --ink:#0a0a0c;
  --ink-soft:#25262b;
  --muted:#86868b;         /* el gris del texto secundario */
  --gris-titular:#5c5c63;  /* el gris del titular: mas oscuro, para que sea enfasis
                              y no texto apagado. El azul no entra aqui: en esta web
                              el azul significa que se puede pinchar */
  --line:#e3e4e8;
  --line-strong:#c9cbd1;
  --azul:#0041f5;          /* la accion. El unico color de la pagina */
  --azul-hover:#0034c8;
  --azul-claro:#5984f8;    /* el mismo azul aclarado, para fondo negro: el de marca
                              da 3,07 de contraste sobre negro y este da 6,08, que es
                              lo mismo que el azul de marca sobre blanco */
  --noche:#000000;         /* solo Qiu */
  /* 3-sep: ella dice tres veces que las secciones no se adaptan a su pantalla.
     Se ensancha la caja y el margen crece con la pantalla, asi que en un portatil
     ancho ya no quedan dos bandas vacias a los lados. */
  --ancho:1760px;
  --margen:clamp(22px,3.4vw,60px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
section[id]{scroll-margin-top:0}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
/* width:100% obligatorio: la seccion es flex en columna y con margin auto el
   .env dejaba de estirarse y cada bloque quedaba en un sitio distinto. */
.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}

/* ── Titulares. Dos colores dentro del titular: negro y gris, como Apple.
      Ella pidio combinar dos colores; con dos azules chocaba. ───────────── */
h1,h2,h3{font-family:'Manrope',sans-serif;font-weight:600;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(38px,6.6vw,80px);line-height:1.04}
h2{font-size:clamp(28px,3.6vw,48px);line-height:1.08}
h3{font-size:clamp(20px,1.9vw,26px);line-height:1.2}
.suave{color:var(--azul);font-weight:600}   /* decidido el 3-sep: la segunda mitad
   del titular va en el azul de marca. Antes era gris. */
p{margin:0}
.entradilla{font-size:clamp(16px,1.35vw,20px);color:var(--muted);line-height:1.55;max-width:56ch}

/* Las letras cuadradas de su lamina: QUANTUM VENTURES y QIU. */
.cuadrada{font-family:'Orbitron',sans-serif;font-weight:600;letter-spacing:.1em}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
header{
  /* Blanca solida a proposito. Con transparencia y desenfoque, al pasar por
     encima del negro de Qiu la barra se volvia gris oscuro. Lo cazo ella el
     03/09: "el gris de la barra de inicio se oscurece demasiado". */
  position:sticky;top:0;z-index:40;background:#fff;
  border-bottom:1px solid var(--line);
}
.barra{height:72px;display:flex;align-items:center;gap:34px}
.firma{flex:0 0 auto;display:flex;align-items:center;gap:10px;text-decoration:none}
.firma img{height:26px;width:auto}
.firma-texto{display:flex;flex-direction:column;line-height:1}
/* QUANTUM arriba y VENTURES debajo en azul, como su bloqueo del 03/09. El
   espaciado de la segunda linea esta ajustado para que las dos midan lo mismo
   (medido, no a ojo). */
.firma-texto b{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.firma-texto i{font-size:10px;font-weight:600;font-style:normal;letter-spacing:.375em;
  color:var(--azul);margin-top:4px}
nav{display:flex;gap:30px;margin-left:auto;align-items:center}
nav a{font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:color .18s}
nav a:hover{color:var(--azul)}

/* La pildora se usa como <a> y tambien como <button>. Un <button> trae el fondo
   gris del sistema (buttonface) y la tipografia del sistema, asi que sin estas
   cuatro lineas el boton secundario sale gris oscuro y con otra letra que el
   enlace de al lado. Cazado el 3-sep: el gris salia muy oscuro. */
.pildora{font-size:15px;font-weight:600;padding:11px 22px;border-radius:999px;
  border:1px solid var(--line-strong);text-decoration:none;display:inline-block;
  transition:background .2s,color .2s,border-color .2s;white-space:nowrap;
  background:transparent;color:inherit;font-family:inherit;cursor:pointer;
  line-height:1.35}
.pildora:hover{border-color:var(--ink)}
.pildora.azul{background:var(--azul);border-color:var(--azul);color:#fff}
.pildora.azul:hover{background:var(--azul-hover);border-color:var(--azul-hover)}
.barra .pildora{font-size:14px;padding:9px 18px}

.enlace{display:inline-block;margin-top:16px;font-size:15px;font-weight:600;color:var(--azul);
  text-decoration:none}
.enlace:hover{text-decoration:underline}
.enlace::after{content:" \2192"}

/* ── Secciones: blanco y gris alternando. Sin campos de color. ──────────── */
/* Cada seccion ocupa la pantalla entera al saltar a ella. Lo pidio ella el
   03/09: "las secciones no las estas haciendo bien, no ocupan la pantalla".
   Se descuenta la barra pegajosa (72 px) para que no sobre un hueco abajo.
   Si el contenido pide mas alto, la seccion crece: min-height, no height. */
/* Solo la portada y el bloque de Qiu ocupan la pantalla entera. Al forzarlo en
   TODAS quedaban huecos muertos y no se sabia si seguir leyendo (lo dijo ella
   el 03/09). Las demas respiran, pero sin aire de sobra. */
section{padding:clamp(56px,7.5vh,104px) 0;display:flex;flex-direction:column;justify-content:center}
.hero,.producto{min-height:calc(100svh - var(--cab,72px))}
/* 3-sep, ella tres veces: "las secciones no ocupan la pantalla" / "estan mal ajustadas".
   TODAS las secciones llenan la pantalla y el scroll se posa en el borde de cada una.
   --cab lo escribe app.js con la altura real de la cabecera, que cambia con el zoom. */
main > section{min-height:calc(100svh - var(--cab,72px));scroll-snap-align:start;
  scroll-margin-top:var(--cab,72px)}
html{scroll-snap-type:y proximity}
@media (max-width:820px){ html{scroll-snap-type:none} main > section{min-height:0} }
@media (prefers-reduced-motion:reduce){ html{scroll-snap-type:none} }
@supports not (height:100svh){ .hero,.producto,main > section{min-height:calc(100vh - var(--cab,72px))} }
/* Se alternan de verdad: claro, gris, claro, gris. Dos seguidas del mismo
   color se leian como una sola seccion (lo cazo ella el 03/09). */
.blanco{background:var(--bg)}
.gris{background:var(--gris)}
/* y una raya finisima entre secciones, por si dos quedan del mismo color */
main > section + section{border-top:1px solid var(--line)}
.producto{border-top:none!important}

.hero{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(52px,6vw,96px)}
.hero h1{max-width:19ch}
.centrada{text-align:center}
.centrada .entradilla{margin-left:auto;margin-right:auto}
.centrada h1,.centrada h2{margin-left:auto;margin-right:auto}
.centrada .acciones{justify-content:center}
.hero .entradilla{margin-top:26px}
.acciones{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}

/* ── Sectores: la tira que se recorre ───────────────────────────────────── */
.cabecera-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cabecera-fila h2{max-width:32ch}
.flechas{display:flex;gap:10px;flex:0 0 auto}
.flechas button{width:38px;height:38px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink);font-size:16px;cursor:pointer;line-height:1}
.flechas button:hover{border-color:var(--ink)}
.carril{margin-top:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-padding-left:max(var(--margen), calc((100vw - var(--ancho))/2 + var(--margen)))}
.carril::-webkit-scrollbar{display:none}
/* Los puntos de debajo de la tira. Los pinta el JS, uno por sector.
   El que esta puesto se alarga en vez de solo cambiar de color: asi tambien se
   distingue en una pantalla con poco contraste o a contraluz. */
.puntos-carril{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:0 max(var(--margen), calc((100vw - var(--ancho))/2 + var(--margen)));
  margin-top:2px}
.puntos-carril button{width:7px;height:7px;padding:0;border:0;border-radius:999px;
  background:var(--line-strong);cursor:pointer;transition:width .25s ease,background .25s ease;
  -webkit-appearance:none;appearance:none}
.puntos-carril button:hover{background:var(--muted)}
.puntos-carril button.ahi{width:24px;background:var(--azul)}
.puntos-carril button:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .puntos-carril button{transition:none}
}
/* La sangria va en el interior y no en el carril: si se pone en el contenedor
   que hace scroll, el navegador se come el margen de la derecha y la ultima
   tarjeta queda pegada al borde. */
.carril-interior{display:flex;gap:18px;width:max-content;
  /* arriba y abajo hace falta hueco: al pasar por encima la tarjeta sube 6 px y su
     sombra baja 18 mas, y el carril tiene overflow-y:hidden, asi que sin esto se corta */
  padding:14px max(var(--margen), calc((100vw - var(--ancho))/2 + var(--margen))) 30px}
.sector{flex:0 0 372px;width:372px;scroll-snap-align:start;background:var(--bg);
  border:1px solid var(--line);border-radius:22px;padding:32px 32px 34px;
  display:flex;flex-direction:column;gap:12px}
.sector-tipo{font-family:'Orbitron',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--azul)}
.sector h3{font-size:26px;letter-spacing:-.02em}
.sector-dolor{font-size:17px;color:var(--ink);line-height:1.5;font-weight:600}
.sector-sol{font-size:16px;color:var(--muted);line-height:1.55;padding-top:16px;
  border-top:1px solid var(--line);margin-top:auto}
.sector-sol::before{content:"→ ";color:var(--azul);font-weight:700}
.nota{margin-top:30px;font-size:14px;color:var(--muted);max-width:62ch}

/* ── La escalera: tres pasos ────────────────────────────────────────────── */
.escalera{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.paso{background:var(--gris);border-radius:20px;padding:30px 28px 32px;display:flex;
  flex-direction:column}
.paso-num{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  color:var(--muted);margin-bottom:14px}
.paso h3{margin-bottom:6px}
.paso-lead{font-size:16px;font-weight:700;margin-bottom:10px}
.paso p{font-size:15px;color:var(--muted);line-height:1.55}
.paso .enlace{margin-top:auto;padding-top:18px}
.paso.oscuro{background:var(--noche);color:#f5f5f7}
.paso.oscuro .paso-num{color:#a1a1a6}
.paso.oscuro p{color:#a1a1a6}
.paso.oscuro .paso-lead{color:#f5f5f7}
.paso.oscuro .enlace{color:#7ea2ff}
.remate{margin-top:34px;font-size:17px;color:var(--muted);max-width:64ch;line-height:1.6}
.remate b{color:var(--ink)}

/* ── Metodo ─────────────────────────────────────────────────────────────── */
/* Los pasos son tarjetas, no columnas sueltas: flotando sobre el gris se veian
   vacias. Lo dijo ella el 03/09 ("a esto le falta algo"). */
.metodo{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.fase{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.fase:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(10,10,12,.08);border-color:var(--line-strong)}
.fase-num{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;
  color:var(--azul);margin-bottom:6px}
.fase b{font-size:21px;font-weight:700}
.fase span:last-child{font-size:15.5px;color:var(--muted);line-height:1.55}

/* ── Qiu: el unico bloque en negro, como el iPhone dentro de Apple ──────── */
/* Ocupa la pantalla entera al saltar desde "Conocer a QIU": si no, se ve el
   blanco de arriba y de abajo y no hace de bloque de producto. */
.producto{background:var(--noche);color:#f5f5f7}
.producto .entradilla{color:#a1a1a6}
.producto .suave{color:var(--azul-claro)}
.producto .rotulo{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:#a1a1a6;margin-bottom:16px}
.producto-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,76px);
  align-items:center}
@media (max-width:900px){ .producto h2{max-width:none} }
.producto-cab{margin-bottom:clamp(26px,3vw,44px)}
.producto h2{max-width:26ch}   /* a lo ancho: si se queda en la columna, "trabajar:" cae
   solo en una segunda linea. Pedido el 3-sep. */
.lista{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.lista li{font-size:16px;color:#d6d6da;padding-left:24px;position:relative}
.lista li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:999px;background:var(--azul)}
/* La esfera crece con el alto de la pantalla: en un portatil bajo llenaba
   poco y quedaba mucho hueco muerto. */
.qiu-foto img{width:100%;max-width:min(460px, 56svh);margin:0 auto}
@supports not (height:100svh){ .qiu-foto img{max-width:min(460px,56vh)} }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line);padding:48px 0 60px;font-size:15px;color:var(--muted)}
.pie-rejilla{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.pie a{text-decoration:none}
.pie a:hover{color:var(--ink)}
.rotulo-pie{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:12px}

@media (max-width:900px){
  :root{--margen:20px}
  .barra{height:62px;gap:12px}
  nav{display:none}
  .firma img{height:24px}
  .firma-texto b{font-size:13px}
  .firma-texto i{font-size:8.6px;letter-spacing:.375em}
  /* con el menu escondido el boton se quedaba pegado a la firma */
  .barra > .pildora{margin-left:auto}
  .pildora{font-size:14px;padding:10px 16px}
  .cabecera-fila{flex-direction:column;align-items:flex-start}
  .flechas{display:none}
  .sector{flex:0 0 80vw;width:80vw;padding:26px}
  .producto-rejilla{grid-template-columns:1fr}
  .qiu-foto{order:-1}
}
@media (max-width:520px){ :root{--margen:16px} body{font-size:16px} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ── Se conecta con: la rejilla de aplicaciones. Nace del marketplace de Slack
      que mando ella el 03/09. Sin logos de terceros: no tenemos licencia de
      esas marcas y una rejilla de nombres se lee igual de bien. ─────────── */
.chips{margin-top:38px;display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px;font-size:15px;
  font-weight:600;color:var(--ink-soft);background:var(--bg)}
.chip.mas{border-color:var(--azul);color:var(--azul)}


/* ── Rotulo de seccion: el numero del paso delante, para que Qiu, Done for you
      y Growth se lean como los tres escalones de arriba. ─────────────────── */
.rotulo-sec{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.rotulo-sec.claro{color:#a1a1a6}

/* Las celdas de Done for you y de Growth */
.tresc{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.tresc.cuatro{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.cel{background:var(--gris);border:1px solid var(--line);border-radius:20px;padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.blanco .cel{background:var(--bg)}
.cel:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(10,10,12,.08);border-color:var(--line-strong)}
.cel-num{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;
  color:var(--azul);margin-bottom:6px;text-transform:uppercase}
.cel b{font-size:21px;font-weight:700}
.cel span:last-child{font-size:15.5px;color:var(--muted);line-height:1.55}
#done .acciones,#growth .acciones{margin-top:30px}

/* ── Al pasar por encima, las tarjetas se levantan un poco. Lo pidio ella el
      03/09. Es un gesto corto y sin rebote: nada cruza por encima del texto. */
.sector,.paso,.carta,.chip{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.sector:hover,.paso:hover,.carta:hover{transform:translateY(-6px) scale(1.015)}
.sector:hover{box-shadow:0 18px 38px rgba(10,10,12,.10);border-color:var(--line-strong)}
.paso:hover{box-shadow:0 18px 38px rgba(10,10,12,.10)}
.paso.oscuro:hover{box-shadow:0 18px 44px rgba(0,65,245,.22)}
.carta:hover{box-shadow:0 18px 38px rgba(10,10,12,.10)}
.chip:hover{transform:translateY(-2px);border-color:var(--azul);color:var(--azul)}

/* ── Integraciones: rejilla con icono, como el marketplace que mando ella. Los
      glifos estan dibujados aqui, simplificados, no son los logotipos
      oficiales de esas marcas. ──────────────────────────────────────────── */
/* Cinco por fila y diez en total: dos filas exactas, sin una tercera coja.
   Lo pidio ella el 03/09: "pondria menos y mas simetrico". */
.apps{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){ .apps{grid-template-columns:repeat(4,1fr)} }
@media (max-width:820px){ .apps{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .apps{grid-template-columns:repeat(2,1fr)} }
.app{background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:30px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:15px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.app:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 16px 32px rgba(10,10,12,.09);
  border-color:var(--line-strong)}
.app-icono{width:52px;height:52px;display:block}
.app-icono svg{width:52px;height:52px;display:block}
.app-nombre{font-size:15px;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.25}
.app-mas{border-style:dashed;border-color:var(--azul)}
.app-mas .app-nombre{color:var(--azul)}

/* ── La cinta de aplicaciones que no se acaba ───────────────────────────────
   Peticion del 5-sep-2026. Ocho iconos quietos en una rejilla dicen "ocho".
   La misma fila andando sin fin dice lo que pone al lado, que son 2.800.
   Se para al pasar por encima y al entrar con el teclado, porque cada tarjeta
   se puede pinchar: una cosa que se mueve y ademas es un boton hay que poder
   pararla antes de darle. */
.cinta{margin-top:44px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cinta .cinta-pista{margin-top:0;display:flex;width:max-content;gap:14px;
  padding:10px 0 24px;will-change:transform}
.cinta.anda .cinta-pista{animation:cinta-va var(--cinta-t,46s) linear infinite}
.cinta .cinta-pista .app{flex:0 0 176px;width:176px}
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista{animation-play-state:paused}
@keyframes cinta-va{from{transform:translateX(0)}to{transform:translateX(var(--cinta-x,-50%))}}
@media (max-width:560px){ .cinta .cinta-pista .app{flex:0 0 150px;width:150px;padding:24px 12px 20px} }
/* Sin animacion la cinta no puede quedarse cortada: se recorre a dedo. */
@media (prefers-reduced-motion: reduce){
  .cinta{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .cinta.anda .cinta-pista{animation:none}
}

/* ── La banda clara de las dos tarjetas ─────────────────────────────────── */
.banda{background:var(--gris)}  /* ya no se usa: el fondo lo pone .gris/.blanco */
.dos-cartas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.carta{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:32px}
.carta h3{margin-bottom:10px}
.carta p{font-size:16px;color:var(--muted);line-height:1.55;max-width:40ch}
.carta .pildora{margin-top:22px}
.carta-qr{display:flex;gap:24px;align-items:center;justify-content:space-between}
.carta-qr img{width:132px;height:132px;flex:0 0 auto;border-radius:12px}
@media (max-width:520px){ .carta-qr{flex-direction:column;align-items:flex-start} }

/* ── Contacto: el chat de Qiu al lado ───────────────────────────────────── */
.contacto-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);
  align-items:center}
.datos{margin-top:36px;display:grid;gap:16px}
.datos div{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.datos span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.datos a,.datos b{font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
.datos a:hover{color:var(--azul)}

.qiu-caja{background:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 22px 48px rgba(10,10,12,.07)}
.qiu-cab{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.qiu-punto{width:12px;height:12px;border-radius:999px;background:var(--azul);flex:0 0 auto}
.qiu-quien{display:flex;flex-direction:column;line-height:1.2}
.qiu-quien b{font-size:13px;letter-spacing:.1em}
.qiu-quien span{font-size:12px;color:var(--muted)}
.qiu-vivo{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul);border:1px solid var(--azul);border-radius:999px;padding:3px 10px}
.qiu-hilo{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:230px;max-height:300px;
  overflow-y:auto}
.msg{font-size:15.5px;line-height:1.5;padding:12px 16px;border-radius:16px;max-width:88%}
.msg.el{background:var(--gris);color:var(--ink);border-bottom-left-radius:6px;align-self:flex-start}
.msg.yo{background:var(--azul);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.msg.pensando{color:var(--muted)}
.sug{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px}
.sug button{font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:border-color .2s,color .2s}
.sug button:hover{border-color:var(--azul);color:var(--azul)}
.qiu-pie{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--line)}
.qiu-pie input{flex:1;min-width:0;font-family:inherit;font-size:15.5px;padding:12px 16px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--bg);color:var(--ink)}
.qiu-pie input:focus{outline:none;border-color:var(--azul)}
.qiu-pie .bt{font-family:inherit;font-size:15px;font-weight:600;padding:12px 22px;border-radius:999px;
  border:1px solid var(--azul);background:var(--azul);color:#fff;cursor:pointer}
.qiu-pie .bt:hover{background:var(--azul-hover);border-color:var(--azul-hover)}
.qiu-pie .bt:disabled,.qiu-pie input:disabled{opacity:.55;cursor:default}

/* ── Pie empresarial ────────────────────────────────────────────────────── */
.pie{padding:64px 0 40px}
.pie-rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;align-items:flex-start}
.pie-marca p{margin-top:16px;max-width:38ch;line-height:1.55}
.pie-marca .pildora{margin-top:22px}
.pie-rejilla p{margin-bottom:8px}
.pie-legal{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13.5px}
.pie-legal-enlaces{display:flex;gap:22px}
.pie-legal a{text-decoration:none}
.pie-legal a:hover{color:var(--ink)}

@media (max-width:900px){
  .contacto-rejilla{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:32px}
  .pie-marca{grid-column:1 / -1}
}
@media (max-width:520px){ .pie-rejilla{grid-template-columns:1fr} }

/* ── Qiu vivo en toda la web: el boton flotante y su panel. Lo pidio ella el
      03/09: "el soporte va a traves de qiu, podemos ponerlo en la web
      viviendo, como un chat?". Es el MISMO Qiu del contacto. ───────────── */
.qiu-boton{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--azul);color:#fff;border:none;border-radius:999px;padding:14px 22px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;box-shadow:0 14px 34px rgba(0,65,245,.32);
  transition:transform .2s ease,background .2s ease}
.qiu-boton:hover{transform:translateY(-2px);background:var(--azul-hover)}
.qiu-boton .cuadrada{font-size:13px}
.qiu-flotante{position:fixed;right:22px;bottom:22px;z-index:61;width:min(390px, calc(100vw - 32px));
  display:none}
.qiu-flotante.abierto{display:block}
.qiu-flotante .qiu-caja{box-shadow:0 26px 60px rgba(10,10,12,.22)}
.qiu-flotante .qiu-hilo{min-height:260px;max-height:min(46vh,340px)}
.qiu-cerrar{margin-left:auto;background:none;border:none;font-size:22px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 2px}
.qiu-cerrar:hover{color:var(--ink)}
.qiu-flotante .qiu-vivo{margin-left:0}
@media (max-width:520px){ .qiu-boton{right:14px;bottom:14px;padding:12px 18px}
  .qiu-flotante{right:14px;bottom:14px} }
/* En pantalla pequena el panel no cabe: medido a 390x844 se salia 144 px por arriba y
   dejaba las tarjetas asomando por debajo. Aqui ocupa la pantalla entera y nada mas. */
@media (max-width:560px){
  .qiu-flotante{inset:0;right:auto;bottom:auto;width:auto;height:100%;border-radius:0}
  .qiu-flotante .qiu-caja{height:100%;display:flex;flex-direction:column;border-radius:0;
    border-left:none;border-right:none;box-shadow:none}
  .qiu-flotante .qiu-hilo{flex:1;min-height:0;max-height:none}
  .qiu-flotante .sug{flex:0 0 auto}
}

/* ── Pagina suelta de integraciones ─────────────────────────────────────── */
.pagina-suelta section{min-height:0}
.cabecera-suelta{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(28px,3vw,44px)}
.cabecera-suelta h1{font-size:clamp(34px,5.2vw,64px);max-width:26ch}
.grupos{display:grid;gap:clamp(40px,5vw,64px)}
.grupo h2{font-size:clamp(21px,2.2vw,28px);margin-bottom:22px}
.grupo .apps{margin-top:0}
a.app{text-decoration:none}

/* ── Lista de integraciones con explicacion, como el directorio de Slack ─── */
.app-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:14px}
.app-fila{display:flex;gap:16px;align-items:flex-start;background:var(--bg);
  border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.app-fila:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 16px 32px rgba(10,10,12,.08);
  border-color:var(--line-strong)}
.app-fila .app-icono{width:44px;height:44px;flex:0 0 auto}
.app-fila .app-icono svg{width:44px;height:44px}
.app-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.app-txt b{font-size:16.5px;font-weight:700}
.app-txt span{font-size:14.5px;color:var(--muted);line-height:1.45}

/* ── Aparecer al bajar, como Apple. Corto y sin rebote: el bloque sube 18 px y
      se aclara. Nada se mueve por encima de un texto. ─────────────────────── */
.aparece{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.aparece.visible{opacity:1;transform:none}
/* la esfera de Qiu entra con un poco de escala, que es el gesto de Apple */
.qiu-foto.aparece{transform:translateY(24px) scale(.94)}
.qiu-foto.aparece.visible{transform:none}
.qiu-foto{transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s ease}
@media (prefers-reduced-motion:reduce){
  .aparece,.qiu-foto.aparece{opacity:1!important;transform:none!important}
}

/* ── Buscador de la pagina de integraciones ─────────────────────────────── */
.buscador{margin-top:34px;max-width:660px}
.busca-fila{display:flex;gap:10px;flex-wrap:wrap}
.busca-fila input{flex:1;min-width:240px}
.busca-fila .pildora{flex:0 0 auto;padding:15px 24px}
.buscador input{width:100%;font-family:inherit;font-size:17px;padding:15px 20px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--bg);color:var(--ink)}
.buscador input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(0,65,245,.10)}
.busca-aviso{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.5;min-height:1px}
.busca-aviso b{color:var(--ink)}
.busca-aviso button{margin-left:8px;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--azul);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}
.grupo.oculto,.app-fila.oculto{display:none}

.pasos-guia{margin:18px 0 0;padding-left:20px;display:grid;gap:8px}
.pasos-guia li{font-size:15px;color:var(--muted);line-height:1.5}
.pasos-guia li::marker{color:var(--azul);font-weight:700}

/* ── Que se note el cambio de seccion, sin llenarlo de efectos ───────────── */
/* 1. La barra de avance de la lectura, arriba del todo. */
.avance{position:fixed;top:0;left:0;height:3px;width:0;background:var(--azul);z-index:70;
  transition:width .1s linear;pointer-events:none}
/* 2. El titular entra en dos tiempos: primero la parte negra y un instante
      despues la gris. Es el golpe de vista que marca que empieza otra seccion. */
.aparece .suave{opacity:0;transform:translateY(7px);
  transition:opacity .65s ease .26s,transform .65s cubic-bezier(.22,.61,.36,1) .26s}
.aparece.visible .suave{opacity:1;transform:none}
/* 3. Los titulares suben un poco mas que el resto, para que el arranque de
      seccion se lea como un arranque. */
h1.aparece,h2.aparece{transform:translateY(30px)}
h1.aparece.visible,h2.aparece.visible{transform:none}
/* 4. La linea que separa la seccion negra de la clara entra sola. */
.producto{position:relative}
.producto::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--azul),transparent);opacity:.55}
@media (prefers-reduced-motion:reduce){
  .aparece .suave{opacity:1!important;transform:none!important}
  .avance{display:none}
}

/* La flecha de la portada: dice que hay mas debajo. */
.sigue{margin-top:clamp(30px,4vh,52px);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  text-decoration:none}
.sigue:hover{color:var(--azul)}
.sigue svg{width:22px;height:22px;animation:baja 2.2s ease-in-out infinite}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){ .sigue svg{animation:none} }

/* ── El efecto de ampliar, DESPUES de las reglas de aparecer ─────────────── */
/* Sin esto no se veia: `.aparece.visible{transform:none}` esta escrito mas
   abajo y le ganaba al hover. Lo cazo ella el 03/09 preguntando por que habia
   desaparecido la ampliacion. */
.app.visible:hover,.app:hover{transform:translateY(-6px) scale(1.03)}
.sector.visible:hover,.sector:hover{transform:translateY(-6px) scale(1.015)}
.paso.visible:hover,.paso:hover{transform:translateY(-6px) scale(1.015)}
.carta.visible:hover,.carta:hover{transform:translateY(-6px) scale(1.015)}
.fase.visible:hover,.fase:hover{transform:translateY(-6px) scale(1.02)}
.cel.visible:hover,.cel:hover{transform:translateY(-6px) scale(1.02)}
.app-fila.visible:hover,.app-fila:hover{transform:translateY(-5px) scale(1.02)}

/* ── Que no sea todo cajas: cada seccion con su forma ────────────────────── */
/* El metodo, como una linea de tiempo con su hilo. */
.linea-tiempo{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:28px;position:relative}
.hito{position:relative;padding-top:34px;display:flex;flex-direction:column;gap:7px}
.hito::before{content:"";position:absolute;top:11px;left:0;right:-28px;height:1px;background:var(--line-strong)}
.hito:last-child::before{right:0}
.hito::after{content:"";position:absolute;top:5px;left:0;width:13px;height:13px;border-radius:999px;
  background:var(--azul);box-shadow:0 0 0 5px var(--gris)}
.blanco .hito::after{box-shadow:0 0 0 5px var(--bg)}
.hito-num{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  color:var(--azul)}
.hito b{font-size:22px;font-weight:700}
.hito span:last-child{font-size:15.5px;color:var(--muted);line-height:1.55}

/* Done for you, como una lista numerada grande. */
.lista-num{margin-top:44px;display:grid;gap:0}
.linea{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;
  padding:26px 0;border-top:1px solid var(--line-strong)}
.linea:last-child{border-bottom:1px solid var(--line-strong)}
.linea-num{font-family:'Orbitron',sans-serif;font-size:clamp(30px,3.4vw,44px);font-weight:600;
  line-height:1;color:var(--line-strong)}
.linea b{display:block;font-size:22px;font-weight:700;margin-bottom:6px}
.linea span:last-child{grid-column:2;font-size:16px;color:var(--muted);line-height:1.55;max-width:62ch;display:block}

/* Soporte, tres apoyos en fila con su raya y nada mas. */
.apoyos{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.apoyo{display:flex;flex-direction:column;gap:7px}
.apoyo-num{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  color:var(--azul);padding-bottom:14px;border-bottom:2px solid var(--azul);align-self:flex-start}
.apoyo b{font-size:21px;font-weight:700;margin-top:10px}
.apoyo span:last-child{font-size:15.5px;color:var(--muted);line-height:1.55}

@media (max-width:820px){
  .hito::before{display:none}
  .linea{grid-template-columns:64px 1fr;gap:16px}
}

/* ── La raya que dibuja el arranque de cada seccion ──────────────────────── */
/* Es lo que hace que se NOTE que empieza otra seccion, mas que el fondo. */
main > section{position:relative}
/* la raya azul de cambio de seccion la tumbo ella el 3-sep: "esa cosa horripilante
   entre secciones quitala". El cambio se nota con el fondo y con la entrada del texto. */


/* ── La entrada del bloque de Qiu, que es la que ella quiere que se note ─── */
.qiu-foto{position:relative}
.qiu-halo{position:absolute;left:50%;top:52%;width:78%;padding-bottom:78%;transform:translate(-50%,-50%) scale(.6);
  border-radius:999px;background:radial-gradient(circle,rgba(0,65,245,.55) 0%,rgba(0,65,245,.16) 42%,transparent 70%);
  opacity:0;pointer-events:none;filter:blur(6px)}
.qiu-foto img{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ .qiu-halo{display:none} }

/* ── El cierre: como se empieza. Lo pidio ella el 3-sep: "nada te invita a comprar" ── */
.negro-suave{background:var(--noche);color:#f5f5f7}
.negro-suave .suave{color:var(--azul-claro)}
.negro-suave .rotulo-sec{color:#8e8e93}
.dos-vias{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px)}
.via{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding-top:22px;border-top:2px solid var(--azul)}
.via b{font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.01em}
.via > span{font-size:17px;line-height:1.55;color:#a1a1a6;max-width:46ch}
.via .pildora{margin-top:8px}
.pildora.borde{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.pildora.borde:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.negro-suave .nota{margin-top:34px;color:#8e8e93;font-size:15px}

/* ── El apartado de empezar ya NO es negro ─────────────────────────────────────────
   Peticion de direccion del 5-sep-2026: "el negro de fondo solamente se utilice
   cuando aparezca Q, no abajo otra vez, porque es un negro para Q distintivo".
   Y no es solo gusto: en el propio fichero el negro esta definido con la nota
   "solo Qiu" al lado, asi que la pagina se saltaba su propia regla.

   La seccion pasa a claro y la UNICA cosa negra que queda dentro es la tarjeta de
   Qiu, que es justo lo que se queria: el negro senala a Qiu y a nada mas.
   Las piezas de dentro estaban escritas para fondo oscuro, asi que se corrigen aqui
   en vez de tocar el HTML. */
.blanco .via > span{color:var(--muted)}
.blanco .via:not(.via-fuerte){border-top:1px solid var(--line-strong)}
.blanco .via-fuerte{color:#f5f5f7}
.blanco .via-fuerte > span{color:#a1a1a6}
.blanco .via-fuerte b{color:#f5f5f7}
.blanco .nota{margin-top:34px;color:var(--muted);font-size:15px}
.blanco .via-plazo{color:var(--muted)}
.blanco .via-fuerte .via-plazo{color:var(--azul-claro)}
/* El boton de contorno era blanco sobre negro: sobre claro no se veia. */
.blanco .pildora.borde{color:var(--ink);border-color:var(--line-strong)}
.blanco .pildora.borde:hover{border-color:var(--ink);background:rgba(10,10,12,.05)}
@media (max-width:820px){ .dos-vias{grid-template-columns:1fr;gap:34px} }

/* Los datos reales del soporte */
.soporte-datos{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px 56px}
.soporte-datos > div{display:flex;flex-direction:column;gap:4px}
.soporte-datos span:first-child{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.soporte-datos a,.soporte-datos b{font-size:17px;color:var(--ink);text-decoration:none;font-weight:600}
.soporte-datos a:hover{color:var(--azul)}

/* ── Done for you: es el apartado que mas le importa, asi que no es una lista suelta ──
   Cuatro bloques en dos columnas, con el numero grande y sin cajas (ella el 3-sep:
   "todo con cajas? parece que hablamos de lo mismo siempre"). */
.dfy{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(32px,5vw,88px);row-gap:0}
.dfy-item{display:grid;grid-template-columns:58px 1fr;column-gap:20px;
  padding:30px 0;border-top:1px solid var(--line-strong)}
.dfy-item:nth-child(1),.dfy-item:nth-child(2){border-top:none;padding-top:0}
.dfy-num{grid-row:span 2;font-family:'Orbitron',sans-serif;font-size:clamp(26px,2.6vw,34px);
  font-weight:600;color:var(--line-strong);line-height:1}
.dfy-item b{font-size:clamp(20px,1.7vw,23px);font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.dfy-item > span:last-child{font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:44ch}
@media (max-width:860px){
  .dfy{grid-template-columns:1fr}
  .dfy-item:nth-child(2){border-top:1px solid var(--line-strong);padding-top:30px}
}
/* los numeros de la guia en azul le chirrian (3-sep) */
.pasos-guia ol li::marker{color:var(--muted)}
.pasos-guia ol li{color:var(--ink-soft)}

/* 8 fichas justas, dos filas de cuatro: ella el 3-sep "INSISTO, DEBE HABER MENOS" */

/* Las dos cartas de "los primeros diez minutos" y el QR viven ya dentro del cierre negro
   (3-sep: "en como empezamos deberias aprovechar tambien para meter este contraste"). */
.negro-suave .dos-cartas{margin-top:56px}
.negro-suave .carta{background:#0e0e11;border-color:#26262b}
.negro-suave .carta h3{color:#f5f5f7}
.negro-suave .carta p{color:#a1a1a6}
.negro-suave .pasos-guia ol li,.negro-suave .pasos-guia li{color:#c7c7cc}
.negro-suave .pasos-guia li::marker{color:#8e8e93}
.negro-suave .carta-qr img{background:#fff;border-radius:12px;padding:8px}

/* ── Soporte: era una pared de tres columnas de texto gris (3-sep: "se me mezcla tanto
   texto"). Ahora la mitad es texto y la otra mitad ENSENA una conversacion real. ── */
.soporte-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,84px);align-items:center}
.muestra{background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:22px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 18px 50px rgba(10,10,12,.07)}
.muestra-cab{display:flex;align-items:center;gap:9px;padding-bottom:14px;
  border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.1em;color:var(--muted)}
.burbuja{max-width:82%;padding:13px 16px;border-radius:18px;font-size:15.5px;line-height:1.5}
.burbuja.tu{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:6px}
.burbuja.el{align-self:flex-start;background:var(--gris-hondo);color:var(--ink);border-bottom-left-radius:6px}
.enlace-flecha{color:var(--azul);text-decoration:none;font-weight:600;font-size:16px}
.enlace-flecha:hover{text-decoration:underline}
@media (max-width:900px){ .soporte-rejilla{grid-template-columns:1fr} }

/* Las dos vias tenian la misma pinta (3-sep: "aqui estaria genial diferenciar un poco mas").
   La de Qiu es la principal: fondo propio, raya gruesa y su plazo delante. */
.via-plazo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8e8e93;
  font-family:'Orbitron',sans-serif}
.via-fuerte{background:#0e0e11;border:1px solid #26262b;border-top:3px solid var(--azul);
  border-radius:0 0 18px 18px;padding:26px 26px 30px;margin-top:-1px}
.via:not(.via-fuerte){padding-top:24px;border-top:1px solid #3a3a40}
.via-fuerte .via-plazo{color:var(--azul)}

/* La tira del movil: antes eran dos cartas grandes que le recargaban la seccion
   (3-sep: "sacaria eso de la seccion"). */
.tira-movil{margin-top:44px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding-top:30px;border-top:1px solid #26262b}
.tira-movil img{background:#fff;border-radius:12px;padding:8px;flex:0 0 auto}
.tira-movil > div{display:flex;flex-direction:column;gap:8px;max-width:46ch}
.tira-movil b{font-size:19px;font-weight:700}
.tira-movil span{font-size:16px;color:#a1a1a6;line-height:1.55}
.enlace-flecha.claro{color:#fff;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--azul)}
#contacto{padding-bottom:clamp(96px,12vh,150px)}

#done .remate{margin-top:38px}

/* Las fichas de herramientas entran con mas fuerza (3-sep: "aqui podrian aparecer con
   mas efecto"): crecen desde el 90% en vez de solo subir. */
.app.aparece{transform:translateY(24px) scale(.9)}
.app.aparece.visible{transform:none}
.dfy-item.aparece{transform:translateY(24px)}
.via.aparece{transform:translateY(26px)}
.muestra.aparece{transform:translateY(28px) scale(.97)}
.muestra.aparece.visible,.via.aparece.visible,.dfy-item.aparece.visible{transform:none}
/* y el hover se vuelve a declarar aqui, que es lo ultimo del fichero */
.app.visible:hover,.app:hover{transform:translateY(-6px) scale(1.03)}
.sector.visible:hover,.sector:hover{transform:translateY(-6px) scale(1.015)}
.paso.visible:hover,.paso:hover{transform:translateY(-6px) scale(1.015)}

/* Las preguntas de soporte, plegadas */
.lista-preg{margin-top:44px;display:grid;gap:0;max-width:900px}
.lista-preg details{border-top:1px solid var(--line-strong);padding:20px 0}
.lista-preg details:last-child{border-bottom:1px solid var(--line-strong)}
.lista-preg summary{cursor:pointer;font-size:19px;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.lista-preg summary::-webkit-details-marker{display:none}
.lista-preg summary::after{content:"+";font-family:'Orbitron',sans-serif;color:var(--azul);
  font-size:22px;line-height:1;transition:transform .25s}
.lista-preg details[open] summary::after{transform:rotate(45deg)}
.lista-preg p{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:66ch}
.lista-preg a{color:var(--azul)}

/* Los plazos de Qiu, Done for you y Growth NO se mezclan en la misma rejilla
   (3-sep: "este apartado se presta a confusion. Qiu es una cosa, proyecto es otra,
   y Growth es otra"). Cada uno su bloque con su nombre delante. */
.plazo-bloque{margin-top:44px;padding-top:28px;border-top:2px solid var(--azul)}
.plazo-cab{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.plazo-cab > span:first-child{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
.plazo-cab b{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.01em}
.plazo-bloque > p{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:72ch}
.plazo-bloque .dfy{margin-top:32px}

/* La cabecera: con el zoom alto el menu se partia en dos lineas y empujaba el boton
   fuera de la pantalla (3-sep: "el hablemos ahi se esconde"). */
.barra{flex-wrap:nowrap}
.barra nav a{white-space:nowrap}
.barra > .pildora{flex:0 0 auto;white-space:nowrap}
.barra .firma{flex:0 0 auto}
@media (max-width:1120px){ .barra nav{display:none} .barra > .pildora{margin-left:auto} }

/* Menu compacto: al estrechar, el menu no desaparece, se pliega
   (3-sep: "cuando la hago pequena desaparece la barra de menu"). */
.menu-bt{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;background:transparent;border:1px solid var(--line-strong);
  border-radius:12px;cursor:pointer;margin-left:14px;flex:0 0 auto}
.menu-bt span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.menu-bt[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-bt[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-bt[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-panel{display:none;border-top:1px solid var(--line);background:#fff;
  padding:18px var(--margen) 26px}
.menu-panel.abierto{display:block}
.menu-panel nav{display:flex;flex-direction:column;gap:2px}
.menu-panel nav a{display:block;padding:13px 0;font-size:18px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.menu-panel nav a:hover{color:var(--azul)}
.menu-panel > .pildora{margin-top:18px;display:inline-flex}
@media (max-width:1120px){ .menu-bt{display:flex} .barra > .pildora{display:none} }
@media (min-width:1121px){ .menu-panel{display:none!important} }

/* Correccion suya del 3-sep: "no te cargues el hablemos que habia. y si pones barra que sea
   a la derecha". El Hablemos se queda SIEMPRE en la barra; el desplegable cae por la derecha. */
@media (max-width:1120px){
  .barra > .pildora{display:inline-flex;margin-left:auto}
  .menu-panel{position:absolute;top:100%;right:var(--margen);left:auto;
    width:min(300px, calc(100vw - var(--margen)*2));
    border:1px solid var(--line);border-radius:16px;padding:10px 20px 18px;
    box-shadow:0 24px 60px rgba(10,10,12,.16)}
}
header{position:sticky}
.barra{position:relative}
header{overflow:visible}
.menu-panel nav a:last-child{border-bottom:none}

/* Sin recuadro: tres rayas limpias (correccion suya del 3-sep). */
.menu-bt{border:none;background:transparent;width:34px;padding:0;margin-left:16px}
.menu-bt span{height:2px;width:22px;margin-left:auto}
.menu-bt span:nth-child(2){width:16px}
.menu-bt[aria-expanded="true"] span:nth-child(1),
.menu-bt[aria-expanded="true"] span:nth-child(3){width:22px}
/* Las tres rayas, iguales de largas (correccion suya del 3-sep). */
.menu-bt span,.menu-bt span:nth-child(2){width:22px}

/* "Que la gente vea el valor de Qiu": botones que abren el chat con la pregunta ya escrita
   y la mandan, asi que contesta de verdad delante de quien mira la pagina. */
.pruebalo-tit{margin-top:30px;font-size:14px;color:#8e8e93}
.pruebalo{margin-top:12px;display:flex;flex-wrap:wrap;gap:9px}
.pruebalo button{background:rgba(255,255,255,.06);border:1px solid #2c2c33;color:#f5f5f7;
  border-radius:999px;padding:10px 16px;font-size:14px;font-family:inherit;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.pruebalo button:hover{border-color:var(--azul);background:rgba(0,65,245,.14);transform:translateY(-2px)}

/* Selector de idioma (3-sep-2026). La web tiene que estar en ingles y con direccion propia:
   /quantum-hoy/ en espanol y /quantum-hoy/en/ en ingles, con hreflang en las dos. */
.idioma{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-decoration:none;padding:6px 4px;transition:color .18s ease}
.idioma:hover{color:var(--ink)}
.idioma.actual{color:var(--ink)}
.idioma-sep{color:var(--line-strong);font-size:13px}
.barra > .idioma{margin-left:18px}
.barra > .idioma-sep{margin:0 2px}
.barra > .idioma-sep + .idioma{margin-left:2px}
@media (max-width:1120px){ .barra .idioma{margin-left:8px} }
/* En pantalla estrecha el selector se va DENTRO del menu: en la barra empujaba las tres
   rayas fuera y desbordaba 18 px (medido, 3-sep-2026). */
.idiomas-menu{display:none}
@media (max-width:1120px){
  .barra > .idioma,.barra > .idioma-sep{display:none}
  .idiomas-menu{display:flex;align-items:center;gap:6px;padding:12px 18px 4px;
    border-top:1px solid var(--line);margin-top:6px}
}

/* Selector de idioma compacto (3-sep-2026: "los idiomas no pueden aparecer asi,
   ocupan espacio y en el futuro seran mas"). Un solo boton con el idioma de ahora, y la
   lista se abre debajo: da igual que manana sean seis. */
.idiomas{position:relative;margin-left:16px}
.idioma-bt{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  cursor:pointer;padding:8px 4px;transition:color .18s ease}
.idioma-bt:hover,.idioma-bt[aria-expanded="true"]{color:var(--ink)}
.idioma-bt .v{transition:transform .18s ease}
.idioma-bt[aria-expanded="true"] .v{transform:rotate(180deg)}
.idiomas-lista{position:absolute;top:calc(100% + 10px);right:0;min-width:186px;z-index:60;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 22px 52px rgba(10,10,12,.14);display:none}
.idiomas.abierto .idiomas-lista{display:block}
.idiomas-lista .op{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  font-size:14px;color:var(--ink);text-decoration:none}
.idiomas-lista .op b{font-size:11px;letter-spacing:.08em;color:var(--muted);min-width:22px}
.idiomas-lista a.op:hover{background:var(--gris)}
.idiomas-lista .op.actual{color:var(--azul)}
.idiomas-lista .op.actual b{color:var(--azul)}
@media (max-width:1120px){ .idiomas{margin-left:auto;margin-right:4px} }

/* Cabecera centrada, estilo Apple (3-sep-2026: "centrar todo como en Apple").
   Tres columnas de verdad: la marca a la izquierda, el menu SIEMPRE en el centro de la
   pantalla, y las acciones a la derecha. Con flex y margin-auto el menu se centra entre
   las dos piezas de al lado, que no es lo mismo y se nota cuando una pesa mas. */
@media (min-width:1121px){
  .barra{display:grid;grid-template-columns:1fr auto 1fr;gap:0}
  .barra .firma{justify-self:start}
  .barra nav{justify-self:center;display:flex;align-items:center;gap:30px}
  .barra .idiomas{justify-self:end;grid-column:3;margin-left:0;margin-right:14px}
  .barra > .pildora{justify-self:end;grid-column:3}
  /* la tercera columna lleva dos cosas, asi que se ponen en fila */
  .barra{align-items:center}
  .barra > .idiomas,.barra > .pildora{align-self:center}
}
.acciones-barra{display:flex;align-items:center;gap:6px;margin-left:auto}
@media (min-width:1121px){ .acciones-barra{grid-column:3;justify-self:end;margin-left:0}
  .barra .idiomas{margin-right:6px} }
/* Y mas estrecha (3-sep-2026). Baja de 72 a 62 px, y el resto de la pagina la mide
   sola por --cab, asi que no hay ningun numero que ajustar a mano. */
.barra{height:62px}

/* la barra en movil: firma, idioma y menu. "Hablemos" baja al panel, que si no
   el boton de menu se sale 3 px (medido a 390 en Chromium y WebKit, 3-sep) */
.pildora.solo-menu{display:none}
@media (max-width:560px){
  .barra .acciones-barra > .pildora{display:none}
  .menu-panel .pildora.solo-menu{display:inline-flex;margin-top:14px}
}

/* Las lecciones de la Academia, dentro del bloque de QIU. Van sobre fondo oscuro. */
.acade{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.acade div{display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:13px 16px;background:rgba(255,255,255,.04)}
.acade b{font-size:15.5px;font-weight:600;line-height:1.35}
.acade span{margin-left:auto;flex:0 0 auto;font-size:12.5px;color:#a1a1a6;white-space:nowrap}
@media (max-width:560px){ .acade b{font-size:14.5px} .acade div{padding:12px 14px} }

/* La segunda mitad del titular empieza en su propia linea. Pedido el 3-sep sobre
   /integraciones/, donde ", no al lado." se partia en dos lineas y quedaba colgando. */
h1 .suave,h2 .suave{display:block}   /* la segunda mitad SIEMPRE empieza en su propia
   linea, tambien en los h2. Pedido el 3-sep: "cada sector tiene necesidades
   distintas. Debajo en azul, construimos lo que cada uno necesita." */

/* En el movil el rotulo se parte en dos lineas con el espaciado ancho: ahi se afloja. */
@media (max-width:560px){
  .rotulo-sec,.producto .rotulo{letter-spacing:.24em}
}