/* =========================================================
   Neto · portada (solo index.html y en/index.html)
   Idea: la carretera y el carrito son la portada, y el número
   que te queda es lo más grande del panel.
   Efectos al estilo Magic UI hechos con CSS y JS, sin React:
   texto que sube, botón con brillo, cinta que corre, cuadrícula
   bento y luz que sigue al mouse.
   Para volver a la portada anterior: quitar este archivo,
   la clase "inicio" del body y el HTML nuevo.
   ========================================================= */

body.inicio {
  --ancho: 1320px;
  --margen: clamp(18px, 3.2vw, 44px);
  --asfalto: #26272b;
  --raya: #e9e9e4;
  --hueco: clamp(4.5rem, 10vw, 9rem);
}
/* Sin herencia: mover la luz con el mouse no recalcula los hijos de la tarjeta */
@property --mx { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
body.inicio main.contenedor { max-width: none; padding: 0; }

/* ---------- Primera pantalla ---------- */
body.inicio .portada {
  display: block;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--margen) 0;
}
body.inicio .portada h1 {
  max-width: none;
  font-size: min(11vw, 8.6rem);
  font-stretch: 75%;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
html[lang="en"] body.inicio .portada h1 { font-size: min(9.4vw, 7.4rem); }
@media (min-width: 860px) {
  body.inicio .portada h1 { font-size: min(7.4vw, 7rem); font-stretch: 85%; }
  html[lang="en"] body.inicio .portada h1 { font-size: min(7.2vw, 6.8rem); }
}

/* El título sube palabra por palabra. Va escrito en el HTML: así no parpadea */
.portada h1 .palabra {
  display: inline-block;
  overflow: clip;
  padding: 0.12em 0.02em 0.14em;
  margin: -0.12em -0.02em -0.14em;
  vertical-align: top;
}
.portada h1 .palabra > span {
  display: inline-block;
  animation: subir-palabra 560ms var(--salida) both;
  animation-delay: calc(var(--n) * 40ms);
}
@keyframes subir-palabra {
  from { transform: translateY(112%); }
}

.portada-cuerpo {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}
body.inicio .portada .entrada {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.4;
  color: var(--tinta);
}
.accion-principal { margin: 1.25rem 0 0; }
/* En el celular el resultado va antes que el botón: se ve sin bajar */
@media (max-width: 859px) {
  .portada-cuerpo { gap: 1rem; }
  .portada-texto { display: contents; }
  .portada-texto .entrada { order: 1; }
  .vivo-zona { order: 2; }
  .accion-principal { order: 3; margin: 0; }
  .atajo { order: 4; margin: -0.35rem 0 0; }
  .perillas { order: 5; }
  body.inicio .portada .boton { width: 100%; }
  body.inicio .pie-diagrama { min-height: 0; }
}
.atajo { margin: 0.9rem 0 0; font-size: 1.05rem; font-weight: 600; }
.atajo a { color: var(--hilo-texto); text-decoration-thickness: 2px; display: inline-block; padding: 0.35rem 0; }
@media (min-width: 860px) {
  .portada-cuerpo { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 6vw, 6rem); row-gap: 1.25rem; align-items: start; }
  .vivo-zona { grid-column: 2; grid-row: 1 / span 2; }
  .perillas { grid-column: 1; grid-row: 2; align-self: end; max-width: 30rem; }
}

/* ---------- Botón con brillo ----------
   Pasa dos veces al abrir y luego solo al acercar el mouse: si no parara, sería ruido */
.accion-principal .boton, .milla .boton { position: relative; overflow: hidden; font-size: 1.1rem; min-height: 58px; }
.accion-principal .boton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: brillo 1.5s 1s var(--salida) 2;
  pointer-events: none;
}
@keyframes brillo { to { transform: translateX(120%); } }
@keyframes brillo-mouse { to { transform: translateX(120%); } }
@media (hover: hover) and (pointer: fine) {
  .accion-principal .boton:hover::after { animation: brillo-mouse 800ms var(--salida); }
}

/* ---------- Panel vivo ---------- */
.vivo-zona { min-width: 0; }
body.inicio .ejemplos { font-family: var(--letra); font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 600; margin-bottom: 0.65rem; }
body.inicio .ejemplos button { min-height: 44px; padding: 0 0.72rem; font: inherit; font-size: 0.94rem; letter-spacing: 0; text-transform: none; }
@media (min-width: 480px) { body.inicio .ejemplos button { padding: 0 1rem; font-size: 1rem; } }

