/* Café Ocote · estilos por pantalla */

/* Dentro de "Probar en un solo celular" */
.embebido .banda, .embebido .pie, .embebido .barra .pestanas { display: none; }
.embebido .barra { padding-top: 10px; }

.marca-sello svg { width: 30px; height: 30px; color: var(--brasa); }

/* Losa de barro bruñido */
.tabla-barro {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(160deg, #2b211b 0%, #1a1310 55%, #211914 100%);
  box-shadow: inset 0 1px 0 rgba(244, 230, 208, 0.09), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 26px 44px -26px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}
.tabla-barro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, transparent 28%, rgba(255, 228, 196, 0.075) 44%, transparent 58%);
}

.estado { text-align: center; padding: 64px 0 24px; display: grid; gap: 14px; justify-items: center; color: var(--crema-2); }
.estado h1, .estado h2 { color: var(--crema); font-size: clamp(2rem, 8vw, 2.6rem); }

/* ---------- Contraseña ---------- */
.login { display: grid; gap: 16px; padding: 40px 0 8px; text-align: left; }
.login-marca { justify-self: center; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta);
  background: radial-gradient(circle at 42% 34%, #ffe1a6, var(--brasa-claro) 22%, var(--brasa) 52%, var(--brasa-hondo)); box-shadow: 0 10px 26px -8px rgba(232,137,43,.6); }
.login-marca svg { width: 64%; height: 64%; }
.login h1 { text-align: center; font-size: clamp(2rem, 8.5vw, 2.6rem); }
.login-sub { text-align: center; color: var(--crema-2); margin-top: -6px; }
.login .entrada { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; }

/* ---------- Inicio ---------- */
.inicio { display: grid; gap: 40px; padding-top: 22px; }
.portada { display: grid; justify-items: center; text-align: center; gap: 22px; }
.titular { font-size: clamp(1.45rem, 6vw, 2rem); color: var(--crema-2); line-height: 1.1; }
.titular span { display: block; margin-top: 6px; font-size: clamp(3.5rem, 17.5vw, 6rem); line-height: 0.92; color: var(--crema); letter-spacing: -0.035em; }
.regla { width: min(100%, 440px); display: grid; gap: 14px; justify-items: center; }
.regla .sellos { width: 100%; }
.regla-txt { font: 400 clamp(1.5rem, 6.6vw, 2rem)/1.1 var(--serif); }
.regla-txt b { font-weight: 400; color: var(--brasa-claro); }
.regla-sub { color: var(--crema-2); max-width: 34ch; }

.registro { display: grid; gap: 22px; align-content: start; }
.registro form { display: grid; gap: 18px; }
.registro h2 { font-size: clamp(1.8rem, 7.5vw, 2.2rem); }
.casillas { display: grid; gap: 14px; }
.oblig { color: var(--ceniza); font-size: 0.85em; }
.privacidad { margin: -4px 0 0 38px; font-size: 0.9rem; color: var(--crema-2); }
.privacidad summary { cursor: pointer; color: var(--brasa-claro); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.privacidad div { display: grid; gap: 8px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--incision); }
.ya { display: grid; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid rgba(232,137,43,.35); background: rgba(232,137,43,.08); text-align: center; }
.probar { display: grid; gap: 10px; text-align: center; color: var(--crema-2); font-size: 0.92rem; }

.del-cafe { display: grid; gap: 14px; }
.del-cafe h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
.ligas { display: grid; border-top: 1px solid var(--incision); }
.ligas a { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--incision); text-decoration: none; color: var(--crema); transition: background .2s, padding .3s var(--suave); }
.ligas a::after { content: "→"; grid-row: span 2; align-self: center; color: var(--brasa); font-size: 1.3rem; }
.ligas a:hover { background: rgba(244,230,208,.04); padding-left: 10px; }
.ligas b { font-weight: 650; font-size: 1.05rem; }
.ligas span { color: var(--crema-2); font-size: 0.9rem; }
.nota { color: var(--crema-2); font-size: 0.9rem; }

@media (min-width: 900px) {
  .inicio { grid-template-columns: 1.15fr 0.85fr; column-gap: 72px; row-gap: 64px; padding-top: 56px; }
  .portada { position: sticky; top: 40px; align-self: start; padding-top: 30px; }
  .del-cafe { grid-column: 1 / -1; grid-template-columns: 1fr 2fr; align-items: start; column-gap: 72px; }
  .del-cafe .nota { grid-column: 2; }
}

