:root{
  --indigo:#454B8E; --tinta:#14234D; --arandano:#6E4792; --acero:#5B76AA;
  --acento:#F5B72C; --error:#B0175A; --lila:#928BBD; --lila-palido:#CCC8E1;
  --papel:#FFFFFF; --papel-suave:#F6F5FB;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}
a{color:var(--indigo)}
.mono,.board .mono,.precio,.ficha-nums b,.stats b{font-family:"IBM Plex Mono",ui-monospace,monospace}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--lila-palido);
  position:sticky;top:0;background:var(--papel);z-index:20}
.top .brand img{height:30px;display:block}
.top nav{display:flex;align-items:center;gap:1.2rem;font-weight:600}
.top nav a{text-decoration:none}
.btn{display:inline-block;background:var(--indigo);color:#fff;border:0;border-radius:8px;
  padding:.7rem 1.15rem;font:inherit;font-weight:800;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--tinta)}
.btn-sm{padding:.45rem .8rem;font-size:.92rem}
.btn-lg{padding:.85rem 1.6rem;font-size:1.05rem}
.btn-ghost{background:transparent;color:var(--indigo);border:2px solid var(--indigo)}
.acc{background:linear-gradient(transparent 62%,var(--acento) 62%)}
/* El sello del correo: chico y tenue, para que se lea como una nota al margen y no compita con
   la direccion, que es el dato. Director 2026-08-19: "pequena y tenue". */
.sello{display:inline-block;margin-left:.45rem;padding:.05rem .38rem;border-radius:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  vertical-align:.08em;border:1px solid transparent;cursor:help}
.sello-ok{color:#1d7a52;background:#e8f6ef;border-color:#c6e8d8}
.sello-duda{color:#8a6d1f;background:#fdf6e3;border-color:#efe0b4}
.mapa{margin-top:.7rem}
.mapa iframe{width:100%;height:300px;border:1px solid var(--lila-palido);border-radius:10px}
.ticker{overflow:hidden;border-bottom:1px solid var(--lila-palido);background:var(--papel-suave)}
.ticker-track{display:flex;gap:2.2rem;white-space:nowrap;padding:.5rem 0;
  animation:slide 42s linear infinite;width:max-content}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:var(--acero)}
.tick b{color:var(--tinta);margin-right:.5rem}
.tick i{font-style:normal;color:var(--arandano)}
.hero{max-width:920px;margin:0 auto;padding:clamp(2rem,6vw,3.6rem) 1.2rem 1.4rem;text-align:center}
.hero.narrow{max-width:720px}
h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;margin:0 0 .8rem;letter-spacing:-.02em}
.sub{color:var(--acero);font-size:1.06rem;max-width:640px;margin:0 auto 1.6rem}
.searchbar input{width:100%;max-width:620px;padding:.95rem 1.1rem;border-radius:12px;
  border:2px solid var(--lila-palido);font:inherit;background:#fff;
  box-shadow:0 6px 22px rgba(69,75,142,.10)}
.searchbar input:focus{outline:0;border-color:var(--indigo);background:#fff}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:2.2rem;margin-top:1.8rem}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:1.5rem;color:var(--arandano)}
.stats span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--acero)}
.wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1.2rem 3rem}
.listhead{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:baseline}
.listhead h2{margin:0;font-size:1.2rem}
.fine{color:var(--acero);font-size:.88rem}
.board{width:100%;border-collapse:collapse;margin-top:.8rem;font-size:.95rem;
  display:block;overflow-x:auto}
