/* The method is readable in full before JavaScript runs. */
.metodo-section { background: var(--paper); }
.method-heading { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.method-heading h2 { margin: 0; font-size: clamp(40px, 5.5vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -.06em; text-wrap: balance; }
.method-heading h2 > span:not(.is-enhanced) { color: var(--orange-ink); }
.method-heading > p { margin: 28px auto 0; max-width: 650px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.method-cards { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.method-card { min-width: 0; transform: translateY(var(--card-shift, 0px)); }
.method-visual { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: var(--orange); box-shadow: 0 14px 24px -20px rgba(20,45,83,.55); }
.method-card--engage .method-visual { background: var(--peach); }
.method-card--convert .method-visual { background: var(--blue); }
.method-card--amplify .method-visual { background: var(--navy); }
.method-stage { position: absolute; top: 20px; left: 20px; color: var(--ink); font-size: 10px; line-height: 1; font-weight: 650; letter-spacing: .08em; }
.method-card--amplify .method-stage { color: var(--paper); }
/* Blu notte del sito sull'arancio: contrasto 4,6:1 (il crema era 3,5:1). */
.method-card--attract .method-stage { color: #0c1b33; }
.method-visual svg { display: block; width: 64%; height: 64%; margin-top: 14px; overflow: visible; color: var(--ink); }
.method-card--amplify .method-visual svg { color: var(--paper); }
.method-copy { padding: 28px 4px 0; text-align: center; }
.method-copy h3 { margin: 0 0 14px; font-size: clamp(25px, 2.6vw, 36px); line-height: 1; letter-spacing: -.06em; font-weight: 650; }
.method-copy p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.method-copy .method-formats { color: var(--ink); font-weight: 550; }

/* Small, readable gestures inside each panel, independent of the card entrance. */
.method-magnet-particles { animation: magnet-attract 3.6s ease-in-out infinite; }
.method-chat-reply { animation: chat-reply 4s ease-in-out infinite; }
.method-chat-dots circle { animation: chat-dot 2.4s ease-in-out infinite; }
.method-chat-dots circle:nth-child(2) { animation-delay: .18s; }
.method-chat-dots circle:nth-child(3) { animation-delay: .36s; }
.method-target-arrow { animation: target-hit 4s ease-in-out infinite; }
.method-target-center { transform-origin: 72px 88px; animation: target-pulse 4s ease-in-out infinite; }
.method-sound-wave { stroke-dasharray: 1; animation: sound-expand 3.2s ease-in-out infinite; }
.method-sound-wave--far { animation-delay: .3s; }
.method-visual svg * { animation-play-state: paused; }
.method-visual.is-icon-active svg * { animation-play-state: running; }
.experience-card .numero-big { animation: experience-breathe 4s ease-in-out infinite; animation-play-state: paused; }
.experience-card .is-icon-active .numero-big { animation-play-state: running; }
@keyframes experience-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes magnet-attract { 0%,100% { transform: translateY(-9px); opacity: .45; } 45%,65% { transform: translateY(7px); opacity: 1; } }
@keyframes chat-reply { 0%,100% { transform: translateY(7px); } 40%,65% { transform: translateY(0); } }
@keyframes chat-dot { 0%,60%,100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes target-hit { 0%,100% { transform: translate(10px,-10px); } 35%,70% { transform: translate(0,0); } }
@keyframes target-pulse { 0%,25%,75%,100% { transform: scale(1); } 40% { transform: scale(1.35); } 55% { transform: scale(1); } }
@keyframes sound-expand { 0%,100% { stroke-dashoffset: 1; opacity: .2; } 40%,65% { stroke-dashoffset: 0; opacity: 1; } }

@media (max-width: 1100px) and (min-width: 901px) {
  .method-cards { gap: 18px; }
  .method-copy { padding-top: 24px; }
  .method-copy h3 { font-size: 29px; }
}

@media (max-width: 900px) {
  .method-heading { margin-bottom: 46px; }
  .method-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
  .method-visual { max-width: 380px; margin-inline: auto; }
  .method-copy { max-width: 365px; margin-inline: auto; }
  .method-copy h3 { font-size: 34px; }
}

@media (max-width: 599px) {
  .method-heading { margin-bottom: 40px; }
  .method-heading h2 { font-size: clamp(36px,8.4vw,60px); }
  .method-heading > p { font-size: 16px; margin-top: 22px; }
  .method-heading > p br { display: none; }
  .method-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 14px; }
  .method-card { width: 100%; min-width: 0; }
  .method-visual { border-radius: 20px; box-shadow: 0 12px 20px -20px rgba(20,45,83,.55); }
  .method-stage { top: 13px; left: 13px; font-size: 8px; }
  .method-visual svg { width: 68%; height: 68%; margin-top: 12px; }
  .method-copy { padding: 17px 0 0; }
  .method-copy h3 { font-size: clamp(23px,6vw,30px); margin-bottom: 9px; }
  .method-copy p { font-size: 13px; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .method-card { transform: none !important; }
  .method-visual svg * { animation: none !important; }
  .experience-card .numero-big { animation: none !important; }
  .method-sound-wave { stroke-dashoffset: 0 !important; }
}