/* ====== OLIMPO LÁSER ====== */
:root {
  --bg: #060708;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .15);
  --txt: #f5f6f8;
  --muted: #a2a8b4;
  --muted2: #727884;
  --laser: #ff3d2e;
  --amber: #ff9d00;
  --cyan: #35e0ff;
  --grad: linear-gradient(100deg, #ff3d2e, #ff9d00);
  --radius: 20px;
  --max: 1200px;
  --glass: rgba(12, 15, 20, .62);
  --glass2: rgba(14, 18, 24, .7);
  /* Altura de una "pantalla". El JS la fija en px reales en escritorio
     (detecta barra de marcadores, zoom, etc.); en móvil queda 100svh estable. */
  --vh: 100svh;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

h1,
h2,
h3,
h4,
h5,
.nav__name {
  font-family: 'Sora', 'Inter', sans-serif;
  line-height: 1.06;
  letter-spacing: -.025em
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

section {
  position: relative
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

/* ---- Full-page 3D layers ---- */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  touch-action: pan-y
}

.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 85% 20%, rgba(255, 61, 46, .08), transparent 60%),
    radial-gradient(65% 55% at 12% 65%, rgba(53, 224, 255, .07), transparent 62%),
    radial-gradient(60% 50% at 55% 108%, rgba(255, 157, 0, .07), transparent 60%),
    radial-gradient(120% 80% at 50% -10%, transparent, rgba(6, 7, 8, .35) 55%, rgba(6, 7, 8, .72) 100%),
    linear-gradient(180deg, rgba(6, 7, 8, .28) 0%, rgba(6, 7, 8, .10) 22%, rgba(6, 7, 8, .20) 55%, rgba(6, 7, 8, .55) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.content {
  position: relative;
  z-index: 2
}

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: linear-gradient(180deg, #ff5342, #e42a1c);
  color: #fff;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
  padding: .85rem 1.5rem;
  border-radius: 20px;
  border: 0;
  cursor: pointer;
  font-size: .98rem;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, filter .3s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

.btn--ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--txt);
  border: 1px solid var(--line2);
  box-shadow: none;
  backdrop-filter: blur(8px)
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4)
}

.btn--wa {
  background: linear-gradient(180deg, #3ad07e, #1fa958);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn--wa:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

.btn--ig {
  background: linear-gradient(120deg, #7c3aed, #e1306c 55%, #ff9d00);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn--ig:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

.btn--sm {
  padding: .6rem 1.15rem;
  font-size: .9rem
}

.btn--lg {
  padding: 1.05rem 1.9rem;
  font-size: 1.05rem
}

.btn__ic {
  width: 1.25em;
  height: 1.25em;
  flex: none
}

/* ---- Nav ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  transition: background .35s, border-color .35s, padding .35s;
  border-bottom: 1px solid transparent;
  padding-top: max(1rem, env(safe-area-inset-top));
}

.nav.scrolled {
  background: rgba(6, 7, 8, .72);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  padding-top: max(.7rem, env(safe-area-inset-top));
  padding-bottom: .7rem
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0
}

.nav__logo {
  height: clamp(38px, 7.5vw, 56px);
  width: auto;
  /*filter: brightness(0) invert(1)*/
}

.nav__name {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .01em;
  white-space: nowrap
}

.nav__name b {
  color: var(--laser);
  font-weight: 800
}

.nav__links {
  display: flex;
  gap: 1.7rem;
  margin-left: auto;
  font-size: .96rem
}

.nav__links a {
  color: var(--muted);
  position: relative;
  transition: color .2s
}

.nav__links a:hover {
  color: var(--txt)
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--grad);
  transition: width .25s
}

.nav__links a:hover::after {
  width: 100%
}

.nav__right {
  display: flex;
  align-items: center;
  gap: .9rem
}

.nav__ig {
  color: var(--muted);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  transition: .25s
}

.nav__ig svg {
  width: 19px;
  height: 19px
}

.nav__ig:hover {
  color: var(--txt);
  border-color: var(--line2);
  background: rgba(255, 255, 255, .06)
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0
}

.nav__burger span {
  width: 20px;
  height: 2px;
  background: var(--txt);
  border-radius: 2px;
  transition: .3s
}

.nav.open .nav__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.nav.open .nav__burger span:nth-child(2) {
  opacity: 0
}

.nav.open .nav__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* Enlace "Pagos" del menú: oculto en desktop (allí se usa el botón),
   visible solo dentro del menú hamburguesa en móvil */
.nav__only-mobile {
  display: none
}

@media (max-width:820px) {
  .nav.open .nav__links .nav__only-mobile {
    display: block
  }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: var(--vh);
  display: flex;
  align-items: center;
  overflow: hidden
}

.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 35%, rgba(255, 61, 46, .22), transparent 70%),
    radial-gradient(50% 60% at 20% 80%, rgba(53, 224, 255, .16), transparent 70%),
    radial-gradient(45% 55% at 88% 78%, rgba(255, 157, 0, .14), transparent 72%),
    radial-gradient(40% 45% at 8% 12%, rgba(124, 58, 237, .13), transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem clamp(1.2rem, 4vw, 2.5rem) 4.5rem
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  margin-bottom: 1.6rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--laser);
  box-shadow: 0 0 12px var(--laser);
  animation: pulse 1.8s infinite
}

@keyframes pulse {
  50% {
    opacity: .4;
    transform: scale(.7)
  }
}

.hero__title {
  font-size: clamp(1.9rem, 6.5vw, 5.6rem);
  font-weight: 800;
  margin-bottom: 1.3rem;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .5)
}

.hero__lead {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  margin-bottom: 2.2rem
}

.hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem
}

.hero__stats {
  list-style: none;
  display: flex;
  gap: clamp(1.4rem, 4vw, 2.8rem);
  flex-wrap: wrap
}

.hero__stats li {
  display: flex;
  flex-direction: column
}

