CSS Moderno

:root {
  /* COLORES */
  --color-bg:      #0d0d0d;
  --color-surface: #161616;
  --color-border:  #2a2a2a;
  --color-text:    #e8e8e8;
  --color-muted:   #888888;
  --color-accent:  #f0e040;
  --color-danger:  #ff6b6b;
  --color-success: #6bffb8;

  /* TIPOGRAFÍA */
  --font-body:  'Syne', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --text-sm:    13px;
  --text-base:  15px;
  --text-lg:    18px;
  --text-xl:    24px;

  /* ESPACIADO */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* BORDES */
  --radius-sm:      2px;
  --radius-md:      4px;
  --border-default: 1px solid var(--color-border);
}

/* Uso: */
.card {
  background:    var(--color-surface);
  border:        var(--border-default);
  padding:       var(--space-lg);
  border-radius: var(--radius-md);
  font-size:     var(--text-base);
}

.flex-item {
  flex-grow:   1;       /* cuánto crece (0 = no crece) */
  flex-shrink: 0;       /* 0 = no se encoge */
  flex-basis:  200px;  /* tamaño base */

  /* Shorthand: */
  flex: 1;          /* grow:1, shrink:1, basis:0 */
  flex: 0 0 200px;  /* tamaño fijo */

  align-self: flex-start; /* sobreescribe align-items del padre */
  order:      -1;         /* cambia el orden visual */
}

/* ::before y ::after — contenido generado */
.section-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}

.required::after {
  content: ' *';
  color:   var(--danger);
}

/* ::placeholder — estilo del placeholder */
input::placeholder { color: var(--muted); }

/* ::selection — texto seleccionado */
::selection {
  background: var(--accent);
  color:      var(--bg);
}

.button {
  background: var(--surface);
  border:     1px solid var(--border);
  padding:    12px 24px;

  /* propiedad | duración | easing | delay */
  transition: background    0.2s ease,
              border-color 0.2s ease,
              transform    0.15s ease;
}

.button:hover {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--bg);
  transform:    translateY(-2px);
}

/* Easings más usados: */
/* ease | ease-in | ease-out | ease-in-out | linear */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.card   { animation: fadeIn 0.4s ease-out     both;     }
.dot    { animation: pulse  2s   ease-in-out  infinite; }
.loader { animation: spin   1s   linear       infinite; }

.elemento {
  animation-name:            fadeIn;
  animation-duration:        0.4s;
  animation-timing-function: ease-out;
  animation-delay:           0s;
  animation-iteration-count: 1;      /* o infinite */
  animation-direction:       normal;  /* reverse | alternate */
  animation-fill-mode:        both;    /* forwards | backwards */

  /* Shorthand equivalente: */
  animation: fadeIn 0.4s ease-out 0s 1 normal both;
}

/* Stagger: retrasar animaciones en una lista */
.card:nth-child(1) { animation-delay: 0ms;   }
.card:nth-child(2) { animation-delay: 80ms;  }
.card:nth-child(3) { animation-delay: 160ms; }

/* Respetar preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

<!-- HTML -->
<article class="card card--featured">
  <img class="card__image" src="..." alt="...">
  <div class="card__body">
    <h2 class="card__title">Título</h2>
    <p class="card__description">Resumen...</p>
    <a class="card__link card__link--primary">Leer más</a>
  </div>
</article>

/* CSS */
.card                { background: var(--surface); border: var(--border-default); }
.card--featured      { border-color: var(--accent); }
.card__image         { width: 100%; display: block; }
.card__body          { padding: 20px; }
.card__title         { font-size: 20px; font-weight: 700; }
.card__link          { display: inline-block; margin-top: 12px; }
.card__link--primary { background: var(--accent); color: var(--bg); }