/* Elevación transversal 2026-07-15.
   Inspiración MotionSites: composición editorial, jerarquía clara y movimiento
   de apoyo. Sólo usa transform/opacity y respeta reduced motion. */

:root {
  --ens-elevate-ease: cubic-bezier(.34, 1.35, .64, 1);
  --ens-elevate-shadow: 0 26px 70px rgba(0, 0, 0, .16);
}

/* ----------------------------- Catálogo ----------------------------- */
body[data-ens-page="catalog"] .catalog-page-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
}

body[data-ens-page="catalog"] .catalog-page-hero__copy {
  margin-bottom: 0;
}

body[data-ens-page="catalog"] .catalog-page-hero__copy .cta-flow {
  justify-content: flex-start;
}

.catalog-hero-decision {
  display: grid;
  gap: .75rem;
  max-width: 31rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgba(8, 8, 10, .82), rgba(13, 14, 20, .58));
  box-shadow: var(--ens-elevate-shadow);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
}

.catalog-hero-decision__eyebrow {
  color: #bae6fd;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.catalog-hero-decision strong {
  max-width: 16ch;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: .98;
  text-transform: uppercase;
}

.catalog-hero-decision p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: .94rem;
  line-height: 1.55;
}

.catalog-hero-decision a {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
  padding: .7rem 1rem;
  color: #060607;
  border-radius: 999px;
  background: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform 220ms var(--ens-elevate-ease), background-color 180ms ease;
}

.catalog-hero-decision a:hover,
.catalog-hero-decision a:focus-visible {
  color: #060607;
  background: #bae6fd;
  transform: translate3d(0, -2px, 0);
}

/* Los tres caminos deben ser lo primero tras el hero; el viejo showreel
   no vuelve a cargar videos que ya viven en Inicio. */
body[data-ens-page="catalog"] .ens-catalog-showreel {
  display: none;
}

.catalog-paths-top {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 11% 2%, rgba(56, 189, 248, .12), transparent 29rem),
    #fff;
}

.catalog-paths-top .grid > a {
  min-height: 19rem;
  transition: transform 260ms var(--ens-elevate-ease), box-shadow 260ms ease, border-color 220ms ease;
}

.catalog-paths-top .grid > a:hover,
.catalog-paths-top .grid > a:focus-visible {
  box-shadow: 0 22px 42px rgba(0, 0, 0, .14);
  transform: translate3d(0, -7px, 0);
}

body[data-ens-page="catalog"] .catalog-toolbar {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
}

body[data-ens-page="catalog"] .catalog-toolbar__filters #cat-tabs {
  gap: .55rem;
}

body[data-ens-page="catalog"] .cat-tab {
  min-height: 44px;
  white-space: nowrap;
}

/* Carrusel usable: controles no tapan los productos ni se salen de la vista. */
body[data-ens-page="catalog"] .catalog-carousel-shell {
  overflow: visible;
}

body[data-ens-page="catalog"] .catalog-carousel__toolbar {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 42rem) !important;
  height: auto !important;
  margin: 0 auto 1rem !important;
  pointer-events: auto !important;
}

body[data-ens-page="catalog"] .catalog-carousel__status {
  position: static !important;
  width: auto !important;
  color: #18181b !important;
  overflow: visible !important;
  white-space: normal !important;
  transform: none !important;
}

body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] {
  min-height: min(74vh, 43rem);
  height: min(74vh, 43rem) !important;
}

body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > [data-product-id] {
  max-height: min(74vh, 43rem);
}

body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] .catalog-product-stage {
  height: min(42vh, 21rem);
  max-height: 21rem;
}

/* ---------------------------- Guías y telas --------------------------- */
body[data-ens-page^="guide-"],
body[data-ens-page="fabric-guide"] {
  background: #fff;
}