.hero__stats b {
  font-family: 'Sora';
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  font-weight: 700
}

.hero__stats span {
  color: var(--muted);
  font-size: .85rem;
  letter-spacing: .03em
}

.hero__scrollhint {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase
}

.hero__scrollhint span {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--laser), transparent);
  animation: scrolldrop 1.8s infinite
}

@keyframes scrolldrop {
  0% {
    opacity: 0;
    transform: scaleY(.3)
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: scaleY(1) translateY(6px)
  }
}

/* ---- Marquee ---- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(8, 10, 13, .5);
  backdrop-filter: blur(6px);
  padding: 1.1rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  white-space: nowrap;
  animation: scroll-x 32s linear infinite;
  will-change: transform
}

.marquee__track span {
  font-family: 'Sora';
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  /*color: rgba(245, 246, 248, .14);
  -webkit-text-stroke: 1px rgba(255, 255, 255, .85);*/
  letter-spacing: -.01em
}

.marquee__track i {
  color: var(--laser);
  font-style: normal;
  font-size: 1rem
}

@keyframes scroll-x {
  to {
    transform: translateX(-50%)
  }
}

/* ---- Sections ---- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 4vw, 2.5rem)
}

.section__head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3.4rem
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--laser);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem
}

.kicker__line {
  width: 26px;
  height: 1px;
  background: var(--grad);
  display: inline-block
}

.section__head .kicker {
  justify-content: center
}

.section__title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .5)
}

.section__sub {
  color: var(--muted);
  margin-top: 1.1rem;
  font-size: clamp(1rem, 2.4vw, 1.08rem)
}

/* ---- Glass panels (share the 3D behind) ---- */
.card,
.mat,
.band__inner,
.contact__card,
.stat {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* ---- Service cards ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 1.5rem
}

.card {
  position: relative;
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.2rem);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .25s ease;
  will-change: transform
}

.card::before,
.mat::before,
.contact__card::before,
.band__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(160deg, var(--line2), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background .35s;
}

.card:hover::before {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent 55%)
}

.card__num {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  font-family: 'Sora';
  font-weight: 800;
  font-size: 2.6rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .12);
  z-index: 1
}

.card__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  z-index: 0;
  background: radial-gradient(50% 55% at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%)
}

.card:hover .card__glow {
  opacity: 1
}

.card>* {
  position: relative;
  z-index: 1
}

.card__icon {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 1.3rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 28%, transparent)
}

.card__icon svg {
  width: 29px;
  height: 29px
}

.card h3 {
  font-size: clamp(1.4rem, 3.5vw, 1.6rem);
  margin-bottom: .5rem
}

.card__desc {
  color: var(--muted);
  font-size: .98rem;
  margin-bottom: 1.5rem
}

.src {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  margin-bottom: 1.5rem
}

.src__row {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  flex-wrap: wrap
}

.tag {
  font-family: 'Sora';
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .04em;
  padding: .35rem .7rem;
  border-radius: 8px;
  white-space: nowrap;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent)
}

.tag--alt {
  color: var(--txt);
  background: rgba(255, 255, 255, .06);
  border-color: var(--line)
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.chips span {
  font-size: .85rem;
  color: var(--txt);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .32rem .8rem;
  transition: .2s
}

.chips span:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent)
}

.chips--wide span {
  font-size: .9rem;
  padding: .4rem .9rem
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Sora';
  font-weight: 600;
  font-size: .92rem;
  color: var(--accent)
}

.card__cta span {
  transition: transform .25s
}

.card__cta:hover span {
  transform: translateX(5px)
}

/* ---- Band ---- */
.band {
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem)
}

.band__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  border-radius: 26px;
  padding: clamp(2rem, 5vw, 3.6rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  overflow: hidden;
  isolation: isolate
}

.band__inner>* {
  position: relative;
  z-index: 1
}

.band__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  margin: .3rem 0 1rem
}

.band__text {
  color: var(--muted);
  max-width: 30rem
}

.band__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.stat {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.1rem, 3vw, 1.4rem) clamp(1.1rem, 3vw, 1.5rem)
}

.stat b {
  font-family: 'Sora';
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  line-height: 1
}

.stat span {
  color: var(--muted);
  font-size: .9rem
}

/* ---- Materials ---- */
.materials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.1rem
}

.mat {
  position: relative;
  padding: clamp(1.4rem, 4vw, 1.8rem) clamp(1.3rem, 4vw, 1.6rem);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s;
  transform-style: preserve-3d;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.mat::before {
  background: linear-gradient(160deg, color-mix(in srgb, var(--m) 45%, var(--line2)), transparent 50%)
}

.mat__wm {
  position: absolute;
  top: -.4rem;
  right: .6rem;
  font-family: 'Sora';
  font-weight: 800;
  font-size: 5.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--m) 45%, transparent);
  z-index: 0;
  opacity: .6
}

.mat b {
  font-family: 'Sora';
  font-size: 1.25rem;
  position: relative;
  z-index: 1
}

.mat__d {
  color: var(--muted);
  font-size: .9rem;
  position: relative;
  z-index: 1;
  margin-top: .25rem
}

.mat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--m);
  box-shadow: 0 0 22px var(--m);
  z-index: 1
}

/* ---- Timeline ---- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.4rem
}

.timeline__line {
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line2), transparent);
  z-index: 0
}

.step {
  position: relative;
  text-align: center
}

.step__node {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--laser);
  box-shadow: 0 0 0 5px rgba(255, 61, 46, .15), 0 0 18px var(--laser);
  display: block;
  margin: 0 auto 1.6rem;
  position: relative;
  z-index: 1
}

.step__n {
  font-family: 'Sora';
  font-size: 1rem;
  font-weight: 700;
  color: var(--laser);
  letter-spacing: .1em
}

.step h4 {
  font-size: 1.15rem;
  margin: .5rem 0
}

.step p {
  color: var(--muted);
  font-size: .93rem;
  max-width: 15rem;
  margin: 0 auto
}

/* ---- Contact ---- */
.contact {
  padding-top: 0
}

