:root {
  --azul: #033A95;
  --azul-oscuro: #062a6b;
  --rojo: #e3001b;
  --rojo-oscuro: #b8001a;
  --celeste: #37b4e8;
  --blanco: #ffffff;
  --gris: #4a4a4a;
  --font: "Lato", "Helvetica Neue", Arial, sans-serif;
  --ancho: 1200px;
  --header-h: 64px;
  --marcas-alto: 500px;
  /* alto visible del recuadro de marcas */
}

*, *::before, *::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  /* el menú apunta a los títulos: al llegar, queda este espacio fijo entre la barra y el título */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--azul);
  background: var(--blanco);
  line-height: 1.35;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

a {
  color: inherit
}

button {
  font-family: inherit
}

.contenedor {
  width: min(100% - 2rem, var(--ancho));
  margin-inline: auto
}

.titulo {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 900;
  text-align: center;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}

:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 4px
}

/* ============================================================
     HEADER
     ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--azul);
  height: var(--header-h);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.header .contenedor {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.logo-header img {
  height: 34px;
  width: auto;
  max-width: none
}

.nav {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  /* crece con la pantalla: 1rem en escritorio grande, sin desbordar en pantallas medianas */
  font-size: clamp(.9rem, 1.25vw, 1rem);
  padding: .35rem 0;
  /* subrayado que se abre desde el centro hacia los costados */
  background: linear-gradient(#fff, #fff) no-repeat center bottom / 0 2px;
  transition: background-size .4s cubic-bezier(.25, .8, .25, 1);
}

.nav a:hover, .nav a:focus-visible {
  background-size: 100% 2px;
  outline: none
}

.hamburguesa {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
}

.hamburguesa span {
  display: block;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  margin: 6px 0;
  transition: transform .3s, opacity .3s
}

.hamburguesa[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9px) rotate(45deg)
}

.hamburguesa[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.hamburguesa[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg)
}

/* ============================================================
     HERO
     ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  /* anclada abajo: si el hero es más bajo que la imagen, se recorta la franja verde de arriba
     (solo color) y no los globos de abajo. Como la imagen termina en blanco, se funde sola con la página */
  background: #fff url("../img/hero--dk.png") center bottom / cover no-repeat;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  align-items: start;
  gap: clamp(1rem, 2vw, 2rem);
}

.hero__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem
}

.hero__promo {
  width: min(100%, 300px);
  margin-top: .5rem
}

/* versión mobile del título "Promo Aniversario" (sin globo): solo se muestra en mobile */
.hero__promo-mb {
  display: none
}

.hero__texto {
  width: min(100%, 720px);
  transition: transform .6s cubic-bezier(.25, .8, .25, 1)
}

/* al pasar el mouse, la imagen crece apenas, despacio */
@media (hover: hover) {
  .hero__texto:hover {
    transform: scale(1.03)
  }
}

.hero__fechas {
  width: min(100%, 330px)
}

.hero__globo {
  width: min(85%, 280px);
  margin-top: .25rem
}

.hero__globo img {
  transform-origin: center bottom;
  animation: flotar 5s ease-in-out infinite
}

@keyframes flotar {
  0%, 100% {
    transform: translateY(0) rotate(-1.5deg)
  }

  50% {
    transform: translateY(-10px) rotate(1.5deg)
  }
}

.hero .contenedor {
  position: relative;
  z-index: 1
}

/* ============================================================
     CÓMO FUNCIONA
     ============================================================ */
.como {
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem)
}

.pasos {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  width: min(100%, 900px);
  margin: 1.5rem auto 0;
}

.paso {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 1.25rem
}

.paso__icono {
  width: 184px;
  height: auto;
  justify-self: center;
  transition: transform .6s cubic-bezier(.25, .8, .25, 1)
}

/* al pasar el mouse por el paso, el ícono se eleva y crece apenas, despacio */
@media (hover: hover) {
  .paso:hover .paso__icono {
    transform: translateY(-6px) scale(1.04)
  }
}

