/* Landing pública de Looqit (spec 005).
   Hereda la paleta celeste y la tipografía condensada del producto: una landing que no
   se parece a lo que promete es una promesa rota en el primer clic (§4.4). */

:root{
  --bg:#080D12; --bg2:#0D141B; --panel:#121A22; --panel2:#0F161D; --line:#1E2A35;
  --line2:#2A3946; --ink:#EAF1F7; --muted:#8FA0B0; --faint:#5A6B7A;
  --accent:#38C6F4; --accent2:#7BE0FF; --accent-ink:#04212B; --accent-rgb:56,198,244;
  --good:#34B37A; --warn:#E0A552;
  /* Versión translúcida de --bg2: deja pasar las estrellas del fondo sin perder
     la banda que separa las secciones. */
  --bg2-t:rgba(13,20,27,.74);
  --disp:"Avenir Next Condensed","Helvetica Neue Condensed","Arial Narrow",ui-sans-serif,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.acc{color:var(--accent)}

/* ---------- Barra superior ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(8,13,18,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:22px;
  font-weight:700;letter-spacing:.06em}
.brand .tick{width:15px;height:15px;background:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.7)}
.navlinks{display:flex;gap:28px;font-size:14.5px;color:var(--muted)}
.navlinks a:hover{color:var(--ink)}
.navcta{display:flex;gap:10px;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;padding:11px 20px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:transform .12s,filter .12s,border-color .15s,background .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--accent);color:var(--accent-ink);
  box-shadow:0 6px 26px -6px rgba(var(--accent-rgb),.65)}
.btn-p:hover{filter:brightness(1.09)}
.btn-g{border-color:var(--line2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-g:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.btn-sm{padding:8px 15px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:16px}

/* ---------- Héroe ---------- */
.hero{position:relative;text-align:center;padding:96px 0 72px;overflow:hidden}
.hero::before{  /* resplandor: dos halos desfasados, no un degradado plano */
  content:"";position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1200px;height:760px;pointer-events:none;
  background:
    radial-gradient(ellipse 45% 50% at 50% 55%,rgba(var(--accent-rgb),.24),transparent 70%),
    radial-gradient(ellipse 30% 40% at 32% 45%,rgba(120,90,255,.16),transparent 70%);
  filter:blur(28px);
}
.hero>*{position:relative}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.045);border:1px solid var(--line2);
  border-radius:999px;padding:6px 16px 6px 7px;font-size:13.5px;color:var(--muted);
  margin-bottom:26px;
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--good);
  box-shadow:0 0 10px var(--good);flex-shrink:0;margin-left:6px}

.hero h1{font-size:clamp(42px,7.4vw,80px);margin-bottom:22px}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--accent) 10%,var(--accent2) 55%,#B49CFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .sub{color:var(--muted);font-size:clamp(16px,2.1vw,19px);max-width:610px;
  margin:0 auto 34px}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .fine{color:var(--faint);font-size:13px;margin-top:18px}

/* ---------- Franja de compatibilidad ---------- */
.strip{padding:20px 0 64px;text-align:center}
.strip .lbl{color:var(--faint);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.16em;margin-bottom:22px}
.strip ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;
  justify-content:center;flex-wrap:wrap}
.strip li{
  display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14.5px;
  border:1px solid var(--line);background:var(--panel2);border-radius:9px;padding:9px 16px;
}
.strip li svg{opacity:.8;flex-shrink:0}
.strip li.mas{border-style:dashed;color:var(--faint)}
.strip li.soon{opacity:.5}
.strip li.soon::after{content:"pronto";font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);border:1px solid var(--line2);
  border-radius:4px;padding:1px 5px}

/* ---------- Clientes ---------- */
.clientes{padding:56px 0;text-align:center;border-top:1px solid var(--line)}
.clientes .lbl{color:var(--faint);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.16em;margin:0 0 26px}
.logos{list-style:none;margin:0;padding:0;display:flex;gap:34px;
  justify-content:center;align-items:center;flex-wrap:wrap}