.contact__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border-radius: 28px;
  padding: clamp(2.4rem, 7vw, 5rem) clamp(1.2rem, 4vw, 2rem)
}

.contact__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(55% 90% at 50% -10%, rgba(255, 61, 46, .2), transparent 60%), radial-gradient(50% 80% at 50% 120%, rgba(53, 224, 255, .12), transparent 60%)
}

.contact__card>* {
  position: relative;
  z-index: 1
}

.contact__card .kicker {
  justify-content: center
}

.contact__title {
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  font-weight: 800
}

.contact__sub {
  color: var(--muted);
  margin: 1rem auto 2.2rem;
  max-width: 34rem;
  font-size: clamp(1rem, 2.5vw, 1.05rem)
}

.contact__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap
}

/* ---- Footer ---- */
.footer {
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 13, .6);
  backdrop-filter: blur(10px)
}

.footer__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3.2rem clamp(1.2rem, 4vw, 2.5rem) 2.4rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 2rem
}

.footer__brand img {
  height: 30px;
  filter: brightness(0) invert(1);
  margin-bottom: .9rem
}

.footer__brand span {
  font-family: 'Sora';
  font-weight: 800;
  font-size: 1.2rem;
  display: block
}

.footer__brand b {
  color: var(--laser)
}

.footer__tag {
  color: var(--muted);
  font-size: .92rem;
  margin-top: .6rem;
  max-width: 20rem
}

.footer__col h5 {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 1rem;
  font-weight: 600
}

.footer__col a {
  display: block;
  color: var(--muted);
  font-size: .95rem;
  padding: .28rem 0;
  transition: color .2s
}

.footer__col a:hover {
  color: var(--txt)
}

.footer__bar {
  border-top: 1px solid var(--line);
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.4rem clamp(1.2rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--muted2);
  font-size: .85rem
}

.footer__social {
  display: flex;
  gap: .7rem
}

.footer__social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  transition: .25s
}

.footer__social a svg {
  width: 19px;
  height: 19px
}

.footer__social a:hover {
  color: var(--txt);
  border-color: var(--line2);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px)
}

/* ---- Reveal on scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1)
}

[data-reveal].in {
  opacity: 1;
  transform: none
}

/* ============ RESPONSIVE ============ */
@media (max-width:960px) {
  .band__inner {
    grid-template-columns: 1fr;
    gap: 1.8rem
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr
  }

  .footer__brand {
    grid-column: 1/-1
  }
}

@media (max-width:820px) {

  .nav__links,
  .nav__right .btn {
    display: none
  }

  .nav {
    gap: .5rem;
    padding: .75rem 1rem;
    padding-top: max(.75rem, env(safe-area-inset-top));
  }

  .nav__logo {
    height: clamp(40px, 9.5vw, 52px);
  }

  .nav__right {
    margin-left: auto;
    gap: .4rem;
  }

  .nav__ig {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .nav__ig svg {
    width: 17px;
    height: 17px;
  }

  .nav__burger {
    display: flex;
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .nav.open .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(6, 7, 8, .97);
    backdrop-filter: blur(18px);
    padding: 1.4rem 2rem;
    gap: 1.3rem;
    border-bottom: 1px solid var(--line);
    margin: 0;
    font-size: 1.05rem;
  }

  .nav.open .nav__links a {
    color: var(--txt)
  }

  .timeline__line {
    display: none
  }

  .step {
    padding: 1.4rem;
    border-radius: 16px;
    background: var(--glass);
    border: 1px solid var(--line);
    backdrop-filter: blur(12px)
  }

  .step__node {
    margin-bottom: 1rem
  }
}

@media (max-width:560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.6rem
  }

  .footer__bar {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.1rem
  }

  .band__stats {
    grid-template-columns: 1fr 1fr
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch
  }

  .hero__cta .btn {
    width: 100%
  }

  .contact__actions {
    flex-direction: column;
    align-items: stretch
  }

  .contact__actions .btn {
    width: 100%
  }

  .card__num {
    font-size: 2.2rem
  }
}

@media (max-width:380px) {
  .hero__stats {
    gap: 1.2rem
  }

  .band__stats {
    grid-template-columns: 1fr
  }
}

/* Coarse pointer (touch): drop hover-only motion */
@media (hover:none) {
  .card:hover {
    transform: none
  }

  .mat:hover {
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto
  }

  [data-reveal] {
    opacity: 1;
    transform: none
  }

  /* El marquee es un elemento de marca: se mantiene en movimiento incluso con
     "reducir movimiento"/ahorro de batería (que congelaban el carrusel en
     algunos móviles), pero a una velocidad más suave. */
  .marquee__track {
    animation: scroll-x 46s linear infinite !important
  }
}

/* ==================================================================
   ✦ PREMIUM / DAZZLE LAYER ✦
   ================================================================== */
@property --ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ---- Kinetic titles: laser "engraves" the heading on reveal ---- */
.kinetic {
  position: relative;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s cubic-bezier(.62, .02, .2, 1)
}

.in .kinetic,
.section__head.in .kinetic {
  clip-path: inset(0 0 0 0)
}

.contact__card.in .kinetic,
.band__inner.in .kinetic {
  clip-path: inset(0 0 0 0)
}

.kinetic::after {
  content: "";
  position: absolute;
  top: -8%;
  left: 0;
  height: 116%;
  width: 3px;
  background: linear-gradient(var(--laser), var(--amber));
  box-shadow: 0 0 18px var(--laser), 0 0 40px var(--laser);
  opacity: 0;
  border-radius: 3px;
  pointer-events: none;
}

.in .kinetic::after,
.section__head.in .kinetic::after,
.contact__card.in .kinetic::after,
.band__inner.in .kinetic::after {
  animation: engrave-line 1.05s cubic-bezier(.62, .02, .2, 1) forwards;
}

