/*
  Acabado visual compartido de NazAleart.
  Edwin: esta capa mejora estados, controles y movimiento en todo el proyecto.
  Alejandra puede ajustar redondez, sombras, espacio y animaciones desde Apariencia.
*/

:root {
  --experience-radius: 18px;
  --experience-radius-small: 12px;
  --experience-shadow-mix: 11%;
  --experience-shadow-hover-mix: 15%;
  --experience-space: 1;
  --experience-ease: cubic-bezier(.22, 1, .36, 1);
  --experience-fast: 180ms;
  --experience-medium: 420ms;
}

html[data-visual-density="compact"] {
  --experience-space: .82;
}

html[data-visual-density="comfortable"] {
  --experience-space: 1;
}

html.ui-polish-ready body {
  animation: experiencePageIn .36s var(--experience-ease) both;
}

html[data-visual-motion="off"] *,
html[data-visual-motion="off"] *::before,
html[data-visual-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

body:not(:has(.navbar)) :is(.panel, .preview-panel, .controls-panel, .form-panel, .table-panel, .profile-panel, .method-card, .comment-card, .device-card, .product-card, .media-card, .category-group, .overview-card, .toolbar) {
  border-radius: var(--experience-radius) !important;
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--kc-admin-text, #302434) var(--experience-shadow-mix), transparent) !important;
  transition:
    transform var(--experience-fast) var(--experience-ease),
    box-shadow var(--experience-fast) ease,
    border-color var(--experience-fast) ease;
}

body:has(.navbar) :is(.step-card, .gallery-card, .ba-card, .contact-card, .preview-panel, .form-container, .order-review-card, .account-card, .faq-item, .comment-form, .comment-card) {
  border-radius: var(--experience-radius) !important;
  transition:
    transform var(--experience-fast) var(--experience-ease),
    box-shadow var(--experience-fast) ease,
    border-color var(--experience-fast) ease;
}

body:not(:has(.navbar)) :is(.workspace, .layout, .content-grid, .list, .fields, .form-grid, .image-grid, .cards, .stats) {
  gap: calc(14px * var(--experience-space)) !important;
}

:is(button, .btn, .mini, .top-action, .hero-action, .quick-link, .back-link, .filter, .scope-btn, .palette, .tab, .choice-btn, input[type="submit"], input[type="button"]) {
  min-height: 42px;
  letter-spacing: 0;
  transition:
    transform var(--experience-fast) var(--experience-ease),
    box-shadow var(--experience-fast) ease,
    background-color var(--experience-fast) ease,
    border-color var(--experience-fast) ease,
    color var(--experience-fast) ease,
    opacity var(--experience-fast) ease !important;
  -webkit-tap-highlight-color: transparent;
}

:is(button, .btn, .mini, .top-action, .hero-action, .quick-link, .back-link, .filter, .scope-btn, .palette, .tab, .choice-btn):active {
  transform: translateY(1px) scale(.985) !important;
}

:is(button, .btn, .mini, input[type="submit"], input[type="button"]):disabled,
:is(button, .btn, .mini)[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58 !important;
  transform: none !important;
  box-shadow: none !important;
}

:is(button, .btn, .mini).is-working {
  position: relative;
  padding-inline-start: 42px !important;
  pointer-events: none;
}

:is(button, .btn, .mini).is-working::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: experienceSpin .72s linear infinite;
}

:is(input, textarea, select) {
  transition:
    border-color var(--experience-fast) ease,
    box-shadow var(--experience-fast) ease,
    background-color var(--experience-fast) ease !important;
}