.board thead th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--acero);border-bottom:1px solid var(--lila-palido);padding:.5rem .6rem;font-weight:600}
.board td{padding:.72rem .6rem;border-bottom:1px solid var(--papel-suave);vertical-align:middle}
.board .num{color:var(--lila);width:2.2rem}
.board .empresa{font-weight:700;min-width:16rem}
.board .empresa a{text-decoration:none}
.board tr.destacada{background:#FFFCF3}
.board tr.destacada .empresa a{color:var(--tinta)}
.board tr.destacada td:first-child{border-left:3px solid var(--acento)}
.tags .tag{display:inline-block;margin:0 .35rem .35rem 0;padding:.15rem .6rem;border-radius:6px;
  background:var(--papel-suave);border:1px solid var(--lila-palido);font-size:.8rem;
  font-weight:600;color:var(--indigo)}
.chip{display:inline-block;margin-left:.5rem;padding:.08rem .5rem;border-radius:99px;
  background:var(--arandano-100,#EEE3F7);color:var(--arandano);font-size:.72rem;font-weight:700}
.lock{color:var(--lila)}
.lockbar{display:inline-block;width:min(46vw,340px);height:.62rem;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--lila-palido) 0 18px,transparent 18px 26px);
  margin-right:.8rem;vertical-align:middle}
.cta{background:var(--papel-suave);border-top:1px solid var(--lila-palido);text-align:center;
  padding:3rem 1.2rem}
.cta h2{margin:0 0 .4rem}
.ficha{max-width:1000px;margin:0 auto;padding:2rem 1.2rem 3rem}
.ficha-top{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;
  border-bottom:1px solid var(--lila-palido);padding-bottom:1.4rem}
.ficha-id{display:flex;gap:1rem;align-items:flex-start}
.ficha-id h1{font-size:1.9rem;margin:0}
/* EL LOGO DE LA EMPRESA. Tres tamanos, una sola forma. El hueco NUNCA queda vacio: cuando no
   tenemos el logo se pinta la inicial en un circulo, porque una lista con filas con imagen y
   filas sin nada se ve rota y ademas esconde cuantas nos faltan. */
.logo-fila{width:52px;height:28px;flex:0 0 52px;object-fit:contain;border-radius:6px;
  background:#fff;border:1px solid var(--lila-palido);padding:2px}
.logo-fila.logo-vacio{width:28px;flex:0 0 28px;border-radius:50%}
.logo.logo-hero{width:72px;height:72px;margin:0 auto .7rem;display:block}
.logo-vacio{display:inline-flex;align-items:center;justify-content:center;
  background:var(--lila-palido);color:var(--tinta-suave);font-weight:700;border:0}
.logo-fila.logo-vacio{font-size:.72rem}
.logo.logo-vacio{font-size:1.4rem}
/* La celda de empresa pasa a dos columnas: el logo a la izquierda y el nombre al lado, para que
   el nombre largo no se meta debajo de la imagen. */
td.empresa{display:flex;align-items:center;gap:.55rem}
.empresa-txt{min-width:0}
.logo{width:112px;height:56px;object-fit:contain;border:1px solid var(--lila-palido);
  border-radius:12px;background:#fff;padding:6px}
.logo.logo-vacio{width:56px}
.chips{margin-top:.5rem}
.ficha-nums{display:flex;flex-wrap:wrap;gap:1.6rem}
.ficha-nums div{display:flex;flex-direction:column}
.ficha-nums b{font-size:1.25rem;color:var(--arandano)}
.ficha-nums span{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--acero)}
.bloque{margin-top:2rem}
.bloque h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--acero);
  margin:0 0 .7rem}
.count{background:var(--papel-suave);border-radius:99px;padding:.05rem .55rem;color:var(--arandano)}
.kv{width:100%;border-collapse:collapse}
.kv th{text-align:left;font-weight:600;color:var(--acero);width:15rem;padding:.5rem .4rem;
  border-bottom:1px solid var(--papel-suave);vertical-align:top}
