/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
:root {
  --color-main: #8b4e5d;
  --color-main-rgb: 6, 5, 14;
  --color-main2: #f3d2d1;
  --color-second: #ff5850;
  --color-second-rgb: 235, 94, 40;
  --color-title: #000000;
  --color-title-rgb: 218, 194, 158;
  --color-border: #d8d1ce; 
  --color-text2: #eae0d5;
  --color-tech: rgba(255, 255, 255, 0.03);

  --color-btn-contact: #7a3eff;
  --color-btn-linkedin: #0077b5;
  --color-btn-whatsapp: #25D366;
  --color-btn-tiktok: #000000;

  --sidebar-desktop: 290px;
  --sidebar-tablet: 200px;
  --sidebar-mobile: 140px;

  /* Typography */
  /* Títulos con mucha personalidad y estilo "Fat Face" */
  --font-title: 'Abril Fatface', serif;

  /* Subtítulos modernos y claros para jerarquía media */
  --font-subtitle: 'Poppins', sans-serif;

  /* Texto de cuerpo altamente legible para lectura fluida */
  --font-text: 'Poppins', sans-serif;
}


/* You can add global styles to this file, and also import other style files */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #8b4e5d;
  font-family: var(--font-text);
  /* Global text font */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
}

.subtitle {
  font-family: var(--font-subtitle);
}

/* Animación de desvanecimiento (header superior) */
.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* Animación de entrada desde la izquierda (sidebar) */
.slide-in {
  animation: slideIn 0.8s ease forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/*# sourceMappingURL=styles.css.map*/