@keyframes engrave-line {
  0% {
    opacity: 1;
    left: 0
  }

  88% {
    opacity: 1
  }

  100% {
    left: 100%;
    opacity: 0
  }
}

/* ---- Engrave statement band (the "wow" right after the hero) ---- */
.engrave-band {
  position: relative;
  text-align: center;
  padding: clamp(4rem, 12vw, 9rem) clamp(1.2rem, 4vw, 2.5rem);
  overflow: hidden
}

.engrave-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 60% at 50% 45%, rgba(255, 61, 46, .12), transparent 70%), radial-gradient(40% 50% at 70% 70%, rgba(53, 224, 255, .08), transparent 70%)
}

.engrave {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .02em;
  align-items: center;
  line-height: .92
}

.engrave span {
  font-family: 'Sora';
  font-weight: 800;
  font-size: clamp(2rem, 10vw, 7rem);
  letter-spacing: -.03em;
  max-width: 100%;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .24);
  background: linear-gradient(92deg, #ff3d2e, #ff9d00) no-repeat left center;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0% 100%;
  transition: background-size 1s cubic-bezier(.5, 0, .2, 1), -webkit-text-stroke .8s ease;
}

.engrave.in span {
  background-size: 100% 100%;
  -webkit-text-stroke-color: transparent
}

.engrave.in span:nth-child(2) {
  transition-delay: .16s
}

.engrave.in span:nth-child(3) {
  transition-delay: .32s
}

.engrave-sub {
  position: relative;
  z-index: 1;
  color: var(--muted);
  max-width: 34rem;
  margin: 1.6rem auto 0;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease .5s, transform .8s ease .5s
}

.engrave.in~.engrave-sub,
.engrave-band.in .engrave-sub {
  opacity: 1;
  transform: none
}

/* ---- Rotating aurora glow-ring around premium panels ---- */
.aurora-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from var(--ang), transparent 0deg 55deg, var(--accent, #ff3d2e) 105deg, #ff9d00 130deg, transparent 175deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-ang 7s linear infinite;
  opacity: .45;
  transition: opacity .4s;
}

.aurora-border:hover::after {
  opacity: .95
}

.contact__card.aurora-border::after,
.band__inner.aurora-border::after {
  opacity: .6;
  animation-duration: 11s
}

@keyframes spin-ang {
  to {
    --ang: 360deg
  }
}

@media (prefers-reduced-motion:reduce) {
  .aurora-border::after {
    animation: none;
    opacity: .5
  }
}

/* ---- Section titles: bigger + glow ---- */
.section__title {
  font-size: clamp(1.7rem, 5.4vw, 4rem)
}

/* ---- Service cards: less "boxy", more depth + spotlight ---- */
.card {
  border-radius: 24px;
  padding: clamp(1.7rem, 4vw, 2.4rem)
}

.card__icon {
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent)
}

.card:hover {
  transform: perspective(900px) translateY(-6px)
}

.card h3 {
  background: linear-gradient(180deg, #fff, #c9ccd2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

/* ---- Material tiles: laser sheen sweep on hover ---- */
.mat {
  border-radius: 20px;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s
}

.mat:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5)
}

.mat__wm {
  transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1)
}

.mat:hover .mat__wm {
  opacity: 1;
  transform: scale(1.08) rotate(-3deg)
}

.mat b {
  background: linear-gradient(180deg, #fff, #cfd3da);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

/* ---- Reveal: add scale + blur for a richer entrance ---- */
[data-reveal] {
  filter: blur(6px)
}

[data-reveal].in {
  filter: blur(0)
}

[data-reveal] {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s ease
}

/* ---- Engrave band responsive polish ---- */
@media (max-width:560px) {
  .engrave span {
    -webkit-text-stroke-width: 1px
  }
}

/* ==================================================================
   ✦ DETALLE FINO: scrollbar, galería/feed, ajustes ✦
   ================================================================== */

/* ---- Scrollbar estilizado ---- */
html {
  scrollbar-width: thin;
  scrollbar-color: #ff5a3c rgba(10, 13, 18, .9)
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px
}

::-webkit-scrollbar-track {
  background: rgba(10, 13, 18, .9)
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff5342, #ff9d00);
  border-radius: 20px;
  border: 3px solid rgba(10, 13, 18, .9)
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6b52, #ffb020)
}

::selection {
  background: rgba(255, 61, 46, .35);
  color: #fff
}

/* ---- Anclas: que el nav fijo no tape los títulos ---- */
/* el offset de las anclas lo maneja scroll-padding-top (ver bloque de snap) */

/* ---- Balance de tarjetas de servicio (misma altura, CTA abajo) ---- */
.card {
  display: flex;
  flex-direction: column
}

.card .src {
  margin-bottom: 1.5rem
}

.card__cta {
  margin-top: auto
}

/* ---- Portafolio (galería bento) ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 1rem;
  grid-auto-flow: dense
}

.pf {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 61, 46, .14), rgba(53, 224, 255, .10)), var(--glass);
  border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}

.pf--wide {
  grid-column: span 2
}

.pf--tall {
  grid-row: span 2
}

.pf--big {
  grid-column: span 2;
  grid-row: span 2
}

.pf:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  border-color: var(--line2)
}

.pf img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
  z-index: 1
}

.pf.has img {
  opacity: 1
}

.pf.has:hover img {
  transform: scale(1.09)
}

.pf__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: rgba(255, 255, 255, .22);
  z-index: 0
}

.pf.has .pf__ph {
  display: none
}

.pf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}

.pf.has::after {
  opacity: 0;
}

.pf.has:hover::after {
  opacity: 1;
}

.pf figcaption {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.2rem;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: .88rem;
  line-height: 1.4;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.pf.has figcaption {
  transform: none;
  opacity: 0;
}

.pf.has:hover figcaption {
  opacity: 1;
  transform: scale(1);
}

.gallery__cta {
  text-align: center;
  margin-top: 2.4rem
}

/* ---- Galería responsive ---- */
@media (max-width:900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px
  }

  .pf--big {
    grid-column: span 2;
    grid-row: span 2
  }

  .pf--wide {
    grid-column: span 2;
    grid-row: span 1
  }

  .pf--tall {
    grid-column: span 1;
    grid-row: span 2
  }
}

@media (max-width:520px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: .7rem
  }

  .pf--big {
    grid-column: span 2;
    grid-row: span 2
  }

  .pf--wide {
    grid-column: span 2
  }

  .pf--tall {
    grid-row: span 2
  }

  .pf figcaption {
    transform: translateY(0)
  }
}

