@import url('https://fonts.googleapis.com/css2?family=Belleza&family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --clr-dark: #050505;
  --clr-alt: #121116;
  --clr-bright: #fafafa;
  --clr-card: #18161f;
  --clr-price: #e0e0e0;
  --clr-pri: #39235c;
	--clr-acc: #402768;
	--clr-acc-h: #51288E;
  --clr-tit: #b5a4cf;
	--clr-pridark: #1b112c;
  --clr-cbu: #1b112c;
  /* --clr-liner: #303030; */
  --clr-liner: #201B26;
  --clr-footer: #050505;
  --clr-a: #8f5ae3;
  --clr-ah: #702edc;
  --padx: 12%;
  --pady: 4rem;
  --pad-sec: 2rem 12%;
  --wp-ico: 3.2rem;
  --ff-btn: "Cinzel", sans-serif;
  --ff-title: "Cinzel", serif;
  --ff-alttitle: "DM Serif Display", serif;
  --ff-p: "Belleza", sans-serif;
  --ff-phi: "Philosopher", serif;
  --fnt-h1: clamp(2.2rem, 3vw, 3.2rem);
  --fnt-h2: clamp(1.8rem, 2.8vw, 2.6rem);
  --fnt-h3: clamp(1.6rem, 2.5vw, 2.4rem);
  --fnt-h4: 1.8rem;
  --fnt-h5: 1.4rem;
  --fnt-p: clamp(1.2rem, 1.8vw, 1.5rem);
  --fnt-btn: clamp(1.1rem, 1.6vw, 1.6rem);
  --btn-pad: 1rem 1.5rem;
  --brad: 8px;
  --fz: 16px;
  --card-height: 240px;
  --card-width: 360px;
  --menu-width: 22px;
  --menu-height: 24px;
  --gap: 2rem;
  --minigap: 1rem;
}

::selection {
  /* color: black; */
  background: var(--clr-acc);
}

@media (max-width: 1080px) {
  :root {
    --padx: 10%;
    --gap: 3rem;
    --btn-pad: 1rem;
  }
}

@media (max-width: 768px) {
  :root {
    --padx: 8%;
    /* --fz: 10px; */
    --gap: 4rem;
  }
}

html, body {
  /* background: var(--clr-dark); */
  background: linear-gradient(#1B112C, var(--clr-dark) 480px);
  color: var(--clr-bright);
  font-size: var(--fz);
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}

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

a {
  font-family: var(--ff-p);
}

a, button {
  cursor: pointer;
}

ul, li, a {
  text-decoration: none;
  list-style-type: none;
  color: inherit;
}

h1 {
  font-size: var(--fnt-h1);
  font-weight: 600;
  font-family: var(--ff-title);
  margin-bottom: 2rem;
}

h2 {
  font-size: var(--fnt-h2);
  font-weight: 400 !important;
  margin-bottom: 1.7rem;
}

h3 {
  font-size: var(--fnt-h3);
  color: var(--clr-tit);
  margin-bottom: 1.8rem;
}

h4 {
  font-size: var(--fnt-h4);
  margin-bottom: 1.4rem;
}

h5 {
  font-size: var(--fnt-h5);
  margin-bottom: 1.4rem;
}

p, li {
  font-size: var(--fnt-p);
}

h2, h3, h4, h5 {
  font-family: var(--ff-alttitle);
}

p, li, ul {
  font-family: var(--ff-p);
}

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

.hidden {
  display: none;
}

#confirmationCont {
  display: none;
}

.fw-600 {
  font-weight: 600;
}

