/* =============================================================================
   Casa Alma Oaxaca — Capa Material Design 3
   Sistema de tokens (color, forma, elevación, movimiento) + componentes.
   Se carga DESPUÉS de style.css: refina, no reescribe.
   ============================================================================= */

:root {
  /* ── Color: roles MD3 mapeados a la paleta Casa Alma ──────────────────── */
  --md-primary:            #2A2724;
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #F3EADA;
  --md-on-primary-container:#2A2724;

  --md-secondary:          #8C6A3F;
  --md-on-secondary:       #FFFFFF;
  --md-secondary-container:#FBEFD8;
  --md-on-secondary-container:#3D2C15;

  --md-tertiary:           #B4472A;   /* terracota oaxaqueña */
  --md-on-tertiary:        #FFFFFF;
  --md-tertiary-container: #FFE6DC;

  --md-surface:            #FFFFFF;
  --md-surface-dim:        #F3EFE9;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low:    #FBF8F4;
  --md-surface-container:        #F7F3EC;
  --md-surface-container-high:   #F1ECE3;
  --md-on-surface:         #1E1B18;
  --md-on-surface-variant: #6F675E;
  --md-outline:            #DED5C7;
  --md-outline-variant:    #EFE9DE;

  /* ── Escala de forma ──────────────────────────────────────────────────── */
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:  12px;
  --md-shape-lg:  16px;
  --md-shape-xl:  28px;
  --md-shape-full: 999px;

  /* ── Elevación (5 niveles MD3) ────────────────────────────────────────── */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px rgba(30,27,24,.16), 0 1px 3px 1px rgba(30,27,24,.08);
  --md-elev-2: 0 1px 2px rgba(30,27,24,.16), 0 2px 6px 2px rgba(30,27,24,.08);
  --md-elev-3: 0 4px 8px 3px rgba(30,27,24,.10), 0 1px 3px rgba(30,27,24,.16);
  --md-elev-4: 0 6px 10px 4px rgba(30,27,24,.10), 0 2px 3px rgba(30,27,24,.16);
  --md-elev-5: 0 8px 12px 6px rgba(30,27,24,.10), 0 4px 4px rgba(30,27,24,.16);

  /* ── Movimiento: curvas y duraciones MD3 ──────────────────────────────── */
  --md-ease-standard:            cubic-bezier(.2, 0, 0, 1);
  --md-ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-ease-standard-accelerate: cubic-bezier(.3, 0, 1, 1);
  --md-ease-emphasized:          cubic-bezier(.2, 0, 0, 1);
  --md-ease-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --md-ease-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);

  --md-dur-short:  150ms;
  --md-dur-medium: 300ms;
  --md-dur-long:   450ms;
  --md-dur-xlong:  700ms;

  /* Opacidades de state layer */
  --md-state-hover: .08;
  --md-state-focus: .12;
  --md-state-press: .12;
}

/* =============================================================================
   1. STATE LAYERS — la capa de estado es el corazón de la interacción MD3
   ============================================================================= */
.md-state {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.md-state::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-dur-short) var(--md-ease-standard);
}
.md-state:hover::after        { opacity: var(--md-state-hover); }
.md-state:focus-visible::after{ opacity: var(--md-state-focus); }
.md-state:active::after       { opacity: var(--md-state-press); }

/* Foco accesible consistente en todo el sitio */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--md-secondary);
  outline-offset: 2px;
  border-radius: var(--md-shape-xs);
}

/* =============================================================================
   2. RIPPLE — retroalimentación táctil MD3
   ============================================================================= */
.md-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .22;
  pointer-events: none;
  z-index: 1;
  animation: md-ripple-run var(--md-dur-long) var(--md-ease-standard-decelerate) forwards;
}
@keyframes md-ripple-run {
  to { transform: scale(2.6); opacity: 0; }
}

/* =============================================================================
   3. BOTONES — altura, forma y movimiento MD3
   ============================================================================= */
.btn {
  border-radius: var(--md-shape-full);
  font-weight: 600;
  letter-spacing: .02em;
  transition:
    box-shadow var(--md-dur-medium) var(--md-ease-emphasized),
    transform  var(--md-dur-short)  var(--md-ease-emphasized),
    background-color var(--md-dur-short) var(--md-ease-standard);
}
.btn-primary,
.btn-success {
  box-shadow: var(--md-elev-1);
}
.btn-primary:hover,
.btn-success:hover {
  box-shadow: var(--md-elev-2);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-success:active {
  box-shadow: var(--md-elev-1);
  transform: translateY(0);
}

/* El botón de producto conserva su look editorial, gana movimiento MD3 */
.product-item .btn-cart {
  transition:
    background-color var(--md-dur-medium) var(--md-ease-emphasized),
    color            var(--md-dur-medium) var(--md-ease-emphasized),
    border-color     var(--md-dur-medium) var(--md-ease-emphasized),
    box-shadow       var(--md-dur-medium) var(--md-ease-emphasized) !important;
}
.product-item .btn-cart:hover { box-shadow: var(--md-elev-2); }

/* --- Fix: la flecha "→" se salía de la píldora ---------------------------
   El contenido pedía 190 px dentro de un botón de 182 px. Con white-space
   nowrap y overflow visible, el ::after se dibujaba fuera del borde.
   Recuperamos ancho (menos padding lateral y menos letter-spacing), hacemos
   del botón un flex que ocupe toda la columna y recortamos por si acaso. */
.product-item .button-area {
  padding: 14px 10px 18px !important;
}
.product-item .btn-cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .4em;
  width: 100%;
  max-width: 100%;
  padding: .65rem .75rem !important;
  letter-spacing: .1em;
  overflow: hidden;
}
.product-item .btn-cart::after {
  content: "→";
  flex: 0 0 auto;
  font-weight: 400;
}