.kv td{padding:.5rem .4rem;border-bottom:1px solid var(--papel-suave)}
.buyers{columns:3;column-gap:1.6rem;margin:0;padding-left:1.1rem;font-size:.92rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.form input,.form textarea,.modal input{width:100%;padding:.7rem .8rem;border-radius:8px;
  border:2px solid var(--lila-palido);font:inherit;margin-bottom:.6rem;background:#fff}
.form{background:var(--papel-suave);border-radius:14px;padding:1.4rem}
.hp{position:absolute;left:-9999px}
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;
  max-width:900px;margin:0 auto;padding:0 1.2rem 3rem}
.plan{border:1px solid var(--lila-palido);border-radius:16px;padding:1.6rem;position:relative}
.plan.pro{border:2px solid var(--indigo);box-shadow:0 12px 30px rgba(69,75,142,.12)}
.plan h2{margin:.2rem 0 .2rem}
.precio{font-size:2.4rem;font-weight:800;margin:.2rem 0 .4rem;color:var(--tinta)}
.precio small{font-size:1rem;font-weight:600;color:var(--acero)}
.plan ul{list-style:none;padding:0;margin:1rem 0}
.plan li{padding:.35rem 0 .35rem 1.6rem;position:relative}
.plan li:before{content:"✓";position:absolute;left:0;color:var(--indigo);font-weight:800}
.plan li.no{color:var(--lila)}
.plan li.no:before{content:"✕";color:var(--lila)}
/* EL BADGE DE LA TARJETA DE PRECIO VA SCOPEADO A `.plan`, y hay que decir por que. Suelto como
   `.tag` le ganaba en `position` a `.tags .tag` de la ficha (el selector de la ficha nunca declara
   `position`, asi que el absoluto se heredaba igual), y las doce etiquetas de "How they ship" se
   apilaban FUERA de su celda: la fila se veia VACIA con los datos ahi. **No daba ningun error** --
   el HTML trae las doce etiquetas, el gate de texto las contaba y decia PASS. Lo cazo el director
   mirando la pantalla (2026-08-20: "que es eso de how they ship? esta vacio"), y hoy lo caza el
   control `dato_invisible` del gate de maqueta, que mide cajas en un navegador de verdad. */
.plan .tag{position:absolute;top:-.8rem;right:1.2rem;background:var(--acento);color:var(--tinta);
  font-weight:800;font-size:.76rem;padding:.2rem .7rem;border-radius:99px}
.faq details{border-bottom:1px solid var(--papel-suave);padding:.8rem 0}
.faq summary{cursor:pointer;font-weight:700}
/* El pie iba `align-items:center`, asi que las tres columnas arrancaban a distinta altura y el
   texto quedaba desalineado contra el titulo y contra los enlaces. Ahora arrancan todas arriba
   y el bloque de texto tiene su propio ancho maximo. */
.foot{background:var(--tinta);color:#fff;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:1.8rem;align-items:start;
  padding:2.4rem clamp(1rem,4vw,3rem)}
.foot-texto{max-width:56ch}
.foot-texto strong{display:block;margin-bottom:.35rem;font-size:1.05rem}
.foot p{margin:.2rem 0}
.foot a{color:#fff}
.foot .fine{color:var(--lila-palido)}
.foot-mascot{width:104px;align-self:start}
.foot-links{display:flex;flex-direction:column;gap:.5rem;font-weight:600;text-align:right;
  align-self:start}
.modal{position:fixed;inset:0;background:rgba(20,35,77,.55);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:1rem}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:18px;padding:1.8rem;max-width:420px;position:relative}
.modal-x{position:absolute;top:.6rem;right:.8rem;background:0;border:0;font-size:1.6rem;
  cursor:pointer;color:var(--acero)}
@media(max-width:760px){.grid2{grid-template-columns:1fr}.buyers{columns:1}
  .foot{grid-template-columns:1fr;text-align:left}
  .foot-links{text-align:left;align-self:start}}
/* En celular la cabecera no entraba: el boton se salia 56px y eso hacia que TODA la pagina se
   pudiera arrastrar de lado. Se achica el logo y el boton, y el menu puede bajar de linea. */
@media(max-width:520px){
  .top{flex-wrap:wrap;gap:.5rem;padding:.7rem .9rem}
  .top .brand img{height:26px}
  .top nav{gap:.9rem;font-size:.94rem}
  .btn-sm{padding:.4rem .7rem;font-size:.86rem}
}

/* ---- color y mascotas en la portada (director 2026-08-18) ---- */
.hero-color{position:relative;overflow:hidden;
  background:radial-gradient(1100px 420px at 50% -8%,#EEE9FA 0%,#F6F5FB 45%,#fff 78%)}
/* Las mascotas van DETRAS del contenido y pegadas al piso de la portada. La primera version
   las puso encima del buscador y tapaban el texto que se escribe. */
/* La portada ocupa TODO el ancho de la pagina, y es el contenido el que queda en su columna
   de 880px, centrado. Antes la seccion entera media 920px y la mascota, apoyada en ESE borde,
   caia justo encima de la ultima tarjeta de numeros, que va por delante y la tapaba a la mitad
   (medido: la tarjeta cubria 76 de sus 162 px). Correrla mas a la derecha dentro de la caja
   vieja era imposible porque la seccion recorta lo que se sale. */
.hero-color{max-width:none}
.hero-color > *:not(.hero-mascot){position:relative;z-index:1;
  max-width:880px;margin-left:auto;margin-right:auto}
.hero-color{padding-bottom:3.4rem}
/* `bottom:6px` y no 0: la lamina va girada 4 grados, y girada su caja baja 5px del piso de la
   seccion, que recorta. Con 0 se le comia esa esquina. */
.hero-mascot{position:absolute;bottom:6px;width:min(15vw,152px);opacity:.92;pointer-events:none;
  z-index:0}
/* Anclada al CENTRO y no al borde: asi queda siempre al lado de las tarjetas de numeros, a la
   misma distancia en cualquier pantalla (director 2026-08-19: "solo un poco al lado de los
   indicadores"). Pegada al borde de la pagina quedaba a 176px de la ultima tarjeta en 1440px y a
   mas de 400px en 1920px, o sea sola en una esquina. La columna de contenido mide 880px, asi que
   su mitad es 440: con 416 la mascota arranca 24px antes de que termine la columna y a unos 45px
   de la ultima tarjeta. */
.hero-mascot-l{right:calc(50% + 416px);transform:rotate(-4deg)}
.hero-mascot-r{left:calc(50% + 416px);transform:rotate(4deg)}
@media(max-width:1180px){.hero-mascot{display:none}}
.stats div{background:#fff;border:1px solid var(--lila-palido);border-radius:14px;
  padding:.7rem 1.1rem;min-width:8.5rem}
.berries{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:.4rem 1.2rem 1.6rem}
.berry{font-size:.82rem;font-weight:700;padding:.3rem .8rem;border-radius:99px;color:#fff}
.b1{background:var(--indigo)} .b2{background:#D6246E} .b3{background:var(--acento);color:var(--tinta)}
.b4{background:var(--arandano)} .b5{background:var(--arandano-hondo,#542F75)}
.b6{background:#E0578A} .b7{background:var(--tinta)}
.comofunciona{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;
  max-width:1100px;margin:0 auto;padding:1rem 1.2rem 2.4rem}
.paso{background:var(--papel-suave);border-radius:16px;padding:1.3rem;position:relative}
.paso h3{margin:.6rem 0 .3rem;font-size:1.05rem}
.paso p{margin:0;color:var(--acero);font-size:.94rem}
.paso-n{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:99px;
  background:var(--acento);color:var(--tinta);font-weight:800;font-family:"IBM Plex Mono",monospace}
.cta{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--indigo) 0%,var(--arandano) 60%,#7E3F9E 100%);
  color:#fff;border:0}
.cta h2,.cta p{color:#fff}
.cta .btn{background:var(--acento);color:var(--tinta)}
.cta .btn:hover{background:#fff}
.cta-mascot{width:min(30vw,180px)}
.btn-glow{box-shadow:0 8px 26px rgba(245,183,44,.45)}

/* ---- la lista de contactos de la ficha ---- */
.contactos{list-style:none;padding:0;margin:0 0 1rem}
.contactos li{padding:.4rem 0;border-bottom:1px dashed var(--lila-palido);font-size:.94rem}
.contactos li:last-child{border-bottom:0}

/* ---- la ficha de una empresa tapada ---- */
.bloqueado{max-width:640px;margin:0 auto 3rem;text-align:center;background:var(--papel-suave);
  border:1px solid var(--lila-palido);border-radius:18px;padding:2rem}
.bloqueado h2{margin:0 0 1rem;font-size:1.2rem}
.lista-lock{list-style:none;padding:0;margin:0 0 1.4rem;text-align:left;display:inline-block}
.lista-lock li{display:flex;align-items:center;gap:.6rem;color:var(--acero);margin:.45rem 0}
.lista-lock .lockbar{width:64px}
/* ---- el boton de ver mas de la tabla ---- */
.vermas{display:block;margin:1.2rem auto 0}
.board tr[hidden]{display:none}

/* ---- el pop-up, esquina inferior derecha, con color y mascota ---- */
/* Medido sobre trustmrr.com/startup/stan, que es la referencia que dio el director: su tarjeta
   mide 446x305 y va a 32px del borde derecho y 22px del inferior, en una ventana de 1440x900. La
   nuestra media 392 de ancho, y al ser mas angosta se estiraba a 345 de alto y trepaba hasta la
   mitad de la pantalla. */
.pop{position:fixed;right:1.05rem;bottom:1.4rem;z-index:70;width:min(92vw,440px);
  background:#fff;border-radius:20px;padding:1.3rem 1.3rem 1.1rem;
  border:2px solid transparent;
  background-image:linear-gradient(#fff,#fff),
    linear-gradient(120deg,var(--acento),var(--arandano) 45%,#D6246E);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 22px 60px rgba(20,35,77,.28);animation:pop-in .35s ease-out}
.pop[hidden]{display:none}
@keyframes pop-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pop-head{display:flex;align-items:center;gap:.8rem}
.pop-mascot{width:74px;flex:none}
.pop h3{margin:0;font-size:1.28rem;line-height:1.2}
.pop-acc{background:linear-gradient(90deg,var(--arandano),#D6246E);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.pop p{font-size:.94rem;color:var(--acero);margin:.7rem 0 .9rem}
.pop input[type=email]{width:100%;padding:.8rem .9rem;border-radius:10px;
  border:2px solid var(--lila-palido);font:inherit;margin-bottom:.6rem;background:var(--papel-suave)}
.pop input[type=email]:focus{outline:0;border-color:var(--arandano);background:#fff}
.pop .btn{width:100%;background:linear-gradient(90deg,var(--arandano),#D6246E);font-size:1.02rem}
.pop .btn:hover{filter:brightness(1.08)}
.pop-fine{font-size:.78rem;color:var(--lila);margin:.6rem 0 0;text-align:center}
.pop-x{position:absolute;top:.5rem;right:.7rem;background:0;border:0;font-size:1.5rem;
  cursor:pointer;color:var(--lila)}
@media(max-width:520px){.pop{right:.6rem;left:.6rem;bottom:.6rem;width:auto}}