/* Variables para colores principales */
:root {
	  --main-color: #FF6266;
	    --bg-color: #221f29;
	      --border-color: rgba(255,255,255,0.1);
	        --text-color: #fff;
		  --placeholder-color: rgba(255,98,102,0.5);
	  }

	  /* Fuentes */
	  @font-face {
		    font-display: swap;
		      font-family: 'Fira Code';
		        font-style: normal;
			  font-weight: 400;
			    src: url("../fonts/FiraCode-Regular.woff") format("woff");
		    }
		    @font-face {
			      font-display: swap;
			        font-family: 'Fira Code';
				  font-style: normal;
				    font-weight: 800;
				      src: url("../fonts/FiraCode-Bold.woff") format("woff");
			      }

			      /* Reset y base */
			      html { box-sizing: border-box; }
			      *, *:before, *:after { box-sizing: inherit; }
			      body {
				        margin: 0;
					  padding: 0;
					    font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
					      font-size: 1rem;
					        line-height: 1.54;
						  letter-spacing: -0.02em;
						    background-color: var(--bg-color);
						      color: var(--text-color);
						        text-rendering: optimizeLegibility;
							  -webkit-font-smoothing: antialiased;
							    font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
							      font-variant-ligatures: contextual;
							        -webkit-overflow-scrolling: touch;
								  -webkit-text-size-adjust: 100%;
							  }

							  /* Botones */
							  .button, button, a.button {
								    position: relative;
								      display: flex;
								        align-items: center;
									  justify-content: center;
									    padding: 8px 18px;
									      margin: 5px 0;
									        text-decoration: none;
										  text-align: center;
										    border-radius: 8px;
										      border: 1px solid var(--main-color);
										        background: var(--main-color);
											  color: var(--bg-color);
											    font: inherit;
											      font-weight: bold;
											        appearance: none;
												  cursor: pointer;
												    outline: none;
											    }
											    .button:hover, button:hover, a.button:hover {
												      background: rgba(255,98,102,0.9);
											      }
											      .button.outline, button.outline, a.button.outline {
												        background: transparent;
													  box-shadow: none;
												  }
												  .button.link, button.link, a.button.link {
													    background: none;
													      font-size: 1rem;
												      }
												      .button.small, button.small, a.button.small {
													        font-size: .8rem;
													}
													.button.wide, button.wide, a.button.wide {
														  min-width: 200px;
														    padding: 14px 24px;
													    }

													    /* Inputs y selects */
													    input, textarea, select {
														      background: transparent;
														        color: var(--main-color);
															  border: 1px solid var(--main-color);
															    border-radius: 0;
															      padding: 10px;
															        margin: 5px 0;
																  font: inherit;
																    appearance: none;
															    }
															    input:focus, textarea:focus, select:focus {
																      border-color: #fff;
																        outline: 1px solid #fff;
																}
																input[type="checkbox"] {
																	  vertical-align: middle;
																	    box-shadow: inset 0 0 0 3px var(--bg-color);
																    }
																    input[type="checkbox"]:checked {
																	      background: var(--main-color);
																      }
																      select, select option {
																	        background: var(--bg-color);
																	}
																	::placeholder {
																		  color: var(--placeholder-color);
																	  }

																	  /* Contenedores y layout */
																	  .container {
																		    display: flex;
																		      flex-direction: column;
																		        padding: 40px;
																			  max-width: 864px;
																			    min-height: 100vh;
																			      border-right: 1px solid var(--border-color);
																		      }
																		      .container.full, .container.center {
																			        border: none;
																				  margin: 0 auto;
																			  }
																			  .container.full {
																				    max-width: 100%;
																			    }
																			    @media (max-width: 684px) {
																				      body, .container { font-size: 1rem; padding: 20px; }
																			      }

																			      /* Header y navegación */
																			      .header {
																				        display: flex;
																					  flex-direction: column;
																					    position: relative;
																				    }
																				    @media print { .header { display: none; } }
																				    .header__inner {
																					      display: flex;
																					        align-items: center;
																						  justify-content: space-between;
																					  }
																					  .header__logo {
																						    display: flex;
																						      flex: 1;
																					      }
																					      .header__logo:after {
																						        content: '';
																							  background: repeating-linear-gradient(90deg, var(--main-color), var(--main-color) 2px, transparent 0, transparent 10px);
																							    display: block;
																							      width: 100%;
																							        right: 10px;
																							}
																							.header__logo a {
																								  flex: 0 0 auto;
																								    max-width: 100%;
																								      text-decoration: none;
																							      }
																							      /* ... (continúa agrupando y simplificando el resto de las reglas como en los ejemplos anteriores) ... */

																							      /* Ejemplo de agrupación para media queries */
																							      @media (max-width: 684px) {
																								        .navigation-menu { margin: 0; }
																									  .navigation-menu__inner {
																										      flex-direction: column;
																										          align-items: flex-start;
																											      padding: 0;
																											        }
																												  .navigation-menu__inner li {
																													      margin: 0;
																													          padding: 5px;
																														    }
																														      .menu--desktop { display: none; }
																														        .menu--mobile .menu__trigger { display: block; }
																															  .menu--mobile .menu__dropdown { left: auto; right: 0; }
																															    pre { white-space: pre-wrap; word-wrap: break-word; }
																															      blockquote { padding-right: 0; }
																															        .post-cover { padding: 10px; border-width: 10px; }
																																  ul, ol { margin-left: 20px; }
																															  }

																															  /* ... (continúa con la misma lógica para el resto del CSS) ... */