/* En tarjetas angostas (2 columnas en móvil) el texto aún apretaba */
@media (max-width: 576px) {
  .product-item .btn-cart {
    font-size: .66rem !important;
    letter-spacing: .06em;
    padding: .6rem .5rem !important;
  }
}

/* =============================================================================
   4. TARJETAS DE PRODUCTO — elevación por niveles + entrada escalonada
   ============================================================================= */
.product-item {
  border-radius: var(--md-shape-xl);
  border-color: var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
  transition:
    box-shadow var(--md-dur-medium) var(--md-ease-emphasized),
    transform  var(--md-dur-medium) var(--md-ease-emphasized),
    border-color var(--md-dur-medium) var(--md-ease-standard);
  will-change: transform;
}
.product-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--md-elev-4);
  border-color: var(--md-outline);
}
.product-item:active { transform: translateY(-2px); box-shadow: var(--md-elev-2); }

.product-item figure {
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container);
}
.product-item figure img,
.product-item .tab-image {
  transition: transform var(--md-dur-xlong) var(--md-ease-emphasized);
}

/* Badge de descuento como "chip" MD3 */
.product-item .badge {
  border-radius: var(--md-shape-sm) !important;
  padding: .3em .6em !important;
}

/* =============================================================================
   5. HEADER — elevación reactiva al scroll
   ============================================================================= */
.site-header {
  transition:
    box-shadow var(--md-dur-medium) var(--md-ease-standard),
    background-color var(--md-dur-medium) var(--md-ease-standard);
}
body.is-scrolled .site-header {
  box-shadow: var(--md-elev-2);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* =============================================================================
   6. HERO — imagen responsiva, scrim en capas y Ken Burns
   ============================================================================= */
.hero-slide { min-height: clamp(460px, 62vh, 640px); }

/* La imagen ahora es un <img> real (mejor LCP y srcset) */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El hero es mucho más ancho que la foto (≈4.8:1 vs 2.23:1), así que cover
     recorta en vertical. Anclamos algo por encima del centro para mostrar
     campo y montañas en vez del terreno de grava del borde inferior. */
  object-position: 50% 42%;
  z-index: 0;
  /* El realce ya está aplicado en el archivo (curva S, clarity y calidez),
     así que aquí sólo queda un ajuste mínimo. */
  filter: saturate(1.02);
  transform: scale(1.04);
  transition: transform 1.2s var(--md-ease-standard);
}
/* Ken Burns solo en la diapositiva activa */
.swiper-slide-active .hero-img {
  animation: md-kenburns 9s var(--md-ease-standard) forwards;
}
@keyframes md-kenburns {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(-1.2%, -1%, 0); }
}

/* Scrim en dos capas: direccional + viñeta. Mejora legibilidad y disimula ruido. */
.hero-slide::after {
  background:
    linear-gradient(90deg, rgba(14,11,8,.74) 0%, rgba(14,11,8,.48) 34%, rgba(14,11,8,.10) 62%, rgba(14,11,8,0) 84%),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.34) 100%);
}

/* Entrada escalonada del contenido del hero */
.swiper-slide-active .hero-eyebrow,
.swiper-slide-active .hero-title,
.swiper-slide-active .hero-lead,
.swiper-slide-active .hero-slide-content .btn {
  animation: md-hero-in var(--md-dur-xlong) var(--md-ease-emphasized-decelerate) both;
}
.swiper-slide-active .hero-eyebrow { animation-delay: 60ms; }
.swiper-slide-active .hero-title   { animation-delay: 150ms; }
.swiper-slide-active .hero-lead    { animation-delay: 240ms; }
.swiper-slide-active .hero-slide-content .btn { animation-delay: 330ms; }
@keyframes md-hero-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Paginación como indicador MD3 */
.hero-swiper .swiper-pagination-bullet {
  border-radius: var(--md-shape-full);
  transition: width var(--md-dur-medium) var(--md-ease-emphasized),
              opacity var(--md-dur-short) var(--md-ease-standard);
}

