/* Abertura (6.1): foto no fundo inteiro; texto sobre degradê marinho (embaixo no celular, à esquerda no desktop) */

.abertura {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(100vh - var(--topo));
  min-height: calc(100svh - var(--topo));
  overflow: hidden;
  background: var(--marinho);
  color: var(--branco);
}

.abertura__midia { position: absolute; inset: 0; overflow: hidden; }
.abertura__midia img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; }

/* luz de água: duas redes de cáustica e um reflexo, só no meio da foto */
.abertura__luz {
  --caustica: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g fill='%23eafcff' fill-rule='evenodd'><path opacity='.22' d='M0 0H240V240H0ZM-18 -4Q-10 -12 15 0Q40 11 41 21Q42 31 17 41Q-7 51 -17 27Q-26 4 -18 -4ZM-18 236Q-10 228 15 240Q40 251 41 261Q42 271 17 281Q-7 291 -17 267Q-26 244 -18 236ZM222 -4Q230 -12 255 0Q280 11 281 21Q282 31 257 41Q233 51 223 27Q214 4 222 -4ZM222 236Q230 228 255 240Q280 251 281 261Q282 271 257 281Q233 291 223 267Q214 244 222 236ZM-9 67Q-6 59 18 49Q43 39 51 49Q58 60 45 81Q32 103 19 107Q5 112 -2 108Q-10 105 -11 90Q-13 76 -9 67ZM231 67Q234 59 258 49Q283 39 291 49Q298 60 285 81Q272 103 259 107Q245 112 238 108Q230 105 229 90Q227 76 231 67ZM12 143Q8 120 21 115Q34 110 45 117Q55 123 57 150Q59 177 38 172Q17 166 12 143ZM49 -1Q44 5 18 -7Q-7 -18 -6 -28Q-6 -38 5 -51Q17 -65 38 -59Q58 -54 62 -51Q66 -49 60 -28Q54 -7 49 -1ZM49 239Q44 245 18 233Q-7 222 -6 212Q-6 202 5 189Q17 175 38 181Q58 186 62 189Q66 191 60 212Q54 233 49 239ZM289 -1Q284 5 258 -7Q233 -18 234 -28Q234 -38 245 -51Q257 -65 278 -59Q298 -54 302 -51Q306 -49 300 -28Q294 -7 289 -1ZM289 239Q284 245 258 233Q233 222 234 212Q234 202 245 189Q257 175 278 181Q298 186 302 189Q306 191 300 212Q294 233 289 239ZM59 43Q52 33 51 23Q50 13 55 7Q60 1 85 6Q111 10 114 31Q118 51 110 55Q103 60 85 57Q67 54 59 43ZM50 111Q39 105 53 83Q66 62 84 65Q102 68 102 95Q101 121 81 119Q61 118 50 111ZM70 182Q66 180 64 153Q63 126 83 128Q103 130 107 136Q111 142 110 155Q108 168 105 172Q102 177 88 181Q73 185 70 182ZM87 -2Q62 -6 68 -27Q74 -48 88 -52Q103 -56 113 -38Q123 -20 118 -9Q112 3 87 -2ZM87 238Q62 234 68 213Q74 192 88 188Q103 184 113 202Q123 220 118 231Q112 243 87 238ZM151 46Q143 51 134 50Q126 49 123 29Q119 9 124 -3Q129 -14 145 -13Q160 -11 170 -2Q180 8 170 24Q159 40 151 46ZM151 286Q143 291 134 290Q126 289 123 269Q119 249 124 237Q129 226 145 227Q160 229 170 238Q180 248 170 264Q159 280 151 286ZM109 94Q109 67 117 63Q124 59 132 60Q140 60 155 87Q170 113 143 123Q116 133 112 127Q108 121 109 94ZM175 171Q170 174 143 170Q117 167 118 153Q120 140 147 130Q173 120 179 122Q185 125 182 146Q179 168 175 171ZM163 200Q159 220 143 219Q128 217 118 199Q108 181 111 177Q114 172 141 176Q167 179 163 200ZM198 8Q208 6 217 30Q227 53 224 62Q220 70 194 57Q167 43 177 26Q188 10 198 8ZM192 63Q218 77 220 91Q221 106 205 111Q189 117 183 114Q177 112 163 86Q148 60 156 54Q165 49 192 63ZM-33 181Q-53 168 -50 146Q-47 125 -30 119Q-14 114 -7 117Q1 121 5 144Q10 167 -1 181Q-13 195 -33 181ZM207 181Q187 168 190 146Q193 125 210 119Q226 114 233 117Q241 121 245 144Q250 167 239 181Q227 195 207 181ZM204 -50Q224 -37 223 -27Q223 -17 215 -10Q207 -2 197 0Q187 2 177 -8Q166 -17 171 -38Q175 -58 179 -61Q184 -64 204 -50ZM204 190Q224 203 223 213Q223 223 215 230Q207 238 197 240Q187 242 177 232Q166 223 171 202Q175 182 179 179Q184 176 204 190Z'/><path opacity='.85' d='M0 0H240V240H0ZM-21 -6Q-12 -14 16 -2Q44 10 45 21Q46 32 18 43Q-9 54 -19 28Q-30 2 -21 -6ZM-21 234Q-12 226 16 238Q44 250 45 261Q46 272 18 283Q-9 294 -19 268Q-30 242 -21 234ZM219 -6Q228 -14 256 -2Q284 10 285 21Q286 32 258 43Q231 54 221 28Q210 2 219 -6ZM219 234Q228 226 256 238Q284 250 285 261Q286 272 258 283Q231 294 221 268Q210 242 219 234ZM-12 66Q-9 57 19 46Q46 35 54 47Q62 58 48 81Q33 105 19 110Q4 115 -4 111Q-12 107 -14 91Q-15 76 -12 66ZM228 66Q231 57 259 46Q286 35 294 47Q302 58 288 81Q273 105 259 110Q244 115 236 111Q228 107 226 91Q225 76 228 66ZM10 143Q5 118 20 113Q34 108 46 115Q57 122 59 152Q61 181 38 175Q16 169 10 143ZM50 2Q45 8 17 -4Q-11 -17 -10 -27Q-10 -38 3 -53Q15 -68 38 -62Q61 -56 65 -53Q69 -51 63 -28Q56 -5 50 2ZM50 242Q45 248 17 236Q-11 223 -10 213Q-10 202 3 187Q15 172 38 178Q61 184 65 187Q69 189 63 212Q56 235 50 242ZM290 2Q285 8 257 -4Q229 -17 230 -27Q230 -38 243 -53Q255 -68 278 -62Q301 -56 305 -53Q309 -51 303 -28Q296 -5 290 2ZM290 242Q285 248 257 236Q229 223 230 213Q230 202 243 187Q255 172 278 178Q301 184 305 187Q309 189 303 212Q296 235 290 242ZM57 44Q49 33 48 22Q47 11 53 5Q58 -2 86 3Q113 8 118 31Q122 53 113 58Q105 62 85 59Q65 56 57 44ZM57 284Q49 273 48 262Q47 251 53 245Q58 238 86 243Q113 248 118 271Q122 293 113 298Q105 302 85 299Q65 296 57 284ZM48 113Q36 106 51 82Q65 59 85 62Q105 65 104 95Q104 124 82 122Q59 120 48 113ZM68 185Q64 182 62 152Q60 123 82 125Q104 127 109 133Q113 140 112 154Q110 169 107 174Q103 179 88 183Q72 187 68 185ZM87 1Q59 -5 66 -27Q72 -50 88 -55Q104 -59 114 -39Q125 -19 120 -7Q114 6 87 1ZM87 241Q59 235 66 213Q72 190 88 185Q104 181 114 201Q125 221 120 233Q114 246 87 241ZM151 48Q142 54 133 53Q125 52 120 30Q116 8 122 -5Q128 -17 144 -16Q161 -14 173 -4Q184 6 172 24Q161 42 151 48ZM151 288Q142 294 133 293Q125 292 120 270Q116 248 122 235Q128 223 144 224Q161 226 173 236Q184 246 172 264Q161 282 151 288ZM107 94Q107 65 116 60Q124 56 133 56Q142 57 158 86Q174 115 144 126Q115 137 111 130Q106 124 107 94ZM176 173Q171 176 142 172Q113 168 115 154Q116 139 146 128Q175 117 181 120Q188 122 184 146Q181 170 176 173ZM166 200Q161 223 144 221Q127 220 116 200Q105 180 109 175Q112 170 141 174Q170 178 166 200ZM197 5Q208 3 219 29Q229 55 226 64Q222 74 193 59Q163 43 175 25Q186 7 197 5ZM192 61Q222 76 223 92Q225 108 207 114Q189 119 183 117Q176 115 160 86Q144 57 153 51Q163 46 192 61ZM-34 185Q-56 170 -53 146Q-49 122 -32 116Q-14 110 -6 114Q3 118 8 144Q13 169 1 184Q-12 199 -34 185ZM206 185Q184 170 187 146Q191 122 208 116Q226 110 234 114Q243 118 248 144Q253 169 241 184Q228 199 206 185ZM205 -53Q227 -38 226 -27Q226 -16 217 -8Q208 0 197 2Q186 4 175 -6Q164 -16 168 -39Q173 -61 178 -64Q183 -67 205 -53ZM205 187Q227 202 226 213Q226 224 217 232Q208 240 197 242Q186 244 175 234Q164 224 168 201Q173 179 178 176Q183 173 205 187Z'/></g></svg>");
  position: absolute; inset: 0; pointer-events: none;
  opacity: .36; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 32%, #000 58%, transparent 82%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 32%, #000 58%, transparent 82%);
}
.abertura__luz span { position: absolute; inset: -30%; }
.abertura__luz span:nth-child(1) { background: var(--caustica) 0 0 / 250px 160px; }
.abertura__luz span:nth-child(2) { background: var(--caustica) 0 0 / 340px 215px; opacity: .6; }
.abertura__luz span:nth-child(3) {
  background:
    radial-gradient(38% 16% at 32% 46%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 70%),
    radial-gradient(28% 12% at 70% 56%, rgba(190, 250, 255, .35), rgba(190, 250, 255, 0) 70%);
}

