/* =========================================================================
   QRSystem · La Cachapera — go.lacachapera.es
   Paleta y tipografía según BRANDING-PROMPT.md. Nada fuera de paleta.
   ========================================================================= */

:root {
  --brand:      #fac914;
  --brand-dark: #e2b30b;
  --brand-soft: #fff5cc;
  --ink:        #2c2f31;
  --ink-2:      #3a3e41;
  --muted:      #6b6f74;
  --white:      #ffffff;
  --bg:         #f6f6f7;
  --borde:      #e5e5e7;

  --r:      14px;
  --r-sm:   10px;
  --r-lg:   18px;
  --r-xl:   22px;
  --pill:   999px;

  --sombra:       0 1px 3px rgba(44, 47, 49, .08);
  --sombra-media: 0 8px 24px rgba(44, 47, 49, .12);
  --sombra-brand: 0 6px 18px rgba(250, 201, 20, .35);
}

* { box-sizing: border-box; }

html { background: var(--white); }

html, body { margin: 0; padding: 0; }

/* El fondo NO puede ir en body: body es un descendiente en flujo y su fondo se
   pinta DESPUES de las capas con z-index negativo, asi que taparia .fondo. */
body { background: transparent; }

body.pagina {
  font-family: 'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- fondo ---
   La trama de marca a pantalla completa, y encima una viñeta radial blanca
   que la apaga hacia los bordes para que el contenido respire.             */

.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; }

.fondo__trama {
  position: absolute;
  inset: -8%;
  background: url('../img/fondo-degradado.webp') center / cover no-repeat;
  filter: blur(3px) saturate(.92);
  opacity: .85;
  animation: trama-deriva 38s ease-in-out infinite alternate;
}

.fondo__vineta {
  position: absolute;
  inset: 0;
  /* Al reves que una viñeta clasica: BLANCO en el centro, donde va el contenido,
     y transparente hacia los bordes, que es donde se deja ver la trama. */
  background:
    radial-gradient(86% 58% at 50% 42%,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .88) 34%,
      rgba(255, 255, 255, .62) 62%,
      rgba(255, 255, 255, .22) 84%,
      rgba(255, 255, 255, 0)   100%);
}

@keyframes trama-deriva {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(0, -1.5%, 0); }
}

/* -------------------------------------------------------------- lienzo --- */

.lienzo {
  max-width: 520px;
  margin: 0 auto;
  padding: 26px 18px calc(30px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100svh;
}

/* ------------------------------------------------------------ cabecera --- */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--sombra-media);
  animation: entra-arriba .55s cubic-bezier(.22, 1, .36, 1) both;
}

.cabecera__marca { display: flex; align-items: center; gap: 12px; min-width: 0; }

