:root {
      --rosa: #E4007C;
      --celeste: #00A3E0;
      --amarillo: #FDD600;
      --verde: #3BB54A;
      --rojo: #C1272D;
      --negro: #1C1C1C;
      --blanco: #FFFFFF;
      --beige: #F5F5DC;
      --rojo-oscuro: #D32F2F;
      --rosa-oscuro: #D32F70;
      --aqua: #00A8B5;
      --verde-claro: #6FC644;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(to bottom, var(--beige), var(--blanco));
      color: var(--negro);
      animation: fadeInPage 1s ease-in;
    }

    header {
      background-color: var(--celeste);
      color: var(--blanco);
      text-align: center;
      padding: 2rem;
      animation: slideDown 1s ease-in-out;
    }

    header h1 {
      margin: 0;
      font-size: 3rem;
      text-shadow: 2px 2px var(--rosa);
    }

    .container {
      max-width: 900px;
      margin: 2rem auto;
      background-color: rgba(255, 255, 255, 0.95);
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      animation: slideUp 1s ease-out;
    }

    .story-section {
      margin-bottom: 2rem;
    }

    .story-section h2 {
      color: var(--verde-claro);
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }

    .story-section p {
      line-height: 1.6;
      font-size: 1.1rem;
    }

    .story-section img {
      width: 70%;
		height: auto;
      border-radius: 10px;
      margin-top: 1rem;
      border: 4px solid var(--rosa-oscuro);
      animation: fadeInImage 2s ease-in-out;
    }

    footer {
      background-color: var(--negro);
      color: var(--blanco);
      text-align: center;
      padding: 1rem;
      margin-top: 3rem;
    }

    @keyframes fadeInPage {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideDown {
      from { transform: translateY(-40px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

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

    @keyframes fadeInImage {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }@charset "utf-8";
/* CSS Document */