:root {
  /* Paleta sticker del banner ARE 2026 */
  --azul: #1877F2;
  --azul-oscuro: #0E5FD6;
  --azul-profundo: #0B3D8F;
  --fecha-uno: #F0439C;
  --fecha-dos: #C92A7F;
  --verde: #5CBE4C;
  --verde-oscuro: #3E9A33;
  --magenta: #F0439C;
  --amarillo: #FFC226;
  --coral: #F97125;
  --negro: #131313;
  --tinta: #14243A;
  --gris: #55647A;
  --crema: #FFFFFF;
  --papel: #F2F7FF;
  --radius: 26px;
  --display: 'Roboto', system-ui, sans-serif;
  --body: 'Roboto', system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--body);
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;
  line-height: 1.6;
}

img,
svg {
  display: block;
  max-width: 100%
}

a {
  color: inherit
}

/* ======= Tipografía burbuja (como el logo del PDF) ======= */
.bubble {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, .10);
  letter-spacing: .5px;
}

.bubble-outline {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  paint-order: stroke fill;
  letter-spacing: .5px;
}

/* ======= NAV ======= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 44px);
  background: var(--coral);
  transition: background .35s, box-shadow .35s, padding .35s;
}

.nav.scrolled {
  background: rgba(249, 113, 37, .28);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 6px 24px rgba(9, 46, 110, .25);
  padding: 9px clamp(16px, 4vw, 44px);
}

.nav-logo {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1.05;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nav-logo-img {
  width: 120px;
  height: auto;
  filter: brightness(0) invert(1);
}

.nav-logo-title {
  display: block;
  width: 110px;
  font-size: .68rem;
  line-height: 1.15;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
  letter-spacing: 0;
}

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  align-items: center
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: .85rem;
  padding: 8px 14px;
  border-radius: 12px;
  transition: background .25s;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(255, 255, 255, .18)
}

.nav-cta {
  background: var(--azul) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 #131313
}

.nav-cta:hover {
  background: #D42C85 !important
}

@media(max-width:780px) {
  .nav-links a:not(.nav-cta) {
    display: none
  }
}

/* En mobile, los stickers del hero se corren a los márgenes y se achican
   para no tapar el texto central */
@media(max-width:640px) {

  .hero-layer:nth-of-type(1) svg:nth-child(1) {
    left: 2% !important;
    width: 100px !important
  }

  .hero-layer:nth-of-type(1) svg:nth-child(2) {
    right: 2% !important;
    width: 120px !important
  }

  .hero-layer:nth-of-type(1) svg:nth-child(3) {
    left: 2% !important;
    bottom: 18% !important;
    width: 80px !important
  }

  .hero-layer:nth-of-type(2) svg:nth-child(1) {
    right: 2% !important;
    width: 74px !important
  }

  .hero-layer:nth-of-type(2) svg:nth-child(2) {
    left: 2% !important;
    width: 30px !important
  }

  .hero-layer:nth-of-type(2) svg:nth-child(3) {
    left: 2% !important;
    top: 6% !important;
    width: 44px !important
  }

  .hero-layer:nth-of-type(2) svg:nth-child(4) {
    right: 2% !important;
    width: 42px !important
  }

  .hero-layer:nth-of-type(3) svg:nth-child(1) {
    left: 2% !important;
    width: 92px !important
  }

  .hero-layer:nth-of-type(3) svg:nth-child(2) {
    left: 2% !important;
    top: 14% !important;
    width: 58px !important
  }

  .hero-layer:nth-of-type(3) svg:nth-child(3) {
    right: 2% !important;
    top: 38% !important;
    width: 58px !important
  }

  .hero-layer:nth-of-type(3) svg:nth-child(4) {
    right: 2% !important;
    bottom: 20% !important;
    width: 50px !important
  }

  .hero-layer:nth-of-type(3) svg:nth-child(5) {
    left: 2% !important;
    top: 60% !important;
    width: 50px !important
  }
}


/* ======= HERO ======= */
.hero {
  position: relative;
  min-height: 100svh;
  background: linear-gradient(180deg, #2F8CFF 0%, var(--azul) 55%, #0E5FD6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 110px 20px 140px;
}

.hero-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform
}

.hero-content {
  position: relative;
  z-index: 5;
  max-width: 820px
}