.txtc {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.resp {
  max-width: 100%;
  height: auto;
}

.resph {
  width: auto;
  max-height: 100%;
}

.flexo {
  display: flex;
}

.jcstart {
  justify-content: flex-start;
}

.jccenter {
  justify-content: center;
}

.jcend {
  justify-content: flex-end;
}

.jcsb {
  justify-content: space-between;
}

.aistart {
  align-items: flex-start;
}

.aicenter {
  align-items: center;
}

.aiend {
  align-items: flex-end;
}

.unouno > * {
  flex: 1;
}


.gap {
  gap: var(--gap);
}

.minigap {
  gap: var(--minigap);
}

.spacer {
  height: 2rem;
}

.minispacer {
  height: 1rem;
}

.p-mb p {
  margin-bottom: 1rem;
}

.liner {
  width: 100%;
  height: 2px;
  background-color: var(--clr-liner);
  margin: 1rem 0;
}

.underline {
  position: relative;
  margin-bottom: 1rem;
}

.underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9rem;
  height: 1px;
  background: var(--clr-bright);
}

.underline.unctr::after {
  width: 12rem;
  max-width: 24vw;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.underh1 {
  position: relative;
}

.hover-color {
  transition: color 150ms;
}

.hover-color:hover {
  color: var(--clr-a);
}

.pady {
  padding-top: var(--pady);
  padding-bottom: var(--pady);
}

.padx {
  padding-left: var(--padx);
  padding-right: var(--padx);
}

.fade-in1b {
  animation: fadeInB 1200ms;
}

.delay1 {
  animation: delay 2s;
}

.delay2 {
  animation: delay 3s;
}

.delay3 {
  animation: delay 4s;
}

.boxhover:hover, .boxhover:focus {
  box-shadow: 0 0 24px var(--clr-acc-h);
  transition: box-shadow 350ms ease-out;
}

.imgto {
  transition: filter 150ms ease-out;
}

.imgfilter:hover .imgto {
	filter: brightness(1.15) contrast(1.15);
}


@keyframes fadeInB {
  0% { opacity: 0; transform: translate(0, 150px); }
  /* 36% { opacity: 0; transform: translate(0, 150px); } */
  100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes delay {
  0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInBg {
  0% { opacity: 0; }
  100% { opacity: .8; }
}

.column {
  flex-direction: column;
}

.button {
  font-family: var(--ff-btn);
  font-size: var(--fnt-btn);
  color: var(--clr-bright);
  font-weight: 600;
  border-radius: 4px;
  padding: var(--btn-pad);
  background: var(--clr-acc);
  transition: background ease-out 150ms, box-shadow 150ms ease-out;
  /* text-transform: uppercase; */
  letter-spacing: 1.2px;
  border: none;
  text-align: center;
  /* white-space: nowrap; */
}

.button:hover,
.button:focus {
  box-shadow: 0 0 24px var(--clr-acc-h);
  background: var(--clr-acc-h);
}

.buttonAlt {
  background: #121212aa;
  outline: solid 3px #fafafa;
  outline-offset: -3px;
  transition: outline ease-out 150ms, background ease-out 150ms;
}

.buttonAlt:hover, .buttonAlt:focus {
  background: #020202;
  outline: solid 3px var(--clr-acc-h);
}

.whatsapp {
  width: var(--wp-ico);
  height: var(--wp-ico);
  background: #25D366;
  border-radius: 50px;
  padding: 10px;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  box-shadow: 0 0 12px rgba(0,0,0,24%);
  transition: all ease-out 200ms;
  z-index: 9;
}

.whatsapp:hover {
  background: #10b133;
  transform: scale(110%);
}

.brad {
  border-radius: var(--brad);
  overflow: hidden;
}


/* header */

#inicio {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: var(--gap);
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  z-index: 2;
}

#inicio::before {
  content: "";
  position: absolute;
  top: 0;
  /* right: 0; */
  /* bottom: 0; */
  left: 0;
  width: 100%;
  height: 100%;
  background: 
        linear-gradient(transparent, var(--clr-dark)),
        url('./img/bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: .8;
  animation: fadeInBg 7s;
  z-index: 0;
}

/* #inicio h1 { */
#titulo-inicio {
  	font-size: clamp(2.4rem, 3.6vw, 4.2rem) !important;
    font-family: var(--ff-title);
    font-weight: 500;
}

#h1-inicio {
  font-size: .1px;
  color: transparent;
  margin: 0;
  padding: 0;
}