.paso__texto {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.55;
}

.paso__texto .rojo {
  color: var(--rojo)
}

.logo-inline {
  display: inline-block;
  vertical-align: middle;
  height: 1.5em;
  width: auto;
  margin: 0 .15em
}

/* "miCoope" ocupa la parte de abajo de la imagen (arriba hay aire y "app"): se sube para alinearlo con el texto */
.logo-inline--micoope {
  height: 1.55em;
  position: relative;
  top: -.2em
}

/* la casita ocupa la parte de arriba: se sube para que "CoopeHogar" quede a la altura del texto */
.logo-inline--hogar {
  position: relative;
  top: -.3em
}

.logo-inline--encasa {
  height: 1em
}

.paso__texto a {
  color: var(--rojo);
  text-decoration: none;
  font-weight: 900
}

.paso__texto a:hover {
  text-decoration: underline
}

/* ============================================================
     PREMIOS
     ============================================================ */
.premios {
  padding: clamp(1rem, 3vw, 2.5rem) 0
}

.premios__sub {
  text-align: center;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  margin: 0 0 .5rem
}

.premios__img {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto
}

.premios__img img {
  width: 100%
}

.premios__monto {
  position: absolute;
  height: auto
}

/* al pasar el mouse por un monto, crece un poco y vuelve a su tamaño, suave.
   La clase la pone el JS y la saca al terminar, así la animación nunca se corta al salir el mouse */
.premios__monto.latiendo {
  z-index: 1;
  animation: monto-latido 1.2s cubic-bezier(.45, 0, .55, 1)
}

/* más lento y con aceleración/frenada suave en la subida y en la bajada */
@keyframes monto-latido {
  0%, 100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.06)
  }
}

/* ============================================================
     MARCAS PARTICIPANTES
     ============================================================ */
.marcas {
  padding: clamp(1rem, 3vw, 2rem) 0
}

.marcas__caja {
  margin: 1rem auto 0;
  height: var(--marcas-alto);
  /* tarjeta con borde apenas marcado y sombra suave en capas */
  border: 1px solid rgba(3, 58, 149, .1);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(3, 58, 149, .05),
    0 8px 24px -6px rgba(3, 58, 149, .12),
    0 24px 48px -16px rgba(3, 58, 149, .14);
  background: #fff;
  overflow: hidden;
  /* el scroll va en un div interno con este margen, así la barra no choca con las esquinas redondeadas */
  padding: 14px 6px 14px 0
}

.marcas__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(3, 58, 149, .22) transparent
}

.marcas__scroll:focus-visible {
  outline: none
}

/* foco de teclado: se marca la tarjeta entera */
.marcas__caja:has(.marcas__scroll:focus-visible) {
  outline: 3px solid var(--celeste);
  outline-offset: 2px
}

.marcas__scroll::-webkit-scrollbar {
  width: 6px
}

.marcas__scroll::-webkit-scrollbar-track {
  background: transparent
}

.marcas__scroll::-webkit-scrollbar-thumb {
  background: rgba(3, 58, 149, .22);
  border-radius: 8px
}

.marcas__scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(3, 58, 149, .4)
}

.marcas__caja img {
  width: 100%;
  height: auto;
  padding: 1rem
}

.marcas__ayuda {
  text-align: center;
  font-size: .85rem;
  color: var(--gris);
  margin: .5rem 0 0
}

/* ============================================================
     PREGUNTAS FRECUENTES
     ============================================================ */
.faq {
  padding: clamp(1rem, 3vw, 2rem) 0
}

.faq .titulo {
  /* font-size: clamp(1.2rem, 2vw, 1.6rem); */

  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 900;
  text-align: center;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;


}

.faq__lista {
  margin: 1rem auto 0;
  width: min(100%, 1000px)
}

.faq__item {
  border-bottom: 1px solid #dbe3f0
}