.hero-edition {
  display: inline-block;
  background: #fff;
  color: var(--azul);
  font-family: var(--display);
  font-weight: 800;
  padding: 8px 26px;
  border-radius: 16px;
  font-size: clamp(.8rem, 1.8vw, .95rem);
  letter-spacing: 2px;
  transform: rotate(-2deg);
  box-shadow: 4px 5px 0 rgba(16, 16, 16, .9);
  margin-bottom: 22px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 6.8vw, 4.4rem);
  line-height: .95;
  color: #fff;
  text-shadow: 0 5px 0 rgba(9, 46, 110, .55), 0 12px 28px rgba(6, 33, 82, .35);
  margin-bottom: 8px;
}

.hero h1 .anio {
  display: inline-block;
  color: var(--azul-profundo);
  background: #fff;
  border-radius: 20px;
  padding: 0 30px;
  margin-left: 18px;
  margin-top: 14px;
  transform: rotate(2deg);
  text-shadow: none;
  box-shadow: 6px 7px 0 rgba(16, 16, 16, .85);
}

.hero p.lead {
  color: #E4EEFF;
  font-size: clamp(.92rem, 2vw, 1.1rem);
  font-weight: 600;
  max-width: 640px;
  margin: 18px auto 34px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap
}

.btn {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 15px 34px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .2s, box-shadow .2s;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px)
}

.btn-magenta {
  background: var(--magenta);
  color: #fff;
  box-shadow: 0 5px 0 #131313
}

.btn-magenta:hover {
  box-shadow: 0 8px 0 #131313
}

.btn-blanco {
  background: #fff;
  color: var(--azul-profundo);
  box-shadow: 0 5px 0 rgba(16, 16, 16, .8)
}

.btn-blanco:hover {
  box-shadow: 0 8px 0 rgba(16, 16, 16, .8)
}

.hero-deadline {
  margin-top: 26px;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(9, 46, 110, .35);
  padding: 8px 18px;
  border-radius: 14px;
}

.hero-deadline .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amarillo);
  animation: pulse 1.6s infinite
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1
  }

  50% {
    transform: scale(1.35);
    opacity: .6
  }
}

/* onda inferior del hero */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 6;
  pointer-events: none
}

.wave svg {
  width: 100%;
  height: clamp(60px, 10vw, 130px)
}

/* elementos flotantes del hero */
.float-el {
  position: absolute;
  opacity: .95;
  filter: drop-shadow(0 8px 14px rgba(6, 33, 82, .25))
}

/* sombra dura desplazada, estilo calcomania del banner */
.float-el.sticker {
  opacity: 1;
  filter: drop-shadow(6px 7px 0 rgba(16, 16, 16, .92));
}

.spin-slow {
  animation: spin 26s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.bob {
  animation: bob 5s ease-in-out infinite
}

.bob2 {
  animation: bob 6.5s ease-in-out infinite reverse
}

@keyframes bob {

  0%,
  100% {
    translate: 0 0
  }

  50% {
    translate: 0 -18px
  }
}

/* ======= Cinta marquee ======= */
.filmstrip {
  background: var(--tinta);
  color: #fff;
  overflow: hidden;
  padding: 16px 0;
  position: relative;
  z-index: 7;
}

.filmstrip::before,
.filmstrip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background-image: radial-gradient(circle, #fff 2.6px, transparent 3px);
  background-size: 26px 8px;
  background-repeat: repeat-x;
  opacity: .85;
}

.filmstrip::before {
  top: 5px
}

.filmstrip::after {
  bottom: 5px
}

.marquee {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite
}

.marquee span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0 26px;
  white-space: nowrap;
  letter-spacing: 1.5px;
}

.marquee em {
  color: var(--amarillo);
  font-style: normal
}

@keyframes marquee {
  to {
    transform: translateX(-50%)
  }
}

/* ======= Secciones base ======= */
section {
  position: relative
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 110px) clamp(20px, 5vw, 40px)
}

.blob-title {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  font-size: clamp(1.5rem, 2vw, 2rem);
  padding: 10px 38px;
  border-radius: 18px;
  margin-bottom: 14px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}

.blob-verde {
  background: var(--verde);
  box-shadow: 5px 6px 0 var(--negro)
}

.blob-azul {
  background: var(--azul);
  box-shadow: 5px 6px 0 var(--negro)
}

.blob-magenta {
  background: var(--magenta);
  box-shadow: 5px 6px 0 var(--negro)
}