/* ---- Instagram feed (widget host) ---- */
.ig-feed {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2)
}

/* Cualquier widget incrustado (iframe) se adapta al ancho */
.ig-feed iframe {
  width: 100% !important;
  min-height: min(72vw, 560px);
  border: 0 !important;
  display: block
}

.ig-feed [class*="snapwidget"] {
  width: 100% !important
}

/* Oculta el mensaje "conectar" en cuanto haya un widget real */
.ig-feed:has(iframe) .ig-feed__connect,
.ig-feed:has(script) .ig-feed__connect,
.ig-feed:has(.behold-widget) .ig-feed__connect {
  display: none
}

.ig-feed__connect {
  padding: clamp(2.2rem, 6vw, 3.6rem) clamp(1.4rem, 4vw, 2rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.ig-feed__ic {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  margin-bottom: 1.2rem;
  background: linear-gradient(120deg, #7c3aed, #e1306c 55%, #ff9d00);
  box-shadow: 0 10px 34px rgba(225, 48, 108, .35)
}

.ig-feed__ic svg {
  width: 30px;
  height: 30px
}

.ig-feed__connect h3 {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  margin-bottom: .5rem
}

.ig-feed__connect>p {
  color: var(--muted);
  max-width: 34rem;
  margin-bottom: 1.4rem
}

.ig-steps {
  list-style: none;
  counter-reset: s;
  text-align: left;
  max-width: 32rem;
  margin: 0 auto 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.ig-steps li {
  counter-increment: s;
  position: relative;
  padding-left: 2.6rem;
  color: var(--txt);
  font-size: .98rem;
  line-height: 1.5
}

.ig-steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: -.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Sora';
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 4px 14px rgba(255, 61, 46, .35)
}

.ig-steps b {
  color: #fff
}

/* ---- Feed cargado: el panel desaparece y queda la galería ---- */
.ig-feed.loaded {
  background: none;
  border: 0;
  backdrop-filter: none;
  overflow: visible;
  border-radius: 0
}

.pf__vid {
  position: absolute;
  top: .7rem;
  right: .8rem;
  z-index: 4;
  font-size: .8rem;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px)
}

.pf figcaption {
  font-weight: 500;
  font-size: .85rem;
  line-height: 1.35
}

/* ==================================================================
   ✦ ANTI-DESBORDE / TIPOGRAFÍA RESPONSIVA ✦
   ================================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
p,
a,
span,
li,
figcaption {
  overflow-wrap: break-word;
  word-break: break-word
}

.hero__title,
.section__title,
.contact__title,
.band__title,
.engrave span,
.card h3,
.mat b {
  max-width: 100%;
  hyphens: none
}

/* Pantallas pequeñas: encabezados aún más contenidos */
@media (max-width:480px) {
  .hero__title {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem);
    line-height: 1.12
  }

  .section__title {
    font-size: clamp(1.55rem, 7.5vw, 2.2rem)
  }

  .contact__title {
    font-size: clamp(1.5rem, 7vw, 2rem)
  }

  .engrave span {
    font-size: clamp(1.9rem, 12vw, 3rem);
    -webkit-text-stroke-width: 1px
  }

  .band__title {
    font-size: clamp(1.4rem, 6.5vw, 2rem)
  }

  .hero__lead,
  .section__sub {
    font-size: 1rem
  }

  .btn--lg {
    padding: .95rem 1.4rem;
    font-size: 1rem
  }

  .section {
    padding-left: 1.1rem;
    padding-right: 1.1rem
  }
}

@media (max-width:360px) {
  .hero__stats b {
    font-size: 1.35rem
  }

  .chips span {
    font-size: .8rem;
    padding: .3rem .7rem
  }

  .card__num {
    font-size: 2rem
  }
}

/* ==================================================================
   ✦ SCROLL POR SECCIONES (snap) + HERO EN UNA PANTALLA ✦
   ================================================================== */
/* Snap suave por sección: se acomoda a cada sección sin atrapar el
   contenido de las secciones más altas que la pantalla. */
/* Scroll INMERSIVO: cada bloque llena la pantalla. En escritorio el salto por
   sección lo controla el JS (initSectionSnap); el snap CSS se apaga para que no
   peleen. En móvil se usa snap nativo suave (más abajo). */
html {
  scroll-snap-type: none
}

.hero,
.engrave-band,
.section,
.band {
  min-height: var(--vh);
  scroll-snap-align: start
}

/* Secciones: contenido centrado verticalmente (aspecto de pantalla completa) */
.engrave-band,
.section,
.band {
  display: flex;
  flex-direction: column;
  justify-content: center
}

/* Última sección: altura natural y scroll libre hacia el footer (que ancla al final) */
#contacto {
  min-height: auto;
  justify-content: flex-start;
  scroll-snap-align: start
}

.footer {
  scroll-snap-align: end
}

/* Hero en columna: contenido centrado + marquee pegado al pie (visible ya al abrir) */
.hero {
  flex-direction: column;
  align-items: center
}

.hero__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start
}

.hero .marquee {
  flex: 0 0 auto;
  width: 100%
}

