/* /maxi-01/#aromaterapia — explorador de inspiración de aroma.
   Sólo transform/opacity y custom properties: no toca variables globales
   ni la sección protegida de scroll/animación. */

@property --a1 { syntax: "<color>"; inherits: true; initial-value: #8b6fd0 }
@property --a2 { syntax: "<color>"; inherits: true; initial-value: #dcd0f5 }

.aroma{
  --a1:#8b6fd0; --a2:#dcd0f5;
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(72px,9vw,120px);
  transition:--a1 .75s var(--ease), --a2 .75s var(--ease);
}
/* la banda completa toma el color del aroma activo */
.aroma::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--a1) 13%, transparent) 45%, transparent);
}

/* baño de color de fondo */
.aroma__wash{
  position:absolute; inset:-14% -20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 42% at 20% 26%, color-mix(in srgb, var(--a1) 62%, transparent), transparent 70%),
    radial-gradient(38% 38% at 84% 70%, color-mix(in srgb, var(--a2) 34%, transparent), transparent 72%),
    radial-gradient(30% 34% at 62% 8%,  color-mix(in srgb, var(--a1) 30%, transparent), transparent 74%);
  filter:blur(20px); opacity:.8; will-change:transform;
  animation:deriva 26s ease-in-out infinite alternate;
  transition:opacity .8s var(--ease);
}
@keyframes deriva{
  from{transform:translate3d(-1.5%,0,0) scale(1)}
  to  {transform:translate3d(1.5%,-2%,0) scale(1.06)}
}
.aroma.is-switching .aroma__wash{opacity:1}

.aroma__head{max-width:640px}
.aroma__stage{
  display:grid; gap:clamp(30px,5vw,64px); margin-top:44px;
  grid-template-columns:1fr; align-items:center;
}
@media(min-width:920px){ .aroma__stage{grid-template-columns:.92fr 1fr} }

/* ---------- imagen ---------- */
.aroma__viz{position:relative; display:grid; place-items:center}
.aroma__halo{
  position:absolute; inset:2% -14%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--a1) 78%, transparent), transparent 72%);
  filter:blur(40px); opacity:.9;
  transition:opacity .7s var(--ease), transform 1s var(--ease);
}
.aroma.is-switching .aroma__halo{opacity:1; transform:scale(1.07)}

.aroma__frame{
  position:relative; width:100%; max-width:470px; aspect-ratio:760/1009;
  border-radius:22px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--a2) 34%, transparent);
  box-shadow:0 30px 90px rgba(0,0,0,.6),
             0 18px 70px color-mix(in srgb, var(--a1) 42%, transparent);
  transition:box-shadow .8s var(--ease), border-color .8s var(--ease);
}
.aroma__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.07); will-change:opacity,transform;
  transition:opacity .8s var(--ease), transform 1.4s var(--ease);
}
.aroma__img.is-on{opacity:1; transform:scale(1)}
.aroma__cap{
  position:absolute; left:12px; bottom:12px; z-index:3;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.9); background:rgba(7,9,13,.55);
  backdrop-filter:blur(6px); padding:6px 11px; border-radius:100px;
}

/* ---------- pétalos ---------- */
.aroma__burst{position:absolute; inset:0; pointer-events:none; z-index:3}
.aroma__burst i{
  position:absolute; top:50%; left:50%; width:var(--sz,14px); height:var(--sz,14px);
  border-radius:62% 0 62% 62%; background:var(--a2); opacity:0;
  box-shadow:0 0 14px color-mix(in srgb, var(--a2) 65%, transparent);
  transform:translate(-50%,-50%) scale(.6);
}
/* onda de color que sale del centro al cambiar de aroma */
.aroma__pulse{
  position:absolute; top:50%; left:50%; width:58%; aspect-ratio:1; z-index:2;
  margin:-29% 0 0 -29%; border-radius:50%; pointer-events:none; opacity:0;
  border:1px solid color-mix(in srgb, var(--a2) 40%, transparent);
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--a2) 34%, transparent) 30%,
    color-mix(in srgb, var(--a1) 20%, transparent) 62%, transparent 78%);
  filter:blur(6px);
}
.aroma.is-switching .aroma__pulse{animation:onda 1100ms cubic-bezier(.2,.7,.3,1) both}
@keyframes onda{
  0%{opacity:0; transform:scale(.35)}
  22%{opacity:.9}
  100%{opacity:0; transform:scale(1.85)}
}
.aroma.is-switching .aroma__burst i{
  animation:petalo 1500ms cubic-bezier(.16,.72,.28,1) var(--dl,0ms) both;
}
@keyframes petalo{
  0%  {opacity:0; transform:translate(-50%,-50%) scale(.55) rotate(0deg)}
  12% {opacity:1}
  62% {opacity:.85}
  100%{opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
        scale(1.05) rotate(var(--rot))}
}

/* ---------- panel ---------- */
.aroma__kicker{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3); font-weight:600; margin-bottom:14px;
}
.aroma__chips{display:flex; flex-wrap:wrap; gap:10px}
.aroma__chip{
  font:inherit; font-size:14px; color:var(--txt-2); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:100px;
  padding:9px 18px; display:inline-flex; align-items:center; gap:9px;
  transition:color .35s, border-color .35s, background .35s, transform .35s var(--ease);
}
.aroma__chip::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--dot); box-shadow:0 0 0 0 var(--dot); transition:box-shadow .4s;
}
.aroma__chip:hover{color:#fff; border-color:color-mix(in srgb, var(--dot) 60%, transparent); transform:translateY(-1px)}
.aroma__chip[aria-checked="true"]{
  color:#fff; border-color:color-mix(in srgb, var(--dot) 70%, transparent);
  background:color-mix(in srgb, var(--dot) 18%, transparent);
}
.aroma__chip[aria-checked="true"]::before{box-shadow:0 0 0 4px color-mix(in srgb, var(--dot) 28%, transparent)}
.aroma__chip:focus-visible{outline:2px solid var(--a2); outline-offset:3px}

.aroma__name{
  font-size:clamp(30px,4.6vw,46px); letter-spacing:-.03em; line-height:1.05;
  margin:26px 0 0; font-weight:640;
  background:linear-gradient(96deg,#fff, var(--a2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.aroma__facts{list-style:none; display:grid; gap:14px; margin:26px 0 0; padding:0}
.aroma__facts li{
  border:1px solid var(--line-soft); border-left:2px solid color-mix(in srgb, var(--a1) 70%, transparent);
  border-radius:12px; padding:14px 16px; background:rgba(255,255,255,.02);
  transition:border-color .6s var(--ease);
}
.aroma__facts b{display:block; font-size:15px; margin-bottom:3px}
.aroma__facts span{color:var(--txt-3); font-size:14px}

.aroma__note{
  margin-top:44px; max-width:64ch; font-size:14px; color:var(--txt-3);
  border-left:2px solid color-mix(in srgb, var(--a1) 60%, transparent); padding-left:16px;
}
.aroma__more{display:inline-block; margin-top:22px; font-size:14.5px; color:var(--txt-2);
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .3s, border-color .3s}
.aroma__more:hover{color:#fff; border-color:var(--a2)}

@media (prefers-reduced-motion:reduce){
  .aroma,.aroma__img,.aroma__halo,.aroma__wash,.aroma__frame{transition:none}
  .aroma__wash{animation:none}
  .aroma.is-switching .aroma__burst i{animation:none}
}