/* =========================================================
   BRUMA — SECCIONES
   ========================================================= */

/* ---------- Navegación ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--ink);
  transition: transform 0.45s var(--ease), color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.nav.is-scrolled {
  background: rgba(242, 240, 235, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-dark { color: var(--paper); }
.nav.is-dark.is-scrolled { background: rgba(18, 18, 17, 0.82); box-shadow: 0 1px 0 var(--line-inv); }
.nav.is-menu { background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  height: var(--nav-h);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__logo {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
}
.nav__links, .nav__contact, .nav__quote { display: none; }
.nav__end { display: flex; align-items: center; gap: 0.35rem; }

.nav__wa {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.85;
}
.nav__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding-left: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav__menu-icon { position: relative; width: 18px; height: 8px; }
.nav__menu-icon i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.nav__menu-icon i:first-child { top: 0; }
.nav__menu-icon i:last-child { top: 6.5px; }
.nav__menu[aria-expanded='true'] .nav__menu-icon i:first-child { top: 3.25px; transform: rotate(45deg); }
.nav__menu[aria-expanded='true'] .nav__menu-icon i:last-child { top: 3.25px; transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav__links { display: flex; gap: 2rem; }
  .nav__links a {
    position: relative;
    padding-block: 0.4rem;
    font-size: 0.875rem;
    opacity: 0.72;
    transition: opacity 0.25s;
  }
  .nav__links a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .nav__links a:hover, .nav__links a.is-active { opacity: 1; }
  .nav__links a.is-active::after { transform: scaleX(1); }
  .nav__end { justify-self: end; gap: 1.25rem; }
  .nav__contact { display: inline; font-size: 0.875rem; opacity: 0.72; transition: opacity 0.25s; }
  .nav__contact:hover { opacity: 1; }
  .nav__quote { display: inline-flex; }
  .nav.is-dark .nav__quote { background: var(--paper); color: var(--ink); }
  .nav__wa, .nav__menu { display: none; }
}

/* ---------- Menú celular ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 1rem) var(--pad) calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  overflow-y: auto;
}
.menu.is-open { opacity: 1; }
.menu__list li { border-bottom: 1px solid var(--line-inv); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.85rem 0;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.menu.is-open .menu__list a { transform: none; opacity: 1; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: 0.03s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: 0.06s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: 0.09s; }
.menu.is-open .menu__list li:nth-child(5) a { transition-delay: 0.12s; }
.menu.is-open .menu__list li:nth-child(6) a { transition-delay: 0.15s; }
.menu__list .mono { color: var(--grey-2); }
.menu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.6rem; }
.menu__meta { margin-top: 0.4rem; text-align: center; color: var(--grey-2); }

/* ---------- Portada ---------- */
.hero { padding-top: var(--nav-h); }

.hero__frame {
  position: relative;
  height: max(340px, 50svh);
  margin-inline: var(--pad);
  overflow: hidden;
  border-radius: var(--radius);
  background: #1b1916;
  color: var(--paper);
}
.hero__video {
  position: absolute;
  inset: -6% 0 0;
  width: 100%;
  height: 106%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--p, 0) * 6%), 0);
}
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 11, 10, 0.1) 35%, rgba(12, 11, 10, 0.72) 100%); }
.hero__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; }
.hero__eyebrow { color: rgba(242, 240, 235, 0.78); margin-bottom: 0.7rem; }
.hero__title {
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.034em;
  font-variation-settings: 'wdth' 88;
}

.hero__below { display: grid; gap: 1.1rem; padding: 1.25rem var(--pad) 0; }
.hero__lead { max-width: 40ch; font-size: var(--t-lead); color: var(--grey); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; }
.btn--hero { background: var(--ink); color: var(--paper); }
.btn--hero:hover { background: #3a3834; }

/* Accesos directos a categorías */
.shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.75rem var(--pad) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shortcut {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.85rem 0.5rem 0.85rem 0;
  transition: background-color 0.3s var(--ease);
}
.shortcut + .shortcut { padding-left: 0.75rem; border-left: 1px solid var(--line); }
.shortcut__img { display: none; flex: none; width: 44px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--paper-2); }
.shortcut__img img { width: 100%; height: 100%; object-fit: cover; }
.shortcut__text { display: grid; min-width: 0; }
.shortcut__name { font-size: 0.95rem; font-weight: 500; }
.shortcut__count { color: var(--grey); }
.shortcut__arrow { display: none; margin-left: auto; transition: transform 0.35s var(--ease); }
.shortcut:hover .shortcut__arrow { transform: translateX(4px); }

