/* =========================================================================
   Sir Neko GP — Piezas canónicas (sn-ui-*)
   Implementan MARCA.md › Piezas y estados con los roles de design-tokens.css.
   Prefijo propio para no chocar con las clases históricas (.sn-card, .sn-badge…).
   Carga en la portada (inc/home.php) y en la muestra (page-templates/sistema-diseno.php);
   cada parte de la web lo suma al migrar (MARCA.md › Adopción).
   Las clases .is-hover / .is-focus existen para mostrar estados en la muestra.
   ========================================================================= */

/* ---- Texto ---- */
.sn-ui-title {
  font-family: var(--sn-font-display);
  font-weight: 700;
  line-height: var(--sn-lh-title);
  letter-spacing: -0.02em;
  color: var(--sn-text-title);
  margin: 0;
}
.sn-ui-text {
  font-family: var(--sn-font-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: var(--sn-lh-text);
  color: var(--sn-text);
  margin: 0;
}
.sn-ui-text--muted { color: var(--sn-text-muted); font-size: .9375rem; }
.sn-ui-label {
  font-family: var(--sn-font-display);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sn-text-title);
}

/* ---- Foco (todas las piezas interactivas) ---- */
.sn-ui-btn:focus-visible, .sn-ui-btn.is-focus,
.sn-ui-input:focus-visible, .sn-ui-input.is-focus,
.sn-ui-option:has(input:focus-visible), .sn-ui-option.is-focus,
.sn-ui-check input:focus-visible {
  outline: 2px solid var(--sn-focus);
  outline-offset: 2px;
}

/* ---- Botones ---- */
.sn-ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--sn-tap-min);
  padding: .75em 1.6em;
  border: 0;
  border-radius: var(--sn-radius-btn);
  background: var(--sn-btn-bg);
  color: var(--sn-btn-text);
  font-family: var(--sn-font-display);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sn-dur-fast) var(--sn-ease), transform var(--sn-dur-fast) var(--sn-ease);
}
/* GeneratePress pinta button:focus (0,1,1): mantener el color propio al enfocar */
.sn-ui-btn:focus { background: var(--sn-btn-bg); color: var(--sn-btn-text); }
.sn-ui-btn--action:focus { background: var(--sn-action-bg); color: var(--sn-action-text); }
.sn-ui-btn:hover, .sn-ui-btn.is-hover { background: var(--sn-btn-bg-hover); color: var(--sn-btn-text); transform: translateY(-1px); }
.sn-ui-btn--action { background: var(--sn-action-bg); color: var(--sn-action-text); }
.sn-ui-btn--action:hover, .sn-ui-btn--action.is-hover { background: var(--sn-action-bg-hover); color: var(--sn-action-text); }
.sn-ui-btn--block { display: flex; width: 100%; }
.sn-ui-btn:disabled, .sn-ui-btn[aria-disabled="true"] {
  opacity: var(--sn-disabled-opacity); cursor: not-allowed; transform: none;
}
.sn-ui-btn:disabled:hover, .sn-ui-btn[aria-disabled="true"]:hover { background: var(--sn-btn-bg); }
.sn-ui-btn--action:disabled:hover, .sn-ui-btn--action[aria-disabled="true"]:hover { background: var(--sn-action-bg); }
/* Cargando: aria-busy="true" + texto que diga qué pasa («Agregando…») */
.sn-ui-btn[aria-busy="true"] { cursor: progress; transform: none; }
.sn-ui-btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: sn-ui-spin .8s linear infinite;
}
@keyframes sn-ui-spin { to { transform: rotate(360deg); } }

/* ---- Campos ---- */
.sn-ui-field { display: grid; gap: .4rem; }
.sn-ui-field__label { font-family: var(--sn-font-text); font-weight: 600; font-size: .9375rem; color: var(--sn-text-title); }
.sn-ui-field__help { font-family: var(--sn-font-text); font-size: .875rem; color: var(--sn-text-muted); }
.sn-ui-input.sn-ui-input {
  width: 100%;
  min-height: var(--sn-tap-min);
  padding: .65em .9em;
  border: 1px solid var(--sn-line-control);
  border-radius: var(--sn-radius-btn);
  background: var(--sn-surface);
  color: var(--sn-text-title);
  font-family: var(--sn-font-text);
  font-size: 1rem; /* 16px: evita el zoom de iOS al enfocar */
  line-height: 1.4;
  box-sizing: border-box;
}
.sn-ui-input.sn-ui-input:focus { border-color: var(--sn-line-control); background: var(--sn-surface); color: var(--sn-text-title); box-shadow: none; }
.sn-ui-input::placeholder { color: var(--sn-text-muted); }
.sn-ui-input:disabled { opacity: var(--sn-disabled-opacity); cursor: not-allowed; }
.sn-ui-field.is-invalid .sn-ui-input.sn-ui-input { border: 2px solid var(--sn-error-ink); }
.sn-ui-field__error {
  display: flex; gap: .4em; align-items: baseline;
  font-family: var(--sn-font-text); font-size: .875rem; font-weight: 600; color: var(--sn-error-ink);
}
.sn-ui-field__error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--sn-error-ink); color: var(--sn-surface); font-size: .75em; }