.cabecera__logo {
  width: 72px;
  height: auto;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.cabecera__rotulo { min-width: 0; }

.cabecera__hola {
  display: block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

.cabecera__local {
  font-family: 'Bebas Neue', 'Cabin', sans-serif;
  font-size: 1.16rem;
  line-height: 1.02;
  letter-spacing: .5px;
  margin: 2px 0 0;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabecera__mesa {
  flex: none;
  text-align: center;
  background: var(--brand);
  color: var(--ink);
  border-radius: var(--r);
  padding: 7px 12px 8px;
  min-width: 68px;
  box-shadow: var(--sombra-brand);
}

.cabecera__mesa-txt {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}

.cabecera__mesa-cod {
  display: block;
  font-family: 'Bebas Neue', 'Cabin', sans-serif;
  font-size: 1.72rem;
  line-height: .96;
  letter-spacing: .5px;
}

/* ------------------------------------------------------------- idiomas --- */

/* la fila que comparten el wifi y el selector de idioma */
.franja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- wifi del local: pastilla pequeña, nunca debe robar protagonismo ---- */

.wifi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: var(--ink);
  border-radius: var(--pill);
  padding: 5px 13px 5px 6px;
  box-shadow: var(--sombra);
  animation: entra-izq .55s .06s cubic-bezier(.22, 1, .36, 1) both;
}

.wifi__icono {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wifi__icono svg { width: 16px; height: 16px; }

.wifi__datos { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }

.wifi__etq {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-right: 4px;
}

.wifi__red {
  font-size: .74rem;
  font-weight: 700;
  color: var(--white);
  max-width: 15ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wifi__clave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  color: var(--brand);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.wifi__clave svg {
  width: 11px; height: 11px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; flex: none;
}
.wifi__clave:hover svg { opacity: 1; }
.wifi__clave.is-copiado   { color: #7fdc9f; }
.wifi__clave.is-selecciona { color: var(--white); }
.wifi__clave.is-copiado svg,
.wifi__clave.is-selecciona svg { opacity: 0; }

.wifi .ic-ondas path { stroke: var(--ink); stroke-width: 11; opacity: 1; }
.wifi .ic-chip { fill: var(--ink); }

.idiomas {
  display: flex;
  gap: 6px;
  margin-left: auto;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--borde);
  border-radius: var(--pill);
  padding: 4px;
  backdrop-filter: blur(6px);
  animation: entra-arriba .55s .08s cubic-bezier(.22, 1, .36, 1) both;
}

.idiomas__op {
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 5px 11px;
  border-radius: var(--pill);
  transition: background .2s, color .2s;
}

.idiomas__op.is-activo { background: var(--ink); color: var(--brand); }

/* -------------------------------------------------------------- avisos --- */

.aviso-mesa {
  margin: 0;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  color: #8a6d00;
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.45;
}

/* ======================================================================
   CANAL — la tarjeta tipo banner
   ====================================================================== */

.canales { display: flex; flex-direction: column; gap: 14px; }

.canal {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-height: 116px;
  padding: 12px;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sombra-media);
  animation: canal-entra .62s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--retardo, .1s);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}

.canal:active { transform: scale(.985); }

@media (hover: hover) {
  .canal:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(44, 47, 49, .22); }
}

/* filete interior, como el del banner de referencia */
.canal__borde {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(250, 201, 20, .32);
  border-radius: calc(var(--r-xl) - 6px);
  pointer-events: none;
}

/* ---- marco del icono ---- */

.canal__marco {
  position: relative;
  flex: none;
  width: 96px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 30% 0%, var(--brand) 0%, var(--brand-dark) 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.canal__marco::after {          /* trama sutil dentro del marco */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(44, 47, 49, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 47, 49, .07) 1px, transparent 1px);
  background-size: 12px 12px;
  pointer-events: none;
}

/* ---- textos ---- */

.canal__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 4px 6px 4px 0;
  min-width: 0;
}

.canal__bajada {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0;
  animation: entra-izq .5s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--retardo, .1s) + .16s);
}

.canal__titulo {
  font-family: 'Bebas Neue', 'Cabin', sans-serif;
  font-size: 1.72rem;
  line-height: 1.02;
  letter-spacing: .5px;
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  column-gap: .28em;
}

/* cada palabra es indivisible: el salto de línea solo cae entre palabras */
.canal__palabra { display: inline-block; white-space: nowrap; }

.canal__letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em) rotate(4deg);
  animation: letra-entra .42s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--retardo, .1s) + .22s + var(--n) * .022s);
}

.canal__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0;
  animation: entra-izq .5s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--retardo, .1s) + .34s);
}

.canal__flecha {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: flecha-late 2.4s ease-in-out infinite;
}

/* ---- brillo diagonal ---- */

.canal__brillo {
  position: absolute;
  top: -60%; bottom: -60%;
  left: -40%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: brillo-pasa 5.5s ease-in-out infinite;
  animation-delay: calc(var(--retardo, .1s) + 1s);
}

/* ---- variante primaria: la única tarjeta amarilla de la pantalla ---- */

.canal--primario {
  background: var(--brand);
  color: var(--ink);
  box-shadow: var(--sombra-brand), var(--sombra-media);
}

