.site-header {
  background: rgba(255, 252, 255, 0.88);
  box-shadow: 0 8px 30px rgba(38, 12, 62, 0.045);
}

body {
  background-color: #fbf7f1;
  background-image:
    radial-gradient(ellipse at 8% 0%, rgba(214, 181, 244, 0.28), transparent 34%),
    radial-gradient(ellipse at 96% 24%, rgba(255, 215, 173, 0.22), transparent 30%),
    radial-gradient(ellipse at 42% 100%, rgba(218, 210, 248, 0.22), transparent 38%),
    linear-gradient(180deg, #fffdfa 0%, #fbf7f1 48%, #f8f2f8 100%);
  background-attachment: fixed;
}

.section:not(.section--tinte):not(.section--artesanal):not(.section--morado),
.section--tinte {
  background-color: rgba(255, 253, 250, 0.54);
  background-image:
    radial-gradient(ellipse at 92% 12%, rgba(234, 220, 251, 0.36), transparent 30%),
    radial-gradient(ellipse at 7% 86%, rgba(255, 226, 190, 0.18), transparent 28%);
  border-top: 1px solid rgba(112, 35, 199, 0.045);
}

.hero {
  display: grid;
  min-height: min(860px, calc(100svh - 82px));
  align-items: center;
  padding: clamp(3.5rem, 7vw, 7rem) 0;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(ellipse at 77% 32%, rgba(196, 142, 242, 0.26), transparent 27%),
    radial-gradient(ellipse at 8% 100%, rgba(119, 56, 155, 0.42), transparent 40%),
    linear-gradient(118deg, #21102f 0%, #35184f 52%, #492265 100%);
}

.hero::before,
.page-hero::before,
.hero::after,
.page-hero::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.hero::before {
  inset: 0;
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 77%, rgba(255, 231, 191, 0.42) 0 1px, transparent 1.5px);
  background-size: 47px 47px, 71px 71px;
  mask-image: linear-gradient(100deg, #000, transparent 84%);
}

.hero::after,
.page-hero::after {
  inset: -18%;
  opacity: 0.18;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 231, 191, 0.28), transparent 18%),
    radial-gradient(ellipse at 76% 68%, rgba(208, 164, 244, 0.24), transparent 22%);
  filter: blur(28px);
  animation: fondo-organico 18s ease-in-out infinite alternate;
}

@keyframes fondo-organico {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.06); }
}

.hero-grid {
  min-height: inherit;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.hero-texto {
  position: relative;
  z-index: 2;
}

.hero .hero-texto h1,
.hero .hero-texto p {
  color: #fff;
}

.hero .hero-texto h1 {
  max-width: 780px;
  font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  letter-spacing: -0.055em;
  line-height: 0.99;
  text-wrap: balance;
  text-shadow: 0 12px 40px rgba(12, 3, 24, 0.22);
}

.hero .hero-texto p {
  max-width: 530px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.hero .etiqueta {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #f4e7ff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero .hero-botones {
  gap: 0.8rem;
}

.hero .hero-botones .btn-primario {
  background: #fff;
  color: #35184f;
}

.hero .hero-botones .btn-primario:hover {
  background: #f4e7ff;
  color: #241032;
}

.hero .hero-botones .btn-secundario {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero .hero-botones .btn-secundario:hover {
  background: rgba(255, 255, 255, 0.16);
}

.hero .logo-ver-completo {
  margin-top: 1.4rem;
  color: rgba(255, 255, 255, 0.82);
}

.hero .logo-ver-completo:hover {
  color: #fff;
}

.hero-visual {
  width: min(100%, 590px);
  justify-self: end;
  perspective: 1100px;
}

.hero-marco {
  max-height: min(70svh, 690px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: clamp(150px, 22vw, 280px) clamp(150px, 22vw, 280px) 24px 24px;
  box-shadow:
    0 38px 100px rgba(11, 3, 22, 0.44),
    0 0 0 10px rgba(255, 255, 255, 0.035);
  background: #542d6d;
}

.hero-marco img {
  transform: scale(1.08);
  filter: saturate(0.94) contrast(1.025);
}

.gsap-cinematic .bloque-img {
  overflow: hidden;
  border-radius: var(--radio-lg);
}

.hero-marco::after {
  background:
    linear-gradient(180deg, rgba(31, 12, 47, 0.05) 42%, rgba(31, 12, 47, 0.35) 100%),
    linear-gradient(200deg, rgba(88, 28, 135, 0.28), transparent 62%);
}

.hero-chip {
  left: -2rem;
  bottom: 2.2rem;
  max-width: 250px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 252, 255, 0.94);
  box-shadow: 0 22px 54px rgba(18, 7, 29, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero .blob-1 {
  top: 7%;
  left: 44%;
  width: 330px;
  height: 330px;
  background: radial-gradient(circle, rgba(210, 162, 243, 0.16), transparent 72%);
}

.hero .blob-2 {
  right: 3%;
  bottom: 5%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(248, 209, 163, 0.12), transparent 72%);
}

.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(300px, 42svh, 490px);
  align-items: center;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: var(--texto);
  background:
    radial-gradient(ellipse at 82% 20%, rgba(224, 197, 247, 0.6), transparent 34%),
    radial-gradient(ellipse at 10% 82%, rgba(255, 226, 190, 0.28), transparent 30%),
    linear-gradient(135deg, rgba(255, 253, 250, 0.96), rgba(248, 240, 250, 0.76));
}

.page-hero::before {
  inset: 0;
  opacity: 0.32;
  background-image: radial-gradient(rgba(112, 35, 199, 0.16) 0.7px, transparent 0.9px);
  background-size: 27px 27px;
  mask-image: linear-gradient(100deg, transparent 12%, #000);
}

.page-hero::after {
  opacity: 0.1;
}

.page-hero h1 {
  color: var(--morado-profundo);
}

.page-hero p {
  color: var(--texto-suave);
}

.page-hero h1 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.page-hero p {
  max-width: 640px;
  color: var(--texto-suave);
}

.page-hero .etiqueta {
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.68);
  color: var(--morado);
}

.page-hero .volver-inicio {
  color: var(--morado);
}

.page-hero .volver-inicio:hover {
  color: var(--morado-profundo);
}

.section-encabezado {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-encabezado h2 {
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.card-categoria,
.card-producto {
  border: 1px solid rgba(67, 16, 122, 0.075);
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(49, 22, 72, 0.075);
}

.card-categoria:hover,
.card-producto:hover {
  box-shadow: 0 24px 56px rgba(49, 22, 72, 0.15);
}

.grid-proyectos .proyecto-item {
  border-radius: 18px;
}

.site-footer {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(146, 92, 183, 0.25), transparent 38%),
    #21102f;
}

@media (max-width: 992px) {
  .hero {
    min-height: auto;
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-visual {
    width: min(100%, 460px);
    justify-self: center;
  }

  .hero .hero-texto h1 {
    font-size: clamp(3.1rem, 7vw, 4.2rem);
  }

  .hero-marco {
    max-height: 62svh;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 2.8rem 0 4.2rem;
  }

  .hero-grid {
    gap: 2.2rem;
  }

  .hero-visual {
    width: min(86%, 390px);
  }

  .hero-marco {
    max-height: 48svh;
    border-radius: 180px 180px 22px 22px;
  }

  .hero-chip {
    left: -1.4rem;
    bottom: 1.1rem;
  }

  .hero .hero-texto h1 {
    font-size: clamp(2.65rem, 12vw, 4.4rem);
  }

  .page-hero {
    min-height: 320px;
    padding: 4rem 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .page-hero::after {
    animation: none;
  }
}