:root{
  --black: #000000;
  --white: #ffffff;
  --primary: #A44200;
  --background: #FFF6EE;
    /* --background: #FFF4E9; */

  --main-font: 'IBM Plex sans', system-ui;
  --paragraph-font: 'Work Sans', system-ui;

  --s: 50px;
  --c: #141414;
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%,#1f2022 68% 70%,#0000 72%;
}

html{
  width: auto;
  font-size: 10px;
  font-family: var(--paragraph-font); 
  overflow-x: hidden;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  /* background-color: var(--black); */
  box-sizing: border-box;

  background:  
    radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
    radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s), 
    radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), 
    radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), 
    repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), 
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);
  background-attachment: fixed;
}

.body__container{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* TITLE ------------ */

h1{
  font-size: 5rem;
  font-weight: bold;
  font-family: var(--main-font);
  color: var(--background);
  letter-spacing: 0.25rem;
}

h2{
  font-size: 2.75rem;
  font-weight: bold;
  font-family: var(--main-font);
  color: var(--background);
  letter-spacing: 0.25rem;
}

h3{
  font-size: 2rem;
  font-weight: 600;
  font-family: var(--main-font);
  color: var(--primary);
  letter-spacing: 0.25rem;
}


.title {
  width: 100%;
  padding: 5rem;

  display: flex;
  flex-direction: column; /* Cambiado para que los elementos estén uno encima del otro */
  justify-content: center;
  align-items: center;
}
.title h1, .title h3{
  width: auto;
  margin: 0;
  padding: 1rem;
  
}

p {
  line-height: 1.5em;
}

.p {
    font-size:20px; 
    font-weight:bold;
    color:hsl(120, 0%, 10%)
    }

h1, p + p {
  margin-top: 30px;
}


.container {
  width: auto;
  display: -webkit-box;
  display: flex;
  padding: 4%;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
}


a:link {
  color:var(--primary);
}


footer {
  display: flex;
  align-content: center;
  justify-content: center;
  padding: 2.5rem;
  width: auto;
  width: 100%;
  /* background-color: var(--black); */
}

footer .socialmedia{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 11px;
  width: 38px;
  height: 38px;
  opacity: 0.9;
  transition: 0.2s;
}
footer .socialmedia img{
  border-radius: 4px;
}
footer .socialmedia:hover{
  opacity: 0.6;
}
footer button{
  background-color: #a4420000; /* Highlight color */
  color: var(--primary);
  border: none;
  font-weight: 600;
  padding: 1.25rem;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 0rem;
  transition: all 0.3s ease;
}
footer button:hover{
  background-color: #a4420000; /* Highlight color */
  color: var(--primary);
  opacity: 0.7;
}



.light {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  pointer-events: none; /* Permite que el cursor interactúe con otros elementos */
  background: radial-gradient(circle, rgba(104, 59, 22, 0.3), rgba(41, 29, 19, 0.1) 60%, rgba(255, 255, 255, 0) 90%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen; /* Permite un efecto de fusión con el fondo */
}

/* CARDS ------------- */



.card-wrap {
  margin: 2rem;
  -webkit-transform: perspective(800px);
          transform: perspective(800px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  cursor: pointer;
}
.card-wrap:hover .card-info {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.card-wrap:hover .card-info p {
  opacity: 1;
}
.card-wrap:hover .card-info, .card-wrap:hover .card-info p {
  -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-wrap:hover .card-info:after {
  -webkit-transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.card-wrap:hover .card-bg {
  -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0.8;
}
.card-wrap:hover .card {
  filter: brightness(1.1) grayscale(0);
  -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, var(--primary) 0 0 0 4px, rgba(29, 29, 29, 0.551) 0 30px 60px 0, inset #333 0 0 0 5px, inset var(--background) 0 0 0 6px;
}

.card {
  filter: brightness(1.1) grayscale(1);
  position: relative;
  -webkit-box-flex: 0;
          flex: 0 0 240px;
  width: 230px;
  height: 310px;
  background-color: #333;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: rgba(35, 35, 35, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
  -webkit-transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.card-bg {
  opacity: 0.5;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  pointer-events: none;
}

.card-info {
  padding: 20px;
  position: absolute;
  bottom: 0; /* Coloca el contenido en la parte inferior */
  color: var(--background);
  -webkit-transform: translateY(23%);
          transform: translateY(23%);
  -webkit-transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-info p {
  opacity: 0;
  text-shadow: black 0 2px 3px;
  -webkit-transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-info * {
  position: relative;
  z-index: 1;
}
.card-info:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.6)));
  background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  background-blend-mode: overlay;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.card-info h1 {
  font-size: 34px;
  padding: 0.2rem;
  font-weight: 600;
  text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
}

@media (min-width: 375px) {
  .title{
     align-items: center;
  }
}
@media (min-width: 672px) {
  .body__container{
    margin-top: 1rem;
  }
  .container{
    padding: 3rem 1.5rem;
  }
}


@media (max-width: 600px){
  footer{
    display: flex;
    flex-wrap: wrap;

}
footer .socialmedia{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom:1rem;
    opacity: 0.9;
    transition: 0.2s;
  }
  footer .socialmedia img{
    width: 38px;
    height: 38px;
  }
  footer button{
    width: 65%;
    margin-top:8rem;
    margin:0;
  }
}