.blob-amarillo {
  background: var(--amarillo);
  box-shadow: 5px 6px 0 var(--negro)
}

.blob-coral {
  background: var(--coral);
  box-shadow: 5px 6px 0 var(--negro)
}

.section-intro {
  max-width: 100%;
  font-size: 1.08rem;
  color: var(--gris);
  font-weight: 600
}

/* decoraciones parallax dispersas */
.deco {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  opacity: .9;
  z-index: 0
}

.wrap>* {
  position: relative;
  z-index: 1
}

/* ======= Qué es ======= */
.quees {
  background: var(--papel)
}

.quees-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center
}

.quees-grid p {
  margin-bottom: 14px;
  font-size: 1.06rem
}

.quees-grid strong {
  color: var(--azul-profundo)
}

.agranda-tilt {
  display: block;
  position: relative;
  top: 22px;
  width: 100%;
  text-align: center;
  transform: rotate(-4deg);
  color: var(--azul);
  font-weight: 800;
}

.quees-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 18px 40px rgba(9, 46, 110, .12);

  transform: rotate(1.5deg);
}

.quees-card h3 {
  font-family: var(--display);
  color: var(--magenta);
  font-size: 1.3rem;
  margin-bottom: 8px
}

.quees-card ul {
  list-style: none
}

.quees-card li {
  padding: 8px 0 8px 34px;
  position: relative;
  font-weight: 700
}

.quees-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--verde);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 13 10 18 19 7"/></svg>');
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

@media(max-width:840px) {
  .quees-grid {
    grid-template-columns: 1fr
  }
}

/* ======= Fechas ======= */
.fechas {
  background: linear-gradient(180deg, var(--fecha-uno), var(--fecha-dos));
  color: #fff;
  overflow: hidden
}

.fechas .section-intro {
  color: #FFDFF0
}

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 44px
}

.tl-card {
  background: rgba(255, 255, 255, .13);
  border: 2.5px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius);
  padding: 30px 28px;
  backdrop-filter: blur(4px);
  transition: transform .25s;
}

.tl-card:hover {
  transform: translateY(-6px) rotate(-.6deg)
}

.tl-card .fecha {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 0 rgba(122, 16, 71, .4);
}

.tl-card .etiqueta {
  display: inline-block;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: 2px;
  background: var(--amarillo);
  color: var(--tinta);
  padding: 5px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: 0 3px 0 rgba(16, 16, 16, .8);
}

.tl-card p {
  margin-top: 10px;
  color: #FFE7F3;
  font-weight: 600
}

.tl-card a.btn {
  margin-top: 18px;
  font-size: .95rem;
  padding: 12px 26px
}

@media(max-width:720px) {
  .timeline {
    grid-template-columns: 1fr
  }
}

/* ======= Categorías ======= */
.categorias {
  background: var(--papel);
  overflow: hidden
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 38px
}

.cat-chip {
  background: #fff;
  border-radius: 20px;
  padding: 20px 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 24px rgba(9, 46, 110, .10);
  transition: transform .22s, box-shadow .22s;
}

.cat-chip:hover {
  transform: translateY(-5px) rotate(-.8deg);
  box-shadow: 0 16px 30px rgba(9, 46, 110, .16)
}

.cat-chip .cat-label {
  flex: 1 1 auto;
  min-width: 0;
}

.cat-chip .cat-label small {
  display: block;
  font-weight: 600;
}

.cat-chip .num {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  background: var(--azul);
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .95rem;
}

.cat-note {
  margin-top: 22px;
  font-weight: 700;
  color: var(--gris);
  background: #FFF6E3;
  border: 2px dashed var(--amarillo);
  border-radius: 16px;
  padding: 14px 20px;
  display: inline-block;
}

/* ======= Formatos ======= */
.formatos {
  background: linear-gradient(180deg, #6CC653, var(--verde-oscuro));
  color: #fff;
  overflow: hidden
}

.fmt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px
}

.fmt-card {
  background: rgba(255, 255, 255, .13);
  border: 2.5px solid rgba(255, 255, 255, .5);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 18px 36px rgba(46, 90, 10, .25);
  transition: transform .25s;
}

.fmt-card:hover {
  transform: translateY(-8px) rotate(.7deg)
}

