scss/
├── base/
│   └── _reset.scss        
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/
│   ├── _header.scss
│   └── _footer.scss
├── pages/
│   └── _home.scssinicio        
├── themes/
│   └── _default.scss
├── utils/
│   ├── _variables.scss    
│   └── _mixins.scss       
├── vendors/
│   └── _bootstrap.scss    
└── main.scss             



@import "utils/variables";
@import "utils/mixins";
@import "base/reset";
@import "layout/header";
@import "layout/footer";
@import "components/buttons";
@import "components/cards";
@import "pages/home";
@import "themes/default";
@import "vendors/bootstrap";

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.footer {
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .container {
        padding: 10px;
    }
    .footer {
        font-size: 0.9rem;
    }
}



$primary-color: #007bff;
$secondary-color: #6c757d;
$font-stack: 'Helvetica Neue', Helvetica, sans-serif;
$spacing-unit: 1rem;



@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin transition($prop: all, $time: 0.3s, $ease: ease-in-out) {
    transition: $prop $time $ease;
}



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

html, body {
    height: 100%;
    font-family: $font-stack;
}


button.agregar-carrito {
  @include transition(transform 0.3s ease, box-shadow 0.3s ease);

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px rgba(0, 123, 255, 0.3);
  }

  &:active {
    transform: scale(0.95);
  }
}


.card {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease forwards;

  &:nth-child(2) {
    animation-delay: 0.1s;
  }
  &:nth-child(3) {
    animation-delay: 0.2s;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



header {
  animation: slideDown 0.5s ease-in-out;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}



img {
  @include transition(transform 0.4s ease);
  &:hover {
    transform: scale(1.03);
  }
}



h2, p {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}