/* Todas las barras a la misma escala y del mismo ancho: el pago llena la fila,
   y lo que queda se ve exactamente del tamaño que es comparado con el pago */
body.inicio .fuerzas { padding: 1rem clamp(1rem, 2vw, 1.6rem) 1.2rem; }
body.inicio .fuerzas.vivo { display: block; }
body.inicio .fuerza,
body.inicio .fuerzas.vivo .fuerza {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: 0.3rem 0 0.4rem;
}
body.inicio .fuerza dt {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--letra);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
body.inicio .fuerza dd:not(.monto) { grid-column: 1 / -1; grid-row: 2; }
body.inicio .fuerza .monto { grid-column: 2; grid-row: 1; font-size: 1.1rem; }
body.inicio .barra,
body.inicio .fuerza.resta .barra { height: 12px; border-radius: 6px; }
body.inicio .fuerzas.vivo .barra {
  transform: none;
  clip-path: inset(0 100% 0 0 round 99px);
  transition: clip-path 600ms var(--salida);
}
/* Con la perilla no hay retraso: la barra va pegada al dedo */
body.inicio .fuerzas.directo .barra { transition: none; }

/* Lo que te queda: lo más grande del panel */
body.inicio .fuerza.neta,
body.inicio .fuerzas.vivo .fuerza.neta {
  border-top: 0;
  margin-top: 0.3rem;
  padding: 0.2rem 0 0;
  row-gap: 0.4rem;
}
body.inicio .fuerza.neta dt { font-size: 1.15rem; line-height: 1.2; }
body.inicio .fuerza.neta dt small { display: block; font-size: 0.95rem; font-weight: 500; color: var(--tinta-2); }
body.inicio .fuerza.neta .monto {
  font-size: clamp(2.9rem, 4.8vw, 4rem);
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: -0.035em;
  line-height: 1;
}
body.inicio .fuerza.neta .barra { height: 20px; border-radius: 10px; }

/* Perillas: prueba con tus propios números */
.perillas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.5rem;
  margin: 0;
}
.perillas[hidden] { display: none; }
.perillas p { grid-column: 1 / -1; margin: 0; font-weight: 700; font-size: 1.05rem; }
.perilla { display: grid; grid-template-columns: 1fr auto; align-items: baseline; font-size: 1rem; }
.perilla span { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Perilla con punto grande, fácil de agarrar con el pulgar */
.perilla input {
  grid-column: 1 / -1;
  width: 100%;
  height: 44px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
  cursor: grab;
}
.perilla input:active { cursor: grabbing; }
.perilla input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--linea-suave); }
.perilla input::-moz-range-track { height: 8px; border-radius: 4px; background: var(--linea-suave); }
.perilla input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: 0;
  border-radius: 50%;
  background: var(--hilo);
  transition: transform 120ms var(--salida);
}
.perilla input::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--hilo); }
.perilla input:active::-webkit-slider-thumb { transform: scale(1.12); }
body.inicio .pie-diagrama { font-size: 1rem; line-height: 1.35; margin: 0 0 0.6rem; min-height: 1.4em; color: var(--tinta); }