#inicio * {
  position: relative;
}

#inicio p {
  margin-bottom: 2rem;
  font-size: 2rem;
}

#inicio span {
  color: var(--clr-acc);
}

#header .btnCont {
  gap: 2rem;
}

@media (max-width: 360px) {
  #header .btnCont {
    flex-direction: column;
  }
}

/* navbar */

#navbar {
  display: flex;
  padding: 0 var(--padx);
  /* padding: 0.4rem 12%; */
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
  transition: background ease-in-out 250ms, height ease-out 250ms, backdrop-filter 250ms, box-shadow 250ms;
}

#nav-full {
  display: flex;
  text-transform: uppercase;
}

#nav-full li {
  margin-left: 1rem;
  font-weight: 600;
  font-family: var(--ff-btn);
  letter-spacing: 1.2px;
  font-size: 1rem !important;
}

#navbar .menuH {
  transition: text-shadow 150ms;
}

#navbar .button {
  font-size: 1rem !important;
  padding: .751rem 1.4rem;
}

#navbar .menuH:hover, .menuH:focus {
  text-shadow: 0 0 16px white;
}

.navbar.nav-active {
  background: #00000066;
  height: 60px !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 18px #000000;
}

.logo {
  width: 2.2rem;
  height: 2.2rem;
  transition: opacity ease-out 150ms, width ease-out 150ms, height ease-out 150ms;
  z-index: 999;
}

.logo:hover, .logo:focus {
  opacity: .8;
}

.logo.nav-active {
  width: 2rem;
  height: 2rem;
}

.menu-button {
  display: none;
  position: relative;
  flex-direction: column;
  width: var(--menu-width);
  height: var(--menu-height);
  cursor: pointer;
  z-index: 1000;
}

.menu-button span {
  width: 100%;
  height: 3px;
  background-color: white;
  margin-bottom: 5px;
  transition: transform 150ms, width 150ms;
}

.menu-button.open span:nth-of-type(1) {
  transform: rotate(45deg);
  transform-origin: 0%;
}

.menu-button.open span:nth-of-type(2) {
  width: 0;
}

#menu-button.open span:nth-of-type(3) {
  transform: rotate(-45deg);
  transform-origin: 0%;
}

.menu-mobile {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 0;
  background-color: var(--clr-liner);
  left: 50%;
  top: 0px;
  opacity: 0;
  transform: translate(-50%, 0);
  text-align: center;
  transition: top ease-out 250ms, height ease-out 250ms, opacity ease-out 250ms;
  z-index: 998;
}

.menu-mobile.open div {
  height: 80px;
  background: var(--clr-acc);
  transition: height ease-out 250ms;
}

.navbar.navbar.nav-active .menu-mobile.open div {
  top: 0px;
  height: 60px;
}

@media (max-width: 1480px) {
  #nav-full {
    display: none;
  }
  #menu-button {
    display: flex;
  }
  .menu-mobile.open {
    height: max-content;
    /* top: -20px; */
    opacity: 1;
  }
  .navbar.nav-active {
    background: var(--clr-acc);
    height: 60px !important;
    backdrop-filter: none;
    box-shadow: 0 0 18px #000000;
  }
  .menu-mobile li {
    padding: 12px;
  }
  .menu-mobile li a {
    padding: 12px;
  }
}


/* recursos */

#recursos.padx {
  background: 
    linear-gradient(var(--clr-dark)10%, #05050555, var(--clr-dark) 90%),
    url('./img/textura-sky.jpg');
}

#recursos h2 {
  margin-bottom: 0;
}

.reciconCont {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.recInfo {
  /* min-height: 200px; */
  display: grid;
  align-items: center;
  grid-template-columns: 70% 1fr;
  gap: 2rem;
}

.recIcon {
  background: var(--clr-alt);
  height: 80px;
  min-width: 80px;
  width: 80px;
}

.reciconCont .btnCont {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--clr-acc);
  border-radius: var(--brad);
}

.reciconCont .btnCont a {
  font-family: var(--ff-btn);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 28px 1rem;
}