.canal--primario .canal__borde  { border-color: rgba(44, 47, 49, .22); }
.canal--primario .canal__titulo { color: var(--ink); }
.canal--primario .canal__bajada,
.canal--primario .canal__cta    { color: var(--ink); opacity: 0; }
.canal--primario .canal__bajada { mix-blend-mode: normal; }

.canal--primario .canal__marco {
  background: radial-gradient(120% 100% at 30% 0%, var(--ink-2) 0%, var(--ink) 100%);
}

.canal--primario .canal__marco::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
}

.canal--primario .canal__brillo {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
}

/* ---- variante cartel: informativo, sin enlace ---- */

.canal--cartel { background: var(--white); color: var(--ink); border: 1px solid var(--borde); }
.canal--cartel .canal__titulo { color: var(--ink); }
.canal--cartel .canal__cta    { display: none; }

/* ======================================================================
   ICONOS SVG
   ====================================================================== */

.ic { width: 100%; height: 100%; display: block; }

.ic-halo {
  fill: rgba(255, 255, 255, .22);
  transform-origin: 60px 60px;
  animation: halo-respira 3.6s ease-in-out infinite;
}

.canal--primario .ic-halo { fill: rgba(250, 201, 20, .14); }

.ic-solido   { fill: var(--ink); }
.ic-pantalla { fill: rgba(255, 255, 255, .92); }
.ic-papel    { fill: var(--white); }
.ic-banda    { fill: rgba(44, 47, 49, .55); }
.ic-chip     { fill: var(--brand); }
.ic-linea    { fill: none; stroke: rgba(44, 47, 49, .35); stroke-width: 2; stroke-dasharray: 5 7; }
.ic-nodo     { fill: var(--ink); }
.ic-puntos circle { fill: var(--brand); }

.canal--primario .ic-solido   { fill: var(--brand); }
.canal--primario .ic-pantalla { fill: rgba(44, 47, 49, .9); }
.canal--primario .ic-papel    { fill: var(--brand-soft); }
.canal--primario .ic-banda    { fill: rgba(250, 201, 20, .45); }
.canal--primario .ic-chip     { fill: var(--white); }
.canal--primario .ic-nodo     { fill: var(--brand); }
.canal--primario .ic-linea    { stroke: rgba(250, 201, 20, .45); }
.canal--primario .ic-puntos circle { fill: var(--ink); }

.ic-flota {
  transform-origin: 60px 60px;
  animation: flota 4.2s ease-in-out infinite;
}

.ic-chispas circle {
  fill: rgba(255, 255, 255, .7);
  animation: chispa 3s ease-in-out infinite;
}
.ic-chispas circle:nth-child(2) { animation-delay: .5s; }
.ic-chispas circle:nth-child(3) { animation-delay: 1.1s; }
.ic-chispas circle:nth-child(4) { animation-delay: 1.7s; }
.canal--primario .ic-chispas circle { fill: rgba(250, 201, 20, .75); }

