* {
    padding: 0px;
    margin: 0px;
}

/* MARGENES */
/* Background Colors */
/* Background Colors */
.bg-d {
    background-color: #dc3545; /* Color rojo peligroso */
  }
  
  .bg-p {
    background-color: #007bff; /* Color azul primario */
  }
  
  .bg-p-d {
    background-color: #1a237e; /* Modo oscuro azul primario */
  }
  
  .bg-p-l {
    background-color: whitesmoke; /* Modo claro azul primario */
  }
  
  .bg-p-n {
    background-color: #1976d2; /* Fondo neutro azul primario */
  }
  
  .bg-q-d {
    background-color: #c2185b; /* Modo oscuro color quaternary */
  }
  
  .bg-q-l {
    background-color: #ffc107; /* Modo claro color quaternary */
  }
  
  .bg-q-n {
    background-color: #ff5722; /* Fondo neutro color quaternary */
  }
  
  .bg-s {
    background-color: #6c757d; /* Color gris secundario */
  }
  
  .bg-s-d {
    background-color: #1b5e20; /* Modo oscuro gris secundario */
  }
  
  .bg-s-l {
    background-color: lightgreen; /* Modo claro gris secundario */
  }
  
  .bg-s-n {
    background-color: #4caf50; /* Fondo neutro gris secundario */
  }
  
  .bg-su {
    background-color: #28a745; /* Color verde exitoso */
  }
  
  .bg-t-d {
    background-color: #5d4037; /* Modo oscuro color tertiary */
  }
  
  .bg-t-l {
    background-color: #f5f5f5; /* Modo claro color tertiary */
  }
  
  .bg-t-n {
    background-color: #9e9e9e; /* Fondo neutro color tertiary */
  }
  
  /* Border Radius */
  .br-1 {
    border-radius: 1px;
  }
  
  .br-2 {
    border-radius: 2px;
  }
  
  .br-21 {
    border-radius: 21px;
  }
  
  .br-25 {
    border-radius: 25px;
  }
  
  .br-3 {
    border-radius: 3px;
  }
  
  .br-4 {
    border-radius: 4px;
  }
  
  .br-5 {
    border-radius: 5px;
  }
  
  .br-50 {
    border-radius: 50%;
  }
  
  /* Colors */
  .color-danger {
    color: #dc3545; /* Color rojo peligroso */
  }
  
  .color-primary {
    color: #007bff; /* Color azul primario */
  }
  
  .color-secondary {
    color: #6c757d; /* Color gris secundario */
  }
  
  .color-success {
    color: #28a745; /* Color verde exitoso */
  }
  
  .color-warning {
    color: #ffc107; /* Color amarillo de advertencia */
  }
  
  /* Display Grid */
  .display-grid {
    display: grid;
  }
  
  /* Flex Classes */
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .flex-row-around {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  
  .flex-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  /* Flex Directions */
  .flex-column {
    display: flex;
    flex-direction: column;
  }
  
  .flex-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .flex-row {
    flex-direction: row;
  }
  
  .flex-row-reverse {
    display: flex;
    flex-direction: row;
    flex-direction: row-reverse;
  }
  
  /* Font size */
  .font-15 {
    font-size: 15px;
  }
  
  .font-21 {
    font-size: 21px;
  }
  
  .font-27 {
    font-size: 27px;
  }
  
  .font-3 {
    font-size: 3px;
  }
  
  .font-33 {
    font-size: 33px;
  }
  
  .font-39 {
    font-size: 39px;
  }
  
  .font-45 {
    font-size: 45px;
  }
  
  .font-51 {
    font-size: 51px;
  }
  
  .font-6 {
    font-size: 6px;
  }
  
  .font-9 {
    font-size: 9px;
  }
  
  /* Grid Columns */
  .grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  

/* Margen */
.mg-auto {
    margin: auto;
  }
  .mg-all-3 {
    margin: 3px;
  }
  .mg-all-6 {
    margin: 6px;
  }
  .mg-all-9 {
    margin: 9px;
  }
  .mg-all-15 {
    margin: 15px;
  }
  .mg-all-21 {
    margin: 21px;
  }
  
  .mg-l-3 {
    margin-left: 3px;
  }
  .mg-l-6 {
    margin-left: 6px;
  }
  .mg-l-9 {
    margin-left: 9px;
  }
  .mg-l-15 {
    margin-left: 15px;
  }
  .mg-l-21 {
    margin-left: 21px;
  }
  
  .mg-r-3 {
    margin-right: 3px;
  }
  .mg-r-6 {
    margin-right: 6px;
  }
  .mg-r-9 {
    margin-right: 9px;
  }
  .mg-r-15 {
    margin-right: 15px;
  }
  .mg-r-21 {
    margin-right: 21px;
  }
  
  .mg-t-3 {
    margin-top: 3px;
  }
  .mg-t-6 {
    margin-top: 6px;
  }
  .mg-t-9 {
    margin-top: 9px;
  }
  .mg-t-15 {
    margin-top: 15px;
  }
  .mg-t-21 {
    margin-top: 21px;
  }
  
  .mg-b-3 {
    margin-bottom: 3px;
  }
  .mg-b-6 {
    margin-bottom: 6px;
  }
  .mg-b-9 {
    margin-bottom: 9px;
  }
  .mg-b-15 {
    margin-bottom: 15px;
  }
  .mg-b-21 {
    margin-bottom: 21px;
  }
  
  /* Padding */
  .p-3 {
    padding: 3px;
  }
  .p-6 {
    padding: 6px;
  }
  .p-9 {
    padding: 9px;
  }
  .p-15 {
    padding: 15px;
  }
  .p-21 {
    padding: 21px;
  }
  
  .pd-l-3 {
    padding-left: 3px;
  }
  .pd-l-6 {
    padding-left: 6px;
  }
  .pd-l-9 {
    padding-left: 9px;
  }
  .pd-l-15 {
    padding-left: 15px;
  }
  .pd-l-21 {
    padding-left: 21px;
  }
  
  .pd-r-3 {
    padding-right: 3px;
  }
  .pd-r-6 {
    padding-right: 6px;
  }
  .pd-r-9 {
    padding-right: 9px;
  }
  .pd-r-15 {
    padding-right: 15px;
  }
  .pd-r-21 {
    padding-right: 21px;
  }
  
  .pd-t-3 {
    padding-top: 3px;
  }
  .pd-t-6 {
    padding-top: 6px;
  }
  .pd-t-9 {
    padding-top: 9px;
  }
  .pd-t-15 {
    padding-top: 15px;
  }
  .pd-t-21 {
    padding-top: 21px;
  }
  
  .pd-b-3 {
    padding-bottom: 3px;
  }
  .pd-b-6 {
    padding-bottom: 6px;
  }
  .pd-b-9 {
    padding-bottom: 9px;
  }
  .pd-b-15 {
    padding-bottom: 15px;
  }
  .pd-b-21 {
    padding-bottom: 21px;
  }
  /* Header Simple (.header-simple) */
.header-simple {
    background-color: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
  }
  
  /* Header con Barra de Búsqueda (.header-search) */
  .header-search {
    background-color: #6c757d;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-search input[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
  }
  
  /* Header con Botones de Acción (.header-action) */
  .header-action {
    background-color: #28a745;
    color: white;
    padding: 10px;
    text-align: right;
  }
  
  /* Header con Información de Contacto (.header-contact) */
  .header-contact {
    background-color: #ffc107;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-contact .contact-info {
    font-size: 14px;
  }
  
  /* Header con Menú Desplegable (.header-dropdown) */
  .header-dropdown {
    background-color: #dc3545;
    color: white;
    padding: 10px;
  }
  
  .header-dropdown .menu {
    display: flex;
    list-style: none;
  }
  
  .header-dropdown .menu li {
    margin-right: 10px;
  }
  
  /* Header con Banners o Sliders (.header-banner) */
  .header-banner {
    background-color: #1a237e;
    color: white;
    padding: 10px;
    text-align: center;
  }
  
  /* Header Fijo (.header-fixed) */
  .header-fixed {
    background-color: #1b5e20;
    color: white;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  
  /* Header Transparente (.header-transparent) */
  .header-transparent {
    background-color: transparent;
    color: white;
    padding: 10px;
  }
  
  /* Header con Iconos de Redes Sociales (.header-social) */
  .header-social {
    background-color: #4caf50;
    color: white;
    padding: 10px;
  }
  
  .header-social .social-icons {
    display: flex;
    list-style: none;
  }
  
  .header-social .social-icons li {
    margin-right: 10px;
  }