#recursos .breath {
  max-width: 340px;
}

.breath {
  animation: 1800ms infinite alternate ease-in-out breath;
}

@keyframes breath {
  0% { opacity: .81; }
  50% { opacity: .51; }
  100% { opacity: .81; }
}

@keyframes breathlow {
  0% { opacity: .21; }
  50% { opacity: .31; }
  100% { opacity: .21; }
}

@media (max-width: 1080px) {
  .recInfo {
    grid-template-columns: 50% 1fr;
  }
}

@media (max-width: 640px) {
  .to-column-640 {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .recInfo {
    grid-template-columns: 1fr;
  }
  .to-column-480 {
    flex-direction: column;
  }
}


/* blog */

.iblogCards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

/* @media (max-width: 830px) { */
/*   .iblogCards { */
/*     display: block; */
/*   } */
/*   .iblogcard { */
/*     margin-bottom: 2rem; */
/*   } */
/* } */

@media (max-width: 920px) {
  .iblogCards {
    grid-template-columns: 1fr;
  }
  .iblogcard {
    margin: 0 auto;
  }
}

.iblogcard {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--clr-card);
  border-radius: var(--brad);
  box-shadow: 0 0 18px rgba(0,0,0,0.6);
  overflow: hidden;
  max-width: var(--card-width);
}

.iblogimgcont {
  height: var(--card-height);
  width: 100%;
  /* min-width: var(--card-height); */
  overflow: hidden;
  position: relative;
}

.iblogimgcont img {
  /* max-height: 100%; */
  /* max-width: unset; */
  /* width: auto; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.iblogcardInfo h5:hover, .iblogcardInfo h5:focus {
  color: var(--clr-acc-h);
}

.iblogcardInfo h5 {
  color: var(--clr-tit);
  transition: color 150ms ease-out;
}

.iblogcardInfo {
  padding: 1rem 2rem;
  /* display: grid; */
  /* grid-template-rows: auto 1fr auto; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.iblogcardDesc {
  font-size: 1.4rem !important;
}

/* .iblogcardInfo > .blogbtnCont { */
/*   align-self: end; */
/*   justify-self: center; */
/* } */

.iblogcardInfo > .blogbtnCont a {
  white-space: pre-line;
  text-align: center;
}

.vermas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.vermas div:first-child {
  width: 8rem;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.vermas div:first-child img {
  transition: transform 150ms ease-out;
}

.vermas div:first-child img:hover {
  transform: rotate(8deg);
}

/* banner curso */

#curso {
  background: 
    radial-gradient(#00000055 30%, #43226666),
    linear-gradient(to right, #00000077 50%, #05050599 80%),
    url('./img/textura-sky.jpg')
  ;
  background-size: cover;
  background-position: 50% 80%;
  position: relative;
  overflow: hidden;
}

#curso h2 {
  font-family: var(--ff-title);
  font-size: var(--fnt-h1);
  font-weight: 600 !important;
}

#curso p {
  margin-top: .21rem;
}

#curso > div:last-child > * {
  width: 70%;
}

.locoInicio {
  position: absolute;
  right: 8%;
  bottom: 0;
}

.ruedabg {
  position: absolute;
  left: -10%;
  top: -50%;
  width: 430px;
}

.ruedabg img {
  animation: rueda infinite linear 60s, breathlow infinite linear 2s;
}

@keyframes rueda {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 1300px) {
  .ruedabg {
    width: 30vw;
  }
}

@media (max-width: 678px) {
  .ruedabg {
    width: 33vw;
    top: -30%;
  }
}
/* #curso::after { */
/*   content: ''; */
/*   background: url('./img/loco-b.png'); */
/*   background-size: contain; */
/*   background-repeat: no-repeat; */
/*   background-position: right; */
/*   width: 180px; */
/*   height: 100%; */
/*   /1* right: var(--padx); *1/ */
/* } */