/* pedir: la tarjeta entra y el tick se dibuja */
.ic-tarjeta {
  fill: var(--brand);
  transform-origin: 60px 60px;
  animation: tarjeta-entra 4.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
.canal--primario .ic-tarjeta { fill: var(--ink); }

.ic-tick {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: tick-dibuja 4.4s ease-in-out infinite;
}
.canal--primario .ic-tick { stroke: var(--brand); }

/* carta: los renglones se escriben uno detrás de otro */
.ic-renglones path {
  fill: none;
  stroke: rgba(44, 47, 49, .45);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: renglon 5s ease-in-out infinite;
}
.canal--primario .ic-renglones path { stroke: rgba(250, 201, 20, .5); }
.ic-renglones path:nth-child(1) { animation-delay: .0s }
.ic-renglones path:nth-child(2) { animation-delay: .18s }
.ic-renglones path:nth-child(3) { animation-delay: .36s }
.ic-renglones path:nth-child(4) { animation-delay: .54s }
.ic-renglones path:nth-child(5) { animation-delay: .12s }
.ic-renglones path:nth-child(6) { animation-delay: .30s }
.ic-renglones path:nth-child(7) { animation-delay: .48s }
.ic-renglones path:nth-child(8) { animation-delay: .66s }

.ic-arepa { fill: var(--brand-soft); stroke: var(--ink); stroke-width: 2.5; }
.canal--primario .ic-arepa { fill: var(--ink); stroke: var(--brand); }

.ic-vapor path {
  fill: none;
  stroke: rgba(44, 47, 49, .4);
  stroke-width: 2.4;
  stroke-linecap: round;
  animation: vapor 2.6s ease-in-out infinite;
}
.canal--primario .ic-vapor path { stroke: rgba(250, 201, 20, .5); }
.ic-vapor path:nth-child(2) { animation-delay: .4s }
.ic-vapor path:nth-child(3) { animation-delay: .8s }

/* club: corazón que late y corazoncitos que suben */
.ic-corazon {
  fill: var(--brand);
  transform-origin: 87px 68px;
  animation: late 1.5s ease-in-out infinite;
}
.canal--primario .ic-corazon { fill: var(--white); }

.ic-corazones path {
  fill: rgba(255, 255, 255, .8);
  animation: sube 3.4s ease-in-out infinite;
}
.canal--primario .ic-corazones path { fill: rgba(250, 201, 20, .8); }
.ic-corazones path:nth-child(2) { animation-delay: 1.1s }
.ic-corazones path:nth-child(3) { animation-delay: 2.1s }

/* eventos: confeti cayendo */
.ic-confeti rect {
  fill: rgba(255, 255, 255, .85);
  animation: cae 3.2s linear infinite;
}
.canal--primario .ic-confeti rect { fill: rgba(44, 47, 49, .7); }
.ic-confeti rect:nth-child(2) { animation-delay: .8s }
.ic-confeti rect:nth-child(3) { animation-delay: 1.5s }
.ic-confeti rect:nth-child(4) { animation-delay: 2.2s }

/* social: la órbita gira, los puntos de la burbuja rebotan */
.ic-orbita { transform-origin: 60px 60px; animation: gira 14s linear infinite; }
.ic-puntos circle { animation: punto 1.4s ease-in-out infinite; }
.ic-puntos circle:nth-child(2) { animation-delay: .18s }
.ic-puntos circle:nth-child(3) { animation-delay: .36s }

.ic-trazo { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.ic-enlace .ic-solido { stroke: var(--ink); stroke-width: 6; }
.canal--primario .ic-enlace .ic-solido,
.canal--primario .ic-trazo { stroke: var(--brand); }

/* ------------------------------------------------------------------ pie --- */

.pie {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  animation: entra-arriba .6s .5s cubic-bezier(.22, 1, .36, 1) both;
}

.pie__lema {
  font-family: 'Bebas Neue', 'Cabin', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: var(--ink);
}

.pie__marca { font-size: .74rem; color: var(--muted); }

/* botoncito del autor */
.pie__autor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--borde);
  border-radius: var(--pill);
  padding: 5px 12px;
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.pie__autor:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-1px); }
.pie__autor svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================ animaciones */

@keyframes entra-arriba {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes entra-izq {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes canal-entra {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes letra-entra {
  to { opacity: 1; transform: none; }
}

@keyframes brillo-pasa {
  0%, 62% { left: -40%; }
  86%     { left: 118%; }
  100%    { left: 118%; }
}

@keyframes flecha-late {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

@keyframes halo-respira {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.07); opacity: 1; }
}

@keyframes flota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3.5px); }
}

@keyframes chispa {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@keyframes tarjeta-entra {
  0%, 8%   { transform: translate(-14px, 10px) rotate(-8deg); opacity: 0; }
  22%, 62% { transform: none; opacity: 1; }
  78%,100% { transform: translate(10px, -6px); opacity: 0; }
}

@keyframes tick-dibuja {
  0%, 60%  { stroke-dashoffset: 34; }
  74%, 92% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 34; }
}

@keyframes renglon {
  0%, 6%   { stroke-dashoffset: 24; }
  26%, 74% { stroke-dashoffset: 0; }
  92%,100% { stroke-dashoffset: 24; }
}