.fmt-card .icono {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.fmt-card:nth-child(1) .icono {
  background: #DEEBFF
}

.fmt-card:nth-child(2) .icono {
  background: #FCE7F3
}

.fmt-card:nth-child(3) .icono {
  background: #FFF3DC
}

.fmt-card h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  margin-bottom: 8px;
  color: #fff
}

.fmt-card p {
  color: #fff;
  font-weight: 600;
  font-size: .98rem
}

.fmt-note {
  margin-top: 26px;
  font-weight: 800;
  color: #F3FFE3
}

@media(max-width:860px) {
  .fmt-grid {
    grid-template-columns: 1fr
  }
}

/* ======= Envío ======= */
.envio {
  background: var(--papel);
  overflow: hidden
}

.envio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 38px
}

.req-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 12px 26px rgba(9, 46, 110, .10);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.req-card .ic {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #DEEBFF;
}

.req-card:nth-child(2) .ic {
  background: #EAF6E4
}

.req-card:nth-child(3) .ic {
  background: #FCE7F3
}

.req-card:nth-child(4) .ic {
  background: #FFF3DC
}

.req-card h4 {
  font-family: var(--display);
  font-size: 1.08rem;
  margin-bottom: 4px
}

.req-card p {
  color: var(--gris);
  font-weight: 600;
  font-size: .95rem
}

.req-card code {
  background: #EDF3FF;
  border: 1.5px solid #C3D8FA;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--azul-profundo);
  display: inline-block;
  margin-top: 6px;
  word-break: break-all;
}

@media(max-width:760px) {
  .envio-grid {
    grid-template-columns: 1fr
  }
}

/* ======= Extras (integrados + IA + autorizaciones) ======= */
.extras {
  background: linear-gradient(180deg, #FB8A2E, #EE6414);
  color: #fff;
  overflow: hidden
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px
}

.extra-card {
  background: rgba(255, 255, 255, .16);
  border: 2.5px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(4px);
}

.extra-card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin-bottom: 10px;
  text-shadow: 0 2px 0 rgba(150, 80, 0, .3)
}

.extra-card p {
  font-weight: 600;
  color: #FFF7EA;
  font-size: .98rem
}

.extra-card a {
  font-weight: 800;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px
}

@media(max-width:860px) {
  .extras-grid {
    grid-template-columns: 1fr
  }
}

/* ======= CTA final ======= */
.final {
  background: linear-gradient(180deg, var(--azul), var(--azul-profundo));
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.final h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.02;
  text-shadow: 0 4px 0 rgba(6, 33, 82, .5);
  margin-bottom: 16px;
}

.final p {
  max-width: 560px;
  margin: 0 auto 32px;
  font-weight: 600;
  color: #DBEAFF;
  font-size: 1.1rem
}

.final .contacto {
  margin-top: 44px;
  font-weight: 700;
  color: #C7DEFF
}

.final .contacto a {
  color: #fff;
  font-weight: 800
}

.redes {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 18px
}

.redes a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .6);
  display: grid;
  place-items: center;
  transition: transform .2s, background .2s;
}

.redes a:hover {
  transform: translateY(-4px) scale(1.06);
  background: rgba(255, 255, 255, .32)
}

/* ======= Footer ======= */
footer {
  background: var(--tinta);
  color: #B4C3DB;
  text-align: center;
  padding: 30px 20px;
  font-size: .88rem;
  font-weight: 600;
}

footer strong {
  color: #fff
}

/* ======= Reveal on scroll ======= */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1)
}

.reveal.in {
  opacity: 1;
  transform: none
}

.reveal-d1 {
  transition-delay: .08s
}

.reveal-d2 {
  transition-delay: .16s
}

.reveal-d3 {
  transition-delay: .24s
}

/* ======= Modal ======= */
button.btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 26, .65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  background: linear-gradient(160deg, var(--azul), var(--azul-profundo));
  color: #fff;
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 34px 34px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.modal h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 14px;
  padding-right: 30px;
}

.modal p {
  color: #DBEAFF;
  font-weight: 500;
  line-height: 1.55;
}

.modal-subtitle {
  margin-top: 22px;
  font-weight: 800 !important;
  color: #fff !important;
}

.modal-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.modal-links .btn {
  justify-content: center;
}

.modal-continue {
  display: flex;
  justify-content: center;
  margin-top: 26px;
  width: 100%;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, .32);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }

  html {
    scroll-behavior: auto
  }
}