/* ---------- Tarjeta ---------- */
.vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--crema-2); }
.vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 0 rgba(232,137,43,.6); animation: late 2.4s ease-out infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(232,137,43,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(232,137,43,0); } }
.tarjeta-grid { width: min(100% - 32px, 460px); margin: 6px auto 0; display: grid; gap: 30px; }
.tarjeta { padding: 26px 20px 24px; text-align: center; display: grid; gap: 0; }
.saludo { font-size: clamp(2.3rem, 11vw, 3.2rem); margin-bottom: 26px; }
.saludo span { color: var(--brasa-claro); }
.tarjeta .sellos { margin-bottom: 40px; row-gap: 36px; }
.tarjeta .greca { margin-bottom: 18px; }
.faltan { font: 400 clamp(1.25rem, 5.4vw, 1.5rem)/1.25 var(--serif); }
.faltan b { font-weight: 400; color: var(--brasa-claro); font-size: 1.25em; }
#verPremio { margin-top: 18px; }
.qr-zona { display: grid; gap: 12px; justify-items: center; text-align: center; }
.placa.qr { width: min(100%, 300px); padding: 16px; }
.placa.qr svg { width: 100%; height: auto; }
.qr-txt { color: var(--crema); font-weight: 600; }
.qr-zona .etiqueta { font-weight: 500; color: var(--crema-2); margin-top: 6px; }
.borrar { margin-top: 36px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.guardada { color: var(--ceniza); font-size: 0.88rem; }
.confirmar { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(197,96,58,.12); border: 1px solid rgba(197,96,58,.45); text-align: left; width: 100%; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos .btn { padding: 0 12px; }
.btn-rojo { background: var(--oxido); color: #fff6ee; }
.btn-rojo:hover { background: #d36d45; }

@media (min-width: 860px) {
  .tarjeta-grid { width: min(100% - 32px, 920px); grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 56px; margin-top: 30px; }
}

/* ¡Ganaste! */
.ganaste { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(12, 8, 6, 0.9); opacity: 0; transition: opacity .4s; }
.ganaste.ver { opacity: 1; }
.ganaste[hidden] { display: none; }
.ganaste canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ganaste-c { position: relative; width: min(100%, 360px); display: grid; gap: 14px; justify-items: center; text-align: center; color: var(--crema-2); }
.ganaste-sello { width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta);
  background: radial-gradient(circle at 42% 34%, #ffe1a6, var(--brasa-claro) 22%, var(--brasa) 52%, var(--brasa-hondo));
  box-shadow: inset 0 -6px 12px rgba(80,25,0,.5), 0 18px 50px -10px rgba(232,137,43,.75); }
.ganaste.ver .ganaste-sello { animation: presiona 1s var(--suave) both; }
.ganaste-sello svg { width: 70%; height: 70%; }
.ganaste h2 { font-size: clamp(3rem, 14vw, 4rem); color: var(--crema); }

/* ---------- Mostrador ---------- */
.mostrador { padding-bottom: 8px; }
.m-titulo { font-size: clamp(1.9rem, 8vw, 2.3rem); margin: 10px 0 16px; }
.visor { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: #0e0a08; box-shadow: inset 0 3px 14px rgba(0,0,0,.8), 0 1px 0 rgba(244,230,208,.06); }
.visor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.visor.activo video { opacity: 1; }
.mira { position: absolute; inset: 17%; }
.mira i { position: absolute; width: 30px; height: 30px; border: 3px solid var(--brasa); }
.mira i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.mira i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.mira i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.mira i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.visor.activo .mira { animation: respira 1.6s ease-in-out infinite; }
@keyframes respira { 50% { transform: scale(0.96); } }
.visor-msg { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(10,7,5,.72); text-align: center; font-size: 0.92rem; color: var(--crema); }
#escanear { margin-top: 14px; }
.por-codigo { margin-top: 24px; display: grid; gap: 8px; }
.fila-codigo { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.fila-codigo .entrada { font: 400 1.7rem/1 var(--serif); letter-spacing: 0.35em; text-align: center; padding-left: 0.35em; }
.cliente { display: grid; gap: 14px; padding-top: 10px; }
.cliente .tabla-barro { text-align: center; }
.cliente h2 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
.c-datos { color: var(--crema-2); font-size: 0.9rem; margin-top: 6px; }
.cliente .sellos { margin: 20px 0 16px; }
.c-lleva { font: 400 1.2rem/1.3 var(--serif); }
.c-lleva b { font-weight: 400; color: var(--brasa-claro); }
.premio-aviso { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; color: var(--tinta);
  background: linear-gradient(135deg, var(--brasa-claro), var(--brasa)); box-shadow: 0 12px 30px -14px rgba(232,137,43,.8); }
.premio-aviso b { display: block; font: 400 1.5rem/1.1 var(--serif); }
.premio-ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(26,15,8,.12); display: grid; place-items: center; }
.premio-ico svg { width: 28px; height: 28px; }
.btn-grande { min-height: 70px; font-size: 1.3rem; }
#saltar { justify-self: center; }

/* ---------- Panel ---------- */
.panel { padding-bottom: 8px; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--incision); margin-top: 6px; }
.cifras div { padding: 18px 8px 16px; text-align: center; display: grid; gap: 4px; }
.cifras div + div { border-left: 1px solid var(--incision); }
.cifras b { font: 400 clamp(2.1rem, 10vw, 3.4rem)/1 var(--serif); }
.cifras div:nth-child(2) b { color: var(--brasa-claro); }
.cifras span { color: var(--crema-2); font-size: 0.82rem; line-height: 1.2; }
.vistas { width: fit-content; margin: 22px 0 18px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--incision-2); background: transparent; cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--crema); transition: background .2s, color .2s, border-color .2s; }
.chip span { opacity: 0.65; font-weight: 500; margin-left: 2px; }
.chip:hover { border-color: var(--crema-2); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
.filtro-ayuda { color: var(--crema-2); font-size: 0.9rem; margin: 12px 0 4px; }
.lista { list-style: none; margin: 0; padding: 0; }
.fila-m { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nombre sellos" "datos accion"; gap: 8px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--incision); }
.fm-nombre { grid-area: nombre; display: grid; gap: 2px; min-width: 0; }
.fm-nombre b { font-weight: 650; }
.fm-nombre span { color: var(--ceniza); font-size: 0.82rem; }
.fm-sellos { grid-area: sellos; display: grid; justify-items: end; gap: 4px; font-size: 0.78rem; color: var(--crema-2); }
.fm-datos { grid-area: datos; display: flex; gap: 12px; flex-wrap: wrap; color: var(--crema-2); font-size: 0.88rem; }
.fm-datos b { color: var(--crema); font-weight: 600; }
.fm-accion { grid-area: accion; justify-self: end; }
.mini { display: flex; gap: 4px; }
.mini i { width: 10px; height: 10px; border-radius: 50%; background: #0f0b09; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.mini i.l { background: radial-gradient(circle at 40% 35%, var(--brasa-claro), var(--brasa) 60%, var(--brasa-hondo)); box-shadow: 0 1px 4px -1px rgba(232,137,43,.6); }
.mini.frio i.l { background: radial-gradient(circle at 40% 35%, #9a8b7e, #6a5d53); box-shadow: none; }
.fila-m.dormido .fm-nombre b { color: var(--crema-2); }
.btn.chico { min-height: 40px; padding: 0 14px; font-size: 0.9rem; gap: 8px; }
.btn.chico svg { width: 18px; height: 18px; }
.etq { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 0.8rem; color: var(--crema-2); border: 1px solid var(--incision-2); }
.etq.brasa { color: var(--tinta); background: var(--brasa-claro); border-color: transparent; font-weight: 600; }
.vacio { padding: 36px 0; text-align: center; color: var(--crema-2); }
@media (min-width: 760px) {
  .fila-m { grid-template-columns: minmax(220px, 2fr) 1.1fr 1.3fr 150px; grid-template-areas: "nombre sellos datos accion"; }
  .fm-sellos { justify-items: start; grid-template-columns: auto auto; align-items: center; gap: 10px; }
}

/* Avisos */
.avisos { max-width: 640px; }
.armar { display: grid; gap: 26px; }
.bloque { display: grid; gap: 12px; }
.bloque h2 { font-size: 1.55rem; }
.plantillas { display: flex; flex-wrap: wrap; gap: 8px; }
textarea.entrada { min-height: 140px; resize: vertical; line-height: 1.5; }
.ayuda { color: var(--crema-2); font-size: 0.88rem; }
.ayuda code { font-family: inherit; font-weight: 600; color: var(--brasa-claro); background: rgba(232,137,43,.1); padding: 1px 6px; border-radius: 6px; }
.burbuja { justify-self: start; max-width: 100%; padding: 12px 14px 14px; border-radius: 18px 18px 18px 4px; background: #17382b; color: #eaf6ee; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; box-shadow: 0 8px 20px -14px rgba(0,0,0,.9); }
.vista-previa h2 span { color: var(--brasa-claro); }
.envio { display: grid; gap: 14px; }
.progreso { display: grid; gap: 8px; font-weight: 600; }
.barra-pg { height: 6px; border-radius: 99px; background: var(--barro-3); overflow: hidden; }
.barra-pg i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brasa), var(--brasa-claro)); transition: width .5s var(--suave); }
.destinatario { display: grid; gap: 8px; }
.destinatario h2 { font-size: 1.9rem; }
.destinatario .burbuja { margin-top: 8px; }
#abrirWa.hecho { background: #164531; }
#abrirWa.hecho::after { content: "· abierto"; font-weight: 500; opacity: .75; }

/* ---------- Probar ---------- */
.probar-cab { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px 0 14px; }
.probar-cab h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.probar-cab p { color: var(--crema-2); max-width: 40ch; }
.cambio { margin-top: 8px; }
.telefono { margin: 0; }
.telefono figcaption { display: none; }
.telefono iframe { display: block; width: 100%; height: max(560px, calc(100dvh - 230px)); border: 0; border-radius: 24px; background: var(--barro); box-shadow: inset 0 0 0 1px var(--incision); }
.telefonos[data-ver="tarjeta"] .t-mostrador, .telefonos[data-ver="mostrador"] .t-tarjeta { display: none; }
@media (min-width: 860px) {
  .cambio { display: none; }
  .telefonos { display: flex; justify-content: center; gap: 40px; }
  .telefonos .telefono { display: grid !important; gap: 12px; justify-items: center; }
  .telefono figcaption { display: block; color: var(--crema-2); font-weight: 600; }
  .telefono iframe { width: 390px; height: min(780px, calc(100dvh - 120px)); border-radius: 42px; border: 10px solid #0b0806; box-shadow: 0 30px 60px -30px rgba(0,0,0,.95), 0 0 0 1px var(--incision); }
}

/* ---------- Cartel ---------- */
.cartel-acciones { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 20px 0 6px; color: var(--crema-2); }
.hoja-envoltura { padding: 16px; display: grid; place-items: center; }
.hoja {
  container-type: inline-size;
  width: min(100%, 8.5in);
  aspect-ratio: 8.5 / 11;
  display: flex; flex-direction: column;
  background: #faf3e7; color: var(--tinta);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.95);
}
.hoja-banda { background: var(--barro); padding: 1.6cqw 0; }
.hoja-banda .greca { height: 2.2cqw; background-size: 4.4cqw 2.2cqw; }
.hoja-c { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5cqw 8cqw 3cqw; gap: 2.6cqw; }
.hoja-marca { display: flex; align-items: center; gap: 1.6cqw; }
.hoja-marca svg { width: 5.6cqw; height: 5.6cqw; color: #b65e15; }
.hoja-marca b { font: 400 3.8cqw/1 var(--serif); }
.hoja-titulo { font-size: 13cqw; line-height: 0.92; letter-spacing: -0.035em; color: var(--tinta); }
.hoja-regla { font: 400 5cqw/1 var(--serif); }
.hoja-regla b { font-weight: 400; color: #b65e15; }
.hoja-sellos { width: 66cqw; gap: 1.6cqw; }
.hoja-sellos .sello.lleno { box-shadow: inset 0 -0.6cqw 1.2cqw rgba(80,25,0,.5), inset 0 0.3cqw 0.4cqw rgba(255,236,200,.5); }
.hoja-qr { display: grid; justify-items: center; gap: 1.6cqw; margin-top: 1cqw; }
.hoja-qr-placa { width: 38cqw; padding: 1.8cqw; background: #fff; border: 0.6cqw solid var(--tinta); border-radius: 3cqw; }
.hoja-qr-placa svg { width: 100%; height: auto; }
.hoja-qr p { font-size: 2.6cqw; line-height: 1.25; font-weight: 600; }
.hoja-pasos { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; counter-reset: paso; width: 100%; }
.hoja-pasos li { counter-increment: paso; display: grid; justify-items: center; gap: 1.2cqw; font-size: 2.3cqw; line-height: 1.25; }
.hoja-pasos li::before { content: counter(paso); width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; font: 400 3cqw/1 var(--serif); color: var(--crema); background: var(--barro); }
.hoja-pie { font: 400 3cqw/1.2 var(--serif); margin-top: auto; }
.hoja-demo { font-size: 1.6cqw; color: #6b5a4c; }

@media print {
  @page { size: letter; margin: 0; }
  html, body { background: #fff !important; }
  body { min-height: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-cartel .banda, .p-cartel .cartel-acciones, .p-cartel .pie { display: none !important; }
  .hoja-envoltura { padding: 0; display: block; }
  .hoja { width: 8.5in; height: 11in; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .sello.prende, .sello.prende svg.m { animation: none !important; }
}

/* Ajustes tras la primera prueba */
@media (max-width: 859px) {
  .probar-cab { padding: 10px 0 12px; gap: 6px; }
  .probar-cab .marca { display: none; }
  .probar-cab h1 { font-size: 1.6rem; }
  .probar-cab p { font-size: 0.9rem; }
  .cambio { position: sticky; top: 8px; z-index: 5; margin-top: 4px; }
  .telefono iframe { height: max(560px, calc(100dvh - 150px)); }
}
#saltar { text-decoration: none; min-height: 52px; width: 100%; box-shadow: inset 0 0 0 1.5px rgba(232,137,43,.55); border-radius: 999px; color: var(--brasa-claro); font-weight: 600; }
.placa.qr { width: min(100%, 272px); }
.hoja-c { gap: 2cqw; padding: 4cqw 8cqw 2.6cqw; min-height: 0; }
.hoja-titulo { font-size: 12cqw; }
.hoja-qr-placa { width: 34cqw; }
.hoja-pasos li b { display: block; }
.hoja-banda { flex: none; }
.hoja-c { gap: 1.6cqw; padding-top: 3.4cqw; }
.hoja-qr-placa { width: 31cqw; }
.hoja-qr { gap: 1.2cqw; }
.mira { inset: 9% 19% 27% 19%; }
.vivo i { animation: none; } .vivo.late i { animation: late 1.2s ease-out 2; }

/* ---- Ronda de revisión ---- */
.ganaste-sello, .login-marca { background: radial-gradient(circle at 50% 56%, #ffd99c 0%, var(--brasa-claro) 16%, var(--brasa) 38%, #b85a16 62%, #4a1a06 94%); box-shadow: inset 0 3px 8px rgba(0,0,0,.55), 0 16px 40px -14px rgba(232,137,43,.7); }
.ganaste.ver .ganaste-sello { animation: presiona 1s var(--suave) both; }

/* La greca se incide conforme se llena la tarjeta */
.greca-prog { position: relative; margin-bottom: 18px; }
.greca-prog .greca { opacity: 0.55; }
.greca-prog::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' fill='none' stroke='%23e8892b' stroke-width='1.4'%3E%3Cpath d='M0 11.4h4V3.6h8v4.8H8V6H6v5.4h12V.6H24'/%3E%3C/svg%3E") repeat-x left center / 24px 12px;
  transition: width 1.1s var(--suave);
}
.greca-prog.llena::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' fill='none' stroke='%23f7b85a' stroke-width='1.8'%3E%3Cpath d='M0 11.4h4V3.6h8v4.8H8V6H6v5.4h12V.6H24'/%3E%3C/svg%3E"); }

/* Tarjeta: QR y código caben en la primera pantalla del celular */
.p-tarjeta .barra { padding: 10px 0; }
.tarjeta { padding: 20px 18px 18px; }
.saludo { margin-bottom: 14px; font-size: clamp(2rem, 9.5vw, 3.2rem); }
.tarjeta .sellos { width: 84%; justify-self: center; row-gap: 26px; margin-bottom: 30px; }
.faltan { font-size: clamp(1.15rem, 5vw, 1.5rem); }
.tarjeta-grid { gap: 18px; }
.qr-zona { gap: 8px; }
.placa.qr { width: min(100%, 226px); padding: 12px; }
.qr-zona .etiqueta { margin-top: 2px; font-size: 0.82rem; }
.qr-txt { font-weight: 500; color: var(--crema-2); font-size: 0.9rem; max-width: 32ch; margin-top: 4px; }
@media (min-width: 860px) { .placa.qr { width: min(100%, 300px); padding: 16px; } }

/* Inicio: flecha dibujada */
.ligas a::after { content: none; }
.ligas a svg { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 22px; height: 22px; color: var(--brasa); transition: transform .3s var(--suave); }
.ligas a:hover svg { transform: translateX(4px); }

/* Panel: brasa viva, tibia y fría */
.mini.tibio i.l { background: radial-gradient(circle at 50% 55%, #e0835a, var(--oxido) 60%, #6e2c16); box-shadow: none; }
.chip span { opacity: 1; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(244,230,208,.1); font-size: 0.8rem; }
.chip[aria-pressed="true"] span, .chip[aria-checked="true"] span { background: rgba(26,15,8,.12); }

/* Cartel: placa crema del mundo, sin marco negro */
.hoja-qr-placa { background: var(--crema); border: 0; box-shadow: inset 0 0 0 0.3cqw rgba(26,15,8,.12), 0 1cqw 2.4cqw -1cqw rgba(26,15,8,.45); }
.greca-prog .greca { margin: 0 !important; }
.hoja-qr-placa { width: 37cqw; }
.btn-rojo { background: #a4432a; } .btn-rojo:hover { background: #b24c30; }