:root {
  --clr-verde: rgb(109, 110, 112); /* accent-500 */
  --clr-azul-base: rgb(32, 68, 144); /* accent-400 */
  --clr-azul-claro: rgb(125,196,236);
  --clr-azul-oscuro: rgb(39,47,115);
  --clr-blanco: rgb(255, 255, 255); /* accent-100 */
  --clr-gris-claro: rgb(31, 132, 146); /* accent-300 */
--clr-verde-navidad: rgb(0,176,80);
--clr-rojo:red;
  --clr-negro-30: rgb(30,30,30);
  --clr-negro: black;

  --clr-neutral-100: var(--clr-blanco); /* neutral-400 */
  --clr-neutral-200: var(--clr-gris-claro); /* neutral-400 */
  --clr-neutral-900: var(--clr-negro-30); /* neutral-400 */

  --ff-primary: 'Neo Sans Pro', sans-serif;

  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);

  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  --fs-300: 0.8125rem;
  --fs-400: 0.875rem;
  --fs-500: 0.9375rem;
  --fs-600: 1rem;
  --fs-700: 1.875rem;
  --fs-800: 2.5rem;
  --fs-900: 3.5rem;

  --fs-body: var(--fs-400);
  --fs-primary-heading: var(--fs-800);
  --fs-secondary-heading: var(--fs-700);
  --fs-nav: var(--fs-900);
  --fs-button: var(--fs-300);

  --size-100: 0.25rem;
  --size-200: 0.5rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-700: 3rem;
  --size-800: 4rem;
  --size-900: 5rem;
}

.button2 {
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  border-radius: 100vmax;
  padding: 1.25em 2.5em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  color: var(--clr-neutral-100);
  background-color: var(--clr-rojo);
  box-shadow: 0 1.125em 1em -1em var(--clr-verde);
}

.button2[data-type="inverted"] {
  background-color: var(--clr-neutral-100);
  color: var(--clr-azul-base);
}

.button2 {
  text-decoration: none;
}

.justify-self-end-md a {
  text-decoration: none;
}

.button2[data-shadow="none"] {
  box-shadow: none;
}

.button2:hover,
.button2:focus-visible {
  background-color: var(--clr-gris-claro);
}

.button2[data-type="inverted"]:hover,
.button2[data-type="inverted"]:focus-visible {
  background-color: var(--clr-neutral-100);
  color: var(--clr-gris-claro);
}

.button509navidad {
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  border-radius: 100vmax;
  padding: 1.25em 2.5em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  color: var(--clr-negro);
  background-color: var(--clr-verde-navidad);
  box-shadow: 0 1.125em 1em -1em var(--clr-verde);
}

.button509navidad[data-type="inverted"] {
  background-color: var(--clr-neutral-100);
  color: var(--clr-azul-base);
}

.button509navidad {
  text-decoration: none;
}

.justify-self-end-md a {
  text-decoration: none;
}

.button509navidad[data-shadow="none"] {
  box-shadow: none;
}

.button509navidad:hover,
.button509navidad:focus-visible {
  background-color: var(--clr-gris-claro);
}

.button509navidad[data-type="inverted"]:hover,
.button509navidad[data-type="inverted"]:focus-visible {
  background-color: var(--clr-neutral-100);
  color: var(--clr-gris-claro);
}

.titulo {
margin-bottom: .5em;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1px;
  grid-auto-rows: minmax(5em, auto);
  text-align: left;
  align-self: left;
  align-items: left;
  margin-top: 1em;
}

.wrapper > a {
  align-items: left;
  margin: 1em;
  text-decoration: none;
}

.wrapper > a > div {

font-size: 1.5em;
font-weight: 500;
/* box-shadow: 0px 0px 0em .25em rgb(30,30,30);
padding-block: .8em;
padding-left: .5em;
padding-right: .5em;
border-radius: .5em;
background: white;*/
}

.wrapper > * > * > * > * {

  font-size: 2.5em;
}

.one {
  grid-column: 1;
  grid-row: 1;} 
.two {
  grid-column: 2;
  grid-row: 1;}
.three {
  grid-column: 1;
  grid-row: 2;}
.four {
  grid-column: 2;
  grid-row: 2;}
.five {
  grid-column: 1;
  grid-row: 3;}
.six {
  grid-column: 2;
  grid-row: 3;}
.seven {
  grid-column: 1;
  grid-row: 4;}
.eight {
  grid-column: 2;
  grid-row: 4;}
.nine {
  grid-column: 1;
  grid-row: 5;}
.ten {
  grid-column: 2;
  grid-row: 5;}
.eleven {
  grid-column: 1;
  grid-row: 6;}
.twelve {
  grid-column: 2;
  grid-row: 6;}  
  .thirdteen{
    grid-column: 1;
    grid-row: 7;
  }  
  .fourteen{
    grid-column: 2;
    grid-row: 7;
  }

.titulo {
  color: var(--clr-negro);
  font-style: italic;
  font-size: 4em;
  letter-spacing: -.1rem;
}

.subtitulo {
  font-size: 2em;
  margin-top: -.5rem;
  margin-bottom: -1.6rem;
  color: var(--clr-verde)
}

@media (max-width: 30em) {
  .titulo {
      color: var(--clr-negro);
      font-style: italic;
      font-size: 3em;
      margin-top: -1rem;
      letter-spacing: -.1rem;
      line-height: 1.3;
  }
  
  .subtitulo {
      font-size: 1.7em;
      margin-top: 1rem;
      margin-bottom: -5rem;
  }
}

@media (max-width: 50em) {

.mobile-nav-toggle > * > * {
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0em;
  width: 3em;
}

.mobile-nav-toggle > * > *:hover{
  margin-left: auto;
  margin-right: auto;
  margin-top: 0em;
  width: 3em;
  box-shadow: 1px 1px 10px var(--clr-azul-base);
}

}

@media (max-width: 65em) {

  .titulo {
    margin-top: auto;
    margin-bottom: 2em;
  }

  .wrapper {
    display: block;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1px;
    grid-auto-rows: minmax(100px, auto);
    align-items: center;


  }
  
  .wrapper > a {
    font-size: 1em;
    text-decoration: none;
    font-weight: 400;
    margin-top: 0.3em;
   }

   .wrapper > a > div {
  /* box-shadow: 0px 0px 0em .25em rgb(30,30,30);
    padding-block: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    border-radius: .5em;*/
    text-align: center;
    margin: auto;
    line-height: 1.2;
    padding-left: 1em;
    padding-right: 1em;
  }

}