:root {
  color-scheme: light;
  /* Cambia data-paleta en index.html entre "marca" y "clasica". */
  --tinta: #251713;
  --suave: #7d6c60;
  --linea: #ead8c3;
  --azafran: #f5b333;
  --picante: #c63d25;
  --granada: #8b2436;
  --menta: #17705d;
  --carbon: #2b1914;
  --crema: #fff4dc;
  --sombra: 0 18px 42px rgba(53, 28, 17, .16);
  --fondo-brillo-1: rgba(245, 179, 51, .32);
  --fondo-brillo-2: rgba(198, 61, 37, .2);
  --fondo-arriba: #fff0d0;
  --fondo-medio: #f5e4c9;
  --fondo-abajo: #fbf7ef;
  --patron-1: rgba(139, 36, 54, .16);
  --patron-2: rgba(23, 112, 93, .14);
  --boton-secundario: #f0e2cf;
  --desactivado-texto: #8e8176;
  --desactivado-fondo: #eadfce;
  --superficie: #fffdf8;
  --texto-hero: #ffe8c7;
  --fondo-puntos: #fffaf2;
  --borde-puntos: #e2cdb4;
  --punto-existente: #ffc15c;
  --punto-anadido: #63a9e8;
  --punto-retirado: #ef927e;
  --premio-texto: #3d2206;
  --premio-fondo: #ffe8a8;
  --premio-borde: #efbf4e;
  --camara-fondo: #101815;
  --modal-fondo: rgba(37, 23, 19, .42);
  --hero-inicio: #6f2b2f;
  --hero-final: #d36a36;
  --hero-brillo: #f5b333;
  --pincho-fondo: #251713;
  --contador-fondo-1: rgba(37, 25, 20, .88);
  --contador-fondo-2: rgba(91, 36, 39, .8);
  --contador-borde: #fff4dc;
  --punto-activo-1: #2b947b;
  --punto-activo-2: #12604f;
  --premio-acento-1: #ffd45c;
  --premio-acento-2: #d88b18;
  --superficie-suave: #fff4dc;
  --banner-filtro: saturate(.82) contrast(.96) brightness(1.03);
  --banner-tinte: linear-gradient(135deg, rgba(23, 112, 93, .12), rgba(139, 36, 54, .16) 58%, rgba(245, 179, 51, .12));
}

:root[data-paleta="marca"] {
  --tinta: #11110f;
  --suave: #596052;
  --linea: #cbd4b4;
  --azafran: #fea443;
  --picante: #812f33;
  --granada: #812f33;
  --menta: #b0c092;
  --carbon: #11110f;
  --crema: #e9eddf;
  --sombra: 0 18px 42px rgba(17, 17, 15, .16);
  --fondo-brillo-1: rgba(176, 192, 146, .34);
  --fondo-brillo-2: rgba(129, 47, 51, .14);
  --fondo-arriba: #f5f8e8;
  --fondo-medio: #e5ead5;
  --fondo-abajo: #fbfcf6;
  --patron-1: rgba(129, 47, 51, .12);
  --patron-2: rgba(176, 192, 146, .2);
  --boton-secundario: #e5ebd2;
  --desactivado-texto: #7b8274;
  --desactivado-fondo: #e2e6d8;
  --superficie: #fbfcf7;
  --texto-hero: #f3feb0;
  --fondo-puntos: #f7f9ec;
  --borde-puntos: #c9d3ad;
  --premio-texto: #332214;
  --premio-fondo: #f8dfae;
  --premio-borde: #e4b86e;
  --camara-fondo: #171b16;
  --modal-fondo: rgba(17, 17, 15, .42);
  --hero-inicio: #6f2b2f;
  --hero-final: #812f33;
  --hero-brillo: #fea443;
  --pincho-fondo: #3b2428;
  --contador-fondo-1: rgba(17, 17, 15, .9);
  --contador-fondo-2: rgba(129, 47, 51, .82);
  --contador-borde: #f3feb0;
  --punto-activo-1: #b0c092;
  --punto-activo-2: #71855c;
  --premio-acento-1: #ffc66f;
  --premio-acento-2: #d8792d;
  --superficie-suave: #e9eddf;
  --banner-filtro: none;
  --banner-tinte: none;
}

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
html, body { overflow-anchor: none; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tinta);
  background:
    radial-gradient(circle at 10% 8%, var(--fondo-brillo-1), transparent 32%),
    radial-gradient(circle at 92% 0%, var(--fondo-brillo-2), transparent 28%),
    linear-gradient(180deg, var(--fondo-arriba) 0%, var(--fondo-medio) 48%, var(--fondo-abajo) 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(30deg, transparent 0 46%, var(--patron-1) 47% 53%, transparent 54% 100%),
    linear-gradient(150deg, transparent 0 46%, var(--patron-2) 47% 53%, transparent 54% 100%);
  background-size: 64px 64px;
  mask-image: linear-gradient(#000, transparent 82%);
}

button, input, select, textarea { font: inherit; }

button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  color: #fff;
  background: var(--menta);
  font-weight: 820;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(23, 112, 93, .18);
}

button.secundario { color: var(--tinta); background: var(--boton-secundario); box-shadow: none; }
.boton-icono { display: inline-grid; place-items: center; width: 46px; min-width: 46px; padding: 0; border: 1px solid rgba(125, 108, 96, .22); border-radius: 14px; color: var(--picante); background: rgba(255, 253, 248, .78); box-shadow: 0 6px 14px rgba(53, 28, 17, .1); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
#botonSalir svg { width: 37px; height: 37px; }
.boton-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.boton-icono:hover, .boton-icono:focus-visible { color: var(--granada); background: #fff; transform: translateY(-2px); box-shadow: 0 10px 18px rgba(53, 28, 17, .16); }
.boton-adicionar-artigo { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #fff; background: linear-gradient(135deg, var(--menta), var(--punto-activo-2)); box-shadow: 0 8px 18px rgba(23, 112, 93, .2); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.icono-adicionar-artigo { position: relative; display: inline-block; flex: 0 0 25px; width: 25px; height: 25px; border: 2px solid currentColor; border-radius: 50%; transition: transform .2s ease, background .2s ease; }
.icono-adicionar-artigo::before, .icono-adicionar-artigo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 99px; background: currentColor; transform: translate(-50%, -50%); }
.icono-adicionar-artigo::after { width: 2px; height: 12px; }
.boton-adicionar-artigo:hover, .boton-adicionar-artigo:focus-visible { filter: saturate(1.12); transform: translateY(-2px); box-shadow: 0 12px 22px rgba(23, 112, 93, .28); }
.boton-adicionar-artigo:hover .icono-adicionar-artigo, .boton-adicionar-artigo:focus-visible .icono-adicionar-artigo { background: rgba(255, 255, 255, .16); transform: rotate(90deg) scale(1.08); }
.boton-adicionar-artigo:active { transform: translateY(0) scale(.98); }
button.peligro { background: var(--picante); box-shadow: 0 8px 18px rgba(198, 61, 37, .2); }
button.enlace-accion { min-height: auto; padding: 0; color: var(--menta); background: transparent; box-shadow: none; font-size: 13px; text-align: center; text-decoration: underline; }
button:disabled { color: var(--desactivado-texto); background: var(--desactivado-fondo); opacity: 1; cursor: not-allowed; box-shadow: none; }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--tinta);
  background: var(--superficie);
  outline: none;
}

.campo-contrasena { position: relative; }
.campo-contrasena input { padding-right: 54px; }
.campo-contrasena input::-ms-reveal { display: none; }
.boton-ver-contrasena { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 6px; color: var(--suave); background: transparent; box-shadow: none; }
.icono-ojo { display: grid; place-items: center; }
.icono-ojo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.icono-ojo-abierto { display: none; }
.boton-ver-contrasena[aria-pressed="true"] .icono-ojo-abierto { display: grid; }
.boton-ver-contrasena[aria-pressed="true"] .icono-ojo-cerrado { display: none; }
.boton-ver-contrasena:hover, .boton-ver-contrasena:focus-visible { color: var(--menta); background: transparent; }

textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--menta); box-shadow: 0 0 0 3px rgba(23, 112, 93, .13); }

label { display: grid; gap: 7px; color: var(--suave); font-size: 13px; font-weight: 780; }

