/* Sección institucional Por qué Pupa — aislada para preservar el sitio existente. */
.why-pupa {
  --wp-violet: #7723d8;
  --wp-dark: #4e2278;
  --wp-ink: #2d2d2d;
  --wp-orange: #f8690e;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 9rem) 0;
  color: var(--wp-ink);
  background:
    radial-gradient(circle at 89% 8%, rgba(119, 35, 216, .10), transparent 26rem),
    linear-gradient(180deg, #fff 0%, #faf8fd 52%, #fff 100%);
}
.why-pupa *, .why-pupa *::before, .why-pupa *::after { box-sizing: border-box; }
.why-pupa__container { width: min(1180px, calc(100% - clamp(2rem, 7vw, 6rem))); margin-inline: auto; }
.why-pupa__ambient { position: absolute; z-index: -1; border: 1px solid rgba(119, 35, 216, .11); border-radius: 50%; pointer-events: none; }
.why-pupa__ambient--one { width: 32rem; height: 32rem; top: -20rem; right: -9rem; }
.why-pupa__ambient--two { width: 16rem; height: 16rem; bottom: 8rem; left: -10rem; }
.why-pupa__header { max-width: 950px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.why-pupa__eyebrow { margin: 0 0 1.2rem; color: var(--wp-dark); font: 700 .78rem/1.3 "Poppins", sans-serif; letter-spacing: .15em; }
.why-pupa h2, .why-pupa h3 { font-family: "Kodchasan", "Poppins", sans-serif; color: var(--wp-ink); }
.why-pupa h2 { max-width: 22ch; margin: 0; font-size: clamp(2.15rem, 4.4vw, 4.45rem); line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.why-pupa__intro-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.why-pupa__narrative { max-width: 650px; font: 400 clamp(1.02rem, 1.18vw, 1.12rem)/1.78 "Poppins", sans-serif; }
.why-pupa__narrative p { margin: 0 0 1.35rem; }
.why-pupa__lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.65; color: #432064; }
.why-pupa blockquote { position: relative; margin: 2.6rem 0 0; padding: 1.55rem 1.6rem 1.55rem 2rem; border-left: 4px solid var(--wp-orange); background: #fff; box-shadow: 0 18px 46px rgba(45, 22, 71, .08); font: 500 clamp(1.35rem, 2.1vw, 1.85rem)/1.35 "Kodchasan", sans-serif; }
.why-pupa blockquote strong { color: var(--wp-violet); font-weight: 700; }
.why-pupa__symbol { position: relative; margin: 0; min-height: 38rem; display: grid; place-items: center; }
.why-pupa__logo-stage { position: relative; width: min(78%, 27rem); aspect-ratio: 1; display: grid; place-items: center; padding: clamp(2.2rem, 5vw, 4.1rem); border-radius: 50%; background: rgba(255,255,255,.88); border: 1px solid rgba(78, 34, 120, .12); box-shadow: 0 28px 80px rgba(78, 34, 120, .14); backdrop-filter: blur(10px); }
.why-pupa__logo-stage img { display: block; width: 100%; height: auto; object-fit: contain; }
.why-pupa__orbit { position: absolute; border: 1px solid rgba(119, 35, 216, .19); border-radius: 50%; }
.why-pupa__orbit--outer { width: 92%; aspect-ratio: 1; }
.why-pupa__orbit--inner { width: 67%; aspect-ratio: 1; border-style: dashed; border-color: rgba(78, 34, 120, .24); }
.why-pupa__pulse { position: absolute; width: .72rem; aspect-ratio: 1; border-radius: 50%; background: var(--wp-orange); box-shadow: 0 0 0 .45rem rgba(248, 105, 14, .10); }
.why-pupa__pulse--one { top: 15%; right: 17%; }
.why-pupa__pulse--two { bottom: 21%; left: 12%; background: var(--wp-violet); box-shadow: 0 0 0 .45rem rgba(119, 35, 216, .10); }
.why-pupa figcaption { position: absolute; inset: auto 0 0; display: grid; gap: .55rem; padding: 1.15rem 1.25rem; border-radius: 1rem; color: #533b65; background: rgba(255,255,255,.94); border: 1px solid rgba(78,34,120,.10); box-shadow: 0 15px 42px rgba(45, 22, 71, .08); font: 400 .86rem/1.45 "Poppins", sans-serif; }
.why-pupa figcaption strong { color: var(--wp-dark); }
.why-pupa__process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(5rem, 9vw, 8rem); background: rgba(78,34,120,.12); border-block: 1px solid rgba(78,34,120,.12); }
.why-pupa__step { position: relative; min-height: 21rem; padding: clamp(2rem, 3.2vw, 3rem) clamp(1.35rem, 2.3vw, 2.25rem); overflow: hidden; background: #fff; }
.why-pupa__number { display: block; margin-bottom: 3.8rem; color: rgba(78,34,120,.24); font: 600 .84rem/1 "Poppins", sans-serif; letter-spacing: .12em; }
.why-pupa__line { position: absolute; top: 6.7rem; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(119,35,216,.38), transparent); transform-origin: left; }
.why-pupa__step h3 { margin: 0 0 .9rem; color: var(--wp-dark); font-size: clamp(1.45rem, 2vw, 1.85rem); }
.why-pupa__step p { margin: 0; color: #554e59; font: 400 clamp(.98rem, 1.1vw, 1.06rem)/1.65 "Poppins", sans-serif; }
.why-pupa__step::after { content: ""; position: absolute; width: 7rem; height: 7rem; right: -5rem; bottom: -5rem; border: 1px solid rgba(119,35,216,.15); border-radius: 50%; transition: transform .5s ease; }
.why-pupa__step:hover::after { transform: scale(1.35); }
.why-pupa__closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(4rem, 8vw, 7rem); padding: clamp(2.2rem, 5vw, 4.5rem); color: #fff; background: var(--wp-dark); border-radius: clamp(1.2rem, 2vw, 2rem); box-shadow: 0 28px 70px rgba(78,34,120,.20); }
.why-pupa__closing > p { max-width: 42ch; margin: 0; font: 500 clamp(1.35rem, 2.25vw, 2rem)/1.48 "Kodchasan", sans-serif; }
.why-pupa__cta { padding-left: clamp(0rem, 4vw, 4rem); border-left: 1px solid rgba(255,255,255,.22); }
.why-pupa__cta h3 { margin: 0 0 1.35rem; color: #fff; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.3; }
.why-pupa__button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3.2rem; padding: .85rem 1.35rem; border-radius: 999px; color: var(--wp-dark); background: #fff; font: 600 .95rem/1.2 "Poppins", sans-serif; text-decoration: none; transition: transform .25s ease, background .25s ease, color .25s ease; }
.why-pupa__button:hover { transform: translateY(-2px); color: #fff; background: var(--wp-violet); }
.why-pupa__button:focus-visible { outline: 3px solid var(--wp-orange); outline-offset: 4px; }

.why-pupa--js .why-pupa__reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s ease; }
.why-pupa--js .why-pupa__reveal.is-visible { opacity: 1; transform: translateY(0); }
.why-pupa--js .why-pupa__step { transition-delay: calc(var(--step-index, 0) * 90ms); }
.why-pupa--js .why-pupa__logo-stage { transform: scale(.95); transition: transform 1.05s cubic-bezier(.22,.8,.28,1); }
.why-pupa--js .why-pupa__symbol.is-visible .why-pupa__logo-stage { transform: scale(1); }
.why-pupa--js .why-pupa__symbol.is-visible .why-pupa__orbit--outer { animation: wp-drift 11s linear infinite; }
.why-pupa--js .why-pupa__symbol.is-visible .why-pupa__orbit--inner { animation: wp-drift 15s linear infinite reverse; }
@keyframes wp-drift { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .why-pupa__intro-grid { grid-template-columns: 1fr; }
  .why-pupa__narrative { max-width: 760px; }
  .why-pupa__symbol { min-height: 35rem; }
  .why-pupa__process { grid-template-columns: repeat(2, 1fr); }
  .why-pupa__step { min-height: 17rem; }
  .why-pupa__closing { grid-template-columns: 1fr; }
  .why-pupa__cta { padding: 2rem 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
}
@media (max-width: 560px) {
  .why-pupa { padding-block: 4.5rem; }
  .why-pupa__container { width: min(100% - 1.5rem, 1180px); }
  .why-pupa h2 { font-size: clamp(2rem, 10vw, 2.85rem); }
  .why-pupa__symbol { min-height: 31rem; }
  .why-pupa__logo-stage { width: min(76%, 20rem); padding: 2.6rem; }
  .why-pupa figcaption { font-size: .82rem; }
  .why-pupa__process { grid-template-columns: 1fr; }
  .why-pupa__step { min-height: auto; padding: 2rem 1.4rem 2.3rem; }
  .why-pupa__number { margin-bottom: 2.9rem; }
  .why-pupa__line { top: 5.7rem; }
  .why-pupa__closing { padding: 2rem 1.35rem; }
  .why-pupa__button { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .why-pupa *, .why-pupa *::before, .why-pupa *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .why-pupa--js .why-pupa__reveal { opacity: 1; transform: none; }
  .why-pupa--js .why-pupa__logo-stage { transform: none; }
}