body[data-ens-page^="guide-"] main > section:first-child,
body[data-ens-page="fabric-guide"] main > section:first-child {
  position: relative;
  min-height: min(70svh, 48rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(56, 189, 248, .16), transparent 24rem),
    radial-gradient(circle at 86% 82%, rgba(226, 6, 19, .09), transparent 26rem),
    #fff;
}

body[data-ens-page^="guide-"] main > section:first-child h1,
body[data-ens-page="fabric-guide"] main > section:first-child h2 {
  max-width: 17ch;
  margin-inline: auto;
}

body[data-ens-page^="guide-"] main > section:nth-of-type(2) figure {
  width: min(100%, 44rem) !important;
  max-width: 44rem !important;
  margin-inline: auto !important;
  padding: .55rem;
  border-radius: 1.35rem !important;
  background: linear-gradient(145deg, #fff, #f1f5f9) !important;
  box-shadow: var(--ens-elevate-shadow) !important;
}

body[data-ens-page^="guide-"] main > section:nth-of-type(2) figure video {
  max-height: min(67svh, 46rem);
  object-fit: contain;
  border-radius: .95rem;
}

body[data-ens-page^="guide-"] [data-gal-card] {
  transition: transform 260ms var(--ens-elevate-ease), box-shadow 260ms ease;
}

body[data-ens-page^="guide-"] [data-gal-card]:hover {
  box-shadow: 0 22px 48px rgba(0, 0, 0, .22);
  transform: translate3d(0, -5px, 0);
}

body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card {
  min-height: 40rem;
  transition: transform 260ms var(--ens-elevate-ease), box-shadow 260ms ease;
}

body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card:hover {
  box-shadow: var(--ens-elevate-shadow);
  transform: translate3d(0, -6px, 0);
}

/* ------------------------- Alternativa al retail ---------------------- */
body[data-ens-page="retail"] > main > header {
  min-height: min(72svh, 50rem);
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 80% 15%, rgba(56, 189, 248, .19), transparent 28rem),
    linear-gradient(135deg, #050506, #18181b) !important;
}

body[data-ens-page="retail"] > main > section.py-12 .inline-block {
  display: block;
  width: min(100%, 68rem);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
}

body[data-ens-page="retail"] > main > section.py-12 .inline-block img {
  width: 100%;
  max-height: min(72svh, 52rem);
  object-fit: contain;
}

/* ------------------------------- Motion -------------------------------- */
.ens-motion-target {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 650ms ease-out, transform 760ms var(--ens-elevate-ease);
}

.ens-motion-target.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 767px) {
  body[data-ens-page="catalog"] .catalog-page-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
  }

  body[data-ens-page="catalog"] .catalog-page-hero__copy .cta-flow {
    justify-content: center;
  }

  .catalog-hero-decision {
    max-width: none;
    text-align: left;
  }

  .catalog-paths-top .grid > a {
    min-height: 15.5rem;
  }

  body[data-ens-page="catalog"] .catalog-toolbar__filters #cat-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible !important;
    padding-inline: 0;
  }

  body[data-ens-page="catalog"] .catalog-toolbar__filters #cat-tabs .cat-tab {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding-inline: .65rem;
    line-height: 1.2;
    white-space: normal;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > .is-carousel-prev,
  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > .is-carousel-next {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] {
    min-height: 38rem;
    height: 38rem !important;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > [data-product-id] {
    max-height: 38rem;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] .catalog-product-stage {
    height: min(34vh, 16.5rem);
  }

  body[data-ens-page^="guide-"] main > section:first-child,
  body[data-ens-page="fabric-guide"] main > section:first-child {
    min-height: 60svh;
  }

  body[data-ens-page^="guide-"] main > section:nth-of-type(2) figure {
    max-width: none !important;
  }

  body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card {
    min-height: 34rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-hero-decision a,
  .catalog-paths-top .grid > a,
  body[data-ens-page^="guide-"] [data-gal-card],
  body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card,
  .ens-motion-target {
    transition: none !important;
    transform: none !important;
  }

  .ens-motion-target {
    opacity: 1;
  }
}