/* ═══════════════════════════════════════════════════════════════════════════
   Capa de marca MomoIA para las landings estáticas.
   Traslada el lenguaje visual de momocheck.es (que es el que los clientes
   reconocen) a HTML plano: sin React, sin framer-motion, sin build.

   UNA SOLA VERDAD: este fichero lo comparten momotpv.es y momofactu.es. El
   workflow de deploy lo sube a las dos carpetas. Si se duplicara en cada
   página, se separarían con el tiempo y dejarían de parecer la misma marca —
   que es justo lo que se quiere evitar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El acento de cada producto ──────────────────────────────────────────
   La capa es compartida, pero el COLOR que domina no: cada landing define
   `--acento` (y `--sobre-acento`, el color del texto que va encima) y esta
   hoja lo respeta. MomoTPV = ambar; MomoFactu = turquesa profundo. Asi los
   dos siguen siendo la misma marca —crema, tinta, sombras duras— sin ser la
   misma pagina pintada dos veces. */

/* ── Sombras duras (el sello del neo-brutalismo) ───────────────────────── */
.sombra-brut-sm { box-shadow: 3px 3px 0 var(--sb, #211f26) }
.sombra-brut    { box-shadow: 5px 5px 0 var(--sb, #211f26) }
.sombra-brut-xl { box-shadow: 10px 10px 0 var(--sb, #211f26) }

/* ── Formas que levitan ────────────────────────────────────────────────── */
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)) }
  50%      { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 6deg)) }
}
.flotar   { animation: flotar 5s ease-in-out infinite }
.flotar-2 { animation: flotar 7s ease-in-out infinite; animation-delay: -2.5s }
.flotar-3 { animation: flotar 6s ease-in-out infinite; animation-delay: -1.2s }

.forma {
  position: absolute; border: 2px solid var(--ink); z-index: 0;
}

/* ── Resalte tipo marcador sobre una palabra ─────────────────────────────
   Geometria copiada de momocheck.es: SIN borde y SIN sombra, padding minimo,
   esquina apenas redondeada y una pizca de rotacion. Con borde y sombra dura
   (como estaba) parece un ladrillo pegado al titular, no un trazo de
   rotulador — y a 3,75 rem en mayusculas se nota mucho. */
.resalte-brut {
  display: inline-block; padding: 0 .18em;
  border-radius: .12em; transform: rotate(-1.2deg);
}

/* ── Máquina de escribir ───────────────────────────────────────────────── */
@keyframes parpadeo-cursor {
  0%, 45% { opacity: 1 } 50%, 95% { opacity: 0 } 100% { opacity: 1 }
}
/* El hueco invisible reserva el ancho de la frase COMPLETA y en UNA linea; la
   salida se pinta encima sin envolver. Sin el nowrap, el texto absoluto se
   parte en dos lineas, se sale de la caja del resalte y pisa el titular. */
.maquina { position: relative; display: inline-block; white-space: nowrap }
.maquina-hueco { visibility: hidden; white-space: nowrap }
.maquina-salida {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; white-space: nowrap; overflow: hidden;
}
.cursor-brut {
  display: inline-block; width: .06em; min-width: 3px;
  background: currentColor; align-self: stretch;
  animation: parpadeo-cursor 1s steps(1) infinite;
}

/* ── Trama de puntos y halo de color (profundidad sin imágenes) ────────── */
.trama {
  position: absolute; z-index: 0; opacity: .18; pointer-events: none;
  background-image: radial-gradient(var(--ink) 1.3px, transparent 1.3px);
  background-size: 13px 13px;
}
.halo {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(33,31,38,.10);
  /* Centrado en su columna. El TAMANO vive aqui y no en el HTML porque en
     movil hay que achicarlo: al apilarse las columnas, un circulo de 420 px
     se sale hacia ARRIBA y se come los botones del hero. */
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 430px; height: 430px;
}
@media (max-width: 899px) { .halo { width: 290px; height: 290px } }
@media (max-width: 400px) { .halo { width: 250px; height: 250px } }