/* --- Móvil: hero centrado, eyebrow en una sola línea y botones al centro --- */
@media (max-width:640px) {
  .hero__inner {
    align-items: center;
    text-align: center
  }

  .hero__eyebrow {
    white-space: nowrap;
    font-size: clamp(.58rem, 2.9vw, .76rem);
    letter-spacing: .04em;
    padding-inline: .85rem
  }

  .hero__lead {
    margin-left: auto;
    margin-right: auto
  }

  .hero__cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-inline: auto
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 340px
  }

  .hero__stats {
    justify-content: center
  }
}

/* En móvil las secciones son más altas: snap suave para no atrapar el contenido */
@media (max-width:820px) {
  html {
    scroll-snap-type: y proximity
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-snap-type: none
  }
}

/* La sección de Instagram permanece oculta hasta tener publicaciones
   (el display:flex del modo inmersivo anulaba el atributo [hidden]) */
.section[hidden] {
  display: none
}

/* Cada sección cabe en una sola pantalla: contenido envuelto y escalado por JS.
   Se reduce el padding enorme y se fija la altura para alinear el snap. */
.snapwrap {
  width: 100%;
  transform-origin: center center
}

@media (min-width:821px) {

  #servicios,
  #materiales,
  #portafolio,
  #proceso {
    height: var(--vh);
    overflow: hidden;
    /* el padding-top libera la barra de navegación fija para que el
       kicker ("Lo que hacemos", etc.) no quede oculto tras ella */
    padding-top: clamp(4.75rem, 9vh, 5.75rem);
    padding-bottom: clamp(1.25rem, 3vh, 2.5rem);
  }

  /* Instagram: galería compacta y uniforme (4×2) para que quepa en una pantalla
     sin imágenes gigantes ni recorte del título */
  #portafolio .section__head {
    margin-bottom: 1.4rem
  }

  #portafolio .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(160px, 25vh, 240px);
    gap: .8rem
  }

  #portafolio .pf--wide,
  #portafolio .pf--tall,
  #portafolio .pf--big {
    grid-column: auto;
    grid-row: auto
  }
}

/* --- Hero: que el "Desliza" entre en la primera pantalla --- */
@media (max-height:820px) {
  .hero__inner {
    padding-top: 5.2rem;
    padding-bottom: 3.6rem
  }

  .hero__eyebrow {
    margin-bottom: 1.1rem
  }

  .hero__title {
    margin-bottom: 1rem
  }

  .hero__lead {
    margin-bottom: 1.5rem
  }

  .hero__cta {
    margin-bottom: 1.8rem
  }
}

@media (max-height:660px) {
  .hero__inner {
    padding-top: 4.6rem;
    padding-bottom: 3rem
  }

  .hero__stats {
    gap: 1.2rem
  }

  .hero__stats b {
    font-size: 1.4rem
  }

  .hero__lead {
    margin-bottom: 1.1rem
  }

  .hero__cta {
    margin-bottom: 1.3rem
  }
}

/* ---- Social media buttons ---- */
.btn--fb {
  background: linear-gradient(180deg, #3b5998, #2d4373);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn--fb:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

.btn--tt {
  background: linear-gradient(180deg, #010101, #1f1f1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, 0.15)
}

.btn--tt:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

/* ---- Instagram feed loader ---- */
.ig-feed__loading {
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  color: var(--muted);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--laser);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ====== SOCIAL MEDIA BRAND COLORS ====== */
/* Instagram */
#link-instagram-nav,
#link-instagram-footer-bar {
  background: linear-gradient(120deg, #7c3aed, #e1306c 55%, #ff9d00);
  color: #ffffff;
  border-color: transparent;
}

#link-instagram-nav:hover,
#link-instagram-footer-bar:hover {
  filter: brightness(1.1);
  color: #ffffff;
  border-color: transparent;
}

/* Facebook */
#link-facebook-nav,
#link-facebook-footer-bar {
  background: linear-gradient(180deg, #3b5998, #2d4373);
  color: #ffffff;
  border-color: transparent;
}

#link-facebook-nav:hover,
#link-facebook-footer-bar:hover {
  filter: brightness(1.1);
  color: #ffffff;
  border-color: transparent;
}

/* TikTok */
#link-tiktok-nav,
#link-tiktok-footer-bar {
  background: linear-gradient(180deg, #010101, #1f1f1f);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

#link-tiktok-nav:hover,
#link-tiktok-footer-bar:hover {
  filter: brightness(1.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* WhatsApp */
#link-whatsapp-icon-nav {
  background: linear-gradient(180deg, #3ad07e, #1fa958);
  color: #ffffff;
  border-color: transparent;
}

#link-whatsapp-icon-nav:hover {
  filter: brightness(1.1);
  color: #ffffff;
  border-color: transparent;
}

/* WhatsApp */
#link-whatsapp-footer-bar {
  background: linear-gradient(180deg, #3ad07e, #1fa958);
  color: #ffffff;
  border-color: transparent;
}

#link-whatsapp-footer-bar:hover {
  filter: brightness(1.1);
  color: #ffffff;
  border-color: transparent;
}

/* ===========================================================
   MODAL DE INSTAGRAM (LIGHTBOX)
   =========================================================== */
.ig-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ig-modal.active {
  opacity: 1;
  pointer-events: all;
}

.ig-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 8, 0.85);
  backdrop-filter: blur(10px);
}