.abertura__texto {
  position: relative;
  padding: 120px var(--margem) 24px;
  background: linear-gradient(180deg, rgba(0, 48, 107, 0), rgba(0, 48, 107, .9) 110px, var(--marinho) 70%);
}

.abertura__rotulo { color: var(--agua); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.abertura__onda { width: 96px; height: 12px; margin: 8px 0 14px; overflow: visible; }
.abertura__onda path { fill: none; stroke: url(#g-onda) var(--ciano); stroke-width: 2.6; stroke-linecap: round; }

.abertura__titulo { color: var(--branco); font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
.abertura__apoio { margin-top: 12px; color: rgba(255, 255, 255, .88); font-size: 1.0625rem; }
.abertura__palavra { display: inline-block; }
.abertura .btn { position: relative; isolation: isolate; overflow: hidden; margin-top: 20px; }
/* faixa de brilho do botão, parada fora dele até a animação passar */
.abertura .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .75) 48%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(-120%);
}
.abertura__miudo { margin-top: 10px; color: rgba(255, 255, 255, .75); font-size: .8125rem; text-align: center; }

/* movimento: estados escondidos e loops só existem aqui; com "reduzir movimento" tudo fica parado e visível */
@media (prefers-reduced-motion: no-preference) {
  .abertura__midia img { animation: respirar 18s ease-in-out infinite alternate; }
  .abertura__luz { animation: surgir .6s var(--ease) .5s backwards; }
  .abertura__luz span { will-change: transform; }
  .abertura__luz span:nth-child(1) { animation: deriva-a 17s ease-in-out infinite alternate; }
  .abertura__luz span:nth-child(2) { animation: deriva-b 20s ease-in-out infinite alternate; }
  .abertura__luz span:nth-child(3) { animation: reflexo 11s ease-in-out infinite alternate; }
  .abertura .btn::after { animation: brilho 5s ease-in-out 2.4s infinite; }

  /* entrada, 80 ms entre itens */
  .abertura__rotulo { animation: subir .55s var(--ease) .2s backwards; }
  .abertura__onda path { stroke-dasharray: 1; animation: desenhar .6s var(--ease) .28s backwards; }
  /* sem JS o título entra inteiro; com JS (que põe o aria-label) entra palavra por palavra */
  .abertura__titulo { animation: subir .55s var(--ease) 1s backwards; }
  .abertura__titulo[aria-label] { animation: none; }
  .abertura__palavra { animation: subir .55s var(--ease) backwards; animation-delay: calc(.36s + var(--i) * 65ms); }
  .abertura__apoio { animation: subir .55s var(--ease) 1.09s backwards; }
  .abertura .btn { animation: subir .55s var(--ease) 1.17s backwards; }
  .abertura__miudo { animation: subir .55s var(--ease) 1.25s backwards; }

  /* fora da tela, os loops param (classe posta por js/hero.js) */
  .abertura.pausada .abertura__midia img,
  .abertura.pausada .abertura__luz span,
  .abertura.pausada .btn::after { animation-play-state: paused; }

  @keyframes subir { from { opacity: 0; transform: translateY(14px); } }
  @keyframes surgir { from { opacity: 0; } }
  @keyframes desenhar { from { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } }
  @keyframes respirar { to { transform: scale(1.08); } }
  @keyframes deriva-a {
    0% { transform: translate3d(-4%, -3%, 0) rotate(-2deg) skewX(-2deg); }
    50% { transform: translate3d(1%, 3%, 0) rotate(1deg) skewX(2deg); }
    100% { transform: translate3d(5%, -1%, 0) rotate(3deg) skewX(-1deg); }
  }
  @keyframes deriva-b {
    from { transform: translate3d(4%, 2%, 0) scale(1.05) rotate(2deg); }
    to { transform: translate3d(-5%, -3%, 0) scale(1) rotate(-2deg); }
  }
  @keyframes reflexo {
    from { opacity: .5; transform: translate3d(-6%, 0, 0); }
    to { opacity: 1; transform: translate3d(6%, -3%, 0); }
  }
  @keyframes brilho { 24%, 100% { transform: translateX(120%); } }
}

@media (min-width: 768px) {
  /* foto no fundo inteiro (pedido do cliente); o degradê marinho da esquerda segura o texto */
  .abertura {
    justify-content: center;
    padding: 64px max(var(--margem), (100% - var(--largura)) / 2);
  }
  .abertura__midia img { object-position: 50% 62%; }
  .abertura__midia::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--marinho) 0%, rgba(0, 48, 107, .9) 32%, rgba(0, 48, 107, .5) 58%, rgba(0, 48, 107, .08) 88%);
  }
  .abertura__texto { max-width: 620px; padding: 0; background: none; }
  .abertura .btn { display: inline-flex; width: auto; padding-inline: 32px; }
  .abertura__miudo { text-align: left; }
}