/* ── Aparecer al hacer scroll ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease }
.reveal.visible { opacity: 1; transform: none }

/* ── Marquesina ────────────────────────────────────────────────────────── */
@keyframes marquesina { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquesina { overflow: hidden; border-block: 2px solid var(--ink); background: var(--ink); color: var(--crema) }
.marquesina > div { display: flex; width: max-content; animation: marquesina 26s linear infinite }
.marquesina span {
  padding: .55rem 1.6rem; font-weight: 800; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}

/* ── Maqueta de dispositivo (la app dentro del hero) ───────────────────── */
.maqueta {
  position: relative; z-index: 1;
  background: var(--papel); border: 3px solid var(--ink); border-radius: 1.6rem;
  padding: .55rem; box-shadow: 10px 10px 0 var(--ink);
}
.maqueta .pantalla {
  border: 2px solid var(--ink); border-radius: 1.15rem; overflow: hidden;
  background: var(--carbon); color: var(--crema);
}
.badge-flotante {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--papel); border: 2px solid var(--ink); border-radius: 999px;
  padding: .45rem .8rem; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 4px 4px 0 var(--ink);
}

/* En movil los badges se salen por los lados y amontonan una maqueta que ya
   va justa: se ocultan, como hace momocheck.es. Son adorno, no informacion —
   lo que dicen esta escrito en la pagina. */
@media (max-width: 899px) { .badge-flotante { display: none } }