@media (max-width: 720px) {
  #curso > div:last-child > * {
    width: 55%;
  }
  .locoInicio {
    right: 0%;
  }
}
@media (max-width: 520px) {
  .locoInicio img {
    width: 70%;
    margin: 0 0 0 auto;
  }
}

/* sobremi */

#sobremi {
  /* background: var(--clr-pridark); */ 
  background: 
    linear-gradient(var(--clr-dark) 0%, var(--clr-pridark) 40%)
  ;
}

#sobremi > div {
  align-items: center;
}

#sobremi > div > div:first-child {
  min-width: 30%;
}

@media (max-width: 680px) {
  #sobremi > div {
    flex-direction: column;
  }
}


/* lecturas */

#lecturas .cards {
  justify-content: space-between;
}

#lecturas > .cards > div {
  flex: 1;
}

#lecturas .card {
  max-width: 800px;
  background-image: linear-gradient(transparent 25%, #050505bb 60%), url('./img/ermit.jpg');
  background-size: cover;
  background-position: center;
  transition: filter 250ms ease-out, box-shadow 350ms;
}

#lecturas .card:last-child {
  background-image: linear-gradient(transparent 25%, #050505bb 60%), url('./img/lecturas-pp.jpg');
}

#lecturas .card:hover, #lecturas .card:focus {
	filter: brightness(1.15) contrast(1.15);
}

@media (max-width: 768px) {
  #lecturas .cards {
    flex-direction: column;
  }
}



/* cards */

.cards {
  gap: 2rem;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cards > div {
  flex: 0 1 340px;
  background: var(--clr-card);
  border-radius: var(--brad);
  box-shadow: 0 0 18px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.cards > div:empty {
  height: 0;
}

.card {
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
}

.cardImg {
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}

.cardImg img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* padding: 1rem 1rem 2rem; */
  padding: 1rem;
  gap: var(--minigap);
  text-align: center;
  height: 100%;
}

.cardInfo div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cardTitle {
  font-size: clamp(1.2rem, 1.8vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
}

.cardDecs {
  font-size: 1.6rem;
}

.cardPrice {
  font-family: var(--ff-phi);
  font-size: clamp(1.4rem, 2.0vw, 2.2rem);
  font-weight: 600;
  text-align: center;
  align-self: center;
  color: var(--clr-price);
}

.cardExtra {
  justify-content: flex-start;
}

.cardInfo .btnCont {
  display: flex;
  justify-content: center;
}

.cardPrice span {
  font-size: 1.4rem;
  color: #aaa;
}

.monedaCont {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
}

.monedaCont span:hover {
  box-shadow: 0 0 8px var(--clr-tit);
}

#ars, #usd {
  cursor: pointer;
  outline: 2px solid var(--clr-acc-h);
  outline-offset: -2px;
  border-radius: 25px 0 0 25px;
  padding: 8px;
  font-family: var(--ff-p);
  font-weight: 600;
  background-color: var(--clr-pridark);
  z-index: 999;
  transition: background-color 100ms, outline 150ms;
  color: var(--clr-tit);
}

#usd {
  border-radius: 0 25px 25px 0;
}

@media (max-width: 920px) {
  .cards > div {
    flex: 0 1 240px;
  }
}

@media (max-width: 610px) {
  .cards {
    gap: 1rem;
  }
  .cards > div {
    flex: 0 1 190px;
  }
}

@media (max-width: 480px) {
  .cards > div {
    flex: 0 1 140px;
  }
}

.glow {
  outline: 2px solid var(--clr-tit) !important;
  background-color: var(--clr-acc) !important;
  color: white !important;
}





.slider {
  padding: 8px;
}



/* contacto */

#contacto {
  background: #100020;
}

.contacto {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 4rem;
  border-radius: var(--brad);
  background: linear-gradient(65deg, var(--clr-pridark), var(--clr-acc-h));
}

.contacto > * {
  flex: 1;
}