.ig-modal__content {
  position: relative;
  z-index: 10;
  background: rgba(14, 18, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: visible;
  /* Para permitir que la X flote arriba en desktop */
  width: auto;
  max-width: 95vw;
  height: auto;
  max-height: 85vh;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
  transform: scale(0.95);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
}

.ig-modal.active .ig-modal__content {
  transform: scale(1);
}

.ig-modal__close {
  position: absolute;
  top: -42px;
  right: -5px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.5rem;
  font-family: inherit;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

.ig-modal__close:hover {
  color: #fff;
  transform: scale(1.1);
}

.ig-modal__body {
  display: flex;
  height: 100%;
  max-height: 85vh;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.ig-modal__media-container {
  position: relative;
  height: 85vh;
  max-height: 85vh;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  flex-shrink: 1;
  min-width: 0;
}

.ig-modal__media-container img,
.ig-modal__media-container video {
  height: 100%;
  width: auto;
  max-height: 85vh;
  max-width: 65vw;
  object-fit: contain;
  display: block;
}

.ig-modal__media-container img[hidden],
.ig-modal__media-container video[hidden],
.ig-modal__play-btn[hidden] {
  display: none !important;
}

.ig-modal__play-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  transition: background 0.2s ease;
}

.ig-modal__media-container:hover .ig-modal__play-btn {
  background: rgba(0, 0, 0, 0.4);
}

.ig-modal__play-btn svg {
  width: 72px;
  height: 72px;
  opacity: 0.95;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease;
}

.ig-modal__media-container:hover .ig-modal__play-btn svg {
  transform: scale(1.1);
}

.ig-modal__info {
  width: 360px;
  min-width: 300px;
  max-width: 380px;
  height: 85vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(14, 18, 24, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.ig-modal__header {
  padding: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ig-modal__user-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-modal__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  object-fit: cover;
}

.ig-modal__user-meta {
  display: flex;
  flex-direction: column;
}

.ig-modal__username {
  font-weight: 600;
  font-size: 0.9rem;
  color: #ffffff;
}

.ig-modal__date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 1px;
}

.ig-modal__caption-container {
  flex-grow: 1;
  padding: 18px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Scrollbar personalizado para el caption */
.ig-modal__caption-container::-webkit-scrollbar {
  width: 6px;
}

.ig-modal__caption-container::-webkit-scrollbar-track {
  background: transparent;
}

.ig-modal__caption-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.ig-modal__caption-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ig-modal__caption {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  white-space: pre-wrap;
}

.ig-modal__footer {
  padding: 18px;
  background: rgba(8, 10, 15, 0.4);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* ===========================================================
   RESPONSIVO MODAL E INTERACCIÓN MÓVIL
   =========================================================== */
/* Desactivar texto hover en pantallas táctiles/móviles para evitar interferencia al tocar */
@media (hover: none),
(max-width: 768px) {
  .pf.has:hover::after {
    opacity: 0 !important;
  }

  .pf.has:hover figcaption {
    opacity: 0 !important;
  }

  .pf:active {
    transform: scale(0.97);
    opacity: 0.9;
  }
}

@media (max-width: 820px) {
  .ig-modal__content {
    height: auto;
    max-height: 88vh;
    width: 90%;
    max-width: 440px;
    overflow: hidden;
    border-radius: 18px;
  }

  .ig-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.8rem;
    color: #ffffff;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .ig-modal__close:hover {
    transform: none;
    background: rgba(0, 0, 0, 0.9);
  }

  .ig-modal__body {
    flex-direction: column;
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
  }

  .ig-modal__media-container {
    width: 100%;
    height: auto;
    max-height: 48vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ig-modal__media-container img,
  .ig-modal__media-container video {
    max-width: 100%;
    max-height: 48vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .ig-modal__info {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ig-modal__caption-container {
    max-height: 130px;
    padding: 12px 16px;
  }

  .ig-modal__header,
  .ig-modal__footer {
    padding: 12px 16px;
  }
}
/* ===========================================================
   TARJETA DE PROMOCIÓN
   La comparten la página /promociones/ y el modal del inicio, para que
   una promo se vea igual en todo el sitio.
   =========================================================== */
.promo-card {
  --p: clamp(1.2rem, 3vw, 1.5rem);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--p);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s;
}

.promo-card:hover {
  transform: translateY(-4px);
  border-color: var(--line2);
}

.promo-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, #ff3d2e) 26%, transparent), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.promo-card>* {
  position: relative;
  z-index: 1;
}

/* Foto de la promoción, a sangre en la parte superior de la tarjeta */
.promo-card__media {
  margin: calc(-1 * var(--p)) calc(-1 * var(--p)) 1rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #05070a;
  border-bottom: 1px solid var(--line);
}

.promo-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.promo-card:hover .promo-card__media img {
  transform: scale(1.05);
}

.promo-card__tag {
  align-self: flex-start;
  font-family: 'Sora', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, #ff3d2e);
  border: 1px solid color-mix(in srgb, var(--accent, #ff3d2e) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #ff3d2e) 12%, transparent);
  padding: .3rem .6rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}

.promo-card__name {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.2;
  margin-bottom: .15rem;
}

.promo-card__desc {
  color: var(--muted);
  font-size: .88rem;
  margin-bottom: 1rem;
}

.price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .4rem;
}

.price__from {
  color: var(--muted2);
  font-size: .8rem;
  width: 100%;
  margin-bottom: -.15rem;
}

.price__cur {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--muted);
  align-self: flex-start;
  margin-top: .35rem;
}

.price__num {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price__unit {
  color: var(--muted);
  font-size: .86rem;
}

.price__quote {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.promo-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.1rem;
  padding: .72rem 1rem;
  border-radius: 12px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--txt);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line2);
  transition: background .25s, transform .2s, border-color .25s;
}

.promo-card__cta:hover {
  background: rgba(37, 211, 102, .14);
  border-color: rgba(37, 211, 102, .45);
  transform: translateY(-1px);
}

.promo-card__cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

@media (prefers-reduced-motion:reduce) {

  .promo-card:hover,
  .promo-card:hover .promo-card__media img,
  .promo-card__cta:hover {
    transform: none;
  }
}

/* ===========================================================
   MODAL DE PROMOCIONES (se abre al entrar al sitio)
   =========================================================== */
.pm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(.8rem, 3vw, 1.5rem);
}

.pm.active {
  display: flex;
}

.pm__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 8, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pm-fade .3s ease;
}

.pm__box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glass2);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line2);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  animation: pm-in .42s cubic-bezier(.2, .8, .2, 1);
}