/* ── El TPV en marcha, dentro de la maqueta ────────────────────────────── */
.tpv-barra {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem; border-bottom: 2px solid rgba(245,241,234,.18);
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: #34d399 }
@keyframes latido { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.latido { animation: latido 1.6s steps(1) infinite }

.tpv-cuerpo { display: grid; grid-template-columns: 1fr .82fr; gap: .5rem; padding: .55rem }
.tpv-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .32rem }
.tile {
  border: 2px solid rgba(0,0,0,.55); border-radius: .5rem;
  padding: .5rem .3rem; font-size: .56rem; font-weight: 800; color: #17181d;
  text-align: center; line-height: 1.15; transition: transform .16s ease, filter .16s ease;
}
.tile.pulsado { transform: scale(.9); filter: brightness(1.35) }

.tpv-ticket {
  background: rgba(245,241,234,.07); border: 2px solid rgba(245,241,234,.16);
  border-radius: .55rem; padding: .45rem; display: flex; flex-direction: column;
}
.tpv-ticket ul { list-style: none; padding: 0; margin: 0; flex: 1; display: grid; gap: .2rem; align-content: start }
.tpv-ticket li {
  display: flex; justify-content: space-between; gap: .3rem;
  font-size: .56rem; font-weight: 600; opacity: 0; transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.tpv-ticket li.puesta { opacity: .92; transform: none }
.tpv-total {
  margin-top: .35rem; padding-top: .35rem; border-top: 2px dashed rgba(245,241,234,.25);
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 800; font-size: .58rem; text-transform: uppercase;
}
.tpv-total b { font-size: 1.05rem; font-family: "Bricolage Grotesque", sans-serif }
.tpv-cobrar {
  margin-top: .4rem; background: var(--acento, #ffd43b); color: var(--sobre-acento, #17181d);
  border: 2px solid rgba(0,0,0,.6); border-radius: .45rem;
  text-align: center; padding: .35rem; font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── La factura, para la landing de MomoFactu ──────────────────────────── */
.doc-linea { height: 6px; border-radius: 3px; background: rgba(33,31,38,.14) }
.doc-qr {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  width: 54px; height: 54px; padding: 3px;
  border: 2px solid var(--ink); border-radius: 5px; background: #fff;
}
.doc-qr i { background: var(--ink); border-radius: 1px }
.doc-qr i.off { background: transparent }

/* ── Accesibilidad: quien pide menos movimiento, no lo tiene ───────────── */
@media (prefers-reduced-motion: reduce) {
  .flotar, .flotar-2, .flotar-3, .latido, .cursor-brut,
  .marquesina > div { animation: none }
  .reveal { opacity: 1; transform: none; transition: none }
  .tile, .tpv-ticket li { transition: none }
}

/* ═══ Stepper interactivo ══════════════════════════════════════════════════
   El patrón que hace que momocheck.es parezca viva: pasos a la izquierda,
   panel a la derecha, y los datos SE DIBUJAN SOLOS (filas en cascada, barras
   que se rellenan, total que cuenta). Auto-avanza hasta que el visitante
   elige un paso a mano — a partir de ahí manda él. */
.pasos { display: grid; gap: 1.5rem }
@media (min-width: 900px) { .pasos { grid-template-columns: .82fr 1.18fr; align-items: start } }

.paso-btn {
  display: flex; gap: .85rem; align-items: flex-start; width: 100%; text-align: left;
  background: var(--papel); border: 2px solid var(--ink); border-radius: 14px;
  padding: .9rem 1rem; margin-bottom: .7rem; cursor: pointer; font: inherit;
  /* EXPLICITO: Safari en iOS pinta el texto de los <button> en su azul de
     sistema si no se le dice el color, y los titulos de los pasos parecian
     enlaces. En escritorio no se ve — solo sale en el movil. */
  color: var(--ink); -webkit-appearance: none; appearance: none;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.paso-btn[aria-selected="true"] { background: var(--acento, #ffd43b); color: var(--sobre-acento, var(--ink));
  box-shadow: 5px 5px 0 var(--ink); transform: translateX(3px) }
.paso-btn[aria-selected="true"] span.d { color: inherit; opacity: .88 }
.paso-btn[aria-selected="true"] .paso-progreso { background: var(--sobre-acento, var(--ink)) }
.paso-btn .n {
  flex: none; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 9px;
  display: grid; place-items: center; font-weight: 800; font-size: .78rem; background: var(--crema);
}
.paso-btn b { display: block; font-size: .97rem; margin-bottom: .12rem }
.paso-btn span.d { font-size: .84rem; color: var(--tenue); line-height: 1.45 }
.paso-btn[aria-selected="true"] span.d { color: var(--ink) }

/* Barrita de tiempo del auto-avance: se ve que va a pasar algo */
.paso-progreso { height: 3px; background: var(--ink); border-radius: 2px; margin-top: .6rem; width: 0 }
.paso-btn[aria-selected="true"] .paso-progreso { animation: paso-corre var(--dur, 5500ms) linear forwards }
@keyframes paso-corre { from { width: 0 } to { width: 100% } }

.paso-panel {
  background: var(--carbon); color: var(--crema); border: 2px solid var(--ink);
  border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); padding: 1.1rem; min-height: 270px;
}
.paso-panel[hidden] { display: none }
.paso-panel h4 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  opacity: .65; margin-bottom: .9rem; font-weight: 800;
}

/* Filas que entran en cascada */
.fila-dibuja {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; margin-bottom: .4rem;
  background: rgba(245,241,234,.07); border: 1px solid rgba(245,241,234,.16); border-radius: 9px;
  font-size: .84rem; opacity: 0; transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s ease;
}
.paso-panel.dibujado .fila-dibuja { opacity: 1; transform: none }
.paso-panel.dibujado .fila-dibuja:nth-child(2) { transition-delay: .1s }
.paso-panel.dibujado .fila-dibuja:nth-child(3) { transition-delay: .2s }
.paso-panel.dibujado .fila-dibuja:nth-child(4) { transition-delay: .3s }
.paso-panel.dibujado .fila-dibuja:nth-child(5) { transition-delay: .4s }
.fila-dibuja .pill {
  margin-left: auto; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: .1rem .5rem;
}

/* ═══ Barras que se rellenan ═══════════════════════════════════════════════ */
.barras { display: grid; gap: .75rem }
.barra-fila { display: grid; gap: .3rem }
.barra-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  font-size: .82rem; font-weight: 700;
}
.barra-cab b { font-family: "Bricolage Grotesque", sans-serif; font-size: .95rem }
.barra-pista {
  height: 26px; border: 2px solid var(--ink); border-radius: 8px;
  background: rgba(33,31,38,.06); overflow: hidden;
}
.paso-panel .barra-pista { border-color: rgba(245,241,234,.35); background: rgba(245,241,234,.08) }
.barra-relleno {
  height: 100%; width: 0; border-right: 2px solid var(--ink);
  transition: width 1.1s cubic-bezier(.22,1,.36,1);
}
.paso-panel .barra-relleno { border-right-color: rgba(245,241,234,.35) }

@media (prefers-reduced-motion: reduce) {
  .paso-btn[aria-selected="true"] .paso-progreso { animation: none; width: 100% }
  .fila-dibuja { opacity: 1; transform: none; transition: none }
  .barra-relleno { transition: none }
  .paso-btn { transition: none }
}

/* ── El comandero: un movil delante de la tablet ───────────────────────────
   Cuenta la historia de verdad del producto — el camarero pide en la mesa
   desde su movil y la comanda cae en la barra. Sin esto, la maqueta era una
   tablet con seis botones y poco mas. */
.maqueta-movil {
  position: absolute; z-index: 4; left: -8%; bottom: -9%;
  width: 132px; transform: rotate(-5deg);
  background: var(--papel); border: 3px solid var(--ink); border-radius: 1.1rem;
  padding: .3rem; box-shadow: 7px 7px 0 var(--ink);
}
.maqueta-movil .pantalla { border-radius: .8rem }
.movil-cab {
  padding: .35rem .45rem; font-size: .5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid rgba(245,241,234,.16); display: flex; gap: .3rem; align-items: center;
}
.movil-lineas { padding: .35rem; display: grid; gap: .22rem }
.movil-lineas li {
  list-style: none; font-size: .47rem; font-weight: 600;
  background: rgba(245,241,234,.09); border-radius: .25rem; padding: .2rem .3rem;
  opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
}
.movil-lineas li.puesta { opacity: .95; transform: none }
.movil-enviar {
  margin: .1rem .35rem .35rem; background: var(--acento, #ffd43b); color: var(--sobre-acento, #17181d);
  border-radius: .28rem; text-align: center; padding: .22rem;
  font-size: .46rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}

/* Al cobrar, el boton confirma: sin esto la animacion terminaba en un ticket
   a 0,00 € y parecia que la pantalla estaba vacia o rota. */
.tpv-cobrar.hecho { background: #34d399 }

@media (max-width: 899px) {
  /* En movil la tablet ya va justa: el telefono encima solo estorbaria. */
  .maqueta-movil { display: none }
}

/* ── La factura emitiendose (hero de MomoFactu) ────────────────────────────
   Mismo criterio que el comandero del TPV: no es adorno, es la historia del
   producto — se emite, queda sellada y la asesoria la recibe. */
.doc-fila { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease }
.doc-fila.puesta { opacity: 1; transform: none }
.doc-qr { opacity: 0; transform: scale(.82); transition: opacity .35s ease, transform .35s ease }
.doc-qr.puesta { opacity: 1; transform: none }
.doc-sello {
  margin-top: .55rem; display: flex; align-items: center; gap: .35rem;
  font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: #0f7a4d; opacity: 0; transition: opacity .4s ease;
}
.doc-sello.puesta { opacity: 1 }

/* La tarjetita de la asesoria, colgando de la esquina: es lo que nos separa
   de cualquier facturador — la gestoria lo recibe sin que tu hagas nada. */
.maqueta-asesoria {
  /* Abajo a la IZQUIERDA: a la derecha choca con el badge «PDF listo» y se
     tapaban el uno al otro. Arriba-izquierda esta la «huella encadenada», asi
     que esta es la unica esquina libre. */
  position: absolute; z-index: 5; left: -13%; bottom: -11%; width: 158px;
  transform: rotate(-4deg) translateY(8px);
  background: var(--papel); border: 3px solid var(--ink); border-radius: .9rem;
  padding: .55rem .6rem; box-shadow: 7px 7px 0 var(--ink);
  opacity: 0; transition: opacity .45s ease, transform .45s ease;
}
.maqueta-asesoria.puesta { opacity: 1; transform: rotate(-4deg) translateY(0) }
.maqueta-asesoria .tit {
  font-size: .5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); margin-bottom: .2rem;
}
.maqueta-asesoria b { font-size: .68rem; display: block; line-height: 1.2 }
.maqueta-asesoria .est {
  margin-top: .3rem; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .5rem; font-weight: 800; text-transform: uppercase; color: #0f7a4d;
}

@media (max-width: 899px) { .maqueta-asesoria { display: none } }
@media (prefers-reduced-motion: reduce) {
  .doc-fila, .doc-qr, .doc-sello, .maqueta-asesoria { opacity: 1; transform: none; transition: none }
}