/* Casillas y radios sueltos: negro, no verde (el verde es solo compra) */
.sn-ui-check { display: inline-flex; align-items: center; gap: .6em; min-height: var(--sn-tap-min); font-family: var(--sn-font-text); color: var(--sn-text); cursor: pointer; }
.sn-ui-check input { width: 1.2em; height: 1.2em; margin: 0; accent-color: var(--sn-text-title); }

/* ---- Opción seleccionable (variante, envío, filtro) ---- */
.sn-ui-options { display: flex; flex-wrap: wrap; gap: .6rem; border: 0; padding: 0; margin: 0; }
.sn-ui-option {
  position: relative;
  display: inline-flex; align-items: center; gap: .5em;
  min-height: var(--sn-tap-min);
  padding: .6em 1.1em;
  border: 1px solid var(--sn-line-control);
  border-radius: var(--sn-radius-btn);
  background: var(--sn-surface);
  color: var(--sn-text-title);
  font-family: var(--sn-font-text); font-weight: 600; font-size: .9375rem;
  cursor: pointer;
  transition: background-color var(--sn-dur-fast) var(--sn-ease), border-color var(--sn-dur-fast) var(--sn-ease);
}
.sn-ui-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sn-ui-option:hover { border-color: var(--sn-selected-line); }
.sn-ui-option:has(input:checked), .sn-ui-option.is-selected {
  background: var(--sn-selected-bg);
  border: 2px solid var(--sn-selected-line);
  padding: calc(.6em - 1px) calc(1.1em - 1px);
}
/* La marca ✓ hace que lo elegido no dependa solo del color */
.sn-ui-option:has(input:checked)::before, .sn-ui-option.is-selected::before { content: "✓"; font-weight: 700; }
.sn-ui-option:has(input:disabled) { opacity: var(--sn-disabled-opacity); cursor: not-allowed; text-decoration: line-through; }

/* ---- Etiqueta (cápsula) ---- */
.sn-ui-chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em 1em;
  border-radius: 9999px;
  background: var(--sn-surface);
  box-shadow: var(--sn-shadow-soft);
  color: var(--sn-text-title);
  font-family: var(--sn-font-display); font-weight: 700; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}
.sn-ui-chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--sn-palette-mint-deep); flex: none; }

/* ---- Tarjetas y bandas ---- */
.sn-ui-card { background: var(--sn-surface); border-radius: var(--sn-radius-card); box-shadow: var(--sn-shadow-card); padding: clamp(1rem, 3vw, 1.5rem); }
.sn-ui-card--panel { border-radius: var(--sn-radius-panel); padding: clamp(1.25rem, 4vw, 2.5rem); }
.sn-ui-card--link { transition: transform var(--sn-dur) var(--sn-ease); }
.sn-ui-card--link:hover { transform: translateY(-2px); }
/* Bandas de contenido: el color dice qué es */
.sn-ui-band { border-radius: var(--sn-radius-panel); padding: clamp(1.25rem, 4vw, 2.5rem); }
.sn-ui-band--especias { background: var(--sn-accent-especias); }
.sn-ui-band--hierbas { background: var(--sn-accent-hierbas); }
.sn-ui-band--usos { background: var(--sn-accent-usos); }
.sn-ui-band--preguntas { background: var(--sn-accent-preguntas); }
.sn-ui-band .sn-ui-text--muted { color: var(--sn-text); } /* el gris no alcanza contraste sobre pastel */

/* ---- Avisos ---- */
.sn-ui-notice {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: var(--sn-radius-card);
  font-family: var(--sn-font-text); font-size: .9375rem; line-height: 1.5; color: var(--sn-text-title);
}
.sn-ui-notice__icon { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--sn-surface); font-weight: 700; font-size: .875rem; line-height: 1; }
.sn-ui-notice p { margin: 0; color: inherit; } /* el tema pinta todo <p> en gris */
.sn-ui-notice strong { font-weight: 700; }
.sn-ui-notice--success { background: var(--sn-success-bg); box-shadow: inset 0 0 0 1.5px var(--sn-success-line); }
.sn-ui-notice--success .sn-ui-notice__icon { background: var(--sn-success-ink); }
.sn-ui-notice--info { background: var(--sn-info-bg); box-shadow: inset 0 0 0 1.5px var(--sn-info-line); }
.sn-ui-notice--info .sn-ui-notice__icon { background: var(--sn-info-ink); }
.sn-ui-notice--warning { background: var(--sn-warning-bg); box-shadow: inset 0 0 0 1.5px var(--sn-warning-line); }
.sn-ui-notice--warning .sn-ui-notice__icon { background: var(--sn-warning-ink); }
.sn-ui-notice--error { background: var(--sn-error-bg); box-shadow: inset 0 0 0 1.5px var(--sn-error-line); color: var(--sn-error-ink); }
.sn-ui-notice--error .sn-ui-notice__icon { background: var(--sn-error-ink); }