@media (max-width: 479px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (min-width: 720px) {
  .shortcut__img, .shortcut__arrow { display: block; }
  .shortcut { padding-right: 1.25rem; }
  .shortcut + .shortcut { padding-left: 1.25rem; }
}

@media (min-width: 960px) {
  .hero { display: grid; grid-template-areas: 'frame' 'shortcuts'; }
  .hero__frame {
    grid-area: frame;
    height: clamp(460px, calc(100svh - var(--nav-h) - 130px), 700px);
  }
  .hero__overlay { right: 50%; padding: 2.25rem; }
  .hero__below {
    grid-area: frame;
    align-self: end;
    justify-self: end;
    z-index: 1;
    width: min(400px, 38%);
    margin-right: var(--pad);
    padding: 0 2.25rem 2.4rem 0;
    color: var(--paper);
  }
  .hero__lead { color: rgba(242, 240, 235, 0.84); }
  .btn--hero { background: var(--paper); color: var(--ink); }
  .btn--hero:hover { background: #fff; }
  .shortcuts { grid-area: shortcuts; margin-top: 1.25rem; }
}

/* ---------- Encabezado de sección ---------- */
.sec-head { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.sec-head__text { max-width: 42ch; font-size: 0.95rem; color: var(--grey); }
@media (min-width: 960px) {
  .sec-head { grid-template-columns: 1fr minmax(0, 24rem); align-items: end; gap: 3rem; }
}

/* ---------- Productos ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.tabs {
  display: flex;
  gap: 0.35rem;
  width: calc(100% + var(--pad) * 2);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--grey);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.tab sup { margin-left: 0.2rem; font-family: var(--f-mono); font-size: 0.62rem; }
.tab:hover { color: var(--ink); border-color: var(--line-strong); }
.tab[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.toolbar__end { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.toolbar__count { color: var(--grey); white-space: nowrap; }
.select { position: relative; display: block; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0 2.25rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 0.875rem;
  cursor: pointer;
}
.select select:hover { border-color: var(--line-strong); }
.select::after {
  content: '';
  position: absolute; right: 1rem; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select.is-active select { border-color: var(--ink); }

@media (min-width: 720px) {
  .tabs { width: auto; margin: 0; padding: 0; }
  .toolbar__end { width: auto; flex-direction: row-reverse; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 0.75rem;
}
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 1.25rem; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }

.tile { animation: tile-in 0.5s var(--ease) both; }
@keyframes tile-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tile__btn { display: block; width: 100%; text-align: left; }
.tile__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), opacity 0.45s var(--ease);
}
.tile__media .tile__alt { opacity: 0; }
@media (hover: hover) {
  .tile__btn:hover .tile__media img { transform: scale(1.03); }
  .tile__btn:hover .tile__alt { opacity: 1; }
}
.tile__badge {
  position: absolute;
  left: 0.5rem; top: 0.5rem;
  padding: 0.3rem 0.45rem;
  border-radius: 2px;
  background: var(--paper);
  font-size: 0.62rem;
}
.tile__badge--out { background: var(--ink); color: var(--paper); }

.tile__body { display: grid; gap: 0.15rem; padding-top: 0.75rem; }
.tile__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.tile__name { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.tile__price { font-size: 0.92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile__meta { color: var(--grey); }
.tile__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.75rem; margin-top: 0.35rem; }
.tile__wholesale { color: var(--accent); }
.tile--out .tile__name, .tile--out .tile__price { color: var(--grey); }

@media (max-width: 719px) {
  .tile__row { flex-direction: column; gap: 0.05rem; }
  .tile__name { font-size: 0.92rem; }
  .tile__price { font-size: 0.88rem; }
  .tile__meta { font-size: 0.64rem; }
  .tile__foot { flex-direction: column; align-items: flex-start; }
}

.dots { display: inline-flex; gap: 0.25rem; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }

.empty { padding: 3rem 0; text-align: center; color: var(--grey); }

/* ---------- Usos ---------- */
.uses { padding-top: 0; }
.uses__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: 0.75rem;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.uses__grid::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .uses__grid { grid-auto-columns: 42%; gap: 1.25rem; } }
@media (min-width: 1100px) {
  .uses__grid { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; gap: 1.5rem; }
}

.use { display: block; width: 100%; text-align: left; scroll-snap-align: start; }
.use__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.use__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.use__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12, 11, 10, 0.55)); }
.use__title { position: absolute; left: 1rem; bottom: 0.85rem; z-index: 1; color: var(--paper); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; }
.use__text { margin-top: 0.75rem; font-size: 0.92rem; color: var(--grey); }
.use__link { display: inline-flex; gap: 0.4rem; margin-top: 0.45rem; }
.use__link span { transition: transform 0.35s var(--ease); }
@media (hover: hover) {
  .use:hover .use__media img { transform: scale(1.03); }
  .use:hover .use__link span { transform: translateX(4px); }
}