.app { position: relative; width: min(100%, 1080px); margin: 0 auto; padding: 16px; }
.offline-aviso { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.offline-aviso[hidden] { display: none; }
.offline-aviso-tarjeta { width: min(100%, 420px); padding: 32px 24px; border: 1px solid rgba(166, 177, 132, .75); border-radius: 28px; color: var(--tinta); background: rgba(255, 253, 248, .86); box-shadow: var(--sombra); text-align: center; }
.offline-aviso-logo { display: block; width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 24px; box-shadow: 0 10px 22px rgba(43, 25, 20, .16); }
.offline-aviso-etiqueta { margin: 0 0 8px; color: var(--menta); font-size: 10px; font-weight: 850; letter-spacing: 1.8px; }
.offline-aviso h1 { margin: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.1; }
.offline-aviso-tarjeta > p:not(.offline-aviso-etiqueta) { margin: 12px auto 22px; max-width: 32ch; color: var(--suave); line-height: 1.55; }
.offline-aviso button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #218773, #105847); font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; box-shadow: 0 8px 18px rgba(23, 112, 93, .22); }
.offline-aviso button:hover, .offline-aviso button:focus-visible { background: linear-gradient(135deg, #289780, #146c59); }
.aviso-instalacion { position: fixed; z-index: 25; top: calc(12px + env(safe-area-inset-top, 0px)); left: 0; right: 0; width: min(660px, calc(100% - 24px)); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin: 0 auto; padding: 16px; border: 1px solid rgba(255, 255, 255, .7); border-top: 3px solid rgba(23, 112, 93, .75); border-radius: 20px; background: rgba(255, 253, 248, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 12px 36px rgba(37, 23, 19, .18), inset 0 1px 0 rgba(255, 255, 255, .6); font-size: 13px; animation: entrada-aviso-instalacion .4s ease-out both; }
@keyframes entrada-aviso-instalacion { from { opacity: 0; transform: translateY(calc(-100% - 24px - env(safe-area-inset-top, 0px))); } to { opacity: 1; transform: translateY(0); } }
.aviso-instalacion.interagido { animation: none; transition: translate .2s ease-out, opacity .2s ease-out; }
.aviso-instalacion.arrastando { cursor: grabbing; transition: none; }
.aviso-instalacion > .instalacao-conteudo { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.aviso-instalacion.arrastando > .instalacao-conteudo { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .aviso-instalacion { animation: none; } .aviso-instalacion.interagido { transition: none; } }
.aviso-instalacion[hidden], .aviso-instalacion [hidden] { display: none; }
.instalacao-conteudo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.instalacao-conteudo > div { min-width: 0; }
.instalacao-icone { display: grid; place-items: center; flex: 0 0 48px; height: 52px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 15px; color: #fff; background: linear-gradient(145deg, #289780, #105847); box-shadow: 0 5px 12px rgba(23, 112, 93, .2); transform: rotate(-6deg); }
.instalacao-icone svg { width: 28px; height: 28px; }
.instalacao-etiqueta { display: block; margin-bottom: 5px; color: #105847; font-size: 9px; font-weight: 850; letter-spacing: 1.2px; line-height: 1.4; }
.instalacao-conteudo strong { display: block; color: var(--tinta); font-size: 17px; font-weight: 850; line-height: 1.2; letter-spacing: -.4px; }
.aviso-instalacion p { margin-top: 5px; color: #514237; font-size: 12px; line-height: 1.5; }
.aviso-instalacion > button { min-height: 44px; padding: 10px 14px; border-radius: 12px; font-size: 12px; }
.aviso-instalacion > button:not(.fechar-instalacao) { background: linear-gradient(135deg, #218773, #105847); box-shadow: 0 5px 14px rgba(23, 112, 93, .22); }
.aviso-instalacion > .fechar-instalacao { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(125, 108, 96, .3); border-radius: 50%; color: var(--suave); background: rgba(255, 253, 248, .5); box-shadow: none; font-size: 24px; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.aviso-instalacion > .fechar-instalacao svg { display: block; width: 20px; height: 20px; }
.aviso-instalacion > .fechar-instalacao:hover, .aviso-instalacion > .fechar-instalacao:focus-visible { color: var(--tinta); background: #ead8c3; border-color: #d6bea3; }
.aviso-instalacion > p { grid-column: 1 / -1; }
@media (max-width: 420px) {
  .aviso-instalacion { grid-template-columns: minmax(0, 1fr) 44px; padding: 12px; gap: 12px 4px; }
  .instalacao-conteudo { gap: 9px; }
  .instalacao-icone { flex-basis: 38px; height: 44px; border-radius: 12px; }
  .instalacao-icone svg { width: 24px; height: 24px; }
  .instalacao-etiqueta { font-size: 8px; letter-spacing: .8px; }
  .instalacao-conteudo strong { font-size: 15px; }
  .aviso-instalacion > div { grid-column: 1; grid-row: 1; }
  .aviso-instalacion > .fechar-instalacao { grid-column: 2; grid-row: 1; }
  .aviso-instalacion > button:not(.fechar-instalacao) { grid-column: 1 / -1; }
}
#vistaAcceso .acceso-cartao-giro { position: relative; }
.acceso-cartao-pista { position: absolute; right: 14px; bottom: 44px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 244, 220, .8); border-radius: 50%; color: #352019; background: #ffda8f; box-shadow: 0 4px 16px rgba(43, 25, 20, .3); pointer-events: none; animation: toque-cartao 1.8s ease-in-out infinite; }
.acceso-cartao-pista[hidden] { display: none; }
.acceso-cartao-pista svg { width: 30px; height: 30px; }
@keyframes toque-cartao { 0%, 65%, 100% { transform: translateY(0) rotate(-12deg); } 30% { transform: translateY(5px) rotate(-12deg) scale(.88); box-shadow: 0 0 0 8px rgba(255, 218, 143, .18); } 45% { transform: translateY(0) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) { .acceso-cartao-pista { animation: none; } }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }

.sello {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, var(--picante), var(--granada));
  font-weight: 950;
  box-shadow: var(--sombra);
  flex: 0 0 auto;
}

.sello span { display: block; transform: rotate(-8deg); }
.sello.sello-logo { overflow: hidden; padding: 0; background: #000; }
.sello.sello-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sello.marca-logo { width: 88px; height: 88px; overflow: hidden; padding: 0; border-radius: 12px; background: #000; }
.sello.marca-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cabecera-app .sello.sello-logo { width: 88px; height: 88px; border-radius: 12px; }
h1, h2, h3, p { margin: 0; }
h1 { font-family: "Century Gothic", "Tw Cen MT", sans-serif; font-size: clamp(30px, 10vw, 54px); line-height: .95; letter-spacing: 0; font-weight: 700; }
h2 { font-size: 24px; line-height: 1.12; letter-spacing: 0; font-weight: 920; }
h3 { font-size: 17px; line-height: 1.2; letter-spacing: 0; font-weight: 880; }
.texto-suave { color: var(--suave); }
.rejilla { display: grid; gap: 14px; }
.dos-columnas { display: grid; grid-template-columns: 1fr; gap: 14px; }
.menu-contenido { grid-template-columns: 1fr; }

.panel {
  border: 1px solid rgba(234, 216, 195, .95);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 253, 248, .96);
  box-shadow: var(--sombra);
}

.acceso { min-height: calc(100vh - 32px); display: grid; align-content: center; gap: 16px; }
#vistaAcceso { gap: 20px; }
#vistaAcceso > * { min-width: 0; }
#vistaAcceso .acceso-presentacion { display: grid; gap: 24px; padding: clamp(24px, 5vw, 40px); border: 1px solid #a6b184; border-radius: 24px; color: #2b1914; background: linear-gradient(110deg, rgba(220, 228, 190, .88), rgba(220, 228, 190, .25)), url("../assets/brand/patron2.webp") center / cover; box-shadow: var(--sombra); }
#vistaAcceso .acceso-marca { display: grid; gap: 9px; justify-items: center; }
#vistaAcceso .acceso-marca > img { display: block; width: min(100%, 360px); height: auto; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; box-shadow: 0 12px 24px rgba(43, 25, 20, .2); }
#vistaAcceso .acceso-marca > span { max-width: 100%; color: #352019; font-size: 10px; font-weight: 850; letter-spacing: 1.8px; line-height: 1.4; text-align: center; }
#vistaAcceso .acceso-mensaje h1 { font-family: inherit; font-size: clamp(26px, 5vw, 40px); font-weight: 850; letter-spacing: -1.2px; line-height: 1.15; }
#vistaAcceso .acceso-mensaje > p { margin-top: 0; font-size: clamp(30px, 6vw, 44px); font-weight: 850; letter-spacing: -1.5px; line-height: 1.08; }
#vistaAcceso .acceso-mensaje > span { display: block; max-width: 300px; margin-top: 14px; font-size: 13px; line-height: 1.6; }
#vistaAcceso .acceso-cartao-giro { width: 100%; max-width: 370px; border-radius: 20px; cursor: pointer; perspective: 1200px; -webkit-tap-highlight-color: transparent; }
#vistaAcceso .acceso-cartao-giro:focus-visible { outline: 3px solid var(--azafran); outline-offset: 4px; }
#vistaAcceso .acceso-cartao-interior { display: grid; transform-style: preserve-3d; }
#vistaAcceso .acceso-cartao-giro.girando .acceso-cartao-interior { animation: girarCartaoAcceso 1.6s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes girarCartaoAcceso { 0% { transform: rotateY(0); } 35%, 65% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
#vistaAcceso .acceso-cartao-verso { grid-area: 1 / 1; display: grid; place-items: center; border: 1px solid rgba(255, 244, 220, .25); border-radius: 20px; background: linear-gradient(rgba(53, 32, 25, .22), rgba(53, 32, 25, .22)), url("../assets/brand/patron2.webp") center / cover; box-shadow: 0 14px 24px rgba(43, 25, 20, .2); transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#vistaAcceso .acceso-cartao-verso img { width: 56%; height: auto; mix-blend-mode: screen; }
#vistaAcceso .acceso-cartao { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; gap: 15px; width: 100%; max-width: 370px; padding: 22px; border: 1px solid rgba(255, 244, 220, .25); border-radius: 20px; color: #fff4dc; background: radial-gradient(ellipse at 100% 0, rgba(245, 179, 51, .22), transparent 65%), linear-gradient(125deg, #352019, #6f2b2f); box-shadow: 0 14px 24px rgba(43, 25, 20, .2); }
#vistaAcceso .acceso-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #ffda8f; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
#vistaAcceso .acceso-cartao-topo svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#vistaAcceso .acceso-cartao > p { font-size: 26px; font-weight: 650; letter-spacing: -.7px; line-height: 1.15; }
#vistaAcceso .acceso-cartao > p strong { color: #ffda8f; font-weight: 850; }
#vistaAcceso .acceso-selos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
#vistaAcceso .acceso-selos > span { aspect-ratio: 1; border: 1px dashed rgba(255, 244, 220, .55); border-radius: 50%; background: rgba(255, 244, 220, .06); }
#vistaAcceso .acceso-selos > .carimbado { border: 1px solid #ffc15c; background: #ffc15c url("../assets/brand/kababicon.webp") center / 86% no-repeat; }
#vistaAcceso .acceso-cartao-nota { font-size: 10px; line-height: 1.5; color: #f1d3b8; }
#vistaAcceso .acceso-especialidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#vistaAcceso .acceso-especialidades > span { display: grid; justify-items: center; gap: 8px; min-width: 0; padding: 12px 7px 10px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 16px; color: #352019; background: rgba(255, 253, 248, .48); box-shadow: 0 8px 18px rgba(43, 25, 20, .08); font-size: 11px; font-weight: 850; text-align: center; }
#vistaAcceso .acceso-especialidades img { width: 46px; height: 46px; padding: 7px; border-radius: 50%; object-fit: contain; background: #fff9eb; box-shadow: inset 0 0 0 1px rgba(111, 43, 47, .12), 0 4px 10px rgba(43, 25, 20, .12); }
#vistaAcceso .acceso-especialidades > span:nth-child(2) img { padding: 9px; object-fit: cover; }
#vistaAcceso .acceso-panel { align-content: center; gap: 22px; padding: clamp(22px, 4vw, 38px); border-radius: 24px; }
#vistaAcceso .acceso-boas-vindas { margin-bottom: 10px; color: var(--menta); font-size: 9px; font-weight: 850; letter-spacing: 1.6px; }
#vistaAcceso .acceso-panel h2 { font-size: clamp(23px, 4vw, 29px); letter-spacing: -.7px; }
#vistaAcceso .acceso-panel h2 + p { margin-top: 9px; font-size: 13px; line-height: 1.6; }
#vistaAcceso .modo { border-radius: 14px; }
#vistaAcceso .modo::before { border-radius: 10px; }
#vistaAcceso .modo button { padding: 0 8px; font-size: 13px; font-weight: 800; }
#vistaAcceso .formulario { gap: 18px; }
#vistaAcceso .formulario label { font-size: 12px; font-weight: 750; gap: 8px; }
#vistaAcceso .formulario input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 50px; border-radius: 12px; font-size: 14px; font-weight: 550; }
#vistaAcceso .formulario input::placeholder { font-weight: 450; }
#vistaAcceso .campo-ayuda { font-size: 11px; font-weight: 450; line-height: 1.5; }
#vistaAcceso .boton-ver-contrasena { top: 5px; }
#vistaAcceso #botonAcceso { min-height: 50px; border-radius: 12px; font-size: 14px; transition: transform .18s ease, box-shadow .18s ease; }
#vistaAcceso #botonAcceso:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(23, 112, 93, .25); }
#vistaAcceso #botonRecuperar { font-size: 12px; font-weight: 650; }
#vistaAcceso button:focus-visible { outline: 3px solid var(--azafran); outline-offset: 3px; }
@media (min-width: 900px) {
  #vistaAcceso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding: 12px 0; }
  #vistaAcceso .acceso-presentacion { background-image: linear-gradient(110deg, rgba(220, 228, 190, .88), rgba(220, 228, 190, .25)), url("../assets/brand/patron.webp"); }
}
@media (min-width: 560px) and (max-width: 899px) {
  #vistaAcceso .acceso-presentacion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  #vistaAcceso .acceso-marca, #vistaAcceso .acceso-especialidades { grid-column: 1 / -1; }
  #vistaAcceso .acceso-mensaje { grid-row: 2; }
}
@media (max-width: 559px) {
  #vistaAcceso .acceso-presentacion { gap: 18px; padding: 16px; }
  #vistaAcceso .acceso-mensaje > p { font-size: clamp(26px, 7vw, 34px); }
  #vistaAcceso .acceso-mensaje > span { margin-top: 8px; }
  #vistaAcceso .acceso-cartao-giro { justify-self: center; }
  #vistaAcceso .acceso-cartao { gap: 4px; padding: 10px; border-radius: 16px; }
  #vistaAcceso .acceso-cartao-verso { border-radius: 16px; }
  #vistaAcceso .acceso-cartao-topo { font-size: 8px; letter-spacing: 1px; }
  #vistaAcceso .acceso-cartao-topo svg { width: 18px; height: 18px; }
  #vistaAcceso .acceso-cartao > p { font-size: clamp(18px, 5vw, 24px); }
  #vistaAcceso .acceso-selos { gap: 5px; }
  #vistaAcceso .acceso-cartao-nota { font-size: 9px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) { #vistaAcceso .acceso-cartao-giro.girando .acceso-cartao-interior { animation-duration: .01ms; } #vistaAcceso #botonAcceso { transition: none; } #vistaAcceso #botonAcceso:not(:disabled):hover { transform: none; } }

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--hero-inicio) 0%, var(--granada) 56%, var(--hero-final) 100%);
  box-shadow: var(--sombra);
  overflow: hidden;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -38px;
  top: -30px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--hero-brillo);
  opacity: .42;
}

.hero-contenido { position: relative; z-index: 1; display: grid; gap: 10px; }
.hero-contenido p { max-width: 58ch; color: var(--texto-hero); }
.pincho { position: relative; z-index: 1; min-height: 150px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); background: var(--pincho-fondo); }
.pincho::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: var(--banner-tinte); mix-blend-mode: color; }
.contadores-visuales { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 18px 11px; border: 1px solid rgba(255, 244, 220, .55); border-radius: 18px; background: linear-gradient(145deg, var(--contador-fondo-1), var(--contador-fondo-2)); box-shadow: 0 12px 28px rgba(37, 25, 20, .38), inset 0 1px 0 rgba(255, 255, 255, .18); backdrop-filter: blur(7px); color: var(--superficie-suave); transform: translate(-50%, -50%); }
.contadores-visuales::after { content: "PROGRESO DE FIDELIDAD"; position: absolute; top: 4px; left: 0; right: 0; color: var(--texto-hero); font-size: 8px; font-weight: 900; letter-spacing: 1.4px; text-align: center; }
.contadores-visuales::before { content: ""; position: absolute; z-index: -1; left: 22px; right: 22px; height: 2px; background: var(--superficie-suave); opacity: .4; }
.contadores-visuales span, .contadores-visuales strong { position: relative; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid var(--superficie-suave); border-radius: 50%; color: var(--superficie-suave); font-size: 11px; font-style: normal; font-weight: 900; box-shadow: 0 0 0 3px rgba(37, 25, 20, .3), 0 3px 6px rgba(37, 25, 20, .28); }
.contadores-visuales span { background: linear-gradient(145deg, var(--punto-activo-1), var(--punto-activo-2)); }
.contadores-visuales strong { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-color: #ffe29a; background: linear-gradient(145deg, var(--premio-acento-1), var(--premio-acento-2)); color: #5b3506; font-size: 13px; text-align: center; box-shadow: 0 0 0 3px rgba(37, 25, 20, .35), 0 0 16px rgba(245, 179, 51, .5); }
.contadores-visuales strong::before { display: none; }
.contadores-visuales strong::after { content: "🎁"; position: absolute; right: -12px; bottom: -10px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #ffe29a; border-radius: 50%; background: var(--picante); font-size: 13px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(37, 25, 20, .35)); }
.contadores-visuales i { position: relative; width: 13px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--superficie-suave), var(--azafran)); opacity: .9; }
.banner-club { position: relative; display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; object-position: center; filter: var(--banner-filtro); }

.modo, .navegacion { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modo { position: relative; isolation: isolate; padding: 5px; border: 1px solid var(--linea); border-radius: 8px; background: var(--crema); }
.modo::before { content: ""; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 18px) / 2); border-radius: 8px; background: var(--carbon); transition: transform .32s cubic-bezier(.22, .8, .28, 1); }
.modo.registro-activo::before { transform: translateX(calc(100% + 8px)); }
.navegacion { position: relative; isolation: isolate; }
.navegacion::before { content: ""; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 18px) / 2); border-radius: 8px; background: var(--carbon); transition: transform .32s cubic-bezier(.22, .8, .28, 1); }
.navegacion.tarjeta-activa::before { transform: translateX(calc(100% + 8px)); }
.modo button, .navegacion button { position: relative; color: var(--suave); background: transparent; box-shadow: none; transition: color .2s ease, transform .2s ease; }
.modo button.activo, .navegacion button.activa { color: #fff; background: transparent; }
.navegacion button:not(.activa):hover, .navegacion button:not(.activa):focus-visible { color: var(--tinta); transform: scale(1.015); }
.navegacion button.activa { transform: scale(1.015); }
.animando-seccion { animation: entrada-seccion .28s ease both; }
@keyframes entrada-seccion { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .animando-seccion { animation: none; } .navegacion::before, .modo::before { transition: none; } }
.formulario { display: grid; gap: 12px; }
.campo-ayuda { color: var(--suave); font-size: 12px; font-weight: 560; line-height: 1.4; }
.campo-ayuda.correcto { color: var(--menta) !important; }
.campo-ayuda.invalido { color: var(--picante) !important; }
.campo-ayuda .requisito-contrasena { color: var(--suave); }
.campo-ayuda.activo .requisito-contrasena { color: var(--picante); }
.campo-ayuda.activo .requisito-contrasena.cumplido { color: var(--menta); }
.requisito-check { display: none; color: var(--menta); }
.requisito-check.visible { display: inline; }
input.campo-valido { border-color: var(--menta); background: #f5fffb; }
input.campo-invalido { border-color: var(--picante); background: #fff7f4; }
.estado-validacion { min-height: 18px; margin: -2px 0 0; color: var(--picante); font-size: 13px; font-weight: 720; }
.estado-validacion.correcto { color: var(--menta); }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acciones { display: grid; grid-template-columns: 1fr; gap: 10px; }
.acciones button:not(:disabled) { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.acciones button:not(:disabled):hover, .acciones button:not(:disabled):focus-visible { filter: saturate(1.08); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(53, 28, 17, .18); }
.acciones .boton-fechar { color: #fff; background: #6b7280; box-shadow: 0 8px 18px rgba(107, 114, 128, .2); }
.cabecera-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 8px 0 16px; }
.barra-superior { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barra-superior .marca { flex: 1; }
.barra-superior .marca > div:not(.sello) { flex: 1; min-width: 0; }
#tituloSesion, #subtituloSesion { overflow-wrap: anywhere; }
#tituloSesion.titulo-correo { white-space: nowrap; overflow-wrap: normal; }
.barra-superior > .boton-icono { flex-shrink: 0; }
.navegacion { padding: 5px; border: 1px solid var(--linea); border-radius: 8px; background: var(--crema); }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-explorar { padding: clamp(18px, 3vw, 28px); gap: 22px; border-radius: 22px; border-color: var(--linea); background: radial-gradient(ellipse at top right, rgba(245, 179, 51, .14), transparent 65%), var(--superficie); box-shadow: 0 8px 24px rgba(53, 28, 17, .07); }
.menu-explorar-cabecera { flex-wrap: wrap; gap: 16px; }
.menu-explorar-titulo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.menu-explorar-icono { display: grid; place-items: center; flex: 0 0 64px; height: 64px; border: 1px solid var(--linea); border-radius: 18px; background: var(--superficie-suave); color: var(--granada); transform: rotate(-5deg); }
.menu-explorar-icono svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-explorar-sobretitulo { margin-bottom: 6px; color: var(--granada); font-size: 12px; font-weight: 850; letter-spacing: 1.3px; }
.menu-explorar-titulo h2 { font-size: clamp(32px, 4.5vw, 40px); letter-spacing: -.7px; }
.menu-explorar-filtros { gap: 14px; padding-top: 18px; border-top: 1px solid var(--linea); }
.menu-explorar-filtros > label { min-width: 0; gap: 8px; color: var(--suave); font-size: 14px; font-weight: 850; }
.menu-explorar-filtros .filtro-dropdown-boton { min-height: 56px; padding-left: 16px; background: var(--superficie); font-size: 14px; }
@media (max-width: 560px) {
  .menu-explorar { padding: 16px; gap: 12px; }
  .menu-explorar-titulo { gap: 10px; }
  .menu-explorar .menu-explorar-icono { flex-basis: 44px; height: 46px; border-radius: 12px; }
  .menu-explorar-icono svg { width: 30px; height: 30px; }
  .menu-explorar-sobretitulo { margin-bottom: 4px; }
  .menu-explorar-titulo h2 { font-size: 28px; }
  .menu-explorar-filtros { gap: 10px; padding-top: 12px; }
  .menu-explorar-filtros > label { gap: 5px; font-size: 13px; }
  .menu-explorar-filtros .filtro-dropdown-boton { min-height: 46px; }
}
@media (max-width: 420px) {
  .menu-explorar-filtros { grid-template-columns: minmax(0, 1fr); }
  .menu-explorar-icono { flex-basis: 52px; height: 56px; border-radius: 14px; }
  .menu-explorar-sobretitulo { font-size: 11px; letter-spacing: .8px; }
}
.filtro-dropdown { position: relative; }
.filtro-select-nativo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.filtro-dropdown-boton { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 66px; padding: 0 42px 0 22px; border: 1px solid var(--linea); border-radius: 14px; color: var(--tinta); background: rgba(255, 253, 248, .82); box-shadow: none; font-weight: 820; text-align: left; }
.filtro-dropdown-boton::after { content: ""; position: absolute; top: 50%; right: 21px; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(45deg); }
.filtro-dropdown-boton:hover, .filtro-dropdown-boton:focus-visible, .filtro-dropdown-boton[aria-expanded="true"] { border-color: var(--menta); background: var(--superficie); box-shadow: 0 0 0 3px rgba(23, 112, 93, .13); outline: none; }
.filtro-dropdown-lista { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 230px; overflow-y: auto; padding: 6px; border: 1px solid var(--linea); border-radius: 12px; background: #fffdf8; box-shadow: 0 14px 28px rgba(53, 28, 17, .18); }
.filtro-dropdown-opcion { display: block; width: 100%; min-height: 42px; padding: 0 14px; border: 0; border-radius: 8px; color: var(--tinta); background: transparent; box-shadow: none; text-align: left; font-size: 14px; font-weight: 750; }
.filtro-dropdown-opcion:hover, .filtro-dropdown-opcion:focus-visible, .filtro-dropdown-opcion[aria-selected="true"] { color: var(--menta); background: var(--superficie-suave); box-shadow: none; outline: none; }
.lista-menu { display: grid; gap: 26px; }
.menu-categoria { display: grid; gap: 14px; }
.menu-categoria-cabecera { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 4px 2px; }
.menu-categoria-linha { width: 48px; height: 3px; border-radius: 999px; background: var(--azafran); box-shadow: 13px 0 0 rgba(245, 179, 51, .25); }
.menu-categoria-sobretitulo { margin: 0 0 4px; color: var(--menta); font-size: 11px; font-weight: 900; letter-spacing: 1.7px; }
.menu-categoria-cabecera h3 { font-size: clamp(25px, 3.5vw, 34px); letter-spacing: -.6px; }
.menu-categoria-contador { padding: 12px 12px; border: 1px solid var(--linea); border-radius: 999px; color: var(--suave); background: rgba(255, 253, 248, .75); font-size: 14px; font-weight: 800; white-space: nowrap; }
.lista-menu-categoria { display: grid; grid-template-columns: 1fr; gap: 14px; }

.esqueleto-bloque, .esqueleto-linha, .esqueleto-etiquetas span, .esqueleto-pastillas span { background: linear-gradient(100deg, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .92) 45%, rgba(255, 255, 255, .5) 70%); background-size: 220% 100%; animation: brillo-esqueleto 1.35s ease-in-out infinite; }
.esqueleto-articulo { pointer-events: none; }
.esqueleto-imagen { aspect-ratio: 16 / 9; border-radius: 6px; }
.esqueleto-linha { height: 14px; border-radius: 999px; }
.esqueleto-linha-larga { width: 72%; }
.esqueleto-linha-media { width: 48%; }
.esqueleto-linha-curta { width: 32%; }
.esqueleto-etiquetas, .esqueleto-pastillas { display: flex; gap: 8px; }
.esqueleto-etiquetas span { width: 76px; height: 26px; border-radius: 999px; }
.producto-esqueleto { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; gap: 16px; }
.producto-esqueleto > * { min-width: 0; max-width: 100%; }
.producto-esqueleto .esqueleto-pastillas { display: grid; grid-template-columns: repeat(3, minmax(0, 112px)); gap: 8px; }
.producto-esqueleto .esqueleto-pastillas span { width: 100%; min-width: 0; }
.producto-esqueleto-imagen { min-height: 280px; border-radius: 6px; }
.esqueleto-pastillas span { width: 112px; height: 42px; border-radius: 999px; }
@keyframes brillo-esqueleto { from { background-position: 180% 0; } to { background-position: -40% 0; } }

.campo-sugestiones { position: relative; }
.campo-sugestiones-control { display: flex; align-items: stretch; }
.campo-sugestiones-control input { min-width: 0; flex: 1; border-radius: 8px 0 0 8px; }
.boton-desplegable { position: relative; display: grid; place-items: center; width: 48px; min-height: 48px; padding: 0; border: 1px solid var(--linea); border-left: 0; border-radius: 0 8px 8px 0; color: var(--tinta); background: var(--crema); box-shadow: none; font-size: 0; line-height: 1; }
.boton-desplegable::before { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -90%) rotate(45deg); content: ""; }
.boton-desplegable:hover, .boton-desplegable:focus-visible { background: var(--superficie-suave); box-shadow: none; }
.sugestiones-lista { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 190px; overflow-y: auto; padding: 6px; border: 1px solid var(--linea); border-radius: 8px; background: #fffdf8; box-shadow: 0 12px 24px rgba(53, 28, 17, .18); }
.sugestion-categoria { display: block; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; color: var(--tinta); background: transparent; box-shadow: none; text-align: left; font-size: 14px; font-weight: 750; }
.sugestion-categoria:hover, .sugestion-categoria:focus-visible { background: var(--superficie-suave); box-shadow: none; }

.articulo-enlace { display: block; height: 100%; color: inherit; text-decoration: none; }
.articulo { display: flex; flex-direction: column; height: 100%; gap: 11px; border: 1px solid var(--linea); border-radius: 18px; padding: 12px; background: #fff; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.articulo-enlace:hover .articulo, .articulo-enlace:focus-visible .articulo { border-color: var(--azafran); box-shadow: 0 10px 24px rgba(53, 28, 17, .12); transform: translateY(-2px); }
.articulo-imagen { position: relative; flex-shrink: 0; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 13px; background: linear-gradient(135deg, var(--fondo-puntos), var(--superficie-suave)); color: var(--suave); font-size: 13px; font-weight: 800; }
.articulo-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 8px; object-fit: contain; object-position: center; background: #fff; }
.articulo-sello-puntos { position: absolute; top: 10px; left: 10px; padding: 9px 12px; border: 1px solid rgba(255, 244, 220, .6); border-radius: 999px; color: #4f3500; background: #ffc15c; box-shadow: 0 5px 12px rgba(53, 28, 17, .18); font-size: 14px; font-weight: 900; }
.articulo-descripcion { display: -webkit-box; overflow: hidden; margin: 0; color: var(--suave); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.articulo .etiquetas { margin-bottom: auto; }
.articulo-editar { flex-shrink: 0; min-height: 38px; padding: 0 12px; color: var(--menta); background: var(--boton-secundario); box-shadow: none; font-size: 13px; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.articulo-editar:hover, .articulo-editar:focus-visible { filter: saturate(1.08); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(53, 28, 17, .18); }
.articulo-desactivado { opacity: .72; border-color: #d97b68; background: #fff0ec; }
.etiqueta.etiqueta-desactivado { width: max-content; justify-self: start; color: #7f1d1d; background: #e77d6d; }
.boton-peligro { color: #fff; background: #c63d25; }
.boton-peligro:hover, .boton-peligro:focus-visible { background: #a72d1d; }
.boton-desactivar { color: #4f3500; background: #f5b333; }
.boton-desactivar:hover, .boton-desactivar:focus-visible { background: #e4a21f; }
.boton-reactivar { color: #4f3500; background: #f5b333; }
.boton-reactivar:hover, .boton-reactivar:focus-visible { background: #e4a21f; }
.articulo:hover { border-color: #d99b28; }
.articulo-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.precio { font-size: 22px; font-weight: 950; color: var(--picante); white-space: nowrap; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta { display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; min-height: 26px; border-radius: 999px; padding: 0 9px; background: var(--superficie-suave); color: var(--suave); font-size: 12px; font-weight: 850; }
.etiqueta.puntos { background: #ffe0a3; color: #5b3506; }
.etiqueta.dieta { background: #dcefdc; color: #245b2b; }
.detalle { display: grid; gap: 12px; }
.detalle-linea { display: grid; gap: 5px; }
.detalle-linea strong { font-size: 13px; color: var(--suave); }
.producto-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-height: calc(100vh - 32px); padding-top: 8px; padding-bottom: 24px; }
.producto-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.producto-volver { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px 0 10px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--menta), var(--punto-activo-2)); font-size: 14px; font-weight: 900; text-decoration: none; box-shadow: 0 10px 20px rgba(23, 112, 93, .22); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.producto-volver > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: transform .2s ease, background .2s ease; }
.producto-volver svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.2; }
.producto-volver:hover, .producto-volver:focus-visible { filter: saturate(1.15); transform: translateY(-2px); box-shadow: 0 14px 24px rgba(23, 112, 93, .3); }
.producto-volver:hover > span:first-child, .producto-volver:focus-visible > span:first-child { background: rgba(255, 255, 255, .3); transform: translateX(-3px); }
.producto-volver:active { transform: translateY(0) scale(.98); }
.producto-hero { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 22px; padding: clamp(18px, 3vw, 32px); border: 1px solid rgba(255, 232, 199, .3); border-radius: 24px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(245, 179, 51, .18), transparent 35%), linear-gradient(135deg, var(--hero-inicio), var(--granada) 58%, var(--hero-final)); box-shadow: var(--sombra); }
.producto-columna { display: grid; align-content: start; gap: 18px; min-width: 0; }
.producto-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; min-width: 0; width: 100%; }
.producto-imagen { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid rgba(255, 232, 199, .35); border-radius: 16px; background: rgba(37, 25, 20, .26); color: var(--texto-hero); font-size: 13px; font-weight: 800; text-align: center; }
.producto-imagen:has(img) { aspect-ratio: auto; min-height: 0; }
.producto-imagen img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: center; background: #fff; }
.producto-imagen-principal { grid-column: 1 / -1; min-height: 280px; aspect-ratio: 4 / 3; box-shadow: 0 14px 26px rgba(37, 25, 20, .2); }
.producto-columna-principal > .producto-cabecera { flex-wrap: wrap; align-items: flex-end; padding-bottom: 2px; }
.producto-columna-principal > .producto-cabecera > div:first-child { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.producto-columna-principal > .producto-cabecera h2 { font-size: clamp(22px, 4vw, 30px); line-height: 1.08; letter-spacing: -.6px; }
.producto-columna-principal > .producto-cabecera .texto-suave { margin-bottom: 8px; color: #ffda8f; font-size: 11px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }
.producto-seccion { display: grid; gap: 10px; padding: 18px; border: 1px solid rgba(255, 232, 199, .2); border-radius: 16px; background: rgba(37, 25, 20, .16); }
.producto-seccion h3 { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 880; }
.producto-seccion h4 { margin: 0 0 9px; font-size: 17px; line-height: 1.2; font-weight: 880; }
.bloque-dietas { padding-top: 10px; }
.producto-ayuda { color: var(--texto-hero); font-size: 13px; }
.producto-etiquetas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.producto-variante, .producto-guarniciones span { min-height: 42px; padding: 0 16px; border: 2px solid transparent; border-radius: 999px; color: var(--tinta); background: var(--superficie-suave); font-size: 15px; font-weight: 850; line-height: 1.1; }
.producto-variante { cursor: pointer; box-shadow: none; }
.producto-variante:hover, .producto-variante:focus-visible, .producto-variante.activa { border-color: var(--azafran); background: var(--azafran); color: #3d2206; box-shadow: 0 4px 12px rgba(245, 179, 51, .24); }
.producto-variante-ayuda { display: flex; align-items: center; gap: 7px; margin: 0; color: #ffe2a3; font-size: 12px; font-weight: 720; line-height: 1.4; }
.producto-variante-ayuda svg { flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.producto-guarniciones span { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border-color: rgba(255, 232, 199, .35); background: rgba(255, 255, 255, .16); color: var(--texto-hero); font-size: 13px; }
.producto-guarniciones b { font-size: 18px; line-height: 1; }
.producto-hero .texto-suave { color: var(--texto-hero); }
.producto-precio { flex-shrink: 0; white-space: nowrap; font-size: clamp(36px, 8vw, 58px); line-height: 1; font-weight: 950; color: var(--premio-acento-1); }
.producto-info { display: grid; gap: 14px; }
.producto-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.producto-lista li { padding: 9px 12px; border-radius: 999px; background: var(--superficie-suave); color: var(--tinta); font-size: 14px; font-weight: 750; }
.alergenos-destacados { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.alergeno-icono { display: grid; place-items: center; gap: 3px; min-height: 78px; padding: 7px 2px; border: 0; border-radius: 0; background: transparent; color: var(--texto-hero); text-align: center; }
.alergeno-icono img { width: 48px; height: 48px; object-fit: contain; filter: grayscale(1) brightness(1.15); opacity: .72; }
.alergeno-icono small { font-size: 11px; font-weight: 850; line-height: 1.05; }
.alergeno-icono.presente { border: 0; background: transparent; color: #fff3d2; }
.alergeno-icono.presente img { filter: none; opacity: 1; }
.dietas-destacadas { display: flex; flex-wrap: wrap; gap: 10px; }
.dieta-icono { display: grid; place-items: center; gap: 3px; min-width: 74px; text-align: center; }
.dieta-icono img, .dieta-icono-generico { width: 48px; height: 48px; }
.dieta-icono img { display: block; object-fit: contain; }
.dieta-icono-generico { display: grid; place-items: center; border-radius: 50%; background: #4b9b5b; color: #fff7df; font-size: 28px; line-height: 1; }
.dieta-icono small { font-size: 11px; font-weight: 850; line-height: 1.05; }
.producto-puntos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 2px; padding: 18px 16px 14px; border-left: 5px solid var(--menta); border-radius: 16px; background: linear-gradient(135deg, #fff4d6, #ffe1a0); color: var(--tinta); box-shadow: 0 5px 14px rgba(61, 34, 6, .12); font-weight: 800; }
.producto-puntos strong { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--azafran); color: #3d2206; font-size: 21px; line-height: 1; white-space: nowrap; }
.producto-puntos span { line-height: 1.3; }
.producto-error { text-align: center; }
@media (min-width: 850px) {
  .producto-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .producto-columna { align-self: stretch; padding: 18px; border: 1px solid rgba(255, 232, 199, .2); border-radius: 20px; background: rgba(37, 25, 20, .12); }
  .producto-columna-secundaria { padding-top: 20px; }
}
@media (max-width: 560px) {
  .producto-columna-principal > .producto-cabecera { align-items: flex-start; }
  .producto-precio { font-size: 34px; }
}
.progreso { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; width: 100%; }
.marca-punto { aspect-ratio: 1; min-width: 0; border-radius: 8px; border: 1px solid var(--borde-puntos); background: linear-gradient(180deg, var(--fondo-puntos), var(--linea)); position: relative; overflow: hidden; }
.marca-punto::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 2px solid rgba(75, 58, 47, .38); }
.marca-punto img { position: absolute; z-index: 1; inset: 9%; width: 82%; height: 82%; object-fit: contain; opacity: .72; transform: rotate(-20deg); transform-origin: center; }
.marca-punto.llena { border-color: var(--punto-existente); background: var(--punto-existente); }
.marca-punto.pendiente { border-color: var(--punto-anadido); background: var(--punto-anadido); }
.marca-punto.retirado { border-color: var(--punto-retirado); background: var(--punto-retirado); }
.leyenda-puntos { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--suave); font-size: 12px; font-weight: 760; }
.leyenda-puntos span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-punto { display: inline-block; width: 13px; height: 13px; border-radius: 4px; background: var(--punto-existente); }
.leyenda-punto.pendiente { background: var(--punto-anadido); }
.leyenda-punto.retirado { background: var(--punto-retirado); }
.acciones-puntos { grid-template-columns: 1fr 1fr; }
.acciones-puntos button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.acciones-puntos button span { font-size: 26px; font-weight: 950; line-height: 1; }
.acciones-puntos .boton-sumar-punto { color: var(--tinta); background: var(--punto-anadido); box-shadow: 0 8px 18px rgba(99, 169, 232, .28); }
.acciones-puntos .boton-quitar-punto { color: var(--tinta); background: var(--punto-retirado); box-shadow: 0 8px 18px rgba(239, 146, 126, .28); }
.boton-guardar-puntos { width: 100%; }
.boton-guardar-puntos:not(:disabled) { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.boton-guardar-puntos:not(:disabled):hover, .boton-guardar-puntos:not(:disabled):focus-visible { filter: saturate(1.08); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(53, 28, 17, .18); }
#codigoManual { text-transform: uppercase; }
.premio { display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 8px; color: var(--premio-texto); background: var(--premio-fondo); border: 1px solid var(--premio-borde); font-weight: 880; }
.icono-premio-aviso { flex: 0 0 27px; width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.painel-cartao-cliente { width: 100%; padding: clamp(16px, 3vw, 30px); border: 1px solid #d8dcb9; border-radius: 14px; background: linear-gradient(110deg, rgba(255, 253, 248, .82), rgba(244, 238, 211, .64)), url("../assets/brand/patron2.webp") center / cover; box-shadow: var(--sombra); }
.cartao-fidelidade { width: 100%; max-width: 760px; margin: 0 auto; border-radius: 24px; background: var(--superficie); box-shadow: 0 10px 24px rgba(43, 25, 20, .1); }
.cartao-perspetiva { position: relative; perspective: 1200px; border-radius: 24px; }
.cartao-giratorio { display: grid; grid-template-columns: minmax(0, 1fr); transform-style: preserve-3d; transition: transform .65s cubic-bezier(.22, .7, .25, 1); }
.cartao-giratorio.girado { transform: rotateY(180deg); }
.cartao-face { grid-area: 1 / 1; display: grid; align-content: space-between; gap: 18px; min-width: 0; min-height: 310px; padding: 24px 24px 64px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cartao-frente { color: #fff4dc; background: radial-gradient(ellipse at 100% 0, rgba(245, 179, 51, .22), transparent 60%), linear-gradient(125deg, #352019, #6f2b2f); }
.cartao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 9px; font-weight: 850; letter-spacing: 1.3px; }
.cartao-selo { flex-shrink: 0; padding: 6px 8px; border: 1px solid rgba(255, 244, 220, .35); border-radius: 6px; font-size: 8px; }
.cartao-marca { display: flex; align-items: center; gap: 12px; }
.cartao-marca > img { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; }
.cartao-marca h3 { font-size: clamp(22px, 5vw, 32px); letter-spacing: -.7px; }
.cartao-marca p { margin: 4px 0 0; font-size: 12px; opacity: .8; }
.cartao-oferta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cartao-oferta strong { font-size: clamp(27px, 7vw, 40px); line-height: 1.08; letter-spacing: -1px; }
.cartao-oferta img { width: 92px; height: 92px; object-fit: contain; transform: rotate(-15deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2)); }
.cartao-resumo { margin: 0; font-size: 12px; color: #ffda8f; }
.cartao-verso { transform: rotateY(180deg); color: var(--premio-texto); background: radial-gradient(circle at 100% 0, #ffe8a8, transparent 65%), #fff1cf; }
.cartao-verso h3 { max-width: 240px; font-size: clamp(17px, 4vw, 22px); line-height: 1.2; letter-spacing: -.3px; }
.cartao-contador { flex-shrink: 0; font-size: 15px; letter-spacing: 0; }
.cartao-contador strong { font-size: 34px; }
.cartao-verso .progreso { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cartao-verso .marca-punto { border-radius: 50%; border: 2px dashed #c8a46b; background: rgba(255, 255, 255, .5); }
.cartao-verso .marca-punto::after { inset: 35%; border: 0; background: #dbc7a1; }
.cartao-verso .marca-punto.llena { border: 2px solid #bb7720; background: #ffc15c; }
.cartao-verso .marca-punto.llena::after { display: none; }
.cartao-verso .marca-punto img { opacity: 1; }
.cartao-regra { margin: 0; font-size: 11px; line-height: 1.4; }
.cartao-girar { position: absolute; z-index: 1; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 7px; width: 100%; padding: 0 12px 22px; border-radius: 24px; color: #ffda8f; background: transparent; box-shadow: none; font-size: 11px; font-weight: 750; }
.cartao-girar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cartao-girar { padding-left: 56px; padding-right: 56px; }
.cartao-girar .cartao-cliente-pista { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; }
.cartao-girar .cartao-cliente-pista svg { width: 27px; height: 27px; }
.cartao-girar[aria-pressed="true"] { color: #68431a; }
.cartao-girar:focus-visible { outline: 3px solid var(--azafran); outline-offset: 4px; }
.cartao-qr { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 26px 20px 22px; border-top: 2px dashed var(--linea); text-align: center; }
.cartao-qr > p { margin: 0; font-size: 13px; }
.cartao-qr > h3 { font-size: 1.1em; }
.cartao-qr .qr-contenedor { grid-template-columns: minmax(0, 1fr); min-width: 0; width: 100%; border: 0; padding: 12px; }
.cartao-qr #codigoQr { width: min(100%, 308px); min-width: 0; min-height: 0; aspect-ratio: 1; }
@media (max-width: 560px) {
  .painel-cartao-cliente { min-width: 0; padding: 10px; }
  .cartao-face { min-height: 0; gap: 8px; padding: 12px 12px 42px; border-radius: 18px; }
  .cartao-cabecalho { gap: 8px; font-size: 8px; letter-spacing: .7px; }
  .cartao-selo { display: none; }
  .cartao-marca { gap: 8px; }
  .cartao-marca > img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; }
  .cartao-marca > div { min-width: 0; }
  .cartao-marca h3 { font-size: clamp(17px, 4.6vw, 24px); }
  .cartao-marca p { font-size: 10px; }
  .cartao-oferta { gap: 8px; }
  .cartao-oferta strong { font-size: clamp(19px, 5vw, 27px); letter-spacing: -.5px; }
  .cartao-oferta img { flex: 0 0 48px; width: 48px; height: 48px; }
  .cartao-resumo { font-size: 10px; line-height: 1.4; }
  .cartao-verso h3 { font-size: 13px; }
  .cartao-contador strong { font-size: 26px; }
  .cartao-verso .progreso { gap: 6px; }
  .cartao-regra { font-size: 10px; }
  .cartao-girar { padding-bottom: 14px; font-size: 10px; }
  .cartao-girar .cartao-cliente-pista { right: 8px; bottom: 7px; width: 34px; height: 34px; }
  .cartao-girar .cartao-cliente-pista svg { width: 24px; height: 24px; }
  .cartao-qr { padding: 20px 12px 16px; }
  .cartao-qr #codigoQr { width: min(100%, 220px); }
}
@media (min-width: 900px) { .painel-cartao-cliente { background-image: linear-gradient(110deg, rgba(255, 253, 248, .82), rgba(244, 238, 211, .64)), url("../assets/brand/patron.webp"); } }
@media (prefers-reduced-motion: reduce) { .cartao-giratorio { transition: none; } }
.qr-contenedor { display: grid; place-items: center; gap: 12px; padding: 16px; border-radius: 8px; background: #fff; border: 1px solid var(--linea); }
#codigoQr { display: grid; place-items: center; width: min(79.2vw, 297px); min-height: min(79.2vw, 297px); }
#codigoQr canvas, #codigoQr img { width: 100%; height: auto; image-rendering: pixelated; }
.codigo { width: 100%; overflow-wrap: anywhere; padding: 10px; border-radius: 8px; color: var(--suave); background: var(--superficie-suave); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; text-align: center; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chip-comida { display: grid; place-items: center; min-height: 70px; border-radius: 8px; background: var(--superficie-suave); border: 1px solid var(--linea); font-weight: 900; color: var(--granada); text-align: center; }
.chip-comida img { width: 38px; height: 38px; margin-bottom: -5px; object-fit: contain; }
.chip-comida:nth-child(2) img { width: 54px; height: 38px; transform: none; }
.chip-comida:nth-child(3) img { transform: scale(1.05); }
.chip-comida span { transform: translateY(-2px); font-size: 11px; color: var(--suave); font-weight: 800; }
video { width: 100%; max-height: 360px; border-radius: 8px; background: var(--camara-fondo); object-fit: cover; }
.marco-camara { position: relative; }
.marco-camara::after { content: ""; position: absolute; inset: 8px; border: 3px solid rgba(245, 179, 51, .85); border-radius: 8px; pointer-events: none; display: none; }
.marco-camara.activo::after { display: block; }
.cliente-admin { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
.numero-grande { font-size: 60px; line-height: 1; font-weight: 950; color: var(--picante); }
.historial-admin { grid-column: 1 / -1; }
.lista-historial { display: grid; gap: 8px; }
.item-historial { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 12px; border-left: 5px solid var(--punto-anadido); border-radius: 8px; background: #f4f9ff; }
.item-historial strong { display: inline-flex; align-items: center; gap: 8px; }
.icono-historial { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--punto-anadido); }
.icono-historial::before, .icono-historial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 3px; border-radius: 99px; background: currentColor; transform: translate(-50%, -50%); }
.suma-icono::after { width: 3px; height: 12px; }
.premio-icono { background: #fff; border: 2px solid var(--punto-existente); }
.regalo-icono { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 15px; line-height: 1; transform: translate(-50%, -50%); }
.premio-icono::before, .premio-icono::after { display: none; }
.item-historial.saida { border-left-color: var(--punto-retirado); background: #fff5f2; }
.item-historial.saida .icono-historial { background: var(--punto-retirado); }
.item-historial.premio-historial { border-left-color: var(--punto-existente); background: #fff8e8; }
.item-historial.premio-historial .icono-historial { background: #fff; border: 2px solid var(--punto-existente); }
.item-historial .valor-historial { color: var(--punto-anadido); font-size: 20px; font-weight: 900; }
.item-historial.saida .valor-historial { color: var(--punto-retirado); }
.item-historial.premio-historial .valor-historial { color: var(--punto-existente); }
.item-historial time { color: var(--suave); font-size: 12px; white-space: nowrap; }
.item-historial p { grid-column: 1 / -1; margin: 0; }
.paginacao-historial { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.paginacao-historial button { min-width: 88px; }
.painel-fidelidade { gap: 20px; }
.painel-fidelidade > .panel { min-width: 0; padding: 0; border-radius: 22px; gap: 0; }
.admin-icone { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.admin-titulo { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--linea); }
.admin-titulo > div { flex: 1; min-width: 0; }
.admin-titulo > .admin-icone { color: var(--suave); }
.admin-passo { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; color: #ffda8f; background: var(--carbon); font-size: 13px; font-weight: 850; }
.admin-sobretitulo { margin-bottom: 4px; color: var(--suave); font-size: 9px; font-weight: 850; letter-spacing: 1.3px; }
.painel-leitor .admin-titulo { color: #fff4dc; border: 0; border-radius: 22px 22px 0 0; background: radial-gradient(ellipse at 100% 0, rgba(245, 179, 51, .22), transparent 65%), linear-gradient(125deg, #352019, #6f2b2f); }
.painel-leitor .admin-sobretitulo, .painel-leitor .admin-titulo > .admin-icone { color: #ffda8f; }
.admin-leitor-conteudo { display: grid; gap: 16px; padding: 20px; }
.painel-leitor .marco-camara { display: grid; min-width: 0; border: 1px solid var(--linea); border-radius: 16px; background: linear-gradient(135deg, #fff8e8, #f4ead9); }
.leitor-espera { display: grid; justify-items: center; gap: 9px; padding: 28px 16px; text-align: center; }
.leitor-espera svg { width: 50px; height: 50px; margin-bottom: 5px; fill: none; stroke: var(--menta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.leitor-espera span { max-width: 240px; color: var(--suave); font-size: 12px; line-height: 1.5; }
.marco-camara.activo .leitor-espera { display: none; }
.painel-leitor video { display: block; border-radius: 16px; }
.painel-leitor .acciones-camara { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.painel-fidelidade button { border-radius: 12px; }
.painel-leitor button, .admin-operacoes button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.painel-leitor button:not(:disabled) { transition: transform .18s ease, box-shadow .18s ease; }
.painel-leitor button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(53, 28, 17, .14); }
.admin-separador { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: 11px; }
.admin-separador::before, .admin-separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.admin-busca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.admin-busca input { width: 100%; min-width: 0; border-radius: 12px; font-weight: 850; letter-spacing: 2px; }
.admin-leitor-conteudo > .texto-suave { font-size: 12px; line-height: 1.5; }
.admin-vazio { display: grid; justify-items: center; gap: 14px; padding: 36px 24px; text-align: center; }
.admin-vazio img { width: 86px; height: 86px; object-fit: contain; transform: rotate(-15deg); }
.admin-vazio p { max-width: 300px; font-size: 13px; line-height: 1.6; }
.admin-vazio > span { padding: 8px 12px; border-radius: 999px; color: #68431a; background: #fff1cf; font-size: 11px; font-weight: 800; }
.painel-cliente .cliente-admin { gap: 0; padding: 0; border: 0; border-radius: 0 0 22px 22px; }
.admin-identidade { display: grid; gap: 14px; min-width: 0; padding: 22px; color: #fff4dc; background: radial-gradient(ellipse at 100% 0, rgba(245, 179, 51, .22), transparent 65%), linear-gradient(125deg, #352019, #6f2b2f); }
.admin-identidade-marca { display: flex; align-items: center; gap: 10px; color: #ffda8f; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.admin-identidade-marca img { width: 38px; height: 38px; border-radius: 8px; }
.admin-identidade h2 { font-size: clamp(17px, 3vw, 22px); line-height: 1.35; overflow-wrap: anywhere; }
.admin-identificadores { display: flex; align-items: start; flex-wrap: wrap; gap: 10px 16px; font-size: 11px; }
.admin-identificadores > p { padding: 6px 9px; border: 1px solid rgba(255, 244, 220, .25); border-radius: 6px; }
.admin-identificadores details { min-width: 0; padding: 6px 0; color: #f1d3b8; }
.admin-identificadores summary { cursor: pointer; }
.admin-identificadores details p { margin-top: 8px; overflow-wrap: anywhere; }
.admin-selos { display: grid; gap: 16px; padding: 22px; background: radial-gradient(ellipse at 100% 0, #ffe8a8, transparent 65%), #fff1cf; }
.admin-saldo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-saldo > div > p { color: #68431a; font-size: 12px; font-weight: 750; }
.admin-total { display: flex; align-items: baseline; gap: 7px; }
.admin-total .numero-grande { font-size: 52px; color: #3d2206; }
.admin-total > span { color: #866039; font-size: 18px; font-weight: 800; }
.admin-estado-pontos { max-width: 175px; padding: 8px 10px; border: 1px solid #d7c6a3; border-radius: 9px; color: #68431a; background: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 750; }
.admin-estado-pontos.com-alteracoes { border-color: #6599c9; color: #234f78; background: #e8f3ff; }
.admin-selos .progreso { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.admin-selos .marca-punto { border: 2px dashed #c8a46b; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.admin-selos .marca-punto::after { inset: 35%; border: 0; background: #dbc7a1; }
.admin-selos .marca-punto.llena { border: 2px solid #bb7720; background: var(--punto-existente); }
.admin-selos .marca-punto.pendiente { border: 2px solid #3e78aa; background: var(--punto-anadido); }
.admin-selos .marca-punto.retirado { border: 2px dashed #b9543c; background: var(--punto-retirado); }
.admin-selos .marca-punto:has(img)::after { display: none; }
.admin-selos .marca-punto img { opacity: 1; }
.admin-selos .marca-punto.retirado img { opacity: .45; }
.admin-selos .leyenda-puntos { color: #68431a; font-size: 11px; }
.admin-selos .leyenda-punto { border-radius: 50%; }
.admin-selos .premio { justify-content: center; font-size: 13px; }
.admin-operacoes { display: grid; gap: 12px; padding: 22px; border-top: 2px dashed var(--linea); }
.admin-operacoes .acciones-puntos button span { position: relative; flex: 0 0 16px; width: 16px; height: 16px; font-size: 0; }
.admin-operacoes .acciones-puntos button span::before, .admin-operacoes .boton-sumar-punto span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; border-radius: 3px; background: currentColor; transform: translate(-50%, -50%); }
.admin-operacoes .boton-sumar-punto span::after { width: 3px; height: 14px; }
.admin-acoes-finais { grid-template-columns: 1fr 1fr; }
.admin-operacoes .boton-fechar { color: #493426; background: #d9bea0; box-shadow: none; }
.painel-fidelidade .historial-admin { overflow: hidden; }
.historial-admin .lista-historial { padding: 20px; gap: 10px; }
.historial-admin .lista-historial > .texto-suave { padding: 14px 0; text-align: center; font-size: 13px; }
.historial-admin .item-historial { border-left-width: 3px; border-radius: 12px; gap: 8px 12px; padding: 15px; }
.historial-admin .item-historial strong { font-size: 14px; }
.historial-admin .item-historial p { padding-left: 32px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.historial-admin .paginacao-historial { justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 12px; }
.historial-admin .paginacao-historial button { min-width: 0; padding: 0 14px; font-size: 12px; }
.historial-admin .paginacao-historial button:not(:disabled) { color: var(--tinta); background: var(--boton-secundario); box-shadow: none; }
.painel-fidelidade button:focus-visible, .admin-identificadores summary:focus-visible { outline: 3px solid var(--azafran); outline-offset: 3px; }
@media (min-width: 1200px) {
  .dos-columnas.painel-fidelidade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-fidelidade:has(#adminCliente.oculto) > .painel-cliente { align-self: stretch; grid-template-rows: auto 1fr; }
  .painel-fidelidade:has(#adminCliente.oculto) .admin-vazio { align-content: center; }
  .dos-columnas.painel-fidelidade:has(#adminCliente:not(.oculto)) { row-gap: 0; }
  .painel-fidelidade:has(#adminCliente:not(.oculto)) > .painel-leitor { grid-column: 1; grid-row: 1 / span 3; grid-template-rows: subgrid; align-self: stretch; }
  .painel-fidelidade:has(#adminCliente:not(.oculto)) .admin-leitor-conteudo { grid-row: 2 / span 2; align-content: start; }
  .painel-fidelidade:has(#adminCliente:not(.oculto)) > .painel-cliente { grid-column: 2; grid-row: 1 / span 4; grid-template-rows: subgrid; }
  .painel-fidelidade #adminCliente:not(.oculto) { display: contents; }
  .painel-fidelidade:has(#adminCliente:not(.oculto)) > .historial-admin { grid-row: 5; margin-top: 20px; }
  .painel-cliente .admin-identidade { gap: 6px; padding: 12px 18px; }
  .painel-cliente .admin-identidade-marca img { width: 34px; height: 34px; }
  .painel-cliente .admin-identidade h2 { font-size: 18px; }
  .painel-cliente .admin-identificadores > p { padding: 4px 9px; }
  .painel-cliente .admin-identificadores details { padding: 4px 0; }
  .painel-cliente .admin-selos { align-content: center; gap: 10px; padding: 16px 18px; }
  .painel-cliente .admin-total .numero-grande { font-size: 40px; }
  .painel-cliente .admin-selos .marca-punto { width: min(100%, 74px); justify-self: center; }
  .painel-cliente .admin-operacoes { padding: 18px; border-radius: 0 0 22px 22px; }
}
@media (max-width: 560px) {
  .painel-fidelidade { gap: 16px; }
  .admin-titulo, .admin-leitor-conteudo, .admin-identidade, .admin-selos, .admin-operacoes, .historial-admin .lista-historial { padding: 18px; }
  .admin-busca { grid-template-columns: 1fr; }
  .admin-operacoes .acciones-puntos { gap: 8px; }
  .admin-operacoes .acciones-puntos button { padding: 0 8px; gap: 6px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .painel-fidelidade button:not(:disabled), .painel-fidelidade button:not(:disabled):hover, .painel-fidelidade button:not(:disabled):focus-visible { transition: none; transform: none; }
}
.aviso { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 20; display: none; padding: 13px 14px; border-radius: 8px; color: #fff; background: var(--carbon); box-shadow: var(--sombra); }
.aviso.visible { display: block; }
.terminos { display: grid; gap: 10px; border: 1px dashed var(--borde-puntos); border-radius: 8px; background: var(--fondo-puntos); padding: 12px; }
.consentimento-linha { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 14px; }
.consentimento-linha input { width: 18px; min-height: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--picante); }
.consentimento-linha svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.consentimento-linha label { display: inline; font-size: inherit; font-weight: inherit; cursor: pointer; }
.consentimento-linha p { margin: 4px 0 0; font-size: 12px; color: var(--suave); }
.consentimento-linha .enlace-legal { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.consentimento-promocoes { border-top: 1px solid var(--linea); padding-top: 14px; margin-top: 4px; }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--tinta); font-size: 14px; }
.check input { width: 20px; min-height: 20px; flex: 0 0 auto; margin-top: 1px; }
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center; padding: 14px; background: var(--modal-fondo); }
.modal .panel { width: min(100%, 560px); max-height: 86vh; overflow: auto; }
#modalArticulo { place-items: center; padding: clamp(10px, 3vh, 28px); background: rgba(43, 25, 20, .62); backdrop-filter: blur(6px); }
#modalArticulo .modal-articulo-panel { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; width: min(100%, 820px); max-height: min(90vh, 920px); padding: 30px; overflow: auto; border: 1px solid rgba(245, 179, 51, .42); border-radius: 24px; background: #fffdf8; box-shadow: 0 24px 70px rgba(23, 12, 8, .38); }
#formArticulo::-webkit-scrollbar { width: 10px; height: 10px; }
#formArticulo::-webkit-scrollbar-track { margin: 24px 0; background: transparent; }
#formArticulo::-webkit-scrollbar-thumb { border: 3px solid #fffdf8; border-radius: 999px; background: #b49b83; }
#formArticulo::-webkit-scrollbar-thumb:hover { background: #8c725d; }
#formArticulo::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  #formArticulo { scrollbar-width: thin; scrollbar-color: #b49b83 #fffdf8; }
}
#formArticulo > h2, #formArticulo > .articulo-campo-completo, #formArticulo > label.check, #formArticulo > .acciones { grid-column: 1 / -1; }
#formArticulo > h2 { padding: 0 48px 14px 0; border-bottom: 1px solid var(--linea); color: var(--tinta); font-size: 27px; letter-spacing: -.5px; }
.modal-articulo-panel > .boton-cerrar-modal { top: 22px; right: 22px; z-index: 2; width: 38px; min-width: 38px; height: 38px; min-height: 38px; border: 1px solid var(--linea); color: var(--tinta); background: #fff4dc; }
.modal-articulo-panel > .boton-cerrar-modal:hover, .modal-articulo-panel > .boton-cerrar-modal:focus-visible { color: var(--tinta); background: #ffe3a8; }
#formArticulo > label { align-content: start; min-width: 0; }
#formArticulo .articulo-seccion { display: grid; gap: 20px; min-width: 0; padding-top: 24px; border-top: 1px solid var(--linea); }
#formArticulo .articulo-separador { padding-top: 24px; border-top: 1px solid var(--linea); }
#formArticulo .articulo-imagens-variantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px 22px; }
#formArticulo .articulo-imagens-variantes label { min-width: 0; overflow-wrap: anywhere; }
#formArticulo .articulo-dietas { display: flex; flex-wrap: wrap; gap: 14px 24px; }
#formArticulo .catalogo-campo { display: grid; align-content: start; gap: 10px; min-width: 0; }
#formArticulo .catalogo-opcion { display: flex; align-items: center; gap: 4px; }
#formArticulo .catalogo-opcion .sugestion-categoria { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#formArticulo .catalogo-eliminar { display: grid; place-items: center; flex: 0 0 36px; min-height: 36px; padding: 0; border-radius: 8px; color: var(--picante); background: transparent; box-shadow: none; }
#formArticulo .catalogo-eliminar:hover, #formArticulo .catalogo-eliminar:focus-visible { background: var(--superficie-suave); }
#formArticulo .catalogo-eliminar:disabled { color: var(--desactivado-texto); cursor: not-allowed; }
#formArticulo .catalogo-eliminar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#formArticulo .catalogos-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; min-width: 0; }
#formArticulo .catalogos-par > .catalogo-campo { grid-row: span 4; grid-template-rows: subgrid; align-content: normal; }
#formArticulo .catalogos-par .catalogo-selecionados, #formArticulo .catalogos-par .catalogo-selecionados:empty { display: flex; align-content: start; align-items: start; }
#formArticulo .catalogo-selector { display: flex; align-items: stretch; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 12px; color: var(--tinta); background: #fff; box-shadow: none; text-align: left; }
#formArticulo .catalogo-texto { display: flex; align-items: center; flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--linea); border-radius: 12px 0 0 12px; font-size: 13px; font-weight: 780; }
#formArticulo .catalogo-selector .boton-desplegable { flex: 0 0 48px; border-radius: 0 12px 12px 0; }
#formArticulo .catalogo-selector:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
#formArticulo .catalogo-selecionados { display: flex; flex-wrap: wrap; gap: 8px; }
#formArticulo .catalogo-selecionados:empty { display: none; }
#formArticulo .catalogo-etiqueta { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%; padding: 0 4px 0 12px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta); background: var(--crema); box-shadow: none; font-size: 13px; overflow-wrap: anywhere; }
#formArticulo .catalogo-etiqueta > span:first-child { min-width: 0; }
#formArticulo .catalogo-etiqueta-cierre { position: relative; flex: 0 0 28px; height: 32px; font-size: 0; }
#formArticulo .catalogo-etiqueta-cierre::before, #formArticulo .catalogo-etiqueta-cierre::after { position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 999px; background: currentColor; content: ""; }
#formArticulo .catalogo-etiqueta-cierre::before { transform: translate(-50%, -50%) rotate(45deg); }
#formArticulo .catalogo-etiqueta-cierre::after { transform: translate(-50%, -50%) rotate(-45deg); }
#formArticulo .catalogo-novo { display: flex; flex-wrap: wrap; gap: 8px; }
#formArticulo .catalogo-novo input { flex: 1 1 140px; width: 0; }
#formArticulo .catalogo-novo button { padding: 0 12px; font-size: 12px; }
#formArticulo .catalogo-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#formArticulo input:not([type="checkbox"]), #formArticulo textarea { min-width: 0; border-radius: 12px; background: #fff; }
#formArticulo textarea { min-height: 104px; resize: vertical; }
#formArticulo .campo-sugestiones-control input { border-radius: 12px 0 0 12px; }
#formArticulo .campo-sugestiones-control .boton-desplegable { border-radius: 0 12px 12px 0; }
#formArticulo > label.check { align-items: center; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--fondo-puntos); color: var(--tinta); }
#formArticulo > .acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 14px; border-top: 1px solid var(--linea); }
.boton-cerrar-modal { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; color: var(--suave); background: transparent; box-shadow: none; font-size: 0; }
.boton-cerrar-modal::before, .boton-cerrar-modal::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 4px; border-radius: 999px; background: currentColor; }
.boton-cerrar-modal::before { transform: translate(-50%, -50%) rotate(45deg); }
.boton-cerrar-modal::after { transform: translate(-50%, -50%) rotate(-45deg); }
.boton-cerrar-modal:hover, .boton-cerrar-modal:focus-visible { color: var(--tinta); background: var(--boton-secundario); box-shadow: none; transform: none; }
body.modal-articulo-abierto { overflow: hidden; }
body.modal-terminos-abierto { overflow: hidden; }
#modalTerminos { place-items: center; background: rgba(43, 25, 20, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#panelTerminos { position: relative; overscroll-behavior: contain; }
#tituloTerminos { padding-right: 42px; }
.terminos-esqueleto { gap: 28px; padding: 12px; border-radius: 12px; background: var(--superficie-suave); }
.oculto { display: none !important; }

@media (min-width: 1200px) {
  .app { padding: 26px;   }
  .dos-columnas { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .menu-contenido { grid-template-columns: 1fr; }
  .acciones { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .lista-menu-categoria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acceso { gap: 18px; }
  .contadores-visuales { width: calc(100% - 20px); box-sizing: border-box; justify-content: space-between; gap: 3px; padding-right: 10px; padding-left: 10px; }
  .contadores-visuales i { width: 10px; }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .lista-menu-categoria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .sello.marca-logo { width: 72px; height: 72px; }
  .producto-pagina > .producto-cabecera { gap: 10px; }
  .producto-pagina > .producto-cabecera .marca { flex: 1; gap: 8px; }
  .producto-pagina > .producto-cabecera .marca > div:not(.sello) { min-width: 0; }
  .producto-pagina > .producto-cabecera .marca-logo { width: 44px; height: 44px; border-radius: 8px; }
  .producto-pagina > .producto-cabecera h1 { font-size: clamp(17px, 4.6vw, 24px); line-height: 1.15; }
  .producto-pagina > .producto-cabecera .texto-suave { margin-top: 4px; font-size: 12px; }
  .producto-volver { flex: 0 0 104px; gap: 6px; min-height: 44px; padding: 6px 10px; font-size: 12px; }
  .producto-volver > span:first-child { flex: 0 0 24px; width: 24px; height: 24px; }
  .producto-volver svg { width: 20px; height: 20px; }
  .cabecera-app .sello.sello-logo { width: 76px; height: 76px; }
  .alergenos-destacados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .progreso { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; min-height: 0; }
  .marca-punto { aspect-ratio: 1; min-height: 0; }
  .item-historial { grid-template-columns: minmax(0, 1fr) auto; }
  .item-historial time { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  #formArticulo .catalogos-par { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  #formArticulo .catalogos-par > .catalogo-campo { grid-row: auto; grid-template-rows: none; }
  #modalArticulo .modal-articulo-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 18px 18px; }
  #formArticulo > h2, #formArticulo > label, #formArticulo > .acciones { grid-column: 1; }
  #formArticulo > .acciones { grid-template-columns: 1fr; }
}