/* =========================================================
   DORADO — FLUID MOTION SYSTEM V3
   Inspirado en principios de interfaces físicas y fluidas:
   respuesta inmediata, continuidad espacial, gestos interruptibles,
   movimiento compositor-friendly y accesibilidad por defecto.

   Reglas del sistema:
   - movimiento: transform + opacity;
   - loops: velocidad lineal;
   - drawers: recorrido simétrico + gesto 1:1 en touch;
   - press: feedback inmediato y corto;
   - no blur animado ni will-change permanente;
   - reduced motion/transparency/contrast respetados.
   ========================================================= */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-arrive:cubic-bezier(.16,1,.3,1);

  --motion-press:110ms;
  --motion-fast:150ms;
  --motion-ui:220ms;
  --motion-panel:380ms;
  --motion-drawer:420ms;
  --motion-focal:560ms;
}

html{
  font-optical-sizing:auto;
}

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

:is(h1,h2,h3,.hero-content h1,.section-head h2,.checkout-title,.dynamic-product-name){
  font-optical-sizing:auto;
}

/* Sentinels never participate visually. */
.nav-scroll-sentinel,
.products-scroll-sentinel{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* ---------- Arrival: authored once, then completely idle ---------- */
html.motion-enhanced .motion-item{
  --motion-x:0px;
  --motion-y:26px;
  --motion-scale:1;
  --motion-delay:0ms;
  opacity:0!important;
  transform:translate3d(var(--motion-x),var(--motion-y),0) scale(var(--motion-scale))!important;
  transition:
    opacity 420ms var(--ease-arrive) var(--motion-delay),
    transform 680ms var(--ease-arrive) var(--motion-delay)!important;
  will-change:auto!important;
}

html.motion-enhanced .motion-left{--motion-x:-44px;--motion-y:0}
html.motion-enhanced .motion-right{--motion-x:44px;--motion-y:0}
html.motion-enhanced .motion-up{--motion-y:28px}
html.motion-enhanced .motion-down{--motion-y:-24px}
html.motion-enhanced .motion-scale{--motion-y:12px;--motion-scale:.975}

html.motion-enhanced .motion-item.motion-visible{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}

@media (prefers-reduced-motion:no-preference){
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-lead,
  .hero-content .hero-actions,
  .hero-content .hero-proof{
    animation-duration:var(--motion-focal)!important;
    animation-timing-function:var(--ease-arrive)!important;
    animation-fill-mode:both!important;
  }

  .hero-content .eyebrow{animation-delay:35ms!important}
  .hero-content h1{animation-delay:80ms!important}
  .hero-content .hero-lead{animation-delay:135ms!important}
  .hero-content .hero-actions{animation-delay:190ms!important}
  .hero-content .hero-proof{animation-delay:245ms!important}
}

/* ---------- Immediate tactile response ---------- */
:is(
  button,
  a[href],
  .category-chip,
  [role="button"]
){
  -webkit-tap-highlight-color:transparent;
}

:is(
  .gold-btn,.outline-btn,.hero-btn,.hero-secondary,.nav-cta,.cart-trigger,.orders-trigger,
  .menu-toggle,.view-product,.add-card-product,.dynamic-add-cart,.dynamic-add-cart-mobile,
  .cart-checkout,.checkout-pay,.checkout-wholesale,.reviews-filter-button,
  .reviews-google-link,.catalog-retry-btn,.map-open-button,.category-chip,
  .mobile-dock-item,.cart-close,.orders-close,.checkout-close,.product-detail-close
){
  transition:
    transform var(--motion-fast) var(--ease-out),
    background-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    color var(--motion-ui) ease,
    opacity var(--motion-ui) ease!important;
  touch-action:manipulation;
}

:is(
  .gold-btn,.outline-btn,.hero-btn,.hero-secondary,.nav-cta,.cart-trigger,.orders-trigger,
  .menu-toggle,.view-product,.add-card-product,.dynamic-add-cart,.dynamic-add-cart-mobile,
  .cart-checkout,.checkout-pay,.checkout-wholesale,.reviews-filter-button,
  .reviews-google-link,.catalog-retry-btn,.map-open-button,.category-chip,
  .mobile-dock-item,.cart-close,.orders-close,.checkout-close,.product-detail-close
):is(:active,.is-pressing):not(:disabled){
  transform:scale(.982)!important;
  transition-duration:var(--motion-press)!important;
}

/* Direction lives in the icon; the surface itself remains composed. */
:is(.hero-btn,.process-link,.cart-checkout,.map-open-button,.reviews-google-link) .ui-icon{
  transition:transform var(--motion-ui) var(--ease-arrive)!important;
}

@media (hover:hover) and (pointer:fine){
  :is(.hero-btn,.process-link,.cart-checkout,.map-open-button,.reviews-google-link):hover .ui-icon{
    transform:translate3d(4px,0,0)!important;
  }

  .product,
  .feature,
  .process-step,
  .about-highlight,
  .contact-line,
  .best-seller-card,
  .related-product-card,
  .category-chip{
    transition:
      transform var(--motion-ui) var(--ease-arrive),
      border-color var(--motion-ui) ease,
      background-color var(--motion-ui) ease!important;
  }

  .product .product-real-image,
  .best-seller-card img,
  .related-product-card img{
    transition:transform 360ms var(--ease-arrive)!important;
  }

  .product:hover,
  .feature:hover,
  .about-highlight:hover,
  .contact-line:hover,
  .best-seller-card:hover,
  .related-product-card:hover,
  .category-chip:hover{
    transform:translate3d(0,-2px,0)!important;
  }

  .process-step:hover{
    transform:translate3d(3px,0,0)!important;
  }

  .product:hover .product-real-image,
  .best-seller-card:hover img,
  .related-product-card:hover img{
    transform:scale(1.018)!important;
  }
}

@media (hover:none), (pointer:coarse){
  .product:hover,
  .feature:hover,
  .process-step:hover,
  .about-highlight:hover,
  .contact-line:hover,
  .best-seller-card:hover,
  .related-product-card:hover,
  .category-chip:hover{
    transform:none!important;
  }
}

/* ---------- Drawers: symmetric path + live gesture variable ---------- */
.cart-drawer,
.orders-drawer{
  transform:translate3d(103%,0,0)!important;
  transition:transform var(--motion-drawer) var(--ease-drawer)!important;
  will-change:auto!important;
}

.cart-drawer.active,
.orders-drawer.active{
  transform:translate3d(var(--drawer-drag-x,0px),0,0)!important;
}

.cart-drawer.is-dragging,
.orders-drawer.is-dragging{
  transition:none!important;
  will-change:transform!important;
  cursor:grabbing;
  user-select:none;
}

.cart-head,
.orders-head{
  touch-action:pan-y;
}

.cart-overlay,
.orders-overlay{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(7,10,13,.64)!important;
  transition:
    opacity var(--motion-ui) var(--ease-out),
    visibility var(--motion-ui) linear!important;
}

/* ---------- Modal surfaces: materialize without animated blur ---------- */
.product-detail,
.checkout-modal,
.payment-result{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(5,9,13,.74)!important;
  transition:
    opacity 220ms var(--ease-out),
    visibility 220ms linear!important;
}

.product-detail-inner,
.checkout-card,
.payment-result-card{
  transform-origin:center;
  transition:
    opacity 210ms var(--ease-arrive),
    transform var(--motion-panel) var(--ease-drawer)!important;
}

.product-detail:not(.active) .product-detail-inner,
.checkout-modal:not(.active) .checkout-card,
.payment-result:not(.active) .payment-result-card{
  opacity:0!important;
  transform:translate3d(0,10px,0) scale(.986)!important;
}

.product-detail.active .product-detail-inner,
.checkout-modal.active .checkout-card,
.payment-result.active .payment-result-card{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}

.payment-confirm-overlay{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(5,9,13,.74)!important;
}

.payment-confirm-overlay:not([hidden]) .payment-confirm-dialog{
  animation:doradoConfirmIn var(--motion-panel) var(--ease-arrive) both;
}

@keyframes doradoConfirmIn{
  from{opacity:0;transform:translate3d(0,8px,0) scale(.986)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* ---------- Menus / suggestions: anchored to the trigger ---------- */
.dorado-select-menu,
.payment-picker-menu,
.checkout-address-suggestions{
  transform-origin:top center!important;
}

.dorado-select-menu:not([hidden]),
.payment-picker-menu:not([hidden]),
.checkout-address-suggestions:not([hidden]){
  animation:doradoPopoverIn 180ms var(--ease-arrive) both!important;
}

@keyframes doradoPopoverIn{
  from{opacity:0;transform:translate3d(0,-4px,0) scale(.975)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.dorado-select-chevron,
.payment-picker-chevron{
  transition:transform var(--motion-ui) var(--ease-in-out)!important;
}

/* ---------- Toast + FAQ: state feedback, no layout animation ---------- */
.cart-toast{
  transition:
    opacity var(--motion-ui) var(--ease-out),
    transform var(--motion-ui) var(--ease-out)!important;
}

.faq-list details[open] > p{
  animation:doradoFaqAnswerIn 240ms var(--ease-arrive) both;
}

@keyframes doradoFaqAnswerIn{
  from{opacity:0;transform:translate3d(0,-4px,0)}
  to{opacity:1;transform:none}
}

/* ---------- Mobile navigation: reads as one panel ---------- */
@media(max-width:980px){
  .navlinks{
    transition:
      opacity 210ms var(--ease-arrive),
      transform 360ms var(--ease-drawer),
      visibility 210ms linear!important;
  }

  .menu-toggle span{
    transition:
      transform var(--motion-ui) var(--ease-drawer),
      top var(--motion-ui) var(--ease-drawer)!important;
  }

  .mobile-dock-item{
    transition:
      transform var(--motion-fast) var(--ease-out),
      color var(--motion-ui) ease,
      background-color var(--motion-ui) ease!important;
  }
}

/* ---------- Reviews: one continuous velocity, never easing a loop ---------- */
.reviews-marquee-track{
  animation-timing-function:linear!important;
}

/* ---------- Focus: visible, precise, and consistent ---------- */
:is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid rgba(224,184,78,.92)!important;
  outline-offset:3px!important;
}


@media (max-width:700px) and (prefers-reduced-motion:no-preference){
  html.motion-enhanced .motion-left{--motion-x:-24px}
  html.motion-enhanced .motion-right{--motion-x:24px}
  html.motion-enhanced .motion-up{--motion-y:22px}
  html.motion-enhanced .motion-down{--motion-y:-18px}
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html.motion-enhanced .motion-item{
    opacity:1!important;
    transform:none!important;
    transition:opacity 140ms ease!important;
  }

  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-lead,
  .hero-content .hero-actions,
  .hero-content .hero-proof,
  .faq-list details[open] > p,
  .payment-confirm-dialog,
  .dorado-select-menu,
  .payment-picker-menu,
  .checkout-address-suggestions{
    animation:none!important;
  }

  .cart-drawer,
  .orders-drawer,
  .product-detail-inner,
  .checkout-card,
  .payment-result-card,
  .cart-toast,
  .navlinks,
  .product .product-real-image,
  :is(.hero-btn,.process-link,.cart-checkout,.map-open-button,.reviews-google-link) .ui-icon{
    transition:opacity 140ms ease!important;
  }

  .reviews-marquee-track{
    animation:none!important;
    transform:none!important;
  }
}

@media (prefers-reduced-transparency:reduce){
  .nav,
  .mobile-dock,
  .checkout-address-suggestions,
  .dorado-select-menu,
  .payment-picker-menu{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .nav{background:#090a0b!important}
  .mobile-dock{background:#f8f7f2!important}
}

@media (prefers-contrast:more){
  .nav,
  .cart-drawer,
  .orders-drawer,
  .checkout-card,
  .product-detail-inner,
  .review-card,
  .product{
    border-color:currentColor!important;
  }

  :is(button,a,input,select,textarea):focus-visible{
    outline-width:3px!important;
  }
}

/* =========================================================
   DORADO — ADAPTIVE PERFORMANCE V3
   Misma información/interacciones en todos los equipos. En hardware
   limitado se conserva la dirección de las entradas pero se reduce el
   recorrido y el coste de composición para sostener fluidez.
   ========================================================= */
html.low-power-device.motion-enhanced .motion-left{--motion-x:-22px}
html.low-power-device.motion-enhanced .motion-right{--motion-x:22px}
html.low-power-device.motion-enhanced .motion-up{--motion-y:18px}
html.low-power-device.motion-enhanced .motion-down{--motion-y:-16px}
html.low-power-device.motion-enhanced .motion-scale{--motion-y:8px;--motion-scale:.986}
html.low-power-device.motion-enhanced .motion-item{
  transition-duration:320ms,500ms!important;
}
html.low-power-device .product,
html.low-power-device .feature,
html.low-power-device .process-step,
html.low-power-device .about-highlight,
html.low-power-device .best-seller-card,
html.low-power-device .review-card{
  box-shadow:none!important;
}
html.low-power-device .product .product-real-image,
html.low-power-device .best-seller-card img,
html.low-power-device .related-product-card img{
  transition-duration:240ms!important;
}
html.very-low-power-device .hero-glow,
html.very-low-power-device .about-dust,
html.very-low-power-device .about-light{
  animation-duration:1120ms!important;
}

/* Componentes táctiles: mismo contenido, objetivos cómodos incluso a 320px. */
@media (max-width:980px){
  :is(.gold-btn,.outline-btn,.hero-btn,.hero-secondary,.nav-cta,.cart-trigger,.orders-trigger,
  .menu-toggle,.view-product,.add-card-product,.dynamic-add-cart,.dynamic-add-cart-mobile,
  .cart-checkout,.checkout-pay,.checkout-wholesale,.reviews-filter-button,.reviews-google-link,
  .catalog-retry-btn,.map-open-button,.category-chip,.mobile-dock-item,.cart-close,.orders-close,
  .checkout-close,.product-detail-close){
    min-height:44px;
  }
}

@media (max-width:430px){
  html.motion-enhanced .motion-left{--motion-x:-18px}
  html.motion-enhanced .motion-right{--motion-x:18px}
  html.motion-enhanced .motion-up{--motion-y:18px}
  html.motion-enhanced .motion-down{--motion-y:-14px}
}