/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** 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: 139, 78, 93;
  /* Vino de marca oscurecido: pasa contraste AA sobre fondos crema */
  --color-main-shade: #6e3d49;
  --color-main-dark: #3a1f27;
  --color-main-dark-rgb: 58, 31, 39;
  --color-main-soft: #6b4b53;
  --color-main2: #f7efe9;
  --color-second: #ff5850;
  --color-second-rgb: 235, 94, 40;
  --color-title: #000000;
  --color-title-rgb: 0, 0, 0;
  --color-border: #d8d1ce; 
  --color-text2: #eae0d5;
  --color-text2-rgb: 234, 224, 213;
  --color-tech: rgba(255, 255, 255, 0.03);
  --color-overlay-dark-rgb: 6, 5, 14;

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

  /* Neutros base (sombras, overlays y textos sobre imagen) */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-text-light: #f0f0f0;

  /* Verde del boton flotante de WhatsApp (tono sage, distinto al del header) */
  --color-whatsapp-float: #599a53;
  --color-whatsapp-float-rgb: 89, 154, 83;

  --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: var(--color-main);
  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*/