/* PalmaTracker — landing estática, estilo «Mi palmar» con el logo B (D27).
   Tokens copiados de design/sistema/tokens.css (la landing se despliega sola, sin depender de design/).
   Mobile-first: 320 → 768 → 1024. Sin gradientes, sin assets de terceros. */

:root {
  --color-fondo: #ffffff;
  --color-suave: #f1f6ef;
  --color-linea: #cfdccb;
  --color-tinta: #0a2e23;
  --color-tinta-2: #3c5249;
  --color-fronda: #0e6b47;
  --color-fronda-clara: #7cc58f;
  --color-fruto: #c9400f;
  --color-polen: #f6c21c;
  --color-tierra: #6b3f1d;
  --color-rio: #0d5f94;
  --color-ambar: #8a5200;
  --color-alerta: #a81e1e;

  /* Modo juego La Gran Palma (de apps/mobile/src/tema.ts) */
  --juego-noche: #114a8c;
  --juego-noche-texto: #d6ecff;
  --juego-oro: #ffd84d;

  --fuente-titulo: 'Bricolage Grotesque', 'Titulo respaldo', 'Arial Narrow', sans-serif;
  --fuente-texto: 'Atkinson Hyperlegible Next', 'Texto respaldo', Verdana, sans-serif;

  --radio-control: 14px;
  --radio-tarjeta: 24px;
  --radio-gesto: 36px;
  --toque-min: 72px;

  --dur-rapida: 120ms;
  --dur-media: 280ms;
  --curva-brote: cubic-bezier(0.2, 1.5, 0.4, 1);
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);

  --margen: clamp(1.25rem, 5vw, 3rem);
  --aire: clamp(5rem, 14vw, 9.5rem);
}

/* Respaldo con métricas cercanas para que el cambio de fuente no mueva la página (CLS). */
@font-face { font-family: 'Titulo respaldo'; src: local('Arial'); size-adjust: 96%; ascent-override: 92%; descent-override: 26%; }
@font-face { font-family: 'Texto respaldo'; src: local('Verdana'), local('Arial'); size-adjust: 92%; ascent-override: 98%; descent-override: 26%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-fondo);
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: 1.125rem;
  line-height: 1.5;
}
h1, h2, h3, p, ul, ol, dl, dd, pre { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; width: 100%; height: 100%; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 4px solid var(--color-rio); outline-offset: 3px; }
[hidden] { display: none !important; }

.saltar { position: absolute; left: -999px; top: 0; padding: .75rem 1rem; background: var(--color-tinta); color: #fff; z-index: 10; }
.saltar:focus { left: 1rem; top: 1rem; }

.envoltura { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--margen); }

/* ---------- Cabecera ---------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.marca {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  color: var(--color-tinta); text-decoration: none; letter-spacing: -.01em;
}
.marca__icono { width: 1.75rem; height: 1.75rem; flex: none; }
.cabecera__nav { display: flex; align-items: center; gap: 1.75rem; }
.cabecera__nav a { color: var(--color-tinta-2); font-weight: 700; font-size: 1rem; text-decoration: none; padding: .75rem 0; }
.cabecera__nav a:hover { color: var(--color-tinta); }
.cabecera__nav a:not(.cabecera__enlace) { display: none; }
.cabecera__nav .cabecera__enlace { color: var(--color-fronda); font-size: clamp(.95rem, 4.2vw, 1.125rem); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Tipografía de titulares ---------- */
.titular {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: clamp(3.25rem, 15vw, 7.5rem);
  line-height: .9; letter-spacing: -.035em;
  text-wrap: balance;
}
.titular--medio { font-size: clamp(3rem, 13vw, 6.5rem); }
.titulo-seccion {
  font-family: var(--fuente-titulo); font-weight: 800;
  font-size: clamp(2.1rem, 7.5vw, 4.25rem);
  line-height: .98; letter-spacing: -.025em;
  max-width: 16ch; text-wrap: balance;
}
.entrada { font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.45; color: var(--color-tinta-2); max-width: 34ch; text-wrap: pretty; }
.entrada--seccion { margin-top: 1.5rem; max-width: 40ch; }

/* ---------- Apertura ---------- */
.apertura {
  display: grid; gap: 3rem;
  padding-top: clamp(2rem, 7vw, 5rem); padding-bottom: var(--aire);
}
.apertura__texto { display: grid; gap: 1.5rem; align-content: start; }
.apertura__invitacion { font-size: 1rem; color: var(--color-tinta-2); max-width: 38ch; padding-left: 1rem; border-left: 4px solid var(--color-polen); }