.logos li{display:flex;align-items:center;gap:11px;color:var(--muted);
  font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:.02em;
  /* Los logos reales van en escala de grises y se colorean al pasar el cursor: así una
     fila de marcas dispares no compite con el resto de la página. */
  filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.logos li:hover{filter:none;opacity:1}
.logos li img{max-height:34px;width:auto;display:block}

/* Marca visible de "esto es un relleno". Va con el logo de ejemplo y desaparece sola
   cuando se carga uno real: una sección de clientes con una marca inventada, sin avisar,
   es un respaldo falso. */
.logos li.ejemplo{border:1px dashed var(--line2);border-radius:10px;padding:12px 18px;
  filter:none;opacity:1}
.logos li.ejemplo .marca{font-family:var(--mono);font-size:9.5px;font-weight:400;
  text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  border:1px solid var(--line2);border-radius:4px;padding:2px 6px}
.clientes .aviso{color:var(--faint);font-size:12.5px;margin:20px 0 0}

/* ---------- Secciones ---------- */
.sec{padding:88px 0}
.sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
.tag{
  display:inline-block;font-family:var(--disp);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35);
  background:rgba(var(--accent-rgb),.08);border-radius:999px;padding:5px 15px;margin-bottom:18px;
}
.sec-head h2{font-size:clamp(30px,4.6vw,46px);margin-bottom:14px}
.sec-head p{color:var(--muted);margin:0;font-size:17px}

/* ---------- Demostración ---------- */
.demo{background:var(--bg2-t);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* En columna, no en fila. Con cuatro preguntas de largo dispar, el ajuste automático
   dejaba tres arriba y una huérfana debajo. Apiladas y del mismo ancho se leen como una
   lista de preguntas, que es lo que son. */
.tabs{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:28px}
.tab{
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:10px 20px;font-size:14.5px;cursor:pointer;font-family:inherit;
  transition:.15s;text-align:left;width:100%;max-width:430px;
}
.tab:hover{border-color:var(--line2);color:var(--ink)}
.tab[aria-selected="true"]{
  border-color:var(--accent);color:var(--ink);background:rgba(var(--accent-rgb),.1);
}

.screen{
  border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:var(--panel2);box-shadow:0 30px 90px -40px rgba(0,0,0,.9);
}
.screen .bar{
  display:flex;align-items:center;gap:8px;padding:11px 15px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.screen .bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.screen .bar .url{
  margin-left:10px;font-family:var(--mono);font-size:11.5px;color:var(--faint);
}
.stage{display:grid;grid-template-columns:1.15fr .85fr;min-height:430px}
/* `min-width:0` en los ítems de la rejilla. Sin esto rige `min-width:auto`, que impide
   encogerlos por debajo del ancho mínimo de su contenido: una tabla ancha empujaba la
   columna a 491 px dentro de un contenedor de 340, y `.screen{overflow:hidden}` recortaba
   la diferencia sin ofrecer desplazamiento. Con 0, el contenedor interno hace su trabajo. */
.canvas{padding:24px;border-right:1px solid var(--line);display:flex;
  flex-direction:column;gap:16px;min-width:0}
.chatcol{padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--panel2);
  min-width:0}

.msg{max-width:100%;font-size:14.5px;line-height:1.62}
.msg.u{align-self:flex-end;background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.32);border-radius:12px 12px 3px 12px;
  padding:10px 14px;max-width:88%}
.msg.a{color:var(--muted);border-left:2px solid var(--line2);padding-left:14px}
.msg.a b{color:var(--ink);font-weight:600}
.typing{display:inline-flex;gap:4px;align-items:center;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);
  animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.src{
  margin-top:auto;border:1px solid var(--line);background:rgba(0,0,0,.28);
  border-radius:9px;padding:11px 13px;font-size:12px;color:var(--faint);
}
.src .h{display:flex;align-items:center;gap:7px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;margin-bottom:7px}
.src code{font-family:var(--mono);color:var(--accent);font-size:11.5px;
  display:block;white-space:pre-wrap;word-break:break-word;line-height:1.5}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.kpi .v{font-family:var(--disp);font-size:27px;font-weight:700;letter-spacing:-.01em}
.kpi .l{color:var(--faint);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.07em;margin-top:2px}
.kpi.hi .v{color:var(--accent)}

.chart{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px 17px;flex:1;min-width:0}
.chart h4{margin:0 0 14px;font-family:var(--disp);font-size:15px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}

.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:1fr 62px;gap:12px;align-items:center;
  font-size:13px}
.bar-row .nm{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .tr{grid-column:1/-1;height:7px;background:rgba(255,255,255,.05);
  border-radius:4px;overflow:hidden;margin-top:-4px}
/* `display:block` es obligatorio: .fl es un <span> dentro de .tr, que no es contenedor
   flex ni grid, así que sin esto queda inline y descarta width/height (barras de 0×0). */
.bar-row .fl{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  width:0;transition:width .85s cubic-bezier(.22,1,.36,1)}
.bar-row .vl{text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink)}