@keyframes vapor {
  0%, 100% { opacity: .25; transform: translateY(2px); }
  50%      { opacity: .95; transform: translateY(-3px); }
}

@keyframes late {
  0%, 100%  { transform: scale(1); }
  14%       { transform: scale(1.22); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.14); }
  56%       { transform: scale(1); }
}

@keyframes sube {
  0%   { opacity: 0; transform: translateY(6px)   scale(.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px) scale(1.15); }
}

@keyframes cae {
  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(52px) rotate(220deg); }
}

@keyframes gira { to { transform: rotate(360deg); } }

@keyframes punto {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

/* Quien pide menos movimiento, recibe menos movimiento: se conserva la
   legibilidad y desaparece todo lo que solo es adorno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .canal__letra, .canal__bajada, .canal__cta { opacity: 1; transform: none; }
  .canal__brillo { display: none; }
}

/* ======================================================================
   ICONOS NUEVOS de la biblioteca del panel
   ====================================================================== */

.ic-ondas path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .25;
  animation: onda 2.2s ease-in-out infinite;
}
.canal--primario .ic-ondas path { stroke: var(--brand); }
.ic-ondas path:nth-child(1) { animation-delay: .5s }
.ic-ondas path:nth-child(2) { animation-delay: .25s }
.ic-ondas path:nth-child(3) { animation-delay: 0s }
.ic-ondas--dcha path { stroke-width: 5; animation-name: onda; }

.ic-estrellas path { fill: var(--ink); animation: estrella 2.6s ease-in-out infinite; }
.canal--primario .ic-estrellas path { fill: var(--brand); }
.ic-estrellas path:nth-child(2) { animation-delay: .2s }
.ic-estrellas path:nth-child(3) { animation-delay: .4s }

.ic-sombra { fill: rgba(44, 47, 49, .2); animation: sombra 2.4s ease-in-out infinite; }
.canal--primario .ic-sombra { fill: rgba(250, 201, 20, .3); }
.ic-rebota { transform-origin: 60px 96px; animation: rebota 2.4s ease-in-out infinite; }

.ic-vibra { transform-origin: 60px 60px; animation: vibra 2.2s ease-in-out infinite; }

.ic-lazo { fill: var(--brand); }
.canal--primario .ic-lazo { fill: var(--white); }

.ic-dia { fill: var(--brand); animation: chispa 2s ease-in-out infinite; }
.canal--primario .ic-dia { fill: var(--white); }

.ic-avanza { animation: flota 3s ease-in-out infinite; }
.ic-delivery .ic-solido { fill: var(--ink); stroke: var(--ink); }
.canal--primario .ic-delivery .ic-solido { fill: var(--brand); stroke: var(--brand); }
.ic-rueda circle { fill: none; stroke: var(--ink); stroke-width: 5; }
.canal--primario .ic-rueda circle { stroke: var(--brand); }
.ic-rueda { transform-origin: 34px 84px; animation: gira 1.6s linear infinite; }
.ic-rueda--2 { transform-origin: 90px 84px; }
.ic-radio { stroke: var(--ink); stroke-width: 3; }
.canal--primario .ic-radio { stroke: var(--brand); }
.ic-estelas path {
  fill: none; stroke: rgba(44, 47, 49, .35); stroke-width: 4; stroke-linecap: round;
  animation: estela 1.4s ease-in-out infinite;
}
.canal--primario .ic-estelas path { stroke: rgba(250, 201, 20, .6); }
.ic-estelas path:nth-child(2) { animation-delay: .35s }

@keyframes onda {
  0%, 100% { opacity: .18; }
  45%      { opacity: 1; }
}
@keyframes estrella {
  0%, 100% { transform: scale(.88); opacity: .45; }
  40%      { transform: scale(1.06); opacity: 1; }
}
@keyframes rebota {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(2px); }
}
@keyframes sombra {
  0%, 100% { transform: scaleX(.8); opacity: .35; }
  50%      { transform: scaleX(1.1); opacity: .7; }
}
@keyframes vibra {
  0%, 82%, 100% { transform: rotate(0deg); }
  86%           { transform: rotate(-9deg); }
  90%           { transform: rotate(8deg); }
  94%           { transform: rotate(-5deg); }
}
@keyframes estela {
  0%, 100% { opacity: 0;   transform: translateX(6px); }
  40%      { opacity: .9;  transform: translateX(-4px); }
}