/* ---------- Demo ---------- */
.demo { display: grid; justify-items: center; gap: 1rem; min-width: 0; }
.demo__labores { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.chip {
  min-height: 48px; padding: 0 .95rem; border-radius: 999px; font-size: 1rem;
  border: 2px solid var(--color-linea); background: #fff; font-weight: 700;
  transition: background-color var(--dur-rapida), border-color var(--dur-rapida);
}
.chip[aria-pressed="true"] { background: var(--color-tinta); border-color: var(--color-tinta); color: #fff; }
@media (max-width: 30rem) {
  .demo__labores { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 22rem); }
}

.telefono {
  width: min(100%, 22rem); height: clamp(34rem, 100svh - 7rem, 40rem);
  border: 10px solid var(--color-tinta); border-radius: 44px;
  background: #fff; overflow: hidden; position: relative;
  box-shadow: 0 2px 4px rgba(10,46,35,.08), 0 24px 60px -20px rgba(10,46,35,.35);
}
.pantalla { height: 100%; display: flex; flex-direction: column; padding: 1rem .9rem .9rem; gap: .5rem; }
.estado { display: flex; gap: .35rem; flex-wrap: nowrap; }
.pastilla {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: clamp(.6875rem, 3.4vw, .8125rem); font-weight: 700; line-height: 1;
  padding: .4rem .65rem; border-radius: 999px; background: var(--color-suave);
}
.pastilla--ok { color: var(--color-fronda); }
.pastilla--ok::before { content: ""; width: .7rem; height: .4rem; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.pastilla--envio { color: var(--color-tinta-2); }
.pastilla--envio.hay { color: var(--color-rio); background: #e6f0f7; }
.pastilla--envio::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

.pantalla__labor { text-align: center; font-weight: 700; color: var(--color-tinta-2); margin-top: .25rem; }
.contador { text-align: center; display: grid; justify-items: center; line-height: 1; }
.contador__cifra {
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 4.75rem; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; display: inline-block;
}
.contador__unidad { font-weight: 700; font-size: 1rem; margin-top: .15rem; }

/* Meta diaria D34: barra de progreso compacta bajo el contador */
.meta-progreso { margin: .3rem 0 0; padding: 0 .5rem; }
.meta-progreso__barra { height: 8px; border-radius: 4px; background: var(--color-suave); overflow: hidden; }
.meta-progreso__lleno { height: 100%; width: 0%; background: var(--labor); border-radius: 4px; transition: width .28s cubic-bezier(.16,1,.3,1); }
.meta-progreso__texto { font-size: .8125rem; color: var(--color-tinta-2); text-align: center; margin: .2rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Selector de pase (D19): prominente, encima del botón grande. */
.pases { display: grid; gap: .35rem; }
.pases__botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.pase {
  min-height: 52px; border-radius: var(--radio-control); border: 2.5px solid var(--color-linea); background: #fff;
  font-weight: 700; font-size: .95rem; line-height: 1.1; display: grid; place-content: center; gap: .1rem;
}
.pase small { font-size: .75rem; font-weight: 400; color: var(--color-tinta-2); font-variant-numeric: tabular-nums; }
.pase[aria-pressed="true"] { background: var(--color-ambar); border-color: var(--color-ambar); color: #fff; }
.pase[aria-pressed="true"] small { color: #fff; }
.pases__ayuda { text-align: center; font-size: .8125rem; color: var(--color-tinta-2); }

.palmar {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px 8px;
  flex: 1; align-content: center; min-height: 0; padding: 0 .5rem; overflow: hidden;
}
.palmar__sitio { aspect-ratio: 1; display: grid; place-items: center; min-width: 0; max-height: 2.6rem; justify-self: center; width: 100%; max-width: 2.6rem; }
.palmar__sitio::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-linea); }
.palmar__sitio.crece { display: block; }
.palmar__sitio.crece::before { display: none; }
.palmar__sitio svg { width: 100%; height: 100%; animation: brote var(--dur-media) var(--curva-brote) both; transform-origin: 50% 90%; }
.pantalla--pases .palmar { grid-template-columns: repeat(8, 1fr); gap: 2px 4px; }
.pantalla--pases .palmar__sitio { max-height: 1.9rem; max-width: 1.9rem; }
@keyframes brote { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.tocar {
  min-height: 9.5rem; border: 0; border-radius: var(--radio-gesto); flex: none;
  background: var(--labor); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.75rem;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.18);
  transition: transform var(--dur-rapida) var(--curva-salida);
}
.pantalla--pases .tocar { min-height: 7.5rem; }
.tocar:active { transform: scale(.97); }
.tocar__ilus { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff; padding: .3rem; flex: none; }
.tocar--suave { min-height: var(--toque-min); background: var(--color-fronda); font-size: 1.1rem; margin-top: auto; width: 100%; padding-inline: 1rem; }

.pie { display: grid; grid-template-columns: 1fr 1.4fr; gap: .5rem; flex: none; }
.pie__btn {
  min-height: var(--toque-min); border-radius: var(--radio-control);
  border: 2.5px solid var(--color-tinta); background: #fff; font-weight: 700;
  position: relative; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.pie__btn--terminar { border-color: var(--color-alerta); color: var(--color-alerta); }
.terminar__texto { position: relative; display: grid; line-height: 1.15; }
.terminar__texto small { font-size: .75rem; font-weight: 400; }
.terminar__relleno {
  position: absolute; inset: 0; background: #f8dede;
  transform: scaleX(0); transform-origin: left;
}
.pie__btn--terminar.manteniendo .terminar__relleno { transform: scaleX(1); transition: transform 1s linear; }

.pantalla--resumen { align-items: center; text-align: center; justify-content: center; gap: 1rem; padding: 1.5rem 1.1rem 1.1rem; }
.resumen__ilus { width: 8.5rem; height: 8.5rem; margin-top: auto; }
.resumen__titulo { font-family: var(--fuente-titulo); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.resumen__titulo:focus { outline: none; }
.resumen__detalle { font-weight: 700; }
.resumen__nota { color: var(--color-tinta-2); font-size: 1rem; max-width: 22ch; }

.demo__nota { font-size: .875rem; color: var(--color-tinta-2); }

/* ---------- Bloques ---------- */
.bloque { padding-block: var(--aire); }
.bloque--suave { background: var(--color-suave); }
.bloque--tinta { background: var(--color-tinta); color: #fff; }

/* ---------- Cómo funciona: secuencia real, numerada ---------- */
.pasos {
  list-style: none; padding: 0; margin-top: clamp(2.5rem, 7vw, 4.5rem);
  display: grid; gap: 2.5rem; counter-reset: paso; position: relative;
}
/* El hilo que une los pasos: se dibuja una sola vez al entrar en pantalla. */
.pasos::before {
  content: ""; position: absolute; left: 1.375rem; top: 1.5rem; bottom: 1.5rem; width: 3px;
  background: var(--color-fronda); transform-origin: top;
}
.js .pasos::before { transform: scaleY(0); transition: transform 1.2s var(--curva-salida); }
.js .pasos.visto::before { transform: scaleY(1); }
.paso { counter-increment: paso; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1.25rem; row-gap: .5rem; position: relative; }
.paso::before {
  content: counter(paso); grid-row: span 2;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.25rem;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-polen); color: var(--color-tinta); position: relative;
}
.paso h3 { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.45rem, 3.4vw, 1.75rem); line-height: 1.1; padding-top: .4rem; }
.paso p { color: var(--color-tinta-2); max-width: 34ch; }

/* ---------- Todas las labores: un libro de campo ---------- */
.labores { margin-top: clamp(2.5rem, 7vw, 4.5rem); display: grid; gap: 1rem; }
.labores__grupo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.25rem; color: var(--color-fronda); }
.labores__grupo:not(:first-child) { margin-top: 3rem; }
.libro { list-style: none; padding: 0; border-top: 3px solid var(--color-tinta); }
.libro__fila {
  display: grid; grid-template-columns: 4rem 1fr; column-gap: 1rem; row-gap: .4rem;
  padding-block: 1.25rem; border-bottom: 1.5px solid var(--color-linea); align-items: start;
}
.libro__ilus { width: 4rem; height: 4rem; border-radius: 18px; background: var(--color-suave); padding: .45rem; grid-row: span 2; }
.libro__labor { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.45rem, 3.6vw, 2rem); line-height: 1.05; letter-spacing: -.015em; align-self: center; }
.libro__que { color: var(--color-tinta-2); max-width: 52ch; }
div.libro__que { display: grid; gap: .9rem; }
.libro__que b { color: var(--color-tinta); }

.linea-pases { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; font-size: .9375rem; }
.linea-pases li > span {
  display: inline-grid; place-items: center; min-height: 2.25rem; padding: 0 .8rem; border-radius: 999px;
  background: var(--color-ambar); color: #fff; font-weight: 700;
}
.linea-pases__espera { color: var(--color-tinta-2); display: inline-flex; align-items: center; gap: .5rem; }
.linea-pases__espera::before, .linea-pases__espera::after { content: ""; width: .9rem; height: 2px; background: var(--color-linea); }
.linea-pases__opcional { color: var(--color-tinta-2); }
.linea-pases__opcional > span { background: #fff !important; color: var(--color-ambar) !important; outline: 2px dashed var(--color-ambar); outline-offset: -2px; margin-right: .25rem; }

/* ---------- Cada registro en su palma ---------- */
.modos { display: grid; gap: 4rem; margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.modo { display: grid; gap: 1rem; align-content: start; }
.modo h3 { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.1; }
.modo > p { color: var(--color-tinta-2); max-width: 40ch; }
.modo__nota { font-size: 1rem; }

.ficha, .gps {
  background: #fff; border-radius: var(--radio-tarjeta); padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(10,46,35,.1), 0 8px 22px rgba(10,46,35,.09);
  max-width: 26rem; width: 100%; margin-block: .5rem;
}
.ficha { display: grid; gap: 1rem; }
.ficha__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 700; }
.ficha__etiqueta { font-family: var(--fuente-titulo); font-weight: 800; font-size: 2.25rem; letter-spacing: -.02em; color: var(--color-fronda); font-variant-numeric: tabular-nums; }
.ficha__campos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .5rem; }
.ficha__campo { border: 2px solid var(--color-linea); border-radius: var(--radio-control); padding: .5rem .75rem; display: grid; }
.ficha__campo span { font-size: .8125rem; color: var(--color-tinta-2); }
.ficha__campo b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ficha__siguiente {
  min-height: 56px; border-radius: var(--radio-control); border: 0; background: var(--color-fronda); color: #fff; font-weight: 700;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.2);
}
.ficha__siguiente:hover { background: #0b5a3c; }

.gps { display: grid; gap: .9rem; }
.gps__mapa { height: auto; aspect-ratio: 320 / 200; border-radius: 14px; background: var(--color-suave); }
.gps__palmas circle { fill: var(--color-fronda-clara); }
.gps__precision { fill: rgba(13,95,148,.12); stroke: var(--color-rio); stroke-width: 2; stroke-dasharray: 5 5; }
.js .gps__precision { transform-box: fill-box; transform-origin: center; transform: scale(3.2); transition: transform 1.6s var(--curva-salida) .2s; }
.js .gps.visto .gps__precision { transform: scale(1); }
.gps__elegida { fill: var(--color-fronda); stroke: #fff; stroke-width: 3; }
.js .gps__elegida { opacity: 0; transition: opacity var(--dur-media) 1.5s; }
.js .gps.visto .gps__elegida { opacity: 1; }
.gps__yo { fill: var(--color-rio); stroke: #fff; stroke-width: 3; }
.gps__pastilla { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-weight: 700; font-size: .9375rem; }
.gps__palma { color: var(--color-tinta-2); }

/* ---------- Funciona sin señal ---------- */
.senal { display: grid; gap: 3rem; }
.senal__texto { display: grid; gap: 1.5rem; align-content: start; }
.senal__nota { font-weight: 700; max-width: 34ch; }
.cinta { list-style: none; padding: 0; display: grid; gap: 0; align-content: center; }
.cinta__paso {
  display: grid; gap: .6rem; justify-items: start; padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 3px solid var(--color-linea); position: relative;
}
.cinta__paso::before {
  content: ""; position: absolute; left: -9px; top: 1.55rem; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--color-linea);
}
.cinta__cuando { font-family: var(--fuente-titulo); font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.5rem); line-height: 1.15; }
.cinta .pastilla { font-size: 1rem; padding: .55rem .9rem; }
.cinta__paso:last-child::before { background: var(--color-fronda); border-color: var(--color-fronda); }
/* Secuencia: con JS, los pasos aparecen uno tras otro al entrar en pantalla. */
.js .cinta__paso { opacity: .25; transition: opacity var(--dur-media); }
.js .cinta.visto .cinta__paso { opacity: 1; }
.js .cinta.visto .cinta__paso:nth-child(2) { transition-delay: .9s; }
.js .cinta.visto .cinta__paso:nth-child(3) { transition-delay: 1.8s; }

/* ---------- Modo juego con Pepa ---------- */
.juego { background: var(--juego-noche); color: #fff; }
.juego__titulo { color: var(--juego-oro); max-width: 18ch; }
.juego__entrada { color: var(--juego-noche-texto); margin-top: 1.5rem; max-width: 40ch; }
.pepas { list-style: none; padding: 0; display: grid; gap: 2rem; margin-top: clamp(2.5rem, 7vw, 4rem); }
.pepa { display: grid; grid-template-columns: 7rem 1fr; gap: 1.25rem; align-items: center; }
.pepa img { width: 7rem; height: 7rem; }
.pepa p { color: var(--juego-noche-texto); max-width: 22ch; }
.pepa b { color: #fff; }
.pepa:nth-child(1) img { animation: pepa-trabaja 2.4s ease-in-out infinite; transform-origin: 50% 95%; }
.pepa:nth-child(2) img { animation: pepa-salta 2.4s ease-in-out infinite; }
@keyframes pepa-trabaja { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes pepa-salta { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(-10px); } }
.juego__reglas { margin-top: clamp(3rem, 8vw, 5rem); padding-top: 1.5rem; border-top: 3px solid rgba(214,236,255,.35); display: grid; gap: .75rem; }
.juego__regla { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.05; color: #fff; }
.juego__reglas p:not(.juego__regla) { color: var(--juego-noche-texto); max-width: 46ch; }

/* ---------- Panel del palmero (mockup en HTML) ---------- */
.ventana {
  margin-top: clamp(2.5rem, 7vw, 4rem); border: 2px solid var(--color-tinta); border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 4px rgba(10,46,35,.08), 0 24px 60px -24px rgba(10,46,35,.35);
}
.ventana__barra { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem .6rem 1rem; background: var(--color-tinta); color: #fff; }
.ventana__puntos { display: none; gap: .35rem; }
.ventana__puntos i { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(255,255,255,.35); }
.ventana__finca { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ventana__csv {
  min-height: 44px; padding: 0 1rem; border-radius: 10px; border: 2px solid #fff; background: transparent; color: #fff; font-weight: 700; font-size: .9375rem; flex: none;
}
.ventana__csv:hover { background: #fff; color: var(--color-tinta); }
.ventana__cuerpo { display: grid; min-width: 0; }
.ventana__nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: .75rem; border-bottom: 2px solid var(--color-suave); background: #fbfdfa; }
.ventana__nav button {
  min-height: 44px; padding: 0 .9rem; border-radius: 10px; border: 0; background: transparent; font-weight: 700; font-size: .9375rem; text-align: left;
  display: inline-flex; align-items: center; gap: .5rem; color: var(--color-tinta-2);
}
.ventana__nav button[aria-selected="true"] { background: var(--color-suave); color: var(--color-tinta); box-shadow: inset 3px 0 0 var(--color-fronda); }
.insignia { min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--color-ambar); color: #fff; font-size: .8125rem; display: inline-grid; place-items: center; }
.insignia:empty { display: none; }
.vista, .csv { padding: clamp(1.25rem, 4vw, 2rem); display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.vista:focus-visible { outline-offset: -4px; }
.vista__frase { font-family: var(--fuente-titulo); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 1.75rem); line-height: 1.15; max-width: 24ch; }
.vista__aviso { font-size: .9375rem; color: var(--color-tinta-2); border-top: 2px solid var(--color-suave); padding-top: 1rem; max-width: 60ch; }

.mapa { height: auto; aspect-ratio: 320 / 190; max-width: 36rem; }
.lote { stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.lote--hecho { fill: var(--color-fronda); }
.lote--medio { fill: var(--color-fronda-clara); }
.lote--revisar { fill: #f3e2c2; stroke: var(--color-ambar); stroke-dasharray: 8 6; }
.lote--nada { fill: var(--color-suave); stroke: var(--color-linea); }
.mapa text { font-family: var(--fuente-titulo); font-weight: 800; font-size: 22px; fill: var(--color-tinta); text-anchor: middle; }
.mapa text.claro { fill: #fff; }
.leyenda { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9375rem; }
.leyenda li { display: inline-flex; align-items: center; gap: .45rem; }
.muestra { width: 1rem; height: 1rem; border-radius: 4px; }
.muestra--hecho { background: var(--color-fronda); }
.muestra--medio { background: var(--color-fronda-clara); }
.muestra--revisar { background: #f3e2c2; outline: 2px dashed var(--color-ambar); outline-offset: -2px; }
.muestra--nada { background: var(--color-suave); outline: 2px solid var(--color-linea); outline-offset: -2px; }

.semaforo { list-style: none; padding: 0; display: grid; }
.semaforo__fila {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .85rem 0; border-bottom: 1.5px solid var(--color-suave); align-items: center;
}
.semaforo__fila span:nth-child(2) { color: var(--color-tinta-2); grid-row: 2; }
.semaforo__estado { grid-row: span 2; grid-column: 2; font-weight: 700; font-size: .9375rem; padding: .35rem .7rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; }
.semaforo__estado::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.semaforo__fila--vencido .semaforo__estado { color: var(--color-alerta); background: #fbe9e9; }
.semaforo__fila--hoy .semaforo__estado { color: var(--color-ambar); background: #fbf0dc; }
.semaforo__fila--pronto .semaforo__estado { color: var(--color-rio); background: #e6f0f7; }
.semaforo__fila--aldia .semaforo__estado { color: var(--color-fronda); background: var(--color-suave); }

.invitar { display: grid; gap: 1.25rem; align-items: center; }
.invitar__texto { display: grid; gap: .75rem; }
.invitar__texto p:not(.vista__frase) { color: var(--color-tinta-2); max-width: 36ch; }
.invitar__codigo {
  font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: .04em;
  color: var(--color-tinta) !important; font-variant-numeric: tabular-nums;
}
.invitar__qr { width: 9rem; height: 9rem; padding: .5rem; background: #fff; border: 2px solid var(--color-linea); border-radius: 14px; }
.invitar__qr rect { fill: var(--color-tinta); }
.equipo { list-style: none; padding: 0; display: grid; }
.equipo li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 0; border-bottom: 1.5px solid var(--color-suave); }
.equipo span { color: var(--color-tinta-2); }

.revisar { list-style: none; padding: 0; display: grid; gap: .75rem; }
.revisar__fila {
  display: grid; gap: .75rem; padding: 1rem; border-radius: 16px; border: 2px dashed var(--color-ambar); background: #fdf7ec;
  transition: opacity var(--dur-media), transform var(--dur-media) var(--curva-salida);
}
.revisar__fila p { display: grid; }
.revisar__fila span { color: var(--color-tinta-2); font-size: 1rem; }
.revisar__fila.asignada { border-style: solid; border-color: var(--color-fronda); background: var(--color-suave); }
.revisar__asignar {
  justify-self: start; min-height: 48px; padding: 0 1rem; border-radius: 10px; border: 0; background: var(--color-fronda); color: #fff; font-weight: 700;
}
.revisar__asignar:disabled { background: transparent; color: var(--color-fronda); padding: 0; cursor: default; }

.csv__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 1.75rem); }
.csv__titulo:focus { outline: none; }
.csv__muestra {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.7;
  background: var(--color-suave); border-radius: 12px; padding: 1rem; overflow-x: auto; max-width: 100%;
}
.nota-ficticia { margin-top: 1.25rem; font-size: .875rem; color: var(--color-tinta-2); }

/* ---------- Privacidad y Ley 1581 ---------- */
.entrada--tinta { color: #dbe8df; margin-top: 1.5rem; max-width: 40ch; }
.respeto { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.respeto dt { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 2.25rem); color: var(--color-polen); line-height: 1.1; }
.respeto dd { margin-top: .6rem; color: #dbe8df; max-width: 36ch; }
.responsable { margin-top: clamp(3rem, 8vw, 4.5rem); padding-top: 1.25rem; border-top: 2px solid rgba(255,255,255,.2); color: #dbe8df; font-size: 1rem; }

/* ---------- Qué no es ---------- */
.no-es { display: grid; gap: 2.5rem; }
.no-es__cuerpo { display: grid; gap: 2rem; }
.no-es__lista { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700; }
.no-es__lista li { display: flex; gap: .75rem; align-items: baseline; }
.no-es__lista li::before { content: ""; flex: none; width: .9rem; height: 3px; background: var(--color-fruto); transform: translateY(-.3em); }
.no-es__si { color: var(--color-tinta-2); max-width: 44ch; }

/* ---------- Contacto ---------- */
.contacto .envoltura { display: grid; gap: 1.5rem; justify-items: start; }
.contacto__simbolo { width: 4rem; height: 4rem; }
.boton {
  display: inline-flex; align-items: center; min-height: var(--toque-min); padding: 0 2rem;
  border-radius: var(--radio-control); background: var(--color-fronda); color: #fff;
  font-weight: 700; font-size: clamp(1.1rem, 3.5vw, 1.3rem); text-decoration: none;
  margin-top: 1rem; overflow-wrap: anywhere;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.2);
}
.boton:hover { background: #0b5a3c; }
.contacto__correo { color: var(--color-tinta-2); font-size: 1rem; }

.pie-pagina { padding-block: 2.5rem 3rem; font-size: .9375rem; color: var(--color-tinta-2); display: grid; gap: .4rem; }

/* ---------- 768 px ---------- */
@media (min-width: 48rem) {
  .cabecera__nav a:not(.cabecera__enlace) { display: inline; }
  .pasos { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .pasos::before { left: 1.375rem; right: 1.375rem; top: 1.36rem; bottom: auto; width: auto; height: 3px; transform-origin: left; }
  .js .pasos::before { transform: scaleX(0); }
  .js .pasos.visto::before { transform: scaleX(1); }
  .paso { grid-template-columns: 1fr; row-gap: 1rem; }
  .paso::before { grid-row: auto; }
  .paso h3 { padding-top: 0; }
  .libro__fila { grid-template-columns: 4.5rem 14rem 1fr; column-gap: 1.5rem; align-items: center; }
  .libro__ilus { width: 4.5rem; height: 4.5rem; grid-row: auto; }
  .libro__fila--pases { align-items: start; }
  .libro__fila--pases .libro__labor { align-self: start; padding-top: 1rem; }
  .modos { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .senal { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; }
  .pepas { grid-template-columns: repeat(3, 1fr); }
  .pepa { grid-template-columns: 1fr; justify-items: start; }
  .pepa img { width: 9rem; height: 9rem; }
  .ventana__puntos { display: inline-flex; }
  .ventana__cuerpo { grid-template-columns: 13rem 1fr; min-height: 30rem; }
  .ventana__nav { flex-direction: column; flex-wrap: nowrap; border-bottom: 0; border-right: 2px solid var(--color-suave); padding: 1rem .75rem; }
  .ventana__nav button { justify-content: space-between; }
  .invitar { grid-template-columns: 1fr auto; }
  .revisar__fila { grid-template-columns: 1fr auto; align-items: center; }
  .respeto { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
  .no-es__cuerpo { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}

/* ---------- 1024 px ---------- */
@media (min-width: 64rem) {
  .apertura { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 4rem; padding-top: 4rem; }
  .respeto { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
  .no-es { grid-template-columns: .9fr 1.1fr; align-items: start; gap: 4rem; }
  .no-es__cuerpo { grid-template-columns: 1fr; gap: 2rem; }
}

@media (hover: hover) {
  .chip:hover, .pase:hover { border-color: var(--color-tinta); }
  .ventana__nav button:hover { color: var(--color-tinta); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .pie__btn--terminar.manteniendo .terminar__relleno { transition-duration: 1s !important; }
  .js .pasos::before { transform: none; }
  .js .gps__precision { transform: none; }
  .js .gps__elegida, .js .cinta__paso { opacity: 1; }
}

/* Pie de página: enlaces legales arriba, línea fina, texto de la empresa abajo.
   Móvil (≤ 767 px): rejilla de 2 columnas → 4 enlaces en 2 filas parejas, también a 320 px.
   Desde 768 px: una sola fila. Los enlaces se ven como enlaces (color fronda + subrayado suave). */
.pie-pagina__legal {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem;
  padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-linea);
}
.pie-pagina__legal a {
  color: var(--color-fronda); font-weight: 700; font-size: .9375rem; line-height: 1.3;
  min-height: 44px; display: inline-flex; align-items: center; justify-self: start;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: rgb(14 107 71 / .35);
  transition: text-decoration-color var(--dur-rapida) ease;
}
.pie-pagina__legal a:hover { text-decoration-color: currentColor; }
.pie-pagina__legal a:focus-visible { outline: 3px solid var(--color-fronda); outline-offset: 2px; border-radius: 4px; text-decoration-color: currentColor; }
.pie-pagina p { margin: 0; }
.pie-pagina p + p { font-size: .875rem; }
@media (min-width: 48rem) {
  .pie-pagina__legal { display: flex; flex-wrap: wrap; gap: 0 2rem; }
}

/* =====================================================================
   D56 · Movimiento tipo Flutter (2026-11-09)
   Resortes amortiguados como en Flutter (SpringDescription): curvas
   generadas desde x(t) = 1 − e^(−ζωt)(cos ωd·t + ζω/ωd · sin ωd·t)
   y escritas con linear(). Respaldo: cubic-bezier con sobrepaso.
   Todo vive dentro de prefers-reduced-motion: no-preference; con
   «reducir», la página queda quieta y en su estado final.
   .pt-vivo lo pone landing.js: si el JS falla, nada queda oculto.
   ===================================================================== */
:root {
  /* ζ 0,68 · ω 16 → 620 ms, sobrepaso 5 % (entradas) */
  --resorte-suave: cubic-bezier(.34, 1.36, .64, 1);
  --dur-suave: 620ms;
  /* ζ 0,48 · ω 18 → 700 ms, sobrepaso 18 % (Pepa, hover) */
  --resorte-rebote: cubic-bezier(.175, .885, .32, 1.275);
  --dur-rebote: 700ms;
  /* ζ 0,8 · ω 22 → 380 ms, sobrepaso 1,5 % (forma de la barra, pestañas) */
  --resorte-firme: cubic-bezier(.22, 1.12, .36, 1);
  --dur-firme: 380ms;
  --escalon: 80ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --resorte-suave: linear(0, 0.053, 0.179, 0.337, 0.501, 0.65, 0.778, 0.878, 0.952, 1.002, 1.033, 1.049, 1.054, 1.052, 1.045, 1.037, 1.028, 1.02, 1.013, 1.007, 1.003, 1, 0.998, 0.997, 0.997, 0.997, 0.997, 0.998, 1);
    --resorte-rebote: linear(0, 0.087, 0.293, 0.541, 0.777, 0.966, 1.094, 1.162, 1.179, 1.161, 1.124, 1.079, 1.037, 1.004, 0.982, 0.971, 0.968, 0.971, 0.978, 0.986, 0.994, 1, 1.003, 1.005, 1.006, 1.005, 1.004, 1.002, 1);
    --resorte-firme: linear(0, 0.039, 0.131, 0.251, 0.378, 0.502, 0.613, 0.71, 0.79, 0.855, 0.905, 0.943, 0.971, 0.99, 1.002, 1.01, 1.014, 1.015, 1.015, 1.014, 1.012, 1.01, 1.008, 1.006, 1.005, 1.004, 1.003, 1.002, 1);
  }
}

/* ---------- 5 · Cabecera fija que se vuelve píldora al bajar ----------
   La altura en el flujo no cambia (sin CLS): lo que se encoge es la forma
   de fondo, de franja invisible a píldora blanca, y la marca. */
html { scroll-padding-top: 5rem; }
.pt-vivo .cabecera { position: sticky; top: 0; z-index: 5; }
.pt-vivo .cabecera::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0; border-radius: 0;
  background: var(--color-fondo); opacity: 0; box-shadow: none;
}
.pt-vivo .cabecera { isolation: isolate; }
.pt-vivo .cabecera.compacta::before {
  inset: .55rem calc(var(--margen) - .9rem);
  border-radius: 999px; opacity: 1;
  box-shadow: 0 1px 2px rgba(10,46,35,.1), 0 10px 28px -10px rgba(10,46,35,.3);
}
.pt-vivo .cabecera.compacta .marca { scale: .9; }
.marca { transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1 · Apertura: título, texto y demo suben con resorte ----------
     Animación CSS pura desde el primer pintado: sin FOUC y sin esperar al JS.
     El texto NO parte de opacidad 0: Chrome no cuenta como pintado (FCP/LCP)
     lo que está invisible, y con 0 el LCP móvil subía de 1,7 s a 3,5 s en
     Lighthouse. Se ve desde el primer cuadro y sube con el resorte. */
  @keyframes surgir { from { opacity: .4; translate: 0 2.25rem; } }
  @keyframes asomar { from { opacity: 0; translate: 0 1.5rem; scale: .96; } }
  .apertura__texto > * { animation: surgir var(--dur-suave) var(--resorte-suave) both; }
  .apertura__texto > :nth-child(2) { animation-delay: 70ms; }
  .apertura__texto > :nth-child(3) { animation-delay: 140ms; }
  .demo { animation: asomar var(--dur-rebote) var(--resorte-suave) 180ms both; }

  /* ---------- 3 · Tarjetas y filas: escalonadas de a 80 ms ---------- */
  .pt-vivo [data-escalonar] > * {
    opacity: 0; translate: 0 1.75rem;
    transition: opacity 360ms ease-out, translate var(--dur-suave) var(--resorte-suave);
    transition-delay: calc(var(--i, 0) * var(--escalon));
  }
  .pt-vivo [data-escalonar].visto > * { opacity: 1; translate: 0 0; }

  /* ---------- 4 · Botón principal: escala con resorte ---------- */
  .boton, .ficha__siguiente, .revisar__asignar, .ventana__csv, .chip, .pase {
    transition: scale var(--dur-rebote) var(--resorte-rebote), background-color var(--dur-rapida), border-color var(--dur-rapida), color var(--dur-rapida);
  }
  .boton:hover, .boton:focus-visible { scale: 1.04; }
  .ficha__siguiente:hover, .revisar__asignar:not(:disabled):hover, .ventana__csv:hover { scale: 1.03; }
  .boton:active, .ficha__siguiente:active, .revisar__asignar:active, .ventana__csv:active, .chip:active, .pase:active {
    scale: .96; transition-duration: var(--dur-rapida);
  }
  .cabecera__enlace { display: inline-block; transition: scale var(--dur-rebote) var(--resorte-rebote); }
  .cabecera__enlace:hover { scale: 1.06; }
  /* El botón grande de la demo: hunde rápido y rebota al soltar. */
  .tocar { transition: transform var(--dur-rebote) var(--resorte-rebote); }
  .tocar:active { transition-duration: 90ms; }

  /* ---------- 5 · Cabecera: transición de forma ---------- */
  .pt-vivo .cabecera::before {
    transition: inset var(--dur-firme) var(--resorte-firme), border-radius var(--dur-firme) var(--resorte-firme),
                opacity 200ms ease-out, box-shadow var(--dur-firme) ease-out;
  }
  .pt-vivo .marca { transition: scale var(--dur-firme) var(--resorte-firme); }

  /* ---------- 6 · Meta diaria (barra D34): llena con resorte ---------- */
  .meta-progreso__lleno { transition: width var(--dur-suave) var(--resorte-suave); }

  /* ---------- Material: fade-through al cambiar de pantalla ---------- */
  @keyframes atravesar { from { opacity: 0; scale: .97; } }
  .pt-vivo .pantalla:not([hidden]), .pt-vivo .vista:not([hidden]), .pt-vivo .csv:not([hidden]) {
    animation: atravesar 420ms var(--resorte-suave) both;
  }
  .pt-vivo .revisar__fila.asignada { animation: asentar var(--dur-rebote) var(--resorte-rebote); }
  @keyframes asentar { 0% { scale: .97; } 100% { scale: 1; } }

  /* ---------- Héroe FLIP: la marca de pestaña vuela entre pestañas ---------- */
  .ventana__indicador {
    position: absolute; left: 0; top: 0; border-radius: 10px; pointer-events: none;
    background: var(--color-suave); box-shadow: inset 3px 0 0 var(--color-fronda);
    transition: opacity 200ms;
  }
  .ventana__nav.con-indicador { position: relative; }
  .ventana__nav.con-indicador button { position: relative; z-index: 1; }
  .ventana__nav.con-indicador button[aria-selected="true"] { background: transparent; box-shadow: none; }

  /* ---------- 2 · Pepa reacciona al scroll de su sección ----------
     0 % trabaja · 50 % celebra · 100 % descansa. La Pepa activa crece con
     resorte; las otras se quedan quietas y atenuadas. Pepa no sale de su
     sección (regla de marca del README). */
  .pt-vivo .pepas { --pepa-escala: .86; }
  .pt-vivo .pepa img {
    scale: var(--pepa-escala); opacity: .5; filter: saturate(.55);
    transition: scale var(--dur-rebote) var(--resorte-rebote), opacity 300ms ease-out, filter 300ms ease-out;
    animation: none; transform-origin: 50% 90%;
  }
  .pt-vivo .pepa p { opacity: .55; transition: opacity 300ms ease-out; }
  .pt-vivo .pepa.activa img { scale: 1.08; opacity: 1; filter: none; }
  .pt-vivo .pepa.activa p { opacity: 1; }
  .pt-vivo .pepa.activa:nth-child(1) img { animation: pepa-trabaja 1.6s ease-in-out infinite; }
  .pt-vivo .pepa.activa:nth-child(2) img { animation: pepa-celebra var(--dur-rebote) var(--resorte-rebote) both, pepa-salta 2.4s ease-in-out .8s infinite; }
  .pt-vivo .pepa.activa:nth-child(3) img { animation: pepa-respira 3.2s ease-in-out infinite; }
  @keyframes pepa-celebra { from { transform: translateY(18px) rotate(-6deg); } }
  @keyframes pepa-respira { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.965) translateY(2px); } }
}