/* ---------- La carretera, de orilla a orilla ---------- */
body.inicio .carretera {
  --carro-w: clamp(104px, 14vw, 196px);
  --asfalto-alto: clamp(30px, 3.6vw, 48px);
  height: calc(var(--carro-w) * 0.47 + var(--asfalto-alto) + 14px);
  margin: 0.5rem 0 0;
  border-bottom: 0;
}
body.inicio .carretera::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--asfalto-alto);
  background: var(--asfalto);
}
/* Rayas del camino: pasan hacia atrás mientras el carro avanza */
body.inicio .carretera::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  width: calc(100% + 120px);
  bottom: calc(var(--asfalto-alto) / 2 - 2px);
  height: 4px;
  background: var(--raya);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 56px, transparent 56px 120px);
  mask-image: repeating-linear-gradient(90deg, #000 0 56px, transparent 56px 120px);
  animation: rayas 1.1s linear infinite;
}
@keyframes rayas { to { transform: translateX(-120px); } }
body.inicio .carretera.pausa::before { animation-play-state: paused; }
body.inicio .trayecto { z-index: 2; animation-duration: 13s; }
body.inicio .carro {
  left: calc(-1 * var(--carro-w) - 4px);
  bottom: calc(var(--asfalto-alto) - 3px);
  width: var(--carro-w);
  height: auto;
  aspect-ratio: 36 / 17;
}
/* El mismo salto, a la escala del carro grande */
@keyframes saltar {
  0%   { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  45%  { transform: translateY(-34px) rotate(-6deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  100% { transform: translateY(0) rotate(0); }
}
body.inicio .dinero {
  z-index: 3;
  bottom: calc(var(--asfalto-alto) + var(--carro-w) * 0.34);
  font: 800 clamp(1.5rem, 3vw, 2.4rem)/1 var(--letra);
}

/* ---------- Cinta de las apps ---------- */
.cinta {
  overflow: hidden;
  background: var(--hilo);
  color: var(--sobre-tinta);
  padding: clamp(0.8rem, 1.6vw, 1.4rem) 0;
}
.cinta-pista { display: flex; width: max-content; animation: correr 34s linear infinite; }
.cinta:hover .cinta-pista, .cinta.fuera .cinta-pista { animation-play-state: paused; }
.cinta-grupo {
  display: flex;
  flex: none;
  gap: clamp(2rem, 5vw, 5rem);
  padding-right: clamp(2rem, 5vw, 5rem);
  font-size: clamp(1.9rem, 5.2vw, 4.6rem);
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- La milla: foto de noche ---------- */
.milla {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 86vh, 820px);
  overflow: hidden;
  background: #101114;
  color: #ffffff;
}
.milla picture { position: absolute; inset: 0; }
.milla img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Velo neutro para que el texto se lea sobre la foto */
.milla::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 8, 10, 0.86) 8%, rgba(8, 8, 10, 0.1) 72%);
}
.milla-texto {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2rem var(--margen) clamp(2rem, 5vw, 4rem);
}
.milla h2 {
  font-size: clamp(2.4rem, 7.2vw, 6.6rem);
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 13em;
}
.milla p { margin: 0.9rem 0 1.25rem; max-width: 46ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; }
/* La foto se acerca despacio mientras pasa, solo donde el navegador lo hace sin JS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .milla img {
      animation: acercar linear both;
      animation-timeline: view();
    }
    @keyframes acercar {
      from { transform: scale(1.16); }
      to { transform: scale(1); }
    }
  }
}

/* ---------- Secciones ---------- */
body.inicio .bloque {
  max-width: var(--ancho);
  margin: var(--hueco) auto;
  padding: 0 var(--margen);
}
body.inicio .bloque-cabeza { border-top: 0; padding: 0 0 clamp(1.25rem, 3vw, 2.25rem); align-items: baseline; }
body.inicio .bloque-cabeza h2 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-stretch: 85%;
  letter-spacing: -0.03em;
  line-height: 1;
}
body.inicio .bloque-cabeza .ver-todo {
  font-family: var(--letra);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Aparecen al llegar a ellos (js/portada.js) */
.bloque.listo .bloque-cabeza, .revela.listo > * { opacity: 0; transform: translateY(16px); }
.bloque.visto .bloque-cabeza, .revela.visto > * {
  opacity: 1;
  transform: none;
  transition: opacity 560ms var(--salida), transform 560ms var(--salida);
}
.revela.visto > :nth-child(2) { transition-delay: 80ms; }
.revela.visto > :nth-child(3) { transition-delay: 160ms; }

/* ---------- Herramientas: cuadrícula bento ---------- */
body.inicio .tarjetas { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 860px) {
  body.inicio .tarjetas { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  body.inicio .tarjeta:nth-child(1), body.inicio .tarjeta:nth-child(4) { grid-column: span 7; }
  body.inicio .tarjeta:nth-child(2), body.inicio .tarjeta:nth-child(3) { grid-column: span 5; }
  body.inicio .tarjeta:nth-child(5) { grid-column: span 12; }
}
body.inicio .tarjeta {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--panel);
  min-height: clamp(330px, 34vw, 430px);
}
/* Luz que sigue al mouse (js/portada.js pone --mx y --my) */
body.inicio .tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--hilo) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
body.inicio .tarjeta .vista {
  flex: 1;
  height: auto;
  min-height: 180px;
  padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.25rem) 0;
  background: none;
  border-bottom: 0;
}
body.inicio .tarjeta .texto { position: relative; flex: none; display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 1.1rem clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.2vw, 1.9rem); gap: 0.35rem 1rem; }
body.inicio .tarjeta h3 { grid-column: 1 / -1; grid-row: 1; }
body.inicio .tarjeta .accion { grid-column: 1; grid-row: 2; }
body.inicio .tarjeta .etiqueta { grid-column: 2; grid-row: 2; }
body.inicio .tarjeta .etiqueta {
  padding-top: 0.25rem;
  font-family: var(--letra);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
body.inicio .tarjeta h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 800; font-stretch: 85%; letter-spacing: -0.02em; line-height: 1.05; }
body.inicio .tarjeta .accion { font-size: 1.05rem; padding-top: 0.25rem; margin-top: 0; }
body.inicio .tarjeta .nota { grid-column: 1 / -1; grid-row: 3; font-size: 0.95rem; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  body.inicio .tarjeta:hover::before { opacity: 1; }
}