/* ---------- Material ---------- */
.material { background: var(--surface); }
.material__grid { display: grid; gap: 1.5rem; align-items: center; }
.legend { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.legend li {
  display: grid;
  grid-template-columns: 2rem auto 1fr;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  transition: opacity 0.4s var(--ease);
}
.material.is-animated .legend li { opacity: 0.45; }
.material.is-animated .legend li.is-active { opacity: 1; }
.legend .mono { color: var(--grey); }
.legend strong { font-weight: 500; }
.legend li > span:last-child { text-align: right; color: var(--grey); }
.benefits { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.benefits li { padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; color: var(--grey); }

.stack { position: relative; height: clamp(280px, 78vw, 440px); display: grid; place-items: center; perspective: 1600px; --dist: 42px; }
.stack__scene { position: relative; width: clamp(150px, 40vw, 250px); aspect-ratio: 4 / 5; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-36deg); }
.layer { position: absolute; inset: 0; border-radius: 4px; background-size: cover; background-position: center; }
.layer--top {
  background-color: #1b1a18;
  background-image: url('https://images.unsplash.com/photo-1764065339829-b2bba9ca509c?auto=format&fit=crop&w=560&q=70');
  transform: translateZ(calc(var(--split, 0) * var(--dist) + 8px));
  box-shadow: 0 4px 0 #0a0a09, 0 30px 50px -28px rgba(0, 0, 0, 0.45);
}
.layer--core {
  background-color: #eee7d8;
  background-image: url('https://images.unsplash.com/photo-1578499177313-0416e8f509e6?auto=format&fit=crop&w=560&q=65');
  background-blend-mode: multiply;
  box-shadow: 0 11px 0 #d6ccb7, 0 30px 50px -28px rgba(0, 0, 0, 0.3);
}
.layer--base {
  background-color: #d9ccb4;
  background-image: url('https://images.unsplash.com/photo-1686806374120-e7ae3f19801d?auto=format&fit=crop&w=560&q=65');
  transform: translateZ(calc(var(--split, 0) * var(--dist) * -1 - 10px));
  box-shadow: 0 3px 0 #b3a58b, 0 30px 50px -28px rgba(0, 0, 0, 0.25);
}
.layer__tag { position: absolute; left: calc(100% + 0.8rem); top: 50%; white-space: nowrap; color: var(--grey); opacity: var(--split, 0); transform: translateY(-50%); font-size: 0.64rem; }
.stack__state { position: absolute; left: 0; right: 0; bottom: 0.25rem; text-align: center; color: var(--grey); }

@media (min-width: 960px) {
  .material__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .stack { height: 460px; --dist: 70px; }
  .stack__scene { width: 260px; }
  .layer__tag { font-size: 0.7rem; }
}

/* ---------- Nosotros ---------- */
.about__grid { display: grid; gap: 3rem; align-items: center; }
.about__media { position: relative; margin-bottom: 1.5rem; }
.about__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.about__img img { width: 100%; height: 108%; object-fit: cover; transform: translate3d(0, calc(var(--p, 0.5) * -6%), 0); }
.about__clip {
  position: absolute;
  right: 0.75rem;
  bottom: -1.5rem;
  width: 38%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 5px solid var(--paper);
  border-radius: var(--radius);
  background: #1b1916;
}
.about__clip video { width: 100%; height: 100%; object-fit: cover; }
.about__copy .h2 { max-width: 17ch; }
.pill {
  display: inline-block;
  width: 1.8em;
  height: 0.78em;
  vertical-align: baseline;
  transform: translateY(0.08em);
  overflow: hidden;
  border-radius: 999px;
  background: var(--paper-2);
}
.pill video { width: 100%; height: 100%; object-fit: cover; }

.steps { margin: 1.75rem 0 1rem; border-top: 1px solid var(--line); }
.steps li {
  display: grid;
  grid-template-columns: 2rem 7rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.steps .mono { color: var(--grey); }
.steps strong { font-weight: 500; }
.steps li > span:last-child { color: var(--grey); }

@media (max-width: 479px) {
  .steps li { grid-template-columns: 2rem 1fr; }
  .steps li > span:last-child { grid-column: 2; font-size: 0.85rem; }
}

@media (min-width: 960px) {
  .about__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); }
  .about__media { margin-bottom: 0; }
  .about__img { aspect-ratio: 4 / 5; max-height: 640px; }
  .about__clip { right: -1.5rem; bottom: 2rem; width: 34%; border-width: 6px; }
}