:is(input, textarea, select):focus-visible,
:is(button, a, [role="button"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--store-primary, var(--kc-admin-green, #e86fa3)) 25%, transparent) !important;
  outline-offset: 2px !important;
}

:is(input, textarea, select):focus {
  border-color: var(--store-primary, var(--kc-admin-green, #e86fa3)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--store-primary, var(--kc-admin-green, #e86fa3)) 13%, transparent) !important;
}

.password-row {
  position: relative;
}

.password-row .toggle {
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  min-height: 36px !important;
  transform: translateY(-50%) !important;
}

.password-row .toggle:active {
  transform: translateY(-50%) scale(.98) !important;
}

:is(.loading, .loading-spinner, [data-loading]) {
  position: relative;
  overflow: hidden;
  border-radius: var(--experience-radius-small);
}

:is(.loading, [data-loading]).ui-state-loading {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 34px 18px 18px !important;
}

:is(.loading, [data-loading]).ui-state-loading::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 2px solid color-mix(in srgb, var(--store-primary, var(--kc-admin-green, #e86fa3)) 28%, transparent);
  border-top-color: var(--store-primary, var(--kc-admin-green, #e86fa3));
  border-radius: 50%;
  animation: experienceSpin .72s linear infinite;
}

:is(.loading, [data-loading]).ui-state-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, #fff 42%, transparent) 46%,
    transparent 72%
  );
  transform: translateX(-110%);
  animation: experienceShimmer 1.8s ease-in-out infinite;
}

:is(.empty, .empty-state, .detail-empty, .payment-empty, [data-empty]).ui-state-empty {
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 26px !important;
  border: 1px dashed color-mix(in srgb, var(--store-primary, var(--kc-admin-green, #e86fa3)) 28%, transparent) !important;
  background: color-mix(in srgb, var(--store-soft, var(--kc-admin-panel-2, #fff1f7)) 58%, #fff) !important;
  color: var(--store-muted, var(--kc-admin-muted, #806f80)) !important;
  text-align: center;
  line-height: 1.55;
}

:is(.empty, .empty-state, .detail-empty, .payment-empty, [data-empty]).ui-state-empty::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--store-primary, var(--kc-admin-green, #e86fa3)) 32%, transparent);
  background:
    radial-gradient(circle at 50% 50%, var(--store-primary, var(--kc-admin-green, #e86fa3)) 0 3px, transparent 4px);
  opacity: .75;
}

:is(.toast, [role="alert"]).ui-toast-polished {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: min(430px, calc(100vw - 28px));
  min-height: 48px;
  padding: 12px 18px !important;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent) !important;
  box-shadow: 0 18px 48px rgba(28, 18, 27, .22) !important;
  line-height: 1.35;
  text-align: center;
  backdrop-filter: blur(12px);
}

:is(.toast, [role="alert"]).ui-toast-polished.show {
  animation: experienceToastIn .34s var(--experience-ease) both;
}

.ui-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.ui-reveal.ui-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--experience-medium) var(--experience-ease),
    transform var(--experience-medium) var(--experience-ease);
  transition-delay: var(--experience-delay, 0ms);
}

@media (hover: hover) and (pointer: fine) {
  body:not(:has(.navbar)) :is(.method-card, .comment-card, .device-card, .product-card, .media-card, .module-card, .stat-card):not(form):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--kc-admin-green, #e86fa3) 34%, transparent) !important;
    box-shadow:
      0 24px 58px color-mix(in srgb, var(--kc-admin-text, #302434) var(--experience-shadow-hover-mix), transparent) !important;
  }

  body:has(.navbar) :is(.step-card, .gallery-card, .ba-card, .contact-card):hover {
    transform: translateY(-3px);
    box-shadow:
      0 22px 52px color-mix(in srgb, var(--store-text, #302434) var(--experience-shadow-hover-mix), transparent) !important;
  }

  :is(button, .btn, .mini, .top-action, .hero-action, .quick-link, .back-link):not(:disabled):hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 720px) {
  :root {
    --experience-radius: 16px;
    --experience-radius-small: 11px;
  }

  html.ui-polish-ready body {
    animation-duration: .24s;
  }

  :is(button, .btn, .mini, .top-action, .hero-action, .quick-link, .back-link, .filter, .scope-btn, .tab) {
    min-height: 44px;
  }

  :is(.toast, [role="alert"]).ui-toast-polished {
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 28px);
    border-radius: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .ui-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes experiencePageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes experienceShimmer {
  0%, 22% { transform: translateX(-110%); }
  72%, 100% { transform: translateX(110%); }
}

@keyframes experienceToastIn {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* polish-20260617-02: ajustes finos de lectura y equilibrio visual. */
body:has(.navbar) #galeria .gallery-grid:not(:has(.gallery-card:nth-of-type(4))) {
  justify-content: center !important;
}

body:has(.navbar) #galeria .gallery-grid:not(:has(.gallery-card:nth-of-type(4))) .gallery-card {
  flex: 0 0 min(255px, 72vw) !important;
}

body:has(.navbar) #galeria .gallery-card img {
  transform-origin: center center;
}

body:has(.navbar) #contacto .contact-grid {
  justify-content: center !important;
}

body:not(:has(.navbar)) :is(.stats .stat, .dashboard-stats .stat-tile, .readout span) {
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 94%, var(--kc-admin-panel-2, #fff1f7)), #ffffff) !important;
  border-color: color-mix(in srgb, var(--kc-admin-green, #e86fa3) 18%, #ffffff) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--kc-admin-green, #e86fa3) 8%, transparent) !important;
}

body:not(:has(.navbar)) .stats .stat strong {
  color: color-mix(in srgb, var(--kc-admin-green, #e86fa3) 88%, var(--kc-admin-text, #261923)) !important;
}

body:not(:has(.navbar)) .stats .stat strong#selectedName {
  color: var(--kc-admin-text, #261923) !important;
  font-size: clamp(1rem, 5vw, 1.25rem) !important;
  line-height: 1.08 !important;
}

body:not(:has(.navbar)) :is(.tab.active, .scope-btn.active, .palette.active, .choice-btn.active) {
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--kc-admin-green, #e86fa3) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

@media (max-width: 640px) {
  body:has(.navbar) .hero-slider-wrap#inicio .hero-content {
    align-items: end !important;
    padding-bottom: 46px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-text-wrap {
    position: relative !important;
    z-index: 4 !important;
    max-width: min(350px, calc(100vw - 42px)) !important;
    margin-inline: auto !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-text-wrap::before {
    content: "";
    position: absolute;
    inset: -20px -12px -14px;
    z-index: -1;
    border-radius: 34px;
    background:
      radial-gradient(ellipse at 50% 42%,
        color-mix(in srgb, var(--hero-overlay-color, #2f2230) 42%, transparent) 0 12%,
        color-mix(in srgb, var(--hero-overlay-color, #2f2230) 24%, transparent) 42%,
        transparent 72%);
    filter: blur(12px);
    opacity: .92;
    pointer-events: none;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero h1 {
    font-size: clamp(2.35rem, 11.2vw, 3.1rem) !important;
    line-height: .95 !important;
    text-shadow:
      0 2px 8px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 58%, transparent),
      0 16px 34px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 36%, transparent) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero p {
    max-width: 29ch !important;
    font-size: .95rem !important;
    line-height: 1.48 !important;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 58%, transparent) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-badge {
    background: color-mix(in srgb, var(--hero-overlay-color, #2f2230) 24%, transparent) !important;
    border-color: rgba(255,255,255,.38) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-primary,
  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-secondary {
    min-height: 50px !important;
    padding-inline: 12px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-trust {
    gap: 7px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-trust span {
    font-size: .72rem !important;
    min-height: 27px !important;
  }
}

/* hero-natural-20260618: portada menos "IA", mas tienda artesanal y foto real. */
body:has(.navbar) .hero-slider-wrap#inicio .slider-section::after {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--hero-overlay-color, #2f2230) 46%, transparent) 0%,
      color-mix(in srgb, var(--hero-overlay-color, #2f2230) 26%, transparent) 38%,
      transparent 76%) !important;
  backdrop-filter: blur(calc(var(--hero-overlay-blur, 0px) * .42)) !important;
  -webkit-backdrop-filter: blur(calc(var(--hero-overlay-blur, 0px) * .42)) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .slide img.slide-backdrop,
body:has(.navbar) .hero-slider-wrap#inicio .slide.active img.slide-backdrop {
  filter: saturate(.98) contrast(.98) brightness(.94) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .slide img.slide-artwork,
body:has(.navbar) .hero-slider-wrap#inicio .slide.active img.slide-artwork {
  filter: saturate(.98) contrast(.99) brightness(.98) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-content {
  width: min(1120px, 86vw) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-text-wrap {
  max-width: min(560px, 88vw) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero h1 {
  max-width: 12.6ch !important;
  font-size: clamp(3.05rem, 4.8vw, 4.65rem) !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 2px 8px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 48%, transparent),
    0 10px 28px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 22%, transparent) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero h1 em {
  color: color-mix(in srgb, var(--store-soft, #fff1f7) 82%, var(--store-primary, #e85d9b)) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero p {
  max-width: 39ch !important;
  font-size: clamp(1rem, 1.25vw, 1.1rem) !important;
  line-height: 1.58 !important;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 42%, transparent) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-badge {
  min-height: 34px !important;
  padding: 8px 15px !important;
  background: color-mix(in srgb, #ffffff 13%, transparent) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: none !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons {
  margin-top: clamp(22px, 2.6vw, 32px) !important;
  margin-bottom: 14px !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-primary,
body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-secondary {
  min-height: 48px !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px color-mix(in srgb, #20151f 18%, transparent) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-secondary {
  background: color-mix(in srgb, #ffffff 10%, transparent) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-trust {
  opacity: .86 !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-trust span {
  background: color-mix(in srgb, #21151f 34%, transparent) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: none !important;
}

@media (min-width: 901px) {
  body:has(.navbar) .hero-slider-wrap#inicio {
    min-height: clamp(620px, 78vh, 760px) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-content {
    align-items: center !important;
    padding-top: 86px !important;
  }
}

@media (max-width: 640px) {
  body:has(.navbar) .hero-slider-wrap#inicio {
    min-height: min(680px, calc(100svh - 16px)) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .slider-section::after {
    background:
      linear-gradient(180deg,
        transparent 0 24%,
        color-mix(in srgb, var(--hero-overlay-color, #2f2230) 14%, transparent) 46%,
        color-mix(in srgb, var(--hero-overlay-color, #2f2230) 48%, transparent) 100%) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-content {
    align-items: end !important;
    padding-bottom: 34px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-text-wrap {
    max-width: min(340px, calc(100vw - 46px)) !important;
    text-align: left !important;
    margin-inline: auto !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-text-wrap::before {
    opacity: 0 !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-badge {
    width: max-content !important;
    margin-inline: 0 auto !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero h1 {
    max-width: 10.6ch !important;
    margin-inline: 0 auto !important;
    font-size: clamp(2.25rem, 10.5vw, 2.85rem) !important;
    line-height: .98 !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero p {
    max-width: 28ch !important;
    margin-inline: 0 auto !important;
    font-size: .92rem !important;
    line-height: 1.52 !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-primary,
  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-secondary {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
    font-size: .86rem !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-trust {
    justify-content: flex-start !important;
    opacity: .78 !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-trust span {
    font-size: .68rem !important;
    padding-inline: 10px !important;
  }
}

/* hero-mobile-balance-20260618: evita cortes y baja el peso visual del hero en telefono. */
@media (max-width: 640px) {
  body:has(.navbar) .hero-slider-wrap#inicio {
    min-height: min(760px, calc(100svh - 8px)) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-content {
    padding-bottom: 76px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-text-wrap {
    max-width: min(326px, calc(100vw - 48px)) !important;
    inset: auto !important;
    transform: none !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero h1 {
    max-width: 10.8ch !important;
    font-size: clamp(2rem, 8.8vw, 2.52rem) !important;
    line-height: 1.01 !important;
    text-shadow:
      0 2px 8px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 54%, transparent),
      0 8px 22px color-mix(in srgb, var(--hero-overlay-color, #2f2230) 26%, transparent) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero p {
    max-width: 27ch !important;
    font-size: .89rem !important;
    line-height: 1.45 !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    gap: 8px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-primary,
  body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-secondary {
    min-height: 43px !important;
    padding-inline: 10px !important;
    font-size: .8rem !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-trust {
    display: none !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .slider-dots {
    bottom: 54px !important;
  }
}

/* delivery-polish-20260619: pulido general de tienda y Alesa sin tocar la logica. */
:root {
  --ui-radius-live: var(--experience-radius, 18px);
  --ui-shadow-live: 0 18px 46px color-mix(in srgb, var(--theme-primary, #e85d9b) var(--experience-shadow-mix, 11%), transparent);
}

html[data-visual-density="compact"] body:has(.navbar) .section,
html[data-visual-density="compact"] body:has(.navbar) .gallery-section,
html[data-visual-density="compact"] body:has(.navbar) .order-section {
  padding-block: clamp(54px, 7vw, 86px) !important;
}

html[data-visual-motion="off"] *,
html[data-visual-motion="off"] *::before,
html[data-visual-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .slider-section::after {
  opacity: clamp(.12, calc(var(--hero-overlay-opacity, .36) + .06), .58) !important;
}

html[data-hero-overlay-enabled="false"] body:has(.navbar) .hero-slider-wrap#inicio .slider-section::after {
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-hero-overlay-mode="blur"] body:has(.navbar) .hero-slider-wrap#inicio .slider-section::after {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--hero-overlay-color, #2f2230) 30%, transparent) 0%,
      color-mix(in srgb, var(--hero-overlay-color, #2f2230) 15%, transparent) 44%,
      transparent 78%) !important;
}

body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-primary,
body:has(.navbar) .hero-slider-wrap#inicio .hero-buttons .btn-secondary,
body:has(.navbar) .navbar .btn-order,
body:has(.navbar) #pedido .next-btn,
body:has(.navbar) #pedido .submit-btn,
body:has(.navbar) #pedido .back-btn {
  border-radius: 999px !important;
  letter-spacing: 0 !important;
}

body:has(.navbar) .steps-grid {
  gap: clamp(14px, 2vw, 22px) !important;
}

body:has(.navbar) .steps-grid .step-card {
  min-height: 0 !important;
  border-radius: var(--ui-radius-live) !important;
  padding: clamp(18px, 2.4vw, 26px) !important;
}

body:has(.navbar) .steps-grid .step-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  font-size: 0 !important;
}

body:has(.navbar) .steps-grid .step-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 7px;
  background: color-mix(in srgb, var(--theme-accent, #e85d9b) 72%, #ffffff);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #ffffff 72%, transparent);
}

body:has(.navbar) .steps-grid .step-num {
  display: none !important;
}

body:has(.navbar) #galeria .gallery-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body:has(.navbar) #galeria .gallery-grid {
  width: min(1120px, 92vw) !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(14px, 2vw, 20px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: clamp(16px, 4vw, 32px) !important;
  padding: 8px clamp(16px, 3vw, 26px) 22px !important;
}

body:has(.navbar) #galeria .gallery-grid::-webkit-scrollbar,
body:has(.navbar) #pedido .reference-strip-viewport::-webkit-scrollbar {
  height: 8px !important;
}

body:has(.navbar) #galeria .gallery-grid::-webkit-scrollbar-thumb,
body:has(.navbar) #pedido .reference-strip-viewport::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--theme-accent, #e85d9b) 42%, transparent) !important;
  border-radius: 999px !important;
}

body:has(.navbar) #galeria .gallery-card {
  flex: 0 0 clamp(190px, 22vw, 258px) !important;
  height: clamp(286px, 33vw, 372px) !important;
  scroll-snap-align: center !important;
  border-radius: var(--ui-radius-live) !important;
}

body:has(.navbar) #galeria .gallery-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body:has(.navbar) #pedido.order-section {
  padding-inline: clamp(14px, 4vw, 42px) !important;
}

body:has(.navbar) #pedido .order-container {
  align-items: start !important;
  gap: clamp(16px, 2.6vw, 30px) !important;
}

body:has(.navbar) #pedido .preview-panel,
body:has(.navbar) #pedido .order-form {
  border-radius: calc(var(--ui-radius-live) + 6px) !important;
  box-shadow: var(--ui-shadow-live) !important;
}

body:has(.navbar) #pedido .preview-panel {
  position: sticky !important;
  top: 96px !important;
}

body:has(.navbar) #pedido .preview-phone-wrap {
  min-height: clamp(320px, 46vw, 520px) !important;
}

body:has(.navbar) #pedido .preview-controls {
  gap: 10px !important;
}

body:has(.navbar) #pedido .preview-controls button,
body:has(.navbar) #pedido .preview-mode-controls button,
body:has(.navbar) #pedido .preview-fit-controls button {
  min-height: 40px !important;
  border-radius: 999px !important;
}

body:has(.navbar) #pedido .reference-strip-head {
  align-items: center !important;
  gap: 12px !important;
}

body:has(.navbar) #pedido .reference-strip-viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  padding-bottom: 10px !important;
}

body:has(.navbar) #pedido .reference-strip-track,
body:has(.navbar) #pedido #step1.active .reference-strip-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: max-content !important;
}

body:has(.navbar) #pedido .design-reference-strip .payment-reference-card,
body:has(.navbar) #pedido #step1.active .design-reference-strip .payment-reference-card {
  flex: 0 0 clamp(118px, 13vw, 154px) !important;
  width: clamp(118px, 13vw, 154px) !important;
  height: clamp(150px, 17vw, 198px) !important;
  border-radius: 18px !important;
  scroll-snap-align: center !important;
}

body:has(.navbar) #pedido .design-reference-strip .payment-reference-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body:not(:has(.navbar)) .app-shell .hero-card {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--kc-admin-text, #302434) 94%, var(--kc-admin-green, #e86fa3)),
      color-mix(in srgb, var(--kc-admin-green, #e86fa3) 30%, var(--kc-admin-text, #302434))) !important;
  border: 1px solid color-mix(in srgb, var(--kc-admin-green, #e86fa3) 24%, transparent) !important;
}

body:not(:has(.navbar)) .app-shell .hero-card::after {
  opacity: .38 !important;
  filter: blur(2px) !important;
}

body:not(:has(.navbar)) .app-shell .module-card,
body:not(:has(.navbar)) .app-shell .dashboard-stats .stat-tile,
body:not(:has(.navbar)) .app-shell .overview-card,
body:not(:has(.navbar)) .app-shell .category-group,
body:not(:has(.navbar)) .controls-panel,
body:not(:has(.navbar)) .preview-panel {
  border-radius: var(--ui-radius-live) !important;
  border-color: color-mix(in srgb, var(--kc-admin-green, #e86fa3) 17%, #ffffff) !important;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--kc-admin-green, #e86fa3) 8%, transparent) !important;
}

body:not(:has(.navbar)) .app-shell .module-card p,
body:not(:has(.navbar)) .app-shell .activity-item small,
body:not(:has(.navbar)) .app-shell .group-title small,
body:not(:has(.navbar)) .app-shell .stat-tile small {
  font-size: clamp(.86rem, 1.5vw, .94rem) !important;
  line-height: 1.45 !important;
}

body:not(:has(.navbar)) .app-shell .module-card .go {
  width: max-content !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  background: color-mix(in srgb, var(--kc-admin-green, #e86fa3) 10%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--kc-admin-green, #e86fa3) 22%, #ffffff) !important;
}

@media (max-width: 900px) {
  body:has(.navbar) #pedido .order-container {
    grid-template-columns: 1fr !important;
  }

  body:has(.navbar) #pedido .preview-panel {
    position: relative !important;
    top: auto !important;
    max-width: 520px !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  body:has(.navbar) #pedido .order-form {
    max-width: 620px !important;
    width: 100% !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 680px) {
  body:not(:has(.navbar)).admin-mobile-menu-open {
    overflow: auto !important;
  }

  body:not(:has(.navbar)).admin-mobile-menu-open .app-shell .main {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
  }

  body:not(:has(.navbar)) .app-shell {
    width: min(94vw, 720px) !important;
    gap: 12px !important;
  }

  body:not(:has(.navbar)) .app-shell .sidebar {
    z-index: 5 !important;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--kc-admin-text, #302434) 18%, transparent) !important;
  }

  body:not(:has(.navbar)) .app-shell .sidebar.is-open .sidebar-content {
    max-height: min(58vh, 480px) !important;
  }

  body:not(:has(.navbar)) .app-shell .hero-card {
    padding: 22px !important;
    min-height: 0 !important;
  }

  body:not(:has(.navbar)) .app-shell .hero-card h2 {
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    line-height: .98 !important;
  }

  body:not(:has(.navbar)) .app-shell .dashboard-stats {
    gap: 10px !important;
  }

  body:not(:has(.navbar)) .app-shell .dashboard-stats .stat-tile {
    padding: 14px !important;
  }

  body:not(:has(.navbar)) .app-shell .module-card {
    min-height: 0 !important;
    padding: 15px !important;
  }

  body:not(:has(.navbar)) .app-shell .group-body {
    gap: 10px !important;
  }
}

@media (max-width: 640px) {
  body:has(.navbar) .hero-slider-wrap#inicio {
    min-height: min(760px, 100svh) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-content {
    width: min(348px, calc(100vw - 32px)) !important;
    padding-bottom: 72px !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero-text-wrap {
    max-width: min(328px, calc(100vw - 40px)) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero h1 {
    font-size: clamp(1.95rem, 8.3vw, 2.42rem) !important;
  }

  body:has(.navbar) .hero-slider-wrap#inicio .hero p {
    font-size: .88rem !important;
  }

  body:has(.navbar) #pedido.order-section {
    padding-inline: 12px !important;
  }

  body:has(.navbar) #pedido .preview-panel,
  body:has(.navbar) #pedido .order-form {
    padding: clamp(16px, 4vw, 20px) !important;
  }

  body:has(.navbar) #pedido .preview-phone-wrap {
    min-height: 300px !important;
    padding: 12px !important;
  }

  body:has(.navbar) #pedido .preview-controls {
    transform: scale(.94) !important;
    transform-origin: center top !important;
  }

  body:has(.navbar) #pedido .reference-strip-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
  }

  body:has(.navbar) #pedido .reference-strip-copy span,
  body:has(.navbar) #pedido #step1.active .reference-strip-head span {
    font-size: .78rem !important;
    max-width: 30ch !important;
  }

  body:has(.navbar) #pedido .design-reference-strip .payment-reference-card,
  body:has(.navbar) #pedido #step1.active .design-reference-strip .payment-reference-card {
    flex-basis: 132px !important;
    width: 132px !important;
    height: 178px !important;
  }

  body:has(.navbar) #galeria .gallery-grid {
    width: 100% !important;
    padding-inline: 18px !important;
  }

  body:has(.navbar) #galeria .gallery-card {
    flex-basis: min(72vw, 260px) !important;
    height: 342px !important;
  }

  body:has(.navbar) .contact-grid {
    grid-template-columns: 1fr !important;
  }
}

/* admin-alesa-mobile-overflow-20260705: evita que la capa global empuje la guia fuera de pantalla. */
@media (max-width: 680px) {
  body:has(.alesa-settings) .shell {
    max-width: calc(100vw - 24px) !important;
    overflow-x: clip !important;
  }

  body:has(.alesa-settings) .topbar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body:has(.alesa-settings) .nav {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body:has(.alesa-settings) .store-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: initial !important;
    white-space: normal !important;
  }

  body.alesa-guide-page .shell {
    max-width: calc(100vw - 24px) !important;
    overflow-x: hidden !important;
  }

  body.alesa-guide-page .topbar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body.alesa-guide-page .nav {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.alesa-guide-page .store-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: initial !important;
    white-space: normal !important;
  }
}