/* ---- Precio (funciona también con el HTML de precio de WooCommerce) ---- */
.sn-ui-price { font-family: var(--sn-font-text); font-weight: 600; font-size: 1.25rem; color: var(--sn-price); }
.sn-ui-price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.sn-ui-price del, .sn-ui-price del .woocommerce-Price-amount { color: var(--sn-text-muted); font-weight: 400; font-size: .8em; margin-right: .35em; }
.sn-ui-price ins { text-decoration: none; }

/* ---- Estado vacío con la mascota ---- */
.sn-ui-empty { display: grid; justify-items: center; gap: 1rem; text-align: center; max-width: 28rem; margin-inline: auto; }
.sn-ui-empty__mascot { width: auto; height: clamp(180px, 40vw, 240px); }

/* ---- «No encontrado» (404.php y búsqueda sin resultados: sngp_empty_state en inc/shop.php) ---- */
.sn-404 { padding: clamp(2rem, 6vw, 4rem) 16px clamp(3rem, 8vw, 6rem); }
.sn-notfound { max-width: 34rem; padding-block: clamp(1rem, 4vw, 2.5rem); }
.sn-notfound__mascot { width: auto; height: clamp(180px, 32vw, 240px); }
.sn-notfound__title { font-size: clamp(1.6rem, 4.5vw, 2.4rem); overflow-wrap: anywhere; }
.sn-notfound__search { display: flex; gap: .5rem; width: 100%; }
.sn-notfound__search .sn-ui-input { flex: 1; min-width: 0; }
.sn-notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.sn-notfound__links .sn-ui-chip { text-decoration: none; }
.sn-notfound__links .sn-ui-chip:hover { box-shadow: inset 0 0 0 1px var(--sn-line-control); }
.sn-notfound__links .sn-ui-chip:focus-visible { outline: 2px solid var(--sn-focus); outline-offset: 2px; }
.woocommerce-cart .sn-notfound ~ .return-to-shop { display: none; } /* el bloque ya trae «Ir a la tienda» */

/* ---- Banner de home (promo): texto real + imagen sin texto sobre una banda pastel ---- */
.sn-ui-promo {
  display: grid; grid-template-columns: 1fr; align-items: end;
  overflow: hidden;
  border-radius: var(--sn-radius-panel);
  background: var(--sn-promo-bg, var(--sn-palette-cream));
}
.sn-ui-promo--rosa { --sn-promo-bg: var(--sn-accent-preguntas); }
.sn-ui-promo--menta { --sn-promo-bg: var(--sn-accent-hierbas); }
.sn-ui-promo--manteca { --sn-promo-bg: var(--sn-accent-especias); }
.sn-ui-promo--celeste { --sn-promo-bg: var(--sn-accent-usos); }
.sn-ui-promo__copy {
  display: grid; gap: .9rem; justify-items: start; align-self: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem) 0;
}
.sn-ui-promo__title { font-size: clamp(2rem, 5.5vw, 3.6rem); }
.sn-ui-promo__text { max-width: 30rem; }
.sn-ui-promo__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sn-ui-promo__media { display: flex; justify-content: center; align-items: flex-end; min-height: 0; }
.sn-ui-promo__media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 250px; object-fit: contain; object-position: bottom; }
@media (min-width: 820px) {
  .sn-ui-promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 420px; }
  .sn-ui-promo__copy { padding-bottom: clamp(1.5rem, 5vw, 3.5rem); }
  .sn-ui-promo__media { justify-content: flex-end; padding-right: clamp(1rem, 3vw, 2.5rem); padding-top: 1.5rem; }
  .sn-ui-promo__media img { max-height: 400px; }
}