.faq__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 1.1rem .25rem;
  cursor: pointer;
  text-align: left;
  color: var(--rojo);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  -webkit-tap-highlight-color: transparent;
}

.faq__btn svg {
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform .3s;
  color: var(--azul)
}

.faq__btn[aria-expanded="true"] svg {
  transform: rotate(180deg)
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.faq__panel>div {
  overflow: hidden
}

.faq__panel p {
  margin: 0 .25rem 1.1rem;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.55
}

.faq__panel ul {
  margin: -.4rem .25rem 1.1rem;
  padding-left: 1.4rem;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.55
}

.faq__panel li::marker {
  color: var(--azul)
}

.faq__panel a {
  color: var(--azul);
  font-weight: 700;
  text-underline-offset: 2px;
  overflow-wrap: anywhere
}

.faq__panel a:hover {
  color: var(--rojo)
}

.faq__item.abierto .faq__panel {
  grid-template-rows: 1fr
}

/* ============================================================
     BASES Y CONDICIONES
     ============================================================ */
.bases {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0
}

.bases__lista {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: center;
  margin-top: 1rem
}

.btn-rojo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: var(--rojo);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  min-width: min(100%, 360px);
  font-size: .95rem;
  box-shadow: 0 3px 8px rgba(227, 0, 27, .3);
  transition: background .2s, transform .2s;
}

.btn-rojo:hover {
  background: var(--rojo-oscuro);
  transform: translateY(-1px)
}

.btn-rojo img {
  width: 22px;
  height: 22px
}

/* ============================================================
     LOGOS / ANIVERSARIO
     ============================================================ */
.aniversario {
  padding: clamp(1.5rem, 3vw, 3rem) 0 1rem
}

.aniversario__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 5rem);
}

.aniversario__grid img {
  height: auto;
  width: clamp(150px, 18vw, 230px)
}

.aniversario__link {
  display: block;
  line-height: 0
}

/* torta: mismo efecto que los íconos de "¿Cómo participo?" */
.aniversario__grid img.torta {
  transition: transform .6s cubic-bezier(.25, .8, .25, 1)
}

@media (hover: hover) {
  .aniversario__grid img.torta:hover {
    transform: translateY(-6px) scale(1.04)
  }
}

/* la casita ocupa la parte de arriba del logo: se sube para que "CoopeHogar" quede a la altura de "La Coope en Casa" */
.aniversario__link:first-child img {
  transform: translateY(-20%)
}

/* .aniversario__grid img.torta {
  height: clamp(200px, 20vw, 280px)
} */

/* ============================================================
     FRAUDE
     ============================================================ */
.fraude {
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 3rem)
}

.fraude__grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  align-items: center;
  width: min(100%, 900px);
  margin: 0 auto;
}

.fraude__grid>img {
  width: 120px
}

.fraude__texto {
  margin: 0 0 1rem;
  color: var(--gris);
  font-size: .95rem;
  line-height: 1.5
}

.fraude__texto strong {
  color: var(--azul)
}

.fraude .btn-rojo {
  min-width: 0;
  font-size: .85rem;
  padding: .65rem 1.4rem
}

/* ============================================================
     FOOTER
     ============================================================ */
.footer {
  padding: 1.5rem 0 3rem
}

/* mismo ancho que la lista de preguntas frecuentes */
.footer .contenedor {
  width: min(100% - 2rem, 1000px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap
}

.footer__titulo {
  margin: 0 0 .5rem;
  font-weight: 900;
  font-size: 1.05rem
}

.footer__redes {
  display: grid;
  grid-template-columns: auto auto;
  gap: .4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
  font-weight: 700;
}

.footer__redes a {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none
}

.footer__redes a:hover {
  text-decoration: underline
}

.footer__redes img {
  width: 24px;
  height: 24px
}

.footer__logo-link {
  display: block;
  line-height: 0
}

.footer__logo {
  height: 54px;
  width: auto
}

/* ============================================================
     GLOBO FLOTANTE
     ============================================================ */
.globo-flotante {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: calc(clamp(.75rem, 2vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: clamp(84px, 9vw, 120px);
  opacity: 0;
  transform: translateY(24px) scale(.6);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.4, .64, 1);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25));
}