/* Lector de ofertas: la oferta a tamaño real */
body.inicio .mini-oferta {
  width: min(100%, 320px);
  padding: 1.1rem 1.25rem 1.2rem;
  border: 0;
  border-radius: var(--radio-grande);
  background: var(--fondo);
}
body.inicio .mini-oferta small { font-family: var(--letra); font-size: 1rem; color: var(--tinta-2); }
body.inicio .mini-oferta b { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; font-stretch: 85%; letter-spacing: -0.03em; line-height: 1.05; }
body.inicio .mini-oferta .queda {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radio-medio);
  font: 700 1.1rem/1.1 var(--letra);
}
body.inicio .mini-oferta::after { height: 3px; animation: leer 4.2s 1.2s ease-in-out infinite; }
body.inicio .mini-oferta.fuera::after { animation-play-state: paused; }
/* El resultado de la lectura no se hace esperar */
body.inicio .bloque.visto .mini-oferta .queda { transition-delay: 450ms; }
@keyframes leer {
  0% { opacity: 1; transform: translateY(0); }
  55% { opacity: 1; transform: translateY(190px); }
  62%, 100% { opacity: 0; transform: translateY(190px); }
}

/* Horarios: el mapa de calor llena la tarjeta */
body.inicio .mini-calor { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; }
body.inicio .mini-calor i { height: auto; aspect-ratio: 1.7; border-radius: 6px; }

/* Turnos: barras grandes */
body.inicio .mini-barras { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); width: 100%; height: 170px; }
body.inicio .mini-barras i { border-radius: 8px 8px 0 0; }

/* Gadgets */
body.inicio .mini-iconos { gap: clamp(1.75rem, 5vw, 4rem); }
body.inicio .mini-iconos svg { width: clamp(64px, 8vw, 104px); height: clamp(64px, 8vw, 104px); stroke-width: 1.3; }

/* ---------- Guía: foto fija y datos en letra grande ---------- */
.guia-inicio { display: grid; gap: 1.25rem; }
.guia-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-grande); }
body.inicio .lista-datos { display: block; overflow: visible; margin: 0; padding: 0; }
@media (min-width: 960px) {
  .guia-inicio { grid-template-columns: 5fr 7fr; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .guia-lado { position: sticky; top: 1.5rem; }
  .guia-foto { aspect-ratio: 3 / 2; object-position: 45% 100%; }
}
body.inicio .lista-datos .dato,
body.inicio .lista-datos .dato:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  min-height: 0;
  padding: 1.25rem clamp(0rem, 1.4vw, 1.25rem);
  margin: 0 calc(-1 * clamp(0rem, 1.4vw, 1.25rem));
  background: none;
  color: var(--tinta);
  border-radius: var(--radio-grande);
  transition: background-color 160ms ease, transform 160ms var(--salida);
}
body.inicio .lista-datos .dato-num,
body.inicio .lista-datos .dato:first-child .dato-num {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--hilo-texto);
  font-size: clamp(3rem, 4.8vw, 4.2rem);
  font-stretch: 85%;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
body.inicio .lista-datos .meta,
body.inicio .lista-datos .dato:first-child .meta {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 0.5rem;
  font-family: var(--letra);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-2);
}
body.inicio .lista-datos .meta span:first-child { display: none; }
body.inicio .lista-datos .dato h3 { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: clamp(1.45rem, 2.2vw, 1.8rem); font-weight: 800; font-stretch: 85%; letter-spacing: -0.02em; justify-content: flex-start; gap: 0.6rem; }
body.inicio .lista-datos .dato h3 .icono,
body.inicio .lista-datos .dato:first-child h3 .icono { color: var(--hilo); }
body.inicio .lista-datos .dato-txt,
body.inicio .lista-datos .dato:first-child .dato-txt { grid-column: 1 / -1; grid-row: 3; font-size: 1.05rem; line-height: 1.4; color: var(--tinta-2); max-width: 46ch; }
@media (min-width: 640px) {
  body.inicio .lista-datos .dato,
  body.inicio .lista-datos .dato:first-child { grid-template-columns: 13.5rem minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: start; }
  body.inicio .lista-datos .dato-num,
  body.inicio .lista-datos .dato:first-child .dato-num { grid-row: 1 / span 2; }
  body.inicio .lista-datos .dato h3 { grid-column: 2; grid-row: 1; }
  body.inicio .lista-datos .dato-txt,
  body.inicio .lista-datos .dato:first-child .dato-txt { grid-column: 2; grid-row: 2; }
  body.inicio .lista-datos .meta,
  body.inicio .lista-datos .dato:first-child .meta { grid-column: 3; grid-row: 1; padding-top: 0.3rem; }
}
@media (hover: hover) and (pointer: fine) {
  body.inicio .lista-datos .dato:hover { background: var(--panel); transform: none; }
}