@keyframes pm-fade {
  from {
    opacity: 0
  }
}

@keyframes pm-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(.97)
  }
}

.pm__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
}

.pm__close:hover {
  background: rgba(0, 0, 0, .7);
  transform: rotate(90deg);
}

/* ---- Carrusel ---- */
.pm__stage {
  position: relative;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}

.pm__track {
  display: flex;
  transition: transform .5s cubic-bezier(.3, .8, .3, 1);
}

.pslide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Se ve bien aunque falte la imagen: el degradado del acento queda de fondo */
  background:
    radial-gradient(120% 90% at 70% 10%, color-mix(in srgb, var(--accent, #ff3d2e) 55%, transparent), transparent 70%),
    linear-gradient(160deg, #14181f, #080a0d);
}

/* La foto va entera y sin nada escrito encima */
.pslide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* El rótulo, en su propia franja debajo de la foto: etiqueta, título y
   precio apilados a la izquierda; los puntos van al margen derecho */
.pslide figcaption {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: .85rem clamp(4.5rem, 16vw, 5.5rem) 1rem clamp(1rem, 4vw, 1.4rem);
  border-top: 1px solid color-mix(in srgb, var(--accent, #ff3d2e) 40%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent, #ff3d2e) 12%, transparent), transparent 65%),
    #0a0d12;
}

.pslide__tag {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #08090c;
  background: var(--accent, #ff3d2e);
  padding: .24rem .58rem;
  border-radius: 999px;
  margin-bottom: .5rem;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent, #ff3d2e) 85%, transparent);
}

.pslide__name {
  display: block;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--txt);
}

.pslide__price {
  display: block;
  margin-top: .2rem;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(1.45rem, 4.8vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pslide__price i {
  font-style: normal;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: 0;
  -webkit-text-fill-color: var(--muted);
}

/* ---- Flechas y puntos ---- */
.pm__nav {
  position: absolute;
  top: 40%;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  opacity: .9;
  transition: opacity .2s, background .2s;
}

.pm__nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .75);
}

.pm__nav--prev {
  left: 10px;
}

.pm__nav--next {
  right: 10px;
}

/* Al margen derecho de la franja del rótulo: ni sobre la foto ni sobre el texto */
.pm__dots {
  position: absolute;
  right: clamp(1rem, 4vw, 1.4rem);
  bottom: 1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.pm__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .3);
  transition: width .3s, background .3s;
}

.pm__dots button:hover {
  background: rgba(255, 255, 255, .55);
}

.pm__dots button.on {
  width: 18px;
  border-radius: 999px;
  background: var(--laser);
}

/* ---- Pie ---- */
.pm__foot {
  padding: clamp(1.1rem, 4vw, 1.5rem);
}

.pm__foot .kicker {
  margin-bottom: .6rem;
}

.pm__title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  letter-spacing: -.025em;
}

.pm__sub {
  color: var(--muted);
  font-size: .88rem;
  margin-top: .4rem;
}

.pm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.1rem;
}

.pm__actions .btn {
  flex: 1 1 160px;
  justify-content: center;
}

/* En móvil se mantiene el 4:3 de las fotos: así se ven completas, sin recorte */

/* Con el rótulo fuera de la foto el modal crece: en pantallas bajas se
   encoge entero en vez de recortar la promoción o sacar barra de scroll */
@media (max-height:860px) {
  .pm__box {
    width: min(500px, 100%);
  }
}

@media (max-height:780px) {
  .pm__box {
    width: min(450px, 100%);
  }

  .pm__foot {
    padding: 1rem 1.1rem 1.1rem;
  }

  .pm__actions {
    margin-top: .85rem;
  }
}

@media (max-height:700px) {
  .pm__box {
    width: min(410px, 100%);
  }

  .pslide figcaption {
    padding-top: .7rem;
    padding-bottom: .85rem;
  }

  .pslide__name {
    font-size: 1.12rem;
  }

  .pslide__price {
    font-size: 1.35rem;
  }

  .pm__dots {
    bottom: .95rem;
  }

  .pm__foot {
    padding: .85rem 1rem 1rem;
  }

  /* El pie cede espacio antes que la foto */
  .pm__foot .kicker {
    display: none;
  }

  .pm__title {
    font-size: 1.12rem;
  }

  .pm__sub {
    font-size: .78rem;
    margin-top: .3rem;
  }

  .pm__actions {
    margin-top: .7rem;
  }

  .pm__actions .btn {
    flex: 1 1 130px;
    padding: .58rem .8rem;
    font-size: .82rem;
  }
}

@media (max-height:620px) {
  .pm__box {
    width: min(360px, 100%);
  }

  .pm__sub {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {

  .pm__overlay,
  .pm__box {
    animation: none;
  }

  .pm__track {
    transition: none;
  }

  .pm__close:hover {
    transform: none;
  }
}

/* ---- Botón de promociones en el hero ----
   Nace oculto y lo muestra la clase .promos-on que inyecta el interruptor
   de inc/config.php. Así, con promociones apagadas, no parpadea nunca.

   Va sólido en ámbar, no en fantasma: pesa lo mismo que "Pide tu cotización"
   para que la oferta no pase desapercibida, pero el rojo sigue siendo el
   único CTA primario, así que los dos no compiten por el mismo sitio. */
.btn--promo {
  display: none;
  background: linear-gradient(180deg, #ffb62e, #f28a00);
  color: #2a1400;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 26px rgba(255, 157, 0, .28);
}

.promos-on .btn--promo {
  display: inline-flex;
}

/* El punto es rojo con halo rojo por defecto: sobre el ámbar se ensucia. */
.btn--promo .dot {
  background: #2a1400;
  box-shadow: 0 0 10px rgba(42, 20, 0, .45);
}

.btn--promo:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 34px rgba(255, 157, 0, .45);
}