.cols{display:flex;align-items:flex-end;gap:6px;height:140px}
.cols .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:6px;height:100%}
.cols .c .b{width:100%;border-radius:4px 4px 0 0;height:0;
  background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.25));
  transition:height .8s cubic-bezier(.22,1,.36,1)}
.cols .c.part .b{background:linear-gradient(180deg,var(--warn),rgba(224,165,82,.2))}
.cols .c .m{font-size:10px;color:var(--faint);font-family:var(--mono)}

.note{font-size:12.5px;color:var(--faint);text-align:center;margin-top:16px}

/* ---------- Pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:24px 22px;
  position:relative;transition:border-color .2s,transform .2s}
.step:hover{border-color:var(--line2);transform:translateY(-2px)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.3);border-radius:6px;padding:2px 8px;
  display:inline-block;margin-bottom:14px}
.step h3{font-size:21px;margin-bottom:9px}
.step p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- Seguridad ---------- */
.sec.safe{background:var(--bg2-t);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Cuatro tarjetas en rejilla de tres dejaban una huérfana en la segunda fila. En 2×2
   quedan equilibradas, y cada una gana ancho para respirar. */
.safes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:840px;margin:0 auto}
.safe-c{border:1px solid var(--line);border-radius:12px;padding:24px 22px;background:var(--panel2)}
.safe-c .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.28);
  margin-bottom:15px}
.safe-c h3{font-size:19px;margin-bottom:8px}
.safe-c p{color:var(--muted);font-size:14.5px;margin:0}
.safe-c b{color:var(--ink);font-weight:600}