@media (max-width: 1280px) {
  .contacto {
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .contacto {
    padding: 2rem;
  }
}

.contacto div:nth-of-type(2) {
  width: 100%;
}

.contacto div p {
  font-size: 1.4rem;
  text-align: center;
}

.contacto div p:first-of-type {
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight: 600;
}

.contactoCont {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.contactIco img {
  width: 3rem;
  height: auto;
  transition: translate ease-out 200ms;
}

.contactIco img:hover, .contactIco img:focus {
  translate: 0 -4px;
}

input, textarea {
  margin-top: 1rem;
}

.form input:not(.submit), .form textarea {
  width: 100%;
  margin-bottom: 2rem;
  background: #100020;
  color: white;
  border: 0;
  outline: none;
  padding: 1rem;
  border-radius: 12px;
}

.form input, .form label, .form textarea {
  font-size: 1.2rem;
  font-family: var(--ff-p);

}

textarea {
  height: 180px;
  width: 100%;
  resize: none;
}

::placeholder {
  font-style: italic;
}

#submit {
  cursor: pointer;
  font-family: var(--ff-btn);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.submitCont {
  display: flex;
  justify-content: center;
}


/* footer */

.footer {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
}

.footer > * {
  flex: 1;
}

.logo-f a {
  transition: opacity ease-out 150ms;
}

.logo-f img {
  width: 100px;
}

.logo-f a:hover {
  opacity: .8;
}

.logo-f p {
  font-weight: 600;
}

.footer div:nth-of-type(2) ul li{
  font-family: var(--ff-p);
  font-weight: 600;
  line-height: 2;
  text-align: left;
  font-size: 1.2rem;
  text-transform: uppercase;
  transition: all linear 100ms;
}

.footer div:nth-of-type(2) ul li:hover, .footer div:nth-of-type(2) ul li:focus {
  color: var(--clr-acc-h);
}
  
.footer div:nth-of-type(3) div a img {
  width: 2rem;
}

.copy {
  text-align: center;
  padding: 1rem;
  background: linear-gradient(90deg, #050505, #120505, #050505);
}

.copy p {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .footer div:nth-of-type(2) ul li {
    text-align: center;
  }
}

#cosoCont {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.coso {
  height: 480px;
  width: 480px;
  background-color: grey;
}


#lecturasPag, #blog {
  text-align: center;
  padding-top: 4rem;
  background: url('./img/bg-lecturas.jpg');
  background-size: contain !important;
}

#lecturasPag h3 {
  margin-bottom: 1rem;
}

.cbu {
  height: 0;
  overflow: hidden;
}

.cbu-cont {
  background: var(--clr-cbu);
  margin-bottom: 2rem;
}

.cbu-cont span {
  font-weight: bold;
  margin-left: .5rem;
}

.cbu.open {
  height: min-content;
}

.paypal {
  display: none;
}

.transButtons {
  gap: 1rem !important;
}

.transButtons a {
  font-size: clamp(1.0rem, 1.4vw, 1.4rem);
}

.transButtons.showHide {
  display: none;
}

.paypal.showHide {
  display: block;
}

h1 {
  position: relative;
}

.underh1::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: white;
  bottom: 0;
  left: 0;
}


/* blog */

.blogcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.blogcard {
  display: flex;
  height: var(--card-height);
  justify-content: flex-start;
  background: var(--clr-card);
  border-radius: var(--brad);
  box-shadow: 0 0 18px rgba(0,0,0,0.6);
  overflow: hidden;
}

.blogimgcont {
  height: var(--card-height);
  width: var(--card-height);
  min-width: var(--card-height);
  overflow: hidden;
  position: relative;
}

.blogimgcont img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blogcardInfo h5:hover, .blogcardInfo h5:focus, .blogcardLink:hover, .blogcardLink:hover {
  color: var(--clr-acc-h);
}

.blogcardInfo h5, .blogcardLink {
  color: var(--clr-tit);
  transition: color 150ms ease-out;
}

.blogcardInfo {
  align-self: center;
  padding: 1rem 2rem;
}

.blogcardDesc {
  font-size: 1.4rem !important;
}

.blogcardLink {
  align-self: flex-end;
  margin-top: 1rem;
  text-decoration: underline;
}

