/* ==========================================================================
   Página "Chega de Disney!" (/jeito-disney-de-encantar-clientes/), nas cores do vilão.
   Vem depois do main.css, do palestra.css e do palestra-vilao.css (tokens e fumaça .vil-topo__fumaca).
   Celular primeiro; a partir de 900px, foto à direita e texto à esquerda.
   ========================================================================== */

/* ---------- Topo ---------- */
.dz-topo { position: relative; isolation: isolate; overflow: hidden; background: var(--purple-900); color: #fff; padding-top: 46px; }
.dz-topo .vil-topo__fumaca { z-index: 0; }
.dz-topo__foto { display: block; position: relative; z-index: 1; }
.dz-topo__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 20%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }
.dz-topo__texto { position: relative; z-index: 2; margin-top: -30vw; padding: 0 var(--gutter) 52px; }
.dz-topo .trilha-site { margin-bottom: .8em; }
.dz-topo h1 { margin: 0 0 .25em; font-size: clamp(4.2rem, 19vw, 7rem); line-height: .84; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--yellow); text-shadow: 0 0 34px var(--verde-luz), 0 4px 0 #000; }
.dz-topo h1 span { display: block; }
.dz-topo__sub { margin: 0 0 1em; font-size: clamp(1.25rem, 1.2vw + 1.05rem, 1.75rem); line-height: 1.2; font-weight: 900; color: var(--cream); max-width: 24em; }
.dz-topo__lead { margin: 0; font-size: clamp(1.02rem, .4vw + .95rem, 1.2rem); line-height: 1.5; max-width: 34em; opacity: .92; }
.dz-topo__ctas { display: grid; gap: 12px; margin-top: 1.5em; }
.dz-btn-contorno { background: transparent; color: #fff; border-color: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.3); }
.dz-topo :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

@media (min-width: 600px) { .dz-topo__ctas { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 600px) and (max-width: 899px) { .dz-topo__foto img { aspect-ratio: 4 / 3; object-position: 50% 15%; } .dz-topo__texto { margin-top: -16vw; } }

@media (min-width: 900px) {
  .dz-topo { min-height: min(100svh, 980px); display: grid; align-items: center; padding-top: 0; }
  .dz-topo__foto { position: absolute; inset: 0 0 0 36%; }
  .dz-topo__foto img { height: 100%; aspect-ratio: auto; object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
  .dz-topo__texto { margin: 0; max-width: 760px; padding: 130px 0 80px max(var(--gutter), calc((100vw - var(--container)) / 2)); }
  .dz-topo h1 { font-size: clamp(6rem, 10.5vw, 11.5rem); }
}

/* Entrada: as duas linhas do título batem na tela, a foto se aproxima devagar (só transform: não atrasa o PageSpeed) */
@media (prefers-reduced-motion: no-preference) {
  .dz-topo__foto img { animation: dz-zoom 2.2s cubic-bezier(.2, .7, .2, 1) both; }
  .dz-topo h1 span { animation: dz-bate .65s cubic-bezier(.3, 1.5, .5, 1) both; }
  .dz-topo h1 span + span { animation-delay: .18s; }
  .dz-topo__sub, .dz-topo__lead, .dz-topo__ctas { animation: dz-sobe .7s .35s cubic-bezier(.2, .7, .2, 1) both; }
  .dz-topo__lead { animation-delay: .45s; }
  .dz-topo__ctas { animation-delay: .55s; }
  .dz-hopi__foto { animation: dz-flutua 6s ease-in-out infinite alternate; }
}
@keyframes dz-zoom { from { transform: scale(1.14); } to { transform: none; } }
@keyframes dz-bate { from { transform: scale(1.7) rotate(-5deg); } to { transform: none; } }
@keyframes dz-sobe { from { transform: translateY(24px); } to { transform: none; } }
@keyframes dz-flutua { from { transform: translateY(-8px) rotate(-2deg); } to { transform: translateY(8px) rotate(2deg); } }

/* ---------- Sou fã. E não sou. ---------- */
.dz-fa { background: var(--cream); color: var(--purple-900); padding: clamp(56px, 8vw, 120px) 0; }
.dz-fa__grid { display: grid; gap: 32px; align-items: center; }
.dz-fa h2, .dz-hopi h2 { margin: 0 0 .5em; font-size: clamp(2.4rem, 6vw + 1rem, 5rem); line-height: .92; text-transform: uppercase; }
.dz-fa__lados { display: grid; gap: 16px; }
.dz-fa__lados > div { border: var(--border); border-radius: var(--radius); padding: 20px 22px; background: #fff; }
.dz-fa__lados > div:first-child { background: var(--yellow); }
.dz-fa__lados h3 { margin: 0 0 .35em; font-size: clamp(1.3rem, .8vw + 1.1rem, 1.7rem); text-transform: uppercase; }
.dz-fa__lados p { margin: 0; line-height: 1.5; }
.dz-fa__foto { width: 100%; max-width: 460px; justify-self: center; border: var(--border); border-radius: var(--radius); }
@media (min-width: 900px) {
  .dz-fa__grid { grid-template-columns: 1.25fr .75fr; gap: 56px; }
  .dz-fa__lados { grid-template-columns: 1fr 1fr; }
}

/* ---------- Eu dirigi o CX do Hopi Hari ---------- */
.dz-hopi { background: var(--purple-900); color: #fff; padding: clamp(56px, 8vw, 120px) 0; }
.dz-hopi__grid { display: grid; gap: 28px; align-items: center; }
.dz-hopi h2 { color: var(--yellow); }
.dz-hopi__foto { width: min(78vw, 420px); justify-self: center; }
.dz-hopi__lead { margin: 0 0 1em; font-size: clamp(1.1rem, .5vw + 1rem, 1.35rem); color: var(--cream); }
.dz-hopi__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dz-hopi__lista li { display: grid; gap: 2px; padding: 14px 0; border-top: 2px solid rgba(166, 240, 37, .35); }
.dz-hopi__lista b { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); line-height: 1; text-transform: uppercase; color: var(--yellow); }
.dz-hopi__lista span { color: var(--cream); line-height: 1.4; }
@media (min-width: 900px) {
  .dz-hopi__grid { grid-template-columns: .8fr 1.2fr; gap: 64px; }
  .dz-hopi__lista { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* ---------- Leva para a palestra ---------- */
.dz-palestra { background: var(--purple-900); padding: 0 0 clamp(56px, 8vw, 110px); }
.dz-palestra__cartao { display: grid; text-decoration: none; color: #fff; border: 3px solid var(--yellow); border-radius: var(--radius); overflow: hidden;
  background: #0d150b; box-shadow: 0 0 0 0 var(--verde-luz); transition: transform .25s, box-shadow .25s; }
.dz-palestra__cartao:hover { transform: translateY(-4px); box-shadow: 0 0 34px 2px var(--verde-luz); }
.dz-palestra__cartao img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 15%; }
.dz-palestra__texto { display: grid; gap: 10px; align-content: center; padding: 24px 22px 28px; }
.dz-palestra__frase { font-family: var(--font-comic); font-weight: 700; text-transform: uppercase; color: var(--yellow); }
.dz-palestra__texto strong { font-size: clamp(1.8rem, 2.4vw + 1rem, 3rem); line-height: .95; text-transform: uppercase; }
.dz-palestra__texto .btn { justify-self: start; margin-top: 6px; }
@media (min-width: 900px) { .dz-palestra__cartao { grid-template-columns: 1.1fr .9fr; } .dz-palestra__texto { padding: 40px; } }