/* ---------- Mayoristas ---------- */
.wholesale { background: var(--ink); color: var(--paper); }
.wholesale .label { color: var(--grey-2); }
.wholesale .lead { color: rgba(242, 240, 235, 0.72); }
.wholesale__grid { display: grid; gap: 2.5rem; }
.terms { border-top: 1px solid var(--line-inv); }
.terms > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-inv);
  font-size: 0.95rem;
}
.terms dt { color: var(--grey-2); padding-top: 0.2rem; }
@media (min-width: 960px) {
  .wholesale__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; }
  .terms > div { grid-template-columns: 9rem 1fr; }
}

/* ---------- Contacto ---------- */
.contact__grid { display: grid; gap: 3rem; }
.info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.info dt { color: var(--grey); margin-bottom: 0.25rem; }
.info dd { font-size: 0.92rem; overflow-wrap: anywhere; }
.info a:hover { text-decoration: underline; text-underline-offset: 3px; }

.faq__title { color: var(--grey); padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0.75rem 2rem 0.75rem 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: '';
  position: absolute; right: 0.25rem; top: 50%;
  width: 12px; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 2rem 1.1rem 0; font-size: 0.92rem; color: var(--grey); }

@media (max-width: 479px) {
  .contact .actions .btn { flex: 1 1 100%; }
}
@media (min-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
}

/* ---------- Footer ---------- */
.footer { overflow: hidden; background: var(--ink); color: var(--paper); padding-top: 3rem; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; font-size: 0.875rem; }
.footer__brand { grid-column: 1 / -1; }
.footer__brand p { max-width: 32ch; margin-top: 0.75rem; color: var(--grey-2); }
.footer__col { display: grid; align-content: start; gap: 0.45rem; color: rgba(242, 240, 235, 0.75); }
.footer__col a { justify-self: start; transition: color 0.25s; }
.footer__col a:hover { color: var(--paper); }
.footer__title { margin-bottom: 0.3rem; color: var(--grey-2); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line-inv);
  font-size: 0.8rem;
  color: var(--grey-2);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer__legal a:hover { color: var(--paper); }