@media (max-width: 1480px) {
  .blogcards {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 660px) {
  .blogcard {
    flex-direction: column;
    height: auto;
  }
  .blogimgcont {
    width: 100%;
  }
}


/* recursos */ 

.recursoscont {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.recurso {
  background: var(--clr-card);
}

.recursoimg {
  position: relative;
}

.recursoimg::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 25%;
  background: linear-gradient(transparent 0%, var(--clr-card) 80%);
  left: 0;
  bottom: 0;
}

.recursoinfo{
  height: 100%;
  padding: 0 1rem 1rem;
  justify-content: space-between;
}

@media (max-width: 1366px) {
  .recursoscont {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 930px) {
  .recursoscont {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .recursoscont {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* articulos */

.articulo {
  background: linear-gradient(var(--clr-dark) 100px, #121212 500px);
}

.articulo h1 {
  padding: 0 var(--padx);
}

.articulo h3 {
  color: var(--clr-tit);
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-decoration: underline;
}

.articulo p {
  margin-top: 1.8rem;
}

.articulo a {
  color: var(--clr-a);
}

.articulo a:hover,
.articulo a:focus {
  color: var(--clr-ah);
}

.articulo ul,
.articulo ol {
  padding-left: 1.5rem;
}

.articulo ul li {
  list-style-type: disc;
  margin-top: 1rem;
}

.articulo img {
  margin: 4rem auto .51rem;
  border-radius: var(--brad);
}

.articulo figcaption {
  text-align: center;
  font-style: italic;
}


/* curso */

#cursoTarot {
  padding-top: 120px;
}

#cursoTarot h1 {
  margin-bottom: 0;
}

#cursoTarot .sub {
  font-size: var(--fnt-h3);
  font-family: var(--ff-title);
}

#cursoTarot .sub::after {
  bottom: -10px;
}

#cursoTarot ul,
#cursoTarot ol {
  padding-left: 1.5rem;
}

#cursoTarot ul li {
  list-style-type: disc;
  margin-top: .51rem;
}

#cursoTarot ul li ul li {
  list-style-type: circle;
}

#cursoTarot .aprender ul li {
  list-style-type: "\2713";
}

#cursoTarot .aprender ul li::marker {
  color: lightgreen;
}


.outline {
  outline: 1px solid var(--clr-bright);
  outline-offset: -1px;
}

.padding-2 {
  padding: 2rem;
}

.padding-1 {
  padding: 1rem;
}

.aprender {
  outline: 1px solid var(--clr-bright);
  outline-offset: -1px;
  background-color: #1B112C;
  padding: 2rem;

  & p {
    margin-top: 1rem;
  }
}

#info-grupal li {
  list-style-type: circle;
  margin-left: 1rem;
  margin-bottom: .71rem;
}

.panel {
  /* padding: 0 2rem; */
  background: var(--clr-card);
  z-index: -1;
  /* margin-top: -2rem; */
  overflow: hidden;
  transition: max-height 250ms ease-out;
  max-height: max-content;
  border-bottom: solid 1px var(--clr-bright);
}

.none {
  /* display: none; */
  max-height: 0;
}

.itemInfo p {
  margin-bottom: 1rem;
}

.li-items li {
  list-style-type: circle !important;
  margin-left: 1.2rem;
}

.li-numbers li {
  list-style-type: decimal;
  margin-left: 2.4rem;
}

#lecturas-express .card {
  position: relative;
}


/* #lecturas-express .card::after { */
/*   content: '2x1'; */
/*   font-weight: 800; */
/*   font-size: clamp(.81rem, 1.72vw, 1.32rem); */
/*   position: absolute; */
/*   top: 0; */
/*   right: 12px; */
/*   background: linear-gradient(var(--clr-acc-h), var(--clr-ah)); */
/*   box-shadow: 0 2px 8px black; */
/*   padding: 1rem 1rem 1.4rem; */
/*   border-radius: 0 0 50px 50px; */
/* } */