.guia-aviso { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--tinta-2); }

/* ---------- Neto Pro y app ---------- */
body.inicio .pro-caja .boton .icono { color: currentColor; }
body.inicio .pro-caja { padding: clamp(1.4rem, 4vw, 3.25rem) clamp(1.15rem, 4vw, 3.25rem); }
body.inicio .pro-caja h2 { font-size: clamp(2.4rem, 6vw, 5rem); font-stretch: 85%; }
body.inicio .pro-tag { font-family: var(--letra); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 0.25rem 0.6rem; }
body.inicio .pro-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

/* ---------- Cierre: todo el bloque es el botón ---------- */
.cierre {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hilo);
  color: var(--sobre-tinta);
  text-decoration: none;
  padding: clamp(2.5rem, 8vw, 7rem) var(--margen);
  transition: background-color 180ms ease;
}
.cierre span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.3em;
  max-width: var(--ancho);
  font-size: clamp(2.7rem, 9.4vw, 8.6rem);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
}
.cierre .icono { width: 0.8em; height: 0.8em; transition: transform 240ms var(--salida); }
.cierre:active .icono { transform: translateX(0.12em); }
.cierre:focus-visible { outline-offset: -8px; outline-color: var(--sobre-tinta); }
@media (hover: hover) and (pointer: fine) {
  .cierre:hover .icono { transform: translateX(0.18em); }
}

/* ---------- Pie ---------- */
body.inicio .pie { border-top: 0; }
body.inicio .pie p { max-width: none; }
body.inicio .pie p + p { margin-top: 0.4rem; font-size: 0.875rem; }

/* ---------- Sin movimiento: todo quieto y todo a la vista ---------- */
@media (prefers-reduced-motion: reduce) {
  .portada h1 .palabra > span,
  .accion-principal .boton::after,
  body.inicio .carretera::before,
  body.inicio .mini-oferta::after { animation: none; }
  body.inicio .fuerzas.vivo .barra { transition: none; }
  /* El carro estacionado se ve completo */
  body.inicio .trayecto { transform: translateX(calc(12% + var(--carro-w))); }
  .perilla input::-webkit-slider-thumb { transition: none; }
  .cinta-pista { animation: none; width: auto; }
  .cinta-grupo span:nth-child(n + 7) { display: none; }
  .cinta-grupo { flex-wrap: wrap; white-space: normal; padding: 0 var(--margen); gap: 0.2rem 1.5rem; flex: 1; }
  .cinta-grupo + .cinta-grupo { display: none; }
  .bloque.listo .bloque-cabeza, .revela.listo > * { transform: none; }
  .cierre .icono { transition: none; }
}

/* Tarjeta de gasolina: tres precios, el más barato arriba */
body.inicio .mini-gas { display: grid; gap: 0.5rem; width: min(100%, 320px); }
body.inicio .mini-gas span { display: flex; justify-content: space-between; align-items: baseline; padding: 0.55rem 1rem; border-radius: var(--radio-medio); background: var(--fondo); }
body.inicio .mini-gas b { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body.inicio .mini-gas small { font-family: var(--letra); font-size: 1rem; color: var(--tinta-2); }
body.inicio .mini-gas .top b { font-size: clamp(2.1rem, 4vw, 2.8rem); color: var(--hilo-texto); }

/* Ajustes de la revisión (2026-11-07): el azul queda para acciones y restas */
body.inicio .lista-datos .dato-num,
body.inicio .lista-datos .dato:first-child .dato-num { color: var(--tinta); }
body.inicio .mini-oferta .queda { background: var(--tinta); color: var(--sobre-tinta); }
body.inicio .mini-gas .top b { color: var(--tinta); }
/* Precios de la tarjeta de gasolina: se aclara que son un ejemplo */
body.inicio .mini-gas::before {
  content: attr(data-ej);
  font: 600 0.75rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
}