/* globo azul: arriba a la izquierda, justo debajo de la barra de navegación; entra desde arriba */
.globo-flotante--izq {
  right: auto;
  bottom: auto;
  left: clamp(.75rem, 2vw, 1.5rem);
  top: calc(var(--header-h) + clamp(.75rem, 2vw, 1.5rem));
  transform: translateY(-24px) scale(.6)
}

.globo-flotante.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto
}

.globo-flotante a {
  display: block
}

.globo-flotante img {
  transition: transform .25s
}

.globo-flotante a:hover img {
  transform: scale(1.06)
}

/* ============================================================
     POPUP APPS miCoope
     ============================================================ */
.popup-apps {
  padding: 0;
  border: 0;
  background: transparent;
  /* el ancho también se limita por el alto para que entre en pantallas bajas */
  width: min(90vw, 88vh, 480px);
  max-width: none;
  max-height: none;
  overflow: visible
}

.popup-apps::backdrop {
  background: rgba(3, 20, 60, .6)
}

.popup-apps[open] {
  animation: popup-entrar .3s cubic-bezier(.34, 1.4, .64, 1)
}

@keyframes popup-entrar {
  from {
    opacity: 0;
    transform: scale(.85)
  }
}

.popup-apps img {
  width: 100%
}

/* Botón invisible sobre la "X" dibujada en la imagen */
.popup-apps__cerrar {
  position: absolute;
  top: 1.5%;
  right: 4%;
  width: 13%;
  height: 11%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer
}

.popup-apps__cerrar:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: -4px
}

/* ============================================================
     RESPONSIVE — TABLET
     ============================================================ */
@media (max-width:1024px) {
  .hero__grid {
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 1rem
  }

  .hero__promo, .hero__fechas {
    width: 100%
  }

  .hero__globo {
    width: 85%
  }

  .paso {
    grid-template-columns: 160px 1fr
  }

  .paso__icono {
    width: 150px
  }

  :root {
    --marcas-alto: 540px
  }
}

/* ============================================================
     RESPONSIVE — MOBILE
     ============================================================ */