.footer__mark {
  margin: 0.5rem 0 0;
  padding-inline: var(--pad);
  font-size: 17vw;
  font-weight: 600;
  line-height: 0.74;
  letter-spacing: 0.02em;
  color: rgba(242, 240, 235, 0.07);
  white-space: nowrap;
  text-align: center;
  user-select: none;
  transform: translateY(10%);
}
@media (min-width: 960px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ---------- Ficha de producto ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.sheet.is-open .sheet__panel { opacity: 1; transform: none; }
.sheet__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding-inline: var(--pad);
  border-bottom: 1px solid var(--line);
}
.sheet__back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.9rem; font-weight: 500; }
.sheet__back span { transition: transform 0.3s var(--ease); }
.sheet__back:hover span { transform: translateX(-3px); }
.sheet__nav { display: flex; align-items: center; gap: 0.25rem; }
.sheet__nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); transition: border-color 0.25s; }
.sheet__nav button:hover { border-color: var(--ink); }
.sheet__nav .mono { min-width: 3.5rem; text-align: center; color: var(--grey); }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }

.pd { display: grid; }
.pd__media { position: relative; aspect-ratio: 1; max-height: 56svh; width: 100%; overflow: hidden; background: var(--paper-2); }
.pd__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pd-in 0.6s var(--ease) both; }
@keyframes pd-in { from { opacity: 0; } to { opacity: 1; } }
.pd__thumbs { position: absolute; left: var(--pad); bottom: 0.6rem; display: flex; }
.pd__thumb { width: 32px; height: 32px; display: grid; place-items: center; }
.pd__thumb::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); }
.pd__thumb[aria-current='true']::before { background: var(--ink); }

.pd__info { display: grid; align-content: start; gap: 1.1rem; padding: 1.5rem var(--pad) 2.5rem; }
.pd__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--grey); }
.pd__name { font-size: var(--t-h2); font-weight: 500; line-height: 1.02; letter-spacing: -0.028em; font-variation-settings: 'wdth' 92; }
.pd__desc { max-width: 42ch; color: var(--grey); }
.pd__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.pd__price > span:first-child { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pd__price .mono { color: var(--accent); }
.pd__block > .mono { display: block; margin-bottom: 0.55rem; color: var(--grey); }
.pd__colors { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 0.9rem 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  transition: border-color 0.25s;
}
.opt::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.opt:hover { border-color: var(--line-strong); }
.opt[aria-pressed='true'] { border-color: var(--ink); }
.pd__specs { border-top: 1px solid var(--line); font-size: 0.9rem; }
.pd__specs div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.pd__specs dt { color: var(--grey); }
.pd__specs dd { text-align: right; }
.pd__uses { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pd__uses button { min-height: 36px; padding: 0 0.85rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; transition: border-color 0.25s; }
.pd__uses button:hover { border-color: var(--ink); }
.pd__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding-top: 0.25rem; }
@media (max-width: 479px) {
  .pd__actions .btn { flex: 1 1 100%; }
  .sheet__back { font-size: 0.85rem; }
}

@media (min-width: 960px) {
  .sheet__panel { inset: 0 0 0 auto; width: min(1180px, 100%); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.12); transform: translateX(40px); }
  .sheet::before { content: ''; position: absolute; inset: 0; background: rgba(18, 18, 17, 0.35); opacity: 0; transition: opacity 0.4s; }
  .sheet.is-open::before { opacity: 1; }
  .pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100%; }
  .pd__media { position: sticky; top: 0; height: calc(100svh - var(--nav-h)); max-height: none; aspect-ratio: auto; }
  .pd__info { padding: 2.5rem 3rem 3rem; }
}

/* Los contenedores de tarjetas son <span> dentro de <button>: se fuerzan a bloque */
.tile__media, .tile__meta, .use__media, .use__text, .shortcut__img { display: block; }
.shortcut__text { display: grid; }
@media (max-width: 719px) { .shortcut__img { display: none; } }

.more { display: flex; justify-content: center; margin-top: 2rem; }
.pd__desc { margin-top: 0.6rem; }

/* En celular la consulta queda siempre a mano dentro de la ficha */
@media (max-width: 959px) {
  .pd__actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 calc(var(--pad) * -1) -2.5rem;
    padding: 0.75rem var(--pad) calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
}
@media (min-width: 1100px) { .tile__media { aspect-ratio: 5 / 6; } }