/* =============================================================================
   7. REVELADO AL SCROLL — el "flow" del sitio
   ============================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity   var(--md-dur-long) var(--md-ease-emphasized-decelerate),
    transform var(--md-dur-long) var(--md-ease-emphasized-decelerate);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal="scale"]  { transform: scale(.94); }
[data-reveal="scale"].is-revealed { transform: scale(1); }
[data-reveal="left"]   { transform: translate3d(-34px, 0, 0); }
[data-reveal="right"]  { transform: translate3d(34px, 0, 0); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed { transform: translate3d(0,0,0); }

/* =============================================================================
   8. ENCABEZADOS DE SECCIÓN
   ============================================================================= */
.section-title {
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: .45rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0;
  border-radius: var(--md-shape-full);
  background: linear-gradient(90deg, var(--md-secondary), var(--md-tertiary));
  transition: width var(--md-dur-xlong) var(--md-ease-emphasized-decelerate) 120ms;
}
.section-header.is-revealed .section-title::after,
.section-title.is-revealed::after { width: 62px; }

/* =============================================================================
   9. TARJETAS DE BENEFICIOS (banda hero-oaxaca)
   ============================================================================= */
.hero-oaxaca .card {
  transition:
    transform var(--md-dur-medium) var(--md-ease-emphasized),
    box-shadow var(--md-dur-medium) var(--md-ease-emphasized);
}
.hero-oaxaca .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--md-elev-3);
  z-index: 2;
}
.hero-oaxaca .card svg { transition: transform var(--md-dur-long) var(--md-ease-emphasized); }
.hero-oaxaca .card:hover svg { transform: scale(1.12) rotate(-4deg); }

/* =============================================================================
   10. CATEGORÍAS
   ============================================================================= */
.category-carousel .cat-img-wrap {
  border-color: var(--md-outline-variant) !important;
  transition:
    border-color var(--md-dur-medium) var(--md-ease-standard),
    box-shadow   var(--md-dur-medium) var(--md-ease-emphasized),
    transform    var(--md-dur-medium) var(--md-ease-emphasized) !important;
}
.category-carousel .category-item:hover .cat-img-wrap {
  border-color: var(--md-secondary) !important;
  box-shadow: var(--md-elev-3);
  transform: scale(1.04);
}
.category-carousel .category-item { transition: transform var(--md-dur-medium) var(--md-ease-emphasized); }

/* =============================================================================
   11. WIDGET WHATSAPP — FAB Material
   ============================================================================= */
#wa-btn {
  box-shadow: var(--md-elev-3) !important;
  transition:
    transform var(--md-dur-medium) var(--md-ease-emphasized),
    box-shadow var(--md-dur-medium) var(--md-ease-emphasized) !important;
}
#wa-btn:hover { transform: scale(1.08) !important; box-shadow: var(--md-elev-4) !important; }
#wa-btn:active { transform: scale(.96) !important; }
#wa-panel.wap-open {
  animation: md-panel-in var(--md-dur-medium) var(--md-ease-emphasized-decelerate);
  transform-origin: bottom right;
}
@keyframes md-panel-in {
  from { opacity: 0; transform: scale(.9) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* =============================================================================
   12. CARRITO / OFFCANVAS
   ============================================================================= */
.offcanvas { border-radius: var(--md-shape-xl) 0 0 var(--md-shape-xl); }
.offcanvas.offcanvas-start { border-radius: 0 var(--md-shape-xl) var(--md-shape-xl) 0; }

/* Contador del carrito: late al agregar un producto */
.cart-count-pop { animation: md-badge-pop var(--md-dur-long) var(--md-ease-emphasized); }
@keyframes md-badge-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.42); }
  100% { transform: scale(1); }
}

/* =============================================================================
   13. FILTROS DEL CATÁLOGO — chips MD3
   ============================================================================= */
.cat-btn {
  border-radius: var(--md-shape-sm) !important;
  transition:
    background-color var(--md-dur-short) var(--md-ease-standard),
    color var(--md-dur-short) var(--md-ease-standard),
    box-shadow var(--md-dur-short) var(--md-ease-standard) !important;
}
.cat-btn:hover { box-shadow: var(--md-elev-1); }
.cat-btn.btn-primary { box-shadow: var(--md-elev-1); }

/* Reflow de la grilla al filtrar */
.product-grid-item {
  animation: md-grid-in var(--md-dur-long) var(--md-ease-emphasized-decelerate) both;
}
@keyframes md-grid-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================================
   14. IMÁGENES — carga progresiva sin salto de layout
   ============================================================================= */
img { background-color: var(--md-surface-container-low); }
img[loading="lazy"] {
  animation: md-img-in var(--md-dur-long) var(--md-ease-standard-decelerate);
}
@keyframes md-img-in { from { opacity: 0; } to { opacity: 1; } }

/* =============================================================================
   15. ACCESIBILIDAD — respeta "reducir movimiento"
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .swiper-slide-active .hero-img { animation: none; transform: scale(1.04); }
  .section-title::after { width: 62px; transition: none; }
}