@media (max-width:768px) {
  :root {
    --header-h: 56px;
    --marcas-alto: 420px
  }

  .logo-header img {
    height: 34px
  }

  /* menú a la izquierda y logo centrado */
  .header .contenedor {
    justify-content: flex-start
  }

  .logo-header {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex
  }

  .header {
    position: sticky
  }

  .header .contenedor {
    position: relative
  }

  .hamburguesa {
    display: block;
    order: -1;
    width: 44px;
    height: 44px;
    padding: 14px 10px;
    margin-left: -10px
  }

  .hamburguesa span {
    height: 2px;
    margin: 5px 0
  }

  .hamburguesa span:first-child {
    margin-top: 0
  }

  .hamburguesa span:last-child {
    margin-bottom: 0
  }

  .hamburguesa[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
  }

  .hamburguesa[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--azul);
    flex-direction: column;
    gap: 0;
    padding: .5rem 1rem 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
    z-index: -1;
    /* se "despliega" como una cortina desde la barra */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .45s cubic-bezier(.65, 0, .35, 1), visibility 0s .45s;
  }

  .nav.abierto {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .45s cubic-bezier(.65, 0, .35, 1), visibility 0s
  }

  /* los ítems entran de a uno, deslizándose desde la izquierda */
  .nav li {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .25s, transform .25s
  }

  .nav.abierto li {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.4, .64, 1)
  }

  .nav.abierto li:nth-child(1) {
    transition-delay: .12s
  }

  .nav.abierto li:nth-child(2) {
    transition-delay: .18s
  }

  .nav.abierto li:nth-child(3) {
    transition-delay: .24s
  }

  .nav.abierto li:nth-child(4) {
    transition-delay: .30s
  }

  .nav.abierto li:nth-child(5) {
    transition-delay: .36s
  }

  .nav a {
    display: block;
    padding: .9rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    font-size: 1.1rem;
    background: none
  }

  .nav a:focus-visible {
    background-color: rgba(255, 255, 255, .12)
  }

  .hero {
    padding: 1.5rem 0 1rem;
    /* fondo vertical: ocupa todo el ancho y el resto sigue en blanco */
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 120px), #fff 100%),
      #fff url("../img/hero-mb.png") center top / 100% auto no-repeat
  }

  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem
  }

  .hero__col {
    display: contents
  }

  .hero__fechas {
    order: 1;
    width: min(70%, 230px)
  }

  .hero__promo-mb {
    display: block;
    order: 2;
    width: min(80%, 300px)
  }

  .hero__texto {
    order: 3;
    width: 100%
  }

  /* en mobile no se muestran los globos (promo azul, globo rojo y el flotante) */
  .hero__promo, .hero__globo, .globo-flotante {
    display: none
  }

  .paso {
    grid-template-columns: 1fr;
    gap: .5rem;
    text-align: left
  }

  .paso__icono {
    width: 170px;
    justify-self: center
  }

  .paso__texto {
    font-size: 1.2rem;
    padding-inline: .25rem;
    text-align: justify;
    text-align-last: left;
    line-height: 1.45
  }

  /* botón de bases con texto largo: más compacto para que no quede mucho más alto que los otros */
  .bases .btn-rojo {
    width: min(100%, 360px)
  }

  .btn-rojo--largo {
    text-align: center;
    font-size: .82rem;
    line-height: 1.2;
    padding: .5rem 1rem;
    gap: .5rem
  }

  .btn-rojo--largo img {
    width: 20px;
    height: 20px
  }

  /* el PNG tiene ~10% de espacio transparente a la izquierda: se corre para centrar el dibujo */
  .premios__img {
    transform: translateX(-5%)
  }

  /* con el logo en el medio, justificar abre huecos grandes entre palabras */
  .paso__texto--izq {
    text-align: left
  }

  .paso__texto--izq a {
    white-space: nowrap
  }

  /* elementos que solo van en escritorio (saltos de línea en los pasos, ":" de marcas) */
  .solo-desktop {
    display: none
  }

  .marcas__caja img {
    padding: .5rem
  }

  /* torta arriba y los dos logos juntos en una fila debajo */
  .aniversario__grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 1.25rem 2rem
  }

  .aniversario__grid img.torta {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(55%, 190px)
  }

  .aniversario__link img {
    width: 100%
  }

  /* anchos distintos para que ambos logos se vean del mismo tamaño */
  .aniversario__link:first-child {
    width: min(30vw, 110px)
  }

  .aniversario__link:last-child {
    width: min(40vw, 150px)
  }

  .fraude__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.25rem
  }

  .fraude {
    padding-top: 2.5rem
  }

  .fraude__grid>img {
    width: 110px;
    margin: 0 auto
  }

  .fraude__texto {
    color: var(--azul);
    font-size: 1rem;
    line-height: 1.35;
    /* bloque angosto y renglones parejos, como en el diseño */
    max-width: 17rem;
    margin: 0 auto 1.5rem;
    text-wrap: balance
  }

  .fraude .btn-rojo {
    display: flex;
    width: 100%;
    max-width: 21rem;
    margin-inline: auto;
    font-size: 1rem;
    padding: .95rem 1.5rem
  }

  .footer {
    padding-bottom: 1.5rem
  }

  .footer .contenedor {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .hero__globo img, .premios__monto.latiendo {
    animation: none
  }

  .paso:hover .paso__icono, .hero__texto:hover, .aniversario__grid img.torta:hover {
    transform: none
  }

  .globo-flotante, .faq__panel, .nav, .nav.abierto, .nav li, .nav.abierto li, .faq__btn svg {
    transition: none
  }
}