/* ---- Tarjeta de colección: pastel de la categoría + gato en su rol ---- */
.sn-ui-collections { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sn-ui-collections { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sn-ui-collection {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: var(--sn-radius-card);
  background: var(--sn-collection-bg, var(--sn-surface));
  color: var(--sn-text-title); text-decoration: none;
  transition: transform var(--sn-dur) var(--sn-ease), box-shadow var(--sn-dur) var(--sn-ease);
}
.sn-ui-collection:hover { transform: translateY(-3px); box-shadow: var(--sn-shadow-card); color: var(--sn-text-title); }
.sn-ui-collection:focus-visible { outline: 2px solid var(--sn-focus); outline-offset: 3px; }
.sn-ui-collection--rosa { --sn-collection-bg: var(--sn-accent-preguntas); }
.sn-ui-collection--menta { --sn-collection-bg: var(--sn-accent-hierbas); }
.sn-ui-collection--manteca { --sn-collection-bg: var(--sn-accent-especias); }
.sn-ui-collection--celeste { --sn-collection-bg: var(--sn-accent-usos); }
.sn-ui-collection__label {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1rem 1.1rem .25rem;
  font-family: var(--sn-font-display); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.15;
}
.sn-ui-collection__label::after { content: "→"; font-size: .9em; transition: transform var(--sn-dur-fast) var(--sn-ease); }
.sn-ui-collection:hover .sn-ui-collection__label::after { transform: translateX(3px); }
.sn-ui-collection__media { display: block; aspect-ratio: 1 / 1; padding: .25rem .6rem 0; }
/* Caja uniforme: el gato (más alto) y los productos (más anchos) apoyan abajo al centro */
.sn-ui-collection__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* ---- Beneficios: tarjeta pastel con objeto 3D y texto real ---- */
.sn-ui-benefits { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .sn-ui-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sn-ui-benefit {
  display: grid; justify-items: center; align-content: start; gap: .4rem; text-align: center;
  padding: clamp(1rem, 3vw, 1.75rem) clamp(.75rem, 2vw, 1.25rem);
  border-radius: var(--sn-radius-card);
  background: var(--sn-benefit-bg, var(--sn-surface));
}
.sn-ui-benefit--rosa { --sn-benefit-bg: var(--sn-accent-preguntas); }
.sn-ui-benefit--menta { --sn-benefit-bg: var(--sn-accent-hierbas); }
.sn-ui-benefit--manteca { --sn-benefit-bg: var(--sn-accent-especias); }
.sn-ui-benefit--celeste { --sn-benefit-bg: var(--sn-accent-usos); }
.sn-ui-benefit__media img { display: block; width: auto; height: clamp(84px, 14vw, 120px); object-fit: contain; }
.sn-ui-benefit__title { font-size: clamp(1rem, 2.2vw, 1.25rem); }
.sn-ui-benefit__text { font-size: .9375rem; line-height: 1.45; }

/* ---- Confianza: panel con llamado a Mayoristas + cintas de logos (inc/home.php sngp_home_v2_trust) ---- */
.sn-ui-trust__panel {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border-radius: var(--sn-radius-panel);
  background: var(--sn-accent-hierbas);
  overflow: hidden;
}
@media (min-width: 900px) { .sn-ui-trust__panel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.sn-ui-trust__copy { display: grid; gap: 1rem; justify-items: start; }
.sn-ui-trust__title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.sn-ui-trust__copy .sn-ui-text { color: var(--sn-text); max-width: 32rem; }
.sn-ui-trust__ask { margin: .25rem 0 -.4rem; font-family: var(--sn-font-display); font-weight: 700; font-size: 1.05rem; color: var(--sn-text-title); }
.sn-ui-marquee { display: grid; gap: .9rem; min-width: 0; }
.sn-ui-marquee__row {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sn-ui-marquee__track {
  display: flex; flex: none; align-items: center; gap: .9rem;
  margin: 0; padding: 0 .45rem; list-style: none;
  animation: sn-ui-marquee 48s linear infinite;
}
.sn-ui-marquee__row--rev .sn-ui-marquee__track { animation-direction: reverse; animation-duration: 56s; }
.sn-ui-marquee__row:hover .sn-ui-marquee__track { animation-play-state: paused; }
.sn-ui-marquee__track li {
  display: grid; place-items: center; flex: none;
  width: clamp(120px, 14vw, 150px); height: 72px; padding: .6rem 1rem;
  background: var(--sn-surface); border-radius: var(--sn-radius-card);
}
/* Mismo peso visual para todos: alto fijo, ancho tope y un solo tono */
.sn-ui-marquee__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 38px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .82; }
@keyframes sn-ui-marquee { to { transform: translateX(-100%); } }

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  .sn-ui-btn, .sn-ui-option, .sn-ui-card--link, .sn-ui-collection { transition: none; }
  .sn-ui-btn:hover, .sn-ui-btn.is-hover, .sn-ui-card--link:hover, .sn-ui-collection:hover { transform: none; }
  .sn-ui-collection:hover .sn-ui-collection__label::after { transform: none; }
  .sn-ui-btn[aria-busy="true"]::before { animation-duration: 2.4s; }
  /* Cintas quietas: se muestran todos los logos en grilla y se oculta la copia del loop */
  .sn-ui-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1; }
  .sn-ui-marquee__track[aria-hidden="true"] { display: none; }
  .sn-ui-marquee__row { -webkit-mask-image: none; mask-image: none; }
}