/* ======================================================================
   PÁGINA DE AVISO (código desconocido / entrada directa)
   ====================================================================== */

.aviso {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
}

.aviso__caja {
  width: min(430px, 100%);
  text-align: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-media);
  padding: 30px 26px 26px;
  backdrop-filter: blur(4px);
  animation: canal-entra .6s cubic-bezier(.22, 1, .36, 1) both;
}

.aviso__logo { width: 168px; height: auto; margin: 0 auto 18px; display: block; }

.aviso__ilustracion {
  width: 150px; height: 150px;
  margin: 0 auto 6px;
  display: block;
}

.aviso__titulo {
  font-family: 'Bebas Neue', 'Cabin', sans-serif;
  font-size: 1.86rem;
  line-height: 1.05;
  letter-spacing: .5px;
  margin: 4px 0 8px;
  color: var(--ink);
}

.aviso__texto { margin: 0 0 18px; color: var(--muted); font-size: .94rem; line-height: 1.55; }

.aviso__accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--pill);
  padding: 12px 22px;
  transition: transform .2s, box-shadow .2s;
}
.aviso__accion:hover { transform: translateY(-2px); box-shadow: var(--sombra-brand); }
.aviso__accion svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- ilustración: móvil apuntando a la placa de la mesa ---- */

.esc-placa   { fill: var(--brand); animation: esc-brilla 3s ease-in-out infinite; }
.esc-modulos { fill: var(--ink); }
.esc-movil   { fill: var(--ink); animation: esc-acerca 3s ease-in-out infinite; }
.esc-pantalla{ fill: var(--white); }
.esc-marco   { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.esc-haz     { fill: none; stroke: var(--brand-dark); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 6; animation: esc-haz 1.6s linear infinite; }

@keyframes esc-acerca {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-4px, 4px) rotate(-3deg); }
}
@keyframes esc-brilla {
  0%, 100% { opacity: .9; }
  50%      { opacity: 1; filter: drop-shadow(0 0 7px rgba(250, 201, 20, .85)); }
}
@keyframes esc-haz { to { stroke-dashoffset: -24; } }
.wifi__clave.is-selecciona { color: var(--white); }
.wifi__clave.is-selecciona svg { opacity: 0; }


/* ==========================================================================
   V2 · horario del local y promo destacada
   ==========================================================================
   Las dos van entre la franja del wifi y los botones. La promo es la única
   pieza amarilla de la pantalla junto a la tarjeta primaria, así que no se
   pinta en amarillo lleno: lleva el fondo suave de marca y el borde amarillo.
   Dos superficies amarillas fuertes compitiendo dejan la pantalla sin jerarquía.
   ========================================================================== */

.horario-local {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 4px;
  font: 500 .92rem/1.35 'Cabin', sans-serif;
  color: var(--ink);
  opacity: .85;
}
.horario-local__icono {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promo {
  display: block;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-left-width: 4px;
  border-radius: var(--r);
  box-shadow: var(--sombra);
}
.promo__titulo {
  display: block;
  font: 400 1.25rem/1.1 'Bebas Neue', sans-serif;
  letter-spacing: .5px;
  color: var(--ink);
}
.promo__texto {
  display: block;
  margin-top: 2px;
  font: 500 .92rem/1.4 'Cabin', sans-serif;
  color: var(--ink);
}

/* Referencia del error: discreta, pero copiable. Sirve para casar lo que ve el
   cliente con la línea del log del servidor. */
.aviso__ref {
  margin: 14px 0 0;
  font: 500 .76rem/1.4 'Cabin', sans-serif;
  color: var(--muted);
  letter-spacing: .5px;
  user-select: all;
}