/* Rafaela Martins — estilos do site (mesma pele do mídia kit) */
  :root {
    --amarelo: #EED379;
    --vermelho: #A90000;
    --vermelho-vivo: #D12A1E; /* o vermelho da marca, aberto para ler sobre o fundo escuro */
    --escuro: #1a0804;
    --marrom: #401607;
    --creme: #F5EDD5;
    --verde-whats: #1f9e4f;

    --titulo: "Abril Fatface", "Libre Bodoni", Georgia, serif;
    --script: "Mr Dafoe", "Brush Script MT", cursive;
    --texto: "Libre Bodoni", Georgia, serif;

    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);

    --margem: clamp(16px, 5vw, 96px);
    --secao: clamp(88px, 11vw, 168px);
    --topo: 76px;

    /* bordas de papel rasgado */
    --rasgo-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V32L1000 29.5L980 27.1L960 34.1L940 26.0L920 32.5L900 30.1L880 25.8L860 32.1L840 25.5L820 31.1L800 26.0L780 26.3L760 30.9L740 36.6L720 26.7L700 28.1L680 33.8L660 38.3L640 33.1L620 30.6L600 38.7L580 25.7L560 37.0L540 29.1L520 27.0L500 26.6L480 29.3L460 36.4L440 27.5L420 33.1L400 33.9L380 30.2L360 32.7L340 25.9L320 25.8L300 27.9L280 34.5L260 31.0L240 29.4L220 33.2L200 31.3L180 29.2L160 36.1L140 34.8L120 28.4L100 33.0L80 32.4L60 37.3L40 35.2L20 29.0L0 38.7Z'/%3E%3C/svg%3E");
    --rasgo-lados: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.3 0L1.0 10L1.9 20L0.4 30L1.2 40L0.1 50L1.7 60L1.9 70L1.4 80L2.2 90L0.8 100L98.3 100L98.5 90L98.6 80L98.9 70L97.9 60L97.6 50L98.8 40L98.3 30L99.8 20L98.2 10L98.4 0Z'/%3E%3C/svg%3E");
    --rasgo-direita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L96.0 0L96.7 4L98.9 8L98.5 12L97.3 16L99.9 20L98.2 24L99.3 28L99.5 32L99.8 36L96.9 40L99.5 44L99.0 48L98.4 52L96.5 56L99.7 60L98.2 64L97.8 68L96.5 72L96.7 76L96.5 80L98.9 84L98.3 88L98.6 92L96.5 96L96.2 100L0 100Z'/%3E%3C/svg%3E");
    --rasgo-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100L100 99.4L96 99.3L92 99.1L88 99.1L84 98.1L80 97.6L76 98.9L72 100.0L68 98.3L64 98.5L60 97.7L56 96.2L52 97.2L48 97.9L44 97.5L40 97.3L36 99.8L32 96.4L28 96.9L24 96.5L20 96.8L16 98.4L12 98.4L8 99.6L4 97.5L0 99.8Z'/%3E%3C/svg%3E");
  }

  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--topo); -webkit-text-size-adjust: 100%; scrollbar-color: var(--vermelho) var(--creme); }
  body {
    background: var(--amarelo); color: var(--escuro);
    font-family: var(--texto); font-size: 1.125rem; line-height: 1.6; font-weight: 500;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: clip; caret-color: var(--vermelho);
  }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--vermelho); color: var(--creme); }
  :focus-visible { outline: 3px solid var(--vermelho); outline-offset: 4px; border-radius: 2px; }
  .bg-escuro :focus-visible, .bg-vermelho :focus-visible { outline-color: var(--amarelo); }
  .so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* ---------- fundos, textura e faixa rasgada (a pele do mídia kit) ---------- */
  .secao { position: relative; overflow: hidden; isolation: isolate; }
  .bg-amarelo { background: var(--amarelo); }
  .bg-creme { background: var(--creme); }
  .bg-escuro { background: var(--escuro); color: var(--creme); }
  .bg-vermelho { background: var(--vermelho); color: var(--creme); }
  .secao::after {
    content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none;
    background: url("/img/grao.webp") 0 0 / 320px 320px; opacity: .3;
  }
  .bg-escuro::after, .bg-vermelho::after { background-image: url("/img/grao-claro.webp"); opacity: .35; }

  .faixa {
    position: absolute; top: 0; left: clamp(16px, 10vw, 190px); right: clamp(16px, 10vw, 190px); z-index: 5;
    height: clamp(22px, 3vw, 44px);
    background: var(--vermelho) repeating-linear-gradient(115deg, rgba(26,8,4,.22) 0 14px, transparent 14px 34px);
    -webkit-mask: var(--rasgo-baixo) 0 0 / 100% 100% no-repeat; mask: var(--rasgo-baixo) 0 0 / 100% 100% no-repeat;
  }
  .bg-vermelho .faixa { background-color: var(--escuro); background-image: repeating-linear-gradient(115deg, rgba(169,0,0,.35) 0 14px, transparent 14px 34px); }

  .script-fundo {
    position: absolute; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
    font-family: var(--script); color: var(--vermelho); line-height: 1; font-size: clamp(9rem, 28vw, 28rem);
  }

  /* ---------- tipografia ---------- */
  .titulo { display: block; font-family: var(--titulo); font-weight: 400; line-height: .92; letter-spacing: .01em; font-size: clamp(3.1rem, 7vw, 6rem); text-wrap: balance; }
  .script { display: block; font-family: var(--script); font-weight: 400; line-height: 1; color: var(--vermelho); font-size: clamp(2.3rem, 4.6vw, 4.25rem); }
  .bg-escuro .script { color: var(--vermelho-vivo); }
  .bg-vermelho .script { color: var(--creme); }
  .titulo-bloco { margin-bottom: clamp(28px, 3.4vw, 48px); }
  .titulo-bloco .script { rotate: -4deg; transform-origin: left center; margin: -.12em 0 0 1.6em; white-space: nowrap; }
  .texto p { font-size: clamp(1.125rem, 1.3vw, 1.3rem); line-height: 1.6; max-width: 60ch; }
  .texto p + p { margin-top: 1.1em; }

  /* ---------- botões ---------- */
  .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: .65em;
    padding: 1em 1.55em; border: 0; cursor: pointer;
    font: 700 .95rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase;
    background: var(--escuro); color: var(--amarelo);
    box-shadow: 5px 5px 0 var(--vermelho);
    transition: background-color 200ms ease, translate 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  }
  .botao svg { width: 1.35em; height: 1.35em; fill: currentColor; flex: none; }
  .botao:active { translate: 5px 5px; box-shadow: 0 0 0 var(--vermelho); }
  @media (hover: hover) and (pointer: fine) {
    .botao:hover { background: var(--vermelho); box-shadow: 5px 5px 0 var(--escuro); }
  }
  .link-insta { display: inline-flex; align-items: center; gap: .55em; font-style: italic; font-size: 1.1rem; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color 200ms ease; }
  .link-insta svg { width: 1.15em; height: 1.15em; fill: currentColor; }
  @media (hover: hover) and (pointer: fine) { .link-insta:hover { color: var(--vermelho); } }

  /* ---------- moldura de foto com fita ---------- */
  .moldura { position: relative; rotate: var(--giro, 0deg); }
  .moldura::before { content: ""; position: absolute; inset: 0; background: var(--vermelho); translate: var(--sombra, 18px) var(--sombra, 18px); }
  .moldura .quadro { position: relative; background: var(--creme); padding: clamp(8px, 1.1vw, 16px); }
  .moldura img { width: 100%; object-fit: cover; }
  .fita {
    position: absolute; z-index: 2; top: clamp(-22px, -1.6vw, -14px); left: 50%;
    width: clamp(92px, 38%, 190px); height: clamp(28px, 3.2vw, 48px);
    translate: -50% 0; rotate: -4deg;
    background: rgba(238,211,121,.84); box-shadow: 0 2px 6px rgba(26,8,4,.18);
  }

  /* ---------- topo ---------- */
  .topo {
    position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--topo);
    display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); padding: 0 var(--margem);
    transition: background-color 240ms ease, box-shadow 240ms ease;
  }
  .topo.rolou { background: var(--amarelo); box-shadow: 0 1px 0 rgba(26,8,4,.14), 0 10px 24px -18px rgba(26,8,4,.5); }
  .topo-logo img { width: auto; height: 46px; }
  .topo nav { margin-left: auto; display: flex; gap: clamp(18px, 2.4vw, 36px); }
  .topo nav a { font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 0; background: linear-gradient(var(--vermelho), var(--vermelho)) 0 100% / 0 2px no-repeat; transition: background-size 240ms var(--ease-out), color 200ms ease; }
  @media (hover: hover) and (pointer: fine) { .topo nav a:hover { color: var(--vermelho); background-size: 100% 2px; } }
  .topo .botao { padding: .85em 1.2em; font-size: .78rem; box-shadow: 4px 4px 0 var(--vermelho); }
  .topo .botao:active { translate: 4px 4px; box-shadow: 0 0 0 var(--vermelho); }

  /* ---------- 1. capa ---------- */
  .capa {
    min-height: max(640px, min(100svh, 1000px));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center;
    padding: 0 var(--margem);
  }
  .capa-texto { position: relative; z-index: 3; padding: calc(var(--topo) + 48px) 0 72px; max-width: 34rem; }
  .capa h1 img { width: clamp(250px, 31vw, 470px); }
  .capa-sub { font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.7rem); color: var(--marrom); margin-top: 14px; letter-spacing: .02em; }
  .rabisco { display: block; width: clamp(150px, 15vw, 230px); color: var(--vermelho); margin: 18px 0 26px; }
  .capa-linha { font-size: clamp(1.15rem, 1.45vw, 1.375rem); line-height: 1.5; max-width: 28ch; }
  .capa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin-top: 34px; }
  .capa-foto { position: relative; align-self: end; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
  .capa-foto img { position: relative; z-index: 2; height: clamp(520px, 88svh, 920px); width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
  .capa .script-fundo { left: 60%; bottom: -.4em; translate: -50% 0; z-index: 1; font-size: clamp(9rem, 25vw, 25rem); }

  /* ---------- 2. release ---------- */
  .release { padding: var(--secao) var(--margem); }
  .release-grade { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(56px, 7vw, 120px); align-items: center; }
  .release .destaque { color: var(--vermelho); }
  .release .moldura { --giro: 3deg; max-width: 520px; justify-self: center; width: 100%; }
  .release .moldura img { aspect-ratio: 4 / 5; }
  .release .circulo { position: absolute; z-index: 0; right: -14vw; top: 50%; translate: 0 -50%; width: min(68vw, 900px); aspect-ratio: 1; border-radius: 50%; background: var(--amarelo); }
  .release .script-fundo { right: -.06em; bottom: -.36em; opacity: .9; }

  /* ---------- 3. já dividiu o palco ---------- */
  .palcos { padding: var(--secao) var(--margem); }
  .palcos-grade { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(56px, 6vw, 110px); align-items: center; }
  .palcos .titulo { color: var(--amarelo); }
  .palcos .intro { font-style: italic; color: var(--creme); max-width: 44ch; }
  .nomes { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; }
  .nome {
    display: inline-flex; align-items: center; gap: .55em;
    padding: .42em 1.15em .42em .9em; background: var(--creme); color: var(--escuro);
    font-family: var(--titulo); font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1;
    -webkit-mask: var(--rasgo-lados) 0 0 / 100% 100% no-repeat; mask: var(--rasgo-lados) 0 0 / 100% 100% no-repeat;
    rotate: var(--giro, 0deg);
  }
  .nome svg { width: .5em; height: .5em; fill: var(--vermelho); flex: none; }
  .nomes .nome:nth-child(1) { --giro: -1.6deg; }
  .nomes .nome:nth-child(2) { --giro: 1.2deg; margin-left: 40px; }
  .nomes .nome:nth-child(3) { --giro: -1deg; margin-left: 12px; }
  .nomes .nome:nth-child(4) { --giro: 1.5deg; margin-left: 56px; }
  .colagem { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); align-items: start; }
  .colagem .moldura:nth-child(1) { --giro: -3deg; }
  .colagem .moldura:nth-child(1) img { aspect-ratio: 900 / 833; }
  .colagem .moldura:nth-child(2) { --giro: 3deg; margin-top: 36px; }
  .colagem .moldura:nth-child(2) img { aspect-ratio: 591 / 656; }
  .colagem .moldura:nth-child(3) { --giro: -1.5deg; grid-column: 1 / -1; width: 78%; justify-self: center; margin-top: -8px; }
  .colagem .moldura:nth-child(3) img { aspect-ratio: 4 / 3; }
  .palcos .anel { position: absolute; z-index: 0; right: -16vw; top: 12%; width: min(72vw, 980px); aspect-ratio: 1; border-radius: 50%; border: clamp(34px, 5vw, 70px) solid rgba(169,0,0,.55); }

  /* ---------- 4. estilo ---------- */
  .estilo { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  .estilo-foto { position: relative; z-index: 2; min-height: 100%; background: var(--amarelo); -webkit-mask: var(--rasgo-direita) 0 0 / 100% 100% no-repeat; mask: var(--rasgo-direita) 0 0 / 100% 100% no-repeat; }
  .estilo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
  .estilo-texto { position: relative; z-index: 2; padding: var(--secao) var(--margem) var(--secao) clamp(40px, 6vw, 110px); }
  .estilo .titulo { color: var(--amarelo); }
  .estilo .texto p { color: var(--creme); }
  .equacao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 44px; }
  .ref { background: var(--creme); color: var(--escuro); padding: 16px 24px 18px; rotate: var(--giro, 0deg); }
  .ref:first-child { --giro: -1.5deg; }
  .ref:last-child { --giro: 1.4deg; }
  .ref small { display: block; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; color: var(--vermelho); margin-bottom: 6px; }
  .ref span { font-family: var(--titulo); font-size: clamp(1.6rem, 2.3vw, 2.3rem); line-height: 1; }
  .mais { font-family: var(--titulo); font-size: clamp(2.6rem, 4vw, 4.2rem); color: var(--amarelo); line-height: 1; }

  /* ---------- 5. redes ---------- */
  .redes { padding: var(--secao) var(--margem); }
  .redes-cabecalho { position: relative; z-index: 2; text-align: center; }
  .redes-cabecalho .script { rotate: -3deg; margin-top: .12em; }
  .redes-grade { position: relative; z-index: 2; max-width: 1180px; margin: clamp(48px, 6vw, 88px) auto 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
  .celulares { position: relative; display: flex; justify-content: center; gap: clamp(18px, 3vw, 48px); padding: 20px 0 50px; }
  .celulares img { width: clamp(140px, 21vw, 300px); border-radius: 15.5% / 7.56%; box-shadow: 18px 18px 0 var(--vermelho); }
  .celulares img:first-child { rotate: -5deg; }
  .celulares img:last-child { rotate: 4deg; margin-top: 40px; }
  .celulares .fita { left: 50%; top: 0; rotate: -8deg; width: clamp(90px, 14vw, 180px); }
  .redes .circulo { position: absolute; z-index: 0; left: 4vw; top: 34%; width: min(66vw, 900px); aspect-ratio: 1; border-radius: 50%; background: var(--amarelo); }
  .redes .script-fundo { right: -.08em; bottom: -.36em; opacity: .9; }
  .handle { display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px; border-radius: 60px; background: var(--escuro); color: var(--amarelo); font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.45rem); box-shadow: 5px 5px 0 var(--vermelho); transition: translate 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
  .handle svg { width: 1.3em; height: 1.3em; fill: currentColor; }
  .handle:active { translate: 5px 5px; box-shadow: 0 0 0 var(--vermelho); }
  .redes-lateral p { margin-top: 26px; max-width: 30ch; font-size: clamp(1.15rem, 1.4vw, 1.35rem); }

  /* ---------- 6. contato ---------- */
  .contato { padding: var(--secao) var(--margem) clamp(150px, 20vw, 300px); text-align: center; }
  .contato-miolo { position: relative; z-index: 2; }
  .contato-titulo { position: relative; display: inline-block; }
  .contato-titulo .script { position: absolute; left: 50%; top: 50%; z-index: -1; translate: -50% -6%; rotate: -6deg; font-size: clamp(4.5rem, 11vw, 11rem); white-space: nowrap; opacity: .9; }
  .contato-titulo .titulo { font-size: clamp(3.4rem, 8vw, 6rem); }
  .telefone { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 28px); margin-top: clamp(64px, 8vw, 120px); font-family: var(--titulo); font-size: clamp(2.7rem, 8.4vw, 8rem); line-height: 1; transition: color 200ms ease; }
  .telefone .ddd { color: var(--vermelho); font-size: .64em; margin-right: .1em; }
  .telefone svg { width: .78em; height: .78em; fill: var(--verde-whats); flex: none; }
  @media (hover: hover) and (pointer: fine) { .telefone:hover { color: var(--vermelho); } }
  .quem { font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.6rem); color: var(--marrom); margin-top: 22px; }
  .quem b { font-style: normal; font-weight: 700; color: var(--escuro); }
  .contato-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 32px; margin-top: 40px; }
  .contato .script-fundo { left: 50%; translate: -50% 0; bottom: -.42em; opacity: .9; }

  /* ---------- barra do WhatsApp no celular ---------- */
  .barra-whats { display: none; }

  /* ---------- telas menores ---------- */
  @media (max-width: 1080px) {
    .topo nav { display: none; }
    .topo .botao { margin-left: auto; }
  }
  @media (max-width: 860px) {
    :root { --topo: 64px; }
    .topo-logo img { height: 38px; }
    .capa { grid-template-columns: minmax(0, 1fr); text-align: center; min-height: 0; padding-bottom: 0; }
    .capa-texto { margin: 0 auto; padding: calc(var(--topo) + 32px) 0 24px; }
    .capa h1 img { width: min(74vw, 330px); margin: 0 auto; }
    .rabisco { margin: 14px auto 20px; }
    .capa-linha { margin: 0 auto; }
    .capa-acoes { justify-content: center; margin-top: 26px; }
    .capa-foto img { height: clamp(380px, 64svh, 560px); margin-top: -40px; }
    .titulo-bloco .script { margin-top: .08em; }
    .capa .script-fundo { font-size: 44vw; left: 50%; bottom: -.28em; }

    .release-grade, .palcos-grade, .redes-grade { grid-template-columns: minmax(0, 1fr); }
    .release .moldura { max-width: 420px; width: 86%; }
    .release .circulo { right: -40vw; top: auto; bottom: 4%; translate: 0 0; width: 110vw; }

    .nomes .nome:nth-child(n) { margin-left: 0; }
    .nomes .nome:nth-child(2), .nome:nth-child(4) { margin-left: 22px; }
    .palcos .anel { right: -50vw; top: auto; bottom: 6%; width: 120vw; }

    .estilo { grid-template-columns: minmax(0, 1fr); }
    .estilo-foto { min-height: 0; aspect-ratio: 4 / 3; -webkit-mask-image: var(--rasgo-base); mask-image: var(--rasgo-base); }
    .estilo-foto img { object-position: 45% 30%; }
    .estilo-texto { padding: 56px var(--margem) var(--secao); }

    .redes-lateral { text-align: center; }
    .redes-lateral p { margin-left: auto; margin-right: auto; }
    .redes .circulo { left: -20vw; top: 30%; width: 130vw; }


    .barra-whats {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      position: fixed; z-index: 90; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
      padding: 15px 20px; background: var(--escuro); color: var(--amarelo);
      font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
      box-shadow: 5px 5px 0 var(--vermelho);
      translate: 0 calc(100% + 40px); transition: translate 280ms var(--ease-out);
    }
    .barra-whats svg { width: 1.4em; height: 1.4em; fill: currentColor; }
    .barra-whats.visivel { translate: 0 0; }
    .barra-whats:active { translate: 5px 5px; box-shadow: 0 0 0 var(--vermelho); }
  }
  @media (max-width: 420px) {
    .titulo-bloco .script { margin-left: .8em; }
    .ref { padding: 14px 20px 16px; }
    .celulares img { width: 41vw; box-shadow: 10px 10px 0 var(--vermelho); }
  }

  /* ---------- movimento: as fotos são coladas na página ---------- */
  .js .pendente.moldura { opacity: 0; translate: 0 -30px; scale: 1.04; rotate: calc(var(--giro, 0deg) + 5deg); }
  .js .pendente.moldura .fita { opacity: 0; scale: .7 1; }
  .js .pendente.nome { opacity: 0; translate: -28px 0; }
  .js .pendente.celular { opacity: 0; translate: 0 40px; }
  .js .moldura, .js .nome, .js .celular {
    transition: opacity 420ms ease-out var(--atraso, 0ms), translate 820ms var(--ease-out) var(--atraso, 0ms), scale 820ms var(--ease-out) var(--atraso, 0ms), rotate 820ms var(--ease-out) var(--atraso, 0ms);
  }
  .js .moldura .fita { transition: opacity 240ms ease-out calc(var(--atraso, 0ms) + 420ms), scale 360ms var(--ease-out) calc(var(--atraso, 0ms) + 420ms); }
  .js .capa .script-fundo { clip-path: inset(-20% 100% -20% 0); transition: clip-path 1500ms var(--ease-in-out) 250ms; }
  .js .capa-foto img { opacity: 0; translate: 0 28px; transition: opacity 600ms ease-out, translate 900ms var(--ease-out); }
  .js.pronto .capa .script-fundo { clip-path: inset(-20% -5% -20% 0); }
  .js.pronto .capa-foto img { opacity: 1; translate: 0 0; }
  @media (prefers-reduced-motion: reduce) {
    .js .pendente.moldura, .js .pendente.nome, .js .pendente.celular { translate: 0 0; scale: 1; rotate: var(--giro, 0deg); }
    .js .pendente.moldura .fita { scale: 1; }
    .js .capa .script-fundo { clip-path: none; transition: none; }
    .js .capa-foto img { translate: 0 0; }
  }

  /* ================= acréscimos para as páginas internas e SEO ================= */

  /* h1 da capa: logo + "Cantora sertaneja" como texto de verdade */
  .capa h1 { font-weight: 400; font-size: 1rem; }
  .capa h1 .capa-sub { display: block; font-weight: 500; }

  /* links dentro de texto */
  .texto a:not(.botao):not(.nome), .resposta a, .lead a { color: var(--vermelho); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .bg-escuro .texto a:not(.botao):not(.nome), .bg-vermelho .texto a:not(.botao):not(.nome) { color: var(--amarelo); }
  .topo nav a[aria-current="page"] { color: var(--vermelho); background-size: 100% 2px; }

  /* trilha de navegação (breadcrumb) */
  .trilha { font-size: .85rem; letter-spacing: .06em; color: var(--marrom); margin-bottom: 26px; }
  .trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45em; }
  .trilha li + li::before { content: "/"; margin-right: .45em; color: var(--vermelho); }
  .trilha a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

  /* capa das páginas internas */
  .capa-interna { padding: calc(var(--topo) + clamp(36px, 5vw, 72px)) var(--margem) clamp(80px, 9vw, 132px); }
  .capa-interna-grade { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(48px, 6vw, 100px); align-items: center; }
  .capa-interna h1 { font-weight: 400; }
  .capa-interna .h1-pre { display: block; font-style: italic; font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.55rem); color: var(--marrom); margin-bottom: .4em; }
  .capa-interna h1 .titulo { font-size: clamp(2.5rem, 5.4vw, 4.9rem); }
  .capa-interna .script { rotate: -3deg; transform-origin: left center; margin: .08em 0 0 .8em; font-size: clamp(1.9rem, 3.2vw, 3rem); max-width: 16em; }
  .lead { font-size: clamp(1.15rem, 1.45vw, 1.375rem); line-height: 1.55; max-width: 46ch; margin-top: 26px; }
  .capa-interna .moldura { --giro: 2.5deg; max-width: 430px; width: 100%; justify-self: center; }
  .capa-interna .moldura img { aspect-ratio: 4 / 5; }
  .atualizado { font-size: .9rem; font-style: italic; color: var(--marrom); margin-top: 20px; }

  /* blocos de texto */
  .bloco { padding: var(--secao) var(--margem); }
  .bloco-grade { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 6vw, 110px); align-items: start; }
  .bloco .titulo-bloco .script { white-space: normal; max-width: 13em; font-size: clamp(1.9rem, 3.4vw, 3.2rem); margin-left: 1em; }
  .bloco-estreito { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
  .texto h3 { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; margin: 1.6em 0 .55em; }
  .bg-escuro .texto h3, .bg-vermelho .texto h3 { color: var(--amarelo); }

  /* cidades atendidas */
  .cidades { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
  .cidades li {
    padding: .38em .9em; background: var(--amarelo); color: var(--escuro); font-weight: 600; font-size: 1rem; line-height: 1.2;
    rotate: var(--giro, 0deg);
    -webkit-mask: var(--rasgo-lados) 0 0 / 100% 100% no-repeat; mask: var(--rasgo-lados) 0 0 / 100% 100% no-repeat;
  }
  .cidades li:nth-child(odd) { --giro: -1deg; }
  .cidades li:nth-child(even) { --giro: .8deg; }
  .bg-amarelo .cidades li { background: var(--creme); }

  /* fatos em resumo */
  .fatos { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 14px 28px; margin-top: 10px; }
  .fatos dt { font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vermelho); padding-top: .35em; }
  .fatos dd { font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.5; }

  /* passos para contratar (a ordem importa, por isso numerados) */
  .passos { list-style: none; counter-reset: passo; display: grid; gap: 24px; margin-top: 30px; }
  .passos li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 16px; align-items: start; font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.5; }
  .passos li::before { counter-increment: passo; content: counter(passo); font-family: var(--titulo); font-size: 2.6rem; line-height: .9; color: var(--vermelho); }
  .passos b { display: block; font-family: var(--titulo); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; margin-bottom: 4px; }

  /* perguntas frequentes */
  .faq { display: grid; gap: 16px; margin-top: 10px; }
  .faq details { background: var(--creme); color: var(--escuro); box-shadow: 6px 6px 0 var(--vermelho); }
  .bg-creme .faq details { background: #fff8e6; }
  .faq summary {
    position: relative; cursor: pointer; list-style: none; padding: 20px 60px 20px 24px;
    font-family: var(--titulo); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px;
    border-right: 3px solid var(--vermelho); border-bottom: 3px solid var(--vermelho);
    translate: 0 -70%; rotate: 45deg; transition: rotate 220ms var(--ease-out), translate 220ms var(--ease-out);
  }
  .faq details[open] summary::after { rotate: 225deg; translate: 0 -25%; }
  .resposta { padding: 0 24px 22px; font-size: 1.1rem; line-height: 1.6; max-width: 66ch; }
  .resposta p + p { margin-top: .8em; }

  /* regiões como etiquetas-link */
  .regioes-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 30px; }
  .regioes-lista .nome { font-size: clamp(1.2rem, 2vw, 1.75rem); transition: background-color 200ms ease, translate 160ms var(--ease-out); }
  .regioes-lista li:nth-child(odd) .nome { --giro: -1.4deg; }
  .regioes-lista li:nth-child(even) .nome { --giro: 1.1deg; }
  .regioes-lista .nome:active { translate: 0 2px; }
  @media (hover: hover) and (pointer: fine) { .regioes-lista .nome:hover { background: var(--amarelo); } }
  .bg-creme .regioes-lista .nome, .bg-amarelo .regioes-lista .nome { background: var(--escuro); color: var(--creme); }
  .bg-creme .regioes-lista .nome svg, .bg-amarelo .regioes-lista .nome svg { fill: var(--amarelo); }
  @media (hover: hover) and (pointer: fine) { .bg-creme .regioes-lista .nome:hover, .bg-amarelo .regioes-lista .nome:hover { background: var(--vermelho); } }
  .regioes .texto p { color: var(--creme); max-width: 52ch; }
  .regioes .titulo { color: var(--amarelo); }
  .regioes-grade { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
  .nomes.em-linha { flex-direction: row; flex-wrap: wrap; gap: 14px 16px; }
  .nomes.em-linha .nome { margin-left: 0; }

  /* prova curta nas páginas de região */
  .prova-grade { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(48px, 6vw, 100px); align-items: center; }
  .prova { padding: var(--secao) var(--margem); }
  .prova .titulo { color: var(--amarelo); }
  .prova .texto p { color: var(--creme); }
  .prova .moldura { --giro: -2.5deg; max-width: 440px; width: 100%; justify-self: center; }

  /* rodapé */
  .rodape { background: var(--escuro); color: var(--creme); padding: clamp(56px, 7vw, 88px) var(--margem) calc(28px + env(safe-area-inset-bottom)); font-size: 1rem; }
  .rodape-grade { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 80px); }
  .rodape-marca img { height: 46px; width: auto; }
  .rodape-marca p { margin-top: 16px; max-width: 34ch; line-height: 1.5; opacity: .9; }
  .rodape-titulo { font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 14px; }
  .rodape ul { list-style: none; display: grid; gap: 9px; }
  .rodape a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 200ms ease, text-decoration-color 200ms ease; }
  @media (hover: hover) and (pointer: fine) { .rodape a:hover { color: var(--amarelo); text-decoration-color: currentColor; } }
  .rodape-base { max-width: 1240px; margin: 44px auto 0; padding-top: 20px; border-top: 1px solid rgba(245,237,213,.18); font-size: .9rem; opacity: .8; }

  @media (max-width: 860px) {
    .capa-interna-grade, .bloco-grade, .prova-grade { grid-template-columns: minmax(0, 1fr); }
    .capa-interna .moldura { max-width: 340px; width: 82%; }
    .prova .moldura { max-width: 360px; width: 84%; }
    .fatos { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .fatos dd { margin-bottom: 14px; }
    .rodape-grade { grid-template-columns: minmax(0, 1fr); }
    .rodape { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  }
  @media (max-width: 420px) {
    .capa-interna .script { margin-left: .6em; }
    .faq summary { padding: 18px 52px 18px 18px; }
    .resposta { padding: 0 18px 20px; }
  }