/* ---------- Formulario ---------- */
.cta-sec{position:relative;overflow:hidden}
.cta-sec::before{
  content:"";position:absolute;inset:auto 0 -420px 0;height:640px;pointer-events:none;
  background:radial-gradient(ellipse 40% 50% at 50% 50%,rgba(var(--accent-rgb),.15),transparent 70%);
  filter:blur(30px);
}
.cta-sec>*{position:relative}
.form{
  max-width:660px;margin:0 auto;background:var(--panel2);border:1px solid var(--line2);
  border-radius:14px;padding:30px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.f label{font-size:13px;color:var(--muted)}
.f label .req{color:var(--accent)}
.f input,.f select,.f textarea{
  background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  padding:11px 13px;font-size:15px;font-family:inherit;border-radius:8px;width:100%;
}
.f textarea{resize:vertical;min-height:82px}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .btn{width:100%}
.msgbox{border-radius:8px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.msgbox.err{background:rgba(224,82,82,.12);border:1px solid #E05252;color:#F1A2A2}
.done{text-align:center;padding:26px 10px}
.done .big{font-family:var(--disp);font-size:30px;margin-bottom:10px}
.done p{color:var(--muted);margin:0}

/* ---------- Pie ---------- */
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--faint);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* ---------- Aparición al hacer scroll ----------
   Deliberadamente bajo `.js`: sin esa clase el contenido se ve, punto. Si se oculta por
   CSS a secas y el JavaScript falla —un error, un script bloqueado, una extensión—, todo
   lo que está debajo del héroe queda invisible para siempre, formulario incluido. Una
   animación no puede ser un requisito para leer la página. */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.js .rev.in{opacity:1;transform:none}

/* El encabezado es sticky: sin esto, saltar a un ancla deja el título tapado. */
section[id]{scroll-margin-top:82px}

/* ---------- Móvil ---------- */
@media (max-width:900px){
  .stage{grid-template-columns:1fr}
  .canvas{border-right:none;border-bottom:1px solid var(--line)}
  .steps,.safes{grid-template-columns:1fr}
  .navlinks{display:none}
}
@media (max-width:560px){
  .hero{padding:64px 0 48px}
  .sec{padding:62px 0}
  .grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .form{padding:22px}
  .btn-lg{width:100%}
  .hero .actions{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rev{opacity:1;transform:none}
  /* Acelerar la animación las convertiría en un parpadeo, que es peor que el movimiento
     que se quería evitar: se quitan. */
  .estrellas{display:none}
}

/* Con dos pasos en vez de tres, cada tarjeta puede respirar más. */
.steps.dos{grid-template-columns:repeat(2,1fr);max-width:780px;margin:0 auto}
@media (max-width:900px){.steps.dos{grid-template-columns:1fr}}

/* Matriz de calor del ejemplo de compras. */
/* `width:100%` hacía que la tabla se encogiera para caber: las celdas se apretaban, el
   texto se cortaba y el contenedor nunca tenía nada que desplazar. Con `min-width` la
   tabla conserva su ancho natural y el contenedor sí desplaza cuando no entra. */
.hmwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.hm{border-collapse:collapse;font-size:12px;min-width:max-content}
.hm th{color:var(--faint);font-weight:400;font-size:11px;padding:4px 6px;text-align:center}
/* Sin recorte: el nombre del proveedor va entero. Es lo que hace que la tabla pida más
   ancho del que hay en un teléfono y el contenedor pase a desplazarse, que es preferible
   a leer "Importadora de Motores…" sin saber cuál es. */
.hm th.hm-row{text-align:right;color:var(--muted);white-space:nowrap;padding-right:10px}
.hm td{text-align:center;padding:7px 6px;color:var(--ink);border-radius:3px;
  font-family:var(--mono);font-size:11.5px;min-width:34px}

/* ---------- Planes ---------- */
.planes{background:var(--bg2-t);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:840px;margin:0 auto}
.plan{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.plan.destacado{border-color:var(--accent);
  box-shadow:0 20px 60px -30px rgba(var(--accent-rgb),.55)}
.plan-cinta{position:absolute;top:-11px;left:26px;background:var(--accent);
  color:var(--accent-ink);font-family:var(--disp);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:3px 12px}
.plan h3{font-size:26px}
.plan-para{color:var(--muted);font-size:14.5px;margin:0}
.plan-precio{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:4px}
.plan-precio .n{font-family:var(--disp);font-size:38px;font-weight:700;letter-spacing:-.02em}
.plan-precio .u{color:var(--muted);font-size:13.5px}
.plan-total{color:var(--faint);font-size:13px;border-bottom:1px solid var(--line);
  padding-bottom:14px}
.plan-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:14.5px;color:var(--muted);flex:1}
.plan-lista li{display:flex;gap:9px;align-items:flex-start}
.plan-lista li::before{content:"";flex-shrink:0;width:7px;height:7px;margin-top:7px;
  border-radius:2px;background:var(--accent);opacity:.75}
.plan-lista b{color:var(--ink);font-weight:600}
.plan .btn{width:100%;margin-top:4px}
@media (max-width:760px){.plan-grid{grid-template-columns:1fr}}

/* Las tres cualidades del subtítulo, en el celeste de marca. */
.cualidades{color:var(--accent);font-weight:600}

/* Letra chica de los planes: informa sin competir con el precio. */
.letra-chica{font-size:12px;line-height:1.7;max-width:560px;margin-left:auto;margin-right:auto}

/* ---------- Estrellas fugaces ----------
   Capa fija al viewport: acompaña todo el scroll en vez de vivir dentro del héroe.

   z-index:-1 y no 0. Con 0 la capa pintaría por ENCIMA del texto de las secciones —el
   orden de pintado deja los posicionados después del contenido en flujo—, y las estrellas
   cruzarían por delante de los títulos. Con -1 quedan detrás de todo. */
.estrellas{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.estrellas i{
  position:absolute;height:1px;opacity:0;
  /* El extremo brillante va adelante: es la cabeza, y la estela queda detrás. */
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),rgba(var(--accent-rgb),.85));
  animation-name:fugaz;animation-timing-function:linear;animation-iteration-count:infinite;
  /* El recorrido va en variables para poder alargarlo en pantallas chicas: 78vw en un
     teléfono son ~300 px y la estrella apenas alcanzaba a cruzar.
     Sin `will-change`: animar transform y opacity ya se resuelve en el compositor, y
     cuarenta capas promovidas a mano son un problema de memoria en un teléfono. */
  --dx:78vw; --dy:24vw;
}

@keyframes fugaz{
  0%   {opacity:0; transform:translate(0,0) rotate(16deg)}
  1.5% {opacity:.8}
  7%   {opacity:0; transform:translate(var(--dx),var(--dy)) rotate(16deg)}
  100% {opacity:0; transform:translate(var(--dx),var(--dy)) rotate(16deg)}
}

/* En un teléfono la pantalla es angosta: la estrella tiene que cruzarla entera para que se
   note, y la etiqueta de fila del mapa de calor no puede llevarse la mitad del ancho. */
@media (max-width:640px){
  .estrellas i{--dx:125vw; --dy:40vw}
  .hm td{padding:6px 5px;min-width:30px}
}

/* La línea fina pasó a ir sobre los botones. */
.hero .fine.sobre-botones{margin:0 0 18px}