/*RESET*/
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

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

*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

a{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

ul,ol{
  list-style: none;
}

#root, #__next {
  isolation: isolate;
}

/*MI CSS*/
:root{
    --black: #442C1B;
  --white: #E0D0B6;
  --gold: #CC9E4C;
  --deep-brown: #6B2717;
  --acc: #8B9EA6;
  --enlaces:#0094dd ;

  /*Z-index*/
  --top:200;
  --mid:100;
  --reset:0;
  --back:-1;

  /*Tamaño texto*/
  --titulo:3rem;
  --titulo-2:2.5rem;
  --titulo-3:2rem;
  --parrafo:1.5rem;
}

html.theme-dark {
  --black: #E0D0B6;
  --white: #442C1B;
  --gold: #8B9EA6;
  --deep-brown: #6B2717;
  --acc: #CC9E4C;
  --enlaces:#CC9E4C ;
}


body{
    font-family: "Cascadia Code", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    background-color: var(--white)!important;
    z-index: var(--reset);
    color: var(--black)!important;
}

.este{
    border: 2px solid red;
}
.pos-fix{
    position: fixed;
}
.pos-abs{
    position: absolute;
}
.pos-rel{
    position: relative;
}
.z-top{
    z-index: var(--top);
}
.z-mid{
    z-index: var(--mid);
}
.z-back{
    z-index: var(--back);
}
.bg-blue{
    background-color: var(--acc);
    color: var(--white);
}
.c-black{color: var(--black);}
.c-white{color: var(--white)!important;}
p,h1,h2,h3{color: var(--black)!important;}
a{color: var(--enlaces)!important;}
/*HEADER*/
.header{
    border-radius: 2rem;
    z-index: var(--top)
}
.header-content{
    width: 90%;
}
.header-content h1{
        font-size: calc(.5rem + 3vw);
    }
.header-img{
    width: 20%;
    height: auto;
}

.header-img::before{
    content: "Hecho por";
    font-size: calc( 5px  + 1vw);
    position: absolute;
    transform-origin: center;
    top: 0;
    bottom: 0;    
    transform: rotate(-95deg) translateY(4px) translateX(-13px) scale(70%);
    color: var(--white)!important;
}
.pos-header{
    bottom: 0;
}

/*BURGER*/
.burger{
    background-color: transparent;
    border: none;
    z-index: var(--top);
}

.stick{
    background-color: var(--black);
    height: 6px;
    width: 40px;
    margin: 5px;
    transition: all .5s ease;
}

.burger.open  .stick:first-of-type{
    transform: Rotate(45deg) translateY(15px);
}
.burger.open  .stick:nth-of-type(2){
    transform: scaleX(0);
    transition: all .4s ease;

}
.burger.open  .stick:last-of-type{
    transform: Rotate(-45deg) translateY(-15px);

}

.menu{
    bottom:0;
    right: calc(10px + 3vw);
    background-color: var(--acc);
    min-height: 100%;
    padding: 2rem;
    padding-bottom: 100px;
    border-radius: 2rem;
    z-index: var(--mid);
    transform-origin: center bottom;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.5s ease 0.5s, opacity 0.5s ease 0s;
   
}

.menu li{
        text-align: right;
        color: var(--black);
}

.menu.open{
    opacity: 100%;
   transform: scaleY(100%); 
   transition: transform 0.5s ease 0s, opacity 0.5s ease;
}

/*UI*/
.ui{
    color: var(--black);
    left: 0;
    right: 0;
    top: 0;
}

.ui-texto{
    border: 2px solid var(--white);
    background-color: var(--acc);
    color: var(--black);
    border-radius: 100px;
}

.ui-button{
    border: none;
    background-color: var(--black);
    color: var(--white);
    border-radius: 100px;
    height: 40px;
    width: 40px;
}


/*codepen*/
.toggle-btn {
  position: relative;
  height: 50px;
  width: 100px;
  background-color: var(--acc);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.4s ease;
}
.toggle-btn.active {
  background: var(--gold);
}
.toggle-btn .icon {
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  font-size: 30px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acc);
  border: 2px solid var(--white);
  border-radius: 50%;
  transition: all 0.4s ease;
}
.toggle-btn.active .icon {
  left: calc(100% - 59px);
  color: var(--deep-brown);
}
.toggle-btn.active .icon i {
  animation: spin 0.5s;
}
@keyframes spin {
  to {
    transform: rotate(0.5turn);
  }
}

/*FOOTER*/
.footer{
  height: 300px;
}


/*otras coass*/
figcaption{
  font-style: italic;
  font-size: .8rem;
  color: var(--enlaces)!important;
}